/* SM-552 -- the shared Bookmarks component: the add-control mounted on the * six commentable surfaces + the backing-tracks player (static/js/ * player.js), and the Dashboard mini-card's popover * (templates/me/dashboard.html). Every color below is an existing theme.css * token EXCEPT .bkm-track-highlight's two literals, which are a deliberate, * documented exception -- see that rule's own comment. * * SM-555 adds: the admin-only green assign button (.bkm-admin-assign, its * canon color sourced from static/tools/shared/play-stop-button.css and * equality-pinned in community/tests_sm555_admin_assign.py) and the ONE * shared page-centered modal pattern (.bkm-modal-backdrop/.bkm-modal-dialog) * used by BOTH the new admin assign popover and the restyled Dashboard * mini-card popover -- never two implementations of "centered overlay" on * this page. var() fallbacks throughout the modal rules exist because the * assign popover can be opened from the standalone /app/player page, which * (like the rest of this file) never loads theme.css -- same SM-552 hotfix * 2 convention, each fallback literal equality-pinned against theme.css. */ /* ── Add-control (bookmark-add.svg via currentColor mask, SM-496 pattern) ── */ .bkm-add-wrap { display: inline-flex; align-items: center; } .bkm-add-control { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; padding: 0; border: none; background: none; cursor: pointer; } .bkm-add-icon { display: inline-block; width: 1.05rem; height: 1.05rem; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url('/app/static/icons/bookmark-add.svg'); mask-image: url('/app/static/icons/bookmark-add.svg'); /* Fallback literals (PM hotfix 2): /app/player is a STANDALONE template that never loads theme.css, so bare var() computes to nothing there and the masked icons painted fully transparent (invisible buttons). Each fallback is byte-identical to theme.css's own token value and is equality-pinned in tests_sm552_bookmarks.py — change theme.css and the pin goes red rather than drifting. */ background-color: var(--text-mid, #7a7570); } .bkm-add-control:hover .bkm-add-icon { background-color: var(--accent-light, #e8601a); } .bkm-add-control.is-bookmarked .bkm-add-icon { background-color: var(--accent, #d4500f); } .bkm-add-control.is-bookmarked { cursor: default; } /* Player per-track variant: sits inline with the track's own play button (static/js/player.js's buildTrackButton()) -- smaller, no extra margin beyond what the row's own flex gap already gives it. */ .bkm-track-add { width: 1.4rem; height: 1.4rem; } .bkm-track-add .bkm-add-icon { width: 0.9rem; height: 0.9rem; } /* SM-555 -- admin-only "Bookmark for students" sibling button. Canon Exercise-player green (Jason, 2026-08-17 canon: PLAY = #00b140), sourced from static/tools/shared/play-stop-button.css's .pps-play rule -- a plain literal, not a var(), because the canon itself is a literal there (no --play-green token exists site-wide yet); equality-pinned against that file in community/tests_sm555_admin_assign.py so a canon change is caught rather than silently drifting. No var()-fallback needed for THIS rule specifically (unlike the token-derived rules elsewhere in this file) -- a bare hex literal already renders identically everywhere, including the standalone /app/player page. */ .bkm-admin-assign .bkm-add-icon { background-color: #00b140; } .bkm-admin-assign:hover .bkm-add-icon { filter: brightness(1.2); } .bkm-admin-assign.bkm-track-add { margin-left: 2px; } /* SM-552 (Jason's design): the track a "Go to Player" link arrives at is * highlighted using the SAME border color and background color as the SMTV * Downloads box -- static/css/theme.css's .sm-attachment-box. Its border * color (#e8601a) IS theme.css's own --accent-light token value (theme.css * line 9), so the border rule below references that token directly rather * than re-hardcoding the hex -- byte-identical by construction, no * duplicate literal to drift out of sync. Its background (#060403) has no * corresponding token (SM-534's own authorized verbatim-hex exception, same * standing as .apt-wrap) -- that ONE literal is reproduced here, verbatim, * and community/tests_sm552_bookmarks.py asserts it is byte-identical to * theme.css's, read from both source files at test time. Only these two * COLORS are reused, not .sm-attachment-box's border-radius/padding -- a * track row is a button, not a boxed attachment list. */ .bkm-track-highlight { border: 1px solid var(--accent-light, #e8601a) !important; background-color: #060403 !important; } /* ── SM-555: the ONE shared page-centered modal pattern ────────────────── Used by BOTH the admin assign popover (.bkm-assign-dialog, appended to document.body by static/tools/shared/bookmarks.js's ensureAssignModal()) and the restyled Dashboard mini-card popover (#dashBkmPopover, moved into this same structure at runtime by initDashboardCard() -- see that function's own comment for why the move happens in JS rather than in templates/me/dashboard.html, which this task does not own). Structurally the same fixed-backdrop + centered-dialog shape as SM-300's Session Tuning modal (static/tools/shared/tuning-prompt.css's own .stp-backdrop/ .stp-dialog) -- not reused directly (different component, different owner) but copied precedent-for-precedent per the site's "copy the nearest existing precedent" rule, so this is the SECOND host of that established pattern, not an invented one. */ .bkm-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 16px; } .bkm-modal-backdrop[hidden] { display: none; } .bkm-modal-dialog { background: var(--card-bg, #101010); border: 1px solid var(--card-border, #1e1e1c); border-top: 2px solid var(--accent, #d4500f); border-radius: 8px; padding: 16px; width: 340px; max-width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); } /* ── Admin assign popover (SM-555): the .bkm-modal-dialog's own content -- */ .bkm-assign-title { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; color: var(--text, #ece8e1); font-size: 14px; margin: 0 0 10px; } .bkm-assign-select { width: 100%; max-width: 100%; background: var(--input-bg, #0b0b0a); color: var(--text, #ece8e1); border: 1px solid var(--card-border, #1e1e1c); border-radius: 0.3rem; font-family: 'Open Sans', sans-serif; font-size: 12.5px; padding: 4px; } .bkm-assign-select option { padding: 4px 6px; } .bkm-assign-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; } .bkm-assign-status { margin-right: auto; font-size: 11.5px; color: var(--text-mid, #7a7570); } .bkm-assign-cancel, .bkm-assign-confirm { font-family: 'Open Sans', sans-serif; font-size: 12px; letter-spacing: 0.02em; padding: 6px 14px; border-radius: 3px; cursor: pointer; } .bkm-assign-cancel { background: none; border: 1px solid var(--card-border, #1e1e1c); color: var(--text-dim, #46433f); } .bkm-assign-cancel:hover { color: var(--text, #ece8e1); } /* Canon PLAY green (see .bkm-admin-assign above) -- the confirm action IS the "assign" action this whole popover exists for. */ .bkm-assign-confirm { background: #00b140; border: 1px solid #00b140; color: #000; font-weight: 700; } .bkm-assign-confirm:hover { filter: brightness(1.1); } .bkm-assign-confirm:disabled { opacity: 0.5; cursor: wait; } /* ── Dashboard mini-card popover ──────────────────────────────────────── */ .dash-bkm-open-btn { /* No font override: as a