/* * Persona — bulk-select toolbar (v0.65). * * Companion to /static/bulk_select.js. The toolbar is mounted into the * #bulk-toolbar div from base.html and only becomes visible once the * selection is non-empty (data-open="1"). It uses a translate + opacity * transition so it slides up from the bottom edge instead of popping in. * * The selected-state ring on each thumbnail (data-bulk-selected="1") * is rendered with an outline so it doesn't add layout width inside the * thumbnail grid. */ .persona-bulk-toolbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; pointer-events: none; display: flex; justify-content: center; padding: 0 16px 16px; transform: translateY(calc(100% + 24px)); opacity: 0; transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 140ms ease-out; } .persona-bulk-toolbar[data-open="1"] { transform: translateY(0); opacity: 1; pointer-events: auto; } .persona-bulk-toolbar__inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 960px; width: 100%; padding: 10px 14px; border-radius: 12px; background-color: rgba(26, 26, 31, 0.94); border: 1px solid rgba(167, 139, 250, 0.35); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); color: #f4f4f5; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; } @supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { .persona-bulk-toolbar__inner { background-color: rgba(26, 26, 31, 0.72); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); } } .persona-bulk-toolbar__count { font-weight: 600; letter-spacing: -0.005em; color: #a78bfa; font-variant-numeric: tabular-nums; white-space: nowrap; } .persona-bulk-toolbar__spacer { flex: 1 1 auto; min-width: 8px; } .persona-bulk-toolbar__btn { appearance: none; border: 1px solid rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.06); color: #f4f4f5; padding: 6px 12px; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease; white-space: nowrap; } .persona-bulk-toolbar__btn:hover:not(:disabled) { background-color: rgba(139, 92, 246, 0.22); border-color: rgba(167, 139, 250, 0.55); } .persona-bulk-toolbar__btn:active:not(:disabled) { transform: translateY(1px); } .persona-bulk-toolbar__btn:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; } .persona-bulk-toolbar__btn:disabled { opacity: 0.4; cursor: not-allowed; } .persona-bulk-toolbar__btn--danger:hover:not(:disabled) { background-color: rgba(244, 63, 94, 0.22); border-color: rgba(251, 113, 133, 0.55); color: #fecdd3; } .persona-bulk-toolbar__status { flex-basis: 100%; font-size: 12px; color: #a1a1aa; font-variant-numeric: tabular-nums; min-height: 1em; } .persona-bulk-toolbar__status[data-kind="ok"] { color: #34d399; } .persona-bulk-toolbar__status[data-kind="warn"] { color: #fbbf24; } .persona-bulk-toolbar__status[data-kind="error"] { color: #fb7185; } /* Light-mode toolbar — kicks in only when is NOT .dark, mirroring the rest of Persona's Tailwind dark-mode strategy. */ html:not(.dark) .persona-bulk-toolbar__inner { background-color: rgba(255, 255, 255, 0.96); border-color: rgba(124, 58, 237, 0.35); color: #18181b; box-shadow: 0 16px 40px -14px rgba(15, 23, 42, 0.25), 0 2px 6px rgba(15, 23, 42, 0.08); } @supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { html:not(.dark) .persona-bulk-toolbar__inner { background-color: rgba(255, 255, 255, 0.78); } } html:not(.dark) .persona-bulk-toolbar__count { color: #7c3aed; } html:not(.dark) .persona-bulk-toolbar__btn { border-color: rgba(15, 23, 42, 0.12); background-color: rgba(15, 23, 42, 0.04); color: #18181b; } html:not(.dark) .persona-bulk-toolbar__btn:hover:not(:disabled) { background-color: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.45); } html:not(.dark) .persona-bulk-toolbar__status { color: #52525b; } /* Selection ring on thumbnail wrappers — uses outline so it doesn't add any layout box around the card. */ [data-shot-id][data-bulk-selected="1"] { outline: 2px solid #a78bfa; outline-offset: 2px; border-radius: 8px; box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.18); position: relative; } [data-shot-id][data-bulk-selected="1"]::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background-color: #8b5cf6; color: #ffffff; font-size: 13px; line-height: 22px; text-align: center; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); pointer-events: none; z-index: 5; } /* Honor reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { .persona-bulk-toolbar { transition: opacity 0ms; transform: none; } .persona-bulk-toolbar:not([data-open="1"]) { opacity: 0; visibility: hidden; } }