stevenoh0908/mastodon-sakyey
1
0
Fork 0
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 { .progress-tracker {
--circle-size: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-bottom: 30px; padding-bottom: 30px;
margin-bottom: 30px; margin-bottom: 30px;
li { li {
flex: 0 0 auto;
position: relative; position: relative;
}
.separator { --connector-color: var(--color-border-primary);
height: 2px; --connector-thickness: 2px;
background: var(--color-border-primary);
flex: 1 1 auto;
&.completed { &.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 { .circle {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
width: 30px; width: var(--circle-size);
height: 30px; height: var(--circle-size);
border-radius: 50%; border-radius: 50%;
border: 2px solid var(--color-border-primary); border: 2px solid var(--color-border-primary);
flex: 0 0 auto; flex: 0 0 auto;
@@ -1303,8 +1316,9 @@ code {
padding-top: 10px; padding-top: 10px;
text-align: center; text-align: center;
width: 100px; width: 100px;
left: 50%;
transform: translateX(-50%); // Center-align the label with the circle
transform: translateX(-33.3333%);
} }
li:first-child .label { li:first-child .label {
@@ -1321,15 +1335,15 @@ code {
transform: none; transform: none;
} }
.active .circle { [aria-current='step'] .circle {
border-color: var(--color-text-brand); border-color: var(--color-bg-brand-base);
&::before { &::before {
content: ''; content: '';
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
background: var(--color-text-brand); background: var(--color-bg-brand-base);
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
@@ -1338,8 +1352,9 @@ code {
} }
.completed .circle { .completed .circle {
border-color: var(--color-text-brand); color: var(--color-text-on-brand-base);
background: var(--color-text-brand); background: var(--color-bg-brand-base);
border-color: var(--color-bg-brand-base);
} }
} }