open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reuse radio-wrapper for visual uniformity

Browse Source
This commit is contained in:
tophf 2022-02-17 03:26:20 +03:00
parent 944c44ffb8
commit 1721bad7d8
6 changed files with 24 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
edit/settings.css
View File

@ -20,9 +20,6 @@
.style-settings > :last-child {
margin-bottom: 0;
}
.style-settings input[type=radio] {
margin: 0 .3em 0 0;
}
.style-settings input:disabled ~ label {
opacity: .5;
}
@ -44,10 +41,8 @@
.style-settings textarea:not(:placeholder-shown) {
min-width: 50vw;
}
.ss-radio {
.style-settings .radio-wrapper {
display: inline-flex;
align-items: center;
line-height: 2;
padding: 0 .8em 0 0;
}
a[data-cmd=note] {

6
edit/settings.html
View File

@ -10,13 +10,13 @@
<div i18n-text="preferScheme">
<div><small id="ss-scheme-off" i18n-text="preferSchemeAlways" hidden></small></div>
</div>
<label i18n-text-append="preferSchemeNone" class="ss-radio">
<label i18n-text-append="preferSchemeNone" class="radio-wrapper">
<input name="ss-scheme" type="radio" value="none">
</label>
<label i18n-text-append="preferSchemeDark" class="ss-radio">
<label i18n-text-append="preferSchemeDark" class="radio-wrapper">
<input name="ss-scheme" type="radio" value="dark">
</label>
<label i18n-text-append="preferSchemeLight" class="ss-radio">
<label i18n-text-append="preferSchemeLight" class="radio-wrapper">
<input name="ss-scheme" type="radio" value="light">
</label>
</div>

8
global.css
View File

@ -237,8 +237,8 @@ input[type="radio"] {
height: 13px;
width: 13px;
position: relative;
margin: 0 4px 1px 0;
}
input[type="radio"]:after {
content: '';
background-color: transparent;
@ -252,11 +252,15 @@ input[type="radio"]:after {
top: 2px;
position: absolute;
}
input[type="radio"]:checked:after {
background-color: var(--c30);
transform: scale(1);
}
.radio-wrapper {
display: flex;
align-items: center;
line-height: 1.5;
}
/* restore disabled state dimming */
button:disabled,

3
install-usercss/install-usercss.css
View File

@ -382,9 +382,6 @@ li {
#header {
height: 100% !important; /* overrides user resize */
}
#ss-scheme > label {
display: block;
}
.w100-full {
width: 100%;
margin-top: var(--child-gap);

37
options.html
View File

@ -51,33 +51,24 @@
<div class="block">
<h1 i18n-text="stylePreferSchemeLabel"></h1>
<div class="items no-stretch">
<label>
<span i18n-text-append="preferSchemeDark">
<input type="radio" value="dark" name="schemeSwitcher.enabled">
</span>
<label class="radio-wrapper" i18n-text-append="preferSchemeDark">
<input type="radio" value="dark" name="schemeSwitcher.enabled">
</label>
<label>
<span i18n-text-append="preferSchemeLight">
<input type="radio" value="light" name="schemeSwitcher.enabled">
</span>
<label class="radio-wrapper" i18n-text-append="preferSchemeLight">
<input type="radio" value="light" name="schemeSwitcher.enabled">
</label>
<label>
<span i18n-text-append="optionsAdvancedAutoSwitchSchemeBySystem">
<input type="radio" value="system" name="schemeSwitcher.enabled">
</span>
<label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeBySystem">
<input type="radio" value="system" name="schemeSwitcher.enabled">
</label>
<label>
<span i18n-text-append="optionsAdvancedAutoSwitchSchemeByTime">
<input type="radio" value="time" name="schemeSwitcher.enabled">
</span>
<label class="radio-wrapper">
<input type="radio" value="time" name="schemeSwitcher.enabled">
<span i18n-text="optionsAdvancedAutoSwitchSchemeByTime"></span>
<input type="time" required id="schemeSwitcher.nightStart">
~
<input type="time" required id="schemeSwitcher.nightEnd">
</label>
<label>
<span i18n-text-append="optionsAdvancedAutoSwitchSchemeNever">
<input type="radio" value="never" name="schemeSwitcher.enabled">
</span>
<label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeNever">
<input type="radio" value="never" name="schemeSwitcher.enabled">
</label>
</div>
</div>
@ -86,12 +77,12 @@
<h1 i18n-text="optionsCustomizeIcon"></h1>
<div class="items">
<label>
<span i18n-text-append="optionsIconAuto">
<span class="radio-wrapper" i18n-text-append="optionsIconAuto">
<input type="radio" name="iconset" value="-1" data-value-type="number">
</span>
</label>
<label>
<span i18n-text-append="optionsIconDark">
<span class="radio-wrapper" i18n-text-append="optionsIconDark">
<input type="radio" name="iconset" value="0" data-value-type="number">
</span>
<span>
@ -101,7 +92,7 @@
</span>
</label>
<label>
<span i18n-text-append="optionsIconLight">
<span class="radio-wrapper" i18n-text-append="optionsIconLight">
<input type="radio" name="iconset" value="1" data-value-type="number">
</span>
<span>

5
options/options.css
View File

@ -200,11 +200,6 @@ input[type=time] {
max-width: 7em; /* TODO: remove when strict_min_version >= 57 */
}
input[type=radio] {
margin-top: 0;
vertical-align: text-top;
}
#actions {
justify-content: space-around;
align-items: stretch;