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

feat: améliorer contraste tiles dark mode avec tokens --tile-* dédiés (bg/border/shadow), responsive masonry notes/todos (4→3→2→1 colonnes + collapse auto si <4 items), polish UX vues notes/todos avec centered layout max-width 1600px, styles editor/toolbar unifiés (transparent inputs, compact actions rows, hover states), refactoring special-view tokens pour fallback --tile-* (panel-bg/border/shadow), ajout empty-state messages ("Aucune note/tâche"), et application tile-bg/tile-border/tile-shadow sur

Browse Source
This commit is contained in:
bruno
2026-04-20 19:31:32 -04:00
parent 0f1bed5e15
commit 55c11db610
2 changed files with 292 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shaarli-pro/css/style.css
+60
View File
@@ -4594,4 +4594,64 @@ table {
.search-results {
max-height: calc(90vh - 200px);
}
}
/* =========================================================
Tile contrast fix (bookmarks/notes/todos)
Dark themes: --bg-card is too close to --bg-body; lift
tiles using --surface-variant and reinforce borders so
each theme provides visible tile contrast.
========================================================= */
:root {
--tile-bg: var(--bg-card);
--tile-bg-hover: var(--bg-card-hover);
--tile-border: var(--border);
--tile-shadow: var(--shadow-sm);
--tile-shadow-hover: var(--shadow-md);
}
[data-theme="dark"] {
--tile-bg: var(--surface-variant, var(--bg-card));
--tile-bg-hover: color-mix(in srgb, var(--surface-variant, var(--bg-card)) 82%, var(--primary) 18%);
--tile-border: color-mix(in srgb, var(--outline-variant, var(--border)) 70%, var(--text-main) 30%);
--tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
--tile-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.55);
}
/* Grid & list cards */
.link-outer {
background: var(--tile-bg);
border-color: var(--tile-border);
box-shadow: var(--tile-shadow);
}
.link-outer:hover {
border-color: var(--primary);
box-shadow: var(--tile-shadow-hover);
}
.view-list .link-outer {
background: var(--tile-bg);
border-color: var(--tile-border);
box-shadow: var(--tile-shadow);
}
/* Compact (table) view */
.links-list.view-compact {
background: var(--tile-bg);
border-color: var(--tile-border);
box-shadow: var(--tile-shadow);
}
.view-compact .link-outer {
border-bottom: 1px solid var(--tile-border);
}
.view-compact .link-outer:hover {
background: var(--tile-bg-hover);
}
.view-compact .compact-table-head {
background: color-mix(in srgb, var(--tile-bg) 78%, var(--bg-body) 22%);
border-bottom: 1px solid var(--tile-border);
}