switch to red bg

This commit is contained in:
tophf 2022-03-15 07:33:06 +03:00
parent d76b80682c
commit c01136c78a
5 changed files with 32 additions and 18 deletions

View File

@ -308,15 +308,27 @@ summary {
position: absolute; position: absolute;
} }
.all-disabled #disableAll {
border-color: var(--red1);
}
.all-disabled #disableAll-label { .all-disabled #disableAll-label {
position: relative;
background: var(--red1);
width: 100%;
color: #fff;
font-weight: bold; font-weight: bold;
color: var(--red1); }
.all-disabled #disableAll-label::before {
position: absolute;
content: '';
left: 0;
width: 100%;
height: 100%;
border: var(--outer-padding, 1rem) solid var(--red1);
margin: calc(-1 * var(--outer-padding, 1rem));
} }
.all-disabled #disableAll-label .svg-icon { .all-disabled #disableAll-label .svg-icon {
fill: currentColor; fill: #fff;
}
.all-disabled #disableAll {
border-color: #fff;
} }
:focus, :focus,

View File

@ -350,12 +350,10 @@
<span><a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n="linkTranslate"></a></span> <span><a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n="linkTranslate"></a></span>
</div> </div>
<p> <label id="disableAll-label" i18n="disableAllStyles" hidden>
<label id="disableAll-label" i18n="disableAllStyles"> <input id="disableAll" type="checkbox">
<input id="disableAll" type="checkbox"> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> </label>
</label>
</p>
</div> </div>
</div> </div>

View File

@ -69,6 +69,11 @@ a:hover {
text-align: left; text-align: left;
} }
#disableAll-label:not([hidden]) {
display: block;
margin-top: 1rem;
}
#header h1 { #header h1 {
margin-top: 0; margin-top: 0;
margin-bottom: .3em; margin-bottom: .3em;

View File

@ -71,6 +71,11 @@ newUI.renderClass();
router.makeToggle('update-history', (...args) => showUpdateHistory(...args), [ router.makeToggle('update-history', (...args) => showUpdateHistory(...args), [
'/manage/updater-ui', /* global showUpdateHistory */ '/manage/updater-ui', /* global showUpdateHistory */
]); ]);
if (prefs.get('disableAll')) {
$('#disableAll-label').hidden = false;
} else {
prefs.subscribe('disableAll', () => ($('#disableAll-label').hidden = false));
}
$$('#header a[href^="http"]').forEach(a => (a.onclick = Events.external)); $$('#header a[href^="http"]').forEach(a => (a.onclick = Events.external));
window.on('pageshow', handleVisibilityChange); window.on('pageshow', handleVisibilityChange);
window.on('pagehide', handleVisibilityChange); window.on('pagehide', handleVisibilityChange);

View File

@ -36,7 +36,7 @@ body:not(.blocked) .if-blocked,
z-index: 4; z-index: 4;
} }
#main-actions > * { #main-actions > * {
margin-top: .75em; margin-top: var(--outer-padding);
padding-left: var(--inner-padding); padding-left: var(--inner-padding);
display: block; display: block;
} }
@ -45,12 +45,6 @@ body:not(.blocked) .if-blocked,
width: fit-content; width: fit-content;
position: relative; position: relative;
} }
.all-disabled #installed:hover + #main-actions #disableAll-label {
animation: .5s blink-red infinite;
}
@keyframes blink-red {
50% { color: var(--fg); }
}
#no-styles { #no-styles {
padding: 6px var(--outer-padding); padding: 6px var(--outer-padding);