openpencil/src/app.css
Danila Poyarkov e69ba75c12
refactor(ui): compose shared editor controls (#670)
* refactor(ui): extract shared action and navigation primitives

* refactor(ui): compose settings and libraries with shared tabs

* feat(ui): preserve native activation and toolbar keyboard navigation

* refactor(home): share document entries and accessible input controls

* fix(layers): share virtualized row geometry and selection styling

* refactor(layout): compose spacing and readable dimension controls

* refactor(properties): compose advanced strokes and inline effects

* refactor(ui): reuse actions in page and property controls

* refactor(settings): adopt shared actions without changing workflows

* refactor(ui): share collaboration and provider actions

* refactor(ui): finish shell and paint action composition

* test(ui): restore extracted control and settings coverage

* test(ui): complete workflow extraction coverage

* fix(ui): address review and trim redundant snapshots

* fix(layout): preserve single-step Undo for guides and wrap
2026-09-10 12:09:06 +03:00

145 lines
3.7 KiB
CSS

@import 'tailwindcss';
@import 'tw-animate-css';
@import 'vue-stream-markdown/index.css' layer(components);
@import './theme/chat/markdown.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-panel-secondary: #242424;
--color-panel-field: #383838;
--color-panel-field-hover: #404040;
--color-panel-focus: #3b82f6;
--color-panel-selected: #2f6fdd;
--color-panel-selected-muted: #3d4450;
--color-canvas: #1e1e1e;
--color-border: #3a3a3a;
--color-hover: #353535;
--color-accent: #3b82f6;
--color-surface: #f0f0f0;
--color-muted: #888888;
--color-input: #1e1e1e;
--color-component: #9747ff;
--color-warning-bg: rgb(245 158 11 / 0.1);
--color-warning-border: rgb(245 158 11 / 0.3);
--color-warning-text: #fde68a;
--color-warning-action: #fcd34d;
--color-success: #4ade80;
--color-primary: #60a5fa;
--color-inverted: #1f2328;
--color-error: #f87171;
--color-error-bg: rgb(248 113 113 / 0.1);
--color-error-border: rgb(248 113 113 / 0.4);
--color-success-bg: #16a34a;
--color-success-bg-hover: #15803d;
--color-code-tag: #7dd3fc;
--color-code-attribute: #c4b5fd;
--color-code-string: #86efac;
--color-code-number: #fca5a5;
--color-code-punctuation: #888888;
--color-checkerboard: #3a3a3a;
--color-checkerboard-muted: #4a4a4a;
--color-ruler-bg: rgb(36, 36, 36);
--color-ruler-tick: rgb(102, 102, 102);
--color-ruler-text: rgb(140, 140, 140);
--color-ruler-label: rgb(255, 255, 255);
}
html[data-theme='light'] {
--color-panel: #ffffff;
--color-panel-secondary: #f7f8fa;
--color-panel-field: #f0f1f3;
--color-panel-field-hover: #e4e7ea;
--color-panel-focus: #2563eb;
--color-panel-selected: #2563eb;
--color-panel-selected-muted: #e5e7eb;
--color-canvas: #f3f4f6;
--color-border: #d8dce3;
--color-hover: #eef1f5;
--color-accent: #2563eb;
--color-primary: #2563eb;
--color-inverted: #ffffff;
--color-surface: #1f2328;
--color-muted: #6b7280;
--color-input: #ffffff;
--color-component: #7c3aed;
--color-warning-bg: rgb(245 158 11 / 0.14);
--color-warning-border: rgb(245 158 11 / 0.32);
--color-warning-text: #92400e;
--color-warning-action: #78350f;
--color-success: #15803d;
--color-error: #b91c1c;
--color-error-bg: rgb(185 28 28 / 0.08);
--color-error-border: rgb(185 28 28 / 0.28);
--color-success-bg: #16a34a;
--color-success-bg-hover: #15803d;
--color-code-tag: #0369a1;
--color-code-attribute: #6d28d9;
--color-code-string: #15803d;
--color-code-number: #b91c1c;
--color-code-punctuation: #64748b;
--color-checkerboard: #d1d5db;
--color-checkerboard-muted: #e5e7eb;
--color-ruler-bg: rgb(250, 250, 251);
--color-ruler-tick: rgb(163, 171, 182);
--color-ruler-text: rgb(90, 99, 112);
--color-ruler-label: rgb(255, 255, 255);
}
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;
}