mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-08-09 07:33:24 +08:00
整合主题管理器，优化主题切换逻辑
This commit is contained in:
jxxghp
@@ -1,9 +1,9 @@
|
||||
// Write your overrides
|
||||
// 公共样式 - 所有主题都需要
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
// 基础样式
|
||||
html.v-overlay-scroll-blocked {
|
||||
position: fixed;
|
||||
position: relative;
|
||||
@@ -30,6 +30,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条样式
|
||||
#nprogress .bar {
|
||||
background: rgb(var(--v-theme-primary)) !important;
|
||||
inset-block-start: env(safe-area-inset-top) !important;
|
||||
@@ -38,15 +39,17 @@ body {
|
||||
#nprogress .peg {
|
||||
box-shadow: 0 0 10px rgb(var(--v-theme-primary)), 0 0 5px rgb(var(--v-theme-primary)) !important;
|
||||
inline-size: 5px;
|
||||
transform: rotate(0deg) translate(0, 0);
|
||||
transform: rotate(0deg) translate(0, 0);
|
||||
}
|
||||
|
||||
// 卡片高度匹配
|
||||
.match-height.v-row {
|
||||
.v-card {
|
||||
block-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Toast通知样式
|
||||
.Vue-Toastification__container {
|
||||
z-index: 2500;
|
||||
margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
|
||||
@@ -64,11 +67,12 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框样式
|
||||
.v-dialog > .v-overlay__content > .v-card > .v-card-item {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* router view transition fade-slide */
|
||||
// 路由过渡动画
|
||||
.fade-slide-leave-active,
|
||||
.fade-slide-enter-active {
|
||||
transition: all 0.6s;
|
||||
@@ -84,99 +88,13 @@ body {
|
||||
transform: translateY(45px);
|
||||
}
|
||||
|
||||
// 网格布局样式
|
||||
.grid-info-card {
|
||||
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
|
||||
padding-block-end: 1rem;
|
||||
}
|
||||
|
||||
.text-moviepilot {
|
||||
background-clip: text;
|
||||
background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
|
||||
color: transparent;
|
||||
|
||||
--tw-gradient-from: #818cf8;
|
||||
--tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
|
||||
--tw-gradient-to: #c084fc;
|
||||
}
|
||||
|
||||
.slider-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.slider-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
@media (width >= 640px){
|
||||
.slider-title {
|
||||
overflow: hidden;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.25rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// 美化滚动条
|
||||
::-webkit-scrollbar {
|
||||
block-size: 4px;
|
||||
inline-size: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 2px;
|
||||
background: rgb(var(--v-theme-perfect-scrollbar-thumb));
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,20%);
|
||||
|
||||
@media(hover){
|
||||
&:hover{
|
||||
background: #a1a1a1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 当鼠标悬停在可滚动元素上时显示滚动条
|
||||
*:hover::-webkit-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// 当元素正在滚动时显示滚动条
|
||||
*:active::-webkit-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.v-alert--variant-elevated, .v-alert--variant-flat {
|
||||
background: rgb(var(--v-table-header-background));
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
.backdrop-blur {
|
||||
--tw-backdrop-blur: blur(8px)!important;
|
||||
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;
|
||||
}
|
||||
|
||||
.v-toolbar{
|
||||
background: rgb(var(--v-table-header-background));
|
||||
}
|
||||
|
||||
.v-divider {
|
||||
border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));
|
||||
opacity:0.75;
|
||||
}
|
||||
|
||||
.apexcharts-title-text {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
||||
}
|
||||
|
||||
.grid-site-card {
|
||||
.grid-site-card {
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
padding-block-end: 1rem;
|
||||
}
|
||||
@@ -233,6 +151,98 @@ body {
|
||||
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
||||
}
|
||||
|
||||
// 文本样式
|
||||
.text-moviepilot {
|
||||
background-clip: text;
|
||||
background-image: linear-gradient(to bottom right,var(--tw-gradient-stops));
|
||||
color: transparent;
|
||||
|
||||
--tw-gradient-from: #818cf8;
|
||||
--tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
|
||||
--tw-gradient-to: #c084fc;
|
||||
}
|
||||
|
||||
.text-shadow {
|
||||
text-shadow: 1px 1px #777;
|
||||
}
|
||||
|
||||
// 滑块标题样式
|
||||
.slider-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.slider-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
@media (width >= 640px){
|
||||
.slider-title {
|
||||
overflow: hidden;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.25rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条样式
|
||||
::-webkit-scrollbar {
|
||||
block-size: 4px;
|
||||
inline-size: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 2px;
|
||||
background: rgb(var(--v-theme-perfect-scrollbar-thumb));
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,20%);
|
||||
|
||||
@media(hover){
|
||||
&:hover{
|
||||
background: #a1a1a1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
*:hover::-webkit-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
*:active::-webkit-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// 组件样式
|
||||
.v-alert--variant-elevated, .v-alert--variant-flat {
|
||||
background: rgb(var(--v-table-header-background));
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
.backdrop-blur {
|
||||
--tw-backdrop-blur: blur(8px)!important;
|
||||
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;
|
||||
}
|
||||
|
||||
.v-toolbar{
|
||||
background: rgb(var(--v-table-header-background));
|
||||
}
|
||||
|
||||
.v-divider {
|
||||
border-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));
|
||||
opacity:0.75;
|
||||
}
|
||||
|
||||
.apexcharts-title-text {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
||||
}
|
||||
|
||||
.v-tabs:not(.v-tabs-pill).v-tabs--horizontal {
|
||||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
@@ -241,10 +251,6 @@ body {
|
||||
padding-block-end: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.text-shadow {
|
||||
text-shadow: 1px 1px #777;
|
||||
}
|
||||
|
||||
.card-cover-blurred::before {
|
||||
position: absolute;
|
||||
backdrop-filter: blur(2px);
|
||||
@@ -253,6 +259,7 @@ body {
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
// 弹出层样式
|
||||
.v-overlay__content .v-list{
|
||||
backdrop-filter: blur(6px);
|
||||
background-color: rgb(var(--v-theme-surface), 0.9) !important;
|
||||
@@ -308,121 +315,10 @@ body {
|
||||
min-inline-size: auto;
|
||||
}
|
||||
|
||||
|
||||
.v-infinite-scroll__side {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v-menu .v-overlay__content {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// 透明主题下的弹出窗口样式
|
||||
html[data-theme="transparent"] {
|
||||
// 先将所有全局组件定义放在前面，避免CSS优先级问题
|
||||
.v-application, .v-layout, .v-main, .layout-page-content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 侧边导航栏
|
||||
.layout-vertical-nav {
|
||||
backdrop-filter: blur(16px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.2);
|
||||
border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.05);
|
||||
}
|
||||
|
||||
// 列表
|
||||
.v-list {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// 卡片
|
||||
.v-card:not(.no-blur) {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
|
||||
.v-list {
|
||||
backdrop-filter: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// 工具栏
|
||||
.v-toolbar {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// 表格
|
||||
.v-table {
|
||||
border-radius: 0;
|
||||
background-color: rgba(var(--v-theme-surface), 0);
|
||||
|
||||
.v-table__wrapper > table > thead {
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// 页脚
|
||||
.v-footer {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// Sheet
|
||||
.v-sheet {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// 页面容器
|
||||
.layout-content-wrapper {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 无内容区域的背景设为透明
|
||||
.page-content-container {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 对话框和菜单蒙层样式
|
||||
.v-overlay__scrim {
|
||||
background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity));
|
||||
}
|
||||
|
||||
// 折叠面板
|
||||
.v-expansion-panel {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// 加载占位
|
||||
.v-skeleton-loader {
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// 输入框和搜索框
|
||||
.v-field {
|
||||
background-color: rgba(var(--v-theme-surface), 0);
|
||||
}
|
||||
|
||||
.v-overlay__content {
|
||||
border-radius: 12px !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
|
||||
.v-list {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgb(var(--v-theme-surface), 0.5) !important;
|
||||
}
|
||||
|
||||
.v-card:not(.bg-primary) {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgb(var(--v-theme-surface), 0.5) !important;
|
||||
}
|
||||
|
||||
.v-table__wrapper table thead {
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,7 @@
|
||||
@use '@core/scss/index' as template;
|
||||
@use '@layouts/styles/index' as layouts;
|
||||
@use 'vuetify/styles' as vuetify;
|
||||
@use '@styles/custom' as custom;
|
||||
@use '@styles/common' as common;
|
||||
|
||||
/* 第三方库纯CSS样式 */
|
||||
@import 'vue-toastification/dist/index.css';
|
||||
|
||||
110
src/styles/themes/transparent.scss
Normal file
110
src/styles/themes/transparent.scss
Normal file
@@ -0,0 +1,110 @@
|
||||
// 透明主题专用样式
|
||||
html[data-theme="transparent"] {
|
||||
// 应用、布局、主内容区域
|
||||
.v-application, .v-layout, .v-main, .layout-page-content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 侧边导航栏
|
||||
.layout-vertical-nav {
|
||||
backdrop-filter: blur(16px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.2);
|
||||
border-inline-end: 1px solid rgba(var(--v-theme-on-surface), 0.05);
|
||||
}
|
||||
|
||||
// 列表
|
||||
.v-list {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// 卡片
|
||||
.v-card:not(.no-blur) {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
|
||||
.v-list {
|
||||
backdrop-filter: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// 工具栏
|
||||
.v-toolbar {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// 表格
|
||||
.v-table {
|
||||
border-radius: 0;
|
||||
background-color: rgba(var(--v-theme-surface), 0);
|
||||
|
||||
.v-table__wrapper > table > thead {
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// 页脚
|
||||
.v-footer {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// Sheet
|
||||
.v-sheet {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// 页面容器
|
||||
.layout-content-wrapper {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 无内容区域的背景设为透明
|
||||
.page-content-container {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 对话框和菜单蒙层样式
|
||||
.v-overlay__scrim {
|
||||
background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity));
|
||||
}
|
||||
|
||||
// 折叠面板
|
||||
.v-expansion-panel {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// 加载占位
|
||||
.v-skeleton-loader {
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
|
||||
// 输入框和搜索框
|
||||
.v-field {
|
||||
background-color: rgba(var(--v-theme-surface), 0);
|
||||
}
|
||||
|
||||
// 弹出层内容
|
||||
.v-overlay__content {
|
||||
border-radius: 12px !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
|
||||
.v-list {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgb(var(--v-theme-surface), 0.5) !important;
|
||||
}
|
||||
|
||||
.v-card:not(.bg-primary) {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgb(var(--v-theme-surface), 0.5) !important;
|
||||
}
|
||||
|
||||
.v-table__wrapper table thead {
|
||||
background-color: rgba(var(--v-theme-surface), 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user