/*
    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
    Copyright (C) 2023 metamuffin <metamuffin.org>
    Copyright (C) 2023 tpart
*/
.backdrop {
    width: calc(100% + 2 * var(--main-side-margin));
    height: calc(var(--backdrop-height) + 5em);
    margin-left: calc(-1 * var(--main-side-margin));
    margin-right: calc(-1 * var(--main-side-margin));
    margin-top: calc(-1 * var(--bar-height));
    margin-bottom: -5em;
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 1),
        transparent calc(var(--backdrop-height) + 5em)
    );
    mask-image: linear-gradient(
        rgba(0, 0, 0, 1),
        transparent calc(var(--backdrop-height) + 5em)
    );
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    pointer-events: none;
    object-fit: cover;
    object-position: center;
}
.page.node {
    position: relative;
    width: 100%;
}
.page.node .bigposter {
    width: max(8em, 25%);
    float: left;
    margin: 3em;
    margin-top: -1em;
}
.page.node .bigposter img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page.node .title h1 {
    display: inline;
    margin-right: 1em;
}
.page.node .title .play {
    display: inline-block;
    font-stretch: 200%;
}
.page.node .title .play::before {
    content: "play_arrow";
    vertical-align: middle;
}
.page.node .title .mark_watched,
.page.node .title .mark_unwatched {
    display: inline-block;
}
.page.node .title .mark_watched input,
.page.node .title .mark_unwatched input {
    background-color: #80808040;
}

/* TODO find a non-horrible way to put the icon there */
/*.page.node .title .mark_watched input::before {
    content: "done_all";
}
.page.node .title .mark_unwatched input::before {
    content: "undo";
}*/

.dirup {
    width: 100%;
    font-size: large;
    display: block;
    text-align: center;
    background-color: var(--background-light);
    border-radius: 0.2em;
    padding: 0.6em;
    margin: 0.2em;
    transition: filter 0.22s;
}
.dirup:hover {
    filter: brightness(120%);
}