style.css

/*
 * SPDX-FileCopyrightText: Copyright 2022-2024 EDF (Électricité de France S.A.)
 * SPDX-License-Identifier: BSD-3-Clause
 * See README for all details on copyright, authorship and license.
 */

html { font-family: sans-serif; }
h1 { color: navy; }
h2 { color: navy; }
#crashreport { border: medium solid red; padding: 0.5em; }
footer { padding-top: 0.5em; margin-top: 1em; border-top: solid thin silver; font-size: smaller; }
fieldset { display: table; margin: 0.3em; padding: 0; border: none; }
fieldset p { display: table-row; }
fieldset label { display: table-cell; padding-right: 0.3em; }
fieldset input { display: table-cell; }

.network.blocked { animation: 2s blink-red; }
.network.blocked2 { animation: 2s blink2-red; }
.network.allowed { animation: 2s blink-green; }
.network.allowed2 { animation: 2s blink2-green; }
@keyframes blink-red {
    5% { color: red; }
    40% { color: red; }
}
@keyframes blink-green {
    5% { color: green; }
    40% { color: green; }
}
@keyframes blink2-red {
    5% { color: red; }
    40% { color: red; }
}
@keyframes blink2-green {
    5% { color: green; }
    40% { color: green; }
}

/* This comes from a counter and blinks every time the counter goes up. */
.mod2-0.flash-yellow { animation: 4s blink0-yellow; }
.mod2-1.flash-yellow { animation: 4s blink1-yellow; }
@keyframes blink0-yellow {
    5% { background-color: yellow; }
    40% { background-color: yellow; }
}
@keyframes blink1-yellow {
    5% { background-color: yellow; }
    40% { background-color: yellow; }
}

.new tt { animation: 10s new; }
.new::after { content: ' (new)'; animation: 15s new-after; visibility: hidden; }
@keyframes new {
    from { background-color: yellow; }
    90% { background-color: yellow; }
}
@keyframes new-after {
    from { visibility: visible; }
    to { visibility: hidden; }
}