Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2026-03-29 03:00:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Improve accessibility of sign-up progress indicator

Browse Source 
Port 75c4ff35d2 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2026-03-17 13:44:40 +01:00
committed by Claire
parent 3593ddff11
commit a6a013c21b
1 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1258,31 +1258,44 @@ code {
}
.progress-tracker {
--circle-size: 30px;
display: flex;
align-items: center;
padding-bottom: 30px;
margin-bottom: 30px;
li {
flex: 0 0 auto;
position: relative;
}
.separator {
height: 2px;
background: var(--color-border-primary);
flex: 1 1 auto;
--connector-color: var(--color-border-primary);
--connector-thickness: 2px;
&.completed {
background: var(--color-text-brand);
--connector-color: var(--color-bg-brand-base);
}
&:not(:last-child) {
flex-grow: 1;
// Connector line between circles
&::after {
content: '';
display: block;
position: absolute;
inset-inline: var(--circle-size) 0;
background-color: var(--connector-color);
height: 2px;
top: calc((var(--circle-size) - var(--connector-thickness)) / 2);
}
}
}
.circle {
box-sizing: border-box;
position: relative;
width: 30px;
height: 30px;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
border: 2px solid var(--color-border-primary);
flex: 0 0 auto;
@@ -1303,8 +1316,9 @@ code {
padding-top: 10px;
text-align: center;
width: 100px;
left: 50%;
transform: translateX(-50%);
// Center-align the label with the circle
transform: translateX(-33.3333%);
}
li:first-child .label {
@@ -1321,15 +1335,15 @@ code {
transform: none;
}
.active .circle {
border-color: var(--color-text-brand);
[aria-current='step'] .circle {
border-color: var(--color-bg-brand-base);
&::before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-text-brand);
background: var(--color-bg-brand-base);
position: absolute;
left: 50%;
top: 50%;
@@ -1338,8 +1352,9 @@ code {
}
.completed .circle {
border-color: var(--color-text-brand);
background: var(--color-text-brand);
color: var(--color-text-on-brand-base);
background: var(--color-bg-brand-base);
border-color: var(--color-bg-brand-base);
}
}