feat: migrer custom_views.css vers système variables CSS thème sémantiques avec tokens dédiés (--special-view-panel-bg/--special-view-border/--special-view-divider/--special-view-shadow/--special-view-muted/--special-view-strong/--special-view-chip-*), suppression hardcoded colors/backgrounds dark mode au profit color-mix() dynamiques, refactoring styles notes/todos avec border-radius unifiés (12-14px), nettoyage code dupliqué (note-input-collapsed, sidebar styles), et amélioration cohérence vis

This commit is contained in:
Bruno Charest 2026-04-20 14:37:10 -04:00
parent bf1c2c6172
commit 561249ba06
2 changed files with 102 additions and 2617 deletions

File diff suppressed because it is too large Load Diff

View File

@ -49,6 +49,12 @@
--overlay-bg: rgba(0, 0, 0, 0.5); --overlay-bg: rgba(0, 0, 0, 0.5);
--selection-bg: rgba(239, 68, 68, 0.15); --selection-bg: rgba(239, 68, 68, 0.15);
--selection-border: #ef4444; --selection-border: #ef4444;
--surface-frosted: color-mix(in srgb, var(--bg-card) 85%, transparent);
--surface-soft: color-mix(in srgb, var(--bg-card) 92%, var(--bg-body));
--chip-border-color: color-mix(in srgb, var(--primary) 30%, transparent);
--chip-hover-bg: color-mix(in srgb, var(--primary) 18%, transparent);
--focus-ring-color: color-mix(in srgb, var(--primary) 35%, transparent);
} }
[data-theme="dark"] { [data-theme="dark"] {
@ -89,6 +95,13 @@
--overlay-bg: rgba(0, 0, 0, 0.7); --overlay-bg: rgba(0, 0, 0, 0.7);
--selection-bg: rgba(239, 68, 68, 0.25); --selection-bg: rgba(239, 68, 68, 0.25);
--selection-border: #ef4444;
--surface-frosted: color-mix(in srgb, var(--bg-card) 85%, transparent);
--surface-soft: color-mix(in srgb, var(--bg-card) 92%, #0a0f1e);
--chip-border-color: color-mix(in srgb, var(--primary) 45%, transparent);
--chip-hover-bg: color-mix(in srgb, var(--primary) 28%, transparent);
--focus-ring-color: color-mix(in srgb, var(--primary) 45%, transparent);
} }
/* ===== Reset & Base ===== */ /* ===== Reset & Base ===== */
@ -3345,7 +3358,7 @@ select:focus {
} }
.page-edit .bookmark-editor-sublabel a { .page-edit .bookmark-editor-sublabel a {
color: #8fb8ff; color: color-mix(in srgb, var(--primary) 70%, #ffffff);
} }
.page-edit .toastui-editor-defaultUI, .page-edit .toastui-editor-defaultUI,
@ -3353,31 +3366,24 @@ select:focus {
.page-edit .toastui-editor-ww-container, .page-edit .toastui-editor-ww-container,
.page-edit .toastui-editor-toolbar, .page-edit .toastui-editor-toolbar,
.page-edit .toastui-editor-mode-switch { .page-edit .toastui-editor-mode-switch {
background: var(--bookmark-input-bg); background: var(--toastui-panel-surface);
} color: var(--bookmark-text-main);
border-color: var(--toastui-border);
.page-edit .toastui-editor-defaultUI {
border: 0;
} }
.page-edit .toastui-editor-toolbar { .page-edit .toastui-editor-toolbar {
border-bottom: 1px solid var(--bookmark-input-border); border-bottom: 1px solid var(--toastui-border);
box-shadow: inset 0 -1px 0 var(--toastui-border);
} }
.page-edit .toastui-editor-toolbar button { .page-edit .toastui-editor-toolbar button {
border: 0; color: var(--bookmark-text-main);
background-color: transparent;
box-shadow: none;
} }
.page-edit .toastui-editor-toolbar button:hover, .page-edit .toastui-editor-toolbar button:hover,
.page-edit .toastui-editor-toolbar button.active, .page-edit .toastui-editor-toolbar button.active,
.page-edit .toastui-editor-toolbar button:focus-visible { .page-edit .toastui-editor-toolbar button:focus-visible {
background-color: rgba(126, 168, 255, 0.16); background-color: var(--toastui-tab-hover);
}
.page-edit .toastui-editor-toolbar-margin {
margin-bottom: 0.5rem;
} }
.page-edit .toastui-editor-toolbar-icons { .page-edit .toastui-editor-toolbar-icons {
@ -3385,7 +3391,7 @@ select:focus {
} }
.page-edit .toastui-editor-toolbar-divider { .page-edit .toastui-editor-toolbar-divider {
background-color: var(--bookmark-input-border); background-color: var(--toastui-border);
} }
.page-edit .toastui-editor-mode-switch .tab-item { .page-edit .toastui-editor-mode-switch .tab-item {
@ -3394,167 +3400,14 @@ select:focus {
.page-edit .toastui-editor-md-tab-container, .page-edit .toastui-editor-md-tab-container,
.page-edit .toastui-editor-mode-switch { .page-edit .toastui-editor-mode-switch {
border-top: 1px solid var(--bookmark-input-border); border-top: 1px solid var(--toastui-border);
} }
[data-theme="dark"] .page-add .toastui-editor-defaultUI, .page-edit .toastui-editor-mode-switch .tab-item.active,
[data-theme="dark"] .page-add .toastui-editor-md-container, .page-edit .toastui-editor-mode-switch .tab-item.selected {
[data-theme="dark"] .page-add .toastui-editor-ww-container, background: var(--toastui-tab-hover);
[data-theme="dark"] .page-edit .toastui-editor-defaultUI, color: var(--bookmark-text-main);
[data-theme="dark"] .page-edit .toastui-editor-md-container, box-shadow: 0 4px 18px var(--toastui-border);
[data-theme="dark"] .page-edit .toastui-editor-ww-container {
background: var(--toastui-panel-surface, #0a1429) !important;
color: var(--bookmark-text-main, var(--text-main)) !important;
border-color: var(--toastui-border, #1f3560) !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar,
[data-theme="dark"] .page-add .toastui-editor-mode-switch,
[data-theme="dark"] .page-edit .toastui-editor-toolbar,
[data-theme="dark"] .page-edit .toastui-editor-mode-switch {
background: var(--toastui-toolbar-bg, linear-gradient(180deg, rgba(28, 49, 86, 0.95) 0%, rgba(14, 26, 47, 0.96) 100%)) !important;
border-color: var(--toastui-border, #1f3560) !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar,
[data-theme="dark"] .page-edit .toastui-editor-toolbar {
border-bottom: 1px solid var(--toastui-border, #1f3560) !important;
box-shadow: inset 0 -1px 0 rgba(9, 12, 23, 0.6) !important;
}
[data-theme="dark"] .page-add .toastui-editor-md-tab-container,
[data-theme="dark"] .page-add .toastui-editor-mode-switch,
[data-theme="dark"] .page-edit .toastui-editor-md-tab-container,
[data-theme="dark"] .page-edit .toastui-editor-mode-switch {
border-top: 1px solid var(--toastui-border, #1f3560) !important;
}
[data-theme="dark"] .page-add .toastui-editor-mode-switch .tab-item,
[data-theme="dark"] .page-edit .toastui-editor-mode-switch .tab-item {
background: transparent !important;
color: var(--bookmark-text-muted, var(--text-secondary)) !important;
border-radius: 6px;
padding: 0.45rem 0.8rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
[data-theme="dark"] .page-add .toastui-editor-mode-switch .tab-item.active,
[data-theme="dark"] .page-add .toastui-editor-mode-switch .tab-item.selected,
[data-theme="dark"] .page-edit .toastui-editor-mode-switch .tab-item.active,
[data-theme="dark"] .page-edit .toastui-editor-mode-switch .tab-item.selected {
background: var(--toastui-tab-hover, rgba(112, 160, 255, 0.24)) !important;
color: var(--bookmark-text-main, var(--text-main)) !important;
box-shadow: 0 4px 18px rgba(23, 40, 72, 0.55);
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button {
color: #e2e9ff !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button:hover,
[data-theme="dark"] .page-add .toastui-editor-toolbar button.active,
[data-theme="dark"] .page-add .toastui-editor-toolbar button:focus-visible,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button:hover,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button.active,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button:focus-visible {
background-color: rgba(118, 164, 255, 0.26) !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button:hover .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-add .toastui-editor-toolbar button.active .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-add .toastui-editor-toolbar button:focus-visible .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button:hover .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button.active .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button:focus-visible .toastui-editor-toolbar-icons {
opacity: 1 !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-icons {
opacity: 0.85 !important;
filter: none !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-icons::before,
[data-theme="dark"] .page-add .toastui-editor-toolbar-icons::after,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-icons::before,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-icons::after {
filter: none !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button.toastui-editor-toolbar-icons,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button.toastui-editor-toolbar-icons {
filter: none !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button svg,
[data-theme="dark"] .page-add .toastui-editor-toolbar button svg *,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button svg,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button svg * {
fill: rgba(255, 255, 255, 0.85) !important;
stroke: rgba(255, 255, 255, 0.85) !important;
opacity: 1 !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-divider,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-divider {
background-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar *,
[data-theme="dark"] .page-edit .toastui-editor-toolbar * {
background-color: transparent;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-group,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-group {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: none !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-group:not(:last-child),
[data-theme="dark"] .page-edit .toastui-editor-toolbar-group:not(:last-child) {
border-right-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-item,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-item {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button {
background-color: transparent !important;
border-color: transparent !important;
}
[data-theme="dark"] .page-add .toastui-editor-contents,
[data-theme="dark"] .page-add .toastui-editor-contents *,
[data-theme="dark"] .page-edit .toastui-editor-contents,
[data-theme="dark"] .page-edit .toastui-editor-contents * {
color: var(--bookmark-text-main, var(--text-main)) !important;
}
.page-edit .bookmark-tags-input {
min-height: 48px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem;
border-radius: 12px;
border: 1px solid var(--bookmark-input-border);
background: var(--bookmark-input-bg);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-edit .bookmark-tags-input:focus-within {
border-color: var(--bookmark-input-focus);
box-shadow: 0 0 0 3px var(--bookmark-input-focus-ring);
} }
.page-edit .bookmark-tags-list { .page-edit .bookmark-tags-list {
@ -3570,7 +3423,7 @@ select:focus {
height: 34px; height: 34px;
padding: 0 0.4rem 0 0.8rem; padding: 0 0.4rem 0 0.8rem;
border-radius: 999px; border-radius: 999px;
border: 1px solid rgba(191, 203, 255, 0.12); border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
background: var(--bookmark-tag-bg); background: var(--bookmark-tag-bg);
color: var(--bookmark-tag-text); color: var(--bookmark-tag-text);
font-size: 0.95rem; font-size: 0.95rem;
@ -3608,7 +3461,7 @@ select:focus {
.page-edit .bookmark-tag-remove:focus-visible { .page-edit .bookmark-tag-remove:focus-visible {
outline: none; outline: none;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 2px var(--focus-ring-color);
} }
.page-edit .bookmark-tags-text-input { .page-edit .bookmark-tags-text-input {
@ -3621,11 +3474,6 @@ select:focus {
padding: 0.45rem 0.4rem; padding: 0.45rem 0.4rem;
} }
.page-edit .bookmark-tags-text-input:focus {
outline: none;
box-shadow: none;
}
.page-edit .bookmark-toggle-grid { .page-edit .bookmark-toggle-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
@ -3646,7 +3494,7 @@ select:focus {
.page-edit .bookmark-toggle-item input[type="checkbox"] { .page-edit .bookmark-toggle-item input[type="checkbox"] {
width: 18px; width: 18px;
height: 18px; height: 18px;
accent-color: #7ea8ff; accent-color: var(--primary);
} }
.page-edit .bookmark-editor-footer { .page-edit .bookmark-editor-footer {
@ -3665,7 +3513,7 @@ select:focus {
.page-edit .bookmark-editor-footer .btn-primary { .page-edit .bookmark-editor-footer .btn-primary {
background: var(--bookmark-save-bg); background: var(--bookmark-save-bg);
border-color: transparent; border-color: transparent;
box-shadow: 0 10px 22px rgba(77, 130, 240, 0.35); box-shadow: 0 10px 22px var(--primary);
} }
.page-edit .bookmark-editor-footer .btn-primary:hover { .page-edit .bookmark-editor-footer .btn-primary:hover {
@ -3673,128 +3521,35 @@ select:focus {
} }
.page-edit .bookmark-editor-footer .btn-danger { .page-edit .bookmark-editor-footer .btn-danger {
background: #c84e4e; background: var(--danger);
border-color: transparent; border-color: transparent;
} }
.page-edit .bookmark-editor-footer .btn-danger:hover { .page-edit .bookmark-editor-footer .btn-danger:hover {
background: #dd5a5a; background: color-mix(in srgb, var(--danger) 85%, #ffffff);
}
@media (max-width: 991px) {
.page-edit .editlinkform-col {
max-width: 100%;
padding-inline: 0;
}
.page-edit .bookmark-editor-header,
.page-edit .bookmark-editor-card .card-body,
.page-edit .bookmark-editor-footer {
padding: 1rem;
}
.page-edit .bookmark-toggle-grid {
grid-template-columns: 1fr;
}
.page-edit .bookmark-tags-input {
gap: 0.4rem;
}
.page-edit .bookmark-tag-pill {
height: 32px;
font-size: 0.9rem;
}
.page-edit .bookmark-editor-footer {
flex-wrap: wrap;
justify-content: stretch;
}
.page-edit .bookmark-editor-footer .btn,
.page-edit .bookmark-editor-footer a.btn {
flex: 1 1 calc(50% - 0.4rem);
}
}
@media (max-width: 640px) {
.page-edit .bookmark-tags-text-input {
min-width: 120px;
}
.page-edit .bookmark-editor-footer .btn,
.page-edit .bookmark-editor-footer a.btn {
flex: 1 1 100%;
}
}
/* ===== Bulk Creation + Edit (final overrides) ===== */
.page-add .page-add-actions {
margin: 1.25rem 0 1rem;
color: var(--text-secondary);
}
.page-add .page-add-bulk-toggle {
min-height: 42px;
border-radius: 10px;
}
.page-add .batch-private-wrap {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.page-add .batch-private-checkbox {
width: 18px;
height: 18px;
accent-color: var(--primary);
}
.page-add .batch-private-label {
margin: 0;
color: var(--text-main);
} }
.page-edit { .page-edit {
--bookmark-panel-bg: var(--bg-card); --bookmark-panel-bg: var(--bg-card);
--bookmark-panel-border: var(--border); --bookmark-panel-border: color-mix(in srgb, var(--border) 85%, transparent);
--bookmark-panel-soft: var(--bg-card-hover); --bookmark-panel-soft: color-mix(in srgb, var(--bg-card) 88%, var(--bg-body));
--bookmark-input-bg: var(--bg-body); --bookmark-input-bg: color-mix(in srgb, var(--bg-body) 80%, var(--bg-card));
--bookmark-input-border: var(--border); --bookmark-input-border: var(--border);
--bookmark-input-focus: var(--primary); --bookmark-input-focus: var(--primary);
--bookmark-input-focus-ring: rgba(59, 130, 246, 0.2); --bookmark-input-focus-ring: color-mix(in srgb, var(--primary) 35%, transparent);
--bookmark-text-main: var(--text-main); --bookmark-text-main: var(--text-main);
--bookmark-text-muted: var(--text-secondary); --bookmark-text-muted: var(--text-secondary);
--bookmark-tag-bg: var(--tag-bg); --bookmark-tag-bg: color-mix(in srgb, var(--primary) 12%, transparent);
--bookmark-tag-bg-hover: var(--primary-light); --bookmark-tag-bg-hover: color-mix(in srgb, var(--primary) 18%, transparent);
--bookmark-tag-text: var(--tag-text); --bookmark-tag-text: var(--text-main);
--bookmark-tag-remove-bg: rgba(17, 24, 39, 0.1); --bookmark-tag-remove-bg: color-mix(in srgb, var(--text-main) 10%, transparent);
--bookmark-tag-remove-bg-hover: rgba(17, 24, 39, 0.2); --bookmark-tag-remove-bg-hover: color-mix(in srgb, var(--text-main) 18%, transparent);
--bookmark-save-bg: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); --bookmark-save-bg: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 75%, #ffffff) 100%);
} --toastui-panel-bg: var(--surface-soft);
--toastui-panel-surface: var(--surface-frosted);
[data-theme="dark"] .page-edit { --toastui-toolbar-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, transparent) 0%, color-mix(in srgb, var(--bg-card) 78%, transparent) 100%);
--bookmark-panel-bg: #121c30; --toastui-border: color-mix(in srgb, var(--border) 110%, transparent);
--bookmark-panel-border: #25324a; --toastui-tab-hover: color-mix(in srgb, var(--primary) 25%, transparent);
--bookmark-panel-soft: #1a2640;
--bookmark-input-bg: #0c1528;
--bookmark-input-border: #334769;
--bookmark-input-focus: #70a0ff;
--bookmark-input-focus-ring: rgba(112, 160, 255, 0.25);
--bookmark-text-main: #eaf1ff;
--bookmark-text-muted: #9fb1d4;
--bookmark-tag-bg: #2f2f90;
--bookmark-tag-bg-hover: #3939a6;
--bookmark-tag-text: #cfdaff;
--bookmark-tag-remove-bg: rgba(255, 255, 255, 0.16);
--bookmark-tag-remove-bg-hover: rgba(255, 255, 255, 0.26);
--bookmark-save-bg: linear-gradient(135deg, #6fa8ff 0%, #4d82f0 100%);
--toastui-panel-bg: #101d38;
--toastui-panel-surface: #0a1429;
--toastui-toolbar-bg: linear-gradient(180deg, rgba(28, 49, 86, 0.95) 0%, rgba(14, 26, 47, 0.96) 100%);
--toastui-border: #1f3560;
--toastui-tab-hover: rgba(112, 160, 255, 0.24);
} }
.page-edit .bookmark-editor-card { .page-edit .bookmark-editor-card {