深度美化洛谷，使洛谷界面 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;
}
}