From 02769bee449d81ca14b5e4fdfb11725ec96d7eed Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Thu, 16 Apr 2020 11:53:57 +0200
Subject: [PATCH] css: simplify new theme and variants

make design simpler so it's less complex to implement
remove light-soft-color and dark-soft-color
---
 src/static/skins/colibris/pad.css             |  16 +-
 .../skins/colibris/src/components/chat.css    |  50 +++---
 .../colibris/src/components/scrollbars.css    |  26 +--
 src/static/skins/colibris/src/layout.css      |   4 +
 .../skins/colibris/src/pad-variants.css       | 156 +++++-------------
 .../skins/colibris/src/plugins/comments.css   |  20 ++-
 6 files changed, 95 insertions(+), 177 deletions(-)

diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css
index b3e82178c..b871d180b 100644
--- a/src/static/skins/colibris/pad.css
+++ b/src/static/skins/colibris/pad.css
@@ -33,14 +33,12 @@ html {
  */
 
 :root {
-  --super-dark-color: #374256;
+  --super-dark-color: #485365; /*#374256;*/
   --dark-color: #576273; /*#4d5d77*/
-  --dark-soft-color: #6d7684; /*#606978;*/
 
   --primary-color: #64d29b;
   --middle-color: #d2d2d2; /* between light-soft-color and dark-soft-color, use for border for examples */
 
-  --light-soft-color: #e5e6e6;
   --light-color: #f2f3f4; /*#f9f9f9;*/
   --super-light-color: white;
 }
@@ -61,13 +59,8 @@ html {
 /* 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);
+  --scrollbar-thumb: var(--dark-color);
 }
 
 
@@ -81,8 +74,3 @@ body {
 h1 {
   color: var(--primary-color);
 }
-
-/* BACKGROUND COLOR */
-#editorcontainerbox {
-  background-color: #f2f3f4; /* default */
-}
diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css
index fb50c70bc..52599d3e1 100644
--- a/src/static/skins/colibris/src/components/chat.css
+++ b/src/static/skins/colibris/src/components/chat.css
@@ -1,21 +1,34 @@
+#chatbox {
+  background-color: transparent !important;
+}
 .chat-content {
   background: none;
   padding: 0;
-  background-color: white;
-  border: none;
-  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
   width: 400px;
   height: 300px;
   background-color: var(--bg-soft-color);
 }
 
+.chat-content, #chaticon {
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+  border: none;
+}
+
+#chaticon {
+  padding: 10px 20px;
+  background-color: var(--bg-soft-color);
+  color: var(--text-color);
+  right: 30px;
+}
+
 #chatbox.stickyChat .chat-content {
   border: none;
+  box-shadow: none;
   background-color: var(--bg-soft-color);
 }
 
 #chatbox.stickyChat.chatAndUsersChat .chat-content {
-  box-shadow: none;
+
 }
 
 #titlebar {
@@ -24,7 +37,6 @@
   height: 44px;
   padding: 0 7px;
   z-index: 20000;
-  border-bottom: 1px solid var(--border-color);
 }
 
 #titlelabel, #chatlabel {
@@ -36,13 +48,14 @@
 #chatlabel { margin-right: 15px; }
 
 #chattext {
-  border-bottom: 1px solid var(--border-color);
-  background-color: var(--bg-color);
-  color: var(--text-color);
-}
-
-.plugin-ep_author_neat #chattext {
   padding: 10px;
+  border-top: 1px solid var(--bg-color);
+  border-bottom: 1px solid var(--bg-color); /*#e5e7ea;*/
+  background-color: inherit;
+  color: inherit;
+}
+#chattext.authorColors {
+  padding: 0;
 }
 
 .plugin-ep_author_neat #chattext.authorColors p,
@@ -50,26 +63,17 @@
   background-color: transparent !important;
 }
 
-#chatbox.stickyChat .chat-content #chattext {
-  padding: 0px;
-}
-
 #chatinputbox {
   padding: 8px;
 }
+#chatinputbox #chatinput {
+  background-color: var(--bg-color);
+}
 
 .plugin-ep_author_neat #chatbox.stickyChat .chat-content #chattext {
   padding: 5px 3px;
 }
 
