From e041099d1beedffb6deaaf244976f632cef3e0b3 Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Tue, 31 Mar 2020 19:27:04 +0200
Subject: [PATCH] fix colibris skin after refactor

---
 src/static/css/pad/chat.css                   |   1 +
 src/static/css/pad/popup_users.css            |   5 -
 src/static/css/timeslider.css                 |   4 +-
 src/static/skins/colibris/pad.css             |  21 +---
 .../skins/colibris/src/components/chat.css    |  18 +--
 .../skins/colibris/src/components/gritter.css |  37 ++-----
 .../colibris/src/components/import-export.css |  17 +--
 .../skins/colibris/src/components/popup.css   |  17 ++-
 .../skins/colibris/src/components/sidediv.css |   2 +-
 .../skins/colibris/src/components/toolbar.css | 103 +++++++-----------
 .../skins/colibris/src/components/users.css   |  39 +------
 src/static/skins/colibris/src/layout.css      |  49 ++-------
 .../src/plugins/brightcolorpicker.css         |   6 -
 .../colibris/src/plugins/set_title_on_pad.css |  13 +--
 src/static/skins/colibris/timeslider.css      |   5 +-
 15 files changed, 91 insertions(+), 246 deletions(-)

diff --git a/src/static/css/pad/chat.css b/src/static/css/pad/chat.css
index 7c79ade5..4d1321dc 100644
--- a/src/static/css/pad/chat.css
+++ b/src/static/css/pad/chat.css
@@ -46,6 +46,7 @@
 #titlebar .stick-to-screen-btn,
 #titlebar .hide-reduce-btn {
   font-size: 25px;
+  color: inherit;
   float: right;
   text-align: right;
   text-decoration: none;
diff --git a/src/static/css/pad/popup_users.css b/src/static/css/pad/popup_users.css
index 954a48c5..719d1bdd 100644
--- a/src/static/css/pad/popup_users.css
+++ b/src/static/css/pad/popup_users.css
@@ -94,14 +94,9 @@ input#myusernameedit:not(.editable) {
 
 #mycolorpicker {
   display: none;
-  width: 232px;
-  height: 265px;
   position: absolute;
   right: calc(100% + 15px);
-  top: 0;
   z-index: 101;
-  padding-left: 10px;
-  padding-top: 10px;
 }
 #mycolorpickersave {
   left: 10px;
diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css
index 574091f1..be53dc95 100644
--- a/src/static/css/timeslider.css
+++ b/src/static/css/timeslider.css
@@ -3,7 +3,9 @@
 p.pblort {
   height: 100px;
 }
-
+.timeslider-bar #editbar {
+  display: block;
+}
 #editorcontainerbox {
   overflow: auto;
   top: 40px;
diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css
index ad17132f..b3bb1275 100644
--- a/src/static/skins/colibris/pad.css
+++ b/src/static/skins/colibris/pad.css
@@ -23,12 +23,6 @@
 
 /* NEUTRAL COLOR */
 body,
-#innerdocbody
-#users,
-#chattext,
-#chatinput,
-#chatlabel,
-#toc,
 #tocItems a,
 .toolbar ul li a:hover .buttonicon,
 .toolbar ul li a,
@@ -37,8 +31,6 @@ body,
 .btn-default,
 .color\:black,
 [data-color=black],
-#chattext.authorColors p, #chattext.authorColors span,
-#chattext .time,
 #tbl_context_menu ul .yuimenuitemlabel,
 .yui-skin-sam .yui-split-button button em:not(.color-picker-button),
 #yui-picker-panel .button-group .yui-button:first-child button,
@@ -87,7 +79,7 @@ p[data-l10n-id="ep_comments_page.comment"],
 .comment-reply-input-label span,
 .stepper, #importmessageabiword, #importmessageabiword > a
 { color: #64d29b; }
-#ui-slider-handle, #playpause_button_icon {
+#ui-slider-handle, #playpause_button_icon, .gritter-item:not(.error) {
   background-color: #64d29b;
 }
 .stepper {
@@ -101,16 +93,7 @@ p[data-l10n-id="ep_comments_page.comment"],
 
 
 /* NEUTRAL FONT */
-body,
-#innerdocbody,
-#chatinput,
-.toolbar ul li select,
-button, input, select, textarea,
-td[name=tData],
-#comments, #newComments,
-#sidediv,
-#comments .sidebar-comment,
-#timeslider #timer, .exporttype
+body
 { font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }
 
 /* PRIMARY FONT */
diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css
index b11a5425..ad29cfe2 100644
--- a/src/static/skins/colibris/src/components/chat.css
+++ b/src/static/skins/colibris/src/components/chat.css
@@ -10,20 +10,16 @@
 }
 
 #chatbox.stickyChat {
