This commit is contained in:
pporcheret
2026-10-26 00:06:24 +01:00
parent c9c3d5f223
commit cd37ac3c0a
207 changed files with 19205 additions and 54 deletions
@@ -0,0 +1,41 @@
/* Pop-up des réglages : ne modifie pas la page configuration historique. */
.audio-popover { position:absolute; top:82px; right:36px; z-index:10; width:min(355px,calc(100vw - 28px)); background:#252a2e; border:1px solid #ffffff2b; border-radius:17px; padding:20px; box-shadow:0 24px 70px #0008; }
.audio-popover[hidden] { display:none !important; }
.popover-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; font-size:16px; }
.icon-button.mini { width:28px; height:28px; font-size:22px; border:0; background:none; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:19px; margin-bottom:12px; color:#d5dbe0; font-size:13px; }
.setting-row output { color:#f4f5f6; font-size:13px; font-variant-numeric:tabular-nums; }
.audio-popover input[type="range"] { display:block; width:100%; margin:0 0 5px; cursor:pointer; accent-color:#a8c7ce; }
.audio-popover input[type="range"]:disabled { opacity:.35; cursor:not-allowed; }
.setting-toggle { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:22px; padding-top:16px; border-top:1px solid #ffffff1c; color:#cbd1d5; font-size:13px; }
.quiet-button { color:#c3e7dc; background:#42675b33; border:1px solid #83c9ae44; padding:7px 13px; border-radius:8px; cursor:pointer; }
.quiet-button[aria-pressed="true"] { color:#f7b5b5; background:#b65c5c26; border-color:#b65c5c66; }
.settings-message { min-height:14px; margin:12px 0 0; font-size:11px; color:#e4c089; line-height:1.4; }
@media(max-width:760px) { .audio-popover { top:65px; right:14px; } }
/* Bouton mute microphone dans la barre supérieure. aria-pressed reflète l'état réel de l'API. */
.mic-off-icon { display: none; }
#micMute[aria-pressed="true"] .mic-on-icon { display: none; }
#micMute[aria-pressed="true"] .mic-off-icon { display: block; }
/* Onglet caméra dans le panneau déjà présent (pas de modification des vues calendrier). */
.audio-popover { max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain; }
.settings-tabs { display:flex; gap:5px; padding:4px; background:#111518; border-radius:11px; margin:0 0 16px; }
.settings-tab { flex:1; padding:10px; border:0; border-radius:8px; color:#a7b2ba; background:transparent; font:inherit; cursor:pointer; }
.settings-tab[aria-selected="true"] { background:#3b464b; color:#f6f8f9; font-weight:600; }
.settings-tab:focus-visible,.camera-settings-action:focus-visible,.camera-select:focus-visible,.camera-range:focus-visible { outline:2px solid #b9dbec; outline-offset:2px; }
.camera-settings-note { margin:10px 0 15px; color:#aab5be; font-size:12px; line-height:1.5; }
.camera-settings-items { display:block; }
.camera-group-title { color:#c2d6df; font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin:23px 0 8px; font-weight:650; }
.camera-control { padding:0 0 8px; border-bottom:1px solid #ffffff10; }
.camera-control .setting-row { margin-top:11px; margin-bottom:9px; }
.camera-control label { font-size:12px; }
.camera-control .camera-control-value { color:#b8ced5; }
.camera-range, .camera-select { width:100%; min-height:28px; accent-color:#a8c7ce; }
.camera-select { color:#eff2f5; background:#30383d; border:1px solid #ffffff26; border-radius:8px; padding:7px 9px; font-size:13px; }
.camera-control.is-inactive { opacity:.44; }
.camera-disabled-hint { font-size:11px; color:#acb5bf; margin-top:4px; }
.camera-settings-actions { display:flex; gap:8px; margin-top:19px; }
.camera-settings-action { flex:1; padding:10px; background:#3b464c; border:1px solid #ffffff23; border-radius:9px; color:#f2f5f6; font-size:12px; cursor:pointer; }
.camera-settings-action.reset { background:#5b454026; color:#f0c4b9; }
@media(max-width:760px) { .audio-popover { max-height:calc(100dvh - 80px); } }
@@ -0,0 +1,13 @@
.alfred-mode-icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
min-height: 36px;
font-size: 26px;
line-height: 1;
transition: transform .25s ease, opacity .25s ease;
}
.alfred-mode-icon[data-mode="thinking"] { animation: alfred-thinking 1.8s ease-in-out infinite; }
@keyframes alfred-thinking { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .alfred-mode-icon { animation: none !important; } }
@@ -0,0 +1,76 @@
/* Calendar and Home Assistant views — preserves original dark Alfred layout */
#stage:has(.alfred-view) {padding:0 0 6px;justify-content:stretch;align-items:stretch}
#content.alfred-view {width:100%;height:100%;text-align:left;min-height:0;}
.view-pane {display:flex;flex-direction:column;gap:12px;max-height:100%;height:100%;min-height:0;padding:8px 1px 14px;}
.view-head {display:flex;justify-content:space-between;align-items:center;gap:12px;}
#content .view-title {font-size:clamp(1.2rem,1.7vw,1.85rem);margin:0;font-weight:500}
.view-close,.view-button,.view-pill {background:#363d42;color:#f3f7fa;border:1px solid #ffffff24;border-radius:10px;padding:9px 14px;cursor:pointer;font:inherit}
.view-close {font-size:1.4rem;min-width:40px;height:40px;padding:0}
.view-button:hover,.view-pill:hover,.view-close:hover {background:#455057}
.view-pill.active,.view-button.primary {background:#427789;border-color:#619aad}
.view-toolbar {display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.view-nav,.view-modes {display:flex;gap:5px;align-items:center}
.view-period {font-size:.85rem;min-width:215px;text-align:center;color:#d8e0e4}
.view-select {padding:9px;max-width:220px;border-radius:9px;background:#333a3e;color:#eff3f5;border:1px solid #ffffff2b}
.agenda-grid {display:grid;gap:5px;min-height:0;flex:1;overflow:auto;padding:2px;align-content:stretch;}
.agenda-seven,.agenda-month {grid-template-columns:repeat(7,minmax(0,1fr))}
.agenda-month {grid-template-rows:repeat(6,minmax(110px,1fr));}
.agenda-three {grid-template-columns:repeat(3,minmax(0,1fr))}
.agenda-one {grid-template-columns:1fr}
.agenda-day {border:1px solid #ffffff1c;border-radius:11px;min-width:0;min-height:120px;background:#ffffff08;padding:9px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.agenda-day.is-today {border-color:#86bfda7a;background:#57839923}
.agenda-day.out-month {opacity:.42}
.agenda-date {font-size:.83rem;font-weight:600;color:#dce2e6;letter-spacing:.01em;padding-bottom:7px;border-bottom:1px solid #ffffff14}
.agenda-event {width:100%;text-align:left;background:color-mix(in srgb,var(--event-color) 17%,#2a2e32);color:#f1f3f5;border:0;border-left:3px solid var(--event-color);border-radius:5px;padding:7px 5px;font-size:clamp(.72rem,.85vw,.95rem);line-height:1.3;cursor:pointer;overflow-wrap:anywhere}
.agenda-event:hover {background:color-mix(in srgb,var(--event-color) 30%,#2a2e32)}
.agenda-empty {font-size:.8rem;color:#667781;margin:auto}
#content .view-footer {color:#9aa8b3;font-size:.76rem;margin:0}
#content .view-error {color:#f7adad;font-size:.85rem;margin:0}
#content .view-empty {font-size:1rem;color:#b8c2ca}
.agenda-form {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:14px;max-width:850px;width:100%;overflow-y:auto;margin:12px auto;}
.form-field {display:flex;flex-direction:column;gap:7px;color:#cfd6dd;font-size:.83rem}
.form-field input,.form-field select,.form-field textarea {padding:12px;border-radius:10px;color:#eff3f5;background:#2e3439;border:1px solid #ffffff32;font:inherit;min-width:0}
.form-field textarea {resize:vertical}
.form-check {display:flex;align-items:center;gap:10px}
.view-actions {display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.form-message {grid-column:1 / -1;}
.agenda-form .view-actions {grid-column:1 / -1}
.view-danger {color:#ffc4c4;background:#8f383850;border-color:#ed929255}
.detail-modal {position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#000b;padding:20px}
.detail-box {min-width:min(92vw,300px);max-width:540px;width:100%;border:1px solid #ffffff36;border-radius:19px;background:#292e33;box-shadow:0 25px 90px #000a;padding:24px;}
.detail-box h2 {font-size:1.4rem;margin:0 0 20px}.detail-box p {font-size:1rem;color:#d7dfe2;overflow-wrap:anywhere}
.delete-list {display:grid;gap:8px;overflow:auto}.delete-row {display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid #ffffff1c;border-radius:9px;padding:12px}
.temperature-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;overflow:auto;padding:4px;max-height:53%;}
.temperature-card {border:1px solid #ffffff22;background:#ffffff0a;border-radius:12px;padding:22px;color:#eaf1f3;white-space:pre-line;text-align:left;font:inherit;cursor:pointer;line-height:1.9}
.temperature-card:hover {background:#ffffff18}
.temperature-history {max-width:700px;text-align:center;margin:auto;width:100%;}
.temperature-history svg {width:100%;max-height:155px}
.temperature-history h2 {font-size:1.1rem;font-weight:450}
.ha-cameras {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;overflow:auto;}
.ha-camera-card {background:#ffffff0a;border-radius:13px;overflow:hidden;}
.ha-camera-card h2 {font-size:.95rem;padding:10px;font-weight:500;margin:0}
.ha-camera-card img {display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#121619}
@media(max-width:1100px){.view-toolbar{gap:6px}.view-button,.view-pill {padding:7px;font-size:.77rem}.view-period{min-width:150px}.agenda-day{padding:5px}.agenda-event{padding:4px;font-size:.74rem}}
@media(max-width:760px){#stage:has(.alfred-view){min-height:460px}.agenda-grid{min-height:280px}.agenda-seven,.agenda-month{min-width:630px}.agenda-day{min-height:105px}.view-pane{max-height:600px}.view-head{padding:0 4px}.agenda-form{grid-template-columns:1fr}.header-actions{gap:3px}.header-actions .icon-button {width:38px;height:38px}.view-toolbar{overflow:auto}}
/* Weather dynamic view — same dark UI as calendar. */
.weather-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.weather-now{display:flex;align-items:center;gap:22px;background:#293238;border:1px solid #ffffff16;border-radius:16px;padding:18px 24px;}
.weather-current-icon{font-size:clamp(44px,6vw,80px);line-height:1;color:#edcb82}
.weather-now-details h2{margin:0 0 8px;font-size:clamp(20px,2.1vw,32px);font-weight:500;color:#f5f6f7}
.weather-now-details p{margin:0;color:#b6c4ce;font-size:clamp(12px,1vw,17px)}
.weather-section-title{font-size:15px;letter-spacing:.02em;color:#bfd0da;margin:7px 0 -2px;font-weight:550}
.weather-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.weather-day{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;background:#293035;border-radius:12px;border:1px solid #ffffff12;padding:12px 5px 10px}
.weather-day p{margin:0}
.weather-day-name{font-size:12px;color:#d4e0e6}
.weather-day-icon{font-size:clamp(22px,2.8vw,40px);color:#eaca85}
.weather-day-condition{font-size:11px;color:#adbcc5;min-height:30px;line-height:1.3}
.weather-day-temp{font-size:21px;color:#f5f7f8;font-weight:600}
.weather-day-low,.weather-rain{font-size:11px;color:#a7b6c0}
.weather-rain{color:#8dc8e4 !important}
.weather-hours{display:flex;gap:7px;overflow-x:auto;padding:3px 0 10px;scrollbar-color:#637480 #2a3237}
.weather-hour{display:flex;flex:0 0 80px;align-items:center;flex-direction:column;gap:9px;padding:10px 6px;background:#293035;border:1px solid #ffffff16;border-radius:12px;color:#cbd7df;font-size:12px}
.weather-hour-icon{font-size:27px;color:#edd298}
@media(max-width:840px){.weather-days{grid-template-columns:repeat(4,minmax(0,1fr))}.weather-now{padding:14px;gap:12px}.weather-current-icon{font-size:48px}}
@media(max-width:470px){.weather-days{grid-template-columns:repeat(3,minmax(0,1fr))}}
@@ -0,0 +1,62 @@
:root {
color-scheme: dark;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
color: #f1f3f4;
background: #202326;
}
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 52% 34%, #33373a 0, #25282b 46%, #1a1d20 100%); }
.alfred-shell { position:relative; isolation:isolate; display:grid; grid-template-rows: 56px minmax(0,1fr) 142px; gap:16px; min-height:100vh; min-height:100dvh; padding:25px 36px; }
.topbar { display:flex; align-items:center; justify-content:space-between; z-index:5; }
.status { display:inline-flex; align-items:center; gap:11px; font-size:14px; font-weight:500; color:#e6eaed; letter-spacing:.045em; }
.status-dot { width:10px; height:10px; border-radius:50%; background:#7d8790; box-shadow:0 0 0 4px #ffffff0a; transition:background .25s,box-shadow .25s; }
.status-dot[data-mode="listening"] { background:#70c7ce; box-shadow:0 0 0 5px #70c7ce17; animation:status-pulse 1.6s infinite; }
.status-dot[data-mode="thinking"] { background:#e7bb72; box-shadow:0 0 0 5px #e7bb7217; animation:status-pulse 1.9s infinite; }
.status-dot[data-mode="speaking"] { background:#9ad0b7; box-shadow:0 0 0 5px #9ad0b717; animation:status-pulse 1.4s infinite; }
.status-dot[data-mode="error"] { background:#f18989; box-shadow:0 0 0 5px #f1898917; }
.header-actions { display:flex; gap:10px; align-items:center; }
.icon-button { display:grid; place-items:center; width:44px; height:44px; border:1px solid #ffffff22; border-radius:13px; background:#ffffff08; color:#e8ebee; cursor:pointer; transition:background .2s,border-color .2s; }
.icon-button:hover { background:#ffffff14; border-color:#ffffff35; }
.icon-button:focus-visible,.panel-action:focus-visible,.quiet-button:focus-visible { outline:2px solid #adc8e0; outline-offset:3px; }
.icon-button svg { width:21px; height:21px; }
.icon-button[aria-pressed="true"] { color:#f4a2a2; background:#ae47471b; border-color:#b95d5d55; }
.speaker-off-icon { display:none; }
.icon-button[aria-pressed="true"] .speaker-on-icon { display:none; }
.icon-button[aria-pressed="true"] .speaker-off-icon { display:block; }
#stage { display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; padding:0 8%; }
#content { width:min(990px,86vw); text-align:center; transition:opacity .25s ease,transform .25s ease; animation:appear .45s ease; }
#content.swap { opacity:0; transform:translateY(10px) scale(.99); }
#content h1 { font-size:clamp(2rem,4vw,4.3rem); font-weight:350; margin:.2em 0; line-height:1.2; }
#content p { font-size:clamp(1rem,1.6vw,1.35rem); color:#cdd1d4; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.hero { max-width:min(100%,750px); max-height:56vh; object-fit:contain; border-radius:18px; box-shadow:0 18px 50px #0006; animation:appear .45s ease; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:13px; text-align:left; }
.card { padding:18px; border:1px solid #ffffff1c; background:#ffffff0a; border-radius:15px; }
.card h2 { margin:0 0 8px; font-weight:500; }
.card p { margin:0; font-size:1rem; }
#wave { display:flex; align-items:center; justify-self:center; width: min(560px,37vw); height:100px; align-self:end; }
#wave canvas { width:100%; height:100%; }
.camera-panel,.transcript-panel { position:absolute; z-index:2; bottom:34px; border:1px solid #ffffff20; background:#222629db; box-shadow:0 14px 35px #0002; border-radius:16px; backdrop-filter:blur(12px); }
.camera-panel { left:36px; width:clamp(220px,24vw,355px); overflow:hidden; }
.transcript-panel { right:36px; width:clamp(250px,25vw,405px); padding:15px 17px 18px; min-height:136px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:0 13px; }
.transcript-panel .panel-heading { padding:0; min-height:30px; }
.panel-title { display:flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.1em; font-weight:700; color:#abb5be; }
.panel-indicator { width:7px; height:7px; border-radius:50%; background:#71818c; }
.camera-panel[data-active="true"] .panel-indicator { background:#83c5cc; }
.transcript-panel[data-active="true"] .stt-indicator { background:#83c5cc; }
.panel-action { border:0; border-radius:8px; background:#ffffff0c; color:#e3e8ed; padding:7px 10px; font-size:12px; cursor:pointer; }
.panel-action:hover { background:#ffffff22; }
.camera-viewport { display:grid; place-items:center; position:relative; aspect-ratio:16/9; background:#101315; overflow:hidden; }
.camera-viewport > * { grid-area:1/1; }
.camera-viewport img { width:100%; height:100%; object-fit:contain; }
.camera-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; color:#919ca4; font-size:12px; text-align:center; padding:12px; }
.camera-placeholder svg { width:30px; height:30px; opacity:.65; }
.transcript-state { color:#909ba3; font-size:11px; flex-shrink:0; }
.transcript-text { margin:11px 0 0; color:#edf0f2; font-size:14px; line-height:1.6; overflow-wrap:anywhere; max-height:110px; overflow-y:auto; }
.transcript-text.is-placeholder { color:#87939c; }
@keyframes appear { from { opacity:0; transform:translateY(8px) } to { opacity:1;transform:translateY(0) } }
@keyframes status-pulse { 0%,100% { opacity:1 } 50% { opacity:.45 } }
@media(max-width:1120px) { #wave { width:28vw; } .camera-panel { width:27vw; } .transcript-panel { width:29vw; } }
@media(max-width:760px) { .alfred-shell { padding:14px; grid-template-rows:50px minmax(220px,1fr) 80px auto; gap:8px; } #stage { padding:10px; } #wave { width:80%; height:70px; } .camera-panel,.transcript-panel { position:relative; left:auto; right:auto; bottom:auto; width:100%; } .camera-panel { grid-row:4; max-width:none; } .transcript-panel { grid-row:5; min-height:auto; } .topbar { grid-row:1; } }
@media(prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }