Integrate dark theme styling from main branch with Angular Material
- Apply dark blue color scheme (#0f172a, #1e293b, #334155) throughout UI - Update header with blue gradient and Obsidian branding - Add missing toolbar buttons: Auto-refresh, Seed Data, Search filter - Implement action buttons (Download, Delete) in artifacts table - Add client-side search/filtering functionality - Update app to support sim_source_id field in database - Move quickstart scripts to repository root for easier access - Apply dark theme to tables, tabs, and all Material components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
pratik
@@ -2,14 +2,18 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-toolbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
background: linear-gradient(135deg, #1e3a8a 0%, #4338ca 100%) !important;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
@@ -39,22 +43,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Tab Group Styling
|
||||
// Tab Group Styling - Dark Theme
|
||||
.main-tabs {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: white;
|
||||
background: #1e293b;
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-tab-body-wrapper {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-header {
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
|
||||
background: #0f172a;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
border-bottom: 2px solid #334155;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-labels {
|
||||
@@ -67,28 +73,47 @@
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
color: #94a3b8;
|
||||
|
||||
&:hover {
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-tab.mdc-tab--active {
|
||||
.mdc-tab__text-label {
|
||||
color: #60a5fa;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-tab-indicator {
|
||||
.mdc-tab-indicator__content--underline {
|
||||
background-color: #60a5fa;
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tab Content Wrapper
|
||||
// Tab Content Wrapper - Dark Theme
|
||||
.tab-content-wrapper {
|
||||
padding: 24px;
|
||||
padding: 30px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 180px);
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
// Content Header
|
||||
// Content Header - Dark Theme
|
||||
.content-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
@@ -97,10 +122,10 @@
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
color: #e2e8f0;
|
||||
|
||||
mat-icon {
|
||||
color: #3f51b5;
|
||||
color: #60a5fa;
|
||||
font-size: 28px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@@ -114,36 +139,109 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Artifacts Table Styling
|
||||
// Toolbar styling
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.count-badge {
|
||||
background: #1e3a8a;
|
||||
color: #93c5fd;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// Filter Search Styling
|
||||
.filter-search {
|
||||
min-width: 250px;
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-text-field-wrapper {
|
||||
background: #0f172a;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-input-control {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-label {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: #334155 !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field:hover .mdc-notched-outline__leading,
|
||||
.mat-mdc-form-field:hover .mdc-notched-outline__notch,
|
||||
.mat-mdc-form-field:hover .mdc-notched-outline__trailing {
|
||||
border-color: #60a5fa !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-icon-suffix {
|
||||
color: #64748b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Action buttons styling
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
button {
|
||||
color: #94a3b8;
|
||||
|
||||
&:hover {
|
||||
color: #e2e8f0;
|
||||
background: #334155;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Artifacts Table Styling - Dark Theme
|
||||
.artifacts-table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: #0f172a;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #334155;
|
||||
|
||||
th.mat-mdc-header-cell {
|
||||
background: #f8f9fa;
|
||||
color: #333;
|
||||
background: #1e293b;
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 16px 12px;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
padding: 14px 12px;
|
||||
border-bottom: 2px solid #334155;
|
||||
}
|
||||
|
||||
td.mat-mdc-cell {
|
||||
padding: 16px 12px;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
color: #cbd5e1;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
}
|
||||
|
||||
tr.mat-mdc-row {
|
||||
transition: background-color 0.2s ease;
|
||||
background: #0f172a;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
background-color: #1e293b;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -154,7 +252,7 @@
|
||||
font-weight: 500;
|
||||
|
||||
.file-icon {
|
||||
color: #3f51b5;
|
||||
color: #60a5fa;
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@@ -162,42 +260,58 @@
|
||||
}
|
||||
|
||||
.type-chip {
|
||||
background-color: #e3f2fd !important;
|
||||
color: #1976d2 !important;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
height: 28px;
|
||||
background-color: #1e3a8a !important;
|
||||
color: #93c5fd !important;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #999;
|
||||
color: #64748b;
|
||||
}
|
||||
}
|
||||
|
||||
// Result Chips
|
||||
// Result Chips - Dark Theme
|
||||
.result-pass {
|
||||
background-color: #e8f5e9 !important;
|
||||
color: #2e7d32 !important;
|
||||
background-color: #064e3b !important;
|
||||
color: #6ee7b7 !important;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.result-fail {
|
||||
background-color: #ffebee !important;
|
||||
color: #c62828 !important;
|
||||
background-color: #7f1d1d !important;
|
||||
color: #fca5a5 !important;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.result-skip {
|
||||
background-color: #fff3e0 !important;
|
||||
color: #ef6c00 !important;
|
||||
background-color: #78350f !important;
|
||||
color: #fcd34d !important;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.result-error {
|
||||
background-color: #fce4ec !important;
|
||||
color: #c2185b !important;
|
||||
background-color: #7f1d1d !important;
|
||||
color: #fca5a5 !important;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
|
||||
Reference in New Issue
Block a user