-  width: 193px !important;
-  border: none !important;
+  border: none;
 }
 
 #chatbox.stickyChat.chatAndUsersChat{
-  margin-top: 181px;
   box-shadow: none;
-  border-top: 1px solid #d2d2d2 !important;
-  padding: 0!important;
 }
 
 #titlebar {
   bottom: 0;
-  line-height: 39px;
+  line-height: 44px;
   height: 44px;
   padding: 0 7px;
   z-index: 20000;
@@ -39,13 +35,8 @@
 #chatlabel { margin-right: 15px; }
 
 #chattext {
-  top: 45px;
-  font-size: 13px;
-  bottom: 52px;
-  overflow-y: auto;
-  padding: 0;
-  border: none;
   border-bottom: 1px solid #cccccc;
+  background-color: #fcfcfc;
 }
 
 .plugin-ep_author_neat #chattext {
@@ -83,7 +74,7 @@
   padding: 8px;
 }
 
-#chatinput {
+#chatinputbox #chatinput {
   width: calc(100% - 20px);
   float: right;
 }
@@ -102,7 +93,6 @@
 @media (max-width: 720px) {
   #chaticon {
     right: 0;
-    bottom: 44px;
   }
 
   #chatbox {
diff --git a/src/static/skins/colibris/src/components/gritter.css b/src/static/skins/colibris/src/components/gritter.css
index 0b0d3827..87fd3630 100644
--- a/src/static/skins/colibris/src/components/gritter.css
+++ b/src/static/skins/colibris/src/components/gritter.css
@@ -1,28 +1,13 @@
-/* Popups at the bottom of the page to indicate when the pad expires, and others stuff */
-
-.gritter-title {
-  text-shadow: none;
-}
-
-#gritter-container {
-  background-color: #fff;
-  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
-  border-radius: 3px;
-  padding: 15px 20px 5px 30px;
-  bottom: 50px !important;
-  right: 30px !important;
-}
-
-@media (max-width: 1100px) {
-  #gritter-container {
-    display: none;
-  }
-}
-
 .gritter-item {
-  font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
-  color: #4e545b;
-  font-size: 12px;
-  line-height: 20px;
-  padding: 0;
+  margin-bottom: 10px;
+  color: white;
+  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+}
+
+.gritter-item .gritter-close {
+  margin-left: 10px;
+  margin-right: -5px;
+}
+.gritter-item .gritter-close .buttonicon {
+  color: white;
 }
\ No newline at end of file
diff --git a/src/static/skins/colibris/src/components/import-export.css b/src/static/skins/colibris/src/components/import-export.css
index bdaa184e..d09fc872 100644
--- a/src/static/skins/colibris/src/components/import-export.css
+++ b/src/static/skins/colibris/src/components/import-export.css
@@ -1,32 +1,17 @@
-#exportColumn {
-  margin-top: 0;
-  padding-left: 20px;
-  width: calc(50% - 20px);
-}
-
 #importmessageabiword {
   font-style: italic;
-  font-size: 13px;
 }
 #importmessageabiword > a {
   font-weight: bold;
   text-decoration: underline;
 }
 
-.exportlink {
-  font-size: 14px;
-  margin: 0;
-  margin-bottom: 7px;
-  margin-left: 10px;
-}
-
 .exporttype {
   margin-left: 5px;
-  font-size: 14px;
+  margin-bottom: 10px;
 }
 
 #importmessagefail {
-  font-size: 13px;
   margin-top: 10px;
 }
 
