colibris: adds toolbar border when editor is scrolling

src/static/js/pad_editbar.js

@@ -171,6 +171,11 @@ var padeditbar = (function()
       });
 
       $('select').niceSelect();
+
+      // When editor is scrolled, we add a class to style the editbar differently
+      $('iframe[name="ace_outer"]').contents().scroll(function() {
+        $('#editbar').toggleClass('editor-scrolled', $(this).scrollTop() > 2);
+      })
     },
     isEnabled: function()
     {

src/static/skins/colibris/pad.css

@@ -34,7 +34,7 @@
   --dark-color: #576273; /*#4d5d77*/
 
   --primary-color: #64d29b;
-  --middle-color: #d2d2d2; /* between light-soft-color and dark-soft-color, use for border for examples */
+  --middle-color: #d2d2d2; /* kind of grey, use for border for examples */
 
   --light-color: #f2f3f4; /*#f9f9f9;*/
   --super-light-color: white;
@@ -45,6 +45,8 @@
   --bg-soft-color: var(--light-color);
   --bg-color: var(--super-light-color);
 
+  --toolbar-border: none;
+
   --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 
   --editor-padding: 40px 55px;

src/static/skins/colibris/src/components/toolbar.css

@@ -8,6 +8,11 @@
   border-bottom: none;
 }
 
+#editbar.editor-scrolled {
+  border-bottom: 1px solid #d2d2d2;
+  border-bottom: var(--toolbar-border);
+}
+
 .toolbar ul {
   align-items: center;
 }
@@ -134,7 +139,7 @@
 
   .toolbar .menu_right {
     border-top: 1px solid #d2d2d2;
-    border-top: 1px solid var(--border-color);
+    border-top: var(--toolbar-border);
     background-color: #ffffff;
     background-color: var(--bg-color);
     padding: 0;

src/static/skins/colibris/src/pad-variants.css

@@ -4,7 +4,7 @@
 .super-light-toolbar .toolbar, .super-light-toolbar .popup-content  {
   --text-color: var(--super-dark-color);
   --text-soft-color: var(--dark-color);
-  --border-color: var(--middle-color);
+  --border-color: #e4e6e9;
   --bg-soft-color: var(--light-color);
   --bg-color: var(--super-light-color);
 }
@@ -24,7 +24,7 @@
 .super-dark-toolbar .toolbar, .super-dark-toolbar .popup-content {
   --text-color: var(--super-light-color);
   --text-soft-color: var(--light-color);
-  --border-color: var(--middle-color);
+  --border-color: var(--dark-color);
   --bg-soft-color: var(--dark-color);
   --bg-color: var(--super-dark-color);
 }
@@ -38,7 +38,7 @@
 .dark-toolbar .toolbar, .dark-toolbar .popup-content  {
   --text-color: var(--super-light-color);
   --text-soft-color: var(--light-color);
-  --border-color: var(--middle-color);
+  --border-color: var(--super-dark-color);
   --bg-soft-color: var(--super-dark-color);
   --bg-color: var(--dark-color);
 }
@@ -54,7 +54,7 @@
 .super-light-background #chatbox, .super-light-background #outerdocbody, .super-light-background {
   --text-color: var(--super-dark-color);
   --text-soft-color: var(--dark-color);
-  --border-color: var(--middle-color);
+  --border-color: #e4e6e9;
   --bg-soft-color: var(--light-color);
   --bg-color: var(--super-light-color);
 }
@@ -175,9 +175,9 @@
 }
 
 
-/* ============================= */
-/* == Combinaison with editor == */
-/* ============================= */
+/* ======================================== */
+/* == Combinaison with background/editor == */
+/* ======================================== */
 .super-light-editor.super-light-background #outerdocbody,
 .light-editor.light-background #outerdocbody,
 .super-dark-editor.super-dark-background #outerdocbody,
@@ -194,6 +194,16 @@
   }
 }
 
+/* ===================================== */
+/* == Combinaison with toolbar/editor == */
+/* ===================================== */
+.super-light-editor.super-light-toolbar .toolbar,
+.light-editor.light-toolbar .toolbar,
+.super-dark-editor.super-dark-toolbar .toolbar,
+.dark-editor.dark-toolbar .toolbar {
+  --toolbar-border: 1px solid var(--border-color);
+}
+
 
 /* ======================= */
 /* == Full Width Editor == */