feat: ajouter styles icon-btn/note-pin-corner/note-hover-actions/note-input-expanded-actions avec tokens sémantiques (--special-view-strong/muted/divider/panel-bg/panel-alt), implémenter pin corner absolu top-right avec opacity 0→1 hover/active + color primary active, barre actions hover bottom avec boutons 30px transparent→12% mix hover, refactoring toolbar expanded avec border-top divider + background 88% panel-bg mix, styler todo-draft-add-btn full-width avec gap 8px icon/text, override
This commit is contained in:
parent
7621eeef7a
commit
eb082ad784
@ -868,4 +868,253 @@ body.view-notes .notes-masonry:empty::after {
|
||||
text-align: center;
|
||||
color: var(--special-view-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Icon buttons — base (view-switch + card action btns)
|
||||
========================================================= */
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--special-view-strong);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.notes-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Note card — pin corner
|
||||
========================================================= */
|
||||
.note-pin-corner {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: var(--special-view-muted);
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.note-card:hover .note-pin-corner,
|
||||
.note-pin-corner.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.note-pin-corner:hover {
|
||||
background: color-mix(in srgb, var(--text-main) 12%, transparent);
|
||||
color: var(--special-view-strong);
|
||||
}
|
||||
|
||||
.note-pin-corner.active {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Note card — tags row
|
||||
========================================================= */
|
||||
.note-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 4px 0 6px;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Note card — hover actions bar (bottom strip)
|
||||
========================================================= */
|
||||
.note-hover-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px 8px 6px;
|
||||
border-top: 1px solid var(--special-view-divider);
|
||||
margin-top: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.note-card:hover .note-hover-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.note-hover-actions button,
|
||||
.note-hover-actions > a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.note-hover-actions button:hover,
|
||||
.note-hover-actions > a:hover {
|
||||
background: color-mix(in srgb, var(--text-main) 12%, transparent);
|
||||
}
|
||||
|
||||
.note-hover-actions .spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Collapsed input bar — layout fixes
|
||||
========================================================= */
|
||||
.note-input-placeholder {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--special-view-muted);
|
||||
}
|
||||
|
||||
/* Override toolbar styling that bleeds into the collapsed bar's action zone */
|
||||
.note-input-collapsed .note-input-actions {
|
||||
padding: 0;
|
||||
border-top: none;
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Expanded draft editor — layout & component styles
|
||||
========================================================= */
|
||||
.note-input-expanded,
|
||||
.todo-draft-expanded {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.todo-draft-list {
|
||||
padding: 4px 0;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-input-expanded-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-top: 1px solid var(--special-view-divider);
|
||||
background: color-mix(in srgb, var(--special-view-panel-bg) 88%, var(--bg-body));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-input-actions-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* "+ Élément de liste" add-item button */
|
||||
.todo-draft-add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--special-view-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
padding: 8px 14px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.todo-draft-add-btn:hover {
|
||||
color: var(--special-view-strong);
|
||||
}
|
||||
|
||||
.todo-draft-add-btn i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* "Fermer" close button — pill style, override the transparent-btn rule */
|
||||
.note-input-close-btn {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
background: var(--special-view-panel-alt) !important;
|
||||
color: var(--special-view-strong) !important;
|
||||
border: 1px solid var(--special-view-border) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px 16px !important;
|
||||
font-size: 0.9rem !important;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.note-input-close-btn:hover {
|
||||
background: var(--tile-bg-hover, var(--bg-card-hover)) !important;
|
||||
}
|
||||
|
||||
/* Palette button inside editor toolbar */
|
||||
.note-input-palette-btn,
|
||||
.note-input-format-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--special-view-strong);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 1.1rem;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.note-input-palette-btn:hover,
|
||||
.note-input-format-btn:hover {
|
||||
background: color-mix(in srgb, var(--text-main) 10%, transparent);
|
||||
}
|
||||
|
||||
/* Draft title input — bolder heading style */
|
||||
.note-input-container .todo-draft-title,
|
||||
.note-input-container .note-input-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
padding: 12px 14px 4px;
|
||||
}
|
||||
@ -2112,7 +2112,7 @@ function initTodoView(linkList, container) {
|
||||
inputContainer.classList.add("is-editing", "todo-draft-mode");
|
||||
inputContainer.innerHTML = `
|
||||
<div class="note-input-expanded todo-draft-expanded">
|
||||
<input type="text" class="note-input-title todo-draft-title" placeholder="Titre de la liste" />
|
||||
<input type="text" class="note-input-title todo-draft-title" placeholder="Titre de la liste" autocomplete="off" />
|
||||
<div class="todo-draft-list" role="list"></div>
|
||||
<button type="button" class="todo-draft-add-btn"><i class="mdi mdi-plus"></i> Élément de liste</button>
|
||||
<div class="note-input-expanded-actions">
|
||||
@ -2427,7 +2427,7 @@ function initTodoView(linkList, container) {
|
||||
if (deleteUrl && deleteUrl !== "#") {
|
||||
deleteEntitySilently(deleteUrl)
|
||||
.then(() => {
|
||||
window.location.href = "/?searchtags=shaarli-todo";
|
||||
window.location.href = "/?searchtags=todo";
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Delete failed:", err);
|
||||
@ -2939,7 +2939,7 @@ function renderTodos(container, todos, viewMode) {
|
||||
if (!confirm("Supprimer cette tâche ?")) return;
|
||||
deleteEntitySilently(todo.deleteUrl)
|
||||
.then(() => {
|
||||
window.location.href = "/?searchtags=shaarli-todo";
|
||||
window.location.href = "/?searchtags=todo";
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Delete failed:", err);
|
||||
@ -3457,7 +3457,7 @@ function initNoteView(linkList, container) {
|
||||
inputContainer.classList.add("is-editing", "todo-draft-mode");
|
||||
inputContainer.innerHTML = `
|
||||
<div class="note-input-expanded todo-draft-expanded">
|
||||
<input type="text" class="note-input-title todo-draft-title" placeholder="Titre de la liste" />
|
||||
<input type="text" class="note-input-title todo-draft-title" placeholder="Titre de la liste" autocomplete="off" />
|
||||
<div class="todo-draft-list" role="list"></div>
|
||||
<button type="button" class="todo-draft-add-btn"><i class="mdi mdi-plus"></i> Élément de liste</button>
|
||||
<div class="note-input-expanded-actions">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user