269 lines
6.3 KiB
CSS
269 lines
6.3 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@custom-variant dark (&:where(.app-dark, .app-dark *));
|
|
|
|
@theme {
|
|
/* Display = heavy geometric grotesque (DESIGN.md substitute for ABC Ginto Nord) */
|
|
--font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
--font-display: 'Hanken Grotesk', 'Inter', 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;
|
|
|
|
/* Cool indigo-tinted neutrals — remaps every slate-* utility */
|
|
--color-slate-50: #f6f7fb;
|
|
--color-slate-100: #eef0f7;
|
|
--color-slate-200: #dde0ed;
|
|
--color-slate-300: #c1c6dd;
|
|
--color-slate-400: #8e95b5;
|
|
--color-slate-500: #666d92;
|
|
--color-slate-600: #4a5177;
|
|
--color-slate-700: #2d3358;
|
|
--color-slate-800: #1e2353;
|
|
--color-slate-900: #141840;
|
|
--color-slate-950: #0a0d3a;
|
|
|
|
--shadow-subtle: rgba(69, 42, 124, 0.1) 0px 3px 34px;
|
|
--shadow-micro: rgba(20, 24, 64, 0.06) 0px 1px 3px;
|
|
}
|
|
|
|
:root {
|
|
--font-family: var(--font-sans);
|
|
--ink: #141840;
|
|
--ink-muted: #666d92;
|
|
--primary: #5865f2;
|
|
--magenta: #ec48bd;
|
|
--canvas: #f6f7fb;
|
|
--panel: #ffffff;
|
|
--hairline: #dde0ed;
|
|
--primary-soft: rgba(88, 101, 242, 0.12);
|
|
}
|
|
|
|
.app-dark {
|
|
--ink: #ffffff;
|
|
--ink-muted: #8e95b5;
|
|
--canvas: #0a0d3a;
|
|
--panel: #141840;
|
|
--hairline: #2d3358;
|
|
--primary-soft: rgba(123, 136, 245, 0.2);
|
|
}
|
|
|
|
@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: #0a0d3a;
|
|
--ck-color-base-border: #2d3358;
|
|
--ck-color-base-text: #ffffff;
|
|
--ck-color-text: #ffffff;
|
|
--ck-color-focus-border: #5865f2;
|
|
--ck-color-toolbar-background: #141840;
|
|
--ck-color-toolbar-border: #2d3358;
|
|
--ck-color-dropdown-panel-background: #141840;
|
|
--ck-color-panel-background: #141840;
|
|
--ck-color-panel-border: #2d3358;
|
|
--ck-color-button-default-hover-background: #2d3358;
|
|
--ck-color-button-default-active-background: #2d3358;
|
|
--ck-color-button-on-background: #2d3358;
|
|
--ck-color-input-background: #0a0d3a;
|
|
--ck-color-input-border: #2d3358;
|
|
--ck-color-input-text: #ffffff;
|
|
--ck-color-tooltip-background: #2d3358;
|
|
--ck-color-tooltip-text: #ffffff;
|
|
--ck-color-table-border: #4a5177;
|
|
--ck-color-link-default: #9ba6f8;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.field {
|
|
@apply mb-4;
|
|
}
|
|
|
|
.field > label {
|
|
@apply mb-1.5 block text-[13px] font-semibold uppercase tracking-[0.06em];
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.page-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(28px, 3vw, 38px);
|
|
font-weight: 800;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.02em;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.muted-note {
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
/* Eyebrow: small caps label above a title */
|
|
.eyebrow {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.table-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* Surface card used outside PrimeVue <Card> */
|
|
.panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--hairline);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.search-input.p-inputtext,
|
|
.search-input.p-select {
|
|
border-radius: 12px !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|