yumoqing/dashboard_for_sage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
dashboard_for_sage/wwwroot/shell_theme.css
yumoqing d8ec4e7142 fix: tabular row selection visibility - CSS specificity fix for dark/light themes 
- Dark theme: .tabular-cell color was overriding .tabular-row-selected color
  due to same specificity and later position. Added !important and combined
  selector .tabular-row-selected .tabular-cell to fix.
- Added background-color change for selected rows (both themes)
- Added cursor:pointer on .tabular-row for better UX
- Light theme: added blue-tinted background + darker text for selected rows
2026-05-29 13:44:46 +08:00

843 lines
19 KiB
CSS
Raw Blame History

/* Sage Modern UI Theme System
Dark/Light theme switching via CSS custom properties
Applied to <html> element data-theme attribute
*/
/* ===== Dark Theme (default) ===== */
:root,
[data-theme="dark"] {
--sage-bg-primary: #0B1120;
--sage-bg-secondary: #111827;
--sage-bg-card: #1E293B;
--sage-bg-hover: #334155;
--sage-bg-input: #0F172A;
--sage-bg-toolbar: #111827;
--sage-border-primary: #334155;
--sage-border-weak: #1E293B;
--sage-border-focus: #3B82F6;
--sage-text-primary: #F1F5F9;
--sage-text-secondary: #94A3B8;
--sage-text-muted: #64748B;
--sage-text-inverse: #0F172A;
--sage-brand: #3B82F6;
--sage-brand-hover: #2563EB;
--sage-success: #22C55E;
--sage-warning: #F59E0B;
--sage-danger: #EF4444;
--sage-info: #06B6D4;
--sage-sidebar-width: 240px;
--sage-sidebar-collapsed-width: 64px;
--sage-topbar-height: 56px;
--sage-radius: 12px;
--sage-radius-sm: 8px;
--sage-shadow-card: 0 1px 3px rgba(0,0,0,0.3);
--sage-shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
}
/* ===== Light Theme ===== */
[data-theme="light"] {
--sage-bg-primary: #F8FAFC;
--sage-bg-secondary: #FFFFFF;
--sage-bg-card: #FFFFFF;
--sage-bg-hover: #F1F5F9;
--sage-bg-input: #F8FAFC;
--sage-bg-toolbar: #FFFFFF;
--sage-border-primary: #E2E8F0;
--sage-border-weak: #F1F5F9;
--sage-border-focus: #3B82F6;
--sage-text-primary: #0F172A;
--sage-text-secondary: #475569;
--sage-text-muted: #94A3B8;
--sage-text-inverse: #FFFFFF;
--sage-brand: #3B82F6;
--sage-brand-hover: #2563EB;
--sage-success: #16A34A;
--sage-warning: #D97706;
--sage-danger: #DC2626;
--sage-info: #0891B2;
--sage-shadow-card: 0 1px 3px rgba(0,0,0,0.08);
--sage-shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
}
/* ===== Global Overrides ===== */
body {
margin: 0;
padding: 0;
background-color: var(--sage-bg-primary);
color: var(--sage-text-primary);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Ensure theme variables override bricks.css hardcoded values */
[data-theme="dark"] body {
background-color: var(--sage-bg-primary);
color: var(--sage-text-primary);
}
[data-theme="light"] body {
background-color: var(--sage-bg-primary);
color: var(--sage-text-primary);
}
/* ===== Shell Layout ===== */
.sage-shell {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--sage-bg-primary);
color: var(--sage-text-primary);
transition: background-color 0.2s ease, color 0.2s ease;
}
.sage-topbar {
height: var(--sage-topbar-height);
background-color: var(--sage-bg-secondary);
border-bottom: 1px solid var(--sage-border-primary);
display: flex;
align-items: center;
padding: 0 16px;
gap: 12px;
flex-shrink: 0;
z-index: 100;
}
.sage-body {
display: flex;
flex: 1;
overflow: hidden;
}
.sage-sidebar {
width: var(--sage-sidebar-width);
background-color: var(--sage-bg-secondary);
border-right: 1px solid var(--sage-border-primary);
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
flex-shrink: 0;
transition: width 0.3s ease, transform 0.3s ease;
position: relative;
z-index: 50;
}
.sage-sidebar.collapsed {
width: var(--sage-sidebar-collapsed-width);
}
.sage-sidebar.collapsed .sidebar-text {
opacity: 0;
width: 0;
overflow: hidden;
}
/* Menu collapsed state - hide text labels, center icons */
.menu-collapsed .filler {
display: none !important;
}
.menu-collapsed .menuitem {
justify-content: center;
padding: 8px 0;
}
.menu-collapsed .menuitem:hover {
background-color: var(--sage-bg-hover);
}
/* Mobile: sidebar as overlay */
@media (max-width: 768px) {
.sage-sidebar {
position: fixed;
left: 0;
top: var(--sage-topbar-height);
height: calc(100vh - var(--sage-topbar-height));
transform: translateX(0);
box-shadow: var(--sage-shadow-lg);
}
.sage-sidebar.collapsed {
transform: translateX(-100%);
width: var(--sage-sidebar-width); /* Keep full width when hidden on mobile */
}
.sage-main {
width: 100%;
}
}
.sage-main {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 24px;
background-color: var(--sage-bg-primary);
min-width: 0; /* Prevent flex item from overflowing */
transition: margin-left 0.3s ease;
}
/* Responsive padding for mobile */
@media (max-width: 768px) {
.sage-main {
padding: 16px;
}
}
@media (max-width: 480px) {
.sage-main {
padding: 12px;
}
}
/* ===== Stat Cards ===== */
.stat-card {
background-color: var(--sage-bg-card);
border-radius: var(--sage-radius);
padding: 20px;
border: 1px solid var(--sage-border-primary);
box-shadow: var(--sage-shadow-card);
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
cursor: pointer;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--sage-shadow-lg);
}
.stat-card .stat-icon {
width: 40px;
height: 40px;
border-radius: var(--sage-radius-sm);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.stat-card .stat-value {
font-size: 28px;
font-weight: 700;
color: var(--sage-text-primary);
line-height: 1.2;
}
.stat-card .stat-label {
font-size: 14px;
color: var(--sage-text-secondary);
margin-top: 4px;
}
.stat-card .stat-trend {
font-size: 13px;
margin-top: 8px;
}
.stat-card .stat-trend.up {
color: var(--sage-success);
}
.stat-card .stat-trend.down {
color: var(--sage-danger);
}
/* ===== Quick Links ===== */
.quick-link {
background-color: var(--sage-bg-card);
border-radius: var(--sage-radius);
padding: 20px;
border: 1px solid var(--sage-border-primary);
box-shadow: var(--sage-shadow-card);
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
cursor: pointer;
text-align: center;
}
.quick-link:hover {
transform: translateY(-2px);
box-shadow: var(--sage-shadow-lg);
border-color: var(--sage-brand);
}
/* ===== Section Headers ===== */
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.section-title {
font-size: 18px;
font-weight: 600;
color: var(--sage-text-primary);
}
/* ===== Buttons ===== */
.sage-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--sage-radius-sm);
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background-color 0.15s ease;
}
.sage-btn-primary {
background-color: var(--sage-brand);
color: #FFFFFF;
}
.sage-btn-primary:hover {
background-color: var(--sage-brand-hover);
}
.sage-btn-ghost {
background-color: transparent;
color: var(--sage-text-secondary);
border: 1px solid var(--sage-border-primary);
}
.sage-btn-ghost:hover {
background-color: var(--sage-bg-hover);
color: var(--sage-text-primary);
}
/* ===== Theme Toggle Button ===== */
.theme-toggle {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--sage-border-primary);
background-color: transparent;
color: var(--sage-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover {
background-color: var(--sage-bg-hover);
color: var(--sage-text-primary);
}
/* ===== Sidebar Toggle ===== */
.sidebar-toggle {
width: 36px;
height: 36px;
border-radius: var(--sage-radius-sm);
border: 1px solid var(--sage-border-primary);
background-color: transparent;
color: var(--sage-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease;
}
.sidebar-toggle:hover {
background-color: var(--sage-bg-hover);
color: var(--sage-text-primary);
}
/* ===== Breadcrumb ===== */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--sage-text-secondary);
}
.breadcrumb a {
color: var(--sage-text-secondary);
text-decoration: none;
}
.breadcrumb a:hover {
color: var(--sage-brand);
}
.breadcrumb .separator {
color: var(--sage-text-muted);
}
.breadcrumb .current {
color: var(--sage-text-primary);
font-weight: 500;
}
/* ===== DataViewer Overrides for theme ===== */
.tabular-row {
cursor: pointer;
}
[data-theme="dark"] .dataviewer-toolbar,
[data-theme="dark"] .tabular,
[data-theme="dark"] .data-row,
[data-theme="dark"] body {
background-color: var(--sage-bg-primary);
color: var(--sage-text-primary);
}
[data-theme="dark"] .tabular-header-row {
background-color: var(--sage-bg-secondary);
color: var(--sage-text-secondary);
border-color: var(--sage-border-primary);
}
[data-theme="dark"] .tabular-row {
color: var(--sage-text-primary);
}
[data-theme="dark"] .tabular-row:nth-child(odd) {
background-color: var(--sage-bg-card);
}
[data-theme="dark"] .tabular-row:nth-child(even) {
background-color: var(--sage-bg-secondary);
}
[data-theme="dark"] .tabular-row-selected {
background-color: var(--sage-bg-hover) !important;
}
[data-theme="dark"] .tabular-row-selected,
[data-theme="dark"] .tabular-row-selected .tabular-cell {
color: var(--sage-brand) !important;
}
/* Light theme selected row */
[data-theme="light"] .tabular-row-selected {
background-color: #E0F2FE !important;
}
[data-theme="light"] .tabular-row-selected,
[data-theme="light"] .tabular-row-selected .tabular-cell {
color: #0369A1 !important;
}
[data-theme="dark"] .tabular-cell {
border-color: var(--sage-border-weak);
color: var(--sage-text-primary);
}
[data-theme="dark"] .popup,
[data-theme="dark"] .modal,
[data-theme="dark"] .message {
background-color: var(--sage-bg-card);
color: var(--sage-text-primary);
border-color: var(--sage-border-primary);
}
[data-theme="dark"] .titlebar {
background-color: var(--sage-bg-secondary);
}
[data-theme="dark"] .inputbox {
background-color: var(--sage-bg-input);
color: var(--sage-text-primary);
border-color: var(--sage-border-primary);
}
[data-theme="dark"] .htoolbar,
[data-theme="dark"] .vtoolbar {
background-color: var(--sage-bg-toolbar);
border-color: var(--sage-border-primary);
}
[data-theme="dark"] .accordion-item {
border-color: var(--sage-border-primary);
}
[data-theme="dark"] .accordion-item:nth-child(odd) {
background-color: var(--sage-bg-card);
}
[data-theme="dark"] .accordion-item:nth-child(even) {
background-color: var(--sage-bg-secondary);
}
[data-theme="dark"] .accordion-item-header {
background-color: var(--sage-bg-secondary);
}
[data-theme="dark"] .accordion-item-info {
background-color: var(--sage-bg-card);
}
[data-theme="dark"] .accordion-item-selected {
background-color: var(--sage-bg-hover);
}
[data-theme="dark"] .accordion-item-info-selected {
background-color: var(--sage-bg-hover);
}
[data-theme="dark"] .card {
background-color: var(--sage-bg-card);
border-color: var(--sage-border-primary);
}
[data-theme="dark"] .subcard {
background-color: var(--sage-bg-secondary);
}
[data-theme="dark"] .curpos {
background-color: var(--sage-bg-hover);
}
[data-theme="dark"] .selected {
background-color: var(--sage-bg-hover);
}
[data-theme="dark"] .tabpanel {
background-color: var(--sage-bg-card);
border-color: var(--sage-border-primary);
}
[data-theme="dark"] .tabpanel-content {
background-color: var(--sage-bg-secondary);
border-color: var(--sage-border-primary);
}
[data-theme="dark"] .toolbar-button {
border-color: var(--sage-border-primary);
}
[data-theme="dark"] .toolbar-button-active {
background-color: var(--sage-bg-hover);
}
[data-theme="dark"] .auto-textarea {
background-color: var(--sage-bg-input);
color: var(--sage-text-primary);
border-color: var(--sage-border-primary);
}
[data-theme="dark"] .droparea {
border-color: var(--sage-border-primary);
color: var(--sage-text-secondary);
}
[data-theme="dark"] .droparea:hover {
border-color: var(--sage-brand);
color: var(--sage-brand);
background: var(--sage-bg-hover);
}
[data-theme="dark"] .thinking-content {
background-color: var(--sage-bg-secondary);
}
[data-theme="dark"] .resp-error {
background-color: rgba(239, 68, 68, 0.15);
color: var(--sage-danger);
}
[data-theme="dark"] .resp-content {
background-color: var(--sage-bg-card);
color: var(--sage-text-primary);
}
[data-theme="dark"] .llm_title {
background-color: var(--sage-bg-hover);
}
[data-theme="dark"] .progress-container {
background-color: var(--sage-bg-secondary);
}
[data-theme="dark"] pre {
background-color: var(--sage-bg-secondary);
color: var(--sage-text-primary);
}
[data-theme="dark"] .llm_msg {
background-color: var(--sage-bg-card);
color: var(--sage-text-primary);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .user_msg {
background-color: var(--sage-bg-hover);
color: var(--sage-text-primary);
}
[data-theme="light"] .dataviewer-toolbar,
[data-theme="light"] .tabular,
[data-theme="light"] .data-row,
[data-theme="light"] body {
background-color: var(--sage-bg-card);
color: var(--sage-text-primary);
}
[data-theme="light"] .tabular-header-row {
background-color: var(--sage-bg-hover);
color: var(--sage-text-secondary);
border-color: var(--sage-border-primary);
}
[data-theme="light"] .tabular-row {
color: var(--sage-text-primary);
}
[data-theme="light"] .tabular-row:nth-child(odd) {
background-color: #f9fafb;
}
[data-theme="light"] .tabular-row:nth-child(even) {
background-color: var(--sage-bg-card);
}
[data-theme="light"] .tabular-row-selected {
color: var(--sage-brand-hover);
}
[data-theme="light"] .tabular-cell {
border-color: var(--sage-border-weak);
color: var(--sage-text-primary);
}
[data-theme="light"] .popup,
[data-theme="light"] .modal,
[data-theme="light"] .message {
background-color: var(--sage-bg-card);
color: var(--sage-text-primary);
border-color: var(--sage-border-primary);
}
[data-theme="light"] .titlebar {
background-color: var(--sage-bg-secondary);
}
[data-theme="light"] .inputbox {
background-color: var(--sage-bg-input);
color: var(--sage-text-primary);
border-color: var(--sage-border-primary);
}
[data-theme="light"] .htoolbar,
[data-theme="light"] .vtoolbar {
background-color: var(--sage-bg-toolbar);
border-color: var(--sage-border-primary);
}
[data-theme="light"] .accordion-item {
border-color: var(--sage-border-primary);
}
[data-theme="light"] .accordion-item:nth-child(odd) {
background-color: var(--sage-bg-card);
}
[data-theme="light"] .accordion-item:nth-child(even) {
background-color: #f9fafb;
}
[data-theme="light"] .accordion-item-header {
background-color: var(--sage-bg-hover);
}
[data-theme="light"] .accordion-item-info {
background-color: var(--sage-bg-card);
}
[data-theme="light"] .accordion-item-selected {
background-color: var(--sage-bg-hover);
}
[data-theme="light"] .accordion-item-info-selected {
background-color: var(--sage-bg-hover);
}
[data-theme="light"] .card {
background-color: var(--sage-bg-card);
border-color: var(--sage-border-primary);
}
[data-theme="light"] .subcard {
background-color: #f9fafb;
}
[data-theme="light"] .curpos {
background-color: var(--sage-bg-hover);
}
[data-theme="light"] .selected {
background-color: var(--sage-bg-hover);
}
[data-theme="light"] .tabpanel {
background-color: var(--sage-bg-card);
border-color: var(--sage-border-primary);
}
[data-theme="light"] .tabpanel-content {
background-color: var(--sage-bg-secondary);
border-color: var(--sage-border-primary);
}
[data-theme="light"] .toolbar-button {
border-color: var(--sage-border-primary);
}
[data-theme="light"] .toolbar-button-active {
background-color: var(--sage-bg-hover);
}
[data-theme="light"] .auto-textarea {
background-color: var(--sage-bg-input);
color: var(--sage-text-primary);
border-color: var(--sage-border-primary);
}
[data-theme="light"] .droparea {
border-color: var(--sage-border-primary);
color: var(--sage-text-secondary);
}
[data-theme="light"] .droparea:hover {
border-color: var(--sage-brand);
color: var(--sage-brand);
background: var(--sage-bg-hover);
}
[data-theme="light"] .thinking-content {
background-color: var(--sage-bg-secondary);
}
[data-theme="light"] .resp-error {
background-color: rgba(239, 68, 68, 0.1);
color: var(--sage-danger);
}
[data-theme="light"] .resp-content {
background-color: var(--sage-bg-card);
color: var(--sage-text-primary);
}
[data-theme="light"] .llm_title {
background-color: var(--sage-bg-hover);
}
[data-theme="light"] .progress-container {
background-color: var(--sage-bg-hover);
}
[data-theme="light"] pre {
background-color: var(--sage-bg-secondary);
color: var(--sage-text-primary);
}
[data-theme="light"] .llm_msg {
background-color: var(--sage-bg-card);
color: var(--sage-text-primary);
}
[data-theme="light"] .user_msg {
background-color: var(--sage-bg-hover);
color: var(--sage-text-primary);
}
[data-theme="light"] .tabular { background-color: #f5f5f5; color: #1E293B; }
[data-theme="light"] .tabular-header-row { background-color: #E2E8F0; color: #0F172A; font-weight: 600; }
[data-theme="light"] .tabular-header-row .tabular-cell { color: #0F172A; }
[data-theme="light"] .tabular-row { color: #1E293B; }
[data-theme="light"] .tabular-row:nth-child(odd) { background-color: #FFFFFF; }
[data-theme="light"] .tabular-row:nth-child(even) { background-color: #F8FAFC; }
[data-theme="light"] .tabular-cell { border-color: #E2E8F0; color: #1E293B; }
[data-theme="light"] .card { color: #1E293B; }
[data-theme="light"] .inputbox { color: #1E293B; background-color: #FFFFFF; }
[data-theme="light"] .popup, [data-theme="light"] .modal { color: #1E293B; }
[data-theme="light"] .accordion-item-info { color: #475569; }
[data-theme="light"] .toolbar-button { color: #334155; }
[data-theme="light"] .message { color: #1E293B; }
/* ===== Menu Overrides ===== */
[data-theme="dark"] .menu-item {
color: var(--sage-text-secondary);
}
[data-theme="dark"] .menu-item:hover,
[data-theme="dark"] .menu-item.active {
background-color: var(--sage-bg-hover);
color: var(--sage-text-primary);
}
[data-theme="light"] .menu-item {
color: var(--sage-text-secondary);
}
[data-theme="light"] .menu-item:hover,
[data-theme="light"] .menu-item.active {
background-color: var(--sage-bg-hover);
color: var(--sage-brand);
}
/* ===== Utility Classes ===== */
.sage-brand-title {
color: var(--sage-text-primary);
font-weight: bold;
}
.sage-text-secondary {
color: var(--sage-text-secondary);
}
/* ===== Responsive - Topbar ===== */
@media (max-width: 768px) {
.sage-topbar {
padding: 0 8px;
gap: 6px;
}
.sage-brand-title {
font-size: 16px;
}
}
@media (max-width: 480px) {
.sage-brand-title {
display: none;
}
}
/* ===== Responsive - Stat Cards ===== */
@media (max-width: 768px) {
.stat-card {
padding: 14px;
}
.stat-card .stat-value {
font-size: 22px;
}
.stat-card .stat-label {
font-size: 12px;
}
.stat-card .stat-icon {
width: 32px;
height: 32px;
margin-bottom: 8px;
}
.quick-link {
padding: 14px;
}
.section-title {
font-size: 16px;
}
}
Reference in New Issue View Git Blame Copy Permalink