314 lines
8.7 KiB
CSS
314 lines
8.7 KiB
CSS
h1:first-of-type {
|
||
display: none;
|
||
}
|
||
|
||
code, kbd, samp, pre {
|
||
font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,courier new,monospace;
|
||
}
|
||
|
||
.content :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
margin-top: 0.5rem;
|
||
margin-bottom: 0.5rem;
|
||
border-radius: .375rem;
|
||
max-width: 100%;
|
||
min-width: 100%;
|
||
height: clamp(250px, 35vh, 500px);
|
||
object-fit: cover;
|
||
}
|
||
|
||
.content table tbody tr td :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){
|
||
height: auto;
|
||
}
|
||
|
||
video {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
margin-top: 1rem;
|
||
margin-bottom: 1rem;
|
||
border-radius: .375rem;
|
||
max-width: 100%;
|
||
min-width: 100%;
|
||
}
|
||
|
||
br {
|
||
display: block;
|
||
content: "";
|
||
margin-top: 20px;
|
||
}
|
||
|
||
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%; /* 确保它占据全部可用宽度 */
|
||
}
|
||
|
||
/* 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; /* 在链接列表和版权信息之间添加一些垂直间距 */
|
||
}
|
||
|
||
/* 4. 链接项 (li) - 在这个设计中不需要单独样式 */
|
||
.footer-links li {
|
||
/* 因为使用了 Flexbox 和 gap，所以不再需要 margin */
|
||
}
|
||
|
||
/* 5. 版权信息 (footer-copyright) */
|
||
.footer-copyright {
|
||
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; /* 为悬停效果添加平滑过渡 */
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.google-auto-placed {
|
||
text-align: center;
|
||
max-width: 98%;
|
||
margin: 1rem auto;
|
||
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; /* 兼容旧浏览器 */
|
||
}
|
||
|
||
.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; /* 兼容旧浏览器 */
|
||
}
|
||
|
||
.content blockquote p a {
|
||
display: none;
|
||
}
|
||
|
||
/*
|
||
* --- 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;
|
||
}
|
||
|
||
strong:is(html[class~=dark] *) {
|
||
color: #f90;
|
||
padding: 3px;
|
||
}
|
||
|
||
.content :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)):is(html[class~=dark] *) {
|
||
color: #f90;
|
||
}
|