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:
parent
bf1c2c6172
commit
561249ba06
File diff suppressed because it is too large
Load Diff
@ -49,6 +49,12 @@
|
||||
--overlay-bg: rgba(0, 0, 0, 0.5);
|
||||
--selection-bg: rgba(239, 68, 68, 0.15);
|
||||
--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"] {
|
||||
@ -89,6 +95,13 @@
|
||||
|
||||
--overlay-bg: rgba(0, 0, 0, 0.7);
|
||||
--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 ===== */
|
||||
@ -3345,7 +3358,7 @@ select:focus {
|
||||
}
|
||||
|
||||
.page-edit .bookmark-editor-sublabel a {
|
||||
color: #8fb8ff;
|
||||
color: color-mix(in srgb, var(--primary) 70%, #ffffff);
|
||||
}
|
||||
|
||||
.page-edit .toastui-editor-defaultUI,
|
||||
@ -3353,31 +3366,24 @@ select:focus {
|
||||
.page-edit .toastui-editor-ww-container,
|
||||
.page-edit .toastui-editor-toolbar,
|
||||
.page-edit .toastui-editor-mode-switch {
|
||||
background: var(--bookmark-input-bg);
|
||||
}
|
||||
|
||||
.page-edit .toastui-editor-defaultUI {
|
||||
border: 0;
|
||||
background: var(--toastui-panel-surface);
|
||||
color: var(--bookmark-text-main);
|
||||
border-color: var(--toastui-border);
|
||||
}
|
||||
|
||||
.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 {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
color: var(--bookmark-text-main);
|
||||
}
|
||||
|
||||
.page-edit .toastui-editor-toolbar button:hover,
|
||||
.page-edit .toastui-editor-toolbar button.active,
|
||||
.page-edit .toastui-editor-toolbar button:focus-visible {
|
||||
background-color: rgba(126, 168, 255, 0.16);
|
||||
}
|
||||
|
||||
.page-edit .toastui-editor-toolbar-margin {
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: var(--toastui-tab-hover);
|
||||
}
|
||||
|
||||
.page-edit .toastui-editor-toolbar-icons {
|
||||
@ -3385,7 +3391,7 @@ select:focus {
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -3394,167 +3400,14 @@ select:focus {
|
||||
|
||||
.page-edit .toastui-editor-md-tab-container,
|
||||
.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,
|
||||
[data-theme="dark"] .page-add .toastui-editor-md-container,
|
||||
[data-theme="dark"] .page-add .toastui-editor-ww-container,
|
||||
[data-theme="dark"] .page-edit .toastui-editor-defaultUI,
|
||||
[data-theme="dark"] .page-edit .toastui-editor-md-container,
|
||||
[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 .toastui-editor-mode-switch .tab-item.active,
|
||||
.page-edit .toastui-editor-mode-switch .tab-item.selected {
|
||||
background: var(--toastui-tab-hover);
|
||||
color: var(--bookmark-text-main);
|
||||
box-shadow: 0 4px 18px var(--toastui-border);
|
||||
}
|
||||
|
||||
.page-edit .bookmark-tags-list {
|
||||
@ -3570,7 +3423,7 @@ select:focus {
|
||||
height: 34px;
|
||||
padding: 0 0.4rem 0 0.8rem;
|
||||
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);
|
||||
color: var(--bookmark-tag-text);
|
||||
font-size: 0.95rem;
|
||||
@ -3608,7 +3461,7 @@ select:focus {
|
||||
|
||||
.page-edit .bookmark-tag-remove:focus-visible {
|
||||
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 {
|
||||
@ -3621,11 +3474,6 @@ select:focus {
|
||||
padding: 0.45rem 0.4rem;
|
||||
}
|
||||
|
||||
.page-edit .bookmark-tags-text-input:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.page-edit .bookmark-toggle-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@ -3646,7 +3494,7 @@ select:focus {
|
||||
.page-edit .bookmark-toggle-item input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: #7ea8ff;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
.page-edit .bookmark-editor-footer {
|
||||
@ -3665,7 +3513,7 @@ select:focus {
|
||||
.page-edit .bookmark-editor-footer .btn-primary {
|
||||
background: var(--bookmark-save-bg);
|
||||
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 {
|
||||
@ -3673,128 +3521,35 @@ select:focus {
|
||||
}
|
||||
|
||||
.page-edit .bookmark-editor-footer .btn-danger {
|
||||
background: #c84e4e;
|
||||
background: var(--danger);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.page-edit .bookmark-editor-footer .btn-danger:hover {
|
||||
background: #dd5a5a;
|
||||
}
|
||||
|
||||
@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);
|
||||
background: color-mix(in srgb, var(--danger) 85%, #ffffff);
|
||||
}
|
||||
|
||||
.page-edit {
|
||||
--bookmark-panel-bg: var(--bg-card);
|
||||
--bookmark-panel-border: var(--border);
|
||||
--bookmark-panel-soft: var(--bg-card-hover);
|
||||
--bookmark-input-bg: var(--bg-body);
|
||||
--bookmark-panel-border: color-mix(in srgb, var(--border) 85%, transparent);
|
||||
--bookmark-panel-soft: color-mix(in srgb, var(--bg-card) 88%, var(--bg-body));
|
||||
--bookmark-input-bg: color-mix(in srgb, var(--bg-body) 80%, var(--bg-card));
|
||||
--bookmark-input-border: var(--border);
|
||||
--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-muted: var(--text-secondary);
|
||||
--bookmark-tag-bg: var(--tag-bg);
|
||||
--bookmark-tag-bg-hover: var(--primary-light);
|
||||
--bookmark-tag-text: var(--tag-text);
|
||||
--bookmark-tag-remove-bg: rgba(17, 24, 39, 0.1);
|
||||
--bookmark-tag-remove-bg-hover: rgba(17, 24, 39, 0.2);
|
||||
--bookmark-save-bg: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .page-edit {
|
||||
--bookmark-panel-bg: #121c30;
|
||||
--bookmark-panel-border: #25324a;
|
||||
--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);
|
||||
--bookmark-tag-bg: color-mix(in srgb, var(--primary) 12%, transparent);
|
||||
--bookmark-tag-bg-hover: color-mix(in srgb, var(--primary) 18%, transparent);
|
||||
--bookmark-tag-text: var(--text-main);
|
||||
--bookmark-tag-remove-bg: color-mix(in srgb, var(--text-main) 10%, transparent);
|
||||
--bookmark-tag-remove-bg-hover: color-mix(in srgb, var(--text-main) 18%, transparent);
|
||||
--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);
|
||||
--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%);
|
||||
--toastui-border: color-mix(in srgb, var(--border) 110%, transparent);
|
||||
--toastui-tab-hover: color-mix(in srgb, var(--primary) 25%, transparent);
|
||||
}
|
||||
|
||||
.page-edit .bookmark-editor-card {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user