webui/src/lib/style/app.scss

// @use "../node_modules/@fontsource/antonio/scss/mixins" as Antonio;
// $directory: "../node_modules/@fontsource/ubuntu";
// @use "../node_modules/@fontsource/ubuntu/scss/mixins" as Ubuntu;


// @import "../node_modules/bootstrap/scss/bootstrap";

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

@import "@fontsource/antonio/latin-400.css";
@import "@fontsource/ubuntu/latin-400.css";
@import "@fontsource/oswald/latin-400.css";

$form-range-track-bg: #fff;
$color-mode-type: media-query;
$font-family-base: "Ubuntu";

// $border-radius:               .675rem;

@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/utilities";

@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/dropdown";

@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/progress";

@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

@include media-breakpoint-down(xl) {
    html {
        font-size: 85%;
    }

    button.btn,
    input[type="button"].btn,
    input[type="submit"].btn,
    input[type="reset"].btn {
        @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
    }
}

@include media-breakpoint-down(lg) {
    html {
        font-size: 75%;
    }
}


nav {
    margin-bottom: 15px;
}

.splitText div:first-child::after {
    display: block;
    content: '';
    margin-top: 0px;
    border-bottom: 2px solid;
    margin-bottom: 3px;
}

#btcclock-wrapper {
    margin: 0 auto;
}

.btclock {
    border: 1px solid darkgray;
    background: #000;
    border-radius: 5px;
    padding: 10px;
    max-width: 700px;
    margin: 0 auto;

    .digit,
    .splitText,
    .mediumText {
        border: 2px solid gold;
        border-radius: 8px;

        @include media-breakpoint-up(sm) {
            min-width: 10px;
        }

        @include media-breakpoint-up(xxl) {
            min-width: 70px;
        }

        text-align: center;
    }
}

.btclock {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
    font-family: 'Oswald', sans-serif;
}

.btclock>div {
    padding: 5px;
}

.fg-ffff .btclock>div {
    color: #fff;
    border-color: #fff;
}

.bg-ffff .btclock>div {
    background: #fff;
}

.fg-f800 .btclock>div {
    color: #f00;
    border-color: #f00;
}

.bg-f800 .btclock>div {
    background: #f00;
}

.fg-0 .btclock>div {
    color: #000;
    border-color: #000;
}

.bg-0 .btclock>div {
    background: #000;
}

.splitText {
    @include media-breakpoint-up(sm) {
        font-size: 1.0rem;
        padding-top: 8px !important;
        padding-bottom: 9px !important;
    }
    @include media-breakpoint-up(xxl) {
        font-size: 1.8rem;
        padding-top: 19px !important;
        padding-bottom: 20px !important;
    }

    text-align: center;
}

.mediumText {
    font-size: 3rem;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.digit {
    font-size: 5rem;
    @include media-breakpoint-up(sm) {
        font-size: 2.5rem;
    }
    @include media-breakpoint-up(xxl) {
        font-size: 5rem;
    }
    padding-left: 10px;
    padding-right: 10px;
}

.digit-blank {
    content: "abc";
}

#customText {
    text-transform: uppercase;
}

#toggleTimerArea {
    cursor: pointer;
}

.system_info {
    padding: 0;

    li {
        list-style: none;
    }
}