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 {
|
||||
+2744
-132
File diff suppressed because it is too large
Load Diff
+60
-40
@@ -85,20 +85,21 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
// ===== Search Overlay (Spotlight Style) =====
|
||||
const searchOverlay = document.getElementById('search-overlay');
|
||||
const searchToggleBtns = document.querySelectorAll('[data-search-toggle]');
|
||||
const searchModalInput = document.getElementById('search-modal-input');
|
||||
const searchResults = document.getElementById('search-results');
|
||||
const searchTagsBtn = document.getElementById('search-tags-btn');
|
||||
const searchAllBtn = document.getElementById('search-all-btn');
|
||||
const searchNotesBtn = document.getElementById('search-notes-btn');
|
||||
const searchForm = document.getElementById('search-form');
|
||||
try {
|
||||
const searchOverlay = document.getElementById('search-overlay');
|
||||
const searchToggleBtns = document.querySelectorAll('[data-search-toggle]');
|
||||
const searchModalInput = document.getElementById('search-modal-input');
|
||||
const searchResults = document.getElementById('search-results');
|
||||
const searchTagsBtn = document.getElementById('search-tags-btn');
|
||||
const searchAllBtn = document.getElementById('search-all-btn');
|
||||
const searchNotesBtn = document.getElementById('search-notes-btn');
|
||||
const searchForm = document.getElementById('search-form');
|
||||
|
||||
let searchMode = 'search'; // 'search' | 'tags' | 'notes'
|
||||
let selectedIndex = -1;
|
||||
let searchTimeout = null;
|
||||
let cachedBookmarks = null;
|
||||
let cachedTags = null;
|
||||
let searchMode = 'search'; // 'search' | 'tags' | 'notes'
|
||||
let selectedIndex = -1;
|
||||
let searchTimeout = null;
|
||||
let cachedBookmarks = null;
|
||||
let cachedTags = null;
|
||||
|
||||
// Escape HTML to prevent XSS
|
||||
function escapeHtml(text) {
|
||||
@@ -185,12 +186,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
function getSearchHint(mode) {
|
||||
if (mode === 'tags') {
|
||||
return 'Type to search in tags...';
|
||||
return 'Rechercher dans les tags...';
|
||||
}
|
||||
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)
|
||||
@@ -375,6 +376,36 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
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)
|
||||
function setSearchMode(mode) {
|
||||
if (!['search', 'tags', 'notes'].includes(mode)) {
|
||||
@@ -391,6 +422,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
searchTagsBtn?.setAttribute('aria-pressed', String(mode === 'tags'));
|
||||
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) {
|
||||
searchModalInput.name = mode === 'tags' ? 'searchtags' : 'searchterm';
|
||||
searchModalInput.placeholder = getSearchHint(mode);
|
||||
@@ -427,19 +462,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
searchForm?.addEventListener('submit', (e) => {
|
||||
if (searchMode === 'notes') {
|
||||
e.preventDefault();
|
||||
if (selectedIndex < 0) {
|
||||
updateSelection(0);
|
||||
}
|
||||
navigateToSelected();
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedIndex >= 0) {
|
||||
e.preventDefault();
|
||||
navigateToSelected();
|
||||
}
|
||||
e.preventDefault();
|
||||
submitSearchByMode();
|
||||
});
|
||||
|
||||
// Live search on input
|
||||
@@ -455,7 +479,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
const isSearchOpen = searchOverlay?.classList.contains('show');
|
||||
const target = e.target;
|
||||
const isTyping = Boolean(
|
||||
@@ -490,15 +514,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
updateSelection(selectedIndex - 1);
|
||||
break;
|
||||
case 'Enter':
|
||||
// If an item is selected, navigate to it
|
||||
if (selectedIndex >= 0 && navigateToSelected()) {
|
||||
e.preventDefault();
|
||||
} else if (searchMode === 'notes') {
|
||||
e.preventDefault();
|
||||
updateSelection(0);
|
||||
navigateToSelected();
|
||||
}
|
||||
// Otherwise, submit the form normally
|
||||
e.preventDefault();
|
||||
submitSearchByMode();
|
||||
break;
|
||||
}
|
||||
return;
|
||||
@@ -521,7 +538,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
e.preventDefault();
|
||||
openSearch('notes');
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Search overlay initialization failed:', error);
|
||||
}
|
||||
|
||||
// ===== Filter Panel =====
|
||||
const filterToggleBtn = document.getElementById('filter-toggle-btn');
|
||||
|
||||
@@ -264,20 +264,30 @@ Bookmarklet detection logic
|
||||
<div class="search-modal">
|
||||
<form method="GET" action="{$base_path}/" id="search-form">
|
||||
<div class="search-modal-header">
|
||||
<input type="text" name="searchterm" class="search-modal-input" id="search-modal-input"
|
||||
placeholder="Type to search..." autocomplete="off" value="{if="isset($search_term)"}{$search_term}{/if}">
|
||||
<div class="search-modal-actions">
|
||||
<button type="button" class="search-pill-btn search-pill-notes" id="search-notes-btn" aria-pressed="false">
|
||||
<i class="mdi mdi-note-text-outline"></i>
|
||||
<span>notes</span>
|
||||
<div class="search-input-row">
|
||||
<i class="mdi mdi-magnify search-input-icon" aria-hidden="true"></i>
|
||||
<input type="text" name="searchterm" class="search-modal-input" id="search-modal-input"
|
||||
placeholder="Rechercher des notes, tags..." autocomplete="off" value="{if="isset($search_term)"}{$search_term}{/if}">
|
||||
<button type="submit" class="search-submit-btn" id="search-submit-btn" aria-label="Lancer la recherche">
|
||||
<i class="mdi mdi-arrow-right"></i>
|
||||
</button>
|
||||
<button type="button" class="search-pill-btn search-pill-tags" id="search-tags-btn">
|
||||
<i class="mdi mdi-tag-outline"></i>
|
||||
<span>tags</span>
|
||||
</button>
|
||||
<button type="button" class="search-pill-btn search-pill-search active" id="search-all-btn" aria-pressed="true">
|
||||
</div>
|
||||
|
||||
<div class="search-mode-bar" role="tablist" aria-label="Modes de recherche">
|
||||
<button type="button" class="search-mode-btn active" id="search-all-btn" aria-pressed="true" role="tab">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -285,7 +295,7 @@ Bookmarklet detection logic
|
||||
<div class="search-separator"></div>
|
||||
<div class="search-results" id="search-results">
|
||||
<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 class="search-footer">
|
||||
@@ -293,9 +303,9 @@ Bookmarklet detection logic
|
||||
<kbd class="search-kbd">S</kbd> global
|
||||
<kbd class="search-kbd">T</kbd> tags
|
||||
<kbd class="search-kbd">N</kbd> notes
|
||||
<kbd class="search-kbd">↑</kbd><kbd class="search-kbd">↓</kbd> to navigate
|
||||
<kbd class="search-kbd">Enter</kbd> to select
|
||||
<kbd class="search-kbd">ESC</kbd> to close
|
||||
<kbd class="search-kbd">↑</kbd><kbd class="search-kbd">↓</kbd> naviguer
|
||||
<kbd class="search-kbd">Enter</kbd> sélectionner
|
||||
<kbd class="search-kbd">Esc</kbd> fermer
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user