Skip to content

C
chatbot-canifa-feedback
You need to sign in or sign up before continuing.
Commit c1f361ca authored by Hoanganhvu123's avatar Hoanganhvu123
Browse files
Options

UI: Refine Dashboard styling, fully integrate Memos-style flat UI and oklch palette

parent 853b7504
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 68 deletions
app/dashboard/src/layouts/DashboardLayout.vue
View file @ c1f361ca
...@@ -23,8 +23,9 @@ import { useDark, useToggle } from '@vueuse/core' ...@@ -23,8 +23,9 @@ import { useDark, useToggle } from '@vueuse/core'
const DISABLE_AUTH = import.meta.env.VITE_DISABLE_AUTH === 'true' const DISABLE_AUTH = import.meta.env.VITE_DISABLE_AUTH === 'true'
const route = useRoute() const route = useRoute()
// Default to LIGHT mode — set dark only if user explicitly toggled it // Force LIGHT mode as default — useDark expects string values internally
const isDark = useDark({ initialValue: false }) const isDark = useDark()
isDark.value = false // ← clear any cached dark from localStorage
const toggleDark = useToggle(isDark) const toggleDark = useToggle(isDark)
// ─── SVG Icon definitions ──────────────────────────── // ─── SVG Icon definitions ────────────────────────────
......
app/dashboard/src/style.css
View file @ c1f361ca
...@@ -63,72 +63,61 @@ ...@@ -63,72 +63,61 @@
══════════════════════════════════════════════════════════════════════════ */ ══════════════════════════════════════════════════════════════════════════ */
:root { :root {
color-scheme: light; color-scheme: light;
/* ── Page background: very subtle warm off-white ── */ /* ── Memos Note Platform Colors (oklch) ── */
--background: oklch(0.975 0.004 80); --background: oklch(0.9818 0.0054 95.0986);
--foreground: oklch(0.145 0.012 260); --foreground: oklch(0.2438 0.0269 95.7226);
--card: oklch(1 0 0);
/* ── Card: pure white with faint shadow-based depth ── */ --card-foreground: oklch(0.1908 0.002 106.5859);
--card: oklch(1.000 0.000 0); --popover: oklch(1 0 0);
--card-foreground: oklch(0.145 0.012 260); --popover-foreground: oklch(0.2671 0.0196 98.939);
/* ── Popover ── */ --primary: oklch(0.45 0.08 250);
--popover: oklch(1.000 0.000 0); --primary-foreground: oklch(0.9818 0.0054 95.0986);
--popover-foreground: oklch(0.145 0.012 260); --secondary: oklch(0.9245 0.0138 92.9892);
--secondary-foreground: oklch(0.4334 0.0177 98.6048);
/* ── Primary: Canifa Amber-Gold ── */ --muted: oklch(0.9341 0.0153 90.239);
--primary: oklch(0.680 0.165 55); /* rich amber */ --muted-foreground: oklch(0.5559 0.0075 97.4233);
--primary-foreground: oklch(0.980 0.005 80); --accent: oklch(0.9245 0.0138 92.9892);
--accent-foreground: oklch(0.2671 0.0196 98.939);
/* ── Secondary ── */
--secondary: oklch(0.960 0.006 248); --destructive: oklch(0.35 0.02 250);
--secondary-foreground: oklch(0.280 0.010 260); --destructive-foreground: oklch(0.95 0.005 250);
/* ── Muted: subtle grey fill ── */ --border: oklch(0.8847 0.0069 97.3627);
--muted: oklch(0.960 0.004 240); --input: oklch(0.7621 0.0156 98.3528);
--muted-foreground: oklch(0.520 0.012 258); --ring: oklch(0.45 0.08 250);
/* ── Accent: very light amber tint ── */ /* ── Sidebar ── */
--accent: oklch(0.955 0.018 80); --sidebar: oklch(0.9663 0.008 98.8792);
--accent-foreground: oklch(0.220 0.015 60); --sidebar-foreground: oklch(0.359 0.0051 106.6524);
--sidebar-primary: oklch(0.45 0.08 250);
/* ── Destructive: strong red ── */ --sidebar-primary-foreground: oklch(0.9818 0.0054 95.0986);
--destructive: oklch(0.577 0.245 27.3); --sidebar-accent: oklch(0.9245 0.0138 92.9892);
--destructive-foreground: oklch(0.980 0.005 0); --sidebar-accent-foreground: oklch(0.325 0 0);
--sidebar-border: oklch(0.9401 0 0);
/* ── Structural ── */ --sidebar-ring: oklch(0.7731 0 0);
--border: oklch(0.912 0.006 248);
--input: oklch(0.912 0.006 248); /* ── Radius & Spacing ── */
--ring: oklch(0.680 0.165 55); --radius: 0.5rem;
--spacing: 0.25rem;
/* ── Radius ── */
--radius: 0.625rem; /* ── Memos Distinct Flat Shadows ── */
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
/* ── Shadows (softer, more depth) ── */ --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-2xs: 0 1px 2px 0 hsl(215 16% 47% / 0.06); --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-xs: 0 1px 3px 0 hsl(215 16% 47% / 0.08), 0 1px 2px -1px hsl(215 16% 47% / 0.05); --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-sm: 0 1px 4px 0 hsl(215 16% 47% / 0.1), 0 1px 3px -1px hsl(215 16% 47% / 0.06); --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow: 0 2px 8px -2px hsl(215 16% 47% / 0.1), 0 1px 3px -1px hsl(215 16% 47% / 0.08); --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-md: 0 4px 12px -2px hsl(215 16% 47% / 0.1), 0 2px 6px -2px hsl(215 16% 47% / 0.08); --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-lg: 0 8px 24px -4px hsl(215 16% 47% / 0.12), 0 4px 10px -3px hsl(215 16% 47% / 0.08); --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
--shadow-xl: 0 16px 40px -6px hsl(215 16% 47% / 0.14), 0 8px 16px -5px hsl(215 16% 47% / 0.08);
--shadow-2xl: 0 30px 60px -12px hsl(215 16% 47% / 0.22);
/* ── Fonts ── */ /* ── Fonts ── */
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, --font-sans:
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
"Liberation Mono", "Courier New", monospace; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* ── Sidebar — clean white, shadcn/ui style ── */
--sidebar: oklch(0.992 0.002 240);
--sidebar-foreground: oklch(0.200 0.012 260);
--sidebar-primary: oklch(0.680 0.165 55);
--sidebar-primary-foreground: oklch(0.980 0.005 80);
--sidebar-accent: oklch(0.960 0.006 248);
--sidebar-accent-foreground: oklch(0.200 0.012 260);
--sidebar-border: oklch(0.920 0.006 248);
--sidebar-ring: oklch(0.680 0.165 55);
} }
/* ══════════════════════════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════════════════════════
...@@ -307,12 +296,20 @@ input:focus-visible, ...@@ -307,12 +296,20 @@ input:focus-visible,
textarea:focus-visible, textarea:focus-visible,
select:focus-visible { select:focus-visible {
outline: none; outline: none;
box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px oklch(0.680 0.165 55 / 0.4); box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
} }
/* ── Badge size fix ── */ /* ── Badge size fix ── */
.badge-xs { @apply text-[9px] px-1.5 py-0.5 leading-none font-bold uppercase tracking-wider rounded-full; } .badge-xs { @apply text-[9px] px-1.5 py-0.5 leading-none font-bold uppercase tracking-wider rounded-full; }
/* ── Memos Style: Form Transitions globally ── */
button, a, .section-menu-item {
transition: all 0.15s ease;
}
input, textarea, select, .search-bar input {
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* ── Fade transition for toasts / alerts ── */ /* ── Fade transition for toasts / alerts ── */
.fade-enter-active, .fade-leave-active { transition: opacity 0.25s, transform 0.25s; } .fade-enter-active, .fade-leave-active { transition: opacity 0.25s, transform 0.25s; }
.fade-enter-from { opacity: 0; transform: translateY(6px); } .fade-enter-from { opacity: 0; transform: translateY(6px); }
...@@ -320,9 +317,19 @@ select:focus-visible { ...@@ -320,9 +317,19 @@ select:focus-visible {
@layer base { @layer base {
* { * {
@apply border-border outline-ring/50; @apply border-border outline-none ring-0;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
/* ── Overriding scrollbar thumb properly for Hex variables ── */
::-webkit-scrollbar-thumb {
background: var(--input);
border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--muted-foreground);
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment