氩洛谷 - 洛谷 Argon Design - 适配洛谷新前端 Spilopelia

深度美化洛谷,使洛谷界面 Argon Design 化 (适配洛谷新前端 Spilopelia)

/* ==UserStyle==
@name         氩洛谷 - 洛谷 Argon Design - 适配洛谷新前端 Spilopelia
@namespace    USO Archive
@author       abc2237512422 | CodeZhangBorui
@description  深度美化洛谷,使洛谷界面 Argon Design 化 (适配洛谷新前端 Spilopelia)
@version      20241015.15.00
@license      CC-BY-NC-SA-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain("www.luogu.com.cn"), domain("www.luogu.com") {
/* 全局规则 */

/* 基础内容 */

/* 基础内容/Open Sans 字体 */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OX-hpOqc.woff2)
            format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
        U+FE2E-FE2F;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OVuhpOqc.woff2)
            format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OXuhpOqc.woff2)
            format("woff2");
    unicode-range: U+1F00-1FFF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OUehpOqc.woff2)
            format("woff2");
    unicode-range: U+0370-03FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OXehpOqc.woff2)
            format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OXOhpOqc.woff2)
            format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OUuhp.woff2)
            format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans Regular"), local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWJ0bbck.woff2)
            format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
        U+FE2E-FE2F;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans Regular"), local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFUZ0bbck.woff2)
            format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans Regular"), local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWZ0bbck.woff2)
            format("woff2");
    unicode-range: U+1F00-1FFF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans Regular"), local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVp0bbck.woff2)
            format("woff2");
    unicode-range: U+0370-03FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans Regular"), local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWp0bbck.woff2)
            format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans Regular"), local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFW50bbck.woff2)
            format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans Regular"), local("OpenSans-Regular"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2)
            format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOX-hpOqc.woff2)
            format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
        U+FE2E-FE2F;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOVuhpOqc.woff2)
            format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOXuhpOqc.woff2)
            format("woff2");
    unicode-range: U+1F00-1FFF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOUehpOqc.woff2)
            format("woff2");
    unicode-range: U+0370-03FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOXehpOqc.woff2)
            format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOXOhpOqc.woff2)
            format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOUuhp.woff2)
            format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOX-hpOqc.woff2)
            format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
        U+FE2E-FE2F;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOVuhpOqc.woff2)
            format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOXuhpOqc.woff2)
            format("woff2");
    unicode-range: U+1F00-1FFF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUehpOqc.woff2)
            format("woff2");
    unicode-range: U+0370-03FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOXehpOqc.woff2)
            format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOXOhpOqc.woff2)
            format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"),
        url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2)
            format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

/* 基础内容/网页框架 */
html,
body {
    background-color: #f4f5f7 !important;
}
html,
body {
    font-family: "Open Sans" !important;
}
body {
    overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600 !important;
}
* > h2:first-child {
    margin-bottom: 1.6rem;
}

/* 基础内容/链接 <a> */
a {
    transition: all 0.15s;
    color: #5e72e4;
}

/* 基础内容/滚动条 */
::-webkit-scrollbar {
    width: 6px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb:hover {
    background-color: #5e72e4;
}

/* 基础内容/加载条 */
#nprogress .nprogress-peg {
    box-shadow: none !important;
}
#nprogress .nprogress-bar {
    position: fixed;
    top: 0 !important;
    background: #5eb95e;
}

/* 基础内容/选中文字 */
*::selection {
    background-color: #cce2ff;
}
*::-moz-selection {
    background-color: #cce2ff;
}
*::-webkit-selection {
    background-color: #cce2ff;
}

/* 基础内容/动画 keyframe */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-35px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 侧边菜单 */
#app > .lfe-body,
div.app > nav.sidebar {
    background: #fafafa !important/*linear-gradient(30deg,#7795f8 15%,#6772e5 70%,#555abf 94%)*/;
    box-shadow: 4px 5px 15px rgba(50, 50, 93, 0.1),
        2px 5px 8px rgba(0, 0, 0, 0.07) !important;
}
#app > .lfe-body > a {
    color: #5e72e4 !important;
    height: 3.7em;
    margin-top: 3px;
    padding: 0 !important;
}
#app > .lfe-body > a:first-of-type {
    margin-top: 20px !important;
}
#app > .lfe-body > .popup-button {
    background-color: transparent !important;
    margin-top: 8px;
    color: #5e72e4 !important;
}
#app > .lfe-body > a > .icon {
    line-height: 2.4em;
    font-size: 18px;
    width: 100%;
    margin: 0 !important;
    transition: all 0.3s ease;
}
#app > .lfe-body > a > .text {
    opacity: 0;
    margin-top: -1em;
    display: block;
    transition: all 0.3s ease;
}
#app > .lfe-body > a:hover > .icon {
    line-height: 1.5em;
    font-size: 17px;
}
#app > .lfe-body > a:hover > .text {
    opacity: 1;
    margin-top: 0.2em;
}

