tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] A11y improvements on login & settings pages

Browse Source 
Port 89b7a3d7fb73ba79d33cab9755424b4aa2050b1b to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion 2026-03-13 18:14:04 +01:00 committed by Claire
parent 334188b4fc
commit 39f1861252
2 changed files with 53 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/javascript/flavours/glitch/styles/mastodon/containers.scss
View File

@ -13,28 +13,28 @@
.logo-container { .logo-container {
margin: 50px auto; margin: 50px auto;
h1 { a {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: min-content;
margin: 0 auto;
padding: 12px 16px;
color: var(--color-text-primary);
text-decoration: none;
outline: 0;
line-height: 32px;
font-weight: 500;
font-size: 14px;
.logo { &:focus-visible {
height: 42px; outline: var(--outline-focus-default);
margin-inline-end: 10px;
} }
}
a { .logo {
display: flex; height: 42px;
justify-content: center; margin-inline-end: 10px;
align-items: center;
color: var(--color-text-primary);
text-decoration: none;
outline: 0;
padding: 12px 16px;
line-height: 32px;
font-weight: 500;
font-size: 14px;
}
} }
} }

46
app/javascript/flavours/glitch/styles/mastodon/forms.scss
View File

@ -77,7 +77,6 @@ code {
.input { .input {
margin-bottom: 16px; margin-bottom: 16px;
overflow: hidden;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -472,13 +471,19 @@ code {
} }
} }
.input.radio_buttons .radio label { .input.radio_buttons .radio {
margin-bottom: 5px; label {
font-family: inherit; margin-bottom: 5px;
font-size: 14px; font-family: inherit;
color: var(--color-text-primary); font-size: 14px;
display: block; color: var(--color-text-primary);
width: auto; display: block;
width: auto;
}
input[type='radio'] {
accent-color: var(--color-text-brand);
}
} }
.check_boxes { .check_boxes {
@ -504,6 +509,12 @@ code {
} }
} }
label.checkbox {
input[type='checkbox'] {
accent-color: var(--color-text-brand);
}
}
.input.static .label_input__wrapper { .input.static .label_input__wrapper {
font-size: 14px; font-size: 14px;
padding: 10px; padding: 10px;
@ -524,13 +535,20 @@ code {
color: var(--color-text-primary); color: var(--color-text-primary);
display: block; display: block;
width: 100%; width: 100%;
outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary); border: 1px solid var(--color-border-primary);
border-radius: 4px; border-radius: 4px;
padding: 10px 16px; padding: 10px 16px;
outline: var(--outline-focus-default);
outline-offset: -2px;
outline-color: transparent;
transition: outline-color 0.15s ease-out;
&:focus {
outline: var(--outline-focus-default);
}
&:invalid { &:invalid {
box-shadow: none; box-shadow: none;
@ -614,6 +632,11 @@ code {
margin-inline-end: 0; margin-inline-end: 0;
} }
&:focus-visible {
outline: var(--outline-focus-default);
outline-offset: 2px;
}
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
@ -654,6 +677,11 @@ code {
padding-inline-end: 30px; padding-inline-end: 30px;
height: 41px; height: 41px;
&:focus-visible {
outline: var(--outline-focus-default);
outline-offset: 2px;
}
@media screen and (width <= 600px) { @media screen and (width <= 600px) {
font-size: 16px; font-size: 16px;
} }