Nicolas
d8dc263690
- Layout en hauteur pleine (html/body/.shell à 100%/100vh, overflow hidden sur body) : la page ne défile plus jamais. Seules download-form__results et queue-panel__list défilent en interne (flex:1 1 0 + min-height:0 + overflow-y:auto), propagé depuis .shell via min-height:0 à chaque niveau flex descendant. - .shell__main : ratio de colonnes 3fr/2fr -> 2fr/1fr et max-width 960px -> 1280px, pour une liste de vidéos plus large. - Miniatures de résultats agrandies (96x54 -> 144x81, ratio 16:9) et titre sur 2 lignes (line-clamp) plutôt qu'une troncature sur une seule ligne, pour mieux différencier les vidéos au premier coup d'œil. Vérifié en navigateur avec des données de test (16 éléments de file, 12 résultats factices injectés) : bodyScrollHeight reste égal à windowInnerHeight (page sans overflow) alors que les deux listes ont un scrollHeight très supérieur à leur clientHeight (défilement interne réel, pas juste visuel). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
100 lines
2 KiB
SCSS
100 lines
2 KiB
SCSS
// Palette et styles de base partagés par toutes les vues. Variables CSS
|
|
// natives (pas des $variables Sass) : chaque vue compile son propre
|
|
// fichier .scss indépendamment (voir build.mjs), seules les custom
|
|
// properties CSS traversent correctement ce découpage à l'exécution.
|
|
:root {
|
|
--color-bg: #f6f7f9;
|
|
--color-surface: #ffffff;
|
|
--color-border: #e3e5ea;
|
|
--color-text: #2b2d33;
|
|
--color-text-muted: #767a85;
|
|
--color-primary: #4f7cff;
|
|
--color-primary-hover: #3d64e0;
|
|
--color-danger-bg: #fdf2f2;
|
|
--color-danger-text: #b3423f;
|
|
--color-danger-border: #eab8b6;
|
|
--color-success-border: #5fae84;
|
|
--color-neutral-border: #c7cad1;
|
|
--radius: 8px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// La page elle-même ne défile jamais : seules les listes internes (file
|
|
// d'attente, résultats de recherche) le font, voir Shell.scss et les
|
|
// vues concernées (chacune doit propager height:100%/min-height:0
|
|
// jusqu'à son propre élément scrollable pour que ça fonctionne).
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family:
|
|
system-ui,
|
|
-apple-system,
|
|
'Segoe UI',
|
|
sans-serif;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
button {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
input[type='text'],
|
|
input[type='url'],
|
|
select {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius);
|
|
padding: 0.5rem 0.6rem;
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
input:focus,
|
|
select:focus,
|
|
button:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
button {
|
|
border: 1px solid var(--color-primary);
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border-radius: var(--radius);
|
|
padding: 0.5rem 0.9rem;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background: var(--color-primary-hover);
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
button.secondary {
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
button.secondary:hover {
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
}
|