316 lines
9.6 KiB
CSS
316 lines
9.6 KiB
CSS
@import "./rich-editor.css";
|
|
|
|
@plugin "@tailwindcss/typography";
|
|
@config "../tailwind.config.js";
|
|
|
|
@theme {
|
|
--font-sans: "Geist", "sans-serif";
|
|
--color-*: initial;
|
|
|
|
--color-black: #000000;
|
|
|
|
--color-level-0: #fffffb;
|
|
--color-level-1: #ffffff;
|
|
--color-level-2: #ffffff;
|
|
--color-level-3: #141e12;
|
|
|
|
/* Text colors */
|
|
--color-txt-primary: #141e12;
|
|
--color-invert: #fcfdfc;
|
|
--color-txt-invert: var(--color-invert);
|
|
--color-txt-secondary: #6b716a;
|
|
--color-txt-tertiary: #818780;
|
|
--color-txt-quaternary: #c3c8c2;
|
|
--color-txt-disabled: #000000;
|
|
--color-txt-accent: #93c926;
|
|
--color-txt-danger: #cd2b31;
|
|
--color-txt-success: #5d770d;
|
|
--color-txt-info: #006adc;
|
|
--color-txt-warning: #ad5700;
|
|
|
|
/* Backgrounds */
|
|
--color-primary: #141e12;
|
|
--color-invert: #ffffff;
|
|
--color-secondary: #ffffff;
|
|
--color-tertiary: #ffffff;
|
|
--color-subtle: #054d0507;
|
|
--color-highlight: #0027000d;
|
|
--color-active: #e4f7c7;
|
|
--color-accent: #141e12;
|
|
--color-danger: #ffefef;
|
|
--color-danger-plain: #dc3d43;
|
|
--color-danger-dark: #dc3d43;
|
|
--color-success: #eefadc;
|
|
--color-info: #edf6ff;
|
|
--color-warning: #fff4d5;
|
|
--color-dialog: #141e12;
|
|
|
|
/* Borders */
|
|
--color-border-solid: #ecefec;
|
|
--color-border-low: #022a0213;
|
|
--color-border-mid: #001a0027;
|
|
--color-border-strong: #051a013d;
|
|
--color-border-active: #141e12;
|
|
--color-border-accent: #93c926;
|
|
--color-border-danger: #dc3d43;
|
|
--color-border-success: #93c926;
|
|
--color-border-warning: #ffa01c;
|
|
--color-border-info: #0081f1;
|
|
|
|
/* Hover */
|
|
--color-primary-hover: #273025;
|
|
--color-invert-hover: #f8faf8;
|
|
--color-secondary-hover: #f8faf8;
|
|
--color-tertiary-hover: #054d0507;
|
|
--color-subtle-hover: #0027000d;
|
|
--color-highlight-hover: #022a0213;
|
|
--color-accent-hover: #1e2c1c;
|
|
--color-active-hover: #d7f2b0;
|
|
--color-danger-hover: #cf393f;
|
|
|
|
/* Pressed */
|
|
--color-primary-pressed: #30392e;
|
|
--color-invert-pressed: #f2f4f2;
|
|
--color-secondary-pressed: #f2f4f2;
|
|
--color-tertiary-pressed: #0027000d;
|
|
--color-subtle-pressed: #022a0213;
|
|
--color-highlight-pressed: #02210219;
|
|
--color-accent-pressed: #293a25;
|
|
--color-active-pressed: #c9e894;
|
|
--color-danger-pressed: #c6373c;
|
|
|
|
/* text-5xl */
|
|
--text-5xl: 3rem;
|
|
--text-5xl--line-height: 3rem;
|
|
--text-5xl--letter-spacing: -1.6px;
|
|
--text-5xl--font-weight: 600;
|
|
|
|
/* text-4xl */
|
|
--text-4xl: 2.25rem;
|
|
--text-4xl--line-height: 2.5rem;
|
|
--text-4xl--letter-spacing: -1.2px;
|
|
--text-4xl--font-weight: 600;
|
|
|
|
/* text-3xl */
|
|
--text-3xl: 1.875rem;
|
|
--text-3xl--line-height: 2.25rem;
|
|
--text-3xl--letter-spacing: -1px;
|
|
--text-3xl--font-weight: 600;
|
|
|
|
/* text-2xl */
|
|
--text-2xl: 1.5rem;
|
|
--text-2xl--line-height: 2rem;
|
|
--text-2xl--letter-spacing: -0.6px;
|
|
--text-2xl--font-weight: 600;
|
|
|
|
/* text-xl */
|
|
--text-xl: 1.25rem;
|
|
--text-xl--line-height: 1.75rem;
|
|
--text-xl--letter-spacing: -0.4px;
|
|
--text-xl--font-weight: 600;
|
|
|
|
/* text-xl-medium */
|
|
--text-xl-medium: 1.25rem;
|
|
--text-xl-medium--line-height: 1.75rem;
|
|
--text-xl-medium--letter-spacing: -0.4px;
|
|
--text-xl-medium--font-weight: 500;
|
|
|
|
/* text-lg */
|
|
--text-lg: 1.125rem;
|
|
--text-lg--line-height: 1.75rem;
|
|
--text-lg--letter-spacing: 0px;
|
|
--text-lg--font-weight: 400;
|
|
|
|
/* text-base */
|
|
--text-base: 1rem;
|
|
--text-base--line-height: 1.5rem;
|
|
--text-base--letter-spacing: 0px;
|
|
--text-base--font-weight: 400;
|
|
|
|
/* text-base-link */
|
|
--text-base-link: 1rem;
|
|
--text-base-link--line-height: 1.5rem;
|
|
--text-base-link--letter-spacing: 0px;
|
|
--text-base-link--font-weight: 400;
|
|
|
|
/* text-sm */
|
|
--text-sm: 0.875rem;
|
|
--text-sm--line-height: 1.25rem;
|
|
--text-sm--letter-spacing: 0px;
|
|
--text-sm--font-weight: 400;
|
|
|
|
/* text-sm-link */
|
|
--text-sm-link: 0.875rem;
|
|
--text-sm-link--line-height: 1.25rem;
|
|
--text-sm-link--letter-spacing: 0px;
|
|
--text-sm-link--font-weight: 500;
|
|
|
|
/* text-xs */
|
|
--text-xs: 0.75rem;
|
|
--text-xs--line-height: 1rem;
|
|
--text-xs--letter-spacing: 0px;
|
|
--text-xs--font-weight: 400;
|
|
|
|
/* text-xxs */
|
|
--text-xxs: 0.6875rem;
|
|
--text-xxs--line-height: 0.875rem;
|
|
--text-xxs--letter-spacing: 0px;
|
|
--text-xxs--font-weight: 400;
|
|
|
|
/* Shadows */
|
|
--shadow-*: initial;
|
|
--shadow-base:
|
|
0px 1px 3px 0px rgba(11, 19, 36, 0.1),
|
|
0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
|
|
--shadow-hover:
|
|
0px 2px 6px 0px rgba(11, 19, 36, 0.1),
|
|
0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
|
|
--shadow-focus: 0px 0px 0px 4px rgba(135, 190, 34, 0.5);
|
|
--shadow-mid:
|
|
0px 2px 4px 0px rgba(0, 0, 0, 0.08),
|
|
0px 2px 12px 0px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
@custom-variant document (&:where([data-theme=document] *));
|
|
|
|
@layer theme {
|
|
:root, :host {
|
|
@variant dark {
|
|
--color-level-0: #151715;
|
|
--color-level-1: #1a1d19;
|
|
--color-level-2: #20241f;
|
|
--color-level-3: #3b3f3a;
|
|
|
|
--color-black: #ffffff;
|
|
|
|
/* Text colors */
|
|
--color-txt-primary: #eceeec;
|
|
--color-invert: #151715;
|
|
--color-txt-invert: #fcfdfc;
|
|
--color-txt-secondary: #9aa299;
|
|
--color-txt-tertiary: #778175;
|
|
--color-txt-quaternary: #4c514b;
|
|
--color-txt-disabled: #3b3f3a;
|
|
--color-txt-accent: #c4f042;
|
|
--color-txt-danger: #ff6369;
|
|
--color-txt-success: rgba(181, 255, 44, 0.72);
|
|
--color-txt-info: #52a9ff;
|
|
--color-txt-warning: #f1a10d;
|
|
|
|
/* Backgrounds */
|
|
--color-primary: #c4f042;
|
|
--color-invert: #151715;
|
|
--color-secondary: rgba(214, 251, 196, 0.06);
|
|
--color-tertiary: rgba(255, 255, 255, 0);
|
|
--color-subtle: rgba(213, 254, 175, 0.03);
|
|
--color-highlight: rgba(214, 251, 196, 0.06);
|
|
--color-active: rgba(239, 254, 226, 0.08);
|
|
--color-accent: #c4f042;
|
|
--color-danger: rgba(254, 58, 61, 0.13);
|
|
--color-danger-plain: rgba(254, 58, 61, 0.13);
|
|
--color-danger-dark: rgba(255, 89, 95, 0.94);
|
|
--color-success: rgba(184, 253, 106, 0.06);
|
|
--color-info: rgba(22, 119, 254, 0.14);
|
|
--color-warning: rgba(254, 115, 0, 0.09);
|
|
--color-dialog: #151715;
|
|
|
|
/* Borders */
|
|
--color-border-solid: rgba(239, 254, 226, 0.08);
|
|
--color-border-low: rgba(239, 254, 226, 0.08);
|
|
--color-border-mid: rgba(233, 254, 223, 0.1);
|
|
--color-border-strong: rgba(241, 255, 237, 0.25);
|
|
--color-border-active: rgba(253, 255, 253, 0.93);
|
|
--color-border-accent: #c4f042;
|
|
--color-border-danger: #f2555a;
|
|
--color-border-success: #c4f042;
|
|
--color-border-warning: #ffcb47;
|
|
--color-border-info: #369eff;
|
|
|
|
/* Hover */
|
|
--color-primary-hover: rgba(196, 240, 66, 0.88);
|
|
--color-invert-hover: #1a1d19;
|
|
--color-secondary-hover: rgba(214, 251, 196, 0.06);
|
|
--color-tertiary-hover: rgba(213, 254, 175, 0.03);
|
|
--color-subtle-hover: rgba(214, 251, 196, 0.06);
|
|
--color-highlight-hover: rgba(233, 254, 223, 0.1);
|
|
--color-accent-hover: rgba(183, 255, 50, 0.82);
|
|
--color-active-hover: rgba(233, 254, 223, 0.1);
|
|
--color-danger-hover: rgba(254, 58, 61, 0.7);
|
|
|
|
/* Pressed */
|
|
--color-primary-pressed: rgba(196, 240, 66, 0.84);
|
|
--color-invert-pressed: #20241f;
|
|
--color-secondary-pressed: rgba(239, 254, 226, 0.08);
|
|
--color-tertiary-pressed: rgba(214, 251, 196, 0.06);
|
|
--color-subtle-pressed: rgba(239, 254, 226, 0.08);
|
|
--color-highlight-pressed: rgba(236, 254, 229, 0.13);
|
|
--color-accent-pressed: rgba(209, 255, 70, 0.94);
|
|
--color-active-pressed: rgba(236, 254, 229, 0.13);
|
|
--color-danger-pressed: rgba(254, 58, 61, 0.5);
|
|
}
|
|
}
|
|
|
|
* {
|
|
@variant document {
|
|
--text-4xl: 16pt;
|
|
--text-4xl--line-height: 21pt;
|
|
--text-4xl--letter-spacing: -0.6px;
|
|
--text-3xl: 15pt;
|
|
--text-3xl--line-height: 21pt;
|
|
--text-3xl--letter-spacing: -0.4px;
|
|
--text-2xl: 14pt;
|
|
--text-2xl--line-height: 21pt;
|
|
--text-2xl--letter-spacing: 0;
|
|
--text-xl: 13pt;
|
|
--text-xl--line-height: 18pt;
|
|
--text-xl--letter-spacing: 0;
|
|
--text-lg: 12pt;
|
|
--text-lg--line-height: 18pt;
|
|
--text-lg--letter-spacing: 0;
|
|
--text-base: 11pt;
|
|
--text-base--line-height: 18pt;
|
|
--text-base--letter-spacing: 0;
|
|
--text-sm: 10pt;
|
|
--text-sm--line-height: 15pt;
|
|
--text-sm--letter-spacing: 0;
|
|
--text-xs: 9pt;
|
|
--text-xs--line-height: 15pt;
|
|
--text-xs--letter-spacing: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
a:focus-visible,
|
|
button:focus-visible {
|
|
outline: none;
|
|
&:not(:hover) {
|
|
box-shadow: var(--shadow-focus);
|
|
}
|
|
}
|
|
|
|
button[data-cell]:focus-visible {
|
|
box-shadow: none;
|
|
outline: solid 2px rgba(135, 190, 34, 0.5);
|
|
}
|
|
|
|
/* Allow interpolation : https://developer.chrome.com/docs/css-ui/animate-to-height-auto */
|
|
:root {
|
|
interpolate-size: allow-keywords;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-level-1);
|
|
padding: 1px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-txt-tertiary);
|
|
border-radius: 4px;
|
|
}
|
|
|