diff options
Diffstat (limited to 'static/style.css')
| -rw-r--r-- | static/style.css | 248 |
1 files changed, 152 insertions, 96 deletions
diff --git a/static/style.css b/static/style.css index 6a90c3c..33f72f0 100644 --- a/static/style.css +++ b/static/style.css @@ -1,4 +1,10 @@ :root { + --btn-bg: #f0f0f0; + --btn-border: #cccccc; + --btn-color: #333333; + --btn-bg-hover: #e0e0e0; + --btn-border-hover: #aaaaaa; + --width-max: 730px; --font-secondary: "Georgia", "Noto Serif", "Times New Roman", serif; --font-size-primary: 1.08rem; @@ -51,7 +57,7 @@ h4 { font-size: var(--font-size-h4); font-weight: 600; line-height: 1.4; margin: h5 { font-size: var(--font-size-h5); font-weight: 500; line-height: 1.5; margin: 1.67em 0; text-transform: uppercase; } h6 { font-size: var(--font-size-h6); font-weight: 500; line-height: 1.5; margin: 2em 0; color: #666; } -p { +p, li { font-size: var(--font-size-primary); line-height: 2; } @@ -69,7 +75,7 @@ p { display: block; } -summary p { +summary, summary p { color: var(--summary-text-color); } @@ -147,6 +153,20 @@ div.summary p { line-height: 2; } +p, details { + margin: 0; +} + +/* 再统一设置上下边距 */ +p, details { + margin: 1em 0; /* 根据设计需求调整数值 */ +} + +div.faq summary { + color: var(--body-text-color); + +} + a { text-decoration: none; border-bottom: 1px dotted; @@ -194,6 +214,26 @@ a.title h1 { font-size: 2.15em; } +div.title { + display: inline-block; +} + +.theme-toggler { + float: right; + margin-top: 1.3rem; + padding: 0; +} + +#toggle-theme-btn{ + margin-right: 1rem; + padding: 0; + background: var(--btn-bg-color); + border: 1px solid var(--btn-border-color); + color: var(--btn-color); + border-radius: 4px; + cursor: pointer; +} + .title span { font-weight: 400; } @@ -349,7 +389,7 @@ img[src*="#minipic"] { height: 100%; } -.rss-icon { +.footer-item { display: inline; font-size: 16px; float: right; @@ -632,99 +672,115 @@ ul li:has(input) { margin-left: -25.5px; } -/* @media (prefers-color-scheme: dark) { */ -/* :root { */ -/* --body-text-color: #bbb; */ -/* --title-color: #aaa; */ - -/* --body-bg-color: #0f0f0f; */ -/* --summary-text-color: #a8a8a8; */ -/* --bold-text-color: #ffffff; */ -/* --text-color-tertiary: #bbb; */ - -/* --link-color: #5cc2ff; */ -/* --link-visited-color: #9d7eff; */ - -/* --code-bg-color: #1a1a1a; */ -/* --code-text-color: #d4d4d4; */ -/* --blockquote-border-color: #555555; */ -/* --blockquote-text-color: #bbbbbb; */ - -/* --table-border-color: #444444; */ -/* --table-th-bg-color: #1f1f1f; */ - -/* --img-border-color: #444444; */ -/* --toc-text-color: #aaaaaa; */ -/* --toc-hover-color: #5cc2ff; */ -/* --summary-text-color: #878686; */ -/* --color-background: var(--body-bg-color) !important; */ -/* } */ - -/* a { */ -/* color: var(--link-color); */ -/* cursor: pointer; */ -/* } */ - -/* h3.recent-post-title a { */ -/* color: var(--body-text-color); */ -/* } */ - -/* .post-meta-item svg { */ -/* filter: invert(1) hue-rotate(180deg); */ -/* } */ - -/* strong { */ -/* /\* font-weight: 650; *\/ */ -/* } */ - -/* .music-btn { */ -/* background-color: var(--music-bg-dark); */ -/* } */ -/* .music-btn:hover { */ -/* background-color: var(--music-bg-hover-dark); */ -/* } */ - -/* .category-link { */ -/* color: #dbdbdb; */ -/* } */ - -/* .wm { */ -/* background-color: #161b22; */ -/* border-color: #30363d; */ -/* color: var(--body-text-color); */ -/* padding: 10px; */ -/* } */ - -/* .wm input { */ -/* background-color: #010409; */ -/* border: #30363d 1px solid; */ -/* color: var(--body-text-color); */ -/* outline: none; */ -/* } */ - -/* #webmention-source:focus { */ -/* border-color: var(--color-accent-fg, #0969da); */ -/* box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1); */ -/* } */ - -/* .wm button { */ -/* color: var(--body-text-color); */ -/* background-color: #161b22; */ -/* border: #30363d 1px solid; */ -/* } */ - -/* .post-summary { */ -/* color: var(--text-color-primary) !important; */ -/* } */ - -/* .post-item { */ -/* border-bottom: 1px solid #414141 !important; */ -/* } */ - -/* .pagination-link { */ -/* border: 1px solid #414141 !important; */ -/* } */ -/* } */ +button { +background: var(--btn-bg-color); + border: 1px solid var(--btn-border-color); + color: var(--btn-color, currentColor); + padding: 0.5rem 1rem; + border-radius: 0.25rem; + cursor: pointer; +} + +body.dark-mode { + + --btn-bg: #3a3a3a; + --btn-border: #555555; + --btn-color: #eeeeee; + --btn-bg-hover: #4a4a4a; + --btn-border-hover: #777777; + + + --body-text-color: #bbb; + + --title-color: #aaa; + + --body-bg-color: #1b1a1d; + --summary-text-color: #a8a8a8; + --bold-text-color: #ffffff; + --text-color-tertiary: #bbb; + + --link-color: #5cc2ff; + --link-visited-color: #9d7eff; + + --code-bg-color: #1a1a1a; + --code-text-color: #d4d4d4; + --blockquote-border-color: #555555; + --blockquote-text-color: #bbbbbb; + + --table-border-color: #444444; + --table-th-bg-color: #1f1f1f; + + --img-border-color: #444444; + --toc-text-color: #aaaaaa; + --toc-hover-color: #5cc2ff; + --summary-text-color: #878686; + --color-background: var(--body-bg-color) !important; + + a { + color: var(--link-color); + cursor: pointer; + } + + h3.recent-post-title a { + color: var(--body-text-color); + } + + .post-meta-item svg { + filter: invert(1) hue-rotate(180deg); + } + + strong { + /* font-weight: 650; */ + } + + .music-btn { + background-color: var(--music-bg-dark); + } + .music-btn:hover { + background-color: var(--music-bg-hover-dark); + } + + .category-link { + color: #dbdbdb; + } + + .wm { + background-color: #161b22; + border-color: #30363d; + color: var(--body-text-color); + padding: 10px; + } + + .wm input { + background-color: #010409; + border: #30363d 1px solid; + color: var(--body-text-color); + outline: none; + } + + #webmention-source:focus { + border-color: var(--color-accent-fg, #0969da); + box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1); + } + + .wm button { + color: var(--body-text-color); + background-color: #161b22; + border: #30363d 1px solid; + } + + .post-summary { + color: var(--text-color-primary) !important; + } + + .post-item { + border-bottom: 1px solid #414141 !important; + } + + .pagination-link { + border: 1px solid #414141 !important; + } +} @media (min-width: 768px) { .music-card { |