docs/_static/css/giscus.css

/*
 * Giscus widget theme.
 */

@import url("https://giscus.app/themes/light.css")
    screen and (prefers-color-scheme: light);
@import url("https://giscus.app/themes/dark.css")
    screen and (prefers-color-scheme: dark);

main {
    --color-canvas-default: #ffffff;
    --color-canvas-overlay: #ffffff;
    --color-canvas-subtle: #f0f4f7;
    --color-canvas-inset: #f0f4f7;

    --color-fg-default: #404040;
    --color-fg-muted: #555555;
    --color-fg-subtle: #555555;

    --color-border-default: #dddddd;
    --color-border-muted: #dddddd;

    --color-accent-fg: #2371a8;
    --color-accent-emphasis: #2371a8;

    --color-btn-text: #404040;
    --color-btn-bg: #f0f4f7;
    --color-btn-border: #dddddd;
    --color-btn-hover-bg: #e5ebf0;

    /* The "Comment" button, green by default. */
    --color-btn-primary-bg: #2371a8;
    --color-btn-primary-hover-bg: #1d5f8e;
    --color-btn-primary-disabled-bg: #a9c8dd;
    --color-btn-primary-border: #2371a8;
    --color-btn-primary-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
    main {
        --color-canvas-default: #1a1a1a;
        --color-canvas-overlay: #1a1a1a;
        --color-canvas-subtle: #2c2c2c;
        --color-canvas-inset: #2c2c2c;

        --color-fg-default: #c8c8c8;
        --color-fg-muted: #9b9b9b;
        --color-fg-subtle: #9b9b9b;

        --color-border-default: #2e2e2e;
        --color-border-muted: #2e2e2e;

        --color-accent-fg: #6ab0de;
        --color-accent-emphasis: #6ab0de;

        --color-btn-text: #c8c8c8;
        --color-btn-bg: #2c2c2c;
        --color-btn-border: #2e2e2e;
        --color-btn-hover-bg: #383838;

        --color-btn-primary-hover-bg: #2a83c2;
        --color-btn-primary-disabled-bg: #2c4a5e;
    }
}

main .gsc-reactions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

main .gsc-reactions-count,
main .gsc-comments-count {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 400;
    text-align: left;
    color: var(--color-fg-muted);
}

main .gsc-reactions > * {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
}

main .gsc-main {
    gap: 1rem;
}

@media (min-width: 601px) {
    main .gsc-main {
        position: relative;
    }

    main .gsc-reactions {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        margin: 0;
    }

    main .gsc-main:has(.gsc-right-header) .gsc-reactions {
        right: 9.5rem;
    }
}

main .gsc-comment-box-main {
    margin-left: 0;
    margin-right: 0;
}

main .gsc-comment-box-textarea {
    box-sizing: border-box;
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
    border-bottom-style: solid;
}

main .gsc-comment-box-textarea-extras {
    display: none;
}

main .gsc-comment-box-md-toolbar {
    display: none;
}