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

feat: améliorer la cohérence des couleurs dans le thème sombre pour les tags et actions des notes, simplifier l'héritage de couleur avec inherit, uniformiser le style des boutons de palette (36px, border-radius 0.375rem), et ajouter états hover pour meilleure interaction visuelle

Browse Source
This commit is contained in:
Bruno Charest 2026-02-17 21:52:01 -05:00
parent 7817f5b39f
commit 5631c8935b
1 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
shaarli-pro/css/custom_views.css
View File

@ -672,6 +672,7 @@ body.view-notes .content-container {
[data-theme="dark"] .note-tag { [data-theme="dark"] .note-tag {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: #9aa0a6;
} }
/* Hover Actions */ /* Hover Actions */
@ -683,6 +684,7 @@ body.view-notes .content-container {
margin-top: 8px; margin-top: 8px;
margin-left: -8px; margin-left: -8px;
/* Alignment fix */ /* Alignment fix */
color: var(--text-light, #5f6368);
opacity: 0; opacity: 0;
/* Hidden by default */ /* Hidden by default */
transition: opacity 0.2s; transition: opacity 0.2s;
@ -691,6 +693,10 @@ body.view-notes .content-container {
z-index: 2; z-index: 2;
} }
[data-theme="dark"] .note-hover-actions {
color: #9aa0a6;
}
/* Show actions on hover */ /* Show actions on hover */
.note-card:hover .note-hover-actions { .note-card:hover .note-hover-actions {
opacity: 1; opacity: 1;
@ -715,19 +721,13 @@ body.view-notes .content-container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-light, #5f6368); color: inherit;
cursor: pointer; cursor: pointer;
font-size: 1.1rem; font-size: 1.1rem;
transition: background-color 0.2s, color 0.2s; transition: background-color 0.2s, color 0.2s;
text-decoration: none; text-decoration: none;
} }
[data-theme="dark"] .note-hover-actions > button,
[data-theme="dark"] .note-hover-actions > a,
[data-theme="dark"] .note-hover-actions > div > button {
color: #9aa0a6;
}
.note-hover-actions > button:hover, .note-hover-actions > button:hover,
.note-hover-actions > a:hover, .note-hover-actions > a:hover,
.note-hover-actions > div > button:hover { .note-hover-actions > div > button:hover {
@ -735,35 +735,31 @@ body.view-notes .content-container {
color: var(--text-color); color: var(--text-color);
} }
[data-theme="dark"] .note-hover-actions > button:hover,
[data-theme="dark"] .note-hover-actions > a:hover,
[data-theme="dark"] .note-hover-actions > div > button:hover {
color: #e8eaed;
}
.bookmark-palette { .bookmark-palette {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
position: relative; position: relative;
color: var(--text-muted);
} }
.bookmark-palette > button { .bookmark-palette > button {
background: none; background: none;
border: none; border: none;
width: 34px; width: 36px;
height: 34px; height: 36px;
border-radius: 50%; border-radius: 0.375rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-light, #5f6368); color: inherit;
cursor: pointer; cursor: pointer;
font-size: 1.1rem; font-size: 1.1rem;
transition: background-color 0.2s, color 0.2s; transition: background-color 0.2s, color 0.2s;
} }
[data-theme="dark"] .bookmark-palette > button { .bookmark-palette > button:hover {
color: #9aa0a6; background: var(--primary-light);
color: var(--primary);
} }
.palette-popup { .palette-popup {