diff --git a/src/static/skins/colibris/src/components/popup.css b/src/static/skins/colibris/src/components/popup.css
index 7b3c0381..e5b396dc 100644
--- a/src/static/skins/colibris/src/components/popup.css
+++ b/src/static/skins/colibris/src/components/popup.css
@@ -1,7 +1,6 @@
-#users,
-#mycolorpicker,
-.popup,
-.hyperlink-dialog {
+.popup {
+  top: -2px;
+  right: 30px;
   border-radius: 3px;
   padding: 20px 20px;
   background: none;
@@ -10,7 +9,10 @@
   box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
 }
 
-#users input[type=text],
+#mycolorpicker, #users {
+  min-width: 0;
+}
+
 .popup input[type=text] {
   border: none !important;
   border-bottom: 1px solid #d7d8da !important;
@@ -28,3 +30,8 @@
   margin: 10px 0;
 }
 
+@media (max-width: 720px) {
+  .popup {
+    top: auto;
+  }
+}
diff --git a/src/static/skins/colibris/src/components/sidediv.css b/src/static/skins/colibris/src/components/sidediv.css
index 2fb83774..d0b254e8 100644
--- a/src/static/skins/colibris/src/components/sidediv.css
+++ b/src/static/skins/colibris/src/components/sidediv.css
@@ -22,7 +22,7 @@
 #sidedivinner>div {
   line-height: 24px;
   font-size: 10px !important;
-  color: #a0a0a0;
+  color: #7b7878;
 }
 
 #sidedivinner.authorColors>div, #sidedivinner.authorColors>div.primary-none, #sidedivinner>div {
diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css
index ce19b5be..8809db97 100644
--- a/src/static/skins/colibris/src/components/toolbar.css
+++ b/src/static/skins/colibris/src/components/toolbar.css
@@ -1,10 +1,15 @@
 .toolbar {
-  height: 39px !important;
-  padding-top: 0;
-  margin: 0;
-  background-color: white !important;
-  background: none;
-  border: 1px solid #d2d2d2
+  background-color: white;
+  border-bottom: 1px solid #d2d2d2;
+  padding: 0;
+}
+
+.toolbar ul {
+  align-items: center;
+}
+
+.toolbar ul.menu_left {
+  padding-left: 8px;
 }
 
 .toolbar .buttonicon {
@@ -14,12 +19,22 @@
 }
 
 .toolbar ul li.separator {
-  padding: 0;
   visibility: visible;
   width: 1px;
   margin: 0 10px;
-  margin-right: 6px;
-  height: 39px;
+  position: relative;
+}
+
+.toolbar ul li {
+  margin: 5px 1px;
+}
+
+.toolbar ul li.separator:after {
+  content: "";
+  position: absolute;
+  top: -20px;
+  height: 40px;
+  width: 1px;
   background-color: rgba(78, 85, 92, 0.22);
 }
 
@@ -35,23 +50,22 @@
   background-color: transparent;
   background: none;
   border: none;
-  margin-top: 6px;
 }
 
 .toolbar ul li a:hover,
 .toolbar ul li a.selected,
 .toolbar ul li a:focus {
-  background: none !important;
+  background: none;
   border-radius: 0;
 }
 
 .toolbar ul li a:hover {
-  background:#f7f7f7!important
+  background-color: #f7f7f7;
 }
 
 .toolbar ul li a.selected,
 .toolbar ul li a:focus {
-   background: #eaeaea!important;
+   background-color: #eaeaea;
 }
 
 .toolbar ul li select {
@@ -59,85 +73,48 @@
   border-bottom: 1px solid #d7d8da;
   border-radius: 0;
   width: 90px;
-  margin-top: 5px;
 }
 
