:root {
/* Wako-inspired iOS-native modern light theme */
color-scheme: light;
--bg: #F2F2F7;
--surface: #FFFFFF;
--panel: #FFFFFF;
--panel-strong: #E5E5EA;
--border: rgba(0,0,0,0.08);
--border-strong:rgba(0,0,0,0.13);
--text: #1C1C1E;
--text-2: #3A3A3C;
--muted: #8E8E93;
--accent: #007AFF;
--accent-hover: #0062CC;
--accent-2: #34AADC;
--danger: #FF3B30;
--success: #34C759;
--warn: #FF9500;
--rating-high: #34C759;
--rating-mid: #FF9500;
--rating-low: #FF3B30;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
--shadow: 0 2px 10px rgba(0,0,0,0.08);
--shadow-md: 0 4px 20px rgba(0,0,0,0.10);
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
--sb-track: transparent;
--sb-thumb: rgba(0,0,0,0.15);
--sb-thumb-hover:rgba(0,0,0,0.25);
--radius: 14px;
--radius-sm: 10px;
--radius-pill: 999px;
}
:root.dark-theme {
/* Not decoration: this is what tells the OS the page is dark. An
installed PWA paints the areas it does not hand to the document --
the status bar, and the strip at the bottom holding the home
indicator / gesture bar -- from the UA's own surface color, and that
surface is white for as long as the document declares a light color
scheme, whatever popups
to match. */
color-scheme: dark;
--bg: #000000;
--surface: #1C1C1E;
--panel: #1C1C1E;
--panel-strong: #2C2C2E;
--border: rgba(255,255,255,0.15);
--border-strong:rgba(255,255,255,0.25);
--text: #FFFFFF;
--text-2: #EBEBF5;
--muted: #8E8E93;
--sb-thumb: rgba(255,255,255,0.15);
--sb-thumb-hover:rgba(255,255,255,0.25);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* scrollbar-gutter, because the page is a max-width block centred with
'margin: 0 auto' and every tab is one panel swapped in for another. A
panel whose content is shorter than the viewport takes the classic
scrollbar away, the content box gets ~15px wider, and the centred page
slides right by half of that -- which is exactly what selecting
Discover > Hidden Gems, Catalogs > Bulk Add, Lists > Liked or Import,
or Channels > Quick Add or Import did on desktop. Reserving the gutter
for the whole document means the layout no longer depends on whether
the tab currently showing happens to overflow.
'stable' (rather than 'overflow-y: scroll') so short pages do not grow
a dead scrollbar track; browsers without it use overlay scrollbars, so
there is no shift for them to fix. lockBackgroundScroll
(16_client-row-core.js) measures the gutter it actually removes rather
than assuming, so a modal still compensates correctly either way. */
html { touch-action: manipulation; width: 100%; max-width: 100%; overflow-x: hidden; scrollbar-gutter: stable; background: var(--bg); }
body {
font-family: var(--font-body);
margin: 0;
min-height: 100vh;
width: 100%;
max-width: 100%;
overflow-x: hidden;
/* viewport-fit=cover (see the s that
are styled as buttons. Those needed it: 'button, .actions a' (further
down this stylesheet) is more specific than a bare '.lc-btn', so an
inside .actions -- the Buy me a coffee and
TorBox referral links in Settings -- came out accent blue with white
text no matter which modifier class it carried. */
.lc-btn.secondary {
background: var(--surface);
color: var(--text-2);
border: 1.5px solid var(--border-strong);
box-shadow: var(--shadow-sm);
}
.lc-btn.liked { color: var(--danger); border-color: rgba(255,59,48,0.4); }
.lc-btn.view-btn { color: var(--accent); border-color: transparent; background: transparent; padding: 0; font-size: 0.82rem; }
/* --- Presets & Backup 2x2 Mobile Layout & Unified Sizing ---------------- */
.preset-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
margin-bottom: 8px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: var(--shadow-sm);
}
.preset-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.preset-card-title {
font-weight: 700;
font-size: 0.92rem;
color: var(--text);
}
.preset-actions-grid, .backup-actions-grid, .export-actions-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
width: 100%;
}
@media (min-width: 641px) {
.preset-card {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.preset-actions-grid {
display: flex;
gap: 6px;
width: auto;
}
.backup-actions-grid, .export-actions-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
width: auto;
}
}
#settingsSubBackup .lc-btn,
#settingsSubBackup .preset-actions-grid button,
#settingsSubBackup .backup-actions-grid button,
#settingsSubBackup .export-actions-grid button,
#settingsSubBackup .row button {
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 600;
min-height: 34px;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
white-space: nowrap;
}
/* --- Settings Subpanels & Key Display Mobile Responsiveness ------------- */
.settings-subpanel {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
overflow-x: hidden;
}
.creator-key-display {
font-family: var(--font-mono, monospace);
font-size: 0.88rem;
font-weight: 600;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px 12px;
word-break: break-all;
overflow-wrap: anywhere;
white-space: normal;
user-select: all;
-webkit-user-select: all;
max-width: 100%;
box-sizing: border-box;
letter-spacing: 0.5px;
margin: 4px 0 10px;
}
.webhook-input-group {
display: flex;
gap: 8px;
align-items: stretch;
margin-bottom: 10px;
flex-wrap: wrap;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.webhook-input-group input {
flex: 1 1 200px;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.webhook-input-group button {
flex: none;
white-space: nowrap;
}
@media (max-width: 640px) {
.webhook-input-group {
flex-direction: column;
}
.webhook-input-group input,
.webhook-input-group button {
width: 100% !important;
flex: 1 1 100% !important;
}
}
/* 9-Poster Preview Strip in List Cards (Desktop) / 3-Poster (Mobile) */
.list-card-posters, .list-card-5posters {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-top: 4px;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
@media (max-width: 640px) {
.list-card-posters .list-card-mini-poster:nth-child(n+4),
.list-card-5posters .list-card-mini-poster:nth-child(n+4),
.list-card-posters .list-card-mini-poster-tile:nth-child(n+4),
.list-card-5posters .list-card-mini-poster-tile:nth-child(n+4) {
display: none;
}
.list-card-header {
flex-wrap: wrap;
}
.list-card-body {
flex-basis: calc(100% - 54px);
}
.list-card-actions {
width: 100%;
margin-top: 4px;
}
}
@media (min-width: 641px) {
.list-card-posters, .list-card-5posters {
grid-template-columns: repeat(9, 1fr);
gap: 6px;
}
}
/* loadPosterSlot's failure state (19_client-search-and-likes.js) -- a
one-line message and a Retry button in place of the poster grid, so a
card that could not be fetched (even after its own automatic retry)
says so instead of just sitting there blank. */
.list-card-posters.poster-preview-error {
display: flex;
grid-template-columns: none;
}
.poster-preview-error-msg {
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
color: var(--muted);
font-size: 0.85rem;
}
.list-card-mini-poster {
aspect-ratio: 2 / 3;
border-radius: 6px;
overflow: hidden;
background: var(--panel-strong);
border: 1px solid var(--border);
position: relative;
width: 100%;
}
.list-card-mini-poster img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.2s;
}
/* Same 9/3-across grid cell as .list-card-mini-poster above, but with a
name (and optional second-line subtitle, e.g. an episode's "S07E10")
visible underneath instead of only on hover -- used on the "Your
Custom Lists" dashboard, where a bare grid of unlabeled thumbnails
doesn't say which item is which. Kept as a separate class rather than
changing .list-card-mini-poster itself, since that class is also used
for the Find Lists search-preview thumbnails, which don't have room
for a label and rely on the "+" / count overlays sitting flush over
the full aspect-ratio box. */
.list-card-mini-poster-tile {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
min-width: 0;
}
.list-card-mini-poster-img-wrap {
aspect-ratio: 2 / 3;
border-radius: 6px;
overflow: hidden;
background: var(--panel-strong);
border: 1px solid var(--border);
position: relative;
width: 100%;
}
.storyline-posters-scroll {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-x !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 8px 2px 10px !important;
scrollbar-width: thin !important;
}
.storyline-poster-item {
display: flex !important;
flex-direction: column !important;
flex: 0 0 105px !important;
width: 105px !important;
max-width: 105px !important;
min-width: 105px !important;
box-sizing: border-box !important;
text-align: center !important;
}
.cw-remove-btn {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
box-sizing: border-box;
border-radius: 50%;
/* Solid theme color rather than a translucent black overlay -- the
translucent version blended with whatever poster sat underneath it
(often reading as a muddy brown against warm-toned posters). */
background: var(--danger);
color: #fff;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 16px;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0,0,0,0.35);
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
z-index: 10;
transition: filter 0.2s;
}
.cw-remove-btn:hover {
filter: brightness(0.88);
}
.cw-date-badge {
position: absolute;
top: 4px;
left: 4px;
background: var(--accent);
color: #ffffff;
font-size: 0.62rem;
font-weight: 800;
padding: 2px 5px;
border-radius: var(--radius-sm);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
line-height: 1.15;
letter-spacing: -0.01em;
z-index: 8;
pointer-events: none;
white-space: nowrap;
text-transform: uppercase;
}
.cw-date-badge-premiere {
background: #2fa84f;
top: auto;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
max-width: calc(100% - 8px);
text-overflow: ellipsis;
overflow: hidden;
}
.cw-date-badge-finale {
background: var(--warn, #FF9500);
top: auto;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
max-width: calc(100% - 8px);
text-overflow: ellipsis;
overflow: hidden;
}
.cw-date-badge-finale-date {
background: rgba(20, 20, 24, 0.92);
color: #ffd166;
border: 1px solid rgba(255, 149, 0, 0.35);
top: auto;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
max-width: calc(100% - 8px);
text-overflow: ellipsis;
overflow: hidden;
font-size: 0.58rem;
font-weight: 700;
}
body.hide-badge-air-date .cw-date-badge:not(.cw-date-badge-premiere):not(.cw-date-badge-finale):not(.cw-date-badge-finale-date) { display: none !important; }
body.hide-badge-season-premiere .cw-date-badge-premiere { display: none !important; }
body.hide-badge-season-finale .cw-date-badge-finale { display: none !important; }
body.hide-badge-season-finale-date .cw-date-badge-finale-date { display: none !important; }
body.hide-badge-rating .rating-badge, body.hide-badge-rating .poster-rating { display: none !important; }
body.hide-badge-watched .watched-badge, body.hide-badge-watched .cw-watched-indicator { display: none !important; }
body.hide-catalogs-badges .live-preview-posters:not(.is-continue-watching-shelf):not(.is-airing-next-shelf) .cw-date-badge,
body.hide-catalogs-badges .live-preview-shelf-row:not([data-list-slug="continue-watching"]):not([data-list-slug="airing-next"]) .cw-date-badge,
body.hide-catalogs-badges #catalogsTab .live-preview-shelf-row:not([data-list-slug="continue-watching"]):not([data-list-slug="airing-next"]) .cw-date-badge,
body.hide-catalogs-badges .live-preview-posters:not(.is-continue-watching-shelf):not(.is-airing-next-shelf) .rating-badge,
body.hide-catalogs-badges .live-preview-posters:not(.is-continue-watching-shelf):not(.is-airing-next-shelf) .watched-badge { display: none !important; }
body.hide-airing-next-badges #myPrivateTraktListsResult .cw-date-badge,
body.hide-airing-next-badges #mySimklListsResult .cw-date-badge,
body.hide-airing-next-badges #myMdblistListsResult .cw-date-badge,
body.hide-airing-next-badges [data-list-key="airing-next"] .cw-date-badge,
body.hide-airing-next-badges .airing-next-card .cw-date-badge,
body.hide-airing-next-badges .live-preview-shelf-row[data-list-slug="airing-next"] .cw-date-badge,
body.hide-airing-next-badges .live-preview-posters.is-airing-next-shelf .cw-date-badge { display: none !important; }
body.hide-continue-watching-badges [data-list-key="continue-watching"] .cw-date-badge,
body.hide-continue-watching-badges .continue-watching-card .cw-date-badge,
body.hide-continue-watching-badges .live-preview-shelf-row[data-list-slug="continue-watching"] .cw-date-badge,
body.hide-continue-watching-badges .live-preview-posters.is-continue-watching-shelf .cw-date-badge { display: none !important; }
.airing-next-filter-pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.airingNextFilterPill {
background: var(--panel-strong);
color: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.7rem;
font-weight: 600;
padding: 3px 9px;
cursor: pointer;
white-space: nowrap;
}
.airingNextFilterPill.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.list-card-mini-poster-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.2s;
}
.list-card-mini-poster-img-wrap img.clickable-poster:hover {
transform: scale(1.05);
}
.list-card-mini-poster-name {
font-size: 0.68rem;
color: var(--text);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-card-mini-poster-subtitle {
font-size: 0.64rem;
color: var(--muted);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-card-mini-poster-year {
font-size: 0.64rem;
color: var(--muted);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.clickable-poster {
cursor: pointer;
}
.clickable-poster:hover img {
transform: scale(1.05);
}
.poster-add-overlay {
position: absolute;
bottom: 4px;
right: 4px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
opacity: 0.85;
transition: opacity 0.2s, background 0.2s;
z-index: 5;
cursor: pointer;
}
.clickable-poster:hover .poster-add-overlay,
.live-preview-poster-card:hover .poster-add-overlay {
opacity: 1;
}
.poster-add-overlay:hover {
background: var(--brand);
color: #fff;
}
#lists .poster-add-overlay,
#listsLivePreview .poster-add-overlay,
.entry .poster-add-overlay {
display: none !important;
}
.drag-handle-list {
cursor: grab;
user-select: none;
touch-action: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--muted);
margin-right: 12px;
padding: 2px 6px;
border-radius: var(--radius-sm);
transition: color 0.15s, background-color 0.15s;
vertical-align: middle;
}
.drag-handle-list:hover {
color: var(--text);
background: var(--panel-strong);
}
.drag-handle-list:active {
cursor: grabbing;
}
.list-card-count-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.65);
color: #fff;
font-weight: 700;
font-size: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(1px);
}
.list-card-count-overlay.mobile-only {
display: flex;
}
.list-card-count-overlay.desktop-only {
display: none;
}
@media (min-width: 641px) {
.list-card-count-overlay.mobile-only {
display: none;
}
.list-card-count-overlay.desktop-only {
display: flex;
}
}
/* --- Merged Channels Chips & Inline Add Selector ------------------------ */
.merge-chip-remove-btn {
background: transparent !important;
border: none !important;
color: var(--muted) !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 0 0 0 4px !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: color 0.15s !important;
border-radius: 0 !important;
box-shadow: none !important;
width: auto !important;
height: auto !important;
}
.merge-chip-remove-btn:hover {
color: var(--danger) !important;
}
.merge-add-channel-select {
padding: 3px 8px;
font-size: 0.78rem;
font-weight: 600;
border-radius: var(--radius-sm);
border: 1px dashed var(--border);
background: var(--surface);
color: var(--accent);
cursor: pointer;
max-width: 220px;
outline: none;
transition: border-color 0.15s, color 0.15s;
margin: 2px 0 2px 4px;
}
.merge-add-channel-select:hover {
border-color: var(--accent);
}
.detail-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
padding: 0 0 16px 0;
margin-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.detail-sort-select {
padding: 6px 28px 6px 12px;
font-size: 0.82rem;
font-weight: 600;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px;
}
.detail-sort-select:hover, .detail-sort-select:focus {
border-color: var(--accent);
}
/* --- Cards & Panels ---------------------------------------------------- */
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 16px;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.panel-title {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 10px;
letter-spacing: -0.01em;
color: var(--text);
}
/* --- Search Bar Wrap (Screenshot 4) ------------------------------------- */
.search-bar-wrap {
position: relative; display: flex; align-items: center; width: 100%;
}
.search-bar-wrap .sb-icon {
position: absolute; left: 14px;
width: 18px; height: 18px; color: var(--muted);
pointer-events: none; flex: none;
}
.search-bar-wrap input {
padding-left: 42px; padding-right: 40px;
border-radius: var(--radius-pill);
background: var(--surface);
border: 1.5px solid var(--border-strong);
font-size: 0.95rem;
box-shadow: var(--shadow-sm);
}
.search-bar-clear {
position: absolute; right: 10px;
width: 22px; height: 22px; min-height: unset;
border-radius: 50%; background: rgba(0,0,0,0.12);
color: var(--text-2); border: none; padding: 0;
font-size: 0.75rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
/* --- Form controls & Helpers -------------------------------------------- */
input, select, textarea {
width: 100%;
padding: 11px 14px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--border-strong);
background: var(--surface-2);
color: var(--text);
outline: none;
font-size: 16px;
font-family: inherit;
min-height: 44px;
transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="file"] {
padding: 0;
min-height: unset;
border: none;
background: transparent;
color: var(--text-2);
}
input[type="file"]::file-selector-button {
background: var(--surface-2);
color: var(--text);
border: 1.5px solid var(--border-strong);
border-radius: var(--radius-sm);
padding: 8px 14px;
margin-right: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
input[type="file"]::file-selector-button:hover {
background: var(--surface-3);
border-color: var(--text-2);
}
input[type="checkbox"], input[type="radio"] {
width: 20px; height: 20px; min-height: unset;
padding: 0; flex: none; accent-color: var(--accent);
}
/* Toggle Switch */
.ui-toggle {
position: relative; display: inline-block; width: 44px; height: 24px;
}
.ui-toggle input { opacity: 0; width: 0; height: 0; }
.ui-toggle-slider {
position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
background-color: var(--border); transition: .3s; border-radius: 24px;
}
.ui-toggle-slider:before {
position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
background-color: white; transition: .3s; border-radius: 50%; box-shadow: var(--shadow-sm);
}
.ui-toggle input:checked + .ui-toggle-slider { background-color: var(--accent); }
.ui-toggle input:checked + .ui-toggle-slider:before { transform: translateX(20px); }
input:focus, select:focus, textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}
.custom-list-pick-poster {
width: 36px; height: 54px; object-fit: cover; border-radius: 4px; flex: none; cursor: pointer;
}
.custom-list-pick-poster.empty-poster { background: transparent; }
.channel-poster-choice {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 8px;
padding: 6px;
cursor: pointer;
background: var(--surface);
border: 2px solid transparent;
transition: border-color 0.15s ease, transform 0.15s ease;
user-select: none;
}
.channel-poster-choice:hover {
border-color: rgba(0, 122, 255, 0.4);
}
.channel-poster-choice.selected {
border-color: var(--accent);
background: rgba(0, 122, 255, 0.08);
}
.channel-poster-choice .channel-poster-thumb-wrap {
position: relative;
width: 100%;
aspect-ratio: 2 / 3;
border-radius: 6px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.channel-poster-choice .channel-poster-thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.channel-poster-choice .channel-poster-check {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
z-index: 2;
}
.channel-poster-choice.selected .channel-poster-check {
display: flex;
}
.channel-poster-choice .channel-poster-title {
width: 100%;
font-size: 0.75rem;
font-weight: 600;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 5px;
}
.channel-poster-choice .channel-poster-meta {
font-size: 0.7rem;
color: var(--muted);
text-align: center;
}
.channel-crossover-banner {
position: relative;
background: linear-gradient(135deg, rgba(0, 122, 255, 0.12) 0%, rgba(88, 86, 214, 0.12) 100%);
border: 1px solid rgba(0, 122, 255, 0.35);
border-radius: var(--radius-md);
padding: 12px 14px;
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.channel-crossover-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.channel-crossover-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
}
.channel-crossover-badge {
background: var(--accent);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
padding: 2px 7px;
border-radius: var(--radius-pill);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.channel-crossover-desc {
font-size: 0.8rem;
color: var(--muted);
line-height: 1.35;
margin: 0;
}
.channel-crossover-parts {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 4px 0 2px;
}
.channel-crossover-chip {
font-size: 0.72rem;
padding: 3px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
align-items: center;
gap: 4px;
}
.channel-crossover-chip.present {
background: rgba(52, 199, 89, 0.15);
border-color: rgba(52, 199, 89, 0.4);
color: #34C759;
}
.channel-crossover-chip.missing {
background: rgba(255, 149, 0, 0.15);
border-color: rgba(255, 149, 0, 0.4);
color: #FF9500;
}
.channel-crossover-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
flex-wrap: wrap;
}
/* .lc-btn's base white-space:nowrap (further up this stylesheet) is
correct for the short, fixed labels it's normally used with ("Copy
Key", "Reset Key", etc.), but the button here can carry a long,
dynamic label ("+ Add 15 Missing Crossover Episodes in Story Order")
-- nowrap forced it to render as one unbroken line wider than the
viewport on mobile instead of wrapping. Scoped to just this button so
every other .lc-btn usage keeps its normal nowrap behavior. */
.channel-crossover-actions .lc-btn {
white-space: normal;
text-align: center;
max-width: 100%;
}
/* Support & Feedback Chat */
.support-chat-container {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
}
.support-threads-bar {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
}
.support-thread-pill {
padding: 6px 12px;
border-radius: var(--radius-pill);
background: var(--surface);
border: 1px solid var(--border);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
color: var(--text);
}
.support-thread-pill.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.support-messages-stream {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 380px;
min-height: 180px;
overflow-y: auto;
padding: 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: var(--radius-md);
border: 1px solid var(--border);
}
.support-bubble {
max-width: 85%;
padding: 10px 14px;
border-radius: 14px;
font-size: 0.88rem;
line-height: 1.4;
word-break: break-word;
white-space: pre-wrap;
}
.support-bubble.user {
align-self: flex-end;
background: var(--accent);
color: #fff;
border-bottom-right-radius: 4px;
}
.support-bubble.admin {
align-self: flex-start;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong);
border-bottom-left-radius: 4px;
}
.support-bubble-sender {
font-size: 0.72rem;
font-weight: 700;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
opacity: 0.85;
}
.support-bubble-time {
font-size: 0.68rem;
opacity: 0.65;
margin-top: 4px;
text-align: right;
}
.support-reply-composer {
display: flex;
gap: 8px;
align-items: flex-end;
}
.support-reply-composer textarea {
flex: 1;
min-height: 44px;
max-height: 120px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-family: inherit;
font-size: 0.88rem;
resize: vertical;
}
.row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 10px; width: 100%; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
button, .actions a {
padding: 11px 18px;
min-height: 44px;
border-radius: var(--radius-pill);
border: none;
background: var(--accent);
color: #fff;
cursor: pointer;
font-weight: 600;
font-size: 0.925rem;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 0.12s, transform 0.12s;
font-family: inherit;
}
button.secondary, .btn-copy, .btn-watchlist, .btn-test {
background: var(--surface);
color: var(--text-2);
border: 1.5px solid var(--border-strong);
box-shadow: var(--shadow-sm);
}
button.modal-close-x {
width: 32px; height: 32px; min-height: unset;
padding: 0; border-radius: 50%;
background: var(--bg); color: var(--muted);
border: 1px solid var(--border-strong);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1rem; line-height: 1; flex: none;
}
button:hover:not(:disabled), .actions a:hover { opacity: 0.85; }
.btn-stremio { background: linear-gradient(135deg, #9B8FFF, #6D48FF); color: #fff; }
.btn-nuvio { background: linear-gradient(135deg, #FF5E3A, #FF2A68); color: #fff; }
.btn-wako { background: linear-gradient(135deg, #007AFF, #34AADC); color: #fff; }
.actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
/* --- Install Result Card & Manifest Link Display ------------------------ */
#result {
margin-top: 16px;
}
.install-result-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 20px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 14px;
animation: resultSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes resultSlideIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.install-result-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.install-result-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: rgba(52, 199, 89, 0.12);
color: #34C759;
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.01em;
}
.install-result-badge svg {
stroke: currentColor;
}
.install-result-sub {
font-size: 0.8rem;
color: var(--muted);
font-weight: 500;
}
.install-url-container {
display: flex;
flex-direction: column;
background: var(--bg);
border: 1.5px solid var(--border-strong);
border-radius: 12px;
padding: 12px 14px;
gap: 10px;
transition: border-color 0.15s, box-shadow 0.15s;
min-width: 0;
}
.install-url-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.install-url-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 0.82rem;
color: var(--text-2);
}
.install-url-label svg {
color: var(--accent);
}
.install-url-copy-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: var(--radius-pill);
background: var(--surface);
border: 1.5px solid var(--border-strong);
color: var(--text);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: var(--shadow-sm);
min-height: unset;
font-family: inherit;
}
.install-url-copy-btn:hover {
background: var(--panel-strong);
border-color: var(--accent);
color: var(--accent);
}
.install-url-box {
font-family: var(--font-mono, monospace);
font-size: 0.84rem;
font-weight: 500;
color: var(--text);
word-break: break-all;
overflow-wrap: anywhere;
white-space: normal;
user-select: all;
-webkit-user-select: all;
line-height: 1.5;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
}
.install-hint-box {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border-radius: 10px;
background: rgba(0, 122, 255, 0.05);
border: 1px solid rgba(0, 122, 255, 0.13);
color: var(--muted);
font-size: 0.82rem;
line-height: 1.45;
}
.install-hint-steps {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 6px;
color: var(--text);
font-size: 0.82rem;
}
.trakt-connect-actions {
display: flex;
flex-direction: row;
width: auto;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
@media (max-width: 640px) {
.trakt-connect-actions {
display: flex !important;
flex-direction: row !important;
width: 100% !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.trakt-connect-actions #traktConnectBtn,
.trakt-connect-actions #traktDeviceBtn {
flex: 1 1 calc(50% - 4px) !important;
min-width: 0 !important;
padding: 8px 4px !important;
font-size: 0.8rem !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
}
.trakt-connect-actions #traktDisconnectBtn {
flex: 1 1 100% !important;
width: 100% !important;
padding: 8px 4px !important;
font-size: 0.8rem !important;
}
}
@media (min-width: 641px) {
.trakt-connect-actions {
display: flex !important;
flex-direction: row !important;
width: auto !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.trakt-connect-actions button {
flex: none !important;
width: auto !important;
}
}
/* --- Catalog Shelves (#lists in My Catalogs Tab) ------------------------ */
#lists { display: grid; gap: 10px; grid-template-columns: 1fr; width: 100%; max-width: 100%; }
.entry {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
margin-bottom: 12px;
padding: 14px;
position: relative;
box-shadow: var(--shadow-sm);
/* A grid item's default min-width is auto (shrink no further than its
widest content), not 0 -- without this, a wide Live Preview poster
grid inside can force this whole row (and #lists's single column
track) past the viewport edge on a phone instead of the poster grid
itself shrinking to fit. */
min-width: 0;
}
.entry.dragging {
opacity: 0.4;
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
border-color: var(--accent);
}
.entry-card-top {
display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; width: 100%;
}
.entry-avatar {
width: 42px; height: 42px; border-radius: 11px; flex: none;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1.05rem; color: #fff;
text-transform: uppercase;
}
.entry-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.entry-name-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.entry-name-row .name {
flex: 1; min-width: 0; padding: 6px 10px;
min-height: unset; font-size: 0.92rem; font-weight: 600;
border-radius: 8px;
}
.entry-type-row { display: flex; align-items: center; gap: 6px; }
.entry-type-row .type {
padding: 5px 10px; min-height: unset; font-size: 0.82rem;
border-radius: 8px; width: auto;
}
.entry-pos-wrap .pos {
width: 48px; min-height: unset; padding: 5px 6px;
font-size: 0.82rem; border-radius: 7px; text-align: center;
background: var(--bg); border: 1.5px solid var(--border-strong);
}
.entry-ctrl-row {
display: flex; gap: 4px; align-items: center; flex-shrink: 0;
}
.ec-btn {
width: 32px; height: 32px; min-height: unset; padding: 0;
border-radius: 8px; background: var(--bg); border: 1.5px solid var(--border-strong);
color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 0.9rem;
}
.ec-btn:hover:not(:disabled) { color: var(--text); background: var(--panel-strong); }
.ec-btn.danger { color: var(--danger); border-color: rgba(255,59,48,0.25); background: rgba(255,59,48,0.07); }
.sources { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.source-row { width: 100%; }
.source-row + .source-row { padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.testrow { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; width: 100%; }
.testresult { width: 100%; }
.testresult.ok { color: var(--success); }
.testresult.err { color: var(--danger); }
.testresult.pending { color: var(--muted); }
/* Compact view for #lists */
#lists.compact .sources,
#lists.compact .add-source-btn,
#lists.compact .watchlist-note {
display: none !important;
}
.premade-shelf .sources,
.premade-shelf .add-source-btn {
display: none !important;
}
#lists.compact .entry {
padding: 8px 12px;
}
#lists.compact .entry-card-top {
margin-bottom: 0;
}
/* Configured Shelves Test results: 1-row 5-posters strip on desktop, 1-row 3-posters on mobile */
.preview-thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-top: 6px;
max-width: 240px;
width: 100%;
}
@media (max-width: 640px) {
.preview-thumbs .preview-thumb:nth-child(n+4) {
display: none;
}
}
@media (min-width: 641px) {
.preview-thumbs {
grid-template-columns: repeat(5, 1fr);
max-width: 440px;
gap: 8px;
}
}
.preview-thumb {
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--panel-strong);
display: block;
}
/* --- Live Preview Shelves (Home Screen) --------------------------------- */
.live-preview-shelf {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 12px;
width: 100%;
}
.live-preview-shelf-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
font-weight: 700;
font-size: 0.95rem;
color: var(--text);
}
.live-preview-shelf-title .shelf-title-text {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.live-preview-shelf-title .text-action-btn {
margin-left: auto;
color: var(--accent);
background: none;
border: none;
font-size: 0.84rem;
font-weight: 600;
cursor: pointer;
padding: 2px 4px;
flex: none;
white-space: nowrap;
}
.live-preview-shelf-title .text-action-btn:disabled {
opacity: 0.35;
cursor: default;
}
.live-preview-posters {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
}
@media (max-width: 640px) {
.live-preview-posters .live-preview-poster-card:nth-child(n+4) {
display: none;
}
}
@media (min-width: 641px) {
.live-preview-posters {
grid-template-columns: repeat(9, 1fr);
gap: 8px;
}
}
.live-preview-poster-card {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
width: 100%;
}
.live-preview-poster {
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: 6px;
background: var(--panel-strong);
border: 1px solid var(--border);
display: block;
}
.live-preview-poster.landscape {
aspect-ratio: 16 / 9;
}
.live-preview-poster-placeholder {
width: 100%;
aspect-ratio: 2 / 3;
border-radius: 6px;
background: var(--panel-strong);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.live-preview-poster-name {
font-size: 0.70rem;
color: var(--text);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Second line under a poster for episode entries -- e.g. the episode's
own title under a "Show Name S03E07" first line (see
formatWatchItemLabel / livePreviewPosterHtml). Omitted entirely for
anything without one (movies, shows, every other shelf on the site),
so this never adds empty space to a normal poster card. */
.live-preview-poster-subtitle {
font-size: 0.66rem;
color: var(--muted);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.live-preview-poster-year {
font-size: 0.65rem;
color: var(--muted);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- List Details page ("See All" full list view) ----------------------- */
.list-details-page { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.detail-header-info h1 {
font-size: 1.3rem; font-weight: 800; margin: 0;
}
.detail-header-info p {
margin: 0; font-size: 0.85rem; color: var(--muted);
}
/* --- Season Cards & Headers --------------------------------------------- */
.season-card {
background: var(--surface-light);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.season-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px;
cursor: pointer;
}
.season-header-main {
display: flex;
gap: 16px;
align-items: center;
min-width: 0;
flex: 1;
}
.season-header-poster {
width: 80px;
border-radius: 4px;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.season-header-poster-placeholder {
width: 80px;
height: 120px;
background: #333;
border-radius: 4px;
flex-shrink: 0;
}
.season-header-info {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.season-header-title {
margin: 0 0 4px;
font-size: 1.2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.season-header-episodes {
color: var(--muted);
font-size: 0.9rem;
}
.season-header-actions {
flex-shrink: 0;
margin-left: 12px;
}
.season-header-actions .btn-mark-season-watched {
padding: 6px 14px;
font-size: 0.82rem;
white-space: nowrap;
}
@media (max-width: 600px) {
.season-header {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 12px;
}
.season-header-poster {
width: 60px;
}
.season-header-poster-placeholder {
width: 60px;
height: 90px;
}
.season-header-actions {
width: 100%;
margin-left: 0;
}
.season-header-actions .btn-mark-season-watched {
width: 100%;
text-align: center;
justify-content: center;
padding: 8px 12px;
font-size: 0.85rem;
}
}
/* --- Modals & Toasts ---------------------------------------------------- */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.45);
display: flex; align-items: center; justify-content: center;
padding: 16px; z-index: 1000;
}
.modal-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 20px; padding: 22px; max-width: 440px; width: 100%;
max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md);
}
.modal-card.modal-card-wide {
max-width: 1100px;
width: 95vw;
}
.modal-close-x {
float: right; background: var(--bg); border: 1px solid var(--border-strong);
color: var(--muted); font-size: 1rem; cursor: pointer;
width: 32px; height: 32px; padding: 0; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.undo-toast {
position: fixed; left: 50%;
bottom: calc(66px + env(safe-area-inset-bottom));
transform: translateX(-50%);
background: var(--text); color: var(--surface);
border-radius: 14px; padding: 12px 18px;
display: flex; align-items: center; gap: 14px;
box-shadow: var(--shadow-md); z-index: 1000;
}
.action-toast {
position: fixed;
left: 50%;
bottom: calc(72px + env(safe-area-inset-bottom));
transform: translateX(-50%) translateY(20px);
background: rgba(28, 28, 30, 0.95);
color: #ffffff;
padding: 10px 18px;
border-radius: var(--radius-pill);
font-size: 0.86rem;
font-weight: 600;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
white-space: nowrap;
max-width: 90vw;
overflow: hidden;
text-overflow: ellipsis;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.action-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 640px) {
.customListMoveBtn { display: none !important; }
.customListPosInput { display: none !important; }
}
@media (min-width: 641px) {
body { padding: 24px 20px 52px; }
.page { gap: 16px; }
.actions { flex-direction: row; flex-wrap: wrap; }
.actions button, .actions a { width: auto; }
.custom-list-pick-poster { width: 72px; height: 108px; }
.row { flex-direction: row; }
.field-row { grid-template-columns: minmax(0, 1fr) auto; }
#lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Live Preview & Editor CSS */
/* Default (Preview Mode) */
#lists:not(.live-preview-edit-mode) .entry-ctrl-row,
#lists:not(.live-preview-edit-mode) .entry-name-row,
#lists:not(.live-preview-edit-mode) .entry-type-row,
#lists:not(.live-preview-edit-mode) .sources,
#lists:not(.live-preview-edit-mode) .add-source-btn,
#lists:not(.live-preview-edit-mode) .watchlist-note {
display: none !important;
}
#lists:not(.live-preview-edit-mode) .entry {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
#lists:not(.live-preview-edit-mode) {
grid-template-columns: 1fr !important;
}
/* In Edit Mode, hide the posters because they get in the way of drag-and-drop */
#lists.live-preview-edit-mode .live-preview-posters {
display: none !important;
}
#lists.live-preview-edit-mode .entry {
border: 1px solid var(--border) !important;
background: var(--bg) !important;
padding: 12px !important;
}
.watch-indicator-overlay {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #007aff;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
z-index: 5;
pointer-events: none;
}
.is-watch-history-shelf .watch-indicator-overlay {
display: none !important;
}
/* --- Live Preview Skeleton Shimmer Loader ----------------------------- */
@keyframes livePreviewShimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.live-preview-skeleton-card {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
min-width: 0;
}
.live-preview-skeleton-poster {
width: 100%;
aspect-ratio: 2 / 3;
border-radius: 6px;
border: 1px solid var(--border);
background: linear-gradient(90deg, var(--panel-strong) 25%, var(--border-strong) 50%, var(--panel-strong) 75%);
background-size: 200% 100%;
animation: livePreviewShimmer 1.5s infinite ease-in-out;
}
.live-preview-skeleton-line {
height: 10px;
border-radius: 4px;
width: 80%;
background: linear-gradient(90deg, var(--panel-strong) 25%, var(--border-strong) 50%, var(--panel-strong) 75%);
background-size: 200% 100%;
animation: livePreviewShimmer 1.5s infinite ease-in-out;
}
.live-preview-skeleton-line-sub {
height: 8px;
border-radius: 4px;
width: 50%;
background: linear-gradient(90deg, var(--panel-strong) 25%, var(--border-strong) 50%, var(--panel-strong) 75%);
background-size: 200% 100%;
animation: livePreviewShimmer 1.5s infinite ease-in-out;
}
/* --- Shelf Drag Handle in Preview Mode ---------------------------------- */
.shelf-drag-handle {
cursor: grab;
user-select: none;
touch-action: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--muted);
margin-right: 8px;
padding: 2px 6px;
border-radius: var(--radius-sm);
transition: color 0.15s ease, background-color 0.15s ease;
vertical-align: middle;
flex: none;
line-height: 1;
}
.shelf-drag-handle:hover {
color: var(--text);
background: var(--panel-strong);
}
.shelf-drag-handle:active {
cursor: grabbing;
}
.entry.dragging {
opacity: 0.45;
transform: scale(0.99);
}
/* --- Shelf Header Loading Status Badge ---------------------------------- */
.live-preview-shelf-status {
display: inline-flex;
align-items: center;
flex: none;
gap: 4px;
font-size: 0.74rem;
font-weight: 500;
color: var(--muted);
margin-left: 6px;
letter-spacing: 0.01em;
}
.live-preview-shelf-status .status-spin {
display: inline-block;
animation: spin 0.9s linear infinite;
}
/* --- Floating Unsaved Changes to Install Link Banner -------------------- */
.unsaved-install-banner {
position: fixed;
bottom: calc(72px + env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%) translateY(30px);
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill);
padding: 8px 14px 8px 16px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: var(--shadow-md);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
white-space: nowrap;
max-width: calc(100vw - 24px);
font-size: 0.86rem;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.unsaved-install-banner.show {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.unsaved-install-banner-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--warn);
box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.2);
flex-shrink: 0;
animation: pulseDot 2s infinite ease-in-out;
}
.unsaved-install-banner-dot.up-to-date {
background: var(--success);
box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2);
animation: none;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
.unsaved-install-banner-btn {
background: var(--accent);
color: #ffffff;
border: none;
border-radius: var(--radius-pill);
padding: 5px 12px;
font-size: 0.80rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.unsaved-install-banner-btn:hover {
background: var(--accent-hover);
}
.unsaved-install-banner-btn:active {
transform: scale(0.96);
}