289 lines
6.8 KiB
CSS
289 lines
6.8 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@custom-variant dark (&:where(.app-dark, .app-dark *));
|
|
|
|
@theme {
|
|
/* Display = Bricolage Grotesque (characterful grotesque), body = IBM Plex Sans */
|
|
--font-sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
--font-display: 'Bricolage Grotesque', 'IBM Plex Sans', Helvetica, Arial, sans-serif;
|
|
|
|
/* Blurple — brand primary, remaps every indigo-* utility */
|
|
--color-indigo-50: #eef0fe;
|
|
--color-indigo-100: #dfe3fd;
|
|
--color-indigo-200: #c3cafb;
|
|
--color-indigo-300: #9ba6f8;
|
|
--color-indigo-400: #7b88f5;
|
|
--color-indigo-500: #5865f2;
|
|
--color-indigo-600: #4551e0;
|
|
--color-indigo-700: #3742b8;
|
|
--color-indigo-800: #29328c;
|
|
--color-indigo-900: #1e2353;
|
|
--color-indigo-950: #0a0d3a;
|
|
|
|
/* Legacy purple-* aliases → Blurple, so untouched views follow the brand */
|
|
--color-purple-50: #eef0fe;
|
|
--color-purple-100: #dfe3fd;
|
|
--color-purple-200: #c3cafb;
|
|
--color-purple-300: #9ba6f8;
|
|
--color-purple-400: #7b88f5;
|
|
--color-purple-500: #5865f2;
|
|
--color-purple-600: #4551e0;
|
|
--color-purple-700: #3742b8;
|
|
--color-purple-800: #29328c;
|
|
--color-purple-900: #1e2353;
|
|
--color-purple-950: #0a0d3a;
|
|
|
|
/* Magenta — the playful counterweight (badges, folder marks, focus art) */
|
|
--color-fuchsia-400: #f26bcb;
|
|
--color-fuchsia-500: #ec48bd;
|
|
--color-fuchsia-600: #d32ba1;
|
|
|
|
/* Electric green — highest-intent only */
|
|
--color-green-50: #e8fdf1;
|
|
--color-green-100: #c7f9dd;
|
|
--color-green-200: #8df3bb;
|
|
--color-green-300: #56ef9c;
|
|
--color-green-400: #35ed7e;
|
|
--color-green-500: #1cc963;
|
|
--color-green-600: #14a151;
|
|
--color-green-700: #0f7c3f;
|
|
--color-green-800: #0b562d;
|
|
--color-green-900: #073a1f;
|
|
--color-green-950: #042313;
|
|
|
|
/* Warm neutral stones — remaps every slate-* utility (no indigo tint) */
|
|
--color-slate-50: #f8f7f4;
|
|
--color-slate-100: #f0eee9;
|
|
--color-slate-200: #e5e2db;
|
|
--color-slate-300: #cfcbc2;
|
|
--color-slate-400: #a3a09a;
|
|
--color-slate-500: #6e6b66;
|
|
--color-slate-600: #52504c;
|
|
--color-slate-700: #3b3a37;
|
|
--color-slate-800: #26262a;
|
|
--color-slate-900: #17181c;
|
|
--color-slate-950: #0e0f12;
|
|
|
|
--shadow-subtle: rgba(28, 25, 20, 0.08) 0 8px 32px;
|
|
--shadow-micro: rgba(28, 25, 20, 0.05) 0 1px 2px;
|
|
}
|
|
|
|
:root {
|
|
--font-family: var(--font-sans);
|
|
--ink: #17181c;
|
|
--ink-muted: #6e6b66;
|
|
--primary: #5865f2;
|
|
--magenta: #ec48bd;
|
|
--canvas: #f8f7f4;
|
|
--panel: #ffffff;
|
|
--hairline: #e5e2db;
|
|
--primary-soft: rgba(88, 101, 242, 0.1);
|
|
}
|
|
|
|
.app-dark {
|
|
--ink: #f3f2ef;
|
|
--ink-muted: #a3a09a;
|
|
--canvas: #0e0f12;
|
|
--panel: #17191e;
|
|
--hairline: #2c2f36;
|
|
--primary-soft: rgba(123, 136, 245, 0.18);
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
font-family: var(--font-family);
|
|
background: var(--canvas);
|
|
color: var(--ink);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
#app {
|
|
height: 100dvh;
|
|
}
|
|
|
|
a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* CKEditor: fill its container, no fixed height */
|
|
.ck.ck-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.ck.ck-editor__main {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.ck-editor__editable {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.ck.ck-editor__editable_inline {
|
|
width: 100% !important;
|
|
padding: 20px !important;
|
|
border: 1px solid var(--hairline) !important;
|
|
border-radius: 0 0 12px 12px !important;
|
|
}
|
|
|
|
.ck.ck-toolbar {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.ck.ck-editor__editable_inline.ck-focused {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* No max-width here: CKEditor puts this class on the live editable too — capping
|
|
it would re-center and narrow the edit area. Read-view width lives on .document-content. */
|
|
.ck-content {
|
|
font-size: 16px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.ck-content h2 {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ck-content h3,
|
|
.ck-content h4 {
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ck-content ol,
|
|
.ck-content ul {
|
|
padding-inline-start: 40px;
|
|
}
|
|
|
|
.ck-content li {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.app-dark .ck.ck-editor {
|
|
--ck-color-base-background: #0e0f12;
|
|
--ck-color-base-border: #2c2f36;
|
|
--ck-color-base-text: #f3f2ef;
|
|
--ck-color-text: #f3f2ef;
|
|
--ck-color-focus-border: #5865f2;
|
|
--ck-color-toolbar-background: #17191e;
|
|
--ck-color-toolbar-border: #2c2f36;
|
|
--ck-color-dropdown-panel-background: #17191e;
|
|
--ck-color-panel-background: #17191e;
|
|
--ck-color-panel-border: #2c2f36;
|
|
--ck-color-button-default-hover-background: #2c2f36;
|
|
--ck-color-button-default-active-background: #2c2f36;
|
|
--ck-color-button-on-background: #2c2f36;
|
|
--ck-color-input-background: #0e0f12;
|
|
--ck-color-input-border: #2c2f36;
|
|
--ck-color-input-text: #f3f2ef;
|
|
--ck-color-tooltip-background: #2c2f36;
|
|
--ck-color-tooltip-text: #f3f2ef;
|
|
--ck-color-table-border: #52504c;
|
|
--ck-color-link-default: #9ba6f8;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.field {
|
|
@apply mb-4;
|
|
}
|
|
|
|
.field > label {
|
|
@apply mb-1.5 block text-[12px] font-semibold uppercase tracking-[0.08em];
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.page-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(26px, 2.6vw, 36px);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.025em;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.muted-note {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
/* Eyebrow: small caps label above a title */
|
|
.eyebrow {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.table-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.0625rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* Surface card used outside PrimeVue <Card> */
|
|
.panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--hairline);
|
|
border-radius: 14px;
|
|
box-shadow: var(--shadow-micro);
|
|
}
|
|
|
|
/* Table headers read as quiet eyebrows, not rows of body text */
|
|
.p-datatable .p-datatable-header-cell,
|
|
.p-treetable .p-treetable-header-cell {
|
|
text-transform: uppercase;
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.search-input.p-inputtext,
|
|
.search-input.p-select {
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
/* Numeric columns line up table to table */
|
|
.p-datatable-table,
|
|
.p-treetable-table {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Restrained "blurple" is an accent, not a wash */
|
|
::selection {
|
|
background: var(--primary-soft);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|