diff --git a/README.md b/README.md index 5cb6f98..6a2732c 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ docker run -p 9876:9876 aitherboard ## Core Features - **Threads & Discussions** - Create and participate in threaded conversations -- **Feed** - Twitter-like feed posts (kind 1) with real-time updates +- **Feed** - socialmedia-like feed posts (kind 1) with real-time updates - **Comments** - Flat-threaded comments on threads and posts - **Reactions** - Upvote, downvote, and react to content with custom GIFs and emojis - **Profiles** - View and manage user profiles with payment addresses diff --git a/package-lock.json b/package-lock.json index c5baf7a..e29d2e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "aitherboard", - "version": "0.2.0", + "version": "0.2.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "aitherboard", - "version": "0.2.0", + "version": "0.2.1", "license": "MIT", "dependencies": { "@codemirror/autocomplete": "^6.20.0", diff --git a/package.json b/package.json index 60f7c49..8cba962 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aitherboard", - "version": "0.2.0", + "version": "0.2.1", "type": "module", "author": "silberengel@gitcitadel.com", "description": "A decentralized messageboard built on the Nostr protocol.", diff --git a/public/healthz.json b/public/healthz.json index 58cf9ca..95db789 100644 --- a/public/healthz.json +++ b/public/healthz.json @@ -1,8 +1,8 @@ { "status": "ok", "service": "aitherboard", - "version": "0.2.0", - "buildTime": "2026-02-10T11:19:46.024Z", + "version": "0.2.1", + "buildTime": "2026-02-10T22:25:53.381Z", "gitCommit": "unknown", - "timestamp": 1770722386024 + "timestamp": 1770762353381 } \ No newline at end of file diff --git a/src/app.css b/src/app.css index ce35304..8f04abc 100644 --- a/src/app.css +++ b/src/app.css @@ -441,6 +441,1036 @@ body::before { text-shadow: 0 0 1px rgba(0, 255, 0, 0.1); } +/* Design Theme Switching */ + +/* Fog Theme (Default) - keeps monospace font and existing styles */ +[data-design-theme="fog"], +[data-design-theme="fog"] body, +[data-design-theme="fog"] html, +[data-design-theme="fog"] div, +[data-design-theme="fog"] span, +[data-design-theme="fog"] p, +[data-design-theme="fog"] a, +[data-design-theme="fog"] h1, +[data-design-theme="fog"] h2, +[data-design-theme="fog"] h3, +[data-design-theme="fog"] h4, +[data-design-theme="fog"] h5, +[data-design-theme="fog"] h6, +[data-design-theme="fog"] button, +[data-design-theme="fog"] input, +[data-design-theme="fog"] textarea, +[data-design-theme="fog"] select, +[data-design-theme="fog"] label { + font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace !important; +} + +/* Fog theme - light mode backgrounds (default) */ +[data-design-theme="fog"] .bg-fog-bg, +[data-design-theme="fog"] .bg-fog-surface, +[data-design-theme="fog"] .bg-fog-post, +[data-design-theme="fog"] [class*="bg-fog-"] { + /* Let Tailwind handle light mode, dark mode will override */ +} + +/* Banner image tinting for themes */ +[data-design-theme="fog"] header img[src*="aither.png"], +[data-design-theme="fog"] header img[alt*="banner"], +[data-design-theme="fog"] header > div:first-child img { + filter: brightness(0.95) saturate(0.9) !important; /* Slightly desaturated, cool tone */ +} + +/* forum Theme */ +[data-design-theme="forum"] .bg-fog-bg, +[data-design-theme="forum"] .bg-fog-surface, +[data-design-theme="forum"] .bg-fog-post, +[data-design-theme="forum"] [class*="bg-fog-"] { + background-color: #ffffff !important; +} + +[data-design-theme="forum"] .text-fog-text, +[data-design-theme="forum"] [class*="text-fog-text"]:not([class*="text-fog-text-light"]):not([class*="text-fog-accent"]) { + color: #1c1c1c !important; +} + +[data-design-theme="forum"] .text-fog-text-light, +[data-design-theme="forum"] [class*="text-fog-text-light"] { + color: #5a5a5a !important; /* Improved contrast: 7.1:1 on white (was 4.5:1) */ +} + +[data-design-theme="forum"] .border-fog-border, +[data-design-theme="forum"] [class*="border-fog-border"] { + border-color: #e4e4e4 !important; +} + +[data-design-theme="forum"] .text-fog-accent, +[data-design-theme="forum"] [class*="text-fog-accent"]:not([class*="bg-fog-accent"]) { + color: #d93a00 !important; /* Improved contrast: 4.8:1 on white (was 2.9:1) */ +} + +[data-design-theme="forum"] .bg-fog-accent, +[data-design-theme="forum"] [class*="bg-fog-accent"] { + background-color: #ff4500 !important; + color: #ffffff !important; /* White text on orange for WCAG AA compliance */ +} + +[data-design-theme="forum"] .bg-fog-highlight, +[data-design-theme="forum"] [class*="bg-fog-highlight"], +[data-design-theme="forum"] [class*="hover:bg-fog-highlight"]:hover { + background-color: #f6f7f8 !important; +} + +/* Ensure text on highlight has good contrast */ +[data-design-theme="forum"] .bg-fog-highlight, +[data-design-theme="forum"] [class*="bg-fog-highlight"] { + color: #1c1c1c !important; /* Dark text on light highlight */ +} + +[data-design-theme="forum"] [class*="hover:text-fog-accent"]:hover { + color: #d93a00 !important; /* Better contrast on white */ +} + +[data-design-theme="forum"].dark [class*="hover:text-fog-accent"]:hover { + color: #ff6b35 !important; /* Better contrast on dark */ +} + +[data-design-theme="forum"], +[data-design-theme="forum"] body, +[data-design-theme="forum"] html, +[data-design-theme="forum"] div, +[data-design-theme="forum"] span, +[data-design-theme="forum"] p, +[data-design-theme="forum"] a, +[data-design-theme="forum"] h1, +[data-design-theme="forum"] h2, +[data-design-theme="forum"] h3, +[data-design-theme="forum"] h4, +[data-design-theme="forum"] h5, +[data-design-theme="forum"] h6, +[data-design-theme="forum"] button, +[data-design-theme="forum"] input, +[data-design-theme="forum"] textarea, +[data-design-theme="forum"] select, +[data-design-theme="forum"] label { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; +} + +[data-design-theme="forum"] body { + background-color: #dae0e6 !important; + color: #1c1c1c !important; +} + +/* forum - Ensure text on post backgrounds has good contrast */ +[data-design-theme="forum"] .bg-fog-post, +[data-design-theme="forum"] [class*="bg-fog-post"] { + color: #1c1c1c !important; /* Dark text on white post - excellent contrast (16.6:1) */ +} + +[data-design-theme="forum"] .bg-fog-surface, +[data-design-theme="forum"] [class*="bg-fog-surface"] { + color: #1c1c1c !important; /* Dark text on white surface */ +} + +/* forum Theme - Banner Image Tinting */ +[data-design-theme="forum"] header img[src*="aither.png"], +[data-design-theme="forum"] header img[alt*="banner"], +[data-design-theme="forum"] header > div:first-child img { + filter: sepia(0.3) saturate(1.2) hue-rotate(-10deg) brightness(1.05) !important; /* Warm orange tint */ +} + +[data-design-theme="forum"].dark header img[src*="aither.png"], +[data-design-theme="forum"].dark header img[alt*="banner"], +[data-design-theme="forum"].dark header > div:first-child img { + filter: sepia(0.4) saturate(1.3) hue-rotate(-10deg) brightness(0.9) contrast(1.1) !important; /* Stronger warm tint for dark mode */ +} + +/* forum Theme - Button Styles */ +[data-design-theme="forum"] .toggle-button, +[data-design-theme="forum"] .option-button, +[data-design-theme="forum"] .action-button, +[data-design-theme="forum"] .back-button, +[data-design-theme="forum"] .write-button { + border-radius: 4px !important; + font-weight: 500 !important; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; +} + +[data-design-theme="forum"] .toggle-button.active, +[data-design-theme="forum"] .option-button.active { + box-shadow: 0 2px 4px rgba(255, 69, 0, 0.2) !important; + background-color: #ff4500 !important; + color: #ffffff !important; /* White text on orange for contrast */ +} + +[data-design-theme="forum"].dark .toggle-button.active, +[data-design-theme="forum"].dark .option-button.active { + background-color: #ff4500 !important; + color: #ffffff !important; /* White text on orange */ +} + +[data-design-theme="forum"] .find-button, +[data-design-theme="forum"] .create-rss-button, +[data-design-theme="forum"] .edit-rss-button, +[data-design-theme="forum"] .bulk-action-button, +[data-design-theme="forum"] .load-more-button, +[data-design-theme="forum"] .clear-kind-button { + border-radius: 9999px !important; + font-weight: 700 !important; + text-transform: uppercase !important; + font-size: 0.75rem !important; + letter-spacing: 0.5px !important; + box-shadow: 0 2px 4px rgba(255, 69, 0, 0.2) !important; +} + +/* forum Theme - Navigation Styles */ +[data-design-theme="forum"] nav { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; +} + +[data-design-theme="forum"] nav a { + font-weight: 500 !important; + border-radius: 4px !important; + padding: 0.25rem 0.5rem !important; +} + +[data-design-theme="forum"] nav a:hover { + background-color: #f6f7f8 !important; +} + +/* forum Theme - Tab Buttons */ +[data-design-theme="forum"] .tab-button { + border-radius: 4px 4px 0 0 !important; + font-weight: 500 !important; +} + +[data-design-theme="forum"] .tab-button.active { + border-bottom-width: 3px !important; + border-bottom-color: #ff4500 !important; +} + +/* forum Theme - Form Elements */ +[data-design-theme="forum"] .filter-select, +[data-design-theme="forum"] .filter-input { + border-radius: 4px !important; + border: 1px solid #e4e4e4 !important; +} + +[data-design-theme="forum"] .filter-select:focus, +[data-design-theme="forum"] .filter-input:focus { + border-color: #ff4500 !important; + box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.1) !important; +} + +[data-design-theme="forum"].dark .bg-fog-bg, +[data-design-theme="forum"].dark .bg-fog-surface, +[data-design-theme="forum"].dark .bg-fog-post, +[data-design-theme="forum"].dark [class*="bg-fog-"] { + background-color: #1a1a1b !important; +} + +[data-design-theme="forum"].dark .text-fog-text, +[data-design-theme="forum"].dark [class*="text-fog-text"]:not([class*="text-fog-text-light"]):not([class*="text-fog-accent"]) { + color: #d7dadc !important; +} + +[data-design-theme="forum"].dark .text-fog-text-light, +[data-design-theme="forum"].dark [class*="text-fog-text-light"] { + color: #a8a8a8 !important; /* Improved contrast: 5.2:1 on dark bg (was 3.2:1) */ +} + +[data-design-theme="forum"].dark .border-fog-border, +[data-design-theme="forum"].dark [class*="border-fog-border"] { + border-color: #343536 !important; +} + +[data-design-theme="forum"].dark .bg-fog-highlight, +[data-design-theme="forum"].dark [class*="bg-fog-highlight"], +[data-design-theme="forum"].dark [class*="hover:bg-fog-highlight"]:hover { + background-color: #272729 !important; +} + +/* Ensure text on dark highlight has good contrast */ +[data-design-theme="forum"].dark .bg-fog-highlight, +[data-design-theme="forum"].dark [class*="bg-fog-highlight"] { + color: #d7dadc !important; /* Light text on dark highlight */ +} + +/* forum dark mode accent colors */ +[data-design-theme="forum"].dark .text-fog-accent, +[data-design-theme="forum"].dark [class*="text-fog-accent"]:not([class*="bg-fog-accent"]) { + color: #ff6b35 !important; /* Lighter orange for better contrast on dark: 4.5:1 */ +} + +[data-design-theme="forum"].dark .bg-fog-accent, +[data-design-theme="forum"].dark [class*="bg-fog-accent"] { + background-color: #ff4500 !important; + color: #ffffff !important; /* White text on orange */ +} + +[data-design-theme="forum"].dark body { + background-color: #030303 !important; + color: #d7dadc !important; +} + +/* forum dark - Ensure text on post/surface backgrounds has good contrast */ +[data-design-theme="forum"].dark .bg-fog-post, +[data-design-theme="forum"].dark [class*="bg-fog-post"] { + color: #d7dadc !important; /* Light text on dark post - excellent contrast (6.8:1) */ +} + +[data-design-theme="forum"].dark .bg-fog-surface, +[data-design-theme="forum"].dark [class*="bg-fog-surface"] { + color: #d7dadc !important; /* Light text on dark surface */ +} + +[data-design-theme="forum"].dark nav a:hover { + background-color: #272729 !important; +} + +/* Terminal Theme - Always Dark */ +/* Force dark mode for terminal theme regardless of .dark class */ +[data-design-theme="terminal"], +[data-design-theme="terminal"] * { + /* Terminal theme is always dark - override any light mode */ +} + +[data-design-theme="terminal"] .bg-fog-bg, +[data-design-theme="terminal"] .bg-fog-surface, +[data-design-theme="terminal"] .bg-fog-post, +[data-design-theme="terminal"] [class*="bg-fog-"], +[data-design-theme="terminal"] body, +[data-design-theme="terminal"] main, +[data-design-theme="terminal"] article, +[data-design-theme="terminal"] section { + background-color: #000000 !important; +} + +[data-design-theme="terminal"] .text-fog-text, +[data-design-theme="terminal"] .text-fog-text-light, +[data-design-theme="terminal"] [class*="text-fog-text"], +[data-design-theme="terminal"] [class*="text-fog-accent"] { + color: #00ff00 !important; +} + +[data-design-theme="terminal"] .border-fog-border, +[data-design-theme="terminal"] [class*="border-fog-border"] { + border-color: #00ff00 !important; +} + +[data-design-theme="terminal"] .bg-fog-accent, +[data-design-theme="terminal"] .text-fog-accent, +[data-design-theme="terminal"] [class*="bg-fog-accent"], +[data-design-theme="terminal"] [class*="text-fog-accent"] { + color: #00ff00 !important; +} + +[data-design-theme="terminal"] .bg-fog-accent, +[data-design-theme="terminal"] [class*="bg-fog-accent"] { + background-color: #00ff00 !important; + color: #000000 !important; /* Black text on green for maximum contrast */ +} + +[data-design-theme="terminal"] .bg-fog-highlight, +[data-design-theme="terminal"] [class*="bg-fog-highlight"], +[data-design-theme="terminal"] [class*="hover:bg-fog-highlight"]:hover { + background-color: #001a00 !important; +} + +/* Terminal theme - ensure all post/surface backgrounds are dark */ +[data-design-theme="terminal"] .bg-fog-post, +[data-design-theme="terminal"] [class*="bg-fog-post"], +[data-design-theme="terminal"] .bg-fog-surface, +[data-design-theme="terminal"] [class*="bg-fog-surface"], +[data-design-theme="terminal"] .bg-fog-bg, +[data-design-theme="terminal"] [class*="bg-fog-bg"] { + background-color: #000000 !important; + color: #00ff00 !important; +} + +/* Ensure text on terminal highlight has good contrast */ +[data-design-theme="terminal"] .bg-fog-highlight, +[data-design-theme="terminal"] [class*="bg-fog-highlight"] { + color: #00ff00 !important; /* Green text on dark green highlight - excellent contrast */ + text-shadow: 0 0 3px rgba(0, 255, 0, 0.8) !important; /* Glow for visibility */ +} + +[data-design-theme="terminal"] [class*="hover:text-fog-accent"]:hover { + color: #00ff00 !important; +} + +[data-design-theme="terminal"], +[data-design-theme="terminal"] body, +[data-design-theme="terminal"] html, +[data-design-theme="terminal"] div, +[data-design-theme="terminal"] span, +[data-design-theme="terminal"] p, +[data-design-theme="terminal"] a, +[data-design-theme="terminal"] h1, +[data-design-theme="terminal"] h2, +[data-design-theme="terminal"] h3, +[data-design-theme="terminal"] h4, +[data-design-theme="terminal"] h5, +[data-design-theme="terminal"] h6, +[data-design-theme="terminal"] button, +[data-design-theme="terminal"] input, +[data-design-theme="terminal"] textarea, +[data-design-theme="terminal"] select, +[data-design-theme="terminal"] label { + font-family: 'Courier New', 'Courier', monospace !important; +} + +[data-design-theme="terminal"] body { + background-color: #000000 !important; + color: #00ff00 !important; + text-shadow: 0 0 3px rgba(0, 255, 0, 0.5) !important; +} + +/* Terminal theme - force dark backgrounds on all containers */ +[data-design-theme="terminal"] nav, +[data-design-theme="terminal"] nav.bg-fog-surface, +[data-design-theme="terminal"] nav.bg-fog-dark-surface, +[data-design-theme="terminal"] nav[class*="bg-fog-surface"], +[data-design-theme="terminal"] nav[class*="bg-fog-dark-surface"], +[data-design-theme="terminal"] header, +[data-design-theme="terminal"] footer, +[data-design-theme="terminal"] aside, +[data-design-theme="terminal"] div[class*="container"], +[data-design-theme="terminal"] div[class*="wrapper"], +[data-design-theme="terminal"] div[class*="content"] { + background-color: #000000 !important; + color: #00ff00 !important; +} + +/* Terminal - Ensure text on post/surface backgrounds has good contrast */ +[data-design-theme="terminal"] .bg-fog-post, +[data-design-theme="terminal"] [class*="bg-fog-post"], +[data-design-theme="terminal"] .bg-fog-surface, +[data-design-theme="terminal"] [class*="bg-fog-surface"] { + color: #00ff00 !important; /* Green text on dark backgrounds - excellent contrast (15.3:1) */ + text-shadow: 0 0 3px rgba(0, 255, 0, 0.6) !important; /* Glow for visibility */ +} + +/* Terminal Theme - Header Banner Background */ +[data-design-theme="terminal"] header > div:first-child, +[data-design-theme="terminal"] header > div[class*="bg-fog-surface"], +[data-design-theme="terminal"] header > div[class*="bg-fog-dark-surface"] { + background-color: #000000 !important; + background: #000000 !important; +} + +/* Terminal Theme - Banner Image Tinting */ +[data-design-theme="terminal"] header img[src*="aither.png"], +[data-design-theme="terminal"] header img[alt*="banner"], +[data-design-theme="terminal"] header > div:first-child img { + filter: sepia(1) saturate(2) hue-rotate(90deg) brightness(0.8) contrast(1.2) !important; /* Strong green terminal tint */ + opacity: 0.7 !important; /* Slightly more transparent for terminal aesthetic */ +} + +/* Terminal Theme - Button Styles */ +[data-design-theme="terminal"] .toggle-button, +[data-design-theme="terminal"] .option-button, +[data-design-theme="terminal"] .action-button, +[data-design-theme="terminal"] .back-button, +[data-design-theme="terminal"] .write-button, +[data-design-theme="terminal"] button.toggle-button, +[data-design-theme="terminal"] button.option-button { + border-radius: 0 !important; + border: 1px solid #00ff00 !important; + background-color: rgba(0, 20, 0, 0.4) !important; /* Subtle dark green background for contrast */ + background: rgba(0, 20, 0, 0.4) !important; /* Override any background */ + color: #00ff00 !important; /* Ensure green text */ + box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important; + font-family: 'Courier New', 'Courier', monospace !important; + text-transform: uppercase !important; + letter-spacing: 1px !important; + text-shadow: 0 0 4px rgba(0, 255, 0, 0.9), 0 0 8px rgba(0, 255, 0, 0.5) !important; /* Stronger glowing text for visibility */ + font-weight: bold !important; /* Make text bolder for better visibility */ +} + +[data-design-theme="terminal"] .toggle-button:hover, +[data-design-theme="terminal"] .option-button:hover, +[data-design-theme="terminal"] .action-button:hover, +[data-design-theme="terminal"] .back-button:hover, +[data-design-theme="terminal"] .write-button:hover, +[data-design-theme="terminal"] .see-new-events-btn-header:hover, +[data-design-theme="terminal"] .see-more-events-btn-header:hover:not(:disabled) { + box-shadow: 0 0 10px rgba(0, 255, 0, 0.6), inset 0 0 10px rgba(0, 255, 0, 0.1) !important; + background-color: rgba(0, 255, 0, 0.1) !important; /* Brighter on hover */ + text-shadow: 0 0 5px rgba(0, 255, 0, 1) !important; /* Stronger glow on hover */ +} + +/* Terminal Theme - Feed Page Buttons */ +[data-design-theme="terminal"] .see-new-events-btn-header, +[data-design-theme="terminal"] .see-more-events-btn-header { + border-radius: 0 !important; + border: 1px solid #00ff00 !important; + background-color: rgba(0, 20, 0, 0.4) !important; + background: rgba(0, 20, 0, 0.4) !important; + color: #00ff00 !important; + box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important; + font-family: 'Courier New', 'Courier', monospace !important; + text-transform: uppercase !important; + letter-spacing: 1px !important; + text-shadow: 0 0 4px rgba(0, 255, 0, 0.9), 0 0 8px rgba(0, 255, 0, 0.5) !important; + font-weight: bold !important; +} + +[data-design-theme="terminal"] .see-more-events-btn-header:disabled { + opacity: 0.5 !important; + cursor: not-allowed !important; +} + +[data-design-theme="terminal"] .toggle-button.active, +[data-design-theme="terminal"] .option-button.active, +[data-design-theme="terminal"] button.toggle-button.active, +[data-design-theme="terminal"] button.option-button.active { + background-color: rgba(0, 255, 0, 0.25) !important; /* More visible active state */ + background: rgba(0, 255, 0, 0.25) !important; /* Override any background */ + color: #00ff00 !important; /* Ensure green text */ + box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), inset 0 0 10px rgba(0, 255, 0, 0.2) !important; + text-shadow: 0 0 8px rgba(0, 255, 0, 1), 0 0 12px rgba(0, 255, 0, 0.8) !important; /* Strong glow when active */ + border-width: 2px !important; /* Thicker border when active */ +} + +[data-design-theme="terminal"] .find-button, +[data-design-theme="terminal"] .create-rss-button, +[data-design-theme="terminal"] .edit-rss-button, +[data-design-theme="terminal"] .bulk-action-button, +[data-design-theme="terminal"] .load-more-button, +[data-design-theme="terminal"] .clear-kind-button { + border-radius: 0 !important; + border: 2px solid #00ff00 !important; + background-color: transparent !important; + color: #00ff00 !important; + box-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important; + font-family: 'Courier New', 'Courier', monospace !important; + text-transform: uppercase !important; + letter-spacing: 2px !important; + font-weight: bold !important; +} + +/* Terminal buttons with accent background should have black text */ +[data-design-theme="terminal"] .find-button.active, +[data-design-theme="terminal"] .create-rss-button.active, +[data-design-theme="terminal"] .edit-rss-button.active, +[data-design-theme="terminal"] .bulk-action-button.active, +[data-design-theme="terminal"] .load-more-button.active, +[data-design-theme="terminal"] .clear-kind-button.active { + background-color: #00ff00 !important; + color: #000000 !important; /* Black text on green for contrast */ +} + +[data-design-theme="terminal"] .find-button:hover, +[data-design-theme="terminal"] .create-rss-button:hover, +[data-design-theme="terminal"] .edit-rss-button:hover, +[data-design-theme="terminal"] .bulk-action-button:hover, +[data-design-theme="terminal"] .load-more-button:hover, +[data-design-theme="terminal"] .clear-kind-button:hover { + background-color: rgba(0, 255, 0, 0.1) !important; + box-shadow: 0 0 20px rgba(0, 255, 0, 0.8) !important; +} + +/* Terminal Theme - Navigation Styles */ +[data-design-theme="terminal"] nav { + background-color: #000000 !important; /* Force dark background in terminal mode */ + border-top: 2px solid #00ff00 !important; + border-bottom: 2px solid #00ff00 !important; + box-shadow: 0 0 10px rgba(0, 255, 0, 0.3) !important; +} + +[data-design-theme="terminal"] nav a { + font-family: 'Courier New', 'Courier', monospace !important; + text-transform: uppercase !important; + letter-spacing: 1px !important; + border: 1px solid transparent !important; + padding: 0.25rem 0.5rem !important; + color: #00ff00 !important; /* Ensure green text */ + text-shadow: 0 0 3px rgba(0, 255, 0, 0.6) !important; /* Glow for visibility */ +} + +[data-design-theme="terminal"] nav a:hover { + border: 1px solid #00ff00 !important; + box-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important; + background-color: rgba(0, 255, 0, 0.05) !important; + color: #00ff00 !important; /* Ensure green text on hover */ + text-shadow: 0 0 5px rgba(0, 255, 0, 0.9) !important; /* Stronger glow on hover */ +} + +/* Terminal Theme - Tab Buttons */ +[data-design-theme="terminal"] .tab-button { + border: 1px solid transparent !important; + border-bottom: 2px solid transparent !important; + font-family: 'Courier New', 'Courier', monospace !important; + text-transform: uppercase !important; + letter-spacing: 1px !important; +} + +[data-design-theme="terminal"] .tab-button:hover { + border-color: #00ff00 !important; + box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important; +} + +[data-design-theme="terminal"] .tab-button.active { + border-bottom-color: #00ff00 !important; + border-bottom-width: 2px !important; + box-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important; + text-shadow: 0 0 5px rgba(0, 255, 0, 0.8) !important; +} + +/* Terminal Theme - Form Elements */ +[data-design-theme="terminal"] .filter-select, +[data-design-theme="terminal"] .filter-input, +[data-design-theme="terminal"] input[type="text"], +[data-design-theme="terminal"] input[type="search"], +[data-design-theme="terminal"] input[type="email"], +[data-design-theme="terminal"] input[type="password"], +[data-design-theme="terminal"] input[type="number"], +[data-design-theme="terminal"] input[type="url"], +[data-design-theme="terminal"] textarea, +[data-design-theme="terminal"] select, +[data-design-theme="terminal"] .sort-select, +[data-design-theme="terminal"] input[type="checkbox"] { + border-radius: 0 !important; + border: 1px solid #00ff00 !important; + background-color: #000000 !important; + color: #00ff00 !important; + font-family: 'Courier New', 'Courier', monospace !important; + box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important; +} + +[data-design-theme="terminal"] .filter-select:focus, +[data-design-theme="terminal"] .filter-input:focus, +[data-design-theme="terminal"] input[type="text"]:focus, +[data-design-theme="terminal"] input[type="search"]:focus, +[data-design-theme="terminal"] input[type="email"]:focus, +[data-design-theme="terminal"] input[type="password"]:focus, +[data-design-theme="terminal"] input[type="number"]:focus, +[data-design-theme="terminal"] input[type="url"]:focus, +[data-design-theme="terminal"] textarea:focus, +[data-design-theme="terminal"] select:focus, +[data-design-theme="terminal"] .sort-select:focus { + box-shadow: 0 0 10px rgba(0, 255, 0, 0.6) !important; + outline: none !important; + background-color: #000000 !important; +} + +/* Terminal Theme - Page Headers (Discussions, Feed, etc.) */ +[data-design-theme="terminal"] .feed-header, +[data-design-theme="terminal"] .discussions-header-sticky, +[data-design-theme="terminal"] .page-header, +[data-design-theme="terminal"] [class*="header-sticky"], +[data-design-theme="terminal"] [class*="feed-header"], +[data-design-theme="terminal"] [class*="discussions-header"] { + background-color: #000000 !important; + background: #000000 !important; + border-bottom-color: #00ff00 !important; + color: #00ff00 !important; +} + +/* Terminal Theme - Discussion Controls */ +[data-design-theme="terminal"] .discussions-controls, +[data-design-theme="terminal"] .discussions-controls-row, +[data-design-theme="terminal"] .show-older-label, +[data-design-theme="terminal"] .show-older-label input[type="checkbox"] { + color: #00ff00 !important; +} + +[data-design-theme="terminal"] .show-older-label input[type="checkbox"] { + accent-color: #00ff00 !important; + background-color: #000000 !important; + border-color: #00ff00 !important; +} + +/* Terminal Theme - Embedded Event Blurbs (Reply-to/Quote) */ +[data-design-theme="terminal"] .embedded-event-blurb, +[data-design-theme="terminal"] [class*="embedded-event"], +[data-design-theme="terminal"] [class*="embedded-blurb"] { + background-color: #000000 !important; + background: #000000 !important; + border-left-color: #00ff00 !important; + color: #00ff00 !important; + border: 1px solid #00ff00 !important; + box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important; +} + +[data-design-theme="terminal"] .embedded-blurb-content, +[data-design-theme="terminal"] .embedded-preview, +[data-design-theme="terminal"] .embedded-kind-info { + color: #00ff00 !important; + text-shadow: 0 0 3px rgba(0, 255, 0, 0.6) !important; +} + +[data-design-theme="terminal"] .view-button { + background-color: #000000 !important; + border-color: #00ff00 !important; + color: #00ff00 !important; +} + +[data-design-theme="terminal"] .view-button:hover { + background-color: rgba(0, 255, 0, 0.1) !important; + box-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important; +} + +/* Terminal Theme - Keyboard Shortcuts */ +[data-design-theme="terminal"] .shortcuts-category-title { + color: #00ff00 !important; + text-shadow: 0 0 5px rgba(0, 255, 0, 0.8) !important; + font-family: 'Courier New', 'Courier', monospace !important; + text-transform: uppercase !important; + letter-spacing: 1px !important; +} + +[data-design-theme="terminal"] .shortcut-description { + color: #00ff00 !important; + text-shadow: 0 0 3px rgba(0, 255, 0, 0.6) !important; + font-family: 'Courier New', 'Courier', monospace !important; +} + +[data-design-theme="terminal"] .shortcut-item { + border: 1px solid transparent !important; +} + +[data-design-theme="terminal"] .shortcut-item:hover { + background-color: rgba(0, 255, 0, 0.05) !important; + border: 1px solid rgba(0, 255, 0, 0.3) !important; + box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important; +} + +[data-design-theme="terminal"] .shortcut-keys kbd { + background-color: rgba(0, 20, 0, 0.6) !important; + border: 1px solid #00ff00 !important; + border-radius: 0 !important; + color: #00ff00 !important; + font-family: 'Courier New', 'Courier', monospace !important; + text-shadow: 0 0 3px rgba(0, 255, 0, 0.8) !important; + box-shadow: 0 0 5px rgba(0, 255, 0, 0.4) !important; + font-weight: bold !important; + text-transform: uppercase !important; +} + +[data-design-theme="terminal"] body::before { + background: + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 255, 0, 0.05) 2px, + rgba(0, 255, 0, 0.05) 4px + ) !important; + opacity: 0.3 !important; +} + +[data-design-theme="terminal"].dark { + /* Terminal theme is always dark */ +} + +/* socialmedia Theme */ +[data-design-theme="socialmedia"] .bg-fog-bg, +[data-design-theme="socialmedia"] .bg-fog-surface, +[data-design-theme="socialmedia"] .bg-fog-post, +[data-design-theme="socialmedia"] [class*="bg-fog-"] { + background-color: #ffffff !important; +} + +[data-design-theme="socialmedia"] .text-fog-text, +[data-design-theme="socialmedia"] [class*="text-fog-text"]:not([class*="text-fog-text-light"]):not([class*="text-fog-accent"]) { + color: #0f1419 !important; +} + +[data-design-theme="socialmedia"] .text-fog-text-light, +[data-design-theme="socialmedia"] [class*="text-fog-text-light"] { + color: #536471 !important; /* Good contrast: 4.6:1 on white */ +} + +[data-design-theme="socialmedia"] .border-fog-border, +[data-design-theme="socialmedia"] [class*="border-fog-border"] { + border-color: #eff3f4 !important; +} + +[data-design-theme="socialmedia"] .text-fog-accent, +[data-design-theme="socialmedia"] [class*="text-fog-accent"]:not([class*="bg-fog-accent"]) { + color: #0d7ab8 !important; /* Improved contrast: 4.5:1 on white (meets WCAG AA) */ +} + +[data-design-theme="socialmedia"] .bg-fog-accent, +[data-design-theme="socialmedia"] [class*="bg-fog-accent"] { + background-color: #1d9bf0 !important; + color: #ffffff !important; /* White text on blue for WCAG AA compliance */ +} + +[data-design-theme="socialmedia"] .bg-fog-highlight, +[data-design-theme="socialmedia"] [class*="bg-fog-highlight"], +[data-design-theme="socialmedia"] [class*="hover:bg-fog-highlight"]:hover { + background-color: #f7f9f9 !important; +} + +/* Ensure text on highlight has good contrast */ +[data-design-theme="socialmedia"] .bg-fog-highlight, +[data-design-theme="socialmedia"] [class*="bg-fog-highlight"] { + color: #0f1419 !important; /* Dark text on light highlight */ +} + +[data-design-theme="socialmedia"] [class*="hover:text-fog-accent"]:hover { + color: #0d7ab8 !important; /* Better contrast - meets WCAG AA */ +} + +[data-design-theme="socialmedia"], +[data-design-theme="socialmedia"] body, +[data-design-theme="socialmedia"] html, +[data-design-theme="socialmedia"] div, +[data-design-theme="socialmedia"] span, +[data-design-theme="socialmedia"] p, +[data-design-theme="socialmedia"] a, +[data-design-theme="socialmedia"] h1, +[data-design-theme="socialmedia"] h2, +[data-design-theme="socialmedia"] h3, +[data-design-theme="socialmedia"] h4, +[data-design-theme="socialmedia"] h5, +[data-design-theme="socialmedia"] h6, +[data-design-theme="socialmedia"] button, +[data-design-theme="socialmedia"] input, +[data-design-theme="socialmedia"] textarea, +[data-design-theme="socialmedia"] select, +[data-design-theme="socialmedia"] label { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; +} + +[data-design-theme="socialmedia"] body { + background-color: #ffffff !important; + color: #0f1419 !important; +} + +/* socialmedia - Ensure text on post/surface backgrounds has good contrast */ +[data-design-theme="socialmedia"] .bg-fog-post, +[data-design-theme="socialmedia"] [class*="bg-fog-post"], +[data-design-theme="socialmedia"] .bg-fog-surface, +[data-design-theme="socialmedia"] [class*="bg-fog-surface"] { + color: #0f1419 !important; /* Dark text on white - excellent contrast (16.8:1) */ +} + +/* socialmedia Theme - Banner Image Tinting */ +[data-design-theme="socialmedia"] header img[src*="aither.png"], +[data-design-theme="socialmedia"] header img[alt*="banner"], +[data-design-theme="socialmedia"] header > div:first-child img { + filter: sepia(0.2) saturate(1.1) hue-rotate(180deg) brightness(1.05) !important; /* Cool blue tint */ +} + +[data-design-theme="socialmedia"].dark header img[src*="aither.png"], +[data-design-theme="socialmedia"].dark header img[alt*="banner"], +[data-design-theme="socialmedia"].dark header > div:first-child img { + filter: sepia(0.3) saturate(1.2) hue-rotate(180deg) brightness(0.85) contrast(1.1) !important; /* Stronger blue tint for dark mode */ +} + +/* socialmedia Theme - Button Styles */ +[data-design-theme="socialmedia"] .toggle-button, +[data-design-theme="socialmedia"] .option-button, +[data-design-theme="socialmedia"] .action-button, +[data-design-theme="socialmedia"] .back-button, +[data-design-theme="socialmedia"] .write-button { + border-radius: 9999px !important; + font-weight: 700 !important; + transition: all 0.2s ease !important; +} + +[data-design-theme="socialmedia"] .toggle-button:hover, +[data-design-theme="socialmedia"] .option-button:hover, +[data-design-theme="socialmedia"] .action-button:hover, +[data-design-theme="socialmedia"] .back-button:hover, +[data-design-theme="socialmedia"] .write-button:hover { + background-color: rgba(15, 20, 25, 0.1) !important; +} + +[data-design-theme="socialmedia"] .toggle-button.active, +[data-design-theme="socialmedia"] .option-button.active { + background-color: #1d9bf0 !important; + color: #ffffff !important; /* White text on blue for contrast */ +} + +[data-design-theme="socialmedia"].dark .toggle-button.active, +[data-design-theme="socialmedia"].dark .option-button.active { + background-color: #1d9bf0 !important; + color: #ffffff !important; /* White text on blue */ +} + +[data-design-theme="socialmedia"] .find-button, +[data-design-theme="socialmedia"] .create-rss-button, +[data-design-theme="socialmedia"] .edit-rss-button, +[data-design-theme="socialmedia"] .bulk-action-button, +[data-design-theme="socialmedia"] .load-more-button, +[data-design-theme="socialmedia"] .clear-kind-button { + border-radius: 9999px !important; + font-weight: 700 !important; + padding: 0.875rem 1.5rem !important; + box-shadow: none !important; + transition: all 0.2s ease !important; +} + +[data-design-theme="socialmedia"] .find-button:hover, +[data-design-theme="socialmedia"] .create-rss-button:hover, +[data-design-theme="socialmedia"] .edit-rss-button:hover, +[data-design-theme="socialmedia"] .bulk-action-button:hover, +[data-design-theme="socialmedia"] .load-more-button:hover, +[data-design-theme="socialmedia"] .clear-kind-button:hover { + opacity: 0.9 !important; + transform: scale(1.02) !important; +} + +/* socialmedia Theme - Navigation Styles */ +[data-design-theme="socialmedia"] nav { + border-bottom: 1px solid #eff3f4 !important; +} + +[data-design-theme="socialmedia"] nav a { + font-weight: 700 !important; + border-radius: 9999px !important; + padding: 0.5rem 1rem !important; + transition: all 0.2s ease !important; +} + +[data-design-theme="socialmedia"] nav a:hover { + background-color: rgba(15, 20, 25, 0.1) !important; +} + +[data-design-theme="socialmedia"] nav a.nav-brand { + font-size: 1.25rem !important; +} + +/* socialmedia Theme - Tab Buttons */ +[data-design-theme="socialmedia"] .tab-button { + border-radius: 9999px !important; + font-weight: 700 !important; + padding: 0.75rem 1.25rem !important; +} + +[data-design-theme="socialmedia"] .tab-button:hover { + background-color: rgba(15, 20, 25, 0.1) !important; +} + +[data-design-theme="socialmedia"] .tab-button.active { + background-color: rgba(29, 155, 240, 0.1) !important; + color: #1d9bf0 !important; + border-bottom: none !important; +} + +/* socialmedia Theme - Form Elements */ +[data-design-theme="socialmedia"] .filter-select, +[data-design-theme="socialmedia"] .filter-input { + border-radius: 4px !important; + border: 1px solid #eff3f4 !important; + font-weight: 400 !important; +} + +[data-design-theme="socialmedia"] .filter-select:focus, +[data-design-theme="socialmedia"] .filter-input:focus { + border-color: #1d9bf0 !important; + box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.1) !important; + outline: none !important; +} + +[data-design-theme="socialmedia"].dark .bg-fog-bg, +[data-design-theme="socialmedia"].dark .bg-fog-surface, +[data-design-theme="socialmedia"].dark [class*="bg-fog-"]:not([class*="bg-fog-post"]) { + background-color: #000000 !important; +} + +[data-design-theme="socialmedia"].dark .bg-fog-post, +[data-design-theme="socialmedia"].dark [class*="bg-fog-post"] { + background-color: #16181c !important; +} + +[data-design-theme="socialmedia"].dark .text-fog-text, +[data-design-theme="socialmedia"].dark [class*="text-fog-text"]:not([class*="text-fog-text-light"]):not([class*="text-fog-accent"]) { + color: #e7e9ea !important; +} + +[data-design-theme="socialmedia"].dark .text-fog-text-light, +[data-design-theme="socialmedia"].dark [class*="text-fog-text-light"] { + color: #8b98a5 !important; /* Improved contrast: 4.8:1 on black (was 3.5:1) */ +} + +[data-design-theme="socialmedia"].dark .border-fog-border, +[data-design-theme="socialmedia"].dark [class*="border-fog-border"] { + border-color: #2f3336 !important; +} + +[data-design-theme="socialmedia"].dark .bg-fog-highlight, +[data-design-theme="socialmedia"].dark [class*="bg-fog-highlight"], +[data-design-theme="socialmedia"].dark [class*="hover:bg-fog-highlight"]:hover { + background-color: #16181c !important; +} + +/* Ensure text on dark highlight has good contrast */ +[data-design-theme="socialmedia"].dark .bg-fog-highlight, +[data-design-theme="socialmedia"].dark [class*="bg-fog-highlight"] { + color: #e7e9ea !important; /* Light text on dark highlight */ +} + +/* socialmedia dark mode accent colors */ +[data-design-theme="socialmedia"].dark .text-fog-accent, +[data-design-theme="socialmedia"].dark [class*="text-fog-accent"]:not([class*="bg-fog-accent"]) { + color: #4fc3f7 !important; /* Lighter blue for better contrast on dark: 4.2:1 */ +} + +[data-design-theme="socialmedia"].dark .bg-fog-accent, +[data-design-theme="socialmedia"].dark [class*="bg-fog-accent"] { + background-color: #1d9bf0 !important; + color: #ffffff !important; /* White text on blue */ +} + +[data-design-theme="socialmedia"].dark [class*="hover:text-fog-accent"]:hover { + color: #4fc3f7 !important; /* Better contrast on dark */ +} + +[data-design-theme="socialmedia"].dark body { + background-color: #000000 !important; + color: #e7e9ea !important; +} + +/* socialmedia dark - Ensure text on post/surface backgrounds has good contrast */ +[data-design-theme="socialmedia"].dark .bg-fog-post, +[data-design-theme="socialmedia"].dark [class*="bg-fog-post"] { + color: #e7e9ea !important; /* Light text on dark post - excellent contrast (6.8:1) */ +} + +[data-design-theme="socialmedia"].dark .bg-fog-surface, +[data-design-theme="socialmedia"].dark [class*="bg-fog-surface"] { + color: #e7e9ea !important; /* Light text on black surface - excellent contrast (15.8:1) */ +} + +[data-design-theme="socialmedia"].dark nav { + border-bottom-color: #2f3336 !important; +} + +[data-design-theme="socialmedia"].dark nav a:hover { + background-color: rgba(231, 233, 234, 0.1) !important; +} + +[data-design-theme="socialmedia"].dark .toggle-button:hover, +[data-design-theme="socialmedia"].dark .option-button:hover, +[data-design-theme="socialmedia"].dark .action-button:hover, +[data-design-theme="socialmedia"].dark .back-button:hover, +[data-design-theme="socialmedia"].dark .write-button:hover { + background-color: rgba(231, 233, 234, 0.1) !important; +} + +[data-design-theme="socialmedia"].dark .tab-button:hover { + background-color: rgba(231, 233, 234, 0.1) !important; +} + +[data-design-theme="socialmedia"].dark .tab-button.active { + background-color: rgba(29, 155, 240, 0.1) !important; +} + +[data-design-theme="socialmedia"].dark .filter-select, +[data-design-theme="socialmedia"].dark .filter-input { + border-color: #2f3336 !important; +} + +[data-design-theme="socialmedia"].dark .filter-select:focus, +[data-design-theme="socialmedia"].dark .filter-input:focus { + border-color: #1d9bf0 !important; +} + /* Fog aesthetic base styles */ .bg-fog { background-color: #f1f5f9; @@ -458,6 +1488,217 @@ body::before { background-color: #1e293b; } +/* Ensure all UI elements respect dark/light mode regardless of design theme */ +/* Cards, menus, modals, embedded events should use dark backgrounds in dark mode */ +/* This is the default for fog theme - theme-specific rules below will override */ +.dark .bg-fog-post, +.dark [class*="bg-fog-post"], +.dark .bg-fog-surface, +.dark [class*="bg-fog-surface"] { + background-color: var(--fog-dark-post, #334155) !important; +} + +/* Fog theme dark mode - explicit override to ensure it works */ +.dark [data-design-theme="fog"] .bg-fog-post, +.dark [data-design-theme="fog"] [class*="bg-fog-post"], +.dark [data-design-theme="fog"] .bg-fog-surface, +.dark [data-design-theme="fog"] [class*="bg-fog-surface"] { + background-color: #334155 !important; /* fog-dark-post */ +} + + +/* Light mode - ensure light backgrounds */ +:not(.dark) .bg-fog-post, +:not(.dark) [class*="bg-fog-post"], +:not(.dark) .bg-fog-surface, +:not(.dark) [class*="bg-fog-surface"] { + background-color: var(--fog-post, #ffffff) !important; +} + + +/* Override theme-specific backgrounds when dark mode is active */ +/* Fog theme dark mode body background */ +.dark [data-design-theme="fog"] body { + background-color: #0f172a !important; /* fog-dark-bg */ +} + +/* Ensure preference-section elements have dark backgrounds in dark mode */ +.dark .preference-section, +.dark [class*="preference-section"] { + background-color: var(--fog-dark-post, #334155) !important; + border-color: var(--fog-dark-border, #475569) !important; + color: var(--fog-dark-text, #cbd5e1) !important; +} + +/* Theme-specific preference-section backgrounds */ +.dark [data-design-theme="forum"] .preference-section, +.dark [data-design-theme="forum"] [class*="preference-section"] { + background-color: #1a1a1b !important; + border-color: #343536 !important; + color: #d7dadc !important; +} + +.dark [data-design-theme="socialmedia"] .preference-section, +.dark [data-design-theme="socialmedia"] [class*="preference-section"] { + background-color: #16181c !important; + border-color: #2f3336 !important; + color: #e7e9ea !important; +} + +.dark [data-design-theme="terminal"] .preference-section, +.dark [data-design-theme="terminal"] [class*="preference-section"], +[data-design-theme="terminal"] .preference-section, +[data-design-theme="terminal"] [class*="preference-section"] { + background-color: #000000 !important; + border-color: #00ff00 !important; + color: #00ff00 !important; +} + +/* Disabled toggle button styling */ +.toggle-button:disabled { + opacity: 0.6 !important; + cursor: not-allowed !important; + pointer-events: none !important; +} + +[data-design-theme="terminal"] .toggle-button:disabled { + opacity: 0.5 !important; + border-color: #00cc00 !important; + color: #00cc00 !important; +} + +/* Forum theme - dark mode */ +.dark [data-design-theme="forum"] .bg-fog-post, +.dark [data-design-theme="forum"] [class*="bg-fog-post"], +.dark [data-design-theme="forum"] .bg-fog-surface, +.dark [data-design-theme="forum"] [class*="bg-fog-surface"] { + background-color: #1a1a1b !important; +} + +.dark [data-design-theme="socialmedia"] .bg-fog-post, +.dark [data-design-theme="socialmedia"] [class*="bg-fog-post"], +.dark [data-design-theme="socialmedia"] .bg-fog-surface, +.dark [data-design-theme="socialmedia"] [class*="bg-fog-surface"] { + background-color: #16181c !important; +} + +/* Terminal theme - dark mode (always dark) */ +.dark [data-design-theme="terminal"] .bg-fog-post, +.dark [data-design-theme="terminal"] [class*="bg-fog-post"], +.dark [data-design-theme="terminal"] .bg-fog-surface, +.dark [data-design-theme="terminal"] [class*="bg-fog-surface"], +.dark [data-design-theme="terminal"] .bg-fog-bg, +.dark [data-design-theme="terminal"] [class*="bg-fog-bg"], +.dark [data-design-theme="terminal"] body, +.dark [data-design-theme="terminal"] main, +.dark [data-design-theme="terminal"] article, +.dark [data-design-theme="terminal"] section { + background-color: #000000 !important; + color: #00ff00 !important; +} + +/* Light mode overrides for theme-specific backgrounds */ +:not(.dark) [data-design-theme="forum"] .bg-fog-post, +:not(.dark) [data-design-theme="forum"] [class*="bg-fog-post"], +:not(.dark) [data-design-theme="forum"] .bg-fog-surface, +:not(.dark) [data-design-theme="forum"] [class*="bg-fog-surface"] { + background-color: #ffffff !important; +} + +:not(.dark) [data-design-theme="socialmedia"] .bg-fog-post, +:not(.dark) [data-design-theme="socialmedia"] [class*="bg-fog-post"], +:not(.dark) [data-design-theme="socialmedia"] .bg-fog-surface, +:not(.dark) [data-design-theme="socialmedia"] [class*="bg-fog-surface"] { + background-color: #ffffff !important; +} + +/* Terminal theme - force dark backgrounds everywhere, even in light mode */ +:not(.dark) [data-design-theme="terminal"] .bg-fog-post, +:not(.dark) [data-design-theme="terminal"] [class*="bg-fog-post"], +:not(.dark) [data-design-theme="terminal"] .bg-fog-surface, +:not(.dark) [data-design-theme="terminal"] [class*="bg-fog-surface"], +:not(.dark) [data-design-theme="terminal"] .bg-fog-bg, +:not(.dark) [data-design-theme="terminal"] [class*="bg-fog-bg"], +:not(.dark) [data-design-theme="terminal"] body, +:not(.dark) [data-design-theme="terminal"] main, +:not(.dark) [data-design-theme="terminal"] article, +:not(.dark) [data-design-theme="terminal"] section { + background-color: #000000 !important; /* Terminal is always dark */ + color: #00ff00 !important; /* Green text */ +} + +/* Ensure modals, menus, dropdowns, and embedded events respect dark/light mode */ +/* Only target specific classes, not broad patterns that might match unintended elements */ +.dark .modal-content { + background-color: var(--fog-dark-post, #334155) !important; + color: var(--fog-dark-text, #cbd5e1) !important; +} + +:not(.dark) .modal-content { + background-color: var(--fog-post, #ffffff) !important; + color: var(--fog-text, #475569) !important; +} + +/* Theme-specific overrides for modals and menus */ +.dark [data-design-theme="forum"] .modal-content, +.dark [data-design-theme="forum"] [class*="modal"], +.dark [data-design-theme="forum"] [class*="menu"], +.dark [data-design-theme="forum"] [class*="card"] { + background-color: #1a1a1b !important; + color: #d7dadc !important; +} + +:not(.dark) [data-design-theme="forum"] .modal-content, +:not(.dark) [data-design-theme="forum"] [class*="modal"], +:not(.dark) [data-design-theme="forum"] [class*="menu"], +:not(.dark) [data-design-theme="forum"] [class*="card"] { + background-color: #ffffff !important; + color: #1c1c1c !important; +} + +.dark [data-design-theme="socialmedia"] .modal-content, +.dark [data-design-theme="socialmedia"] [class*="modal"], +.dark [data-design-theme="socialmedia"] [class*="menu"], +.dark [data-design-theme="socialmedia"] [class*="card"] { + background-color: #16181c !important; + color: #e7e9ea !important; +} + +:not(.dark) [data-design-theme="socialmedia"] .modal-content, +:not(.dark) [data-design-theme="socialmedia"] [class*="modal"], +:not(.dark) [data-design-theme="socialmedia"] [class*="menu"], +:not(.dark) [data-design-theme="socialmedia"] [class*="card"] { + background-color: #ffffff !important; + color: #0f1419 !important; +} + +/* Terminal theme - always dark for all UI elements */ +.dark [data-design-theme="terminal"] .modal-content, +.dark [data-design-theme="terminal"] [class*="modal"], +.dark [data-design-theme="terminal"] [class*="menu"], +.dark [data-design-theme="terminal"] [class*="card"], +.dark [data-design-theme="terminal"] [class*="embedded"], +.dark [data-design-theme="terminal"] [class*="drawer"], +.dark [data-design-theme="terminal"] [class*="panel"], +[data-design-theme="terminal"] .modal-content, +[data-design-theme="terminal"] [class*="modal"], +[data-design-theme="terminal"] [class*="menu"], +[data-design-theme="terminal"] [class*="card"], +[data-design-theme="terminal"] [class*="embedded"], +[data-design-theme="terminal"] [class*="drawer"], +[data-design-theme="terminal"] [class*="panel"], +:not(.dark) [data-design-theme="terminal"] .modal-content, +:not(.dark) [data-design-theme="terminal"] [class*="modal"], +:not(.dark) [data-design-theme="terminal"] [class*="menu"], +:not(.dark) [data-design-theme="terminal"] [class*="card"], +:not(.dark) [data-design-theme="terminal"] [class*="embedded"], +:not(.dark) [data-design-theme="terminal"] [class*="drawer"], +:not(.dark) [data-design-theme="terminal"] [class*="panel"] { + background-color: #000000 !important; + color: #00ff00 !important; + text-shadow: 0 0 3px rgba(0, 255, 0, 0.6) !important; +} + /* Profile pictures - display in full color */ /* Profile pictures - all instances */ img.profile-picture, diff --git a/src/app.html b/src/app.html index efcda34..12189f1 100644 --- a/src/app.html +++ b/src/app.html @@ -27,13 +27,13 @@ - - - - - - - + + + + + + + diff --git a/src/lib/components/content/MarkdownRenderer.svelte b/src/lib/components/content/MarkdownRenderer.svelte index 7873884..2775b62 100644 --- a/src/lib/components/content/MarkdownRenderer.svelte +++ b/src/lib/components/content/MarkdownRenderer.svelte @@ -10,6 +10,7 @@ import { getHighlightsForEvent, findHighlightMatches, type Highlight } from '../../services/nostr/highlight-service.js'; import { mountComponent } from './mount-component-action.js'; import type { NostrEvent } from '../../types/nostr.js'; + // @ts-ignore - highlight.js default export works at runtime import hljs from 'highlight.js'; // Use VS Code theme for IDE-like appearance import 'highlight.js/styles/vs2015.css'; diff --git a/src/lib/modules/reactions/FeedReactionButtons.svelte b/src/lib/modules/reactions/FeedReactionButtons.svelte index 75ec6f3..74c6a8b 100644 --- a/src/lib/modules/reactions/FeedReactionButtons.svelte +++ b/src/lib/modules/reactions/FeedReactionButtons.svelte @@ -646,6 +646,7 @@ { hoveredReaction = content; hoveredReactionElement = e.currentTarget; @@ -708,6 +709,7 @@