/*
 * dark.css
 *
 * Dark mode with same color scheme as developer.gimp.org.
 *
 * It is loaded after all other stylesheets so the rules below
 * override the light ones without needing extra specificity.
 */

@media (prefers-color-scheme: dark) {

    :root {
        --dark-bg-color: #0e2426; /*taken from WGO footer bg*/
        --dark-bar-color: #081517;
        --dark-surface-color: #1c3234;
        --dark-text-color: #f1f5f9; /*same as Hextra slate-100*/
        --dark-secondary-text-color: #99a1af; /*same as Hextra gray-400*/
        --dark-link-color: #90c2ff; /*taken from gimp gir/api reference hyperlinks*/
        --dark-border-color: rgba(225, 239, 255, 0.1); /*same as Hextra primary-100/10*/
        --dark-strong-border-color: #364153; /*same as Hextra gray-700*/
        --menu-text-color: #ecf0f1;
    }


    /* BACKGROUND AND BODY TEXT */
    body {
        background-color: var(--dark-bar-color);
        color: var(--dark-text-color);
    }
    #pushPage {
        background-color: var(--dark-bg-color);
    }
    p,
    .page_content p,
    .page_content ul,
    .page_content ol,
    .entry-content,
    .entry-content p,
    .entry-content table,
    .circle {
        color: var(--dark-text-color);
    }
    .circle {
        border-color: var(--dark-text-color);
    }
    .post-info,
    .post-nav.prev::after,
    .post-nav.next::before,
    abbr.published,
    .news-item abbr.news-published,
    blockquote p,
    cite {
        color: var(--dark-secondary-text-color);
    }
    section,
    hr {
        border-color: var(--dark-border-color);
    }


    /* PAGE TITLE (shadow below) */
    .container.title {
        box-shadow: 0 8px 8px -8px #000;
    }


    /* HYPERLINKS */
    a,
    header a,
    .show_links,
    .tipue_search_content_title > a,
    .tipue_search_content_title > a:hover {
        color: var(--dark-link-color);
    }


    /* CODE AND COMMANDS */
    code {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.1);
    }
    .MenuCmd > span,
    .GIMPCmd {
        background-color: var(--dark-surface-color);
        border-color: var(--dark-border-color);
    }
    kbd {
        box-shadow: 0px 1px 0px, inset 0px 0px 0px 2px var(--dark-bg-color);
    }
    pre.mail,
    .debug {
        border-color: var(--dark-border-color);
    }


    /* BLOCKQUOTES AND ASIDES */
    blockquote {
        background: var(--dark-surface-color);
        border-left-color: var(--dark-strong-border-color);
    }
    blockquote:before {
        color: var(--dark-strong-border-color);
    }
    .page_content blockquote {
        border-color: var(--dark-border-color);
        border-left-color: var(--dark-strong-border-color);
    }
    .aside,
    #download-comment {
        border-color: var(--dark-strong-border-color);
    }


    /* TABLES */
    .entry-content table tbody tr {
        border-bottom-color: var(--dark-border-color);
    }
    .entry-content table tbody tr:last-of-type {
        border-bottom-color: var(--dark-strong-border-color);
    }
    .entry-content table tbody tr:nth-of-type(even) {
        background-color: var(--dark-surface-color);
    }
    table.gimpfromsrc td {
        border-color: var(--dark-border-color);
    }


    /* COLLAPSABLE SECTIONS (hashes and Linux instructions) */
    details.collapsable[open] {
        border-color: var(--dark-strong-border-color);
    }
    details.collapsable summary {
        background: var(--dark-surface-color);
        border-color: var(--dark-strong-border-color);
    }


    /* TOP MENU AND FOOTER */
    nav#menu,
    footer {
        background-color: var(--dark-bar-color);
    }
    footer p {
        color: silver;
    }


    /* SEARCH PAGE (menu bar and footer search boxes are already dark in gimp.css) */
    .tipue-search-input.on_search_page {
        color: var(--menu-text-color);
        background: color-mix(in oklab, var(--menu-text-color) 12%, transparent);
        border-color: var(--dark-border-color);
    }
    .tipue-search-input.on_search_page::placeholder {
        color: var(--dark-secondary-text-color);
    }
    #search-form .search-input-wrapper .icon {
        color: var(--menu-text-color);
    }
    #tipue_search_warning,
    #tipue_search_results_count,
    .tipue_search_content_text,
    .tipue_search_content_debug,
    .h01 {
        color: var(--dark-text-color);
    }
    #tipue_search_foot_boxes li a {
        background-color: var(--dark-bg-color);
        border-color: var(--dark-border-color);
        color: var(--dark-text-color);
    }
    #tipue_search_foot_boxes li.current,
    #tipue_search_foot_boxes li a:hover {
        background: var(--dark-surface-color);
        border-color: var(--dark-border-color);
        color: var(--dark-text-color);
    }


    /* HOME PAGE */
    section#introduction {
        background-image: linear-gradient( to right, rgba(14,36,38,1) 50%, rgba(14,36,38,0.700)), url('/asset?u=https%3A%2F%2Fwww.gimp.org%2Ftheme%2Fimages%2Foldfrontsplash.jpg');
    }
    #cap-algorithms {
        background-image: linear-gradient(
                        rgba(14,36,38,1) 40%,
                        rgba(14,36,38,0.3) ),
                        url('/asset?u=https%3A%2F%2Fwww.gimp.org%2Fimages%2Ffrontpage%2Fgimplayer.png');
    }
    #component {
        border-top-color: var(--dark-border-color);
    }
    #component h2, #extensible h2,
    #component h3, #extensible h3 {
        border-bottom-color: var(--dark-border-color);
    }
}

@media (prefers-color-scheme: dark) and (min-width: 40rem) {
    #cap-algorithms {
        background-image: linear-gradient(
            to right,
            rgba(14,36,38,1) 14%,
            rgba(14,36,38,0.5) ),
            url('/asset?u=https%3A%2F%2Fwww.gimp.org%2Fimages%2Ffrontpage%2Fgimplayer.png');
    }
}