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

Split the CSS from head.php into separate files.

Browse Source
This commit is contained in:
Johnnybegood90
2026-03-13 22:56:40 +01:00
parent 8b032f56de
commit 181e477a0e
12 changed files with 908 additions and 886 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/topbar.css
+211
View File
@@ -0,0 +1,211 @@
/* ═══════════════════════════════════════════
TOP BAR
═══════════════════════════════════════════ */
.topbar {
height: 50px;
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 16px;
gap: 12px;
flex-shrink: 0;
position: relative;
z-index: 100;
}
.logo {
font-family: 'Share Tech Mono', monospace;
font-size: 13px;
color: var(--accent);
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.logo span { color: var(--text-dim); margin: 0 5px; }
.logo-sub { display: inline; }
.live-dot {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-family: 'Share Tech Mono', monospace;
color: var(--accent-live);
letter-spacing: 0.1em;
margin-left: auto;
flex-shrink: 0;
}
.live-dot::before {
content: '';
width: 7px; height: 7px;
background: var(--accent-live);
border-radius: 50%;
animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:0.3; transform:scale(0.7); }
}
.clock {
font-family: 'Share Tech Mono', monospace;
font-size: 20px;
color: var(--text-bright);
letter-spacing: 0.05em;
flex-shrink: 0;
}
.date-label {
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
color: var(--text-dim);
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.nav-btns {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.nav-btn {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-family: 'Barlow Condensed', sans-serif;
font-size: 12px;
letter-spacing: 0.06em;
padding: 4px 10px;
cursor: pointer;
text-transform: uppercase;
transition: all 0.15s;
white-space: nowrap;
}
.nav-btn:hover, .nav-btn.active {
background: var(--accent);
color: #000;
border-color: var(--accent);
}
.copy-btns {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.copy-btn {
background: transparent;
border: 1px solid var(--border-bright);
color: var(--text-dim);
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
padding: 4px 9px;
cursor: pointer;
text-transform: uppercase;
transition: all 0.15s;
white-space: nowrap;
position: relative;
}
.copy-btn:hover {
border-color: var(--accent2);
color: var(--accent2);
}
.copy-btn.copied {
border-color: var(--accent);
color: var(--accent);
}
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 900px) {
:root { --channel-w: 110px; }
.logo-sub { display: none; }
.date-label { display: none; }
.clock { font-size: 16px; }
}
/* ═══════════════════════════════════════════
SÉLECTEUR DE THÈME
═══════════════════════════════════════════ */
.theme-select {
background: transparent;
border: 1px solid var(--border-bright);
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
padding: 4px 8px;
cursor: pointer;
text-transform: uppercase;
transition: all 0.15s;
flex-shrink: 0;
-webkit-appearance: none;
appearance: none;
}
.theme-select:hover { border-color: var(--accent2); color: var(--accent2); }
.theme-select option { background: #111; color: #eee; font-family: sans-serif; }
@media (max-width: 600px) {
html, body { height: 100%; overflow: hidden; }
body { overflow: hidden; }
.topbar {
height: auto;
flex-wrap: wrap;
padding: 8px 12px;
gap: 8px;
}
.logo { font-size: 11px; }
.clock { font-size: 14px; }
.grid-wrapper { display: none; }
.mobile-view { display: block; }
.tooltip { display: none !important; }
#navBtns { display: none !important; }
}
/* ── MODAL PERSONAL EPG ─────────────────────────────────────────────────── */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.7);
z-index: 3000; display: none; align-items: center; justify-content: center;
}
.modal-overlay.visible { display: flex; }
.modal-card {
background: var(--surface); border: 1px solid var(--border-bright);
padding: 28px; width: 100%; max-width: 420px; margin: 16px;
}
.modal-title {
font-family: var(--font-mono); font-size: 13px; color: var(--accent);
letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px;
}
.modal-subtitle { font-size: 12px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.5; }
.modal-field { margin-bottom: 14px; }
.modal-field label {
display: block; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px;
}
.modal-field input {
width: 100%; background: var(--surface2); border: 1px solid var(--border-bright);
color: var(--text-bright); font-family: var(--font-mono); font-size: 12px;
padding: 9px 10px; outline: none; transition: border-color 0.15s;
}
.modal-field input:focus { border-color: var(--accent); }
.modal-field input::placeholder { color: var(--text-dim); opacity: 0.4; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.modal-btn-cancel {
background: none; border: 1px solid var(--border-bright); color: var(--text-dim);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
text-transform: uppercase; padding: 8px 16px; cursor: pointer; transition: border-color 0.15s;
}
.modal-btn-cancel:hover { border-color: var(--text-dim); color: var(--text); }
.modal-btn-apply {
background: var(--accent); border: none; color: #000;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
text-transform: uppercase; padding: 8px 20px; cursor: pointer; transition: opacity 0.15s;
}
.modal-btn-apply:hover { opacity: 0.85; }