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

52
options/options.css
View File

@ -153,11 +153,12 @@ label,
} }
label > :first-child { label > :first-child {
margin-right: 8px;
flex-grow: 1;
transition: text-shadow .1s; transition: text-shadow .1s;
} }
.items:not(.no-stretch) label > :first-child {
margin-right: 8px;
flex-grow: 1;
}
label:not([disabled]):hover > :first-child { label:not([disabled]):hover > :first-child {
text-shadow: 0 0 0.01px rgba(0, 0, 0, .25); text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
} }
@ -194,27 +195,14 @@ input[type="color"] {
height: 2em; height: 2em;
} }
.iconset { input[type=time] {
display: flex; margin: 0 .5em;
align-items: center; max-width: 7em; /* TODO: remove when strict_min_version >= 57 */
} }
.iconset input {
display: block; input[type=radio] {
} margin-top: 0;
.iconset input[type="radio"] { vertical-align: text-top;
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;
} }
#actions { #actions {
@ -306,24 +294,6 @@ html:not(.firefox):not(.opera) #updates {
position: relative; 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 { .sync-status {
width: 0; /* together with flex-grow makes it reuse the current width */ width: 0; /* together with flex-grow makes it reuse the current width */
flex-grow: 1; flex-grow: 1;