live-schedule/style.css

:root {
    --active: #b7fd49;
    --inactive: #868686;
    --foreground: #eee;
    --background: #000;
}

html {
    font-family: "Inter", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: var(--foreground);
    background: var(--background);
}

#app {
    margin: auto auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

#title {
    width: 100%;
    margin-bottom: -.5em;
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-style: italic;
}

#actions {
    font-size: 1.2em;
}
#actions button {
    padding: .3em .5em;
    font-size: inherit;
    font-weight: 600;
    color: var(--active);
    background: var(--background);
    border: 1px solid var(--active);
    border-radius: 4px;
    transition-property: color, background-color, border-color;
    transition-duration: .1s;
    transition-timing-function: ease-out;
    cursor: pointer;
}
#actions button:hover {
    color: color-mix(in srgb, var(--active), white 25%);
    border-color: color-mix(in srgb, var(--active), white 25%);
    background: color-mix(in srgb, var(--active), var(--background) 75%);
}
#actions button:active {
    color: color-mix(in srgb, var(--active), black 25%);
    border-color: color-mix(in srgb, var(--active), black 25%);
    background: color-mix(in srgb, var(--active), black 90%);
}
#actions button[disabled],
#actions button[disabled]:hover,
#actions button[disabled]:active {
    color: var(--inactive);
    border-color: var(--inactive);
    background: transparent;
    cursor: inherit;
}

#schedule {
    width: 1280px;
    height: 720px;
    margin: auto 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    gap: 1.5em;

    overflow: hidden;
    color: var(--foreground);
    background-color: var(--background);
    background: url("background.png");

    border: 1px solid var(--foreground);

    z-index: 1;
}

.timeslot {
    position: relative;
    height: 80px;
    display: grid;
    grid-template-columns: 5em 32em;
    grid-gap: 1em;
    align-items: center;
    transition-property: opacity, transform, height;
    transition-duration: .2s;
    transition-timing-function: ease-out;
}
.timeslot.disabled {
    height: 50px;
    transform: translateX(2.5em);
    opacity: .5;
}

.timeslot-date {
    width: 5em;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: "Monaspace Argon", monospace;
    font-weight: bold;
}
.timeslot.disabled .timeslot-date {
    opacity: .5;
}

.timeslot-day {
    font-size: 46px;
    line-height: 46px;
    cursor: pointer;
}
.timeslot-time {
    font-size: 18px;
    opacity: .75;
}
.timeslot.disabled .timeslot-time {
    display: none;
}

.timeslot-content {
    position: relative;
    height: 100%;
    padding: 0 1.4em;

    display: flex;
    flex-direction: column;
    justify-content: center;

    font-weight: bold;
    color: var(--active);
    background: var(--background);
    border-radius: 8px 0 0 8px;

    transition-property: padding, color;
    transition-duration: .2s;
    transition-timing-function: ease-out;
}
.timeslot.disabled .timeslot-content {
    padding: 0 1em;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 1em;

    font-family: 'Monaspace Argon', monospace;

    color: var(--inactive);
}
.timeslot-content::before {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    width: 100%;
    height: 100%;
    padding: 1px;

    background-color: #c7ed7a;
    border-radius: 8px 0 0 8px;
    mask-image: linear-gradient(150deg, white, transparent 90%);

    transition-property: background-color, height;
    transition-duration: .2s;
    transition-timing-function: ease-out;

    z-index: -1;
}
.timeslot.disabled .timeslot-content::before {
    background-color: var(--inactive);
}

.timeslot-title {
    font-size: 1.6em;
    font-weight: 700;
    transition-property: margin-top, font-size;
    transition-duration: .2s;
    transition-timing-function: ease-out;
}
.timeslot:not(.disabled):has(.timeslot-subtitle:empty) .timeslot-title {
    margin-top: .6em;
    font-size: 2em;
}

.timeslot.disabled .timeslot-title {
    font-size: 1.8em;
}
.timeslot.disabled .timeslot-subtitle {
    font-size: 1.3em;
    opacity: .75;
}

.timeslot:not(.disabled) {
    .timeslot-title, .timeslot-subtitle {
        background: linear-gradient(to top, #81ac34 0%, #b7ff00 33%, #d7ff83 60%, #d9ff6d);
        /* --hue: 128.7;
        background: linear-gradient(in oklch, to top,
        oklch(0.58, 0.1464, var(--hue)) 0%,
        oklch(0.70, 0.1764, var(--hue)) 33%,
        oklch(0.95, 0.1164, var(--hue)) 60%,
        oklch(0.90, 0.2264, var(--hue))
        ); */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 8px color-mix(in srgb, var(--active), transparent 50%);
}

&.special {
    .timeslot-title, .timeslot-subtitle {
        --hue: 325.03;

        background: linear-gradient(to top, #bc11c7 0%, #d64bdf 33%, #f99cff 60%, #f788fe);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        text-shadow: 0 0 8px color-mix(in srgb, #f788fe, transparent 50%);
    }

    .timeslot-content::before {
        background-color: #f788fe;
    }
}
}