-#chaticon {
-  border: none;
-  padding: 10px 20px;
-  background-color: var(--bg-soft-color);
-  color: var(--text-color);
-  right: 30px;
-}
-
 @media (max-width: 720px) {
   #chaticon {
     right: 0;
diff --git a/src/static/skins/colibris/src/components/scrollbars.css b/src/static/skins/colibris/src/components/scrollbars.css
index 202d49dc5..fef72b34c 100644
--- a/src/static/skins/colibris/src/components/scrollbars.css
+++ b/src/static/skins/colibris/src/components/scrollbars.css
@@ -17,31 +17,17 @@
 }
 
 .thin-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--scrollbar-track);
-  border-radius: 10px;
-  border: 5px solid var(--scrollbar-bg);
+  background-color: var(--bg-soft-color);
+  border-radius: 0px;
+  border: 0px solid var(--bg-soft-color);
 }
 
 .thin-scrollbar::-webkit-scrollbar {
-  width: 17px;
-}
-
-.thin-scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 7px;
-  background-color: var(--scrollbar-thumb);
-  border: 5px solid var(--scrollbar-bg);
-}
-
-.nice-select .list::-webkit-scrollbar-track {
-  background-color: var(--bg-soft-color);
-  border: 0px solid var(--bg-soft-color);
-}
-
-.nice-select .list::-webkit-scrollbar {
   width: 6px;
 }
 
-.nice-select .list::-webkit-scrollbar-thumb {
-  background-color: var(--text-soft-color);
+.thin-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+  background-color: var(--middle-color);
   border: 0px solid var(--bg-soft-color);
 }
\ No newline at end of file
diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css
index 9a9bd4d34..502e9e12a 100644
--- a/src/static/skins/colibris/src/layout.css
+++ b/src/static/skins/colibris/src/layout.css
@@ -4,6 +4,10 @@
   width: 100%;
 }
 
+#editorcontainerbox {
+  background-color: var(--bg-color);
+}
+
 #editorcontainerbox .sticky-container {
   width: 250px;
 }
diff --git a/src/static/skins/colibris/src/pad-variants.css b/src/static/skins/colibris/src/pad-variants.css
index d267e8d8f..ac1aa3d06 100644
--- a/src/static/skins/colibris/src/pad-variants.css
+++ b/src/static/skins/colibris/src/pad-variants.css
@@ -1,16 +1,13 @@
 /* =========================== */
 /* === Super Light Toolbar === */
 /* =========================== */
-.super-light-toolbar .toolbar, .super-light-toolbar .popup-content {
-  --text-color: var(--dark-color);
-  --text-soft-color: var(--dark-soft-color);
+.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);
   --bg-soft-color: var(--light-color);
   --bg-color: var(--super-light-color);
 }
-.super-light-toolbar #chat {
-  background-color: var(--light-color);
-}
 /* ===================== */
 /* === Light Toolbar === */
 /* ===================== */
@@ -18,19 +15,18 @@
   --text-color: var(--super-dark-color);
   --text-soft-color: var(--dark-color);
   --border-color: var(--middle-color);
-  --bg-soft-color: var(--light-soft-color);
+  --bg-soft-color: var(--super-light-color);
   --bg-color: var(--light-color);
 }
 /* ========================== */
 /* === Super Dark Toolbar === */
 /* ========================== */
 .super-dark-toolbar .toolbar, .super-dark-toolbar .popup-content {
-  --text-color: var(--light-color);
-  --text-soft-color: var(--middle-color);
-  --border-color: var(--dark-soft-color);
+  --text-color: var(--super-light-color);
+  --text-soft-color: var(--light-color);
+  --border-color: var(--middle-color);
   --bg-soft-color: var(--dark-color);
   --bg-color: var(--super-dark-color);
-  border: none;
 }
 .super-dark-toolbar.super-dark-editor .popup-content {
   border: 1px solid var(--dark-color);
@@ -42,8 +38,8 @@
 .dark-toolbar .toolbar, .dark-toolbar .popup-content  {
   --text-color: var(--super-light-color);
   --text-soft-color: var(--light-color);
-  --border-color: var(--dark-soft-color);
-  --bg-soft-color: var(--dark-soft-color);
+  --border-color: var(--middle-color);
+  --bg-soft-color: var(--super-dark-color);
   --bg-color: var(--dark-color);
 }
 
@@ -54,25 +50,18 @@
 /* ============================ */
 /* == Super Light Background == */
 /* ============================ */
-.super-light-background #editorcontainerbox, .super-light-background #sidediv, .super-light-background, .light-background.super-light-editor  {
-  --text-color: var(--dark-color);
-  --text-soft-color: var(--dark-soft-color);
-  --border-color: var(--light-soft-color);
+.super-light-background #editorcontainerbox, .super-light-background #sidediv,
+.super-light-background #chatbox, .super-light-background {
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
+  --border-color: var(--middle-color);
   --bg-soft-color: var(--light-color);
   --bg-color: var(--super-light-color);
-  background-color: var(--super-light-color);
 }
