VergeCustomBackgroundCSS Inject

verge-custom-background.css

/*
  对Verge的深度CSS注入适配
  感谢 @ChengZhiMeow 做了大部分的CSS属性匹配和兼容性测试
*/

@media (prefers-color-scheme: dark) {

    .layout-content__left .the-logo,
    .layout-content__left .the-menu,
    .layout-content__left .the-traffic,
    .layout-content__right .the-content .base-page header,
    .layout-content__right .the-content .base-page .base-container .base-content :has(> div) :has(> div)>.MuiListItemButton-dense:not(false),
    .layout-content__right .the-content .base-page .base-container .base-content>.MuiStack-root,
    .layout-content__right .the-content .base-page .base-container .base-content>.MuiGrid-container>.MuiGrid-direction-xs-row>.MuiBox-root,
    .layout-content__right .the-content .base-page .base-container .base-content>.MuiBox-root:has(> .MuiBox-root > .MuiFormControl-root),
    .layout-content__right .the-content .base-page .base-container .base-content>.MuiBox-root:has(> .MuiFormControl-root),
    .layout-content__right .the-content .base-page .base-container .base-content>.MuiGrid-root>.MuiGrid-root>.MuiPaper-root,
    .layout-content__right .the-content .base-page .base-container .base-content div:not([class])>.MuiBox-root:has(> .MuiIconButton-sizeSmall),
    .layout-content__right .the-content .base-page .base-container .base-content:not(:has(> div:not(:is(.MuiBox-root, [role="presentation"]))))>div.MuiBox-root,
    .layout-content__right .the-content .base-page .base-container .base-content>div[data-testid="virtuoso-scroller"],
    .MuiGrid-root .MuiGrid-root :has(> ul),
    .MuiBox-root>.MuiGrid-container>.MuiGrid-grid-xs-12>.MuiBox-root:not(:has(.MuiBox-root[aria-selected])),
    .MuiBox-root>.MuiGrid-container>.MuiGrid-grid-xs-12>.MuiBox-root>.MuiBox-root[aria-selected],
    .layout-content__right .the-content .base-page .base-container .base-content .MuiBox-root>div:is(.MuiTypography-caption),
    .MuiDialog-root>.MuiDialog-container>.MuiDialog-paper,
    .MuiPopover-root>.MuiPopover-paper {
        background-color: rgb(from var(--background-color) r g b / 0.75) !important;
    }

    .MuiSwitch-switchBase:not(.Mui-checked) .MuiSwitch-thumb {
        color: white !important;
    }

    .MuiSwitch-switchBase:not(.Mui-checked)+.MuiSwitch-track {
        border-color: rgba(255, 255, 255, 0.75) !important;
        color: rgba(255, 255, 255, 0.75) !important;
    }

    .MuiStack-root>.MuiPaper-elevation2 {
        color: white !important;
    }
}

.MuiStack-root>.MuiPaper-elevation0,
.MuiStack-root>.MuiPaper-elevation2 {
    border-width: 2.5px;
    border-style: solid;
}

.MuiStack-root>.MuiPaper-elevation0 {
    border-color: rgb(from var(--primary-main) r g b / 0.45) !important;
}

.MuiStack-root>.MuiPaper-elevation2 {
    border-color: var(--primary-main) !important;
    color: rgb(0, 0, 0);
}

.MuiSwitch-switchBase {
    margin: 4px !important;
}

.MuiSwitch-switchBase .MuiSwitch-thumb {
    transition: color 0.3s ease !important;

    width: 18px !important;
    height: 18px !important;
}

.MuiSwitch-switchBase:not(.Mui-checked) .MuiSwitch-thumb {
    color: rgb(36, 36, 36);
}

.MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb {
    color: var(--primary-main);
}

.MuiSwitch-switchBase+.MuiSwitch-track {
    box-sizing: border-box !important;
    transition: border-color 0.3s ease !important;

    border-width: 2px !important;
    border-style: solid !important;
}

.MuiSwitch-switchBase:not(.Mui-checked)+.MuiSwitch-track {
    border-color: rgba(36, 36, 36, 0.85);
    color: rgba(36, 36, 36, 0.85);
}

.MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track {
    border-color: rgb(from var(--primary-main) r g b / 0.85);
    color: rgb(from var(--primary-main) r g b / 0.85);
}

.layout-content__left .the-logo,
.layout-content__left .the-menu,
.layout-content__left .the-traffic,
.layout-content__right .the-content .base-page header,
.layout-content__right .the-content .base-page .base-container .base-content>.MuiStack-root,
.layout-content__right .the-content .base-page .base-container .base-content>.MuiGrid-container>.MuiGrid-direction-xs-row>.MuiBox-root,
.layout-content__right .the-content .base-page .base-container .base-content>.MuiBox-root:has(> .MuiBox-root > .MuiFormControl-root),
.layout-content__right .the-content .base-page .base-container .base-content>.MuiBox-root:has(> .MuiFormControl-root),
.layout-content__right .the-content .base-page .base-container .base-content>.MuiGrid-root>.MuiGrid-root>.MuiPaper-root,
.layout-content__right .the-content .base-page .base-container .base-content div:not([class])>.MuiBox-root:has(> .MuiIconButton-sizeSmall),
.layout-content__right .the-content .base-page .base-container .base-content:not(:has(> div:not(:is(.MuiBox-root, [role="presentation"]))))>div.MuiBox-root,
.layout-content__right .the-content .base-page .base-container .base-content>div[data-testid="virtuoso-scroller"],
.MuiGrid-root .MuiGrid-root :has(> ul),
.MuiBox-root>.MuiGrid-container>.MuiGrid-grid-xs-12>.MuiBox-root:not(:has(.MuiBox-root[aria-selected])),
.MuiBox-root>.MuiGrid-container>.MuiGrid-grid-xs-12>.MuiBox-root>.MuiBox-root[aria-selected],
.MuiDialog-root>.MuiDialog-container>.MuiDialog-paper,
.MuiPopover-root>.MuiPopover-paper {
    background-color: rgb(from var(--background-color) r g b / 0.75) !important;
    background: linear-gradient(150deg, rgba(from var(--background-color) r g b / 0.75) 0%, rgba(from var(--background-color) r g b / 0.2) 50%) !important;
    backdrop-filter: blur(6px) saturate(100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.05) !important;
    transition: background-color 0.3s ease;
}

