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:
parent
83d9a7425e
commit
f230ff0acd
2998
.gemini/commit_diff.txt
Normal file
2998
.gemini/commit_diff.txt
Normal file
File diff suppressed because it is too large
Load Diff
2698
.gemini/deleted_styles.css
Normal file
2698
.gemini/deleted_styles.css
Normal file
File diff suppressed because it is too large
Load Diff
1896
.gemini/head_style.css
Normal file
1896
.gemini/head_style.css
Normal file
File diff suppressed because it is too large
Load Diff
4380
.gemini/parent_style.css
Normal file
4380
.gemini/parent_style.css
Normal file
File diff suppressed because it is too large
Load Diff
128
.gemini/search_compat.css
Normal file
128
.gemini/search_compat.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
569
.gemini/style.diff.txt
Normal file
569
.gemini/style.diff.txt
Normal file
@ -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 {
|
||||
File diff suppressed because it is too large
Load Diff
@ -85,6 +85,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
// ===== Search Overlay (Spotlight Style) =====
|
||||
try {
|
||||
const searchOverlay = document.getElementById('search-overlay');
|
||||
const searchToggleBtns = document.querySelectorAll('[data-search-toggle]');
|
||||
const searchModalInput = document.getElementById('search-modal-input');
|
||||
@ -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();
|
||||
}
|
||||
submitSearchByMode();
|
||||
});
|
||||
|
||||
// Live search on input
|
||||
@ -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
|
||||
submitSearchByMode();
|
||||
break;
|
||||
}
|
||||
return;
|
||||
@ -522,6 +539,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
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">
|
||||
<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="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>
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user