- html/css split into tokens.css (custom properties), base.css (reset, typography, focus, skip link), components.css (buttons, inputs, tables, status cards, popups, menu, log lines) and layout.css (shell, sidebar, header, breakpoints); screen.css removed. Selectors and declarations moved as-is; three pairs of conflicting rules resolved in favour of the one that already won the cascade, two empty rules dropped. - Every literal colour outside tokens.css is now a token (category badge borders excepted). color-scheme set so native controls follow. - Light theme under prefers-color-scheme: light, with explicit data-theme="light"/"dark" overrides on :root for a future toggle. Body text 13.6:1, muted text 5.4:1, accent 5.1:1 on the light background. - HTML: lang="en" everywhere, one h1 per page, maintenance page uses <main>, an id typo fixed.
This commit is contained in:
@@ -1,11 +1,13 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>xTeVe</title>
|
<title>xTeVe</title>
|
||||||
<link rel="stylesheet" href="css/screen.css" type="text/css">
|
<link rel="stylesheet" href="css/tokens.css">
|
||||||
<link rel="stylesheet" href="css/base.css" type="text/css">
|
<link rel="stylesheet" href="css/base.css">
|
||||||
|
<link rel="stylesheet" href="css/components.css">
|
||||||
|
<link rel="stylesheet" href="css/layout.css">
|
||||||
<script src="js/app.js"></script>
|
<script src="js/app.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@@ -16,7 +18,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="header" class="imgCenter"></div>
|
<div id="header" class="imgCenter"></div>
|
||||||
<main id="box" role="main" aria-labelledby="head-text">
|
<main id="box" aria-labelledby="head-text">
|
||||||
|
|
||||||
<table id="clientInfo" class="visible" aria-label="Server information">
|
<table id="clientInfo" class="visible" aria-label="Server information">
|
||||||
<tr>
|
<tr>
|
||||||
|
|||||||
@@ -1,11 +1,13 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>xTeVe</title>
|
<title>xTeVe</title>
|
||||||
<link rel="stylesheet" href="css/screen.css" type="text/css">
|
<link rel="stylesheet" href="css/tokens.css">
|
||||||
<link rel="stylesheet" href="css/base.css" type="text/css">
|
<link rel="stylesheet" href="css/base.css">
|
||||||
|
<link rel="stylesheet" href="css/components.css">
|
||||||
|
<link rel="stylesheet" href="css/layout.css">
|
||||||
<script src="js/app.js"></script>
|
<script src="js/app.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@@ -13,7 +15,7 @@
|
|||||||
|
|
||||||
<div id="header" class="imgCenter"></div>
|
<div id="header" class="imgCenter"></div>
|
||||||
|
|
||||||
<main id="box" role="main" aria-labelledby="head-text">
|
<main id="box" aria-labelledby="head-text">
|
||||||
|
|
||||||
<div id="headline">
|
<div id="headline">
|
||||||
<h1 id="head-text" class="center">Create user account</h1>
|
<h1 id="head-text" class="center">Create user account</h1>
|
||||||
|
|||||||
+46
-492
@@ -1,32 +1,14 @@
|
|||||||
:root {
|
/*
|
||||||
--bg-0: #07111d;
|
* base.css - reset, typography, links, focus styles, skip link, generic
|
||||||
--bg-1: #0c1a2b;
|
* form elements and small utility classes. Loaded after tokens.css.
|
||||||
--bg-2: #12233a;
|
*/
|
||||||
--panel: #102238;
|
|
||||||
--panel-soft: #0f1f33;
|
|
||||||
--line: #274462;
|
|
||||||
--line-soft: #1b334d;
|
|
||||||
--text: #e9f5ff;
|
|
||||||
--text-muted: #b7cee1;
|
|
||||||
--accent: #35d2ff;
|
|
||||||
--accent-strong: #12b9ff;
|
|
||||||
--accent-soft: rgba(53, 210, 255, 0.2);
|
|
||||||
--ok: #2fd18a;
|
|
||||||
--warn: #ffc15a;
|
|
||||||
--error: #ff6f6f;
|
|
||||||
--radius-s: 10px;
|
|
||||||
--radius-m: 14px;
|
|
||||||
--radius-l: 18px;
|
|
||||||
--shadow-1: 0 20px 45px rgba(0, 0, 0, 0.32);
|
|
||||||
--shadow-2: 0 12px 30px rgba(0, 0, 0, 0.28);
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-ms-appearance: none;
|
-ms-appearance: none;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: "Space Grotesk", "Avenir Next", "Trebuchet MS", sans-serif;
|
font-family: var(--font-sans);
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -37,17 +19,17 @@
|
|||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: rgba(7, 17, 29, 0.65);
|
background: var(--scroll-track);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
border: 2px solid rgba(7, 17, 29, 0.6);
|
border: 2px solid var(--scroll-track);
|
||||||
background: linear-gradient(180deg, #2d597f, #1e4060);
|
background: linear-gradient(180deg, var(--scroll-thumb-a), var(--scroll-thumb-b));
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: linear-gradient(180deg, #3678ac, #20537c);
|
background: linear-gradient(180deg, var(--scroll-thumb-hover-a), var(--scroll-thumb-hover-b));
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-corner {
|
::-webkit-scrollbar-corner {
|
||||||
@@ -61,9 +43,9 @@ body {
|
|||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 15% 12%, rgba(64, 132, 183, 0.22), transparent 32%),
|
radial-gradient(circle at 15% 12%, var(--bg-glow-1), transparent 32%),
|
||||||
radial-gradient(circle at 88% 2%, rgba(18, 185, 255, 0.16), transparent 30%),
|
radial-gradient(circle at 88% 2%, var(--bg-glow-2), transparent 30%),
|
||||||
linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 56%, #060d17 100%);
|
linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 56%, var(--bg-deep) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@@ -75,7 +57,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: #8de7ff;
|
color: var(--accent-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
@@ -122,7 +104,7 @@ pre {
|
|||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
letter-spacing: 0.015em;
|
letter-spacing: 0.015em;
|
||||||
font-family: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
|
font-family: var(--font-mono);
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
@@ -153,7 +135,7 @@ button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:focus-visible {
|
:focus-visible {
|
||||||
outline: 2px solid #91eaff;
|
outline: 2px solid var(--focus-ring-soft);
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -171,7 +153,7 @@ textarea {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: var(--radius-s);
|
border-radius: var(--radius-s);
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
background-color: rgba(10, 22, 36, 0.78);
|
background-color: var(--surface-input);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
padding: 10px 11px;
|
padding: 10px 11px;
|
||||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
|
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
|
||||||
@@ -184,45 +166,15 @@ input[type=number]:focus,
|
|||||||
select:focus,
|
select:focus,
|
||||||
textarea:focus {
|
textarea:focus {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
box-shadow: 0 0 0 3px rgba(53, 210, 255, 0.17);
|
box-shadow: 0 0 0 3px var(--accent-ring);
|
||||||
background-color: rgba(9, 25, 40, 0.95);
|
background-color: var(--surface-input-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=text]::placeholder,
|
input[type=text]::placeholder,
|
||||||
input[type=search]::placeholder,
|
input[type=search]::placeholder,
|
||||||
input[type=password]::placeholder,
|
input[type=password]::placeholder,
|
||||||
textarea::placeholder {
|
textarea::placeholder {
|
||||||
color: #7e9ab4;
|
color: var(--text-placeholder);
|
||||||
}
|
|
||||||
|
|
||||||
input[type=button],
|
|
||||||
input[type=submit],
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 999px;
|
|
||||||
color: #03101a;
|
|
||||||
padding: 10px 18px;
|
|
||||||
margin: 8px 8px 8px 0;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
background: linear-gradient(135deg, #67e8ff 0%, #12b9ff 100%);
|
|
||||||
box-shadow: 0 10px 22px rgba(18, 185, 255, 0.3);
|
|
||||||
transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=button]:hover,
|
|
||||||
input[type=submit]:hover,
|
|
||||||
button:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
filter: brightness(1.05);
|
|
||||||
box-shadow: 0 12px 24px rgba(18, 185, 255, 0.36);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=button]:active,
|
|
||||||
input[type=submit]:active,
|
|
||||||
button:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=button]:focus-visible,
|
input[type=button]:focus-visible,
|
||||||
@@ -236,80 +188,43 @@ input[type=text]:focus-visible,
|
|||||||
input[type=search]:focus-visible,
|
input[type=search]:focus-visible,
|
||||||
input[type=password]:focus-visible,
|
input[type=password]:focus-visible,
|
||||||
input[type=number]:focus-visible {
|
input[type=number]:focus-visible {
|
||||||
outline: 2px solid #7de5ff;
|
outline: 2px solid var(--focus-ring);
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=button].delete {
|
.skip-link {
|
||||||
color: #fff;
|
|
||||||
background: linear-gradient(135deg, #ff7f7f 0%, #e94343 100%);
|
|
||||||
box-shadow: 0 10px 20px rgba(233, 67, 67, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=button].cancel {
|
|
||||||
color: #ffd8d8;
|
|
||||||
border-color: rgba(255, 111, 111, 0.45);
|
|
||||||
background: rgba(87, 22, 22, 0.45);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=button].black,
|
|
||||||
input[type=submit].black {
|
|
||||||
color: #d8ecff;
|
|
||||||
border-color: var(--line);
|
|
||||||
background: rgba(14, 32, 50, 0.85);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=button].center {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=button].save {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=checkbox] {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
border-radius: 6px;
|
|
||||||
background-color: rgba(10, 22, 36, 0.86);
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=checkbox]:checked {
|
|
||||||
border-color: #89ebff;
|
|
||||||
background-color: #39d6ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=checkbox]:before {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=checkbox]:checked:before {
|
|
||||||
content: "\2713";
|
|
||||||
color: #032033;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 800;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -1px;
|
top: 10px;
|
||||||
left: 3px;
|
left: 10px;
|
||||||
|
z-index: 2600;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
background: var(--accent-gradient);
|
||||||
|
transform: translateY(-180%);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.changed {
|
.skip-link:focus-visible {
|
||||||
border-color: #8de7ff !important;
|
transform: translateY(0);
|
||||||
box-shadow: 0 0 0 3px rgba(53, 210, 255, 0.2) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.notAvailable {
|
.sr-only {
|
||||||
opacity: 0.58;
|
border: 0 !important;
|
||||||
cursor: not-allowed;
|
clip: rect(0 0 0 0) !important;
|
||||||
border-color: rgba(255, 111, 111, 0.45) !important;
|
height: 1px !important;
|
||||||
|
margin: -1px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
position: absolute !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
width: 1px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Utility classes */
|
||||||
|
|
||||||
.pointer {
|
.pointer {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -364,37 +279,6 @@ input[type=checkbox]:checked:before {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skip-link {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
z-index: 2600;
|
|
||||||
border-radius: 999px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #03131f;
|
|
||||||
background: linear-gradient(135deg, #7be8ff 0%, #19c1ff 100%);
|
|
||||||
transform: translateY(-180%);
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skip-link:focus-visible {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sr-only {
|
|
||||||
border: 0 !important;
|
|
||||||
clip: rect(0 0 0 0) !important;
|
|
||||||
height: 1px !important;
|
|
||||||
margin: -1px !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
position: absolute !important;
|
|
||||||
white-space: nowrap !important;
|
|
||||||
width: 1px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.floatRight {
|
.floatRight {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
@@ -423,9 +307,6 @@ input[type=checkbox]:checked:before {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.noBulk {
|
|
||||||
}
|
|
||||||
|
|
||||||
.notVisible {
|
.notVisible {
|
||||||
display: none;
|
display: none;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@@ -437,259 +318,10 @@ input[type=checkbox]:checked:before {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-active {
|
|
||||||
color: #011019;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-notActive {
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
border: 1px solid var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.half {
|
.half {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.screenLogHidden {
|
|
||||||
transform: translate(0, -110px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.infoMsg {
|
|
||||||
color: #87b0d1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.errorMsg {
|
|
||||||
color: #ff8d8d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warningMsg {
|
|
||||||
color: var(--warn);
|
|
||||||
}
|
|
||||||
|
|
||||||
.debugMsg {
|
|
||||||
color: #d687ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.News,
|
|
||||||
.Movie,
|
|
||||||
.Series,
|
|
||||||
.Sports,
|
|
||||||
.Kids {
|
|
||||||
border-left: 3px solid transparent;
|
|
||||||
padding-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.News {
|
|
||||||
border-color: #ff8f6e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Movie {
|
|
||||||
border-color: #46a4ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Series {
|
|
||||||
border-color: #ffd267;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Sports {
|
|
||||||
border-color: #5ee495;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Kids {
|
|
||||||
border-color: #f6a8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loading {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 2000;
|
|
||||||
background-color: rgba(5, 12, 20, 0.72);
|
|
||||||
backdrop-filter: blur(1.5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loader {
|
|
||||||
width: 52px;
|
|
||||||
height: 52px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 4px solid transparent;
|
|
||||||
border-top-color: #58ddff;
|
|
||||||
border-right-color: #12b9ff;
|
|
||||||
animation: spin 0.9s linear infinite;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background-color: rgba(3, 9, 16, 0.72);
|
|
||||||
backdrop-filter: blur(2px);
|
|
||||||
z-index: 1500;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom,
|
|
||||||
#mapping-detail,
|
|
||||||
#user-detail,
|
|
||||||
#file-detail {
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 760px;
|
|
||||||
max-height: calc(100vh - 36px);
|
|
||||||
overflow: auto;
|
|
||||||
border-radius: var(--radius-l);
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
background: linear-gradient(180deg, rgba(17, 34, 56, 0.97) 0%, rgba(12, 27, 44, 0.97) 100%);
|
|
||||||
box-shadow: var(--shadow-1);
|
|
||||||
padding: 16px;
|
|
||||||
animation: popupIn 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom h3 {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
text-align: center;
|
|
||||||
color: #d5efff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-title h3 {
|
|
||||||
margin: 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom .popup-title h3 {
|
|
||||||
margin: 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-close {
|
|
||||||
min-width: 40px;
|
|
||||||
min-height: 40px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
color: #d9f0ff;
|
|
||||||
background: rgba(14, 32, 50, 0.9);
|
|
||||||
box-shadow: none;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-close:hover {
|
|
||||||
color: #ffffff;
|
|
||||||
border-color: #5bc8ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom table,
|
|
||||||
#content_settings table,
|
|
||||||
#mapping-detail-table,
|
|
||||||
#user-detail-table {
|
|
||||||
width: 100%;
|
|
||||||
table-layout: fixed;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom td,
|
|
||||||
#content_settings td,
|
|
||||||
#mapping-detail-table td,
|
|
||||||
#user-detail-table td {
|
|
||||||
padding: 2px 6px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom td.left,
|
|
||||||
#mapping-detail-table td.left,
|
|
||||||
#user-detail-table td.left {
|
|
||||||
width: 38%;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom input[type=text],
|
|
||||||
#popup-custom input[type=password],
|
|
||||||
#mapping-detail input[type=text],
|
|
||||||
#content_settings input[type=text],
|
|
||||||
#content_settings input[type=password] {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mapping-detail img {
|
|
||||||
display: block;
|
|
||||||
max-height: 44px;
|
|
||||||
margin: 8px auto 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#file-detail input[type=text] {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interaction,
|
|
||||||
#interaction {
|
|
||||||
margin-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interaction input[type=button],
|
|
||||||
.interaction input[type=submit] {
|
|
||||||
margin: 0;
|
|
||||||
min-width: 110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-interaction {
|
|
||||||
margin-top: 14px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#notification {
|
|
||||||
position: fixed;
|
|
||||||
right: 12px;
|
|
||||||
top: 12px;
|
|
||||||
width: 260px;
|
|
||||||
max-height: calc(100vh - 24px);
|
|
||||||
overflow: auto;
|
|
||||||
border-radius: var(--radius-m);
|
|
||||||
border: 1px solid var(--line);
|
|
||||||
background: rgba(10, 22, 36, 0.92);
|
|
||||||
box-shadow: var(--shadow-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
#notification .element {
|
|
||||||
margin: 8px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border-left: 4px solid var(--ok);
|
|
||||||
background: rgba(17, 35, 56, 0.84);
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#notification h5 {
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#notification p {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tableEllipsis {
|
.tableEllipsis {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -718,81 +350,3 @@ input[type=checkbox]:checked:before {
|
|||||||
transform: translateY(0) scale(1);
|
transform: translateY(0) scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 619px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 1.46rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom,
|
|
||||||
#mapping-detail,
|
|
||||||
#user-detail,
|
|
||||||
#file-detail {
|
|
||||||
max-width: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
border-radius: 0;
|
|
||||||
border: 0;
|
|
||||||
padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom table {
|
|
||||||
border-spacing: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom tr {
|
|
||||||
display: block;
|
|
||||||
border: 1px solid var(--line-soft);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 8px 8px 10px;
|
|
||||||
background: rgba(12, 26, 42, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom td {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 4px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-custom td.left {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 11px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#popup-interaction {
|
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 5;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding-top: 10px;
|
|
||||||
background: linear-gradient(180deg, rgba(12, 27, 44, 0.1) 0%, rgba(12, 27, 44, 0.96) 30%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.interaction,
|
|
||||||
#interaction {
|
|
||||||
justify-content: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interaction input[type=button],
|
|
||||||
.interaction input[type=submit],
|
|
||||||
#popup-interaction input[type=button] {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-title h3 {
|
|
||||||
font-size: 1.02rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-close {
|
|
||||||
min-width: 44px;
|
|
||||||
min-height: 44px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,775 @@
|
|||||||
|
/*
|
||||||
|
* components.css - buttons, inputs, tables, status cards, connection
|
||||||
|
* indicator, popups, menu, log lines and badges. Loaded after base.css.
|
||||||
|
* Responsive overrides for these components live in layout.css.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
|
||||||
|
input[type=button],
|
||||||
|
input[type=submit],
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 999px;
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
padding: 10px 18px;
|
||||||
|
margin: 8px 8px 8px 0;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
background: var(--accent-gradient);
|
||||||
|
box-shadow: 0 10px 22px var(--accent-shadow);
|
||||||
|
transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=button]:hover,
|
||||||
|
input[type=submit]:hover,
|
||||||
|
button:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
filter: brightness(1.05);
|
||||||
|
box-shadow: 0 12px 24px var(--accent-shadow-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=button]:active,
|
||||||
|
input[type=submit]:active,
|
||||||
|
button:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=button].delete {
|
||||||
|
color: var(--text-on-error);
|
||||||
|
background: linear-gradient(135deg, var(--error-bright) 0%, var(--error-strong) 100%);
|
||||||
|
box-shadow: 0 10px 20px var(--error-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=button].cancel {
|
||||||
|
color: var(--error-text-soft);
|
||||||
|
border-color: var(--error-soft);
|
||||||
|
background: var(--error-surface);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=button].black,
|
||||||
|
input[type=submit].black {
|
||||||
|
color: var(--text-heading);
|
||||||
|
border-color: var(--line);
|
||||||
|
background: var(--surface-raised);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=button].center {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=button].save {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Checkbox */
|
||||||
|
|
||||||
|
input[type=checkbox] {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: var(--surface-input);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox]:checked {
|
||||||
|
border-color: var(--checkbox-checked-border);
|
||||||
|
background-color: var(--checkbox-checked);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox]:before {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox]:checked:before {
|
||||||
|
content: "\2713";
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input states */
|
||||||
|
|
||||||
|
.changed {
|
||||||
|
border-color: var(--accent-hover) !important;
|
||||||
|
box-shadow: 0 0 0 3px var(--accent-soft) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notAvailable {
|
||||||
|
opacity: 0.58;
|
||||||
|
cursor: not-allowed;
|
||||||
|
border-color: var(--error-soft) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar menu */
|
||||||
|
|
||||||
|
#branch {
|
||||||
|
min-height: 18px;
|
||||||
|
margin: 2px 0 6px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--error-text);
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-menu {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 7px;
|
||||||
|
overflow: auto;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-menu li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
min-height: 42px;
|
||||||
|
padding: 8px 11px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: var(--surface-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-menu li:hover {
|
||||||
|
border-color: var(--accent-soft);
|
||||||
|
transform: translateX(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-menu li:focus-visible {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
transform: translateX(2px);
|
||||||
|
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-menu li.menu-active {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
background: var(--accent-gradient);
|
||||||
|
box-shadow: 0 10px 18px var(--accent-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-menu li.menu-active p {
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-menu li.menu-active img {
|
||||||
|
filter: brightness(0.04) saturate(120%);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav img {
|
||||||
|
display: block;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
max-width: 18px;
|
||||||
|
max-height: 18px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-heading);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-active {
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
border: 1px solid var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Connection indicator */
|
||||||
|
|
||||||
|
#connection-indicator {
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 5px 11px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
#connection-indicator.status-idle {
|
||||||
|
color: var(--text-heading);
|
||||||
|
border: 1px solid var(--line-strong);
|
||||||
|
background: var(--surface-raised);
|
||||||
|
}
|
||||||
|
|
||||||
|
#connection-indicator.status-busy {
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
border: 1px solid var(--accent-bright);
|
||||||
|
background: var(--accent-gradient);
|
||||||
|
}
|
||||||
|
|
||||||
|
#connection-indicator.status-online {
|
||||||
|
color: var(--text-on-ok);
|
||||||
|
border: 1px solid var(--ok-border);
|
||||||
|
background: linear-gradient(135deg, var(--ok-bright) 0%, var(--ok-mid) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#connection-indicator.status-offline {
|
||||||
|
color: var(--text-on-error);
|
||||||
|
border: 1px solid var(--error-border);
|
||||||
|
background: linear-gradient(135deg, var(--error-bright) 0%, var(--error-strong) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Server info and stream tables */
|
||||||
|
|
||||||
|
#clientInfo,
|
||||||
|
#activeStreams,
|
||||||
|
#inactiveStreams {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 7px;
|
||||||
|
background: var(--surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
#clientInfo {
|
||||||
|
padding: 7px 10px 6px;
|
||||||
|
border-bottom: 1px solid var(--line-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
#clientInfo tr {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
#clientInfo .tdKey,
|
||||||
|
#clientInfo .tdVal,
|
||||||
|
#activeStreams .tdKey,
|
||||||
|
#inactiveStreams .tdKey,
|
||||||
|
#activeStreams .tdVal,
|
||||||
|
#inactiveStreams .tdVal,
|
||||||
|
#logInfo .tdVal,
|
||||||
|
#mappingInfo .tdVal {
|
||||||
|
border: 1px solid var(--line-soft);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 7px 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
#clientInfo .tdKey,
|
||||||
|
#activeStreams .tdKey,
|
||||||
|
#inactiveStreams .tdKey {
|
||||||
|
color: var(--accent-text);
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
#clientInfo .tdVal,
|
||||||
|
#activeStreams .tdVal,
|
||||||
|
#inactiveStreams .tdVal {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 11px;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
#clientInfo .tdVal a {
|
||||||
|
color: var(--accent-text);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px dotted var(--link-underline);
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
#clientInfo .tdVal a:hover,
|
||||||
|
#clientInfo .tdVal a:focus {
|
||||||
|
color: var(--accent-text-hover);
|
||||||
|
border-bottom-color: var(--accent-text-hover);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#myStreamsBox {
|
||||||
|
border-bottom: 1px solid var(--line-soft);
|
||||||
|
background: var(--surface-1);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#allStreams {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#activeStreams,
|
||||||
|
#inactiveStreams {
|
||||||
|
max-height: 120px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inactiveStreams .tdKey {
|
||||||
|
color: var(--error-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status cards */
|
||||||
|
|
||||||
|
.dashboard-cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(6, minmax(130px, 1fr));
|
||||||
|
gap: 9px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-bottom: 1px solid var(--line-soft);
|
||||||
|
background: var(--surface-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
border: 1px solid var(--line-soft);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--surface-2);
|
||||||
|
padding: 10px;
|
||||||
|
min-height: 74px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card-label {
|
||||||
|
color: var(--text-soft);
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.07em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card-value {
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card.status-card-ok {
|
||||||
|
border-color: var(--ok-soft);
|
||||||
|
background: linear-gradient(180deg, var(--ok-surface-top) 0%, var(--ok-surface-bottom) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card.status-card-warn {
|
||||||
|
border-color: var(--warn-soft);
|
||||||
|
background: linear-gradient(180deg, var(--warn-surface-top) 0%, var(--warn-surface-bottom) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card.status-card-error {
|
||||||
|
border-color: var(--error-soft);
|
||||||
|
background: linear-gradient(180deg, var(--error-surface-top) 0%, var(--error-surface-bottom) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content table */
|
||||||
|
|
||||||
|
#box-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid var(--line-soft);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--surface-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table .content_table_header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
background: linear-gradient(180deg, var(--table-head-top), var(--table-head-bottom));
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table .content_table_header td {
|
||||||
|
color: var(--accent-text);
|
||||||
|
font-size: 11px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.07em;
|
||||||
|
padding: 10px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table tr {
|
||||||
|
border-left: 3px solid transparent;
|
||||||
|
border-bottom: 1px solid var(--row-line);
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table tr:hover {
|
||||||
|
background-color: var(--row-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table tr[tabindex],
|
||||||
|
#content_table td[tabindex] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table tr[tabindex]:focus-visible,
|
||||||
|
#content_table td[tabindex]:focus-visible,
|
||||||
|
.keyboard-clickable:focus-visible {
|
||||||
|
outline: 2px solid var(--focus-ring);
|
||||||
|
outline-offset: -2px;
|
||||||
|
background-color: var(--row-focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table td {
|
||||||
|
padding: 7px 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table img {
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
max-width: 34px;
|
||||||
|
max-height: 30px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table input[type=text] {
|
||||||
|
min-width: 48px;
|
||||||
|
max-width: 76px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 6px 7px;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table input[type=checkbox] {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table .mapping-edit-button {
|
||||||
|
min-height: 32px;
|
||||||
|
min-width: 64px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table tr.activeEPG {
|
||||||
|
border-left-color: var(--ok);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_table tr.notActiveEPG {
|
||||||
|
border-left-color: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Settings */
|
||||||
|
|
||||||
|
#settings {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_settings h4 {
|
||||||
|
margin: 15px 0 8px;
|
||||||
|
color: var(--text-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_settings table {
|
||||||
|
border: 1px solid var(--line-soft);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--surface-1);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_settings td {
|
||||||
|
border-bottom: 1px solid var(--row-line);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_settings tr:last-child td {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_settings pre {
|
||||||
|
color: var(--text-soft);
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Popup and detail tables */
|
||||||
|
|
||||||
|
#popup-custom table,
|
||||||
|
#content_settings table,
|
||||||
|
#mapping-detail-table,
|
||||||
|
#user-detail-table {
|
||||||
|
width: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-custom td,
|
||||||
|
#content_settings td,
|
||||||
|
#mapping-detail-table td,
|
||||||
|
#user-detail-table td {
|
||||||
|
padding: 2px 6px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-custom td.left,
|
||||||
|
#mapping-detail-table td.left,
|
||||||
|
#user-detail-table td.left {
|
||||||
|
width: 38%;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-custom input[type=text],
|
||||||
|
#popup-custom input[type=password],
|
||||||
|
#mapping-detail input[type=text],
|
||||||
|
#content_settings input[type=text],
|
||||||
|
#content_settings input[type=password] {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mapping-detail img {
|
||||||
|
display: block;
|
||||||
|
max-height: 44px;
|
||||||
|
margin: 8px auto 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#file-detail input[type=text] {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading and popups */
|
||||||
|
|
||||||
|
#loading {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 2000;
|
||||||
|
background-color: var(--overlay);
|
||||||
|
backdrop-filter: blur(1.5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 4px solid transparent;
|
||||||
|
border-top-color: var(--loader);
|
||||||
|
border-right-color: var(--accent-strong);
|
||||||
|
animation: spin 0.9s linear infinite;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background-color: var(--overlay);
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
|
z-index: 1500;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-custom,
|
||||||
|
#mapping-detail,
|
||||||
|
#user-detail,
|
||||||
|
#file-detail {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 760px;
|
||||||
|
max-height: calc(100vh - 36px);
|
||||||
|
overflow: auto;
|
||||||
|
border-radius: var(--radius-l);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bottom) 100%);
|
||||||
|
box-shadow: var(--shadow-1);
|
||||||
|
padding: 16px;
|
||||||
|
animation: popupIn 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-custom h3 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-title h3 {
|
||||||
|
margin: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-custom .popup-title h3 {
|
||||||
|
margin: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-close {
|
||||||
|
min-width: 40px;
|
||||||
|
min-height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
color: var(--text-heading);
|
||||||
|
background: var(--surface-raised);
|
||||||
|
box-shadow: none;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-close:hover {
|
||||||
|
color: var(--text);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction,
|
||||||
|
#interaction {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction input[type=button],
|
||||||
|
.interaction input[type=submit] {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-interaction {
|
||||||
|
margin-top: 14px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Notifications */
|
||||||
|
|
||||||
|
#notification {
|
||||||
|
position: fixed;
|
||||||
|
right: 12px;
|
||||||
|
top: 12px;
|
||||||
|
width: 260px;
|
||||||
|
max-height: calc(100vh - 24px);
|
||||||
|
overflow: auto;
|
||||||
|
border-radius: var(--radius-m);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: var(--surface-solid);
|
||||||
|
box-shadow: var(--shadow-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#notification .element {
|
||||||
|
margin: 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border-left: 4px solid var(--ok);
|
||||||
|
background: var(--surface-3);
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notification h5 {
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notification p {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Log lines */
|
||||||
|
|
||||||
|
#content_log {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content_log pre {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--surface-1);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
word-break: break-word;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logScreen p {
|
||||||
|
white-space: pre;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screenLogHidden {
|
||||||
|
transform: translate(0, -110px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoMsg {
|
||||||
|
color: var(--info);
|
||||||
|
}
|
||||||
|
|
||||||
|
.errorMsg {
|
||||||
|
color: var(--error-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warningMsg {
|
||||||
|
color: var(--warn);
|
||||||
|
}
|
||||||
|
|
||||||
|
.debugMsg {
|
||||||
|
color: var(--debug);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Category badges */
|
||||||
|
|
||||||
|
.News,
|
||||||
|
.Movie,
|
||||||
|
.Series,
|
||||||
|
.Sports,
|
||||||
|
.Kids {
|
||||||
|
border-left: 3px solid transparent;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.News {
|
||||||
|
border-color: #ff8f6e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Movie {
|
||||||
|
border-color: #46a4ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Series {
|
||||||
|
border-color: #ffd267;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Sports {
|
||||||
|
border-color: #5ee495;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Kids {
|
||||||
|
border-color: #f6a8ff;
|
||||||
|
}
|
||||||
@@ -1,3 +1,10 @@
|
|||||||
|
/*
|
||||||
|
* layout.css - shell layout (sidebar, header, content wrapper), the auth /
|
||||||
|
* wizard box pages and every responsive breakpoint. Loaded last.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Application shell */
|
||||||
|
|
||||||
#layout {
|
#layout {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 290px minmax(0, 1fr);
|
grid-template-columns: 290px minmax(0, 1fr);
|
||||||
@@ -15,8 +22,8 @@
|
|||||||
border-radius: var(--radius-l);
|
border-radius: var(--radius-l);
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
background:
|
background:
|
||||||
linear-gradient(180deg, rgba(18, 36, 58, 0.95) 0%, rgba(10, 23, 38, 0.95) 100%),
|
linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bottom) 100%),
|
||||||
radial-gradient(circle at 20% 0%, rgba(53, 210, 255, 0.12), transparent 48%);
|
radial-gradient(circle at 20% 0%, var(--panel-glow), transparent 48%);
|
||||||
box-shadow: var(--shadow-2);
|
box-shadow: var(--shadow-2);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -28,100 +35,25 @@
|
|||||||
padding: 14px;
|
padding: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#branch {
|
|
||||||
min-height: 18px;
|
|
||||||
margin: 2px 0 6px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 11px;
|
|
||||||
color: #ff9f8d;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 76px;
|
height: 76px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid var(--line-soft);
|
border: 1px solid var(--line-soft);
|
||||||
background:
|
background:
|
||||||
linear-gradient(180deg, rgba(26, 49, 73, 0.55), rgba(13, 28, 45, 0.6)),
|
linear-gradient(180deg, var(--logo-tint-top), var(--logo-tint-bottom)),
|
||||||
url("../img/logo_w_600x200.png") center no-repeat;
|
url("../img/logo_w_600x200.png") center no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-menu {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 7px;
|
|
||||||
overflow: auto;
|
|
||||||
padding-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-menu li {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
min-height: 42px;
|
|
||||||
padding: 8px 11px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
background: rgba(11, 25, 40, 0.58);
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-menu li:hover {
|
|
||||||
border-color: var(--accent-soft);
|
|
||||||
transform: translateX(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-menu li:focus-visible {
|
|
||||||
border-color: rgba(103, 232, 255, 0.62);
|
|
||||||
transform: translateX(2px);
|
|
||||||
box-shadow: 0 0 0 3px rgba(53, 210, 255, 0.23);
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-menu li.menu-active {
|
|
||||||
border-color: rgba(103, 232, 255, 0.55);
|
|
||||||
background: linear-gradient(135deg, #6fe6ff 0%, #1cc5ff 100%);
|
|
||||||
box-shadow: 0 10px 18px rgba(28, 197, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-menu li.menu-active p {
|
|
||||||
color: #03111a;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-menu li.menu-active img {
|
|
||||||
filter: brightness(0.04) saturate(120%);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav img {
|
|
||||||
display: block;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
max-width: 18px;
|
|
||||||
max-height: 18px;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav p {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #d7eefe;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-right {
|
.layout-right {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
border-radius: var(--radius-l);
|
border-radius: var(--radius-l);
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
background:
|
background:
|
||||||
linear-gradient(180deg, rgba(17, 34, 54, 0.94) 0%, rgba(10, 20, 34, 0.96) 100%),
|
linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bottom) 100%),
|
||||||
radial-gradient(circle at 100% 0%, rgba(53, 210, 255, 0.08), transparent 34%);
|
radial-gradient(circle at 100% 0%, var(--panel-glow), transparent 34%);
|
||||||
box-shadow: var(--shadow-2);
|
box-shadow: var(--shadow-2);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -134,14 +66,14 @@ nav p {
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 12px 14px;
|
padding: 12px 14px;
|
||||||
border-bottom: 1px solid var(--line-soft);
|
border-bottom: 1px solid var(--line-soft);
|
||||||
background: rgba(10, 22, 36, 0.52);
|
background: var(--surface-0);
|
||||||
}
|
}
|
||||||
|
|
||||||
#shell-title {
|
#shell-title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.08rem;
|
font-size: 1.08rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #d8f1ff;
|
color: var(--text-heading);
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -153,176 +85,7 @@ nav p {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#connection-indicator {
|
/* Content wrapper */
|
||||||
margin-left: auto;
|
|
||||||
padding: 5px 11px;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
#connection-indicator.status-idle {
|
|
||||||
color: #d8edff;
|
|
||||||
border: 1px solid #3a5877;
|
|
||||||
background: rgba(20, 42, 66, 0.65);
|
|
||||||
}
|
|
||||||
|
|
||||||
#connection-indicator.status-busy {
|
|
||||||
color: #072031;
|
|
||||||
border: 1px solid #7ee8ff;
|
|
||||||
background: linear-gradient(135deg, #7be8ff 0%, #33cdff 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#connection-indicator.status-online {
|
|
||||||
color: #052219;
|
|
||||||
border: 1px solid #9ff0c8;
|
|
||||||
background: linear-gradient(135deg, #92f0c0 0%, #4fce93 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#connection-indicator.status-offline {
|
|
||||||
color: #ffe5e5;
|
|
||||||
border: 1px solid #ff9e9e;
|
|
||||||
background: linear-gradient(135deg, #ff7e7e 0%, #d34d4d 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#clientInfo,
|
|
||||||
#activeStreams,
|
|
||||||
#inactiveStreams {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 7px;
|
|
||||||
background: rgba(8, 20, 33, 0.54);
|
|
||||||
}
|
|
||||||
|
|
||||||
#clientInfo {
|
|
||||||
padding: 7px 10px 6px;
|
|
||||||
border-bottom: 1px solid var(--line-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
#clientInfo tr {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
#clientInfo .tdKey,
|
|
||||||
#clientInfo .tdVal,
|
|
||||||
#activeStreams .tdKey,
|
|
||||||
#inactiveStreams .tdKey,
|
|
||||||
#activeStreams .tdVal,
|
|
||||||
#inactiveStreams .tdVal,
|
|
||||||
#logInfo .tdVal,
|
|
||||||
#mappingInfo .tdVal {
|
|
||||||
border: 1px solid var(--line-soft);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 7px 8px;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-family: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
#clientInfo .tdKey,
|
|
||||||
#activeStreams .tdKey,
|
|
||||||
#inactiveStreams .tdKey {
|
|
||||||
color: #53d9ff;
|
|
||||||
font-size: 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
#clientInfo .tdVal,
|
|
||||||
#activeStreams .tdVal,
|
|
||||||
#inactiveStreams .tdVal {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 11px;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
#clientInfo .tdVal a {
|
|
||||||
color: #8fdcff;
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 1px dotted rgba(143, 220, 255, 0.6);
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
#clientInfo .tdVal a:hover,
|
|
||||||
#clientInfo .tdVal a:focus {
|
|
||||||
color: #d7f4ff;
|
|
||||||
border-bottom-color: #d7f4ff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-cards {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(6, minmax(130px, 1fr));
|
|
||||||
gap: 9px;
|
|
||||||
padding: 10px 14px;
|
|
||||||
border-bottom: 1px solid var(--line-soft);
|
|
||||||
background: rgba(8, 18, 30, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card {
|
|
||||||
border: 1px solid var(--line-soft);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: rgba(13, 31, 49, 0.8);
|
|
||||||
padding: 10px;
|
|
||||||
min-height: 74px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card-label {
|
|
||||||
color: #8fb3cf;
|
|
||||||
font-size: 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.07em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card-value {
|
|
||||||
color: #e8f5ff;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card.status-card-ok {
|
|
||||||
border-color: rgba(67, 191, 130, 0.48);
|
|
||||||
background: linear-gradient(180deg, rgba(20, 54, 44, 0.9) 0%, rgba(12, 38, 31, 0.95) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card.status-card-warn {
|
|
||||||
border-color: rgba(255, 193, 90, 0.5);
|
|
||||||
background: linear-gradient(180deg, rgba(68, 50, 20, 0.86) 0%, rgba(44, 32, 14, 0.96) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card.status-card-error {
|
|
||||||
border-color: rgba(255, 111, 111, 0.5);
|
|
||||||
background: linear-gradient(180deg, rgba(73, 26, 26, 0.84) 0%, rgba(47, 19, 19, 0.96) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#myStreamsBox {
|
|
||||||
border-bottom: 1px solid var(--line-soft);
|
|
||||||
background: rgba(10, 22, 36, 0.62);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#allStreams {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#activeStreams,
|
|
||||||
#inactiveStreams {
|
|
||||||
max-height: 120px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#inactiveStreams .tdKey {
|
|
||||||
color: #ff8f8f;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -332,7 +95,7 @@ nav p {
|
|||||||
|
|
||||||
#content h3 {
|
#content h3 {
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
color: #d4edff;
|
color: var(--text-heading);
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-interaction {
|
#content-interaction {
|
||||||
@@ -353,162 +116,14 @@ nav p {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#box-wrapper {
|
/* Login, first-user, wizard and maintenance box */
|
||||||
width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
border: 1px solid var(--line-soft);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: rgba(10, 21, 34, 0.72);
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table,
|
|
||||||
#mapping-detail-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table .content_table_header {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 2;
|
|
||||||
background: linear-gradient(180deg, rgba(23, 46, 72, 0.98), rgba(16, 32, 50, 0.98));
|
|
||||||
border-bottom: 1px solid var(--line);
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table .content_table_header td {
|
|
||||||
color: #8fd8ff;
|
|
||||||
font-size: 11px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.07em;
|
|
||||||
padding: 10px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table tr {
|
|
||||||
border-left: 3px solid transparent;
|
|
||||||
border-bottom: 1px solid rgba(29, 55, 80, 0.72);
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table tr:hover {
|
|
||||||
background-color: rgba(28, 53, 79, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table tr[tabindex],
|
|
||||||
#content_table td[tabindex] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table tr[tabindex]:focus-visible,
|
|
||||||
#content_table td[tabindex]:focus-visible,
|
|
||||||
.keyboard-clickable:focus-visible {
|
|
||||||
outline: 2px solid #7de5ff;
|
|
||||||
outline-offset: -2px;
|
|
||||||
background-color: rgba(39, 73, 106, 0.56);
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table td {
|
|
||||||
padding: 7px 8px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table img {
|
|
||||||
display: block;
|
|
||||||
width: auto;
|
|
||||||
max-width: 34px;
|
|
||||||
max-height: 30px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table input[type=text] {
|
|
||||||
min-width: 48px;
|
|
||||||
max-width: 76px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 6px 7px;
|
|
||||||
border-radius: 8px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table input[type=checkbox] {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table .mapping-edit-button {
|
|
||||||
min-height: 32px;
|
|
||||||
min-width: 64px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 5px 10px;
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table tr.activeEPG {
|
|
||||||
border-left-color: #2ed486;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_table tr.notActiveEPG {
|
|
||||||
border-left-color: #ff6868;
|
|
||||||
}
|
|
||||||
|
|
||||||
#settings {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_settings h4 {
|
|
||||||
margin: 15px 0 8px;
|
|
||||||
color: #d6efff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_settings table {
|
|
||||||
border: 1px solid var(--line-soft);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: rgba(10, 22, 35, 0.62);
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_settings td {
|
|
||||||
padding: 9px 8px;
|
|
||||||
border-bottom: 1px solid rgba(31, 57, 82, 0.62);
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_settings tr:last-child td {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_settings pre {
|
|
||||||
color: #9ab7d0;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_log {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content_log pre {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(13, 31, 49, 0.72);
|
|
||||||
white-space: pre-wrap;
|
|
||||||
overflow-wrap: anywhere;
|
|
||||||
word-break: break-word;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logScreen p {
|
|
||||||
white-space: pre;
|
|
||||||
font-family: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
#box {
|
#box {
|
||||||
width: min(680px, calc(100% - 24px));
|
width: min(680px, calc(100% - 24px));
|
||||||
margin: 14px auto;
|
margin: 14px auto;
|
||||||
border-radius: var(--radius-l);
|
border-radius: var(--radius-l);
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
background: linear-gradient(180deg, rgba(16, 35, 56, 0.95) 0%, rgba(11, 24, 38, 0.96) 100%);
|
background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bottom) 100%);
|
||||||
box-shadow: var(--shadow-2);
|
box-shadow: var(--shadow-2);
|
||||||
min-height: 430px;
|
min-height: 430px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -523,14 +138,14 @@ nav p {
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
background:
|
background:
|
||||||
linear-gradient(180deg, rgba(16, 35, 56, 0.84), rgba(11, 24, 38, 0.9)),
|
linear-gradient(180deg, var(--logo-tint-top), var(--logo-tint-bottom)),
|
||||||
url("../img/logo_w_600x200.png") center no-repeat;
|
url("../img/logo_w_600x200.png") center no-repeat;
|
||||||
background-size: 300px auto;
|
background-size: 300px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#headline {
|
#headline {
|
||||||
border-bottom: 1px solid var(--line);
|
border-bottom: 1px solid var(--line);
|
||||||
background: rgba(10, 22, 37, 0.55);
|
background: var(--surface-0);
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -560,10 +175,6 @@ nav p {
|
|||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizard {
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-screen {
|
.auth-screen {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -578,6 +189,8 @@ nav p {
|
|||||||
display: table-cell;
|
display: table-cell;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Breakpoints */
|
||||||
|
|
||||||
@media only screen and (max-width: 1300px) {
|
@media only screen and (max-width: 1300px) {
|
||||||
.dashboard-cards {
|
.dashboard-cards {
|
||||||
grid-template-columns: repeat(3, minmax(130px, 1fr));
|
grid-template-columns: repeat(3, minmax(130px, 1fr));
|
||||||
@@ -622,7 +235,7 @@ nav p {
|
|||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: rgba(3, 9, 15, 0.48);
|
background: var(--overlay-soft);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.2s ease;
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
@@ -698,7 +311,7 @@ nav p {
|
|||||||
padding: 8px;
|
padding: 8px;
|
||||||
border: 1px solid var(--line-soft);
|
border: 1px solid var(--line-soft);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: rgba(9, 22, 36, 0.92);
|
background: var(--surface-solid);
|
||||||
backdrop-filter: blur(6px);
|
backdrop-filter: blur(6px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -771,7 +384,7 @@ nav p {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
background: rgba(8, 20, 33, 0.44);
|
background: var(--surface-0);
|
||||||
}
|
}
|
||||||
|
|
||||||
#clientInfo tr {
|
#clientInfo tr {
|
||||||
@@ -791,16 +404,16 @@ nav p {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding: 10px 9px;
|
padding: 10px 9px;
|
||||||
background: rgba(17, 34, 53, 0.5);
|
background: var(--surface-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
#clientInfo .tdVal::before {
|
#clientInfo .tdVal::before {
|
||||||
content: attr(data-label);
|
content: attr(data-label);
|
||||||
color: #8bb9d7;
|
color: var(--text-soft);
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
letter-spacing: 0.07em;
|
letter-spacing: 0.07em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-family: "Space Grotesk", "Avenir Next", "Trebuchet MS", sans-serif;
|
font-family: var(--font-sans);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -829,7 +442,7 @@ nav p {
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
background: rgba(11, 24, 39, 0.86);
|
background: var(--surface-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_table td {
|
#content_table td {
|
||||||
@@ -841,12 +454,12 @@ nav p {
|
|||||||
grid-template-columns: minmax(92px, 36%) 1fr;
|
grid-template-columns: minmax(92px, 36%) 1fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
background: rgba(17, 34, 53, 0.5);
|
background: var(--surface-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_table td::before {
|
#content_table td::before {
|
||||||
content: attr(data-label);
|
content: attr(data-label);
|
||||||
color: #8bb9d7;
|
color: var(--text-soft);
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.06em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@@ -967,6 +580,84 @@ nav p {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 619px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 1.46rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-custom,
|
||||||
|
#mapping-detail,
|
||||||
|
#user-detail,
|
||||||
|
#file-detail {
|
||||||
|
max-width: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 0;
|
||||||
|
padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-custom table {
|
||||||
|
border-spacing: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-custom tr {
|
||||||
|
display: block;
|
||||||
|
border: 1px solid var(--line-soft);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 8px 8px 10px;
|
||||||
|
background: var(--surface-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-custom td {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 4px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-custom td.left {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 11px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#popup-interaction {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 5;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
background: linear-gradient(180deg, var(--sticky-fade-from) 0%, var(--sticky-fade-to) 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction,
|
||||||
|
#interaction {
|
||||||
|
justify-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction input[type=button],
|
||||||
|
.interaction input[type=submit],
|
||||||
|
#popup-interaction input[type=button] {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-title h3 {
|
||||||
|
font-size: 1.02rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-close {
|
||||||
|
min-width: 44px;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 430px) {
|
@media only screen and (max-width: 430px) {
|
||||||
#clientInfo {
|
#clientInfo {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@@ -0,0 +1,313 @@
|
|||||||
|
/*
|
||||||
|
* tokens.css - design tokens (colours, spacing, radii, fonts, shadows).
|
||||||
|
*
|
||||||
|
* Load order: tokens.css, base.css, components.css, layout.css.
|
||||||
|
*
|
||||||
|
* The dark palette is the default. A light palette is applied when the user
|
||||||
|
* agent prefers a light colour scheme, and either palette can be forced with
|
||||||
|
* <html data-theme="dark"> or <html data-theme="light">, which always wins
|
||||||
|
* over the media query. Only colour tokens change between themes.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
|
||||||
|
/* Fonts */
|
||||||
|
--font-sans: "Space Grotesk", "Avenir Next", "Trebuchet MS", sans-serif;
|
||||||
|
--font-mono: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
|
||||||
|
|
||||||
|
/* Radii and shadows */
|
||||||
|
--radius-s: 10px;
|
||||||
|
--radius-m: 14px;
|
||||||
|
--radius-l: 18px;
|
||||||
|
--shadow-1: 0 20px 45px rgba(0, 0, 0, 0.32);
|
||||||
|
--shadow-2: 0 12px 30px rgba(0, 0, 0, 0.28);
|
||||||
|
|
||||||
|
/* Page background */
|
||||||
|
--bg-0: #07111d;
|
||||||
|
--bg-1: #0c1a2b;
|
||||||
|
--bg-2: #12233a;
|
||||||
|
--bg-deep: #060d17;
|
||||||
|
--bg-glow-1: rgba(64, 132, 183, 0.22);
|
||||||
|
--bg-glow-2: rgba(18, 185, 255, 0.16);
|
||||||
|
|
||||||
|
/* Panels and surfaces (translucent tints layered over the page) */
|
||||||
|
--panel-top: rgba(17, 34, 56, 0.97);
|
||||||
|
--panel-bottom: rgba(12, 27, 44, 0.97);
|
||||||
|
--panel-glow: rgba(53, 210, 255, 0.12);
|
||||||
|
--surface-0: rgba(8, 20, 33, 0.54);
|
||||||
|
--surface-1: rgba(10, 22, 36, 0.72);
|
||||||
|
--surface-2: rgba(13, 31, 49, 0.8);
|
||||||
|
--surface-3: rgba(17, 35, 56, 0.84);
|
||||||
|
--surface-solid: rgba(10, 22, 36, 0.92);
|
||||||
|
--surface-raised: rgba(14, 32, 50, 0.85);
|
||||||
|
--surface-input: rgba(10, 22, 36, 0.78);
|
||||||
|
--surface-input-focus: rgba(9, 25, 40, 0.95);
|
||||||
|
--logo-tint-top: rgba(26, 49, 73, 0.55);
|
||||||
|
--logo-tint-bottom: rgba(13, 28, 45, 0.6);
|
||||||
|
--table-head-top: rgba(23, 46, 72, 0.98);
|
||||||
|
--table-head-bottom: rgba(16, 32, 50, 0.98);
|
||||||
|
--row-line: rgba(29, 55, 80, 0.72);
|
||||||
|
--row-hover: rgba(28, 53, 79, 0.5);
|
||||||
|
--row-focus: rgba(39, 73, 106, 0.56);
|
||||||
|
--overlay: rgba(3, 9, 16, 0.72);
|
||||||
|
--overlay-soft: rgba(3, 9, 15, 0.48);
|
||||||
|
--sticky-fade-from: rgba(12, 27, 44, 0.1);
|
||||||
|
--sticky-fade-to: rgba(12, 27, 44, 0.96);
|
||||||
|
--scroll-track: rgba(7, 17, 29, 0.65);
|
||||||
|
--scroll-thumb-a: #2d597f;
|
||||||
|
--scroll-thumb-b: #1e4060;
|
||||||
|
--scroll-thumb-hover-a: #3678ac;
|
||||||
|
--scroll-thumb-hover-b: #20537c;
|
||||||
|
|
||||||
|
/* Lines */
|
||||||
|
--line: #274462;
|
||||||
|
--line-soft: #1b334d;
|
||||||
|
--line-strong: #3a5877;
|
||||||
|
|
||||||
|
/* Text */
|
||||||
|
--text: #e9f5ff;
|
||||||
|
--text-heading: #d6efff;
|
||||||
|
--text-muted: #b7cee1;
|
||||||
|
--text-soft: #8fb3cf;
|
||||||
|
--text-placeholder: #7e9ab4;
|
||||||
|
--text-on-accent: #03101a;
|
||||||
|
--text-on-ok: #052219;
|
||||||
|
--text-on-error: #ffe5e5;
|
||||||
|
|
||||||
|
/* Accent */
|
||||||
|
--accent: #35d2ff;
|
||||||
|
--accent-strong: #12b9ff;
|
||||||
|
--accent-bright: #67e8ff;
|
||||||
|
--accent-hover: #8de7ff;
|
||||||
|
--accent-text: #8fd8ff;
|
||||||
|
--accent-text-hover: #d7f4ff;
|
||||||
|
--accent-soft: rgba(53, 210, 255, 0.2);
|
||||||
|
--accent-ring: rgba(53, 210, 255, 0.17);
|
||||||
|
--accent-border: rgba(103, 232, 255, 0.55);
|
||||||
|
--accent-shadow: rgba(18, 185, 255, 0.3);
|
||||||
|
--accent-shadow-strong: rgba(18, 185, 255, 0.36);
|
||||||
|
--accent-gradient: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-strong) 100%);
|
||||||
|
--link-underline: rgba(143, 220, 255, 0.6);
|
||||||
|
--focus-ring: #7de5ff;
|
||||||
|
--focus-ring-soft: #91eaff;
|
||||||
|
--checkbox-checked: #39d6ff;
|
||||||
|
--checkbox-checked-border: #89ebff;
|
||||||
|
--loader: #58ddff;
|
||||||
|
|
||||||
|
/* Status */
|
||||||
|
--ok: #2fd18a;
|
||||||
|
--ok-bright: #92f0c0;
|
||||||
|
--ok-mid: #4fce93;
|
||||||
|
--ok-border: #9ff0c8;
|
||||||
|
--ok-soft: rgba(67, 191, 130, 0.48);
|
||||||
|
--ok-surface-top: rgba(20, 54, 44, 0.9);
|
||||||
|
--ok-surface-bottom: rgba(12, 38, 31, 0.95);
|
||||||
|
--warn: #ffc15a;
|
||||||
|
--warn-soft: rgba(255, 193, 90, 0.5);
|
||||||
|
--warn-surface-top: rgba(68, 50, 20, 0.86);
|
||||||
|
--warn-surface-bottom: rgba(44, 32, 14, 0.96);
|
||||||
|
--error: #ff6f6f;
|
||||||
|
--error-text: #ff8d8d;
|
||||||
|
--error-text-soft: #ffd8d8;
|
||||||
|
--error-bright: #ff7f7f;
|
||||||
|
--error-strong: #e94343;
|
||||||
|
--error-border: #ff9e9e;
|
||||||
|
--error-soft: rgba(255, 111, 111, 0.45);
|
||||||
|
--error-surface: rgba(87, 22, 22, 0.45);
|
||||||
|
--error-surface-top: rgba(73, 26, 26, 0.84);
|
||||||
|
--error-surface-bottom: rgba(47, 19, 19, 0.96);
|
||||||
|
--error-shadow: rgba(233, 67, 67, 0.35);
|
||||||
|
--info: #87b0d1;
|
||||||
|
--debug: #d687ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Light palette. Only tokens that differ from the dark palette are listed.
|
||||||
|
* The same block appears twice on purpose: once for the media query (skipped
|
||||||
|
* when dark is forced with data-theme="dark") and once for the explicit
|
||||||
|
* data-theme="light" override. Keep the two copies identical.
|
||||||
|
*/
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme="dark"]) {
|
||||||
|
color-scheme: light;
|
||||||
|
|
||||||
|
--bg-0: #e9eff5;
|
||||||
|
--bg-1: #f5f8fb;
|
||||||
|
--bg-2: #dfe7ef;
|
||||||
|
--bg-deep: #dfe7ef;
|
||||||
|
--bg-glow-1: rgba(64, 132, 183, 0.14);
|
||||||
|
--bg-glow-2: rgba(18, 185, 255, 0.12);
|
||||||
|
|
||||||
|
--panel-top: rgba(255, 255, 255, 0.97);
|
||||||
|
--panel-bottom: rgba(246, 249, 252, 0.97);
|
||||||
|
--panel-glow: rgba(18, 185, 255, 0.08);
|
||||||
|
--surface-0: rgba(255, 255, 255, 0.55);
|
||||||
|
--surface-1: rgba(255, 255, 255, 0.75);
|
||||||
|
--surface-2: rgba(236, 243, 249, 0.85);
|
||||||
|
--surface-3: rgba(232, 240, 247, 0.9);
|
||||||
|
--surface-solid: rgba(255, 255, 255, 0.94);
|
||||||
|
--surface-raised: rgba(228, 236, 244, 0.9);
|
||||||
|
--surface-input: rgba(255, 255, 255, 0.85);
|
||||||
|
--surface-input-focus: rgba(255, 255, 255, 1);
|
||||||
|
--logo-tint-top: rgba(15, 31, 48, 0.96);
|
||||||
|
--logo-tint-bottom: rgba(11, 23, 39, 0.98);
|
||||||
|
--table-head-top: rgba(232, 240, 248, 0.98);
|
||||||
|
--table-head-bottom: rgba(222, 232, 243, 0.98);
|
||||||
|
--row-line: rgba(100, 130, 160, 0.3);
|
||||||
|
--row-hover: rgba(0, 90, 150, 0.07);
|
||||||
|
--row-focus: rgba(0, 90, 150, 0.14);
|
||||||
|
--overlay: rgba(20, 35, 52, 0.5);
|
||||||
|
--overlay-soft: rgba(20, 35, 52, 0.35);
|
||||||
|
--sticky-fade-from: rgba(246, 249, 252, 0.1);
|
||||||
|
--sticky-fade-to: rgba(246, 249, 252, 0.96);
|
||||||
|
--scroll-track: rgba(200, 214, 228, 0.6);
|
||||||
|
--scroll-thumb-a: #9fb6cb;
|
||||||
|
--scroll-thumb-b: #7f9bb3;
|
||||||
|
--scroll-thumb-hover-a: #7f9bb3;
|
||||||
|
--scroll-thumb-hover-b: #61819c;
|
||||||
|
|
||||||
|
--line: #b9cadb;
|
||||||
|
--line-soft: #d3dfea;
|
||||||
|
--line-strong: #9fb4c8;
|
||||||
|
|
||||||
|
--text: #142434;
|
||||||
|
--text-heading: #0f2033;
|
||||||
|
--text-muted: #4a6379;
|
||||||
|
--text-soft: #526a80;
|
||||||
|
--text-placeholder: #58708a;
|
||||||
|
--text-on-error: #4a0c0c;
|
||||||
|
|
||||||
|
--accent: #0069a8;
|
||||||
|
--accent-hover: #00517f;
|
||||||
|
--accent-text: #0b6a95;
|
||||||
|
--accent-text-hover: #003a5c;
|
||||||
|
--accent-soft: rgba(0, 105, 168, 0.2);
|
||||||
|
--accent-ring: rgba(0, 105, 168, 0.18);
|
||||||
|
--accent-border: rgba(0, 105, 168, 0.5);
|
||||||
|
--accent-shadow: rgba(0, 105, 168, 0.22);
|
||||||
|
--accent-shadow-strong: rgba(0, 105, 168, 0.3);
|
||||||
|
--link-underline: rgba(11, 106, 149, 0.5);
|
||||||
|
--focus-ring: #0a7fc0;
|
||||||
|
--focus-ring-soft: #0a7fc0;
|
||||||
|
--checkbox-checked: #12b9ff;
|
||||||
|
--checkbox-checked-border: #0a7fc0;
|
||||||
|
--loader: #0a7fc0;
|
||||||
|
|
||||||
|
--ok: #12734a;
|
||||||
|
--ok-bright: #a9efcc;
|
||||||
|
--ok-mid: #5fd39b;
|
||||||
|
--ok-border: #4fb884;
|
||||||
|
--ok-soft: rgba(18, 115, 74, 0.45);
|
||||||
|
--ok-surface-top: rgba(226, 246, 235, 0.95);
|
||||||
|
--ok-surface-bottom: rgba(208, 238, 222, 0.98);
|
||||||
|
--warn: #7f5300;
|
||||||
|
--warn-soft: rgba(183, 121, 31, 0.5);
|
||||||
|
--warn-surface-top: rgba(253, 243, 224, 0.95);
|
||||||
|
--warn-surface-bottom: rgba(248, 232, 200, 0.98);
|
||||||
|
--error: #c62828;
|
||||||
|
--error-text: #b02020;
|
||||||
|
--error-text-soft: #8a1a1a;
|
||||||
|
--error-bright: #f6a5a5;
|
||||||
|
--error-strong: #e07575;
|
||||||
|
--error-border: #d95c5c;
|
||||||
|
--error-soft: rgba(198, 40, 40, 0.45);
|
||||||
|
--error-surface: rgba(255, 220, 220, 0.6);
|
||||||
|
--error-surface-top: rgba(253, 232, 232, 0.95);
|
||||||
|
--error-surface-bottom: rgba(248, 214, 214, 0.98);
|
||||||
|
--error-shadow: rgba(198, 40, 40, 0.25);
|
||||||
|
--info: #3f6785;
|
||||||
|
--debug: #7a35b5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-theme="light"] {
|
||||||
|
color-scheme: light;
|
||||||
|
|
||||||
|
--bg-0: #e9eff5;
|
||||||
|
--bg-1: #f5f8fb;
|
||||||
|
--bg-2: #dfe7ef;
|
||||||
|
--bg-deep: #dfe7ef;
|
||||||
|
--bg-glow-1: rgba(64, 132, 183, 0.14);
|
||||||
|
--bg-glow-2: rgba(18, 185, 255, 0.12);
|
||||||
|
|
||||||
|
--panel-top: rgba(255, 255, 255, 0.97);
|
||||||
|
--panel-bottom: rgba(246, 249, 252, 0.97);
|
||||||
|
--panel-glow: rgba(18, 185, 255, 0.08);
|
||||||
|
--surface-0: rgba(255, 255, 255, 0.55);
|
||||||
|
--surface-1: rgba(255, 255, 255, 0.75);
|
||||||
|
--surface-2: rgba(236, 243, 249, 0.85);
|
||||||
|
--surface-3: rgba(232, 240, 247, 0.9);
|
||||||
|
--surface-solid: rgba(255, 255, 255, 0.94);
|
||||||
|
--surface-raised: rgba(228, 236, 244, 0.9);
|
||||||
|
--surface-input: rgba(255, 255, 255, 0.85);
|
||||||
|
--surface-input-focus: rgba(255, 255, 255, 1);
|
||||||
|
--logo-tint-top: rgba(15, 31, 48, 0.96);
|
||||||
|
--logo-tint-bottom: rgba(11, 23, 39, 0.98);
|
||||||
|
--table-head-top: rgba(232, 240, 248, 0.98);
|
||||||
|
--table-head-bottom: rgba(222, 232, 243, 0.98);
|
||||||
|
--row-line: rgba(100, 130, 160, 0.3);
|
||||||
|
--row-hover: rgba(0, 90, 150, 0.07);
|
||||||
|
--row-focus: rgba(0, 90, 150, 0.14);
|
||||||
|
--overlay: rgba(20, 35, 52, 0.5);
|
||||||
|
--overlay-soft: rgba(20, 35, 52, 0.35);
|
||||||
|
--sticky-fade-from: rgba(246, 249, 252, 0.1);
|
||||||
|
--sticky-fade-to: rgba(246, 249, 252, 0.96);
|
||||||
|
--scroll-track: rgba(200, 214, 228, 0.6);
|
||||||
|
--scroll-thumb-a: #9fb6cb;
|
||||||
|
--scroll-thumb-b: #7f9bb3;
|
||||||
|
--scroll-thumb-hover-a: #7f9bb3;
|
||||||
|
--scroll-thumb-hover-b: #61819c;
|
||||||
|
|
||||||
|
--line: #b9cadb;
|
||||||
|
--line-soft: #d3dfea;
|
||||||
|
--line-strong: #9fb4c8;
|
||||||
|
|
||||||
|
--text: #142434;
|
||||||
|
--text-heading: #0f2033;
|
||||||
|
--text-muted: #4a6379;
|
||||||
|
--text-soft: #526a80;
|
||||||
|
--text-placeholder: #58708a;
|
||||||
|
--text-on-error: #4a0c0c;
|
||||||
|
|
||||||
|
--accent: #0069a8;
|
||||||
|
--accent-hover: #00517f;
|
||||||
|
--accent-text: #0b6a95;
|
||||||
|
--accent-text-hover: #003a5c;
|
||||||
|
--accent-soft: rgba(0, 105, 168, 0.2);
|
||||||
|
--accent-ring: rgba(0, 105, 168, 0.18);
|
||||||
|
--accent-border: rgba(0, 105, 168, 0.5);
|
||||||
|
--accent-shadow: rgba(0, 105, 168, 0.22);
|
||||||
|
--accent-shadow-strong: rgba(0, 105, 168, 0.3);
|
||||||
|
--link-underline: rgba(11, 106, 149, 0.5);
|
||||||
|
--focus-ring: #0a7fc0;
|
||||||
|
--focus-ring-soft: #0a7fc0;
|
||||||
|
--checkbox-checked: #12b9ff;
|
||||||
|
--checkbox-checked-border: #0a7fc0;
|
||||||
|
--loader: #0a7fc0;
|
||||||
|
|
||||||
|
--ok: #12734a;
|
||||||
|
--ok-bright: #a9efcc;
|
||||||
|
--ok-mid: #5fd39b;
|
||||||
|
--ok-border: #4fb884;
|
||||||
|
--ok-soft: rgba(18, 115, 74, 0.45);
|
||||||
|
--ok-surface-top: rgba(226, 246, 235, 0.95);
|
||||||
|
--ok-surface-bottom: rgba(208, 238, 222, 0.98);
|
||||||
|
--warn: #7f5300;
|
||||||
|
--warn-soft: rgba(183, 121, 31, 0.5);
|
||||||
|
--warn-surface-top: rgba(253, 243, 224, 0.95);
|
||||||
|
--warn-surface-bottom: rgba(248, 232, 200, 0.98);
|
||||||
|
--error: #c62828;
|
||||||
|
--error-text: #b02020;
|
||||||
|
--error-text-soft: #8a1a1a;
|
||||||
|
--error-bright: #f6a5a5;
|
||||||
|
--error-strong: #e07575;
|
||||||
|
--error-border: #d95c5c;
|
||||||
|
--error-soft: rgba(198, 40, 40, 0.45);
|
||||||
|
--error-surface: rgba(255, 220, 220, 0.6);
|
||||||
|
--error-surface-top: rgba(253, 232, 232, 0.95);
|
||||||
|
--error-surface-bottom: rgba(248, 214, 214, 0.98);
|
||||||
|
--error-shadow: rgba(198, 40, 40, 0.25);
|
||||||
|
--info: #3f6785;
|
||||||
|
--debug: #7a35b5;
|
||||||
|
}
|
||||||
+6
-4
@@ -1,11 +1,13 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>xTeVe</title>
|
<title>xTeVe</title>
|
||||||
<link rel="stylesheet" href="css/screen.css" type="text/css">
|
<link rel="stylesheet" href="css/tokens.css">
|
||||||
<link rel="stylesheet" href="css/base.css" type="text/css">
|
<link rel="stylesheet" href="css/base.css">
|
||||||
|
<link rel="stylesheet" href="css/components.css">
|
||||||
|
<link rel="stylesheet" href="css/layout.css">
|
||||||
<script src="js/app.js"></script>
|
<script src="js/app.js"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
@@ -45,7 +47,7 @@
|
|||||||
<main id="shell-main" class="layout-right">
|
<main id="shell-main" class="layout-right">
|
||||||
<header id="shell-header">
|
<header id="shell-header">
|
||||||
<button id="menu-toggle" type="button" aria-expanded="false" aria-controls="menu-wrapper" aria-label="Toggle navigation menu">Menu</button>
|
<button id="menu-toggle" type="button" aria-expanded="false" aria-controls="menu-wrapper" aria-label="Toggle navigation menu">Menu</button>
|
||||||
<h2 id="shell-title">xTeVe Control Panel</h2>
|
<h1 id="shell-title">xTeVe Control Panel</h1>
|
||||||
<p id="connection-indicator" class="status-idle" role="status" aria-live="polite" aria-atomic="true">Connecting...</p>
|
<p id="connection-indicator" class="status-idle" role="status" aria-live="polite" aria-atomic="true">Connecting...</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
+6
-4
@@ -1,11 +1,13 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>xTeVe</title>
|
<title>xTeVe</title>
|
||||||
<link rel="stylesheet" href="css/screen.css" type="text/css">
|
<link rel="stylesheet" href="css/tokens.css">
|
||||||
<link rel="stylesheet" href="css/base.css" type="text/css">
|
<link rel="stylesheet" href="css/base.css">
|
||||||
|
<link rel="stylesheet" href="css/components.css">
|
||||||
|
<link rel="stylesheet" href="css/layout.css">
|
||||||
<script src="js/app.js"></script>
|
<script src="js/app.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@@ -13,7 +15,7 @@
|
|||||||
|
|
||||||
<div id="header" class="imgCenter"></div>
|
<div id="header" class="imgCenter"></div>
|
||||||
|
|
||||||
<main id="box" role="main" aria-labelledby="head-text">
|
<main id="box" aria-labelledby="head-text">
|
||||||
|
|
||||||
<div id="headline">
|
<div id="headline">
|
||||||
<h1 id="head-text" class="center">Login</h1>
|
<h1 id="head-text" class="center">Login</h1>
|
||||||
|
|||||||
@@ -1,18 +1,20 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>xTeVe</title>
|
<title>xTeVe</title>
|
||||||
<link rel="stylesheet" href="css/screen.css" type="text/css">
|
<link rel="stylesheet" href="css/tokens.css">
|
||||||
<link rel="stylesheet" href="css/base.css" type="text/css">
|
<link rel="stylesheet" href="css/base.css">
|
||||||
|
<link rel="stylesheet" href="css/components.css">
|
||||||
|
<link rel="stylesheet" href="css/layout.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="auth-screen">
|
<body class="auth-screen">
|
||||||
|
|
||||||
<div id="header" class="imgCenter"></div>
|
<div id="header" class="imgCenter"></div>
|
||||||
|
|
||||||
<div id="box">
|
<main id="box" aria-labelledby="head-text">
|
||||||
|
|
||||||
<div id="headline">
|
<div id="headline">
|
||||||
<h1 id="head-text" class="center">Maintenance</h1>
|
<h1 id="head-text" class="center">Maintenance</h1>
|
||||||
@@ -24,7 +26,7 @@
|
|||||||
|
|
||||||
<div id="box-footer"></div>
|
<div id="box-footer"></div>
|
||||||
|
|
||||||
</div>
|
</main>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user