Projets/ObsiViewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: redesign editor buttons and improve scrollbar theming

Browse Source
This commit is contained in:
bruno
2025-10-21 22:32:54 -04:00
parent 0d0607577d
commit eeb957cf17
27 changed files with 739 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/_overlay-scrollbar.css
+26 -7
View File
@@ -5,10 +5,20 @@
/* ---------- Thèmes & variables ---------- */
:root {
/* Couleurs (clair) */
--ovsb-track-bg: rgba(15, 23, 42, 0.12);
--ovsb-thumb-bg: rgba(100, 116, 139, 0.55);
--ovsb-thumb-bg-active: rgba(59, 130, 246, 0.75);
/* Couleurs (clair) — alignées sur les tokens de thème */
/* Track très discret */
--ovsb-track-bg: color-mix(in oklab, var(--border, rgba(15,23,42,0.25)) 16%, transparent);
/* Pouce (thumb) subtil basé sur --scrollbar-thumb, avec légère teinte brand */
--ovsb-thumb-bg: color-mix(
in oklab,
var(--scrollbar-thumb, rgba(100,116,139,0.55)) 80%,
color-mix(in oklab, var(--brand, #64748b) 18%, transparent) 20%
);
--ovsb-thumb-bg-active: color-mix(
in oklab,
var(--scrollbar-thumb, rgba(100,116,139,0.55)) 65%,
color-mix(in oklab, var(--brand-700, var(--brand, #64748b)) 40%, transparent) 35%
);
/* Géométrie & transitions */
--ovsb-trans: 240ms ease;
@@ -27,9 +37,18 @@
.dark,
[data-theme="dark"] {
--ovsb-track-bg: rgba(148, 163, 184, 0.28);
--ovsb-thumb-bg: rgba(226, 232, 240, 0.72);
--ovsb-thumb-bg-active: rgba(241, 245, 249, 0.92);
/* Légèrement plus visible sur fond sombre mais toujours discret */
--ovsb-track-bg: color-mix(in oklab, var(--border, rgba(148,163,184,0.35)) 22%, transparent);
--ovsb-thumb-bg: color-mix(
in oklab,
var(--scrollbar-thumb, rgba(226,232,240,0.62)) 85%,
color-mix(in oklab, var(--brand-700, var(--brand, #94a3b8)) 24%, transparent) 15%
);
--ovsb-thumb-bg-active: color-mix(
in oklab,
var(--scrollbar-thumb, rgba(226,232,240,0.72)) 70%,
color-mix(in oklab, var(--brand-700, var(--brand, #94a3b8)) 45%, transparent) 30%
);
}
/* Reduced motion */
src/styles/themes.css
+212
View File
@@ -11,6 +11,9 @@
--transition-fast: 120ms ease;
--transition-slow: 200ms ease;
/* UI Font (fallback default) */
--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
/* Focus */
--focus-ring-size: 2px;
--focus-ring-offset: 2px;
@@ -87,6 +90,9 @@ html.dark[data-theme] {
html:not(.dark)[data-theme="light"] {
color-scheme: light;
/* Fonts — Pure White */
--font-ui: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
/* Backgrounds */
--bg: #ffffff;
--bg-main: #f7f7f7;
@@ -153,6 +159,9 @@ html:not(.dark)[data-theme="light"] {
html.dark[data-theme="dark"] {
color-scheme: dark;
/* Fonts — default dark */
--font-ui: "Segoe UI", Roboto, Arial, sans-serif;
/* Backgrounds */
--bg: #0b1220;
--bg-main: #111827;
@@ -218,12 +227,177 @@ html.dark[data-theme="dark"] {
--md-quote-bg: color-mix(in oklab, var(--surface-2) 88%, black 0%);
}
/* ============================================================================
THÈME BLUE - LIGHT
============================================================================ */
html:not(.dark)[data-theme="blue"] {
color-scheme: light;
/* Fonts — Blue */
--font-ui: "Segoe UI", Roboto, Arial, sans-serif;
/* Backgrounds */
--bg: #ffffff;
--bg-main: #f7faff;
--bg-muted: #eef2ff;
--card: #ffffff;
--card-bg: #ffffff;
--elevated: #ffffff;
--sidebar-bg: #f1f5ff;
--surface-1: #f1f5ff;
--surface-2: #e6edff;
/* Text */
--fg: #0f172a;
--text-main: #0f172a;
--text-muted: #475569;
--muted: #64748b;
/* Borders */
--border: #dbeafe;
/* Brand colors */
--primary: #2563eb;
--brand: #2563eb;
--brand-700: #1d4ed8;
--brand-800: #1e40af;
--secondary: #7c3aed;
--accent: #06b6d4;
/* Status */
--success: #16a34a;
--warning: #f59e0b;
--danger: #ef4444;
--info: #0ea5e9;
/* UI */
--chip-bg: #e2e8f0;
--link: #1d4ed8;
--link-hover: #1e40af;
--ring: #2563eb;
/* Shadows */
--shadow-color: rgba(15, 23, 42, 0.08);
--scrollbar-thumb: rgba(59, 130, 246, 0.35);
/* Editor */
--editor-bg: #ffffff;
--editor-fg: #0f172a;
--editor-selection: rgba(37, 99, 235, 0.2);
--editor-gutter-bg: #f1f5ff;
--editor-gutter-fg: #64748b;
--editor-cursor: #0f172a;
/* Markdown overrides */
--md-h1: #0f172a;
--md-h2: #1d4ed8;
--md-h3: #2563eb;
--md-h4: #7c3aed;
--md-h5: #475569;
--md-h6: #64748b;
--md-quote-bar: #2563eb;
--md-quote-bg: color-mix(in oklab, #e6edff 92%, white 0%);
--md-table-head-bg: color-mix(in oklab, #e6edff 90%, white 0%);
--md-table-row-alt: color-mix(in oklab, #f1f5ff 96%, white 0%);
--md-pre-bg: #f1f5ff;
--md-pre-border: #dbeafe;
--md-syntax-1: #ef4444;
--md-syntax-2: #7c3aed;
--md-syntax-3: #16a34a;
--md-syntax-4: #2563eb;
--md-syntax-5: #0f172a;
}
/* ============================================================================
THÈME BLUE - DARK
============================================================================ */
html.dark[data-theme="blue"] {
color-scheme: dark;
/* Fonts — Blue */
--font-ui: "Segoe UI", Roboto, Arial, sans-serif;
/* Backgrounds */
--bg: #0b1020;
--bg-main: #0b1020;
--bg-muted: #0f1a2e;
--card: #0f1a2e;
--card-bg: #0f1a2e;
--elevated: #112340;
--sidebar-bg: #0b1020;
--surface-1: #0b1020;
--surface-2: #0f1a2e;
/* Text */
--fg: #dbeafe;
--text-main: #dbeafe;
--text-muted: #93c5fd;
--muted: #93c5fd;
/* Borders */
--border: #1e3a8a;
/* Brand colors */
--primary: #3b82f6;
--brand: #3b82f6;
--brand-700: #1d4ed8;
--brand-800: #1e40af;
--secondary: #a78bfa;
--accent: #22d3ee;
/* Status */
--success: #22c55e;
--warning: #f59e0b;
--danger: #f87171;
--info: #93c5fd;
/* UI */
--chip-bg: #0f1a2e;
--link: #93c5fd;
--link-hover: #bfdbfe;
--ring: #3b82f6;
/* Shadows */
--shadow-color: rgba(0, 0, 0, 0.5);
--scrollbar-thumb: rgba(147, 197, 253, 0.35);
/* Editor */
--editor-bg: #0f1a2e;
--editor-fg: #dbeafe;
--editor-selection: rgba(59, 130, 246, 0.25);
--editor-gutter-bg: #0f1a2e;
--editor-gutter-fg: #93c5fd;
--editor-cursor: #dbeafe;
/* Markdown overrides */
--md-h1: #dbeafe;
--md-h2: #93c5fd;
--md-h3: #60a5fa;
--md-h4: #a78bfa;
--md-h5: #93c5fd;
--md-h6: #6ea8ff;
--md-quote-bar: #3b82f6;
--md-quote-bg: color-mix(in oklab, #0f1a2e 92%, black 0%);
--md-table-head-bg: color-mix(in oklab, #0f1a2e 90%, black 0%);
--md-table-row-alt: color-mix(in oklab, #0b1020 85%, black 0%);
--md-pre-bg: #0f1a2e;
--md-pre-border: #1e3a8a;
--md-syntax-1: #ff7b72;
--md-syntax-2: #d2a8ff;
--md-syntax-3: #a5d6ff;
--md-syntax-4: #79c0ff;
--md-syntax-5: #93c5fd;
}
/* ============================================================================
THÈME OBSIDIAN - LIGHT
============================================================================ */
html:not(.dark)[data-theme="obsidian"] {
color-scheme: light;
/* Fonts — Obsidian */
--font-ui: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
--bg: #fbfbfb;
--bg-main: #fafaf8;
--bg-muted: #f5f3ef;
@@ -291,6 +465,9 @@ html:not(.dark)[data-theme="obsidian"] {
html.dark[data-theme="obsidian"] {
color-scheme: dark;
/* Fonts — Obsidian */
--font-ui: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
--bg: #1b1b1b;
--bg-main: #1e1e1e;
--bg-muted: #252525;
@@ -360,6 +537,10 @@ html.dark[data-theme="obsidian"] {
html:not(.dark)[data-theme="nord"] {
color-scheme: light;
/* Fonts — Nord */
--font-ui: "Fira Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
--cm-font-family: "Fira Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
--bg: #eceff4;
--bg-main: #eceff4;
--bg-muted: #e5e9f0;
@@ -422,6 +603,10 @@ html:not(.dark)[data-theme="nord"] {
html.dark[data-theme="nord"] {
color-scheme: dark;
/* Fonts — Nord */
--font-ui: "Fira Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
--cm-font-family: "Fira Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
--bg: #2e3440;
--bg-main: #2e3440;
--bg-muted: #3b4252;
@@ -491,6 +676,9 @@ html.dark[data-theme="nord"] {
html:not(.dark)[data-theme="notion"] {
color-scheme: light;
/* Fonts — Notion */
--font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--bg: #ffffff;
--bg-main: #ffffff;
--bg-muted: #f7f7f5;
@@ -560,6 +748,9 @@ html:not(.dark)[data-theme="notion"] {
html.dark[data-theme="notion"] {
color-scheme: dark;
/* Fonts — Notion */
--font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--bg: #171717;
--bg-main: #171717;
--bg-muted: #1b1b1b;
@@ -629,6 +820,9 @@ html.dark[data-theme="notion"] {
html:not(.dark)[data-theme="github"] {
color-scheme: light;
/* Fonts — GitHub */
--font-ui: "Segoe UI", Arial, -apple-system, system-ui, sans-serif;
--bg: #ffffff;
--bg-main: #ffffff;
--bg-muted: #f6f8fa;
@@ -698,6 +892,9 @@ html:not(.dark)[data-theme="github"] {
html.dark[data-theme="github"] {
color-scheme: dark;
/* Fonts — GitHub */
--font-ui: "Segoe UI", Arial, -apple-system, system-ui, sans-serif;
--bg: #0d1117;
--bg-main: #0d1117;
--bg-muted: #161b22;
@@ -767,6 +964,9 @@ html.dark[data-theme="github"] {
html:not(.dark)[data-theme="discord"] {
color-scheme: light;
/* Fonts — Discord */
--font-ui: "gg sans", Whitney, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
--bg: #f6f7f9;
--bg-main: #f6f7f9;
--bg-muted: #eef0f5;
@@ -836,6 +1036,9 @@ html:not(.dark)[data-theme="discord"] {
html.dark[data-theme="discord"] {
color-scheme: dark;
/* Fonts — Discord */
--font-ui: "gg sans", Whitney, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
--bg: #2b2d31;
--bg-main: #2b2d31;
--bg-muted: #232428;
@@ -905,6 +1108,10 @@ html.dark[data-theme="discord"] {
html:not(.dark)[data-theme="monokai"] {
color-scheme: light;
/* Fonts — Monokai */
--font-ui: Menlo, Monaco, Consolas, "Fira Code", ui-monospace, monospace;
--cm-font-family: Menlo, Monaco, Consolas, "Fira Code", ui-monospace, monospace;
--bg: #fbfbf7;
--bg-main: #fbfbf7;
--bg-muted: #f2f2ea;
@@ -974,6 +1181,10 @@ html:not(.dark)[data-theme="monokai"] {
html.dark[data-theme="monokai"] {
color-scheme: dark;
/* Fonts — Monokai */
--font-ui: Menlo, Monaco, Consolas, "Fira Code", ui-monospace, monospace;
--cm-font-family: Menlo, Monaco, Consolas, "Fira Code", ui-monospace, monospace;
--bg: #272822;
--bg-main: #272822;
--bg-muted: #23241f;
@@ -1043,5 +1254,6 @@ html.dark[data-theme="monokai"] {
body {
background-color: var(--bg-main);
color: var(--text-main);
font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif);
transition: background-color var(--transition-base), color var(--transition-base);
}