From 146bece0f1ef8be5bec61f70e59a662cea387baa Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Sat, 4 Apr 2020 11:28:34 +0200
Subject: [PATCH] css: fix colorpicker

---
 src/static/css/pad/popup_users.css | 46 ++++++++----------------------
 src/templates/pad.html             |  8 ++++--
 2 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/src/static/css/pad/popup_users.css b/src/static/css/pad/popup_users.css
index 719d1bdd3..109851bad 100644
--- a/src/static/css/pad/popup_users.css
+++ b/src/static/css/pad/popup_users.css
@@ -92,49 +92,27 @@ input#myusernameedit:not(.editable) {
 /* --- MY USER COLORPICKER --- */
 /* --------------------------- */
 
-#mycolorpicker {
-  display: none;
-  position: absolute;
+#mycolorpicker.popup {
+  min-width: 0;
   right: calc(100% + 15px);
   z-index: 101;
 }
-#mycolorpickersave {
-  left: 10px;
-  font-weight: bold;
+@media (max-width: 720px) {
+  #mycolorpicker.popup {
+    right: 0;
+    left: auto;
+  }
 }
-#mycolorpickercancel {
-  left: 85px
-}
-#mycolorpickersave,
-#mycolorpickercancel {
-  background: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 12px;
-  cursor: pointer;
-  color: #000;
-  overflow: hidden;
-  padding: 4px;
-  top: 240px;
-  text-align: center;
-  position: absolute;
-  width: 60px;
+#mycolorpicker.popup .btn-container {
+  margin-top: 10px;
 }
 #mycolorpickerpreview {
-  position: absolute;
-  left: 207px;
-  top: 240px;
-  width: 16px;
-  height: 16px;
-  padding: 4px;
-  overflow: hidden;
-  color: #fff;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
+  width: 24px;
+  height: 24px;
   border-radius: 5px;
+  float: right;
 }
 
-
 /* ------------------- */
 /* --- OTHER USERS --- */
 /* ------------------- */
diff --git a/src/templates/pad.html b/src/templates/pad.html
index 6c76fea46..009fb2d71 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -341,9 +341,11 @@
             <div id="myuser">
                 <div id="mycolorpicker" class="popup">
                     <div id="colorpicker"></div>
-                    <button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save" class="btn btn-primary"></button>
-                    <button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel" class="btn btn-default"></button>
-                    <span id="mycolorpickerpreview" class="myswatchboxhoverable"></span>
+                    <div class="btn-container">
+                      <button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save" class="btn btn-primary"></button>
+                      <button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel" class="btn btn-default"></button>
+                      <span id="mycolorpickerpreview" class="myswatchboxhoverable"></span>
+                    </div>
                 </div>
                 <div id="myswatchbox"><div id="myswatch"></div></div>
                 <div id="myusernameform">