dusklight/res/rml/prelaunch.rcss

*, *:before, *:after {
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;
    font-family: "Fira Sans";
    font-weight: normal;
    font-size: 20dp;
    color: #FFFFFF;
    filter: opacity(0);
    transition: filter 1s 0.2s linear-in-out;
    z-index: -1;
}

.gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    /* The color gradient from the Figma bands really badly. A fully black gradient does as well, but not as badly. */
    decorator: horizontal-gradient(#000000FF #00000000);
}

body.mirrored .gradient {
    decorator: horizontal-gradient(#00000000 #000000FF);
}

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    decorator: image(../prelaunch-bg.png cover left center);
    opacity: 0;
    transition: opacity 1s linear-in-out;
}

body[open] {
    filter: opacity(1);
}

body[open] .background {
    opacity: 1;
}

body.disc-ready .background {
    opacity: 0;
}

content {
    display: block;
    width: 100%;
    height: 100%;
    filter: opacity(0);
    transition: filter 0.2s linear-in-out;
}

content[open] {
    filter: opacity(1);
}

menu {
    position: absolute;
    left: 96dp;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    /* Scale based on a reference screen width, 856/1216 */
    width: 70.394736vw;
    min-width: 428dp;
    max-width: 50vw;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 48dp;
}

body.mirrored menu {
    left: auto;
    right: 96dp;
}

hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4dp;
}

body.mirrored hero {
    align-items: flex-end;
}

hero img {
    width: 100%;
}

eyebrow {
    font-family: "Alegreya SC";
    font-size: 32dp;
}

@media (min-width: 1216dp) {
    eyebrow {
        /* Same logic as .menu, 32/1216 */
        font-size: 2.631579vw;
    }
}

eyebrow span {
    font-weight: bold;
}

#menu-list {
    display: flex;
    flex-direction: column;
    gap: 12dp;
    align-items: flex-start;
}

#menu-list button {
    width: 428dp;
    height: 54dp;
    padding: 8dp 16dp;
    border-radius: 8dp;
    text-align: left;
    text-transform: uppercase;
    font-family: "Fira Sans Condensed";
    font-size: 32dp;
    font-weight: normal;
    cursor: pointer;
    /* Define a fully transparent gradient as the default state, otherwise a white flash occurs */
    decorator: horizontal-gradient(#00000000 #00000000);
}

#menu-list button:disabled {
    opacity: 0.75;
    cursor: default;
    decorator: horizontal-gradient(#00000000 #00000000);
}

#menu-list button.anim-done {
    transition: decorator color opacity 0.1s linear-in-out;
}

#menu-list button:hover,
#menu-list button:focus-visible {
    color: black;
    decorator: horizontal-gradient(#FEE685FF #FEE68500);
}

body.mirrored #menu-list {
    align-items: flex-end;
}

body.mirrored #menu-list button {
    text-align: right;
}

body.mirrored #menu-list button:hover,
body.mirrored #menu-list button:focus-visible {
    decorator: horizontal-gradient(#FEE68500 #FEE685FF);
}

disc-info {
    position: absolute;
    left: 96dp;
    right: auto;
    bottom: 72dp;
    display: flex;
    flex-direction: column;
    gap: 12dp;
    font-size: 24dp;
    font-effect: glow(0dp 4dp 0dp 4dp black);
    text-align: left;
}

body.mirrored disc-info {
    left: auto;
    right: 96dp;
    text-align: right;
}

version-info {
    position: absolute;
    right: 96dp;
    left: auto;
    bottom: 72dp;
    display: flex;
    flex-direction: column;
    gap: 12dp;
    text-align: right;
    font-size: 24dp;
    font-effect: glow(0dp 4dp 0dp 4dp black);
    text-align: right;
}

body.mirrored version-info {
    right: auto;
    left: 96dp;
    text-align: left;
}

#disc-status {
    display: flex;
    align-items: center;
    gap: 8dp;
}

#disc-status[status=good] {
    color: #D8F999;
}

#disc-status[status=bad] {
    color: #FFC9C9;
}

#disc-status[status=verifying] {
    color: #FFFFFF;
}

#disc-status[status=mismatch] {
    color: #FFD6A7;
}

#disc-status[status=unknown] {
    color: rgba(224, 219, 200, 65%);
}

#disc-status[status=pending] {
    color: #FEE685;
}

#disc-status icon {
    display: none;
    width: 24dp;
    height: 24dp;
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-size: 24dp;
}

#disc-status[status] icon {
    display: block;
}

#disc-status[status=good] icon {
    decorator: text("" center center);
}

