187 lines
6.7 KiB
CSS
187 lines
6.7 KiB
CSS
/* Giscus评论系统主题适配 */
|
|
:root {
|
|
/* 浅色主题变量 */
|
|
--giscus-light-bg: #ffffff;
|
|
--giscus-light-text: #22272e;
|
|
--giscus-light-border: #e1e4e8;
|
|
--giscus-light-btn-bg: #f6f8fa;
|
|
--giscus-light-btn-hover: #f3f4f6;
|
|
--giscus-light-comment-bg: #f6f8fa;
|
|
--giscus-light-link: var(--vp-c-brand-2);
|
|
--giscus-light-code-bg: rgba(175, 184, 193, 0.2);
|
|
|
|
/* 深色主题变量 */
|
|
--giscus-dark-bg: #15202b;
|
|
--giscus-dark-text: #adbac7;
|
|
--giscus-dark-border: #444c56;
|
|
--giscus-dark-btn-bg: #373e47;
|
|
--giscus-dark-btn-hover: #444c56;
|
|
--giscus-dark-comment-bg: #1e2d3b;
|
|
--giscus-dark-link: var(--vp-c-brand-1);
|
|
--giscus-dark-code-bg: rgba(99, 110, 123, 0.4);
|
|
}
|
|
|
|
/* 基础样式 */
|
|
main {
|
|
/* 使用您的品牌色重新定义语法高亮 */
|
|
--color-prettylights-syntax-comment: var(--vp-c-text-2);
|
|
--color-prettylights-syntax-constant: var(--vp-c-brand-1);
|
|
--color-prettylights-syntax-entity: var(--vp-c-brand-2);
|
|
--color-prettylights-syntax-storage-modifier-import: var(--vp-c-text-1);
|
|
--color-prettylights-syntax-entity-tag: #8ddb8c;
|
|
--color-prettylights-syntax-keyword: #f47067;
|
|
--color-prettylights-syntax-string: #96d0ff;
|
|
--color-prettylights-syntax-variable: #f69d50;
|
|
--color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
|
|
--color-prettylights-syntax-invalid-illegal-text: var(--vp-c-text-1);
|
|
--color-prettylights-syntax-invalid-illegal-bg: #922323;
|
|
--color-prettylights-syntax-carriage-return-text: var(--vp-c-text-1);
|
|
--color-prettylights-syntax-carriage-return-bg: #ad2e2c;
|
|
--color-prettylights-syntax-string-regexp: #8ddb8c;
|
|
--color-prettylights-syntax-markup-list: #eac55f;
|
|
--color-prettylights-syntax-markup-heading: var(--vp-c-brand-3);
|
|
--color-prettylights-syntax-markup-italic: var(--vp-c-text-1);
|
|
--color-prettylights-syntax-markup-bold: var(--vp-c-text-1);
|
|
--color-prettylights-syntax-markup-deleted-text: #ffd8d3;
|
|
--color-prettylights-syntax-markup-deleted-bg: #78191b;
|
|
--color-prettylights-syntax-markup-inserted-text: #b4f1b4;
|
|
--color-prettylights-syntax-markup-inserted-bg: #1b4721;
|
|
--color-prettylights-syntax-markup-changed-text: #ffddb0;
|
|
--color-prettylights-syntax-markup-changed-bg: #682d0f;
|
|
--color-prettylights-syntax-markup-ignored-text: var(--vp-c-text-2);
|
|
--color-prettylights-syntax-markup-ignored-bg: #255ab2;
|
|
--color-prettylights-syntax-meta-diff-range: var(--vp-c-brand-2);
|
|
|
|
/* 按钮样式 */
|
|
--color-btn-text: var(--vp-c-text-1);
|
|
--color-btn-bg: var(--vp-c-default-soft);
|
|
--color-btn-border: var(--vp-c-border);
|
|
--color-btn-shadow: 0 0 transparent;
|
|
--color-btn-inset-shadow: 0 0 transparent;
|
|
--color-btn-hover-bg: var(--vp-c-default-2);
|
|
--color-btn-hover-border: var(--vp-c-border);
|
|
--color-btn-active-bg: var(--vp-c-default-3);
|
|
--color-btn-active-border: var(--vp-c-border);
|
|
--color-btn-selected-bg: var(--vp-c-default-3);
|
|
|
|
/* 主按钮样式 - 使用您的品牌色 */
|
|
--color-btn-primary-text: var(--vp-c-white);
|
|
--color-btn-primary-bg: var(--vp-c-brand-3);
|
|
--color-btn-primary-border: transparent;
|
|
--color-btn-primary-shadow: 0 0 transparent;
|
|
--color-btn-primary-inset-shadow: 0 0 transparent;
|
|
--color-btn-primary-hover-bg: var(--vp-c-brand-2);
|
|
--color-btn-primary-hover-border: transparent;
|
|
--color-btn-primary-selected-bg: var(--vp-c-brand-3);
|
|
--color-btn-primary-selected-shadow: 0 0 transparent;
|
|
--color-btn-primary-disabled-text: rgba(255, 255, 255, 0.5);
|
|
--color-btn-primary-disabled-bg: rgba(163, 104, 184, 0.6);
|
|
--color-btn-primary-disabled-border: transparent;
|
|
|
|
/* 其他元素 */
|
|
--color-fg-default: var(--vp-c-text-1);
|
|
--color-fg-muted: var(--vp-c-text-2);
|
|
--color-fg-subtle: var(--vp-c-text-3);
|
|
--color-canvas-default: var(--vp-c-bg);
|
|
--color-canvas-overlay: var(--vp-c-bg-soft);
|
|
--color-canvas-inset: var(--vp-c-bg-alt);
|
|
--color-canvas-subtle: var(--vp-c-bg-soft);
|
|
--color-border-default: var(--vp-c-border);
|
|
--color-border-muted: var(--vp-c-divider);
|
|
--color-accent-fg: var(--vp-c-brand-1);
|
|
--color-accent-emphasis: var(--vp-c-brand-3);
|
|
--color-accent-muted: var(--vp-c-brand-soft);
|
|
--color-accent-subtle: var(--vp-c-brand-soft);
|
|
|
|
/* 加载动画 */
|
|
--color-homepage-bg: var(--vp-c-bg);
|
|
}
|
|
|
|
/* 浅色主题适配 */
|
|
@media (prefers-color-scheme: light) {
|
|
main {
|
|
--color-canvas-default: var(--giscus-light-bg);
|
|
--color-canvas-overlay: var(--giscus-light-comment-bg);
|
|
--color-canvas-inset: var(--giscus-light-comment-bg);
|
|
--color-canvas-subtle: var(--giscus-light-btn-bg);
|
|
--color-fg-default: var(--giscus-light-text);
|
|
--color-fg-muted: #57606a;
|
|
--color-fg-subtle: #6e7781;
|
|
--color-border-default: var(--giscus-light-border);
|
|
--color-border-muted: #d0d7de;
|
|
--color-btn-bg: var(--giscus-light-btn-bg);
|
|
--color-btn-hover-bg: var(--giscus-light-btn-hover);
|
|
--color-accent-fg: var(--giscus-light-link);
|
|
--color-prettylights-syntax-comment: #6e7781;
|
|
}
|
|
}
|
|
|
|
/* 深色主题适配 */
|
|
@media (prefers-color-scheme: dark) {
|
|
main {
|
|
--color-canvas-default: var(--giscus-dark-bg);
|
|
--color-canvas-overlay: var(--giscus-dark-comment-bg);
|
|
--color-canvas-inset: var(--giscus-dark-comment-bg);
|
|
--color-canvas-subtle: var(--giscus-dark-btn-bg);
|
|
--color-fg-default: var(--giscus-dark-text);
|
|
--color-fg-muted: #768390;
|
|
--color-fg-subtle: #545d68;
|
|
--color-border-default: var(--giscus-dark-border);
|
|
--color-border-muted: #373e47;
|
|
--color-btn-bg: var(--giscus-dark-btn-bg);
|
|
--color-btn-hover-bg: var(--giscus-dark-btn-hover);
|
|
--color-accent-fg: var(--giscus-dark-link);
|
|
--color-prettylights-syntax-comment: #768390;
|
|
}
|
|
}
|
|
|
|
/* 自定义样式 */
|
|
.gsc-reactions-count {
|
|
display: none;
|
|
}
|
|
|
|
.gsc-timeline {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.gsc-header {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.gsc-comments>.gsc-header {
|
|
order: 1;
|
|
}
|
|
|
|
.gsc-comments>.gsc-comment-box {
|
|
margin-bottom: 1rem;
|
|
order: 2;
|
|
}
|
|
|
|
.gsc-comments>.gsc-timeline {
|
|
order: 3;
|
|
}
|
|
|
|
main .gsc-loading-image {
|
|
background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif);
|
|
}
|
|
|
|
/* 链接颜色 */
|
|
.gsc-comment a {
|
|
color: var(--color-accent-fg) !important;
|
|
}
|
|
|
|
/* 代码块背景 */
|
|
.gsc-comment markdown-body pre {
|
|
background-color: var(--color-canvas-subtle) !important;
|
|
}
|
|
|
|
/* 评论框样式 */
|
|
.gsc-comment-box {
|
|
border: 1px solid var(--color-border-default) !important;
|
|
background-color: var(--color-canvas-default) !important;
|
|
}
|
|
|
|
/* 按钮悬停效果 */
|
|
.gsc-reaction-button:hover {
|
|
background-color: var(--color-btn-hover-bg) !important;
|
|
} |