/*
* rd-dual_opt.css
*
* Visual styles for the "Compare Angles" / dual-view overlay (.rd-dual and its
* children), TWIN-ONLY (resources/views/viewmaping/optimized/homevideojs_opt.blade.php).
*
* The overlay's markup and all of its behaviour (open/close, synced playback,
* per-pane zoom + pan, camera pickers, loop/speed) already exist and are built
* entirely in JS — see the "COMPARE ANGLES overlay" IIFE in
* assets/js/player-redesign_opt.js (search for `.rd-dual`). That script
* creates
...
on demand and appends it straight to
* , but until now nothing styled it, so it rendered as unstyled
* block-level divs. This file is that missing stylesheet.
*
* Design source: the "Dual View" mockup shared via Claude Design
* (COMPARE ANGLES head bar + synced badge + exit, a two-pane video stage with
* a camera picker and zoom control per pane, and a bottom transport bar with
* play / seek / time / speed / loop). The mockup's own placeholder palette
* (Barlow / IBM Plex Mono on near-black #0b0d10 with a #e8232a accent) has
* been swapped for this app's OWN already-established redesign tokens so the
* overlay reads as part of the same "rd-" chrome as the app bar / nav rail /
* camera-rail buttons it sits inside, rather than a visually distinct import:
* - accent red -> #e1261c (matches .rd-ab-rec, .rd-cam-act.on, etc.)
* - panel bg -> #14171f (matches .rd-appbar / .rd-navrail)
* - borders -> #252a35 / #282d37 (matches the rest of the redesign)
* - text -> #f2f4f8 / #e6e9f0 / #c3cad9 / #8b93a8
* - font -> 'Inter Tight' (same stack .rd-appbar declares; falls
* back to system-ui the same way the rest of the
* redesign chrome does today)
* Layout/structure (head bar, two-pane stage, per-pane zoom + picker footer,
* bottom transport bar) follows the mockup closely, adapted to the exact DOM
* the JS already produces — no new elements are introduced except the
* decorative "ANGLE A/B" corner badges, added purely via ::before so no JS
* changes were needed for this pass.
*
* Load order: after the other "rd-" redesign stylesheets
* (assets/player2/css/filter-drawer_opt.css / filter-drawerv2_opt.css) and
* BEFORE assets/css/viewmapvideojs-mobile-responsive.css, which already ships
* mobile overrides for .rd-dual-stage / .rd-dual-head and must win on small
* screens (that file is loaded last in on purpose).
*/
.rd-dual {
--rdd-bg: #0b0d12;
--rdd-panel: #14171f;
--rdd-panel-2: #171a21;
--rdd-border: #252a35;
--rdd-border-2: #282d37;
--rdd-border-hover: #3a4256;
--rdd-text: #f2f4f8;
--rdd-text-2: #e6e9f0;
--rdd-text-muted: #c3cad9;
--rdd-text-dim: #8b93a8;
--rdd-text-dimmer: #5b6274;
--rdd-accent: #e1261c;
--rdd-accent-hover: #ff4438;
--rdd-font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--rdd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}
/* ---- root overlay ------------------------------------------------------- */
/* left/top/width/height are set inline by place() in player-redesign_opt.js;
this only supplies appearance + the flex column layout. */
.rd-dual[hidden] { display: none !important; }
.rd-dual {
position: fixed;
z-index: 100000;
display: flex;
flex-direction: column;
background: var(--rdd-bg);
color: var(--rdd-text);
font-family: var(--rdd-font);
box-shadow: 0 0 0 1px var(--rdd-border), 0 24px 64px rgba(0, 0, 0, .55);
overflow: hidden;
}
/* ---- head bar: title · synced badge · exit ------------------------------ */
.rd-dual-head {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 12px;
padding: 11px 16px;
background: var(--rdd-panel);
border-bottom: 1px solid var(--rdd-border);
}
.rd-dual-title {
flex: 0 0 auto;
font: 700 13px/1 var(--rdd-font);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--rdd-text);
}
.rd-dual-hint {
flex: 0 1 auto;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 10px 5px 8px;
border-radius: 999px;
background: var(--rdd-panel-2);
border: 1px solid var(--rdd-border-2);
font: 600 11px/1.2 var(--rdd-mono);
color: var(--rdd-text-dim);
letter-spacing: .02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rd-dual-hint::before {
content: "";
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rdd-accent);
}
.rd-dual-exit {
flex: 0 0 auto;
margin-left: auto;
appearance: none;
cursor: pointer;
font: 700 10.5px/1 var(--rdd-font);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--rdd-text-muted);
background: transparent;
border: 1px solid var(--rdd-border-2);
border-radius: 7px;
padding: 8px 13px;
transition: border-color .12s, color .12s, background-color .12s;
}
.rd-dual-exit:hover {
color: #fff;
border-color: var(--rdd-border-hover);
background: #1a1e28;
}
/* ---- stage: the two video panes ----------------------------------------- */
.rd-dual-stage {
flex: 1 1 auto;
min-height: 0;
display: flex;
gap: 2px;
padding: 2px 2px 0;
background: var(--rdd-border);
overflow: hidden;
}
.rd-dual-pane {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
background: var(--rdd-bg);
}
/* video area */
.rd-dual-vwrap {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: repeating-linear-gradient(135deg, #171a21 0 10px, #10131a 10px 20px);
}
.rd-dual-pane.zoomed .rd-dual-vwrap { cursor: grab; }
.rd-dual-pane.zoomed .rd-dual-vwrap:active { cursor: grabbing; }
.rd-dual-v {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
display: block;
}
/* decorative angle badge, top-left of each pane — CSS-only, no DOM change */
.rd-dual-vwrap::before {
position: absolute;
top: 10px;
left: 12px;
z-index: 2;
font: 700 10px/1 var(--rdd-mono);
letter-spacing: .06em;
color: var(--rdd-text-muted);
background: rgba(11, 13, 18, .72);
border-left: 3px solid var(--rdd-accent);
border-radius: 4px;
padding: 5px 9px 5px 7px;
pointer-events: none;
}
.rd-dual-pane[data-p="a"] .rd-dual-vwrap::before { content: "ANGLE A"; }
.rd-dual-pane[data-p="b"] .rd-dual-vwrap::before { content: "ANGLE B"; }
/* loading overlay */
.rd-dual-load {
position: absolute;
inset: 0;
z-index: 3;
display: none; /* toggled to flex by showLoad() in JS */
align-items: center;
justify-content: center;
background: rgba(11, 13, 18, .55);
}
.rd-dual-spin {
width: 34px;
height: 34px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, .15);
border-top-color: var(--rdd-accent);
animation: rd-dual-spin .85s linear infinite;
}
@keyframes rd-dual-spin { to { transform: rotate(360deg); } }
/* per-pane zoom control — floating pill over the bottom of the video,
shown on hover/zoomed so it doesn't sit over the picture at all times */
.rd-dual-zoomctl {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 3;
display: flex;
align-items: center;
gap: 9px;
padding: 6px 11px;
border-radius: 999px;
background: rgba(11, 13, 18, .75);
border: 1px solid rgba(255, 255, 255, .08);
opacity: 0;
transform: translateY(4px);
transition: opacity .15s, transform .15s;
pointer-events: none;
}
.rd-dual-pane:hover .rd-dual-zoomctl,
.rd-dual-pane.zoomed .rd-dual-zoomctl {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.rd-dual-zoomctl i {
flex: 0 0 auto;
font-size: 10.5px;
color: var(--rdd-text-dim);
}
.rd-dual-zoom { flex: 1 1 auto; min-width: 0; }
.rd-dual-zpct {
flex: 0 0 auto;
width: 36px;
text-align: right;
font: 600 10.5px/1 var(--rdd-mono);
color: var(--rdd-text-dim);
}
/* camera picker footer */
.rd-dual-pk {
flex: 0 0 auto;
padding: 9px 10px;
background: var(--rdd-panel);
border-top: 1px solid var(--rdd-border);
}
.rd-dual-sel {
width: 100%;
appearance: none;
-webkit-appearance: none;
background-color: var(--rdd-panel-2);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b93a8'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
color: var(--rdd-text-2);
border: 1px solid var(--rdd-border-2);
border-radius: 7px;
padding: 5px 30px 5px 11px;
font: 600 12px/1.2 var(--rdd-font);
cursor: pointer;
}
.rd-dual-sel:hover { border-color: var(--rdd-border-hover); }
.rd-dual-sel:focus { outline: none; border-color: var(--rdd-accent); }
.rd-dual-sel option:disabled { color: var(--rdd-text-dimmer); }
/* ---- bottom transport bar ------------------------------------------------ */
.rd-dual-bar {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: var(--rdd-panel);
border-top: 1px solid var(--rdd-border);
}
.rd-dual-play {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: var(--rdd-accent);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: filter .12s;
}
.rd-dual-play:hover { filter: brightness(1.12); }
.rd-dual-seek { flex: 1 1 auto; min-width: 80px; }
.rd-dual-time {
flex: 0 0 auto;
font: 600 12.5px/1 var(--rdd-mono);
color: var(--rdd-text-2);
white-space: nowrap;
}
.rd-dual-rate {
flex: 0 0 auto;
min-width: 44px;
text-align: center;
font: 600 11.5px/1 var(--rdd-mono);
color: var(--rdd-text-muted);
background: var(--rdd-panel-2);
border: 1px solid var(--rdd-border-2);
border-radius: 7px;
padding: 8px 10px;
cursor: pointer;
transition: border-color .12s, color .12s;
}
.rd-dual-rate:hover { color: #fff; border-color: var(--rdd-border-hover); }
.rd-dual-loop {
flex: 0 0 auto;
font: 700 10.5px/1 var(--rdd-font);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--rdd-text-muted);
background: var(--rdd-panel-2);
border: 1px solid var(--rdd-border-2);
border-radius: 7px;
padding: 9px 14px;
cursor: pointer;
transition: background-color .12s, border-color .12s, color .12s;
}
.rd-dual-loop:hover { color: #fff; border-color: var(--rdd-border-hover); }
.rd-dual-loop.on { background: var(--rdd-accent); border-color: var(--rdd-accent); color: #fff; }
/* ---- range inputs (seek + zoom) ------------------------------------------ */
/* Native has no cross-browser way to auto-color "played"
vs "remaining" track from a single background rule. Firefox exposes
::-moz-range-progress (fills itself natively — no JS needed). WebKit/Blink
have no equivalent, so the fill there is a background gradient stopped at
a --pct custom property; rd-dual-fill.js (a small, isolated, read-only
rAF loop — no interaction with player-redesign_opt.js) keeps --pct in
sync with each slider's live value, whether it changed by drag or by the
playback loop calling .val() directly.
NOTE: once ::-webkit-slider-runnable-track gets ANY custom background,
Chrome's built-in accent-color fill is discarded for that track — that's
why accent-color alone (no track override) is not a substitute here. */
.rd-dual-seek,
.rd-dual-zoom {
--pct: 0%;
appearance: none;
-webkit-appearance: none;
accent-color: var(--rdd-accent);
background: transparent;
height: 16px;
margin: 0;
cursor: pointer;
}
.rd-dual-seek::-webkit-slider-runnable-track,
.rd-dual-zoom::-webkit-slider-runnable-track {
height: 5px;
border-radius: 999px;
background: linear-gradient(to right,
var(--rdd-accent) 0%, var(--rdd-accent) var(--pct),
var(--rdd-border-2) var(--pct), var(--rdd-border-2) 100%);
}
.rd-dual-seek::-webkit-slider-thumb,
.rd-dual-zoom::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -5.5px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--rdd-accent);
box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.rd-dual-zoom::-webkit-slider-thumb { width: 13px; height: 13px; border-width: 2.5px; margin-top: -4.5px; }
.rd-dual-seek::-moz-range-track,
.rd-dual-zoom::-moz-range-track {
height: 5px;
border-radius: 999px;
background: var(--rdd-border-2);
}
.rd-dual-seek::-moz-range-progress,
.rd-dual-zoom::-moz-range-progress {
height: 5px;
border-radius: 999px;
background: var(--rdd-accent);
}
.rd-dual-seek::-moz-range-thumb,
.rd-dual-zoom::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--rdd-accent);
box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.rd-dual-zoom::-moz-range-thumb { width: 13px; height: 13px; border-width: 2.5px; }
/* ---- toast ---------------------------------------------------------------*/
.rd-dual-toast {
position: absolute;
left: 50%;
bottom: 78px;
transform: translateX(-50%);
z-index: 5;
max-width: 80%;
text-align: center;
font: 600 12px/1.3 var(--rdd-font);
color: var(--rdd-text-2);
background: var(--rdd-panel-2);
border: 1px solid var(--rdd-border-2);
border-radius: 8px;
padding: 10px 16px;
box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.rd-dual-toast[hidden] { display: none; }
/* ---- camera-rail "Compare angles" button lit while .rd-dual is open ----- */
/* (filter-drawer_opt.css already styles the base .rd-cam-act pill; this just
adds the active/on state for the dual-view action specifically, matching
the pattern already used by .rd-cam-act.rd-cam-intercut.on.) */
.rd-cam-act[data-rd-cam="dual"].on { background: #e1261c; border-color: #e1261c; color: #fff; }
.rd-cam-act[data-rd-cam="dual"].on i { color: #fff; }
/* Compare Angles suppresses floating chrome that would otherwise sit on top
of the split (see the comment on document.body.classList.add("rd-dual-on")
in player-redesign_opt.js) — nothing enforced this until now. */
body.rd-dual-on .expand-more-btn,
body.rd-dual-on .more-buttons-wrapper,
body.rd-dual-on .canvas-color-picker,
body.rd-dual-on .toggle-game-zoom { display: none !important; }
.rd-dual-bar input[type='range'],.rd-dual-zoomctl input[type='range']
{
background-color : unset;
overflow:visible;
}
.rd-dual-bar input[type='range']::-webkit-slider-thumb
{
margin-top:-3px;
}
.rd-dual-zoomctl input[type='range']::-webkit-slider-thumb
{
margin-top:-2px;
}
.rd-dual-exit
{
background: #e1261c !important;
color: #fff !important;
}