From 0f1bed5e15b4b70258270887e174096471aef99f Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Mon, 20 Apr 2026 18:48:39 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20refactor=20styles=20dans=20custom=5Fvie?= =?UTF-8?q?ws.css=20et=20tag.cloud.html=20pour=20utiliser=20des=20variable?= =?UTF-8?q?s=20CSS=20s=C3=A9mantiques,=20am=C3=A9lioration=20de=20la=20coh?= =?UTF-8?q?=C3=A9rence=20visuelle=20et=20suppression=20des=20couleurs=20ha?= =?UTF-8?q?rdcod=C3=A9es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- shaarli-pro/css/custom_views.css | 20 ++++++++-------- shaarli-pro/includes.html | 2 ++ shaarli-pro/tag.cloud.html | 39 ++++++++++++++++---------------- 3 files changed, 32 insertions(+), 29 deletions(-) diff --git a/shaarli-pro/css/custom_views.css b/shaarli-pro/css/custom_views.css index 5d4b3bc..be58d36 100644 --- a/shaarli-pro/css/custom_views.css +++ b/shaarli-pro/css/custom_views.css @@ -39,7 +39,7 @@ body.view-todo #linklist { } .create-task-btn:hover { - background-color: var(--primary-dark, #1d4ed8); + background-color: var(--primary-hover); transform: translateY(-1px); } @@ -60,8 +60,8 @@ body.view-todo #linklist { } .todo-list-item.active { - background-color: rgba(37, 99, 235, 0.1); - color: var(--primary-color, #2563eb); + background-color: color-mix(in srgb, var(--primary) 10%, transparent); + color: var(--primary); font-weight: 600; margin: 0; } @@ -113,7 +113,7 @@ body.view-todo #linklist { .todo-item.completed .todo-title { text-decoration: line-through; - color: var(--text-light, #94a3b8); + color: var(--text-muted); } .todo-meta { @@ -187,7 +187,7 @@ body.view-archive .content-container { } .icon-btn:hover { - background-color: rgba(136, 136, 136, 0.1); + background-color: color-mix(in srgb, var(--text-muted) 10%, transparent); } .icon-btn.active { @@ -304,7 +304,7 @@ body.view-archive .content-container { .note-modal-pin-toggle:hover, .note-modal-pin-toggle.active { - background-color: rgba(255, 255, 255, 0.14); + background-color: color-mix(in srgb, var(--text-main) 14%, transparent); } .note-body { @@ -584,11 +584,11 @@ body.view-todo .note-card.todo-card .todo-checklist-preview-wrap { } .todo-item-text:focus { - background: rgba(0, 0, 0, 0.06); + background: color-mix(in srgb, var(--text-main) 6%, transparent); } [data-theme="dark"] .todo-item-text:focus { - background: rgba(255, 255, 255, 0.08); + background: color-mix(in srgb, var(--text-main) 8%, transparent); } .todo-item-delete { @@ -608,11 +608,11 @@ body.view-todo .note-card.todo-card .todo-checklist-preview-wrap { .todo-item-delete:hover { opacity: 1; - background: rgba(0, 0, 0, 0.08); + background: color-mix(in srgb, var(--text-main) 8%, transparent); } [data-theme="dark"] .todo-item-delete:hover { - background: rgba(255, 255, 255, 0.12); + background: color-mix(in srgb, var(--text-main) 12%, transparent); } .todo-item-delete i { diff --git a/shaarli-pro/includes.html b/shaarli-pro/includes.html index 1597543..b3e524c 100644 --- a/shaarli-pro/includes.html +++ b/shaarli-pro/includes.html @@ -34,6 +34,8 @@ if (themeMode === 'dark') { document.documentElement.setAttribute('data-theme', 'dark'); + } else { + document.documentElement.setAttribute('data-theme', 'light'); } document.documentElement.setAttribute('data-theme-id', themeId); diff --git a/shaarli-pro/tag.cloud.html b/shaarli-pro/tag.cloud.html index d799f6e..4bdd82e 100644 --- a/shaarli-pro/tag.cloud.html +++ b/shaarli-pro/tag.cloud.html @@ -56,7 +56,8 @@
{loop="$tags"} - {$key} + {$key} {$value.count} {loop="$value.tag_plugin"} {$value} @@ -90,9 +91,9 @@ gap: 0.25rem; margin-bottom: 1.5rem; padding: 0.75rem; - background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%); + background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 80%, transparent) 0%, color-mix(in srgb, var(--bg-sidebar) 90%, transparent) 100%); border-radius: 1rem; - border: 1px solid rgba(99, 102, 241, 0.2); + border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); @@ -113,7 +114,7 @@ font-weight: 600; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0.02em; - color: rgba(148, 163, 184, 0.8); + color: color-mix(in srgb, var(--text-muted) 80%, transparent); background: transparent; border: none; border-radius: 50%; @@ -133,27 +134,27 @@ } .alpha-btn:hover:not(.disabled) { - color: #fff; + color: var(--text-main); } .alpha-btn:hover:not(.disabled)::before { - background: rgba(99, 102, 241, 0.25); + background: color-mix(in srgb, var(--primary) 25%, transparent); } .alpha-btn.active { - color: #fff; + color: var(--text-main); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .alpha-btn.active::before { - background: linear-gradient(135deg, #5b8def 0%, #6366f1 100%); + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); box-shadow: - 0 2px 10px rgba(91, 141, 239, 0.5), - 0 0 20px rgba(99, 102, 241, 0.3); + 0 2px 10px color-mix(in srgb, var(--primary) 50%, transparent), + 0 0 20px color-mix(in srgb, var(--primary) 30%, transparent); } .alpha-btn.disabled { - color: rgba(100, 116, 139, 0.3); + color: color-mix(in srgb, var(--text-muted) 30%, transparent); cursor: not-allowed; } @@ -223,9 +224,9 @@ justify-content: center; padding: 0.5em 1em; font-weight: 500; - color: #e2e8f0; - background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%); - border: 1px solid rgba(99, 102, 241, 0.15); + color: var(--text-main); + background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 90%, transparent) 0%, color-mix(in srgb, var(--bg-sidebar) 95%, transparent) 100%); + border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent); border-radius: 25px; text-decoration: none; white-space: nowrap; @@ -236,13 +237,13 @@ } .cloud-tag:hover { - color: #fff; - background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(91, 141, 239, 0.2) 100%); - border-color: rgba(99, 102, 241, 0.5); + color: var(--text-main); + background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, transparent) 0%, color-mix(in srgb, var(--primary) 20%, transparent) 100%); + border-color: color-mix(in srgb, var(--primary) 50%, transparent); text-decoration: none; box-shadow: - 0 4px 16px rgba(99, 102, 241, 0.3), - 0 0 20px rgba(99, 102, 241, 0.1), + 0 4px 16px color-mix(in srgb, var(--primary) 30%, transparent), + 0 0 20px color-mix(in srgb, var(--primary) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.1); }