90 lines
2.0 KiB
SCSS
90 lines
2.0 KiB
SCSS
.panel {
|
|
--server-dock-glyph-size: var(--control-size-md);
|
|
--server-dock-action-min-height: var(--space-8);
|
|
--server-dock-border: color-mix(in srgb, var(--color-border-strong) 75%, transparent);
|
|
--server-dock-surface: color-mix(in srgb, var(--color-surface) 94%, transparent);
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
padding: var(--space-3) var(--space-3) var(--space-2);
|
|
border: 1px solid var(--server-dock-border);
|
|
border-radius: calc(var(--radius-xl) + var(--space-1));
|
|
background: var(--server-dock-surface);
|
|
box-shadow:
|
|
0 20px 48px color-mix(in srgb, black 16%, transparent),
|
|
var(--shadow-strong);
|
|
backdrop-filter: blur(var(--blur-overlay));
|
|
}
|
|
|
|
.identity {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: var(--space-3);
|
|
align-items: center;
|
|
}
|
|
|
|
.glyph {
|
|
width: var(--server-dock-glyph-size);
|
|
height: var(--server-dock-glyph-size);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-lg);
|
|
background: color-mix(in srgb, var(--color-accent-soft) 84%, transparent);
|
|
color: var(--color-accent-strong);
|
|
@include text-label;
|
|
}
|
|
|
|
.copy {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.name {
|
|
@include text-label;
|
|
}
|
|
|
|
.status,
|
|
.subtitle {
|
|
@include text-caption;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.statusDot {
|
|
width: 0.45rem;
|
|
height: 0.45rem;
|
|
flex: 0 0 auto;
|
|
border-radius: 999px;
|
|
background: var(--color-success);
|
|
box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--color-success) 18%, transparent);
|
|
}
|
|
|
|
.actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.action {
|
|
min-height: var(--server-dock-action-min-height);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-1);
|
|
@include interactive-frame(var(--color-surface-muted));
|
|
@include interactive-frame-hover();
|
|
}
|
|
|
|
.actionLabel {
|
|
@include text-caption;
|
|
}
|