.qt-scroll-article{
color-scheme: light;
margin: 28px 0 18px;
--qt-surface: rgba(255,255,255,.86);
--qt-border: rgba(227,232,255,.95);
--qt-ink: #0e1635;
--qt-muted: rgba(36,51,95,.78);
--qt-accent-1: var(--ac, #6a7eff);
--qt-accent-2: var(--ac3, #59d1c2);
}
.qt-scroll-article .qt-article-wrap{
max-width: 980px;
margin: 0 auto;
border: 1px solid var(--qt-border) !important;
border-radius: 18px;
overflow: hidden;
background:
radial-gradient(1200px 420px at 12% -30%, rgba(142,162,255,.22), transparent 62%),
radial-gradient(1100px 380px at 92% -30%, rgba(89,209,194,.14), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,249,255,.80)) !important;
background-color: var(--qt-surface) !important;
box-shadow: 0 14px 40px rgba(15,23,42,.08) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.qt-scroll-article .qt-article-head{ padding: 16px 18px 10px; }
.qt-scroll-article .qt-article-title{
margin: 0;
color: var(--qt-ink) !important;
font-size: 18px;
line-height: 1.25;
letter-spacing: -.2px;
font-weight: 950;
}
.qt-scroll-article .qt-progress{
height: 4px !important;
background: rgba(227,232,255,.95) !important;
position: sticky !important;
top: 0 !important;
z-index: 2 !important;
border: 0 !important;
box-shadow: none !important;
}
.qt-scroll-article .qt-progress-bar{
height: 100% !important;
width: 0%;
background: linear-gradient(90deg, var(--qt-accent-1), var(--qt-accent-2)) !important;
transition: width .12s linear;
}
.qt-scroll-article .qt-article-box{
position: relative;
max-height: min(56vh, 520px);
min-height: 260px;
overflow: auto;
padding: 16px 18px 18px;
outline: none;
scrollbar-gutter: stable;
color: var(--qt-ink) !important;
background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.42)) !important;
}
.qt-scroll-article .qt-article-box:focus-visible{
box-shadow: 0 0 0 4px rgba(106,126,255,.18);
}
.qt-scroll-article .qt-article-box::before,
.qt-scroll-article .qt-article-box::after{
content: none !important;
display: none !important;
}
.qt-scroll-article .article-body{
font-size: 15px;
line-height: 1.78;
color: var(--qt-ink) !important;
}
.qt-scroll-article .article-body p{
margin: 10px 0;
color: var(--qt-muted) !important;
}
.qt-scroll-article .article-body h2,
.qt-scroll-article .article-body h3,
.qt-scroll-article .article-body h4{
color: var(--qt-ink) !important;
font-weight: 950;
letter-spacing: -.02em;
margin: 18px 0 8px;
position: relative;
padding-left: 14px;
}
.qt-scroll-article .article-body h2{ font-size: 17px; line-height: 1.35; }
.qt-scroll-article .article-body h3{ font-size: 16px; line-height: 1.35; margin-top: 16px; }
.qt-scroll-article .article-body h4{ font-size: 15px; line-height: 1.35; margin-top: 14px; }
.qt-scroll-article .article-body h2::before,
.qt-scroll-article .article-body h3::before,
.qt-scroll-article .article-body h4::before{
content:"";
position:absolute;
left:0;
top:.55em;
width:8px;
height:3px;
border-radius:99px;
background: linear-gradient(90deg, var(--qt-accent-1), var(--qt-accent-2));
box-shadow: 0 0 0 3px rgba(106,126,255,.10);
}
.qt-scroll-article .article-body a{
color: #2434a2 !important;
text-decoration: none;
font-weight: 800;
border-bottom: 1px dotted rgba(106,126,255,.45);
}
.qt-scroll-article .article-body a:hover{ border-bottom-style: solid; }
.qt-scroll-article .article-body ul,
.qt-scroll-article .article-body ol{
margin: 10px 0 12px;
padding-left: 18px;
color: var(--qt-muted) !important;
}
.qt-scroll-article .article-body li{ margin: 6px 0; }
.qt-scroll-article .article-body code{
padding: 2px 6px;
border-radius: 10px;
background: #eef1ff !important;
border: 1px solid rgba(227,232,255,.95) !important;
color: #111e6a !important;
font-size: .95em;
}
.qt-scroll-article .qt-article-box::-webkit-scrollbar{ width: 10px; }
.qt-scroll-article .qt-article-box::-webkit-scrollbar-track{
background: rgba(11,18,37,.06);
border-radius: 12px;
}
.qt-scroll-article .qt-article-box::-webkit-scrollbar-thumb{
background: rgba(106,126,255,.28);
border-radius: 12px;
border: 2px solid rgba(255,255,255,.65);
}
.qt-scroll-article .qt-article-box::-webkit-scrollbar-thumb:hover{
background: rgba(106,126,255,.38);
}
@media (max-width:640px){
.qt-scroll-article{ margin: 18px 0 12px; }
.qt-scroll-article .qt-article-head{ padding: 14px 14px 10px; }
.qt-scroll-article .qt-article-title{ font-size: 16px; }
.qt-scroll-article .qt-article-box{ padding: 14px; min-height: 220px; }
.qt-scroll-article .article-body{ font-size: 14px; }
}
@media (prefers-reduced-motion: reduce){
.qt-scroll-article .qt-progress-bar{ transition: none; }
}