/* copyright 2026 Kedric P. Siddons */

@font-face {
    font-family: "Quicksand";
    src: url("./fonts/Quicksand-VariableFont_wght.ttf");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Quicksand";
    src: url("./fonts/Quicksand-VariableFont_wght.ttf");
    font-weight: 800;
    font-style: bold;
    font-display: swap;
}

.vanejs-panel.page-banner {
    background-color: transparent;
    color: inherit;
    border: none;
    box-shadow: none;
}

.vanejs-paragraph-text {
    &.project-version-text {
        font-size: larger;
        font-weight: bold;
    }

    &.post-timestamp {
        font-size: smaller;
        opacity: 0.75;
        font-style: italic !important;
    }
}

.project-tag {
    border-radius: 14px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 125px;
    min-width: max-content;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    padding-left: calc(var(--vjs-padding) / 2);
    padding-right: calc(var(--vjs-padding) / 2);

    &.active {
        border: 2px solid rgb(20,210,20);
        color: rgb(20,210,20);
    }

    &.completed {
        border: 2px solid var(--vjs-theme-color);
        color: var(--vjs-theme-color);
    }

    &.cancelled {
        border: 2px solid rgb(128,128,128);
        color: rgb(128,128,128);
    }

    &.onhold {
        border: 2px solid rgb(210, 20, 20);
        color: rgb(210, 20, 20);
    }
}

span.project-not-available-text {
    display: inline-block;
    width: 150px;
    font-size: smaller;
    text-align: center;
}

.vanejs-app-body#kc-app-body {
    background-size: 128px 128px;
    background-image: image-set(
        url("./img/app-body-bg-img@1x.png") 1x,
        url("./img/app-body-bg-img@2x.png") 2x,
        url("./img/app-body-bg-img@3x.png") 3x,
        url("./img/app-body-bg-img@4x.png") 4x
    )
}

.vanejs-panel#not-found-panel {
    background-color: rgba(0,0,0,0.65);
    box-shadow: none;
    color: inherit;
    border: none;
}