Ned Halksworth
b4e0615e77
Remove client-side encryption, migrate coach_chats schema, fix the Ollama proxy, and embed coach on overview alongside the dedicated tab. Co-authored-by: Cursor <cursoragent@cursor.com>
1124 lines
28 KiB
CSS
1124 lines
28 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@font-face {
|
|
font-family: "Google Sans";
|
|
src: local("Google Sans"), local("GoogleSans-Regular");
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Google Sans Text";
|
|
src: local("Google Sans Text"), local("GoogleSansText-Regular");
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
font-family: "Google Sans", "Google Sans Text", "Product Sans", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: #f8fbff;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
min-width: 320px;
|
|
background: #f8fbff;
|
|
}
|
|
|
|
body {
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
background: #f8fbff;
|
|
color: #1f252a;
|
|
font-family: "Google Sans", "Google Sans Text", "Product Sans", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 2px solid var(--primary, #9c4168);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
::selection {
|
|
background: color-mix(in srgb, var(--primary-container, #ffd8e7) 68%, transparent);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--surface-container-low, #fff0f5);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: color-mix(in srgb, var(--outline, #85737a) 42%, transparent);
|
|
border: 3px solid var(--surface-container-low, #fff0f5);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
@layer components {
|
|
.auth-layout {
|
|
@apply mx-auto grid min-h-screen w-full max-w-6xl gap-6 px-4 py-8 lg:grid-cols-[1.05fr_0.95fr];
|
|
align-items: center;
|
|
}
|
|
|
|
.auth-hero {
|
|
@apply min-w-0;
|
|
}
|
|
|
|
.auth-signal-grid {
|
|
@apply mt-6 grid gap-3 sm:grid-cols-3;
|
|
}
|
|
|
|
.auth-panel {
|
|
@apply border p-5 shadow-fridge sm:p-6;
|
|
background: color-mix(in srgb, var(--surface-container) 88%, white);
|
|
border-color: var(--outline-variant);
|
|
border-radius: 28px;
|
|
}
|
|
|
|
.state-chip {
|
|
@apply inline-flex min-h-10 items-center gap-2 px-3 text-sm font-semibold;
|
|
background: var(--primary-container);
|
|
border-radius: 999px;
|
|
color: var(--on-primary-container);
|
|
}
|
|
|
|
.segmented-control {
|
|
@apply grid grid-cols-2 gap-1 border p-1;
|
|
background: var(--surface-container-high);
|
|
border-color: var(--outline-variant);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.segmented-control button {
|
|
@apply min-h-10 px-3 text-sm font-semibold transition;
|
|
border-radius: 999px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.segmented-control-active {
|
|
background: var(--primary-container);
|
|
color: var(--on-primary-container) !important;
|
|
}
|
|
|
|
.app-layout {
|
|
@apply mx-auto grid w-full gap-4 px-3 pb-28 pt-3;
|
|
max-width: 1720px;
|
|
}
|
|
|
|
.app-content {
|
|
@apply min-w-0;
|
|
}
|
|
|
|
.app-main {
|
|
@apply mt-4;
|
|
}
|
|
|
|
.material-drawer {
|
|
@apply sticky top-6 hidden h-[calc(100vh-3rem)] flex-col border p-4 lg:flex;
|
|
background: color-mix(in srgb, var(--surface-container-lowest) 84%, transparent);
|
|
border-color: color-mix(in srgb, var(--outline-variant) 58%, transparent);
|
|
border-radius: 32px;
|
|
box-shadow: var(--elevation-1);
|
|
}
|
|
|
|
.drawer-brand {
|
|
@apply mb-5 flex items-center gap-3 px-1;
|
|
}
|
|
|
|
.drawer-primary-action {
|
|
@apply mb-5 inline-flex min-h-14 items-center justify-center gap-3 px-5 text-sm font-semibold shadow-can transition active:scale-[0.99];
|
|
background: var(--primary-container);
|
|
border-radius: 18px;
|
|
color: var(--on-primary-container);
|
|
}
|
|
|
|
.drawer-nav {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
.drawer-footer {
|
|
@apply mt-auto grid gap-3;
|
|
}
|
|
|
|
.drawer-info-card {
|
|
@apply border p-4;
|
|
background: var(--surface-container-high);
|
|
border-color: var(--outline-variant);
|
|
border-radius: 22px;
|
|
}
|
|
|
|
.top-app-bar {
|
|
@apply border p-4 sm:p-5;
|
|
background: color-mix(in srgb, var(--surface-container-lowest) 86%, transparent);
|
|
border-color: color-mix(in srgb, var(--outline-variant) 62%, transparent);
|
|
border-radius: 34px;
|
|
box-shadow: var(--elevation-1);
|
|
}
|
|
|
|
.top-app-bar-main {
|
|
@apply flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between;
|
|
}
|
|
|
|
.top-title-cluster {
|
|
@apply flex min-w-0 items-start gap-3;
|
|
}
|
|
|
|
.top-app-icon {
|
|
@apply mt-1 flex h-12 w-12 shrink-0 items-center justify-center;
|
|
background: var(--primary-container);
|
|
border-radius: 16px;
|
|
color: var(--on-primary-container);
|
|
}
|
|
|
|
.top-kicker {
|
|
@apply text-sm font-medium;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.top-title {
|
|
@apply mt-1 break-words text-4xl font-semibold sm:text-5xl;
|
|
color: var(--text);
|
|
}
|
|
|
|
.top-meta-row {
|
|
@apply flex flex-wrap items-center gap-2;
|
|
}
|
|
|
|
.account-chip {
|
|
@apply inline-flex min-h-10 max-w-full items-center rounded-md px-3 text-xs font-semibold;
|
|
background: var(--surface-container-high);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.top-action-row {
|
|
@apply mt-5 flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between;
|
|
}
|
|
|
|
.top-action-primary,
|
|
.top-action-secondary {
|
|
@apply flex flex-wrap gap-2;
|
|
}
|
|
|
|
.mobile-nav-bar {
|
|
@apply fixed inset-x-3 bottom-3 z-40 grid grid-cols-5 gap-1 border p-1 shadow-fridge;
|
|
background: color-mix(in srgb, var(--surface-container-high) 92%, white);
|
|
border-color: var(--outline-variant);
|
|
border-radius: 28px;
|
|
}
|
|
|
|
.mobile-nav-item {
|
|
@apply flex min-h-16 flex-col items-center justify-center gap-1 text-[11px] font-semibold transition;
|
|
border-radius: 22px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.mobile-nav-item-active {
|
|
background: var(--primary-container);
|
|
color: var(--on-primary-container) !important;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.app-layout {
|
|
grid-template-columns: 300px minmax(0, 1fr);
|
|
gap: 24px;
|
|
padding: 24px;
|
|
}
|
|
|
|
.app-main {
|
|
margin-top: 24px;
|
|
}
|
|
}
|
|
|
|
.glass-panel {
|
|
@apply rounded-lg border shadow-fridge;
|
|
background: color-mix(in srgb, var(--surface-container-lowest) 88%, transparent);
|
|
border-color: color-mix(in srgb, var(--outline-variant) 62%, transparent);
|
|
border-radius: 34px;
|
|
}
|
|
|
|
.can-panel {
|
|
@apply rounded-lg border shadow-can;
|
|
background: linear-gradient(135deg, var(--primary-container), var(--surface-container-high) 58%, var(--tertiary-container));
|
|
border-color: color-mix(in srgb, var(--primary) 20%, var(--outline-variant));
|
|
border-radius: 36px;
|
|
}
|
|
|
|
.today-panel {
|
|
background:
|
|
radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary-container) 82%, white) 0 22%, transparent 44%),
|
|
linear-gradient(145deg, var(--surface-container-lowest), var(--surface-container) 54%, var(--tertiary-container));
|
|
}
|
|
|
|
.oura-hero {
|
|
background:
|
|
radial-gradient(circle at 14% 28%, color-mix(in srgb, var(--primary-container) 72%, white) 0 18%, transparent 42%),
|
|
radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--secondary-container) 70%, white) 0 18%, transparent 38%),
|
|
var(--surface-container-lowest);
|
|
}
|
|
|
|
.oura-ring {
|
|
@apply grid h-32 w-32 shrink-0 place-items-center p-2 shadow-can;
|
|
background: conic-gradient(var(--primary) var(--progress), var(--surface-container-high) 0);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.oura-ring > div {
|
|
@apply flex h-full w-full flex-col items-center justify-center;
|
|
background: var(--surface-container-lowest);
|
|
border-radius: inherit;
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 72%, transparent);
|
|
}
|
|
|
|
.oura-ring span {
|
|
@apply text-4xl font-semibold leading-none;
|
|
color: var(--text);
|
|
}
|
|
|
|
.oura-ring small {
|
|
@apply mt-1 text-xs font-semibold uppercase;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.wellness-pill {
|
|
@apply flex items-center justify-between gap-3 rounded-full border px-4 py-3 text-sm;
|
|
background: color-mix(in srgb, var(--surface-container-high) 78%, white);
|
|
border-color: var(--outline-variant);
|
|
}
|
|
|
|
.wellness-pill span {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.wellness-pill strong {
|
|
color: var(--text);
|
|
}
|
|
|
|
.suggestion-chip {
|
|
@apply min-h-11 rounded-full border px-4 py-2 text-sm font-semibold transition disabled:cursor-not-allowed;
|
|
background: color-mix(in srgb, var(--surface-container-high) 72%, white);
|
|
border-color: var(--outline-variant);
|
|
color: var(--text);
|
|
}
|
|
|
|
.suggestion-chip:hover:not(:disabled) {
|
|
background: var(--primary-container);
|
|
color: var(--on-primary-container);
|
|
box-shadow: var(--elevation-1);
|
|
}
|
|
|
|
.coach-panel {
|
|
@apply flex flex-col gap-3 p-5 sm:p-6;
|
|
}
|
|
|
|
.coach-panel-compact {
|
|
min-height: 360px;
|
|
}
|
|
|
|
.coach-panel-full {
|
|
min-height: calc(100vh - 220px);
|
|
}
|
|
|
|
.coach-panel-header {
|
|
@apply flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between;
|
|
}
|
|
|
|
.coach-panel-title {
|
|
@apply flex items-start gap-3;
|
|
}
|
|
|
|
.coach-panel-icon {
|
|
@apply flex h-10 w-10 shrink-0 items-center justify-center rounded-xl;
|
|
background: var(--primary-container);
|
|
color: var(--on-primary-container);
|
|
}
|
|
|
|
.coach-panel-kicker {
|
|
@apply text-xs font-semibold uppercase tracking-wide;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.coach-panel-heading {
|
|
@apply text-lg font-semibold leading-snug;
|
|
color: var(--text);
|
|
}
|
|
|
|
.coach-panel-meta {
|
|
@apply flex flex-wrap items-center gap-2;
|
|
}
|
|
|
|
.coach-status-pill {
|
|
@apply inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold;
|
|
background: var(--surface-container-high);
|
|
border-color: var(--outline-variant);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.coach-status-dot {
|
|
@apply h-2 w-2 rounded-full;
|
|
background: var(--chart-secondary);
|
|
}
|
|
|
|
.coach-status-dot-busy {
|
|
background: var(--chart-tertiary);
|
|
@apply animate-pulse;
|
|
}
|
|
|
|
.coach-model-tag {
|
|
@apply text-xs;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.coach-expand-button {
|
|
@apply inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-semibold;
|
|
border-color: var(--outline-variant);
|
|
color: var(--text);
|
|
}
|
|
|
|
.coach-thread-strip {
|
|
@apply flex flex-wrap items-center gap-2;
|
|
}
|
|
|
|
.coach-thread-chip {
|
|
@apply inline-flex items-center overflow-hidden rounded-full border text-xs font-semibold;
|
|
border-color: var(--outline-variant);
|
|
background: var(--surface-container-high);
|
|
}
|
|
|
|
.coach-thread-chip button:first-child {
|
|
@apply px-3 py-1.5;
|
|
color: var(--text);
|
|
}
|
|
|
|
.coach-thread-chip button:last-child {
|
|
@apply px-2 py-1.5 opacity-60;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.coach-thread-chip-active {
|
|
background: var(--primary-container);
|
|
border-color: color-mix(in srgb, var(--primary) 30%, var(--outline-variant));
|
|
}
|
|
|
|
.coach-thread-new {
|
|
@apply inline-flex h-8 w-8 items-center justify-center rounded-full border;
|
|
border-color: var(--outline-variant);
|
|
color: var(--text);
|
|
}
|
|
|
|
.coach-panel-context {
|
|
@apply flex flex-wrap gap-3 text-xs font-semibold;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.coach-panel-feed {
|
|
@apply grid flex-1 content-start gap-3 overflow-y-auto rounded-2xl border p-3;
|
|
background: var(--surface-container-low);
|
|
border-color: var(--outline-variant);
|
|
min-height: 200px;
|
|
max-height: min(56vh, 640px);
|
|
}
|
|
|
|
.coach-panel-feed-compact {
|
|
min-height: 160px;
|
|
max-height: 280px;
|
|
}
|
|
|
|
.coach-panel-empty {
|
|
@apply flex flex-col items-center justify-center gap-3 px-4 py-8 text-center;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.coach-panel-empty p {
|
|
@apply max-w-sm text-sm leading-6;
|
|
}
|
|
|
|
.coach-quick-grid {
|
|
@apply grid w-full gap-2;
|
|
}
|
|
|
|
.coach-line {
|
|
@apply grid grid-cols-[auto_1fr] gap-2;
|
|
}
|
|
|
|
.coach-line-avatar {
|
|
@apply flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold;
|
|
background: var(--surface-container-high);
|
|
color: var(--text);
|
|
}
|
|
|
|
.coach-line-assistant .coach-line-avatar {
|
|
background: var(--primary-container);
|
|
color: var(--on-primary-container);
|
|
}
|
|
|
|
.coach-line-user .coach-line-avatar {
|
|
background: var(--tertiary-container);
|
|
color: var(--on-tertiary-container);
|
|
}
|
|
|
|
.coach-line-body {
|
|
@apply min-w-0 rounded-2xl px-3 py-2 text-sm leading-relaxed;
|
|
background: var(--surface-container-high);
|
|
color: var(--text);
|
|
}
|
|
|
|
.coach-line-user .coach-line-body {
|
|
background: var(--primary);
|
|
color: var(--on-primary);
|
|
}
|
|
|
|
.coach-line-typing {
|
|
@apply inline-block animate-pulse;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.coach-panel-error {
|
|
@apply rounded-xl border px-3 py-2 text-sm;
|
|
border-color: var(--error-container);
|
|
background: var(--error-container);
|
|
color: var(--on-error-container);
|
|
}
|
|
|
|
.coach-panel-composer {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
|
|
.coach-panel-input {
|
|
@apply min-h-11 flex-1;
|
|
}
|
|
|
|
.coach-panel-send {
|
|
@apply min-h-11 min-w-11 px-0;
|
|
}
|
|
|
|
.thinking-pill {
|
|
@apply mb-2 overflow-hidden rounded-full border;
|
|
background: color-mix(in srgb, var(--surface-container) 88%, black 4%);
|
|
border-color: color-mix(in srgb, var(--outline-variant) 80%, var(--primary) 20%);
|
|
}
|
|
|
|
.thinking-pill-track {
|
|
@apply relative flex min-h-10 items-center justify-center overflow-hidden px-4;
|
|
}
|
|
|
|
.thinking-pill-label {
|
|
@apply relative z-[1] text-xs font-semibold tracking-wide;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.thinking-pill-chevron {
|
|
@apply absolute right-3 z-[1] text-xs font-bold opacity-70;
|
|
color: var(--primary);
|
|
animation: thinking-unlock-nudge 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
.thinking-pill-shimmer {
|
|
@apply absolute inset-y-0 left-0 w-16 rounded-full opacity-70;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
color-mix(in srgb, var(--primary-container) 70%, white),
|
|
transparent
|
|
);
|
|
animation: thinking-unlock-slide 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
.thinking-pill-stopped .thinking-pill-shimmer,
|
|
.thinking-pill-stopped .thinking-pill-chevron {
|
|
animation: none;
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.thinking-details {
|
|
@apply mt-2;
|
|
}
|
|
|
|
.thinking-details summary {
|
|
@apply cursor-pointer text-xs font-medium;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.thinking-details summary:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.thinking-trace {
|
|
@apply mt-2 max-h-56 overflow-auto rounded-xl border p-3 text-xs leading-5 whitespace-pre-wrap;
|
|
background: var(--surface-container);
|
|
border-color: var(--outline-variant);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.coach-composer {
|
|
@apply absolute inset-x-0 bottom-0 z-10;
|
|
background: linear-gradient(to top, var(--surface-container-lowest) 60%, transparent);
|
|
padding: 0 1rem 1rem;
|
|
}
|
|
|
|
.coach-composer-inner {
|
|
@apply mx-auto flex max-w-3xl items-end gap-2 rounded-2xl border p-2;
|
|
background: var(--surface-container-high);
|
|
border-color: var(--outline-variant);
|
|
box-shadow: var(--elevation-2);
|
|
}
|
|
|
|
.coach-input {
|
|
@apply min-h-11 flex-1 resize-none rounded-xl border-0 px-3 py-2 text-sm;
|
|
background: transparent;
|
|
color: var(--text);
|
|
field-sizing: content;
|
|
max-height: 160px;
|
|
}
|
|
|
|
.coach-input:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.coach-input::placeholder {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.composer-icon-button,
|
|
.composer-send-button {
|
|
@apply flex h-9 w-9 shrink-0 items-center justify-center rounded-xl transition disabled:cursor-not-allowed disabled:opacity-40;
|
|
}
|
|
|
|
.composer-icon-button:hover {
|
|
background: var(--surface-container);
|
|
}
|
|
|
|
.composer-send-button {
|
|
background: var(--primary);
|
|
color: var(--on-primary);
|
|
}
|
|
|
|
.composer-send-button:hover:not(:disabled) {
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
.composer-stop-button {
|
|
background: var(--surface-container-high);
|
|
color: var(--text);
|
|
}
|
|
|
|
.coach-unlock-card {
|
|
@apply mt-6 flex w-full max-w-md flex-col gap-3;
|
|
}
|
|
|
|
.coach-unlock-card .coach-input {
|
|
@apply rounded-xl border px-4 py-3;
|
|
background: var(--surface-container-lowest);
|
|
border-color: var(--outline-variant);
|
|
}
|
|
|
|
.coach-error {
|
|
@apply mx-auto max-w-3xl px-4 pb-2;
|
|
}
|
|
|
|
.coach-error-inner {
|
|
@apply rounded-xl border px-3 py-2 text-sm;
|
|
border-color: var(--error-container);
|
|
background: var(--error-container);
|
|
color: var(--on-error-container);
|
|
}
|
|
|
|
.coach-typing-dots {
|
|
@apply flex items-center gap-1 py-1;
|
|
}
|
|
|
|
.coach-typing-dots span {
|
|
@apply inline-block h-2 w-2 rounded-full;
|
|
background: var(--muted);
|
|
animation: coach-bounce 1.4s infinite ease-in-out both;
|
|
}
|
|
|
|
.coach-typing-dots span:nth-child(1) { animation-delay: 0s; }
|
|
.coach-typing-dots span:nth-child(2) { animation-delay: 0.16s; }
|
|
.coach-typing-dots span:nth-child(3) { animation-delay: 0.32s; }
|
|
|
|
@keyframes coach-bounce {
|
|
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
|
40% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
.coach-hint {
|
|
@apply mt-1.5 text-center text-xs;
|
|
color: var(--muted);
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.coach-shell {
|
|
/* sidebar visible */
|
|
}
|
|
}
|
|
|
|
.can-emblem {
|
|
@apply flex h-11 w-11 items-center justify-center rounded-lg border shadow-can;
|
|
background: var(--primary-container);
|
|
border-color: color-mix(in srgb, var(--primary) 24%, var(--outline-variant));
|
|
color: var(--on-primary-container);
|
|
}
|
|
|
|
.command-button,
|
|
.secondary-button {
|
|
@apply inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold shadow-sm transition active:scale-[0.99] disabled:cursor-not-allowed;
|
|
background: var(--secondary-container);
|
|
border-color: transparent;
|
|
color: var(--on-secondary-container);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.primary-button {
|
|
@apply inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold shadow-can transition active:scale-[0.99] disabled:cursor-not-allowed;
|
|
background: var(--primary);
|
|
border-color: transparent;
|
|
color: var(--on-primary);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.excel-button {
|
|
@apply inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold shadow-sm transition active:scale-[0.99] disabled:cursor-not-allowed;
|
|
background: var(--tertiary-container);
|
|
border-color: transparent;
|
|
color: var(--on-tertiary-container);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.primary-button:hover,
|
|
.secondary-button:hover,
|
|
.command-button:hover,
|
|
.excel-button:hover,
|
|
.icon-button:hover,
|
|
.quick-add:hover,
|
|
.list-button:hover {
|
|
filter: brightness(0.985);
|
|
box-shadow: var(--elevation-2);
|
|
}
|
|
|
|
.primary-button:disabled,
|
|
.secondary-button:disabled,
|
|
.command-button:disabled,
|
|
.excel-button:disabled,
|
|
.danger-button:disabled {
|
|
box-shadow: none;
|
|
opacity: 0.58;
|
|
}
|
|
|
|
.danger-button {
|
|
@apply inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold shadow-sm transition active:scale-[0.99] disabled:cursor-not-allowed;
|
|
background: var(--error);
|
|
border-color: transparent;
|
|
color: var(--on-error);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.nav-item {
|
|
@apply flex min-h-12 items-center gap-3 border border-transparent px-4 text-sm font-medium transition;
|
|
border-radius: 999px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--surface-container-high);
|
|
color: var(--text);
|
|
}
|
|
|
|
.nav-item-active {
|
|
background: var(--primary-container);
|
|
color: var(--on-primary-container) !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.icon-button {
|
|
@apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md border shadow-sm transition;
|
|
background: var(--surface-container-high);
|
|
border-color: var(--outline-variant);
|
|
color: var(--text);
|
|
}
|
|
|
|
.quick-add {
|
|
@apply inline-flex min-h-12 items-center gap-2 rounded-md border px-3 text-sm font-semibold shadow-sm transition;
|
|
background: var(--surface-container-high);
|
|
border-color: var(--outline-variant);
|
|
color: var(--text);
|
|
}
|
|
|
|
.field-label {
|
|
@apply grid gap-2 text-sm font-medium;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.field-control {
|
|
@apply w-full rounded-md border px-3 py-3 text-base font-normal shadow-sm transition;
|
|
background: var(--surface-container-lowest);
|
|
border-color: var(--outline-variant);
|
|
color: var(--text);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.field-control:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
|
|
}
|
|
|
|
.modal-panel {
|
|
@apply max-h-[92vh] w-full max-w-3xl overflow-y-auto rounded-lg border p-5 shadow-fridge sm:p-6;
|
|
background: var(--surface-container-lowest);
|
|
border-color: var(--outline-variant);
|
|
color: var(--text);
|
|
border-radius: 28px;
|
|
}
|
|
|
|
.entry-row {
|
|
@apply grid gap-3 rounded-lg border p-4 transition sm:grid-cols-[1fr_auto] sm:items-center;
|
|
background: var(--surface-container-high);
|
|
border-color: var(--outline-variant);
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.entry-row:hover {
|
|
box-shadow: var(--elevation-1);
|
|
}
|
|
|
|
.list-button {
|
|
@apply flex min-h-11 items-center justify-between rounded-lg border px-3 text-sm font-semibold transition;
|
|
background: var(--secondary-container);
|
|
border-color: transparent;
|
|
color: var(--on-secondary-container);
|
|
}
|
|
|
|
.status-card {
|
|
@apply flex items-center gap-2 rounded-md border px-3 py-2 text-sm shadow-sm;
|
|
}
|
|
|
|
.theme-indicator {
|
|
@apply inline-flex min-h-11 items-center gap-2 rounded-full border px-3 text-sm font-semibold transition;
|
|
background: var(--surface-container-high);
|
|
border-color: var(--outline-variant);
|
|
color: var(--text);
|
|
}
|
|
|
|
.theme-indicator:hover {
|
|
background: var(--primary-container);
|
|
color: var(--on-primary-container);
|
|
}
|
|
|
|
.theme-indicator-swatch {
|
|
@apply h-4 w-4 rounded-full border border-white shadow-sm;
|
|
}
|
|
|
|
.theme-indicator-label {
|
|
@apply max-w-[9rem] truncate;
|
|
}
|
|
|
|
.settings-section {
|
|
@apply grid gap-4;
|
|
}
|
|
|
|
.settings-tabs {
|
|
@apply inline-flex flex-wrap gap-1 rounded-full border p-1;
|
|
background: var(--surface-container-high);
|
|
border-color: var(--outline-variant);
|
|
}
|
|
|
|
.settings-tabs button {
|
|
@apply rounded-full px-4 py-2 text-sm font-semibold transition;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.settings-tabs button:hover,
|
|
.settings-tab-active {
|
|
background: var(--primary-container);
|
|
color: var(--on-primary-container) !important;
|
|
}
|
|
|
|
.theme-preview-strip {
|
|
@apply flex flex-wrap gap-2;
|
|
}
|
|
|
|
.theme-preview-chip {
|
|
color: var(--text);
|
|
}
|
|
|
|
.theme-picker-grid {
|
|
@apply grid gap-3 sm:grid-cols-2 lg:grid-cols-3;
|
|
}
|
|
|
|
.theme-tile {
|
|
@apply flex min-h-[4.5rem] items-center gap-3 rounded-xl border px-3 py-3 text-left transition;
|
|
background: var(--surface-container);
|
|
border-color: var(--outline-variant);
|
|
color: var(--text);
|
|
}
|
|
|
|
.theme-tile:hover {
|
|
box-shadow: var(--elevation-1);
|
|
border-color: var(--outline);
|
|
}
|
|
|
|
.theme-tile-active {
|
|
border-color: var(--primary);
|
|
box-shadow: var(--elevation-1);
|
|
background: var(--primary-container);
|
|
color: var(--on-primary-container);
|
|
}
|
|
|
|
.theme-tile-swatch {
|
|
@apply h-10 w-10 shrink-0 rounded-full border border-white shadow-sm;
|
|
}
|
|
|
|
.theme-tile-label {
|
|
@apply text-sm font-semibold leading-5;
|
|
}
|
|
}
|
|
|
|
.app-shell {
|
|
--primary: #4b86ad;
|
|
--on-primary: #ffffff;
|
|
--primary-container: #dff2ff;
|
|
--on-primary-container: #10283a;
|
|
--secondary: #647887;
|
|
--on-secondary: #ffffff;
|
|
--secondary-container: #ecf3f7;
|
|
--on-secondary-container: #1f2d35;
|
|
--tertiary: #9b7b51;
|
|
--on-tertiary: #ffffff;
|
|
--tertiary-container: #f4eadb;
|
|
--on-tertiary-container: #332313;
|
|
--error: #ba1a1a;
|
|
--on-error: #ffffff;
|
|
--error-container: #ffdad6;
|
|
--on-error-container: #410002;
|
|
--bg: #f8fbff;
|
|
--surface: #f8fbff;
|
|
--surface-container-lowest: #ffffff;
|
|
--surface-container-low: #f1f7fb;
|
|
--surface-container: #edf3f7;
|
|
--surface-container-high: #e7eef3;
|
|
--panel: var(--surface-container);
|
|
--panel-strong: var(--surface-container-lowest);
|
|
--outline: #7c8992;
|
|
--outline-variant: #dce5ea;
|
|
--text: #1f252a;
|
|
--muted: #68747c;
|
|
--subtle: #839099;
|
|
--accent: var(--primary-container);
|
|
--accent-soft: var(--surface-container-low);
|
|
--accent-strong: var(--primary);
|
|
--accent-warm: #eef4f7;
|
|
--chart-primary: #4b86ad;
|
|
--chart-secondary: #6f8f7c;
|
|
--chart-tertiary: #9b7b51;
|
|
--chart-error: #ba1a1a;
|
|
--chart-grid: rgba(124, 137, 146, 0.18);
|
|
--elevation-1: 0 12px 34px rgba(69, 91, 108, 0.08), 0 1px 2px rgba(69, 91, 108, 0.06);
|
|
--elevation-2: 0 18px 44px rgba(69, 91, 108, 0.12), 0 2px 8px rgba(69, 91, 108, 0.08);
|
|
min-height: 100vh;
|
|
background: var(--bg) !important;
|
|
color: var(--text) !important;
|
|
font-family: "Google Sans", "Google Sans Text", "Product Sans", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
|
|
.backdrop-wash {
|
|
background:
|
|
radial-gradient(circle at 70% 35%, var(--primary-container) 0 18%, transparent 42%),
|
|
radial-gradient(circle at 12% 12%, var(--surface-container-lowest) 0 18%, transparent 38%),
|
|
linear-gradient(180deg, var(--bg) 0%, var(--surface-container-lowest) 46%, var(--surface-container-low) 100%);
|
|
}
|
|
|
|
.backdrop-grid {
|
|
background-image:
|
|
linear-gradient(var(--chart-grid) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.backdrop-rail {
|
|
background: linear-gradient(90deg, var(--primary-container), var(--accent-warm), var(--tertiary-container), var(--primary-container));
|
|
}
|
|
|
|
.app-shell *,
|
|
.app-shell .tracking-tight,
|
|
.app-shell [class*="tracking-"] {
|
|
letter-spacing: 0 !important;
|
|
}
|
|
|
|
.app-shell .text-white,
|
|
.app-shell .text-slate-50,
|
|
.app-shell .text-slate-100,
|
|
.app-shell .text-slate-200 {
|
|
color: var(--text) !important;
|
|
}
|
|
|
|
.app-shell .text-slate-300,
|
|
.app-shell .text-slate-400,
|
|
.app-shell .text-slate-500,
|
|
.app-shell .text-slate-600 {
|
|
color: var(--muted) !important;
|
|
}
|
|
|
|
.app-shell .text-cyan-50,
|
|
.app-shell .text-cyan-100,
|
|
.app-shell .text-cyan-200,
|
|
.app-shell .text-pink-100,
|
|
.app-shell .text-pink-200 {
|
|
color: var(--primary) !important;
|
|
}
|
|
|
|
.app-shell .text-emerald-200 {
|
|
color: #2d6f57 !important;
|
|
}
|
|
|
|
.app-shell .text-amber-100,
|
|
.app-shell .text-amber-200 {
|
|
color: #765930 !important;
|
|
}
|
|
|
|
.app-shell .text-red-100,
|
|
.app-shell .text-red-200 {
|
|
color: var(--error) !important;
|
|
}
|
|
|
|
.app-shell .text-\[\#07101f\] {
|
|
color: var(--on-primary-container) !important;
|
|
}
|
|
|
|
.app-shell .primary-button,
|
|
.app-shell .primary-button * {
|
|
color: var(--on-primary) !important;
|
|
}
|
|
|
|
.app-shell .secondary-button,
|
|
.app-shell .secondary-button *,
|
|
.app-shell .command-button,
|
|
.app-shell .command-button * {
|
|
color: var(--on-secondary-container) !important;
|
|
}
|
|
|
|
.app-shell .excel-button,
|
|
.app-shell .excel-button * {
|
|
color: var(--on-tertiary-container) !important;
|
|
}
|
|
|
|
.app-shell .bg-\[\#050711\],
|
|
.app-shell .bg-\[\#090f22\]\/90,
|
|
.app-shell .bg-\[\#0d142c\],
|
|
.app-shell .bg-\[\#080d1f\]\/95,
|
|
.app-shell .bg-\[\#070d1f\]\/90,
|
|
.app-shell .bg-\[\#07101f\] {
|
|
background: var(--surface-container-high) !important;
|
|
}
|
|
|
|
.app-shell .bg-cyan-300,
|
|
.app-shell .bg-cyan-200,
|
|
.app-shell .bg-cyan-300\/10,
|
|
.app-shell .bg-cyan-200\/10,
|
|
.app-shell .bg-cyan-300\/15 {
|
|
background-color: var(--primary-container) !important;
|
|
}
|
|
|
|
.app-shell .bg-pink-200,
|
|
.app-shell .bg-pink-200\/10 {
|
|
background-color: var(--secondary-container) !important;
|
|
}
|
|
|
|
.app-shell .bg-amber-300\/10,
|
|
.app-shell .bg-amber-300\/15 {
|
|
background-color: var(--tertiary-container) !important;
|
|
}
|
|
|
|
.app-shell .bg-red-500\/10,
|
|
.app-shell .bg-red-500\/15 {
|
|
background-color: var(--error-container) !important;
|
|
}
|
|
|
|
.app-shell .bg-white\/5,
|
|
.app-shell .bg-white\/\[0\.05\],
|
|
.app-shell .bg-white\/\[0\.06\],
|
|
.app-shell .bg-white\/\[0\.08\],
|
|
.app-shell .bg-white\/10,
|
|
.app-shell .bg-white\/\[0\.10\],
|
|
.app-shell .hover\:bg-white\/10:hover,
|
|
.app-shell .hover\:bg-white\/\[0\.10\]:hover,
|
|
.app-shell .hover\:bg-white\/\[0\.12\]:hover {
|
|
background-color: var(--surface-container-high) !important;
|
|
}
|
|
|
|
.app-shell .border-white\/10,
|
|
.app-shell .border-cyan-200\/20,
|
|
.app-shell .border-cyan-200\/25,
|
|
.app-shell .border-cyan-200\/30,
|
|
.app-shell .border-cyan-300\/30,
|
|
.app-shell .border-cyan-300\/40,
|
|
.app-shell .border-pink-200\/30,
|
|
.app-shell .border-pink-200\/40,
|
|
.app-shell .border-amber-300\/40,
|
|
.app-shell .border-red-400\/40 {
|
|
border-color: var(--outline-variant) !important;
|
|
}
|
|
|
|
.app-shell .shadow-fridge,
|
|
.app-shell .shadow-cyan,
|
|
.app-shell .shadow-sm {
|
|
box-shadow: var(--elevation-1) !important;
|
|
}
|
|
|
|
.app-shell .danger-button,
|
|
.app-shell .danger-button * {
|
|
color: var(--on-error) !important;
|
|
}
|
|
|
|
.app-shell .field-control::placeholder {
|
|
color: color-mix(in srgb, var(--muted) 58%, white);
|
|
}
|
|
|
|
.app-shell input[type="checkbox"] {
|
|
accent-color: var(--primary);
|
|
}
|
|
|
|
.app-shell .modal-panel {
|
|
color: var(--text);
|
|
}
|
|
|
|
@keyframes thinking-unlock-slide {
|
|
0% {
|
|
transform: translateX(-120%);
|
|
}
|
|
100% {
|
|
transform: translateX(calc(100vw + 120%));
|
|
}
|
|
}
|
|
|
|
@keyframes thinking-unlock-nudge {
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
opacity: 0.45;
|
|
}
|
|
50% {
|
|
transform: translateX(-4px);
|
|
opacity: 1;
|
|
}
|
|
}
|