103 lines
9.3 KiB
CSS
103 lines
9.3 KiB
CSS
/* 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))}}
|
||
|
||
|
||
/* Weather outfits + ComfyUI illustration */
|
||
.weather-outfit-host{margin:8px 0 4px}
|
||
.weather-outfit-section{display:flex;flex-direction:column;gap:12px;background:#252d32;border:1px solid #ffffff16;border-radius:16px;padding:16px}
|
||
.weather-outfit-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
|
||
.weather-outfit-grid{display:grid;grid-template-columns:minmax(260px,360px) minmax(320px,1fr);gap:14px;align-items:stretch}
|
||
.weather-outfit-guide{display:grid;gap:12px}
|
||
.weather-person-card{background:#ffffff08;border:1px solid #ffffff16;border-radius:14px;padding:14px}
|
||
.weather-person-title{margin:0 0 6px;font-size:1.05rem;color:#f2f5f7}
|
||
.weather-person-subtitle{margin:10px 0 4px;color:#b8c7d1;font-size:.86rem}
|
||
.weather-outfit-list{margin:0;padding-left:18px;color:#e0e6ea;font-size:.95rem;line-height:1.55}
|
||
.weather-illustration-card{display:flex;flex-direction:column;justify-content:center;align-items:center;background:#ffffff07;border:1px solid #ffffff16;border-radius:14px;padding:12px;min-height:320px}
|
||
.weather-illustration-image{display:block;max-width:100%;max-height:430px;border-radius:12px;box-shadow:0 16px 40px #0005;object-fit:contain}
|
||
@media(max-width:980px){.weather-outfit-grid{grid-template-columns:1fr}.weather-illustration-card{min-height:220px}}
|
||
|
||
/* ALFRED_METEO_TENUES_V2 */
|
||
/* Fenêtre météo défilante sur l’écran tactile d’Alfred */
|
||
#content.alfred-view .view-pane:has(.weather-outfit-host) {overflow-y:auto;overflow-x:hidden;scrollbar-color:#62727d #222b30;}
|
||
.weather-outfit-host{flex-shrink:0}
|
||
.weather-illustration-card{min-height:370px}
|
||
.weather-illustration-image{width:350px;height:350px;max-width:100%;max-height:none;object-fit:contain;}
|
||
.weather-day{cursor:pointer;font:inherit;color:inherit}
|
||
.weather-day.is-selected{border-color:#8bd1e4;background:#37647942;box-shadow:inset 0 0 0 1px #8bd1e465}
|
||
.weather-day:focus-visible{outline:2px solid #8bd1e4;outline-offset:2px}
|
||
@media(max-width:540px){.weather-illustration-image{width:min(350px,100%);height:auto;aspect-ratio:1/1}}
|