157 lines
18 KiB
CSS
157 lines
18 KiB
CSS
/* ALFRED_MAIN_VISUAL_V1 — overlay of the existing functional Alfred UI. */
|
|
body.alfred-glass-theme { color:#f5f8fc; overflow:hidden; background:linear-gradient(180deg,#07101b80 0%,#09152352 42%,#05111ed1 100%),url('/static/img/alfred-ambience.webp') center center / cover fixed no-repeat,#14202b; }
|
|
body.alfred-glass-theme::before { content:""; position:fixed; inset:-50px; z-index:-3;
|
|
background:url('/static/img/alfred-ambience.webp') center center / cover no-repeat;
|
|
filter:blur(3px) saturate(105%); transform:scale(1.06); }
|
|
body.alfred-glass-theme::after { content:""; position:fixed; inset:0; z-index:-2;
|
|
background:linear-gradient(180deg,#07101b7c 0%,#09152353 42%,#05111ebc 100%); pointer-events:none; }
|
|
.alfred-glass-theme .alfred-shell { display:block;min-height:100dvh;padding:0;gap:0;isolation:auto; }
|
|
.alfred-glass-theme .alfred-shell > .topbar { position:absolute; left:-9999px; top:-9999px; pointer-events:none; }
|
|
.alfred-glass-theme .alfred-shell > .topbar #audioSettingsButton { pointer-events:auto; }
|
|
.alfred-glass-theme .audio-popover { position:fixed!important;top:78px!important;right:24px!important;left:auto!important;z-index:300!important; }
|
|
.alfred-glass-theme .alfred-main-v1 { position:fixed;inset:0;z-index:1;display:grid;grid-template-columns:98px minmax(0,1fr);
|
|
grid-template-rows:95px minmax(190px,215px) minmax(170px,1fr) 114px 86px;
|
|
gap:12px 15px;padding:0 17px 15px 0;overflow:hidden; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
|
|
.alfred-main-v1 * { box-sizing:border-box; }
|
|
.alfred-main-v1 button,.alfred-main-v1 a { font:inherit; }
|
|
.alfred-main-v1 button { cursor:pointer; }
|
|
.alfred-main-v1 a { color:inherit;text-decoration:none; }
|
|
.alfred-main-v1 :is(button,a,textarea):focus-visible { outline:2px solid #9bd7ff;outline-offset:3px; }
|
|
.alfred-main-v1 .a-icon { width:22px;height:22px;flex:0 0 auto; }
|
|
.alfred-main-v1 .av-head { grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:space-between;padding:14px 24px 12px 30px;min-width:0; }
|
|
.av-brand { display:flex;align-items:center;gap:16px; }
|
|
.av-logo { font-size:54px;line-height:1;font-weight:900;letter-spacing:-.12em;padding-right:9px;
|
|
background:linear-gradient(145deg,#65c6ff,#006af7 85%);background-clip:text;-webkit-background-clip:text;color:transparent;
|
|
filter:drop-shadow(0 3px 12px #007bff55); }
|
|
.av-brand strong { display:block;font-size:29px;line-height:1.05;letter-spacing:-.03em; }
|
|
.av-brand small { display:block;color:#d7e4f0;font-size:13px;margin-top:5px; }
|
|
.av-header-right { display:flex;align-items:center;gap:30px; }
|
|
.av-time { display:flex;flex-direction:column;text-align:right;white-space:nowrap; }
|
|
.av-time strong { font-size:33px;line-height:1.05;font-weight:670;font-variant-numeric:tabular-nums;letter-spacing:-.04em; }
|
|
.av-time span { font-size:12px;color:#d5e3f1;margin-top:6px; }
|
|
.av-head-actions { display:flex;align-items:center;gap:9px; }
|
|
.av-round { display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border:1px solid #ffffff16;border-radius:50%;
|
|
background:#111b28ba;color:#f1f6fc;box-shadow:0 5px 12px #0002;backdrop-filter:blur(10px); }
|
|
.av-round:hover,.av-rail-link:hover,.av-shortcuts button:hover {background:#2c415abc;}
|
|
.av-round[aria-pressed="true"] {color:#ff858b;background:#54232fe8;border-color:#ff88906f;}
|
|
.alfred-main-v1 .av-rail {grid-column:1;grid-row:2/6;background:#09111ee3;border:1px solid #ffffff15;border-radius:0 19px 19px 0;
|
|
display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:5px;padding:9px 5px;backdrop-filter:blur(16px); }
|
|
.av-rail-link { border:0;color:#e5f0fc;background:transparent;border-radius:14px;width:83px;min-height:68px;display:flex;align-items:center;flex-direction:column;
|
|
justify-content:center;gap:7px;transition:background .2s;font-size:12px; }
|
|
.av-rail-link.selected {background:linear-gradient(155deg,#0988ff,#0758e0);box-shadow:0 5px 20px #007aff44;}
|
|
.av-rail-link .a-icon {width:25px;height:25px;}
|
|
.alfred-main-v1 .av-summary {grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;min-height:0;}
|
|
.av-stat-card { background:linear-gradient(135deg,#142235df,#111e30c9);border:1px solid #c7d8f22f;border-radius:20px;backdrop-filter:blur(18px);
|
|
text-align:left;color:#eef7ff;padding:21px 22px;box-shadow:0 12px 30px #00000026;min-width:0;overflow:hidden;position:relative; }
|
|
.av-stat-card:hover {border-color:#8ecbff79;background:linear-gradient(135deg,#203650ed,#14273fe8);}
|
|
.av-card-top {display:flex;align-items:center;gap:13px;}
|
|
.av-card-top > span:nth-child(2) {min-width:0;flex:1;}
|
|
.av-card-top strong {font-size:18px;line-height:1.3;font-weight:690;display:block;}
|
|
.av-card-top small {font-size:11px;line-height:1.6;display:block;color:#bdcde0;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
.av-circle {display:grid;place-items:center;flex:0 0 54px;height:54px;border-radius:18px;background:#2e507787;color:#dff1ff;}
|
|
.av-circle .a-icon {width:28px;height:28px;}
|
|
.av-circle.ai {background:#5733b794;color:#e6d5ff;}.av-circle.weather {background:#dba53b36;color:#ffeab2;}
|
|
.av-chevron {width:18px!important;opacity:.8;}
|
|
.av-lines {margin-top:18px;display:grid;gap:10px;}
|
|
.av-lines p {margin:0;display:flex;align-items:center;gap:10px;min-width:0;color:#e1edfa;font-size:13px;line-height:1.2;}
|
|
.av-lines p .a-icon {width:17px;height:17px;color:#7bc9ff;}
|
|
.av-lines p span:last-child {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
|
|
.av-mini-dot {display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;background:#8696a8;box-shadow:0 0 0 3px #ffffff08;}
|
|
.av-mini-dot.is-ok {background:#23e98a;box-shadow:0 0 8px #23e98a57;}
|
|
.av-mini-dot.is-error {background:#ff8d7e;}
|
|
.av-weather {background:linear-gradient(135deg,#203a54ea,#172c47d7);}
|
|
.av-weather-body {display:flex;align-items:center;gap:13px;margin:14px 0 0 2px;}
|
|
.av-weather-icon {font-size:52px;filter:drop-shadow(0 8px 9px #10182766);}
|
|
.av-weather-body div {display:flex;flex-direction:column;min-width:0;}
|
|
.av-weather-body strong {font-size:38px;font-weight:600;letter-spacing:-.05em;white-space:nowrap;}
|
|
.av-weather-body span {font-size:14px;color:#e2ecfa;}
|
|
.av-weather-body small {margin-top:4px;color:#bed5eb;font-size:12px;}
|
|
.alfred-main-v1 .av-voice-hero {grid-column:2;grid-row:3;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:170px;}
|
|
.av-voice-controls {display:flex;align-items:center;justify-content:center;gap:clamp(18px,6vw,120px);width:100%;z-index:1;}
|
|
.av-voice-center {display:flex;align-items:center;flex-direction:column;min-width:260px;text-align:center;}
|
|
.av-mic-orb {height:clamp(116px,12.5vw,178px);width:clamp(116px,12.5vw,178px);border:3px solid #23acff;
|
|
border-radius:50%;background:radial-gradient(circle at 50% 45%,#0e529b,#001a44 70%);box-shadow:0 0 0 8px #0a76ff1a,0 0 32px #0084ffb9,inset 0 0 34px #0672f06e;
|
|
display:grid;place-items:center;margin-bottom:12px;transition:filter .2s,box-shadow .2s;}
|
|
.av-mic-orb .a-icon {width:58px;height:58px;stroke-width:1.65;filter:drop-shadow(0 2px 5px #dff3ff44);}
|
|
.av-voice-center > strong {font-size:clamp(22px,2vw,32px);font-weight:680;text-shadow:0 2px 14px #07111bcc;}
|
|
.av-voice-center > p {margin:3px 0 7px;color:#e4ecf7;font-size:clamp(12px,1.1vw,16px);text-shadow:0 1px 8px #000b;}
|
|
.av-status-line {display:flex;align-items:center;gap:9px;font-size:11px;color:#d1e7f8;background:#0513268f;border:1px solid #ffffff20;border-radius:30px;padding:4px 12px;}
|
|
.av-status-dot {height:7px;width:7px;border-radius:50%;background:#42e893;}
|
|
.av-sound-control {width:130px;min-height:124px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
|
|
background:#101c2ada;border:1px solid #9fc6f664;border-radius:55px;color:#eff6ff;box-shadow:0 12px 23px #0003;backdrop-filter:blur(12px); }
|
|
.av-sound-control .a-icon {width:30px;height:30px;margin-bottom:1px;color:#1d9eff;}
|
|
.av-sound-control strong {font-size:14px;}.av-sound-control small {font-size:12px;color:#2af0a1;}
|
|
.av-sound-control[aria-pressed="true"] {border-color:#fe778a;color:#ffe0e3;background:#45232de8;}
|
|
.av-sound-control[aria-pressed="true"] .a-icon,.av-sound-control[aria-pressed="true"] small {color:#ff808b;}
|
|
.av-wave-host {position:absolute;left:50%;top:43%;width:min(620px,65%);height:120px;transform:translate(-50%,-50%);pointer-events:none;opacity:.75;}
|
|
.alfred-glass-theme .av-wave-host #wave {position:relative;display:block;width:100%;height:120px;max-width:none;margin:0;}
|
|
.alfred-glass-theme .av-wave-host #wave canvas {width:100%;height:100%;filter:drop-shadow(0 0 3px #1688ff);}
|
|
.alfred-main-v1 .av-shortcuts {grid-column:2;grid-row:4;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:11px;min-height:0;}
|
|
.av-shortcuts button {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#f2f7fc;
|
|
border:1px solid #b0ccea55;border-radius:16px;background:#111d2ce8;backdrop-filter:blur(14px);box-shadow:0 6px 25px #0003;padding:8px;min-width:0;}
|
|
.av-shortcuts .a-icon {width:27px;height:27px;color:#d7eafb;}.av-shortcuts span {font-size:12px;line-height:1.15;font-weight:590;text-align:center;}
|
|
.alfred-main-v1 .av-history {grid-column:2;grid-row:5;display:flex;align-items:center;gap:12px;background:#0b1828e8;border:1px solid #b0ccea4a;border-radius:16px;min-width:0;padding:10px 17px;overflow:hidden;backdrop-filter:blur(14px);}
|
|
.av-history-heading {display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:14px;padding-right:16px;border-right:1px solid #abc7e84a;}
|
|
.av-history-heading .a-icon {width:24px;height:24px;}
|
|
.av-history #avHistoryList {display:flex;align-items:center;gap:0;min-width:0;flex:1;overflow-x:auto;scrollbar-width:thin;}
|
|
.av-history-item {display:inline-flex;gap:8px;align-items:center;padding:0 14px;border-right:1px solid #a1bed735;font-size:12px;white-space:nowrap;min-width:0;}
|
|
.av-history-item time {color:#9ec7ec;font-variant-numeric:tabular-nums;}.av-history-item span {max-width:240px;overflow:hidden;text-overflow:ellipsis;}
|
|
.av-history-empty {font-size:12px;color:#a4b9ca;padding-left:10px;}
|
|
.alfred-main-v1 .av-back {position:fixed;top:112px;right:32px;z-index:15;display:flex;align-items:center;gap:8px;color:white;
|
|
padding:9px 14px;border:1px solid #d5e8ff88;border-radius:10px;background:#183452ee;font-size:13px;}
|
|
.av-back[hidden],.av-toast[hidden] {display:none!important;}
|
|
.av-toast {position:fixed;z-index:80;bottom:115px;right:22px;padding:12px 18px;background:#142b43ed;color:#f0faff;border-radius:12px;border:1px solid #9ccfff8c;max-width:min(460px,90vw);box-shadow:0 12px 35px #0009;}
|
|
.av-image-dialog {width:min(520px,94vw);background:#162538;color:#f5f9fd;border:1px solid #7fa9c85a;border-radius:18px;padding:26px;box-shadow:0 20px 100px #000c;}
|
|
.av-image-dialog::backdrop {background:#040b14d2;backdrop-filter:blur(6px);}
|
|
.av-image-dialog h2 {font-size:21px;margin:0 0 12px;}.av-image-dialog p {font-size:13px;color:#cad7e8;line-height:1.6;}
|
|
.av-image-dialog label {display:block;font-size:13px;font-weight:700;margin:14px 0 7px;}
|
|
.av-image-dialog textarea {width:100%;background:#07182a;color:#fff;border:1px solid #9db7ce7e;border-radius:10px;padding:12px;resize:vertical;font:inherit;}
|
|
.av-dialog-close {float:right;background:#284259;border:1px solid #ffffff30;border-radius:8px;color:white;padding:6px;}
|
|
.av-dialog-actions {display:flex;justify-content:flex-end;margin-top:14px;}.av-dialog-actions button {padding:10px 16px;background:#0677ec;border:0;border-radius:10px;color:#fff;}
|
|
.av-more-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;}.av-more-grid a,.av-more-grid button {display:flex;align-items:center;gap:8px;padding:12px;background:#243950;color:#fff;border:1px solid #ffffff26;border-radius:10px;text-align:left;font-size:13px;}
|
|
.alfred-glass-theme #stage {position:fixed;left:calc(98px + 26px);right:25px;top:114px;bottom:103px;z-index:8;display:flex;align-items:center;justify-content:center;
|
|
opacity:0;visibility:hidden;pointer-events:none;padding:28px;background:#0a1625e8;border:1px solid #d4e8ff42;border-radius:23px;backdrop-filter:blur(21px);overflow:auto; }
|
|
.alfred-glass-theme #content {max-width:100%;width:100%;max-height:100%;overflow:auto;}
|
|
.alfred-glass-theme .alfred-main-v1.is-focused ~ #stage {opacity:1;visibility:visible;pointer-events:auto;}
|
|
.alfred-main-v1.is-focused .av-summary,.alfred-main-v1.is-focused .av-voice-hero,.alfred-main-v1.is-focused .av-shortcuts {opacity:0;pointer-events:none;}
|
|
.alfred-glass-theme .transcript-panel {z-index:18;right:24px;bottom:111px;width:min(390px,33vw);border:1px solid #91b4d14f;background:#101e2ddb;min-height:75px;padding:10px 14px;box-shadow:0 12px 30px #0006;}
|
|
.alfred-glass-theme .transcript-panel .transcript-text {font-size:12px;max-height:62px;margin-top:6px;}
|
|
.alfred-glass-theme .transcript-panel:not([data-active="true"]) {opacity:.62;transition:opacity .2s;}
|
|
.alfred-glass-theme .transcript-panel:not([data-active="true"]):hover {opacity:1;}
|
|
.alfred-glass-theme #alfredTimersDock {z-index:25;left:118px;bottom:112px;width:300px;max-height:35vh;background:#101e2def;border-color:#75b7e47e;}
|
|
.alfred-glass-theme #alfredTimerToast {z-index:40;bottom:220px;left:119px;}
|
|
.alfred-glass-theme .camera-panel:not(.camera-popup-body) {display:none;}
|
|
.alfred-glass-theme.av-legacy-camera-open .camera-panel:not(.camera-popup-body) {display:block;position:fixed;top:100px;right:35px;left:auto;bottom:auto;width:480px;max-width:90vw;z-index:120;background:#172637f2;}
|
|
#avLegacyCameraClose {border:0;background:#2a557a;color:white;padding:8px 15px;width:100%;}
|
|
.alfred-main-v1[data-mode="listening"] .av-mic-orb {box-shadow:0 0 0 10px #16bfff22,0 0 42px #0084ff,inset 0 0 35px #0572f3;animation:av-breathe 1.4s ease-in-out infinite;}
|
|
.alfred-main-v1[data-mode="thinking"] .av-mic-orb {border-color:#f2c16a;box-shadow:0 0 28px #d89c2866;}
|
|
.alfred-main-v1[data-mode="speaking"] .av-mic-orb {border-color:#51f2ae;box-shadow:0 0 32px #51f2ae55;}
|
|
.alfred-main-v1.av-mic-is-muted .av-mic-orb {border-color:#e68b95;filter:grayscale(.7);box-shadow:0 0 25px #b24e4966;}
|
|
.alfred-main-v1.av-mic-is-muted .av-status-dot {background:#f28b91;}
|
|
@keyframes av-breathe {50%{transform:scale(1.045)}}
|
|
@media (max-width:1360px) {
|
|
.alfred-glass-theme .alfred-main-v1 {grid-template-columns:88px minmax(0,1fr);grid-template-rows:80px minmax(180px,205px) minmax(150px,1fr) 98px 70px;gap:10px;padding-right:10px;padding-bottom:10px;}
|
|
.av-stat-card {padding:14px;}.av-card-top strong{font-size:15px}.av-circle{flex-basis:43px;height:43px}.av-lines{margin-top:13px;gap:8px}.av-lines p{font-size:12px}
|
|
.av-weather-body strong {font-size:31px;}.av-weather-icon{font-size:39px}.av-rail-link{width:75px;min-height:62px}.av-voice-controls{gap:clamp(12px,3vw,60px)}.av-sound-control{width:105px;min-height:105px;}
|
|
.alfred-glass-theme #stage {left:112px;top:100px;bottom:92px;}.alfred-glass-theme #alfredTimersDock{left:100px;bottom:93px;}
|
|
}
|
|
@media(max-width:900px) {
|
|
body.alfred-glass-theme {overflow:auto;}
|
|
.alfred-glass-theme .alfred-main-v1 {position:relative;min-height:100dvh;overflow:visible;grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto auto;gap:10px;padding:0 12px 18px;}
|
|
.alfred-main-v1 .av-head {grid-column:1;grid-row:1;padding:15px 0;}.av-head-actions{gap:4px}.av-round{width:36px;height:36px}.av-brand strong{font-size:22px}.av-brand small{font-size:11px}.av-logo{font-size:38px}.av-header-right{gap:12px}.av-time strong{font-size:22px}.av-time span{font-size:10px;}
|
|
.alfred-main-v1 .av-rail {grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(6,1fr);border-radius:14px;gap:3px;padding:6px;}.av-rail-link{width:auto;min-height:58px;}
|
|
.alfred-main-v1 .av-summary {grid-column:1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));}.av-stat-card {min-height:160px;}
|
|
.alfred-main-v1 .av-voice-hero{grid-column:1;grid-row:4;min-height:260px;}.av-wave-host{width:90%;}.av-voice-controls{gap:12px;}.av-voice-center{min-width:190px}.av-sound-control{width:86px;min-height:95px;border-radius:34px;}.av-sound-control strong{font-size:11px;}.av-mic-orb{width:120px;height:120px;}.av-mic-orb .a-icon{width:45px;height:45px;}
|
|
.alfred-main-v1 .av-shortcuts{grid-column:1;grid-row:5;grid-template-columns:repeat(4,1fr);}.av-shortcuts button{min-height:78px;}
|
|
.alfred-main-v1 .av-history{grid-column:1;grid-row:6;min-height:70px;}
|
|
.alfred-glass-theme #stage{left:12px;right:12px;top:145px;bottom:20px;max-height:calc(100dvh - 165px);}
|
|
.alfred-glass-theme #alfredTimersDock{left:15px;bottom:95px;width:min(290px,70vw);}.alfred-glass-theme .transcript-panel{right:13px;bottom:16px;width:min(350px,55vw);}
|
|
}
|
|
@media(max-width:550px) {
|
|
.av-head{flex-wrap:wrap;gap:8px}.av-header-right{flex-wrap:wrap;margin-left:auto}.av-head-actions{gap:2px}.av-time span{display:none}.av-brand small{display:none}.av-round{width:34px;height:34px}
|
|
.av-card-top small{font-size:10px;}.av-stat-card{padding:13px;min-height:152px;}.av-lines p{font-size:11px;gap:5px}.av-weather-icon{font-size:30px;}.av-weather-body strong{font-size:25px;}
|
|
.av-voice-controls{gap:8px;}.av-voice-center{min-width:130px;}.av-voice-center>strong{font-size:23px;}.av-voice-center>p{font-size:11px}.av-mic-orb{width:96px;height:96px;}.av-sound-control{width:65px;min-height:90px;padding:3px;}.av-sound-control .a-icon{width:22px;height:22px;}.av-sound-control strong{font-size:10px;}.av-sound-control small{font-size:10px;}
|
|
.alfred-main-v1 .av-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr));}.av-history{flex-wrap:wrap;}.alfred-glass-theme .transcript-panel{position:relative;left:auto;right:auto;bottom:auto;margin:8px 12px;width:auto;}.alfred-glass-theme #alfredTimersDock{bottom:12px;left:12px;}
|
|
}
|
|
@media(prefers-reduced-motion:reduce){.alfred-main-v1 *{animation:none!important;transition:none!important}}
|