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

simplify radio groups

Browse Source
This commit is contained in:
tophf 2022-02-16 21:41:51 +03:00
parent bf90da9e29
commit 321e06b4db
2 changed files with 53 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
options.html
View File

@ -50,28 +50,35 @@
<div class="block">
<h1 i18n-text="stylePreferSchemeLabel"></h1>
<div class="items">
<div class="radio-group">
<label class="radio-group-item" i18n-text-append="preferSchemeDark">
<input type="radio" value="dark" name="schemeSwitcher.enabled" class="radio">
</label>
<label class="radio-group-item" i18n-text-append="preferSchemeLight">
<input type="radio" value="light" name="schemeSwitcher.enabled" class="radio">
</label>
<label class="radio-group-item" i18n-text-append="optionsAdvancedAutoSwitchSchemeBySystem">
<input type="radio" value="system" name="schemeSwitcher.enabled" class="radio">
</label>
<label class="radio-group-item">
<input type="radio" value="time" name="schemeSwitcher.enabled" class="radio">
<span i18n-text="optionsAdvancedAutoSwitchSchemeByTime"></span>
<input type="time" required id="schemeSwitcher.nightStart">
~
<input type="time" required id="schemeSwitcher.nightEnd">
</label>
<label class="radio-group-item" i18n-text-append="optionsAdvancedAutoSwitchSchemeNever">
<input type="radio" value="never" name="schemeSwitcher.enabled" class="radio">
</label>
</div>
<div class="items no-stretch">
<label>
<span i18n-text-append="preferSchemeDark">
<input type="radio" value="dark" name="schemeSwitcher.enabled">
</span>
</label>
<label>
<span i18n-text-append="preferSchemeLight">
<input type="radio" value="light" name="schemeSwitcher.enabled">
</span>
</label>
<label>
<span i18n-text-append="optionsAdvancedAutoSwitchSchemeBySystem">
<input type="radio" value="system" name="schemeSwitcher.enabled">
</span>
</label>
<label>
<span i18n-text-append="optionsAdvancedAutoSwitchSchemeByTime">
<input type="radio" value="time" name="schemeSwitcher.enabled">
</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>
</div>
</div>
@ -79,29 +86,29 @@
<h1 i18n-text="optionsCustomizeIcon"></h1>
<div class="items">
<label>
<span i18n-text="optionsIconDark"></span>
<div class="iconset">
<span i18n-text-append="optionsIconAuto">
<input type="radio" name="iconset" value="-1" data-value-type="number">
</span>
</label>
<label>
<span i18n-text-append="optionsIconDark">
<input type="radio" name="iconset" value="0" data-value-type="number">
</span>
<span>
<img src="/images/icon/16.png">
<img src="/images/icon/16w.png">
<img src="/images/icon/16x.png">
</div>
</span>
</label>
<label>
<span i18n-text="optionsIconLight"></span>
<div class="iconset">
<span i18n-text-append="optionsIconLight">
<input type="radio" name="iconset" value="1" data-value-type="number">
</span>
<span>
<img src="/images/icon/light/16.png">
<img src="/images/icon/light/16w.png">
<img src="/images/icon/light/16x.png">
</div>
</label>
<label>
<span i18n-text="optionsIconAuto"></span>
<div class="iconset">
<input type="radio" name="iconset" value="-1" data-value-type="number">
<div class="iconset-auto"></div>
</div>
</span>
</label>
</div>
</div>

52
options/options.css
View File

@ -153,11 +153,12 @@ label,
}
label > :first-child {
margin-right: 8px;
flex-grow: 1;
transition: text-shadow .1s;
}
.items:not(.no-stretch) label > :first-child {
margin-right: 8px;
flex-grow: 1;
}
label:not([disabled]):hover > :first-child {
text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
}
@ -194,27 +195,14 @@ input[type="color"] {
height: 2em;
}
.iconset {
display: flex;
align-items: center;
input[type=time] {
margin: 0 .5em;
max-width: 7em; /* TODO: remove when strict_min_version >= 57 */
}
.iconset input {
display: block;
}
.iconset input[type="radio"] {
margin: 2px 4px 0 0;
}
.iconset-auto {
width: 48px;
}
.iconset-auto::after {
content: '?';
background: var(--accent-1);
color: var(--bg);
padding: 1px 4px;
border-radius: 50%;
line-height: 1;
font-weight: bold;
input[type=radio] {
margin-top: 0;
vertical-align: text-top;
}
#actions {
@ -306,24 +294,6 @@ html:not(.firefox):not(.opera) #updates {
position: relative;
}
.radio-group-item {
display: flex;
align-items: center;
line-height: 1.5;
}
.radio-group-item > input[type=radio] {
margin: 0 .5em 0 0;
flex: 0 0 auto;
}
.radio-group-label {
display: block;
margin: 0 0 .3em;
}
input[type=time] {
margin: 0 .5em;
max-width: 7em; /* TODO: remove when strict_min_version >= 57 */
}
.sync-status {
width: 0; /* together with flex-grow makes it reuse the current width */
flex-grow: 1;