@charset "utf-8";

/* Body */

:root,
:root.light {
    --index-page-width: max(1800px, 90vw);
    --entry-page-width: max(1400px, 90vw);
    --table-highlight-color: hsl(0 0% 0% / 0.04);
    --table-header-color: hsl(0 0% 0% / 0.09);
}

/* Labels for ASS and SRT */

main a[href$=".ass"]::before,
main a[href$=".srt"]::before {
    display: inline-grid;
    content: "ass";
    background-color: rgb(207, 93, 0);
    color: rgb(236, 236, 236);
    border-radius: 4px;
    padding: 0 4px;
    place-items: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8em;
    margin-inline-end: 1ch;
}

main a[href$=".srt"]::before {
    content: "srt";
    background-color: rgb(0, 177, 15);
}

/* Subtitle catalog - main */

.subtitle_catalog_main_wrap {
    flex: 1 0 auto;
    overflow-wrap: break-word;
    margin: var(--gap-large) 0 var(--gap-large);
}

.subtitle_catalog_main {
    background-color: transparent;
    margin: 0 auto;
    width: 100%;
    max-width: var(--index-page-width);
    box-shadow: 0 1px 4px 0 var(--elem-shadow-color);
    padding: 0;
}

.subtitle_catalog_main input + * {
    margin-block-start: 0;
}

/* Subtitle entries */

#divbodyholder > .entry_main_wrap {
    /* List of subtitle files */
    max-width: var(--entry-page-width);
}

.entries_table {
    --border-color: hsl(0, 0%, 85%);

    background-color: var(--article-background, white);
    border: 1px solid var(--border-color);
    width: 100%;
    border-collapse: collapse;

    * {
        margin-block: 0;
    }

    thead th {
        font-weight: 600;
        background-color: var(--table-header-color);
        vertical-align: middle;
        text-align: left;

        &:not(.entry_number) {
            user-select: none;
            cursor: pointer;
            text-decoration: underline;
            text-decoration-color: hsla(213, 10%, 18%, 0.4);
            text-decoration-style: dashed;
            text-decoration-thickness: 1px;
        }
        &.sort-indicator::after {
            margin-left: 1ch;
            display: inline-block;
            color: currentColor;
            content: "";
            width: 0;
            height: 0;
            border-left: 0.5rem solid transparent;
            border-right: 0.5rem solid transparent;
            border-bottom: 0.5rem solid currentColor;
        }
        /* Sorting indicators */
        &.sort-asc::after {
            rotate: 180deg;
        }
    }

    th,
    td {
        padding-inline: 0.2rem;
        padding-block: 0.2rem;
        border: 1px solid var(--border-color);
        text-align: left;
        word-break: normal;
        overflow-wrap: break-word;
    }

    &,
    table,
    thead,
    tbody,
    tr {
        max-width: 100%;
        content-visibility: auto;
        contain-intrinsic-size: auto;
    }

    tbody {
        /* Count rows with CSS to show correct row numbers when the user clicks to display only TV or only movies. */
        counter-reset: row-num;
        tr {
            counter-increment: row-num;
        }
        td.entry_number {
            &::before {
                content: counter(row-num);
                font-family: var(--monospace-font-families, monospace);
            }
            .font-mono {
                display: none;
            }
        }
    }

    tr:nth-of-type(2n) {
        background-color: var(--table-highlight-color);
    }

    thead,
    tbody,
    tr,
    th,
    td {
        max-height: 25vh;
    }

    .entry_number {
        min-width: 3ch;
        word-break: keep-all;
    }
    .entry_type {
        min-width: 12ch;
        word-break: keep-all;
    }
    .last_modified {
        min-width: 23ch;
        word-break: keep-all;
    }
    .file_size {
        min-width: 7ch;
        word-break: keep-all;
    }
    .entry_name,
    .english_name,
    .japanese_name {
        word-break: break-word;
    }

    .font-mono {
        /* Change font for file size and last modified. */
        font-family: var(--monospace-font-families, monospace);
    }

    &[data-is-sorting="true"] {
        pointer-events: none;
    }
}

/* While sorting, show a notification. */
body::after {
    content: "Sorting...";
    font-weight: bold;
    font-size: 1.5rem;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--sidebar-link-color-hover, white);
    padding: 20px;
    border-radius: 5px;
    z-index: 9999;
    user-select: none;
    /* transition properties */
    display: none;
    opacity: 0;
    translate: -50% -25%;
    /* transitions */
    transition:
        display 400ms allow-discrete,
        opacity 400ms ease-out,
        translate 400ms;
}
body:has(.entries_table[data-is-sorting="true"])::after {
    display: block;
    opacity: 1;
    translate: -50% -50%;
    @starting-style {
        opacity: 0;
        translate: -50% -75%;
    }
}

/* Column placement */

.subtitle_catalog_end td {
    /* Back to index and other links */
    text-align: center;
}

/* Tabs */

input[type="radio"].filter_by_type_input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    visibility: hidden;
    display: none;
}

.filter_by_type {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    * {
        margin: 0;
    }
}

.tabs_title {
    font-weight: 700;
}

.filter_by_type label {
    padding: 0.35rem 0.75rem;

    border: 1px solid #d0d0d0;
    border-radius: 100vmax;

    cursor: pointer;
    user-select: none;
    font-size: 0.95rem;
    line-height: 1;

    &:hover {
        background-color: rgba(127, 127, 127, 0.07);
    }

    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.1);
    font-family: var(--monospace-font-families, monospace);
}

#ext_srt:checked ~ .filter_by_type label[for="ext_srt"],
#ext_ass:checked ~ .filter_by_type label[for="ext_ass"],
#ext_all:checked ~ .filter_by_type label[for="ext_all"],
#type_movie:checked ~ .filter_by_type label[for="type_movie"],
#type_tv:checked ~ .filter_by_type label[for="type_tv"],
#type_all:checked ~ .filter_by_type label[for="type_all"] {
    background-color: rgba(127, 127, 127, 0.14);
    font-weight: 800;
}

/* show only selected group */

#ext_srt:checked ~ :is(.group_ass, .group_all) {
    display: none;
}
#ext_ass:checked ~ :is(.group_srt, .group_all) {
    display: none;
}
#ext_all:checked ~ :is(.group_srt, .group_ass) {
    display: none;
}

.subtitle_catalog_main:has(#type_movie:checked)
    :is([data-entry-type="anime_tv"], [data-entry-type="drama_tv"], [data-entry-type="unsorted"]) {
    display: none;
}
.subtitle_catalog_main:has(#type_tv:checked)
    :is([data-entry-type="anime_movie"], [data-entry-type="drama_movie"], [data-entry-type="unsorted"]) {
    display: none;
}

/* Shell commands */

.cmd_wrap {
    padding: 0.6rem 0.65rem;
    border: 1px dashed #ccc;
    border-radius: 0.6rem;

    .cmdlabel {
        font-weight: 800;
    }
}

/* Small screens */

@media screen and (max-width: 1000px) {
    .entries_table {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;

        tbody,
        tr {
            display: contents;
        }
        thead {
            display: none;
        }
        td:not(.subtitle_catalog_end td)::before {
            display: inline-block;
            margin-inline-end: 1ch;
            font-weight: bold;
            content: attr(data-cell) ":";
            text-transform: capitalize;
        }
    }
    .entry_name {
        background-color: var(--table-header-color);
    }
    td.entry_name ~ td {
        padding-inline-start: 2ch;
    }
    .entry_number {
        display: none;
    }
}