-.toolbar ul {
-  height: 39px;
-}
-
-.toolbar ul.menu_left {
-  padding-left: 8px;
-}
-
-.toolbar ul.menu_right {
-  right: 0;
-  padding: 0;
-}
-
-.toolbar ul li[data-key=showusers] a {
+.toolbar ul li[data-key=showusers] {
   margin: 0;
-  height: 59px;
-  line-height: 25px;
-  width: 45px;
   margin-left: -10px;
+  width: 45px;
+  height: 100%;
+}
+.toolbar ul li[data-key=showusers] > a {
+  width: 100%;
+  height: 100%;
   border-radius: 0;
 }
 
 @media (max-width: 1000px) {
   .toolbar ul li.separator {
-    margin: 0 2px;
+    margin: 0 5px;
     background: none;
     display: block;
   }
 
-  .toolbar ul li[data-key=showusers] a {
-    margin-left: 0 !important;
+  .toolbar ul li[data-key=showusers] {
+    margin-left: -5px !important;
   }
 }
 
 @media (max-width: 720px) {
   .toolbar ul {
-    height: 39px;
+    height: 37px;
+    box-sizing: border-box;
     background: none;
     background-color: transparent;
     overflow-x: visible;
   }
-  .toolbar ul.menu_left {
-    padding: 2px 0 0 0;
-  }
   .toolbar ul.menu_right {
-    left: 0;
-    padding-left: 8px;
-    padding-top: 8px;
-    height: 35px !important;
     border-top: 1px solid #d2d2d2;
     background-color: white;
   }
-  .toolbar ul li a {
-    padding: 4px 5px !important;
-  }
 
-  .toolbar ul li[data-key=showusers] {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-  .toolbar ul li[data-key=showusers] a {
-    padding-top: 9px !important;
-  }
   .toolbar ul li a:hover { background-color: transparent; }
 
-  #connectivity, #embed, #import_export, #settings { bottom: 42px; }
-
-  li.superscript,
-  li.subscript,
-  li[data-key="undo"],
-  li[data-key="redo"] {
-    display: none;
-  }
-
-  .toolbar ul li.separator { margin: 0; }
+  .toolbar ul li.separator { margin: 0; display: none; }
 }
 
 
diff --git a/src/static/skins/colibris/src/components/users.css b/src/static/skins/colibris/src/components/users.css
index f0d02390..7bf5eee4 100644
--- a/src/static/skins/colibris/src/components/users.css
+++ b/src/static/skins/colibris/src/components/users.css
@@ -17,28 +17,13 @@ table#otheruserstable {
 }
 
 #myusernameedit {
-  width: 110px;
-}
-
-#myswatchbox {
-  background: none;
-  float: left;
-  position: relative;
-  left: 0;
-  top: 0;
-  border: none !important;
+  min-width: 110px;
 }
 
 #myswatch {
   border-radius: 50%;
 }
 
-#mycolorpicker {
-  width: auto;
-  height: auto;
-  left: -280px;
-}
-
 #colorpicker {
   margin-bottom: 25px;
 }
@@ -62,30 +47,8 @@ table#otheruserstable {
 }
 
 @media (max-width: 720px) {
-  #users {
-    bottom: 42px;
-    top: initial !important;
-    height: auto !important;
-  }
-
   #mycolorpicker {
-    width: auto;
-    height: auto;
     right: 0;
-    bottom: 42px;
     left: initial;
-    top: initial !important;
   }
-}
-
-#users.chatAndUsers {
-  width: 172px!important;
-  box-shadow: none;
-  border: none !important;
-  padding: 10px;
-  padding-top: 15px;
-}
-
-#users.chatAndUsers #myusernameedit {
-  width: calc(100% - 10px);
 }
\ 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 4a9827dc..c84fb015 100644
--- a/src/static/skins/colibris/src/layout.css
+++ b/src/static/skins/colibris/src/layout.css
@@ -1,17 +1,3 @@
-#connectivity,
-#embed,
-#import_export,
-#settings,
-#users {
-  top: 38px;
-  right: 30px;
-}
-
-#editorcontainer {
-  top: 41px !important;
-  padding-top: 0 !important;
-}
-
 #outerdocbody, .timeslider #editorcontainerbox {
   max-width: 900px;
   margin: 0 auto;
@@ -20,14 +6,12 @@
 
 #outerdocbody {
   overflow-y: auto;
-  position: relative;
-  background-color: transparent;
-  padding-left: 40px; /* space for side div */
 }
 
-#outerdocbody.plugin-ep_author_neat {
-  padding-left: 120px; /* more space for sidediv */
+#editorcontainerbox .sticky-container {
+  width: 250px;
 }
