155 lines
4.1 KiB
CSS
155 lines
4.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Accent palette defaults (emerald). Overridden at runtime by lib/accent.ts
|
|
from the user's saved accent color / custom pick. Values are RGB triplets. */
|
|
:root {
|
|
--ka-accent-50: 236 253 245;
|
|
--ka-accent-100: 209 250 229;
|
|
--ka-accent-200: 167 243 208;
|
|
--ka-accent-300: 110 231 183;
|
|
--ka-accent-400: 52 211 153;
|
|
--ka-accent-500: 16 185 129;
|
|
--ka-accent-600: 5 150 105;
|
|
--ka-accent-700: 4 120 87;
|
|
--ka-accent-800: 6 95 70;
|
|
--ka-accent-900: 6 78 59;
|
|
}
|
|
|
|
html, body, #root {
|
|
height: 100%;
|
|
}
|
|
/* Mobile browser chrome (URL bar) shrinks the visible area — dynamic
|
|
viewport units keep the app glued to the real screen height. */
|
|
@supports (height: 100dvh) {
|
|
html, body, #root {
|
|
height: 100dvh;
|
|
}
|
|
}
|
|
|
|
body {
|
|
@apply bg-stone-100 text-stone-900 antialiased dark:bg-zinc-950 dark:text-zinc-100;
|
|
/* Kill the 300ms tap delay, keep gestures app-like. */
|
|
touch-action: manipulation;
|
|
overscroll-behavior-y: none;
|
|
}
|
|
|
|
/* slim scrollbars */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgb(0 0 0 / 0.2) transparent;
|
|
}
|
|
*::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
*::-webkit-scrollbar-thumb {
|
|
background: rgb(0 0 0 / 0.2);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* markdown content */
|
|
.md p:first-child { margin-top: 0; }
|
|
.md p:last-child { margin-bottom: 0; }
|
|
.md pre {
|
|
@apply relative overflow-x-auto rounded-2xl border border-stone-200 bg-stone-900 p-4 text-[13.5px] leading-relaxed text-stone-100 dark:border-zinc-700;
|
|
}
|
|
.md pre code {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
background: none !important;
|
|
padding: 0 !important;
|
|
}
|
|
.md :not(pre) > code {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
@apply rounded-md bg-stone-200/70 px-1.5 py-0.5 text-[13px] dark:bg-zinc-800;
|
|
}
|
|
.md table {
|
|
@apply w-full border-collapse overflow-hidden rounded-xl text-sm;
|
|
}
|
|
.md th, .md td {
|
|
@apply border border-stone-200 px-3 py-1.5 dark:border-zinc-700;
|
|
}
|
|
.md th {
|
|
@apply bg-stone-200/50 dark:bg-zinc-800;
|
|
}
|
|
.md a {
|
|
@apply text-accent-600 underline dark:text-accent-400;
|
|
}
|
|
.md ul { @apply list-disc pl-5; }
|
|
.md ol { @apply list-decimal pl-5; }
|
|
.md blockquote {
|
|
@apply border-l-4 border-accent-500/50 pl-3 italic opacity-80;
|
|
}
|
|
|
|
.typing-cursor::after {
|
|
content: "▍";
|
|
animation: blink 1s steps(1) infinite;
|
|
}
|
|
@keyframes blink {
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* Loading flower: petals bloom one after another, core breathes. */
|
|
.flower-petal {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
animation: bloom 1.8s ease-in-out infinite;
|
|
}
|
|
@keyframes bloom {
|
|
0%, 100% { transform: scale(0.55); opacity: 0.3; }
|
|
50% { transform: scale(1); opacity: 1; }
|
|
}
|
|
.flower-core {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
animation: core-breathe 1.8s ease-in-out infinite;
|
|
}
|
|
@keyframes core-breathe {
|
|
0%, 100% { transform: scale(0.85); }
|
|
50% { transform: scale(1.15); }
|
|
}
|
|
/* Smooth entrance for full-screen loaders. */
|
|
@keyframes loading-in {
|
|
from { opacity: 0; transform: scale(0.94); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
.loading-enter {
|
|
animation: loading-in 0.45s ease-out both;
|
|
}
|
|
|
|
.loading-dots::after {
|
|
content: "";
|
|
animation: dots 1.4s steps(4) infinite;
|
|
}
|
|
@keyframes dots {
|
|
0% { content: ""; }
|
|
25% { content: "."; }
|
|
50% { content: ".."; }
|
|
75% { content: "..."; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.flower-petal, .flower-core, .loading-dots::after, .loading-enter, .typing-cursor::after {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* Kill Chrome's yellow autofill background (login / password fields) */
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
input:-webkit-autofill:active {
|
|
-webkit-box-shadow: 0 0 0 60px rgb(245 245 244) inset; /* stone-100, matches soft fields */
|
|
-webkit-text-fill-color: #1c1917; /* stone-900 */
|
|
caret-color: #1c1917;
|
|
}
|
|
.dark input:-webkit-autofill,
|
|
.dark input:-webkit-autofill:hover,
|
|
.dark input:-webkit-autofill:focus,
|
|
.dark input:-webkit-autofill:active {
|
|
-webkit-box-shadow: 0 0 0 60px #27272a inset; /* zinc-800 */
|
|
-webkit-text-fill-color: #f4f4f5; /* zinc-100 */
|
|
caret-color: #f4f4f5;
|
|
}
|