:root { --primary-color-hover: rgb(9, 95, 105); --primary-color: rgb(10, 110, 120); --primary-color-disabled: rgba(93, 152, 156, 0.5); --header-height: 60px; --header-background-color: white; --header-border-color: lightgray; --header-text-color: black; --menu-background-color: white; --background-color: white; --menu-border-color: lightgray; --normal-border-color: lightgray; --menu-selected-background-color: rgba(208, 250, 255, 0.659); --menu-text-color: black; --scroller-background-color: rgba(130, 175, 180, 0.5); --normal-background-color: rgb(241, 241, 241); --login-background-color: rgb(241, 241, 241); --login-background-color-hover: #e0e0e0; --text-color: black; --menu-width: 200px; --page-max-width: 1200px; --page-max-width-mobile: 900px; --article-info-background-color: #f0f0f0; } [data-theme='dark'] { --header-background-color: #2b2b2b; --header-border-color: #555; --primary-color: rgb(17, 182, 197); --primary-color-hover: rgb(13, 137, 151); --header-text-color: white; --menu-background-color: #333; --background-color: #333; --menu-border-color: #555; --normal-border-color: #555; --menu-selected-background-color: rgba(255, 255, 255, 0.1); --menu-text-color: white; --normal-background-color: #000000; --login-background-color: #575757; --login-background-color-hover: #717171; --text-color: #eee; --article-info-background-color: #747373; } body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background-color: var(--normal-background-color); color: var(--text-color); overflow: hidden; /* 禁止滚动 */ } /************************* * Vditor 自定义皮肤覆写 *************************/ /* .vditor { --textarea-background-color: transparent; border: none !important; box-shadow: none !important; } .vditor-reset { color: var(--text-color); } .vditor-toolbar { background: transparent !important; border: none !important; box-shadow: none !important; } */ /************************* * Markdown 渲染样式 *************************/ .info-content-text ul, .info-content-text ol { padding-left: 1.5em; } .info-content-text { word-break: break-word; max-width: 100%; } .info-content-text blockquote { margin: 1em 0; padding-left: 1em; border-left: 4px solid #d0d7de; color: #6a737d; } .info-content-text pre { background-color: var(--normal-background-color); padding: 8px 12px; border-radius: 4px; line-height: 0.8; } .info-content-text code { font-family: monospace; font-size: 13px; border-radius: 4px; white-space: pre-wrap; } .info-content-text a { color: var(--primary-color); text-decoration: none; } .info-content-text a:hover { text-decoration: underline; } .info-content-text img { max-width: 100%; height: auto; } .info-content-text table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 14px; line-height: 1.45; overflow-x: auto; /* 小屏可横向滚动 */ } .info-content-text thead th { background-color: var(--primary-color); color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; } [data-theme='dark'] .info-content-text thead th { background-color: var(--primary-color-hover); /* 暗色稍暗一点 */ } .info-content-text tbody tr:nth-child(even) { background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */ } [data-theme='dark'] .info-content-text tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.05); } .info-content-text th, .info-content-text td { border: 1px solid var(--menu-border-color); padding: 8px 14px; vertical-align: top; } .info-content-text tbody td { color: var(--text-color); } /* 首列加粗,便于阅读 */ .info-content-text tbody td:first-child { font-weight: 500; } /* 鼠标悬停行高亮 */ .info-content-text tbody tr:hover { background-color: var(--menu-selected-background-color); transition: background-color 0.2s ease; } @media (max-width: 768px) { .info-content-text h1 { font-size: 20px; } .info-content-text h2 { font-size: 18px; } .info-content-text p { font-size: 14px; margin-top: 3px; margin-bottom: 3px; } .info-content-text li { font-size: 14px; } }