氩洛谷：洛谷美化样式。⚡我有 Acrylic 症⚡
氩洛谷 Re: 2024 by d0j1a1701
Details
Authord0j1a1701
LicenseCC Zero
Category洛谷, luogu, luogu.com.cn, luogu.com
Created
Updated
Size28 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
氩洛谷 - Argon Luogu
适用于洛谷的美化样式。
⚡我有 Acrylic 症⚡
原先账号（dajia-1701）的密码忘了，已经换新号。
特性列表：
- 内置亮/暗两种配色
- 支持自定义颜色
- 支持自定义字体
- 支持自定义背景图片
- 可开关的亚克力效果
- 与 extend-luogu 兼容
如何安装：
- 在此之前，你需要一个浏览器插件「Stylus」，该插件允许你为网页添加自定义样式表。（这个插件非常常见，如果你无法访问谷歌，只需直接搜索「Stylus 插件安装」并遵循说明使用开发者模式安装即可）
- 安装完成后，在这个网页上点击
Install安装样式表。
效果预览：
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name 氩洛谷 Re 2024
@version 20240820.15.17
@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', '等距更纱黑体 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 remove-ad "去除洛谷广告" 0
@var checkbox remove-reply-container "隐藏讨论区「编辑回复」栏" 0
==/UserStyle== */
//! 字体导入 ---------
/* cyrillic-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/firacode/v22/uU9NCBsR6Z2vfE9aq3bh0NSDulI.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/firacode/v22/uU9NCBsR6Z2vfE9aq3bh2dSDulI.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/firacode/v22/uU9NCBsR6Z2vfE9aq3bh0dSDulI.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/firacode/v22/uU9NCBsR6Z2vfE9aq3bh3tSDulI.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/firacode/v22/uU9NCBsR6Z2vfE9aq3bh09SDulI.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/firacode/v22/uU9NCBsR6Z2vfE9aq3bh3dSD.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
//! 自定义配置部分 ---------
// 调色板
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 // 次级字体色（摘要、简介等位置）
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
else
body_bg_color = #eee
navbar_bg_color = #eeeeee
navbar_text_color = #3c4858
subtitle_color = #fff
text_color = #3c4858
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 = #264f78
acrylic_bg_color = #ffffff
// ! 配置部分结束 ---------
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 inlinecode_bg_color
border none !important
// 标签样式更改
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
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,
.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
// 修改 Sweetalert 弹窗样式
swal-patch()
.swal2-popup
&:not([style*='transparent'])
acrylic-bg()
h1, h2, h3, h4, h5, h6
color post_heading_color !important
color text_color !important
.swal2-content
color text_color !important
// 一些带动画的图标
// 选择器只写了一半是因为逆天 Stylus 编译器会把逗号当作选择器
.swal2-icon > *[style*='rgba(0']
background none !important
mdeditor-patch()
.mp-editor-container
.mp-editor-toolbar
acrylic-bg()
.mp-editor-menu > li > *
border none !important
&:hover
color link_hover_color !important
background link_hover_bg_color !important
.mp-divider
color line_color !important
.CodeMirror
background codeblock_bg_color !important
color text_color !important
.CodeMirror-gutters
background codeblock_bg_color !important
.mp-preview-area
acrylic-bg()
.mp-preview-content
color text_color !important
markdown-patch()
::selection, .CodeMirror-selected
background selection_bg_color !important
/* 全局样式 */
@-moz-document regexp("^(https?://www.luogu.com(.cn)?/).*")
*
scrollbar-width thin
scrollbar-color scrollbar_thumb_color scrollbar_track_color
*:not(button)
border-color line_color !important
body
overflow-x hidden
background body_bg_color
html, body
scroll-behavior smooth
::-webkit-scrollbar-thumb:hover
background scrollbar_hover_color
::-webkit-scrollbar-corner
background-color transparent
::selection
background-color selection_bg_color
// 这个字体必须改在这里
// body 会被洛谷字体（.lfe-body）覆盖
// 星号会把数学字体干掉
.lfe-body
font-family font-stack, sans-serif !important
code, .hljs
font-family font-stack-codeblock, monospace !important
mdeditor-patch()
// 背景修改
body
background main-background
background-repeat no-repeat
background-size cover
background-position center
background-attach...