Commit bd3012c6 authored by lunasorcery's avatar lunasorcery
Browse files

tab-accessibility and mobile support for settings toggles

parent 186f4ffa
...@@ -30,3 +30,12 @@ if (isAprilFoolsDay()) { ...@@ -30,3 +30,12 @@ if (isAprilFoolsDay()) {
toggleSwitch.checked = (currentTheme === 'dark'); toggleSwitch.checked = (currentTheme === 'dark');
toggleSwitch.addEventListener('change', setThemeFromToggle, false); toggleSwitch.addEventListener('change', setThemeFromToggle, false);
} }
document.body.addEventListener('touchstart', (e)=>{
// fix for dropdown getting stuck on mobile Safari
// if we're touching somewhere outside the active element, blur it
if (!document.activeElement.contains(e.target)) {
document.activeElement.blur();
}
});
...@@ -21,6 +21,9 @@ ...@@ -21,6 +21,9 @@
--darkmode-dropdown-divider-color: #101010; --darkmode-dropdown-divider-color: #101010;
--darkmode-dropdown-hover-color: #383838; --darkmode-dropdown-hover-color: #383838;
--lightmode-outline-color: #000000;
--darkmode-outline-color: #ffffff;
--main-text-color: var(--lightmode-main-text-color); --main-text-color: var(--lightmode-main-text-color);
--panel-bg-color: var(--lightmode-panel-bg-color); --panel-bg-color: var(--lightmode-panel-bg-color);
--main-bg-color: var(--lightmode-main-bg-color); --main-bg-color: var(--lightmode-main-bg-color);
...@@ -32,6 +35,8 @@ ...@@ -32,6 +35,8 @@
--dropdown-divider-color: var(--lightmode-dropdown-divider-color); --dropdown-divider-color: var(--lightmode-dropdown-divider-color);
--dropdown-hover-color: var(--lightmode-dropdown-hover-color); --dropdown-hover-color: var(--lightmode-dropdown-hover-color);
--outline-color: var(--lightmode-outline-color);
--image-margin: 0px; --image-margin: 0px;
--theme-transition-duration: 150ms; --theme-transition-duration: 150ms;
...@@ -49,6 +54,8 @@ ...@@ -49,6 +54,8 @@
--dropdown-bg-color: var(--darkmode-dropdown-bg-color); --dropdown-bg-color: var(--darkmode-dropdown-bg-color);
--dropdown-divider-color: var(--darkmode-dropdown-divider-color); --dropdown-divider-color: var(--darkmode-dropdown-divider-color);
--dropdown-hover-color: var(--darkmode-dropdown-hover-color); --dropdown-hover-color: var(--darkmode-dropdown-hover-color);
--outline-color: var(--darkmode-outline-color);
} }
* { * {
...@@ -111,38 +118,72 @@ a { ...@@ -111,38 +118,72 @@ a {
.switch { .switch {
position: absolute; position: absolute;
top: 12px; top: 12px;
padding: 4px;
/* faster touch response on mobile */
touch-action: manipulation;
} }
.switch-label {
.switch .label {
/* vertically center text */ /* vertically center text */
display: flex; display: flex;
align-items: center; align-items: center;
padding: 4px;
cursor: pointer; cursor: pointer;
text-transform: lowercase; text-transform: lowercase;
color: var(--main-text-color); color: var(--main-text-color);
transition: color var(--theme-transition-duration) var(--theme-transition-easing); transition: color var(--theme-transition-duration) var(--theme-transition-easing);
} }
.switch span { .switch .label span {
opacity: 0; opacity: 0;
transition: opacity 150ms ease-in-out; transition: opacity 150ms ease-in-out;
} }
.switch:hover span,
.switch:focus-within span,
.switch:focus span { /* show the text label... */
.switch:hover .label span, /* ...on mouseover */
.switch:focus-visible .label span, /* ...on tab-highlight */
.switch-dropdown:focus-within .label span, /* ...on tab-highlight of a dropdown child */
.switch-toggle input[type=checkbox]:focus-visible + .label span { /* ...on tab-highlight of an invisible checkbox */
opacity: 0.75; opacity: 0.75;
} }
.switch input {
display: none;
/* hide the actual checkbox */
/* but keep it *technically* visible for tab-navigation */
.switch-toggle input[type=checkbox] {
opacity: 0.00001;
width: 0;
height: 0;
position: absolute;
margin: 0;
}
/* override the focus-visible outline style
so we can make the hacky theme toggle
look somewhat visually consistent */
.switch {
outline: none;
}
.switch .label,
.switch-dropdown .dropdown .item,
.navbar .entry {
outline-style: solid;
outline-color: var(--outline-color);
outline-width: 0px;
transition: outline-color var(--theme-transition-duration) var(--theme-transition-easing);
}
.switch-dropdown .dropdown .item {
outline-offset: -4px;
}
.switch-toggle input[type=checkbox]:focus-visible + .label,
.switch-dropdown:focus-visible .label,
.switch-dropdown .dropdown .item:focus-visible,
.navbar .entry:focus-visible {
outline-width: 2px;
} }
.switch-right { right: 12px; } .switch-right { right: 12px; }
.switch-left { left: 12px; } .switch-left { left: 12px; }
.switch-label-right span { padding-right: 8px; } .switch-right .label span { padding-right: 8px; }
.switch-label-left span { padding-left: 8px; } .switch-left .label span { padding-left: 8px; }
...@@ -153,18 +194,21 @@ a { ...@@ -153,18 +194,21 @@ a {
.switch .mousetrap { .switch .mousetrap {
display: none; display: none;
position: absolute; position: absolute;
top: 0px; top: 40px;
left: 0px; left: 8px;
min-width: 100%; outline: none;
padding-top: 36px;
padding-left: 8px;
} }
.switch .mousetrap:hover,
.switch:active .mousetrap, .switch:active .mousetrap,
.switch:focus .mousetrap, .switch:focus .mousetrap,
.switch:focus-within .mousetrap { .switch:focus-within .mousetrap {
display: block; display: block;
} }
@media (hover: none) {
/* kinda hacky, but this stops the dropdown from flickering in on iOS Safari */
.switch:hover .mousetrap {
display: block;
}
}
.switch .dropdown { .switch .dropdown {
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -189,7 +233,6 @@ a { ...@@ -189,7 +233,6 @@ a {
.switch .dropdown .item:hover, .switch .dropdown .item:hover,
.switch .dropdown .item:focus { .switch .dropdown .item:focus {
background: var(--dropdown-hover-color); background: var(--dropdown-hover-color);
outline: none;
} }
...@@ -312,7 +355,7 @@ a { ...@@ -312,7 +355,7 @@ a {
} }
/* hide text labels for toggles on smaller screens */ /* hide text labels for toggles on smaller screens */
.switch-label span { .switch .label span {
display: none; display: none;
} }
...@@ -379,34 +422,34 @@ a { ...@@ -379,34 +422,34 @@ a {
padding: 12px 0px; padding: 12px 0px;
background: var(--main-bg-color) url('https://content.pouet.net/styles/001/gfx/trumpet.svg'); background: var(--main-bg-color) url('https://content.pouet.net/styles/001/gfx/trumpet.svg');
} }
[data-theme="pouet"] .switch-theme { [data-theme="pouet"] #switch-theme {
display: none; display: none;
} }
[data-theme="pouet"] .switch-lang svg { [data-theme="pouet"] #switch-lang svg {
display: none; display: none;
} }
[data-theme="pouet"] .switch-lang span { [data-theme="pouet"] #switch-lang span {
opacity: 1; opacity: 1;
font-weight: bold; font-weight: bold;
text-transform: none; text-transform: none;
display: inline-block !important; display: inline-block !important;
} }
[data-theme="pouet"] .switch .mousetrap { [data-theme="pouet"] .switch-dropdown .mousetrap {
padding-top: 22px; top: 100%;
} }
[data-theme="pouet"] .switch .dropdown { [data-theme="pouet"] .switch-dropdown .dropdown {
border: 1px solid #000000; border: 1px solid #000000;
border-top: none; border-top: none;
border-radius: 0px; border-radius: 0px;
box-shadow: none; box-shadow: none;
} }
[data-theme="pouet"] .switch .dropdown .item { [data-theme="pouet"] .switch-dropdown .dropdown .item {
color: #9FCFFF; color: #9FCFFF;
font-weight: bold; font-weight: bold;
padding: 4px; padding: 4px;
} }
[data-theme="pouet"] .switch .dropdown .item:hover, [data-theme="pouet"] .switch-dropdown .dropdown .item:hover,
[data-theme="pouet"] .switch .dropdown .item:focus { [data-theme="pouet"] .switch-dropdown .dropdown .item:focus {
text-decoration: underline; text-decoration: underline;
} }
[data-theme="pouet"] .navbar { [data-theme="pouet"] .navbar {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment