From 99d01be1b314134836b8b0d1d6a1987637c38ca4 Mon Sep 17 00:00:00 2001 From: Johnnybegood90 Date: Tue, 10 Mar 2026 09:32:56 +0100 Subject: [PATCH] =?UTF-8?q?R=C3=A9paration=20th=C3=A8mes=20+=20s=C3=A9lect?= =?UTF-8?q?eur?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.php | 21 +++++++++++-- themes/cyberpunk.css | 72 +++++++++++--------------------------------- themes/magazine.css | 54 ++++++++++----------------------- themes/steampunk.css | 58 ++++++++++------------------------- 4 files changed, 68 insertions(+), 137 deletions(-) diff --git a/index.php b/index.php index 7378579..b85c237 100644 --- a/index.php +++ b/index.php @@ -17,10 +17,26 @@ $m3u_url = htmlspecialchars($config["m3u_url"] ?? ""); GridTV — <?= $group_name ?> - + diff --git a/themes/cyberpunk.css b/themes/cyberpunk.css index 11543c4..b31d462 100644 --- a/themes/cyberpunk.css +++ b/themes/cyberpunk.css @@ -1,64 +1,26 @@ /* - * GridTV Theme — Cyberpunk (Néons & dystopie) - * Violet/magenta sur noir profond, glows, Blade Runner vibes. + * GridTV Theme — Cyberpunk + * Néons rose/cyan sur noir absolu. Blade Runner. */ @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap'); :root { - --bg: #050008; - --surface: #0a000f; - --surface2: #0f0018; - --border: #2a0040; - --border-bright: #5a0080; - --accent: #ff00ff; - --accent2: #00ffcc; - --accent-live: #ff0055; - --text: #cc88ff; - --text-dim: #660099; - --text-bright: #ffccff; - --prog-bg: #0d0018; - --prog-border: #3d0060; - --prog-live-bg: #1a0030; - --prog-live-border: #ff00ff; + --bg: #000008; + --surface: #080010; + --surface2: #100020; + --border: #300050; + --border-bright: #6000a0; + --accent: #ff00cc; + --accent2: #00ffee; + --accent-live: #ff0040; + --text: #dd88ff; + --text-dim: #7700bb; + --text-bright: #ffddff; + --prog-bg: #0a0018; + --prog-border: #400070; + --prog-live-bg: #180030; + --prog-live-border: #ff00cc; --font-ui: 'Rajdhani', sans-serif; --font-mono: 'Share Tech Mono', monospace; } - -/* Topbar avec glow */ -.topbar { - border-bottom: 1px solid var(--accent); - box-shadow: 0 0 20px rgba(255,0,255,0.15); -} - -/* Logo néon */ -.logo { - color: var(--accent); - text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent); -} - -/* Badge LIVE néon */ -.live-dot { - color: var(--accent-live); - text-shadow: 0 0 8px var(--accent-live); -} -.live-dot::before { - box-shadow: 0 0 6px var(--accent-live); -} - -/* Programmes live avec glow */ -.program-block.is-live { - box-shadow: 0 0 8px rgba(255,0,255,0.3); -} - -/* Barre rouge néon */ -.now-line { - box-shadow: 0 0 8px var(--accent-live), 0 0 16px var(--accent-live); -} - -/* Bordures néon */ -.channels-col { border-right: 1px solid var(--accent); } -.time-ruler { border-bottom: 1px solid var(--accent); } - -/* Scrollbar */ -.timeline-area::-webkit-scrollbar-thumb { background: var(--border-bright); } diff --git a/themes/magazine.css b/themes/magazine.css index 950d020..95f6d81 100644 --- a/themes/magazine.css +++ b/themes/magazine.css @@ -1,48 +1,26 @@ /* * GridTV Theme — Magazine (Vieux TV Guide années 60) - * Papier jauni, machine à écrire, bordures doubles. + * Papier jauni, encre rouge et bleue, machine à écrire. */ @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap'); :root { - --bg: #f0e8d0; - --surface: #e8dfc0; - --surface2: #ddd4b0; - --border: #c8b890; - --border-bright: #a89870; - --accent: #c0392b; - --accent2: #2471a3; - --accent-live: #c0392b; - --text: #2c1810; - --text-dim: #7a6040; - --text-bright: #1a0c08; - --prog-bg: #ede4ca; - --prog-border: #c8b890; - --prog-live-bg: #fdf0e8; - --prog-live-border: #c0392b; + --bg: #f2e8c8; + --surface: #ede0b0; + --surface2: #e4d49a; + --border: #b8a070; + --border-bright: #8a7040; + --accent: #b01020; + --accent2: #1a4a8a; + --accent-live: #b01020; + --text: #1a0e06; + --text-dim: #6a4a20; + --text-bright: #0a0602; + --prog-bg: #ede0b0; + --prog-border: #b8a070; + --prog-live-bg: #fff0e0; + --prog-live-border: #b01020; --font-ui: 'Special Elite', serif; --font-mono: 'Special Elite', serif; } - -/* Topbar papier texturé avec double bordure */ -.topbar { - border-bottom: 3px double var(--border-bright); - background: repeating-linear-gradient( - -45deg, transparent, transparent 2px, - rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px - ), var(--surface); -} - -.logo { text-transform: uppercase; letter-spacing: 0.15em; } - -/* Colonne chaînes avec double bordure */ -.channels-col { border-right: 3px double var(--border-bright); } -.channel-cell { border-bottom: 1px dashed var(--border); } - -/* Grille */ -.program-block { border-radius: 0; } -.time-ruler { border-bottom: 3px double var(--border-bright); } - -/* Scrollbar */ -.timeline-area::-webkit-scrollbar-thumb { background: var(--border-bright); } diff --git a/themes/steampunk.css b/themes/steampunk.css index c5caee0..39e029f 100644 --- a/themes/steampunk.css +++ b/themes/steampunk.css @@ -1,52 +1,26 @@ /* * GridTV Theme — Steampunk (Cuivre victorien) - * Cuivre, brun, engrenages imaginaires. Très 1880. + * Brun chaud, cuivre, laiton. Très 1880. */ @import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap'); :root { - --bg: #1a1008; - --surface: #241808; - --surface2: #2e2010; - --border: #5a3a10; - --border-bright: #8a5a20; - --accent: #d4820a; - --accent2: #c87820; - --accent-live: #e05010; - --text: #c8a060; - --text-dim: #7a5030; - --text-bright: #f0d090; - --prog-bg: #201408; - --prog-border: #6a4010; - --prog-live-bg: #2a1800; - --prog-live-border: #d4820a; + --bg: #160e04; + --surface: #201408; + --surface2: #2c1e0c; + --border: #4a2e0a; + --border-bright: #7a4e18; + --accent: #c87808; + --accent2: #e0a020; + --accent-live: #cc3000; + --text: #d4a050; + --text-dim: #7a5428; + --text-bright: #f0cc80; + --prog-bg: #1c1206; + --prog-border: #5a380c; + --prog-live-bg: #281800; + --prog-live-border: #c87808; --font-ui: 'IM Fell English', serif; --font-mono: 'Share Tech Mono', monospace; } - -/* Topbar avec lignes cuivrées */ -.topbar { - border-bottom: 2px solid var(--accent); - background: repeating-linear-gradient( - 90deg, transparent, transparent 40px, - rgba(212,130,10,0.04) 40px, rgba(212,130,10,0.04) 41px - ), var(--surface); -} - -.logo { color: var(--accent); } - -/* Blocs carrés façon métal usiné */ -.program-block { border-radius: 0; } - -/* Bordures cuivrées */ -.channels-col { border-right: 2px solid var(--accent); } -.time-ruler { border-bottom: 2px solid var(--accent); } -.channel-cell { border-bottom: 1px solid var(--border); } - -/* Barre "now" cuivrée */ -.now-line { background: var(--accent); } -.now-line::before { background: var(--accent); } - -/* Scrollbar */ -.timeline-area::-webkit-scrollbar-thumb { background: var(--accent); }