style.css

/* SPDX-License-Identifier: BSD-3-Clause */
/* Copyright (C) 2026 CESNET z. s. p. o. */
/* Author(s): Tomáš Neckař <tomas.neckar@cesnet.cz> */

[data-bs-theme="dark"] {
    --bs-body-bg: #0d1117;          /* Styles the page and input backgrounds */
    --bs-body-color: #c9d1d9;       /* Standard text color */
    --bs-border-color: #30363d;     /* Unifies borders across all form elements */
    --bs-tertiary-bg: #161b22;      /* Styles the input-group-text add-on background */
    --bs-primary: #58a6ff;          /* Styles the checked checkbox */
    --bs-primary-rgb: 88, 166, 255;   /* Calculates the checkbox and input focus ring glow */
}
body {
    background: #0d1117;
    color: #c9d1d9; 
    font-family: monospace;
    padding: 20px;
    margin: 0;
    box-sizing: border-box;
}
.control-panel {
    background: #161b22;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #30363d;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(1, 4, 9, 0.8);
}
.form-label {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #8b949e;
}
.info-icon {
    color: #8b949e; /* GitHub muted gray to match your form-label */
    cursor: help; /* Changes cursor to a question mark on hover */
    font-size: 0.9em; /* Scales it down slightly relative to the text */
    transition: color 0.2s ease-in-out;
}
.info-icon:hover {
    color: #c9d1d9; /* Brightens up when hovered */
}
/* Optional: Ensure tooltip text matches your monospace theme */
.tooltip-inner {
    font-family: monospace;
    font-size: 12px;
}
#count:disabled {
    text-decoration: line-through;
    text-decoration-color: #8b949e; /* GitHub muted gray for the line */
    text-decoration-thickness: 2px; /* Makes the strike look crisp and intentional */
    color: #8b949e; /* Dims the actual number */
    background-color: #161b22; /* Matches the input-group-text background to look inactive */
    opacity: 1; /* Overrides Bootstrap's default disabled opacity so our colors stay exact */
}
.readonly {
    color: #8b949e; /* Dims the actual number */
    background-color: #161b22; /* Matches the input-group-text background to look inactive */
    opacity: 1; /* Overrides Bootstrap's default disabled opacity so our colors stay exact */
}
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.graph-card {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(1, 4, 9, 0.8);
    text-align: center;
    box-sizing: border-box;
}
.graph-title {
    color: #c9d1d9;
    font-weight: 600;
    font-size: 18px;
}
/* Make the legend text inherit the light gray color */
.u-legend {
    color: #c9d1d9;
    font-family: monospace;
    font-size: 13px;
    padding-top: 5px;
}
/* Style the series labels in the legend (e.g., "Latency", "Jitter") */
.u-legend .u-series th {
    font-weight: 600;
    color: #8b949e; /* Muted text for the labels */
}
/* Style the actual dynamic values in the legend */
.u-legend .u-value {
    color: #c9d1d9;
    font-weight: bold;
}
.graph-stats {
    border-top: 1px solid #30363d;
    color: #8b949e; /* Muted label color */
    font-size: 13px;
    font-family: monospace;
}

.graph-stats .stat-val {
    color: #c9d1d9; /* White text for the actual values */
    font-weight: bold;
}
/* A class we can toggle via JS if drops > 0 */
.stat-error {
    color: #ff7b72 !important; /* GitHub danger red */
}
/* Hide the Max and Min series (the 3rd and 4th items) using nth-of-type */
.hide-min-max-legend .u-legend tr.u-series:nth-of-type(n+3) {
    display: none !important;
}
/* Hide the colored square marker from all legend items */
.u-legend .u-marker {
    display: none !important;
}
/* Remove the extra padding around legend color square */
.u-legend th {
    padding-left: 0 !important;
}
.toast {
    background-color: #161b22 !important; /* Force override Bootstrap default */
    border: 1px solid rgba(248, 81, 73, 0.6) !important; /* GitHub danger red, slightly transparent */
    color: #ff7b72 !important; /* GitHub danger text color */
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(1, 4, 9, 0.8) !important;
    font-family: monospace; /* Match your global font */
    font-size: 14px;
}
/* Add a subtle red gradient to the background to make it pop more */
.toast-body {
    background: linear-gradient(90deg, rgba(248, 81, 73, 0.1) 0%, transparent 100%);
    border-radius: 7px; /* Fits inside the parent border */
}
/* Make the Bootstrap close 'X' button white, as it defaults to black */
.toast .btn-close {
    filter: invert(1) opacity(0.7);
}
.toast .btn-close:hover {
    filter: invert(1) opacity(1);
}