aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/CommandPalette/CommandPalette.svelte2
-rw-r--r--src/lib/Events/Event.svelte2
-rw-r--r--src/lib/Events/Group.svelte2
-rw-r--r--src/lib/Landing.svelte2
-rw-r--r--src/lib/LandingHero.svelte2
-rw-r--r--src/lib/List/MediaRoulette.svelte4
-rw-r--r--src/lib/Notification/Notification.svelte2
-rw-r--r--src/routes/user/[user]/+page.svelte4
-rw-r--r--src/styles/card.css19
-rw-r--r--src/styles/colours.css11
-rw-r--r--src/styles/input.css6
-rw-r--r--src/styles/popup.scss2
12 files changed, 26 insertions, 32 deletions
diff --git a/src/lib/CommandPalette/CommandPalette.svelte b/src/lib/CommandPalette/CommandPalette.svelte
index ca3513f4..faa739a4 100644
--- a/src/lib/CommandPalette/CommandPalette.svelte
+++ b/src/lib/CommandPalette/CommandPalette.svelte
@@ -268,7 +268,7 @@ const handleGlobalKey = (e: KeyboardEvent) => {
left: 0;
width: 100%;
height: 100%;
- background-color: rgba(0, 0, 0, 0.6);
+ background-color: var(--scrim);
z-index: 100;
backdrop-filter: blur(3px);
cursor: pointer;
diff --git a/src/lib/Events/Event.svelte b/src/lib/Events/Event.svelte
index a1d6cf42..d93bc9d0 100644
--- a/src/lib/Events/Event.svelte
+++ b/src/lib/Events/Event.svelte
@@ -43,7 +43,7 @@ let { event, avatar = false }: { event: Event; avatar?: boolean } = $props();
display: flex;
flex-wrap: wrap;
column-gap: 1.5em;
- background-color: rgba(0, 0, 0, 0.468);
+ background-color: var(--scrim-banner);
color: #d8d8d8;
border-top-left-radius: 0;
border-top-right-radius: 0;
diff --git a/src/lib/Events/Group.svelte b/src/lib/Events/Group.svelte
index 9b0ddba5..28aef6c1 100644
--- a/src/lib/Events/Group.svelte
+++ b/src/lib/Events/Group.svelte
@@ -56,7 +56,7 @@ let { group }: { group: Group } = $props();
display: flex;
flex-wrap: wrap;
column-gap: 1.5em;
- background-color: rgba(0, 0, 0, 0.468);
+ background-color: var(--scrim-banner);
color: #d8d8d8;
border-top-left-radius: 0;
border-top-right-radius: 0;
diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte
index 319e8a48..bca1554c 100644
--- a/src/lib/Landing.svelte
+++ b/src/lib/Landing.svelte
@@ -450,7 +450,7 @@ $effect(() => {
.cta:hover {
text-decoration: none;
transform: translateY(-2px);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+ box-shadow: var(--shadow-cta);
}
.demo-overlay {
diff --git a/src/lib/LandingHero.svelte b/src/lib/LandingHero.svelte
index c1d8a5aa..f080f156 100644
--- a/src/lib/LandingHero.svelte
+++ b/src/lib/LandingHero.svelte
@@ -125,7 +125,7 @@ const scrollPastHero = () => {
.cta:hover {
text-decoration: none;
transform: translateY(-2px);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+ box-shadow: var(--shadow-cta);
}
.cta:active {
diff --git a/src/lib/List/MediaRoulette.svelte b/src/lib/List/MediaRoulette.svelte
index d6e33d7a..3fbc89d6 100644
--- a/src/lib/List/MediaRoulette.svelte
+++ b/src/lib/List/MediaRoulette.svelte
@@ -163,7 +163,7 @@ const handleOverlayClick = (e: MouseEvent) => {
left: 0;
right: 0;
bottom: 0;
- background: rgba(0, 0, 0, 0.6);
+ background: var(--scrim);
display: flex;
align-items: center;
justify-content: center;
@@ -320,7 +320,7 @@ const handleOverlayClick = (e: MouseEvent) => {
margin: 0 auto 1rem;
border-radius: 8px;
overflow: hidden;
- box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;
+ box-shadow: var(--shadow-card);
}
.cover-wrapper :global(.roulette-cover) {
diff --git a/src/lib/Notification/Notification.svelte b/src/lib/Notification/Notification.svelte
index a3271d58..1543f3b9 100644
--- a/src/lib/Notification/Notification.svelte
+++ b/src/lib/Notification/Notification.svelte
@@ -65,7 +65,7 @@ const remove = () => {
#notification {
background-color: var(--base001);
box-shadow:
- rgba(0, 0, 11, 0.2) 0px 7px 29px 0px,
+ var(--shadow-card-emphasized),
0 0 0 4px var(--base0E);
widows: 100%;
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index fd1e2d7e..1bcedc52 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -489,7 +489,7 @@ const toggleCategory = () => {
display: flex;
flex-wrap: wrap;
column-gap: 1.5em;
- background-color: rgba(0, 0, 0, 0.468);
+ background-color: var(--scrim-banner);
color: #d8d8d8;
border-top-left-radius: 0;
border-top-right-radius: 0;
@@ -529,7 +529,7 @@ const toggleCategory = () => {
height: $size;
object-fit: cover;
transition: $transition;
- box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;
+ box-shadow: var(--shadow-card);
overflow: hidden;
&:hover {
diff --git a/src/styles/card.css b/src/styles/card.css
index 07a62fcd..9af777c5 100644
--- a/src/styles/card.css
+++ b/src/styles/card.css
@@ -2,30 +2,15 @@
details,
.card {
- box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;
-}
-
-@media (prefers-color-scheme: light) {
- details,
- .card {
- box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
- }
+ box-shadow: var(--shadow-card);
}
.header {
box-shadow:
- rgba(0, 0, 11, 0.2) 0px 7px 29px 0px,
+ var(--shadow-card-emphasized),
0 0 0 5px var(--base02);
}
-@media (prefers-color-scheme: light) {
- .header {
- box-shadow:
- rgba(100, 100, 111, 0.2) 0px 7px 29px 0px,
- 0 0 0 5px var(--base02);
- }
-}
-
.card {
background-color: var(--base0011);
padding: 1rem;
diff --git a/src/styles/colours.css b/src/styles/colours.css
index 0442fee4..84669a0d 100644
--- a/src/styles/colours.css
+++ b/src/styles/colours.css
@@ -17,6 +17,14 @@
--base0D: #7cafc2;
--base0E: #ba8baf;
--base0F: #a16946;
+
+ --shadow-card: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+ --shadow-card-emphasized: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+ --shadow-cta: 0 4px 20px rgba(0, 0, 0, 0.15);
+
+ --scrim: rgba(0, 0, 0, 0.6);
+ --scrim-soft: rgba(0, 0, 0, 0.5);
+ --scrim-banner: rgba(0, 0, 0, 0.468);
}
@media (prefers-color-scheme: dark) {
@@ -39,6 +47,9 @@
--base0D: #7baeb1;
--base0E: #b98aae;
--base0F: #a06845;
+
+ --shadow-card: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;
+ --shadow-card-emphasized: rgba(0, 0, 11, 0.2) 0px 7px 29px 0px;
}
}
diff --git a/src/styles/input.css b/src/styles/input.css
index 41b8af06..a46c9b13 100644
--- a/src/styles/input.css
+++ b/src/styles/input.css
@@ -14,8 +14,7 @@ textarea {
transition:
background-color 0.15s ease-in-out,
transform 0.15s ease-in-out;
- /* box-shadow: 0 4px 30px var(--base01); */
- box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;
+ box-shadow: var(--shadow-card);
}
input,
@@ -110,8 +109,7 @@ button {
transition:
background-color 0.15s ease-in-out,
transform 0.15s ease-in-out;
- /* box-shadow: 0 4px 30px var(--base01); */
- box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;
+ box-shadow: var(--shadow-card);
}
button:hover {
diff --git a/src/styles/popup.scss b/src/styles/popup.scss
index 97b2e3d1..463a17d8 100644
--- a/src/styles/popup.scss
+++ b/src/styles/popup.scss
@@ -13,7 +13,7 @@
.popup-fullscreen {
width: 100%;
height: 100%;
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: var(--scrim-soft);
z-index: 3;
backdrop-filter: blur(8px);
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-15 21:48:02 +0000