570 lines
13 KiB
Plaintext
570 lines
13 KiB
Plaintext
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 {
|