mws/mws.frontend.vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ref: change ui

Browse Source
This commit is contained in:
namdh
2026-09-14 21:24:59 +07:00
parent 36860aec5f
commit a0dfb9399a
10 changed files with 326 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+78 -58
View File
@@ -3,9 +3,9 @@
@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;
/* 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;
@@ -51,42 +51,42 @@
--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;
/* 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(69, 42, 124, 0.1) 0px 3px 34px;
--shadow-micro: rgba(20, 24, 64, 0.06) 0px 1px 3px;
--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: #141840;
--ink-muted: #666d92;
--ink: #17181c;
--ink-muted: #6e6b66;
--primary: #5865f2;
--magenta: #ec48bd;
--canvas: #f6f7fb;
--canvas: #f8f7f4;
--panel: #ffffff;
--hairline: #dde0ed;
--primary-soft: rgba(88, 101, 242, 0.12);
--hairline: #e5e2db;
--primary-soft: rgba(88, 101, 242, 0.1);
}
.app-dark {
--ink: #ffffff;
--ink-muted: #8e95b5;
--canvas: #0a0d3a;
--panel: #141840;
--hairline: #2d3358;
--primary-soft: rgba(123, 136, 245, 0.2);
--ink: #f3f2ef;
--ink-muted: #a3a09a;
--canvas: #0e0f12;
--panel: #17191e;
--hairline: #2c2f36;
--primary-soft: rgba(123, 136, 245, 0.18);
}
@layer base {
@@ -174,25 +174,25 @@
}
.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-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: #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-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;
}
}
@@ -203,28 +203,28 @@
}
.field > label {
@apply mb-1.5 block text-[13px] font-semibold uppercase tracking-[0.06em];
@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(28px, 3vw, 38px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
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: 15px;
line-height: 1.5;
font-size: 14px;
line-height: 1.55;
color: var(--ink-muted);
}
.muted-note {
font-size: 13px;
line-height: 1.45;
line-height: 1.5;
color: var(--ink-muted);
}
@@ -232,16 +232,16 @@
.eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
}
.table-title {
font-family: var(--font-display);
font-size: 1.25rem;
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -0.01em;
letter-spacing: -0.015em;
color: var(--ink);
}
@@ -249,13 +249,33 @@
.panel {
background: var(--panel);
border: 1px solid var(--hairline);
border-radius: 16px;
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) {