new dark UI colors and adaptions for column editor

Scrivito · May 6, 2024 · 8063fbc · 8063fbc
1 parent f8b00e6
commit 8063fbc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/Widgets/ColumnContainerWidget/ColumnsEditorTab.scss b/src/Widgets/ColumnContainerWidget/ColumnsEditorTab.scss
@@ -348,7 +348,7 @@
 .scrivito_dark {
   .gle-preview {
     border: 2px solid #777;
-    background: #555;
+    background: var(--jr-grey-light-hover);
   }
   .gle-preview.active {
     border: 2px solid #426698;
@@ -370,7 +370,7 @@
   }
   .gle {
     border: 2px solid #777;
-    background: #444;
+    background: var(--jr-grey-light);
   }
   .gle .grid-ruler {
     opacity: 0.4;

diff --git a/src/assets/stylesheets/scrivitoExtensions.scss b/src/assets/stylesheets/scrivitoExtensions.scss
@@ -2,6 +2,14 @@
 // general styles adaptions
 // --------------------------------------------------------------- //
 @import 'scrivito-neoletter-form-widgets/editing.css';
+:root {
+  --jr-grey-dark: #111418;
+  --jr-grey-middle: #1d2229;
+  --jr-grey-light: #272d37;
+  --jr-grey-light-hover: #3a4353;
+
+  --jr-blue-light: #426698;
+}
 
 html,
 body {
@@ -10,7 +18,7 @@ body {
 }
 
 .scrivito_dark {
-  background: #3f3f3f;
+  background: var(--jr-grey-middle);
 
   [data-scrivito-editors-placeholder]:empty:not(:focus):before {
     color: #aaa !important;