mirror of
https://github.com/ggml-org/llama.cpp.git
synced 2026-09-28 17:07:31 -05:00
Aleksander Grygier
a69de44bc3
The secondary button gets its own look back and the chat add button its own light surface. Pressable elements get a pointer cursor again, the font rendering smooths on the app shell, the root layout resolves its props probe through the providers' api url, and the agent skills stay out of prettier's way. Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
255 lines
7.0 KiB
CSS
255 lines
7.0 KiB
CSS
@import 'tailwindcss';
|
|
@source '.';
|
|
@plugin '@tailwindcss/forms';
|
|
@plugin '@tailwindcss/typography';
|
|
@import 'tw-animate-css';
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* shadcn components key their orientation styles off these, toggle-group among them */
|
|
@custom-variant data-horizontal (&[data-orientation='horizontal']);
|
|
@custom-variant data-vertical (&[data-orientation='vertical']);
|
|
|
|
/*
|
|
* Tailwind v4 dropped the pointer cursor from buttons. Every control a user can
|
|
* press gets it back, and anything disabled keeps the cursor its own class asks for.
|
|
*/
|
|
@layer base {
|
|
button:not(:disabled),
|
|
[role='button']:not([data-disabled]),
|
|
[role='checkbox']:not([data-disabled]),
|
|
[role='combobox']:not([data-disabled]),
|
|
[role='menuitem']:not([data-disabled]),
|
|
[role='menuitemcheckbox']:not([data-disabled]),
|
|
[role='menuitemradio']:not([data-disabled]),
|
|
[role='option']:not([data-disabled]),
|
|
[role='radio']:not([data-disabled]),
|
|
[role='switch']:not([data-disabled]),
|
|
[role='tab']:not([data-disabled]),
|
|
label[for],
|
|
select,
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.625rem;
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.145 0 0);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.145 0 0);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.145 0 0);
|
|
--primary: oklch(0.205 0 0);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
--secondary: oklch(0.95 0 0);
|
|
--secondary-foreground: oklch(0.205 0 0);
|
|
--muted: oklch(0.97 0 0);
|
|
--muted-foreground: oklch(0.556 0 0);
|
|
--accent: oklch(0.95 0 0);
|
|
--accent-foreground: oklch(0.205 0 0);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.875 0 0);
|
|
--input: oklch(0.92 0 0);
|
|
--ring: oklch(0.708 0 0);
|
|
--chart-1: oklch(0.646 0.222 41.116);
|
|
--chart-2: oklch(0.6 0.118 184.704);
|
|
--chart-3: oklch(0.398 0.07 227.392);
|
|
--chart-4: oklch(0.828 0.189 84.429);
|
|
--chart-5: oklch(0.769 0.188 70.08);
|
|
--sidebar: oklch(0.985 0 0);
|
|
--sidebar-foreground: oklch(0.145 0 0);
|
|
--sidebar-primary: oklch(0.205 0 0);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.97 0 0);
|
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
--sidebar-border: oklch(0.922 0 0);
|
|
--sidebar-ring: oklch(0.708 0 0);
|
|
--code-background: oklch(0.985 0 0);
|
|
--code-foreground: oklch(0.145 0 0);
|
|
--font-mono:
|
|
ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
|
|
'Liberation Mono', Menlo, monospace;
|
|
--layer-popover: 1000000;
|
|
|
|
--chat-form-area-height: 8rem;
|
|
--chat-form-area-offset: 2rem;
|
|
--chat-form-padding-top: 6rem;
|
|
--max-message-height: max(24rem, min(80dvh, calc(100dvh - var(--chat-form-area-height) - 12rem)));
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
:root {
|
|
--chat-form-area-height: 24rem;
|
|
--chat-form-area-offset: 12rem;
|
|
--chat-form-padding-top: 6rem;
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.16 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.205 0 0);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.205 0 0);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.922 0 0);
|
|
--primary-foreground: oklch(0.205 0 0);
|
|
--secondary: oklch(0.29 0 0);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.269 0 0);
|
|
--muted-foreground: oklch(0.708 0 0);
|
|
--accent: oklch(0.269 0 0);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 30%);
|
|
--input: oklch(1 0 0 / 30%);
|
|
--ring: oklch(0.556 0 0);
|
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
--chart-4: oklch(0.627 0.265 303.9);
|
|
--chart-5: oklch(0.645 0.246 16.439);
|
|
--sidebar: oklch(0.2 0 0);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.269 0 0);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.556 0 0);
|
|
--code-background: oklch(0.225 0 0);
|
|
--code-foreground: oklch(0.875 0 0);
|
|
}
|
|
|
|
@theme inline {
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
scrollbar-width: thin;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
/* Global scrollbar styling - visible only on hover */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: transparent transparent;
|
|
}
|
|
|
|
*:hover {
|
|
scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
border-radius: 3px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
*:hover::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--muted-foreground) / 0.3);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground) / 0.5);
|
|
}
|
|
|
|
:where(code, pre, kbd, samp) {
|
|
font-family: var(--font-mono);
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.scrollbar-hide {
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.shimmer-text {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--muted-foreground),
|
|
var(--foreground),
|
|
var(--muted-foreground)
|
|
);
|
|
background-size: 200% 100%;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-weight: 500;
|
|
animation: shimmer 1s linear infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
to {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.shimmer-text {
|
|
animation: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mermaidTooltip {
|
|
display: none !important;
|
|
}
|