openpencil/src/app.css
2026-04-30 15:52:59 +03:00

85 lines
1.6 KiB
CSS

@import 'tailwindcss';
@import 'tw-animate-css';
@utility scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
@utility scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 3px;
}
&::-webkit-scrollbar-thumb:hover {
background: var(--color-muted);
}
}
@theme {
--color-panel: #2a2a2a;
--color-canvas: #1e1e1e;
--color-border: #3a3a3a;
--color-hover: #353535;
--color-accent: #3b82f6;
--color-surface: #e0e0e0;
--color-muted: #888888;
--color-input: #1e1e1e;
--color-component: #9747ff;
}
html[data-theme='light'] {
--color-panel: #ffffff;
--color-canvas: #f3f4f6;
--color-border: #d8dce3;
--color-hover: #eef1f5;
--color-accent: #2563eb;
--color-surface: #202124;
--color-muted: #6b7280;
--color-input: #ffffff;
--color-component: #7c3aed;
}
html,
body,
#app {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
font-family:
Inter,
system-ui,
-apple-system,
sans-serif;
font-size: 13px;
color: var(--color-surface);
background: var(--color-canvas);
user-select: none;
-webkit-user-select: none;
}
input[type='number'] {
appearance: textfield;
-moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
display: none;
}