/* =============================== 🌎 Global Browser Default Styles ================================ */ /* Default theme (fallback when no preference is detected) */ :root { /* Base theme variables - these will be overridden by JavaScript */ --base-hue: 0; --theme-gradient: linear-gradient(135deg, #444, #bbb); --color-primary: #222; --color-light: #fff; --color-dark: #000; --background-light: #f8f8f8; --background-dark: #121212; --color-cta: #000; --color-cta-text: #fff; --header-bg: #222; --sidebar-bg: #000; --header-text: #ffffff; --sidebar-text: #ffffff; /* Computed theme variables (defaults to light mode) */ --background-color: #FFFFFF; --text-color: #333333; --max-bg: white; --max-text: black; /* Custom font support */ --custom-font: system-ui; } /* Media queries disabled - theme system now handled by JavaScript */ /* @media (prefers-color-scheme: dark) { :root { Base theme variables --base-hue: 0; --theme-gradient: linear-gradient(135deg, #444, #bbb); --color-primary: #222; --color-light: #fff; --color-dark: #000; --background-light: #f8f8f8; --background-dark: #121212; --color-cta: #000; --color-cta-text: #fff; --header-bg: #222; --sidebar-bg: #000; --header-text: #ffffff; --sidebar-text: #ffffff; Computed theme variables --background-color: #121212; --text-color: #E0E0E0; --max-bg: black; --max-text: white; } } */ /* Media queries disabled - theme system now handled by JavaScript */ /* @media (prefers-color-scheme: light) { :root { Base theme variables --base-hue: 0; --theme-gradient: linear-gradient(135deg, #444, #bbb); --color-primary: #222; --color-light: #fff; --color-dark: #000; --background-light: #f8f8f8; --background-dark: #121212; --color-cta: #000; --color-cta-text: #fff; --header-bg: #222; --sidebar-bg: #000; --header-text: #ffffff; --sidebar-text: #ffffff; Computed theme variables --background-color: #FFFFFF; --text-color: #333333; --max-bg: white; --max-text: black; } } */ /* =============================== 🌎 Global Theme-Based Styles ================================ */ :root { /* =============================== 🎨 Base Color System (Defaults) ================================ */ /* These are overridden by JavaScript injection into element */ --color-primary: hsl(285, 80%, 10%); --color-light: hsl(51, 100%, 50%); --color-dark: hsl(285, 10%, 5%); --color-danger: #dc3545; --color-success: #28a745; --color-warning: #ffc107; --color-info: #17a2b8; --color-okay: #6c757d; /* Goal Status Colors */ --status-color-proposed: var(--color-info); --status-color-active: var(--color-primary); --status-color-retried: var(--color-warning); --status-color-achieved: var(--color-success); --status-color-paused: var(--color-okay); /* Theme variables are now defined in @media queries above */ /* Semantic Colors */ --color-text: #333333; --color-text-muted: #6c757d; --color-text-light: #ffffff; /* Background variations */ --color-background: #ffffff; --color-background-muted: #f8f9fa; --color-background-subtle: #e9ecef; /* Text colors for light mode */ --text-light: #333333; --text-dark: #E0E0E0; --max-bg: white; --max-text: black; --regular-text: #121212; /* Derivative Colors */ --background-color: var(--background-light); --text-color: var(--text-light); /* =============================== 🎨 Color Mixing System ================================ */ /* All computed color mixing variables are now defined in body section */ /* =============================== 📏 Spacing System ================================ */ /* Base spacing scale (rem) */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 0.75rem; /* 12px */ --spacing-lg: 1rem; /* 16px */ --spacing-xl: 1.25rem; /* 20px */ --spacing-2xl: 1.5rem; /* 24px */ --spacing-3xl: 2rem; /* 32px */ --spacing-4xl: 2.5rem; /* 40px */ --spacing-5xl: 3rem; /* 48px */ --spacing-6xl: 4rem; /* 64px */ --spacing-7xl: 5rem; /* 80px */ /* Semantic spacing */ --spacing-tight: var(--spacing-xs); --spacing-simple: var(--spacing-sm); --spacing-comfortable: var(--spacing-md); --spacing-wide: var(--spacing-lg); --spacing-generous: var(--spacing-xl); --spacing-spacious: var(--spacing-2xl); --spacing-roomy: var(--spacing-3xl); /* =============================== 🔲 Border Radius System ================================ */ --border-radius-none: 0; --border-radius-xs: 0.125rem; /* 2px */ --border-radius-sm: 0.25rem; /* 4px */ --border-radius-md: 0.5rem; /* 8px */ --border-radius-lg: 0.75rem; /* 12px */ --border-radius-xl: 1rem; /* 16px */ --border-radius-2xl: 1.5rem; /* 24px */ --border-radius-3xl: 2rem; /* 32px */ --border-radius-full: 50%; /* Semantic border radius */ --border-radius: var(--border-radius-md); --border-radius-small: var(--border-radius-sm); --border-radius-large: var(--border-radius-lg); --border-radius-button: var(--border-radius-sm); --border-radius-card: var(--border-radius-md); --border-radius-input: var(--border-radius-sm); /* =============================== 📝 Typography System ================================ */ /* Font sizes */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ /* Font weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line heights */ --line-height-tight: 1.1; --line-height-snug: 1.25; --line-height-normal: 1.4; --line-height-relaxed: 1.5; --line-height-loose: 1.6; /* =============================== 🌫️ Shadow System ================================ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); /* =============================== 🎭 Z-Index System ================================ */ --z-index-dropdown: 1000; --z-index-sticky: 1020; --z-index-fixed: 1030; --z-index-modal-backdrop: 1040; --z-index-modal: 1050; --z-index-popover: 1060; --z-index-tooltip: 1070; --z-index-toast: 10001; /* =============================== ⚡ Transition System ================================ */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; --transition-slower: 0.5s ease; /* =============================== 🎯 Opacity System ================================ */ --opacity-0: 0; --opacity-25: 0.25; --opacity-50: 0.5; --opacity-75: 0.75; --opacity-100: 1; color-scheme: light dark; } /* =============================== 🏷️ Global Tag System ================================ */ /* Base tag styling - available everywhere in the app */ .tag { padding: 0.3rem 0.4rem; border-radius: var(--border-radius-sm); font-size: 0.7rem; font-weight: 600; color: var(--max-text); text-transform: uppercase; text-align: center; line-height: 1.1; min-width: 60px; display: inline-block; border: 1px solid transparent; background: var(--max-bg); color: var(--text-color); border-color: color-mix(in lab, var(--text-color), transparent 70%); } .tag small { display: block; font-size: 0.6rem; font-weight: 400; text-transform: capitalize; opacity: 0.9; margin-top: 1px; } /* Semantic tag color variations - available everywhere in the app */ .tag.severity-high, .tag.priority-high { background: var(--color-danger) !important; color: white !important; border-color: var(--color-danger) !important; } .tag.severity-medium, .tag.priority-medium, .tag.severity-moderate, .tag.priority-moderate { background: var(--color-warning) !important; color: var(--color-dark) !important; border-color: var(--color-warning) !important; } .tag.severity-low, .tag.priority-low { background: var(--color-success) !important; color: white !important; border-color: var(--color-success) !important; } .tag.probability-high { background: var(--color-danger) !important; color: white !important; border-color: var(--color-danger) !important; } .tag.probability-medium, .tag.probability-moderate { background: var(--color-warning) !important; color: var(--color-dark) !important; border-color: var(--color-warning) !important; } .tag.probability-low { background: var(--color-okay) !important; color: white !important; border-color: var(--color-okay) !important; } .tag.polarity-positive { background: var(--success-subtle) !important; color: var(--color-success) !important; border-color: var(--success-border) !important; } .tag.polarity-negative { background: var(--danger-subtle) !important; color: var(--color-danger) !important; border-color: var(--danger-border) !important; } .tag.polarity-mixed { background: var(--warning-subtle) !important; color: var(--color-warning) !important; border-color: var(--warning-border) !important; } .tag.polarity-neutral { background: var(--primary-subtle) !important; color: var(--color-primary) !important; border-color: var(--primary-border) !important; } /* Polarity badge styling using :has() selectors for editable content */ .polarity-badge:has(.polarity-listing.positive), .tag:has(.polarity-listing.positive) { background: var(--success-subtle) !important; color: var(--color-success) !important; border-color: var(--success-border) !important; } .polarity-badge:has(.polarity-listing.negative), .tag:has(.polarity-listing.negative) { background: var(--danger-subtle) !important; color: var(--color-danger) !important; border-color: var(--danger-border) !important; } .polarity-badge:has(.polarity-listing.mixed), .tag:has(.polarity-listing.mixed) { background: var(--warning-subtle) !important; color: var(--color-warning) !important; border-color: var(--warning-border) !important; } .polarity-badge:has(.polarity-listing.neutral), .tag:has(.polarity-listing.neutral) { background: var(--primary-subtle) !important; color: var(--color-primary) !important; border-color: var(--primary-border) !important; } /* Fallback for when :has() is not supported or not working - target outer badge */ .polarity-badge.polarity-positive, .polarity-badge .polarity-listing.positive { background: var(--success-subtle) !important; color: var(--color-success) !important; border-color: var(--success-border) !important; } .polarity-badge.polarity-negative, .polarity-badge .polarity-listing.negative { background: var(--danger-subtle) !important; color: var(--color-danger) !important; border-color: var(--danger-border) !important; } .polarity-badge.polarity-mixed, .polarity-badge .polarity-listing.mixed { background: var(--warning-subtle) !important; color: var(--color-warning) !important; border-color: var(--warning-border) !important; } .polarity-badge.polarity-neutral, .polarity-badge .polarity-listing.neutral { background: var(--primary-subtle) !important; color: var(--color-primary) !important; border-color: var(--primary-border) !important; } /* Horizon badge styling using :has() selectors for editable content */ .horizon-badge:has(.timeframe-listing.immediate), .tag:has(.timeframe-listing.immediate) { background: var(--danger-subtle) !important; color: var(--color-danger) !important; border-color: var(--danger-border) !important; } .horizon-badge:has(.timeframe-listing.short-term), .tag:has(.timeframe-listing.short-term) { background: var(--warning-subtle) !important; color: var(--color-warning) !important; border-color: var(--warning-border) !important; } .horizon-badge:has(.timeframe-listing.mid-term), .tag:has(.timeframe-listing.mid-term) { background: var(--warning-subtle) !important; color: var(--color-warning) !important; border-color: var(--warning-border) !important; } .horizon-badge:has(.timeframe-listing.long-term), .tag:has(.timeframe-listing.long-term) { background: var(--primary-subtle) !important; color: var(--color-primary) !important; border-color: var(--primary-border) !important; } /* Fallback for horizon badges when :has() is not supported */ .horizon-badge.short-term, .horizon-badge .timeframe-listing.short-term { background: var(--warning-subtle) !important; color: var(--color-warning) !important; border-color: var(--warning-border) !important; } .horizon-badge.mid-term, .horizon-badge .timeframe-listing.mid-term { background: var(--warning-subtle) !important; color: var(--color-warning) !important; border-color: var(--warning-border) !important; } .horizon-badge.long-term, .horizon-badge .timeframe-listing.long-term { background: var(--primary-subtle) !important; color: var(--color-primary) !important; border-color: var(--primary-border) !important; } .horizon-badge.immediate, .horizon-badge .timeframe-listing.immediate { background: var(--danger-subtle) !important; color: var(--color-danger) !important; border-color: var(--danger-border) !important; } .tag.horizon { background: var(--color-okay) !important; color: white !important; border-color: var(--color-okay) !important; } body { /* =============================== 🎨 Computed Color Variables ================================ */ /* Theme-aware background and text colors are defined in :root and can be overridden by JavaScript */ /* Background Mixing - Text Color Tinting */ --bg-subtle: color-mix(in lab, var(--background-color), var(--text-color) 3%); --bg-muted: color-mix(in lab, var(--background-color), var(--text-color) 5%); --bg-tinted: color-mix(in lab, var(--background-color), var(--text-color) 10%); --bg-section: color-mix(in lab, var(--background-color), var(--text-color) 15%); --bg-hover: color-mix(in lab, var(--background-color), var(--text-color) 20%); /* Background Mixing - Light Tinting */ --bg-light-subtle: color-mix(in lab, var(--background-color), var(--color-light) 1%); --bg-light-muted: color-mix(in lab, var(--background-color), var(--color-light) 2%); --bg-light-tinted: color-mix(in lab, var(--background-color), var(--color-light) 5%); /* Background Mixing - Black Tinting */ --bg-dark-subtle: color-mix(in lab, var(--background-color), var(--background-dark) 3%); --bg-dark-muted: color-mix(in lab, var(--background-color), var(--background-dark) 5%); --bg-dark-tinted: color-mix(in lab, var(--background-color), var(--background-dark) 10%); /* Border Mixing - Text Color with Transparency */ --border-subtle: color-mix(in lab, var(--text-color), transparent 85%); --border-muted: color-mix(in lab, var(--text-color), transparent 70%); --border-medium: color-mix(in lab, var(--text-color), transparent 50%); --border-strong: color-mix(in lab, var(--text-color), transparent 30%); /* Border Mixing - Primary Color with Transparency */ --border-primary-subtle: color-mix(in lab, var(--color-primary), transparent 90%); --border-primary-muted: color-mix(in lab, var(--color-primary), transparent 80%); --border-primary-medium: color-mix(in lab, var(--color-primary), transparent 70%); --border-primary-strong: color-mix(in lab, var(--color-primary), transparent 50%); /* Text Mixing - Opacity Variations */ --text-subtle: color-mix(in lab, var(--text-color), transparent 70%); --text-muted: color-mix(in lab, var(--text-color), transparent 50%); --text-faded: color-mix(in lab, var(--text-color), transparent 30%); --text-ghost: color-mix(in lab, var(--text-color), transparent 20%); /* Primary Color Mixing - Background Tinting */ --primary-subtle: color-mix(in lab, var(--color-primary), var(--background-color) 95%); --primary-muted: color-mix(in lab, var(--color-primary), var(--background-color) 90%); --primary-tinted: color-mix(in lab, var(--color-primary), var(--background-color) 85%); --primary-medium: color-mix(in lab, var(--color-primary), var(--background-color) 80%); --primary-strong: color-mix(in lab, var(--color-primary), var(--background-color) 70%); --light-subtle: color-mix(in lab, var(--color-light), var(--background-color) 95%); --light-muted: color-mix(in lab, var(--color-light), var(--background-color) 90%); --light-tinted: color-mix(in lab, var(--color-light), var(--background-color) 85%); --light-medium: color-mix(in lab, var(--color-light), var(--background-color) 80%); --light-strong: color-mix(in lab, var(--color-light), var(--background-color) 70%); /* Primary Color Mixing - Darkening for Hover States */ --primary-hover: color-mix(in lab, var(--color-primary), black 20%); --primary-active: color-mix(in lab, var(--color-primary), black 30%); /* Success Color Mixing */ --success-subtle: color-mix(in lab, var(--color-success), var(--background-color) 95%); --success-muted: color-mix(in lab, var(--color-success), var(--background-color) 90%); --success-tinted: color-mix(in lab, var(--color-success), var(--background-color) 85%); --success-medium: color-mix(in lab, var(--color-success), var(--background-color) 80%); --success-border: color-mix(in lab, var(--color-success), transparent 70%); --success-border-strong: color-mix(in lab, var(--color-success), transparent 40%); /* Danger Color Mixing */ --danger-subtle: color-mix(in lab, var(--color-danger), var(--background-color) 95%); --danger-muted: color-mix(in lab, var(--color-danger), var(--background-color) 90%); --danger-tinted: color-mix(in lab, var(--color-danger), var(--background-color) 85%); --danger-medium: color-mix(in lab, var(--color-danger), var(--background-color) 80%); --danger-border: color-mix(in lab, var(--color-danger), transparent 70%); --danger-border-strong: color-mix(in lab, var(--color-danger), transparent 40%); /* Warning Color Mixing */ --warning-subtle: color-mix(in lab, var(--color-warning), var(--background-color) 95%); --warning-muted: color-mix(in lab, var(--color-warning), var(--background-color) 90%); --warning-tinted: color-mix(in lab, var(--color-warning), var(--background-color) 85%); --warning-medium: color-mix(in lab, var(--color-warning), var(--background-color) 80%); --warning-border: color-mix(in lab, var(--color-warning), transparent 70%); /* CTA Color Mixing */ --cta-subtle: color-mix(in lab, var(--color-cta), var(--background-color) 95%); --cta-muted: color-mix(in lab, var(--color-cta), var(--background-color) 90%); --cta-tinted: color-mix(in lab, var(--color-cta), var(--background-color) 85%); --cta-hover: color-mix(in lab, var(--color-cta), black 10%); --cta-active: color-mix(in lab, var(--color-cta), black 20%); /* Special Mixing Patterns */ --primary-focus: color-mix(in lab, var(--color-primary), transparent 70%); --primary-focus-strong: color-mix(in lab, var(--color-primary), transparent 50%); --text-slightly-primary: color-mix(in lab, var(--text-color), var(--color-primary) 10%); --text-moderately-primary: color-mix(in lab, var(--text-color), var(--color-primary) 30%); --hover-color: color-mix(in lab, var(--color-primary), white 40%); /* Dynamic contrast colors - these will automatically choose the best contrast */ --button-text-color: color-contrast(var(--color-primary) vs #121212, #ffffff); /* Dynamic contrast for other elements */ --primary-text-color: color-contrast(var(--color-primary) vs #121212, #ffffff); --danger-text-color: color-contrast(var(--color-danger) vs #121212, #ffffff); --warning-text-color: color-contrast(var(--color-warning) vs #121212, #ffffff); --success-text-color: color-contrast(var(--color-success) vs #121212, #ffffff); --info-text-color: color-contrast(var(--color-info) vs #121212, #ffffff); --okay-text-color: color-contrast(var(--color-okay) vs #121212, #ffffff); /* =============================== 🎨 Theme Application ================================ */ /* Apply theme colors */ background-color: var(--background-color); color: var(--text-color); } /* =============================== Delete Button ================================ */ /* Generic Delete Button Styles */ .delete-btn { background: none; border: none; color: var(--color-primary); cursor: pointer; padding: 2px; border-radius: 4px; transition: all 0.2s ease; opacity: 0.6; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; } .delete-btn:hover { background-color: var(--primary-focus); opacity: 1; } .delete-btn svg { width: 28px; height: 28px; } /* =============================== 📌 General Body & Layout ================================ */ body { display: flex; flex-direction: column; /* ⬅ switch to column layout */ min-height: 100vh; margin: 0; padding: 0; overflow-y: auto; font-family: var(--custom-font), system-ui, Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); --notification-hue: var(--base-hue, 215); } /* =============================== Standard Dialog ================================ */ select, input:not([type="range"]), textarea { font-family: var(--custom-font), system-ui, sans-serif; border: 1px solid var(--border-muted); background: var(--bg-light-muted); color: var(--text-color); padding: 0.5rem; border-radius: var(--border-radius-sm); box-sizing: border-box; &:focus { outline: var(--color-primary); box-shadow: 0 0 5px var(--primary-focus); } &:invalid:not(:placeholder-shown) { border: 1px solid var(--danger-border-strong); background: var(--danger-subtle); color: var(--color-danger); } } /* Form elements now use computed variables from body section */ .vxs-themed-textarea { width: calc(100% - 0.5rem); max-width: 800px; min-height: 6rem; border-radius: 1rem; padding: 1rem; font-size: 1rem; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid var(--border-subtle); margin-top: 1rem; margin-bottom: 2rem; margin-inline: auto; flex-shrink: 0; resize: vertical; background-color: var(--background-color); color: var(--text-color); } /* Textarea styling now uses computed variables from body section */ input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(30%) sepia(100%) saturate(500%) hue-rotate(180deg); /* Subtle color tweak */ cursor: pointer; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 7px; background: var(--border-subtle); border-radius: 5px; opacity: 0.75; -webkit-transition: .2s; transition: opacity .2s; &:hover { opacity: 1; } &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--text-color); border: 5px solid var(--background-color); box-shadow: 2px 2px 3px hsla(210,20%, 20%, 0.5); cursor: pointer; transition: background 0.2s ease-in-out; } &:active::-webkit-slider-thumb, &:hover::-webkit-slider-thumb { background: var(--color-primary); } &::-moz-range-thumb { appearance: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--text-color); border: 5px solid var(--background-color); cursor: pointer; transition: background 0.2s ease-in-out; } &:active::-moz-range-thumb, &:hover::-moz-range-thumb { background: var(--color-primary); } } @media (orientation: portrait) { input[type="range"] { width: 100%; } } /* =============================== 🔘 Buttons & Interaction ================================ */ button { background: var(--color-primary); color: var(--button-text-color); border: 1px solid var(--border-subtle); padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background 0.2s ease-in-out, transform 0.2s ease; position: relative; overflow: hidden; } button:focus-visible, input:focus-visible { border-radius: var(--border-radius-sm); box-shadow: 2px 2px 8px 2px var(--color-primary); } button:hover:not(:disabled) { border: 1px solid var(--color-primary); filter: saturate(150%); position: relative; overflow: hidden; } /* Working button flashing effect - now applied to all buttons by default */ button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); pointer-events: none; z-index: 1; border-radius: inherit; display: block; } button:hover::before { left: 100%; transition: left 0.5s ease; } /* Optional: Disable flash effect for specific buttons */ .no-flash::before { display: none; } form:has(:invalid) button[type="submit"], button:disabled { color: var(--text-muted); background-color: color-mix(in lab, var(--text-muted), transparent 75%); opacity: 0.15; pointer-events: none; } /* =============================== 📌 Button Groups & Layout ================================ */ .button-row { display: flex; justify-content: center; align-items: center; margin-top: 1rem; } .button-group { padding-block: 5px; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; overflow: hidden; } .button-group:not(.small-buttons) button { flex: 1; min-width: 8rem; } .button-group.small-buttons { margin-block: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .button-group.small-buttons button { flex: 0 1 auto; width: max-content; min-width: 10rem; max-width: 15rem; padding: 0.5rem 2rem; text-align: center; white-space: nowrap; } .button-group.big-buttons button { padding: 0.75rem 2.5rem; font-size: 1.25rem; min-width: 10rem; max-width: 20rem; text-align: center; white-space: nowrap; } /* =============================== 📌 Sections, Containers, and Cards ================================ */ .section { margin-bottom: 2.5rem; } .section h2 { font-size: min(8vw, 1.8rem); margin-bottom: 0.9375rem; color: var(--text-color); } /* Utility Classes */ .highlight { font-weight: bold; color: var(--color-cta); } .italic { font-style: italic; opacity: 0.5; } /* Containers */ .container { width: 100%; max-width: 1200px; margin: 1.25rem auto; background: var(--bg-light-subtle); border-radius: min(1vw, 0.5rem); box-sizing: border-box; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); padding: 0.25rem; & h1 { text-align: center; } } /* Container styling now uses computed variables from body section */ /* Small Containers */ .container-min { display: inline-block; width: 100%; max-width: 600px; margin: 1.25rem auto; background: var(--color-light); border-radius: 0.5rem; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3); } /* =============================== 📌 Header ================================ */ .header { background: var(--color-primary); color: var(--primary-text-color); padding: 0.5rem; /* increased padding */ text-align: center; overflow: hidden; text-overflow: ellipsis; font-size: 1.1rem; z-index: 2; /* fixed invalid value */ & h1 { margin: 0.5rem; color: var(--color-light); } } main { display: flex; flex-direction: column; flex: 1; padding: 2rem 1.5rem; position: relative; } /* =============================== 📌 Modern Notification System ================================ */ /* Notification Container - Stack from top-right */ #message-container { position: fixed; top: 20px; right: 20px; z-index: var(--z-index-toast); width: 400px; max-width: calc(100vw - 40px); display: flex; flex-direction: column; gap: 12px; pointer-events: none; } /* Individual Notification */ .message { --notification-hue: 200; --notification-bg: var(--background-color); --notification-border: var(--border-muted); --notification-text: var(--text-color); --notification-icon-bg: var(--bg-muted); --notification-glow: transparent; position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--notification-bg); border: 1px solid var(--notification-border); border-left: 4px solid var(--notification-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg), 0 0 0 0 var(--notification-glow); color: var(--notification-text); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); opacity: 0; transform: translateX(100%) scale(0.95); transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; pointer-events: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; } /* Show animation */ .message.show { opacity: 1; transform: translateX(0) scale(1); animation: notificationEntrance 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Entrance animation with color fade-in */ @keyframes notificationEntrance { 0% { opacity: 0; transform: translateX(100%) scale(0.9); filter: brightness(1.2) saturate(1.5); } 50% { opacity: 0.8; transform: translateX(-5%) scale(1.02); filter: brightness(1.1) saturate(1.2); } 100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1) saturate(1); } } /* Hide animation - use opacity instead of display: none */ .message.fading { opacity: 0; transform: translateX(120%) scale(0.8); transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease; filter: brightness(0.8) saturate(0.7); pointer-events: none; /* Disable interactions while fading */ } /* Notification Icon */ .message::before { content: ''; flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--border-radius-full); background: var(--notification-icon-bg); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; margin-top: 2px; transition: all 0.3s ease, transform 0.2s ease; position: relative; overflow: hidden; } /* Icon pulse animation on show */ .message.show::before { animation: iconPulse 0.8s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes iconPulse { 0% { transform: scale(0.8); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* Subtle shimmer effect on icon */ .message::before::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s ease; } .message.show::before::after { left: 100%; } /* Notification Content */ .message .notification-content { flex: 1; min-width: 0; } .message .notification-title { font-weight: var(--font-weight-semibold); margin-bottom: 4px; color: var(--notification-text); } .message .notification-text { color: var(--text-color); font-size: var(--font-size-sm); opacity: 0.9; } /* Close Button */ .message .notification-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: all 0.2s ease; font-size: 16px; line-height: 1; } .message .notification-close:hover { opacity: 1; background: var(--bg-hover); color: var(--text-color); } /* Error Notifications */ .message.error { --notification-bg: var(--danger-subtle); --notification-border: var(--danger-border-strong); --notification-text: var(--color-danger); --notification-icon-bg: var(--danger-muted); --notification-glow: rgba(220, 53, 69, 0.2); } .message.error::before { content: '✕'; color: white; background: var(--color-danger); box-shadow: 0 0 8px rgba(220, 53, 69, 0.3); } /* Warning Notifications */ .message.warning { --notification-bg: var(--warning-subtle); --notification-border: var(--warning-border); --notification-text: var(--color-warning); --notification-icon-bg: var(--warning-muted); --notification-glow: rgba(255, 193, 7, 0.2); } .message.warning::before { content: '⚠'; color: white; background: var(--color-warning); box-shadow: 0 0 8px rgba(255, 193, 7, 0.3); } /* Info Notifications */ .message.info { --notification-bg: var(--primary-subtle); --notification-border: var(--primary-focus-strong); --notification-text: var(--color-primary); --notification-icon-bg: var(--primary-muted); --notification-glow: rgba(23, 162, 184, 0.2); } .message.info::before { content: 'ℹ'; color: white; background: var(--color-info); box-shadow: 0 0 8px rgba(23, 162, 184, 0.3); } /* Success Notifications */ .message.success { --notification-bg: var(--success-subtle); --notification-border: var(--success-border-strong); --notification-text: var(--color-success); --notification-icon-bg: var(--success-muted); --notification-glow: rgba(40, 167, 69, 0.2); } .message.success::before { content: '✓'; color: white; background: var(--color-success); box-shadow: 0 0 8px rgba(40, 167, 69, 0.3); } /* Hover Effects */ .message:hover { transform: translateX(-4px) scale(1.02); box-shadow: var(--shadow-xl), 0 0 20px var(--notification-glow); border-left-color: var(--notification-border); filter: brightness(1.05) saturate(1.1); } /* Enhanced hover for icons */ .message:hover::before { transform: scale(1.1); box-shadow: 0 0 12px var(--notification-glow); } /* Mobile Responsive */ @media (max-width: 37.5rem) { #message-container { top: 10px; right: 10px; left: 10px; width: auto; max-width: none; } .message { padding: 14px; font-size: var(--font-size-sm); } .message::before { width: 20px; height: 20px; font-size: 12px; } } /* =============================== 📌 Utilities ================================ */ .hidden { display: none; } .transparent { opacity: 0 !important; } /* =============================== 📌 Sidebar ================================ */ /* =============================== 📌 Card Styles ================================ */ .card-group { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1rem; } .card { flex: 1 1 28%; background: var(--bg-dark-subtle); border: 1.25px solid var(--border-muted); border-radius: var(--border-radius); padding: 1rem; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; opacity: 0.8; } .card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .card.selected { border-color: hsla(var(--btn-base-hue), 80%, 50%, 1); box-shadow: 0 4px 12px hsla(var(--btn-base-hue), 80%, 50%, 0.5); opacity: 1; } .card-group:has(.selected) .card:not(.selected) { opacity: 0.4; } .card-grid { --grid-min-width: 250px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min-width), 100%), 1fr)); gap: 20px; padding: 1vw; max-height: 10000px; /* Set to a value that exceeds expected content height */ height: auto; overflow: hidden; transition: all 0.4s ease-in-out; } .card-grid.collapsed { max-height: 0; } .card-header { margin-bottom: 1rem; color: var(--text-slightly-primary); & h2 { margin: 0.1rem 0; font-size: 1.2rem; } & p { font-size: 0.85rem; opacity: 0.75; margin-top: 4px; } } .card-body p { font-size: 0.85rem; opacity: 0.6; margin: 0; } .card-footer { text-align: right; margin-top: 10px; } /* =============================== 📌 Metallic Shimmer ================================ */ @keyframes metallic-shimmer { 0% { background: linear-gradient(45deg, transparent 0%, transparent 45%, rgba(255, 255, 255, 0.8) 50%, transparent 55%, transparent 100%); background-size: 400% 400%; background-position: -200% 0%; } 100% { background-position: 200% 0%; } } /* =============================== 📌 Dual Sidebar Styles ================================ */ :root { --sidebar-width: 250px; } /* ✅ Sidebar Base Styles */ #left-sidebar, #right-sidebar { width: var(--sidebar-width); background: var(--background-color); color: var(--text-color); position: fixed; height: 100svh; max-height: 100svh; overflow-y: auto; display: flex; flex-direction: column; z-index: 10000; padding-bottom: 2rem; } /* ✅ Left Sidebar Specific */ #left-sidebar { left: -250px; transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-right: 1px solid var(--border-subtle); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); } /* ✅ Right Sidebar Specific */ #right-sidebar { right: -250px; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-left: 1px solid var(--border-subtle); box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); } /* ✅ Left Sidebar Open */ body.left-sidebar-open #left-sidebar { left: 0; } /* ✅ Right Sidebar Open */ body.right-sidebar-open #right-sidebar { right: 0; } /* ✅ Main Content (Fixed Layout - Sidebars Overlay) */ #main-container { overflow-y: auto; max-width: 100%; min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; } /* ✅ Vue SPA Container - Prevent Layout Shifts */ .vxs-spa { width: 100%; min-height: 100vh; box-sizing: border-box; } /* ✅ Vue Component Transitions - Smooth but not jarring */ .vue-container { width: 100%; min-height: 100vh; box-sizing: border-box; } /* ✅ SPA Loading State */ .spa-loading { text-align: center; padding: 2rem; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /* ✅ Proximity Indicators (subtle visual hints) */ #main-container::before { content: ''; position: fixed; top: 0; left: 0; width: 5px; height: 100vh; background: linear-gradient(to bottom, transparent 0%, var(--color-primary) 20%, var(--color-primary) 80%, transparent 100%); opacity: 0.25; transition: opacity 0.3s ease; z-index: 999; pointer-events: none; } #main-container::after { content: ''; position: fixed; top: 0; right: 0; width: 3px; height: 100vh; background: linear-gradient(to bottom, transparent 0%, var(--color-primary) 20%, var(--color-primary) 80%, transparent 100%); opacity: 0.15; transition: opacity 0.3s ease; z-index: 999; pointer-events: none; } /* ✅ Show proximity indicators more prominently on hover (Desktop only) */ @media (min-width: 769px) { body:hover #main-container::before, body:hover #main-container::after { opacity: 0.4; } } /* ✅ Sidebars now overlay content instead of pushing it */ .sidebar-header { display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--bg-muted); border-bottom: 1px solid var(--border-muted); } /* Sidebar header styling now uses computed variables from body section */ /* ✅ Logo Styling (Fixed Size) */ .sidebar-header img { max-height: 50px; max-width: 80%; object-fit: contain; filter: drop-shadow(0 0 1px color-mix(in lab, var(--text-color), transparent 60%)) drop-shadow(0 2px 4px color-mix(in lab, var(--text-color), transparent 75%)); } /* ✅ Icon Navigation Bar */ .sidebar-icon-nav { display: flex; justify-content: space-around; align-items: center; padding: 12px 8px; background: var(--bg-tinted); border-bottom: 1px solid var(--border-muted); gap: 4px; } /* Sidebar icon navigation styling now uses computed variables from body section */ .icon-nav-item { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; opacity: 0.75; cursor: pointer; transition: all 0.25s ease; background: transparent; border: 2px solid transparent; } .icon-nav-item:hover:not(.active) { opacity: 0.95; background: var(--bg-hover); } .icon-nav-item.active { opacity: 1; background: var(--color-primary); color: var(--primary-text-color); border-color: var(--color-primary); box-shadow: none; } .icon-nav-item.active:hover { background: var(--color-primary); color: var(--primary-text-color); opacity: 0.9; } /* Theme-aware icon styling */ .icon-nav-item img { width: 24px; height: 24px; transition: filter 0.25s ease; opacity: 0.7; } /* Light mode icons - dark icons for light backgrounds */ .icon-nav-item img { filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%); } .icon-nav-item:hover img { filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) drop-shadow(0 0 4px rgba(0, 0, 0, 0.3)); opacity: 0.9; } /* Dark mode icons - light icons for dark backgrounds */ body.dark-mode .icon-nav-item img { filter: brightness(0) saturate(100%) invert(1) contrast(1000%) brightness(2); opacity: 0.6; } body.dark-mode .icon-nav-item:hover img { filter: brightness(0) saturate(100%) invert(1) contrast(1000%) brightness(2) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)); opacity: 0.9; } /* Active icon - always pure white for maximum contrast against primary color */ .icon-nav-item.active img { filter: brightness(0) saturate(100%) invert(1) !important; opacity: 1 !important; } .icon-nav-item.active:hover img { filter: brightness(0) saturate(100%) invert(1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.3)) !important; opacity: 1 !important; } /* ✅ Sidebar Body */ .sidebar-body { flex: 1; overflow-y: auto; } /* ✅ Menu Sections */ .menu-section { display: none; } .menu-section:first-of-type { display: block; /* Show first section by default */ } .menu-section h2 { font-size: 1.1rem; padding: 0.75rem 1rem; margin: 0; color: var(--text-color); background: var(--primary-subtle); border-bottom: 1px solid var(--border-subtle); transition: background-color 0.3s ease; text-align: center; } /* Sidebar h2 styling now uses computed variables from body section */ /* ✅ Sidebar Navigation Links */ .sidebar-body ul { list-style: none; padding: 0; margin: 0; max-height: 500px; overflow: hidden; transition: max-height 0.3s ease-in-out; } .sidebar-body ul.collapsed { max-height: 0; } .sidebar-body li { padding: 0; border-bottom: 1px solid var(--border-subtle); transition: all 0.2s ease-in-out; } /* ✅ Sidebar Links */ .sidebar-body a { text-decoration: none; color: var(--text-color); font-size: 16px; display: block; padding: 0.75rem; transition: all 0.2s ease-in-out; border-left: 3px solid transparent; } /* ✅ Hover state */ .sidebar-body li:hover a { background: var(--bg-tinted); color: var(--text-color); } /* ✅ Hover state for dark mode - use light text for better contrast */ body.dark-mode .sidebar-body li:hover a { background: var(--bg-light-tinted); color: var(--color-light); } /* ✅ Active menu item styling */ .sidebar-body a.active { background: var(--color-primary); color: var(--primary-text-color); border-left: 3px solid var(--primary-text-color); } /* ✅ Active hover state */ .sidebar-body li:hover a.active { background: var(--color-primary); color: var(--primary-text-color); opacity: 0.9; } /* =============================== 📌 Responsive Design ================================ */ @media (max-width: 37.5rem) { /* Mobile sidebar improvements */ #left-sidebar { width: 280px; left: -280px; } #right-sidebar { width: 280px; right: -280px; } /* Sidebars overlay content on mobile as well */ /* Hide proximity indicators on mobile */ #main-container::before, #main-container::after { display: none; } /* Better touch targets for sidebar links */ .sidebar-body a { font-size: 18px; /* Larger text for mobile */ } /* Icon navigation mobile adjustments */ .sidebar-icon-nav { padding: 16px 8px; gap: 8px; } .icon-nav-item { width: 44px; /* Larger touch targets on mobile */ height: 44px; } .icon-nav-item img { width: 28px; /* Slightly larger icons on mobile */ height: 28px; } /* General mobile adjustments */ .card { padding: 0.5rem 0; } .container { border-radius: 0; } button { font-size: 0.9rem; padding: 0.75rem; } main { padding: 1rem 0rem; margin: 0; } } @media (min-width: 25rem) { .container { width: calc(100% - 2rem); width: 100%; max-width: 1200px; } } /* =============================== 📌 Trash Button ================================ */ .vue-trash-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 1; } /* Base button reset + layout */ .vue-trash-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 1; } /* Disabled */ .vue-trash-button--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Color system via currentColor */ .vue-trash-button .vue-trash-button__icon { /* default color (inherits if not set) */ color: #6b7280; /* neutral-500 fallback */ } .vue-trash-button--danger .vue-trash-button__icon { color: #dc3545; } .vue-trash-button--subtle .vue-trash-button__icon { color: #9ca3af; } /* Paths use currentColor so variants/themes work automatically */ .vue-trash-button__icon .bin, .vue-trash-button__icon .lid { fill: currentColor; } /* Smooth transitions */ .vue-trash-button__icon .bin { transition: fill 0.2s ease-in-out, opacity 0.2s ease-in-out; } .vue-trash-button__icon .lid { transition: transform 0.35s ease-in-out; /* IMPORTANT for SVG transforms to behave intuitively */ transform-box: fill-box; transform-origin: center; } /* Hover state – animate lid */ .vue-trash-button:not(.vue-trash-button--disabled):hover .vue-trash-button__icon .lid, .vue-trash-button--hovered .vue-trash-button__icon .lid { transform: translate(9px, -5px) rotate(30deg); } .vue-trash-button--armed .vue-trash-button__icon .lid { transform: translate(9px, -5px) rotate(90deg); } /* Optional: focus-visible ring for a11y */ .vue-trash-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }