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 */ /* License: gpl-v2 */
@import 'common.css'; @import "common.css";
html, body { html,
body {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -18,7 +19,8 @@ article {
#tabs { #tabs {
display: flex; 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); padding-left: calc(2em + 32px);
color: var(--general-bgcolor); color: var(--general-bgcolor);
} }
@ -55,7 +57,8 @@ input.tab {
#tabsel-network:checked ~ #tabs #tabel-network { #tabsel-network:checked ~ #tabs #tabel-network {
color: var(--general-color) !important; color: var(--general-color) !important;
background: var(--general-bgcolor); 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 { #tabs > label {
@ -69,7 +72,8 @@ input.tab {
} }
#tabs > label:hover:not(:checked) { #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); background: var(--toolbar-hover-background);
} }
@ -101,7 +105,7 @@ input.tab {
text-align: center; text-align: center;
} }
.buttons > button{ .buttons > button {
margin: 0 2em; margin: 0 2em;
} }
@ -121,6 +125,18 @@ fieldset {
padding: 1.2em; padding: 1.2em;
} }
.optiongroups,
fieldset > label {
display: flex;
align-items: center;
}
fieldset > label > input,
fieldset > label > select {
margin-left: 1ex;
margin-right: 1ex;
}
legend { legend {
font-weight: bold; font-weight: bold;
font-size: 120%; font-size: 120%;
@ -145,3 +161,24 @@ legend {
grid-column-gap: 1em; grid-column-gap: 1em;
grid-row-gap: 1ex; 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"> <article id="tab-general" class="tab">
<fieldset> <fieldset>
<legend data-i18n="pref.ui">UI</legend> <legend data-i18n="pref.ui">UI</legend>
<div id="pref-button-type"> <div class="optiongroups">
<label data-i18n="pref-button-type"></label> <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> <div id="pref-button-type">
<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="popup"> <span data-i18n="pref-button-type-popup"></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="dta"> <span data-i18n="pref-button-type-dta"></span></label>
<label><input type="radio" name="pref-button-type" value="manager"> <span data-i18n="pref-button-type-manager"></span></label> <label><input type="radio" name="pref-button-type" value="turbo"> <span data-i18n="pref-button-type-turbo"></span></label>
</div> <label><input type="radio" name="pref-button-type" value="manager"> <span data-i18n="pref-button-type-manager"></span></label>
<hr> </div>
<div id="pref-theme">
<label data-i18n="pref-theme"></label> <label data-i18n="pref-theme"></label>
<label><input type="radio" name="pref-theme" value="default"> <span data-i18n="pref-theme-default"></span></label> <div id="pref-theme">
<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="default"> <span data-i18n="pref-theme-default"></span></label>
<label><input type="radio" name="pref-theme" value="dark"> <span data-i18n="pref-theme-dark"></span></label> <label><input type="radio" name="pref-theme" value="light"> <span data-i18n="pref-theme-light"></span></label>
</div> <label><input type="radio" name="pref-theme" value="dark"> <span data-i18n="pref-theme-dark"></span></label>
</div>
</div>
<hr> <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-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> <label><input type="checkbox" id="pref-finish-notification"> <span data-i18n="pref-finish-notification"></span></label>
@ -88,7 +89,8 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Translations</legend> <legend>Translations</legend>
<label>Language: <label>
<span>Language:</span>
<select id="languages"> <select id="languages">
<option value="default">Browser default</option> <option value="default">Browser default</option>
</select> </select>
@ -130,14 +132,16 @@
</article> </article>
<article id="tab-network" class="tab"> <article id="tab-network" class="tab">
<fieldset id="network-general"> <fieldset>
<legend data-i18n="pref.netglobal"></legend> <legend data-i18n="pref.netglobal"></legend>
<label data-i18n="pref-concurrent-downloads">Concurrent downloads</label> <div id="network-general">
<input id="pref-concurrent-downloads" type="number" min="1" max="10"> <label data-i18n="pref-concurrent-downloads">Concurrent downloads</label>
<label data-i18n="pref-retries"></label> <input id="pref-concurrent-downloads" type="number" min="1" max="10">
<input id="pref-retries" type="number" min="0" max="100"> <label data-i18n="pref-retries"></label>
<label data-i18n="pref-retry-time"></label> <input id="pref-retries" type="number" min="0" max="100">
<input id="pref-retry-time" type="number" min="1" max="600"> <label data-i18n="pref-retry-time"></label>
<input id="pref-retry-time" type="number" min="1" max="600">
</div>
</fieldset> </fieldset>
<table id="limits" data-singleselect="true"> <table id="limits" data-singleselect="true">
<tr> <tr>