From 621448b92f14065e42ea3bda1d01dc7a232ab4be Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Thu, 16 Apr 2020 17:50:15 +0200
Subject: [PATCH] css: add default color/variable for browsers non supporting
 css variables

---
 src/static/skins/colibris/pad.css             | 23 +++----------------
 .../skins/colibris/src/components/buttons.css |  3 +++
 .../skins/colibris/src/components/chat.css    |  9 +++++++-
 .../skins/colibris/src/components/form.css    | 13 ++++++++++-
 .../skins/colibris/src/components/gritter.css |  3 +++
 .../colibris/src/components/import-export.css |  2 ++
 .../skins/colibris/src/components/popup.css   |  6 ++++-
 .../colibris/src/components/scrollbars.css    | 10 ++++++--
 .../skins/colibris/src/components/sidediv.css |  2 ++
 .../skins/colibris/src/components/toolbar.css | 13 +++++++++++
 .../skins/colibris/src/components/users.css   |  4 +++-
 src/static/skins/colibris/src/general.css     | 15 ++++++++++++
 src/static/skins/colibris/src/layout.css      |  4 ++++
 src/static/skins/colibris/src/pad-editor.css  |  2 ++
 .../skins/colibris/src/plugins/comments.css   | 12 +++++++++-
 .../skins/colibris/src/plugins/font_color.css |  1 +
 src/static/skins/colibris/timeslider.css      |  8 +++++++
 17 files changed, 103 insertions(+), 27 deletions(-)
 create mode 100644 src/static/skins/colibris/src/general.css

diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css
index b871d180b..bdccc2150 100644
--- a/src/static/skins/colibris/pad.css
+++ b/src/static/skins/colibris/pad.css
@@ -1,3 +1,4 @@
+@import url("src/general.css");
 @import url("src/layout.css");
 @import url("src/pad-editor.css");
 
@@ -22,13 +23,9 @@
 
 @import url("src/pad-variants.css");
 
-html {
-  font-size: 15px;
-}
-
 /* -----------------------------------------------------------------
  * COLORS
- * If you want to change main colors, please replace following rules
+ * If you want to change main colors, please replace following CSS variables
  * -----------------------------------------------------------------
  */
 
@@ -41,9 +38,7 @@ html {
 
   --light-color: #f2f3f4; /*#f9f9f9;*/
   --super-light-color: white;
-}
 
-html {
   --text-color: var(--super-dark-color);
   --text-soft-color: var(--dark-color);
   --border-color: var(--middle-color);
@@ -59,18 +54,6 @@ html {
 /* Default scrollbar values */
 body {
   --scrollbar-bg: var(--light-color);
-  --scrollbar-track: var(--light-color);
+  --scrollbar-track: var(--super-light-color);
   --scrollbar-thumb: var(--dark-color);
 }
-
-
-body {
-  color: var(--text-color);
-  font-family: var(--main-font-family);
-}
-
-
-/* PRIMARY COLOR */
-h1 {
-  color: var(--primary-color);
-}
diff --git a/src/static/skins/colibris/src/components/buttons.css b/src/static/skins/colibris/src/components/buttons.css
index 176b15817..475a4a370 100644
--- a/src/static/skins/colibris/src/components/buttons.css
+++ b/src/static/skins/colibris/src/components/buttons.css
@@ -14,10 +14,13 @@ button, .btn
 
 .btn-primary
 {
+  background-color: #64d29b;
   background-color: var(--primary-color);
+  color: #ffffff;
   color: var(--bg-color);
 }
 .btn-default {
+  color: #485365;
   color: var(--text-color);
 }
 
diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css
index ce4604298..14c645ecb 100644
--- a/src/static/skins/colibris/src/components/chat.css
+++ b/src/static/skins/colibris/src/components/chat.css
@@ -6,6 +6,7 @@
   padding: 0;
   width: 400px;
   height: 300px;
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
 }
 
@@ -16,7 +17,9 @@
 
 #chaticon {
   padding: 10px 20px;
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
+  color: #485365;
   color: var(--text-color);
   right: 30px;
 }
@@ -24,6 +27,7 @@
 #chatbox.stickyChat .chat-content {
   border: none;
   box-shadow: none;
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
 }
 
@@ -45,8 +49,10 @@
 
 #chattext {
   padding: 0;
+  border-top: 1px solid #ffffff;
   border-top: 1px solid var(--bg-color);
-  border-bottom: 1px solid var(--bg-color); /*#e5e7ea;*/
+  border-bottom: 1px solid #ffffff;
+  border-bottom: 1px solid var(--bg-color);
   background-color: inherit;
   color: inherit;
 }
@@ -69,6 +75,7 @@
   padding: 8px;
 }
 #chatinputbox #chatinput {
+  background-color: #ffffff;
   background-color: var(--bg-color);
 }
 
diff --git a/src/static/skins/colibris/src/components/form.css b/src/static/skins/colibris/src/components/form.css
index 66ed337bc..aa82218c2 100644
--- a/src/static/skins/colibris/src/components/form.css
+++ b/src/static/skins/colibris/src/components/form.css
@@ -7,14 +7,18 @@ input[type="text"], select, textarea, .nice-select {
 
 input[type="text"], textarea {
   padding: 8px 10px;
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
   border: none;
+  color: #485365;
   color: var(--text-color);
 }
 input[type="text"]::placeholder, textarea::placeholder {
+  color: #576273;
   color: var(--text-soft-color);
 }
 select, .nice-select {
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
   border: none;
   padding: 4px 10px;
@@ -23,9 +27,11 @@ select, .nice-select {
   line-height: inherit;
 }
 .nice-select .list {
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
 }
 .nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus {
+  background-color: #ffffff;
   background-color: var(--bg-color);
 }
 .nice-select .option {
@@ -72,12 +78,15 @@ select, .nice-select {
   top: 0;
   left: 0;
   border-radius: 6px;
+  border: 2px solid #576273;
   border: 2px solid var(--text-soft-color);
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
   opacity: .7;
 }
 [type="checkbox"]:checked + label:before {
   background-color: transparent;
+  border-color: #64d29b;
   border-color: var(--primary-color);
 }
 
@@ -86,12 +95,14 @@ select, .nice-select {
   width: 16px;
   height: 16px;
   border-radius: 50%;
+  background-color: #576273;
   background-color: var(--text-soft-color);
   top: -1px;
   left: -3px;
 }
 [type="checkbox"]:checked + label:after {
-  background-color: var(--primary-color);;
+  background-color: #64d29b;
+  background-color: var(--primary-color);
   transform: translateX(14px);
 }
 
diff --git a/src/static/skins/colibris/src/components/gritter.css b/src/static/skins/colibris/src/components/gritter.css
index 3e16d837e..6272323e4 100644
--- a/src/static/skins/colibris/src/components/gritter.css
+++ b/src/static/skins/colibris/src/components/gritter.css
@@ -3,7 +3,9 @@
   bottom: auto;
 }
 .gritter-item:not(.error) .popup-content{
+  background-color: #64d29b;
   background-color: var(--primary-color);
+  color: #ffffff;
   color: var(--bg-color);
 }
 .gritter-item .popup-content {
@@ -21,6 +23,7 @@
   margin-right: -5px;
 }
 .gritter-item:not(.error) .gritter-close .buttonicon {
+  color: #ffffff;
   color: var(--bg-color);
 }
 
diff --git a/src/static/skins/colibris/src/components/import-export.css b/src/static/skins/colibris/src/components/import-export.css
index e0ba4c5f3..d8425d895 100644
--- a/src/static/skins/colibris/src/components/import-export.css
+++ b/src/static/skins/colibris/src/components/import-export.css
@@ -1,10 +1,12 @@
 #importmessageabiword {
   font-style: italic;
+  color: #64d29b;
   color: var(--primary-color);
 }
 #importmessageabiword > a {
   font-weight: bold;
   text-decoration: underline;
+  color: #64d29b;
   color: var(--primary-color);
 }
 
diff --git a/src/static/skins/colibris/src/components/popup.css b/src/static/skins/colibris/src/components/popup.css
index ce6c61a6b..0a50c9bbe 100644
--- a/src/static/skins/colibris/src/components/popup.css
+++ b/src/static/skins/colibris/src/components/popup.css
@@ -2,7 +2,9 @@
   border-radius: 5px;
   padding: 25px;
   background: none;
+  background-color: #ffffff;
   background-color: var(--bg-color);
+  color: #576273;
   color: var(--text-soft-color);
   border: none;
   box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
@@ -20,6 +22,7 @@
 .popup h2 {
   margin-bottom: 15px;
   margin-top: 20px;
+  color: #485365;
   color: var(--text-color);
 }
 
@@ -59,7 +62,8 @@
   margin-top: 25px;
 }
 #skin-variants-result{
-  background-color: var(--bg-soft-color)
+  background-color: #f2f3f4;
+  background-color: var(--bg-soft-color);
 }
 .skin-variant-container {
   text-transform: capitalize;
diff --git a/src/static/skins/colibris/src/components/scrollbars.css b/src/static/skins/colibris/src/components/scrollbars.css
index fef72b34c..cd4ea08b5 100644
--- a/src/static/skins/colibris/src/components/scrollbars.css
+++ b/src/static/skins/colibris/src/components/scrollbars.css
@@ -1,7 +1,9 @@
 @media (min-width: 721px) {
   ::-webkit-scrollbar-track {
+    background-color: white;
     background-color: var(--scrollbar-track);
     border-radius: 10px;
+    border: 7px solid #f2f3f4;
     border: 7px solid var(--scrollbar-bg);
   }
 
@@ -11,15 +13,18 @@
 
   ::-webkit-scrollbar-thumb {
     border-radius: 10px;
+    background-color: #576273;
     background-color: var(--scrollbar-thumb);
+    border: 7px solid #f2f3f4;
     border: 7px solid var(--scrollbar-bg);
   }
 }
 
 .thin-scrollbar::-webkit-scrollbar-track {
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
   border-radius: 0px;
-  border: 0px solid var(--bg-soft-color);
+  border: none;
 }
 
 .thin-scrollbar::-webkit-scrollbar {
@@ -28,6 +33,7 @@
 
 .thin-scrollbar::-webkit-scrollbar-thumb {
   border-radius: 0px;
+  background-color: #d2d2d2;
   background-color: var(--middle-color);
-  border: 0px solid var(--bg-soft-color);
+  border: none;
 }
\ No newline at end of file
diff --git a/src/static/skins/colibris/src/components/sidediv.css b/src/static/skins/colibris/src/components/sidediv.css
index 994926bfe..a8cc662c7 100644
--- a/src/static/skins/colibris/src/components/sidediv.css
+++ b/src/static/skins/colibris/src/components/sidediv.css
@@ -6,6 +6,7 @@
 
 #sidedivinner>div:before {
   font-family: var(--main-font-family); /* the parent div have font-family monospace (line number) */
+  color: #485365;
   color: var(--text-color);
   font-size: 13px;
   padding-right: 18px !important;
@@ -24,6 +25,7 @@
 #sidedivinner>div {
   line-height: 24px;
   font-size: 10px !important;
+  color: #576273;
   color: var(--text-soft-color);
 }
 
diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css
index 204979c50..b9677e75c 100644
--- a/src/static/skins/colibris/src/components/toolbar.css
+++ b/src/static/skins/colibris/src/components/toolbar.css
@@ -1,7 +1,9 @@
 .toolbar {
   border-bottom: none;
   padding: 0;
+  background-color: #ffffff;
   background-color: var(--bg-color);
+  color: #576273;
   color: var(--text-soft-color);
   border-bottom: none;
 }
@@ -57,25 +59,33 @@
 }
 
 .toolbar ul li a:hover, .toolbar ul li select:hover  {
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
+  color: #485365;
   color: var(--text-color);
 }
 .toolbar ul li a.selected {
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
 }
 .toolbar ul li a.pressed,
 .toolbar ul li select:active {
+  color: #64d29b;
   color: var(--primary-color);
 }
 
 .toolbar ul li select:active option {
+  background-color: #ffffff;
   background-color: var(--bg-color);
+  color: #576273;
   color: var(--text-soft-color);
   padding: 5px;
 }
 
 .toolbar .menu_right li a.selected {
+  background-color: #576273;
   background-color: var(--text-soft-color);
+  color: #ffffff;
   color: var(--bg-color);
 }
 
@@ -104,6 +114,7 @@
 }
 .toolbar .show-more-icon-btn {
   font-size: 1.8rem;
+  color: #64d29b;
   color: var(--primary-color);
 }
 
@@ -122,7 +133,9 @@
   }
 
   .toolbar .menu_right {
+    border-top: 1px solid #d2d2d2;
     border-top: 1px solid var(--border-color);
+    background-color: #ffffff;
     background-color: var(--bg-color);
     padding: 0;
   }
diff --git a/src/static/skins/colibris/src/components/users.css b/src/static/skins/colibris/src/components/users.css
index a14cc1962..7a398b17c 100644
--- a/src/static/skins/colibris/src/components/users.css
+++ b/src/static/skins/colibris/src/components/users.css
@@ -7,7 +7,8 @@ table#otheruserstable {
   height: 250px;
   border-left: none;
   transition: none;
-  border-bottom-color: var(--border-color)
+  border-bottom-color: #d2d2d2;
+  border-bottom-color: var(--border-color);
 }
 .popup#users.chatAndUsers #mycolorpicker.popup {
   right: calc(100% + 30px);
@@ -32,6 +33,7 @@ input#myusernameedit {
   min-width: 110px;
   border: none !important;
   background-color: transparent !important;
+  border-bottom: 1px solid #d2d2d2 !important;
   border-bottom: 1px solid var(--border-color) !important;
   border-radius: 0;
   padding-bottom: 5px;
diff --git a/src/static/skins/colibris/src/general.css b/src/static/skins/colibris/src/general.css
new file mode 100644
index 000000000..f51d46ce5
--- /dev/null
+++ b/src/static/skins/colibris/src/general.css
@@ -0,0 +1,15 @@
+html {
+  font-size: 15px;
+}
+
+body {
+  color: #485365;
+  color: var(--text-color);
+  font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: var(--main-font-family);
+}
+
+h1 {
+  color: #64d29b;
+  color: var(--primary-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 502e9e12a..b1305048b 100644
--- a/src/static/skins/colibris/src/layout.css
+++ b/src/static/skins/colibris/src/layout.css
@@ -5,6 +5,7 @@
 }
 
 #editorcontainerbox {
+  background-color: #ffffff;
   background-color: var(--bg-color);
 }
 
@@ -20,11 +21,14 @@
   max-width: 900px;
   padding: 40px 55px;
   padding: var(--editor-padding);
+  padding-top: 40px;
   padding-top: var(--editor-padding-top);
   box-shadow: none;
   border: 0;
   border-radius: 8px;
+  background-color: #ffffff;
   background-color: var(--bg-color);
+  color: #485365;
   color: var(--text-color);
 }
 #sidediv {
diff --git a/src/static/skins/colibris/src/pad-editor.css b/src/static/skins/colibris/src/pad-editor.css
index e1d3288b6..1d50ed0f9 100644
--- a/src/static/skins/colibris/src/pad-editor.css
+++ b/src/static/skins/colibris/src/pad-editor.css
@@ -3,6 +3,7 @@
   line-height: 25px;
   padding: 0;
   background: transparent;
+  color: #485365;
   color: var(--text-color);
 }
 
@@ -28,5 +29,6 @@ option {
 }
 
 #innerdocbody a {
+  color: #64d29b;
   color: var(--primary-color);
 }
