shen/Hextra-AI-Insight-Daily
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update custom.css

Browse Source
This commit is contained in:
何夕2077
2025-09-20 11:48:32 +08:00
committed by GitHub
parent 9502c47059
commit 2291d5284f
1 changed files with 89 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
assets/css/custom.css
View File

@@ -1,3 +1,7 @@
/* =================================================================== */
/* Original User Styles */
/* =================================================================== */
h1:first-of-type {
display: none;
}
@@ -42,72 +46,52 @@ footer .hx-max-w-screen-xl{
max-width: 100%;
}
/* 1. 页脚主包装器 (footer-wrapper) */
.footer-wrapper {
/* 使用 Flexbox 来轻松实现居中 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中（如果需要固定高度的话）*/
padding: 1.5rem 0.5rem; /* 上下和左右的内边距，提供呼吸空间 */
width: 100%; /* 确保它占据全部可用宽度 */
justify-content: center;
align-items: center;
padding: 1.5rem 0.5rem;
width: 100%;
flex-direction: column;
}
/* 2. 内容容器 (footer-container) */
.footer-container {
/* text-align 用于居中容器内的文本和内联块元素 */
text-align: center;
}
/* 3. 链接列表 (footer-links) */
.footer-links {
list-style: none; /* 移除列表默认的圆点 */
padding: 0; /* 移除列表默认的内边距 */
margin: 0; /* 移除列表默认的外边距 */
display: flex; /* 使用 Flexbox 来排列链接 */
flex-wrap: wrap; /* 允许链接在小屏幕上换行 */
justify-content: center; /* 确保所有链接作为一个整体居中 */
gap: 1.5rem; /* 在链接之间创建一致的间距 */
margin-bottom: 1.5rem; /* 在链接列表和版权信息之间添加一些垂直间距 */
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
/* 4. 链接项 (li) - 在这个设计中不需要单独样式 */
.footer-links li {
/* 因为使用了 Flexbox 和 gap，所以不再需要 margin */
}
/* 5. 版权信息 (footer-copyright) */
.footer-copyright {
font-size: 0.9em; /* 让版权文字比链接稍微小一点 */
opacity: 0.8; /* 让版权信息稍微不那么突出 */
font-size: 0.9em;
opacity: 0.8;
}
/* 6. 所有链接的通用样式 (a) */
.footer-links a,
.footer-copyright a {
color: inherit; /* 继承父元素 .footer-wrapper 的颜色 */
text-decoration: none; /* 去掉链接的下划线 */
transition: color 0.3s ease, text-decoration 0.3s ease; /* 为悬停效果添加平滑过渡 */
color: inherit;
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
.footer-copyright a:is(html[class~=dark] *){
color:#a1a8b4;
}
/* 7. 链接的悬停效果 (hover) */
.footer-links a:hover,
.footer-copyright a:hover {
color: #d8d8d8; /* 鼠标悬停时变为纯白色，更加醒目 */
text-decoration: underline; /* 悬停时添加下划线，明确表示这是一个可点击的链接 */
}
.ad-container {
text-align: center;
max-width: 98%;
margin: 1rem auto;
overflow: hidden;
color: #d8d8d8;
text-decoration: underline;
}
.ad-container,
.google-auto-placed {
text-align: center;
max-width: 98%;
@@ -115,16 +99,10 @@ footer .hx-max-w-screen-xl{
overflow: hidden;
}
/**
* Hextra 主题 - Pornhub 黑暗模式风格
* 将此文件放置在 /assets/css/custom.css
* 版本: 3 (包含代码美化)
*/
.hextra-code-block pre {
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: break-word; /* 兼容旧浏览器 */
word-break: break-word;
}
.content :where(code):not(:where(.hextra-code-block code,[class~=not-prose],[class~=not-prose] *)) {
@@ -132,33 +110,75 @@ footer .hx-max-w-screen-xl{
font-style: normal;
padding: 0.2em 0.4em;
font-size: 0.875em;
/* --- 行内代码自动换行 (新增) --- */
overflow-wrap: break-word;
word-break: break-word; /* 兼容旧浏览器 */
word-break: break-word;
}
.content blockquote p a {
display: none;
}
/* =================================================================== */
/* [FIX v2] Light Theme Contrast Fix */
/* =================================================================== */
/*
* 通过重写 Hextra 主题的根CSS变量来从根本上修复浅色模式的对比度问题。
* 这比单独覆盖每个元素的样式更有效、更全面。
* :not(.dark) 选择器确保这些规则只在浅色模式下生效。
*/
html:not(.dark) {
/*
* -- 文本颜色修复 --
* Hextra 默认的灰色文本（如 --hx-text-gray-600 和 500）在白色背景上对比度不足。
* 我们将它们重新定义为更深的颜色。
*/
--hx-text-gray-500: #4a5568; /* 加深的中灰色 (原: #6b7280) */
--hx-text-gray-600: #2d3748; /* 加深的深灰色 (原: #4b5563) */
--hx-text-gray-700: #1a202c; /* 更深的近黑色 (原: #374151) */
--hx-text-gray-900: #111827; /* 确保标题等为最深的颜色 */
/*
* -- 边框颜色修复 --
* 默认的浅灰色边框在白色背景上几乎看不见。
* 稍微加深它们可以提高组件的可见性。
*/
--hx-border-gray-200: #d1d5db; /* 加深的浅边框 (原: #e5e7eb) */
--hx-border-gray-300: #b5bac0; /* 加深的中边框 (原: #d1d5db) */
/*
* -- 主题链接/焦点色修复 --
* 调整主色调的亮度和饱和度，使其在白色背景上更清晰。
* 这里我们使用一个更深的蓝色调。
*/
--primary-hue: 212deg; /* 深蓝色调 */
--primary-saturation: 82%;
--primary-lightness: 45%; /* 降低亮度以增加对比度 */
}
/*
* --- 1. 定义核心色调 ---
* Pornhub 标志性橙色: #ff9900
* HSL 转换: hue(36deg), saturation(100%), lightness(50%)
*/
* -- 行内代码块的再次确认修复 --
* 确保 `<code>` 标签即使不使用CSS变量也能有高对比度。
*/
html:not(.dark) .content :where(code):not(:where(.hextra-code-block code,[class~=not-prose],[class~=not-prose] *)) {
background-color: #eef0f2; /* 一个清晰可见的浅灰色背景 */
color: #1a202c; /* 深色文本，确保可读性 */
}
/* =================================================================== */
/* Dark Theme "Pornhub" Style */
/* =================================================================== */
html.dark {
--primary-hue: 36deg;
--primary-saturation: 100%;
--primary-lightness: 50%;
}
/*
* --- 2. 基础布局颜色 ---
*/
.hextra-footer:is(html[class~=dark] *),
.nav-container:is(html[class~=dark] *),
body:is(html[class~=dark] *) {
/* 深炭灰色背景 */
background-color: #1c1c1c;
}
@@ -166,9 +186,6 @@ body:is(html[class~=dark] *) {
background-color: rgba(28, 28, 28, 0.8) !important;
}
/*
* --- 3. 导航栏样式 ---
*/
.nav-container a:is(html[class~=dark] *),
.nav-container svg:is(html[class~=dark] *) {
color: #ffffff;
@@ -188,60 +205,44 @@ body:is(html[class~=dark] *) {
color: #ff9900 !important;
}
/*
* --- 4. 代码样式美化 (新增和强化) ---
*/
/* 4.1 美化行内代码: `code` */
.content :where(code):not(:where(.hextra-code-block code,[class~=not-prose],[class~=not-prose] *)):is(html[class~=dark] *) {
background-color: #2a2a2a; /* 深色背景，比主背景稍亮 */
color: #ff9900; /* 标志性橙色文本 */
border: 1px solid #444; /* 深灰色边框 */
}
/* 4.2 美化代码块: <pre> 和 <code> */
.hextra-code-block pre:is(html[class~=dark] *),
.hextra-code-block .filename:is(html[class~=dark] *) {
background-color: #111; /* 代码块背景更深，以突出代码 */
background-color: #2a2a2a;
color: #ff9900;
border: 1px solid #444;
}
/* 确保代码块内的所有文本（包括语法高亮）都移除非必需的斜体 */
.hextra-code-block pre code span:is(html[class~=dark] *),
.hextra-code-block pre code:is(html[class~=dark] *) {
font-style: normal !important; /* 强制移除斜体 */
color: #f0f0f0; /* 默认代码颜色为浅灰色/白色 */
.hextra-code-block pre:is(html[class~=dark] *),
.hextra-code-block .filename:is(html[class~=dark] *) {
background-color: #111;
border: 1px solid #444;
}
.hextra-code-block pre code span:is(html[class~=dark] *),
.hextra-code-block pre code:is(html[class~=dark] *) {
font-style: normal !important;
color: #f0f0f0;
}
/* 专门为Chroma语法高亮的注释(c1)、关键字(kc)等恢复其颜色，因为上面的规则会覆盖它们 */
.dark .highlight .chroma .c, .dark .highlight .chroma .c1, .dark .highlight .chroma .cs { color: #8b949e !important; }
.dark .highlight .chroma .k { color: #ff7b72 !important; }
.dark .highlight .chroma .kc { color: #79c0ff !important; }
.dark .highlight .chroma .s, .dark .highlight .chroma .s1, .dark .highlight .chroma .s2 { color: #a5d6ff !important; }
.dark .highlight .chroma .nc { color: #f0883e !important; font-weight: 700; }
.dark .highlight .chroma .nf { color: #d2a8ff !important; font-weight: 700; }
/* ... 如果有其他语法高亮颜色被覆盖，可以在这里恢复 ... */
/* 高亮行的背景色 */
.chroma .hl:is(html[class~=dark] *) {
background-color: rgba(255, 153, 0, 0.15) !important;
}
/* 代码复制按钮 */
.hextra-code-copy-btn:hover:is(html[class~=dark] *) {
background-color: #2a2a2a;
color: #ff9900;
}
/*
* --- 5. 内容区域样式 ---
*/
.content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)):is(html[class~=dark] *),
.content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)):is(html[class~=dark] *) {
color: #ff9900;
border-left-color: #ff9900; /* 引用块的左边框也设为橙色 */
border-left-color: #ff9900;
}
.content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)):hover:is(html[class~=dark] *) {
color: #fff;
@@ -251,9 +252,6 @@ body:is(html[class~=dark] *) {
border-color: #444;
}
/*
* --- 6. 组件样式 ---
*/
.hextra-card:is(html[class~=dark] *) {
background-color: #2a2a2a;
border: 1px solid #444;
@@ -312,41 +310,3 @@ strong:is(html[class~=dark] *) {
.content :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)):is(html[class~=dark] *) {
color: #f90;
}
/* --- [FIX] Light Theme Accessibility & Contrast --- */
/* 以下规则用于修复浅色主题下的颜色对比度问题，确保可读性。*/
/* 1. 修正正文文本颜色 */
/* 将默认的灰色文本加深，确保在白色背景上有足够的对比度。*/
html:not(.dark) body {
color: #212529; /* 一个非常深的灰色，接近于黑色，对比度 > 15:1 */
}
/* 2. 修正链接颜色 */
/* 使用更深、更鲜明的蓝色作为链接颜色。*/
html:not(.dark) .content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
color: #0056b3;
}
/* 3. 修正组件颜色（例如按钮和标签） */
/* 这是导致对比度错误的主要原因之一。*/
/* 修正 Hextra 卡片组件的边框和文字颜色 */
html:not(.dark) .hextra-card {
border: 1px solid #ddd;
color: #212529;
}
/* 修正 Hextra 标签(badge)的颜色 */
/* 确保在浅色背景上的深色文字 */
html:not(.dark) .hextra-badge {
background-color: #e9ecef; /* 浅灰色背景 */
color: #212529; /* 深色文字 */
}
/* 4. 修正代码块颜色 */
/* 确保行内代码块有足够对比度 */
html:not(.dark) .content :where(code):not(:where(.hextra-code-block code,[class~=not-prose],[class~=not-prose] *)) {
background-color: #f1f1f1; /* 浅灰色背景 */
color: #2a2a2a; /* 深灰色文字 */
}