From 2291d5284f3ed666814ae7174a504743413de985 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E5=A4=952077?= <274166795@qq.com>
Date: Sat, 20 Sep 2025 11:48:32 +0800
Subject: [PATCH] Update custom.css

---
 assets/css/custom.css | 218 +++++++++++++++++-------------------------
 1 file changed, 89 insertions(+), 129 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index df31afd..40fc291 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -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;             /* 深灰色文字 */
-}