@keyframes opacity_ease_in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.MuiDialog-root>.MuiDialog-container>.MuiDialog-paper {
    animation: opacity_ease_in 0.6s ease;
}

.layout-content__right .the-content .base-page .base-container .base-content .MuiBox-root>div:is(.MuiTypography-caption) {
    background-color: rgb(from var(--background-color) r g b / 0.55);
    transition: background-color 0.3s ease;
}

.layout-content__right .the-content .base-page .base-container .base-content :has(> div) :has(> div)>.MuiListItemButton-dense {
    background-color: rgb(from var(--background-color) r g b / 0.55) !important;
    backdrop-filter: blur(6px);
    transition: background-color 0.3s ease;
}

.layout-content__left .the-logo,
.layout-content__left .the-menu,
.layout-content__left .the-traffic,
.layout-content__right .the-content .base-page header,
.layout-content__right .the-content .base-page .base-container .base-content>.MuiStack-root,
.layout-content__right .the-content .base-page .base-container .base-content>.MuiBox-root:has(> .MuiBox-root > .MuiFormControl-root),
.layout-content__right .the-content .base-page .base-container .base-content>.MuiBox-root:has(> .MuiFormControl-root),
.layout-content__right .the-content .base-page .base-container .base-content div:not([class])>.MuiBox-root:has(> .MuiIconButton-sizeSmall),
.layout-content__right .the-content .base-page .base-container .base-content:not(:has(> div:not(:is(.MuiBox-root, [role="presentation"]))))>div.MuiBox-root,
.layout-content__right .the-content .base-page .base-container .base-content>div[data-testid="virtuoso-scroller"] {
    border-radius: 8px !important;
}

.layout-content__left {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    margin-left: 8px !important;
    border-right: none !important;
}

.layout-content__left .the-logo {
    margin-top: 0px !important;
    margin-left: 0px !important;
    padding: 15px 20px 16px 20px !important;
}

.layout-content__left .the-logo,
.layout-content__left .the-menu {
    margin-bottom: 20px !important;
}

.layout-content__left .the-menu {
    background-size: auto min(400px, 100%);
    padding-bottom: 4px;
}

.layout-content__left .the-traffic {
    margin-bottom: 10px !important;
}

.layout-content__left .the-traffic>.MuiBox-root {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.layout-content__right {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.layout-content__right .the-content {
    top: 0px !important;
    margin-bottom: 8px !important;
}

.layout-content__right .the-content .base-page header {
    width: auto !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    margin-bottom: 20px !important;
    border-bottom: none !important;
}

.layout-content__right .the-content .base-page .base-container,
.layout-content__right .the-content .base-page .base-container section,
.layout-content__right .the-content .base-page .base-container .base-content .MuiPaper-root:has(div > .MuiBox-root > canvas),
.layout-content__right .the-content .base-page .base-container .base-content .MuiPaper-root div>.MuiBox-root>canvas+.MuiBox-root .MuiBox-root,
.layout-content__right .the-content .base-page .base-container .base-content .MuiBox-root>.MuiGrid-container>.MuiGrid-grid-xs-3,
.MuiStack-root>.MuiPaper-elevation0,
.MuiStack-root>.MuiPaper-elevation2,
.MuiSwitch-switchBase+.MuiSwitch-track {
    background: transparent !important;
}

.layout-content__right .the-content .base-page .base-container section {
    padding-top: 0px !important;
}

.layout-content__right .the-content .base-page .base-container .base-content>.MuiStack-root,
.layout-content__right .the-content .base-page .base-container .base-content>.MuiBox-root:has(> .MuiBox-root > .MuiFormControl-root),
.layout-content__right .the-content .base-page .base-container .base-content>.MuiBox-root:has(> .MuiFormControl-root) {
    padding: 5px 10px 5px 10px !important;
}

.layout-content__right .the-content .base-page .base-container .base-content div:not([class])>.MuiBox-root:has(> .MuiIconButton-sizeSmall) {
    margin-left: 12px !important;
    margin-right: 8px !important;
    padding-left: 0px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.layout-content__right .the-content .base-page .base-container .base-content:not(:has(> div:not(:is(.MuiBox-root, [role="presentation"]))))>div.MuiBox-root,
.layout-content__right .the-content .base-page .base-container .base-content>div[data-testid="virtuoso-scroller"] {
    width: auto !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    margin-bottom: 8px !important;
}

.layout-content__right .the-content .base-page .base-container .base-content:not(:has(> div:not(:is(.MuiBox-root, [role="presentation"]))))>.MuiButtonBase-root {
    bottom: 20px;
    right: 16px;
}

.layout {
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* 
 图片转base64: https://www.toolhelper.cn/Image/Base64?tab=image
 */

@media (prefers-color-scheme: dark) {
    .layout {
        background-image: url('data:image/jpeg;base64,YOUR_BASE64_HERE') !important;
    }
}

.layout {
   background-image: url('data:image/jpeg;base64,YOUR_BASE64_HERE') !important;
}