css: Still some adjustements to handle all variants properly

src/static/css/iframe_editor.css

@@ -87,7 +87,7 @@ body.doesWrap:not(.noprewrap) > div {
   font-size: 11px;
   font-family: monospace;
   padding-right: 5px;
-  padding-left: 5px;
+  padding-left: 12px;
   background-color: transparent;
   border-right: 1px solid #ccc;
 }
@@ -99,7 +99,11 @@ body.doesWrap:not(.noprewrap) > div {
   color: transparent;
 }
 .sidedivhidden {
-  display: none;
+  /* Do not use display: none to hide the sidediv, otherwise the parent container does not
+       get its height properly calculated by flexboxes */
+  visibility: hidden;
+  width: 0;
+  padding: 0;
 }
 #linemetricsdiv {
   position: absolute;

src/static/skins/colibris/pad.css

@@ -39,7 +39,7 @@ html {
   --primary-color: #64d29b;
   --middle-color: #d2d2d2; /* between light-soft-color and dark-soft-color, use for border for examples */
 
-  --light-soft-color: #d8dade;
+  --light-soft-color: #e5e6e6;
   --light-color: #f2f3f4; /*#f9f9f9;*/
   --super-light-color: white;
 }
@@ -52,6 +52,21 @@ html {
   --bg-color: var(--super-light-color);
 
   --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+
+  --editor-padding: 40px 55px;
+  --editor-padding-top: 40px;
+}
+
+/* Default scrollbar values */
+body {
+  --scrollbar-bg: var(--light-color);
+  --scrollbar-track: var(--light-soft-color);
+  --scrollbar-thumb: var(--dark-soft-color);
+}
+#chatbox {
+  --scrollbar-bg: var(--super-light-color);
+  --scrollbar-track: var(--light-color);
+  --scrollbar-thumb: var(--middle-color);
 }
 
 

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

@@ -47,3 +47,20 @@
     min-width: 0;
   }
 }
+
+/* SKIN Variants Popup */
+#skin-variants {
+  bottom: 0;
+  left: 0;
+  right: auto;
+  top: auto;
+}
+#skin-variants .popup-content > p {
+  margin-top: 25px;
+}
+#skin-variants-result{
+  background-color: var(--bg-soft-color)
+}
+.skin-variant-container {
+  text-transform: capitalize;
+}

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

@@ -3,7 +3,7 @@
   padding: 0;
   background-color: var(--bg-color);
   color: var(--text-soft-color);
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: none;
 }
 
 .toolbar ul {

src/static/skins/colibris/src/layout.css

@@ -14,15 +14,18 @@
 
 #outerdocbody iframe, #outerdocbody > #innerdocbody {
   max-width: 900px;
-  padding: 55px;
+  padding: 40px 55px;
-  box-shadow: 0 0 0 0.5px rgba(209, 209, 209, 0.32), 0 0 7pt 0pt rgba(204, 204, 204, 0.52);
+  padding: var(--editor-padding);
+  padding-top: var(--editor-padding-top);
+  box-shadow: none;
   border: 0;
-  border-radius: 5px;
+  border-radius: 8px;
   background-color: var(--bg-color);
   color: var(--text-color);
 }
 #sidediv {
-  padding-top: 55px; /* = #innerdocbody iframe padding-top */
+  padding-top: 40px; /* = #innerdocbody iframe padding-top */
+  padding-top: var(--editor-padding-top);
 }
 
 /* Fixs author_hover does not take in account the document padding */
@@ -36,12 +39,6 @@
   #outerdocbody.plugin-ep_author_neat .caretindicator{ margin-left: 17px; }
 }
 
-
-@media (min-width: 1001px) {
-  #outerdocbody {
-    min-height: calc(100vh - 20px);
-  }
-}
 @media (max-width:1000px) {
   #outerdocbody {
     padding-top: 0;

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

@@ -49,11 +49,6 @@
   --bg-soft-color: var(--dark-soft-color);
   --bg-color: var(--dark-color);
 }
-.dark-toolbar #outerdocbody iframe, .dark-toolbar #outerdocbody > #innerdocbody {
-  box-shadow: none;
-  border: 1px solid #ececec;
-  border-radius: 8px;
-}
 
 
 
@@ -80,6 +75,11 @@
 .super-light-background #chatbox.stickyChat .chat-content {
   box-shadow: none;
 }
+.super-light-background  body, .full-width-editor.super-light-editor body {
+  --scrollbar-bg: var(--super-light-color);
+  --scrollbar-track: var(--light-color);
+  --scrollbar-thumb: var(--dark-soft-color);
+}
 /* ====================== */
 /* == Light Background == */
 /* ====================== */
@@ -91,7 +91,7 @@
   --bg-color: var(--light-color);
   background-color: var(--light-color);
 }
-.light-background  body {
+.light-background  body, .full-width-editor.light-editor body {
   --scrollbar-bg: var(--light-color);
   --scrollbar-track: var(--light-soft-color);
   --scrollbar-thumb: var(--dark-soft-color);
@@ -135,22 +135,17 @@
 .super-dark-background #editorcontainerbox {
   background-color: var(--super-dark-color);
 }
-.super-dark-background body {
+.super-dark-background body, .full-width-editor.super-dark-editor body {
   --scrollbar-bg: var(--super-dark-color);
   --scrollbar-track: var(--dark-color);
   --scrollbar-thumb: var(--light-soft-color);
 }
-.super-dark-background .toolbar {
-  border-bottom: 1px solid var(--super-dark-color);
-}
-.super-dark-background #outerdocbody iframe, .super-dark-background #outerdocbody > #innerdocbody {
-  box-shadow: none;
-  border: none;
-  border-radius: 8px;
-}
 .super-dark-background .chat-content, .super-dark-background #chatbox.stickyChat .chat-content {
   background-color: var(--super-dark-color);
   color: var(--light-color);
+  --scrollbar-bg: var(--super-dark-color);
+  --scrollbar-track: var(--dark-color);
+  --scrollbar-thumb: var(--light-soft-color);
 }
 .super-dark-background input[type="text"] {
   background-color: var(--bg-soft-color);
@@ -183,23 +178,18 @@
 .dark-background #editorcontainerbox {
   background-color: var(--dark-color);
 }
