/* =====================================================================
modern.css - Xeams UI modernization layer
---------------------------------------------------------------------
Loaded AFTER newStyleSheet.css and AFTER the active theme CSS, so it can
add modern STRUCTURE (radius, spacing, shadow, typography) on top of the
theme. All COLOR here comes from the per-theme design tokens
(--xeams-* defined in each *theme*.css :root), so every color theme and
custom-theme keep their identity. Do not hard-code brand colors here.
===================================================================== */
:root{
/* Structural tokens (same for every theme) */
--xeams-radius: 0.6rem;
--xeams-radius-sm: 0.4rem;
--xeams-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
--xeams-shadow-hover: 0 6px 18px rgba(0,0,0,.12);
--xeams-border: rgba(0,0,0,.10);
--xeams-muted: #6c757d;
--xeams-transition: 0.15s ease;
--xeams-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
/* Derived hover shade of the theme primary (graceful no-op if unsupported) */
--xeams-primary-hover: color-mix(in srgb, var(--xeams-primary) 82%, #000);
--xeams-primary-tint: color-mix(in srgb, var(--xeams-primary) 10%, #fff);
}
/* ------------------------------------------------------------------ *
* 1. Base / typography
* ------------------------------------------------------------------ */
body{
background-color: var(--xeams-body-bg, #eef1f5);
font-family: var(--xeams-font-sans);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6{
font-family: var(--xeams-font-sans);
letter-spacing: -0.01em;
}
h1{ font-weight: 600; }
a{ transition: color var(--xeams-transition); }
/* Keyboard focus visibility (accessibility) */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible{
outline: 2px solid var(--xeams-accent);
outline-offset: 2px;
}
/* ------------------------------------------------------------------ *
* 2. Legacy panel bridge: make .well-info-wrap look like a modern card.
* ~194 pages use this pattern, so this single block modernizes them
* without editing each page. Theme colors still drive the header.
* ------------------------------------------------------------------ */
.well-info-wrap{
background: var(--xeams-surface, #fff);
border: 1px solid var(--xeams-border);
border-radius: var(--xeams-radius);
box-shadow: var(--xeams-shadow);
overflow: hidden;
margin-bottom: 1rem;
transition: box-shadow var(--xeams-transition);
}
.well-info-wrap:hover{
box-shadow: var(--xeams-shadow-hover); /* replaces the heavy dark glow */
}
.well-info-header,
.well-info-footer{
background: var(--xeams-primary);
color: var(--xeams-on-primary, #fff);
border: 0 !important;
text-align: left;
padding: 0.55rem 1rem;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.01em;
}
.well-info-header a,
.well-info-footer a{ color: var(--xeams-on-primary, #fff); }
/* When .well-info-header is used on a table header row ( (#fff / #f3f7fb / #eee / #ffc / #628cd5). Force both the row and its
* cells dark so no light state (hover or selection) leaks through. */
[data-bs-theme="dark"] #liveMonitorData table tbody tr{
background-color: var(--xeams-surface) !important;
}
[data-bs-theme="dark"] #liveMonitorData table tbody tr:nth-child(even),
[data-bs-theme="dark"] #liveMonitorData table tbody tr:nth-child(even) td{
background-color: #262b34 !important;
}
[data-bs-theme="dark"] #liveMonitorData table tbody tr:hover,
[data-bs-theme="dark"] #liveMonitorData table tbody tr:hover td{
background-color: #2b313b !important;
}
[data-bs-theme="dark"] #liveMonitorData table th{
background-color: #2b313b !important;
background-image: none !important;
color: #eef1f6 !important;
border-color: var(--xeams-border) !important;
}
/* GWT controls: refresh-rate box and Apply/Pause buttons */
[data-bs-theme="dark"] #liveMonitorData .gwt-TextBox{
background-color: var(--xeams-surface);
color: #dfe3ea;
border: 1px solid var(--xeams-border);
}
[data-bs-theme="dark"] #liveMonitorData .gwt-Button{
background: #2b313b;
color: #dfe3ea;
border: 1px solid var(--xeams-border);
}
[data-bs-theme="dark"] #liveMonitorData .gwt-Button:hover{ background: #353c48; }
/* Header dark/light mode toggle button (sits in the top header bar) */
.xeams-mode-toggle{
border: 0;
background: transparent;
color: var(--xeams-on-primary, #fff);
font-size: 1.1rem;
line-height: 1;
padding: 0 0.35rem;
margin-top: 4px;
cursor: pointer;
opacity: 0.85;
}
.xeams-mode-toggle:hover{ opacity: 1; }