css: various improvements

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 */
+  }
+}