/* ============================================================ kbarticle.css — QODBC Knowledge Base Article Stylesheet All article HTML files should link this file in instead of embedding CSS inline. Usage: ============================================================ */ /* -- Theme Variables ------------------------------------------------- */ :root { /* Light (default) palette */ --bg: #f8f9fa; --text: #212529; --heading: #1a1a2e; --link: #0366d6; --code-bg: #2d2d2d; --code-text: #f8f8f2; --border: #dee2e6; --callout-info-bg: #e7f4ff; --callout-info-border: #0366d6; --callout-warning-bg: #fff8e1; --callout-warning-border:#f9a825; --callout-note-bg: #e8f5e9; --callout-note-border: #2e7d32; --callout-bug-bg: #fce4ec; --callout-bug-border: #c62828; --section-bg: #ffffff; --footer-bg: #f1f3f5; --tag-bg: #e9ecef; --step-circle-bg: var(--link); } /* Dark via prefers-color-scheme (system default) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0d1117; --text:#c9d1d9; --heading:#e6edf3; --link:#58a6ff; --code-bg:#161b22; --code-text:#c9d1d9; --border:#30363d; --callout-info-bg:#0c2d6b; --callout-info-border:#58a6ff; --callout-warning-bg:#3d2e00; --callout-warning-border:#f9a825; --callout-note-bg:#143520; --callout-note-border:#3fb950; --callout-bug-bg:#3d0c17; --callout-bug-border:#f85149; --section-bg:#161b22; --footer-bg:#161b22; --tag-bg:#21262d; } } /* Dark via explicit data attribute */ :root[data-theme="dark"] { --bg:#0d1117; --text:#c9d1d9; --heading:#e6edf3; --link:#58a6ff; --code-bg:#161b22; --code-text:#c9d1d9; --border:#30363d; --callout-info-bg:#0c2d6b; --callout-info-border:#58a6ff; --callout-warning-bg:#3d2e00; --callout-warning-border:#f9a825; --callout-note-bg:#143520; --callout-note-border:#3fb950; --callout-bug-bg:#3d0c17; --callout-bug-border:#f85149; --section-bg:#161b22; --footer-bg:#161b22; --tag-bg:#21262d; } /* Dark prefers light */ @media (prefers-color-scheme: light) { :root[data-theme="dark"] { --bg:#f8f9fa; --text:#212529; --heading:#1a1a2e; --link:#0366d6; --code-bg:#2d2d2d; --code-text:#f8f8f2; --border:#dee2e6; --callout-info-bg:#e7f4ff; --callout-info-border:#0366d6; --callout-warning-bg:#fff8e1; --callout-warning-border:#f9a825; --callout-note-bg:#e8f5e9; --callout-note-border:#2e7d32; --callout-bug-bg:#fce4ec; --callout-bug-border:#c62828; --section-bg:#ffffff; --footer-bg:#f1f3f5; --tag-bg:#e9ecef; } } /* Reset & Base ------------------------------------------------------ */ * { margin:0; padding:0; box-sizing:border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; font-size: 15px; } /* Container --------------------------------------------------------- */ .article-container { max-width: 860px; margin: 0 auto; padding: 40px 20px; } /* Breadcrumb -------------------------------------------------------- */ .breadcrumb { font-size: 13px; opacity: .7; margin-bottom: 16px; } .breadcrumb a { color: var(--link); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* Headings ------------------------------------------------------------ */ h1 { font-size: 28px; font-weight: 600; color: var(--heading); margin-bottom: 16px; line-height: 1.3; } h2 { font-size: 22px; font-weight: 600; color: var(--heading); margin: 36px 0 14px 0; padding-bottom: 6px; border-bottom: 1px solid var(--border); } h3 { font-size: 17px; font-weight: 600; color: var(--heading); margin: 24px 0 10px 0; } /* Meta Info --------------------------------------------------------- */ .meta-info { font-size: 13px; opacity: .6; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } /* Paragraphs & Lists -------------------------------------------------- */ .p-kb { margin-bottom: 14px; } .ul-kb, .ol-kb { margin: 10px 0 14px 24px; } .li-kb { margin-bottom: 6px; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* Links inside paragraphs */ p a, ul a, ol a, li a { word-break: break-word; } /* Callouts ---------------------------------------------------------- */ .callout { padding: 14px 18px; border-left: 4px solid var(--callout-info-border); background: var(--callout-info-bg); margin: 18px 0; border-radius: 0 6px 6px 0; } .callout.info { border-color: var(--callout-info-border); background: var(--callout-info-bg); } .callout.warning { border-color: var(--callout-warning-border); background: var(--callout-warning-bg); } .callout.note { border-color: var(--callout-note-border); background: var(--callout-note-bg); } .callout.bug { border-color: var(--callout-bug-border); background: var(--callout-bug-bg); } .callout-title { font-weight: 600; margin-bottom: 6px; font-size: 14px; } .callout p { margin-bottom: 0; } /* Code Block ------------------------------------------------------ */ pre.code-block { background: var(--code-bg); color: var(--code-text); padding: 16px 20px; border-radius: 6px; overflow-x: auto; margin: 14px 0 18px 0; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace; font-size: 13.5px; line-height: 1.6; } /* Inline Code ------------------------------------------------------- */ code { font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace; font-size: 13px; background: var(--tag-bg); padding: 2px 6px; border-radius: 4px; } /* Numbered Steps ------------------------------------------------------- */ .steps { counter-reset: step-counter; list-style: none; padding-left: 0; margin-left: 0; } .steps > li { counter-increment: step-counter; padding: 10px 0 10px 48px; position: relative; border-bottom: 1px dashed var(--border); } .steps > li:last-child { border-bottom: none; } .steps > li::before { content: counter(step-counter); position: absolute; left: 0; top: 10px; width: 32px; height: 32px; background: var(--step-circle-bg); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; } /* Tables ---------------------------------------------------------- */ .table-kb { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; } .th-kb, .td-kb { padding: 10px 14px; border: 1px solid var(--border); text-align: left; } .th-kb { background: var(--tag-bg); font-weight: 600; color: var(--heading); } /* Keywords Section -------------------------------------------------- */ .keywords-section { margin-top: 10px; } .keyword-tag { display: inline-block; background: var(--tag-bg); color: var(--text); padding: 3px 10px; border-radius: 12px; font-size: 12px; margin: 3px 4px 3px 0; } /* Related Articles -------------------------------------------------- */ .related-article { display: block; padding: 8px 12px; margin: 6px 0; border-radius: 4px; border-left: 3px solid var(--link); background: var(--section-bg); } /* Article Footer ---------------------------------------------------- */ .article-footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); background: var(--footer-bg); padding: 20px; border-radius: 6px; font-size: 13px; opacity: .75; } .ticket-id { font-weight: 600; color: var(--heading); } /* Print Styles ------------------------------------------------------ */ @media print { body { background: #fff; color: #000; } pre.code-block { white-space: pre-wrap; word-wrap: break-word; } }