谢宇宁
@@ -0,0 +1,418 @@
|
||||
@import "tailwindcss";
|
||||
@import "@heroui/styles";
|
||||
|
||||
@theme inline {
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
/* HeroUI 深色主题对齐站点主色（toast / select 等组件共用） */
|
||||
.dark,
|
||||
[data-theme="dark"] {
|
||||
--accent: #f12b9e;
|
||||
--accent-foreground: #ffffff;
|
||||
--focus: #f12b9e;
|
||||
--background: #07060d;
|
||||
--surface: #171424;
|
||||
--surface-foreground: #ffffff;
|
||||
--overlay: #1a1628;
|
||||
--overlay-foreground: #ffffff;
|
||||
--muted: #948ca8;
|
||||
--success: #3dd68c;
|
||||
--danger: #ff5c6e;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #07060d;
|
||||
color: #ffffff;
|
||||
font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* 搜索框：不参与 scroll-padding / 滚动锚定，避免输入时页面跳动 */
|
||||
.site-search-input {
|
||||
scroll-margin: 0;
|
||||
overflow-anchor: none;
|
||||
}
|
||||
|
||||
[data-component="site-header"] form[role="search"] {
|
||||
scroll-margin: 0;
|
||||
overflow-anchor: none;
|
||||
}
|
||||
|
||||
/* 深色搜索框：取消浏览器 autocomplete / autofill 灰蓝底 */
|
||||
.site-search-input:-webkit-autofill,
|
||||
.site-search-input:-webkit-autofill:hover,
|
||||
.site-search-input:-webkit-autofill:focus,
|
||||
.site-search-input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
caret-color: #ffffff;
|
||||
border-color: transparent !important;
|
||||
/* 延后 UA 写入背景，视觉上保持透明 */
|
||||
transition: background-color 99999s ease-in-out 0s;
|
||||
box-shadow: 0 0 0px 1000px transparent inset !important;
|
||||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
||||
background-color: transparent !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
/* Toast 视觉贴近站点深色浮层 */
|
||||
.toast-region {
|
||||
z-index: 80;
|
||||
}
|
||||
|
||||
.toast {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: #1a1628;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.toast__title {
|
||||
color: #f2f2fa;
|
||||
}
|
||||
|
||||
.toast__description {
|
||||
color: #a3a3b8;
|
||||
}
|
||||
|
||||
.toast--success .toast__title,
|
||||
.toast--success .toast__indicator {
|
||||
color: #3dd68c;
|
||||
}
|
||||
|
||||
.toast--danger .toast__title,
|
||||
.toast--danger .toast__indicator {
|
||||
color: #ff8fa8;
|
||||
}
|
||||
|
||||
.toast--accent .toast__title,
|
||||
.toast--accent .toast__indicator {
|
||||
color: #f12b9e;
|
||||
}
|
||||
|
||||
/*
|
||||
* PC 缩放区文案：.design-frame / [data-pc-scale] 内
|
||||
* 字号/行高 × --page-unscale，抵消 page-scale zoom，窗口缩小时视觉大小不变。
|
||||
*/
|
||||
:is([data-pc-scale], .design-frame) {
|
||||
--_u: var(--page-unscale, 1);
|
||||
}
|
||||
|
||||
:is([data-pc-scale], .design-frame) .text-\[10px\] {
|
||||
font-size: calc(10px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-xs {
|
||||
font-size: calc(12px * var(--_u)) !important;
|
||||
line-height: calc(16px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-sm {
|
||||
font-size: calc(14px * var(--_u)) !important;
|
||||
line-height: calc(20px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-base {
|
||||
font-size: calc(16px * var(--_u)) !important;
|
||||
line-height: calc(24px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-lg {
|
||||
font-size: calc(18px * var(--_u)) !important;
|
||||
line-height: calc(28px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-xl {
|
||||
font-size: calc(20px * var(--_u)) !important;
|
||||
line-height: calc(28px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-2xl {
|
||||
font-size: calc(24px * var(--_u)) !important;
|
||||
line-height: calc(32px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-\[22px\] {
|
||||
font-size: calc(22px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-\[28px\] {
|
||||
font-size: calc(28px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-\[29px\] {
|
||||
font-size: calc(29px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-\[30px\] {
|
||||
font-size: calc(30px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-\[32px\] {
|
||||
font-size: calc(32px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-\[34px\] {
|
||||
font-size: calc(34px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-\[40px\] {
|
||||
font-size: calc(40px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .text-\[44px\] {
|
||||
font-size: calc(44px * var(--_u)) !important;
|
||||
}
|
||||
|
||||
:is([data-pc-scale], .design-frame) .leading-none {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-4 {
|
||||
line-height: calc(16px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-5 {
|
||||
line-height: calc(20px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-6 {
|
||||
line-height: calc(24px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-7 {
|
||||
line-height: calc(28px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-8 {
|
||||
line-height: calc(32px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-9 {
|
||||
line-height: calc(36px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-10 {
|
||||
line-height: calc(40px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[18px\] {
|
||||
line-height: calc(18px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[21px\] {
|
||||
line-height: calc(21px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[22px\] {
|
||||
line-height: calc(22px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[23px\] {
|
||||
line-height: calc(23px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[26px\] {
|
||||
line-height: calc(26px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[30px\] {
|
||||
line-height: calc(30px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[33px\] {
|
||||
line-height: calc(33px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[34px\] {
|
||||
line-height: calc(34px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[42px\] {
|
||||
line-height: calc(42px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[44px\] {
|
||||
line-height: calc(44px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[47px\] {
|
||||
line-height: calc(47px * var(--_u)) !important;
|
||||
}
|
||||
:is([data-pc-scale], .design-frame) .leading-\[59px\] {
|
||||
line-height: calc(59px * var(--_u)) !important;
|
||||
}
|
||||
|
||||
/* PC 卡片文案：字号 × --page-unscale，抵消 design-frame zoom，缩小窗口时视觉大小不变 */
|
||||
.media-card-title {
|
||||
font-size: calc(24px * var(--page-unscale, 1));
|
||||
line-height: calc(32px * var(--page-unscale, 1));
|
||||
/* 必须 overflow:hidden，否则 truncate 省略号在部分浏览器不生效 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media-card-title-md {
|
||||
font-size: calc(20px * var(--page-unscale, 1));
|
||||
line-height: calc(28px * var(--page-unscale, 1));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media-card-title-lg {
|
||||
font-size: calc(32px * var(--page-unscale, 1));
|
||||
line-height: calc(41px * var(--page-unscale, 1));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media-card-desc {
|
||||
font-size: calc(14px * var(--page-unscale, 1));
|
||||
line-height: calc(20px * var(--page-unscale, 1));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media-card-desc-md {
|
||||
font-size: calc(16px * var(--page-unscale, 1));
|
||||
line-height: calc(22px * var(--page-unscale, 1));
|
||||
}
|
||||
|
||||
.media-card-desc-sm {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.media-card-meta {
|
||||
font-size: calc(14px * var(--page-unscale, 1));
|
||||
line-height: calc(20px * var(--page-unscale, 1));
|
||||
}
|
||||
|
||||
.media-card-episodes {
|
||||
font-size: calc(14px * var(--page-unscale, 1));
|
||||
line-height: calc(20px * var(--page-unscale, 1));
|
||||
}
|
||||
|
||||
/* H5 窄卡：标签 / 热度 12px（H5 无 page-scale） */
|
||||
.media-card-meta-sm {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
/*
|
||||
* 样式 H 封面/榜单文案：× --page-unscale，不参与 design-frame zoom 缩小。
|
||||
* 卡面需 overflow-hidden + 截断，避免反缩放后长文案撑破。
|
||||
*/
|
||||
.style-h-board-title {
|
||||
font-size: calc(32px * var(--page-unscale, 1));
|
||||
line-height: calc(42px * var(--page-unscale, 1));
|
||||
}
|
||||
.style-h-board-sub {
|
||||
font-size: calc(16px * var(--page-unscale, 1));
|
||||
line-height: calc(22px * var(--page-unscale, 1));
|
||||
}
|
||||
.style-h-board-item-title {
|
||||
font-size: calc(24px * var(--page-unscale, 1));
|
||||
line-height: calc(32px * var(--page-unscale, 1));
|
||||
}
|
||||
.style-h-board-item-heat {
|
||||
font-size: calc(14px * var(--page-unscale, 1));
|
||||
line-height: calc(20px * var(--page-unscale, 1));
|
||||
}
|
||||
|
||||
/* --page-scale is written by the page-scale script in app/layout.tsx (viewport width / 1920, capped at 1, and 1 below the lg breakpoint), along with its reciprocal --page-unscale. */
|
||||
.design-frame {
|
||||
width: 1700px;
|
||||
margin-inline: auto;
|
||||
zoom: var(--page-scale, 1);
|
||||
}
|
||||
|
||||
/* Cancels the .design-frame zoom so the element keeps its design size. */
|
||||
.design-unscaled {
|
||||
zoom: var(--page-unscale, 1);
|
||||
}
|
||||
|
||||
.design-gutter {
|
||||
padding-inline: max(24px, 50% - 850px * var(--page-scale, 1));
|
||||
}
|
||||
|
||||
.xg-theme.xgplayer {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* QQ / 夸克 / UC：隐藏原生 media controls，强制走 xgplayer 控件 */
|
||||
html.is-cn-browser .xg-theme.xgplayer video::-webkit-media-controls {
|
||||
display: none !important;
|
||||
}
|
||||
html.is-cn-browser .xg-theme.xgplayer video::-webkit-media-controls-enclosure {
|
||||
display: none !important;
|
||||
}
|
||||
html.is-cn-browser .xg-theme.xgplayer video::-webkit-media-controls-panel {
|
||||
display: none !important;
|
||||
}
|
||||
html.is-cn-browser .xg-theme.xgplayer video::-webkit-media-controls-start-playback-button {
|
||||
display: none !important;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
html.is-cn-browser .xg-theme.xgplayer.xgplayer-is-cssfullscreen {
|
||||
position: fixed !important;
|
||||
inset: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
height: var(--app-vh, 100dvh) !important;
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
z-index: 200 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.xg-theme.xgplayer .xgplayer-loading svg path,
|
||||
.xg-theme.xgplayer .xgplayer-loading svg .path {
|
||||
stroke: #f12b9e;
|
||||
}
|
||||
|
||||
.xg-theme.xgplayer .xgplayer-start,
|
||||
.xg-theme.xgplayer.xgplayer-mobile .xgplayer-start {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background: transparent;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
|
||||
.xg-theme.xgplayer .xgplayer-start:hover {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1.06);
|
||||
filter: drop-shadow(0 0 12px rgb(241 43 158 / 0.35));
|
||||
}
|
||||
|
||||
.xg-theme.xgplayer .xgplayer-start:active {
|
||||
transform: translate(-50%, -50%) scale(0.96);
|
||||
}
|
||||
|
||||
.xg-theme.xgplayer .xgplayer-start xg-start-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 9999px;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xg-theme.xgplayer .xgplayer-start img,
|
||||
.xg-theme.xgplayer .xgplayer-start svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.xg-theme.xgplayer .xgplayer-start,
|
||||
.xg-theme.xgplayer.xgplayer-mobile .xgplayer-start {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.xg-theme.xgplayer .xgplayer-drag,
|
||||
.xg-theme.xgplayer .xgplayer-progress-played,
|
||||
.xg-theme.xgplayer .xgplayer-switch-active {
|
||||
background: #f12b9e;
|
||||
}
|
||||
|
||||
.xg-theme.xgplayer .xgplayer-playbackrate ul li.selected,
|
||||
.xg-theme.xgplayer .xgplayer-definition ul li.selected {
|
||||
color: #f12b9e;
|
||||
}
|
||||
|
||||
@keyframes notice-marquee {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.notice-marquee-track {
|
||||
/* duration 由组件按内容宽度写入，保证线速度恒定 */
|
||||
animation: notice-marquee 12s linear infinite;
|
||||
}
|
||||
|
||||
.ad-icon-marquee-track {
|
||||
/* duration 由组件按内容宽度写入，保证线速度恒定；从右向左无缝滚动 */
|
||||
animation: notice-marquee 20s linear infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.notice-marquee-track,
|
||||
.ad-icon-marquee-track {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user