infrastructure/conference-website
1
1
Fork 1
Code Issues 14 Pull Requests Releases Activity

UI: Implement Web Assets' theme system, and add 'dark' theme #103972

Merged
Márton Lente merged 23 commits from ui/theme-system into main 2024-09-30 15:03:39 +02:00
Conversation 15 Commits 23 Files Changed 13 +23
1 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7bac1d5191 - Show all commits

23
conference_main/static/conference_main/styles/_schedule.sass
View File

@ -14,6 +14,18 @@
&:hover
backdrop-filter: brightness(80%)
/* Event favourited styles */
&:has(button[data-is-checked="data-is-checked"])
martonlente marked this conversation as resolved Outdated
Pablo Vazquez commented 2024-09-27 16:00:46 +02:00
Outdated
Review
Copy Link

Seems that when the button is pressed, it only adds the data-is-checked attribute but it doesn't assign any value. So the user has to reload the page for it to update in real time.

Perhaps we could replace the check:

From:
&:has(button[data-is-checked="data-is-checked"])

To:
&:has(button[data-is-checked])

So it updates as it is pressed.

Seems that when the button is pressed, it only adds the `data-is-checked` attribute but it doesn't assign any value. So the user has to reload the page for it to update in real time. Perhaps we could replace the check: From: `&:has(button[data-is-checked="data-is-checked"])` To: `&:has(button[data-is-checked])` So it updates as it is pressed.
Márton Lente commented 2024-09-30 14:56:17 +02:00
Outdated
Review
Copy Link

Thanks, this is indeed much nicer with the less specificity, and works without page reload! 👍 I updated accordingly.

Thanks, this is indeed much nicer with the less specificity, and works without page reload! 👍 I updated accordingly.
backdrop-filter: brightness(125%) saturate(200%)
color: var(--color-text-primary)
&:hover
backdrop-filter: brightness(130%) saturate(200%)
.event-header,
.event-speakers
// TODO: @web-assets consider adding variables colours grey shades
color: hsl(0, 0%, 75%)
=theme-light-schedule
--event-detail-location-color-l: 35%
@ -29,6 +41,17 @@
&:hover
backdrop-filter: brightness(115%)
&:has(button[data-is-checked="data-is-checked"])
backdrop-filter: brightness(90%) saturate(400%)
color: var(--color-text-primary)
&:hover
backdrop-filter: brightness(95%) saturate(400%)
.event-header,
.event-speakers
color: hsl(0, 0%, 50%)
\:root,
[data-theme="light"]
+theme-light-schedule