diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss
index 23e2fba48b..cdd35704c9 100644
--- a/frappe/public/scss/common/global.scss
+++ b/frappe/public/scss/common/global.scss
@@ -82,3 +82,25 @@ html.firefox, html.safari {
.frappe-card {
@include card();
}
+
+.frappe-control[data-fieldtype="Select"] .control-input {
+ position: relative;
+
+ select {
+ /* for Firefox */
+ -moz-appearance: none;
+ /* for Chrome */
+ -webkit-appearance: none;
+ }
+
+ .icon {
+ position: absolute;
+ top: 8px;
+ height: 15px;
+ right: 12px;
+ pointer-events: none;
+ use {
+ stroke: var(--text-muted);
+ }
+ }
+}
\ No newline at end of file
diff --git a/frappe/public/scss/desk/controls.scss b/frappe/public/scss/desk/controls.scss
index 54ad71dce1..8069374553 100644
--- a/frappe/public/scss/desk/controls.scss
+++ b/frappe/public/scss/desk/controls.scss
@@ -124,28 +124,6 @@
}
}
-.frappe-control[data-fieldtype="Select"] .control-input {
- position: relative;
-
- select {
- /* for Firefox */
- -moz-appearance: none;
- /* for Chrome */
- -webkit-appearance: none;
- }
-
- .icon {
- position: absolute;
- top: 8px;
- height: 15px;
- right: 12px;
- pointer-events: none;
- use {
- stroke: var(--text-muted);
- }
- }
-}
-
.ace_editor {
background-color: var(--control-bg);
color: var(--text-color);
diff --git a/frappe/public/scss/website/website_image.scss b/frappe/public/scss/website/website_image.scss
index 8e97ccf8fb..a08f3a4ba7 100644
--- a/frappe/public/scss/website/website_image.scss
+++ b/frappe/public/scss/website/website_image.scss
@@ -5,19 +5,34 @@ img {
}
// fallback for broken images
+// img:after {
+// content: url("data:image/svg+xml;utf8,");
+// display: flex;
+// justify-content: center;
+// align-items: center;
+// position: absolute;
+// z-index: 1;
+// top: 0;
+// left: 0;
+// width: 100%;
+// height: 100%;
+// background-color: $light;
+// padding: 50% 0;
+// }
+
img:after {
content: url("data:image/svg+xml;utf8,");
- display: flex;
- justify-content: center;
- align-items: center;
+}
+
+img[alt]:after {
+ height: 175px;
+ @include flex();
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
- height: 100%;
- background-color: $light;
- padding: 50% 0;
+ background-color: var(--bg-color);
}
.website-image-placeholder {