/* * article-content.css * * Shared stylesheet for: * - public article detail page (.it-article-content wrapper) * - TinyMCE editor content preview (via tinymce init content_css) * * Goal: editor WYSIWYG matches the rendered public page. Loaded by both. * No TinyMCE runtime deps: safe to include on any public page. * * Scope selector preference: * - Prefer .it-article-content ... so public page selectors are namespaced * - TinyMCE loads this file inside the editor iframe (no wrapper), selectors * without .it-article-content also apply; that's fine, they're article-safe */ /* ---- Base typography ---- */ .it-article-content { font-size: 16px; line-height: 1.75; color: #2c3e50; word-wrap: break-word; overflow-wrap: break-word; } body { /* TinyMCE iframe body inherits this; public pages already have their own */ word-wrap: break-word; overflow-wrap: break-word; } .it-article-content p, body > p { margin: 0 0 1em; } .it-article-content h1, .it-article-content h2, .it-article-content h3, .it-article-content h4, .it-article-content h5, .it-article-content h6 { margin: 1.5em 0 0.6em; font-weight: 600; line-height: 1.3; color: #1a242f; } .it-article-content h1 { font-size: 1.8em; } .it-article-content h2 { font-size: 1.5em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; } .it-article-content h3 { font-size: 1.25em; } .it-article-content h4 { font-size: 1.1em; } .it-article-content h5 { font-size: 1em; color: #566573; } .it-article-content h6 { font-size: 0.95em; color: #7f8c8d; } /* ---- Links ---- */ .it-article-content a { color: #1e87d8; text-decoration: none; } .it-article-content a:hover { text-decoration: underline; } /* ---- Lists ---- */ .it-article-content ul, .it-article-content ol { margin: 0 0 1em; padding-left: 2em; } .it-article-content li { margin: 0.2em 0; } /* ---- Blockquote ---- */ .it-article-content blockquote { margin: 1em 0; padding: 0.6em 1em; border-left: 4px solid #dfe4ea; color: #566573; background: #f8f9fa; } .it-article-content blockquote p:last-child { margin-bottom: 0; } /* ---- Images ---- */ /* body img 规则覆盖"编辑器 iframe 里图片没有 .it-article-content 包裹"的场景： TinyMCE content_css 加载本文件到 iframe，里面 img 直挂在下。前台页面有 .it-article-content 包裹层，两条选择器同特异性，后者源码在后覆盖前者。 */ body img, .it-article-content img { max-width: 100%; height: auto; } .it-article-content img { display: inline-block; } .it-article-content figure { margin: 1em 0; text-align: center; } .it-article-content figure img { display: block; margin: 0 auto; } .it-article-content figcaption { margin-top: 0.4em; color: #7f8c8d; font-size: 0.9em; text-align: center; } /* ---- Tables ---- */ .it-article-content .it-article-table-wrap, .it-article-content { /* Allow tables to scroll horizontally on mobile rather than break layout */ } .it-article-content table { border-collapse: collapse; margin: 1em 0; max-width: 100%; display: block; overflow-x: auto; } .it-article-content th, .it-article-content td { border: 1px solid #dfe4ea; padding: 6px 10px; vertical-align: top; } .it-article-content th { background: #f8f9fa; font-weight: 600; } /* ---- Inline and block code ---- */ .it-article-content code { font-family: Consolas, "Courier New", Menlo, Monaco, monospace; font-size: 0.92em; background: #f6f8fa; padding: 1px 5px; border-radius: 3px; color: #c0392b; } .it-article-content pre { margin: 1em 0; padding: 12px 14px; background: #2b2b2b; color: #f8f8f2; border-radius: 4px; overflow-x: auto; line-height: 1.5; font-family: Consolas, "Courier New", Menlo, Monaco, monospace; font-size: 0.9em; } .it-article-content pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; border-radius: 0; } /* .blogread-code is the canonical class produced by normalize_code_blocks. Full styling moved here from it/tmpl/header.html so modern templates (which don't share that inline