css: add default color/variable for browsers non supporting css variables

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);
-}

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);
 }
 

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);
 }
 

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);
 }
 

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);
 }
 

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);
 }
 

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;

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;
 }

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);
 }
 

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;
   }

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;

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);
+}

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 {

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);
 }

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 {

src/static/skins/colibris/src/plugins/font_color.css

@@ -8,6 +8,7 @@
 
 .color\:black,
 [data-color=black] {
+  color: #485365;
   color: var(--text-color);
 }
 

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;
 }