simplify css/html in popup (#1408)
+ reuse global checkbox-wrapper more
This commit is contained in:
tophf
GitHub
parent
9d64e9ba54
commit
ad969fca6a
|
|
@ -203,6 +203,10 @@ input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
|
|||
label {
|
||||
transition: color .1s;
|
||||
}
|
||||
.checkbox-wrapper {
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select {
|
||||
-moz-appearance: none;
|
||||
|
|
|
|||
|
|
@ -91,8 +91,6 @@ h1 {
|
|||
content: "v";
|
||||
}
|
||||
.checkbox-wrapper {
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -242,9 +242,8 @@ async function showUpdateHistory(event) {
|
|||
scrollToBottom();
|
||||
|
||||
$('#message-box-buttons button').insertAdjacentElement('afterend',
|
||||
// TODO: add a global class for our labels
|
||||
// TODO: add a <template> or a common function to create such controls
|
||||
$create('label', {style: 'position: relative; padding-left: 16px;'}, [
|
||||
$create('label.checkbox-wrapper', [
|
||||
toggler =
|
||||
$create('input', {type: 'checkbox', checked: true, onchange: toggleSkipped}),
|
||||
$create('SVG:svg.svg-icon.checked',
|
||||
|
|
|
|||
11
popup.html
11
popup.html
|
|
@ -192,25 +192,18 @@
|
|||
</div>
|
||||
|
||||
<div class="actions" id="main-actions">
|
||||
<div id="disable-all-wrapper">
|
||||
<div class="main-controls">
|
||||
<label id="disableAll-label" i18n="disableAllStyles">
|
||||
<input id="disableAll" type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-controls">
|
||||
<div id="find-styles">
|
||||
<a id="find-styles-link" i18n="findStyles, title:findStylesForSite"
|
||||
href="https://to.be.replaced.on.click/" target="_blank"></a>
|
||||
<span id="find-styles-inline-group">
|
||||
<label i18n="title:findStylesInlineTooltip">
|
||||
<label id="find-styles-inline-group" class="checkbox-wrapper" i18n="title:findStylesInlineTooltip">
|
||||
<input id="popup.findStylesInline" class="checker" type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
<span i18n="findStylesInline"></span>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<div id="write-style">
|
||||
<a id="write-for-frames" title="‹iframe›..." tabindex="0" hidden></a>
|
||||
|
|
@ -218,7 +211,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div id="popup-options">
|
||||
<div class="split-btn">
|
||||
<button id="popup-manage-button" i18n="openManage, title:popupManageTooltip"
|
||||
|
|
@ -230,7 +222,6 @@
|
|||
i18n="linkStylusWiki, title:linkGetHelp"
|
||||
data-href="https://github.com/openstyles/stylus/wiki"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="search-results-error" class="hidden"></div>
|
||||
<div id="search-results" class="hidden">
|
||||
|
|
|
|||
128
popup/popup.css
128
popup/popup.css
|
|
@ -2,6 +2,10 @@
|
|||
--inner-padding: 18px; /* checkbox + gap */
|
||||
--outer-padding: 9px;
|
||||
--hotkey-margin: 16px;
|
||||
--red1: hsl(0, 70%, 45%);
|
||||
}
|
||||
[data-ui-theme="dark"] {
|
||||
--red1: hsl(0, 85%, 65%);
|
||||
}
|
||||
|
||||
html, body {
|
||||
|
|
@ -26,69 +30,33 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
|
|||
.firefox .chromium-only {
|
||||
display: none;
|
||||
}
|
||||
/************ checkbox ************/
|
||||
|
||||
.style-name:hover .checker:checked,
|
||||
.style-name:hover .checker {
|
||||
border-color: var(--c30);
|
||||
background-color: var(--c80);
|
||||
}
|
||||
|
||||
#disable-all-wrapper input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
|
||||
fill: hsl(0, 68%, 42%);
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked {
|
||||
border-color: hsl(0, 68%, 50%);
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
|
||||
fill: var(--bg);
|
||||
}
|
||||
|
||||
#disableAll:hover {
|
||||
border-color: hsl(0, 68%, 50%);
|
||||
background-color: hsl(20, 70%, 75%);
|
||||
}
|
||||
|
||||
#disableAll-label:hover {
|
||||
color: hsl(0, 68%, 42%);
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked:hover {
|
||||
border-color: hsl(0, 50%, 56%);
|
||||
background-color: hsl(0, 50%, 56%);
|
||||
}
|
||||
|
||||
#installed .style-name .checker,
|
||||
#installed .style-name .svg-icon.checked {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: var(--outer-padding);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#disable-all-wrapper {
|
||||
padding: 0.3em 0 0.6em;
|
||||
}
|
||||
|
||||
#disable-all-wrapper .main-controls {
|
||||
display: flex;
|
||||
#main-actions {
|
||||
/* raise the actions above the hotkey-info */
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
#disable-all-wrapper .main-controls label {
|
||||
#main-actions > * {
|
||||
margin-top: .75em;
|
||||
padding-left: var(--inner-padding);
|
||||
display: block;
|
||||
}
|
||||
|
||||
#disableAll {
|
||||
/*left: calc(-1 * var(--inner-padding));*/
|
||||
}
|
||||
#disableAll-label {
|
||||
position: relative;
|
||||
transition: color .25s;
|
||||
font-size: 12px;
|
||||
}
|
||||
.all-disabled #disableAll {
|
||||
border-color: var(--red1);
|
||||
}
|
||||
.all-disabled #disableAll-label {
|
||||
font-weight: bold;
|
||||
color: var(--red1);
|
||||
}
|
||||
.all-disabled #disableAll-label .svg-icon {
|
||||
fill: var(--red1);
|
||||
}
|
||||
|
||||
#no-styles {
|
||||
|
|
@ -100,9 +68,19 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
|
|||
cursor: pointer;
|
||||
margin-right: .5em;
|
||||
}
|
||||
#find-styles-inline-group label {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
|
||||
.style-name:hover .checker:checked,
|
||||
.style-name:hover .checker {
|
||||
border-color: var(--c30);
|
||||
background-color: var(--c80);
|
||||
}
|
||||
|
||||
#installed .style-name .checker,
|
||||
#installed .style-name .svg-icon.checked {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: var(--outer-padding);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checker {
|
||||
|
|
@ -139,15 +117,10 @@ body.blocked > DIV {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#installed.disabled .style-name {
|
||||
.all-disabled .style-name {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll-label {
|
||||
font-weight: bold;
|
||||
color: firebrick;
|
||||
}
|
||||
|
||||
#installed .actions {
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -312,7 +285,7 @@ a.configure[target="_blank"] .svg-icon.config {
|
|||
}
|
||||
|
||||
.not-applied:hover .style-name {
|
||||
color: darkred;
|
||||
color: var(--red1);
|
||||
}
|
||||
|
||||
.frame-url::before {
|
||||
|
|
@ -479,23 +452,6 @@ a:hover .svg-icon {
|
|||
fill: var(--fg);
|
||||
}
|
||||
|
||||
body > .actions {
|
||||
margin-top: 0.5em;
|
||||
/* raise the actions above the hotkey-info */
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.actions > div:not(:last-child):not(#disable-all-wrapper),
|
||||
.actions > .main-controls > div:not(:last-child) {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
.actions input,
|
||||
.actions label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
body.blocked #popup-manage-button + .split-btn-pedal,
|
||||
body.blocked #installed > :not(.frame),
|
||||
body.blocked .actions > .main-controls {
|
||||
|
|
@ -911,7 +867,7 @@ html:not(.styles-last) .split-btn-pedal::after {
|
|||
|
||||
#hotkey-info div:first-child {
|
||||
flex-grow: 1;
|
||||
padding: 0 1em;
|
||||
padding: 0 1em 1em;
|
||||
font-size: 11px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ async function initPopup(frames) {
|
|||
|
||||
// action buttons
|
||||
$('#disableAll').onchange = function () {
|
||||
installed.classList.toggle('disabled', this.checked);
|
||||
$.rootCL.toggle('all-disabled', this.checked);
|
||||
};
|
||||
setupLivePrefs();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user