33 lines
4.1 KiB
CSS
33 lines
4.1 KiB
CSS
|
.card.answer-lens {
|
||
|
|
--_card-stage-track-min:340px; aspect-ratio:auto; background:color-mix(in oklab,var(--card-surface) 95%,var(--card-ink));
|
||
|
|
& .card-stage { display:grid; grid-template-rows:minmax(210px,1fr) auto; }
|
||
|
|
& .answer-scene { position:relative; display:flex; flex-direction:column; overflow:hidden; min-height:250px; }
|
||
|
|
& .answer-dashboard { position:relative; flex:none; margin:0 22px; min-height:224px; padding:22px 22px 110px; border-radius:10px; background:var(--card-panel); border:1px solid color-mix(in oklab,var(--card-ink) 7%,transparent); box-shadow:0 4px 16px #18243206; }
|
||
|
|
& .answer-dash-kicker { display:block; color:var(--card-muted); font-size:9px; margin-bottom:8px; }
|
||
|
|
& .answer-dashboard strong { display:block; font-size:19px; line-height:1.3; font-weight:550; overflow-wrap:anywhere; }
|
||
|
|
& .answer-sync { display:inline-block; font-size:9px; margin-top:8px; padding:3px 6px; color:var(--card-muted); background:var(--card-wash); border-radius:3px; }
|
||
|
|
& .answer-dash-lines { position:absolute; left:22px; right:22px; bottom:25px; display:grid; gap:16px; & i { height:1px; background:var(--card-line); } }
|
||
|
|
& .answer-charts { position:relative; flex:none; height:150px; margin-top:-100px; }
|
||
|
|
& .answer-chart { position:absolute; width:43%; height:178px; padding:13px; background:var(--card-panel); border:1px solid color-mix(in oklab,var(--card-ink) 9%,transparent); border-radius:9px; box-shadow:0 6px 18px #1824320a; transform:translateY(16px) rotate(var(--angle)); transition:transform .65s cubic-bezier(.2,.8,.2,1),border-color .3s; }
|
||
|
|
& .answer-chart:nth-child(1){left:-4%;--angle:-10deg;--chart-color:var(--card-accent);}
|
||
|
|
& .answer-chart:nth-child(2){left:29%;--angle:0deg;--chart-color:var(--_card-accent-2);}
|
||
|
|
& .answer-chart:nth-child(3){left:64%;--angle:10deg;--chart-color:var(--_card-accent-3);}
|
||
|
|
& .answer-chart[data-selected="true"] { transform:translateY(-7px) rotate(var(--angle)); z-index:2; border-color:color-mix(in oklab,var(--card-accent) 40%,var(--card-line)); }
|
||
|
|
& .answer-chart svg { width:100%; height:117px; display:block; }
|
||
|
|
& .answer-chart > span:last-child { font-size:9px; color:var(--card-muted); }
|
||
|
|
& .chart-symbol { position:absolute; top:-12px; right:18px; width:27px; height:27px; display:grid; place-items:center; border-radius:6px; background:var(--card-panel); box-shadow:0 2px 7px #18243216; color:var(--_card-accent-ink); font-size:19px; }
|
||
|
|
& .ring-base,& .ring-value { fill:none; stroke:var(--card-line); stroke-width:9; }
|
||
|
|
& .ring-value { stroke:var(--chart-color); stroke-dasharray:220 302; transform:rotate(-90deg); transform-origin:80px 78px; }
|
||
|
|
& .chart-grid { fill:none; stroke:var(--card-line); stroke-width:1; }
|
||
|
|
& .chart-bars { stroke:var(--chart-color); stroke-width:15; opacity:.75; }
|
||
|
|
& .chart-line { fill:none; stroke:var(--chart-color); stroke-width:2; }
|
||
|
|
& .answer-response { position:relative; margin:0 22px 22px; padding:14px 15px; background:var(--card-panel); border:1px solid color-mix(in oklab,var(--card-ink) 12%,transparent); border-radius:11px; box-shadow:0 5px 18px #1824320a; }
|
||
|
|
& .answer-response > p { font-size:12px; line-height:1.5; margin:0 0 12px; }
|
||
|
|
& .answer-citations { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
|
||
|
|
& .answer-citations button { display:flex; align-items:center; gap:5px; color:var(--card-muted); background:var(--card-wash); border:1px solid transparent; border-radius:4px; padding:4px 6px; font-size:9px; cursor:pointer; }
|
||
|
|
& .answer-citations button[aria-pressed="true"] { color:var(--_card-accent-ink); border-color:color-mix(in oklab,var(--card-accent) 25%,var(--card-line)); background:color-mix(in oklab,var(--card-accent) 7%,var(--card-panel)); }
|
||
|
|
& .answer-excerpt { font-size:11px; line-height:1.7; color:var(--card-muted); min-height:3.4em; overflow-wrap:anywhere; }
|
||
|
|
& .answer-reference { display:block; margin-top:8px; padding-top:8px; border-top:1px solid var(--card-line); font:9px ui-monospace,monospace; color:var(--card-muted); overflow-wrap:anywhere; }
|
||
|
|
& .answer-reference[hidden] { display:none; }
|
||
|
|
}
|
||
|
|
@media(prefers-reduced-motion:reduce){.answer-lens *{transition:none!important;}}
|