itunes_macos.css

/*
 * @name iTunes Inspired (macOS Style)
 * @author https://github.com/booploops
 * @author booploops#7139
 * @description Theme inspired by iTunes in macOS High Sierra. Works in light and dark mode.
*/

/* Modern style overlay scrollbars */
::-webkit-scrollbar {
    width: 16px;
    height: 24px;
}

::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-track-piece {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border: 6px solid transparent;
    box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
    border-radius: 16px;
    min-height: 64px;
    transition: border 1s;
}

::-webkit-scrollbar-thumb:hover {
    border: 5px solid transparent;
    box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 80%);
}

/* Will revert back to the standard theme if the window is less than 1000px */
@media only screen and (min-width: 1000px) {


    /* note: REMOVE AFTER 2.1.5 is released */
    span#red {
        margin: 0px 0px 0px 2px !important;
    }

    span#yellow {
        margin: 6px 10px !important;
    }

    span#green {
        margin: 6px 0px !important;
    }

    #web-navigation-container>div:first-child {
        position: absolute !important;
        top: 0px !important;
        left: 6px !important;
        z-index: 400 !important;
    }

    #web-navigation-container>div:first-child>.dragDiv {
        display: flex !important;
        height: 50px !important;
        justify-content: center !important;
        align-items: center !important;
        margin-left: 8px !important;
    }

    .web-nav-window-controls:not(.web-chrome-window-controls) #close {
        margin: auto 4px!important;
    }
    /*  */

    /* Modify AME window frame */
    .web-nav-window-controls.web-chrome-window-controls {
        left: 20px;
        top: 16px;
        right: unset;
        display: flex;
        box-shadow: unset !important;
        backdrop-filter: unset !important;
        background: transparent !important;
    }

    .web-nav-window-controls {
        background: transparent;
        height: 28px !important;
        -webkit-app-region: no-drag !important;
        z-index: 999;
        box-shadow: unset;
        backdrop-filter: unset;
    }

    .web-main-drag {
        display: none;
    }

    #close {
        height: 12px !important;
        width: 12px !important;
        background: rgb(255, 92, 92) !important;
        border-radius: 50%;
        display: inline-block;
        left: 0px;
        top: 0px;
        margin: 6px 0px;
        color: rgb(130, 0, 5);
        -webkit-app-region: no-drag;
    }

    #minimize {
        order: 1;
        height: 12px !important;
        width: 12px !important;
        background: rgb(255, 189, 76) !important;
        border-radius: 50%;
        display: inline-block;
        left: 0px;
        top: 0px;
        margin: 6px 8px;
        color: rgb(130, 0, 5);
        -webkit-app-region: no-drag;
    }

    #maximize {
        order: 2;
        height: 12px !important;
        width: 12px !important;
        background: rgb(0, 202, 86) !important;
        border-radius: 50%;
        display: inline-block;
        left: 0px;
        top: 0px;
        margin: 6px 0px;
        color: rgb(130, 0, 5);
        -webkit-app-region: no-drag;
    }

    #close:hover,
    #minimize:hover,
    #maximize:hover {
        filter: brightness(40%);
    }

    /* End */
    body {
        padding-top: 55px !important;
    }

    /* modify existing close, min, max buttons */
    /* macOS Emu */
    .web-nav-window-controls-outer {
        position: absolute !important;
        top: 0px !important;
        left: 0px !important;
        width: 90px!important;
        padding:0px!important;
        justify-content: center;
        display: flex;
        align-items: center;
        z-index: 400 !important;
    }

    .web-nav-window-controls {
        padding:0px!important;
        justify-content:center;
    }
    
    .web-chrome-playback-controls>* {
        -webkit-app-region: no-drag;
    }

    .web-chrome__grid-container {
        grid-template-columns: calc(36% - 22px) minmax(40%, 900px) calc(24% + 22px) !important;
    }

    .web-chrome-controls-container {
        -webkit-app-region: drag;
    }

    .web-chrome-controls-container>* {
        -webkit-app-region: no-drag;
    }

    .web-chrome-playback-lcd {
        -webkit-app-region: no-drag !important;
    }

    .web-chrome {
        z-index: 100 !important;
        left: 0px !important;
        top: 0px !important;
        width: 100% !important;
        position: absolute !important;
        background: transparent !important;
    }

    /* mask pseudo elements applied to .web-chrome for window dragging near the top buttons */
    .web-chrome:before {
        -webkit-app-region: drag;
        content: '';
        width: calc(100% - var(--windowsChromeWidth));
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
    }

    .web-chrome:after {
        -webkit-app-region: no-drag;
        content: '';
        width: 64px;
        height: 22px;
        position: absolute;
        left: 16px;
        top: 16px;
    }

    .web-chrome-playback-lcd__volume {
        z-index: 1;
    }

    div#web-main {
        padding-top: 0px !important;
    }

    .web-navigation {
        height: calc(100vh - 55px) !important;
    }

    #backButtonBar .button-area img {
        width: 20px;
        pointer-events: none;
    }

    #backButtonBar .button-area {
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(72 72 72);
        width: 32px;
        height: 28px;
        box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 15%), 0px 0px 1px rgb(0 0 0 / 30%), 0px 1px 1px rgb(0 0 0 / 40%);
        border-radius: 4px;
    }

    /* adjust the artist header overflowing because of the body padding adjustment */
    body.has-js:not(.no-song-loaded) .artist-header--fixed,
    body.has-js:not(.not-authenticated) .artist-header--fixed {
        margin-top: 0px !important;
    }

    /* adjust radio station landing page */
    .station .page-container {
        position: inherit !important;
    }

    /* Enable overlay scrollbar, if scrollbars are enabled */
    .page-container {
        overflow-y: overlay !important;
    }

    /* Fix for sidebar grid */
    .web-navigation__navigation-container {
        grid-template-rows: 0px auto 1fr auto !important;
    }

    .context-menu {
        -webkit-app-region: no-drag !important;
    }

    form#web-navigation-search-box {
        margin-top: 0px!important;
        grid-area: search!important;
    }
}

/* Light theme only needs the overlay scrollbar darkened */
@media (prefers-color-scheme: light) {
    ::-webkit-scrollbar-thumb {
        background: transparent;
        border: 6px solid transparent;
        box-shadow: inset 0px 0px 10px 10px rgb(10 10 10 / 50%);
    }

    ::-webkit-scrollbar-thumb:hover {
        border: 5px solid transparent;
        box-shadow: inset 0px 0px 10px 10px rgb(10 10 10 / 80%);
    }

    #backButtonBar .button-area {
        background: rgb(245 245 245);
    }
}

@media (prefers-color-scheme: dark) {
    .web-chrome {
        background: rgb(45 45 45 / 45%) !important;
    }
}