Raven Scott
fbe1751468
Release rolling / release (push) Has been cancelled
Replace stock Bootstrap modal chrome with a dark teal panel system, and give Settings Save all a Saving… / Saved state with motion-aware styles.
5351 lines
126 KiB
CSS
5351 lines
126 KiB
CSS
/* Modern CSS Variables for Dark Theme */
|
|
:root {
|
|
/* Color Palette - Modern Dark Theme */
|
|
--bg-primary: #0f1117;
|
|
--bg-secondary: #161b22;
|
|
--bg-tertiary: #1c2128;
|
|
--bg-elevated: #22272e;
|
|
--bg-hover: #2d333b;
|
|
|
|
/* Accent Colors - Modern Teal Theme */
|
|
--accent-primary: #2dd4bf;
|
|
--accent-secondary: #14b8a6;
|
|
--accent-success: #4ade80;
|
|
--accent-warning: #fbbf24;
|
|
--accent-danger: #f87171;
|
|
--accent-info: #38bdf8;
|
|
|
|
/* Text Colors — contrast-tuned for dark surfaces */
|
|
--text-primary: #f4f7fb;
|
|
--text-secondary: #c8d1df;
|
|
--text-muted: #9aa8bc;
|
|
--text-faint: #7d8b9f;
|
|
|
|
/* Border & Divider */
|
|
--border-color: rgba(255, 255, 255, 0.1);
|
|
--border-radius: 12px;
|
|
--border-radius-sm: 8px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 250ms ease;
|
|
--transition-slow: 350ms ease;
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
height: 100vh;
|
|
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Inter', sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.65;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
#titlebar {
|
|
-webkit-app-region: drag;
|
|
height: var(--titlebar-h, 42px);
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
|
|
border-bottom: 1px solid var(--border-color);
|
|
z-index: 1100;
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 12px 0 8px;
|
|
gap: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
#titlebar > *,
|
|
#titlebar .titlebar-left,
|
|
#titlebar .titlebar-right,
|
|
#titlebar pear-ctrl,
|
|
#titlebar .app-brand,
|
|
#titlebar .notification-tray,
|
|
#titlebar .connection-health-badge,
|
|
#titlebar #active-peer-chip {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
#titlebar .titlebar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
#titlebar .titlebar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
#titlebar .notification-tray {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Window controls: keep brand clear of pear-ctrl hit targets */
|
|
#titlebar pear-ctrl {
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
z-index: 5;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
min-width: 54px;
|
|
min-height: 28px;
|
|
padding: 0 4px;
|
|
overflow: visible;
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
#titlebar pear-ctrl[data-platform="darwin"] {
|
|
min-width: 78px;
|
|
margin: 0 8px 0 8px !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
#titlebar pear-ctrl[data-platform="linux"],
|
|
#titlebar pear-ctrl[data-platform="win32"] {
|
|
min-width: 110px;
|
|
}
|
|
|
|
pear-ctrl[data-platform="darwin"] {
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#titlebar .app-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-left: 4px;
|
|
min-width: 0;
|
|
flex-shrink: 1;
|
|
position: relative;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#sidebar {
|
|
position: fixed;
|
|
top: 35px;
|
|
left: 0;
|
|
background: var(--bg-secondary);
|
|
border-right: 1px solid var(--border-color);
|
|
height: calc(100vh - 35px);
|
|
width: 280px;
|
|
/* Nav scrolls inside .sidebar-nav-scroll; peers stay bottom-docked */
|
|
overflow: hidden;
|
|
transition: width var(--transition-base), box-shadow var(--transition-base);
|
|
box-shadow: var(--shadow-lg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#sidebar .content {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-nav-scroll {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
flex: 0 0 auto;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.connections-panel {
|
|
flex: 0 0 auto;
|
|
margin-top: 0;
|
|
}
|
|
|
|
#connection-list {
|
|
max-height: calc((4 * 54px) + (3 * 8px));
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#sidebar.collapsed {
|
|
width: 68px;
|
|
}
|
|
|
|
/* Keep collapsed nav icons reachable (do not hide entire .content) */
|
|
|
|
#collapse-sidebar-btn {
|
|
position: absolute;
|
|
top: var(--spacing-md);
|
|
right: var(--spacing-md);
|
|
background: var(--bg-hover);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#collapse-sidebar-btn:hover {
|
|
background: var(--bg-elevated);
|
|
transform: scale(1.05);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
#content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 280px;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
background: var(--bg-primary);
|
|
transition: margin-left var(--transition-base);
|
|
}
|
|
|
|
#sidebar.collapsed~#content {
|
|
margin-left: 68px;
|
|
}
|
|
|
|
.connection-status {
|
|
border-radius: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
display: inline-block;
|
|
margin-right: var(--spacing-sm);
|
|
box-shadow: 0 0 8px currentColor;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.status-connected {
|
|
background-color: var(--accent-success);
|
|
color: var(--accent-success);
|
|
}
|
|
|
|
.status-disconnected {
|
|
background-color: var(--accent-danger);
|
|
color: var(--accent-danger);
|
|
animation: none;
|
|
}
|
|
|
|
#terminal-modal {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
height: 300px;
|
|
background: var(--bg-secondary);
|
|
border-top: 1px solid var(--border-color);
|
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
|
|
display: none;
|
|
flex-direction: column;
|
|
z-index: 1000;
|
|
overflow: hidden;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
#terminal-modal .header {
|
|
background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
|
|
cursor: move;
|
|
padding: var(--spacing-md);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
#terminal-container {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
#tray {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: var(--bg-elevated);
|
|
border-top: 1px solid var(--border-color);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
z-index: 999;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
#tray .tray-item {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-radius: var(--border-radius-sm);
|
|
cursor: pointer;
|
|
border: 1px solid var(--border-color);
|
|
transition: all var(--transition-fast);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#tray .tray-item:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* Legacy full-screen status spinner removed — activity uses #job-drawer */
|
|
|
|
/* Sidebar Content Styling (layout flex/overflow controlled in modern.css) */
|
|
#sidebar .content {
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
#sidebar .content h4 {
|
|
color: var(--text-primary);
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
/* Connection List Item Styling */
|
|
#connection-list .list-group-item {
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
margin-bottom: var(--spacing-sm);
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--border-radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
}
|
|
|
|
#connection-list .list-group-item:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
transform: translateX(4px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
#connection-list .list-group-item.active {
|
|
background: linear-gradient(135deg, rgba(45, 212, 191, 0.2) 0%, rgba(20, 184, 166, 0.2) 100%);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
}
|
|
|
|
/* Navigation Menu */
|
|
.nav-menu {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 var(--spacing-lg) 0;
|
|
}
|
|
|
|
.nav-item {
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
border-radius: var(--border-radius-sm);
|
|
transition: all var(--transition-fast);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.nav-link.active {
|
|
background: linear-gradient(90deg, rgba(45, 212, 191, 0.2) 0%, rgba(45, 212, 191, 0.1) 100%);
|
|
color: var(--accent-primary);
|
|
border-left: 3px solid var(--accent-primary);
|
|
}
|
|
|
|
.nav-link i {
|
|
width: 20px;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.nav-label {
|
|
flex: 1;
|
|
}
|
|
|
|
.sidebar-divider {
|
|
border-color: var(--border-color);
|
|
margin: var(--spacing-md) 0;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Image Filter Buttons — segmented control (matches dark teal UI) */
|
|
.view-toolbar .btn-group[aria-label="Image filters"] {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: 3px;
|
|
gap: 2px;
|
|
}
|
|
|
|
.view-toolbar .btn-group[aria-label="Image filters"] > .image-filter-btn {
|
|
border-radius: 6px !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.image-filter-btn {
|
|
background: transparent !important;
|
|
border-color: transparent !important;
|
|
color: var(--text-secondary) !important;
|
|
transition: all var(--transition-fast);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.image-filter-btn:hover {
|
|
background: var(--bg-hover) !important;
|
|
border-color: rgba(45, 212, 191, 0.35) !important;
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.image-filter-btn.active {
|
|
background: rgba(45, 212, 191, 0.14) !important;
|
|
border-color: var(--accent-primary) !important;
|
|
color: var(--accent-primary) !important;
|
|
box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.18);
|
|
}
|
|
|
|
.image-filter-btn.active:hover {
|
|
background: rgba(45, 212, 191, 0.2) !important;
|
|
border-color: var(--accent-primary) !important;
|
|
color: var(--accent-primary) !important;
|
|
}
|
|
|
|
/* Semantic accent on icons only — not whole-button fills */
|
|
.image-filter-btn[data-filter="used"] > i {
|
|
color: var(--accent-success);
|
|
}
|
|
|
|
.image-filter-btn[data-filter="unused"] > i {
|
|
color: var(--accent-warning);
|
|
}
|
|
|
|
.image-filter-btn[data-filter="all"] > i {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.image-filter-btn.active > i {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Count pills inside filters stay muted; active inherits teal */
|
|
.image-filter-btn .badge {
|
|
background: rgba(255, 255, 255, 0.08) !important;
|
|
color: var(--text-secondary) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
font-weight: 600;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
font-size: 0.7rem;
|
|
padding: 0.2em 0.5em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.image-filter-btn.active .badge {
|
|
background: rgba(45, 212, 191, 0.18) !important;
|
|
color: var(--accent-primary) !important;
|
|
border-color: rgba(45, 212, 191, 0.25);
|
|
}
|
|
|
|
#sidebar.collapsed .nav-label,
|
|
#sidebar.collapsed .nav-group-label {
|
|
display: none;
|
|
}
|
|
|
|
#sidebar.collapsed .nav-link {
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
/* View Management */
|
|
.view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
margin-top: 35px;
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
padding: var(--spacing-lg);
|
|
box-sizing: border-box;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Kill Bootstrap table-responsive horizontal scrollbars in app views */
|
|
.view .table-responsive {
|
|
overflow-x: hidden !important;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Ensure pre/long tokens wrap inside any view or modal */
|
|
.view pre,
|
|
.modal-body pre {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.view.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
#content {
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Hide horizontal scrollbar in deploy view */
|
|
#deploy-view {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Hide horizontal scrollbar in template list container */
|
|
#deploy-template-list-container {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
/* Prevent horizontal overflow in template list */
|
|
#deploy-template-list-container .list-group {
|
|
overflow-x: hidden;
|
|
max-width: 100%;
|
|
}
|
|
|
|
#deploy-template-list-container .list-group-item {
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Dashboard Styles */
|
|
.stat-card {
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.stat-card-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: var(--border-radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stat-card-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-card-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
line-height: 1;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.stat-card-label {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.info-card {
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-lg);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.info-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.info-card-title {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
font-size: 1.125rem;
|
|
margin-bottom: var(--spacing-md);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.info-card-body {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.info-card-body .key-value {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
padding: var(--spacing-sm) 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.info-card-body .key-value:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-card-body .key {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-card-body .value {
|
|
color: var(--text-secondary);
|
|
min-width: 0;
|
|
text-align: right;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Enhanced Container Details Styles */
|
|
.detail-section-card {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-lg);
|
|
margin-bottom: var(--spacing-lg);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.detail-section-card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.detail-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-md);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.detail-section-header i {
|
|
color: var(--accent-primary);
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.detail-section-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.detail-info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: var(--spacing-md);
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.detail-info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.detail-info-label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.detail-info-label i {
|
|
font-size: 0.875rem;
|
|
color: var(--accent-info);
|
|
}
|
|
|
|
.detail-info-value {
|
|
font-size: 0.9375rem;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
word-break: break-word;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.detail-info-value code {
|
|
background: var(--bg-primary);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.875rem;
|
|
color: var(--accent-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.detail-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.detail-badge.status-running {
|
|
background: rgba(81, 207, 102, 0.2);
|
|
color: var(--accent-success);
|
|
border: 1px solid rgba(81, 207, 102, 0.3);
|
|
}
|
|
|
|
.detail-badge.status-exited {
|
|
background: rgba(255, 107, 107, 0.2);
|
|
color: var(--accent-danger);
|
|
border: 1px solid rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.detail-badge.status-paused {
|
|
background: rgba(255, 212, 59, 0.2);
|
|
color: var(--accent-warning);
|
|
border: 1px solid rgba(255, 212, 59, 0.3);
|
|
}
|
|
|
|
.detail-badge.status-restarting {
|
|
background: rgba(116, 192, 252, 0.2);
|
|
color: var(--accent-info);
|
|
border: 1px solid rgba(116, 192, 252, 0.3);
|
|
}
|
|
|
|
.copy-btn {
|
|
background: var(--bg-hover);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
transition: all var(--transition-fast);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-left: var(--spacing-xs);
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background: var(--accent-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.copy-btn i {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.detail-code-block {
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-md);
|
|
margin-top: var(--spacing-sm);
|
|
overflow-x: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.detail-code-block .copy-btn {
|
|
position: absolute;
|
|
top: var(--spacing-sm);
|
|
right: var(--spacing-sm);
|
|
}
|
|
|
|
.detail-code-block pre {
|
|
margin: 0;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.detail-code-block code {
|
|
background: transparent;
|
|
padding: 0;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.detail-env-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.detail-env-table th,
|
|
.detail-env-table td {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.detail-env-table th {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
font-size: 0.8125rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.detail-env-table td {
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.detail-env-table tr:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.detail-env-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.network-card {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-md);
|
|
margin-bottom: var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.network-card:hover {
|
|
border-color: var(--accent-primary);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.network-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--spacing-md);
|
|
padding-bottom: var(--spacing-sm);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.network-card-title {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.network-card-title i {
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.port-mapping-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.port-mapping-table th,
|
|
.port-mapping-table td {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.port-mapping-table th {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.port-mapping-table td {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.port-mapping-table tr:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.port-mapping-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.protocol-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.protocol-badge.tcp {
|
|
background: rgba(56, 189, 248, 0.2);
|
|
color: var(--accent-info);
|
|
border: 1px solid rgba(56, 189, 248, 0.3);
|
|
}
|
|
|
|
.protocol-badge.udp {
|
|
background: rgba(45, 212, 191, 0.2);
|
|
color: var(--accent-primary);
|
|
border: 1px solid rgba(45, 212, 191, 0.3);
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--spacing-xl);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 2rem;
|
|
margin-bottom: var(--spacing-md);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.detail-stat-card {
|
|
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-elevated) 100%);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-md);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.detail-stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.detail-stat-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--border-radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-stat-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.detail-stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
line-height: 1;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.detail-stat-label {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.relative-time {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Logs Tab Styles */
|
|
.logs-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 10px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--bg-tertiary);
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.logs-toolbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.logs-toolbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.logs-search-container {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1 1 10rem;
|
|
min-width: 0;
|
|
max-width: min(300px, 100%);
|
|
}
|
|
|
|
.logs-search-icon {
|
|
position: absolute;
|
|
left: var(--spacing-sm);
|
|
color: var(--text-muted);
|
|
z-index: 1;
|
|
}
|
|
|
|
.logs-search-input {
|
|
width: 100%;
|
|
padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 32px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-primary);
|
|
font-size: 0.875rem;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.logs-search-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
}
|
|
|
|
.logs-clear-search {
|
|
position: absolute;
|
|
right: var(--spacing-xs);
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logs-clear-search:hover {
|
|
color: var(--text-primary);
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.logs-filter-buttons {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.logs-filter-btn {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-secondary);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.logs-filter-btn:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.logs-filter-btn.active {
|
|
background: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
.logs-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.logs-toggle-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-secondary);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
user-select: none;
|
|
}
|
|
|
|
.logs-toggle-label:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.logs-toggle-label input[type="checkbox"] {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.logs-control-btn {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-secondary);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.logs-control-btn:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.logs-container {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
max-height: none;
|
|
height: auto;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.5;
|
|
background: var(--bg-primary);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
position: relative;
|
|
}
|
|
|
|
.logs-container::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.logs-container::-webkit-scrollbar-track {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.logs-container::-webkit-scrollbar-thumb {
|
|
background: var(--bg-hover);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.logs-container::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-primary);
|
|
}
|
|
|
|
.logs-loading {
|
|
padding: var(--spacing-xl);
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.log-line {
|
|
padding: 2px 0;
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
border-left: 3px solid transparent;
|
|
padding-left: var(--spacing-sm);
|
|
margin-left: var(--spacing-xs);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.log-line:hover {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.log-line.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.log-line.highlight {
|
|
background: rgba(255, 212, 59, 0.15);
|
|
border-left-color: var(--accent-warning);
|
|
}
|
|
|
|
.log-line.error,
|
|
.log-line[data-level="error"] {
|
|
color: var(--accent-danger);
|
|
border-left-color: var(--accent-danger);
|
|
}
|
|
|
|
.log-line.warn,
|
|
.log-line[data-level="warn"] {
|
|
color: var(--accent-warning);
|
|
border-left-color: var(--accent-warning);
|
|
}
|
|
|
|
.log-line.info,
|
|
.log-line[data-level="info"] {
|
|
color: var(--accent-info);
|
|
border-left-color: var(--accent-info);
|
|
}
|
|
|
|
.log-line.debug,
|
|
.log-line[data-level="debug"] {
|
|
color: var(--text-muted);
|
|
border-left-color: var(--text-muted);
|
|
}
|
|
|
|
.log-line.stdout {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.log-line.stderr {
|
|
color: var(--accent-danger);
|
|
}
|
|
|
|
.log-timestamp {
|
|
color: var(--text-muted);
|
|
margin-right: var(--spacing-sm);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.log-level-badge {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
margin-right: var(--spacing-sm);
|
|
}
|
|
|
|
.log-level-badge.error {
|
|
background: rgba(255, 107, 107, 0.2);
|
|
color: var(--accent-danger);
|
|
}
|
|
|
|
.log-level-badge.warn {
|
|
background: rgba(255, 212, 59, 0.2);
|
|
color: var(--accent-warning);
|
|
}
|
|
|
|
.log-level-badge.info {
|
|
background: rgba(116, 192, 252, 0.2);
|
|
color: var(--accent-info);
|
|
}
|
|
|
|
.log-level-badge.debug {
|
|
background: rgba(173, 181, 189, 0.2);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Terminal Styles */
|
|
.terminal-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 10px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--bg-tertiary);
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.terminal-toolbar-left,
|
|
.terminal-toolbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.terminal-controls-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.terminal-controls-divider {
|
|
width: 1px;
|
|
height: 24px;
|
|
background: var(--border-color);
|
|
margin: 0 var(--spacing-xs);
|
|
}
|
|
|
|
.terminal-control-btn {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-secondary);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.terminal-control-btn:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.terminal-font-size {
|
|
min-width: 30px;
|
|
text-align: center;
|
|
color: var(--text-primary);
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.terminal-theme-select {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
color: var(--text-primary);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.terminal-theme-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
}
|
|
|
|
.terminal-container-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
flex: 1 1 auto;
|
|
min-height: 180px;
|
|
height: auto;
|
|
max-height: none;
|
|
background: var(--bg-primary);
|
|
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.terminal-xterm-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
padding: var(--spacing-sm);
|
|
}
|
|
|
|
.terminal-xterm-container .xterm {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.terminal-xterm-container .xterm-viewport {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.terminal-xterm-container .xterm-screen {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Terminal Theme Variants */
|
|
.terminal-theme-dark {
|
|
--term-bg: #000000;
|
|
--term-fg: #ffffff;
|
|
--term-cursor: #ffffff;
|
|
--term-selection: #4d4d4d;
|
|
}
|
|
|
|
.terminal-theme-light {
|
|
--term-bg: #ffffff;
|
|
--term-fg: #000000;
|
|
--term-cursor: #000000;
|
|
--term-selection: #b3d4fc;
|
|
}
|
|
|
|
.terminal-theme-solarized-dark {
|
|
--term-bg: #002b36;
|
|
--term-fg: #839496;
|
|
--term-cursor: #93a1a1;
|
|
--term-selection: #073642;
|
|
}
|
|
|
|
.terminal-theme-solarized-light {
|
|
--term-bg: #fdf6e3;
|
|
--term-fg: #657b83;
|
|
--term-cursor: #586e75;
|
|
--term-selection: #eee8d5;
|
|
}
|
|
|
|
.terminal-theme-monokai {
|
|
--term-bg: #272822;
|
|
--term-fg: #f8f8f2;
|
|
--term-cursor: #f8f8f0;
|
|
--term-selection: #49483e;
|
|
}
|
|
|
|
/* Connection Name Styling */
|
|
.connection-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-size: 0.9375rem;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
/* Add peer modal form */
|
|
#add-connection-form .form-control {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
#add-connection-form .form-control:focus {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
}
|
|
|
|
.connections-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
|
|
|
|
/* Filter and Search Bar Styling */
|
|
#container-search,
|
|
#container-status-filter,
|
|
#container-sort {
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
#container-search:focus,
|
|
#container-status-filter:focus,
|
|
#container-sort:focus {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
#clear-filters {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
#welcome-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
max-width: 700px;
|
|
width: 90%;
|
|
padding: var(--spacing-xl);
|
|
background: linear-gradient(135deg, rgba(45, 212, 191, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--border-color);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: var(--shadow-xl);
|
|
animation: fadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate(-50%, -40%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
#welcome-page h1 {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: var(--spacing-md);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
#welcome-page p {
|
|
font-size: 1.125rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--spacing-sm);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
#welcome-page.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
#dashboard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
width: 100%;
|
|
margin-top: 35px;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
#dashboard.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
#alert-container {
|
|
position: fixed;
|
|
top: 50px;
|
|
right: var(--spacing-lg);
|
|
z-index: 1055;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
pointer-events: none;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.alert {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
box-shadow: var(--shadow-xl);
|
|
font-size: 14px;
|
|
animation: slideInRight 0.3s ease-out, fadeOut 4.5s ease-in forwards;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
pointer-events: auto;
|
|
border: 1px solid var(--border-color);
|
|
backdrop-filter: blur(10px);
|
|
min-width: 300px;
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0%, 90% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
.alert.success {
|
|
border-left: 4px solid var(--accent-success);
|
|
background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, var(--bg-elevated) 100%);
|
|
}
|
|
|
|
.alert.danger {
|
|
border-left: 4px solid var(--accent-danger);
|
|
background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-elevated) 100%);
|
|
}
|
|
|
|
.alert.info {
|
|
border-left: 4px solid var(--accent-info);
|
|
background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, var(--bg-elevated) 100%);
|
|
}
|
|
|
|
.alert.warning {
|
|
border-left: 4px solid var(--accent-warning);
|
|
background: linear-gradient(90deg, rgba(245, 158, 11, 0.1) 0%, var(--bg-elevated) 100%);
|
|
}
|
|
|
|
.alert .close-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
margin-left: var(--spacing-md);
|
|
padding: var(--spacing-xs);
|
|
border-radius: var(--border-radius-sm);
|
|
transition: all var(--transition-fast);
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.alert .close-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Notification Tray Styles */
|
|
.notification-tray {
|
|
position: relative;
|
|
z-index: 1060;
|
|
}
|
|
|
|
.notification-tray-toggle {
|
|
position: relative;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
color: var(--text-primary);
|
|
box-shadow: var(--shadow-sm);
|
|
backdrop-filter: blur(10px);
|
|
padding: 0;
|
|
}
|
|
|
|
.notification-tray-toggle:hover {
|
|
background: var(--bg-hover);
|
|
transform: scale(1.05);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.notification-tray-toggle i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.notification-badge {
|
|
position: absolute;
|
|
top: -6px;
|
|
right: -6px;
|
|
background: var(--accent-danger);
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 18px;
|
|
height: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
border: 2px solid var(--bg-primary);
|
|
min-width: 18px;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.notification-badge:empty {
|
|
display: none;
|
|
}
|
|
|
|
.notification-panel {
|
|
position: fixed;
|
|
top: calc(35px + var(--spacing-sm));
|
|
right: var(--spacing-md);
|
|
width: 400px;
|
|
max-width: calc(100vw - 2 * var(--spacing-lg));
|
|
max-height: calc(100vh - 35px - var(--spacing-lg));
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-md);
|
|
box-shadow: var(--shadow-xl);
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
animation: slideDown 0.3s ease-out;
|
|
z-index: 1061;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
.notification-panel::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
.notification-panel.hidden {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.notification-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.notification-panel-title {
|
|
margin: 0;
|
|
color: var(--text-primary);
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.notification-panel-actions {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.notification-action-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: var(--spacing-xs);
|
|
border-radius: var(--border-radius-sm);
|
|
transition: all var(--transition-fast);
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.notification-action-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.notification-filters {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
border-bottom: 1px solid var(--border-color);
|
|
overflow-x: auto;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
.notification-filters::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
.notification-filter-btn {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
border-radius: var(--border-radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.notification-filter-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.notification-filter-btn.active {
|
|
background: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
color: white;
|
|
}
|
|
|
|
.notification-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--spacing-sm);
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
.notification-list::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
.notification-item {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-md);
|
|
margin-bottom: var(--spacing-sm);
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
animation: slideInRight 0.3s ease-out;
|
|
}
|
|
|
|
.notification-item:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateX(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.notification-item.unread {
|
|
border-left: 4px solid var(--accent-primary);
|
|
background: linear-gradient(90deg, rgba(45, 212, 191, 0.1) 0%, var(--bg-tertiary) 100%);
|
|
}
|
|
|
|
.notification-item.unread:hover {
|
|
background: linear-gradient(90deg, rgba(45, 212, 191, 0.15) 0%, var(--bg-hover) 100%);
|
|
}
|
|
|
|
.notification-icon {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.notification-item.success .notification-icon {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
color: var(--accent-success);
|
|
}
|
|
|
|
.notification-item.danger .notification-icon {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: var(--accent-danger);
|
|
}
|
|
|
|
.notification-item.warning .notification-icon {
|
|
background: rgba(245, 158, 11, 0.2);
|
|
color: var(--accent-warning);
|
|
}
|
|
|
|
.notification-item.info .notification-icon {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
color: var(--accent-info);
|
|
}
|
|
|
|
.notification-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.notification-message {
|
|
color: var(--text-primary);
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
margin: 0 0 var(--spacing-xs) 0;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.notification-timestamp {
|
|
color: var(--text-secondary);
|
|
font-size: 0.75rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.notification-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.notification-action {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: var(--spacing-xs);
|
|
border-radius: var(--border-radius-sm);
|
|
transition: all var(--transition-fast);
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.notification-action:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.notification-empty {
|
|
text-align: center;
|
|
padding: var(--spacing-xl);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.notification-empty i {
|
|
font-size: 3rem;
|
|
margin-bottom: var(--spacing-md);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.notification-empty p {
|
|
margin: 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#alert-container {
|
|
bottom: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
.alert {
|
|
max-width: 90%;
|
|
font-size: 12px;
|
|
padding: 10px 15px;
|
|
white-space: normal;
|
|
/* Allow wrapping on small screens */
|
|
text-overflow: clip;
|
|
/* Disable ellipsis when wrapping */
|
|
}
|
|
|
|
.notification-tray {
|
|
position: relative;
|
|
}
|
|
|
|
.notification-tray-toggle {
|
|
width: 28px;
|
|
height: 28px;
|
|
min-width: 28px;
|
|
}
|
|
|
|
.notification-tray-toggle i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.notification-panel {
|
|
width: calc(100vw - 2 * var(--spacing-sm));
|
|
max-height: calc(100vh - 35px - var(--spacing-lg));
|
|
top: calc(35px + var(--spacing-sm));
|
|
right: var(--spacing-sm);
|
|
}
|
|
|
|
.notification-panel-header {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
.notification-panel-title {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.notification-filters {
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
}
|
|
|
|
.notification-filter-btn {
|
|
font-size: 0.75rem;
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
}
|
|
|
|
.notification-item {
|
|
padding: var(--spacing-sm);
|
|
}
|
|
|
|
.notification-message {
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.alert {
|
|
white-space: nowrap;
|
|
/* Re-enable nowrap for larger screens */
|
|
text-overflow: ellipsis;
|
|
/* Add ellipsis for overflowed text */
|
|
}
|
|
}
|
|
|
|
#sidebar.collapsed .btn-danger {
|
|
display: none;
|
|
}
|
|
|
|
/* Collapsed peer rows: status-only (no overflowing actions) */
|
|
#sidebar.collapsed #connection-list .list-group-item {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Skeleton loader styles */
|
|
.skeleton {
|
|
background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
|
|
background-size: 200% 100%;
|
|
animation: loading 1.5s ease-in-out infinite;
|
|
border-radius: var(--border-radius-sm);
|
|
height: 20px;
|
|
}
|
|
|
|
.skeleton-text {
|
|
width: 60%;
|
|
}
|
|
|
|
.skeleton-number {
|
|
width: 40px;
|
|
}
|
|
|
|
.skeleton-badge {
|
|
width: 80px;
|
|
height: 24px;
|
|
}
|
|
|
|
.skeleton-buttons {
|
|
width: 200px;
|
|
height: 32px;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
/* Progress bar container */
|
|
.progress-container {
|
|
background: var(--bg-elevated);
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Operation status container */
|
|
.operation-status-container {
|
|
max-width: 350px;
|
|
}
|
|
|
|
.operation-status-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--spacing-md);
|
|
margin-bottom: var(--spacing-sm);
|
|
background: var(--bg-elevated);
|
|
border-radius: var(--border-radius-sm);
|
|
border-left: 4px solid var(--border-color);
|
|
border: 1px solid var(--border-color);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.operation-status-item:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.operation-status-item.status-processing {
|
|
border-left-color: var(--accent-info);
|
|
}
|
|
|
|
.operation-status-item.status-completed {
|
|
border-left-color: var(--accent-success);
|
|
}
|
|
|
|
.operation-status-item.status-failed {
|
|
border-left-color: var(--accent-danger);
|
|
}
|
|
|
|
/* Stats visualization — compact column layout (overridden further in modern.css) */
|
|
.stats-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.stats-value {
|
|
min-width: 0;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.stats-bar-container {
|
|
flex: 0 0 auto;
|
|
height: 6px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
width: 100%;
|
|
position: relative;
|
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.stats-bar {
|
|
height: 100%;
|
|
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
|
|
border-radius: var(--border-radius-sm);
|
|
position: relative;
|
|
box-shadow: 0 0 8px currentColor;
|
|
}
|
|
|
|
.stats-bar::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
.cpu-bar {
|
|
background: linear-gradient(90deg, var(--accent-success), var(--accent-warning), var(--accent-danger));
|
|
}
|
|
|
|
.memory-bar {
|
|
background: linear-gradient(90deg, var(--accent-info), var(--accent-warning), var(--accent-danger));
|
|
}
|
|
|
|
/* General scrollbar styles for dark and modern scrollbars */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--bg-hover) var(--bg-primary);
|
|
}
|
|
|
|
/* WebKit-based browsers (Chrome, Edge, Safari) */
|
|
*::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: var(--bg-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: var(--bg-hover);
|
|
border-radius: var(--border-radius-sm);
|
|
border: 2px solid var(--bg-primary);
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-primary);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:active {
|
|
background: var(--accent-secondary);
|
|
}
|
|
|
|
/* Accordion styling for deploy modal */
|
|
.accordion-item {
|
|
background: var(--bg-elevated);
|
|
border-color: var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.accordion-button {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.accordion-button:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.accordion-button:not(.collapsed) {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
box-shadow: inset 0 -1px 0 var(--border-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.accordion-button:focus {
|
|
box-shadow: 0 0 0 0.25rem rgba(45, 212, 191, 0.25);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.accordion-body {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-secondary);
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
/* Improve form label visibility in deploy modal */
|
|
#templateDeployModalUnique .form-label,
|
|
.form-label {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
margin-bottom: var(--spacing-sm);
|
|
font-size: 0.875rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
/* Improve form control visibility in deploy modal */
|
|
#templateDeployModalUnique .form-control,
|
|
#templateDeployModalUnique .form-select,
|
|
.form-control,
|
|
.form-select {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
#templateDeployModalUnique .form-control:hover,
|
|
#templateDeployModalUnique .form-select:hover,
|
|
.form-control:hover,
|
|
.form-select:hover {
|
|
border-color: var(--accent-primary);
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
#templateDeployModalUnique .form-control:focus,
|
|
#templateDeployModalUnique .form-select:focus,
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
/* Improve help text visibility */
|
|
#templateDeployModalUnique .text-muted,
|
|
.text-muted {
|
|
color: var(--text-muted) !important;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
/* Improve small text visibility */
|
|
#templateDeployModalUnique small,
|
|
small {
|
|
color: var(--text-muted);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
/* Improve button visibility */
|
|
#templateDeployModalUnique .btn-outline-primary,
|
|
.btn-outline-primary {
|
|
border-color: var(--accent-primary);
|
|
color: var(--accent-primary);
|
|
transition: all var(--transition-fast);
|
|
border-width: 1.5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#templateDeployModalUnique .btn-outline-primary:hover,
|
|
.btn-outline-primary:hover {
|
|
background: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
color: #042f1a;
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* Ensure helper / muted copy stays readable on dark panels */
|
|
.page-subtitle,
|
|
.info-card-body .text-muted,
|
|
.accordion-body .text-muted,
|
|
.modal-body .text-muted {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
.list-group-item,
|
|
.list-group-item.bg-dark {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.list-group-item .text-muted,
|
|
.list-group-item small {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
/* Improve input placeholder visibility */
|
|
#templateDeployModalUnique .form-control::placeholder,
|
|
#templateDeployModalUnique .form-select::placeholder,
|
|
.form-control::placeholder,
|
|
.form-select::placeholder {
|
|
color: var(--text-muted);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Preset field styling */
|
|
.preset-field {
|
|
background-color: var(--bg-secondary) !important;
|
|
border-color: var(--border-color) !important;
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.preset-field:disabled {
|
|
background-color: var(--bg-secondary) !important;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Slider container styling */
|
|
.slider-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.slider-input {
|
|
width: 100%;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background: var(--bg-tertiary);
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.slider-input::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: var(--accent-primary);
|
|
cursor: pointer;
|
|
border: 2px solid var(--bg-elevated);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.slider-input::-webkit-slider-thumb:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.slider-input::-moz-range-thumb {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: var(--accent-primary);
|
|
cursor: pointer;
|
|
border: 2px solid var(--bg-elevated);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.slider-input::-moz-range-thumb:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.slider-input:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.slider-value-display {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.slider-number-input {
|
|
max-width: 120px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Environment variable item styling */
|
|
.env-var-item {
|
|
padding: var(--spacing-md);
|
|
background: var(--bg-tertiary);
|
|
border-radius: var(--border-radius-sm);
|
|
border: 1px solid var(--border-color);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.env-var-item .form-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
/* Validation error styling */
|
|
.validation-error {
|
|
color: var(--accent-danger);
|
|
font-size: 0.75rem;
|
|
margin-top: var(--spacing-xs);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.validation-error::before {
|
|
content: "⚠";
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-control.is-invalid,
|
|
.form-select.is-invalid {
|
|
border-color: var(--accent-danger);
|
|
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
|
|
}
|
|
|
|
.form-control.is-valid,
|
|
.form-select.is-valid {
|
|
border-color: var(--accent-success);
|
|
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
|
|
}
|
|
|
|
/* Tooltip/help text styling */
|
|
.env-var-item small.text-muted {
|
|
display: block;
|
|
margin-top: var(--spacing-xs);
|
|
line-height: 1.4;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Checkbox/switch styling for boolean env vars */
|
|
.form-check-input:checked {
|
|
background-color: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.form-check-input:focus {
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
|
|
}
|
|
|
|
/* Select dropdown styling */
|
|
.form-select {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
background-size: 16px 12px;
|
|
}
|
|
|
|
.form-select:disabled {
|
|
background-color: var(--bg-secondary);
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Form control styling in dark mode */
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
background-color: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Array item styling */
|
|
.array-item {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.array-item input {
|
|
flex: 1;
|
|
}
|
|
|
|
.array-item .btn-sm {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Modern List Group Styling */
|
|
.list-group-item {
|
|
position: relative;
|
|
display: block;
|
|
padding: var(--spacing-md);
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.list-group-item:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateX(4px);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.text-primary {
|
|
color: var(--accent-primary) !important;
|
|
}
|
|
|
|
.list-group {
|
|
--bs-list-group-color: var(--text-primary);
|
|
--bs-list-group-bg: transparent;
|
|
--bs-list-group-border-color: transparent;
|
|
--bs-list-group-border-width: 0;
|
|
--bs-list-group-border-radius: var(--border-radius-sm);
|
|
--bs-list-group-item-padding-x: var(--spacing-md);
|
|
--bs-list-group-item-padding-y: var(--spacing-md);
|
|
--bs-list-group-action-color: var(--text-secondary);
|
|
--bs-list-group-action-hover-color: var(--text-primary);
|
|
--bs-list-group-action-hover-bg: var(--bg-hover);
|
|
--bs-list-group-action-active-color: var(--text-primary);
|
|
--bs-list-group-action-active-bg: var(--bg-hover);
|
|
--bs-list-group-disabled-color: var(--text-muted);
|
|
--bs-list-group-disabled-bg: var(--bg-tertiary);
|
|
--bs-list-group-active-color: var(--text-primary);
|
|
--bs-list-group-active-bg: var(--accent-primary);
|
|
--bs-list-group-active-border-color: var(--accent-primary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
/* Modern Table Styling */
|
|
.table-dark {
|
|
--bs-table-bg: var(--bg-elevated);
|
|
--bs-table-color: var(--text-primary);
|
|
--bs-table-border-color: var(--border-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.table-dark thead th {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.05em;
|
|
padding: var(--spacing-md);
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
.table-dark tbody tr {
|
|
background: var(--bg-elevated);
|
|
border-bottom: 1px solid var(--border-color);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.table-dark tbody tr:hover {
|
|
background: var(--bg-hover);
|
|
transform: scale(1.001);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.table-dark tbody td {
|
|
padding: var(--spacing-md);
|
|
vertical-align: middle;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.table-striped > tbody > tr:nth-of-type(odd) {
|
|
--bs-table-accent-bg: rgba(45, 212, 191, 0.03);
|
|
}
|
|
|
|
/* Clickable Container Name Link */
|
|
.container-name-link {
|
|
color: var(--accent-primary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: inline-block;
|
|
}
|
|
|
|
.container-name-link:hover {
|
|
color: var(--accent-secondary);
|
|
text-decoration: underline;
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.container-name-link:active {
|
|
color: var(--accent-info);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.container-name-link:focus {
|
|
outline: 2px solid var(--accent-primary);
|
|
outline-offset: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Chart Wrapper Styles - Prevent vertical growth */
|
|
.chart-wrapper {
|
|
height: 250px;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.chart-wrapper canvas {
|
|
max-height: 100%;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* Modern Button Styles */
|
|
.btn {
|
|
border-radius: var(--border-radius-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
font-weight: 500;
|
|
transition: all var(--transition-fast);
|
|
border-width: 1.5px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
color: var(--bg-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--accent-secondary);
|
|
border-color: var(--accent-secondary);
|
|
box-shadow: 0 4px 12px rgba(45, 212, 191, 0.4);
|
|
}
|
|
|
|
.btn-outline-success {
|
|
border-color: var(--accent-success);
|
|
color: var(--accent-success);
|
|
}
|
|
|
|
.btn-outline-success:hover {
|
|
background: var(--accent-success);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-outline-danger {
|
|
border-color: var(--accent-danger);
|
|
color: var(--accent-danger);
|
|
}
|
|
|
|
.btn-outline-danger:hover {
|
|
background: var(--accent-danger);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-outline-warning {
|
|
border-color: rgba(251, 191, 36, 0.32);
|
|
color: #e8c878;
|
|
}
|
|
|
|
.btn-outline-warning:hover {
|
|
background: rgba(251, 191, 36, 0.1);
|
|
border-color: rgba(251, 191, 36, 0.5);
|
|
color: #fef3c7;
|
|
}
|
|
|
|
.btn-outline-info {
|
|
border-color: var(--accent-info);
|
|
color: var(--accent-info);
|
|
}
|
|
|
|
.btn-outline-info:hover {
|
|
background: var(--accent-info);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Secondary outline — page-level utility actions (Prune, cache, etc.) */
|
|
.btn-outline-secondary {
|
|
border-color: rgba(255, 255, 255, 0.14);
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
}
|
|
|
|
.btn-outline-secondary:hover {
|
|
background: var(--bg-hover);
|
|
border-color: rgba(255, 255, 255, 0.22);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Modal Styling — base layer (modern.css extends the full system) */
|
|
.modal-content {
|
|
background: linear-gradient(165deg, #1a2332 0%, #121820 50%, #0e141c 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.09);
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
0 28px 64px rgba(0, 0, 0, 0.55),
|
|
0 0 0 1px rgba(45, 212, 191, 0.06),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-header {
|
|
background: transparent;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 0;
|
|
padding: 1.15rem 1.35rem 1rem;
|
|
}
|
|
|
|
.modal-title {
|
|
color: var(--text-primary);
|
|
font-weight: 700;
|
|
font-size: 1.05rem;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.modal-body {
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
padding: 1.25rem 1.35rem 1.1rem;
|
|
}
|
|
|
|
.modal-footer {
|
|
background: rgba(0, 0, 0, 0.22);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 0;
|
|
padding: 0.9rem 1.35rem;
|
|
gap: 0.55rem;
|
|
}
|
|
|
|
.btn-close-white {
|
|
filter: invert(1) grayscale(100%) brightness(200%);
|
|
}
|
|
|
|
/* Status Badge Styling */
|
|
.badge {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
border-radius: var(--border-radius-sm);
|
|
font-weight: 600;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Container Status Badges */
|
|
.status-running {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
color: var(--accent-success);
|
|
border: 1px solid var(--accent-success);
|
|
}
|
|
|
|
.status-exited {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: var(--accent-danger);
|
|
border: 1px solid var(--accent-danger);
|
|
}
|
|
|
|
.status-created {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
color: var(--accent-info);
|
|
border: 1px solid var(--accent-info);
|
|
}
|
|
|
|
.status-restarting {
|
|
background: rgba(245, 158, 11, 0.2);
|
|
color: var(--accent-warning);
|
|
border: 1px solid var(--accent-warning);
|
|
}
|
|
|
|
/* Connection Item Enhanced Styling — buttons stay pinned; labels ellipsize */
|
|
.connection-item {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
margin: 0 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.connection-info {
|
|
display: block;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.connection-name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.connection-item .connection-actions {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.connection-item .btn-group {
|
|
flex-wrap: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.connection-item .col-5 {
|
|
min-width: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Responsive Design Improvements */
|
|
@media (max-width: 1200px) {
|
|
#sidebar {
|
|
width: 240px;
|
|
}
|
|
|
|
#sidebar.collapsed {
|
|
width: 68px;
|
|
}
|
|
|
|
#content {
|
|
margin-left: 240px;
|
|
}
|
|
|
|
#sidebar.collapsed~#content {
|
|
margin-left: 68px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#alert-container {
|
|
right: var(--spacing-sm);
|
|
left: var(--spacing-sm);
|
|
max-width: calc(100% - 2 * var(--spacing-sm));
|
|
}
|
|
|
|
.alert {
|
|
min-width: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
#dashboard {
|
|
padding: var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* Animation for page transitions */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Loading state improvements */
|
|
.spinner-border {
|
|
border-color: var(--accent-primary);
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
/* Additional utility classes */
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Container Inspect Modal Styling */
|
|
#inspect-json-content {
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.inspect-key-value {
|
|
display: flex;
|
|
padding: var(--spacing-sm) 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.inspect-key-value:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.inspect-key {
|
|
font-weight: 600;
|
|
color: var(--accent-primary);
|
|
min-width: 200px;
|
|
flex-shrink: 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.inspect-value {
|
|
color: var(--text-secondary);
|
|
flex: 1;
|
|
word-break: break-word;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.inspect-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.inspect-list-item {
|
|
padding: var(--spacing-xs) 0;
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem;
|
|
border-left: 2px solid var(--border-color);
|
|
padding-left: var(--spacing-sm);
|
|
margin-left: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.inspect-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
margin-right: var(--spacing-xs);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.inspect-badge-success {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
color: var(--accent-success);
|
|
border: 1px solid var(--accent-success);
|
|
}
|
|
|
|
.inspect-badge-danger {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: var(--accent-danger);
|
|
border: 1px solid var(--accent-danger);
|
|
}
|
|
|
|
/* Port Mapping Structured Input Styles */
|
|
.port-mapping-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.port-mapping-fields {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.port-field-group {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.port-field-label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.port-connector {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 1.75rem;
|
|
color: var(--accent-primary);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.port-error-msg {
|
|
display: block;
|
|
color: var(--accent-danger);
|
|
font-size: 0.75rem;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Volume Mount Structured Input Styles */
|
|
.volume-mount-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md);
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.volume-mount-fields {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.volume-field-group {
|
|
flex: 1;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.volume-field-label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.volume-connector {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 1.75rem;
|
|
color: var(--accent-primary);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.volume-error-msg {
|
|
display: block;
|
|
color: var(--accent-danger);
|
|
font-size: 0.75rem;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.volume-host-path-group .input-group {
|
|
display: flex;
|
|
}
|
|
|
|
.volume-host-path-group .input-group .form-control {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Validation States */
|
|
.is-invalid {
|
|
border-color: var(--accent-danger) !important;
|
|
}
|
|
|
|
.is-invalid:focus {
|
|
border-color: var(--accent-danger) !important;
|
|
box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25) !important;
|
|
}
|
|
|
|
/* File Browser Styles */
|
|
#fileBrowserModal .modal-body {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
#fileBrowserBreadcrumb {
|
|
background: var(--bg-tertiary);
|
|
padding: var(--spacing-sm);
|
|
border-radius: var(--border-radius-sm);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
#fileBrowserBreadcrumb .breadcrumb {
|
|
margin-bottom: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
#fileBrowserBreadcrumb .breadcrumb-item a {
|
|
color: var(--accent-primary);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
#fileBrowserBreadcrumb .breadcrumb-item a:hover {
|
|
color: var(--accent-secondary);
|
|
}
|
|
|
|
#fileBrowserBreadcrumb .breadcrumb-item.active {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.file-browser-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.file-browser-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.file-browser-item:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-primary);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.file-browser-item i {
|
|
font-size: 1.125rem;
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.file-browser-item span {
|
|
flex: 1;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.file-browser-item .fa-chevron-right {
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.port-mapping-fields,
|
|
.volume-mount-fields {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.port-connector,
|
|
.volume-connector {
|
|
padding-top: 0;
|
|
transform: rotate(90deg);
|
|
margin: var(--spacing-xs) 0;
|
|
}
|
|
|
|
.port-field-group,
|
|
.volume-field-group {
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
|
|
.inspect-badge-info {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
color: var(--accent-info);
|
|
border: 1px solid var(--accent-info);
|
|
}
|
|
|
|
.inspect-badge-warning {
|
|
background: rgba(245, 158, 11, 0.2);
|
|
color: var(--accent-warning);
|
|
border: 1px solid var(--accent-warning);
|
|
}
|
|
|
|
.inspect-section-empty {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
padding: var(--spacing-md);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ─── Container details: dense layout, fill-height panes ─── */
|
|
#container-details-view {
|
|
overflow: hidden;
|
|
padding: 12px 16px 12px;
|
|
}
|
|
|
|
#container-details-view > .container-details-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.container-details-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 10px 12px;
|
|
flex-shrink: 0;
|
|
margin-bottom: 8px;
|
|
min-height: 2.25rem;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
/* Prefer a single toolbar row; stack as whole left/right units only when needed */
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.container-details-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px 10px;
|
|
min-width: 0;
|
|
flex: 0 1 auto;
|
|
max-width: min(40%, 22rem);
|
|
}
|
|
|
|
.container-details-back {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.container-details-header h2 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 1.15rem;
|
|
font-weight: 650;
|
|
line-height: 1.25;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
margin: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.container-details-header h2 > i {
|
|
flex-shrink: 0;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.container-details-title-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* State badge sits between title and actions — same row, vertically centered */
|
|
#container-details-state-badge,
|
|
.container-details-state-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
align-self: center;
|
|
max-width: 8rem;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
#container-details-state-badge[hidden],
|
|
.container-details-state-badge[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.container-details-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
/* Keep Start…Remove on one line; scroll if the pane is too narrow */
|
|
flex-wrap: nowrap;
|
|
gap: 6px;
|
|
flex: 1 1 auto;
|
|
justify-content: flex-end;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: thin;
|
|
padding-bottom: 1px; /* room for thin scrollbar without layout jump */
|
|
}
|
|
|
|
.container-details-actions .btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
font-weight: 600;
|
|
flex: 0 0 auto;
|
|
min-height: 1.85rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.container-details-actions .btn:disabled {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.container-details-action-sep,
|
|
.container-details-actions .containers-action-sep {
|
|
width: 1px;
|
|
height: 22px;
|
|
background: var(--border-color);
|
|
margin: 0 2px;
|
|
flex-shrink: 0;
|
|
align-self: center;
|
|
}
|
|
|
|
/* Viewport fallback when container queries unavailable / full-window */
|
|
@media (max-width: 960px) {
|
|
.container-details-actions .btn span {
|
|
display: none;
|
|
}
|
|
.container-details-actions .btn {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
min-width: 2rem;
|
|
}
|
|
}
|
|
|
|
/* Narrow windows: title row, then badge + actions still one aligned toolbar */
|
|
@media (max-width: 720px) {
|
|
.container-details-header {
|
|
flex-wrap: wrap;
|
|
row-gap: 8px;
|
|
}
|
|
.container-details-header-left {
|
|
flex: 1 1 100%;
|
|
max-width: 100%;
|
|
}
|
|
#container-details-state-badge,
|
|
.container-details-state-badge {
|
|
order: 2;
|
|
}
|
|
.container-details-actions {
|
|
order: 3;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.container-details-tabs {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
margin-bottom: 8px !important;
|
|
border-bottom-color: var(--border-color);
|
|
gap: 2px;
|
|
/* Horizontal scroll when narrow — avoid wrapping that steals height / clips labels */
|
|
flex-wrap: nowrap !important;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
width: 100%;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: thin;
|
|
overscroll-behavior-x: contain;
|
|
}
|
|
|
|
.container-details-tabs .nav-item {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.container-details-tabs .nav-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.35rem 0.7rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
border-radius: 8px 8px 0 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.container-details-tabs .nav-link i {
|
|
font-size: 0.85em;
|
|
opacity: 0.9;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.container-details-tabs .nav-link span {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.container-details-tab-content {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
/* Active pane fills remaining viewport height */
|
|
#container-details-tab-content > .tab-pane {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
#container-details-tab-content > .tab-pane.show.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.detail-tab-body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Overview: fill remaining viewport; scroll when content exceeds pane */
|
|
#overview-pane.tab-pane.show.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
#overview-pane .detail-tab-body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.detail-tab-body.detail-scroll-body,
|
|
.detail-scroll-body {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
min-height: 0;
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Single fill panel for logs / terminal / processes */
|
|
.detail-fill-panel {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: hidden;
|
|
margin: 0;
|
|
}
|
|
|
|
.detail-panel-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--bg-tertiary);
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.detail-panel-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Dense section cards inside detail tabs */
|
|
#container-details-view .detail-section-card {
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: 10px 12px;
|
|
margin-bottom: 8px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#container-details-view .detail-section-card:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#container-details-view .detail-section-card:hover {
|
|
transform: none;
|
|
box-shadow: none;
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
#container-details-view .detail-section-card--flat {
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
#container-details-view .detail-section-header {
|
|
gap: 6px;
|
|
margin-bottom: 8px;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
#container-details-view .detail-section-header i {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
#container-details-view .detail-section-title {
|
|
font-size: 0.8125rem;
|
|
font-weight: 650;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
#container-details-view .detail-info-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 8px 14px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
#container-details-view .detail-info-item {
|
|
gap: 2px;
|
|
}
|
|
|
|
#container-details-view .detail-info-label {
|
|
font-size: 0.6875rem;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
#container-details-view .detail-info-value {
|
|
font-size: 0.875rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
#container-details-view .detail-code-block {
|
|
padding: 8px 10px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
#container-details-view .detail-code-block pre {
|
|
font-size: 0.75rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
#container-details-view .detail-env-table {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#container-details-view .detail-env-table th,
|
|
#container-details-view .detail-env-table td,
|
|
#container-details-view .port-mapping-table th,
|
|
#container-details-view .port-mapping-table td {
|
|
padding: 5px 8px;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
#container-details-view .network-card {
|
|
padding: 8px 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#container-details-view .network-card:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#container-details-view .network-card-header {
|
|
margin-bottom: 6px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
#container-details-view .empty-state {
|
|
padding: 12px;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
#container-details-view .empty-state i {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
#container-details-view .stat-card {
|
|
padding: 10px 12px;
|
|
gap: 10px;
|
|
}
|
|
|
|
#container-details-view .stat-card-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#container-details-view .stat-card-value {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#container-details-view .stat-card-label {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
/* Overview card — at least fill pane; grow with content so parent can scroll */
|
|
.detail-overview-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
min-height: 100%;
|
|
flex: 0 0 auto;
|
|
height: auto;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#overview-pane .detail-section-card.detail-section-card--flat,
|
|
#overview-pane .detail-overview-card {
|
|
flex: 0 0 auto;
|
|
min-height: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 0;
|
|
padding: 14px 16px 12px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.025) 0%,
|
|
transparent 40%
|
|
),
|
|
var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.detail-overview-hero {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 0;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-overview-hero-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.detail-overview-name {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.detail-overview-hero-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.detail-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.detail-pill--warn {
|
|
color: var(--accent-warning);
|
|
border-color: rgba(245, 158, 11, 0.35);
|
|
background: rgba(245, 158, 11, 0.1);
|
|
}
|
|
|
|
.detail-pill--danger {
|
|
color: var(--accent-danger);
|
|
border-color: rgba(248, 113, 113, 0.35);
|
|
background: rgba(248, 113, 113, 0.1);
|
|
}
|
|
|
|
/* Metric strip — slightly roomier */
|
|
.detail-metric-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-metric-chip {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
min-width: 0;
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
|
|
.detail-metric-chip:hover {
|
|
border-color: rgba(45, 212, 191, 0.28);
|
|
}
|
|
|
|
.detail-metric-chip i {
|
|
font-size: 0.75rem;
|
|
color: var(--accent-primary);
|
|
margin-bottom: 2px;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.detail-metric-label {
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.detail-metric-value {
|
|
font-size: 0.9375rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* Primary: Identity / Runtime / Network — content height (no crush/overlap) */
|
|
.detail-overview-primary {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
min-height: 0;
|
|
flex: 0 0 auto;
|
|
align-content: start;
|
|
align-items: start;
|
|
}
|
|
|
|
/* Secondary: Ports / Mounts / Timeline — content-height band (no empty voids) */
|
|
.detail-overview-secondary {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
flex: 0 0 auto;
|
|
min-height: 0;
|
|
align-items: start;
|
|
}
|
|
|
|
.detail-overview-panels {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.detail-overview-section {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
height: auto;
|
|
max-width: 100%;
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
background: rgba(0, 0, 0, 0.18);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.detail-overview-section--soft {
|
|
height: auto;
|
|
min-height: 7.5rem;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.detail-overview-section-title {
|
|
margin: 0 0 10px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
font-size: 0.6875rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-overview-section-title i {
|
|
color: var(--accent-primary);
|
|
font-size: 0.8rem;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
/* Stack key/values top-down — never space-evenly (that crushes/overlaps when short) */
|
|
.detail-overview-primary .detail-kv-grid--compact {
|
|
flex: 0 0 auto;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
gap: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.detail-overview-secondary .detail-chip-row,
|
|
.detail-overview-secondary .detail-timeline,
|
|
.detail-overview-secondary .detail-overview-empty {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.detail-kv-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 2px 16px;
|
|
}
|
|
|
|
.detail-kv-grid--compact {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.detail-kv {
|
|
display: grid;
|
|
grid-template-columns: minmax(5.5rem, 6.5rem) minmax(0, 1fr);
|
|
gap: 10px;
|
|
align-items: start;
|
|
padding: 7px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
|
min-width: 0;
|
|
}
|
|
|
|
.detail-kv-grid--compact .detail-kv {
|
|
grid-template-columns: minmax(4.5rem, 5.5rem) minmax(0, 1fr);
|
|
gap: 8px 10px;
|
|
padding: 6px 0;
|
|
align-items: start;
|
|
}
|
|
|
|
.detail-overview-primary .detail-kv {
|
|
border-bottom-color: rgba(255, 255, 255, 0.045);
|
|
}
|
|
|
|
.detail-kv:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.detail-kv-label {
|
|
font-size: 0.6875rem;
|
|
font-weight: 650;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-muted);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.detail-kv-grid--compact .detail-kv-label {
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
letter-spacing: 0.03em;
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.detail-kv-grid--compact .detail-kv-label i {
|
|
flex-shrink: 0;
|
|
width: 0.9em;
|
|
text-align: center;
|
|
}
|
|
|
|
.detail-kv-grid--compact .detail-kv-value {
|
|
min-width: 0;
|
|
}
|
|
|
|
.detail-kv-label i {
|
|
font-size: 0.75rem;
|
|
color: var(--accent-info);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.detail-kv-value {
|
|
font-size: 0.875rem;
|
|
font-weight: 550;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 4px 6px;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
line-height: 1.35;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.detail-kv-grid--compact .detail-kv-value {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.detail-kv-value code,
|
|
.detail-kv-value .detail-kv-value--wrap {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.detail-kv-value--wrap {
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
display: inline;
|
|
}
|
|
|
|
/* Chips inside Network "Nets" must not blow the grid cell */
|
|
.detail-kv-value .detail-chip {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.detail-chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.detail-chip-row--flow {
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.detail-chip-row--stack {
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.detail-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
padding: 4px 9px;
|
|
border-radius: 7px;
|
|
font-size: 0.75rem;
|
|
font-weight: 550;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
color: var(--text-secondary);
|
|
background: rgba(0, 0, 0, 0.28);
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Mount paths as readable rows */
|
|
.detail-mount-item {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px 8px;
|
|
width: 100%;
|
|
padding: 7px 10px;
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.22);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
font-size: 0.75rem;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
color: var(--text-secondary);
|
|
min-width: 0;
|
|
}
|
|
|
|
.detail-mount-src {
|
|
color: var(--text-muted);
|
|
overflow-wrap: anywhere;
|
|
word-break: break-all;
|
|
min-width: 0;
|
|
}
|
|
|
|
.detail-mount-arrow {
|
|
font-size: 0.6rem;
|
|
color: var(--accent-primary);
|
|
opacity: 0.85;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-mount-dst {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-all;
|
|
min-width: 0;
|
|
}
|
|
|
|
.detail-mount-ro {
|
|
margin-left: auto;
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--accent-warning);
|
|
background: rgba(245, 158, 11, 0.12);
|
|
border: 1px solid rgba(245, 158, 11, 0.25);
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
}
|
|
|
|
.detail-overview-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
min-height: 3.5rem;
|
|
padding: 12px 8px;
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.detail-overview-empty i {
|
|
font-size: 1rem;
|
|
opacity: 0.45;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Timeline band */
|
|
.detail-timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 2px 0 0 4px;
|
|
}
|
|
|
|
.detail-timeline-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.detail-timeline-item:not(:last-child)::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 4px;
|
|
top: 12px;
|
|
bottom: -10px;
|
|
width: 1px;
|
|
background: rgba(45, 212, 191, 0.25);
|
|
}
|
|
|
|
.detail-timeline-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
margin-top: 4px;
|
|
border-radius: 50%;
|
|
background: var(--bg-tertiary);
|
|
border: 2px solid rgba(45, 212, 191, 0.45);
|
|
flex-shrink: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.detail-timeline-dot--active {
|
|
background: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
|
|
}
|
|
|
|
.detail-timeline-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.detail-timeline-label {
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.detail-timeline-value {
|
|
font-size: 0.8125rem;
|
|
font-weight: 550;
|
|
color: var(--text-primary);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.detail-timeline-meta .relative-time {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.detail-overview-command {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 12px;
|
|
border-radius: 10px;
|
|
background: rgba(0, 0, 0, 0.28);
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
min-width: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-overview-command .detail-kv-label {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-command-line {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 0.8125rem;
|
|
color: var(--accent-primary);
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.detail-overview-primary,
|
|
.detail-overview-secondary {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.detail-overview-primary {
|
|
flex: 0 0 auto;
|
|
}
|
|
.detail-metric-row {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
/* Tall windows: fill leftover vertical space without re-spacing rows (avoids overlap) */
|
|
@media (min-width: 1101px) and (min-height: 820px) {
|
|
#overview-pane .detail-overview-card {
|
|
flex: 1 0 auto;
|
|
min-height: 100%;
|
|
}
|
|
.detail-overview-primary {
|
|
flex: 1 1 auto;
|
|
align-items: stretch;
|
|
}
|
|
.detail-overview-primary > .detail-overview-section {
|
|
height: 100%;
|
|
min-height: 12rem;
|
|
}
|
|
/* Keep rows top-aligned; empty space stays below the list */
|
|
.detail-overview-primary .detail-kv-grid--compact {
|
|
flex: 0 0 auto;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.detail-overview-primary {
|
|
flex: 0 0 auto;
|
|
}
|
|
.detail-overview-primary .detail-kv-grid--compact {
|
|
justify-content: flex-start;
|
|
}
|
|
.detail-metric-row {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.detail-kv-grid--compact .detail-kv {
|
|
grid-template-columns: 1fr;
|
|
gap: 2px 0;
|
|
}
|
|
}
|
|
|
|
.detail-kv-value .relative-time {
|
|
display: inline;
|
|
margin-top: 0;
|
|
margin-left: 2px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.detail-kv-value code,
|
|
#container-details-view .detail-info-value code {
|
|
font-size: 0.8125rem;
|
|
padding: 1px 5px;
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
|
|
#container-details-view .copy-btn {
|
|
padding: 2px 6px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#container-details-view .detail-badge {
|
|
padding: 2px 8px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Tables inside processes: denser */
|
|
#container-top-content {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
padding: 0 4px 4px;
|
|
}
|
|
|
|
#container-top-content table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#container-top-content .table > :not(caption) > * > * {
|
|
padding: 0.35rem 0.55rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
/* ─── Processes filter form ─── */
|
|
.procs-toolbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.procs-toolbar-actions .btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.procs-result-count {
|
|
font-size: 0.75rem;
|
|
font-weight: 650;
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
min-height: 1.5rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.procs-result-count:empty {
|
|
display: none;
|
|
}
|
|
|
|
.procs-result-count[data-active='1'] {
|
|
color: var(--accent-primary);
|
|
border-color: rgba(45, 212, 191, 0.35);
|
|
background: rgba(45, 212, 191, 0.08);
|
|
}
|
|
|
|
.procs-result-count[data-active='empty'] {
|
|
color: var(--accent-warning);
|
|
border-color: rgba(245, 158, 11, 0.35);
|
|
background: rgba(245, 158, 11, 0.08);
|
|
}
|
|
|
|
.procs-filter-form {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%),
|
|
var(--bg-tertiary);
|
|
}
|
|
|
|
.procs-filter-row {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.procs-filter-row--primary {
|
|
align-items: center;
|
|
}
|
|
|
|
.procs-search-field {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.procs-search-icon {
|
|
position: absolute;
|
|
left: 10px;
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.procs-filter-input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 7px 10px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
color: var(--text-primary);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.3;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.procs-filter-input--search {
|
|
padding-left: 32px;
|
|
padding-right: 56px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.procs-filter-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
|
|
}
|
|
|
|
.procs-filter-input::placeholder {
|
|
color: var(--text-muted);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.procs-filter-select {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
padding-right: 28px;
|
|
}
|
|
|
|
.procs-search-clear,
|
|
.procs-debounce-hint {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 6px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.procs-search-clear:hover {
|
|
color: var(--text-primary);
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.procs-debounce-hint {
|
|
right: 34px;
|
|
cursor: default;
|
|
color: var(--accent-primary);
|
|
font-size: 0.7rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.procs-filter-toggle {
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 7px 12px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-elevated);
|
|
color: var(--text-secondary);
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.procs-filter-toggle:hover {
|
|
border-color: var(--accent-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.procs-filter-toggle.is-open {
|
|
border-color: rgba(45, 212, 191, 0.45);
|
|
color: var(--accent-primary);
|
|
background: rgba(45, 212, 191, 0.08);
|
|
}
|
|
|
|
.procs-filter-chevron {
|
|
font-size: 0.65rem;
|
|
opacity: 0.8;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.procs-filter-toggle.is-open .procs-filter-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.procs-filter-advanced {
|
|
padding: 0 10px 10px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
|
animation: procs-adv-in 0.15s ease;
|
|
}
|
|
|
|
.procs-filter-advanced[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
@keyframes procs-adv-in {
|
|
from { opacity: 0; transform: translateY(-4px); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
.procs-filter-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 8px 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.procs-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.procs-field--wide {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.procs-field--check {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.procs-field-label {
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-muted);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.procs-field-label i {
|
|
color: var(--accent-info);
|
|
font-size: 0.7rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.procs-check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 0;
|
|
padding: 7px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-elevated);
|
|
color: var(--text-secondary);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
min-height: 34px;
|
|
}
|
|
|
|
.procs-check input {
|
|
margin: 0;
|
|
accent-color: var(--accent-primary);
|
|
}
|
|
|
|
.procs-filter-hint {
|
|
margin: 8px 0 0;
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.procs-filter-hint i {
|
|
margin-top: 2px;
|
|
color: var(--accent-info);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.procs-loading,
|
|
.procs-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 2rem 1rem;
|
|
color: var(--text-muted);
|
|
font-size: 0.875rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.procs-loading i,
|
|
.procs-empty i {
|
|
font-size: 1.25rem;
|
|
opacity: 0.7;
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.procs-empty i {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Process table: real table cells, narrow meta cols, wide wrapping CMD */
|
|
.procs-table {
|
|
width: 100% !important;
|
|
max-width: 100%;
|
|
table-layout: fixed;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.procs-table col.procs-col-compact {
|
|
width: 4rem;
|
|
}
|
|
|
|
.procs-table col.procs-col-time {
|
|
width: 4.5rem;
|
|
}
|
|
|
|
.procs-table col.procs-col-mid {
|
|
width: 5.5rem;
|
|
}
|
|
|
|
.procs-table col.procs-col-cmd {
|
|
width: auto;
|
|
}
|
|
|
|
.procs-table th,
|
|
.procs-table td {
|
|
display: table-cell !important;
|
|
vertical-align: top;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
}
|
|
|
|
.procs-table th.procs-th-compact,
|
|
.procs-table td.procs-td-compact {
|
|
width: 4rem;
|
|
white-space: nowrap;
|
|
padding-left: 0.4rem !important;
|
|
padding-right: 0.4rem !important;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.procs-table th.procs-th-time,
|
|
.procs-table td.procs-td-time {
|
|
width: 4.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.procs-table th.procs-th-mid,
|
|
.procs-table td.procs-td-mid {
|
|
width: 5.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.procs-table th.procs-th-cmd,
|
|
.procs-table td.procs-td-cmd {
|
|
width: auto;
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.procs-table thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: var(--bg-elevated) !important;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 0.6875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-muted) !important;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
}
|
|
|
|
.procs-th {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.procs-th:hover {
|
|
color: var(--text-primary) !important;
|
|
}
|
|
|
|
.procs-th.is-sorted {
|
|
color: var(--accent-primary) !important;
|
|
}
|
|
|
|
.procs-sort-ind {
|
|
font-size: 0.65rem;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
/* code inside cells: never ellipsis-truncate; stay inline in the cell */
|
|
.procs-table td code {
|
|
display: inline !important;
|
|
max-width: none !important;
|
|
overflow: visible !important;
|
|
text-overflow: clip !important;
|
|
white-space: inherit !important;
|
|
font-size: 0.75rem;
|
|
line-height: 1.35;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
.procs-table td.procs-td-cmd code {
|
|
white-space: pre-wrap !important;
|
|
word-break: break-word !important;
|
|
overflow-wrap: anywhere !important;
|
|
color: var(--text-primary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.procs-mark {
|
|
background: rgba(45, 212, 191, 0.28);
|
|
color: inherit;
|
|
border-radius: 2px;
|
|
padding: 0 1px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.procs-filter-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.procs-field--wide {
|
|
grid-column: span 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.procs-filter-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.procs-field--wide {
|
|
grid-column: span 1;
|
|
}
|
|
.procs-filter-toggle span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.detail-kv {
|
|
grid-template-columns: 1fr;
|
|
gap: 2px;
|
|
}
|
|
|
|
.container-details-tabs .nav-link {
|
|
padding: 0.3rem 0.55rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* ─── Advanced container stats tab ─── */
|
|
.detail-stats-shell {
|
|
gap: 10px !important;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#stats-pane.tab-pane.show.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
#stats-pane .detail-stats-shell {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.detail-stats-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
flex-shrink: 0;
|
|
padding: 8px 10px;
|
|
border-radius: 12px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.detail-stats-toolbar-left,
|
|
.detail-stats-toolbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.detail-stats-live {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--accent-success);
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(74, 222, 128, 0.1);
|
|
border: 1px solid rgba(74, 222, 128, 0.25);
|
|
}
|
|
|
|
.detail-stats-live i {
|
|
font-size: 0.45rem;
|
|
animation: detail-stats-pulse 1.4s ease infinite;
|
|
}
|
|
|
|
.detail-stats-live.is-paused {
|
|
color: var(--accent-warning);
|
|
background: rgba(245, 158, 11, 0.1);
|
|
border-color: rgba(245, 158, 11, 0.28);
|
|
}
|
|
|
|
.detail-stats-live.is-paused i {
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes detail-stats-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.35; }
|
|
}
|
|
|
|
.detail-stats-timeframe {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 2px;
|
|
border-radius: 9px;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.detail-stats-tf {
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
font-weight: 650;
|
|
padding: 5px 10px;
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
transition: all 0.12s ease;
|
|
}
|
|
|
|
.detail-stats-tf:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.detail-stats-tf.active {
|
|
background: rgba(45, 212, 191, 0.16);
|
|
color: var(--accent-primary);
|
|
box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.25);
|
|
}
|
|
|
|
.detail-stats-check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 0;
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.detail-stats-check input {
|
|
margin: 0;
|
|
accent-color: var(--accent-primary);
|
|
}
|
|
|
|
.detail-stats-kpis {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-stats-kpi {
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.detail-stats-kpi-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.detail-stats-kpi-top i {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.detail-stats-kpi--cpu .detail-stats-kpi-top i { color: #34d399; }
|
|
.detail-stats-kpi--mem .detail-stats-kpi-top i { color: #38bdf8; }
|
|
.detail-stats-kpi--net .detail-stats-kpi-top i { color: #a78bfa; }
|
|
.detail-stats-kpi--disk .detail-stats-kpi-top i { color: #f472b6; }
|
|
|
|
.detail-stats-kpi-value {
|
|
font-size: 1.15rem;
|
|
font-weight: 750;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-primary);
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.15;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.detail-stats-kpi-sub {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.25;
|
|
min-height: 1.1em;
|
|
}
|
|
|
|
.detail-stats-bar {
|
|
height: 4px;
|
|
border-radius: 99px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
overflow: hidden;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.detail-stats-bar i {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: 99px;
|
|
transition: width 0.25s ease;
|
|
}
|
|
|
|
.detail-stats-kpi--cpu .detail-stats-bar i {
|
|
background: linear-gradient(90deg, #34d399, #2dd4bf);
|
|
}
|
|
|
|
.detail-stats-kpi--mem .detail-stats-bar i {
|
|
background: linear-gradient(90deg, #38bdf8, #818cf8);
|
|
}
|
|
|
|
.detail-stats-summary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px 14px;
|
|
flex-shrink: 0;
|
|
padding: 6px 10px;
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.detail-stats-sum-item {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.detail-stats-sum-item span {
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
font-weight: 650;
|
|
font-size: 0.625rem;
|
|
}
|
|
|
|
.detail-stats-sum-item strong {
|
|
color: var(--text-primary);
|
|
font-weight: 650;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.detail-stats-charts {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.detail-stats-chart-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 200px;
|
|
border-radius: 12px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.detail-stats-chart-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 8px 12px 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-stats-chart-head h6 {
|
|
margin: 0;
|
|
font-size: 0.75rem;
|
|
font-weight: 650;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.detail-stats-chart-head h6 i {
|
|
color: var(--accent-primary);
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.detail-stats-chart-unit {
|
|
font-size: 0.65rem;
|
|
font-weight: 650;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.detail-stats-chart-wrap {
|
|
flex: 1 1 auto;
|
|
min-height: 160px;
|
|
position: relative;
|
|
padding: 4px 8px 8px;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.detail-stats-kpis {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.detail-stats-charts {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.detail-stats-kpis {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.detail-stats-toolbar-right .btn span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ─── Containers bulk action bar ─── */
|
|
.containers-action-bar {
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border-color);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
|
|
var(--bg-elevated);
|
|
padding: 8px 10px;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.containers-action-bar.has-selection {
|
|
border-color: rgba(45, 212, 191, 0.35);
|
|
box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.08);
|
|
}
|
|
|
|
.containers-action-bar-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.containers-action-bar-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
.containers-selected-count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 1.6rem;
|
|
height: 1.6rem;
|
|
padding: 0 6px;
|
|
border-radius: 999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 750;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--accent-primary);
|
|
background: rgba(45, 212, 191, 0.12);
|
|
border: 1px solid rgba(45, 212, 191, 0.28);
|
|
}
|
|
|
|
.containers-action-hint {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.containers-action-btns {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.containers-action-btns .btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.containers-action-btns .btn:disabled {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.containers-action-sep {
|
|
width: 1px;
|
|
height: 22px;
|
|
background: var(--border-color);
|
|
margin: 0 2px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.containers-action-btns .btn span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ─── Advanced container network manager ─── */
|
|
.net-mgr {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.net-mgr-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.net-mgr-title {
|
|
margin: 0 0 4px;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.net-mgr-sub {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.net-mgr-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.net-mgr-join-panel {
|
|
padding: 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(45, 212, 191, 0.28);
|
|
background: rgba(45, 212, 191, 0.05);
|
|
}
|
|
|
|
.net-mgr-join-panel[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.net-mgr-join-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.net-mgr-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.net-mgr-field > span {
|
|
font-size: 0.7rem;
|
|
font-weight: 650;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.net-mgr-join-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.net-mgr-table-card {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.net-mgr-table td,
|
|
.net-mgr-table th {
|
|
vertical-align: middle;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.net-mgr-join-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|