update
This commit is contained in:
@@ -1,200 +1,410 @@
|
||||
/**
|
||||
* Shared styles for EcoOS UI components
|
||||
* EcoOS UI Design System
|
||||
* Based on dees-catalog design patterns
|
||||
*/
|
||||
|
||||
import { css } from '@design.estate/dees-element';
|
||||
|
||||
export const sharedStyles = css`
|
||||
:host {
|
||||
--ecoos-bg: #0a0a0a;
|
||||
--ecoos-card: #141414;
|
||||
--ecoos-border: #2a2a2a;
|
||||
--ecoos-text: #e0e0e0;
|
||||
--ecoos-text-dim: #888;
|
||||
--ecoos-accent: #3b82f6;
|
||||
--ecoos-success: #22c55e;
|
||||
--ecoos-warning: #f59e0b;
|
||||
--ecoos-error: #ef4444;
|
||||
/* Colors - dees-catalog theme (HSL) */
|
||||
--bg: hsl(0 0% 3.9%);
|
||||
--bg-elevated: hsl(0 0% 7.8%);
|
||||
--bg-hover: hsl(0 0% 14.9%);
|
||||
--border: hsl(0 0% 14.9%);
|
||||
--border-hover: hsl(0 0% 20.9%);
|
||||
--text: hsl(0 0% 95%);
|
||||
--text-secondary: hsl(215 20.2% 55.1%);
|
||||
--text-tertiary: hsl(215 20.2% 45%);
|
||||
|
||||
/* Semantic colors */
|
||||
--accent: hsl(217.2 91.2% 59.8%);
|
||||
--success: hsl(142.1 76.2% 36.3%);
|
||||
--warning: hsl(45.4 93.4% 47.5%);
|
||||
--error: hsl(0 84.2% 60.2%);
|
||||
|
||||
/* Typography scale */
|
||||
--text-xs: 11px;
|
||||
--text-sm: 12px;
|
||||
--text-base: 13px;
|
||||
--text-lg: 15px;
|
||||
--text-xl: 18px;
|
||||
--text-2xl: 24px;
|
||||
|
||||
display: block;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
color: var(--ecoos-text);
|
||||
font-size: var(--text-base);
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--ecoos-card);
|
||||
border: 1px solid var(--ecoos-border);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
/* Monospace utility */
|
||||
.mono {
|
||||
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
color: var(--ecoos-text-dim);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
/* Section - lightweight container */
|
||||
.section {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.stat {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--ecoos-text-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: var(--ecoos-border);
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--ecoos-accent);
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.status-dot.running {
|
||||
background: var(--ecoos-success);
|
||||
}
|
||||
|
||||
.status-dot.stopped {
|
||||
background: var(--ecoos-error);
|
||||
}
|
||||
|
||||
.status-dot.starting {
|
||||
background: var(--ecoos-warning);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--ecoos-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--ecoos-error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.device-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--ecoos-border);
|
||||
}
|
||||
|
||||
.device-item:last-child {
|
||||
.section:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
.section-title {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.device-type {
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: var(--ecoos-border);
|
||||
color: var(--ecoos-text-dim);
|
||||
}
|
||||
|
||||
.device-default {
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: var(--ecoos-success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.logs {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
background: #0d0d0d;
|
||||
/* Card - minimal styling */
|
||||
.card {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
/* Table styling */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.table th {
|
||||
text-align: left;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-tertiary);
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table tr:hover td {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.table .mono {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Status dot */
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.dot.success { background: var(--success); }
|
||||
.dot.warning { background: var(--warning); }
|
||||
.dot.error { background: var(--error); }
|
||||
.dot.accent { background: var(--accent); }
|
||||
|
||||
.dot.pulse {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
/* Status with dot and text */
|
||||
.status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.status.success { color: var(--success); }
|
||||
.status.warning { color: var(--warning); }
|
||||
.status.error { color: var(--error); }
|
||||
|
||||
/* Progress bar - thin */
|
||||
.progress {
|
||||
height: 3px;
|
||||
background: var(--border);
|
||||
border-radius: 1.5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
transition: width 300ms ease;
|
||||
}
|
||||
|
||||
.progress-bar.success { background: var(--success); }
|
||||
.progress-bar.warning { background: var(--warning); }
|
||||
.progress-bar.error { background: var(--error); }
|
||||
|
||||
/* Badge - compact */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
background: var(--border);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.badge.primary {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.badge.success {
|
||||
background: rgba(12, 206, 107, 0.15);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.badge.warning {
|
||||
background: rgba(245, 166, 35, 0.15);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.badge.error {
|
||||
background: rgba(238, 0, 0, 0.15);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
/* Data row - key value pair */
|
||||
.data-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.data-row + .data-row {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.data-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.data-value {
|
||||
font-family: 'SF Mono', monospace;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Stat - large value display */
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 600;
|
||||
font-family: 'SF Mono', monospace;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stat-value.sm {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
/* Grid layouts */
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.grid-auto {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
/* Flex utilities */
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gap-4 { gap: 4px; }
|
||||
.gap-6 { gap: 6px; }
|
||||
.gap-8 { gap: 8px; }
|
||||
.gap-12 { gap: 12px; }
|
||||
|
||||
/* Tabs - underline style */
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--ecoos-border);
|
||||
margin-bottom: 12px;
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 8px 16px;
|
||||
padding: 8px 12px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
color: var(--ecoos-text-dim);
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
transition: color 150ms ease;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: var(--ecoos-text);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--ecoos-accent);
|
||||
border-bottom-color: var(--ecoos-accent);
|
||||
color: var(--text);
|
||||
border-bottom-color: var(--text);
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.empty {
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Actions row */
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* Collapsible details */
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
details summary::before {
|
||||
content: '▶';
|
||||
font-size: 8px;
|
||||
transition: transform 150ms ease;
|
||||
}
|
||||
|
||||
details[open] summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
details summary:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.details-content {
|
||||
padding: 8px 0 8px 14px;
|
||||
}
|
||||
|
||||
/* Alert/Banner - slim */
|
||||
.banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
font-size: var(--text-sm);
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 112, 243, 0.1);
|
||||
border: 1px solid rgba(0, 112, 243, 0.2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.banner.success {
|
||||
background: rgba(12, 206, 107, 0.1);
|
||||
border-color: rgba(12, 206, 107, 0.2);
|
||||
}
|
||||
|
||||
.banner.warning {
|
||||
background: rgba(245, 166, 35, 0.1);
|
||||
border-color: rgba(245, 166, 35, 0.2);
|
||||
}
|
||||
|
||||
.banner.error {
|
||||
background: rgba(238, 0, 0, 0.1);
|
||||
border-color: rgba(238, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Scrollbar - minimal */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-hover);
|
||||
}
|
||||
|
||||
/* Text utilities */
|
||||
.text-xs { font-size: var(--text-xs); }
|
||||
.text-sm { font-size: var(--text-sm); }
|
||||
.text-base { font-size: var(--text-base); }
|
||||
.text-lg { font-size: var(--text-lg); }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-tertiary { color: var(--text-tertiary); }
|
||||
`;
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user