-.dark-background  body {
+.dark-background  body, .full-width-editor.dark-editor body {
   --scrollbar-bg: var(--dark-color);
   --scrollbar-track: var(--dark-soft-color);
   --scrollbar-thumb: var(--light-soft-color);
 }
-.dark-background .toolbar {
-  border-bottom: 1px solid var(--dark-color);
-}
-.dark-background #outerdocbody iframe, .dark-background #outerdocbody > #innerdocbody {
-  box-shadow: none;
-  border: none;
-  border-radius: 8px;
-}
 .dark-background .chat-content, .dark-background #chatbox.stickyChat .chat-content {
   background-color: var(--dark-color);
   color: var(--super-light-color);
   --border-color: var(--dark-soft-color);
+  --scrollbar-bg: var(--dark-color);
+  --scrollbar-track: var(--dark-soft-color);
+  --scrollbar-thumb: var(--light-soft-color);
 }
 .dark-background input[type="text"] {
   background-color: var(--dark-soft-color);
@@ -213,7 +203,7 @@
   box-shadow: 0 0 14px 0px var(--super-dark-color);
 }
 /* Special combinaison with toolbar */
-.dark-background.dark-toolbar .popup-content {
+.dark-background.dark-toolbar .popup-content, .dark-editor.dark-toolbar .popup-content {
   box-shadow: 0 0 14px 0px var(--super-dark-color);
 }
 .dark-background.dark-toolbar .toolbar {
@@ -265,17 +255,6 @@
 /* ============================= */
 /* == Combinaison with editor == */
 /* ============================= */
-.super-light-editor.super-light-background #outerdocbody iframe,
-.super-light-editor.super-light-background #outerdocbody > #innerdocbody,
-.light-editor.light-background #outerdocbody iframe,
-.light-editor.light-background #outerdocbody > #innerdocbody,
-.super-dark-editor.super-dark-background #outerdocbody iframe,
-.super-dark-editor.super-dark-background #outerdocbody > #innerdocbody,
-.dark-editor.dark-background #outerdocbody iframe,
-.dark-editor.dark-background #outerdocbody > #innerdocbody {
-  box-shadow: none;
-  border: none;
-}
 .super-light-editor.super-light-background #outerdocbody,
 .light-editor.light-background #outerdocbody,
 .super-dark-editor.super-dark-background #outerdocbody,
@@ -283,36 +262,29 @@
   padding-top: 0;
 }
 @media (min-width: 1001px) {
-  .super-light-editor.super-light-background #outerdocbody iframe,
+  .super-light-editor.super-light-background,
-  .super-light-editor.super-light-background #outerdocbody > #innerdocbody,
+  .light-editor.light-background,
-  .super-light-editor.super-light-background #sidediv,
+  .super-dark-editor.super-dark-background,
-  .light-editor.light-background #outerdocbody iframe,
+  .dark-editor.dark-background {
-  .light-editor.light-background #outerdocbody > #innerdocbody,
+    --editor-padding: 20px 35px;
-  .light-editor.light-background #sidediv,
+    --editor-padding-top: 20px;
-  .super-dark-editor.super-dark-background #outerdocbody iframe,
-  .super-dark-editor.super-dark-background #outerdocbody > #innerdocbody,
-  .super-dark-editor.super-dark-background #sidediv,
-  .dark-editor.dark-background #outerdocbody iframe,
-  .dark-editor.dark-background #outerdocbody > #innerdocbody,
-  .dark-editor.dark-background #sidediv {
-    padding-top: 35px;
   }
 }
 
 .super-light-editor.super-light-background #chaticon {
-  --bg-color: var(--light-color);
+  --bg-soft-color: var(--light-color);
   --text-color: var(--dark-color);
 }
 .light-editor.light-background #chaticon {
-  --bg-color: var(--super-light-color);
+  --bg-soft-color: var(--super-light-color);
   --text-color: var(--dark-color);
 }
 .super-dark-editor.super-dark-background #chaticon {
-  --bg-color: var(--dark-color);
+  --bg-soft-color: var(--dark-color);
   --text-color: var(--light-color);
 }
 .dark-editor.dark-background #chaticon {
-  --bg-color: var(--light-color);
+  --bg-soft-color: var(--light-color);
   --text-color: var(--dark-color);
 }
 
@@ -323,9 +295,19 @@
 /* ======================= */
 .full-width-editor #outerdocbody iframe, .full-width-editor #outerdocbody > #innerdocbody {
   max-width: none !important;
+  border-radius: 0;
 }
-@media (min-width: 721px) {
+.full-width-editor #outerdocbody {
-  .full-width-editor #chaticon {
+  padding: 0;
-    right: 15px;
+  margin: 0;
+}
+@media (min-width: 1001px) {
+  .full-width-editor {
+    --editor-padding: 20px 35px;
+    --editor-padding-top: 20px;
   }
 }
+.full-width-editor ::-webkit-scrollbar-track,
+.full-width-editor ::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+}