氩洛谷 Re 2024 by songxingling1

/* ==UserStyle==
@name                 氩洛谷 Re 2024
@version              202410008.17.02
@namespace            https://userstyles.world/style/12397/re-2024
@description          洛谷美化样式。
@author               d0j1a1701
@license              MIT
@preprocessor         stylus
@var                  checkbox dark-mode "深色模式" 1
@var                  text font-stack    "全局字体" "'Noto Sans SC'"
@var                  text font-stack-codeblock "代码块字体" "'Fira Code', 'Source Code Pro', 'Noto Sans SC'"
@var                  text main-background "自定义背景" "url(https://cdn.luogu.com.cn/upload/image_hosting/7ludxt0p.png)"
@var                  checkbox header-acrylic "顶栏亚克力效果" 1
@var                  checkbox nav-acrylic "侧栏亚克力效果" 1
@var                  checkbox card-acrylic "卡片亚克力效果" 1
@var                  checkbox footer-acrylic "底栏亚克力效果" 1
@var                  checkbox anymore-acrylic "其余亚克力效果" 1
@var                  checkbox remove-ad "去除洛谷广告" 0
@var                  checkbox remove-reply-container "隐藏讨论区「编辑回复」栏" 0
==/UserStyle== */

//! 字体导入 ---------

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Noto+Sans+SC:wght@100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

//! 自定义配置部分 ---------

// 调色板
if dark-mode
    // 全局颜色
    body_bg_color = #181c27 // 全局背景色
    navbar_bg_color = #1f3144 // 菜单栏背景色
    navbar_text_color = #d0d0d0 // 菜单栏文字色
    subtitle_color = #d0d0d0 // 副标题颜色（面板外）
    text_color = #c4c6c9 // 全局字体色
    sec_text_color = #a7a9ad // 次级字体色（摘要、简介等位置）
    time_text_color = rgba(126,241,147,0.62) //主页时间字体色
    board_color = #252d38 // 面板背景色
    post_text_color = #c4c6c9 // 面板字体色
    post_heading_color = #c4c6c9 // 面板标题色（h1, h2, h3...）
    post_link_color = #1589e9 // 超链接字体色
    link_hover_color = #30a9de // 超链接悬浮字体色
    link_hover_bg_color = transparent // 超链接悬浮背景色
    line_color = #435266 // 分割线颜色
    scrollbar_track_color = #181c27 // 滚动槽颜色
    scrollbar_thumb_color = #687582 // 滚动条颜色
    scrollbar_hover_color = #5e72e4 // 滚动条悬浮色
    button_bg_color = transparent // 按钮背景色
    button_hover_bg_color = #46647e // 按钮悬浮色
    selection_bg_color = #9696c84d // 选中背景色
    acrylic_bg_color = #000000 // 亚克力背景色
    inlinecode_bg_color = #636e7b66 // 行内代码背景色
    // 代码高亮配色：
    codeblock_bg_color = #0d1117
    hljs_base_color = #c9d1d9
    hljs_keyword_color = #ff7b72
    hljs_function_color = #d2a8ff
    hljs_variable_color = #79c0ff
    hljs_string_color = #a5d6ff
    hljs_symbol_color = #ffa657
    hljs_comment_color = #8b949e
    hljs_tag_color = #7ee787
    hljs_subst_color = #c9d1d9
    hljs_section_color = #1f6feb
    hljs_bullet_color = #f2cc60
    hljs_emphasis_color = #c9d1d9
    hljs_strong_color = #c9d1d9
    hljs_addition_color = #aff5b4
    hljs_addition_bg_color = #033a16
    hljs_deletion_color = #ffdcd7
    hljs_deletion_bg_color = #67060c
    text_area_color = #eaecef

else
    body_bg_color = #eee
    navbar_bg_color = #eeeeee
    navbar_text_color = #3c4858
    subtitle_color = #fff
    text_color = #3c4858
    time_text_color = rgba(5, 67, 16, 0.79)
    board_color = #fff
    post_text_color = #2c3e50
    sec_text_color = #718096
    post_heading_color = #1a202c
    post_link_color = #0366d6
    link_hover_color = #30a9de
    link_hover_bg_color = transparent
    line_color = #eaecef
    scrollbar_track_color = #eeeeee
    scrollbar_thumb_color = #c4c6c9
    scrollbar_hover_color = #a6a6a6
    button_hover_bg_color = #f2f3f5
    button_bg_color = transparent
    selection_bg_color = #95bce3
    acrylic_bg_color = #ffffff
    text_area_color = #435266
// ! 配置部分结束 ---------

main-background = body_bg_color unless main-background

// d0j1a_1701 最爱的亚克力材质
// 基于伪元素的亚克力实现，不会造成层叠混乱
acrylic(arc-opacity=0.5,blur-radius=10px,no_shadow=false)
    background none !important
    &:before
        acr-bgcolor = rgba(acrylic_bg_color, arc-opacity)
        background acr-bgcolor !important
        backdrop-filter blur(blur-radius) !important unless blur-radius == 0
        box-shadow    0 10px    30px    rgba(0, 0, 0, 0.1),
                    0 1px    8px        rgba(0, 0, 0, 0.2) unless no_shadow !important
        content    ""
        border-radius @border-radius if @border-radius
        position absolute
        pointer-events none
        z-index -1
        top 0
        left 0
        right 0
        bottom 0

