Admin
06b7a08bfa
Styles: adds the scrim and on-art tokens so the black overlays and the white marks drawn over artwork stop being raw tailwind colours, and routes every component through the semantic layer instead of reaching into the --mf-* palette. Renames --mf-accent-60, which was actually an 80% mix, to --mf-accent-soft, and removes the unused --mf-radius and the --color-neutral-950 override. Dead code: the root +layout.server.ts already redirects everything except /login, so the anonymous branches in the home and explore loads and the needsAuth empty state could never run. Deletes the unused accentSoft helper, and stops exporting helpers nobody imports. fmtTime and fmtDate move out of theme/color.ts into $lib/format.ts; they are not colour concerns. The accent animation now cancels its pending frame on teardown.
183 lines
3.1 KiB
CSS
183 lines
3.1 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@theme {
|
|
--font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
|
|
|
|
--color-bg: var(--mf-bg);
|
|
--color-elevated: var(--mf-elevated);
|
|
--color-surface: var(--mf-surface);
|
|
--color-surface-2: var(--mf-surface-2);
|
|
--color-surface-hover: var(--mf-surface-hover);
|
|
--color-hover: rgba(255, 255, 255, 0.05);
|
|
--color-line: var(--mf-border);
|
|
--color-line-strong: var(--mf-border-strong);
|
|
--color-track: var(--mf-track);
|
|
--color-fg: var(--mf-text);
|
|
--color-fg-2: var(--mf-text-2);
|
|
--color-fg-3: var(--mf-text-3);
|
|
--color-muted: var(--mf-text-4);
|
|
--color-accent: var(--mf-accent);
|
|
--color-accent-soft: var(--mf-accent-soft);
|
|
--color-on-accent: var(--mf-on-art);
|
|
--color-scrim: var(--mf-scrim);
|
|
--color-on-art: var(--mf-on-art);
|
|
--color-danger: oklch(63.7% 0.237 25.331);
|
|
--color-danger-fg: oklch(88.5% 0.062 18.334);
|
|
|
|
--radius-control: 0.625rem;
|
|
--radius-panel: 1rem;
|
|
--radius-art: 0.75rem;
|
|
--radius-art-lg: 1rem;
|
|
|
|
--shadow-art: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
|
|
--shadow-art-lg: 0 20px 45px -15px rgba(0, 0, 0, 0.7);
|
|
--shadow-menu: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
@utility page-x {
|
|
padding-inline: --spacing(8);
|
|
}
|
|
|
|
@utility scrollbar-stable {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
button:not(:disabled),
|
|
[role='button'],
|
|
label:has(input[type='file']),
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
@keyframes fade-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(0.75rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pop-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.96) translateY(0.5rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes equalize {
|
|
0%,
|
|
100% {
|
|
transform: scaleY(0.35);
|
|
}
|
|
50% {
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes breathe {
|
|
0%,
|
|
100% {
|
|
opacity: 0.55;
|
|
transform: scale(1.2);
|
|
}
|
|
50% {
|
|
opacity: 0.78;
|
|
transform: scale(1.32);
|
|
}
|
|
}
|
|
|
|
@keyframes sheen {
|
|
from {
|
|
background-position: 200% 0;
|
|
}
|
|
to {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
.animate-enter {
|
|
animation: fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
.animate-pop {
|
|
animation: pop-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
.animate-fade {
|
|
animation: fade-in 0.4s ease both;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.001ms !important;
|
|
animation-delay: 0ms !important;
|
|
transition-duration: 0.001ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
|
|
background-color: var(--mf-bg);
|
|
}
|
|
|
|
html.home {
|
|
background-image: linear-gradient(to bottom, var(--mf-accent), transparent 340px);
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: rgba(255, 255, 255, 0.18);
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(255, 255, 255, 0.32);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|