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 {
|
||||
Reference in New Issue
Block a user