31 lines
2.0 KiB
CSS
31 lines
2.0 KiB
CSS
/* Contrôles indépendants de la feuille alfred.css existante */
|
|
body > main { position: relative; min-height: 100dvh; padding-bottom: 82px; box-sizing: border-box; }
|
|
.alfred-controls {
|
|
position: absolute; left: 16px; right: 16px; bottom: 12px;
|
|
display: flex; align-items: center; gap: 14px; min-height: 56px;
|
|
padding: 8px 18px; box-sizing: border-box;
|
|
border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
|
|
background: rgba(35,37,41,.92); color: #f4f4f5;
|
|
box-shadow: 0 8px 28px rgba(0,0,0,.14);
|
|
font: 14px/1.3 system-ui, sans-serif;
|
|
}
|
|
.alfred-controls .audio-toggle { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; font-size: 23px; cursor: pointer; }
|
|
.alfred-controls .audio-toggle:hover, .alfred-controls .audio-toggle:focus-visible { background: rgba(255,255,255,.10); outline-offset: 2px; }
|
|
.alfred-controls .audio-toggle[aria-pressed="true"] { background: rgba(225,100,100,.14); border-color: rgba(225,100,100,.28); }
|
|
.alfred-controls .volume-label { white-space: nowrap; color: #c8c8ce; }
|
|
.alfred-controls input[type="range"] { min-width: 60px; flex: 1; accent-color: #d1d5db; cursor: pointer; }
|
|
.alfred-controls output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
|
|
.alfred-controls .controls-separator { height: 25px; width: 1px; background: rgba(255,255,255,.16); }
|
|
@media (max-width: 480px) { .alfred-controls { gap: 8px; padding: 6px 9px; left: 8px; right: 8px; } .alfred-controls .volume-label { display: none; } }
|
|
|
|
/* Deux curseurs dans la barre inférieure */
|
|
.alfred-controls { gap: 10px; }
|
|
.alfred-controls input[type="range"] { min-width: 55px; }
|
|
.alfred-controls output { min-width: 48px; }
|
|
@media (max-width: 700px) {
|
|
body > main { padding-bottom: 126px; }
|
|
.alfred-controls { flex-wrap: wrap; justify-content: center; }
|
|
.alfred-controls input[type="range"] { flex: 1 1 80px; }
|
|
.alfred-controls .controls-separator { display: none; }
|
|
}
|