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

style(ui): align global Q&A search component styling with dashboard glassmorphism and neon green theme

Browse Source
This commit is contained in:
Marek Jaisński
2026-05-23 20:33:15 +02:00
parent 9d396570aa
commit 39717725ec
1 changed files with 72 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Pages/Intelligence.razor
+72 -26
View File
@@ -133,7 +133,7 @@
} }
.header-title-section h1 { .header-title-section h1 {
font-family: var(--nexus-font-serif, 'Outfit', 'Georgia', serif); font-family: var(--nexus-font-serif);
font-size: 2.8rem; font-size: 2.8rem;
font-weight: 700; font-weight: 700;
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
@@ -150,11 +150,13 @@
.intelligence-layout { .intelligence-layout {
padding: 2.5rem; padding: 2.5rem;
border-radius: var(--nexus-radius-lg, 16px); border-radius: 20px;
background: rgba(15, 23, 42, 0.4); background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px); backdrop-filter: blur(10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.search-scope-bar { .search-scope-bar {
@@ -168,16 +170,17 @@
.search-input-group { .search-input-group {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
background: rgba(15, 23, 42, 0.5); background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 30px; border-radius: 10px;
padding: 0.25rem 0.25rem 0.25rem 1.25rem; padding: 0.25rem 0.25rem 0.25rem 1.25rem;
transition: all 0.3s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.search-input-group:focus-within { .search-input-group:focus-within {
border-color: var(--nexus-primary, #6366f1); border-color: var(--nexus-neon);
box-shadow: 0 0 10px rgba(99, 102, 241, 0.2); background: rgba(0, 255, 153, 0.02);
box-shadow: 0 0 15px rgba(0, 255, 153, 0.15);
} }
.nexus-input { .nexus-input {
@@ -186,6 +189,7 @@
border: none; border: none;
color: #ffffff; color: #ffffff;
font-size: 1rem; font-size: 1rem;
font-family: var(--nexus-font-sans);
outline: none; outline: none;
padding: 0.5rem 0; padding: 0.5rem 0;
} }
@@ -194,8 +198,35 @@
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
} }
.btn-nexus {
padding: 0.75rem 1.25rem;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
border: none;
font-family: var(--nexus-font-sans);
}
.btn-nexus.primary {
background: var(--nexus-neon);
color: #000000;
}
.btn-nexus:hover:not(:disabled) {
transform: translateY(-2px);
filter: brightness(1.1);
box-shadow: 0 4px 12px rgba(0, 255, 153, 0.3);
}
.btn-nexus:disabled {
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.3);
cursor: not-allowed;
}
.search-btn { .search-btn {
border-radius: 25px !important;
padding: 0.5rem 1.5rem !important; padding: 0.5rem 1.5rem !important;
font-size: 0.95rem !important; font-size: 0.95rem !important;
display: flex; display: flex;
@@ -207,22 +238,33 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
color: rgba(255, 255, 255, 0.7); color: #A0A0A0;
font-family: var(--nexus-font-sans);
} }
.nexus-select { .nexus-select {
background: rgba(15, 23, 42, 0.6); background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.05);
color: #ffffff; color: #ffffff;
padding: 0.5rem 1.5rem 0.5rem 1rem; padding: 0.5rem 2.5rem 0.5rem 1rem;
border-radius: 20px; border-radius: 10px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
font-family: var(--nexus-font-sans);
font-size: 0.9rem;
transition: all 0.3s ease; transition: all 0.3s ease;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1em;
} }
.nexus-select:focus { .nexus-select:focus {
border-color: var(--nexus-primary, #6366f1); border-color: var(--nexus-neon);
background-color: rgba(0, 255, 153, 0.02);
box-shadow: 0 0 10px rgba(0, 255, 153, 0.15);
} }
.results-area { .results-area {
@@ -243,10 +285,11 @@
.nexus-spinner { .nexus-spinner {
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 3px solid rgba(99, 102, 241, 0.1); border: 3px solid rgba(0, 255, 153, 0.1);
border-radius: 50%; border-radius: 50%;
border-top-color: var(--nexus-primary, #6366f1); border-top-color: var(--nexus-neon);
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
filter: drop-shadow(0 0 8px var(--nexus-neon));
} }
.welcome-state, .empty-state { .welcome-state, .empty-state {
@@ -299,7 +342,7 @@
font-size: 1.15rem; font-size: 1.15rem;
line-height: 1.7; line-height: 1.7;
color: #ffffff; color: #ffffff;
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.02);
padding: 1.5rem; padding: 1.5rem;
border-radius: 12px; border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05);
@@ -312,7 +355,7 @@
} }
.citation-card { .citation-card {
background: rgba(15, 23, 42, 0.4); background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px; border-radius: 12px;
padding: 1.25rem; padding: 1.25rem;
@@ -320,8 +363,10 @@
} }
.citation-card:hover { .citation-card:hover {
border-color: rgba(99, 102, 241, 0.3); border-color: rgba(0, 255, 153, 0.3);
transform: translateY(-2px); transform: translateY(-2px);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
} }
.citation-header { .citation-header {
@@ -334,8 +379,9 @@
.source-badge { .source-badge {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
color: var(--nexus-primary, #6366f1); color: var(--nexus-neon);
background: rgba(99, 102, 241, 0.1); background: rgba(0, 255, 153, 0.05);
border: 1px solid rgba(0, 255, 153, 0.2);
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 20px; border-radius: 20px;
} }