feat: refactorer l'interface avec système de vues grid/list/compact, toolbar moderne avec toggle de vue et pagination intégrée, styles hover unifiés pour header-nav-link avec état active, suppression des pills Notes obsolètes, ajout content-container responsive, link cards avec sélection visuelle et checkbox repositionné, badges visibility/readlater optimisés, et restructuration majeure du CSS avec 2500+ lignes de nouveaux styles pour grilles adaptatives, modales, formulaires, et compos
This commit is contained in:
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,128 @@
|
|||||||
|
|
||||||
|
/* ===== Compatibility layer for new search overlay markup (search-mode-bar/btn/kbd) ===== */
|
||||||
|
.search-overlay .search-modal-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-overlay .search-input-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
padding: 0.1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-overlay .search-input-icon {
|
||||||
|
color: #9ca3af;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-overlay .search-submit-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background: #f3f4f6;
|
||||||
|
color: #374151;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s ease, color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-overlay .search-submit-btn:hover {
|
||||||
|
background: #e5e7eb;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-overlay .search-submit-btn {
|
||||||
|
background: #334155;
|
||||||
|
border-color: #475569;
|
||||||
|
color: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-overlay .search-submit-btn:hover {
|
||||||
|
background: #475569;
|
||||||
|
color: #f1f5f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-overlay .search-mode-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-overlay .search-mode-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
padding: 0.5rem 0.85rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
border: none;
|
||||||
|
background: #e5e7eb;
|
||||||
|
color: #374151;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-overlay .search-mode-btn:hover {
|
||||||
|
background: #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-overlay .search-mode-btn.active {
|
||||||
|
background: #3b82f6;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-overlay .search-mode-btn {
|
||||||
|
background: #374151;
|
||||||
|
color: #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-overlay .search-mode-btn:hover {
|
||||||
|
background: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-overlay .search-mode-btn.active {
|
||||||
|
background: #3b82f6;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-overlay .search-mode-kbd {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 1.1rem;
|
||||||
|
padding: 0.05rem 0.28rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
|
background: rgba(255, 255, 255, 0.65);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-overlay .search-mode-kbd {
|
||||||
|
border-color: rgba(255, 255, 255, 0.18);
|
||||||
|
background: rgba(15, 23, 42, 0.4);
|
||||||
|
color: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.search-overlay .search-mode-bar {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-overlay .search-mode-btn {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.55rem 0.45rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,569 @@
|
|||||||
|
diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css
|
||||||
|
index 9e54e52..2a2564b 100644
|
||||||
|
--- a/shaarli-pro/css/style.css
|
||||||
|
+++ b/shaarli-pro/css/style.css
|
||||||
|
@@ -741,18 +741,25 @@ input:checked+.theme-slider:before {
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-modal {
|
||||||
|
- width: 90%;
|
||||||
|
- max-width: 580px;
|
||||||
|
- background: #ffffff;
|
||||||
|
- border-radius: 12px;
|
||||||
|
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||||
|
+ width: min(820px, 95vw);
|
||||||
|
+ background: #141821;
|
||||||
|
+ border: 1px solid #2a3448;
|
||||||
|
+ border-radius: 14px;
|
||||||
|
+ box-shadow: 0 28px 64px rgba(7, 12, 24, 0.55);
|
||||||
|
overflow: hidden;
|
||||||
|
animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-modal {
|
||||||
|
- background: var(--bg-card);
|
||||||
|
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||||
|
+ background: #141821;
|
||||||
|
+ border-color: #2a3448;
|
||||||
|
+ box-shadow: 0 28px 64px rgba(7, 12, 24, 0.62);
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+[data-theme="light"] .search-modal {
|
||||||
|
+ background: #f7f9fc;
|
||||||
|
+ border-color: #d9e2f0;
|
||||||
|
+ box-shadow: 0 24px 52px rgba(17, 24, 39, 0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
@@ -769,171 +776,205 @@ input:checked+.theme-slider:before {
|
||||||
|
|
||||||
|
/* Search Header (Input Zone) */
|
||||||
|
.search-modal-header {
|
||||||
|
+ display: flex;
|
||||||
|
+ flex-direction: column;
|
||||||
|
+ align-items: stretch;
|
||||||
|
+ gap: 0.6rem;
|
||||||
|
+ padding: 0.95rem 1rem 0.75rem;
|
||||||
|
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+[data-theme="light"] .search-modal-header {
|
||||||
|
+ background: linear-gradient(90deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0));
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+.search-input-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
- padding: 1rem 1.25rem;
|
||||||
|
- gap: 0.75rem;
|
||||||
|
+ gap: 0.65rem;
|
||||||
|
+ min-height: 52px;
|
||||||
|
+ padding: 0 0.85rem;
|
||||||
|
+ border-radius: 11px;
|
||||||
|
+ border: 1px solid #283247;
|
||||||
|
+ background: rgba(11, 16, 28, 0.9);
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+[data-theme="light"] .search-input-row {
|
||||||
|
+ border-color: #c9d6ea;
|
||||||
|
+ background: #ffffff;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+.search-input-icon {
|
||||||
|
+ color: #7f8ca6;
|
||||||
|
+ font-size: 1.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-modal-input {
|
||||||
|
flex: 1;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
- font-size: 1rem;
|
||||||
|
+ font-size: 2rem;
|
||||||
|
+ line-height: 1;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
- color: #111827;
|
||||||
|
+ color: #e8eef9;
|
||||||
|
outline: none;
|
||||||
|
caret-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-modal-input {
|
||||||
|
- color: var(--text-main);
|
||||||
|
+ color: #e8eef9;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+[data-theme="light"] .search-modal-input {
|
||||||
|
+ color: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-modal-input::placeholder {
|
||||||
|
- color: #9ca3af;
|
||||||
|
+ color: #7685a0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-modal-input::placeholder {
|
||||||
|
- color: var(--text-muted);
|
||||||
|
+ color: #7685a0;
|
||||||
|
}
|
||||||
|
|
||||||
|
-/* Pill Buttons */
|
||||||
|
-.search-modal-actions {
|
||||||
|
- display: flex;
|
||||||
|
- gap: 0.5rem;
|
||||||
|
+[data-theme="light"] .search-modal-input::placeholder {
|
||||||
|
+ color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
-.search-pill-btn {
|
||||||
|
- display: flex;
|
||||||
|
+.search-submit-btn {
|
||||||
|
+ display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
- gap: 0.375rem;
|
||||||
|
- padding: 0.5rem 0.875rem;
|
||||||
|
- border-radius: 9999px;
|
||||||
|
- border: none;
|
||||||
|
- font-size: 0.8125rem;
|
||||||
|
- font-weight: 500;
|
||||||
|
- font-family: inherit;
|
||||||
|
+ justify-content: center;
|
||||||
|
+ width: 38px;
|
||||||
|
+ height: 38px;
|
||||||
|
+ border: 1px solid #36548b;
|
||||||
|
+ border-radius: 10px;
|
||||||
|
+ color: #dce8ff;
|
||||||
|
+ background: linear-gradient(180deg, #2f67da, #275ac4);
|
||||||
|
cursor: pointer;
|
||||||
|
- transition: all 0.15s ease;
|
||||||
|
-}
|
||||||
|
-
|
||||||
|
-.search-pill-btn i {
|
||||||
|
- font-size: 0.9rem;
|
||||||
|
-}
|
||||||
|
-
|
||||||
|
-.search-pill-btn:focus-visible {
|
||||||
|
- outline: 2px solid var(--primary);
|
||||||
|
- outline-offset: 2px;
|
||||||
|
-}
|
||||||
|
-
|
||||||
|
-.search-pill-btn span {
|
||||||
|
- white-space: nowrap;
|
||||||
|
+ transition: transform 0.12s ease, filter 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
-/* Notes pill */
|
||||||
|
-.search-pill-notes {
|
||||||
|
- background: #E5E7EB;
|
||||||
|
- color: #374151;
|
||||||
|
+.search-submit-btn:hover {
|
||||||
|
+ filter: brightness(1.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
-.search-pill-notes:hover {
|
||||||
|
- background: #D1D5DB;
|
||||||
|
+.search-submit-btn:active {
|
||||||
|
+ transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
-.search-pill-notes.active {
|
||||||
|
- background: #3B82F6;
|
||||||
|
+[data-theme="light"] .search-submit-btn {
|
||||||
|
+ border-color: #3b82f6;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
-[data-theme="dark"] .search-pill-notes {
|
||||||
|
- background: #374151;
|
||||||
|
- color: #D1D5DB;
|
||||||
|
-}
|
||||||
|
-
|
||||||
|
-[data-theme="dark"] .search-pill-notes:hover {
|
||||||
|
- background: #4B5563;
|
||||||
|
-}
|
||||||
|
-
|
||||||
|
-[data-theme="dark"] .search-pill-notes.active {
|
||||||
|
- background: #3B82F6;
|
||||||
|
- color: #ffffff;
|
||||||
|
+/* Mode Buttons */
|
||||||
|
+.search-mode-bar {
|
||||||
|
+ display: flex;
|
||||||
|
+ gap: 0.45rem;
|
||||||
|
+ padding: 0.55rem;
|
||||||
|
+ border-radius: 11px;
|
||||||
|
+ border: 1px solid #283247;
|
||||||
|
+ background: rgba(10, 14, 24, 0.92);
|
||||||
|
}
|
||||||
|
|
||||||
|
-/* Tags pill - Gray style */
|
||||||
|
-.search-pill-tags {
|
||||||
|
- background: #E5E7EB;
|
||||||
|
- color: #374151;
|
||||||
|
+[data-theme="light"] .search-mode-bar {
|
||||||
|
+ border-color: #cfdaeb;
|
||||||
|
+ background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
-.search-pill-tags:hover {
|
||||||
|
- background: #D1D5DB;
|
||||||
|
+.search-mode-btn {
|
||||||
|
+ display: flex;
|
||||||
|
+ align-items: center;
|
||||||
|
+ gap: 0.45rem;
|
||||||
|
+ min-height: 38px;
|
||||||
|
+ padding: 0.45rem 0.68rem;
|
||||||
|
+ border-radius: 10px;
|
||||||
|
+ border: 1px solid transparent;
|
||||||
|
+ font-size: 1.2rem;
|
||||||
|
+ font-weight: 700;
|
||||||
|
+ font-family: inherit;
|
||||||
|
+ color: #b7c4dc;
|
||||||
|
+ background: transparent;
|
||||||
|
+ cursor: pointer;
|
||||||
|
+ transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
-.search-pill-tags.active {
|
||||||
|
- background: #3B82F6;
|
||||||
|
- color: #ffffff;
|
||||||
|
+.search-mode-btn i {
|
||||||
|
+ font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
-[data-theme="dark"] .search-pill-tags {
|
||||||
|
- background: #374151;
|
||||||
|
- color: #D1D5DB;
|
||||||
|
+.search-mode-btn span {
|
||||||
|
+ white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
-[data-theme="dark"] .search-pill-tags:hover {
|
||||||
|
- background: #4B5563;
|
||||||
|
+.search-mode-kbd {
|
||||||
|
+ display: inline-flex;
|
||||||
|
+ align-items: center;
|
||||||
|
+ justify-content: center;
|
||||||
|
+ min-width: 1.1rem;
|
||||||
|
+ padding: 0.12rem 0.28rem;
|
||||||
|
+ border-radius: 6px;
|
||||||
|
+ border: 1px solid #2c3b57;
|
||||||
|
+ background: #172239;
|
||||||
|
+ color: #8ea6d6;
|
||||||
|
+ font-size: 0.64rem;
|
||||||
|
+ font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
-[data-theme="dark"] .search-pill-tags.active {
|
||||||
|
- background: #3B82F6;
|
||||||
|
+.search-mode-btn.active {
|
||||||
|
color: #ffffff;
|
||||||
|
+ background: rgba(99, 136, 206, 0.28);
|
||||||
|
+ border-color: rgba(97, 147, 255, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
-/* Search pill - Blue style */
|
||||||
|
-.search-pill-search {
|
||||||
|
- background: #E5E7EB;
|
||||||
|
- color: #374151;
|
||||||
|
-}
|
||||||
|
-
|
||||||
|
-.search-pill-search:hover {
|
||||||
|
- background: #D1D5DB;
|
||||||
|
-}
|
||||||
|
-
|
||||||
|
-.search-pill-search.active {
|
||||||
|
- background: #3B82F6;
|
||||||
|
- color: #ffffff;
|
||||||
|
+.search-mode-btn.active .search-mode-kbd {
|
||||||
|
+ color: #dbeafe;
|
||||||
|
+ border-color: #4d74bf;
|
||||||
|
+ background: rgba(26, 42, 74, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
-[data-theme="dark"] .search-pill-search {
|
||||||
|
- background: #374151;
|
||||||
|
- color: #D1D5DB;
|
||||||
|
+[data-theme="light"] .search-mode-btn {
|
||||||
|
+ color: #334155;
|
||||||
|
}
|
||||||
|
|
||||||
|
-[data-theme="dark"] .search-pill-search:hover {
|
||||||
|
- background: #4B5563;
|
||||||
|
+[data-theme="light"] .search-mode-btn.active {
|
||||||
|
+ color: #0f172a;
|
||||||
|
+ background: #e7eefc;
|
||||||
|
+ border-color: #bfd3f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
-[data-theme="dark"] .search-pill-search.active {
|
||||||
|
- background: #3B82F6;
|
||||||
|
- color: #ffffff;
|
||||||
|
+[data-theme="light"] .search-mode-kbd {
|
||||||
|
+ border-color: #c8d5ea;
|
||||||
|
+ background: #f1f5fd;
|
||||||
|
+ color: #4b5f83;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Separator */
|
||||||
|
.search-separator {
|
||||||
|
height: 1px;
|
||||||
|
- background: #E5E7EB;
|
||||||
|
+ background: #26324a;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
+[data-theme="light"] .search-separator {
|
||||||
|
+ background: #d7e1f0;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
[data-theme="dark"] .search-separator {
|
||||||
|
- background: var(--border);
|
||||||
|
+ background: #26324a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Results List */
|
||||||
|
.search-results {
|
||||||
|
- max-height: 320px;
|
||||||
|
+ max-height: 520px;
|
||||||
|
overflow-y: auto;
|
||||||
|
- padding: 0.5rem 0;
|
||||||
|
+ padding: 0.55rem 0;
|
||||||
|
+ background: #151a25;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+[data-theme="light"] .search-results {
|
||||||
|
+ background: #f9fbff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results-empty {
|
||||||
|
@@ -942,7 +983,7 @@ input:checked+.theme-slider:before {
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results-hint {
|
||||||
|
- color: #9ca3af;
|
||||||
|
+ color: #8290a9;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@@ -953,30 +994,42 @@ input:checked+.theme-slider:before {
|
||||||
|
/* Result Item */
|
||||||
|
.search-result-item {
|
||||||
|
display: block;
|
||||||
|
- padding: 0.625rem 1.25rem;
|
||||||
|
- color: #374151;
|
||||||
|
+ padding: 0.7rem 1.25rem;
|
||||||
|
+ color: #d0d9ea;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.1s ease;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1.5;
|
||||||
|
+ border-radius: 8px;
|
||||||
|
+ margin: 0 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-result-item:hover,
|
||||||
|
.search-result-item.selected {
|
||||||
|
- background: #F3F4F6;
|
||||||
|
- color: #111827;
|
||||||
|
+ background: #2f63d8;
|
||||||
|
+ color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-result-item {
|
||||||
|
- color: var(--text-secondary);
|
||||||
|
+ color: #d0d9ea;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-result-item:hover,
|
||||||
|
[data-theme="dark"] .search-result-item.selected {
|
||||||
|
- background: var(--bg-card-hover);
|
||||||
|
- color: var(--text-main);
|
||||||
|
+ background: #2f63d8;
|
||||||
|
+ color: #ffffff;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+[data-theme="light"] .search-result-item {
|
||||||
|
+ color: #1e293b;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+[data-theme="light"] .search-result-item:hover,
|
||||||
|
+[data-theme="light"] .search-result-item.selected {
|
||||||
|
+ background: #2f63d8;
|
||||||
|
+ color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Highlight (Fuzzy Matching) */
|
||||||
|
@@ -1009,13 +1062,18 @@ input:checked+.theme-slider:before {
|
||||||
|
/* Footer */
|
||||||
|
.search-footer {
|
||||||
|
padding: 0.625rem 1.25rem;
|
||||||
|
- background: #F9FAFB;
|
||||||
|
- border-top: 1px solid #E5E7EB;
|
||||||
|
+ background: #111621;
|
||||||
|
+ border-top: 1px solid #26324a;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-footer {
|
||||||
|
- background: var(--bg-body);
|
||||||
|
- border-top-color: var(--border);
|
||||||
|
+ background: #111621;
|
||||||
|
+ border-top-color: #26324a;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+[data-theme="light"] .search-footer {
|
||||||
|
+ background: #eef4ff;
|
||||||
|
+ border-top-color: #d6e1f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-footer-hint {
|
||||||
|
@@ -1023,7 +1081,7 @@ input:checked+.theme-slider:before {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
- color: #9ca3af;
|
||||||
|
+ color: #7f8ba3;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@@ -1037,20 +1095,26 @@ input:checked+.theme-slider:before {
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 1.5rem;
|
||||||
|
padding: 0.125rem 0.375rem;
|
||||||
|
- background: #ffffff;
|
||||||
|
- border: 1px solid #D1D5DB;
|
||||||
|
+ background: #1c2638;
|
||||||
|
+ border: 1px solid #32405a;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
- color: #6B7280;
|
||||||
|
+ color: #9aa8c3;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-kbd {
|
||||||
|
- background: var(--bg-card);
|
||||||
|
- border-color: var(--border);
|
||||||
|
- color: var(--text-muted);
|
||||||
|
+ background: #1c2638;
|
||||||
|
+ border-color: #32405a;
|
||||||
|
+ color: #9aa8c3;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+[data-theme="light"] .search-kbd {
|
||||||
|
+ background: #ffffff;
|
||||||
|
+ border-color: #d2dced;
|
||||||
|
+ color: #62708c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading state */
|
||||||
|
@@ -1097,7 +1161,12 @@ input:checked+.theme-slider:before {
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-result-icon {
|
||||||
|
- color: var(--text-muted);
|
||||||
|
+ color: #7d8ba5;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+.search-result-item.selected .search-result-icon,
|
||||||
|
+.search-result-item:hover .search-result-icon {
|
||||||
|
+ color: #dbeafe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-result-text {
|
||||||
|
@@ -1122,15 +1191,21 @@ input:checked+.theme-slider:before {
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0.2rem 0.4rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
- background: #E5E7EB;
|
||||||
|
- color: #4B5563;
|
||||||
|
+ background: rgba(15, 23, 42, 0.28);
|
||||||
|
+ color: #8da4d3;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .search-result-kind {
|
||||||
|
- background: #334155;
|
||||||
|
- color: #cbd5e1;
|
||||||
|
+ background: rgba(15, 23, 42, 0.28);
|
||||||
|
+ color: #8da4d3;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
+.search-result-item.selected .search-result-kind,
|
||||||
|
+.search-result-item:hover .search-result-kind {
|
||||||
|
+ background: rgba(8, 20, 46, 0.35);
|
||||||
|
+ color: #dbeafe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-result-sub {
|
||||||
|
@@ -1150,6 +1225,11 @@ input:checked+.theme-slider:before {
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
+.search-result-item.selected .search-result-sub,
|
||||||
|
+.search-result-item:hover .search-result-sub {
|
||||||
|
+ color: #dbeafe;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
.search-result-tags {
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
padding-left: 1.9rem;
|
||||||
|
@@ -1176,6 +1256,13 @@ input:checked+.theme-slider:before {
|
||||||
|
color: #93c5fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
+.search-result-item.selected .search-result-tag,
|
||||||
|
+.search-result-item:hover .search-result-tag {
|
||||||
|
+ border-color: rgba(219, 234, 254, 0.55);
|
||||||
|
+ background: rgba(15, 23, 42, 0.26);
|
||||||
|
+ color: #dbeafe;
|
||||||
|
+}
|
||||||
|
+
|
||||||
|
.search-results-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
@@ -1213,19 +1300,37 @@ input:checked+.theme-slider:before {
|
||||||
|
/* Mobile styles */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.search-modal-header {
|
||||||
|
- flex-wrap: wrap;
|
||||||
|
+ padding: 0.8rem;
|
||||||
|
+ }
|
||||||
|
+
|
||||||
|
+ .search-modal {
|
||||||
|
+ width: min(96vw, 820px);
|
||||||
|
}
|
||||||
|
|
||||||
|
- .search-modal-actions {
|
||||||
|
+ .search-input-row {
|
||||||
|
+ min-height: 46px;
|
||||||
|
+ padding: 0 0.7rem;
|
||||||
|
+ }
|
||||||
|
+
|
||||||
|
+ .search-modal-input {
|
||||||
|
+ font-size: 1.3rem;
|
||||||
|
+ }
|
||||||
|
+
|
||||||
|
+ .search-mode-bar {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
- .search-pill-btn {
|
||||||
|
+ .search-mode-btn {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.55rem 0.45rem;
|
||||||
|
+ font-size: 0.9rem;
|
||||||
|
+ }
|
||||||
|
+
|
||||||
|
+ .search-mode-btn i {
|
||||||
|
+ display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-footer-hint {
|
||||||
+2745
-133
File diff suppressed because it is too large
Load Diff
+60
-40
@@ -85,20 +85,21 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// ===== Search Overlay (Spotlight Style) =====
|
// ===== Search Overlay (Spotlight Style) =====
|
||||||
const searchOverlay = document.getElementById('search-overlay');
|
try {
|
||||||
const searchToggleBtns = document.querySelectorAll('[data-search-toggle]');
|
const searchOverlay = document.getElementById('search-overlay');
|
||||||
const searchModalInput = document.getElementById('search-modal-input');
|
const searchToggleBtns = document.querySelectorAll('[data-search-toggle]');
|
||||||
const searchResults = document.getElementById('search-results');
|
const searchModalInput = document.getElementById('search-modal-input');
|
||||||
const searchTagsBtn = document.getElementById('search-tags-btn');
|
const searchResults = document.getElementById('search-results');
|
||||||
const searchAllBtn = document.getElementById('search-all-btn');
|
const searchTagsBtn = document.getElementById('search-tags-btn');
|
||||||
const searchNotesBtn = document.getElementById('search-notes-btn');
|
const searchAllBtn = document.getElementById('search-all-btn');
|
||||||
const searchForm = document.getElementById('search-form');
|
const searchNotesBtn = document.getElementById('search-notes-btn');
|
||||||
|
const searchForm = document.getElementById('search-form');
|
||||||
|
|
||||||
let searchMode = 'search'; // 'search' | 'tags' | 'notes'
|
let searchMode = 'search'; // 'search' | 'tags' | 'notes'
|
||||||
let selectedIndex = -1;
|
let selectedIndex = -1;
|
||||||
let searchTimeout = null;
|
let searchTimeout = null;
|
||||||
let cachedBookmarks = null;
|
let cachedBookmarks = null;
|
||||||
let cachedTags = null;
|
let cachedTags = null;
|
||||||
|
|
||||||
// Escape HTML to prevent XSS
|
// Escape HTML to prevent XSS
|
||||||
function escapeHtml(text) {
|
function escapeHtml(text) {
|
||||||
@@ -185,12 +186,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
|
|
||||||
function getSearchHint(mode) {
|
function getSearchHint(mode) {
|
||||||
if (mode === 'tags') {
|
if (mode === 'tags') {
|
||||||
return 'Type to search in tags...';
|
return 'Rechercher dans les tags...';
|
||||||
}
|
}
|
||||||
if (mode === 'notes') {
|
if (mode === 'notes') {
|
||||||
return 'Type to search in notes...';
|
return 'Rechercher dans les notes...';
|
||||||
}
|
}
|
||||||
return 'Type to search in bookmarks and notes...';
|
return 'Rechercher dans les bookmarks et notes...';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Render search results (tags, global bookmarks, or notes)
|
// Render search results (tags, global bookmarks, or notes)
|
||||||
@@ -375,6 +376,36 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
selectedIndex = -1;
|
selectedIndex = -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function submitSearchByMode() {
|
||||||
|
const basePath = (typeof shaarli !== 'undefined' && shaarli.basePath) ? shaarli.basePath : '';
|
||||||
|
const query = (searchModalInput?.value || '').trim();
|
||||||
|
|
||||||
|
if (selectedIndex >= 0 && navigateToSelected()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!query) {
|
||||||
|
if (searchMode === 'tags') {
|
||||||
|
window.location.href = `${basePath}/tags/cloud`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.location.href = `${basePath}/`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchMode === 'tags') {
|
||||||
|
window.location.href = `${basePath}/?searchtags=${encodeURIComponent(query)}`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchMode === 'notes') {
|
||||||
|
window.location.href = `${basePath}/?searchterm=${encodeURIComponent(query)}&searchtags=note`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.location.href = `${basePath}/?searchterm=${encodeURIComponent(query)}`;
|
||||||
|
}
|
||||||
|
|
||||||
// Toggle search mode (tags vs search)
|
// Toggle search mode (tags vs search)
|
||||||
function setSearchMode(mode) {
|
function setSearchMode(mode) {
|
||||||
if (!['search', 'tags', 'notes'].includes(mode)) {
|
if (!['search', 'tags', 'notes'].includes(mode)) {
|
||||||
@@ -391,6 +422,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
searchTagsBtn?.setAttribute('aria-pressed', String(mode === 'tags'));
|
searchTagsBtn?.setAttribute('aria-pressed', String(mode === 'tags'));
|
||||||
searchNotesBtn?.setAttribute('aria-pressed', String(mode === 'notes'));
|
searchNotesBtn?.setAttribute('aria-pressed', String(mode === 'notes'));
|
||||||
|
|
||||||
|
searchAllBtn?.setAttribute('aria-selected', String(mode === 'search'));
|
||||||
|
searchTagsBtn?.setAttribute('aria-selected', String(mode === 'tags'));
|
||||||
|
searchNotesBtn?.setAttribute('aria-selected', String(mode === 'notes'));
|
||||||
|
|
||||||
if (searchModalInput) {
|
if (searchModalInput) {
|
||||||
searchModalInput.name = mode === 'tags' ? 'searchtags' : 'searchterm';
|
searchModalInput.name = mode === 'tags' ? 'searchtags' : 'searchterm';
|
||||||
searchModalInput.placeholder = getSearchHint(mode);
|
searchModalInput.placeholder = getSearchHint(mode);
|
||||||
@@ -427,19 +462,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
searchForm?.addEventListener('submit', (e) => {
|
searchForm?.addEventListener('submit', (e) => {
|
||||||
if (searchMode === 'notes') {
|
e.preventDefault();
|
||||||
e.preventDefault();
|
submitSearchByMode();
|
||||||
if (selectedIndex < 0) {
|
|
||||||
updateSelection(0);
|
|
||||||
}
|
|
||||||
navigateToSelected();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedIndex >= 0) {
|
|
||||||
e.preventDefault();
|
|
||||||
navigateToSelected();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Live search on input
|
// Live search on input
|
||||||
@@ -455,7 +479,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Keyboard shortcuts
|
// Keyboard shortcuts
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
const isSearchOpen = searchOverlay?.classList.contains('show');
|
const isSearchOpen = searchOverlay?.classList.contains('show');
|
||||||
const target = e.target;
|
const target = e.target;
|
||||||
const isTyping = Boolean(
|
const isTyping = Boolean(
|
||||||
@@ -490,15 +514,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
updateSelection(selectedIndex - 1);
|
updateSelection(selectedIndex - 1);
|
||||||
break;
|
break;
|
||||||
case 'Enter':
|
case 'Enter':
|
||||||
// If an item is selected, navigate to it
|
e.preventDefault();
|
||||||
if (selectedIndex >= 0 && navigateToSelected()) {
|
submitSearchByMode();
|
||||||
e.preventDefault();
|
|
||||||
} else if (searchMode === 'notes') {
|
|
||||||
e.preventDefault();
|
|
||||||
updateSelection(0);
|
|
||||||
navigateToSelected();
|
|
||||||
}
|
|
||||||
// Otherwise, submit the form normally
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
@@ -521,7 +538,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
openSearch('notes');
|
openSearch('notes');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Search overlay initialization failed:', error);
|
||||||
|
}
|
||||||
|
|
||||||
// ===== Filter Panel =====
|
// ===== Filter Panel =====
|
||||||
const filterToggleBtn = document.getElementById('filter-toggle-btn');
|
const filterToggleBtn = document.getElementById('filter-toggle-btn');
|
||||||
|
|||||||
@@ -264,20 +264,30 @@ Bookmarklet detection logic
|
|||||||
<div class="search-modal">
|
<div class="search-modal">
|
||||||
<form method="GET" action="{$base_path}/" id="search-form">
|
<form method="GET" action="{$base_path}/" id="search-form">
|
||||||
<div class="search-modal-header">
|
<div class="search-modal-header">
|
||||||
<input type="text" name="searchterm" class="search-modal-input" id="search-modal-input"
|
<div class="search-input-row">
|
||||||
placeholder="Type to search..." autocomplete="off" value="{if="isset($search_term)"}{$search_term}{/if}">
|
<i class="mdi mdi-magnify search-input-icon" aria-hidden="true"></i>
|
||||||
<div class="search-modal-actions">
|
<input type="text" name="searchterm" class="search-modal-input" id="search-modal-input"
|
||||||
<button type="button" class="search-pill-btn search-pill-notes" id="search-notes-btn" aria-pressed="false">
|
placeholder="Rechercher des notes, tags..." autocomplete="off" value="{if="isset($search_term)"}{$search_term}{/if}">
|
||||||
<i class="mdi mdi-note-text-outline"></i>
|
<button type="submit" class="search-submit-btn" id="search-submit-btn" aria-label="Lancer la recherche">
|
||||||
<span>notes</span>
|
<i class="mdi mdi-arrow-right"></i>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="search-pill-btn search-pill-tags" id="search-tags-btn">
|
</div>
|
||||||
<i class="mdi mdi-tag-outline"></i>
|
|
||||||
<span>tags</span>
|
<div class="search-mode-bar" role="tablist" aria-label="Modes de recherche">
|
||||||
</button>
|
<button type="button" class="search-mode-btn active" id="search-all-btn" aria-pressed="true" role="tab">
|
||||||
<button type="button" class="search-pill-btn search-pill-search active" id="search-all-btn" aria-pressed="true">
|
|
||||||
<i class="mdi mdi-magnify"></i>
|
<i class="mdi mdi-magnify"></i>
|
||||||
<span>search</span>
|
<span>Globale</span>
|
||||||
|
<kbd class="search-mode-kbd">S</kbd>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="search-mode-btn" id="search-tags-btn" aria-pressed="false" role="tab">
|
||||||
|
<i class="mdi mdi-pound"></i>
|
||||||
|
<span>Tags</span>
|
||||||
|
<kbd class="search-mode-kbd">T</kbd>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="search-mode-btn" id="search-notes-btn" aria-pressed="false" role="tab">
|
||||||
|
<i class="mdi mdi-note-text-outline"></i>
|
||||||
|
<span>Notes</span>
|
||||||
|
<kbd class="search-mode-kbd">N</kbd>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -285,7 +295,7 @@ Bookmarklet detection logic
|
|||||||
<div class="search-separator"></div>
|
<div class="search-separator"></div>
|
||||||
<div class="search-results" id="search-results">
|
<div class="search-results" id="search-results">
|
||||||
<div class="search-results-empty">
|
<div class="search-results-empty">
|
||||||
<span class="search-results-hint">Start typing to see suggestions...</span>
|
<span class="search-results-hint">Tapez pour voir des suggestions...</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="search-footer">
|
<div class="search-footer">
|
||||||
@@ -293,9 +303,9 @@ Bookmarklet detection logic
|
|||||||
<kbd class="search-kbd">S</kbd> global
|
<kbd class="search-kbd">S</kbd> global
|
||||||
<kbd class="search-kbd">T</kbd> tags
|
<kbd class="search-kbd">T</kbd> tags
|
||||||
<kbd class="search-kbd">N</kbd> notes
|
<kbd class="search-kbd">N</kbd> notes
|
||||||
<kbd class="search-kbd">↑</kbd><kbd class="search-kbd">↓</kbd> to navigate
|
<kbd class="search-kbd">↑</kbd><kbd class="search-kbd">↓</kbd> naviguer
|
||||||
<kbd class="search-kbd">Enter</kbd> to select
|
<kbd class="search-kbd">Enter</kbd> sélectionner
|
||||||
<kbd class="search-kbd">ESC</kbd> to close
|
<kbd class="search-kbd">Esc</kbd> fermer
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user