\ No newline at end of file
diff --git a/src/static/skins/colibris/src/plugins/comments.css b/src/static/skins/colibris/src/plugins/comments.css
index 6f20156e4..005890ef4 100644
--- a/src/static/skins/colibris/src/plugins/comments.css
+++ b/src/static/skins/colibris/src/plugins/comments.css
@@ -5,12 +5,14 @@
   margin: 10px 0 5px 0;
 }
 .sidebar-comment .btn.btn-primary:not(#comment-create-btn) {
+  background-color: #576273;
   background-color: var(--text-soft-color);
 }
 .sidebar-comment .suggestion-create {
   margin-top: 10px;
 }
 .suggestion-display .from-value, .suggestion-display .to-value {
+  color: #64d29b;
   color: var(--primary-color);
   font-weight: bold;
   opacity: 1;
@@ -34,14 +36,18 @@
 .sidebar-comment .full-display-content {
   margin-left: -10px;
   box-shadow: none;
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
+  border: 1px solid #ffffff;
   border: 1px solid var(--bg-color);
 }
 .comment-reply {
+  border-top: 1px solid #ffffff;
   border-top: 1px solid var(--bg-color);
   background-color: inherit;
 }
 .comment-reply textarea, .comment-reply input[type="text"] {
+  background-color: #ffffff;
   background-color: var(--bg-color);
 }
 .btn.revert-suggestion-btn {
@@ -56,15 +62,18 @@
   box-shadow: none;
   margin: 0 !important;
   border: none;
-  background-color: var(--bg-color)
+  background-color: #ffffff;
+  background-color: var(--bg-color);
 }
 .comment-modal .comment-modal-comment {
   padding: 0;
 }
 .comment-modal .comment-reply textarea, .comment-modal .comment-reply input[type="text"] {
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
 }
 .comment-modal .comment-reply {
+  border-top: 1px solid #f2f3f4;
   border-top: 1px solid var(--bg-soft-color);
 }
 .comment-modal .full-display-content .comment-title-wrapper,
@@ -75,6 +84,7 @@
 
 /* NEW COMMENT POPUP */
 .new-comment-popup textarea {
+  background-color: #f2f3f4;
   background-color: var(--bg-soft-color);
 }
 .new-comment-popup .suggestion {
diff --git a/src/static/skins/colibris/src/plugins/font_color.css b/src/static/skins/colibris/src/plugins/font_color.css
index 777117a44..95f81cf31 100644
--- a/src/static/skins/colibris/src/plugins/font_color.css
+++ b/src/static/skins/colibris/src/plugins/font_color.css
@@ -8,6 +8,7 @@
 
 .color\:black,
 [data-color=black] {
+  color: #485365;
   color: var(--text-color);
 }
 
diff --git a/src/static/skins/colibris/timeslider.css b/src/static/skins/colibris/timeslider.css
index 60c64796a..1d2e347ae 100644
--- a/src/static/skins/colibris/timeslider.css
+++ b/src/static/skins/colibris/timeslider.css
@@ -2,18 +2,22 @@
   border-radius: 3px;
   width: 12px;
   height: 28px;
+  background-color: #64d29b;
   background-color: var(--primary-color);
 }
 
 #timeslider-slider #ui-slider-bar {
   border-radius: 3px;
+  background-color: #d2d2d2;
   background-color: var(--border-color);
 }
 #slider-btn-container {
   margin: -18px 15px 0 20px;
 }
 #slider-btn-container #playpause_button_icon {
+  color: #ffffff;
   color: var(--bg-color);
+  background-color: #64d29b;
   background-color: var(--primary-color);
   border: none;
   margin-right: 5px;
@@ -31,7 +35,9 @@
   line-height: 28px;
   margin-left: 5px;
   font-size: 13px;
+  color: #64d29b;
   color: var(--primary-color);
+  border-color: #64d29b;
   border-color: var(--primary-color);
 }
 #slider-btn-container .stepper.disabled {
@@ -39,7 +45,9 @@
 }
 
 .timeslider #editbar .buttontext {
+  background-color: #576273;
   background-color: var(--text-soft-color);
+  color: #ffffff;
   color: var(--bg-color);
   margin: 0;
 }