lyrathorpe/WhyIsTheDLRShut.Today
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: present theme switch as a segmented control #15

Merged
lyrathorpe merged 1 commits from feat/segmented-theme-switch into main 2026-06-12 11:45:08 +01:00
Conversation 0 Commits 1 Files Changed 1
+13 -7
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ad90451846 - Show all commits
styles.css
+13 -7
View File
@@ -63,10 +63,13 @@ body {
padding: 1.5rem; padding: 1.5rem;
} }
/* Segmented control: both options joined in one rounded container,
with the active segment filled. */
.theme-toggle { .theme-toggle {
display: flex; display: inline-flex;
gap: 0.5rem; border: 2px solid var(--button-bg);
border: none; border-radius: 999px;
overflow: hidden;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@@ -75,19 +78,22 @@ body {
font-family: inherit; font-family: inherit;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
padding: 0.5rem 1rem; padding: 0.5rem 1.1rem;
border: 2px solid var(--button-bg); border: none;
border-radius: 999px;
background: transparent; background: transparent;
color: var(--text); color: var(--text);
cursor: pointer; cursor: pointer;
transition: background 0.2s ease, color 0.2s ease; transition: background 0.2s ease, color 0.2s ease;
} }
/* Divider between the two segments. */
.theme-button + .theme-button {
border-left: 2px solid var(--button-bg);
}
.theme-button[aria-pressed="true"] { .theme-button[aria-pressed="true"] {
background: var(--button-active-bg); background: var(--button-active-bg);
color: var(--button-active-text); color: var(--button-active-text);
border-color: var(--button-active-bg);
} }
.stage { .stage {