-.super-light-background .chat-content, .super-light-background #chatbox.stickyChat .chat-content {
-  --bg-color: var(--super-light-color);
-  --bg-soft-color: var(--super-light-color);
-}
-.super-light-background #chatbox.stickyChat .chat-content {
-  box-shadow: none;
-}
-.super-light-background  body, .full-width-editor.super-light-editor body:not(.plugin-ep_comments_page) {
+.super-light-background  body, .full-width-editor.super-light-editor body:not(.comments-active) {
   --scrollbar-bg: var(--super-light-color);
   --scrollbar-track: var(--light-color);
-  --scrollbar-thumb: var(--dark-soft-color);
+  --scrollbar-thumb: var(--dark-color);
 }
 .super-light-background .compact-display-content {
   background-color: var(--super-light-color);
@@ -80,35 +69,18 @@
 /* ====================== */
 /* == Light Background == */
 /* ====================== */
-.light-background #editorcontainerbox, .light-background #sidediv, .light-background  {
+.light-background #editorcontainerbox, .light-background #sidediv,
+.light-background #chatbox, .light-background  {
   --text-color: var(--super-dark-color);
   --text-soft-color: var(--dark-color);
-  --border-color: var(--light-soft-color);
-  --bg-soft-color: var(--light-soft-color);
+  --border-color: var(--middle-color);
+  --bg-soft-color: var(--super-light-color);
   --bg-color: var(--light-color);
-  background-color: var(--light-color);
 }
-.light-background  body, .full-width-editor.light-editor body:not(.plugin-ep_comments_page) {
+.light-background  body, .full-width-editor.light-editor body:not(.comments-active) {
   --scrollbar-bg: var(--light-color);
-  --scrollbar-track: var(--light-soft-color);
-  --scrollbar-thumb: var(--dark-soft-color);
-}
-.light-background .chat-content, .light-background #chatbox.stickyChat .chat-content {
-  --bg-color: var(--super-light-color);
-  --bg-soft-color: var(--light-color);
-  --scrollbar-bg: var(--super-light-color);
-  --scrollbar-track: var(--light-color);
-  --scrollbar-thumb: var(--middle-color);
-}
-.light-background #chatbox.stickyChat .chat-content {
-  box-shadow: none;
-}
-/* Special combinaison with toolbar */
-.light-background.light-editor #chattext {
-  background-color: var(--light-color);
-  --scrollbar-bg: var(--light-color);
-  --scrollbar-track: var(--light-soft-color);
-  --scrollbar-thumb: var(--dark-soft-color);
+  --scrollbar-track: var(--super-light-color);
+  --scrollbar-thumb: var(--dark-color);
 }
 .light-background .compact-display-content {
   background-color: var(--light-color);
@@ -116,72 +88,46 @@
 /* =========================== */
 /* == Super Dark Background == */
 /* =========================== */
-.super-dark-background #editorcontainerbox, .super-dark-background #sidediv, .super-dark-background  {
-  --text-color: var(--light-color);
-  --text-soft-color: var(--light-soft-color);
-  --border-color: var(--dark-color);
+.super-dark-background #editorcontainerbox, .super-dark-background #sidediv,
+.super-dark-background #chatbox, .super-dark-background  {
+  --text-color: var(--super-light-color);
+  --text-soft-color: var(--light-color);
+  --border-color: var(--middle-color);
   --bg-soft-color: var(--dark-color);
   --bg-color: var(--super-dark-color);
 }
-.super-dark-background #editorcontainerbox {
-  background-color: var(--super-dark-color);
-}
-.super-dark-background body, .full-width-editor.super-dark-editor body:not(.plugin-ep_comments_page) {
+.super-dark-background body, .full-width-editor.super-dark-editor body:not(.comments-active) {
   --scrollbar-bg: var(--super-dark-color);
   --scrollbar-track: var(--dark-color);
-  --scrollbar-thumb: var(--light-soft-color);
-}
-.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 #chatbox:not(.stickyChat) .chat-content {
-  border: 1px solid var(--dark-color);
-}
-/* Special combinaison with toolbar */
-.super-dark-background.super-dark-toolbar .popup-content, .super-dark-background .full-display-content {
-  border: 1px solid var(--dark-color);
-  box-shadow: none;
+  --scrollbar-thumb: var(--light-color);
 }
 .super-dark-background .compact-display-content {
   background-color: var(--super-dark-color);
 }
+/* Special combinaison with toolbar */
+.super-dark-background.super-dark-toolbar .popup-content {
+  border: 1px solid var(--dark-color);
+  box-shadow: none;
+}
 /* ===================== */
 /* == Dark Background == */
 /* ===================== */
-.dark-background #editorcontainerbox, .dark-background #sidediv, .dark-background  {
+.dark-background #editorcontainerbox, .dark-background #sidediv,
+.dark-background #chatbox, .dark-background  {
   --text-color: var(--super-light-color);
   --text-soft-color: var(--light-color);
-  --border-color: var(--dark-soft-color);
-  --bg-soft-color: var(--dark-soft-color);
+  --border-color: var(--middle-color);
+  --bg-soft-color: var(--super-dark-color);
   --bg-color: var(--dark-color);
 }
-.dark-background #editorcontainerbox {
-  background-color: var(--dark-color);
-}
-.dark-background  body, .full-width-editor.dark-editor body:not(.plugin-ep_comments_page) {
+.dark-background  body, .full-width-editor.dark-editor body:not(.comments-active) {
   --scrollbar-bg: var(--dark-color);
-  --scrollbar-track: var(--dark-soft-color);
-  --scrollbar-thumb: var(--light-soft-color);
-}
-.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);
+  --scrollbar-track: var(--super-dark-color);
+  --scrollbar-thumb: var(--light-color);
 }
 .dark-background .compact-display-content {
   background-color: var(--dark-color);
 }
-.dark-background .full-display-content {
-  box-shadow: none;
-  border: 1px solid var(--dark-soft-color);
-}
 /* Special combinaison with toolbar */
 .dark-background.dark-toolbar .popup-content, .dark-editor.dark-toolbar .popup-content {
   box-shadow: 0 0 14px 0px var(--super-dark-color);
@@ -248,24 +194,6 @@
   }
 }
 
-.super-light-editor.super-light-background #chaticon {
-  --bg-soft-color: var(--light-color);
-  --text-color: var(--dark-color);
-}
-.light-editor.light-background #chaticon {
-  --bg-soft-color: var(--super-light-color);
-  --text-color: var(--dark-color);
-}
-.super-dark-editor.super-dark-background #chaticon {
-  --bg-soft-color: var(--dark-color);
-  --text-color: var(--light-color);
-}
-.dark-editor.dark-background #chaticon {
-  --bg-soft-color: var(--light-color);
-  --text-color: var(--dark-color);
-}
-
-
 
 /* ======================= */
 /* == Full Width Editor == */
diff --git a/src/static/skins/colibris/src/plugins/comments.css b/src/static/skins/colibris/src/plugins/comments.css
index a355d7307..febe835e2 100644
--- a/src/static/skins/colibris/src/plugins/comments.css
+++ b/src/static/skins/colibris/src/plugins/comments.css
@@ -33,12 +33,13 @@
 }
 .sidebar-comment .full-display-content {
   margin-left: -10px;
-  box-shadow: 0 2px 9px 2px rgba(130, 130, 130, 0.2);
-  background-color: var(--bg-color);
+  box-shadow: none;
+  background-color: var(--bg-soft-color);
+  border: 1px solid var(--bg-color);
 }
 .comment-reply {
-  background-color: var(--bg-soft-color);
-  border: none;
+  border-top: 1px solid var(--bg-color);
+  background-color: inherit;
 }
 .comment-reply textarea, .comment-reply input[type="text"] {
   background-color: var(--bg-color);
@@ -52,13 +53,20 @@
 .comment-modal .full-display-content {
   box-shadow: none;
   margin: 0 !important;
+  border: none;
+  background-color: var(--bg-color)
 }
 .comment-modal .comment-modal-comment {
   padding: 0;
 }
-.ace-line .comment {
-  background-color: rgba(255, 235, 59, 0.5);
+.comment-modal .comment-reply textarea, .comment-modal .comment-reply input[type="text"] {
+  background-color: var(--bg-soft-color);
 }
+.comment-modal .comment-reply {
+  border-top: 1px solid var(--bg-soft-color);
+}
+
+
 .new-comment-popup textarea {
   background-color: var(--bg-soft-color);
 }