props/Props/assets/styles/site.scss

@use "themer";
@use "sass:color";
@use "~/node_modules/bootstrap/scss/bootstrap";

header > nav {
    @extend .navbar-expand-lg;
    @extend .navbar;
    @extend .border-bottom;
    @include themer.themed {
        background-color: themer.color-of("navbar");
    }

    .nav-link, .navbar-brand {
        @include themer.themed {
            color: themer.color-of("navbar-link");
        }
        &.active {
            @include themer.themed {
                color: themer.color-of("navbar-active");
                border-bottom-color: themer.color-of("navbar-active");
            }
            padding-bottom: 2px;
            border-bottom-style: solid;
            border-bottom-width: 2px;
        }
    }

    .navbar-toggler {
        .bi-list {
            font-size: 1.5rem;
        }
    }
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;

}

footer {
    @extend .text-center;
    @extend .border-top;
    @extend .py-2;
    @include themer.themed {
        background-color: themer.color-of("footer");
        color: themer.color-of("muted");
    }

    a {
        @include themer.themed {
            color: themer.color-of("muted");
        }
    }

    width: 100%;
}

.jumbotron {
    @extend .container-fluid;
    @extend .p-4;
    @include themer.themed {
        background-color: themer.color-of("main");
    }

    &.sub {
        @include themer.themed {
            background-color: themer.color-of("sub");
        }
    }
}

.center-overlay {
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 50%;
    top: 50%;
}

.concise {
    @extend .container;
    max-width: 630px;
    width: 100%;
}

.less-concise {
    @extend .container;
    max-width: 720px;
    width: 100%;
}

hr {
    &.concise {
        @extend .my-2;
        width: 15%;
        max-width: 160px;
        min-width: 32px;
        height: 2px;
    }
    &.less-concise {
        @extend .my-2;
        width: 30%;
        max-width: 270px;
        min-width: 32px;
        height: 2px;
    }
}

.tear {
    @include themer.themed {
        $tear: themer.color-of("background");
        background-color: adjust-color($color: $tear, $lightness: -8%, $alpha: 1.0);
        box-shadow: 0px 0px 5px 0px adjust-color($color: $tear, $lightness: -25%, $alpha: 1.0) inset;
    }
}

input[type="text"].title-input {
    @include themer.themed {
        color: themer.color-of("text");
    }
    font-size: 2.5em;
    margin-bottom: 1.5rem;
    border-style: none;
    
    border-bottom: 1px solid transparent;

    background-color: transparent;
    text-align: center;
    transition: border-bottom-color 0.5s;

    &:hover:not(:disabled) {
        @include themer.themed {
            border-bottom-color: adjust-color($color: themer.color-of("text"), $lightness: 50%);
        }
    }

    &:focus:not(:disabled) {
        outline: none;
        @include themer.themed {
            border-bottom-color: adjust-color($color: themer.color-of("text"));
        }
    }

    &:disabled {
        border-bottom-color: transparent;
        @include themer.themed {
            color: themer.color-of("text");
        }
    }
}

.clean-radio {
    input[type="radio"] {
        display: none;
        & + label {
            transition: border-color 0.5s;
            padding: 0.5rem;
            border-left: 3px solid;
            @include themer.themed {
                border-color: themer.color-of("text");
            }
            cursor: pointer;
        }
        &:hover + label {
            @include themer.themed {
                border-color: adjust-color($color: themer.color-of("special"), $lightness: 30%);
            }
        }
        &:checked + label {
            @include themer.themed {
                border-color: adjust-color($color: themer.color-of("special"), $lightness: 0%);
            }
        }
    }

    button.btn {
        transition: color 0.5s;
        color: transparent;
    }

    &:hover {
        button.btn {
            @include themer.themed {
                color: themer.color-of("text");
            }
        }
    }
}

.border-right-themed {
    border-right: 1px solid;
    @include themer.themed {
        border-right-color: themer.color-of("text");
    }
}

.border-left-themed {
    border-left: 1px solid;
    @include themer.themed {
        border-left-color: themer.color-of("text");
    }
}

.border-top-themed {
    border-top: 1px solid;
    @include themer.themed {
        border-top-color: themer.color-of("text");
    }
}

.border-bottom-themed {
    border-bottom: 1px solid;
    @include themer.themed {
        border-bottom-color: themer.color-of("text");
    }
}

html {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    @include themer.themed {
        background-color: themer.color-of("background");
        color: themer.color-of("text");
    }
}

.text-muted {
    @include themer.themed {
        color: themer.color-of("muted") !important;
    }
}

.multipage {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    .multipage-slides, .multipage-slides > .multipage-slide.active {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .multipage-slide {
        .multipage-content {
            @extend .container;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .multipage-title {
            @extend .less-concise;
            text-align: center;
        }
    }

    .nav-pills.selectors {
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
        button[type="button"] {
            margin-right: 5px;
            margin-left: 5px;
            opacity: 0.4;
            border-style: none;
            font-size: 1.5rem;
            min-width: 30px;
            width: auto;
            height: auto;
            background-color: transparent;
            background-clip: border-box;
            @include themer.themed {
                border-bottom: 2px solid themer.color-of("text");
            }
            border-bottom-style: none;

            &.active {
                opacity: 1;
            }
        }
    }
}