From cb8f68871bd08e46e6d26fc91e50ac521750eeb3 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 11:49:48 -0800 Subject: [PATCH 01/30] Add CSS reset styles to reset.css --- src/css/base/reset.css | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/css/base/reset.css diff --git a/src/css/base/reset.css b/src/css/base/reset.css new file mode 100644 index 0000000..d388107 --- /dev/null +++ b/src/css/base/reset.css @@ -0,0 +1,7 @@ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} From 54f42693a467e346f2ace36374efbae0e997437c Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 11:50:29 -0800 Subject: [PATCH 02/30] Add CSS variables for theming and dark mode --- src/css/base/variables.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/css/base/variables.css diff --git a/src/css/base/variables.css b/src/css/base/variables.css new file mode 100644 index 0000000..4793e5b --- /dev/null +++ b/src/css/base/variables.css @@ -0,0 +1,13 @@ +:root { + --font-base: ...; + --primary: #4fc3f7; + --color-background: #fff; + ... +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: #111; + ... + } +} From 755d70443b54b69b0645086151d4b6ed786a0d21 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 11:53:05 -0800 Subject: [PATCH 03/30] Add typography styles to base CSS --- src/css/base/typography.css | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/css/base/typography.css diff --git a/src/css/base/typography.css b/src/css/base/typography.css new file mode 100644 index 0000000..5ae5fd5 --- /dev/null +++ b/src/css/base/typography.css @@ -0,0 +1,3 @@ +body { ... } +h1, h2, h3, h4, h5, h6 { ... } +body.dark h1, ... { ... } From 031a324d4f3a6faa4a211244fc36fd1b6a8a659e Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 11:55:44 -0800 Subject: [PATCH 04/30] Add header styles to header.css --- src/css/layout/header.css | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/css/layout/header.css diff --git a/src/css/layout/header.css b/src/css/layout/header.css new file mode 100644 index 0000000..33525e0 --- /dev/null +++ b/src/css/layout/header.css @@ -0,0 +1,5 @@ +header { ... } +header .nav-link { ... } +body.dark header .nav-link { ... } +header a { ... } +body.dark header a { ... } From a64b271634752a267de9fa0f1ff960b5af758e3c Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 11:56:31 -0800 Subject: [PATCH 05/30] Add footer styles in footer.css --- src/css/layout/footer.css | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/css/layout/footer.css diff --git a/src/css/layout/footer.css b/src/css/layout/footer.css new file mode 100644 index 0000000..44104cf --- /dev/null +++ b/src/css/layout/footer.css @@ -0,0 +1 @@ +footer { ... } From 5b256f7ce0fb0da4b73195e9f130f099082744b4 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 11:57:22 -0800 Subject: [PATCH 06/30] Add initial styles for category drawer layout --- src/css/layout/drawer.css | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/css/layout/drawer.css diff --git a/src/css/layout/drawer.css b/src/css/layout/drawer.css new file mode 100644 index 0000000..249a0ac --- /dev/null +++ b/src/css/layout/drawer.css @@ -0,0 +1,4 @@ +#categoryDrawer { ... } +#categoryDrawer.open { ... } +body.dark #categoryDrawer { ... } +#drawerOverlay { ... } From 61f65fb9b3180f4c6994e5ce79a4c24325c13098 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 11:58:51 -0800 Subject: [PATCH 07/30] Add grid.css for layout styling --- src/css/layout/grid.css | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/css/layout/grid.css diff --git a/src/css/layout/grid.css b/src/css/layout/grid.css new file mode 100644 index 0000000..3a395ce --- /dev/null +++ b/src/css/layout/grid.css @@ -0,0 +1,5 @@ +.column-gap { ... } + +@media (max-width: 360px) { + .stream-preview { ... } +} From a46a3ec83b9a9ed7e46c477679c71e8ee1225185 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 11:59:53 -0800 Subject: [PATCH 08/30] Add card component styles in cards.css --- src/css/components/cards.css | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/css/components/cards.css diff --git a/src/css/components/cards.css b/src/css/components/cards.css new file mode 100644 index 0000000..dbe06f7 --- /dev/null +++ b/src/css/components/cards.css @@ -0,0 +1,5 @@ +.card { ... } +.card-text { ... } +.card-title { ... } +.viewer-number.pulse { ... } +@keyframes pulse { ... } From 753c8eff8b7df8d1b700a46455857932d0cfd4ad Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:01:56 -0800 Subject: [PATCH 09/30] Add badges.css for badge component styles --- src/css/components/badges.css | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/css/components/badges.css diff --git a/src/css/components/badges.css b/src/css/components/badges.css new file mode 100644 index 0000000..2dc75be --- /dev/null +++ b/src/css/components/badges.css @@ -0,0 +1,4 @@ +body.dark .badge.bg-primary { ... } +body.dark .badge { ... } +.tag-badge { ... } +.tag-filter { ... } From 5a28e6d96c170c301cc0fdbb211de675f3c41786 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:05:26 -0800 Subject: [PATCH 10/30] Add modal CSS styles for stream detail component --- src/css/components/modal.css | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/css/components/modal.css diff --git a/src/css/components/modal.css b/src/css/components/modal.css new file mode 100644 index 0000000..0b4c5e3 --- /dev/null +++ b/src/css/components/modal.css @@ -0,0 +1,4 @@ +.stream-detail-modal { ... } +.stream-detail-overlay { ... } +.stream-detail-content { ... } +.close-modal { ... } From 982405564ba148a108adaf43e237ba2819a5b321 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:08:01 -0800 Subject: [PATCH 11/30] Add forms.css for form control and button styles --- src/css/components/forms.css | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 src/css/components/forms.css diff --git a/src/css/components/forms.css b/src/css/components/forms.css new file mode 100644 index 0000000..614b47a --- /dev/null +++ b/src/css/components/forms.css @@ -0,0 +1,2 @@ +.form-control:focus { ... } +.btn-auth { ... } From 9766dbc1394c519a307c9ada27fb659416e5487b Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:10:35 -0800 Subject: [PATCH 12/30] Add styles for login page components --- src/css/pages/login.css | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/css/pages/login.css diff --git a/src/css/pages/login.css b/src/css/pages/login.css new file mode 100644 index 0000000..3ed9c42 --- /dev/null +++ b/src/css/pages/login.css @@ -0,0 +1,3 @@ +.auth-container { ... } +.auth-card { ... } +.auth-header { ... } From 968bf5281463d651fc56cdc206f6e3f488d8d208 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:13:01 -0800 Subject: [PATCH 13/30] Add dark theme styles to dark.css --- src/css/themes/dark.css | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/css/themes/dark.css diff --git a/src/css/themes/dark.css b/src/css/themes/dark.css new file mode 100644 index 0000000..429fefb --- /dev/null +++ b/src/css/themes/dark.css @@ -0,0 +1,5 @@ +body.dark { + --color-background: #111; + --color-text: #eee; + ... +} From f653ab129ab46247fae91fa7bf4fe72132596a8c Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:14:50 -0800 Subject: [PATCH 14/30] Delete src/css/style.css Moving to app.css which imports all css --- src/css/style.css | 392 ---------------------------------------------- 1 file changed, 392 deletions(-) delete mode 100644 src/css/style.css diff --git a/src/css/style.css b/src/css/style.css deleted file mode 100644 index 6a69f3d..0000000 --- a/src/css/style.css +++ /dev/null @@ -1,392 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap'); - -/* Reset and base */ -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --font-base: - 'Roboto', 'OpenSans', 'Lato', 'Montserrat', 'Noto Sans', 'Oswald', - 'Poppins', 'Raleway', system-ui, -apple-system, sans-serif; - - --primary: #4fc3f7; - - --color-background: #fff; - --color-text: #000; - --color-card-bg: #fff; - --color-card-text: #000; - --color-header-bg: #fff; - --color-header-text: #000; - --color-footer-bg: #f8f9fa; - --color-footer-text: #000; - - --radius: 0.5rem; -} - -body { - font-family: var(--font-base); - background-color: var(--color-background); - color: var(--color-text); - line-height: 1.6; - transition: - background-color 0.3s ease, - color 0.3s ease; -} - -/* This block handles the manual theme toggle */ -body.dark { - --color-background: #111; - --color-text: #eee; - --color-card-bg: #222; - --color-card-text: #eee; - --color-header-bg: #222; - --color-header-text: #eee; - --color-footer-bg: #222; - --color-footer-text: #eee; -} - -/* Override Bootstrap's bg-light class in dark mode */ -body.dark.bg-light { - background-color: var(--color-background) !important; -} - -/* Header */ -header { - background-color: var(--color-header-bg); - color: var(--color-header-text); - transition: - background-color 0.3s ease, - color 0.3s ease; -} - -/* Override Bootstrap's bg-white class on header in dark mode */ -body.dark header.bg-white { - background-color: var(--color-header-bg) !important; -} - -/* Navigation links within the header */ -header .nav-link { - color: #000 !important; -} - -header .nav-link:hover, -header .nav-link:focus { - color: #000 !important; - opacity: 0.7; -} - -body.dark header .nav-link { - color: #eee !important; -} - -body.dark header .nav-link:hover, -body.dark header .nav-link:focus { - color: #eee !important; -} -header a { - color: #000 !important; -} -header a:hover { - color: #000 !important; -} -body.dark header a { - color: #eee !important; -} -body.dark header a:hover { - color: #eee !important; -} - -/* Footer */ -footer { - background-color: var(--color-footer-bg); - color: var(--color-footer-text); - transition: - background-color 0.3s ease, - color 0.3s ease; -} - -/* Headings - ensure they follow the color scheme */ -h1, -h2, -h3, -h4, -h5, -h6 { - color: #000 !important; - transition: color 0.3s ease; -} - -body.dark h1, -body.dark h2, -body.dark h3, -body.dark h4, -body.dark h5, -body.dark h6 { - color: #eee !important; -} - -/* Card Styles */ -.card { - background-color: var(--color-card-bg); - color: var(--color-card-text); - transition: - background-color 0.3s ease, - color 0.3s ease; -} - -.card-text { - color: var(--color-card-text); -} - -/* Card texts and viewer counts */ -.card-text, -.viewer-count, -.card-title { - color: var(--color-card-text); -} - -.card-text, -.viewer-count { - /* Use card text color to override bootstrap defaults */ - color: var(--color-card-text); -} - -.card-title { - color: var(--color-card-text); -} - -body.dark .badge.bg-primary { - background-color: #4fc3f7; /* or a lighter blue */ - color: #222; -} - -/* Category Drawer Styles */ -#categoryDrawer { - width: 280px; - transform: translateX(-100%); - transition: - transform 0.3s ease-in-out, - visibility 0.3s ease-in-out, - opacity 0.3s ease-in-out; - visibility: hidden; - opacity: 0; - z-index: 1050; -} - -#categoryDrawer.open { - transform: translateX(0); - visibility: visible; - opacity: 1; -} - -/* Dark mode for drawer when body is dark */ -body.dark #categoryDrawer { - background-color: #222; /* Dark background for drawer */ - color: #eee; /* Light text for drawer */ -} - -body.dark #categoryDrawer a { - color: #eee; /* Light text for drawer links */ -} - -/* Drawer Overlay */ -#drawerOverlay { - display: none; - z-index: 1040; -} - -#drawerOverlay.show { - display: block; -} - -/* Tag Badge Styles */ -.tag-badge { - display: inline-block; - padding: 0.25rem 0.5rem; - font-size: 0.875rem; - border-radius: var(--radius); - cursor: pointer; - transition: all 0.2s ease; -} - -.tag-badge:hover { - opacity: 0.8; - transform: translateY(-1px); -} - -/* Tag Filter Styles */ -.tag-filter { - cursor: pointer; - transition: all 0.2s ease; -} - -.tag-filter:hover { - opacity: 0.8; - transform: scale(1.05); -} - -.tag-filter:active { - transform: scale(0.98); -} - -.column-gap { - -moz-column-gap: 1rem; /* For older versions of Firefox */ - column-gap: 1rem; /* Adjust the value as needed */ -} - -body.dark .badge { - border-color: rgba(255, 255, 255, 0.15); -} - -/* -* @media (prefers-color-scheme: dark) block -* This block applies styles when the user's system preference is dark mode. -* It sets the default dark mode appearance, which can then be overridden -* by the `body.dark` class if the user manually toggles the theme. -*/ -@media (prefers-color-scheme: dark) { - :root { - /* Set dark mode variables as defaults when system prefers dark */ - --color-background: #111; - --color-text: #eee; - --color-card-bg: #222; - --color-card-text: #eee; - --color-header-bg: #222; - --color-header-text: #eee; - --color-footer-bg: #222; - --color-footer-text: #eee; - } -} - -/* Responsiveness */ -@media (max-width: 360px) { - .stream-preview { - grid-template-columns: 1fr; - } -} - -@keyframes pulse { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } - 100% { - transform: scale(1); - } -} - -.viewer-number.pulse { - animation: pulse 0.3s ease-in-out; -} - -/* ================================ - Stream Detail Modal (V1) - ================================ */ - -.stream-detail-modal { - position: fixed; - inset: 0; - z-index: 2000; - display: flex; - align-items: center; - justify-content: center; -} - -.stream-detail-overlay { - position: absolute; - inset: 0; - background: rgba(0, 0, 0, 0.7); -} - -.stream-detail-content { - position: relative; - background-color: var(--color-card-bg); - color: var(--color-card-text); - max-width: 520px; - width: 90%; - padding: 1.25rem; - border-radius: var(--radius); - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); - z-index: 1; -} - -.stream-detail-content img { - width: 100%; - border-radius: var(--radius); -} - -.stream-detail-content h2 { - margin-top: 0.75rem; - margin-bottom: 0.25rem; -} - -.stream-detail-content .badge { - margin-right: 0.25rem; - margin-top: 0.25rem; -} - -.close-modal { - position: absolute; - top: 0.5rem; - right: 0.75rem; - background: none; - border: none; - font-size: 1.5rem; - color: var(--color-card-text); - cursor: pointer; -} - -.close-modal:hover { - opacity: 0.8; -} - -/* ================================ - Auth Pages (Login/Register) - ================================ */ - -.auth-container { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; - background-color: var(--color-background); -} - -.auth-card { - max-width: 450px; - width: 100%; -} - -.auth-card .card { - border: none; - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; -} - -.auth-header { - position: absolute; - top: 0; - left: 0; - width: 100%; - padding: 1rem 2rem; - display: flex; - justify-content: space-between; - align-items: center; -} - -.form-control:focus { - border-color: var(--primary); - box-shadow: 0 0 0 0.25rem rgba(79, 195, 247, 0.25); -} - -.btn-auth { - padding: 12px; - font-weight: 600; -} From 9f052c26112f1a8e9bb51e05330d5ed655738ed7 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:15:25 -0800 Subject: [PATCH 15/30] Add main CSS file with imports for styles --- src/css/app.css | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/css/app.css diff --git a/src/css/app.css b/src/css/app.css new file mode 100644 index 0000000..a4a0bb1 --- /dev/null +++ b/src/css/app.css @@ -0,0 +1,29 @@ +/* Base */ +@import './base/reset.css'; +@import './base/variables.css'; +@import './base/typography.css'; + +/* Layout */ +@import './layout/header.css'; +@import './layout/footer.css'; +@import './layout/grid.css'; +@import './layout/drawer.css'; + +/* Components */ +@import './components/cards.css'; +@import './components/badges.css'; +@import './components/modal.css'; +@import './components/forms.css'; + +/* Pages */ +@import './pages/index.css'; +@import './pages/login.css'; +@import './pages/register.css'; +@import './pages/offline.css'; + +/* Themes */ +@import './themes/light.css'; +@import './themes/dark.css'; + +/* Bootstrap overrides */ +@import './bootstrap-overrides.css'; From 2ad0c1196e3eea7bd72670bcbf7db8a92e0c3ac5 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:25:40 -0800 Subject: [PATCH 16/30] Refactor CSS variables for typography and themes Updated base font variable and defined additional colors for light and dark themes. --- src/css/base/variables.css | 43 +++++++++++++++++++++++++++++++++++--- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/src/css/base/variables.css b/src/css/base/variables.css index 4793e5b..0aeb841 100644 --- a/src/css/base/variables.css +++ b/src/css/base/variables.css @@ -1,13 +1,50 @@ +/* ========================================= + Base Variables + ========================================= */ + :root { - --font-base: ...; + /* Typography */ + --font-base: + 'Roboto', 'OpenSans', 'Lato', 'Montserrat', 'Noto Sans', 'Oswald', + 'Poppins', 'Raleway', system-ui, -apple-system, sans-serif; + + /* Brand Colors */ --primary: #4fc3f7; + + /* Light Theme Defaults */ --color-background: #fff; - ... + --color-text: #000; + + --color-card-bg: #fff; + --color-card-text: #000; + + --color-header-bg: #fff; + --color-header-text: #000; + + --color-footer-bg: #f8f9fa; + --color-footer-text: #000; + + /* Shared UI */ + --radius: 0.5rem; } +/* ========================================= + System Dark Mode Defaults + (prefers-color-scheme: dark) + ========================================= */ + @media (prefers-color-scheme: dark) { :root { --color-background: #111; - ... + --color-text: #eee; + + --color-card-bg: #222; + --color-card-text: #eee; + + --color-header-bg: #222; + --color-header-text: #eee; + + --color-footer-bg: #222; + --color-footer-text: #eee; } } From a49c90fe8eeddcff5a40ad3eeaaa064c41b64356 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:27:19 -0800 Subject: [PATCH 17/30] Add base typography styles and dark mode overrides --- src/css/base/typography.css | 40 ++++++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/src/css/base/typography.css b/src/css/base/typography.css index 5ae5fd5..3c605c1 100644 --- a/src/css/base/typography.css +++ b/src/css/base/typography.css @@ -1,3 +1,37 @@ -body { ... } -h1, h2, h3, h4, h5, h6 { ... } -body.dark h1, ... { ... } +/* ========================================= + Typography Base + ========================================= */ + +body { + font-family: var(--font-base); + background-color: var(--color-background); + color: var(--color-text); + line-height: 1.6; + transition: + background-color 0.3s ease, + color 0.3s ease; +} + +/* ========================================= + Headings + ========================================= */ + +h1, +h2, +h3, +h4, +h5, +h6 { + color: #000 !important; + transition: color 0.3s ease; +} + +/* Dark mode heading overrides */ +body.dark h1, +body.dark h2, +body.dark h3, +body.dark h4, +body.dark h5, +body.dark h6 { + color: #eee !important; +} From e526d52f765fddbde85149fcef25bc84e946f6e9 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:31:59 -0800 Subject: [PATCH 18/30] Implement styles for Stream Detail Modal Added styles for the Stream Detail Modal component. --- src/css/components/modal.css | 64 +++++++++++++++++++++++++++++++++--- 1 file changed, 60 insertions(+), 4 deletions(-) diff --git a/src/css/components/modal.css b/src/css/components/modal.css index 0b4c5e3..f943aba 100644 --- a/src/css/components/modal.css +++ b/src/css/components/modal.css @@ -1,4 +1,60 @@ -.stream-detail-modal { ... } -.stream-detail-overlay { ... } -.stream-detail-content { ... } -.close-modal { ... } +/* ========================================= + Stream Detail Modal + ========================================= */ + +.stream-detail-modal { + position: fixed; + inset: 0; + z-index: 2000; + display: flex; + align-items: center; + justify-content: center; +} + +.stream-detail-overlay { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.7); +} + +.stream-detail-content { + position: relative; + background-color: var(--color-card-bg); + color: var(--color-card-text); + max-width: 520px; + width: 90%; + padding: 1.25rem; + border-radius: var(--radius); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); + z-index: 1; +} + +.stream-detail-content img { + width: 100%; + border-radius: var(--radius); +} + +.stream-detail-content h2 { + margin-top: 0.75rem; + margin-bottom: 0.25rem; +} + +.stream-detail-content .badge { + margin-right: 0.25rem; + margin-top: 0.25rem; +} + +.close-modal { + position: absolute; + top: 0.5rem; + right: 0.75rem; + background: none; + border: none; + font-size: 1.5rem; + color: var(--color-card-text); + cursor: pointer; +} + +.close-modal:hover { + opacity: 0.8; +} From 1d5bfad749e58cefdcf919b4814e4484d91d3e4a Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:33:45 -0800 Subject: [PATCH 19/30] Update forms.css --- src/css/components/forms.css | 50 ++++++++++++++++++++++++++++++++++-- 1 file changed, 48 insertions(+), 2 deletions(-) diff --git a/src/css/components/forms.css b/src/css/components/forms.css index 614b47a..c537e2e 100644 --- a/src/css/components/forms.css +++ b/src/css/components/forms.css @@ -1,2 +1,48 @@ -.form-control:focus { ... } -.btn-auth { ... } +/* ========================================= + Form Controls + ========================================= */ + +.form-control:focus { + border-color: var(--primary); + box-shadow: 0 0 0 0.25rem rgba(79, 195, 247, 0.25); +} + +.btn-auth { + padding: 12px; + font-weight: 600; +} + +/* ========================================= + Auth Page Form Layout + (Login / Register) + ========================================= */ + +.auth-container { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + background-color: var(--color-background); +} + +.auth-card { + max-width: 450px; + width: 100%; +} + +.auth-card .card { + border: none; + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +} + +.auth-header { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} From 913c26599d60a600aa256df171cecbf6de107cb5 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:35:26 -0800 Subject: [PATCH 20/30] Update cards.css --- src/css/components/cards.css | 51 ++++++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 5 deletions(-) diff --git a/src/css/components/cards.css b/src/css/components/cards.css index dbe06f7..00cc281 100644 --- a/src/css/components/cards.css +++ b/src/css/components/cards.css @@ -1,5 +1,46 @@ -.card { ... } -.card-text { ... } -.card-title { ... } -.viewer-number.pulse { ... } -@keyframes pulse { ... } +/* ========================================= + Card Component + ========================================= */ + +.card { + background-color: var(--color-card-bg); + color: var(--color-card-text); + transition: + background-color 0.3s ease, + color 0.3s ease; +} + +.card-text { + color: var(--color-card-text); +} + +.card-title { + color: var(--color-card-text); +} + +/* Viewer count + shared text overrides */ +.viewer-count, +.card-text, +.card-title { + color: var(--color-card-text); +} + +/* ========================================= + Viewer Count Pulse Animation + ========================================= */ + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} + +.viewer-number.pulse { + animation: pulse 0.3s ease-in-out; +} From e6feafa3118e199eb18cf64cc1dc803875492136 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:37:01 -0800 Subject: [PATCH 21/30] Update badges.css --- src/css/components/badges.css | 54 ++++++++++++++++++++++++++++++++--- 1 file changed, 50 insertions(+), 4 deletions(-) diff --git a/src/css/components/badges.css b/src/css/components/badges.css index 2dc75be..2694f8d 100644 --- a/src/css/components/badges.css +++ b/src/css/components/badges.css @@ -1,4 +1,50 @@ -body.dark .badge.bg-primary { ... } -body.dark .badge { ... } -.tag-badge { ... } -.tag-filter { ... } +/* ========================================= + Badge Overrides + ========================================= */ + +/* Primary badge in dark mode */ +body.dark .badge.bg-primary { + background-color: #4fc3f7; + color: #222; +} + +/* General badge border in dark mode */ +body.dark .badge { + border-color: rgba(255, 255, 255, 0.15); +} + +/* ========================================= + Tag Badges + ========================================= */ + +.tag-badge { + display: inline-block; + padding: 0.25rem 0.5rem; + font-size: 0.875rem; + border-radius: var(--radius); + cursor: pointer; + transition: all 0.2s ease; +} + +.tag-badge:hover { + opacity: 0.8; + transform: translateY(-1px); +} + +/* ========================================= + Tag Filters + ========================================= */ + +.tag-filter { + cursor: pointer; + transition: all 0.2s ease; +} + +.tag-filter:hover { + opacity: 0.8; + transform: scale(1.05); +} + +.tag-filter:active { + transform: scale(0.98); +} From 78bd2a1d7ed08b114978bde64994392423b6675d Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:39:04 -0800 Subject: [PATCH 22/30] Update drawer.css --- src/css/layout/drawer.css | 48 +++++++++++++++++++++++++++++++++++---- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/src/css/layout/drawer.css b/src/css/layout/drawer.css index 249a0ac..67b9967 100644 --- a/src/css/layout/drawer.css +++ b/src/css/layout/drawer.css @@ -1,4 +1,44 @@ -#categoryDrawer { ... } -#categoryDrawer.open { ... } -body.dark #categoryDrawer { ... } -#drawerOverlay { ... } +/* ========================================= + Category Drawer + ========================================= */ + +#categoryDrawer { + width: 280px; + transform: translateX(-100%); + transition: + transform 0.3s ease-in-out, + visibility 0.3s ease-in-out, + opacity 0.3s ease-in-out; + visibility: hidden; + opacity: 0; + z-index: 1050; +} + +#categoryDrawer.open { + transform: translateX(0); + visibility: visible; + opacity: 1; +} + +/* Dark mode drawer appearance */ +body.dark #categoryDrawer { + background-color: #222; + color: #eee; +} + +body.dark #categoryDrawer a { + color: #eee; +} + +/* ========================================= + Drawer Overlay + ========================================= */ + +#drawerOverlay { + display: none; + z-index: 1040; +} + +#drawerOverlay.show { + display: block; +} From ac87f1a0567c1a79eee6b0588444f85bc9ad5482 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:40:37 -0800 Subject: [PATCH 23/30] Update footer.css --- src/css/layout/footer.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/css/layout/footer.css b/src/css/layout/footer.css index 44104cf..1c65e87 100644 --- a/src/css/layout/footer.css +++ b/src/css/layout/footer.css @@ -1 +1,11 @@ -footer { ... } +/* ========================================= + Footer + ========================================= */ + +footer { + background-color: var(--color-footer-bg); + color: var(--color-footer-text); + transition: + background-color 0.3s ease, + color 0.3s ease; +} From ebf38bb519cce16a2f7e7907339cd9ee8dfd4708 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:43:06 -0800 Subject: [PATCH 24/30] Update grid.css --- src/css/layout/grid.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/css/layout/grid.css b/src/css/layout/grid.css index 3a395ce..75a3195 100644 --- a/src/css/layout/grid.css +++ b/src/css/layout/grid.css @@ -1,5 +1,18 @@ -.column-gap { ... } +/* ========================================= + Grid Utilities + ========================================= */ + +.column-gap { + -moz-column-gap: 1rem; /* Firefox legacy support */ + column-gap: 1rem; +} + +/* ========================================= + Responsive Grid Adjustments + ========================================= */ @media (max-width: 360px) { - .stream-preview { ... } + .stream-preview { + grid-template-columns: 1fr; + } } From c995fa53fc1a3497de021d9a63a3080def87f0a5 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:44:49 -0800 Subject: [PATCH 25/30] Update header.css --- src/css/layout/header.css | 65 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 60 insertions(+), 5 deletions(-) diff --git a/src/css/layout/header.css b/src/css/layout/header.css index 33525e0..5bf4d45 100644 --- a/src/css/layout/header.css +++ b/src/css/layout/header.css @@ -1,5 +1,60 @@ -header { ... } -header .nav-link { ... } -body.dark header .nav-link { ... } -header a { ... } -body.dark header a { ... } +/* ========================================= + Header + ========================================= */ + +header { + background-color: var(--color-header-bg); + color: var(--color-header-text); + transition: + background-color 0.3s ease, + color 0.3s ease; +} + +/* Override Bootstrap's bg-white class in dark mode */ +body.dark header.bg-white { + background-color: var(--color-header-bg) !important; +} + +/* ========================================= + Navigation Links + ========================================= */ + +header .nav-link { + color: #000 !important; +} + +header .nav-link:hover, +header .nav-link:focus { + color: #000 !important; + opacity: 0.7; +} + +/* Dark mode nav links */ +body.dark header .nav-link { + color: #eee !important; +} + +body.dark header .nav-link:hover, +body.dark header .nav-link:focus { + color: #eee !important; +} + +/* ========================================= + Header Anchor Overrides + ========================================= */ + +header a { + color: #000 !important; +} + +header a:hover { + color: #000 !important; +} + +body.dark header a { + color: #eee !important; +} + +body.dark header a:hover { + color: #eee !important; +} From 9908850f9977313fe36a0b0db094c2d09209c70e Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:49:58 -0800 Subject: [PATCH 26/30] Update index.html Changed to app.css stylesheet --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index ac5e434..a0a5ead 100644 --- a/index.html +++ b/index.html @@ -61,7 +61,7 @@ - + From ee4eb2101889f23164e633e9bd64c0582575c25c Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:52:30 -0800 Subject: [PATCH 27/30] Create light.css --- src/css/themes/light.css | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/css/themes/light.css diff --git a/src/css/themes/light.css b/src/css/themes/light.css new file mode 100644 index 0000000..b6d7c39 --- /dev/null +++ b/src/css/themes/light.css @@ -0,0 +1,6 @@ +/* ========================================= + Light Theme (Explicit Overrides) + ========================================= */ + +/* No explicit light theme overrides were defined in the original code. + Light mode is handled entirely by the default :root variables. */ From de144420b1965ba48fedbbb26e4031dfa1e99500 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 12:53:13 -0800 Subject: [PATCH 28/30] Update dark.css --- src/css/themes/dark.css | 61 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 60 insertions(+), 1 deletion(-) diff --git a/src/css/themes/dark.css b/src/css/themes/dark.css index 429fefb..6f4f337 100644 --- a/src/css/themes/dark.css +++ b/src/css/themes/dark.css @@ -1,5 +1,64 @@ +/* ========================================= + Manual Dark Theme Overrides + ========================================= */ + body.dark { --color-background: #111; --color-text: #eee; - ... + + --color-card-bg: #222; + --color-card-text: #eee; + + --color-header-bg: #222; + --color-header-text: #eee; + + --color-footer-bg: #222; + --color-footer-text: #eee; +} + +/* Override Bootstrap's bg-light class in dark mode */ +body.dark.bg-light { + background-color: var(--color-background) !important; +} + +/* Header overrides */ +body.dark header.bg-white { + background-color: var(--color-header-bg) !important; +} + +body.dark header .nav-link { + color: #eee !important; +} + +body.dark header .nav-link:hover, +body.dark header .nav-link:focus { + color: #eee !important; +} + +body.dark header a { + color: #eee !important; +} + +body.dark header a:hover { + color: #eee !important; +} + +/* Drawer overrides */ +body.dark #categoryDrawer { + background-color: #222; + color: #eee; +} + +body.dark #categoryDrawer a { + color: #eee; +} + +/* Badge overrides */ +body.dark .badge.bg-primary { + background-color: #4fc3f7; + color: #222; +} + +body.dark .badge { + border-color: rgba(255, 255, 255, 0.15); } From 82c27694e18e52f85cf458d63b5dcb5e01f28c01 Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 13:16:58 -0800 Subject: [PATCH 29/30] Create index.css --- src/css/pages/index.css | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 src/css/pages/index.css diff --git a/src/css/pages/index.css b/src/css/pages/index.css new file mode 100644 index 0000000..1bd1e37 --- /dev/null +++ b/src/css/pages/index.css @@ -0,0 +1,2 @@ +/* Index page currently has no page-specific styles */ +/* This css file is for anything index page specific */ From 9c5b459152e5d9ca23c64ad6091d154e83bc6e7e Mon Sep 17 00:00:00 2001 From: Gregory Bowne Date: Mon, 16 Feb 2026 14:59:35 -0800 Subject: [PATCH 30/30] Create bootstrap-overrides.css Forgot to add the bootstrap overrides that were in the original style.css --- src/css/bootstrap-overrides.css | 50 +++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 src/css/bootstrap-overrides.css diff --git a/src/css/bootstrap-overrides.css b/src/css/bootstrap-overrides.css new file mode 100644 index 0000000..73c1aa8 --- /dev/null +++ b/src/css/bootstrap-overrides.css @@ -0,0 +1,50 @@ +/* ========================================= + Bootstrap Overrides + ========================================= */ + +/* Fix Bootstrap's bg-light in dark mode */ +body.dark.bg-light { + background-color: var(--color-background) !important; +} + +/* Fix Bootstrap's bg-white header in dark mode */ +body.dark header.bg-white { + background-color: var(--color-header-bg) !important; +} + +/* Override Bootstrap nav-link colors */ +header .nav-link { + color: #000 !important; +} + +header .nav-link:hover, +header .nav-link:focus { + color: #000 !important; + opacity: 0.7; +} + +body.dark header .nav-link { + color: #eee !important; +} + +body.dark header .nav-link:hover, +body.dark header .nav-link:focus { + color: #eee !important; +} + +/* Override Bootstrap anchor colors inside header */ +header a { + color: #000 !important; +} + +header a:hover { + color: #000 !important; +} + +body.dark header a { + color: #eee !important; +} + +body.dark header a:hover { + color: #eee !important; +}