/* 侧边菜单/动画 */
.lg-sidebar-list li[class^="lg-nav"] a span[class^="am-icon"]:after {
    content: "";
    background: #5e72e4;
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 8px;
    height: 2px;
    width: 0px;
    border-radius: 10px;
    transition: all 0.15s ease;
}
.lg-sidebar-list li[class^="lg-nav"] a:hover span[class^="am-icon"]:after {
    left: 40%;
    right: 40%;
    width: 20%;
}

/* 侧边菜单/Spilopeia 阴影 */
/* .main-container .lside-bar {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
} */

/* 输入框 */
.am-input-group,
.input-group {
    transition: box-shadow 0.15s ease;
}
.am-input-group {
    border-radius: 0.5rem !important;
}
.am-form-field,
.input-group > .input-wrap > input,
.input-wrap > input,
input.input {
    transition: box-shadow 0.15s ease;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02);
    min-height: 25px !important;
}
.am-form-field:focus,
.input-group > .input-wrap > input:focus,
.input-wrap > input:focus {
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.am-form-field,
.input-group > button {
    transition: box-shadow 0.15s ease;
    border: none;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02);
}
.input-group > button {
    margin-left: 3px;
}
.am-form-field,
.input-group > button:hover {
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.am-input-group-sm > .am-form-field,
.am-input-group-sm > .am-input-group-btn > .am-btn,
.am-input-group-sm > .am-input-group-label {
    font-size: 1.35rem !important;
}
.am-input-group-label {
    background: transparent;
    border: none;
}
.am-input-group-danger,
.am-input-group-primary {
    box-shadow: none;
}
.am-input-group-danger > .am-input-group-label,
.am-input-group-primary > .am-input-group-label {
    border-radius: 0.5rem !important;
    outline: none !important;
    letter-spacing: 0.05em;
    transition: all 0.15s ease;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    color: #fff !important;
    margin-bottom: 6px;
    height: 33.4px;
}
.am-input-group-danger > .am-input-group-label:hover,
.am-input-group-primary > .am-input-group-label:hover {
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.am-input-group-danger > .am-input-group-label:active,
.am-input-group-primary > .am-input-group-label:active {
    box-shadow: none;
}
.am-input-group-danger > .am-input-group-label {
    border-color: #f5365c;
    background-color: #f5365c; /*#ec0c38*/
}
.am-input-group-primary > .am-input-group-label {
    border-color: #5e72e4;
    background-color: #5e72e4;
    border-radius: 0.5rem !important;
}
textarea {
    box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02);
    border: none !important;
}
textarea:focus {
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.lg-input-title {
    margin-bottom: 5px;
    border-radius: 5px;
    border-color: #ddd;
}

/* 卡片类 */
.lg-article,
.lg-summary,
.lg-article-sub,
.card,
.l-card {
    transition: all 0.15s ease;
    box-shadow: 0 5px 15px rgba(50, 50, 93, 0.1), 0 5px 8px rgba(0, 0, 0, 0.07) !important;
    word-wrap: break-word;
    border-radius: 0.25rem;
    background-color: #fcfcfc !important;
    overflow: visible !important;
}
.lg-article:hover,
.lg-summary:hover,
.lg-article-sub:hover,
.card:hover,
.l-card:hover {
    box-shadow: 0 10px 30px rgba(50, 50, 93, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.07) !important;
}
.card,
.l-card {
    line-height: 1.8;
}

/* 管理员提示 */
blockquote.admin-public-comment {
	transition: all 0.15s ease;
    box-shadow: 0 3px 8px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07) !important;
	margin-top: 15px !important;
}
blockquote.admin-public-comment:hover {
    box-shadow: 0 5px 15px rgba(50, 50, 93, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.07) !important;
}

/* 按钮类 */
.am-btn,
a.l-button {
    outline: none !important;
    border: none !important;
    letter-spacing: 0.05em;
    padding: 8px 18px;
    transition: all 0.15s ease;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    color: #fff !important;
    margin-bottom: 6px;
}
.am-dropdown > .am-btn {
    color: inherit !important;
}
button[type="button"] {
    outline: none !important;
    border: none !important;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
    margin-bottom: 6px;
    padding: 8px 18px;
}
.am-btn.am-disabled,
.am-btn[disabled],
fieldset[disabled] .am-btn,
button[type="button"][disabled],
button.disabled[type="button"] {
    box-shadow: none;
    opacity: 0.65;
}
.am-btn:hover,
button[type="button"]:hover {
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
.am-btn:active,
button[type="button"]:active {
    box-shadow: none;
}
.am-btn-danger,
.am-btn-danger:hover,
.am-btn-danger:active,
.am-btn-danger:focus,
.am-btn-danger:visited {
    border-color: #f5365c;
    background-color: #f5365c; /*#ec0c38*/
}
.am-btn-primary,
.am-btn-primary:hover,
.am-btn-primary:active,
.am-btn-primary:focus,
a.am-btn-primary:visited {
    border-color: #5e72e4;
    background-color: #5e72e4;
}
.am-btn-success,
.am-btn-success:hover,
.am-btn-success:active,
.am-btn-success:focus,
a.am-btn-success:visited {
    border-color: #2dce89;
    background-color: #2dce89;
}
.am-btn-warning,
.am-btn-warning:hover,
.am-btn-warning:active,
.am-btn-warning:focus,
a.am-btn-warning:visited {
    border-color: #fb6340;
    background-color: #fb6340;
}

/* 按钮类/复制按钮 */
.copy-btn{
    border-color: #5e72e4!important;
    background-color: #5e72e4 !important;
    color: #fff !important;
    margin-top: 3px;
}

/* Tooltip */
.tip-twitter {
    background: #172b4d;
    color: #fff;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tip-twitter > div {
    font-weight: unset !important;
    font-size: 13px !important;
    margin-left: 5px;
    margin-right: 5px;
}

/* 标签 */
.am-badge {
    border-radius: 50px !important;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    transition: all 0.15s;
}
.tag span.lfe-caption,
.difficulty span.lfe-caption {
    border-radius: 50px !important;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
    transition: all 0.15s;
}
.am-badge:hover,
.tag span.lfe-caption:hover,
.difficulty span.lfe-caption:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.am-badge,
.lfe-caption[slot="difficulty"],
.lfe-caption.tag,
.tags-wrap {
    overflow: visible !important;
}
.am-badge.lg-bg-red {
    background-color: #f80031;
}
.am-badge.lg-bg-orange {
    background-color: #ff471d;
}
.am-badge.lg-bg-yellow {
    background-color: #ff9d09;
}
.am-badge.lg-bg-green {
    background-color: #1aae6f;
}
.am-badge.lg-bg-bluelight {
    background-color: #03acca;
}
.am-badge.lg-bg-purple {
    background-color: #8e44ad;
}
.am-badge.lg-bg-bluedark {
    background-color: #001277;
}
.am-badge.am-badge-warning {
    background-color: #fb6340;
}

/* 下拉菜单 */
.am-dropdown-content {
    padding: 1.5rem;
    border-radius: 0.25rem;
    background: #fff;
    width: 300px;
    border: none;
    margin-top: 5px;
    box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
        0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
}
.am-dropdown-content:before,
.am-dropdown-content:after {
    display: none !important;
}

/* 私信提示 */
.lg-unread {
    line-height: 60px;
    width: 60px;
    height: 60px;
    padding: 0;
    text-align: center;
    border-radius: 50%;
    transition: all 0.15s ease;
    color: #fff;
    background-color: #5e72e4;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* 私信提示/内容 */
.am-comment-main {
    border: none;
    box-shadow: 0 3px 5px rgba(50, 50, 93, 0.1), 0 2px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.15s;
}
.am-comment-main:hover {
    border: none;
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.am-comment-main:before,
.am-comment-main:after {
    display: none;
}

/* 顶部标题栏 */
.main-container > .header-layout,
.main-container > header.theme-bg {
    height: 380px !important;
    display: block;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%) !important;
    border: none;
    color: #fff;
    font-weight: unset !important;
}
.main-container > .header-layout .background {
    display: none !important;
}
.main-container > .header-layout > .header,
.main-container > header.theme-bg > .theme-fg > .header-layout {
    max-width: 1250px;
    background: transparent !important;
    padding-left: 35px;
    position: relative;
}
.main-container > .header-layout > .header .user-nav {
    right: 0;
}
@media screen and (max-width: 1475px) {
    .main-container > .header-layout > .header,
    .main-container > header.theme-bg > .theme-fg > .header-layout {
        position: initial;
    }
    .main-container > .header-layout > .header .user-nav {
        right: calc(80px);
    }
}
.main-container > .header-layout > .header > h1,
.main-container > header.theme-bg > .theme-fg > .header-layout > h1 {
    font-size: 50px;
    margin-top: 25px;
    padding-bottom: 8px;
    animation: fadeInLeft 0.5s ease;
    max-width: calc(100vw - 150px);
    font-family: "Open Sans" !important;
}
.main-container > header.theme-bg > .theme-fg > .header-layout > h1 {
    /* Spilopelia 不会自动省略标题栏额外文字导致内容向下溢出 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main-container > main.lfe-body,
.main-container > main {
    margin-top: -180px;
    position: relative;
    background: transparent !important;
}

@media screen and (max-width: 576px) {
    .main-container > main.lfe-body {
        margin-top: -60px;
    }
    .main-container > .header-layout > .header {
        padding-left: 5px;
    }
    .main-container > .header-layout > .header > h1 {
        font-size: 35px;
    }
}

/* 面包屑导航 */
.main-container > .header-layout .bread-crumb,
.main-container > .header-layout .bread-crumb a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
}
.lg-main-content.solution-block {
    margin-top: 0 !important;
}
.main-container > header .bread-crumb,
.main-container > header .bread-crumb a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
}
.lg-main-content.solution-block {
    margin-top: 0 !important;
}

/* 表格类 */
div > .header-wrap {
    padding-bottom: 20px !important;
    font-size: 17px;
    border-bottom: 0.6px solid rgba(0, 0, 0, 0.08) !important;
}
div > .header-wrap .lfe-caption {
    box-shadow: none !important;
}
div > .row-wrap {
    padding: 24px 0 !important;
    font-size: 17px;
    border-bottom: 0.6px solid rgba(0, 0, 0, 0.08) !important;
}
div > .row-wrap:last-child {
    margin-bottom: 30px;
}
div > .row-wrap .lfe-caption {
    font-size: 14px;
}

/* 通过率条 */
.rate-wrapper .rate-popup {
    transition: all 0.25s ease !important;
    display: block !important;
    border-radius: 3px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    min-width: 4em;
    min-height: 1em;
    width: 4em;
    height: 1em;
    padding: 0 !important;
    margin-bottom: -15px;
    overflow: hidden !important;
    opacity: 0;
    color: transparent;
    background: transparent;
    pointer-events: none;
}
.rate-wrapper:hover .rate-popup {
    border-radius: 30px;
    margin-bottom: 10px;
    min-width: 10em;
    min-height: 1em;
    width: unset;
    height: unset;
    padding: 5px 18px !important;
    opacity: 0.8;
    color: #fff;
    background: #172b4d;
}

/* 分页器(暂未适配 Spilopelia) */
.am-pagination,
.page-area {
    padding-top: 20px;
    padding-bottom: 20px;
    width: max-content;
    width: -moz-max-content;
    margin-left: auto;
    margin-right: auto;
    border-top: none !important;
}
.am-pagination > li > a,
.page-bar > button {
    outline: none !important;
    cursor: pointer;
    line-height: 1.25;
    position: relative;
    display: block;
    margin-left: -0.0625rem;
    padding: 0.5rem 0.75rem;
    color: #8898aa;
    border: 0.0625rem solid #dee2e6;
    background-color: #fff;
    font-size: 15px;
    font-weight: unset;
    display: flex;
    min-width: 36px;
    height: 36px;
    margin: 0 3px;
    border-radius: 100px !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.page-bar > button:hover {
    background-color: #eee;
}
.am-pagination > .am-active > a,
.page-bar > button[style*="background"] {
    color: #fff;
    border-color: #5e72e4 !important;
    background-color: #5e72e4 !important;
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.am-pagination > .am-active > a:hover {
    color: #fff;
    border-color: #5e72e4;
    background-color: #5e72e4;
}

/* 评测详情色块 */
.test-case-wrap > .wrapper {
    width: 100px;
    height: 100px;
    margin-right: 16px;
    margin-bottom: 12px;
}
.test-case-wrap {
    margin-top: 25px;
}
.test-case-wrap > .wrapper .test-case {
    width: 100px;
    height: 100px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    padding: 3px;
}
.test-case-wrap > .wrapper .test-case:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(50, 50, 93, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.07);
}
.test-case-wrap > .wrapper .test-case .info {
    width: calc(100% - 10px);
    line-height: 15px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.test-case-wrap > .wrapper .test-case:hover .info {
    white-space: normal;
}
.test-case-wrap > .wrapper .test-case .id {
    margin-left: 3px;
}
.test-case-wrap > .wrapper .test-case .status {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 5px;
}
.test-case-wrap > .wrapper .message {
    transition: all 0.25s ease !important;
    display: block !important;
    border-radius: 3px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    min-width: 105px;
    min-height: 105px;
    width: 105px;
    padding: 0;
    margin-top: 40px;
    opacity: 0;
    color: transparent;
    background: transparent;
    pointer-events: none;
}
.test-case-wrap > .wrapper:hover .message {
    border-radius: 30px;
    margin-top: -30px;
    min-width: 12em;
    min-height: 1em;
    width: unset;
    height: unset;
    padding: 5px 18px;
    opacity: 0.8;
    color: #fff;
    background: #172b4d;
}
.test-case-wrap > .wrapper .test-case[style*="rgb(112, 173, 71)"] {
    background-color: #2dce89 !important;
}
.test-case-wrap > .wrapper .test-case[style*="rgb(231, 76, 60)"] {
    background-color: #fb6340 !important;
}
.test-case-wrap > .wrapper .test-case[style*="rgb(157, 61, 207)"] {
    background-color: #8e44ad !important;
}
.test-case-wrap > .wrapper .test-case[style*="rgb(5, 34, 66)"] {
    background-color: #001277 !important;
}
.test-case-wrap > .wrapper .test-case[style*="rgb(14, 29, 105)"] {
    background-color: #34495e !important;
}
.test-case-wrap > .wrapper .test-case[style*="background: rgb(20, 85, 143);"] {
    background-color: #3498db !important;
}

/* 头像 */
.am-comment-avatar,
.luogu-username > img {
    box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.07);
    border: none;
    transition: all 0.15s;
}
.am-comment-avatar:hover .luogu-username > img:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}
.am-panel-bd .am-comment-avatar,
.lg-message-content .am-comment-avatar,
.lg-message-contact .am-comment-avatar,
.lg-inline-up .am-comment-avatar,
.lg-header-li .am-comment-avatar {
    box-shadow: none;
}

/* 用户卡片面板 */
.am-panel {
    border: none;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 页尾 */
.main-container > .lfe-body:last-child,
.main-container > footer.theme-bg {
    padding: 0;
}
.main-container > .lfe-body:last-child .background {
    display: none !important;
}
.main-container > .lfe-body:last-child > .footer,
.main-container > footer.theme-bg {
    background: linear-gradient(
        150deg,
        #7795f8 15%,
        #6772e5 70%,
        #555abf 94%
    ) !important;
    max-width: unset !important;
    padding: 25px 35px;
}
.main-container > .lfe-body:last-child > .footer a,
.main-container > footer.theme-bg > a {
    color: #fff !important;
}
.main-container > .lfe-body:last-child > .footer .qr-img,
img.weixin {
    display: none !important;
}
/* 团队成员卡 */
.lg-mcard {
    border: none;
    transition: all 0.15s ease;
    box-shadow: 0 2px 3px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 3px;
}
.lg-mcard:hover {
    transition: all 0.15s ease;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 犇犇Tab条 */
.feed-selector > a {
    font-weight: 500;
    transition: all 0.15s ease;
    color: #5e72e4;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 5px !important;
    height: 50px;
    line-height: 36px;
}
.feed-selector.am-active > a {
    color: #fff;
    background: #5e72e4 !important;
}

/* 其余Tab条 */
.am-nav-tabs li > a {
    font-weight: 500;
    transition: all 0.15s ease;
    color: #5e72e4;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 5px !important;
    height: 50px;
    line-height: 36px;
    padding-left: 20px;
    padding-right: 20px;
    border: none !important;
    margin-right: 10px;
}
.am-nav-tabs li.am-active > a {
    color: #fff !important;
    background: #5e72e4 !important;
}
.am-nav-tabs {
    border: none;
    margin-bottom: 20px;
}
.am-tabs-bd {
    border-radius: 5px;
    border: 0.6px solid rgba(0, 0, 0, 0.1);
    background: transparent;
}

/* 进度条 */
.lg-table-small {
    margin-top: 5px;
}
.am-progress,
.progress-frame {
    border-radius: 0.5rem;
    background-color: #e9ecef;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    border: none !important;
}
.am-progress-bar-secondary,
.am-progress-bar,
.progress-frame > div {
    background-color: #5e72e4 !important;
}

/* 复选框 */
.am-ucheck-checkbox:checked + .am-ucheck-icons,
.am-ucheck-checkbox:hover:not(.am-nohover):not(:disabled) + .am-ucheck-icons,
.am-ucheck-radio:checked + .am-ucheck-icons,
.am-ucheck-radio:hover:not(.am-nohover):not(:disabled) + .am-ucheck-icons {
    color: #5e72e4;
}
.am-checkbox .am-icon-unchecked:before,
.am-checkbox-inline .am-icon-unchecked:before {
    content: "";
    border: 1px solid rgba(0, 0, 0, 0.1);
    height: 15px;
    width: 15px;
    border-radius: 3px;
    margin-top: 3px;
}

/* 404页面 */
.lg-info-box > #pic,
.lg-info-box > .lg-stamp {
    display: none;
}
.lg-info-box {
    color: #fff;
    border-color: #555abf;
    background-color: #555abf;
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: 0.25rem;
    min-height: 100px !important;
}
.lg-info-box > .am-text-left > h1 {
    margin-bottom: 10px;
    margin-top: 10px;
}
.lg-info-box > .am-text-left > p {
    margin-top: 0px;
    margin-bottom: 0;
}
.lg-info-box > .am-text-left .lg-small {
    margin-top: 15px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.6);
    display: block;
}

/* 对话框 */
.am-modal-dialog {
    box-shadow: 0 15px 35px rgba(50, 50, 93, 0.2),
        0 5px 15px rgba(0, 0, 0, 0.17);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    outline: 0;
    background-color: #fff;
    background-clip: padding-box;
}
.am-modal-dialog > #lg-alert-title,
.am-modal-dialog > #memtitle {
    font-family: inherit;
    font-weight: 400;
    line-height: 1.3;
    color: #32325d;
    text-align: left;
    padding-left: 15px;
    padding-bottom: 15px;
    border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}
.am-modal-dialog > #lg-alert-message,
.am-modal-dialog > #memadmin {
    line-height: 1.3;
    color: #32325d;
    text-align: left;
    padding-left: 15px;
    padding-bottom: 25px;
    padding-top: 10px;
    border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
}
.am-modal-dialog .lg-model-content {
    margin-top: 10px;
}
.am-modal-btn {
    outline: none !important;
    border: none !important;
    letter-spacing: 0.05em;
    padding: 8px 18px;
    transition: all 0.15s ease;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    color: #fafafa !important;
    height: unset;
    line-height: unset;
    border-radius: 5px !important;
    margin-right: 3px;
    display: inline-block !important;
}
.am-modal-btn:hover {
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
.am-modal-btn:active {
    box-shadow: none;
}
.am-modal-btn,
.am-modal-btn:hover,
.am-modal-btn:active,
.am-modal-btn:focus,
a.am-modal-btn:visited {
    border-color: #5e72e4;
    background-color: #5e72e4;
}
.am-modal-footer {
    width: max-content;
    height: max-content;
    padding: 5px;
    display: block;
    margin-top: 10px;
    margin-bottom: 8px;
    padding-left: 15px;
}

/* 弹出菜单 */
.popup {
    border: none !important;
    border-radius: 0.3rem !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    box-shadow: 0 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
    text-shadow: none;
    padding: 10px !important;
    animation: fade 0.2s ease;
}

/* 用户信息Popup */
.main-container
    > .header-layout
    > .header
    nav
    a[href^="/space/show"]
    + div.center,
.main-container > .header-layout .user-nav a[href^="/space/show"] + div.center {
    border: none !important;
    border-radius: 0.3rem !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    box-shadow: 0 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
    text-shadow: none;
    padding: 10px !important;
}
.main-container
    > .header-layout
    > .header
    nav
    a[href^="/space/show"]
    + div.center
    > .header,
.main-container
    > .header-layout
    > .header
    nav
    a[href^="/space/show"]
    + div.center
    > footer,
.main-container
    > .header-layout
    .user-nav
    a[href^="/space/show"]
    + div.center
    > .header-layout,
.main-container
    > .header-layout
    .user-nav
    a[href^="/space/show"]
    + div.center
    > footer {
    border: none;
    background: transparent;
}
.main-container
    > .header-layout
    > .header
    nav
    a[href^="/space/show"]
    + div.center,
.main-container > .header-layout .user-nav a[href^="/space/show"] + div.center {
    display: block !important;
    transform: translate(0, 0px) perspective(0px) rotateX(0deg);
    opacity: 1;
    transition: all 0.25s ease;
}
.main-container
    > .header-layout
    > .header
    nav
    a[href^="/space/show"]
    + div.center[style*="none"],
.main-container
    > .header-layout
    .user-nav
    a[href^="/space/show"]
    + div.center[style*="none"] {
    pointer-events: none;
    opacity: 0;
    transform: translate(0, 10px) perspective(80px) rotateX(-2deg);
}
/* 首页 Banner 滚动指示器 */
.am-slider-default .am-control-nav li a {
    box-shadow: none;
    transition: all 0.5s ease;
}
.am-slider-default .am-control-nav li a.am-active {
    width: 15px;
    background-color: #5e72e4;
}
/* 一些细节的处理 */
.lg-message-contact:hover {
    /*私信左列hover的颜色*/
    background: rgba(200, 200, 200, 0.2);
}
.lg-message-contact *:not(.am-badge):hover {
    background: transparent;
}
.am-selected-list li:hover {
    /*弹出菜单项Hover处理*/
    background: rgba(200, 200, 200, 0.2) !important;
}
/* 针对犇犇样式变化的适配 */
.lg-index-benben div:nth-of-type(4) {
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
}
.lg-index-benben div:nth-of-type(4) #home-center-nav {
    background: transparent;
} /*

/* fix: Markdown 编辑器弹窗时页码覆盖弹窗的玄学 Bug */
#replyarea {
    opacity: 1 !important;
}
/* 分隔线 */
.card hr {
    margin: 0.8em 0;
    height: 0.5px;
    background: rgba(0, 0, 0, 0.08);
    border: none;
}
/* 适配 Tiny 顶栏 */
#app > .main-container > .header-layout.tiny {
    height: 4em !important;
    background: #fff !important;
    color: #333 !important;
}
.header-layout.tiny ~ main.lfe-body {
    margin-top: 0px !important;
}

}

