mirror of
https://github.com/StepanovPlaton/AboutMe.git
synced 2026-04-04 12:50:49 +04:00
Initial commit
This commit is contained in:
GitHub
700
src/styles/main.css
Normal file
700
src/styles/main.css
Normal file
@@ -0,0 +1,700 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
/* 导入相册样式 */
|
||||
@import './albums.css' layer(base);
|
||||
/* 导入追番页面样式 */
|
||||
@import './anime.css' layer(base);
|
||||
/* 导入动过渡样式 */
|
||||
@import './transition.css' layer(base);
|
||||
|
||||
@plugin '@tailwindcss/typography';
|
||||
|
||||
|
||||
@theme {
|
||||
--breakpoint-sm: 512px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 1280px;
|
||||
--breakpoint-xl: 1920px;
|
||||
|
||||
--transition-duration-300: 300ms;
|
||||
--transition-duration-600: 600ms;
|
||||
}
|
||||
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentcolor);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@utility is-theme-transitioning {
|
||||
/* 主题过渡保护类 - 临时禁用所有过渡动画 */
|
||||
& * {
|
||||
transition: none !important;
|
||||
}
|
||||
& *::before {
|
||||
transition: none !important;
|
||||
}
|
||||
& *::after {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* 波浪效果精确同步处理 */
|
||||
& svg use {
|
||||
/* 禁用过渡但保持动画 */
|
||||
transition: none;
|
||||
/* 强制立即继承页面背景色 */
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* 导航栏主题切换保护 - 完全禁用过渡以确保性能 */
|
||||
& #navbar > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& #navbar[data-transparent-mode] > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& #navbar[data-transparent-mode].scrolled > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& body.wallpaper-transparent #navbar > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& body.wallpaper-transparent #navbar[data-transparent-mode] > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& body.wallpaper-transparent #navbar[data-transparent-mode].scrolled > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& #banner-wrapper ~ * #navbar > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& #banner-wrapper ~ * #navbar[data-transparent-mode] > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& body:has(#banner-wrapper) #navbar > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& body:has(#banner-wrapper) #navbar[data-transparent-mode] > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* 导航栏相关浮动面板的过渡禁用 */
|
||||
& .dropdown-content {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& .float-panel {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& #display-setting {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& #nav-menu-panel {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& #translate-panel {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
& #search-panel {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* 波浪容器的颜色传递 */
|
||||
& #header-waves {
|
||||
/* 设置当前颜色为页面背景色，供SVG继承 */
|
||||
color: var(--page-bg);
|
||||
/* 确保与页面在同一合成层 */
|
||||
isolation: isolate;
|
||||
/* 优化渲染性能 - 移除 strict containment 改用 none */
|
||||
contain: none;
|
||||
/* GPU层合成 */
|
||||
translate: 0 0 0;
|
||||
/* 确保没有背景色 */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
& #header-waves use {
|
||||
/* 保持动画连续性 */
|
||||
will-change: transform;
|
||||
/* GPU优化 */
|
||||
translate: 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@utility scrolled {
|
||||
.is-theme-transitioning &#navbar[data-transparent-mode] > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
.is-theme-transitioning
|
||||
body.wallpaper-transparent
|
||||
&#navbar[data-transparent-mode]
|
||||
> div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@utility wallpaper-transparent {
|
||||
.is-theme-transitioning &body #navbar > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
.is-theme-transitioning &body #navbar[data-transparent-mode] > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
.is-theme-transitioning &body #navbar[data-transparent-mode].scrolled > div {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* 全屏壁纸模式下的半透明效果 */
|
||||
& .card-base {
|
||||
@apply bg-(--card-bg-transparent);
|
||||
}
|
||||
|
||||
& .float-panel {
|
||||
@apply bg-(--card-bg-transparent);
|
||||
}
|
||||
|
||||
& #navbar > div {
|
||||
@apply bg-(--card-bg-transparent) backdrop-blur-xs;
|
||||
}
|
||||
|
||||
& .btn-card {
|
||||
@apply bg-(--card-bg-transparent);
|
||||
}
|
||||
|
||||
& ~ * .music-player .mini-player {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
& ~ * .music-player .expanded-player {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
& ~ * .music-player .playlist-panel {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
& body .music-player .mini-player {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
& body .music-player .expanded-player {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
& body .music-player .playlist-panel {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@utility dropdown-content {
|
||||
/* 导航栏相关浮动面板的过渡禁用 */
|
||||
.is-theme-transitioning & {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
@apply bg-(--float-panel-bg) rounded-(--radius-large) shadow-xl dark:shadow-none border border-black/5 dark:border-white/10 py-2 min-w-48;
|
||||
}
|
||||
|
||||
@utility float-panel {
|
||||
.is-theme-transitioning & {
|
||||
transition: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
.wallpaper-transparent & {
|
||||
@apply bg-(--card-bg-transparent);
|
||||
}
|
||||
@apply top-21 rounded-(--radius-large) overflow-hidden bg-(--float-panel-bg) transition-colors duration-150 shadow-xl dark:shadow-none;
|
||||
}
|
||||
|
||||
@utility card-base {
|
||||
@apply rounded-(--radius-large) overflow-hidden bg-(--card-bg) transition-colors duration-150;
|
||||
|
||||
/* 全屏壁纸模式下的半透明效果 */
|
||||
.wallpaper-transparent & {
|
||||
@apply bg-(--card-bg-transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@utility card-base-transparent {
|
||||
@apply rounded-(--radius-large) overflow-hidden bg-(--card-bg-transparent) backdrop-blur-xs transition-colors duration-150;
|
||||
}
|
||||
|
||||
@utility btn-card {
|
||||
.wallpaper-transparent & {
|
||||
@apply bg-(--card-bg-transparent);
|
||||
}
|
||||
@apply transition-colors duration-150 flex items-center justify-center bg-(--card-bg) hover:bg-(--btn-card-bg-hover)
|
||||
active:bg-(--btn-card-bg-active);
|
||||
&.disabled {
|
||||
@apply pointer-events-none text-black/10 dark:text-white/10;
|
||||
}
|
||||
}
|
||||
|
||||
@utility music-player {
|
||||
.wallpaper-transparent ~ * & .mini-player {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
.wallpaper-transparent ~ * & .expanded-player {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
.wallpaper-transparent ~ * & .playlist-panel {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
body.wallpaper-transparent & .mini-player {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
body.wallpaper-transparent & .expanded-player {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
body.wallpaper-transparent & .playlist-panel {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@utility mini-player {
|
||||
.wallpaper-transparent ~ * .music-player & {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
body.wallpaper-transparent .music-player & {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@utility expanded-player {
|
||||
.wallpaper-transparent ~ * .music-player & {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
body.wallpaper-transparent .music-player & {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@utility playlist-panel {
|
||||
.wallpaper-transparent ~ * .music-player & {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
|
||||
body.wallpaper-transparent .music-player & {
|
||||
background-color: var(--card-bg-transparent) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@utility card-shadow {
|
||||
@apply drop-shadow-sm;
|
||||
}
|
||||
|
||||
@utility expand-animation {
|
||||
@apply relative before:ease-out before:transition active:bg-none hover:before:bg-(--btn-plain-bg-hover) active:before:bg-(--btn-plain-bg-active) z-0
|
||||
before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10;
|
||||
}
|
||||
|
||||
@utility link {
|
||||
@apply transition-colors duration-150 rounded-md p-1 -m-1 expand-animation;
|
||||
}
|
||||
|
||||
@utility link-lg {
|
||||
@apply transition-colors duration-150 rounded-md p-1.5 -m-1.5 expand-animation;
|
||||
}
|
||||
|
||||
@utility float-panel-closed {
|
||||
@apply -translate-y-1 opacity-0 pointer-events-none;
|
||||
}
|
||||
|
||||
@utility search-panel {
|
||||
& mark {
|
||||
@apply bg-transparent text-(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
@utility disabled {
|
||||
&.btn-card {
|
||||
@apply pointer-events-none text-black/10 dark:text-white/10;
|
||||
}
|
||||
}
|
||||
|
||||
@utility btn-plain {
|
||||
@apply transition-colors duration-150 relative flex items-center justify-center bg-none
|
||||
text-black/75 hover:text-(--primary) dark:text-white/75 dark:hover:text-(--primary);
|
||||
&:not(.scale-animation) {
|
||||
@apply hover:bg-(--btn-plain-bg-hover) active:bg-(--btn-plain-bg-active);
|
||||
}
|
||||
&.scale-animation {
|
||||
@apply expand-animation;
|
||||
}
|
||||
&:hover .iconify {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
&:hover svg {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
&:hover span {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
}
|
||||
|
||||
@utility iconify {
|
||||
.btn-plain:hover & {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
.current-theme-btn & {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
}
|
||||
|
||||
@utility btn-regular {
|
||||
@apply transition-colors duration-150 flex items-center justify-center bg-(--btn-regular-bg) hover:bg-(--btn-regular-bg-hover) active:bg-(--btn-regular-bg-active)
|
||||
text-(--btn-content) dark:text-white/75;
|
||||
}
|
||||
|
||||
@utility current-theme-btn {
|
||||
@apply text-(--primary)! bg-(--btn-plain-bg-hover)! hover:bg-(--btn-plain-bg-hover)! active:bg-(--btn-plain-bg-hover)!;
|
||||
& .iconify {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
& svg {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
& span {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
& .text-sm {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
& .text-lg {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
}
|
||||
|
||||
@utility text-sm {
|
||||
.current-theme-btn & {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
}
|
||||
|
||||
@utility text-lg {
|
||||
.current-theme-btn & {
|
||||
@apply text-(--primary)!;
|
||||
}
|
||||
}
|
||||
|
||||
@utility link-underline {
|
||||
@apply transition-colors duration-150 underline decoration-2 decoration-dashed decoration-(--link-underline)
|
||||
hover:decoration-(--link-hover) active:decoration-(--link-active) underline-offset-4;
|
||||
}
|
||||
|
||||
@utility hide-scrollbar {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@utility text-90 {
|
||||
@apply text-black/90 dark:text-white/90;
|
||||
}
|
||||
|
||||
@utility text-75 {
|
||||
@apply text-black/75 dark:text-white/75;
|
||||
}
|
||||
|
||||
@utility text-50 {
|
||||
@apply text-black/50 dark:text-white/50;
|
||||
}
|
||||
|
||||
@utility text-30 {
|
||||
@apply text-black/30 dark:text-white/30;
|
||||
}
|
||||
|
||||
@utility text-25 {
|
||||
@apply text-black/25 dark:text-white/25;
|
||||
}
|
||||
|
||||
@utility dropdown-container {
|
||||
/* 下拉菜单样式 */
|
||||
@apply relative;
|
||||
|
||||
&:hover .dropdown-menu {
|
||||
@apply opacity-100 visible pointer-events-auto translate-y-0;
|
||||
}
|
||||
|
||||
&:focus-within .dropdown-menu {
|
||||
@apply opacity-100 visible pointer-events-auto translate-y-0;
|
||||
}
|
||||
|
||||
&:hover .dropdown-arrow {
|
||||
@apply rotate-180;
|
||||
}
|
||||
|
||||
&:focus-within .dropdown-arrow {
|
||||
@apply rotate-180;
|
||||
}
|
||||
|
||||
/* 无障碍支持 */
|
||||
&:focus-within .dropdown-menu {
|
||||
@apply opacity-100 visible pointer-events-auto translate-y-0;
|
||||
}
|
||||
}
|
||||
|
||||
@utility dropdown-menu {
|
||||
@apply absolute top-full left-0 pt-2 opacity-0 invisible pointer-events-none transition-all duration-200 ease-out translate-y-[-8px] z-50;
|
||||
|
||||
.dropdown-container:hover & {
|
||||
@apply opacity-100 visible pointer-events-auto translate-y-0;
|
||||
}
|
||||
|
||||
.dropdown-container:focus-within & {
|
||||
@apply opacity-100 visible pointer-events-auto translate-y-0;
|
||||
}
|
||||
|
||||
/* 无障碍支持 */
|
||||
.dropdown-container:focus-within & {
|
||||
@apply opacity-100 visible pointer-events-auto translate-y-0;
|
||||
}
|
||||
}
|
||||
|
||||
@utility dropdown-arrow {
|
||||
.dropdown-container:hover & {
|
||||
@apply rotate-180;
|
||||
}
|
||||
|
||||
.dropdown-container:focus-within & {
|
||||
@apply rotate-180;
|
||||
}
|
||||
}
|
||||
|
||||
@utility dropdown-item {
|
||||
@apply flex items-center justify-between px-4 py-2.5 text-black/75 dark:text-white/75 hover:text-(--primary) hover:bg-(--btn-plain-bg-hover) transition-colors duration-150 font-medium;
|
||||
|
||||
&:first-child {
|
||||
@apply rounded-t-[calc(var(--radius-large)-0.5rem)];
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@apply rounded-b-[calc(var(--radius-large)-0.5rem)];
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@apply outline-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@utility mobile-submenu {
|
||||
/* 移动端菜单样式 */
|
||||
@apply max-h-0 overflow-hidden transition-all duration-300 ease-in-out;
|
||||
|
||||
.mobile-dropdown[data-expanded='true'] & {
|
||||
@apply max-h-96;
|
||||
}
|
||||
}
|
||||
|
||||
@utility mobile-dropdown {
|
||||
&[data-expanded='true'] .mobile-submenu {
|
||||
@apply max-h-96;
|
||||
}
|
||||
|
||||
&[data-expanded='true'] .mobile-dropdown-arrow {
|
||||
@apply rotate-180;
|
||||
}
|
||||
|
||||
& button:focus {
|
||||
@apply outline-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@utility mobile-dropdown-arrow {
|
||||
.mobile-dropdown[data-expanded='true'] & {
|
||||
@apply rotate-180;
|
||||
}
|
||||
}
|
||||
|
||||
@utility meta-icon {
|
||||
@apply w-8 h-8 transition-colors duration-150 rounded-md flex items-center justify-center bg-(--btn-regular-bg)
|
||||
text-(--btn-content) mr-2;
|
||||
}
|
||||
|
||||
@utility with-divider {
|
||||
@apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-(--meta-divider) before:text-sm
|
||||
before:font-medium first-of-type:before:hidden before:transition-colors before:duration-150;
|
||||
}
|
||||
|
||||
@utility btn-regular-dark {
|
||||
@apply flex items-center justify-center
|
||||
bg-[oklch(0.45_0.01_var(--hue))] hover:bg-[oklch(0.50_0.01_var(--hue))] active:bg-[oklch(0.55_0.01_var(--hue))]
|
||||
dark:bg-[oklch(0.30_0.02_var(--hue))] dark:hover:bg-[oklch(0.35_0.03_var(--hue))] dark:active:bg-[oklch(0.40_0.03_var(--hue))];
|
||||
&.success {
|
||||
@apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))];
|
||||
}
|
||||
}
|
||||
|
||||
@utility success {
|
||||
&.btn-regular-dark {
|
||||
@apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))];
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* 确保平滑滚动并隐藏原生滚动条 */
|
||||
html,
|
||||
body {
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar,
|
||||
body::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
/* 页面顶部渐变高光效果 */
|
||||
.top-gradient-highlight {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 180px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0.5) 0%,
|
||||
rgba(255, 255, 255, 0.3) 30%,
|
||||
rgba(255, 255, 255, 0.15) 60%,
|
||||
rgba(255, 255, 255, 0.05) 80%,
|
||||
transparent 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 20;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 暗色主题下的渐变高光效果 */
|
||||
:root.dark .top-gradient-highlight {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.5) 0%,
|
||||
rgba(0, 0, 0, 0.3) 30%,
|
||||
rgba(0, 0, 0, 0.15) 60%,
|
||||
rgba(0, 0, 0, 0.05) 80%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
|
||||
@apply transition-colors duration-150;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-md img, #post-cover img {
|
||||
@apply cursor-zoom-in
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--selection-bg)
|
||||
}
|
||||
|
||||
.dash-line {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dash-line::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
left: calc(50% - 1px);
|
||||
border-left: 2px dashed var(--line-color);
|
||||
pointer-events: none;
|
||||
transition: all 0.3s;
|
||||
translate: 0 -50%;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
height: var(--collapsedHeight);
|
||||
}
|
||||
|
||||
/* 剧透效果 */
|
||||
.custom-md spoiler {
|
||||
--_spoiler-mask: var(--primary);
|
||||
@apply hover:bg-transparent px-1 py-0.5 overflow-hidden rounded-md transition-all duration-150;
|
||||
background-color: var(--_spoiler-mask);
|
||||
|
||||
&:not(:hover) {
|
||||
color: var(--_spoiler-mask);
|
||||
* {
|
||||
color: var(--_spoiler-mask);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 浅色模式：使用更浅的主题色且完全不透明 */
|
||||
:root:not(.dark) .custom-md spoiler {
|
||||
--_spoiler-mask: color-mix(in oklch, var(--primary) 55%, white 45%);
|
||||
}
|
||||
Reference in New Issue
Block a user