187 lines
4.6 KiB
CSS
187 lines
4.6 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@iconify/tailwind4" {
|
|
prefix: "i";
|
|
}
|
|
|
|
@source inline("{hover:,}{bg-,outline-,text-,}layer-0");
|
|
@source inline("{hover:,}{bg-,outline-,text-,}layer-1");
|
|
@source inline("{hover:,}{bg-,outline-,text-,}layer-2");
|
|
@source inline("{hover:,}{bg-,outline-,text-,}layer-3");
|
|
@source inline("{hover:,}{bg-,outline-,text-,}active");
|
|
@source inline("{hover:,}{bg-,outline-,text-,}selected");
|
|
@source inline("{hover:,}{bg-,outline-,text-,}outline{!,}");
|
|
@source inline("{hover:,}{bg-,outline-,text-,}connection");
|
|
@source inline("{hover:,}{bg-,outline-,text-,}text");
|
|
|
|
/* fira-code-300 - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: "Fira Code";
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: url("/fonts/fira-code-v22-latin-300.woff2") format("woff2");
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* fira-code-600 - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: "Fira Code";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url("/fonts/fira-code-v22-latin-600.woff2") format("woff2");
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
:root {
|
|
--font-family: "Fira Code", monospace;
|
|
font-family: var(--font-family);
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 4px;
|
|
/* Extra small spacing */
|
|
--spacing-sm: 8px;
|
|
/* Small spacing */
|
|
--spacing-md: 16px;
|
|
/* Medium spacing */
|
|
--spacing-lg: 24px;
|
|
/* Large spacing */
|
|
--spacing-xl: 32px;
|
|
/* Extra large spacing */
|
|
}
|
|
|
|
@theme {
|
|
--color-neutral-100: #e7e7e7;
|
|
--color-neutral-200: #cecece;
|
|
--color-neutral-300: #7c7c7c;
|
|
--color-neutral-400: #2d2d2d;
|
|
--color-neutral-500: #171717;
|
|
--color-neutral-800: #111111;
|
|
--color-neutral-900: #060606;
|
|
|
|
--color-layer-0: var(--neutral-900);
|
|
--color-layer-1: var(--neutral-500);
|
|
--color-layer-2: var(--neutral-400);
|
|
--color-layer-3: var(--neutral-200);
|
|
|
|
--color-active: #ffffff;
|
|
--color-selected: #c65a19;
|
|
|
|
--color-outline: var(--neutral-400);
|
|
--color-connection: #333333;
|
|
|
|
--color-text: var(--neutral-200);
|
|
}
|
|
|
|
html {
|
|
--neutral-050: #f0f0f0;
|
|
--neutral-100: #e7e7e7;
|
|
--neutral-200: #cecece;
|
|
--neutral-300: #7c7c7c;
|
|
--neutral-400: #2d2d2d;
|
|
--neutral-500: #171717;
|
|
--neutral-800: #111111;
|
|
--neutral-900: #060606;
|
|
|
|
--color-layer-0: var(--neutral-900);
|
|
--color-layer-1: var(--neutral-500);
|
|
--color-layer-2: var(--neutral-400);
|
|
--color-layer-3: var(--neutral-300);
|
|
|
|
--color-active: #ffffff;
|
|
--color-selected: #c65a19;
|
|
|
|
--color-outline: #3e3e3e;
|
|
--color-connection: #333333;
|
|
|
|
--color-text-color: var(--neutral-200);
|
|
}
|
|
|
|
body {
|
|
color: var(--color-text);
|
|
background-color: var(--color-layer-0);
|
|
margin: 0;
|
|
}
|
|
|
|
html.theme-light {
|
|
--color-text: var(--neutral-800);
|
|
--color-outline: var(--neutral-300);
|
|
--color-layer-0: var(--neutral-050);
|
|
--color-layer-1: var(--neutral-100);
|
|
--color-layer-2: var(--neutral-200);
|
|
--color-layer-3: var(--neutral-300);
|
|
--color-active: #000000;
|
|
--color-selected: #c65a19;
|
|
--color-connection: #888;
|
|
}
|
|
|
|
html.theme-solarized {
|
|
--color-text: #425055;
|
|
--color-outline: #93a1a1;
|
|
--color-layer-0: #fdf6e3;
|
|
--color-layer-1: #eee8d5;
|
|
--color-layer-2: #c4c0b4;
|
|
--color-layer-3: #586e75;
|
|
--color-active: #000000;
|
|
--color-selected: #268bd2;
|
|
--color-connection: #839496;
|
|
}
|
|
|
|
html.theme-catppuccin {
|
|
--color-text: #cdd6f4;
|
|
--color-outline: #3e3e4f;
|
|
--color-layer-3: #a8aac8;
|
|
--color-layer-2: #313244;
|
|
--color-layer-1: #1e1e2e;
|
|
--color-layer-0: #11111b;
|
|
--color-connection: #444459;
|
|
}
|
|
|
|
html.theme-high-contrast {
|
|
--color-text: white;
|
|
--color-outline: white;
|
|
--color-layer-0: black;
|
|
--color-layer-1: black;
|
|
--color-layer-2: black;
|
|
--color-layer-3: white;
|
|
--color-active: #00ff00;
|
|
--color-selected: #ff0000;
|
|
--color-connection: #fff;
|
|
}
|
|
|
|
html.theme-high-contrast-light {
|
|
--color-text: black;
|
|
--color-outline: black;
|
|
--color-layer-0: white;
|
|
--color-layer-1: white;
|
|
--color-layer-2: white;
|
|
--color-layer-3: black;
|
|
--color-active: #00ffff;
|
|
--color-selected: #ff0000;
|
|
--color-connection: black;
|
|
}
|
|
|
|
html.theme-nord {
|
|
--color-text: #d8dee9;
|
|
--color-outline: #4c566a;
|
|
--color-layer-0: #2e3440;
|
|
--color-layer-1: #3b4252;
|
|
--color-layer-2: #434c5e;
|
|
--color-layer-3: #5e81ac;
|
|
--color-active: #8999bd;
|
|
--color-selected: #b76c3f;
|
|
--color-connection: #4c566a;
|
|
}
|
|
|
|
html.theme-dracula {
|
|
--color-text: #f8f8f2;
|
|
--color-outline: #6272a4;
|
|
--color-layer-0: #282a36;
|
|
--color-layer-1: #44475a;
|
|
--color-layer-2: #32374d;
|
|
--color-layer-3: #bd93f9;
|
|
--color-connection: #6272a4;
|
|
}
|