Johan Sandoval
a5c0a5210e
Articles get their own address (shareable, back/forward work); the list is searchable by title and text, shows the article count, and is grouped into Applications and Troubleshooting & Guides via a hidden category line set from the editor. PDF export lays out at page width with page breaks, a title block and page numbers; Print uses the browser's vector print. Inline code is a pill that glows blue on hover, blockquotes no longer squeeze, and GitHub-style [!NOTE] alerts render. [[Badge]] syntax inside code spans is left alone.
67 lines
4.9 KiB
CSS
67 lines
4.9 KiB
CSS
/* ---------- Knowledge base ---------- */
|
|
/* search + count */
|
|
.kb-search { flex-shrink: 0; margin-bottom: 10px; }
|
|
.kb-search input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg); color: var(--text-main); font: inherit; font-size: 0.92em; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
|
|
.kb-search input:focus { border-color: #3498db; box-shadow: 0 0 0 3px rgba(52,152,219,0.25); }
|
|
.kb-count { color: var(--text-muted); font-size: 0.8em; margin-top: 6px; }
|
|
#docList { gap: 14px !important; }
|
|
.kb-empty { color: var(--text-muted); font-size: 0.9em; }
|
|
|
|
/* groups + items */
|
|
.kb-group-title { font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 2px 0 6px; display: flex; justify-content: space-between; }
|
|
.kb-group-title span { font-weight: 600; }
|
|
.kb-item { display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; margin: 0 -8px 2px; border-radius: 6px; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
|
|
.kb-item:hover { background: rgba(52,152,219,0.08); border-color: rgba(52,152,219,0.45); box-shadow: 0 0 10px rgba(52,152,219,0.35); }
|
|
.kb-item.active { background: rgba(52,152,219,0.14); border-color: #3498db; }
|
|
.kb-item-main { min-width: 0; flex: 1; }
|
|
.kb-item a { color: #3498db; text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
|
|
.kb-item.active a { font-weight: 700; }
|
|
.kb-snip { font-size: 0.78em; color: var(--text-muted); margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
|
|
.kb-snip mark { background: rgba(52,152,219,0.3); color: inherit; border-radius: 2px; padding: 0 1px; }
|
|
.kb-copy { background: none; border: 0; padding: 2px; margin-top: 1px; color: var(--text-muted); opacity: 0.5; cursor: pointer; transition: opacity 0.15s, color 0.15s; }
|
|
.kb-copy:hover { opacity: 1; color: #3498db; }
|
|
.kb-copy svg { width: 14px; height: 14px; fill: currentColor; }
|
|
|
|
/* toolbar extras */
|
|
.kb-tool { padding: 6px 10px !important; border: 1px solid var(--border-color) !important; display: inline-flex !important; align-items: center; gap: 6px; }
|
|
.kb-tool svg { width: 14px; height: 14px; fill: currentColor; }
|
|
.kb-cat-select { padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--input-bg); color: var(--text-main); font: inherit; font-size: 0.85em; }
|
|
#docToolbar { flex-wrap: wrap; }
|
|
|
|
/* inline code: a pill that glows blue on hover (click to copy) */
|
|
#docContent :not(pre) > code {
|
|
font-family: Consolas, "Cascadia Mono", Menlo, monospace; font-size: 0.88em;
|
|
background: rgba(127,127,127,0.14); border: 1px solid var(--border-color); border-radius: 5px;
|
|
padding: 1px 6px; color: var(--text-main); cursor: copy; white-space: break-spaces; overflow-wrap: anywhere;
|
|
transition: border-color 0.15s, box-shadow 0.15s, color 0.15s, background 0.15s;
|
|
}
|
|
#docContent :not(pre) > code:hover {
|
|
border-color: #3498db; color: #3498db; background: rgba(52,152,219,0.1);
|
|
box-shadow: 0 0 0 1px rgba(52,152,219,0.35), 0 0 12px rgba(52,152,219,0.55);
|
|
}
|
|
[data-theme="dark"] #docContent :not(pre) > code:hover { color: #85c1e9; }
|
|
|
|
/* blockquotes: normal block flow (multi-line quotes, lists and links no longer squeeze) */
|
|
#docContent blockquote { display: block !important; padding: 10px 16px !important; min-height: 0 !important; line-height: 1.6; }
|
|
#docContent blockquote p { display: block !important; margin: 0 0 8px !important; }
|
|
#docContent blockquote > :last-child { margin-bottom: 0 !important; }
|
|
#docContent blockquote ul, #docContent blockquote ol { margin: 4px 0; padding-left: 22px; }
|
|
|
|
/* GitHub-style alerts: > [!NOTE] */
|
|
#docContent blockquote.kb-alert { border-left-width: 4px; }
|
|
.kb-alert-title { font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
|
|
#docContent .kb-alert-note { border-left-color: #2a78d6 !important; } .kb-alert-note .kb-alert-title { color: #2a78d6; }
|
|
#docContent .kb-alert-tip { border-left-color: #0ca30c !important; } .kb-alert-tip .kb-alert-title { color: #0a8a0a; }
|
|
#docContent .kb-alert-important { border-left-color: #8250df !important; } .kb-alert-important .kb-alert-title { color: #8250df; }
|
|
#docContent .kb-alert-warning { border-left-color: #d29922 !important; } .kb-alert-warning .kb-alert-title { color: #9a6700; }
|
|
#docContent .kb-alert-caution { border-left-color: #d03b3b !important; } .kb-alert-caution .kb-alert-title { color: #d03b3b; }
|
|
[data-theme="dark"] .kb-alert-tip .kb-alert-title { color: #3fb950; }
|
|
[data-theme="dark"] .kb-alert-important .kb-alert-title { color: #a371f7; }
|
|
[data-theme="dark"] .kb-alert-warning .kb-alert-title { color: #d29922; }
|
|
[data-theme="dark"] .kb-alert-caution .kb-alert-title { color: #f85149; }
|
|
[data-theme="dark"] .kb-alert-note .kb-alert-title { color: #58a6ff; }
|
|
|
|
@media (max-width: 1100px) {
|
|
.kb-tool span { display: none; }
|
|
}
|