thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-11-03 11:22:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add light theme overrides and documentation

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-11 14:10:57 -04:00
1 parent 317463619c
commit b20895ec32
4 files changed
+110 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tailwind.source.css
+6 -6
View File
@@ -38,7 +38,7 @@
}
.btn-ghost {
@apply btn border border-border border-opacity-60 bg-transparent text-white shadow-none;
@apply btn border border-border border-opacity-60 bg-transparent text-text shadow-none;
}
.btn-ghost:hover {
@@ -280,7 +280,7 @@
}
.bv-modal__panel {
@apply focus-ring relative z-[var(--z-modal-content)] w-full max-w-3xl rounded-xl border border-border border-opacity-40 bg-surface px-6 py-8 text-left text-white shadow-modal transition duration-base ease-out;
@apply focus-ring relative z-[var(--z-modal-content)] w-full max-w-3xl rounded-xl border border-border border-opacity-40 bg-surface px-6 py-8 text-left text-text shadow-modal transition duration-base ease-out;
}
.bv-modal__panel:focus-visible {
@@ -556,7 +556,7 @@
}
.profile-switcher__add {
@apply card hover:bg-info/10 flex cursor-pointer items-center gap-4 border border-dashed border-border border-opacity-40 bg-surface text-left text-muted transition duration-base ease-out hover:border-info hover:border-opacity-60 hover:text-white focus-visible:border-info focus-visible:border-opacity-60;
@apply card hover:bg-info/10 flex cursor-pointer items-center gap-4 border border-dashed border-border border-opacity-40 bg-surface text-left text-muted transition duration-base ease-out hover:border-info hover:border-opacity-60 hover:text-text focus-visible:border-info focus-visible:border-opacity-60;
}
.profile-switcher__addAvatar {
@@ -600,7 +600,7 @@
}
.watch-history-card__thumbnail {
@apply block flex-none text-white no-underline sm:w-56;
@apply block flex-none text-text no-underline sm:w-56;
}
.watch-history-card__thumbnailInner {
@@ -616,7 +616,7 @@
}
.watch-history-card__title {
@apply cursor-pointer text-lg font-semibold leading-snug text-white transition duration-base ease-out;
@apply cursor-pointer text-lg font-semibold leading-snug text-text transition duration-base ease-out;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -661,7 +661,7 @@
}
.watch-history-card__action {
@apply inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-panel px-4 py-2 text-sm font-medium text-muted transition duration-base ease-out hover:border-border hover:bg-surface-alt hover:text-white focus-visible:border-border focus-visible:bg-surface-alt focus-visible:text-white;
@apply inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-panel px-4 py-2 text-sm font-medium text-muted transition duration-base ease-out hover:border-border hover:bg-surface-alt hover:text-text focus-visible:border-border focus-visible:bg-surface-alt focus-visible:text-text;
}
.watch-history-card__action--primary {
css/tokens.css
+41
View File
@@ -170,3 +170,44 @@
--motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--modal-motion-duration: var(--motion-duration-base);
}
[data-theme="light"] {
/* Light theme overrides */
--color-surface: rgb(248 250 252);
--color-surface-alt: rgb(241 245 249);
--color-bg: var(--color-surface);
--color-card: rgb(255 255 255);
--color-card-private: rgb(244 236 255);
--color-card-critical: rgb(255 228 230);
--color-panel: rgb(255 255 255);
--color-panel-hover: rgb(226 232 240);
--color-border: rgb(148 163 184);
--color-border-subtle: rgb(203 213 225);
--color-primary: rgb(220 38 38);
--color-text: rgb(15 23 42);
--color-text-strong: rgb(15 23 42);
--color-muted: rgb(71 85 105);
--color-muted-alt: rgb(100 116 139);
--color-muted-strong: rgb(51 65 85);
--color-overlay: rgb(15 23 42 / 0.55);
--color-overlay-muted: rgb(15 23 42 / 0.35);
--color-overlay-strong: rgb(15 23 42 / 0.65);
--color-overlay-darker: rgb(15 23 42 / 0.72);
--color-overlay-panel: rgb(15 23 42 / 0.78);
--color-overlay-panel-soft: rgb(15 23 42 / 0.6);
--color-overlay-panel-tint: rgb(148 163 184 / 0.2);
--color-overlay-panel-glass: rgb(255 255 255 / 0.82);
--color-overlay-veil: rgb(148 163 184 / 0.5);
--color-overlay-panel-gradient-start: rgb(255 255 255 / 0.92);
--color-overlay-panel-gradient-end: rgb(226 232 240 / 0.92);
--color-surface-tint-subtle: rgb(15 23 42 / 0.08);
--color-border-translucent: rgb(148 163 184 / 0.18);
--color-border-translucent-strong: rgb(148 163 184 / 0.22);
--color-border-translucent-bright: rgb(148 163 184 / 0.28);
--color-border-translucent-stronger: rgb(148 163 184 / 0.32);
--color-border-translucent-strongest: rgb(148 163 184 / 0.36);
--color-border-translucent-glow: rgb(148 163 184 / 0.45);
--color-border-translucent-medium: rgb(148 163 184 / 0.2);
--color-border-neutral-soft: rgb(148 163 184 / 0.25);
--color-overlay-banner: rgb(148 163 184 / 0.7);
}