#disc-status[status=bad] icon {
    decorator: text("" center center);
}

#disc-status[status=verifying] icon {
    decorator: text("" center center);
}

#disc-status[status=mismatch] icon {
    decorator: text("" center center);
}

#disc-status[status=unknown] icon {
    decorator: text("" center center);
}

#disc-status[status=pending] icon {
    decorator: text("" center center);
}

#disc-version {
    font-size: 20dp;
}

.update {
    display: none;
    color: #A6A09B;
    align-items: center;
    justify-content: flex-end;
    gap: 8dp;
    font-size: 20dp;
}

.update[state=checking],
.update[state=failed] {
    display: block;
}

.update[state=available] {
    display: flex;
}

#update-download {
    display: none;
    margin: 0dp;
    padding: 0dp;
    border-width: 0dp;
    background-color: transparent;
    color: #D8F999;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    decorator: horizontal-gradient(#00000000 #00000000);
}

.update[state=available] #update-download {
    display: flex;
    align-items: center;
    gap: 2dp;
}

#update-download icon {
    display: block;
    width: 18dp;
    height: 18dp;
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    decorator: text("" center center);
}

.detail {
    color: #A6A09B;
}

body.mirrored .update {
    justify-content: flex-start;
}

/* Startup animation */
.intro-item {
    opacity: 0;
    transform: translateY(10dp);
    transition: opacity transform 0.3s 0.1s cubic-in-out;
}

body.animate-in .intro-item {
    opacity: 1;
    transform: translateY(0dp);
}

.delay-0 {
    transition: opacity transform 0.3s 0.1s cubic-in-out;
}

.delay-1 {
    transition: opacity transform 0.3s 0.2s cubic-in-out;
}

.delay-2 {
    transition: opacity transform 0.3s 0.3s cubic-in-out;
}

.delay-3 {
    transition: opacity transform 0.3s 0.4s cubic-in-out;
}

.delay-4 {
    transition: opacity transform 0.3s 0.5s cubic-in-out;
}

.delay-5 {
    transition: opacity transform 0.3s 0.6s cubic-in-out;
}

/* Mobile layout */
@media (max-height: 640dp) {
    .gradient {
        decorator: horizontal-gradient(#00000000 #000000FF);
    }

    body.mirrored .gradient {
        decorator: horizontal-gradient(#000000FF #00000000);
    }

    menu {
        left: 32dp;
        right: 32dp;
        width: auto;
        min-width: 0;
        max-width: none;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16dp;
    }

    body.mirrored menu {
        left: 32dp;
        right: 32dp;
        flex-direction: row-reverse;
    }

    hero {
        flex: 1 1 0;
        min-width: 0;
        max-width: 48%;
        margin-left: 32dp;
    }

    body.mirrored hero {
        align-items: flex-end;
    }

    hero img {
        width: 100%;
    }

    #menu-list {
        flex: 1 1 0;
        min-width: 0;
        max-width: 52%;
        align-items: flex-end;
    }

    #menu-list button {
        width: 100%;
        max-width: 100%;
        text-align: right;
    }

    #menu-list button:hover,
    #menu-list button:focus-visible {
        decorator: horizontal-gradient(#FEE68500 #FEE685FF);
    }

    body.mirrored #menu-list {
        align-items: flex-start;
    }

    body.mirrored #menu-list button {
        text-align: left;
    }

    body.mirrored #menu-list button:hover,
    body.mirrored #menu-list button:focus-visible {
        decorator: horizontal-gradient(#FEE685FF #FEE68500);
    }

    eyebrow {
        display: none;
    }

    disc-info {
        right: 32dp;
        left: auto;
        bottom: 32dp;
        top: auto;
        text-align: right;
        font-size: 16dp;
        gap: 8dp;
    }

    #disc-status {
        justify-content: flex-end;
    }

    #disc-status icon {
        font-size: 20dp;
    }

    #disc-version {
        font-size: 16dp;
    }

    version-info {
        right: 32dp;
        left: auto;
        bottom: auto;
        top: 32dp;
        text-align: right;
        font-size: 16dp;
        gap: 8dp;
    }

    .update {
        font-size: 16dp;
    }

    body.mirrored disc-info {
        right: auto;
        left: 32dp;
        bottom: 32dp;
        top: auto;
        text-align: left;
    }

    body.mirrored version-info {
        right: auto;
        left: 32dp;
        bottom: auto;
        top: 32dp;
        text-align: left;
    }

    body.mirrored #disc-status {
        justify-content: flex-start;
    }
}