DataDash/src/main/resources/static/details.css

@import url("./main.css");
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap');

:root {
    --min-card-size: min(60ch, calc(100vw - var(--pad-main)));
    --rating-color: gold;
}

main {
    & > :is(header, section, footer) {
        background-color: var(--fg-color);
        padding: var(--pad-datasets-block) var(--pad-datasets-inline);
        position: relative;
    }
    
    & > :first-child {
        border-top-left-radius: var(--corner-radius);
        border-top-right-radius: var(--corner-radius);
        margin-top: var(--pad-main);
    }

    & > :last-child {
        border-bottom-left-radius: var(--corner-radius);
        border-bottom-right-radius: var(--corner-radius);
        margin-bottom: var(--pad-main);
    }

    & > :not(:last-child):is(header, section)::after {
        content: '';
        position: absolute;
        inset-inline: calc(var(--pad-datasets-inline) - var(--gap-small));
        bottom: 0;
        border-bottom: 3px solid var(--bg-color);
        opacity: .25;
        transform: translateY(50%);
        z-index: 1;
    }
}

header {
    margin-inline: 0;
    display: grid;
    grid-template-columns: 1fr 1fr max-content;
    align-items: center;
    grid-gap: var(--gap-medium);
}

h1 {
    margin-block: var(--gap-medium) 0;
    text-align: center;
}

#title {
    grid-column: 1 / 3;

    &::after {
        content: attr(data-type);
        background-color: var(--accent-color);
        font-size: .5em;
        font-weight: initial;
        position: relative;
        bottom: .25lh;
        margin-inline: var(--gap-small);
        padding: 2pt 4pt;
        border-radius: 4pt;
    }

    &[data-type="dataset"]::after {
        content: "Dataset";
    }

    &[data-type="api"]::after {
        content: "API";
    }
}

#details summary, #url {
    text-align: start;
    grid-column: 1 / 3;
}

#rating-input {
    mask-image: url("stars.svg");
    -webkit-mask-image: url("stars.svg");
    mask-size: contain;
    mask-mode: alpha;
    width: 5lh;
    height: 1lh;
    margin-inline: .5ch;
    background: linear-gradient(to right, yellow 33%, black 33%);
}

#rating {
    color: color-mix(in oklab, var(--text-color) 80%, black);
    color: transparent;
    width: 5lh;
    height: 1lh;
    margin-inline: .5ch;
    mask-image: url("stars.svg");
    -webkit-mask-image: url("stars.svg");
    mask-size: contain;
    mask-mode: alpha;
    --rating-percent: calc((var(--rating, 0) / 5) * 100%);
    background: var(--bg-color);
    vertical-align: bottom;
}

#rating::-webkit-meter-bar {
    background: var(--bg-color);
    border: none;
    border-radius: 0;
    grid-row: 1 / -1;
}

#rating::-webkit-meter-optimum-value,
#rating::-webkit-meter-suboptimum-value,
#rating::-webkit-meter-even-less-good-value {
    background-color: var(--rating-color);
}

#rating::-moz-meter-bar {
    background: var(--rating-color);
}

a {
    --text-color: var(--accent-color);

    /*
        Why doesn't it do this automatically? It is inherited from body,
        so I should be able to just change --text-color, right?
    */
    color: var(--text-color); 
}

.upvote {
    margin: var(--gap-medium) 0;
    align-self: self-start;
    grid-column: 3;
    grid-row: 1 / 4;
}

#metadata {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--gap-large);
}

#full-description {
    text-wrap: balance;
    text-wrap: pretty;
    margin-top: 0;
}

:is(#full-description, #not-found) br {
    margin-bottom: .5lh;
}

.skeleton {
    font-family: "Flow Circular";
    font-weight: 400;
    font-style: normal;
    user-select: none;
    --rating-color: var(--text-color);
    
    a, .btn {
        pointer-events: none;
    }
    
    & > * {
        cursor: progress;
    }
    
    @media screen and not (prefers-reduced-motion) {
        :is(header, section) > :is(p, span, h1, a) {
            animation: infinite 2s linear skeleton-loading;
            background: radial-gradient(
                circle farthest-side,
                var(--highlight-color, white) 20%,
                var(--text-color) 40%
                ) no-repeat, var(--text-color);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
                
            &:is(a) {
                --highlight-color: color-mix(in oklab, white, var(--text-color));
            }
        }
    }

    #title::after {
        color: color-mix(in oklab, var(--accent-color) 50%, currentcolor);
    }
}

@keyframes skeleton-loading {
    from {
        background-position-x: calc(-1.4 * var(--min-card-size)), 0;
    }

    to {
        background-position-x: calc(1.4 * var(--min-card-size)), 0;
    }
}

#not-found:not(.hidden) {
    min-height: calc(100vh - 2 * var(--pad-main));
    display: flex;
    flex-direction: column;
    gap: var(--gap-large);
    justify-content: space-evenly;
    container: nothing-found / inline-size;

    p, h1 {
        text-align: center;
        text-wrap: balance;
        text-wrap: pretty;
    }
}

#details-btns > . {
    float: right;
}

#delete-btn {
    background: #861c1c;
}

/* button styling to be revisited */
.btn {
    padding: .5lh 1lh;
    border: none;
    border-radius: .5lh;
    --btn-color: var(--fg-color);
    background-color: var(--btn-color);
    color: var(--text-color);
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 100ms, filter 200ms;
    transition-timing-function: ease-out;
    --drop-shadow-opacity: .5;
    --drop-shadow-offset-y: 0;
    --drop-shadow-blur: .25rem;
    --drop-shadow: drop-shadow(
            rgba(0, 0, 0, var(--drop-shadow-opacity))
            0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
    );
    filter: var(--drop-shadow);
}

.btn:focus-visible, #is-dataset:focus-visible + #is-dataset-toggle {
    outline-offset: 2px;
}

.btn:not(:disabled):hover {
    background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
    --drop-shadow-opacity: .8;
    --drop-shadow-offset-y: .25rem;
    --drop-shadow-blur: .4rem;
}


#nothing-found-bg {
    background-position-x: calc(50% + 3cqh);
}