stephane.david/GridTV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Réparation thèmes + sélecteur

Browse Source
This commit is contained in:
Johnnybegood90
2026-03-10 09:32:56 +01:00
parent 76e46a48a0
commit 99d01be1b3
4 changed files with 68 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+19 -2
View File
@@ -17,10 +17,26 @@ $m3u_url = htmlspecialchars($config["m3u_url"] ?? "");
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GridTV — <?= $group_name ?></title>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap" rel="stylesheet">
<link id="themeStylesheet" rel="stylesheet" href="themes/default.css">
<style>
/* Variables de layout — indépendantes du thème */
/* Variables de base — surchargées par le fichier thème */
:root {
--bg: #0a0b0d;
--surface: #111318;
--surface2: #181b22;
--border: #232733;
--border-bright: #2e3444;
--accent: #e8c842;
--accent2: #4a9eff;
--accent-live: #ff4444;
--text: #c8cdd8;
--text-dim: #5a6070;
--text-bright: #eef0f5;
--prog-bg: #141820;
--prog-border: #1e2a3a;
--prog-live-bg: #0d2040;
--prog-live-border: #4a9eff;
--font-ui: 'Barlow Condensed', sans-serif;
--font-mono: 'Share Tech Mono', monospace;
--channel-w: 160px;
--row-h: 80px;
--header-h: 52px;
@@ -615,6 +631,7 @@ $m3u_url = htmlspecialchars($config["m3u_url"] ?? "");
#navBtns { display: none !important; }
}
</style>
<link id="themeStylesheet" rel="stylesheet" href="themes/default.css">
</head>
<body>
themes/cyberpunk.css
+17 -55
View File
@@ -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); }
themes/magazine.css
+16 -38
View File
@@ -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); }
themes/steampunk.css
+16 -42
View File
@@ -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); }