css: various improvements

src/static/css/pad.css

@@ -29,6 +29,7 @@ select {
   border: 1px solid #ccc;
   outline: none;
   width: 120px;
+  cursor: pointer;
 }
 
 .clear {

src/static/css/pad/popup.css

@@ -65,23 +65,19 @@
 @media only screen and (max-width: 720px) {
   .popup {
     border-radius: 0;
-    left: 0;
+    top: 1rem;
-    right: 0;
+    margin: 0 !important;
-    max-height: 80vh;
+    right: 1rem !important;
+    left: 1rem !important;
     max-width: none !important;
   }
+  .popup-content {
+    max-height: 80vh;
+    overflow: auto;
+  }
   /* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */
   .popup:not(.toolbar-popup) {
     top: auto;
-    bottom: 0;
+    bottom: 1rem;
-    border-radius: 6px 6px 0 0;
-    border: 1px solid #ccc;
-    border-bottom: none;
-    box-shadow: 0 -2px 4px #ddd;
-  }
-
-  .toolbar-popup {
-    left: 0 !important; /* overide javascript positionning */
-    right: 0 !important;
   }
 }

src/static/css/pad/toolbar.css

@@ -78,10 +78,10 @@
   padding-left: 3px;
 }
 .toolbar ul li[data-key=showusers] > a #online_count {
-  color: #777;
+  font-weight: bold;
   font-size: 11px;
   position: relative;
-  padding-left: 5px;
+  padding-left: 7px;
 }
 
 .toolbar #toolbar-overlay {

src/static/css/timeslider.css

@@ -2,6 +2,9 @@
   padding: 10px;
   display: block;
 }
+#innerdocbody {
+  margin: 0 auto;
+}
 
 .timeslider-bar {
   display: flex;

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

@@ -2,6 +2,7 @@ input[type="text"], select {
   border-radius: 3px;
   box-shadow: none;
   border: none;
+  outline: 0;
 }
 
 input[type="text"] {

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

@@ -27,14 +27,6 @@
   margin: 10px 0;
 }
 
-@media (max-width: 720px) {
-  .popup {
-    right: 0;
-    border-radius: 0 !important;
-    border: none !important;
-  }
-}
-
 .popup .dropdowns-container .dropdown-line {
   margin-top: 15px;
 }
@@ -45,3 +37,13 @@
 .popup .dropdowns-container select {
   min-width: 180px;
 }
+
+@media (max-width: 720px) {
+  .popup-content {
+    padding: 1rem;
+    box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), -1px 1px 16px 3px rgba(27, 39, 51, 0.12);
+  }
+  .popup .dropdowns-container select {
+    min-width: 0;
+  }
+}

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

@@ -34,21 +34,12 @@
 }
 
 .toolbar ul li.separator {
-  visibility: visible;
+  visibility: hidden;
   width: 1px;
   margin: 0 10px;
   position: relative;
 }
 
-.toolbar ul li.separator:after {
-  content: "";
-  position: absolute;
-  top: -25px;
-  height: 50px;
-  width: 1px;
-  background-color: var(--border-color);
-}
-
 .toolbar.condensed ul li {
   margin-left: 0;
 }
@@ -90,7 +81,7 @@
 
 .toolbar ul li[data-key=showusers] {
   margin: 0;
-  margin-left: 10px;
+  margin-left: 15px;
   width: 45px;
   height: 100%;
   background-color: var(--bg-color);
@@ -110,12 +101,10 @@
 }
 
 .toolbar.cropped .menu_left {
-  height: 35px;
+  height: 39px;
+  padding-top: 1px;
 }
 .toolbar .show-more-icon-btn {
-  height: 35px;
-  width: 35px;
-  line-height: 35px;
   font-size: 1.8rem;
   color: var(--primary-color);
 }
@@ -131,7 +120,7 @@
 @media (max-width: 720px) {
 
   .toolbar ul li {
-    margin: 5px 1px;
+    margin: 5px 2px;
   }
 
   .toolbar .menu_right {

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

@@ -37,18 +37,18 @@
 }
 
 
-@media (min-width: 999px) {
+@media (min-width: 1001px) {
   #outerdocbody {
     min-height: calc(100vh - 20px);
   }
 }
 @media (max-width:1000px) {
   #outerdocbody {
-    max-width: none;
     padding-top: 0;
   }
   #outerdocbody iframe, #outerdocbody > #innerdocbody {
     padding: 20px;
+    max-width: none;
     border-radius: 0;
   }
   #sidediv {
@@ -72,4 +72,9 @@
   }
   /* #sidediv is hidden at this size of screen */
 }
+@media only screen and (max-width: 720px) {
+  #editorcontainerbox {
+    margin-bottom: 39px; /* margin for bottom toolbar */
+  }
+}