:root { --page-bg: #; --content-bg: #; --accent: #; --accent-dark: #; --accent-light: #; --accent-text: #; --banner-drop: #; --table-head-drop: #; --content-text: #; --table-even: #; --table-odd: #; --sidebar-bg: #111827; --sidebar-bg-2: #0b1120; --sidebar-text: #cbd5e1; --sidebar-text-dim: #94a3b8; --sidebar-card-bg: rgba(255,255,255,0.05); --sidebar-card-strong-bg: rgba(255,255,255,0.09); --radius: 12px; --radius-sm: 8px; --card-border: rgba(15,23,42,0.07); --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 10px 28px -14px rgba(15,23,42,0.16); } html, body { margin: 0; padding: 0; } /* Small screens: the rail collapses into a top bar (no fixed sidebar) */ .container { width: 100%; text-align: left; margin: auto; background: var(--page-bg); border-radius: 0; box-shadow: none; overflow: visible; } body, font { font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #ffffff; } .header { position: static; width: auto; background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2)); color: var(--sidebar-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-align: left; padding: 16px 14px; box-sizing: border-box; } .header h1 { font-size: 1.05em; line-height: 1.3; color: #ffffff; text-shadow: none; text-align: left; margin: 0 0 4px 0; padding: 0; font-weight: 700; } .header > div[style*="font-size: 8px"] { float: none !important; text-align: left !important; color: var(--sidebar-text-dim) !important; font-size: 10.5px !important; padding: 0 !important; margin: 0 0 10px 0; } .header p { font-size: 0; margin: 6px 0; padding: 0; text-align: left !important; display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px; } .header p a, .header p a:link, .header p a:visited { display: inline-block; font-size: 13px; font-weight: 500; color: var(--sidebar-text) !important; padding: 8px 10px; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; } .header p a:hover { background: rgba(255,255,255,0.08); color: #ffffff !important; } .header p a.active { background: var(--accent); color: var(--accent-text) !important; font-weight: 700; } .header p b { font-size: 11px; color: var(--sidebar-text-dim); display: block; width: 100%; margin: 8px 0 2px 2px; text-transform: uppercase; letter-spacing: 0.04em; } /* On narrow screens the widgets no longer live in a side column - they become a full-width panel stacked under the top bar, laid out as a two-column grid of compact status chips instead of skinny stacked rows. */ .nav { display: block; float: none; box-sizing: border-box; margin: 0; padding: 14px; width: 100%; background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2)); font-weight: normal; min-height: 0; } .nav table { width: 100%; margin: 0 0 12px 0; border-collapse: separate; border-spacing: 4px; table-layout: fixed; white-space: normal; } .nav table th[colspan] { background: transparent; color: var(--sidebar-text-dim); text-align: left; text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 10px 2px 6px 2px; border: none; } .nav table:first-child th[colspan] { padding-top: 0; } .nav table th:not([colspan]) { background: var(--sidebar-card-bg); color: var(--sidebar-text-dim); text-align: left; font-size: 10.5px; font-weight: 700; padding: 7px 8px; border: none; border-radius: var(--radius-sm); width: 30%; } .nav table td { color: var(--sidebar-text); background: var(--sidebar-card-bg); font-size: 11px; font-weight: 600; padding: 7px 8px; border: none; border-radius: var(--radius-sm); } .nav table td[style*="fff"] { background: var(--sidebar-card-strong-bg) !important; color: var(--sidebar-text) !important; } .nav table tr:nth-child(even), .nav table tr:nth-child(odd) { background: transparent; } .nav table a { color: #ffffff; font-weight: 700; } #lastHerd, #localTxs, #Pages, #sysInfo, #refLinks, #cssConnects, #lh, #localTx, #bmConnects, #tgifConnects { margin: 14px; background: var(--content-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 14px 14px 18px 14px; box-sizing: border-box; overflow-x: auto; } #lastHerd > b, #localTxs > b, #Pages > b, #sysInfo > b, #refLinks > b, #cssConnects > b, #lh > b, #localTx > b, #bmConnects > b, #tgifConnects > b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--content-text); margin: 0 0 12px 0; padding-bottom: 10px; border-bottom: 1px solid var(--card-border); } #lastHerd > b::before, #localTxs > b::before, #Pages > b::before, #sysInfo > b::before, #refLinks > b::before, #cssConnects > b::before, #lh > b::before, #localTx > b::before, #bmConnects > b::before, #tgifConnects > b::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; } .content { padding: 6px 0 5px 0; color: var(--content-text); background: var(--page-bg); text-align: left; font-size: 1.4em; } .contentwide { padding: 16px; color: var(--content-text); background: var(--page-bg); text-align: center; font-size: 1.4em; } .contentwide h2 { color: var(--content-text); font: 600 1em -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-align: left; padding: 0 0 8px 10px; margin: 24px 0 10px 0; border-left: 4px solid var(--accent); border-bottom: 1px solid rgba(0,0,0,0.08); } .contentwide h2:first-child { margin-top: 0; } /* Inline "Alert: ..." banners used across the dashboard (config warnings etc.) */ .alert-banner-table { margin: 0 0 16px 0 !important; width: 100% !important; } .alert-banner-table, .alert-banner-table tr { background: transparent !important; } .alert-cell { text-align: left !important; border-radius: 8px; padding: 12px 16px !important; font-weight: 500; border: 1px solid transparent; } .alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; } .alert-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } .alert-warning a, .alert-danger a { color: inherit; text-decoration: underline; } /* Settings-card system (mirrors pistar-css.php) - this was missing from the mobile stylesheet entirely, so every config/editor page rendered as unstyled plain divs below the 830px breakpoint. Rows stack by default here since there's no room for the desktop's label+control row. */ .settings-card { background: var(--content-bg); border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); padding: 4px 16px; margin: 0 0 20px 0; text-align: left; } .settings-card > b:first-child { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--content-text); margin: 14px 0 12px 0; padding-bottom: 10px; border-bottom: 1px solid var(--card-border); } .settings-card > b:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; } .field-row { display: flex; flex-direction: column; align-items: flex-start; row-gap: 6px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06); } .field-row:last-child { border-bottom: none; } .field-label, .field-row > div:first-child { flex: 0 0 auto; max-width: none; font-weight: 500; font-size: 13px; color: var(--content-text); text-align: left; } .field-control, .field-row > div:not(:first-child) { flex: 1 1 auto; width: 100%; box-sizing: border-box; text-align: left; color: var(--content-text); font-size: 13px; } .field-control input[type="text"], .field-control input[type="password"], .field-control input[type="number"], .field-row input[type="text"], .field-row input[type="password"], .field-row input[type="number"] { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid rgba(0,0,0,0.18); } .field-control select, .field-row select { max-width: 100%; padding: 5px 6px; border: 1px solid rgba(0,0,0,0.18); } .field-note { font-weight: 400; font-size: 12.5px; color: #6b7280; } /* Big icon action buttons (power page, reboot/shutdown) */ .action-tiles { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; } .action-tile { flex: 1 1 45%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; background: var(--page-bg); border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; cursor: pointer; font: 500 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--content-text); } .action-tile img { width: 40px; height: 40px; } .action-tile-upload { cursor: default; } .action-tile-upload input[type="file"] { max-width: 100%; font-size: 11px; } /* Calibration tool control panels */ .cal-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; } .cal-panel { flex: 1 1 100%; margin: 0; } .cal-panel table { width: 100%; } .cal-btn-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; flex-wrap: wrap; } /* Raw config-file editors (expert "Full Edit" pages) */ .raw-editor { width: 100%; min-height: 360px; box-sizing: border-box; background: #10141a; color: #d1d5db; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; padding: 10px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12px; line-height: 1.5; } .power-status { background: #10141a; color: #3ce87a; border-radius: 8px; padding: 16px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; line-height: 1.6; } .field-actions { display: flex; justify-content: center; align-items: center; padding: 18px 0 22px 0; } .field-actions input[type="button"], .field-actions input[type="submit"] { background: var(--accent); color: var(--accent-text); border: none; padding: 11px 40px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; border-radius: 999px; box-shadow: 0 2px 6px rgba(15,23,42,0.16), 0 8px 20px -8px rgba(15,23,42,0.28); cursor: pointer; } .field-actions input[type="button"]:active, .field-actions input[type="submit"]:active { filter: brightness(0.97); } .footer { background: transparent; text-decoration: none; color: #6b7280; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10.5px; text-align: left; padding: 14px 16px 20px 16px; border-top: 1px solid rgba(0,0,0,0.07); clear: both; } .footer a { color: var(--accent) !important; } #tail { height: 450px; width: 100%; overflow-y: scroll; overflow-x: scroll; color: #3ce87a; background: #10141a; border-radius: 8px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; box-sizing: border-box; } #tail::-webkit-scrollbar { width: 10px; height: 10px; } #tail::-webkit-scrollbar-track { background: #10141a; } #tail::-webkit-scrollbar-thumb { background: rgba(60, 232, 122, 0.35); border-radius: 6px; } table { vertical-align: middle; text-align: center; empty-cells: show; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; border-collapse: collapse; border: none; text-decoration: none; color: #ffffff; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; width: 100%; white-space: nowrap; } table th { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-shadow: none; text-decoration: none; background: transparent; color: var(--content-text); text-transform: uppercase; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; padding: 9px 10px; border: none; border-bottom: 2px solid var(--accent); } /* See css/pistar-css.php for why there are two variants here. */ table.log-table th { text-align: left; } th.al { text-align: left; } table tr:nth-child(even) { background: var(--table-even); } table tr:nth-child(odd) { background: var(--table-odd); } table td { color: var(--content-text); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; text-decoration: none; padding: 7px 10px; border: none; border-bottom: 1px solid var(--card-border); overflow-x: hidden; } table tr:last-child td { border-bottom: none; } body { background: var(--page-bg); color: var(--content-text); } a { text-decoration:none; } a:link, a:visited { text-decoration: none; color: var(--accent); font-weight: normal; transition: color 0.15s ease; } a:hover { color: var(--accent-dark); text-decoration: underline; } a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active { text-decoration: none; position: relative; color: var(--content-text); } a.tooltip:hover { text-shadow: none; text-decoration: none; color: var(--content-text); background: transparent; } a.tooltip span { text-shadow: none; text-decoration: none; display: none; } a.tooltip:hover span { text-shadow: none; text-decoration: none; display: block; position: absolute; top: 20px; left: 0; width: 200px; z-index: 100; color: #000000; border: none; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); background: #f7f7f7; font: 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-align: left; overflow: hidden; } a.tooltip span b { text-shadow: none; text-decoration: none; display: block; color: #000000; margin: 0; padding: 4px 8px; font-size: 12px; font-weight: bold; border: 0px; border-bottom: 1px solid rgba(0,0,0,0.15); background: #e2e2e2; } a.tooltip2, a.tooltip2:link, a.tooltip2:visited, a.tooltip2:active { text-shadow: none; text-decoration: none; position: relative; font-weight: bold; color: #000000; } a.tooltip2:hover { text-shadow: none; text-decoration: none; color: #000000; background: transparent; } a.tooltip2 span { text-shadow: none; text-decoration: none; display: none; } a.tooltip2:hover span { text-shadow: none; text-decoration: none; display: block; position: absolute; top: 20px; left: 0; width: 200px; z-index: 100; color: #000000; border: none; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); background: #f7f7f7; font: 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-align: left; overflow: hidden; } a.tooltip2 span b { text-shadow: none; text-decoration: none; display: block; color: #000000; margin: 0; padding: 4px 8px; font-size: 12px; font-weight: bold; border: 0px; border-bottom: 1px solid rgba(0,0,0,0.15); background: #e2e2e2; } ul { padding: 5px; margin: 10px 0; list-style: none; float: left; } ul li { float: left; display: inline; /*For ignore double margin in IE6*/ margin: 0 10px; } ul li a { text-decoration: none; float:left; color: #999; cursor: pointer; font: 900 14px/22px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; transition: color 0.15s ease; } ul li a span { margin: 0 10px 0 -10px; padding: 1px 8px 5px 18px; position: relative; /*To fix IE6 problem (not displaying)*/ float:left; } ul.mmenu li a.current, ul.mmenu li a:hover { background: url(/images/buttonbg.png) no-repeat top right; color: #0d5f83; } ul.mmenu li a.current span, ul.mmenu li a:hover span { background: url(/images/buttonbg.png) no-repeat top left; } h1 { text-shadow: 1px 1px 2px rgba(0,0,0,0.35); text-align: center; } /* CSS Toggle Code here */ .toggle { position: absolute; margin-left: -9999px; visibility: hidden; } .toggle + label { display: block; position: relative; cursor: pointer; outline: none; } input.toggle-round-flat + label { padding: 1px; width: 33px; height: 18px; background-color: #dddddd; border-radius: 10px; transition: background 0.4s; } input.toggle-round-flat + label:before, input.toggle-round-flat + label:after { display: block; position: absolute; content: ""; } input.toggle-round-flat + label:before { top: 1px; left: 1px; bottom: 1px; right: 1px; background-color: #fff; border-radius: 10px; transition: background 0.4s; } input.toggle-round-flat + label:after { top: 2px; left: 2px; bottom: 2px; width: 16px; background-color: #dddddd; border-radius: 12px; transition: margin 0.4s, background 0.4s; } input.toggle-round-flat:checked + label { background-color: var(--accent); } input.toggle-round-flat:checked + label:after { margin-left: 14px; background-color: var(--accent); } /* Gentle, geometry-neutral polish for form controls (no size/layout changes) */ input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea { border-radius: 4px; transition: box-shadow 0.15s ease, border-color 0.15s ease; } input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(79,70,229,0.18); border-color: var(--accent); } input[type="submit"], input[type="button"], button { cursor: pointer; border-radius: 4px; transition: filter 0.15s ease, box-shadow 0.15s ease; } input[type="submit"]:hover, input[type="button"]:hover, button:hover { filter: brightness(1.06); box-shadow: 0 1px 6px rgba(0,0,0,0.25); } /* Tame Firefox Buttons */ @-moz-document url-prefix() { select, input { margin : 0; padding : 0; border-width : 1px; font : 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } input[type="button"], button, input[type="submit"] { padding : 0px 3px 0px 3px; border-radius : 3px 3px 3px 3px; -moz-border-radius : 3px 3px 3px 3px; } } /* nice-select dropdowns */ .nice-select.small, .nice-select-dropdown li.option { height: 24px !important; min-height: 24px !important; line-height: 24px !important; } .nice-select.small ul li:nth-of-type(2) { clear: both; }