zoeissleeping
59bb7fbc12
This is once again a huge commit, but its mostly performance improvements along with some bug fixes and refactoring. It also includes changes to the theming systems. I'm still not 100% happy with the theming system, but its better than before. Model fetching has been dramatically improved! Nearly all the important computation and pre-processing has been moved to the server. This has also somehow fixed the way model details are loaded, which was causing many models to be missing their details despite models.dev having them. The markdown renderer has once again been changed, but I'm mostly certain that this is the last time major changes will be made to it. The renderer is not spamming components, bloating memory usage, and its not using a bug prone custom written chunking system. There's also a lot more that I haven't mentioned and honestly forgot. I need to get better commit hygiene tbh.
480 lines
13 KiB
CSS
480 lines
13 KiB
CSS
:root {
|
|
--spacing: 0.25rem;
|
|
|
|
--color-accent-text: #232625;
|
|
|
|
--reasoning-accent: #a62bcb;
|
|
|
|
/* Accent Color Options */
|
|
|
|
/* violet (current default) */
|
|
--accent-violet: #a010ff;
|
|
--accent-violet-hover: #8d00e8;
|
|
|
|
/* volcanic heat - orange-red */
|
|
--accent-volcano: #ef4410;
|
|
--accent-volcano-hover: #dc2626;
|
|
|
|
/* neon lime */
|
|
--accent-lime: #29e154;
|
|
--accent-lime-hover: #53e475;
|
|
|
|
/* electric sky */
|
|
--accent-sky: #38d3fa;
|
|
--accent-sky-hover: #2bc7ee;
|
|
|
|
/* crushed coral - warm pink-orange */
|
|
--accent-coral: #ff6b6b;
|
|
--accent-coral-hover: #e55555;
|
|
|
|
/* deep emerald - rich green */
|
|
--accent-emerald: #10b981;
|
|
--accent-emerald-hover: #059669;
|
|
|
|
/* golden hour - warm amber */
|
|
--accent-amber: #f59e0b;
|
|
--accent-amber-hover: #d97706;
|
|
|
|
/* rose quartz - soft pink-red */
|
|
--accent-rose: #f43f5e;
|
|
--accent-rose-hover: #e11d48;
|
|
|
|
/* arctic cyan - crisp blue */
|
|
--accent-cyan: #06b6d4;
|
|
--accent-cyan-hover: #0891b2;
|
|
|
|
/* midnight indigo - deep blue-purple */
|
|
--accent-indigo: #6366f1;
|
|
--accent-indigo-hover: #4f46e5;
|
|
|
|
/* sunset magenta - vibrant pink-purple */
|
|
--accent-magenta: #ec4899;
|
|
--accent-magenta-hover: #db2777;
|
|
|
|
--bg-base: color-mix(in srgb, var(--neutral-100), var(--color-accent) var(--accent-hinting));
|
|
--bg-surface: color-mix(in srgb, var(--neutral-200), var(--color-accent) var(--accent-hinting));
|
|
--bg-container: color-mix(in srgb, var(--neutral-300), var(--color-accent) var(--accent-hinting));
|
|
}
|
|
|
|
:root.dark {
|
|
--palette-zinc-100: #09080A;
|
|
--palette-zinc-200: #1a191b;
|
|
--palette-zinc-300: #2e2d2f;
|
|
--palette-slate-100: #0f171c;
|
|
--palette-slate-200: #1e252b;
|
|
--palette-slate-300: #333b44;
|
|
--palette-obsidian-100: #050504;
|
|
--palette-obsidian-200: #0f0f0e;
|
|
--palette-obsidian-300: #1e1f1f;
|
|
|
|
--text-primary: color-mix(in srgb, #fafafa, var(--color-accent) var(--accent-hinting));
|
|
/* Selected topics */
|
|
--text-secondary: color-mix(in srgb, #a1a1aa, var(--color-accent) var(--accent-hinting));
|
|
/* Selected topics */
|
|
--text-tertiary: color-mix(in srgb, #71717a, var(--color-accent) var(--accent-hinting));
|
|
/* Tokens/s, Info */
|
|
--text-dim: color-mix(in srgb, #52525b, var(--color-accent) var(--accent-hinting));
|
|
/* Unselected/Disabled */
|
|
|
|
--color-hover: color-mix(in srgb, rgba(255, 255, 255, 0.08), var(--color-accent) var(--accent-hinting));
|
|
--color-active: color-mix(in srgb, rgba(255, 255, 255, 0.12), var(--color-accent) var(--accent-hinting));
|
|
|
|
--color-border: color-mix(in srgb, rgba(255, 255, 255, 0.1), var(--color-accent) var(--accent-hinting));
|
|
--color-border-active: color-mix(in srgb, rgba(255, 255, 255, 0.16), var(--color-accent) var(--accent-hinting));
|
|
}
|
|
|
|
:root.light {
|
|
/* --palette-zinc-100: #f4f4f5; --palette-zinc-200: #e4e4e7; --palette-zinc-300: #d4d4d8;
|
|
--palette-slate-100: #f1f5f9; --palette-slate-200: #e2e8f0; --palette-slate-300: #cbd5e1;
|
|
--palette-obsidian-100: #fafafa; --palette-obsidian-200: #f5f5f5; --palette-obsidian-300: #e5e5e5; */
|
|
--palette-zinc-100: #d4d4d8;
|
|
--palette-zinc-200: #e4e4e7;
|
|
--palette-zinc-300: #f4f4f5;
|
|
--palette-slate-100: #cbd5e1;
|
|
--palette-slate-200: #e2e8f0;
|
|
--palette-slate-300: #f1f5f9;
|
|
--palette-obsidian-100: #e5e5e5;
|
|
--palette-obsidian-200: #ededed;
|
|
--palette-obsidian-300: #fcfcfc;
|
|
|
|
--text-primary: color-mix(in srgb, #09090b, var(--color-accent) var(--accent-hinting));
|
|
--text-secondary: color-mix(in srgb, #52525b, var(--color-accent) var(--accent-hinting));
|
|
--text-tertiary: color-mix(in srgb, #71717a, var(--color-accent) var(--accent-hinting));
|
|
--text-dim: color-mix(in srgb, #a1a1aa, var(--color-accent) var(--accent-hinting));
|
|
|
|
--color-hover: color-mix(in srgb, rgba(0, 0, 0, 0.08), var(--color-accent) var(--accent-hinting));
|
|
--color-active: color-mix(in srgb, rgba(0, 0, 0, 0.12), var(--color-accent) var(--accent-hinting));
|
|
|
|
--color-border: color-mix(in srgb, rgba(0, 0, 0, 0.08), var(--color-accent) var(--accent-hinting));
|
|
--color-border-active: color-mix(in srgb, rgba(0, 0, 0, 0.14), var(--color-accent) var(--accent-hinting));
|
|
}
|
|
|
|
/* :root.dark {
|
|
--neutral-zinc: color-mix(in srgb, var(--base-hinting) #171619, var(--accent-hinting) var(--color-accent));
|
|
--neutral-charcoal: color-mix(in srgb, var(--base-hinting) #0a0a0a, var(--accent-hinting) var(--color-accent));
|
|
|
|
--color-base: color-mix(in srgb, var(--base-hinting) #040305, var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-low: color-mix(in srgb,
|
|
var(--base-hinting) rgba(255, 255, 255, 0.05),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-highlight: color-mix(in srgb,
|
|
var(--base-hinting) rgba(255, 255, 255, 0.1),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-high: color-mix(in srgb,
|
|
var(--base-hinting) rgba(255, 255, 255, 0.15),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-text: color-mix(in srgb, var(--base-hinting) #fafafa, var(--accent-hinting) var(--color-accent));
|
|
--color-muted: color-mix(in srgb, var(--base-hinting) #a1a1a0, var(--accent-hinting) var(--color-accent));
|
|
--color-subtle: color-mix(in srgb, var(--base-hinting) #d1d1d0, var(--accent-hinting) var(--color-accent));
|
|
--color-input: color-mix(in srgb, var(--base-hinting) #222124, var(--accent-hinting) var(--color-accent));
|
|
--color-reasoning: color-mix(in srgb, var(--base-hinting) #66666a, var(--accent-hinting) var(--color-accent));
|
|
}
|
|
|
|
:root.light {
|
|
--neutral-zinc: color-mix(in srgb, var(--base-hinting) #fbfafd, var(--accent-hinting) var(--color-accent));
|
|
--neutral-charcoal: color-mix(in srgb, var(--base-hinting) #fefdff, var(--accent-hinting) var(--color-accent));
|
|
|
|
--color-base: color-mix(in srgb, var(--base-hinting) #f2f0f0, var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-low: color-mix(in srgb,
|
|
var(--base-hinting) rgba(0, 0, 0, 0.06),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-highlight: color-mix(in srgb,
|
|
var(--base-hinting) rgba(0, 0, 0, 0.08),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-highlight-high: color-mix(in srgb,
|
|
var(--base-hinting) rgba(0, 0, 0, 0.13),
|
|
var(--accent-hinting) var(--color-accent));
|
|
--color-text: color-mix(in srgb, var(--base-hinting) #1a1a1a, var(--accent-hinting) var(--color-accent));
|
|
--color-muted: color-mix(in srgb, var(--base-hinting) #6b7270, var(--accent-hinting) var(--color-accent));
|
|
--color-subtle: color-mix(in srgb, var(--base-hinting) #9ba2a0, var(--accent-hinting) var(--color-accent));
|
|
--color-input: color-mix(in srgb, var(--base-hinting) #ffffff, var(--accent-hinting) var(--color-accent));
|
|
--color-reasoning: color-mix(in srgb, var(--base-hinting) #99979c, var(--accent-hinting) var(--color-accent));
|
|
} */
|
|
|
|
html,
|
|
body {
|
|
font-family: "Geist", ui-sans-serif, system-ui, -apple-system,
|
|
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
|
|
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
|
"Noto Color Emoji";
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: var(--bg-base);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html.light {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
button {
|
|
color: inherit;
|
|
display: flex;
|
|
}
|
|
|
|
button.accent {
|
|
display: flex;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent-text);
|
|
border-radius: calc(var(--spacing) * 1.5);
|
|
padding-inline: calc(var(--spacing) * 2);
|
|
padding-block: calc(var(--spacing) * 1);
|
|
transition: background-color 150ms cubic-bezier(0.45, 0, 0.55, 1);
|
|
}
|
|
|
|
button.accent:hover {
|
|
background-color: var(--color-accent-hover);
|
|
}
|
|
|
|
.capitalize {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.has-obtrusive-scrollbars .chat-scroll-container {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.has-obtrusive-scrollbars .chatPane {
|
|
margin-right: calc(-1 * var(--thin-scrollbar-width));
|
|
width: calc(100% + var(--thin-scrollbar-width));
|
|
}
|
|
|
|
.animate-blink {
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-rotate {
|
|
animation: rotate 1s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.vl-toggle-switch[aria-disabled="true"] div {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.vl-toggle-switch[data-state="checked"] {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
.vl-toggle-switch[data-state="checked"] div {
|
|
transform-origin: center right;
|
|
transform: translateX(calc(2.5em - 1em - 0.5rem));
|
|
}
|
|
|
|
.vl-toggle-switch:active div {
|
|
width: 1.3em;
|
|
}
|
|
|
|
.vl-toggle-switch[data-state="checked"]:active div {
|
|
transform: translateX(calc(2.5em - 1.3em - 0.5rem));
|
|
}
|
|
|
|
.reasoning-contaizner.middle {
|
|
mask-image: linear-gradient(#000, #000, transparent 0, #000 12%, #000 88%, transparent)
|
|
}
|
|
|
|
.reasoning-contaizner.top {
|
|
mask-image: linear-gradient(#000, transparent, #000 0, #000 12%, #000 88%, transparent)
|
|
}
|
|
|
|
.reasoning-contaizner.bottom {
|
|
mask-image: linear-gradient(transparent, #000, transparent 0, #000 12%, #000 88%, #000)
|
|
}
|
|
|
|
/* Markdown renderer */
|
|
article>* {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
article>*:first-child {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
article>*:last-child {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
article>*:only-child {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
article math {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
article mtd {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
article hr {
|
|
border: 1px solid var(--text-dim);
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
article li {
|
|
min-height: 24px;
|
|
}
|
|
|
|
article ul {
|
|
list-style: none;
|
|
margin-left: 1.25rem;
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
article ul>li {
|
|
position: relative;
|
|
padding-bottom: 0.75rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
article ul>li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.5rem;
|
|
width: 7px;
|
|
height: 7px;
|
|
background-color: var(--text-tertiary);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
article ul>li::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 3px;
|
|
top: 23px;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background-color: var(--text-dim);
|
|
}
|
|
|
|
article ul>li:last-child::after {
|
|
display: none;
|
|
}
|
|
|
|
article ol {
|
|
list-style: none;
|
|
margin-left: 1.25rem;
|
|
margin-top: 1.25rem;
|
|
counter-reset: ordered-list-counter var(--start-value, 0);
|
|
}
|
|
|
|
article ol[start] {
|
|
--start-value: calc(attr(start type(<number>)) - 1);
|
|
}
|
|
|
|
article ol>li {
|
|
position: relative;
|
|
padding-bottom: 0.75rem;
|
|
padding-left: 1.5rem;
|
|
counter-increment: ordered-list-counter;
|
|
}
|
|
|
|
article ol>li::before {
|
|
content: counter(ordered-list-counter) ".";
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
color: var(--color-muted);
|
|
font-weight: 500;
|
|
width: 1.25rem;
|
|
}
|
|
|
|
html.dark .shiki,
|
|
html.dark .shiki span {
|
|
color: var(--shiki-dark) !important;
|
|
background-color: var(--shiki-dark-bg) !important;
|
|
}
|
|
|
|
article ol:only-child,
|
|
article ul:only-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
article code:not(pre code) {
|
|
background-color: var(--color-hover);
|
|
padding: 0.125rem 0.25rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
article blockquote {
|
|
color: var(--text-secondary);
|
|
border-left: 4px solid var(--text-tertiary);
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
/* TODO: make these tables better, this is literally the first attempt from Gemini 3 flash */
|
|
article table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.95rem;
|
|
text-align: left;
|
|
background-color: var(--bg-base);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
article table thead tr {
|
|
background-color: var(--color-hover);
|
|
}
|
|
|
|
article table th {
|
|
padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
article table td {
|
|
padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
|
|
}
|
|
|
|
article table tbody tr {
|
|
background-color: var(--color-hover);
|
|
transition: background-color 250ms cubic-bezier(0.5, 1, 0.89, 1);
|
|
}
|
|
|
|
article table tbody tr:nth-of-type(even) {
|
|
background-color: var(--color-hover);
|
|
}
|
|
|
|
/* Hover effect */
|
|
article table tbody tr:hover {
|
|
background-color: var(--color-active);
|
|
}
|
|
|
|
|
|
article h1,
|
|
article h2,
|
|
article h3,
|
|
article h4,
|
|
article h5,
|
|
article h6 {
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
article .checkbox {
|
|
width: min-content;
|
|
}
|
|
|
|
/* end markdown renderer */
|
|
|
|
.reasoning-contaizner.middle {
|
|
mask-image: linear-gradient(#000, #000, transparent 0, #000 12%, #000 88%, transparent)
|
|
}
|
|
|
|
.reasoning-contaizner.top {
|
|
mask-image: linear-gradient(#000, transparent, #000 0, #000 12%, #000 88%, transparent)
|
|
}
|
|
|
|
.reasoning-contaizner.bottom {
|
|
mask-image: linear-gradient(transparent, #000, transparent 0, #000 12%, #000 88%, #000)
|
|
} |