SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
openpencil/src/app.css

113 lines
2.5 KiB
CSS
Raw Normal View History

Format codebase with oxfmt
2026-02-28 19:41:34 +00:00
@import 'tailwindcss';
Use reka-ui Tabs/ScrollArea/Collapsible/Tooltip, tw-animate-css, vue-stream-markdown
2026-03-01 08:03:51 +00:00
@import 'tw-animate-css';
Fix text editing: hide canvas text/selection during edit, load Inter font - Skip rendering text node on canvas while textarea overlay is active - Skip selection handles for the node being edited - Remove border from textarea (was causing double outline) - Add @font-face for Inter-Regular.ttf so textarea matches CanvasKit
2026-02-28 05:45:37 +00:00
Collab UI polish, vue-router, extract HsvColorArea - Move CollabPanel to right panel header (like Figma) - /share/:roomId shows join dialog with name input before connecting - Add vue-router with / and /share/:roomId routes - Extract EditorView from App.vue - Extract HsvColorArea component from ColorPicker + FillPicker (eliminates ~160 lines of duplicated HSV logic) - Extract syncNodePropsToYMap in use-collab.ts - Register Yjs update listener before opening WebSocket (fix race) - Scrollable AppMenu without scrollbar (scrollbar-none utility) - Overflow-x hidden on LayersPanel - Gitignore .wrangler build artifacts - SPA catch-all redirect for Cloudflare Pages
2026-03-01 14:15:08 +00:00
@utility scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
Fix scrollbar: use utility class instead of global selector Global * scrollbar styles caused scrollbars to appear on the menu bar and other elements. Replace with scrollbar-thin utility applied only to panel scroll containers.
2026-03-04 06:35:30 +00:00
@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);
}
}
Migrate to Tailwind CSS 4.2 - @tailwindcss/vite plugin for zero-config build - @theme tokens: panel, canvas, border, hover, accent, surface, muted, input - All scoped CSS replaced with Tailwind utility classes - Only remaining scoped CSS: ColorPicker range slider thumbs - Removed conflicting * { padding: 0 } reset (Tailwind preflight handles it)
2026-02-27 21:54:38 +00:00
@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;
Add random.ts helpers, replace all raw crypto.getRandomValues calls New module packages/core/src/random.ts with randomHex, randomInt, randomIndex — centralizes all crypto-based randomness. Replaces: - Date.now() IDs in VariablesDialog (not unique, not random) - Hand-rolled hex token in automation/server.ts - Inline crypto.getRandomValues in clipboard.ts, use-collab.ts Also adds --color-component Tailwind theme color (#9747ff) and replaces all 6 hardcoded occurrences across DesignPanel, LayerTree, NodeContextMenuContent, and menu.ts.
2026-03-16 11:13:36 +00:00
--color-component: #9747ff;
fix(app): use theme warning colors
2026-04-30 13:18:43 +00:00
--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;
fix(app): theme remaining ui color tokens
2026-04-30 13:26:17 +00:00
--color-success: #4ade80;
--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;
Migrate to Tailwind CSS 4.2 - @tailwindcss/vite plugin for zero-config build - @theme tokens: panel, canvas, border, hover, accent, surface, muted, input - All scoped CSS replaced with Tailwind utility classes - Only remaining scoped CSS: ColorPicker range slider thumbs - Removed conflicting * { padding: 0 } reset (Tailwind preflight handles it)
2026-02-27 21:54:38 +00:00
}
feat(app): add light theme setting
2026-04-30 12:52:59 +00:00
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;
fix(app): use theme warning colors
2026-04-30 13:18:43 +00:00
--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;
fix(app): theme remaining ui color tokens
2026-04-30 13:26:17 +00:00
--color-success: #15803d;
--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;
feat(app): add light theme setting
2026-04-30 12:52:59 +00:00
}
Migrate to Tailwind CSS 4.2 - @tailwindcss/vite plugin for zero-config build - @theme tokens: panel, canvas, border, hover, accent, surface, muted, input - All scoped CSS replaced with Tailwind utility classes - Only remaining scoped CSS: ColorPicker range slider thumbs - Removed conflicting * { padding: 0 } reset (Tailwind preflight handles it)
2026-02-27 21:54:38 +00:00
html,
body,
#app {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
Format codebase with oxfmt
2026-02-28 19:41:34 +00:00
font-family:
Inter,
system-ui,
-apple-system,
sans-serif;
Migrate to Tailwind CSS 4.2 - @tailwindcss/vite plugin for zero-config build - @theme tokens: panel, canvas, border, hover, accent, surface, muted, input - All scoped CSS replaced with Tailwind utility classes - Only remaining scoped CSS: ColorPicker range slider thumbs - Removed conflicting * { padding: 0 } reset (Tailwind preflight handles it)
2026-02-27 21:54:38 +00:00
font-size: 13px;
color: var(--color-surface);
background: var(--color-canvas);
user-select: none;
-webkit-user-select: none;
}
Move number input spinner hiding to global CSS
2026-02-28 19:39:33 +00:00
Format codebase with oxfmt
2026-02-28 19:41:34 +00:00
input[type='number'] {
Move number input spinner hiding to global CSS
2026-02-28 19:39:33 +00:00
appearance: textfield;
-moz-appearance: textfield;
}
Format codebase with oxfmt
2026-02-28 19:41:34 +00:00
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
Move number input spinner hiding to global CSS
2026-02-28 19:39:33 +00:00
display: none;
}
Reference in a new issue Copy permalink