810 lines
14 KiB
CSS
810 lines
14 KiB
CSS
/* ============ Modern 简约主题 ============ */
|
||
:root {
|
||
--bg: #fafafa;
|
||
--card: #fff;
|
||
--text: #1a1a1a;
|
||
--muted: #767676;
|
||
--accent: #e74c3c;
|
||
--border: #eaeaea;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg: #151515;
|
||
--card: #1e1e1e;
|
||
--text: #e8e8e8;
|
||
--muted: #9a9a9a;
|
||
--accent: #ff6b5e;
|
||
--border: #2c2c2c;
|
||
}
|
||
}
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
||
"Microsoft YaHei", sans-serif;
|
||
font-size: 16px;
|
||
line-height: 1.8;
|
||
}
|
||
a {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
}
|
||
a:hover {
|
||
opacity: 0.8;
|
||
}
|
||
/* 页面统一宽度：页头/页脚与主体对齐（默认视图的 .container 也落在这里） */
|
||
.container,
|
||
.m-container {
|
||
max-width: 1380px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.m-header {
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--card);
|
||
}
|
||
.m-header .m-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 18px 20px;
|
||
}
|
||
.m-logo {
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
letter-spacing: 1px;
|
||
color: var(--text);
|
||
}
|
||
.m-nav {
|
||
display: flex;
|
||
gap: 18px;
|
||
font-size: 14px;
|
||
align-items: center;
|
||
}
|
||
.m-nav a.active {
|
||
font-weight: 700;
|
||
}
|
||
.m-link-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--accent);
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
}
|
||
.m-search input {
|
||
padding: 7px 12px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-size: 14px;
|
||
width: 140px;
|
||
}
|
||
.inline-form {
|
||
display: inline;
|
||
}
|
||
|
||
.main-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 300px;
|
||
gap: 32px;
|
||
align-items: start;
|
||
max-width: 1380px;
|
||
margin: 0 auto;
|
||
padding: 36px 20px;
|
||
}
|
||
.main-layout .content {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
.main-layout .sidebar {
|
||
width: auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
.post-card,
|
||
.post-full,
|
||
.comments-section {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 26px 30px;
|
||
margin-bottom: 22px;
|
||
}
|
||
.post-card.sticky {
|
||
box-shadow: inset 3px 0 0 var(--accent);
|
||
}
|
||
.post-title {
|
||
font-size: 20px;
|
||
margin-bottom: 8px;
|
||
line-height: 1.45;
|
||
}
|
||
.post-card .post-title a {
|
||
color: var(--text);
|
||
}
|
||
.badge {
|
||
background: var(--accent);
|
||
color: #fff;
|
||
font-size: 11px;
|
||
padding: 2px 7px;
|
||
border-radius: 3px;
|
||
margin-right: 6px;
|
||
vertical-align: 2px;
|
||
}
|
||
.post-meta {
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.post-excerpt {
|
||
color: var(--muted);
|
||
}
|
||
.post-footer {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
font-size: 14px;
|
||
}
|
||
.read-more {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.post-full .post-title {
|
||
font-size: 28px;
|
||
}
|
||
.post-content {
|
||
margin-top: 14px;
|
||
max-width: 100%;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
}
|
||
.post-content img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 8px;
|
||
}
|
||
.post-content pre,
|
||
.post-content .codeText,
|
||
.post-content ol[class^="dp-"] {
|
||
background: #0d1117;
|
||
color: #c9d1d9;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
overflow-x: auto;
|
||
max-width: 100%;
|
||
margin: 14px 0;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
.post-content code {
|
||
background: rgba(128, 128, 128, 0.15);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
word-break: break-all;
|
||
overflow-wrap: anywhere;
|
||
white-space: break-spaces;
|
||
}
|
||
.post-content pre code {
|
||
display: block;
|
||
background: none;
|
||
padding: 0;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
.post-content blockquote {
|
||
border-left: 3px solid var(--accent);
|
||
padding-left: 16px;
|
||
color: var(--muted);
|
||
margin: 14px 0;
|
||
}
|
||
.post-content h1,
|
||
.post-content h2,
|
||
.post-content h3 {
|
||
margin: 20px 0 8px;
|
||
}
|
||
|
||
.post-cover {
|
||
margin: -26px -30px 18px;
|
||
border-radius: 12px 12px 0 0;
|
||
overflow: hidden;
|
||
}
|
||
.post-cover img {
|
||
width: 100%;
|
||
display: block;
|
||
max-height: 380px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.tag-link {
|
||
color: var(--accent);
|
||
font-size: 14px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.comments-section {
|
||
margin-top: 8px;
|
||
}
|
||
.section-title {
|
||
font-size: 17px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.comment {
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.comment:last-of-type {
|
||
border-bottom: none;
|
||
}
|
||
.comment-head {
|
||
font-size: 14px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.comment-time {
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
.comment-body {
|
||
color: var(--text);
|
||
font-size: 15px;
|
||
}
|
||
.comment-form {
|
||
margin-top: 14px;
|
||
}
|
||
.form-row {
|
||
margin-bottom: 12px;
|
||
}
|
||
.form-row label {
|
||
display: block;
|
||
font-size: 14px;
|
||
margin-bottom: 4px;
|
||
color: var(--muted);
|
||
}
|
||
.form-row input,
|
||
.form-row textarea {
|
||
width: 100%;
|
||
padding: 10px 14px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-size: 15px;
|
||
font-family: inherit;
|
||
}
|
||
.honeypot {
|
||
position: absolute;
|
||
left: -9999px;
|
||
opacity: 0;
|
||
}
|
||
.error {
|
||
color: var(--accent);
|
||
font-size: 13px;
|
||
}
|
||
.btn {
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border: none;
|
||
padding: 10px 24px;
|
||
border-radius: 8px;
|
||
font-size: 15px;
|
||
cursor: pointer;
|
||
}
|
||
.alert {
|
||
padding: 12px 18px;
|
||
border-radius: 8px;
|
||
margin-bottom: 16px;
|
||
font-size: 14px;
|
||
}
|
||
.alert-success {
|
||
background: rgba(46, 160, 67, 0.12);
|
||
color: #2ea043;
|
||
}
|
||
.alert-error {
|
||
background: rgba(248, 81, 73, 0.12);
|
||
color: #f85149;
|
||
}
|
||
.alert-warning {
|
||
background: rgba(210, 153, 34, 0.12);
|
||
color: #9a6700;
|
||
}
|
||
.empty {
|
||
color: var(--muted);
|
||
text-align: center;
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.list-title {
|
||
font-size: 24px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.archive-year {
|
||
font-size: 16px;
|
||
margin: 16px 0 6px;
|
||
}
|
||
.archive-list {
|
||
list-style: none;
|
||
}
|
||
.archive-posts {
|
||
margin: 4px 0 12px 22px;
|
||
}
|
||
.archive-posts time {
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.view-mode-switcher {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
margin-bottom: 16px;
|
||
}
|
||
.view-mode-switcher a.active {
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
}
|
||
|
||
.pagination {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
margin: 16px 0;
|
||
}
|
||
.pagination-links {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
max-width: 100%;
|
||
}
|
||
.pagination-info {
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
padding: 6px 10px;
|
||
margin-right: 4px;
|
||
white-space: nowrap;
|
||
}
|
||
.pagination-links a,
|
||
.pagination-links .current,
|
||
.pagination-links .disabled {
|
||
padding: 6px 10px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
background: var(--card);
|
||
color: var(--text);
|
||
}
|
||
.pagination-links .current {
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border-color: var(--accent);
|
||
}
|
||
.pagination-links .disabled {
|
||
color: var(--muted);
|
||
}
|
||
.theme-inject {
|
||
margin: 12px 0;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.theme-inject:empty {
|
||
display: none;
|
||
}
|
||
.theme-inject img,
|
||
.theme-inject iframe {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.m-footer {
|
||
border-top: 1px solid var(--border);
|
||
padding: 26px 0 40px;
|
||
margin-top: 30px;
|
||
text-align: center;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.tag-cloud.big {
|
||
line-height: 2.4;
|
||
}
|
||
.links-list {
|
||
list-style: none;
|
||
}
|
||
.links-list li {
|
||
padding: 6px 0;
|
||
}
|
||
.link-note {
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.auth-layout {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 50px 20px;
|
||
}
|
||
.auth-box {
|
||
width: 100%;
|
||
max-width: 420px;
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
}
|
||
.auth-alt {
|
||
margin-top: 14px;
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
text-align: center;
|
||
}
|
||
.search-form {
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
.search-form input {
|
||
flex: 1;
|
||
padding: 10px 14px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-size: 15px;
|
||
}
|
||
|
||
/* ============ 侧边栏 ============ */
|
||
.sidebar {
|
||
position: sticky;
|
||
top: 20px;
|
||
}
|
||
.widget {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 18px 20px;
|
||
margin-bottom: 18px;
|
||
}
|
||
.widget-title {
|
||
font-size: 15px;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid var(--accent);
|
||
}
|
||
.widget-list {
|
||
list-style: none;
|
||
}
|
||
.widget-list li {
|
||
font-size: 14px;
|
||
padding: 5px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
/* 社交账号：横向胶囊列表 */
|
||
.social-links {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
.social-links li {
|
||
font-size: 12px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
padding: 4px 10px;
|
||
}
|
||
.widget-list li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.count {
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
.tag-cloud {
|
||
line-height: 2;
|
||
}
|
||
.tag-cloud a {
|
||
display: inline-block;
|
||
}
|
||
.tag-cloud.big {
|
||
line-height: 2.4;
|
||
}
|
||
|
||
/* ============ 顶栏搜索（默认 header partial） ============ */
|
||
.site-search input {
|
||
padding: 7px 12px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-size: 14px;
|
||
width: 160px;
|
||
}
|
||
.link-btn {
|
||
background: none;
|
||
border: none;
|
||
color: var(--accent);
|
||
font-size: 15px;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
}
|
||
|
||
/* ============ 文章正文补充 ============ */
|
||
.post-tags {
|
||
margin-top: 16px;
|
||
}
|
||
.post-content ul,
|
||
.post-content ol {
|
||
padding-left: 24px;
|
||
margin: 8px 0;
|
||
}
|
||
.post-content h4,
|
||
.post-content h5,
|
||
.post-content h6 {
|
||
margin: 16px 0 6px;
|
||
}
|
||
.post-content table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
margin: 12px 0;
|
||
}
|
||
.post-content th,
|
||
.post-content td {
|
||
border: 1px solid var(--border);
|
||
padding: 6px 10px;
|
||
}
|
||
.post-content hr {
|
||
border: none;
|
||
border-top: 1px solid var(--border);
|
||
margin: 18px 0;
|
||
}
|
||
|
||
/* ============ 个人中心 ============ */
|
||
.profile-box {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 24px 28px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.profile-box p {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* ============ 按钮变体 ============ */
|
||
.btn-primary {
|
||
background: var(--accent);
|
||
}
|
||
.btn:hover {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* ============ 会员/支付 ============ */
|
||
.plans-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
.plan-card .plan-price {
|
||
font-size: 26px;
|
||
font-weight: 800;
|
||
color: var(--accent);
|
||
}
|
||
.paid-teaser {
|
||
background: rgba(248, 81, 73, 0.08);
|
||
border: 1px dashed var(--accent);
|
||
border-radius: 8px;
|
||
padding: 12px 16px;
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
/* ============ 移动端适配 ============ */
|
||
@media (max-width: 768px) {
|
||
.m-header .m-container {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
padding: 16px 20px;
|
||
}
|
||
.m-nav {
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
width: 100%;
|
||
}
|
||
.m-search {
|
||
flex: 1;
|
||
min-width: 100%;
|
||
}
|
||
.m-search input {
|
||
width: 100%;
|
||
}
|
||
.main-layout {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
padding: 24px 16px;
|
||
}
|
||
.main-layout .content {
|
||
max-width: 100%;
|
||
}
|
||
.main-layout .sidebar {
|
||
width: 100%;
|
||
}
|
||
.post-card,
|
||
.post-full,
|
||
.comments-section {
|
||
padding: 20px;
|
||
}
|
||
.post-cover {
|
||
margin: -20px -20px 16px;
|
||
}
|
||
.post-full .post-title {
|
||
font-size: 24px;
|
||
}
|
||
.auth-box {
|
||
padding: 24px 20px;
|
||
}
|
||
.pagination-links {
|
||
gap: 6px;
|
||
}
|
||
.pagination-links a,
|
||
.pagination-links .current,
|
||
.pagination-links .disabled {
|
||
padding: 5px 10px;
|
||
}
|
||
}
|
||
|
||
/* TOC */
|
||
.toc {
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 14px 18px;
|
||
margin: 0 0 18px;
|
||
font-size: 14px;
|
||
}
|
||
.toc summary {
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
margin-bottom: 6px;
|
||
}
|
||
.toc-list {
|
||
list-style: none;
|
||
}
|
||
.toc-list li {
|
||
padding: 3px 0;
|
||
}
|
||
.toc-list a {
|
||
color: var(--muted);
|
||
}
|
||
.toc-list a:hover {
|
||
color: var(--accent);
|
||
}
|
||
.toc-level-3 {
|
||
padding-left: 14px;
|
||
}
|
||
.toc-level-4,
|
||
.toc-level-5,
|
||
.toc-level-6 {
|
||
padding-left: 28px;
|
||
}
|
||
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0 0 0 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
/* Paywall */
|
||
.paywall {
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 28px 22px;
|
||
background: var(--bg);
|
||
text-align: center;
|
||
}
|
||
.paywall-cover img {
|
||
max-width: 100%;
|
||
border-radius: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.paywall-title {
|
||
font-size: 22px;
|
||
margin: 0 0 10px;
|
||
}
|
||
.paywall-excerpt {
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
margin: 0 0 16px;
|
||
}
|
||
.paywall-price {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
color: var(--accent);
|
||
margin: 0 0 8px;
|
||
}
|
||
.paywall-hint {
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
margin: 0 0 18px;
|
||
}
|
||
.paywall-actions .btn {
|
||
margin: 0 6px;
|
||
}
|
||
.paid-teaser {
|
||
border: 1px dashed var(--border);
|
||
background: var(--bg-muted, #f6f6f6);
|
||
color: var(--muted);
|
||
border-radius: 10px;
|
||
padding: 14px 16px;
|
||
margin: 14px 0;
|
||
font-size: 14px;
|
||
}
|
||
.paid-teaser .btn {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
/* 已解锁的付费内容块 */
|
||
.paid-content {
|
||
border: 1px solid var(--border);
|
||
border-left: 4px solid var(--accent);
|
||
background: var(--bg);
|
||
border-radius: 10px;
|
||
padding: 14px 16px;
|
||
margin: 14px 0;
|
||
}
|
||
.paid-content-label {
|
||
font-size: 12px;
|
||
color: var(--accent);
|
||
font-weight: 600;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
/* 分类页介绍区 */
|
||
.category-intro {
|
||
display: flex;
|
||
gap: 14px;
|
||
align-items: flex-start;
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 16px 18px;
|
||
margin-bottom: 18px;
|
||
}
|
||
.category-cover {
|
||
width: 128px;
|
||
height: 84px;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
.category-description {
|
||
margin: 0 0 6px;
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
line-height: 1.7;
|
||
}
|
||
.category-meta {
|
||
margin: 0;
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|