mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-13 14:58:51 +00:00
1186bdf102
* Adjust font size slider range, it starts at 80% and ends at 180% * Font size is always shown in percentage now * Better handling of initial font size, it should now detect browser or site default correctly * Use relative units * Tweak styles
96 lines
4.5 KiB
Plaintext
96 lines
4.5 KiB
Plaintext
{{!
|
|
string msg-preferences
|
|
string msg-theme-label
|
|
string msg-prefs-citizen-theme-option-auto
|
|
string msg-prefs-citizen-theme-option-light
|
|
string msg-prefs-citizen-theme-option-dark
|
|
string msg-prefs-citizen-fontsize-label
|
|
string msg-prefs-citizen-pagewidth-label
|
|
string msg-prefs-citizen-resetbutton-label
|
|
}}
|
|
|
|
<aside id="citizen-pref-panel" class="citizen-pref-panel">
|
|
<header id="citizen-pref-header">
|
|
<h3>{{msg-preferences}}</h3>
|
|
</header>
|
|
<form id="citizen-pref-form">
|
|
{{! Theme }}
|
|
<fieldset class="citizen-pref-item" id ="citizen-pref-theme">
|
|
<label for="citizen-pref-theme" class="citizen-pref-item__label">
|
|
<span class="citizen-pref-item__title">{{msg-prefs-citizen-theme-label}}</span>
|
|
</label>
|
|
<fieldset>
|
|
<input id="citizen-pref-theme__input__auto" name="citizen-pref-theme" type="radio" value="auto">
|
|
<label for="citizen-pref-theme__input__auto" id="citizen-pref-theme-option-auto" class="citizen-pref-theme-option">{{msg-prefs-citizen-theme-option-auto}}</label>
|
|
<input id="citizen-pref-theme__input__light" name="citizen-pref-theme" type="radio" value="light">
|
|
<label for="citizen-pref-theme__input__light" id="citizen-pref-theme-option-light" class="citizen-pref-theme-option">{{msg-prefs-citizen-theme-option-light}}</label>
|
|
<input id="citizen-pref-theme__input__dark" name="citizen-pref-theme" type="radio" value="dark">
|
|
<label for="citizen-pref-theme__input__dark" id="citizen-pref-theme-option-dark" class="citizen-pref-theme-option">{{msg-prefs-citizen-theme-option-dark}}</label>
|
|
</fieldset>
|
|
</fieldset>
|
|
{{! Font size }}
|
|
<fieldset class="citizen-pref-item" id="citizen-pref-fontsize">
|
|
<label for="citizen-pref-fontsize" class="citizen-pref-item__label">
|
|
<span class="citizen-pref-item__title">{{msg-prefs-citizen-fontsize-label}}</span>
|
|
<span class="citizen-pref-item__value" id="citizen-pref-fontsize__value"></span>
|
|
</label>
|
|
<input id="citizen-pref-fontsize__input" name="citizen-pref-fontsize" type="range" max="10" list="citizen-pref-fontsize__tickmarks">
|
|
<datalist id="citizen-pref-fontsize__tickmarks" class="citizen-pref__tickmarks">
|
|
<option value="0" label="80%"></option>
|
|
<option value="1"></option>
|
|
<option value="2"></option>
|
|
<option value="3"></option>
|
|
<option value="4"></option>
|
|
<option value="5"></option>
|
|
<option value="6"></option>
|
|
<option value="7"></option>
|
|
<option value="8"></option>
|
|
<option value="9"></option>
|
|
<option value="10" label="180%"></option>
|
|
</datalist>
|
|
</fieldset>
|
|
{{! Page width }}
|
|
<fieldset class="citizen-pref-item" id="citizen-pref-pagewidth">
|
|
<label for="citizen-pref-pagewidth" class="citizen-pref-item__label">
|
|
<span class="citizen-pref-item__title">{{msg-prefs-citizen-pagewidth-label}}</span>
|
|
<span class="citizen-pref-item__value" id="citizen-pref-pagewidth__value"></span>
|
|
</label>
|
|
<input id="citizen-pref-pagewidth__input" name="citizen-pref-pagewidth" type="range" max="10" list="citizen-pref-pagewidth__tickmarks">
|
|
<datalist id="citizen-pref-pagewidth__tickmarks" class="citizen-pref__tickmarks">
|
|
<option value="0" label="720px"></option>
|
|
<option value="1"></option>
|
|
<option value="2"></option>
|
|
<option value="3"></option>
|
|
<option value="4"></option>
|
|
<option value="5"></option>
|
|
<option value="6"></option>
|
|
<option value="7"></option>
|
|
<option value="8"></option>
|
|
<option value="9"></option>
|
|
<option value="10" label="∞"></option>
|
|
</datalist>
|
|
</fieldset>
|
|
{{! Line height }}
|
|
<fieldset class="citizen-pref-item" id="citizen-pref-lineheight">
|
|
<label for="citizen-pref-lineheight" class="citizen-pref-item__label">
|
|
<span class="citizen-pref-item__title">{{msg-prefs-citizen-lineheight-label}}</span>
|
|
<span class="citizen-pref-item__value" id="citizen-pref-lineheight__value"></span>
|
|
</label>
|
|
<input id="citizen-pref-lineheight__input" name="citizen-pref-lineheight" type="range" max="10" list="citizen-pref-lineheight__tickmarks">
|
|
<datalist id="citizen-pref-lineheight__tickmarks" class="citizen-pref__tickmarks">
|
|
<option value="0" label="1"></option>
|
|
<option value="1"></option>
|
|
<option value="2"></option>
|
|
<option value="3"></option>
|
|
<option value="4"></option>
|
|
<option value="5"></option>
|
|
<option value="6"></option>
|
|
<option value="7"></option>
|
|
<option value="8"></option>
|
|
<option value="9"></option>
|
|
<option value="10" label="2"></option>
|
|
</datalist>
|
|
</fieldset>
|
|
</form>
|
|
<button id="citizen-pref-resetbutton">{{msg-prefs-citizen-resetbutton-label}}</button>
|
|
</aside> |