MoviePilot自定义主题美化

添加了一些黑色元素、透明、动画、和鼠标交互悬浮效果等。

使用方法：

MoviePilot右上角主题风格自定义添加如下：

html {
    background-image: url(https://img.picgo.net/2024/07/06/17104778532001710477853973c09137638bd261.jpg);
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
}

body, #app, .v-application {
    height: 100% !important;
    min-height: initial !important;
    background: none !important;
    backdrop-filter: blur(2px);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
    animation: bodyFadeIn 1s;
}

@keyframes bodyFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.layout-wrapper {
    height: 100%;
    overflow: auto;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--v-theme-perfect-scrollbar-thumb),0.8) !important;
    transition: background 0.3s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1bb !important;
}

.v-application, .v-card--variant-elevated .v-list {
    background: none !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.layout-nav-type-vertical .layout-vertical-nav {
    background: rgba(var(--v-theme-background),0.3);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.v-card, .v-list-item, .v-field--variant-solo, .v-field--variant-solo-filled, .v-field--variant-solo-inverted {
    background: rgba(var(--v-theme-background),0.3);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

.v-card:hover, .v-list-item:hover, .v-field--variant-solo:hover, .v-field--variant-solo-filled:hover, .v-field--variant-solo-inverted:hover {
    transform: scale(1.01);
    box-shadow: 0 0 25px rgba(0,0,0,0.8);
}

.v-dialog .v-card {
    background: rgba(var(--v-theme-background),0.5);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.v-toolbar {
    background: rgba(var(--v-table-header-background),0.3) !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.v-list, .v-application .fc {
    background: rgba(var(--v-theme-surface),0.3) !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.v-application .fc .fc-scrollgrid-section-sticky > * {
    background: rgba(var(--v-theme-surface),0.2) !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.navbar-blur.layout-navbar .navbar-content-container, .v-table {
    background: none !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.v-data-table th, .v-data-table td {
    background: rgba(var(--v-theme-surface),0.4) !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.v-skeleton-loader {
    background: rgba(var(--v-theme-surface),0.2) !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.bg-primary {
    background-color: rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
}

@media (max-width: 600px) {
    body, #app, .v-application {
        backdrop-filter: blur(4px);
    }

    .v-card, .v-list-item, .v-field--variant-solo, .v-field--variant-solo-filled, .v-field--variant-solo-inverted {
        box-shadow: 0 0 3px rgba(0,0,0,0.3);
    }

    .v-card:hover, .v-list-item:hover, .v-field--variant-solo:hover, .v-field--variant-solo-filled:hover, .v-field--variant-solo-inverted:hover {
        transform: scale(1.01);
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }
}

可自行更换背景
将background-image: url(https://img.picgo.net/2024/07/06/17104778532001710477853973c09137638bd261.jpg);里的url更换成你自己喜欢的即可。

蒙眼银发女背景图地址：https://img.picgo.net/2024/07/06/17104778532001710477853973c09137638bd261.jpg