/* ==UserStyle==
@name           Tilweaks
@namespace      https://ecmelberk.com
@version        1.0.4
@description    Tweaks to Tildes' user interface
@author         admicos
@homepageURL    https://tild.es/q0z
@updateURL      https://git.ebc.li/snippets/plain/css/tildes.net/tilweaks.user.styl
@license        MIT
@preprocessor   stylus

@var text       fontSize    "Font Size" 18px

@var checkbox   thinLogoFont "Thin Logo Font" 1
@var checkbox   themedLogos  "Themed Logos"   1

@var checkbox   noSidebarBg  "No Sidebar Background" 1
@var checkbox   donationBox  "Donation Box Layout"   1
@var checkbox   sideBtnClear "Clear Sidebar Button"  1

@var checkbox   noZebraStripe "No Alternating Topic Colors" 1
@var checkbox   mainBorder    "Add Border To Main Element"  1
@var checkbox   extraSpacing  "Add Extra Spacing"           1

@var checkbox   noCommentBorder   "No Comment Borders"      1
@var checkbox   depthIndicator    "Comment Depth Indicator" 1
@var checkbox   commentBackground "Comment Background"      1
==/UserStyle== */

@-moz-document domain("tildes.net") {
    /*
     * Theme specific logos (except Solarized Dark) by Bauke
     * https://gitlab.com/Bauke/tildes-logos
     */
    body.theme-atom-one-dark {
        /* handpicked */
        --tw-semitransparent: rgba(222, 222, 255, .075);

        --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-atom-one-dark.png");
    }

    body.theme-black {
        /* handpicked */
        --tw-semitransparent: rgba(255, 255, 255, .075);

        --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-black.png");
    }

    body.theme-white {
        /* handpicked */
        --tw-semitransparent: rgba(0, 0, 0, .035);

        --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-white.png");
    }

    body.theme-dracula {
        /* handpicked */
        --tw-semitransparent: rgba(200, 200, 255, .075);

        --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-dracula.png");
    }

    body.theme-gruvbox-dark {
        /* handpicked */
        --tw-semitransparent: rgba(255, 200, 200, .05);

        --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-gruvbox-dark.png");
    }

    body.theme-gruvbox-light {
        /* handpicked */
        --tw-semitransparent: rgba(200, 150, 128, .125);

        --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-gruvbox-light.png");
    }

    body.theme-solarized-dark {
        /* handpicked */
        --tw-semitransparent: rgba(200, 255, 255, .035);

        /* Default tildes logo is already "solarized" */
        --tw-logo: url("https://tildes.net/favicon-32x32.png");
    }

    body.theme-solarized-light {
        /* handpicked */
        --tw-semitransparent: rgba(0, 0, 0, .035);

        /* Default tildes logo is already "solarized" */
        --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-solarized-light.png");
    }

    body.theme-zenburn {
        /* handpicked */
        --tw-semitransparent: rgba(200, 200, 200, .05);

        --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-zenburn.png");
    }

    /* Change font size */
    html {
        font-size: fontSize;
    }

    .site-header-logo {
        /* Use custom logo */
        if themedLogos {
            background-image: var(--tw-logo);
            background-size: contain;
        }

        if thinLogoFont {
            font-weight: 300;
            letter-spacing: 0.05rem;
        }
    }

    #sidebar {
        /* Hide sidebar background, make it appear "floating" */
        if noSidebarBg {
            background-color: transparent !important;
        }

        /*
         * Make the "browse the list of groups" button border-only
         * to make it less distracting.
         */
        if sideBtnClear {
            & > .btn-primary:not(:hover) {
                background-color: transparent !important;
                color: var(--button-color);
            }
        }
    }

    /*
     * Give the sidebar some sort of background at smaller screens
     * so the sidebar text doesn't clash with the text of the page
     */
    if noSidebarBg {
        @media (max-width: 840px) {
            #sidebar {
                background-color: inherit !important;
            }
        }
    }

    /*
     * Donation goal looks out of place without a background
     * So let's just tweak it a little to make it look better
     */
    if donationBox {
        .donation-goal {
            border: 0;
            padding: 0;

            align-items: start;
            text-align: left;
        }

        /* Reverse the progress bar ordering so the percent value is first */
        .donation-goal-progress {
            flex-direction: row-reverse;

            /* Fix spacing from the previous change */
            & > span {
                margin-left: 0;
                margin-right: 0.4rem;
            }

            /* Make the donation progress meter smaller */
            & > meter {
                height: .1rem;

                /* Change color of donation progress meter (webkit untested) */
                &::-moz-meter-bar,
                &::-webkit-meter-bar {
                    background: var(--button-color) !important;
                }
            }
        }
    }

    /* Give the main element a little border to make it appear a little more "contained" */
    if mainBorder {
        main {
            border: 1px solid var(--border-color);
        }
    }

    .topic-listing {
        /*
         * Disable the "zebra striping" of topics,
         * we add spacing to differentiate them instead
         */
        if noZebraStripe {
            & > li:nth-of-type(2n) {
                background-color: transparent !important;
            }
        }

        /* Give topics extra spacing */
        if extraSpacing {
            & > li {
                margin-top: 0.4rem;
            }
        }
    }

    if extraSpacing {
        /* Add some padding to text posts */
        .topic-full-text {
            padding: 0.75rem 0.25rem;
        }

        /* Pull divider closer to post */
        .topic-comments,
        .topic-comments > .divider {
            margin-top: 0.25rem
        }
    }

    /* Disable the default comment borders */
    if noCommentBorder {
        .comment {
            border: 0;
            border-bottom: 0 !important;
        }
    }

    /* Add indicators to nested comments */
    if depthIndicator {
        .comment-tree:not([id="comments"]) {
            border-left: 2px dotted var(--background-secondary-color);
        }

        /* Switch the margin and padding around to make nesting indicators nicer */
        .comment-tree-replies {
            margin-left: 0;
            padding-left: 1rem;
        }
    }

    /* Give the comment text some extra padding to seperate it from the header and actions */
    .comment-text {
        if extraSpacing {
            padding: 0.5rem;

            /* Put a little padding on code blocks */
            & pre {
                padding: .5rem;
            }
        }

        if commentBackground {
            /* Make quotes and code blocks stand out */
            & blockquote,
            & pre,
            & code {
                background-color: var(--background-primary-color) !important;
            }
        }
    }

    /* Give comments their own backgrounds to make them stand out */
    if commentBackground {
        .comment-itself {
            background-color: var(--tw-semitransparent);
        }
    }

    /*
     * Add Tilweaks notice to the footer
     * Feel free to add your own name if you want :)
     */
    .site-footer-theme-selection:after {
        display: block;
        content: "(Tilweaks by @admicos)";

        margin-top: .25rem;
    }
}