ahriman/package/share/ahriman/style.jinja2

<style>
    :root {
        --color-building: 255, 255, 146;
        --color-failed: 255, 94, 94;
        --color-pending: 255, 255, 146;
        --color-success: 94, 255, 94;
        --color-unknown: 225, 225, 225;

        --color-header: 200, 200, 255;
        --color-hover: 255, 255, 225;
        --color-line-blue: 235, 235, 255;
        --color-line-white: 255, 255, 255;
    }

    @keyframes blink-building {
        0% { background-color: rgba(var(--color-building), 1.0); }
        10% { background-color: rgba(var(--color-building), 0.9); }
        20% { background-color: rgba(var(--color-building), 0.8); }
        30% { background-color: rgba(var(--color-building), 0.7); }
        40% { background-color: rgba(var(--color-building), 0.6); }
        50% { background-color: rgba(var(--color-building), 0.5); }
        60% { background-color: rgba(var(--color-building), 0.4); }
        70% { background-color: rgba(var(--color-building), 0.3); }
        80% { background-color: rgba(var(--color-building), 0.2); }
        90% { background-color: rgba(var(--color-building), 0.1); }
        100% { background-color: rgba(var(--color-building), 0.0); }
    }

    div.root {
        width: 70%;
        padding: 15px 15% 0;
    }

    section.element, footer {
        width: 100%;
        padding: 10px 0;
    }

    code, input, table {
        width: inherit;
    }

    /* table description */
    th, td {
        padding: 5px;
    }

    tr.package:nth-child(odd) {
        background-color: rgba(var(--color-line-white), 1.0);
    }

    tr.package:nth-child(even) {
        background-color: rgba(var(--color-line-blue), 1.0);
    }

    tr.package:hover {
        background-color: rgba(var(--color-hover), 1.0);
    }

    tr.header{
        background-color: rgba(var(--color-header), 1.0);
    }

    td.status {
        text-align: center;
    }

    td.package-unknown {
        background-color: rgba(var(--color-unknown), 1.0);
    }
    td.package-pending {
        background-color: rgba(var(--color-pending), 1.0);
    }
    td.package-building {
        background-color: rgba(var(--color-building), 1.0);
        animation-name: blink-building;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    td.package-failed {
        background-color: rgba(var(--color-failed), 1.0);
    }
    td.package-success {
        background-color: rgba(var(--color-success), 1.0);
    }

    li.service-unknown {
        background-color: rgba(var(--color-unknown), 1.0);
    }
    li.service-building {
        background-color: rgba(var(--color-building), 1.0);
        animation-name: blink-building;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    li.service-failed {
        background-color: rgba(var(--color-failed), 1.0);
    }
    li.service-success {
        background-color: rgba(var(--color-success), 1.0);
    }

    /* navigation footer description */
    ul.navigation {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: rgba(var(--color-header), 1.0);
    }

    ul.navigation li {
        float: left;
    }

    ul.navigation li.right {
        float: right;
    }

    ul.navigation li a {
        display: block;
        color: black;
        text-align: center;
        text-decoration: none;
        padding: 14px 16px;
    }

    ul.navigation li a:hover {
        opacity: 0.6;
    }

    /* login button in footer and modal page */
    button.login {
        background-color: rgba(var(--color-header), 1.0);
        padding: 14px 16px;
        border: none;
        cursor: pointer;
        width: 100%;
    }

    button.login:hover {
        opacity: 0.6;
    }

    button.cancel {
        background-color: rgba(var(--color-failed), 1.0);
        padding: 14px 16px;
        border: none;
        cursor: pointer;
        width: 100%;
    }

    button.cancel:hover {
        opacity: 0.6;
    }

    /* modal page inputs and containers */
    input[type=text], input[type=password] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }

    .login-container {
        padding: 14px 16px;
    }

    span.password {
        float: right;
        padding-top: 16px;
    }

    .modal-login-form {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
        padding-top: 60px;
    }

    .modal-login-form-content {
        background-color: #fefefe;
        margin: 5% auto 15% auto;
        border: 1px solid #888;
        width: 25%;
    }

    /* modal page animation */
    .animate {
        -webkit-animation: animatezoom 0.6s;
        animation: animatezoom 0.6s
    }

    @-webkit-keyframes animatezoom {
        from {-webkit-transform: scale(0)}
        to {-webkit-transform: scale(1)}
    }

    @keyframes animatezoom {
        from {transform: scale(0)}
        to {transform: scale(1)}
    }
</style>