colibris: improve colibris responsive

src/static/skins/colibris/pad.css

@@ -5,7 +5,7 @@
 @import url("src/components/popup.css");
 
 @import url("src/components/chat.css");
-@import url("src/components/editor-sidediv.css");
+@import url("src/components/sidediv.css");
 @import url("src/components/gritter.css");
 @import url("src/components/table-of-content.css");
 @import url("src/components/toolbar.css");
@@ -52,4 +52,4 @@ h1,
 #titlelabel,
 #chatlabel,
 .btn
-{ font-family: opendyslexic !important; }
+{ font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;  }

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

@@ -87,4 +87,18 @@
   border: none;
   padding: 10px 20px;
   right: 30px;
+}
+
+@media (max-width: 720px) {
+  #chaticon {
+    right: 0;
+    bottom: 44px;
+  }
+
+  #chatbox {
+    width: 100%;
+    right: 0;
+  }
+
+  #titlesticky { display: none; }
 }

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

@@ -2,6 +2,7 @@
   background-color: transparent;
   border: none;
   font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  display: block;
 }
 
 #sidedivinner>div:before {

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

@@ -66,7 +66,7 @@
   padding: 0;
 }
 
-.toolbar ul li a[data-l10n-id="pad.toolbar.showusers.title"] {
+.toolbar ul li[data-key=showusers] a {
   margin: 0;
   height: 59px;
   line-height: 25px;
@@ -75,7 +75,19 @@
   border-radius: 0;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
+  .toolbar ul li.separator {
+    margin: 0 2px;
+    background: none;
+    display: block;
+  }
+
+  .toolbar ul li[data-key=showusers] a {
+    margin-left: 0 !important;
+  }
+}
+
+@media (max-width: 720px) {
 .toolbar ul {
     height: 39px;
     background: none;
@@ -83,21 +95,41 @@
     border: none !important;
     padding: 0 !important;
   }
+  .toolbar ul.menu_left {
+    padding-top: 2px !important;
+  }
   .toolbar ul.menu_right {
+    left: 0;
+    padding-left: 8px !important;
+    padding-top: 8px !important;
+    height: 35px !important;
     border-top: 1px solid #d2d2d2 !important;
+    background-color: white;
   }
   .toolbar ul li a {
     padding: 4px 5px !important;
   }
-}
 
-@media (max-width: 1000px) {
+  .toolbar ul li[data-key=showusers] {
-  .toolbar ul li.separator {
+    position: absolute;
-    margin: 0 2px;
+    right: 0;
-    background: none;
+    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 a[data-l10n-id="pad.toolbar.showusers.title"] {
+  .toolbar ul li.separator { margin: 0; }
-    margin-left: 0 !important;
-  }
 }
+
+

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

@@ -63,4 +63,21 @@ table#otheruserstable {
   border-radius: 50%;
   height: 20px;
   width: 20px;
+}
+
+@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;
+  } 
 }

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

@@ -30,7 +30,7 @@
   left: 0 !important;
   top: 0;
   width: calc(100% - 110px) !important; /* 100% - padding */
-  padding: 45px 55px;
+  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;
@@ -41,7 +41,7 @@
   position: absolute;
   right: calc(100% - 35px);
   left: initial;
-  top: 64px !important;
+  top: 74px !important;
   padding: 0;
 }
 
@@ -60,59 +60,16 @@
   }
 }
 
-/*
+@media (max-width:600px) {
-@media (min-width:800px) and (max-width:1200px) {
+  html { overflow: scroll; }
+  #outerdocbody {
+    width: 100%;
+  }
   #outerdocbody iframe {
-    width: calc(100% - 60px) !important;
+    padding: 15px !important;
-    padding: 30px !important;
+    width: calc(100% - 30px) !important; /* 100% - padding */
-    top: 0 !important;
-    border-radius: 0 !important;
   }
-  #outerdocbody {
+  #sidediv { 
-    position: relative !important;
+    display: block;
-    padding-left: 120px !important;
-    right: 0 !important;
-    left: 0 !important;
-    width: calc(100% - 320px) !important;
-    margin: 0;
-    max-width: none;
-    padding-top: 0 !important;
-  }
-  #outerdocbody #sidediv {
-    padding: 33px 0 0 !important;
-    right: calc(100% - 105px);
-  }
-  #comments {
-    right: 0px;
-    left: auto !important;
   }
 }
-
-@media (min-width: 800px) and (max-width:955px) {
-  #outerdocbody {
-    padding-right: 0 !important;
-    width: calc(100% - 110px) !important;
-  }
-}
-
-@media (max-width: 800px) {
-  #outerdocbody iframe {
-    width: calc(100% - 12px) !important;
-    padding: 10px !important;
-    top: 0 !important;
-    border-radius: 0 !important;
-  }
-  #outerdocbody #sidediv,
-  #chaticon,
-  li.superscript,
-  li.subscript,
-  li[data-key="undo"],
-  li[data-key="redo"] {
-    display: none;
-  }
-  #outerdocbody {
-    padding-top: 0 !important;
-  }
-  
-}
-*/

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

@@ -1,6 +1,15 @@
 #innerdocbody {
   font-size: 15px;
-  line-height: 20px; /* increase this line-height to 25px when no background color for text */
+  line-height: 25px; 
+  padding: 0;
+}
+
+#innerdocbody span {
+  padding: 4px 0 !important;
+}
+
+#innerdocbody h1 span {
+  padding: 0;
 }
 
 body {
@@ -12,8 +21,7 @@ option {
 }
 
 h1 {
-  font-size: 2.5em;
+  font-size: 2.5em !important;
-  padding: 9px 0; /* need when coloring background text because it overlap previous and next line */
 }
 
 h3 {
@@ -21,5 +29,9 @@ h3 {
   letter-spacing: 1px;
 }
 
+a {
+  color: #3f51b5;
+}
+