css: refactor element positioning

No more javascript to change css properties
Remove a number of useless tables
Try to stop positioning elements with absolute, but use flex-boxes instead

Adds comment to pad template, and move popups and chatbox inside editorcontainerbox (so absolute positioning is straightforward)

Make the design more consistent: always use base color, font-family and font-size. USe relative font size if necessary (.9rem instead of 11px for example)

Remove two columns in the popups, just use one column

Remove css meant to support old browser (like -webkit-box-shadow, -moz-box-shadow). Those css rules are quite common now, and If we want to support very old browser, we should use clean-css or other tools to add them automatically

src/static/css/pad/popup.css

@@ -1,28 +1,21 @@
 .popup {
-  font-size: 12px;
-  width: 80%;
-  max-width: 500px;
+  position: absolute;
+  top: 0;
+  right: 20px;
+  display: none;
+  z-index: 500;
+  min-width: 300px;
+  max-width: 600px;
   padding: 10px;
   border-radius: 0 0 6px 6px;
   border: 1px solid #ccc;
   border-top: none;
-  background: #f7f7f7;
-  background: -webkit-linear-gradient(#F7F7F7, #EEE);
-  background: -moz-linear-gradient(#F7F7F7, #EEE);
-  background: -ms-linear-gradient(#F7F7F7, #EEE);
-  background: -o-linear-gradient(#F7F7F7, #EEE);
-  background: linear-gradient(#F7F7F7, #EEE);
-  -webkit-box-shadow: 0 0 8px #888;
-  -moz-box-shadow: 0 0 8px #888;
   box-shadow: 0 2px 4px #ddd;
-  color: #222;
+  background: #f7f7f7;
 }
 .popup input[type=text] {
   width: 100%;
   padding: 5px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
   box-sizing: border-box;
   display: block;
   margin-top: 10px;
@@ -38,15 +31,16 @@
   text-decoration: none
 }
 .popup h1 {
-  color: #555;
-  font-size: 18px
+  font-size: 1.4rem;
+      margin-bottom: 10px;
 }
 .popup h2 {
-  color: #777;
-  font-size: 15px
+  opacity: .7;
+  margin: 10px 0;
+  font-size: 1.2rem;
 }
 .popup p {
-  margin: 5px 0
+  margin: 5px 0;
 }
 .popup select {
   background: #fff;
@@ -57,58 +51,21 @@
   outline: none;
   width: 120px;
 }
-#settings,
-#import_export,
-#embed,
-#connectivity,
-#users {
-  position: absolute;
-  top: 38px;
-  right: 20px;
-  display: none;
-  z-index: 500;
-}
-
-@media all and (max-width: 400px){
-  .popup {
-    width:100%;
-    max-width:300px;
-    top: 72px !important;
-  }
-}
 
 /* Mobile devices */
 @media only screen and (max-width: 720px) {
-  #users {
-    top: auto;
-    right:0px !important;
-    bottom: 33px;
-    border-radius: 0px !important;
-    height: 55px !important;
-    overflow: auto;
-  }
-  #mycolorpicker {
-    left: 0px;
-    top:37px !important;
-    position:fixed;
-  }
   .popup {
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
     border-radius: 0;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    box-sizing: border-box;
-    width: 100%;
-  }
-  #settings,
-  #import_export,
-  #connectivity,
-  #embed {
-    top:auto;
+    top: auto;
     left: 0;
-    bottom: 33px;
+    bottom: 0;
     right: 0;
+    max-height: 80vh;
+    max-width: none;
+
+    border-radius: 6px 6px 0 0;
+    border: 1px solid #ccc;
+    border-bottom: none;
+    box-shadow: 0 -2px 4px #ddd;
   }
 }