fix: 样式隔离

This commit is contained in:
LooseLi
2025-05-22 18:36:06 +08:00
parent 8e563874b5
commit 937d10cf7c

View File

@@ -18,10 +18,10 @@ const Style = () => {
}
// 底色
body {
#theme-hexo body {
background-color: #f5f5f5;
}
.dark body {
.dark #theme-hexo body {
background-color: black;
}
@@ -44,28 +44,28 @@ const Style = () => {
}
/* 文章列表中标题行悬浮时的文字颜色 */
h2:hover .menu-link {
#theme-hexo h2:hover .menu-link {
color: var(--theme-color) !important;
}
.dark h2:hover .menu-link {
.dark #theme-hexo h2:hover .menu-link {
color: var(--theme-color) !important;
}
/* 下拉菜单悬浮背景色 */
li[class*='hover:bg-indigo-500']:hover {
#theme-hexo li[class*='hover:bg-indigo-500']:hover {
background-color: var(--theme-color) !important;
}
/* tag标签悬浮背景色 */
a[class*='hover:bg-indigo-400']:hover {
#theme-hexo a[class*='hover:bg-indigo-400']:hover {
background-color: var(--theme-color) !important;
}
/* 社交按钮悬浮颜色 */
i[class*='hover:text-indigo-600']:hover {
#theme-hexo i[class*='hover:text-indigo-600']:hover {
color: var(--theme-color) !important;
}
.dark i[class*='dark:hover:text-indigo-400']:hover {
.dark #theme-hexo i[class*='dark:hover:text-indigo-400']:hover {
color: var(--theme-color) !important;
}
@@ -78,112 +78,112 @@ const Style = () => {
}
/* 最新发布文章悬浮颜色 */
div[class*='hover:text-indigo-600']:hover,
div[class*='hover:text-indigo-400']:hover {
#theme-hexo div[class*='hover:text-indigo-600']:hover,
#theme-hexo div[class*='hover:text-indigo-400']:hover {
color: var(--theme-color) !important;
}
/* 分页组件颜色 */
.text-indigo-400 {
#theme-hexo .text-indigo-400 {
color: var(--theme-color) !important;
}
.border-indigo-400 {
#theme-hexo .border-indigo-400 {
border-color: var(--theme-color) !important;
}
a[class*='hover:bg-indigo-400']:hover {
#theme-hexo a[class*='hover:bg-indigo-400']:hover {
background-color: var(--theme-color) !important;
color: white !important;
}
/* 移动设备下,搜索组件中选中分类的高亮背景色 */
div[class*='hover:bg-indigo-400']:hover {
#theme-hexo div[class*='hover:bg-indigo-400']:hover {
background-color: var(--theme-color) !important;
}
.hover\:bg-indigo-400:hover {
#theme-hexo .hover\:bg-indigo-400:hover {
background-color: var(--theme-color) !important;
}
.bg-indigo-400 {
#theme-hexo .bg-indigo-400 {
background-color: var(--theme-color) !important;
}
a[class*='hover:bg-indigo-600']:hover {
#theme-hexo a[class*='hover:bg-indigo-600']:hover {
background-color: var(--theme-color) !important;
color: white !important;
}
/* 右下角悬浮按钮背景色 */
.bg-indigo-500 {
#theme-hexo .bg-indigo-500 {
background-color: var(--theme-color) !important;
}
.dark .dark\:bg-indigo-500 {
.dark #theme-hexo .dark\:bg-indigo-500 {
background-color: var(--theme-color) !important;
}
/* 移动设备菜单栏背景色 */
.hover\:bg-indigo-500:hover {
#theme-hexo .hover\:bg-indigo-500:hover {
background-color: var(--theme-color) !important;
}
.dark .dark\:hover\:bg-indigo-500:hover {
.dark #theme-hexo .dark\:hover\:bg-indigo-500:hover {
background-color: var(--theme-color) !important;
}
/* 文章浏览进度条颜色 */
.bg-indigo-600 {
#theme-hexo .bg-indigo-600 {
background-color: var(--theme-color) !important;
}
/* 当前浏览位置标题高亮颜色 */
.border-indigo-800 {
#theme-hexo .border-indigo-800 {
border-color: var(--theme-color) !important;
}
.text-indigo-800 {
#theme-hexo .text-indigo-800 {
color: var(--theme-color) !important;
}
.dark .dark\:text-indigo-400 {
.dark #theme-hexo .dark\:text-indigo-400 {
color: var(--theme-color) !important;
}
.dark .dark\:border-indigo-400 {
.dark #theme-hexo .dark\:border-indigo-400 {
border-color: var(--theme-color) !important;
}
.dark .dark\:border-white {
.dark #theme-hexo .dark\:border-white {
border-color: var(--theme-color) !important;
}
/* 目录项悬浮时的字体颜色 */
a[class*='hover:text-indigo-800']:hover {
#theme-hexo a[class*='hover:text-indigo-800']:hover {
color: var(--theme-color) !important;
}
/* 深色模式下目录项的默认文字颜色和边框线颜色 */
.dark .catalog-item {
.dark #theme-hexo .catalog-item {
color: white !important;
border-color: white !important;
}
.dark .catalog-item:hover {
.dark #theme-hexo .catalog-item:hover {
color: var(--theme-color) !important;
}
/* 深色模式下当前高亮标题的边框线颜色 */
.dark .catalog-item.font-bold {
.dark #theme-hexo .catalog-item.font-bold {
border-color: var(--theme-color) !important;
}
/* 文章底部版权声明组件左侧边框线颜色 */
.border-indigo-500 {
#theme-hexo .border-indigo-500 {
border-color: var(--theme-color) !important;
}
/* 归档页面文章列表项悬浮时左侧边框线颜色 */
li[class*='hover:border-indigo-500']:hover {
#theme-hexo li[class*='hover:border-indigo-500']:hover {
border-color: var(--theme-color) !important;
}
/* 自定义右键菜单悬浮高亮颜色 */
.hover\:bg-blue-600:hover {
#theme-hexo .hover\:bg-blue-600:hover {
background-color: var(--theme-color) !important;
}
.dark li[class*='dark:hover:border-indigo-300']:hover {
.dark #theme-hexo li[class*='dark:hover:border-indigo-300']:hover {
border-color: var(--theme-color) !important;
}
/* 深色模式下,归档页面文章列表项默认状态左侧边框线颜色 */
.dark li[class*='dark:border-indigo-400'] {
.dark #theme-hexo li[class*='dark:border-indigo-400'] {
border-color: var(--theme-color) !important;
}
/* 深色模式下,归档页面文章标题悬浮时的文字颜色 */
.dark a[class*='dark:hover:text-indigo-300']:hover {
.dark #theme-hexo a[class*='dark:hover:text-indigo-300']:hover {
color: var(--theme-color) !important;
}