/* ===== Phase 30: View Mode ===== Everything keys off one class on , set by js/viewMode.js. Built from the existing theme tokens so dark mode needs nothing extra, and logical properties throughout so Arabic and Kurdish mirror correctly. The "on" state borrows the blue pill palette the app already uses for informational states — it has to read as "a mode you are in", not as a warning, because people will leave it on for a whole shift. */ /* ---------- header button ---------- */ .vm-topbar-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:11px; cursor:pointer; background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink); font:600 13px/1 'Inter',sans-serif; box-shadow:var(--shadow); margin-inline-start:auto; -webkit-tap-highlight-color:transparent; } .vm-topbar-btn:hover{ background:var(--surface-hover); } .vm-topbar-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .vm-topbar-btn svg{ color:var(--steel); flex:0 0 auto; } .vm-topbar-btn.is-on{ background:var(--pill-blue-bg); border-color:var(--pill-blue-text); color:var(--pill-blue-text); box-shadow:0 0 0 3px var(--pill-blue-border); } .vm-topbar-btn.is-on:hover{ background:var(--pill-blue-bg); } .vm-topbar-btn.is-on svg{ color:var(--pill-blue-text); } /* The switch pip: a small track that fills when the mode is on, so the state reads at a glance even with the label hidden on phones. */ .vm-pip{ position:relative; width:26px; height:15px; border-radius:15px; flex:0 0 auto; background:var(--pill-gray-bg); border:1px solid var(--pill-gray-border); transition:background .15s, border-color .15s; } .vm-pip::after{ content:""; position:absolute; top:2px; inset-inline-start:2px; width:9px; height:9px; border-radius:50%; background:var(--ink-soft); transition:inset-inline-start .15s, background .15s; } .vm-topbar-btn.is-on .vm-pip{ background:var(--pill-blue-text); border-color:var(--pill-blue-text); } .vm-topbar-btn.is-on .vm-pip::after{ inset-inline-start:13px; background:var(--panel); } /* The View Mode button now owns the push to the end of the bar; Reminders sits directly after it. When the EOTM strip is showing it already fills the bar, so the auto margin would only open a gap. */ .vm-topbar-btn ~ .rem-topbar-btn{ margin-inline-start:0; } .eotm-strip:not(.hidden) ~ .vm-topbar-btn{ margin-inline-start:0; } @media (max-width:640px){ .vm-topbar-label{ display:none; } .vm-topbar-btn{ padding:9px 10px; gap:6px; } } /* ---------- card modal note ---------- */ /* Only shown when the card would otherwise be editable: when the person has view-only access, app.js shows #cardReadonlyNote instead, and offering "Allow editing" there would be a promise the server won't keep. */ .vm-note{ display:none; } html.nx-view-mode #cardReadonlyNote.hidden + .vm-note{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--pill-blue-soft-bg); border:1px solid var(--pill-blue-soft-border); color:var(--pill-blue-soft-text); font-size:12.5px; line-height:1.4; padding:9px 10px 9px 12px; border-radius:10px; } .vm-note svg{ flex:0 0 auto; } .vm-note-text{ flex:1 1 180px; } .vm-unlock-btn{ flex:0 0 auto; cursor:pointer; border-radius:8px; padding:7px 11px; background:var(--panel); border:1px solid var(--pill-blue-soft-border); color:var(--pill-blue-soft-text); font:600 12px/1 'Inter',sans-serif; } .vm-unlock-btn:hover{ background:var(--surface-hover); } .vm-unlock-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* ---------- card modal lock ---------- */ /* Mutating controls. Mirrors CARD_MUTATORS in viewMode.js, which is the part that actually refuses the click. */ html.nx-view-mode #cardOverlay #cardSaveBtn, html.nx-view-mode #cardOverlay #cardDeleteBtn, html.nx-view-mode #cardOverlay #cardTransferBtn, html.nx-view-mode #cardOverlay #addPartBtn, html.nx-view-mode #cardOverlay #cardAddReminderBtn, html.nx-view-mode #cardOverlay [data-remove-part], html.nx-view-mode #cardOverlay [data-move-part], html.nx-view-mode #cardOverlay [data-transfer-part], html.nx-view-mode #cardOverlay [data-remove-part-file], html.nx-view-mode #cardOverlay .file-upload-btn, html.nx-view-mode #cardOverlay [data-rem-done], html.nx-view-mode #cardOverlay [data-rem-snooze], html.nx-view-mode #cardOverlay [data-rem-reopen]{ display:none !important; } /* Readonly text fields: still selectable, never a caret. The quieter fill is the visual cue that tapping will not type. */ html.nx-view-mode #cardOverlay input[data-vm-ro], html.nx-view-mode #cardOverlay textarea[data-vm-ro]{ background:var(--surface-soft); caret-color:transparent; cursor:text; -webkit-user-select:text; user-select:text; } html.nx-view-mode #cardOverlay textarea[data-vm-ro]{ resize:none; } html.nx-view-mode #cardOverlay input[data-vm-ro]:focus, html.nx-view-mode #cardOverlay textarea[data-vm-ro]:focus{ box-shadow:none; border-color:var(--panel-edge); } /* Pickers can't be readonly, so a touch on one falls straight through to the scroll container instead. Keeps full contrast: the value is the point. */ html.nx-view-mode #cardOverlay select, html.nx-view-mode #cardOverlay input[type=checkbox], html.nx-view-mode #cardOverlay input[type=radio], html.nx-view-mode #cardOverlay input[type=color], html.nx-view-mode #cardOverlay input[type=range], html.nx-view-mode #cardOverlay input[type=date], html.nx-view-mode #cardOverlay input[type=time], html.nx-view-mode #cardOverlay input[type=datetime-local], html.nx-view-mode #cardOverlay input[type=month], html.nx-view-mode #cardOverlay input[type=week]{ pointer-events:none; background:var(--surface-soft); } html.nx-view-mode #cardOverlay select{ -webkit-appearance:none; appearance:none; } /* The version-status pill stays as a label; it just stops cycling. */ html.nx-view-mode #cardOverlay .part-status-btn{ pointer-events:none; cursor:default; } /* Keep the sheet scrolling smoothly under a finger on phones. */ html.nx-view-mode #cardOverlay .modal-body{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; } /* ---------- board ---------- */ html.nx-view-mode #addCardBtn, html.nx-view-mode #addLaneBtn, html.nx-view-mode #board [data-add-lane], html.nx-view-mode #board [data-del-card], html.nx-view-mode #board [data-edit-lane], html.nx-view-mode #board [data-move-lane]{ display:none !important; } /* The lane footer only ever holds "+ Add Machine"; without it the footer would be an empty strip. */ html.nx-view-mode #board .lane-foot{ display:none; } /* No drag ghost on long-press, and a pointer rather than a grab hand. */ html.nx-view-mode #board .card{ -webkit-user-drag:none; cursor:pointer; }