lordwelch/downthemall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Polish pref window a bit

Browse Source
This commit is contained in:
Nils Maier 2019-10-03 09:04:00 +02:00
parent 9142cc023f
commit ab3c335bf1
2 changed files with 68 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
style/prefs.css
View File

@ -1,7 +1,8 @@
/* License: gpl-v2 */
@import 'common.css';
@import "common.css";
html, body {
html,
body {
width: 100%;
height: 100%;
}
@ -18,7 +19,8 @@ article {
#tabs {
display: flex;
background: url(icon64.png) 1em 50%/32px 32px no-repeat, var(--tile-url) repeat-x, var(--toolbar-bg-color);
background: url(icon64.png) 1em 50%/32px 32px no-repeat,
var(--tile-url) repeat-x, var(--toolbar-bg-color);
padding-left: calc(2em + 32px);
color: var(--general-bgcolor);
}
@ -55,7 +57,8 @@ input.tab {
#tabsel-network:checked ~ #tabs #tabel-network {
color: var(--general-color) !important;
background: var(--general-bgcolor);
border-top: var(--toolbar-border-width) solid var(--toolbar-active-border-color);
border-top: var(--toolbar-border-width) solid
var(--toolbar-active-border-color);
}
#tabs > label {
@ -69,7 +72,8 @@ input.tab {
}
#tabs > label:hover:not(:checked) {
border-top: var(--toolbar-border-width) solid var(--toolbar-hover-border-color);
border-top: var(--toolbar-border-width) solid
var(--toolbar-hover-border-color);
background: var(--toolbar-hover-background);
}
@ -101,7 +105,7 @@ input.tab {
text-align: center;
}
.buttons > button{
.buttons > button {
margin: 0 2em;
}
@ -121,6 +125,18 @@ fieldset {
padding: 1.2em;
}
.optiongroups,
fieldset > label {
display: flex;
align-items: center;
}
fieldset > label > input,
fieldset > label > select {
margin-left: 1ex;
margin-right: 1ex;
}
legend {
font-weight: bold;
font-size: 120%;
@ -145,3 +161,24 @@ legend {
grid-column-gap: 1em;
grid-row-gap: 1ex;
}
.optiongroups {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
grid-row-gap: 1ex;
}
.optiongroups > div,
.optiongroups > div > label {
display: flex;
align-items: center;
}
.optiongroups input {
margin-left: 1em;
margin-right: 0.7ex;
}
hr {
width: 100%;
}

44
windows/prefs.html
View File

@ -43,20 +43,21 @@
<article id="tab-general" class="tab">
<fieldset>
<legend data-i18n="pref.ui">UI</legend>
<div id="pref-button-type">
<div class="optiongroups">
<label data-i18n="pref-button-type"></label>
<label><input type="radio" name="pref-button-type" value="popup"> <span data-i18n="pref-button-type-popup"></span></label>
<label><input type="radio" name="pref-button-type" value="dta"> <span data-i18n="pref-button-type-dta"></span></label>
<label><input type="radio" name="pref-button-type" value="turbo"> <span data-i18n="pref-button-type-turbo"></span></label>
<label><input type="radio" name="pref-button-type" value="manager"> <span data-i18n="pref-button-type-manager"></span></label>
</div>
<hr>
<div id="pref-theme">
<div id="pref-button-type">
<label><input type="radio" name="pref-button-type" value="popup"> <span data-i18n="pref-button-type-popup"></span></label>
<label><input type="radio" name="pref-button-type" value="dta"> <span data-i18n="pref-button-type-dta"></span></label>
<label><input type="radio" name="pref-button-type" value="turbo"> <span data-i18n="pref-button-type-turbo"></span></label>
<label><input type="radio" name="pref-button-type" value="manager"> <span data-i18n="pref-button-type-manager"></span></label>
</div>
<label data-i18n="pref-theme"></label>
<label><input type="radio" name="pref-theme" value="default"> <span data-i18n="pref-theme-default"></span></label>
<label><input type="radio" name="pref-theme" value="light"> <span data-i18n="pref-theme-light"></span></label>
<label><input type="radio" name="pref-theme" value="dark"> <span data-i18n="pref-theme-dark"></span></label>
</div>
<div id="pref-theme">
<label><input type="radio" name="pref-theme" value="default"> <span data-i18n="pref-theme-default"></span></label>
<label><input type="radio" name="pref-theme" value="light"> <span data-i18n="pref-theme-light"></span></label>
<label><input type="radio" name="pref-theme" value="dark"> <span data-i18n="pref-theme-dark"></span></label>
</div>
</div>
<hr>
<label><input type="checkbox" id="pref-manager-in-popup"> <span data-i18n="pref-manager-in-popup"></span></label>
<label><input type="checkbox" id="pref-finish-notification"> <span data-i18n="pref-finish-notification"></span></label>
@ -88,7 +89,8 @@
</fieldset>
<fieldset>
<legend>Translations</legend>
<label>Language:
<label>
<span>Language:</span>
<select id="languages">
<option value="default">Browser default</option>
</select>
@ -130,14 +132,16 @@
</article>
<article id="tab-network" class="tab">
<fieldset id="network-general">
<fieldset>
<legend data-i18n="pref.netglobal"></legend>
<label data-i18n="pref-concurrent-downloads">Concurrent downloads</label>
<input id="pref-concurrent-downloads" type="number" min="1" max="10">
<label data-i18n="pref-retries"></label>
<input id="pref-retries" type="number" min="0" max="100">
<label data-i18n="pref-retry-time"></label>
<input id="pref-retry-time" type="number" min="1" max="600">
<div id="network-general">
<label data-i18n="pref-concurrent-downloads">Concurrent downloads</label>
<input id="pref-concurrent-downloads" type="number" min="1" max="10">
<label data-i18n="pref-retries"></label>
<input id="pref-retries" type="number" min="0" max="100">
<label data-i18n="pref-retry-time"></label>
<input id="pref-retry-time" type="number" min="1" max="600">
</div>
</fieldset>
<table id="limits" data-singleselect="true">
<tr>