nex_docus/frontend/src/index.css

118 lines
2.3 KiB
CSS

:root {
--bg-color: #fff;
--bg-color-secondary: #fafafa;
--text-color: #000000e0;
--text-color-secondary: #00000073;
--border-color: #f0f0f0;
--header-bg: #fff;
--sider-bg: #fff;
--item-hover-bg: #f5f5f5;
--card-bg: #fff;
/* Markdown & Editor Specific */
--code-bg: #f6f8fa;
--table-border-color: #dfe2e5;
--table-header-bg: #f6f8fa;
--blockquote-border-color: #dfe2e5;
--blockquote-text-color: #6a737d;
--toolbar-bg: #fafafa;
--link-color: #1677ff;
}
body.dark {
--bg-color: #141414;
--bg-color-secondary: #1f1f1f;
--text-color: #ffffffd9;
--text-color-secondary: #ffffff73;
--border-color: #303030;
--header-bg: #141414;
--sider-bg: #141414;
--item-hover-bg: #1f1f1f;
--card-bg: #1f1f1f;
/* Markdown & Editor Specific Dark */
--code-bg: #2d2d2d;
--table-border-color: #303030;
--table-header-bg: #1f1f1f;
--blockquote-border-color: #303030;
--blockquote-text-color: #8b949e;
--toolbar-bg: #1f1f1f;
--link-color: #177ddc;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
.search-highlight {
background-color: #ffd54f !important;
color: black !important;
font-weight: bold;
padding: 0 2px;
border-radius: 2px;
}
/* Dark mode overrides for highlight.js */
body.dark .hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #c9d1d9;
background: var(--code-bg) !important;
}
body.dark .hljs-comment,
body.dark .hljs-quote {
color: #8b949e;
}
body.dark .hljs-keyword,
body.dark .hljs-selector-tag {
color: #ff7b72;
}
body.dark .hljs-literal,
body.dark .hljs-number,
body.dark .hljs-variable,
body.dark .hljs-template-variable,
body.dark .hljs-tag .hljs-attr {
color: #79c0ff;
}
body.dark .hljs-string,
body.dark .hljs-doctag {
color: #a5d6ff;
}
body.dark .hljs-title,
body.dark .hljs-section,
body.dark .hljs-selector-id {
color: #d2a8ff;
}
body.dark .hljs-title.class_,
body.dark .hljs-class .hljs-title {
color: #f0883e;
}
body.dark .hljs-type,
body.dark .hljs-built_in,
body.dark .hljs-builtin-name,
body.dark .hljs-symbol,
body.dark .hljs-selector-class,
body.dark .hljs-selector-attr,
body.dark .hljs-selector-pseudo {
color: #79c0ff;
}
body.dark .hljs-addition {
color: #aff5b4;
background-color: #033a16;
}
body.dark .hljs-deletion {
color: #ffdcd7;
background-color: #67060c;
}