@-moz-document regexp("^https://www\\.luogu\\.com\\.cn/article/.{8}$"), regexp("^https://www\\.luogu\\.com/article/.{8}$") {
/* 专栏阅读页面特殊匹配 */

/* 顶部标题栏 */
.main-container > main {
    margin-top: 0px !important;
}

/* 博客内容卡片 */
.main-container > main > div:nth-of-type(2) {
	transition: all 0.15s ease;
	max-width: 1200px;
	margin: 40px auto 40px auto;
	border-radius: 0.25em;
	box-shadow: 0 5px 15px rgba(50, 50, 93, 0.1), 0 5px 8px rgba(0, 0, 0, 0.07) !important;
	line-height: 1.8;
}

.main-container > main > div:nth-of-type(2):hover {
	box-shadow: 0 10px 30px rgba(50, 50, 93, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.07) !important;
}

/* TOC 目录卡片 */
div.toc {
	transition: all 0.15s ease;
	background: white;
	margin: 10px 0px 10px 0px !important;
	padding: 5px !important;
	width: 200px !important;
	border-radius: 0.25em;
/* 	box-shadow: 0 5px 15px rgba(50, 50, 93, 0.1), 0 5px 8px rgba(0, 0, 0, 0.07) !important; */
	line-height: 1.8;
}
}