css: fix colorpicker

This commit is contained in:
Sebastian Castro 2020-04-04 11:28:34 +02:00 committed by muxator
parent b94019e99e
commit 146bece0f1
2 changed files with 17 additions and 37 deletions

View file

@ -92,49 +92,27 @@ input#myusernameedit:not(.editable) {
/* --- MY USER COLORPICKER --- */ /* --- MY USER COLORPICKER --- */
/* --------------------------- */ /* --------------------------- */
#mycolorpicker { #mycolorpicker.popup {
display: none; min-width: 0;
position: absolute;
right: calc(100% + 15px); right: calc(100% + 15px);
z-index: 101; z-index: 101;
} }
#mycolorpickersave { @media (max-width: 720px) {
left: 10px; #mycolorpicker.popup {
font-weight: bold; right: 0;
left: auto;
}
} }
#mycolorpickercancel { #mycolorpicker.popup .btn-container {
left: 85px margin-top: 10px;
}
#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;
} }
#mycolorpickerpreview { #mycolorpickerpreview {
position: absolute; width: 24px;
left: 207px; height: 24px;
top: 240px;
width: 16px;
height: 16px;
padding: 4px;
overflow: hidden;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
float: right;
} }
/* ------------------- */ /* ------------------- */
/* --- OTHER USERS --- */ /* --- OTHER USERS --- */
/* ------------------- */ /* ------------------- */

View file

@ -341,9 +341,11 @@
<div id="myuser"> <div id="myuser">
<div id="mycolorpicker" class="popup"> <div id="mycolorpicker" class="popup">
<div id="colorpicker"></div> <div id="colorpicker"></div>
<button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save" class="btn btn-primary"></button> <div class="btn-container">
<button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel" class="btn btn-default"></button> <button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save" class="btn btn-primary"></button>
<span id="mycolorpickerpreview" class="myswatchboxhoverable"></span> <button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel" class="btn btn-default"></button>
<span id="mycolorpickerpreview" class="myswatchboxhoverable"></span>
</div>
</div> </div>
<div id="myswatchbox"><div id="myswatch"></div></div> <div id="myswatchbox"><div id="myswatch"></div></div>
<div id="myusernameform"> <div id="myusernameform">