Mastodon
/
Pinafore-Web-Client-Frontend
mirror of https://github.com/nolanlawson/pinafore
1
0
Fork 0
Code Issues Releases Wiki Activity

fix: improve a11y, move preview box inside label (#997)

This commit is contained in:
Nolan Lawson 2019-02-15 19:03:24 -08:00 committed by GitHub
parent 25aea9f30a
commit 59544d2cf4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/routes/_components/settings/instance/ThemeSettings.html
View File

@ -10,11 +10,13 @@
<input type="radio" id="choice-theme-{theme.name}"
value={theme.name} checked="$currentTheme === theme.name"
bind:group="selectedTheme" on:change="onThemeChange()">
<div class="theme-preview theme-preview-{themeGroup.dark ? 'dark' : 'light'}"
style="background-color: {theme.color};" >
</div>
<label class="theme-picker-label" for="choice-theme-{theme.name}">
{theme.label} {theme.name === DEFAULT_THEME ? '(default)' : ''}
<div class="theme-preview theme-preview-{themeGroup.dark ? 'dark' : 'light'}"
style="background-color: {theme.color};" >
</div>
<span class="theme-picker-label-span">
{theme.label} {theme.name === DEFAULT_THEME ? '(default)' : ''}
</span>
</label>
</div>
{/each}
@ -43,15 +45,18 @@
}
.theme-picker {
display: flex;
flex-direction: row;
align-items: center;
}
.theme-picker-label {
display: flex;
align-items: center;
}
.theme-picker-label-span {
margin: 2px 10px 0;
}
.theme-preview {
width: 1.5em;
height: 1.5em;
width: 21px;
height: 21px;
box-sizing: border-box;
border-radius: 2px;
margin: 0 2px 0 10px;