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 23:04:55 +01:00
parent 181e477a0e
commit 8ca85e778e
3 changed files with 106 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/grid.css
-96
View File
@@ -213,99 +213,3 @@
letter-spacing: 0.06em; letter-spacing: 0.06em;
white-space: nowrap; white-space: nowrap;
} }
/* ═══════════════════════════════════════════
MOBILE LIST VIEW
═══════════════════════════════════════════ */
.mobile-view {
display: none;
flex: 1;
overflow-y: auto;
min-height: 0;
/* TOOLTIP */
.tooltip {
position: fixed;
background: var(--surface);
border: 1px solid var(--accent2);
border-radius: 4px;
padding: 10px 14px;
z-index: 999;
pointer-events: none;
max-width: 300px;
opacity: 0;
transition: opacity 0.15s;
}
.tooltip.visible { opacity: 1; }
.tooltip-title { font-size: 14px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
.tooltip-time { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--accent2); margin-bottom: 6px; }
.tooltip-desc { font-size: 12px; color: var(--text); line-height: 1.4; max-height: 80px; overflow: hidden; }
/* LOADING */
.loading {
position: fixed; inset: 0;
background: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
gap: 20px;
}
.loading-text {
font-family: 'Share Tech Mono', monospace;
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.loading-bar {
width: 200px; height: 2px;
background: var(--border);
position: relative;
overflow: hidden;
}
.loading-bar::after {
content: '';
position: absolute;
top: 0; left: -60%;
width: 60%; height: 100%;
background: var(--accent);
animation: loading-anim 1.2s ease-in-out infinite;
}
@keyframes loading-anim { to { left: 110%; } }
.error-msg {
position: fixed; inset: 0;
background: var(--bg);
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
gap: 16px;
display: none;
padding: 20px;
}
.err-title { font-family: 'Share Tech Mono', monospace; font-size: 14px; color: var(--accent-live); letter-spacing: 0.1em; }
.err-sub { font-size: 13px; color: var(--text-dim); text-align: center; max-width: 400px; line-height: 1.5; }
.epg-input-bar { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.epg-input {
background: var(--surface2);
border: 1px solid var(--border-bright);
color: var(--text-bright);
font-family: 'Share Tech Mono', monospace;
font-size: 12px;
padding: 8px 12px;
width: 320px;
outline: none;
}
.epg-input:focus { border-color: var(--accent); }
.epg-btn {
background: var(--accent);
border: none; color: #000;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 18px;
cursor: pointer;
}
src/css/mobile.css
+88
View File
@@ -101,3 +101,91 @@
margin-right: 8px; margin-right: 8px;
flex-shrink: 0; flex-shrink: 0;
} }
/* TOOLTIP */
.tooltip {
position: fixed;
background: var(--surface);
border: 1px solid var(--accent2);
border-radius: 4px;
padding: 10px 14px;
z-index: 999;
pointer-events: none;
max-width: 300px;
opacity: 0;
transition: opacity 0.15s;
}
.tooltip.visible { opacity: 1; }
.tooltip-title { font-size: 14px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
.tooltip-time { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--accent2); margin-bottom: 6px; }
.tooltip-desc { font-size: 12px; color: var(--text); line-height: 1.4; max-height: 80px; overflow: hidden; }
/* LOADING */
.loading {
position: fixed; inset: 0;
background: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
gap: 20px;
}
.loading-text {
font-family: 'Share Tech Mono', monospace;
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.loading-bar {
width: 200px; height: 2px;
background: var(--border);
position: relative;
overflow: hidden;
}
.loading-bar::after {
content: '';
position: absolute;
top: 0; left: -60%;
width: 60%; height: 100%;
background: var(--accent);
animation: loading-anim 1.2s ease-in-out infinite;
}
@keyframes loading-anim { to { left: 110%; } }
.error-msg {
position: fixed; inset: 0;
background: var(--bg);
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
gap: 16px;
display: none;
padding: 20px;
}
.err-title { font-family: 'Share Tech Mono', monospace; font-size: 14px; color: var(--accent-live); letter-spacing: 0.1em; }
.err-sub { font-size: 13px; color: var(--text-dim); text-align: center; max-width: 400px; line-height: 1.5; }
.epg-input-bar { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.epg-input {
background: var(--surface2);
border: 1px solid var(--border-bright);
color: var(--text-bright);
font-family: 'Share Tech Mono', monospace;
font-size: 12px;
padding: 8px 12px;
width: 320px;
outline: none;
}
.epg-input:focus { border-color: var(--accent); }
.epg-btn {
background: var(--accent);
border: none; color: #000;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 18px;
cursor: pointer;
}
src/css/topbar.css
+18 -43
View File
@@ -117,7 +117,7 @@
color: var(--accent); color: var(--accent);
} }
/* ═══════════════════════════════════════════ /* ═══════════════════════════════════════════
RESPONSIVE RESPONSIVE
═══════════════════════════════════════════ */ ═══════════════════════════════════════════ */
@media (max-width: 900px) { @media (max-width: 900px) {
@@ -127,7 +127,7 @@
.clock { font-size: 16px; } .clock { font-size: 16px; }
} }
/* ═══════════════════════════════════════════ /* ═══════════════════════════════════════════
SÉLECTEUR DE THÈME SÉLECTEUR DE THÈME
═══════════════════════════════════════════ */ ═══════════════════════════════════════════ */
.theme-select { .theme-select {
@@ -167,45 +167,20 @@
#navBtns { display: none !important; } #navBtns { display: none !important; }
} }
/* ── SOURCE SELECTOR ─────────────────────────────────────────────────────── */
.source-select {
/* ── MODAL PERSONAL EPG ─────────────────────────────────────────────────── */ background: var(--surface2);
.modal-overlay { border: 1px solid var(--border-bright);
position: fixed; inset: 0; background: rgba(0,0,0,0.7); color: var(--text);
z-index: 3000; display: none; align-items: center; justify-content: center; font-family: var(--font-mono);
font-size: 11px;
padding: 5px 8px;
cursor: pointer;
letter-spacing: 0.06em;
height: 28px;
outline: none;
transition: border-color 0.15s, color 0.15s;
max-width: 130px;
} }
.modal-overlay.visible { display: flex; } .source-select:hover { border-color: var(--accent2); color: var(--accent2); }
.modal-card { .source-select option { background: #111; color: #eee; font-family: sans-serif; }
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; }