diff --git a/shaarli-pro/css/custom_views.css b/shaarli-pro/css/custom_views.css index 1acf61e..e5b5001 100644 --- a/shaarli-pro/css/custom_views.css +++ b/shaarli-pro/css/custom_views.css @@ -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; } \ No newline at end of file diff --git a/shaarli-pro/js/custom_views.js b/shaarli-pro/js/custom_views.js index 9cc1a81..7863b00 100644 --- a/shaarli-pro/js/custom_views.js +++ b/shaarli-pro/js/custom_views.js @@ -2112,7 +2112,7 @@ function initTodoView(linkList, container) { inputContainer.classList.add("is-editing", "todo-draft-mode"); inputContainer.innerHTML = `
- +
@@ -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 = `
- +