// https://stackoverflow.com/questions/44522299/css-only-acrylic-material-from-fluent-design-system
// 直接修改背景的亚克力实现，不需要修改 z-index，不会对 border-radius 造成影响，但可能造成层叠混乱
acrylic-bg(arc-opacity=0.5,blur-radius=10px,no_shadow=false)
    acr-bgcolor = rgba(acrylic_bg_color, arc-opacity)
    background acr-bgcolor !important
    backdrop-filter blur(blur-radius) !important unless blur-radius == 0
    box-shadow    0 10px    30px    rgba(0, 0, 0, 0.1),
                0 1px    8px        rgba(0, 0, 0, 0.2) unless no_shadow !important
// 修改 Markdown 渲染内容样式
markdown-patch()
    .marked
        a
            color post_link_color

        code // 内联代码
            background #fff0 !important
            border none !important
                        background codeblock_bg_color !important
            border-radius 5px
            color hljs_base_color !important
            box-shadow none !important
            .hljs-doctag,
            .hljs-keyword,
            .hljs-meta .hljs-keyword,
            .hljs-template-tag,
            .hljs-template-variable,
            .hljs-type,
            .hljs-variable.language_
                color hljs_keyword_color if hljs_keyword_color
            .hljs-title,
            .hljs-title.class_,
            .hljs-title.class_.inherited__,
            .hljs-title.function_
                color hljs_function_color if hljs_function_color
            .hljs-attr,
            .hljs-attribute,
            .hljs-literal,
            .hljs-meta,
            .hljs-number,
            .hljs-operator,
            .hljs-selector-attr,
            .hljs-selector-class,
            .hljs-selector-id,
            .hljs-variable
                color hljs_variable_color if hljs_variable_color
            .hljs-meta .hljs-string,
            .hljs-regexp,
            .hljs-string
                color hljs_string_color if hljs_string_color
            .hljs-built_in,
            .hljs-symbol
                color hljs_symbol_color if hljs_symbol_color
            .hljs-code,
            .hljs-comment,
            .hljs-formula
                color hljs_comment_color if hljs_comment_color
            .hljs-name,
            .hljs-quote,
            .hljs-selector-pseudo,
            .hljs-selector-tag
                color hljs_tag_color if hljs_tag_color
            .hljs-subst
                color hljs_subst_color if hljs_subst_color
            .hljs-section
                color hljs_section_color if hljs_section_color
                font-weight 700
            .hljs-bullet
                color hljs_bullet_color if hljs_bullet_color
            .hljs-emphasis
                color hljs_emphasis_color if hljs_emphasis_color
                font-style italic
            .hljs-strong
                color hljs_strong_color if hljs_strong_color
                font-weight 700
            .hljs-addition
                color hljs_addition_color if hljs_addition_color
                background-color hljs_addition_bg_color if hljs_addition_bg_color
            .hljs-deletion
                color hljs_deletion_color if hljs_deletion_color
                background-color hljs_deletion_bg_color if hljs_deletion_bg_color
        pre
            &[exlg-copy-code-block]
                border-top-left-radius: 0 !important
                border-top-right-radius: 0 !important
                border-top: none !important
            background codeblock_bg_color !important
            border none
            border-radius 5px
            margin-bottom 10px
    // 标签样式更改
    h1, h2, h3, h4, h5, h6
        font-weight 600 !important
        color post_heading_color !important

    hr.horizon
        background-color line_color !important

    // 代码块
    pre:not([.mp-editor-container])
        background codeblock_bg_color !important
        border none
        border-radius 5px
        margin-bottom 10px
        &[exlg-copy-code-block]
                border-top-left-radius: 0 !important
                border-top-right-radius: 0 !important
                border-top: none !important
        
        code
            background codeblock_bg_color !important
            border-radius 5px
            color hljs_base_color !important
            box-shadow none !important
            
            .hljs-doctag,
            .hljs-keyword,
            .hljs-meta .hljs-keyword,
            .hljs-template-tag,
            .hljs-template-variable,
            .hljs-type,
            .hljs-variable.language_
                color hljs_keyword_color if hljs_keyword_color
            .hljs-title,
            .hljs-title.class_,
            .hljs-title.class_.inherited__,
            .hljs-title.function_
                color hljs_function_color if hljs_function_color
            .hljs-attr,
            .hljs-attribute,
            .hljs-literal,
            .hljs-meta,
            .hljs-number,
            .hljs-operator,
            .hljs-selector-attr,
            .hljs-selector-class,
            .hljs-selector-id,
            .hljs-variable
                color hljs_variable_color if hljs_variable_color
            .hljs-meta .hljs-string,
            .hljs-regexp,
            .hljs-string
                color hljs_string_color if hljs_string_color
            .hljs-built_in,
            .hljs-symbol
                color hljs_symbol_color if hljs_symbol_color
            .hljs-code,
 ...