github-personal/vancouver
1
0
Fork 0
mirror of https://github.com/shadoll/vancouver.git synced 2026-08-28 03:28:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: update area card background and text colors for improved visibility and hover effects

Browse Source
This commit is contained in:
sha
2025-06-20 17:29:01 +03:00
parent b6b261be03
commit ed5d4283f5
1 changed files with 60 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Home.svelte
+60 -5
View File
@@ -429,22 +429,37 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: var(--bg-color); background: white;
opacity: 0.35; opacity: 0.8;
z-index: 1; z-index: 1;
} }
:global([data-theme="dark"]) .area-card.has-background::before {
background: var(--bg-color);
opacity: 0.5;
}
.area-card.has-background > * { .area-card.has-background > * {
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.area-card.has-background h3 { .area-card.has-background h3 {
color: #000000;
text-shadow: none;
}
.area-card.has-background p {
color: #000000;
text-shadow: none;
}
:global([data-theme="dark"]) .area-card.has-background h3 {
color: #ffffff; color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
} }
.area-card.has-background p { :global([data-theme="dark"]) .area-card.has-background p {
color: #f8fafc; color: #f8fafc;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
} }
@@ -455,9 +470,31 @@
} }
.area-card.has-background:hover::before { .area-card.has-background:hover::before {
background: black;
opacity: 0.15;
}
:global([data-theme="dark"]) .area-card.has-background:hover::before {
background: var(--bg-color);
opacity: 0.25; opacity: 0.25;
} }
.area-card.has-background:hover h3 {
color: white;
}
.area-card.has-background:hover p {
color: white;
}
:global([data-theme="dark"]) .area-card.has-background:hover h3 {
color: #ffffff;
}
:global([data-theme="dark"]) .area-card.has-background:hover p {
color: #f8fafc;
}
.area-icon { .area-icon {
width: 64px; width: 64px;
height: 64px; height: 64px;
@@ -483,7 +520,7 @@
.external-link { .external-link {
color: inherit; color: inherit;
text-decoration: none; text-decoration: underline;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
@@ -497,10 +534,28 @@
} }
.area-card.has-background .external-link { .area-card.has-background .external-link {
color: #ffffff; color: #000000;
} }
.area-card.has-background .external-link:hover { .area-card.has-background .external-link:hover {
color: #000000;
text-decoration: underline;
}
.area-card.has-background:hover .external-link {
color: white;
}
.area-card.has-background:hover .external-link:hover {
color: white;
text-decoration: underline;
}
:global([data-theme="dark"]) .area-card.has-background .external-link {
color: #ffffff;
}
:global([data-theme="dark"]) .area-card.has-background .external-link:hover {
color: #e2e8f0; color: #e2e8f0;
text-decoration: underline; text-decoration: underline;
} }