EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make theme-toggle tab-selectable
All checks were successful
/ build (push) Successful in 11s
Details

Browse source
This commit is contained in:
lilith 2025-03-06 02:28:53 +01:00
commit ed133f9c8e
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
5 changed files with 159 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

141
styleguide/assets/style/merch.css
View file

@ -277,6 +277,7 @@
html:has(#themeLight:checked) .dark-only {
display: none;
}
#themeToggleDark {
display: none;
}
@ -358,6 +359,7 @@
html:has(#themeDark:checked) .dark-only {
display: initial;
}
#themeToggleLight {
display: none;
}
@ -661,172 +663,172 @@ i[data-icon]::before {
mask-repeat: no-repeat;
background-color: currentColor;
}
i[data-icon=arrow_down]::before {
i[data-icon="arrow_down"]::before {
mask-image: url("../icon/arrow_down.svg");
}
i[data-icon=arrow_down_left]::before {
i[data-icon="arrow_down_left"]::before {
mask-image: url("../icon/arrow_down_left.svg");
}
i[data-icon=arrow_down_right]::before {
i[data-icon="arrow_down_right"]::before {
mask-image: url("../icon/arrow_down_right.svg");
}
i[data-icon=arrow_left]::before {
i[data-icon="arrow_left"]::before {
mask-image: url("../icon/arrow_left.svg");
}
i[data-icon=arrow_right]::before {
i[data-icon="arrow_right"]::before {
mask-image: url("../icon/arrow_right.svg");
}
i[data-icon=arrow_up]::before {
i[data-icon="arrow_up"]::before {
mask-image: url("../icon/arrow_up.svg");
}
i[data-icon=arrow_up_left]::before {
i[data-icon="arrow_up_left"]::before {
mask-image: url("../icon/arrow_up_left.svg");
}
i[data-icon=arrow_up_right]::before {
i[data-icon="arrow_up_right"]::before {
mask-image: url("../icon/arrow_up_right.svg");
}
i[data-icon=basket]::before {
i[data-icon="basket"]::before {
mask-image: url("../icon/basket.svg");
}
i[data-icon=bed]::before {
i[data-icon="bed"]::before {
mask-image: url("../icon/bed.svg");
}
i[data-icon=clock]::before {
i[data-icon="clock"]::before {
mask-image: url("../icon/clock.svg");
}
i[data-icon=code]::before {
i[data-icon="code"]::before {
mask-image: url("../icon/code.svg");
}
i[data-icon=creature]::before {
i[data-icon="creature"]::before {
mask-image: url("../icon/creature.svg");
}
i[data-icon=cross]::before {
i[data-icon="cross"]::before {
mask-image: url("../icon/cross.svg");
}
i[data-icon=cross_small]::before {
i[data-icon="cross_small"]::before {
mask-image: url("../icon/cross_small.svg");
}
i[data-icon=cup_1]::before {
i[data-icon="cup_1"]::before {
mask-image: url("../icon/cup_1.svg");
}
i[data-icon=cup_2]::before {
i[data-icon="cup_2"]::before {
mask-image: url("../icon/cup_2.svg");
}
i[data-icon=dect]::before {
i[data-icon="dect"]::before {
mask-image: url("../icon/dect.svg");
}
i[data-icon=external]::before {
i[data-icon="external"]::before {
mask-image: url("../icon/external.svg");
}
i[data-icon=fairydust]::before {
i[data-icon="fairydust"]::before {
mask-image: url("../icon/fairydust.svg");
}
i[data-icon=flag]::before {
i[data-icon="flag"]::before {
mask-image: url("../icon/flag.svg");
}
i[data-icon=gluten]::before {
i[data-icon="gluten"]::before {
mask-image: url("../icon/gluten.svg");
}
i[data-icon=hackertours]::before {
i[data-icon="hackertours"]::before {
mask-image: url("../icon/hackertours.svg");
}
i[data-icon=hare_head]::before {
i[data-icon="hare_head"]::before {
mask-image: url("../icon/hare_head.svg");
}
i[data-icon=history]::before {
i[data-icon="history"]::before {
mask-image: url("../icon/history.svg");
}
i[data-icon=home]::before {
i[data-icon="home"]::before {
mask-image: url("../icon/home.svg");
}
i[data-icon=hygene]::before {
i[data-icon="hygene"]::before {
mask-image: url("../icon/hygene.svg");
}
i[data-icon=info]::before {
i[data-icon="info"]::before {
mask-image: url("../icon/info.svg");
}
i[data-icon=lightbulb]::before {
i[data-icon="lightbulb"]::before {
mask-image: url("../icon/lightbulb.svg");
}
i[data-icon=link]::before {
i[data-icon="link"]::before {
mask-image: url("../icon/link.svg");
}
i[data-icon=location]::before {
i[data-icon="location"]::before {
mask-image: url("../icon/location.svg");
}
i[data-icon=lock]::before {
i[data-icon="lock"]::before {
mask-image: url("../icon/lock.svg");
}
i[data-icon=login]::before {
i[data-icon="login"]::before {
mask-image: url("../icon/login.svg");
}
i[data-icon=logout]::before {
i[data-icon="logout"]::before {
mask-image: url("../icon/logout.svg");
}
i[data-icon=menu]::before {
i[data-icon="menu"]::before {
mask-image: url("../icon/menu.svg");
}
i[data-icon=menu_small]::before {
i[data-icon="menu_small"]::before {
mask-image: url("../icon/menu_small.svg");
}
i[data-icon=merch]::before {
i[data-icon="merch"]::before {
mask-image: url("../icon/merch.svg");
}
i[data-icon=message]::before {
i[data-icon="message"]::before {
mask-image: url("../icon/message.svg");
}
i[data-icon=microphone]::before {
i[data-icon="microphone"]::before {
mask-image: url("../icon/microphone.svg");
}
i[data-icon=network]::before {
i[data-icon="network"]::before {
mask-image: url("../icon/network.svg");
}
i[data-icon=pen]::before {
i[data-icon="pen"]::before {
mask-image: url("../icon/pen.svg");
}
i[data-icon=plate_and_cutlery]::before {
i[data-icon="plate_and_cutlery"]::before {
mask-image: url("../icon/plate_and_cutlery.svg");
}
i[data-icon=power]::before {
i[data-icon="power"]::before {
mask-image: url("../icon/power.svg");
}
i[data-icon=question]::before {
i[data-icon="question"]::before {
mask-image: url("../icon/question.svg");
}
i[data-icon=schedule]::before {
i[data-icon="schedule"]::before {
mask-image: url("../icon/schedule.svg");
}
i[data-icon=search]::before {
i[data-icon="search"]::before {
mask-image: url("../icon/search.svg");
}
i[data-icon=settings]::before {
i[data-icon="settings"]::before {
mask-image: url("../icon/settings.svg");
}
i[data-icon=signup]::before {
i[data-icon="signup"]::before {
mask-image: url("../icon/signup.svg");
}
i[data-icon=soldering_iron]::before {
i[data-icon="soldering_iron"]::before {
mask-image: url("../icon/soldering_iron.svg");
}
i[data-icon=tick]::before {
i[data-icon="tick"]::before {
mask-image: url("../icon/tick.svg");
}
i[data-icon=tick_small]::before {
i[data-icon="tick_small"]::before {
mask-image: url("../icon/tick_small.svg");
}
i[data-icon=ticket]::before {
i[data-icon="ticket"]::before {
mask-image: url("../icon/ticket.svg");
}
i[data-icon=toast]::before {
i[data-icon="toast"]::before {
mask-image: url("../icon/toast.svg");
}
i[data-icon=train]::before {
i[data-icon="train"]::before {
mask-image: url("../icon/train.svg");
}
i[data-icon=vegan]::before {
i[data-icon="vegan"]::before {
mask-image: url("../icon/vegan.svg");
}
i[data-icon=warning]::before {
i[data-icon="warning"]::before {
mask-image: url("../icon/warning.svg");
}
@ -1027,7 +1029,12 @@ body > div nav ul li.themeToggle {
width: fit-content;
}
body > div nav ul li.themeToggle input {
display: none;
width: 0;
height: 0;
margin: 0;
padding: 0;
display: block;
opacity: 0;
}
body > div nav ul li.themeToggle label {
justify-content: center;
@ -1178,7 +1185,7 @@ main > div.generator i {
padding: 0.5rem;
z-index: 10;
position: absolute;
bottom: calc(var(--text-xl) * -1 - 2rem);
bottom: calc((var(--text-xl) * -1) - 2rem);
border-radius: 0.3rem;
}
.icon-grid div i[data-icon] {
@ -1426,14 +1433,14 @@ table td.val:not(.empty).hover {
table td.val:not(.empty):hover {
background-color: var(--color-shade-3);
}
table td.val.highlighted[data-dim=A] {
background-color: rgb(96, 165, 249);
table td.val.highlighted[data-dim="A"] {
background-color: #60a5f9;
}
table td.val.highlighted[data-dim=B] {
background-color: rgb(211, 129, 247);
table td.val.highlighted[data-dim="B"] {
background-color: #d381f7;
}
table td.val.highlighted[data-dim=C] {
background-color: rgb(255, 121, 117);
table td.val.highlighted[data-dim="C"] {
background-color: #ff7975;
}
table td.val.currentDimension:not(.hover) {
background-color: var(--color-shade-2);
@ -1505,7 +1512,7 @@ div.filterBox > div label {
align-items: center;
gap: 0.5rem;
}
div.filterBox > div label input[type=checkbox] {
div.filterBox > div label input[type="checkbox"] {
appearance: none;
background-color: var(--color-shade-1);
margin: 0;
@ -1518,7 +1525,7 @@ div.filterBox > div label input[type=checkbox] {
position: relative;
font-family: inherit;
}
div.filterBox > div label input[type=checkbox]::before {
div.filterBox > div label input[type="checkbox"]::before {
position: absolute;
inset: 0;
content: "x";
@ -1528,7 +1535,7 @@ div.filterBox > div label input[type=checkbox]::before {
transform: scale(0);
transition: 120ms transform ease-in-out;
}
div.filterBox > div label input[type=checkbox]:checked::before {
div.filterBox > div label input[type="checkbox"]:checked::before {
transform: scale(1);
}

8
styleguide/assets/style/merch.css.map
View file

File diff suppressed because one or more lines are too long

123
styleguide/assets/style/styleguide.css
View file

@ -277,6 +277,7 @@
html:has(#themeLight:checked) .dark-only {
display: none;
}
#themeToggleDark {
display: none;
}
@ -358,6 +359,7 @@
html:has(#themeDark:checked) .dark-only {
display: initial;
}
#themeToggleLight {
display: none;
}
@ -661,172 +663,172 @@ i[data-icon]::before {
mask-repeat: no-repeat;
background-color: currentColor;
}
i[data-icon=arrow_down]::before {
i[data-icon="arrow_down"]::before {
mask-image: url("../icon/arrow_down.svg");
}
i[data-icon=arrow_down_left]::before {
i[data-icon="arrow_down_left"]::before {
mask-image: url("../icon/arrow_down_left.svg");
}
i[data-icon=arrow_down_right]::before {
i[data-icon="arrow_down_right"]::before {
mask-image: url("../icon/arrow_down_right.svg");
}
i[data-icon=arrow_left]::before {
i[data-icon="arrow_left"]::before {
mask-image: url("../icon/arrow_left.svg");
}
i[data-icon=arrow_right]::before {
i[data-icon="arrow_right"]::before {
mask-image: url("../icon/arrow_right.svg");
}
i[data-icon=arrow_up]::before {
i[data-icon="arrow_up"]::before {
mask-image: url("../icon/arrow_up.svg");
}
i[data-icon=arrow_up_left]::before {
i[data-icon="arrow_up_left"]::before {
mask-image: url("../icon/arrow_up_left.svg");
}
i[data-icon=arrow_up_right]::before {
i[data-icon="arrow_up_right"]::before {
mask-image: url("../icon/arrow_up_right.svg");
}
i[data-icon=basket]::before {
i[data-icon="basket"]::before {
mask-image: url("../icon/basket.svg");
}
i[data-icon=bed]::before {
i[data-icon="bed"]::before {
mask-image: url("../icon/bed.svg");
}
i[data-icon=clock]::before {
i[data-icon="clock"]::before {
mask-image: url("../icon/clock.svg");
}
i[data-icon=code]::before {
i[data-icon="code"]::before {
mask-image: url("../icon/code.svg");
}
i[data-icon=creature]::before {
i[data-icon="creature"]::before {
mask-image: url("../icon/creature.svg");
}
i[data-icon=cross]::before {
i[data-icon="cross"]::before {
mask-image: url("../icon/cross.svg");
}
i[data-icon=cross_small]::before {
i[data-icon="cross_small"]::before {
mask-image: url("../icon/cross_small.svg");
}
i[data-icon=cup_1]::before {
i[data-icon="cup_1"]::before {
mask-image: url("../icon/cup_1.svg");
}
i[data-icon=cup_2]::before {
i[data-icon="cup_2"]::before {
mask-image: url("../icon/cup_2.svg");
}
i[data-icon=dect]::before {
i[data-icon="dect"]::before {
mask-image: url("../icon/dect.svg");
}
i[data-icon=external]::before {
i[data-icon="external"]::before {
mask-image: url("../icon/external.svg");
}
i[data-icon=fairydust]::before {
i[data-icon="fairydust"]::before {
mask-image: url("../icon/fairydust.svg");
}
i[data-icon=flag]::before {
i[data-icon="flag"]::before {
mask-image: url("../icon/flag.svg");
}
i[data-icon=gluten]::before {
i[data-icon="gluten"]::before {
mask-image: url("../icon/gluten.svg");
}
i[data-icon=hackertours]::before {
i[data-icon="hackertours"]::before {
mask-image: url("../icon/hackertours.svg");
}
i[data-icon=hare_head]::before {
i[data-icon="hare_head"]::before {
mask-image: url("../icon/hare_head.svg");
}
i[data-icon=history]::before {
i[data-icon="history"]::before {
mask-image: url("../icon/history.svg");
}
i[data-icon=home]::before {
i[data-icon="home"]::before {
mask-image: url("../icon/home.svg");
}
i[data-icon=hygene]::before {
i[data-icon="hygene"]::before {
mask-image: url("../icon/hygene.svg");
}
i[data-icon=info]::before {
i[data-icon="info"]::before {
mask-image: url("../icon/info.svg");
}
i[data-icon=lightbulb]::before {
i[data-icon="lightbulb"]::before {
mask-image: url("../icon/lightbulb.svg");
}
i[data-icon=link]::before {
i[data-icon="link"]::before {
mask-image: url("../icon/link.svg");
}
i[data-icon=location]::before {
i[data-icon="location"]::before {
mask-image: url("../icon/location.svg");
}
i[data-icon=lock]::before {
i[data-icon="lock"]::before {
mask-image: url("../icon/lock.svg");
}
i[data-icon=login]::before {
i[data-icon="login"]::before {
mask-image: url("../icon/login.svg");
}
i[data-icon=logout]::before {
i[data-icon="logout"]::before {
mask-image: url("../icon/logout.svg");
}
i[data-icon=menu]::before {
i[data-icon="menu"]::before {
mask-image: url("../icon/menu.svg");
}
i[data-icon=menu_small]::before {
i[data-icon="menu_small"]::before {
mask-image: url("../icon/menu_small.svg");
}
i[data-icon=merch]::before {
i[data-icon="merch"]::before {
mask-image: url("../icon/merch.svg");
}
i[data-icon=message]::before {
i[data-icon="message"]::before {
mask-image: url("../icon/message.svg");
}
i[data-icon=microphone]::before {
i[data-icon="microphone"]::before {
mask-image: url("../icon/microphone.svg");
}
i[data-icon=network]::before {
i[data-icon="network"]::before {
mask-image: url("../icon/network.svg");
}
i[data-icon=pen]::before {
i[data-icon="pen"]::before {
mask-image: url("../icon/pen.svg");
}
i[data-icon=plate_and_cutlery]::before {
i[data-icon="plate_and_cutlery"]::before {
mask-image: url("../icon/plate_and_cutlery.svg");
}
i[data-icon=power]::before {
i[data-icon="power"]::before {
mask-image: url("../icon/power.svg");
}
i[data-icon=question]::before {
i[data-icon="question"]::before {
mask-image: url("../icon/question.svg");
}
i[data-icon=schedule]::before {
i[data-icon="schedule"]::before {
mask-image: url("../icon/schedule.svg");
}
i[data-icon=search]::before {
i[data-icon="search"]::before {
mask-image: url("../icon/search.svg");
}
i[data-icon=settings]::before {
i[data-icon="settings"]::before {
mask-image: url("../icon/settings.svg");
}
i[data-icon=signup]::before {
i[data-icon="signup"]::before {
mask-image: url("../icon/signup.svg");
}
i[data-icon=soldering_iron]::before {
i[data-icon="soldering_iron"]::before {
mask-image: url("../icon/soldering_iron.svg");
}
i[data-icon=tick]::before {
i[data-icon="tick"]::before {
mask-image: url("../icon/tick.svg");
}
i[data-icon=tick_small]::before {
i[data-icon="tick_small"]::before {
mask-image: url("../icon/tick_small.svg");
}
i[data-icon=ticket]::before {
i[data-icon="ticket"]::before {
mask-image: url("../icon/ticket.svg");
}
i[data-icon=toast]::before {
i[data-icon="toast"]::before {
mask-image: url("../icon/toast.svg");
}
i[data-icon=train]::before {
i[data-icon="train"]::before {
mask-image: url("../icon/train.svg");
}
i[data-icon=vegan]::before {
i[data-icon="vegan"]::before {
mask-image: url("../icon/vegan.svg");
}
i[data-icon=warning]::before {
i[data-icon="warning"]::before {
mask-image: url("../icon/warning.svg");
}
@ -1027,7 +1029,12 @@ body > div nav ul li.themeToggle {
width: fit-content;
}
body > div nav ul li.themeToggle input {
display: none;
width: 0;
height: 0;
margin: 0;
padding: 0;
display: block;
opacity: 0;
}
body > div nav ul li.themeToggle label {
justify-content: center;
@ -1178,7 +1185,7 @@ main > div.generator i {
padding: 0.5rem;
z-index: 10;
position: absolute;
bottom: calc(var(--text-xl) * -1 - 2rem);
bottom: calc((var(--text-xl) * -1) - 2rem);
border-radius: 0.3rem;
}
.icon-grid div i[data-icon] {

8
styleguide/assets/style/styleguide.css.map
View file

File diff suppressed because one or more lines are too long

7
styleguide/assets/style/styleguide.scss
View file

@ -221,7 +221,12 @@ body {
width: fit-content;
input {
display: none;
width: 0;
height: 0;
margin: 0;
padding: 0;
display: block;
opacity: 0;
}
label {