init

assets/css/custom.css

@@ -0,0 +1,184 @@
+/**
+ * Hextra 主题 - Pornhub 黑暗模式风格
+ * 将此文件放置在 /assets/css/custom.css
+ * 版本: 3 (包含代码美化)
+ */
+
+ .hextra-code-block pre {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word; /* 兼容旧浏览器 */
+}
+
+.content :where(code):not(:where(.hextra-code-block code,[class~=not-prose],[class~=not-prose] *)) {
+  border-radius: 4px;
+  font-style: normal;
+  padding: 0.2em 0.4em;
+  font-size: 0.875em;
+  /* --- 行内代码自动换行 (新增) --- */
+  overflow-wrap: break-word;
+  word-break: break-word; /* 兼容旧浏览器 */
+}
+
+/* 
+ * --- 1. 定义核心色调 ---
+ * Pornhub 标志性橙色: #ff9900
+ * HSL 转换: hue(36deg), saturation(100%), lightness(50%)
+ */
+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;
+}
+
+.nav-container-blur: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;
+  transition: color 0.2s ease-in-out;
+}
+
+.nav-container a:hover:is(html[class~="dark"] *),
+.nav-container a:hover svg:is(html[class~="dark"] *),
+.nav-container button:hover svg:is(html[class~="dark"] *) {
+  color: #ff9900 !important;
+}
+
+.hamburger-menu:is(html[class~="dark"] *) {
+  color: #ffffff;
+}
+.hamburger-menu:hover: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; /* 代码块背景更深，以突出代码 */
+  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; /* 引用块的左边框也设为橙色 */
+}
+.content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)):hover:is(html[class~="dark"] *) {
+  color: #fff;
+  text-decoration: underline;
+}
+.content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
+  border-color: #444;
+}
+
+/* 
+ * --- 6. 组件样式 ---
+ */
+.hextra-card:is(html[class~="dark"] *) {
+  background-color: #2a2a2a;
+  border: 1px solid #444;
+  color: #f0f0f0;
+}
+.hextra-card:hover:is(html[class~="dark"] *) {
+  border-color: #ff9900;
+  box-shadow: 0 0 15px rgba(255, 153, 0, 0.2);
+}
+
+.hextra-badge:is(html[class~="dark"] *) {
+  background-color: #ff9900;
+  color: #000;
+  font-weight: bold;
+}
+
+.sidebar-active-item:is(html[class~="dark"] *) {
+  color: #ff9900 !important;
+  font-weight: bold;
+  background-color: rgba(255, 153, 0, 0.1);
+  border-radius: 4px;
+}
+.dark\:hover\:hx-bg-primary-100\/5:hover:is(html[class~=dark] *) {
+    background-color: rgba(255, 153, 0, 0.1);
+}
+.sidebar-container a:hover:is(html[class~="dark"] *) {
+  color: #ff9900;
+}
+.sidebar-container a:is(html[class~="dark"] *) {
+  color: #fff;
+}
+
+.search-wrapper li .active:is(html[class~="dark"] *) {
+    background-color: rgba(255, 153, 0, 0.15);
+}
+.search-wrapper .match:is(html[class~="dark"] *) {
+    color: #ff9900;
+}
+.search-input:is(html[class~="dark"] *) {
+  border-color: #444;
+}
+.search-input:focus:is(html[class~="dark"] *) {
+  border-color: #ff9900;
+}
+
+.hextra-tabs-toggle[data-state=selected]:is(html[class~="dark"] *) {
+  border-bottom: 2px solid #ff9900;
+  color: #ff9900;
+}