Last active
January 15, 2026 07:10
-
-
Save aoaim/2eb9923e097655b9e0ebd8b5b9224ac8 to your computer and use it in GitHub Desktop.
自用 miniflux 样式,根据 https://github.com/ryanccn/modernflux 修改
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ========== 导入基础样式 ========== */ | |
| @import url("https://modernflux.ryanccn.dev/base.min.css"); | |
| /* ========== Flexoki Cyan 明暗自适应 ========== */ | |
| /* 🌞 亮色模式 */ | |
| @media (prefers-color-scheme: light) { | |
| :root { | |
| --modernflux-color-scheme: light; | |
| --modernflux-fg0: #100f0f; | |
| --modernflux-fg1: #6f6e69; | |
| --modernflux-fg2: #b7b5ac; | |
| --modernflux-bg0: #fffcf0; | |
| --modernflux-bg1: #f2f0e5; | |
| --modernflux-bg2: #e6e4d9; | |
| --modernflux-accent: #24837b; | |
| --modernflux-success: #66800b; | |
| --modernflux-danger: #af3029; | |
| } | |
| } | |
| /* 🌙 暗色模式 */ | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --modernflux-color-scheme: dark; | |
| --modernflux-fg0: #cecdc3; | |
| --modernflux-fg1: #878580; | |
| --modernflux-fg2: #575653; | |
| --modernflux-bg0: #100f0f; | |
| --modernflux-bg1: #1c1b1a; | |
| --modernflux-bg2: #282726; | |
| --modernflux-accent: #3aa99f; | |
| --modernflux-success: #879a39; | |
| --modernflux-danger: #d14d41; | |
| } | |
| } | |
| /* ========== 自定义变量 ========== */ | |
| :root { | |
| --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", | |
| "Roboto", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", | |
| "Microsoft YaHei", sans-serif; | |
| --content-width: 900px; | |
| --img-radius: 8px; | |
| --img-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); | |
| --img-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12); | |
| } | |
| /* ========== 全局字体(包含 blockquote) ========== */ | |
| :root, body, | |
| .entry-content, | |
| .entry-content blockquote, | |
| .entry-content pre, | |
| .entry-content code, | |
| .entry-title { | |
| font-family: var(--font-sans) !important; | |
| } | |
| /* ========== 正文排版 ========== */ | |
| .entry-content { | |
| font-size: 1rem !important; | |
| line-height: 1.6 !important; | |
| } | |
| /* ========== 图片样式(移动优先) ========== */ | |
| .entry-content img { | |
| display: block !important; | |
| width: auto !important; | |
| max-width: 100% !important; | |
| margin: 1.5rem auto !important; | |
| border-radius: var(--img-radius) !important; | |
| box-shadow: var(--img-shadow) !important; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .entry-content img:hover { | |
| transform: scale(1.02); | |
| box-shadow: var(--img-shadow-hover) !important; | |
| } | |
| /* ========== 平板适配 (768px - 1023px) ========== */ | |
| @media (min-width: 768px) and (max-width: 1023px) { | |
| .entry, .entry-content { | |
| max-width: var(--content-width) !important; | |
| } | |
| .entry-content img { | |
| max-width: 70% !important; | |
| max-height: 60vh !important; | |
| } | |
| } | |
| /* ========== 电脑适配 (≥1024px) ========== */ | |
| @media (min-width: 1024px) { | |
| .entry, .entry-content { | |
| max-width: var(--content-width) !important; | |
| } | |
| .entry-content img { | |
| max-width: 50% !important; | |
| max-height: 60vh !important; | |
| } | |
| } | |
| /* ========== 图片链接 & 图注 ========== */ | |
| .entry-content a:has(img) { | |
| border-bottom: none !important; | |
| text-decoration: none !important; | |
| } | |
| .entry-content figure, | |
| .entry-content figcaption { | |
| text-align: center !important; | |
| width: 100% !important; | |
| margin-top: 0.5rem !important; | |
| font-size: 0.875em !important; | |
| color: var(--modernflux-fg1) !important; | |
| font-style: italic; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment