diff --git a/frappe/public/js/frappe/views/image/image_view.js b/frappe/public/js/frappe/views/image/image_view.js
index 00cd32b3e1..ff8d1c9164 100644
--- a/frappe/public/js/frappe/views/image/image_view.js
+++ b/frappe/public/js/frappe/views/image/image_view.js
@@ -59,7 +59,6 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
this.$result.html(`
${this.get_header_html()}
-
${html}
diff --git a/frappe/public/scss/filters.scss b/frappe/public/scss/filters.scss
index 03a5cc03c7..49f70acbf1 100644
--- a/frappe/public/scss/filters.scss
+++ b/frappe/public/scss/filters.scss
@@ -10,43 +10,46 @@
font-size: var(--text-md);
}
-.filter-box {
- padding: var(--padding-xs) var(--padding-md) var(--padding-xs) 0;
+.filter-area {
+ .filter-box {
+ padding: var(--padding-xs) var(--padding-md) var(--padding-xs) 0;
- .form-group {
- @include media-breakpoint-up(xs) {
- margin-bottom: 0;
+ .form-group {
+ @include media-breakpoint-up(xs) {
+ margin-bottom: 0;
+ }
+ }
+
+ .remove-filter {
+ cursor: pointer;
+ line-height: 2;
+ }
+
+ .filter-field {
+ .frappe-control {
+ position: relative;
+ margin-bottom: 0;
+ }
}
}
- .remove-filter {
- cursor: pointer;
- line-height: 2;
- }
+ .filter-action-buttons {
+ display: flex;
+ justify-content: space-between;
- .filter-field {
- .frappe-control {
- position: relative;
- margin-bottom: 0;
+ .add-filter {
+ line-height: 2;
+ cursor: pointer;
}
}
-}
-.filter-action-buttons {
- display: flex;
- justify-content: space-between;
-
- .add-filter {
- line-height: 2;
- cursor: pointer;
+ .divider {
+ margin-right: -10px;
+ margin-left: -10px;
+ background-color: var(--border-color);
}
}
-.divider {
- margin-right: -10px;
- margin-left: -10px;
-}
-
// for sm and above
@include media-breakpoint-up(sm) {
.filter-box .row > div[class*="col-sm-"] {
diff --git a/frappe/public/scss/global.scss b/frappe/public/scss/global.scss
index 40403b4df1..3473459bb0 100644
--- a/frappe/public/scss/global.scss
+++ b/frappe/public/scss/global.scss
@@ -204,6 +204,7 @@ select.input-xs {
.popover {
border-radius: 4px;
+ background-color: var(--popover-bg);
.popover-content {
padding: 14px;
@@ -258,11 +259,11 @@ input[type="checkbox"] {
line-height: 11px;
content: url('/assets/frappe/icons/frapicon-checkbox.svg');
visibility: visible;
- border: 1px solid #C8CFD5;
+ border: 1px solid var(--gray-400);
box-sizing: border-box;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px;
- background: #FFFFFF;
+ background: var(--fg-color);
}
&:checked:before {
diff --git a/frappe/public/scss/icons.scss b/frappe/public/scss/icons.scss
index ddf3c9646b..1a1179ea1b 100644
--- a/frappe/public/scss/icons.scss
+++ b/frappe/public/scss/icons.scss
@@ -15,6 +15,10 @@
stroke: var(--gray-700);
}
+#icon-close {
+ fill: var(--gray-600);
+}
+
/* like icon */
use.like-icon {
cursor: pointer;
diff --git a/frappe/public/scss/image-view.scss b/frappe/public/scss/image-view.scss
index 1a7f827b8c..2ca93ef007 100644
--- a/frappe/public/scss/image-view.scss
+++ b/frappe/public/scss/image-view.scss
@@ -2,11 +2,8 @@
.image-view {
.list-header-subject {
- // border-bottom: 1px solid $border-color;
-
.list-image-header {
display: flex;
- margin-left: 15px;
}
.list-count {
@@ -17,31 +14,19 @@
.list-image-header-item {
display: flex;
align-items: center;
- margin-right: 20px;
+ margin-right: var(--margin-lg);
div {
- margin-left: 5px;
+ margin-left: var(--margin-xs);
}
}
}
- .image-view-divider {
- border-color: $border-color;
- margin: -5px 0 0 30px
- // margin-left: 30px;
- // margin-top: 0;
- }
-
.image-view-container {
display: grid;
- grid-template-columns: repeat(4, 1fr);
- column-gap: 20px;
+ grid-template-columns: repeat(5, 1fr);
max-width: 100%;
- row-gap: 20px;
- padding-left: 30px;
- padding-top: 20px;
- padding-bottom: 20px;
.image-view-row {
display: flex;
@@ -49,13 +34,11 @@
}
.image-view-item {
- padding: 10px 15px;
+ padding: var(--padding-sm) var(--padding-md);
display: flex;
flex-direction: column;
- height: 260px;
- box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 66, 0.1);
- border-radius: 8px;
- border: 1px solid $border-color;
+ height: 250px;
+ border-radius: var(--border-radius);
.list-row-checkbox {
&:before {
@@ -63,42 +46,40 @@
}
&:checked:before {
- // content: url("data:image/svg+xml; utf8, ");
- // content: url('/assets/frappe/icons/frapicon-checkbox-selected.svg');
- // background: linear-gradient(180deg, #4AC3F8 -124.51%, #2490EF 100%);
display: block;
}
}
+
+ .not-liked {
+ display: none;
+ }
}
.image-view-item:hover {
- // box-shadow: none;
border: none;
- box-shadow: 0px 0px 2px rgba(17, 43, 66, 0.16), 0px 1px 5px rgba(17, 43, 66, 0.1);
+ background-color: var(--control-bg);
.list-row-checkbox {
&:before {
display: block;
}
}
- // padding: 10px 15px;
- // display: flex;
- // flex-direction: column;
- // height: 260px;
- // box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 66, 0.1);
- // border-radius: 8px;
- // border: 1px solid $border-color;
+
+ .not-liked {
+ display: block;
+ }
}
.image-view-header {
- margin-bottom: 10px;
+ height: 20px;
+ margin-bottom: var(--margin-sm);
display: flex;
justify-content: space-between;
align-items: center;
}
.image-view-info {
- margin-top: 5px;
+ margin-top: var(--margin-xs);
font-size: $font-size-sm;
color: var(--gray-600);
margin-bottom: 0;
@@ -113,9 +94,6 @@
text-decoration: none;
}
- // display: flex;
- // justify-content: center;
- // margin-bottom: 25px;
height: 130px;
width: 130px;
margin: 0 auto;
@@ -138,7 +116,6 @@
img {
max-width: 100%;
- // height: 100%;
max-height: 100%;
border-radius: $border-radius;
color: transparent;
@@ -151,19 +128,14 @@
justify-content: center;
align-items: center;
z-index: 1;
- // top: -60px;
left: 0;
position: absolute;
min-width: 130px;
min-height: 130px;
padding: 0;
- // border-radius: $border-radius;
- // background-color: var(--blue-50);
background: var(--gray-50);
- /* max-height: 100%; */
}
&.no-image {
- // background-color: var(--blue-50);
line-height: 130px;
height: 130px;
background-color: var(--gray-50);
@@ -184,13 +156,12 @@
font-weight: 500;
justify-content: start;
align-items: center;
- margin-top: 30px;
+ margin-top: var(--margin-lg);
}
.placeholder-text {
font-size: $font-size-5xl;
color: var(--gray-500);
- // color: var(--blue-400);
}
.zoom-view {
@@ -202,7 +173,7 @@
bottom: 3px;
right: 3px;
opacity: 0;
- font-size: 16px;
+ font-size: $font-size-lg;
position: absolute;
background: var(--gray-300);
border-radius: $border-radius;
diff --git a/frappe/public/scss/list.scss b/frappe/public/scss/list.scss
index 321a10639b..383c14a9f4 100644
--- a/frappe/public/scss/list.scss
+++ b/frappe/public/scss/list.scss
@@ -89,7 +89,7 @@
font-size: var(--text-md);
&:hover {
- background-color: $gray-50;
+ background-color: var(--control-bg);
}
&:last-child {
border-bottom: 0px;
@@ -179,7 +179,7 @@
}
.list-paging-area, .footnote-area {
- border-top: 1px sol var(--gray-100);
+ border-top: 1px sol var(--border-color);
}
.frappe-card {
@@ -244,7 +244,7 @@ input.list-check-all, input.list-row-checkbox {
font-size: var(--text-md);
&:hover {
- background-color: $gray-50;
+ background-color: var(--control-bg);
}
// @media (max-width: $screen-xs) {
@@ -256,7 +256,7 @@ input.list-check-all, input.list-row-checkbox {
// }
&--head {
- background-color: $gray-50;
+ background-color: var(--control-bg);
border-bottom: 1px solid $border-color;
cursor: auto;
}
diff --git a/frappe/public/scss/page.scss b/frappe/public/scss/page.scss
index 2e8d7a0271..f1c958164c 100644
--- a/frappe/public/scss/page.scss
+++ b/frappe/public/scss/page.scss
@@ -79,7 +79,7 @@
display: flex;
flex-wrap: wrap;
background-color: var(--card-bg);
- border-bottom: 1px solid var(--gray-100);
+ border-bottom: 1px solid var(--border-color);
.form-group {
padding: 0px 5px;
diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss
index 86f373a5ef..89a4c4c683 100644
--- a/frappe/public/scss/variables.scss
+++ b/frappe/public/scss/variables.scss
@@ -104,7 +104,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
--orange-300: #FDAE8C;
--orange-200: #FECDB8;
--orange-100: #FFEAE1;
- --orange-050: #FFF5F0;
+ --orange-50: #FFF5F0;
--purple-900: #343360;
--purple-800: #45438F;
@@ -167,6 +167,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
--control-bg: var(--gray-100);
--modal-bg: white;
--toast-bg: var(--modal-bg);
+ --popover-bg: white;
--sidebar-select-color: var(--gray-200);
@@ -260,6 +261,7 @@ $dropdown-item-padding-x: 0.5rem !default;
--control-bg: var(--gray-700);
--modal-bg: var(--gray-700);
--toast-bg: var(--modal-bg);
+ --popover-bg: var(--bg-color);
--sidebar-select-color: var(--gray-800);