/* css/styles.css */ /* ========================= */ /* Theme Variables */ /* ========================= */ :root { /* --- Light Theme (Default) --- */ --mika_primary: #ff5001; --mika_secondary: #ff702f; --mika_tertiary: #ff8f5d; --mika_quaternary: #ffaf8b; --mika_quinary: #ffcfb9; --mika_senary: #fff6f2; /* Lightest background shade */ --mika_bg: #ffffff; /* Main background */ --mika_card_bg: #ffffff; /* Card / Surface background */ --mika_border_color: #dee2e6; /* Default border */ --mika_text_dark: #333333; /* Primary text on light backgrounds */ --mika_text_light: #ffffff; /* Text on colored backgrounds */ --mika_text_muted: #6c757d; /* Muted text */ --mika_success: #198754; /* Bootstrap 5 success green */ --mika_error: #dc3545; /* Bootstrap 5 danger red */ --mika_warning: #ffc107; /* Bootstrap 5 warning yellow */ --mika_info: #0dcaf0; /* Bootstrap 5 info cyan */ /* --- Transitions --- */ --mika_transition_speed: 0.3s; --mika_transition_speed_fast: 0.2s; /* --- RGB Color for rgba() --- */ --mika_primary-rgb: 255, 80, 1; /* RGB for #ff5001 */ } html.dark-mode { /* Apply dark mode styles when this class is on */ /* --- Dark Theme --- */ --mika_primary: #ff601a; /* Slightly adjusted primary for dark */ --mika_secondary: #ff7d40; --mika_tertiary: #ff9a6a; --mika_quaternary: #ffb796; --mika_quinary: #ffd4c2; --mika_senary: #2a2a2f; /* Darkest background shade */ --mika_bg: #1a1a1d; /* Main dark background */ --mika_card_bg: #212529; /* Card / Surface dark background */ --mika_border_color: #495057; /* Darker border */ --mika_text_dark: #dee2e6; /* Primary text on dark backgrounds */ --mika_text_light: #ffffff; /* Text on colored backgrounds (often stays white) */ --mika_text_muted: #adb5bd; /* Muted text for dark */ /* Use BS5 dark theme status colors for better consistency */ --mika_success: #198754; --mika_error: #dc3545; --mika_warning: #ffc107; --mika_info: #0dcaf0; /* --- RGB Color for rgba() --- */ --mika_primary-rgb: 255, 96, 26; /* RGB for #ff601a */ } /* ========================= */ /* Apply Variables */ /* ========================= */ body { background-color: var(--mika_bg); color: var(--mika_text_dark); transition: background-color var(--mika_transition_speed) ease, color var(--mika_transition_speed) ease; font-family: "Syne", sans-serif; min-height: 100vh; } /* --- General Elements --- */ h1, h2, h3, h4, h5, h6 { color: var(--mika_text_dark); transition: color var(--mika_transition_speed) ease; } .text-muted { color: var(--mika_text_muted) !important; /* Override bootstrap if needed */ } hr { border-top: 1px solid var(--mika_border_color); transition: border-top-color var(--mika_transition_speed) ease; } /* ========================= */ /* Cards */ /* ========================= */ .card { background-color: var(--mika_card_bg); border: 1px solid var(--mika_border_color); transition: background-color var(--mika_transition_speed) ease, border-color var(--mika_transition_speed) ease; } .card.border-0 { border: none !important; } /* ========================= */ /* Buttons */ /* ========================= */ .btn { transition: color var(--mika_transition_speed_fast) ease, background-color var(--mika_transition_speed_fast) ease, border-color var(--mika_transition_speed_fast) ease, box-shadow var(--mika_transition_speed_fast) ease, transform var(--mika_transition_speed_fast) ease; } .btn:hover { transform: translateY(-1px); /* Subtle lift on general buttons */ } /* Primary Button */ .btn-primary { background-color: var(--mika_primary); border-color: var(--mika_primary); color: var(--mika_text_light) !important; /* Ensure text stays light */ border-radius:0.5rem; /* User added */ padding: 0.5rem 1.25rem; /* User added */ font-weight: 600; /* User added */ } .btn-primary:hover, .btn-primary:focus { background-color: var(--mika_secondary); border-color: var(--mika_secondary); color: var(--mika_text_light) !important; box-shadow: 0 4px 8px rgba(var(--mika_primary-rgb), 0.2); /* Softer shadow on hover */ transform: translateY(-2px); /* Slightly more lift */ } .btn-primary:disabled { background-color: var(--mika_primary); border-color: var(--mika_primary); opacity: 0.65; transform: none; box-shadow: none; } /* Outline Primary Button */ .btn-outline-primary { color: var(--mika_primary); border-color: var(--mika_primary); } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--mika_primary); border-color: var(--mika_primary); color: var(--mika_text_light); box-shadow: none; } /* Secondary Button (Modal Close) */ .btn-secondary { background-color: var(--mika_text_muted); border-color: var(--mika_text_muted); color: var(--mika_bg); } .btn-secondary:hover, .btn-secondary:focus { opacity: 0.85; color: var(--mika_bg); background-color: var(--mika_text_muted); border-color: var(--mika_text_muted); box-shadow: none; } /* Outline Secondary Button (Save Palette, Add Color) */ .btn-outline-secondary { color: var(--mika_text_muted); border-color: var(--mika_text_muted); } .btn-outline-secondary:hover, .btn-outline-secondary:focus { background-color: var(--mika_text_muted); border-color: var(--mika_text_muted); color: var(--mika_bg); box-shadow: none; } /* Light Button (Swatch Icons) */ .btn-light { color: var(--mika_text_dark); background-color: var(--mika_senary); border-color: var(--mika_border_color); } .btn-light:hover { opacity: 0.9; color: var(--mika_text_dark); background-color: var(--mika_senary); border-color: var(--mika_border_color); /* transform: scale(1.05); */ /* Avoid layout shift */ } /* Icon Button Padding */ .btn-icon { padding: 0.25rem 0.5rem; line-height: 1; } /* Active state for buttons (User added) */ .btn.active { background-color: var(--mika_primary) !important; color: white !important; /* Ensure high contrast */ border-color: var(--mika_primary) !important; border-radius:0.5rem; padding: 0.5rem 1.25rem; font-weight: 600; transform: none; /* No lift when active */ box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); /* Inset shadow */ } /* ========================= */ /* Forms */ /* ========================= */ .form-control { background-color: var(--mika_bg); color: var(--mika_text_dark); border: 1px solid var(--mika_border_color); transition: color var(--mika_transition_speed) ease, background-color var(--mika_transition_speed) ease, border-color var(--mika_transition_speed) ease, box-shadow var(--mika_transition_speed) ease; } .form-control:focus { background-color: var(--mika_bg); color: var(--mika_text_dark); border-color: var(--mika_primary); box-shadow: 0 0 0 0.25rem rgba(var(--mika_primary-rgb), 0.25); /* Use RGB variable */ } .form-control::placeholder { color: var(--mika_text_muted); opacity: 0.8; } html.dark-mode .form-control { background-color: var(--mika_card_bg); border-color: var(--mika_border_color); } html.dark-mode .form-control:focus { background-color: var(--mika_card_bg); box-shadow: 0 0 0 0.25rem rgba(var(--mika_primary-rgb), 0.25); /* Use RGB variable */ } .form-control[readonly] { background-color: var(--mika_senary); opacity: 1; } html.dark-mode .form-control[readonly] { background-color: var(--mika_bg); /* Maybe use main bg in dark */ } .input-group-text { background-color: var(--mika_senary); border: 1px solid var(--mika_border_color); color: var(--mika_text_muted); transition: color var(--mika_transition_speed) ease, background-color var(--mika_transition_speed) ease, border-color var(--mika_transition_speed) ease; } html.dark-mode .input-group-text { background-color: var(--mika_senary); color: var(--mika_text_muted); border-color: var(--mika_border_color); } /* ========================= */ /* Modals & Toasts */ /* ========================= */ .modal-content { background-color: var(--mika_card_bg); border: 1px solid var(--mika_border_color); color: var(--mika_text_dark); transition: background-color var(--mika_transition_speed) ease, border-color var(--mika_transition_speed) ease, color var(--mika_transition_speed) ease; } .modal-header { border-bottom: 1px solid var(--mika_border_color); transition: border-bottom-color var(--mika_transition_speed) ease; } .modal-header .modal-title { color: var(--mika_text_dark); } .modal-footer { border-top: 1px solid var(--mika_border_color); transition: border-top-color var(--mika_transition_speed) ease; } .btn-close { transition: filter var(--mika_transition_speed) ease; } html.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .toast-header { transition: background-color var(--mika_transition_speed) ease, border-color var(--mika_transition_speed) ease, color var(--mika_transition_speed) ease; } .toast-body { transition: color var(--mika_transition_speed) ease; } /* ========================= */ /* Specific App Elements */ /* ========================= */ .site-title { /* User added class */ } .color-emoji { font-size: 1.5em; } /* --- Upload Area --- */ #image-preview-container { cursor: pointer; position: relative; border: 3px dashed transparent; /* Start transparent */ transition: border-color var(--mika_transition_speed_fast) ease, background-color var(--mika_transition_speed_fast) ease; /* Faster transition */ min-height: 300px; /* User override */ background-color: var(--mika_senary); display: flex; /* Added previously */ align-items: center; /* Added previously */ justify-content: center; /* Added previously */ } #image-preview-container.drag-over { border-color: var(--mika_primary); /* Show border on drag */ background-color: rgba(var(--mika_primary-rgb), 0.05); /* Subtle bg tint */ } .placeholder-icon { color: var(--mika_text_muted); transition: color var(--mika_transition_speed_fast) ease; /* Faster transition */ } #image-preview-container.drag-over .placeholder-icon { color: var(--mika_primary); } #upload-overlay { background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */ transition: opacity 0.3s ease; pointer-events: none; /* Allow clicks/drags through */ position: absolute; /* Added previously */ top: 0; left: 0; width: 100%; height: 100%; /* Added previously */ display: flex; /* Added previously */ align-items: center; /* Added previously */ justify-content: center; /* Added previously */ } #image-preview-container:not(.drag-over):hover #upload-overlay { opacity: 0; /* Fade out overlay on hover when NOT dragging */ } #image-preview-container.drag-over #upload-overlay { opacity: 0; /* Hide overlay completely when dragging over */ } #image-preview { display: block; /* Was already set */ } /* --- Extracted Color Swatch Card --- */ /* Staggered Animation Base State */ #color-palette > .col { opacity: 0; transform: scale(0.95) translateY(10px); /* Transition applied dynamically via JS */ } /* Staggered Animation Active State */ #color-palette > .col.appear { opacity: 1; transform: scale(1) translateY(0); } /* Card Hover & Base Styles */ .color-swatch { transition: transform var(--mika_transition_speed_fast) ease-in-out, box-shadow var(--mika_transition_speed_fast) ease-in-out, border-color var(--mika_transition_speed) ease, background-color var(--mika_transition_speed) ease; } .color-swatch:hover { transform: translateY(-4px); box-shadow: var(--bs-box-shadow); } /* Ensure columns/cards fill height */ #color-palette { align-items: stretch; } #color-palette > .col { display: flex; } #color-palette > .col > .card { flex-grow: 1; } /* Swatch Preview Area */ .color-preview { height: 160px; /* Reduced height slightly from user override */ border-bottom: none; border-top-left-radius: calc(0.375rem - 1px); border-top-right-radius: calc(0.375rem - 1px); display: flex; /* Added previously */ align-items: center; /* Added previously */ justify-content: center; /* Added previously */ text-align: center; /* Added previously */ font-weight: bold; /* Added previously */ line-height: 1; /* Added previously */ overflow: hidden; /* Added previously */ word-break: break-all; /* Added previously */ border: 1px solid var(--mika_border_color); /* Added previously */ border-bottom: 1px solid var(--mika_border_color); /* Ensure bottom border */ transition: background-color var(--mika_transition_speed) ease, border-color var(--mika_transition_speed) ease; /* Added previously */ } #modal-detail-color-preview{ padding: 25px; /* User added */ } /* Preview inside modal */ .modal-preview-large { height: 100px; border-radius: 0.25rem; } /* Specific class for modal preview */ /* Swatch Text Elements */ .color-swatch .card-body { background-color: var(--mika_card_bg); transition: background-color var(--mika_transition_speed) ease; } .color-swatch .color-hex { color: var(--mika_text_dark); font-weight: bold; transition: color var(--mika_transition_speed) ease; } .color-swatch .color-name { color: var(--mika_text_muted); transition: color var(--mika_transition_speed) ease; } .color-swatch .color-ratio { color: var(--mika_text_muted); opacity: 0.8; transition: color var(--mika_transition_speed) ease, opacity var(--mika_transition_speed) ease; } /* --- Variation Swatch Styles (NEW TALL STRUCTURE) --- */ .variation-swatch-container { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .variation-swatch-item { flex-grow: 1; flex-basis: 100px; min-width: 90px; max-width: 150px; border: 1px solid var(--mika_border_color); background-color: var(--mika_card_bg); border-radius: var(--bs-border-radius-lg, 0.5rem); overflow: hidden; cursor: pointer; transition: transform var(--mika_transition_speed_fast) ease-in-out, box-shadow var(--mika_transition_speed_fast) ease-in-out, border-color var(--mika_transition_speed) ease, background-color var(--mika_transition_speed) ease; } .variation-swatch-item:hover { transform: translateY(-3px); box-shadow: var(--bs-box-shadow-sm); } .variation-color-preview { height: 80px; width: 100%; background-color: #ccc; border-bottom: 1px solid var(--mika_border_color); transition: background-color var(--mika_transition_speed) ease, border-color var(--mika_transition_speed) ease; display: flex; align-items: center; justify-content: center; /* For potential future text */ } .variation-color-details { transition: background-color var(--mika_transition_speed) ease; } .variation-color-hex { color: var(--mika_text_dark); margin-bottom: 0.1rem; transition: color var(--mika_transition_speed) ease; } .variation-color-name { color: var(--mika_text_muted); transition: color var(--mika_transition_speed) ease; } /* --- Saved Palette Card Specific Styles --- */ .saved-palette-card { transition: transform var(--mika_transition_speed_fast) ease-in-out, box-shadow var(--mika_transition_speed_fast) ease-in-out, border-color var(--mika_transition_speed) ease, background-color var(--mika_transition_speed) ease; } .saved-palette-card:hover { transform: translateY(-3px); box-shadow: var(--bs-box-shadow); } .saved-palette-card .palette-colors { height: 4rem; line-height: 0; font-size: 0; display: flex; /* Ensure flex */ } .saved-palette-card .palette-colors > div { transition: opacity 0.2s ease-in-out; flex-grow: 1; flex-basis: 0; /* Added flex properties */ } .saved-palette-card .palette-details { background-color: var(--mika_card_bg); transition: background-color var(--mika_transition_speed) ease; } .saved-palette-card .btn i.fa-fw { text-align: center; } .saved-palette-card .palette-name { color: var(--mika_text_dark); transition: color var(--mika_transition_speed) ease; } .saved-palette-card .palette-date { color: var(--mika_text_muted); transition: color var(--mika_transition_speed) ease; } /* ========================= */ /* Animations */ /* ========================= */ .copy-animation { animation: pulse-border-btn 0.3s ease-out; } @keyframes pulse-border-btn { /* Using static RGBA based on light theme primary */ 0% { box-shadow: 0 0 0 0 rgba(255, 80, 1, 0.5); } 70% { box-shadow: 0 0 0 5px rgba(255, 80, 1, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 80, 1, 0); } } html.dark-mode .copy-animation { animation-name: pulse-border-btn-dark; } @keyframes pulse-border-btn-dark { /* Using static RGBA based on dark theme primary */ 0% { box-shadow: 0 0 0 0 rgba(255, 96, 26, 0.5); } 70% { box-shadow: 0 0 0 5px rgba(255, 96, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 96, 26, 0); } } .variation-swatch-item.copy-animation-simple { animation: pulse-border-swatch 0.3s ease-out; } /* Apply to item */ @keyframes pulse-border-swatch { /* Using static RGBA based on light theme primary */ 0% { box-shadow: 0 0 0 0 rgba(255, 80, 1, 0.4); } 70% { box-shadow: 0 0 0 5px rgba(255, 80, 1, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 80, 1, 0); } } html.dark-mode .variation-swatch-item.copy-animation-simple { animation-name: pulse-border-swatch-dark; } @keyframes pulse-border-swatch-dark { /* Using static RGBA based on dark theme primary */ 0% { box-shadow: 0 0 0 0 rgba(255, 96, 26, 0.4); } 70% { box-shadow: 0 0 0 5px rgba(255, 96, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 96, 26, 0); } } /* ========================= */ /* Theme Toggle Button */ /* ========================= */ #theme-toggle-btn { background: none; border: none; color: var(--mika_text_muted); font-size: 1.1rem; cursor: pointer; padding: 0.375rem 0.75rem; border-radius: var(--bs-border-radius, 0.375rem); line-height: 1.5; transition: color var(--mika_transition_speed) ease, background-color var(--mika_transition_speed) ease; } #theme-toggle-btn:hover { color: var(--mika_text_dark); background-color: var(--mika_senary); } #theme-toggle-btn:focus-visible { outline: none; box-shadow: 0 0 0 0.25rem rgba(var(--mika_primary-rgb), 0.25); } /* ========================= */ /* Loaders / Spinners */ /* ========================= */ .loader { /* Used in Extract button */ border: 4px solid var(--mika_senary); border-top-color: var(--mika_primary); border-radius: 50%; width: 1em; height: 1em; animation: spin 1s linear infinite; display: inline-block; vertical-align: -0.125em; margin-right: 0.25em; } .spinner-border { /* General Bootstrap spinner */ color: var(--mika_primary); transition: color var(--mika_transition_speed) ease; } .spinner-border-sm { /* Small spinner in buttons */ color: currentColor; width: 1rem; height: 1rem; border-width: 0.2em; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ========================= */ /* User Added Overrides */ /* ========================= */ .mika_logo { display: inline-block; width: 100px; } /* .btn-primary, .btn.active defined earlier with user styles */ /* Cleanup/Consolidation of preview heights */ /* Remove user override for .color-preview height: 360px; use 160px */ /* Remove user override for .variation-color-preview height: 215px; use 80px */ /* Keep user override for modal preview padding */ #modal-detail-color-preview { padding: 25px; /* User added */ } /* Keep user override for container min-height */ /* #image-preview-container { min-height: 300px; } */ /* Combined with base style */