mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

style(ui): customize NexusSearchBox styling to perfectly match dashboard glassmorphism and var(--nexus-neon) tokens

Browse Source
This commit is contained in:
Marek Jaisński
2026-05-23 20:19:04 +02:00
parent 97c1c309b1
commit d78abd0c4d
1 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Components/Atoms/NexusSearchBox.razor.css
+38 -38
View File
@@ -3,7 +3,7 @@
width: 100%;
max-width: 600px;
margin: 1.5rem auto;
font-family: 'Inter', sans-serif;
font-family: var(--nexus-font-sans), 'Inter', sans-serif;
z-index: 1000;
}
@@ -11,19 +11,21 @@
position: relative;
display: flex;
align-items: center;
background-color: #121212;
border: 1px solid rgba(138, 43, 226, 0.4); /* Neon fiolet border on blur */
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 0.65rem 1.1rem;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 8px rgba(138, 43, 226, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Focused state: glowing neon green border */
/* Focused state: glowing neon border matching other dashboard components */
.nexus-search-container.focused .search-wrapper {
background-color: #181818;
border-color: #00ff7f; /* Neon green focus */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 255, 127, 0.35);
background: rgba(255, 255, 255, 0.05);
border-color: var(--nexus-neon);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 153, 0.25);
}
.search-icon-container {
@@ -42,7 +44,7 @@
}
.nexus-search-container.focused .nexus-icon {
color: #00ff7f;
color: var(--nexus-neon);
}
.nexus-search-input {
@@ -77,11 +79,11 @@
.ai-pulse-dot {
width: 8px;
height: 8px;
background-color: #00ff7f;
background-color: var(--nexus-neon);
border-radius: 50%;
display: inline-block;
position: relative;
box-shadow: 0 0 8px #00ff7f;
box-shadow: 0 0 8px var(--nexus-neon);
}
.ai-pulse-dot::after {
@@ -91,7 +93,7 @@
height: 100%;
top: 0;
left: 0;
background-color: #00ff7f;
background-color: var(--nexus-neon);
border-radius: 50%;
z-index: -1;
animation: pulse 2s infinite ease-in-out;
@@ -120,17 +122,17 @@
top: calc(100% + 8px);
left: 0;
right: 0;
background: rgba(18, 18, 18, 0.82);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(138, 43, 226, 0.35);
background: rgba(18, 18, 18, 0.9);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 20px rgba(138, 43, 226, 0.15);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 255, 153, 0.05);
max-height: 420px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(138, 43, 226, 0.4) transparent;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
animation: slideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -140,21 +142,20 @@
}
.search-dropdown::-webkit-scrollbar-thumb {
background: rgba(138, 43, 226, 0.4);
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
}
.search-dropdown::-webkit-scrollbar-thumb:hover {
background: rgba(0, 255, 127, 0.5);
background: var(--nexus-neon);
}
/* In-flight spinners */
.neon-spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(0, 255, 127, 0.15);
border-top: 2px solid #00ff7f;
border-right: 2px solid #8a2be2;
border: 2px solid rgba(0, 255, 153, 0.15);
border-top: 2px solid var(--nexus-neon);
border-radius: 50%;
animation: spin 0.75s linear infinite;
}
@@ -162,9 +163,8 @@
.neon-spinner-large {
width: 32px;
height: 32px;
border: 3px solid rgba(138, 43, 226, 0.15);
border-top: 3px solid #8a2be2;
border-right: 3px solid #00ff7f;
border: 3px solid rgba(255, 255, 255, 0.05);
border-top: 3px solid var(--nexus-neon);
border-radius: 50%;
animation: spin 0.8s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
margin-bottom: 1rem;
@@ -217,8 +217,8 @@
}
.result-card:hover {
background: rgba(138, 43, 226, 0.08);
border-color: rgba(138, 43, 226, 0.35);
background: rgba(0, 255, 153, 0.05);
border-color: rgba(0, 255, 153, 0.2);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
@@ -232,14 +232,14 @@
}
.relevance-badge {
background: rgba(0, 255, 127, 0.15);
color: #00ff7f;
border: 1px solid rgba(0, 255, 127, 0.3);
background: rgba(0, 255, 153, 0.1);
color: var(--nexus-neon);
border: 1px solid rgba(0, 255, 153, 0.25);
border-radius: 6px;
padding: 0.15rem 0.45rem;
font-weight: 600;
letter-spacing: 0.02em;
text-shadow: 0 0 4px rgba(0, 255, 127, 0.3);
text-shadow: 0 0 4px rgba(0, 255, 153, 0.25);
}
.source-title {
@@ -267,9 +267,9 @@
/* Markup highlights */
::deep mark.search-highlight {
background: rgba(0, 255, 127, 0.22);
color: #00ff7f;
border-bottom: 1px solid rgba(0, 255, 127, 0.55);
background: rgba(0, 255, 153, 0.2);
color: var(--nexus-neon);
border-bottom: 1px solid var(--nexus-neon);
padding: 0.05rem 0.15rem;
border-radius: 3px;
font-weight: 500;
@@ -279,15 +279,15 @@
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 255, 127, 0.7);
box-shadow: 0 0 0 0 rgba(0, 255, 153, 0.7);
}
70% {
transform: scale(1.6);
box-shadow: 0 0 0 6px rgba(0, 255, 127, 0);
box-shadow: 0 0 0 6px rgba(0, 255, 153, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 255, 127, 0);
box-shadow: 0 0 0 0 rgba(0, 255, 153, 0);
}
}