css: Fix some problems with new UI refs #3907 (#3908)

* css: Fix sidedivinner padding  creating ui problems refs #3907

* css: Fix colorpicker for mobile

src/static/css/iframe_editor.css

@@ -17,6 +17,7 @@ html.inner-editor {
 #outerdocbody iframe {
   flex: 1 auto;
   display: flex;
+  width: 100%;
 }
 #outerdocbody #sidediv {
   order: -1; /* display it on the first row positionning, i.e. on the left */

src/static/css/pad/popup.css

@@ -75,6 +75,9 @@
     max-height: 80vh;
     overflow: auto;
   }
+  .popup#users .popup-content {
+    overflow: visible;
+  }
   /* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */
   .popup:not(.toolbar-popup) {
     top: auto;

src/static/css/pad/popup_users.css

@@ -100,8 +100,10 @@ input#myusernameedit:not(.editable) {
 }
 @media (max-width: 720px) {
   #mycolorpicker.popup {
-    right: 0;
+    top: auto;
-    left: auto;
+    bottom: 0;
+    left: auto !important;
+    right: 0 !important;
   }
 }
 #mycolorpicker.popup .btn-container {

src/static/skins/colibris/pad.css

@@ -49,8 +49,22 @@
 
   --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 
-  --editor-padding: 40px 55px;
+  --editor-horizontal-padding: 55px;
-  --editor-padding-top: 40px;
+  --editor-vertical-padding: 40px;
+}
+
+@media (max-width:1000px) {
+  :root {
+    --editor-horizontal-padding: 15px;
+    --editor-vertical-padding: 15px;
+  }
+}
+
+@media (max-width:600px) {
+  :root {
+    --editor-horizontal-padding: 15px;
+    --editor-vertical-padding: 15px;
+  }
 }
 
 /* Default scrollbar values */

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

@@ -49,11 +49,4 @@ input#myusernameedit {
 
 #mycolorpickerpreview {
   border-radius: 50%;
-}
-
-@media (max-width: 720px) {
-  #mycolorpicker {
-    right: 0;
-    left: initial;
-  }
 }

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

@@ -20,9 +20,10 @@
 #outerdocbody iframe, #outerdocbody > #innerdocbody {
   max-width: 900px;
   padding: 40px 55px;
-  padding: var(--editor-padding);
+  padding-left: var(--editor-horizontal-padding);
-  padding-top: 40px;
+  padding-right: var(--editor-horizontal-padding);
-  padding-top: var(--editor-padding-top);
+  padding-top: var(--editor-vertical-padding);
+  padding-bottom: var(--editor-vertical-padding);
   box-shadow: none;
   border: 0;
   border-radius: 8px;
@@ -32,8 +33,11 @@
   color: var(--text-color);
 }
 #sidediv {
-  padding-top: 40px; /* = #innerdocbody iframe padding-top */
+  /* Padding must be the same than editor, otherwise it creates problem */
-  padding-top: var(--editor-padding-top);
+  padding-top: 40px; /* = #innerdocbody iframe vertical padding */
+  padding-bottom: 40px;
+  padding-top: var(--editor-vertical-padding);
+  padding-bottom: var(--editor-vertical-padding);
 }
 
 /* Fixs author_hover does not take in account the document padding */
@@ -52,13 +56,9 @@
     padding-top: 0;
   }
   #outerdocbody iframe, #outerdocbody > #innerdocbody {
-    padding: 20px;
     max-width: none;
     border-radius: 0;
   }
-  #sidediv {
-    padding-top: 20px !important; /* = #outerdocbody iframe padding-top */
-  }
 
   .authortooltip { margin-top: 20px !important; }
   .caretindicator { margin-top: 0px !important; }
@@ -71,12 +71,6 @@
   #outerdocbody.plugin-ep_author_neat #sidediv { padding-right: 0 !important; }
 }
 
-@media (max-width:600px) {
-  #outerdocbody iframe, #outerdocbody > #innerdocbody {
-    padding: 15px;
-  }
-  /* #sidediv is hidden at this size of screen */
-}
 @media only screen and (max-width: 720px) {
   #editorcontainerbox {
     margin-bottom: 39px; /* margin for bottom toolbar */

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

@@ -189,8 +189,8 @@
   .light-editor.light-background,
   .super-dark-editor.super-dark-background,
   .dark-editor.dark-background {
-    --editor-padding: 20px 35px;
+    --editor-horizontal-padding: 35px;
-    --editor-padding-top: 20px;
+    --editor-vertical-padding: 20px;
   }
 }
 
@@ -218,8 +218,8 @@
 }
 @media (min-width: 1001px) {
   .full-width-editor {
-    --editor-padding: 20px 35px !important;
+    --editor-horizontal-padding: 35px !important;
-    --editor-padding-top: 20px !important;
+    --editor-vertical-padding: 20px !important;
   }
 }
 .full-width-editor ::-webkit-scrollbar-track,