+
 @media (max-width:600px) {
   #outerdocbody.plugin-ep_author_neat { padding-left: 0; }
   #options-linenoscheck { display:none; }
@@ -39,32 +23,12 @@
   padding-left: 0; /* sidediv hidden */
 }
 
-#outerdocbody iframe {
-  display: block;
-  position: relative;
-  left: 0 !important;
-  top: 0;
-}
-
 #outerdocbody iframe, .timeslider #editorcontainerbox {
   padding: 55px;
   box-shadow: 0 0 0 0.5px rgba(209, 209, 209, 0.32), 0 0 7pt 0pt rgba(204, 204, 204, 0.52);
   border: 0;
   border-radius: 5px;
   background-color: white;
-  width: calc(100% - 110px) !important; /* 100% - padding */
-}
-
-#sidediv {
-  position: absolute;
-  right: calc(100% - 35px);
-  left: initial;
-  top: 74px !important;
-  padding: 0;
-}
-
-#outerdocbody.plugin-ep_author_neat #sidediv {
-  right: calc(100% - 113px);
 }
 
 /* Fixs comments_page & author_hover does not take in account the document padding */
@@ -92,6 +56,11 @@
   #outerdocbody.plugin-ep_comments_page  { padding-right: 0px; }
 }
 
+@media (min-width: 999px) {
+  #outerdocbody {
+    min-height: calc(100vh - 20px);
+  }
+}
 @media (max-width:1000px) {
   #outerdocbody {
     max-width: none;
@@ -100,7 +69,6 @@
   #outerdocbody iframe, .timeslider #editorcontainerbox {
     padding: 20px !important;
     border-radius: 0;
-    width: calc(100% - 40px) !important; /* 100% - padding */
   }
   #sidediv {
     top: 20px !important; /* = #outerdocbody iframe padding-top */
@@ -124,7 +92,6 @@
   }
   #outerdocbody iframe, .timeslider #editorcontainerbox {
     padding: 15px !important;
-    width: calc(100% - 30px) !important; /* 100% - padding */
   }
   #sidediv {
     display: none;
diff --git a/src/static/skins/colibris/src/plugins/brightcolorpicker.css b/src/static/skins/colibris/src/plugins/brightcolorpicker.css
index 32480cc9..8db2880c 100644
--- a/src/static/skins/colibris/src/plugins/brightcolorpicker.css
+++ b/src/static/skins/colibris/src/plugins/brightcolorpicker.css
@@ -1,13 +1,7 @@
-#colorpicker {
-    left: -200px !important;
-    top: 0px !important;
-}
-
 #colorpicker a.brightColorPicker-cancelButton {
     background: none;
     padding: 0;
     padding-top: 10px;
-    font-family: Arial, sans-serif;
     font-weight: bold;
     border: none;
 }
diff --git a/src/static/skins/colibris/src/plugins/set_title_on_pad.css b/src/static/skins/colibris/src/plugins/set_title_on_pad.css
index 94b19520..ae8ac374 100644
--- a/src/static/skins/colibris/src/plugins/set_title_on_pad.css
+++ b/src/static/skins/colibris/src/plugins/set_title_on_pad.css
@@ -1,13 +1,8 @@
-#pad_title {
-  margin-bottom: 15px !important;
-  margin-top: 5px !important;
-  display: none; /* display only when page is loaded via javascript */
+@media (max-width: 720px) {
+  #pad_title {
+      display: none !important;
+  }
 }
-
-@media (max-width:720px) {
-  #pad_title { display: none !important; }
-}
-
 #edit_title {
   color: white;
 }
diff --git a/src/static/skins/colibris/timeslider.css b/src/static/skins/colibris/timeslider.css
index ba5199ba..ee45c3bc 100644
--- a/src/static/skins/colibris/timeslider.css
+++ b/src/static/skins/colibris/timeslider.css
@@ -34,6 +34,7 @@
   border: none;
   background: none !important;
   margin-right: 10px;
+  margin-top: 10px;
 }
 
 .timeslider #padmain {
@@ -104,8 +105,8 @@
   margin: 0;
 }
 .timeslider #editbar .grouped-right {
-  margin: 0; padding: 0;
-  margin-top: 5px;
+  margin: 0;
+  border-radius: 3px;
   margin-left: 5px;
 }