/** * Replicate Upload Interface - Combined Styles * Version: 3.7.2 * Dark theme styled to match Realistec brand: violet gradient CTAs * (#8b5cf6 → #6366f1), Space Grotesk display type, deep cosmic surfaces. * * Brand fonts (Space Grotesk, Inter, JetBrains Mono) are loaded site- * wide via wp_enqueue_style() in the child theme's font-loading-snippet.php * Code Snippet — see style.css for the matching note. This file does NOT * @import them; it just references the theme's --rt-font-* tokens (with * hardcoded fallbacks). * * Structure: * 1. Layout overrides & theme refinements (originally loaded in ) * 2. Base styles (originally inline in , takes final precedence) */ /* ============================================================= SECTION 1: LAYOUT OVERRIDES & THEME REFINEMENTS (Original upload-interface.css — loaded first, lower precedence) ============================================================= */ /* ============================================= UPLOAD INTERFACE - BASE STYLES ============================================= */ /* Fix: Center the individual frames in Standard Image side-by-side preview */ /* Center the frame cards within the previews list */ .realistec-stereo-frame-previews-list { justify-content: center; } /* Allow frame cards to grow and fill available space */ .realistec-stereo-frame-preview-item { flex: 1 1 0; min-width: 150px; max-width: 300px; } /* Let images fill the frame and dictate height. Higher specificity to override shortcode height: 180px. */ .realistec-stereo-frame-previews-list .realistec-stereo-frame-preview-item .realistec-stereo-frame-image { height: auto; padding: 0; } .realistec-stereo-frame-previews-list .realistec-stereo-frame-preview-item .realistec-stereo-frame-image img { width: 100%; height: auto; object-fit: cover; } /* ============================================= STEREO SPLIT FRAMES - FILL WIDTH ============================================= */ .realistec-stereo-stereo-split-frames .realistec-stereo-split-frame { flex: 1; min-width: 0; } .realistec-stereo-stereo-split-frames .realistec-stereo-split-frame img { max-width: 100%; max-height: none; width: 100%; height: auto; } /* ============================================= COMPARE & SELECT BUTTON ============================================= */ /* Override realistec-stereo-crop-description padding to align with match-color elements */ p.realistec-stereo-crop-description { padding: 4px 0 0 0; } /* Position realistec-stereo-crop-indicator under realistec-stereo-crop-description, on a line of its own. Mirrors the margin used by .realistec-stereo-match-color-selection-label (10px 0 0 28px) so when both indicators appear together in the same upload area they align consistently under the description. inline-flex (not inline-block) is required because the main .realistec-stereo-crop-indicator rule below uses gap and align-items to lay out its icon + text contents — overriding display here without using a flex value would erase that layout. Higher specificity than the main rule, but kept to display + margin only so the visual styling (background, padding, color, etc.) cascades from the main rule without duplication. */ .realistec-stereo-custom-crop-option .realistec-stereo-crop-indicator, .realistec-stereo-stereo-crop-option .realistec-stereo-crop-indicator { display: inline-flex; margin: 10px 0 0 28px; } /* Also reposition the edit button onto the same line as the indicator */ .realistec-stereo-custom-crop-option .realistec-stereo-edit-crop-btn, .realistec-stereo-stereo-crop-option .realistec-stereo-edit-stereo-crop-btn { margin-left: 8px; } .realistec-stereo-match-color-compare-btn { /* Mirrors the Immersity plugin's .realistec-mono-edit-crop-btn — a small outlined action button with a 1px border, square 4px corners, dark surface, light text, and brand violet on hover. Properties and order follow that reference verbatim so the two buttons stay visually identical and easy to keep in sync. */ margin-left: 8px; padding: 4px 12px; background: var(--realistec-surface-2, #14112e); color: var(--realistec-text, #f5f3ff); border: 1px solid var(--realistec-border, #1f1b3a); border-radius: 4px; font-size: 12px; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .realistec-stereo-match-color-compare-btn:hover { background: #1f1b3a; border-color: var(--realistec-primary, #8b5cf6); } .realistec-stereo-match-color-selection-label { display: none; align-items: center; /* gap handles spacing between the check icon and the label text; the JS no longer prepends a Unicode glyph so we don't need an inline space character anymore. */ gap: 4px; margin: 10px 0 0 28px; padding: 4px 12px; background: var(--realistec-gradient, linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)); color: white; border-radius: 4px; font-size: 12px; font-weight: 500; } /* Icon inside the match-color selection-label pill — scaled to the 12px pill text. The default .realistec-stereo-msi size (18px) would overflow the pill's vertical padding. Same approach used by .realistec-stereo-crop-indicator .realistec-stereo-msi for the equivalent crop-mode pill. Reset the margin-right and vertical-align that .realistec-stereo-msi applies in label-paired contexts — flex `gap: 4px` on the parent handles spacing here, and the flex alignment handles centering. */ .realistec-stereo-match-color-selection-label .realistec-stereo-msi { font-size: 14px; margin-right: 0; vertical-align: baseline; } /* ============================================= HISTOGRAM COMPARISON MODAL ============================================= */ .realistec-stereo-hist-modal { /* Modal-scoped variable layer — mirrors the .realistec-stereo-crop-modal declaration further up this file. The histogram modal is portaled to at runtime, which puts it outside .realistec-stereo-upload-interface and means the plugin's --realistec-* tokens don't reach here. Each --modal-* token aliases a theme --rt-* token (so a palette change in style.css propagates) with a hardcoded fallback after the comma for the case where the theme isn't loaded. Mapping (kept aligned with .realistec-stereo-crop-modal except for --modal-bg): --modal-bg -> --rt-bg (modal body — DEEPEST cosmic backdrop. Differs from .realistec-stereo-crop-modal which uses --rt-bg-2 here, because the histogram canvas needs maximum contrast for its drawn lines and Immersity's reference modal does the same. Result: the modal body reads a step DEEPER than the header, giving the modal a clear horizontal seam between header and body.) --modal-surface -> --rt-bg-3 (header / elevated areas) --modal-border -> #1f1b3a (hardcoded — theme's --rt-border is rgba) --modal-text -> --rt-text --modal-text-secondary -> --rt-text-muted --modal-accent -> --rt-violet --modal-gradient -> --rt-gradient (CTA buttons) --modal-gradient-hover -> --rt-gradient-hover */ --modal-bg: var(--rt-bg, #07060f); --modal-surface: var(--rt-bg-3, #14112e); --modal-border: #1f1b3a; --modal-text: var(--rt-text, #f5f3ff); --modal-text-secondary: var(--rt-text-muted, #a8a3c9); --modal-accent: var(--rt-violet, #8b5cf6); --modal-gradient: var(--rt-gradient, linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)); --modal-gradient-hover: var(--rt-gradient-hover, linear-gradient(135deg, #a78bfa 0%, #818cf8 100%)); display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 999999; overflow-y: auto; padding: 20px; box-sizing: border-box; opacity: 0; transition: opacity 0.3s ease; } .realistec-stereo-hist-modal.active { display: flex; justify-content: center; align-items: center; opacity: 1; } .realistec-stereo-hist-modal-content { /* Mirrors Immersity's #realistec-mono-color-filter-modal .realistec-stereo-hist-modal-content layering: deepest cosmic backdrop (--modal-bg = --rt-bg) for the modal body, with the header above stepping up to --modal-surface. Was previously --realistec-surface (= --rt-bg-2), which made body and header identical and removed the visual seam. Now also uses the violet glow shadow Immersity uses, so both modals' shells read with the same brand language. */ background: var(--modal-bg, #07060f); border: 1px solid var(--modal-border, #1f1b3a); border-radius: 12px; width: 95vw; max-width: 1200px; height: 90vh; max-height: 800px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.08); transform: scale(0.95) translateY(-20px); transition: transform 0.3s ease; margin: auto; position: relative; } .realistec-stereo-hist-modal.active .realistec-stereo-hist-modal-content { transform: scale(1) translateY(0); } /* Header */ .realistec-stereo-hist-modal-header { /* --modal-surface (= --rt-bg-3) is one step lighter than --modal-bg (= --rt-bg) so a horizontal seam appears between header and body. Was previously --realistec-surface which equaled the body color and erased the seam. Border-bottom keeps the seam crisp at any backdrop. Mirrors the Immersity realistec-stereo-hist-modal-header rule. */ display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; background: var(--modal-surface, #14112e); border-bottom: 1px solid var(--modal-border, #1f1b3a); } .realistec-stereo-hist-modal-header h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--realistec-text, #f5f3ff); /* Display font — references the theme's --rt-font-display token so a site-wide font change propagates here too. The modal is portaled to at runtime, so it sits outside .realistec-stereo-upload-interface and doesn't inherit the display-font rule scoped to that selector. Setting the font explicitly on the modal's heading keeps Color Comparison's title aligned with the brand display family. */ font-family: var(--rt-font-display, 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); letter-spacing: -0.01em; } .realistec-stereo-hist-close-btn { background: none; border: none; font-size: 24px; color: var(--realistec-text-secondary, #a8a3c9); cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; } .realistec-stereo-hist-close-btn:hover { color: var(--realistec-error, #ef4444); background: rgba(239, 68, 68, 0.1); } /* Body — flex row: main content left, sidebar right */ .realistec-stereo-hist-modal-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* ---- Sidebar ---- */ .realistec-stereo-hist-sidebar { /* Right-hand controls panel. Uses --modal-surface (= --rt-bg-3) so the sidebar reads one step LIGHTER than the deeper --modal-bg body — the layering visible in the Immersity reference: deep body around the histogram canvas, lighter sidebar on the right, lighter header on top. An earlier revision routed this to --modal-bg to try to unify body and sidebar, but that erased the visible separation between the histogram area and the controls. */ width: 200px; flex-shrink: 0; background: var(--modal-surface, #14112e); border-left: 1px solid var(--modal-border, #1f1b3a); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; order: 1; } .realistec-stereo-hist-sidebar::-webkit-scrollbar { width: 6px; } .realistec-stereo-hist-sidebar::-webkit-scrollbar-track { background: transparent; } .realistec-stereo-hist-sidebar::-webkit-scrollbar-thumb { background: var(--modal-border, #1f1b3a); border-radius: 3px; } .realistec-stereo-hist-sidebar::-webkit-scrollbar-thumb:hover { background: var(--modal-text-secondary, #a8a3c9); } .realistec-stereo-hist-sidebar-section { padding: 16px; border-bottom: 1px solid var(--modal-border, #1f1b3a); } .realistec-stereo-hist-sidebar-section:last-child { border-bottom: none; } .realistec-stereo-hist-sidebar-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--realistec-text-secondary, #a8a3c9); margin: 0 0 12px 0; } /* Filter Strength label — matches realistec-stereo-hist-sidebar-section-title exactly */ .realistec-stereo-hist-sidebar-control-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--realistec-text-secondary, #a8a3c9); margin: 0 0 12px 0; display: block; } /* Filter strength control group */ .realistec-stereo-hist-filter-strength-group { width: 100%; } /* Slider + value on the same row */ .realistec-stereo-hist-filter-strength-row { display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; } .realistec-stereo-hist-filter-strength-row input[type="range"] { flex: 1; min-width: 0; height: 6px; -webkit-appearance: none; appearance: none; background: linear-gradient( to right, var(--realistec-primary, #8b5cf6) 0%, var(--realistec-primary-hover, #6366f1) var(--range-pct, 100%), rgba(139, 92, 246, 0.2) var(--range-pct, 100%), rgba(139, 92, 246, 0.2) 100% ); border-radius: 4px; outline: none; cursor: pointer; margin: 0; } .realistec-stereo-hist-filter-strength-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--realistec-gradient, linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)); cursor: pointer; border: 2px solid white; box-shadow: 0 2px 6px rgba(139, 92, 246, 0.5), 0 1px 3px rgba(0, 0, 0, 0.2); } .realistec-stereo-hist-filter-strength-row input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--realistec-gradient, linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)); cursor: pointer; border: 2px solid white; box-shadow: 0 2px 6px rgba(139, 92, 246, 0.5), 0 1px 3px rgba(0, 0, 0, 0.2); } #hist-filter-strength-value { flex-shrink: 0; min-width: 34px; text-align: right; font-size: 12px; color: var(--realistec-text-secondary, #a8a3c9); } .realistec-stereo-hist-sidebar-control-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .realistec-stereo-hist-sidebar-control-group select { width: 100%; padding: 6px 8px; border: 1px solid var(--realistec-border, #1f1b3a); border-radius: 6px; font-size: 13px; background: var(--realistec-surface, #0d0b1f); /* Same color/color-scheme/accent-color treatment as the Aspect Ratio dropdown above — keeps both selects consistent with the Immersity plugin's dropdown styling. See that block for full rationale. */ color: var(--realistec-text, #f5f3ff); font-family: inherit; cursor: pointer; accent-color: var(--rt-violet, #8b5cf6); color-scheme: dark; } .realistec-stereo-hist-sidebar-control-group select option { background-color: #14112b; color: #f5f3ff; } .realistec-stereo-hist-sidebar-control-group select option:checked, .realistec-stereo-hist-sidebar-control-group select option:hover { background-color: #2a2454; color: #ffffff; } .realistec-stereo-hist-sidebar-control-group select:focus { outline: none; border-color: var(--realistec-primary, #8b5cf6); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } /* ---- Main content area ---- */ .realistec-stereo-hist-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; /* Belt-and-suspenders backdrop. The parent .realistec-stereo-hist-modal-content already sets the deep --modal-bg, so this would technically inherit. Setting it explicitly here defends against any future intermediate wrapper being added between content and main, AND makes the deep-backdrop intent obvious to anyone reading just this rule. Same color value as the parent — no double-painting concern, just redundancy. */ background: var(--modal-bg, #07060f); } /* ---- Loading overlay — covers the entire realistec-stereo-hist-modal-content during filter computation ---- */ .realistec-stereo-hist-loading-overlay { display: none; position: absolute; inset: 0; background: rgba(128, 128, 128, 0.5); z-index: 9999; align-items: center; justify-content: center; border-radius: 12px; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .realistec-stereo-hist-spinner { width: 44px; height: 44px; border: 4px solid rgba(139, 92, 246, 0.25); border-top-color: var(--realistec-primary, #8b5cf6); border-radius: 50%; animation: hist-spin 0.75s linear infinite; box-shadow: 0 2px 12px rgba(139, 92, 246, 0.3); } @keyframes hist-spin { to { transform: rotate(360deg); } } /* Compare Container — now shows histograms as primary */ .realistec-stereo-hist-compare-container { position: relative; /* Deep dark backdrop for the histogram canvas. Was originally #1a1a1a in the pre-restyle plugin (a near-black). The bulk hex-to-token substitution mapped it to --realistec-text by mistake — the color happened to fall in the script's "dark-text-on-light-bg" map even though the role here was "dark-background-on-dark-theme". The resulting near-white background was the brightest surface in the whole modal and made the histogram data lines (white at low alpha with a black drop-shadow, optimized for a DARK backdrop) almost invisible. Using --realistec-bg (the deepest --rt-bg cosmic backdrop) restores the intended contrast. */ background: var(--realistec-bg, #07060f); border-radius: 8px; overflow: hidden; cursor: col-resize; user-select: none; -webkit-user-select: none; flex: 1; min-height: 0; margin-bottom: 20px; } /* Tonal zone labels — five evenly-spaced guides at the top of the histogram. Mirrors .realistec-stereo-film-color-zone-labels / .realistec-stereo-film-color-zone-label exactly. */ .realistec-stereo-hist-compare-container .realistec-stereo-hist-tone-labels { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; z-index: 1; padding: 0 2px; } .realistec-stereo-hist-compare-container .realistec-stereo-hist-tone-label { flex: 1; text-align: center; font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.55); padding: 5px 2px 4px; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } .realistec-stereo-hist-compare-container .realistec-stereo-hist-tone-label:first-child { text-align: left; padding-left: 10px; } .realistec-stereo-hist-compare-container .realistec-stereo-hist-tone-label:last-child { text-align: right; padding-right: 10px; } #hist-compare-canvas { display: block; width: 100%; height: auto; } .realistec-stereo-hist-slider-line { /* Vertical divider line down the histogram comparator. Was a flat white line at 0.7 alpha — readable but generic. Brand-tinted version uses the violet accent at moderate alpha so the divider reads as part of the modal's brand language while still standing out against the dark histogram backdrop. */ position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(139, 92, 246, 0.65); box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 2; } .realistec-stereo-hist-slider-handle { /* Drag handle on the comparator divider. Uses --modal-surface (= --rt-bg-3) so the handle reads as a recessed surface against the modal body, plus a 1px violet border so the affordance is visible without being loud. Was --realistec-surface (no border) — that token isn't defined inside the portaled .realistec-stereo-hist-modal scope so it was falling back to the hardcoded value, and the lack of border made the handle blend into the comparator backdrop at certain split positions. */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: var(--modal-surface, #14112e); border: 1px solid var(--modal-accent, #8b5cf6); border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(139, 92, 246, 0.12); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3; } .realistec-stereo-hist-slider-arrows { /* Triangle arrows ◀ ▶ inside the comparator handle. Two issues this rule addresses: 1. Color: was --realistec-text (near-white) but the arrows appear default-blue on macOS/iOS because U+25C0 (BLACK LEFT-POINTING TRIANGLE) and U+25B6 (BLACK RIGHT-POINTING TRIANGLE) default to EMOJI presentation on those systems — the OS renders them as colorful glyphs that ignore CSS `color`. Forcing text presentation (see #2) lets the violet color win. 2. Presentation: font-variant-emoji: text declaratively requests text-style rendering for these codepoints. Browser support is uneven — Firefox 108+ and Chrome 131+ honor it, Safari doesn't yet — so the JS markup also appends \uFE0E (variation selector for text presentation) after each glyph as a belt-and-suspenders fix. Either approach alone covers most browsers; together they cover everything modern. Color is --modal-text (the histogram modal's --modal-* scope, set on .realistec-stereo-hist-modal). Resolves to --rt-text via the modal layer — slightly off-white, reads as "subtle UI affordance" against the dark handle circle without competing with the histogram canvas. */ font-size: 10px; color: var(--modal-text, #f5f3ff); letter-spacing: 2px; font-variant-emoji: text; /* Sans-serif keeps the triangles geometric — some serif fallbacks on Windows render U+25C0/25B6 with subtle outlines that look off at this size. */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Symbol', 'Helvetica Neue', Arial, sans-serif; user-select: none; } .realistec-stereo-hist-img-label { position: absolute; bottom: 10px; padding: 4px 12px; background: rgba(0, 0, 0, 0.6); color: white; border-radius: 4px; font-size: 12px; font-weight: 600; pointer-events: none; z-index: 1; } .realistec-stereo-hist-label-left { left: 12px; } .realistec-stereo-hist-label-right { right: 12px; } /* Image Previews — secondary view below histograms */ .realistec-stereo-hist-image-previews { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; } .realistec-stereo-hist-image-previews-header { margin: 0; font-size: 12px; font-weight: 500; color: var(--realistec-text-secondary, #a8a3c9); text-align: center; flex-shrink: 0; } .realistec-stereo-hist-image-panels-row { display: flex; flex: 1; min-height: 0; /* 24px gap matches .realistec-stereo-hist-main's padding-left and padding-right, so the spacing AROUND the two panels (left of left panel, right of right panel) and the spacing BETWEEN them reads as a single consistent border. Was previously gap: 0 — the panels were flush against each other to give the now-removed .realistec-stereo-hist-or-badge a visual slot to sit in. With the badge gone the panels collapsed flush against each other, which made the inner border look thicker than the outer borders and broke the visual rhythm. */ gap: 24px; align-items: stretch; position: relative; } .realistec-stereo-hist-image-panel { /* Thumbnail card. Was --realistec-surface (a plugin-scoped token that doesn't reach this portaled modal — fell back to its hardcoded value). Switching to --modal-surface keeps the card visually elevated above the deeper --modal-bg body, gives the user a clear "selectable card on a backdrop" affordance, and references the modal's own variable scope. The selected-vs-resting distinction is carried by the violet border + glow rather than by alternating surface tones, so resting and selected states share one background — same brand pattern used by .realistec-stereo-type-card elsewhere. */ flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--modal-surface, #14112e); border: 2px solid var(--modal-border, #1f1b3a); border-radius: 8px; padding: 8px 8px 6px; overflow: hidden; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .realistec-stereo-hist-image-panel:hover { border-color: var(--modal-accent, #8b5cf6); } .realistec-stereo-hist-image-panel.realistec-stereo-hist-panel-selected { border-color: var(--modal-accent, #8b5cf6); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); /* Resting and selected cards share a single background (--modal-surface) — the selection state is signaled by the violet ring above. The previous version flipped to --realistec-surface-2 on selection, which produced two card tones that looked nearly identical (because both fallback values were close on the cosmic palette) and the selection state read mostly through the border anyway. */ background: var(--modal-surface, #14112e); } .realistec-stereo-hist-image-panel img { width: 100%; flex: 1; min-height: 0; object-fit: contain; border-radius: 4px; /* Letterbox color — transparent so the parent panel's surface shows through the negative space left by `object-fit: contain`. Was previously --realistec-text (near-white), which read as a hard light-theme rectangle around portrait/non-square images on the dark UI. Using transparent also means the selected-state surface change (--realistec-surface → --realistec-surface-2 on the parent) shows through the letterbox area, so a selected panel and its letterbox stay visually unified. */ background: transparent; } .realistec-stereo-hist-frame-label { font-size: 11px; font-weight: 600; color: var(--realistec-text-secondary, #a8a3c9); text-transform: uppercase; letter-spacing: 0.4px; flex-shrink: 0; } .realistec-stereo-hist-panel-selected .realistec-stereo-hist-frame-label { color: var(--realistec-primary, #8b5cf6); } /* Footer */ .realistec-stereo-hist-modal-footer { /* Same surface tone as the header and sidebar (--modal-surface = --rt-bg-3) so the modal's "elevated chrome" — header, sidebar, footer, thumbnail cards — all read as one consistent layer sitting above the deep --modal-bg body. Was previously the plugin-scoped --realistec-surface, which falls back to --rt-bg-2 outside the .realistec-stereo-upload-interface scope: subtly different from --modal-surface and broke the unified-elevation effect. */ display: flex; align-items: center; justify-content: flex-end; padding: 12px 20px; background: var(--modal-surface, #14112e); border-top: 1px solid var(--modal-border, #1f1b3a); flex-shrink: 0; } .realistec-stereo-hist-modal-footer-actions { display: flex; gap: 10px; } .realistec-stereo-hist-btn-primary { /* Mirrors Immersity's #realistec-mono-color-filter-modal .realistec-stereo-hist-btn-primary. Was previously a SOLID --realistec-link (#a78bfa, the LIGHTER violet) at rest, then darkened to --realistec-primary (#8b5cf6) on hover — which produced an inverted "press makes it look pressed-out" feel. The brand pattern is gradient → lighter gradient: violet→indigo at rest, lighter violet→indigo on hover, plus a soft drop shadow that grows to signal interactivity. */ padding: 8px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; font-family: inherit; background: var(--modal-gradient, linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)); color: white; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25); } .realistec-stereo-hist-btn-primary:hover { background: var(--modal-gradient-hover, linear-gradient(135deg, #a78bfa 0%, #818cf8 100%)); box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4); } /* Suppress the browser-default focus outline on click. The theme's style.css applies `outline: 2px solid var(--rt-violet)` to every button:focus globally (line 196 of style.css), and that rule has no carve-out for plugin modals — so clicking the Apply Changes button was painting a hard 2px ring on every press, which read as a border flash because the click + focus + transition stack rendered a single frame of the ring before the click released. Same fix pattern Immersity uses on its modal-close button (which has the same root cause). :focus alone covers mouse clicks (which shouldn't show a ring); :focus-visible adds a keyboard-only ring back, so accessibility is preserved. Specificity (0,2,0) beats the theme's button:focus (0,1,1) without needing !important. The keyboard ring uses a soft violet box-shadow rather than outline so it animates with the button's existing `transition: all 0.2s`. */ .realistec-stereo-hist-btn-primary:focus { outline: none; } .realistec-stereo-hist-btn-primary:focus-visible { outline: none; box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4), 0 0 0 3px rgba(139, 92, 246, 0.35); } .realistec-stereo-hist-btn-secondary { /* Mirrors Immersity's #realistec-mono-color-filter-modal .realistec-stereo-hist-btn-secondary. Was previously border: none with no border-color shift on hover — the button blended into the surrounding modal footer surface. The brand pattern is solid surface-2 background with a 1px border that shifts to brand violet on hover, so the button reads as "outlined button" rather than "blob on a panel". */ padding: 8px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: 1px solid var(--modal-border, #1f1b3a); font-family: inherit; background: var(--modal-surface, #14112e); color: var(--modal-text, #f5f3ff); } .realistec-stereo-hist-btn-secondary:hover { background: var(--modal-border, #1f1b3a); border-color: var(--modal-accent, #8b5cf6); /* Preserve resting text color — without this, the theme's button:hover rule (style.css line 660) would set color:#fff !important. That's fine here since the bg is also dark, but explicit is safer in case the theme rule's specificity changes. Same trick the Immersity reference uses (with the same comment). */ color: var(--modal-text, #f5f3ff); } /* Same click-flash suppression as .realistec-stereo-hist-btn-primary above — see that block for the full rationale. The keyboard ring uses a violet box-shadow that respects the secondary button's resting border, so the ring sits OUTSIDE the existing 1px border without erasing it (unlike `outline` which would draw on top). */ .realistec-stereo-hist-btn-secondary:focus { outline: none; } .realistec-stereo-hist-btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.30); } .realistec-stereo-hist-btn-reference { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; border: 2px solid var(--realistec-primary, #8b5cf6); background: var(--realistec-surface, #0d0b1f); color: var(--realistec-primary, #8b5cf6); } .realistec-stereo-hist-btn-reference:hover { background: var(--realistec-primary, #8b5cf6); color: white; } .realistec-stereo-hist-btn-reference:active { transform: scale(0.97); } /* ============================================= CUSTOM CROP OPTION ============================================= */ .realistec-stereo-custom-crop-option { margin: 20px 0; padding: 15px; background: var(--realistec-surface, #0d0b1f); border: 1px solid var(--realistec-border, #1f1b3a); border-radius: 8px; display: none; /* Hidden by default, shown when standard type selected */ } .realistec-stereo-standard-upload ~ .realistec-stereo-custom-crop-option, .realistec-stereo-upload-interface[data-upload-type="standard"] .realistec-stereo-custom-crop-option { display: block; } .realistec-stereo-custom-crop-option.enabled { background: var(--realistec-surface-2, #14112e); border-color: var(--realistec-link, #a78bfa); } .realistec-stereo-custom-crop-option label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; } .realistec-stereo-custom-crop-option input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .realistec-stereo-crop-description { margin-top: 8px; font-size: 13px; color: var(--realistec-text-secondary, #a8a3c9); margin-left: 28px; } .realistec-stereo-crop-indicator { display: inline-block; margin-left: 15px; padding: 4px 10px; background: var(--realistec-success, #10b981); color: white; border-radius: 4px; font-size: 12px; font-weight: 500; } .realistec-stereo-edit-crop-btn { margin-left: 10px; padding: 4px 12px; background: var(--realistec-surface-2, #14112e); color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; transition: background 0.2s; } .realistec-stereo-edit-crop-btn:hover { background: var(--realistec-border, #1f1b3a); } /* ============================================= MATCH COLOR OPTION - NEW ============================================= */ .realistec-stereo-match-color-option { margin: 20px 0; padding: 15px; background: var(--realistec-surface, #0d0b1f); border: 1px solid var(--realistec-border, #1f1b3a); border-radius: 8px; display: none; /* Hidden by default, shown via JS when files uploaded */ } .realistec-stereo-match-color-option.enabled { /* Amber warning tint stays hardcoded — there's no theme token for a warning/caution color. Background uses the dark amber tint (#3a2a1a) already used elsewhere in the file for the same purpose, so it reads on the dark cosmic surfaces. */ background: #3a2a1a; border-color: #e67e22; } .realistec-stereo-match-color-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .realistec-stereo-match-color-title { font-weight: 600; font-size: 14px; color: var(--realistec-text, #f5f3ff); } .realistec-stereo-match-color-help { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--realistec-surface-2, #14112e); color: white; border-radius: 50%; font-size: 11px; font-weight: bold; cursor: help; transition: background 0.2s; } .realistec-stereo-match-color-help:hover { /* Was --realistec-text (near-white) which made the white "?" glyph invisible against the hover background. Same kind of light-theme leak as the histogram comparator — bulk substitution mapped a hover-color hex to a text token by mistake. Use the brand violet at low alpha so the hover state reads as "interactive" while keeping the white glyph readable. */ background: rgba(139, 92, 246, 0.4); } .realistec-stereo-match-color-selector { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 10px; } .realistec-stereo-match-color-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 14px; background: var(--realistec-surface, #0d0b1f); border: 1px solid var(--realistec-border, #1f1b3a); border-radius: 6px; transition: all 0.2s; } .realistec-stereo-match-color-radio:hover { border-color: var(--realistec-text-secondary, #a8a3c9); background: var(--realistec-surface, #0d0b1f); } .realistec-stereo-match-color-radio input[type="radio"] { width: 16px; height: 16px; margin: 0; cursor: pointer; } .realistec-stereo-match-color-radio input[type="radio"]:checked + .realistec-stereo-radio-label { font-weight: 600; color: #e67e22; } .realistec-stereo-match-color-radio:has(input[type="radio"]:checked) { border-color: #e67e22; background: #3a2a1a; } .realistec-stereo-radio-label { font-size: 13px; color: var(--realistec-text, #f5f3ff); white-space: nowrap; } .realistec-stereo-match-color-description { font-size: 12px; color: var(--realistec-text-secondary, #a8a3c9); margin: 0; line-height: 1.5; } /* Match Color Indicator when enabled */ .realistec-stereo-match-color-option.enabled .realistec-stereo-match-color-label::after { /* Material Symbols 'check' ligature replaces the previous Unicode ✓ for consistency with the rest of the plugin's icon family. The font-family declaration activates the Material Symbols font on this pseudo-element only — same approach used by .realistec-stereo-previews-hint::before and .realistec-stereo-upload-header h3::before. The ligature feature is enabled explicitly so 'check' is substituted for the icon glyph rather than rendered as the literal text "check" on browsers that don't honor 'liga' by default. The amber background stays hardcoded — there's no theme token for warning amber and the existing dark-theme-amber-tint pattern (#e67e22 / #3a2a1a) is used elsewhere in this file for the same purpose. */ content: 'check'; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; text-transform: none; letter-spacing: normal; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; font-variant-ligatures: common-ligatures; white-space: nowrap; word-wrap: normal; direction: ltr; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #e67e22; color: white; border-radius: 50%; /* 14px glyph in a 20px container reads cleanly without crowding the circle's edge — Material Symbols' default font-size: 24 would overflow the circle bounds. */ font-size: 14px; margin-left: auto; } /* ============================================= CROP MODAL OVERLAY ============================================= */ .realistec-stereo-crop-modal { /* Modal-scoped variable layer — mirrors the Immersity plugin's `.realistec-mono-modal` declarations so the Crop modal and the Immersity Edit Depth modal stay visually identical. Each --modal-* token aliases a theme `--rt-*` token (so a palette change in style.css propagates here automatically) with a hardcoded fallback after the comma for the case where the theme is unavailable. Mapping (kept aligned with Immersity for cross-plugin consistency): --modal-bg -> --rt-bg-2 (modal body, sidebar, footer) --modal-surface -> --rt-bg-3 (header, slightly elevated areas) --modal-border -> #1f1b3a (hardcoded — theme's --rt-border is rgba) --modal-text -> --rt-text --modal-text-secondary -> --rt-text-muted --modal-accent -> --rt-violet (solid violet for handles, indicators) --modal-gradient -> --rt-gradient (CTA buttons) --modal-gradient-hover -> --rt-gradient-hover */ --modal-bg: var(--rt-bg-2, #0d0b1f); --modal-surface: var(--rt-bg-3, #14112e); --modal-border: #1f1b3a; --modal-text: var(--rt-text, #f5f3ff); --modal-text-secondary: var(--rt-text-muted, #a8a3c9); --modal-accent: var(--rt-violet, #8b5cf6); --modal-gradient: var(--rt-gradient, linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)); --modal-gradient-hover: var(--rt-gradient-hover, linear-gradient(135deg, #a78bfa 0%, #818cf8 100%)); display: none; position: fixed; inset: 0; z-index: 999999; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); align-items: center; justify-content: center; overflow-y: auto; box-sizing: border-box; opacity: 0; transition: opacity 0.3s ease; } .realistec-stereo-crop-modal.active { display: flex; opacity: 1; align-items: center; justify-content: center; } .realistec-stereo-crop-modal-content { /* Modal body uses --modal-bg (= --rt-bg-2) — the deeper of the two modal surface tokens. Sub-regions like the header use the lighter --modal-surface (= --rt-bg-3) to create vertical separation. */ background: var(--modal-bg, #0d0b1f); border-radius: 12px; width: 95vw; max-width: 1200px; height: 90vh; max-height: 800px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; display: flex; flex-direction: column; transform: scale(0.95) translateY(-20px); transition: transform 0.3s ease; flex-shrink: 0; } .realistec-stereo-crop-modal.active .realistec-stereo-crop-modal-content { transform: scale(1) translateY(0); } /* ---- Header ---- */ .realistec-stereo-crop-modal-header { /* Mirrors the Immersity .realistec-mono-modal-header — uses --modal-surface (= --rt-bg-3) so the header sits a step lighter than the modal body (--modal-bg = --rt-bg-2). Was previously bound to --realistec-surface (= --rt-bg-2), which made the header and body identical and removed the visual separation. */ display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--modal-surface, #14112e); border-bottom: 1px solid var(--modal-border, #1f1b3a); flex-shrink: 0; gap: 12px; position: relative; } .realistec-stereo-crop-modal-header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .realistec-stereo-crop-modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--modal-text, #f5f3ff); white-space: nowrap; /* Display font — see .realistec-stereo-hist-modal-header h3 above for the rationale (portaled modal, doesn't inherit the .realistec-upload-interface- scoped display-font rule). */ font-family: var(--rt-font-display, 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); letter-spacing: -0.01em; } /* Mode tabs — pill group matching film plugin exactly */ .realistec-stereo-crop-mode-tabs { display: flex; gap: 4px; background: var(--realistec-surface-2, #14112e); border-radius: 8px; padding: 3px; } .realistec-stereo-crop-mode-tab { padding: 6px 16px; font-size: 13px; font-weight: 500; color: var(--realistec-text-secondary, #a8a3c9); background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; font-family: inherit; } .realistec-stereo-crop-mode-tab:hover { color: var(--realistec-text, #f5f3ff); background: rgba(139, 92, 246, 0.1); } /* Suppress the browser-default focus outline on click. The outline was producing a brief white flash because outline doesn't participate in the tab's `transition: all 0.2s ease` and renders before the .active class is applied via JS — same bug class fixed on .realistec-stereo-type-options earlier in this file. The mobile blue tap-highlight is handled by the global -webkit-tap-highlight-color reset elsewhere. */ .realistec-stereo-crop-mode-tab:focus { outline: none; } /* Keyboard-only focus indicator — implemented as box-shadow rather than outline so it animates with the tab's existing transition and matches the .active state's violet language. :focus-visible only triggers on keyboard navigation, not mouse clicks, so this is the correct accessibility behavior — mouse users don't see a focus ring on click. */ .realistec-stereo-crop-mode-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); } .realistec-stereo-crop-mode-tab.active { color: white; background: var(--realistec-primary, #8b5cf6); } /* When a tab is both focused AND active, layer a slightly stronger focus ring on top of the active state so the focus indicator stays distinguishable from the selected state for keyboard users. */ .realistec-stereo-crop-mode-tab.active:focus-visible { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.4); } .realistec-stereo-crop-close-btn { background: none; border: none; font-size: 24px; color: var(--realistec-text-secondary, #a8a3c9); cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; } .realistec-stereo-crop-close-btn:hover { color: var(--realistec-error, #ef4444); background: rgba(239, 68, 68, 0.1); } /* ---- Body: viewport + sidebar ---- */ .realistec-stereo-crop-modal-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } .realistec-stereo-crop-editor-viewport { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 16px; gap: 0; overflow: hidden; position: relative; } /* ---- Canvas Container — position:relative for realistec-stereo-crop-box handles ---- */ .realistec-stereo-crop-canvas-container { position: relative; display: flex; justify-content: center; align-items: flex-start; border-radius: 8px; padding: 10px; min-height: 200px; flex: none; width: 100%; box-sizing: border-box; border: 1px solid var(--realistec-surface-2, #14112e); overflow: hidden; /* Checkerboard pattern — dark cosmic tones, matching the Immersity plugin's canvas wrapper. Was originally a light gray-on-gray checker (#d5d8dc on #e8eaed) which the bulk color substitution mapped to surface tokens that read as light lavender. Hardcoded here because there are no theme tokens for "alpha-channel grid darker stripe / lighter base" and the values need to be tuned together as a pair. */ background-image: linear-gradient(45deg, #161a26 25%, transparent 25%), linear-gradient(-45deg, #161a26 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #161a26 75%), linear-gradient(-45deg, transparent 75%, #161a26 75%); background-color: #12151f; background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } #crop-canvas { display: block; max-width: 100%; border-radius: 4px; } /* ---- Align panel: always show border-bottom ---- */ #crop-align-panel { border-bottom: 1px solid var(--realistec-border, #1f1b3a); } /* ---- Crop panel: always show border-bottom ---- */ #crop-crop-panel { border-bottom: 1px solid var(--realistec-border, #1f1b3a); } /* ---- Frame scrubber group: border-bottom divider ---- */ .realistec-stereo-frame-scrubber-group { border-bottom: 1px solid var(--realistec-border, #1f1b3a); padding-bottom: 12px; } /* ---- Close button ---- */ .realistec-stereo-crop-close-btn-abs { flex-shrink: 0; } /* ---- Sidebar ---- */ .realistec-stereo-crop-editor-sidebar { /* Mirrors the Immersity .realistec-mono-editor-sidebar — uses --modal-bg (= --rt-bg-2) so the sidebar matches the modal body's deeper surface. The header (above) uses --modal-surface so the horizontal band between header and sidebar reads as a step change. Was previously --realistec-surface (also --rt-bg-2 in the resolved value) but bound to the plugin scope; switching to --modal-bg keeps the variable reference consistent with the Immersity plugin. */ width: 260px; flex-shrink: 0; background: var(--modal-bg, #0d0b1f); border-left: 1px solid var(--modal-border, #1f1b3a); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; } .realistec-stereo-crop-editor-sidebar::-webkit-scrollbar { width: 6px; } .realistec-stereo-crop-editor-sidebar::-webkit-scrollbar-track { background: transparent; } .realistec-stereo-crop-editor-sidebar::-webkit-scrollbar-thumb { background: var(--modal-border, #1f1b3a); border-radius: 3px; } .realistec-stereo-crop-editor-sidebar::-webkit-scrollbar-thumb:hover { background: var(--modal-text-secondary, #a8a3c9); } .realistec-stereo-crop-sidebar-section { padding: 16px; border-bottom: 1px solid var(--realistec-border, #1f1b3a); } .realistec-stereo-crop-sidebar-section:last-child { border-bottom: none; } .realistec-stereo-crop-sidebar-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--realistec-text-secondary, #a8a3c9); margin: 0 0 12px 0; } /* Controls inside sidebar stack vertically */ .realistec-stereo-crop-editor-sidebar .realistec-stereo-crop-control-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 12px; } .realistec-stereo-crop-editor-sidebar .realistec-stereo-crop-control-group:last-child { margin-bottom: 0; } .realistec-stereo-crop-editor-sidebar .realistec-stereo-crop-control-group label, .realistec-stereo-crop-editor-sidebar .realistec-stereo-crop-control-group .realistec-stereo-crop-frame-label-right { font-size: 12px; font-weight: 500; color: var(--realistec-text-secondary, #a8a3c9); white-space: nowrap; } .realistec-stereo-crop-editor-sidebar .realistec-stereo-crop-control-group select { /* Mirrors the Immersity .realistec-mono-crop-control-group select. Three notable differences vs. a default