1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5
20:root {
21
34 --background: 0.979 0.008 241.7;
35 --foreground: 0.2 0.023 246.4;
36 --card: 1 0 0;
37 --card-foreground: 0.2 0.023 246.4;
38 --popover: 1 0 0;
39 --popover-foreground: 0.2 0.023 246.4;
40 --primary: 0.554 0.143 249.3;
41 --primary-foreground: 1 0 0;
42 --secondary: 0.954 0.017 250.8;
43 --secondary-foreground: 0.2 0.023 246.4;
44 --muted: 0.958 0.013 248;
45 --muted-foreground: 0.513 0.03 244.8;
46 --accent: 0.919 0.021 248.1;
47 --accent-foreground: 0.2 0.023 246.4;
48 --destructive: 0.466 0.168 25.9;
49 --destructive-foreground: 1 0 0;
50 --border: 0.905 0.022 248;
51 --input: 0.905 0.022 248;
52 --ring: 0.653 0.141 240.6;
53 --radius: 0.5rem;
54
55
57 --factory-brand-blue: #2299dd;
58 --factory-brand-blue-deep: #1976c2;
59 --factory-brand-navy: #0d1720;
60 --factory-brand-navy-mid: #2e448d;
61 --factory-brand-red: #a31e21;
62 --factory-brand-gold: #ebb76a;
63 --factory-brand-coral: #ff6b4a;
64
65 --factory-brand-gradient: linear-gradient(135deg, #2299dd 0%, #2e448d 100%);
66
67 --factory-brand-gradient-soft: linear-gradient(
68 135deg,
69 #e8f1fb 0%,
70 #f4f9fd 55%,
71 #f7dfdf 100%
72 );
73
74 --factory-code-bg: oklch(0.21 0.018 265.6);
75 --factory-code-fg: oklch(0.93 0.012 264);
76
77 --factory-code-font-size: 13px;
78
81 --factory-code-comment: oklch(0.64 0.03 250);
82 --factory-code-keyword: oklch(0.74 0.15 250);
83 --factory-code-function: oklch(0.76 0.15 295);
84 --factory-code-string: oklch(0.8 0.15 152);
85 --factory-code-number: oklch(0.82 0.13 80);
86 --factory-code-constant: oklch(0.74 0.18 35);
87 --factory-code-operator: oklch(0.8 0.05 250);
88 --factory-code-variable: oklch(0.78 0.13 215);
89 --factory-code-punctuation: oklch(0.78 0.02 250);
90 --factory-code-property: oklch(0.78 0.11 210);
91 --factory-code-class-name: oklch(0.83 0.11 90);
92 --factory-code-tag: oklch(0.74 0.15 250);
93
94
95 --factory-color-gray: oklch(0.553 0.016 285.938);
96 --factory-color-brown: oklch(0.588 0.128 61.038);
97 --factory-color-orange: oklch(0.705 0.213 48.029);
98 --factory-color-yellow: oklch(0.828 0.169 87.152);
99 --factory-color-green: oklch(0.723 0.192 149.579);
100 --factory-color-blue: oklch(0.623 0.188 259.815);
101 --factory-color-purple: oklch(0.627 0.192 294.588);
102 --factory-color-pink: oklch(0.718 0.183 3.855);
103 --factory-color-red: oklch(0.592 0.249 25.768);
104
105 --factory-color-gray_bg: oklch(0.963 0.003 286.358);
106 --factory-color-brown_bg: oklch(0.942 0.028 66.205);
107 --factory-color-orange_bg: oklch(0.965 0.019 52.759);
108 --factory-color-yellow_bg: oklch(0.967 0.036 101.928);
109 --factory-color-green_bg: oklch(0.958 0.032 156.209);
110 --factory-color-blue_bg: oklch(0.943 0.028 262.992);
111 --factory-color-purple_bg: oklch(0.949 0.031 294.114);
112 --factory-color-pink_bg: oklch(0.955 0.025 2.134);
113 --factory-color-red_bg: oklch(0.954 0.028 25.631);
114}
115
116.dark {
117
121 --background: 0.2 0.023 246.4;
122 --foreground: 0.964 0.01 247.9;
123 --card: 0.238 0.027 246.9;
124 --card-foreground: 0.964 0.01 247.9;
125 --popover: 0.238 0.027 246.9;
126 --popover-foreground: 0.964 0.01 247.9;
127 --primary: 0.653 0.141 240.6;
128 --primary-foreground: 0.2 0.023 246.4;
129 --secondary: 0.263 0.033 249.2;
130 --secondary-foreground: 0.964 0.01 247.9;
131 --muted: 0.247 0.029 249;
132 --muted-foreground: 0.719 0.033 243.9;
133 --accent: 0.312 0.044 245.9;
134 --accent-foreground: 0.964 0.01 247.9;
135 --destructive: 0.674 0.214 23.3;
136 --destructive-foreground: 0.985 0.002 247.839;
137
142 --border: 0.329 0.042 249.2;
143 --input: 0.329 0.042 249.2;
144 --ring: 0.653 0.141 240.6;
145
146 --factory-code-bg: oklch(0.183 0.021 249);
147 --factory-code-fg: oklch(0.92 0.012 264);
148}
149
150@layer base {
151 * {
152 @apply border-border;
153 }
154 html {
155 @apply scroll-smooth;
156 }
157 body {
158 @apply bg-background text-foreground antialiased;
159 font-feature-settings: "cv02", "cv03", "cv04", "cv11";
160 }
161 ::selection {
162 @apply bg-ring/20;
163 }
164}
165
166
167* {
168 scrollbar-width: thin;
169 scrollbar-color: oklch(var(--muted-foreground) / 0.35) transparent;
170}
171*::-webkit-scrollbar {
172 width: 8px;
173 height: 8px;
174}
175*::-webkit-scrollbar-thumb {
176 background: oklch(var(--muted-foreground) / 0.35);
177 border-radius: 4px;
178}
179*::-webkit-scrollbar-thumb:hover {
180 background: oklch(var(--muted-foreground) / 0.55);
181}
182*::-webkit-scrollbar-track {
183 background: transparent;
184}
185
186
189.editor-page {
190 min-height: calc(100vh - 3.5rem);
191 padding-top: 2.5rem;
192}
193
194.block-row {
195
200 @apply relative -mx-8 px-8 transition-colors duration-75;
201}
202.block-row:hover {
203 @apply bg-accent/40;
204}
205.block-row.is-selected {
206 @apply bg-accent ring-1 ring-ring/40 rounded-sm;
207}
208
211.block-row.is-multi-selected {
212 @apply bg-primary/10 ring-1 ring-primary/50 rounded-sm;
213}
214
215
216.block-focus-flash {
217 animation: block-focus-flash 1.6s ease-out;
218}
219@keyframes block-focus-flash {
220 0% {
221 background-color: oklch(var(--ring) / 0.25);
222 }
223 100% {
224 background-color: transparent;
225 }
226}
227
228.editor-content {
229 @apply outline-none text-foreground;
230 min-height: 1.5em;
231
234 font-size: 14.5px;
235
238 overflow-wrap: break-word;
239}
240.editor-content p.is-editor-empty:first-child::before {
241 content: attr(data-placeholder);
242 @apply pointer-events-none float-left h-0 text-muted-foreground;
243}
244.editor-content ul {
245 @apply list-disc pl-6;
246}
247.editor-content ol {
248 @apply list-decimal pl-6;
249}
250.editor-content code {
251 @apply rounded bg-muted px-1.5 py-0.5 font-mono text-[0.875em];
252}
253.editor-content pre {
254 @apply my-2 overflow-x-auto rounded-md p-3 font-mono text-[13px] leading-relaxed;
255 background: var(--factory-code-bg);
256 color: var(--factory-code-fg);
257}
258.editor-content pre code {
259 @apply bg-transparent p-0 text-inherit;
260}
261
262
268.factory-codeblock code {
269 color: var(--factory-code-fg);
270}
271.factory-codeblock .token.comment,
272.factory-codeblock .token.prolog,
273.factory-codeblock .token.doctype,
274.factory-codeblock .token.cdata {
275 color: var(--factory-code-comment);
276 font-style: italic;
277}
278.factory-codeblock .token.punctuation {
279 color: var(--factory-code-punctuation);
280}
281.factory-codeblock .token.namespace {
282 opacity: 0.7;
283}
284.factory-codeblock .token.property,
285.factory-codeblock .token.tag,
286.factory-codeblock .token.constant,
287.factory-codeblock .token.symbol,
288.factory-codeblock .token.deleted {
289 color: var(--factory-code-constant);
290}
291.factory-codeblock .token.boolean,
292.factory-codeblock .token.number {
293 color: var(--factory-code-number);
294}
295.factory-codeblock .token.selector,
296.factory-codeblock .token.attr-name,
297.factory-codeblock .token.string,
298.factory-codeblock .token.char,
299.factory-codeblock .token.builtin,
300.factory-codeblock .token.inserted {
301 color: var(--factory-code-string);
302}
303.factory-codeblock .token.operator,
304.factory-codeblock .token.entity,
305.factory-codeblock .token.url {
306 color: var(--factory-code-operator);
307}
308.factory-codeblock .token.atrule,
309.factory-codeblock .token.attr-value,
310.factory-codeblock .token.keyword {
311 color: var(--factory-code-keyword);
312}
313.factory-codeblock .token.function,
314.factory-codeblock .token.class-name {
315 color: var(--factory-code-function);
316}
317.factory-codeblock .token.regex,
318.factory-codeblock .token.important,
319.factory-codeblock .token.variable {
320 color: var(--factory-code-variable);
321}
322.editor-content a {
323 @apply cursor-pointer text-blue-600 underline decoration-blue-600/50 underline-offset-2 hover:decoration-blue-600 dark:text-blue-400;
324}
325.editor-content table {
326 @apply w-full border-collapse;
327}
328.editor-content img {
329 @apply max-w-full rounded-md;
330}
331
332
333.editor-content ul[data-type="taskList"] {
334 @apply list-none pl-1;
335}
336.editor-content ul[data-type="taskList"] li {
337 @apply flex gap-2;
338}
339.editor-content ul[data-type="taskList"] li > label {
340 @apply mt-1.5 flex shrink-0;
341}
342.editor-content ul[data-type="taskList"] li > label input[type="checkbox"] {
343 @apply size-4 cursor-pointer rounded border-border accent-[oklch(var(--ring))];
344}
345.editor-content ul[data-type="taskList"] li[data-checked="true"] > div {
346 @apply text-muted-foreground line-through;
347}
348
349
350:focus-visible {
351 @apply outline-none ring-2 ring-ring/60 ring-offset-1 ring-offset-background rounded-sm;
352}
353
354
355@media (prefers-reduced-motion: reduce) {
356 *,
357 *::before,
358 *::after {
359 animation-duration: 0.01ms !important;
360 transition-duration: 0.01ms !important;
361 }
362}
363
364
365.wb-tool {
366 @apply rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-muted;
367}
368.wb-tool.active {
369 @apply bg-primary/10 text-foreground;
370}
371