feat: update UI
This commit is contained in:
+221
-32
@@ -2,29 +2,166 @@
|
||||
|
||||
@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, Inter, 'Segoe UI', Roboto, Arial, sans-serif);
|
||||
background: #f5f7fa;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.app-dark body {
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
font-family: var(--font-family);
|
||||
background: var(--canvas);
|
||||
color: var(--ink);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3b82f6;
|
||||
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: 400px;
|
||||
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,
|
||||
@@ -37,26 +174,26 @@
|
||||
}
|
||||
|
||||
.app-dark .ck.ck-editor {
|
||||
--ck-color-base-background: #0f172a;
|
||||
--ck-color-base-border: #334155;
|
||||
--ck-color-base-text: #e2e8f0;
|
||||
--ck-color-text: #e2e8f0;
|
||||
--ck-color-focus-border: #3b82f6;
|
||||
--ck-color-toolbar-background: #1e293b;
|
||||
--ck-color-toolbar-border: #334155;
|
||||
--ck-color-dropdown-panel-background: #1e293b;
|
||||
--ck-color-panel-background: #1e293b;
|
||||
--ck-color-panel-border: #334155;
|
||||
--ck-color-button-default-hover-background: #334155;
|
||||
--ck-color-button-default-active-background: #334155;
|
||||
--ck-color-button-on-background: #334155;
|
||||
--ck-color-input-background: #0f172a;
|
||||
--ck-color-input-border: #334155;
|
||||
--ck-color-input-text: #e2e8f0;
|
||||
--ck-color-tooltip-background: #334155;
|
||||
--ck-color-tooltip-text: #e2e8f0;
|
||||
--ck-color-table-border: #475569;
|
||||
--ck-color-link-default: #60a5fa;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,6 +203,58 @@
|
||||
}
|
||||
|
||||
.field > label {
|
||||
@apply mb-1.5 block text-sm font-medium;
|
||||
@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);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user