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
This commit is contained in:
parent
0f1bed5e15
commit
55c11db610
@ -4,11 +4,11 @@
|
||||
|
||||
/* Theme tokens for custom views */
|
||||
:root {
|
||||
--special-view-panel-bg: var(--bg-card);
|
||||
--special-view-panel-alt: color-mix(in srgb, var(--bg-card) 85%, var(--bg-body));
|
||||
--special-view-border: var(--border);
|
||||
--special-view-panel-bg: var(--tile-bg, var(--bg-card));
|
||||
--special-view-panel-alt: color-mix(in srgb, var(--tile-bg, var(--bg-card)) 85%, var(--bg-body));
|
||||
--special-view-border: var(--tile-border, var(--border));
|
||||
--special-view-divider: var(--border-light);
|
||||
--special-view-shadow: var(--shadow-md);
|
||||
--special-view-shadow: var(--tile-shadow, var(--shadow-md));
|
||||
--special-view-muted: var(--text-secondary);
|
||||
--special-view-strong: var(--text-main);
|
||||
--special-view-chip-bg: color-mix(in srgb, var(--primary) 12%, transparent);
|
||||
@ -199,8 +199,27 @@ body.view-archive .content-container {
|
||||
column-count: 4;
|
||||
column-gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Responsive masonry columns based on viewport */
|
||||
@media (max-width: 1400px) {
|
||||
.notes-masonry { column-count: 3; }
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.notes-masonry { column-count: 2; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.notes-masonry { column-count: 1; }
|
||||
}
|
||||
|
||||
/* Collapse empty columns when only a few notes/todos exist
|
||||
(prevents the large empty right-side area seen with 1 item) */
|
||||
.notes-masonry:has(.note-card:first-child:last-child) { column-count: 1; }
|
||||
.notes-masonry:has(.note-card:nth-child(2):last-child) { column-count: 2; }
|
||||
.notes-masonry:has(.note-card:nth-child(3):last-child) { column-count: 3; }
|
||||
|
||||
.notes-masonry .note-card {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
@ -640,4 +659,213 @@ body.view-todo .note-card.todo-card .todo-checklist-preview-wrap {
|
||||
|
||||
.todo-add-item-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Notes / Todos views — UX polish (professional layout)
|
||||
========================================================= */
|
||||
|
||||
/* Content container for notes & todos: centered, sensible max */
|
||||
body.view-notes .content-container,
|
||||
body.view-todo .content-container,
|
||||
body.view-archive .content-container {
|
||||
padding: 1.75rem clamp(1rem, 3vw, 2.5rem);
|
||||
}
|
||||
|
||||
/* Results filter banner ("N résultat(s) tagué(s) ...") */
|
||||
body.view-notes .linklist-filters,
|
||||
body.view-todo .linklist-filters,
|
||||
body.view-archive .linklist-filters {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
max-width: max-content;
|
||||
margin: 0 0 1.25rem;
|
||||
padding: 0.45rem 0.85rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--special-view-chip-bg);
|
||||
color: var(--special-view-strong);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--special-view-border);
|
||||
}
|
||||
|
||||
/* Notes/todos top bar: center input, keep view switch on the right */
|
||||
.notes-top-bar {
|
||||
position: relative;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
max-width: 1600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.notes-top-bar .notes-tools {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Compact editor when collapsed */
|
||||
.note-input-container {
|
||||
width: min(760px, 100%);
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.note-input-container:hover {
|
||||
box-shadow: var(--tile-shadow-hover, var(--shadow-md));
|
||||
}
|
||||
|
||||
.note-input-container.is-editing {
|
||||
box-shadow: var(--tile-shadow-hover, var(--shadow-md));
|
||||
border-color: color-mix(in srgb, var(--primary) 40%, var(--special-view-border));
|
||||
}
|
||||
|
||||
/* Expanded editor inputs */
|
||||
.note-input-container input[type="text"],
|
||||
.note-input-container textarea {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--special-view-strong);
|
||||
padding: 10px 14px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.note-input-container textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.note-input-container input[type="text"]::placeholder,
|
||||
.note-input-container textarea::placeholder {
|
||||
color: var(--special-view-muted);
|
||||
}
|
||||
|
||||
/* Toolbar / action rows inside the note/todo create form */
|
||||
.note-input-container .note-editor-toolbar,
|
||||
.note-input-container .note-input-actions,
|
||||
.note-input-container .todo-editor-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 6px 10px;
|
||||
border-top: 1px solid var(--special-view-divider);
|
||||
background: color-mix(in srgb, var(--special-view-panel-bg) 88%, var(--bg-body));
|
||||
}
|
||||
|
||||
.note-input-container .icon-btn,
|
||||
.note-input-container button:not(.btn):not([class*="note-close"]):not([class*="submit"]) {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--special-view-strong);
|
||||
border-radius: 6px;
|
||||
padding: 6px 8px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.note-input-container .icon-btn:hover,
|
||||
.note-input-container button:not(.btn):not([class*="note-close"]):not([class*="submit"]):hover {
|
||||
background: color-mix(in srgb, var(--text-main) 10%, transparent);
|
||||
}
|
||||
|
||||
/* "Fermer" footer button */
|
||||
.note-input-container .note-close-btn,
|
||||
.note-input-container [data-action="close"] {
|
||||
background: var(--special-view-panel-alt);
|
||||
color: var(--special-view-strong);
|
||||
border: 1px solid var(--special-view-border);
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.note-input-container .note-close-btn:hover,
|
||||
.note-input-container [data-action="close"]:hover {
|
||||
background: var(--tile-bg-hover, var(--bg-card-hover));
|
||||
}
|
||||
|
||||
/* Todo checklist row inside creation form */
|
||||
.note-input-container .todo-checklist-row {
|
||||
padding: 4px 10px;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--special-view-divider);
|
||||
}
|
||||
|
||||
.note-input-container .todo-checklist-row:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.note-input-container .todo-item-text {
|
||||
padding: 8px 6px;
|
||||
}
|
||||
|
||||
/* Note cards: padding & typography polish */
|
||||
.note-card .note-title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
line-height: 1.3;
|
||||
margin: 0 0 6px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.note-card .note-body {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Tag chips inside note cards */
|
||||
.note-card .note-tag,
|
||||
.note-card .link-tag {
|
||||
background: color-mix(in srgb, var(--primary) 14%, transparent);
|
||||
color: var(--special-view-chip-text);
|
||||
border-radius: 9999px;
|
||||
padding: 2px 8px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
|
||||
}
|
||||
|
||||
/* Hover state for note cards */
|
||||
.notes-masonry .note-card {
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.notes-masonry .note-card:hover {
|
||||
box-shadow: var(--tile-shadow-hover, var(--shadow-lg));
|
||||
border-color: color-mix(in srgb, var(--primary) 35%, var(--special-view-border));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Ensure note cards respect theme colors even when no color tag present */
|
||||
.note-card:not([class*="note-color-"]) {
|
||||
color: var(--special-view-strong);
|
||||
}
|
||||
|
||||
/* Todo view-specific: single-column empty-state nicety */
|
||||
body.view-todo .notes-masonry:empty::after {
|
||||
content: "Aucune tâche pour le moment.";
|
||||
display: block;
|
||||
padding: 3rem 1rem;
|
||||
text-align: center;
|
||||
color: var(--special-view-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
body.view-notes .notes-masonry:empty::after {
|
||||
content: "Aucune note pour le moment.";
|
||||
display: block;
|
||||
padding: 3rem 1rem;
|
||||
text-align: center;
|
||||
color: var(--special-view-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user