/* ═══════════════════════════════════════════════════════════════════════ STREAMLOG — Design System v3.0 "Paper Cinema" Les couleurs dérivent des tokens du thème (--bg / --tx / --surf / --acc) pour que le plugin suive automatiquement l'habillage clair ou sombre du site. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. Tokens ────────────────────────────────────────────────────────── */ :root { /* Socle hérité du thème */ --stl-paper: var(--bg, #fbfaf8); --stl-ink: var(--tx, #171613); /* Surfaces */ --stl-bg: var(--stl-paper); --stl-surface: color-mix(in srgb, var(--stl-ink) 3%, var(--stl-paper)); --stl-surface-2: color-mix(in srgb, var(--stl-ink) 6%, var(--stl-paper)); --stl-surface-3: color-mix(in srgb, var(--stl-ink) 11%, var(--stl-paper)); --stl-border: color-mix(in srgb, var(--stl-ink) 14%, var(--stl-paper)); --stl-border-hover: color-mix(in srgb, var(--stl-ink) 32%, var(--stl-paper)); /* Accents — mélangés vers l'encre pour rester lisibles en clair comme en sombre. Le mélange conserve la teinte du thème (rouge, jaune…) tout en garantissant un contraste suffisant sur le fond, quel que soit l'accent choisi. */ --stl-accent-raw: var(--acc, #b02e26); --stl-primary: color-mix(in srgb, var(--stl-accent-raw) 62%, var(--stl-ink)); --stl-primary-hover:color-mix(in srgb, var(--stl-accent-raw) 42%, var(--stl-ink)); --stl-primary-dim: color-mix(in srgb, var(--stl-accent-raw) 14%, var(--stl-paper)); --stl-gold: color-mix(in srgb, #c8900c 72%, var(--stl-ink)); --stl-gold-dim: color-mix(in srgb, #c8900c 14%, var(--stl-paper)); --stl-green: color-mix(in srgb, #17914a 74%, var(--stl-ink)); --stl-green-dim: color-mix(in srgb, #17914a 12%, var(--stl-paper)); --stl-red: color-mix(in srgb, #d13b30 80%, var(--stl-ink)); --stl-blue: color-mix(in srgb, #2f6fd0 74%, var(--stl-ink)); /* Texte */ --stl-text: var(--stl-ink); --stl-text-dim: color-mix(in srgb, var(--stl-ink) 74%, var(--stl-paper)); --stl-text-muted: color-mix(in srgb, var(--stl-ink) 52%, var(--stl-paper)); /* Typographie — on suit le thème hôte : serif éditoriale si le thème en déclare une, sinon sa propre sans (jamais une police tierce imposée). */ --stl-sans: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); --stl-mono: var(--mono, 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace); --stl-serif: var(--serif, var(--heading, var(--stl-sans))); /* Forme */ --stl-radius-sm: 4px; --stl-radius: 6px; --stl-radius-lg: 12px; --stl-radius-xl: 8px; --stl-shadow-sm: 0 1px 2px color-mix(in srgb, var(--stl-ink) 8%, transparent); --stl-shadow: 0 2px 10px color-mix(in srgb, var(--stl-ink) 10%, transparent); --stl-shadow-lg: 0 14px 40px color-mix(in srgb, var(--stl-ink) 18%, transparent); --stl-transition: .18s ease; } /* ── 2. Base ──────────────────────────────────────────────────────────── */ .stl-single-wrap, .stl-person-wrap { font-family: var(--stl-sans); color: var(--stl-text); max-width: 1240px; margin: 0 auto; padding: 24px 16px; -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } /* Le thème sort le titre de page de son conteneur : sur les pages Streamlog il se retrouvait aligné au bord gauche, décalé de la grille. Ces pages portent leur propre titre dans le flux du contenu (voir Streamlog::body_class). Retirer ce filtre suffit à réafficher celui du thème. */ .stl-app .entry-title, .stl-app .page-title { display: none; } /* Le gabarit du thème encadre le contenu ; on évite de doubler les marges. */ .stl-app .page-content-wrapper > .page-content { padding-inline: 0; } /* Filet de sécurité pour la barre de filtres collante du catalogue. Un `overflow-x: hidden` sur force l'axe vertical à `auto` : devient une zone de défilement et `position: sticky` cesse d'agir chez ses descendants. `clip` rogne pareil sans créer cette zone. Le thème actif applique déjà `clip` ; cette règle protège les versions plus anciennes du thème, qui posent encore `hidden`. */ .stl-app { overflow-x: clip; } /* ── 2 bis. Boutons partagés ──────────────────────────────────────────── */ .stl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border: 1px solid var(--stl-border-hover); border-radius: var(--stl-radius); background: transparent; color: var(--stl-text); font-family: var(--stl-sans); font-size: 13.5px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: all var(--stl-transition); } .stl-btn:hover { border-color: var(--stl-text); background: var(--stl-text); color: var(--stl-paper); } .stl-btn-solid { border-color: var(--stl-primary); background: var(--stl-primary); color: #fff; } .stl-btn-solid:hover { border-color: var(--stl-primary-hover); background: var(--stl-primary-hover); color: #fff; } .stl-btn-ghost { border-style: dashed; color: var(--stl-text-dim); } .stl-btn-ghost:hover { border-style: solid; } .stl-btn-sm { padding: 7px 14px; font-size: 12px; } /* ── 3. Bouton retour ─────────────────────────────────────────────────── */ .stl-back-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; margin-bottom: 24px; background: var(--stl-surface); border: 1px solid var(--stl-border); border-radius: 50px; color: var(--stl-text-dim); font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: .02em; transition: all var(--stl-transition); } .stl-back-btn:hover { border-color: var(--stl-primary); color: var(--stl-primary); background: var(--stl-primary-dim); } /* ── 4. Titres de section ─────────────────────────────────────────────── */ .stl-section-title { font-family: var(--stl-serif); font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 16px; color: var(--stl-text); display: flex; align-items: center; gap: 10px; } .stl-section-title::before { content: ''; display: block; width: 3px; height: 18px; background: var(--stl-primary); border-radius: 2px; flex-shrink: 0; } .stl-section { margin-bottom: 48px; } /* ── 5. Catalogue — Barre de recherche ───────────────────────────────── */ .stl-catalog-header { position: relative; margin-bottom: 36px; } .stl-search-form { display: flex; flex-direction: column; gap: 14px; } .stl-search-bar { display: flex; gap: 10px; } .stl-search-input { flex: 1; padding: 14px 20px; border-radius: var(--stl-radius-xl); border: 1.5px solid var(--stl-border); background: var(--stl-surface-2); color: var(--stl-text); font-size: 15px; outline: none; transition: border-color var(--stl-transition), box-shadow var(--stl-transition); } .stl-search-input:focus { border-color: var(--stl-primary); box-shadow: 0 0 0 3px var(--stl-primary-dim); } .stl-search-input::placeholder { color: var(--stl-text-muted); } /* ── 7. Live search dropdown ([stl_search]) ───────────────────────────── */ /* Le conteneur doit être positionné, sinon la liste déroulante se cale sur la page entière au lieu du champ de recherche. */ .stl-search-widget { position: relative; } .stl-live-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--stl-surface-2); border: 1px solid var(--stl-border); border-radius: var(--stl-radius-lg); box-shadow: var(--stl-shadow); z-index: 1000; max-height: 420px; overflow-y: auto; overflow-x: hidden; } .stl-live-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background var(--stl-transition); text-decoration: none; color: var(--stl-text); border-bottom: 1px solid var(--stl-border); } .stl-live-item:last-child { border-bottom: none; } .stl-live-item:hover { background: var(--stl-primary-dim); } .stl-live-item img { width: 32px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .stl-live-item-thumb { width: 32px; height: 48px; background: var(--stl-surface-3); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .stl-live-item-info { flex: 1; min-width: 0; } .stl-live-item-info .stl-live-title { font-weight: 600; font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stl-live-item-info .stl-live-year { color: var(--stl-text-muted); font-size: 12px; } .stl-live-type-badge { margin-left: auto; padding: 2px 8px; border-radius: 50px; background: var(--stl-primary-dim); color: var(--stl-primary); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; } /* ── 9. Fiche single ──────────────────────────────────────────────────── */ .stl-single-wrap { position: relative; } /* Hero backdrop pleine largeur */ .stl-backdrop { position: relative; height: 420px; background-size: cover; background-position: center 20%; border-radius: var(--stl-radius-lg); overflow: hidden; margin-bottom: -100px; } .stl-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(13,13,20,.2) 0%, rgba(13,13,20,.5) 40%, rgba(13,13,20,1) 100% ); } /* Layout poster + infos */ .stl-single-inner { display: flex; gap: 36px; position: relative; z-index: 1; padding-top: 20px; align-items: flex-start; } .stl-single-poster { flex: 0 0 200px; } .stl-poster-img { width: 100%; border-radius: var(--stl-radius); box-shadow: var(--stl-shadow-lg); display: block; } .stl-no-poster-lg { width: 100%; aspect-ratio: 2/3; background: var(--stl-surface-2); display: flex; align-items: center; justify-content: center; font-size: 64px; border-radius: var(--stl-radius); color: var(--stl-text-muted); } .stl-poster-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .stl-single-info { flex: 1; min-width: 0; padding-top: 8px; } .stl-single-title { font-size: 32px; font-weight: 900; margin: 0 0 6px; line-height: 1.1; letter-spacing: -.02em; } .stl-original-title { color: var(--stl-text-muted); font-style: italic; font-size: 15px; margin-bottom: 16px; } /* Meta chips */ .stl-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .stl-meta-chip { padding: 5px 13px; background: var(--stl-surface-2); border-radius: 50px; font-size: 13px; font-weight: 600; border: 1px solid var(--stl-border); color: var(--stl-text-dim); } .stl-rating-chip { background: var(--stl-gold-dim); border-color: rgba(240,192,64,.4); color: var(--stl-gold); } /* Genres */ .stl-genres-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .stl-genre-tag { padding: 4px 13px; background: var(--stl-primary-dim); color: var(--stl-primary); border-radius: 50px; font-size: 12px; font-weight: 700; border: 1px solid rgba(124,106,255,.3); letter-spacing: .02em; } /* Synopsis */ .stl-synopsis { margin-bottom: 20px; } .stl-synopsis h3 { font-size: 11px; font-weight: 700; margin-bottom: 8px; color: var(--stl-text-muted); text-transform: uppercase; letter-spacing: .1em; } .stl-synopsis p { line-height: 1.75; color: var(--stl-text-dim); font-size: 15px; } .stl-added-by { font-size: 13px; color: var(--stl-text-muted); margin-bottom: 16px; } .stl-author-link { color: var(--stl-primary); text-decoration: none; } .stl-author-link:hover { text-decoration: underline; } /* Liens externes */ .stl-external-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } /* ── 10. Boutons ──────────────────────────────────────────────────────── */ .stl-btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 22px; border-radius: var(--stl-radius); border: none; cursor: pointer; font-size: 14px; font-weight: 700; text-decoration: none; transition: all var(--stl-transition); letter-spacing: .01em; white-space: nowrap; } .stl-btn-primary { background: var(--stl-primary); color: #fff; } .stl-btn-primary:hover { background: var(--stl-primary-hover); transform: translateY(-1px); } .stl-btn-secondary { background: transparent; color: var(--stl-primary); border: 2px solid var(--stl-primary); } .stl-btn-secondary:hover { background: var(--stl-primary-dim); } .stl-btn-trailer { background: #dc2626; color: #fff; } .stl-btn-trailer:hover { background: #b91c1c; } .stl-btn-imdb { background: var(--stl-gold); color: #000; font-weight: 800; } .stl-btn-imdb:hover { background: #d4a800; } .stl-btn-wl, .stl-btn-watched-lg { width: 100%; justify-content: center; border: 1.5px solid var(--stl-border); background: var(--stl-surface-2); color: var(--stl-text-dim); padding: 12px; border-radius: var(--stl-radius); font-size: 14px; } .stl-btn-wl:hover, .stl-btn-watched-lg:hover { border-color: var(--stl-primary); color: var(--stl-primary); background: var(--stl-primary-dim); } .stl-btn-wl.in-list, .stl-btn-watched-lg.is-watched { border-color: var(--stl-green); background: var(--stl-green-dim); color: var(--stl-green); } .stl-btn-sm { padding: 6px 14px; font-size: 12px; border-radius: var(--stl-radius-sm); } /* Rating */ .stl-rating-widget { display: flex; align-items: center; gap: 6px; margin-top: 10px; } .stl-rating-widget span:first-child { font-size: 12px; color: var(--stl-text-muted); margin-right: 4px; } .stl-star { background: transparent; border: none; font-size: 22px; cursor: pointer; color: var(--stl-border-hover); transition: color var(--stl-transition), transform var(--stl-transition); padding: 0; } .stl-star:hover { transform: scale(1.2); } .stl-star:hover, .stl-star.active { color: var(--stl-gold); } /* ── 11. Saisons & Épisodes ───────────────────────────────────────────── */ .stl-seasons-wrap { margin-top: 48px; } .stl-seasons-wrap > h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .stl-seasons-wrap > h2::before { content: ''; display: block; width: 3px; height: 18px; background: var(--stl-primary); border-radius: 2px; } .stl-season-block { margin-bottom: 8px; border: 1px solid var(--stl-border); border-radius: var(--stl-radius); overflow: hidden; transition: border-color var(--stl-transition); } .stl-season-block:hover { border-color: var(--stl-border-hover); } .stl-season-block.open { border-color: rgba(124,106,255,.3); } .stl-season-header { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--stl-surface-2); cursor: pointer; user-select: none; transition: background var(--stl-transition); } .stl-season-header:hover { background: var(--stl-surface-3); } .stl-season-block.open .stl-season-header { background: var(--stl-surface-3); } .stl-season-toggle { font-size: 11px; color: var(--stl-text-muted); transition: transform var(--stl-transition); flex-shrink: 0; } .stl-season-block.open .stl-season-toggle { transform: rotate(90deg); } .stl-season-title { flex: 1; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .stl-season-count { color: var(--stl-text-muted); font-size: 12px; } .stl-season-episodes { display: none; } .stl-season-block.open .stl-season-episodes { display: block; } /* Barre de progression saison */ .stl-progress-block { padding: 10px 18px 0; background: var(--stl-surface); } .stl-progress-bar-wrap { height: 4px; background: var(--stl-border); border-radius: 2px; overflow: hidden; margin-bottom: 4px; } .stl-progress-bar { height: 100%; background: linear-gradient(90deg, var(--stl-primary), #a78bfa); border-radius: 2px; transition: width .4s ease; } /* Tableau épisodes */ .stl-episodes-table { width: 100%; border-collapse: collapse; } .stl-episodes-table th { padding: 10px 16px; text-align: left; background: rgba(0,0,0,.25); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--stl-text-muted); } .stl-episodes-table td { padding: 11px 16px; border-top: 1px solid var(--stl-border); font-size: 14px; vertical-align: middle; } .stl-ep-row { transition: background var(--stl-transition); } .stl-ep-row:hover { background: rgba(124,106,255,.05); } .stl-ep-row.ep-watched td { opacity: .55; } .stl-ep-row.ep-watched:hover td { opacity: .8; } .stl-ep-num { font-weight: 800; color: var(--stl-primary); font-size: 13px; width: 30px; } .stl-ep-title { color: var(--stl-text); } .stl-ep-duration { color: var(--stl-text-muted); font-size: 12px; white-space: nowrap; } .stl-ep-finale-badge { display: inline-block; padding: 1px 7px; background: var(--stl-gold-dim); color: var(--stl-gold); border-radius: 50px; font-size: 10px; font-weight: 700; margin-left: 6px; border: 1px solid rgba(240,192,64,.3); } .stl-ep-watch-btn { background: transparent; border: 1.5px solid var(--stl-border); border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 13px; transition: all var(--stl-transition); display: flex; align-items: center; justify-content: center; } .stl-ep-watch-btn.watched { background: var(--stl-green-dim); border-color: var(--stl-green); color: var(--stl-green); } .stl-ep-watch-btn:hover { border-color: var(--stl-green); } .stl-btn-season-mark { padding: 5px 14px; background: transparent; border: 1px solid var(--stl-border); border-radius: 50px; color: var(--stl-text-muted); cursor: pointer; font-size: 12px; margin-left: auto; transition: all var(--stl-transition); } .stl-btn-season-mark.all-watched { border-color: var(--stl-green); color: var(--stl-green); } .stl-btn-season-mark:hover { border-color: var(--stl-primary); color: var(--stl-primary); } /* ── 12. Cast ─────────────────────────────────────────────────────────── */ .stl-cast-section { margin-top: 48px; } .stl-cast-section h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .stl-cast-section h3::before { content: ''; display: block; width: 3px; height: 18px; background: var(--stl-primary); border-radius: 2px; } .stl-cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; } .stl-cast-card { text-align: center; } .stl-cast-card-link { text-decoration: none; color: inherit; display: block; border-radius: var(--stl-radius); padding: 12px 8px 10px; transition: background var(--stl-transition); border: 1px solid transparent; } .stl-cast-card-link:hover { background: var(--stl-primary-dim); border-color: rgba(124,106,255,.2); } .stl-cast-card img, .stl-cast-no-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto; display: block; } .stl-cast-no-photo { background: var(--stl-surface-3); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--stl-text-muted); } .stl-cast-info { margin-top: 8px; } .stl-cast-name { display: block; font-size: 12px; font-weight: 700; color: var(--stl-text); margin-bottom: 2px; } .stl-cast-char { display: block; font-size: 11px; color: var(--stl-text-muted); font-style: italic; } .stl-cast-role-tag { display: inline-block; margin-top: 4px; padding: 1px 7px; background: var(--stl-primary-dim); color: var(--stl-primary); border-radius: 50px; font-size: 10px; font-weight: 700; letter-spacing: .04em; } /* Watchers */ .stl-watchers-section { margin-top: 48px; } .stl-watchers-section .stl-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .stl-watcher-count { background: var(--stl-primary-dim); color: var(--stl-primary); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 50px; } .stl-watchers-list { display: flex; flex-wrap: wrap; gap: 10px; } .stl-watcher-item { display: flex; align-items: center; gap: 10px; background: var(--stl-surface-2); border: 1px solid var(--stl-border); border-radius: var(--stl-radius); padding: 10px 14px; min-width: 200px; transition: border-color var(--stl-transition); } .stl-watcher-item:hover { border-color: var(--stl-border-hover); } .stl-watcher-avatar img { border-radius: 50%; display: block; } .stl-watcher-info { display: flex; flex-direction: column; gap: 2px; } .stl-watcher-name { color: var(--stl-text); font-weight: 700; font-size: 14px; text-decoration: none; } .stl-watcher-name:hover { color: var(--stl-primary); } .stl-watcher-date { color: var(--stl-text-muted); font-size: 11px; } .stl-watcher-rating { color: var(--stl-gold); font-size: 12px; letter-spacing: 1px; } /* ── 14. Page Personne ────────────────────────────────────────────────── */ .stl-person-header { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 32px; } .stl-person-img { width: 150px; height: 200px; object-fit: cover; border-radius: var(--stl-radius); box-shadow: var(--stl-shadow); flex-shrink: 0; } .stl-person-no-photo { width: 150px; height: 200px; background: var(--stl-surface-2); display: flex; align-items: center; justify-content: center; font-size: 60px; border-radius: var(--stl-radius); flex-shrink: 0; color: var(--stl-text-muted); } .stl-person-info { flex: 1; } .stl-person-info h1 { font-size: 28px; font-weight: 900; margin: 0 0 8px; } .stl-bio { margin-top: 12px; line-height: 1.75; color: var(--stl-text-dim); font-size: 15px; } .stl-person-credits { margin-top: 36px; } .stl-person-credits h2 { font-size: 20px; font-weight: 800; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; } .stl-person-credits-count { font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--stl-surface-2); color: var(--stl-text-muted); } .stl-person-credits .stl-card-body { display: flex; flex-direction: column; gap: 4px; } .stl-person-credits-empty { color: var(--stl-text-muted); font-size: 15px; } /* ── 15. Divers ───────────────────────────────────────────────────────── */ .stl-empty { color: var(--stl-text-muted); text-align: center; padding: 48px; font-style: italic; } /* ── 16. Responsive Mobile ────────────────────────────────────────────── */ @media (max-width: 900px) { .stl-single-inner { flex-direction: column; gap: 24px; } .stl-single-poster { flex: none; width: 160px; } .stl-no-poster-lg { width: 160px; } .stl-backdrop { height: 300px; margin-bottom: -80px; } .stl-single-title { font-size: 26px; } } @media (max-width: 640px) { .stl-single-wrap, .stl-person-wrap { padding: 16px 12px; } .stl-backdrop { height: 220px; margin-bottom: -60px; } .stl-single-inner { flex-direction: column; gap: 16px; padding-top: 8px; } .stl-single-poster { flex: none; width: 140px; } .stl-no-poster-lg { width: 140px; } .stl-single-title { font-size: 22px; } .stl-poster-actions .stl-btn { font-size: 13px; padding: 10px 14px; } .stl-cast-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; } .stl-cast-card img, .stl-cast-no-photo { width: 56px; height: 56px; } .stl-person-header { flex-direction: column; } .stl-episodes-table th:nth-child(3), .stl-episodes-table td:nth-child(3) { display: none; } .stl-external-links { flex-wrap: wrap; } .stl-btn { font-size: 13px; padding: 10px 16px; } }