/* Catppuccin Mocha palette and theme tokens */
:root {
--ctp-mocha-base: #1e1e2e;
--ctp-mocha-mantle: #181825;
--ctp-mocha-crust: #11111b;
--ctp-mocha-surface0: #313244;
--ctp-mocha-surface1: #45475a;
--ctp-mocha-surface2: #585b70;
--ctp-mocha-overlay0: #6c7086;
--ctp-mocha-text: #cdd6f4;
--ctp-mocha-accent: #fab387;

--theme-colors-background: var(--ctp-mocha-base);
--theme-colors-background-alternate: var(--ctp-mocha-surface0);
--theme-colors-surface: var(--ctp-mocha-surface1);
--theme-colors-foreground: var(--ctp-mocha-text);
--theme-colors-border: var(--ctp-mocha-overlay0);
--theme-colors-primary-filled: var(--ctp-mocha-accent);
--theme-colors-primary-contrast: var(--ctp-mocha-base);
}

.fs-window-bar-module-windows-container {
height:2rem;
}
body > div:not(#root) {
height:100%;
}
body, html {
background-color:initial;
background-clip:initial;
background-origin:initial;
background-attachment:initial;
background-repeat:initial;
background-size:initial;
background-position-y:initial;
background-position-x:initial;
background-image:none;
}
#sidebar-queue .fs-virtual-grid-wrapper-module-virtual-grid-container .fs-virtual-grid-wrapper-module-virtual-grid-auto-sizer-container .fs-virtual-table-module-table-wrapper .ag-root-wrapper .ag-root-wrapper-body .ag-body-viewport {
padding-bottom:100px;
}
.fs-feature-carousel-module-carousel .fs-badge-module-root:hover {
cursor:pointer;
}
.fs-context-menu-module-context-menu-button:not(:hover) {
background-image:unset !important;
background-position-x:unset !important;
background-position-y:unset !important;
background-size:unset !important;
background-repeat:unset !important;
background-attachment:unset !important;
background-origin:unset !important;
background-clip:unset !important;
background-color:unset !important;
}
.fs-button-module-root {
background-color:transparent;
}
.fs-playerbar-module-container .fs-left-controls-module-image-wrapper .fs-left-controls-module-image .fs-image-module-unloader, .fs-poster-card-module-image-container, .fs-image-module-image {
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}
.fs-text-input-module-root .mantine-Input-wrapper .fs-text-input-module-input, .fs-action-icon-module-root, .fs-select-module-input, .fs-number-input-module-input, .fs-color-input-module-input, .mantine-Popover-dropdown, .fs-multi-select-module-input, .fs-button-module-root {
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
}
.fs-badge-module-root {
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-right-radius:100px;
border-bottom-left-radius:100px;
padding-top:0.2rem;
padding-right:0.5rem;
padding-bottom:0.2rem;
padding-left:0.5rem;
font-size:0.8rem;
font-weight:500;
line-height:1.2rem;
background-color:var(--theme-colors-primary-filled);
color:var(--theme-colors-primary-contrast);
}
#drawer-queue, #sidebar-queue, #player-bar, .fs-main-content-module-sidebar-collapsed #sidebar, .fs-main-content-module-sidebar-expanded #left-sidebar, .fs-context-menu-module-container, .fs-animated-page-module-animated-page, .fs-popover-module-dropdown, .fs-dropdown-menu-module-menu-dropdown, main:has(div > .fs-feature-carousel-module-wrapper) .fs-page-header-module-header, main:has(div > .fs-library-header-module-library-header) .fs-page-header-module-header, main:has(div > .fs-album-detail-content-module-content-container) .fs-page-header-module-header, main:has(div > .fs-album-detail-content-module-content-container) .ag-header.ag-header-window-bar, .fs-context-menu-module-context-menu-button:hover, .fs-dropdown-menu-module-menu-item:hover {
background-color:color-mix(in srgb, var(--theme-colors-background-alternate) 47%, transparent) !important;
background-image:initial;
background-position-x:initial;
background-position-y:initial;
background-size:initial;
background-repeat:initial;
background-attachment:initial;
background-origin:initial;
background-clip:initial;
backdrop-filter:blur(8.1px);
box-shadow:rgba(0, 0, 0, 0.1) 0px 4px 30px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
border-top-right-radius:16px;
border-top-left-radius:16px;
}
.ag-header.ag-header-window-bar {
margin-top:-1rem;
}
main:has(div > .fs-album-detail-content-module-content-container):has(.ag-header.ag-header-window-bar) .fs-page-header-module-header {
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
.fs-album-detail-content-module-content-container .fs-library-background-overlay-module-root {
left:0px;
top:0px;
position:absolute;
}
.fs-album-detail-content-module-content-container .ag-header {
background-color:unset;
}
.fs-album-detail-content-module-content-container * {
--ag-odd-row-background-color: none !important;
--ag-background-color: none !important;
}
.fs-album-detail-content-module-detail-container {
padding-left:0px;
padding-bottom:0px;
padding-right:0px;
padding-top:0px;
}
div:has(.fs-album-detail-content-module-content-container) > div > .fs-library-header-module-library-header {
max-height:unset;
min-height:unset;
height:20rem;
padding-left:1rem;
padding-bottom:2rem;
padding-right:1rem;
padding-top:1rem;
}
.fs-album-detail-content-module-content-container {
border-top-right-radius:0px;
border-top-left-radius:0px;
padding-left:1rem;
padding-bottom:1rem;
padding-right:1rem;
padding-top:1rem;
}
main > .fs-native-scroll-area-module-scroll-area {
height:calc(-6rem + 100vh);
}
.fs-album-artist-detail-content-module-detail-container {
border-top-left-radius:0px;
border-top-right-radius:0px;
padding-left:1rem;
padding-bottom:1rem;
padding-right:1rem;
padding-top:1rem;
}
.fs-album-artist-detail-content-module-detail-container * {
--ag-odd-row-background-color: none !important;
--ag-background-color: none !important;
}
div:has(.fs-album-artist-detail-content-module-content-container) > div > .fs-library-header-module-library-header {
max-height:unset;
min-height:unset;
height:20rem;
padding-left:1rem;
padding-bottom:2rem;
padding-right:1rem;
padding-top:1rem;
}
main > div > div:has(.fs-tabs-module-root) .fs-tabs-module-panel {
overflow-y:scroll;
}
main > div > div:has(.fs-tabs-module-root) {
border-top-right-radius:0px;
border-top-left-radius:0px;
overflow-y:hidden;
overflow-x:hidden;
padding-left:1rem;
padding-bottom:1rem;
padding-right:1rem;
padding-top:1rem;
}
main:has(.fs-tabs-module-root) .fs-page-header-module-header {
box-shadow:unset !important;
border-bottom-right-radius:0px !important;
border-bottom-left-radius:0px !important;
}
main .fs-feature-carousel-module-wrapper .fs-feature-carousel-module-info-column > .mantine-Stack-root > div:has(button) > div {
right:1rem;
bottom:1rem;
position:absolute;
}
main > div > div > div:has(.fs-feature-carousel-module-wrapper) > .grid-carousel:first-of-type {
margin-top:16rem;
}
main > div > div > div:has(.fs-feature-carousel-module-wrapper) {
margin-bottom:unset !important;
padding-inline-end:unset !important;
padding-inline-start:unset !important;
padding-left:1rem !important;
padding-bottom:1rem !important;
padding-right:1rem !important;
padding-top:1rem !important;
}
main .fs-feature-carousel-module-wrapper .fs-feature-carousel-module-background-image {
filter:blur(12px);
height:100%;
width:100%;
}
main .fs-feature-carousel-module-wrapper > div > * {
align-items:center;
}
main .fs-feature-carousel-module-carousel {
max-height:unset;
min-height:unset;
height:16rem;
}
main .fs-feature-carousel-module-wrapper {
max-height:unset;
height:16rem;
left:0px;
top:0px;
position:absolute;
}
main:has(.fs-virtual-grid-wrapper-module-virtual-grid-auto-sizer-container:last-child) > div:nth-child(2):not(:last-child) > div {
width:unset !important;
padding-left:1rem !important;
padding-bottom:1rem !important;
padding-right:1rem !important;
padding-top:1rem !important;
box-shadow:unset;
border-bottom-left-radius:unset;
border-bottom-right-radius:unset;
border-top-right-radius:unset;
border-top-left-radius:unset;
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
margin-top:0px;
}
#default-layout:not(:has(.fs-window-bar-module-windows-container)) {
grid-template-rows:0px calc(-9rem + 100vh) 6rem;
}
#default-layout:has(.fs-window-bar-module-windows-container) {
grid-template-rows:2rem calc(-11rem + 100vh) 6rem;
}
#default-layout {
column-gap:1rem;
row-gap:1rem;
background-color:var(--theme-colors-background);
}
#main-content {
column-gap:1rem;
row-gap:1rem;
height:100%;
background-color:unset;
background-clip:unset;
background-origin:unset;
background-attachment:unset;
background-repeat:unset;
background-size:unset;
background-position-y:unset;
background-position-x:unset;
background-image:unset;
}
.fs-main-content-module-right-expanded main {
width:calc(100% - 1rem);
}
main > div > .fs-filter-bar-module-filter-bar {
box-shadow:unset;
border-bottom-left-radius:unset;
border-bottom-right-radius:unset;
border-top-right-radius:unset;
border-top-left-radius:unset;
}
.ag-header {
background-color:unset;
background-clip:unset;
background-origin:unset;
background-attachment:unset;
background-repeat:unset;
background-size:unset;
background-position-y:unset;
background-position-x:unset;
background-image:unset;
}
main > .fs-virtual-grid-wrapper-module-virtual-grid-auto-sizer-container * {
--ag-odd-row-background-color: unset !important;
--ag-background-color: unset !important;
--ag-header-background-color: unset !important;
}
main.fs-animated-page-module-animated-page > .fs-virtual-grid-wrapper-module-virtual-grid-auto-sizer-container > div > div {
padding-left:1rem;
padding-bottom:1rem;
padding-right:1rem;
padding-top:1rem;
}
main > .fs-virtual-grid-wrapper-module-virtual-grid-auto-sizer-container {
border-top-right-radius:unset;
border-top-left-radius:unset;
max-height:calc(-16rem + 100vh);
}
.fs-page-header-module-header:has(.fs-library-header-bar-module-play-button-container) {
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
margin-top:0px;
}
.fs-library-header-bar-module-header-container:has(.fs-library-header-bar-module-play-button-container) {
padding-left:0px;
padding-bottom:0px;
padding-right:0px;
padding-top:0px;
}
#main-content main .fs-page-header-module-title-wrapper .mantine-Group-root > .fs-text-input-module-root {
width:unset !important;
}
#main-content main .fs-page-header-module-title-wrapper .mantine-Group-root:has(.fs-text-input-module-root) {
margin-right:1rem;
}
.fs-library-header-bar-module-header-container {
padding-left:1rem;
padding-bottom:0px;
padding-right:0px;
padding-top:0px;
}
#main-content main .fs-page-header-module-background-image, #main-content main .fs-page-header-module-background-image-overlay {
opacity:0;
}
.fs-animated-page-module-animated-page:has(.fs-virtual-grid-wrapper-module-virtual-grid-auto-sizer-container) .fs-page-header-module-header {
box-shadow:unset !important;
border-bottom-right-radius:0px !important;
border-bottom-left-radius:0px !important;
}
.fs-page-header-module-container {
padding-left:0px !important;
padding-bottom:0px !important;
padding-right:0px !important;
padding-top:0px !important;
height:5rem;
}
.fs-library-header-bar-module-play-button-container {
margin-left:1rem;
}
#main-content main .fs-page-header-module-header {
min-height:4rem;
margin-right:0rem;
}
#sidebar-queue * {
--ag-odd-row-background-color: unset !important;
--ag-background-color: unset !important;
--ag-header-background-color: unset !important;
background-color:unset;
}
#default-layout:not(:has(.fs-window-bar-module-windows-container)) #sidebar-queue {
max-height:calc(-9rem + 100vh);
}
#default-layout:has(.fs-window-bar-module-windows-container) #sidebar-queue {
max-height:calc(-11rem + 100vh);
}
#sidebar-queue {
margin-left:-1rem;
}
#default-layout .fs-collapsed-sidebar-module-sidebar-container > div > div:first-child {
justify-content:center;
}
#sidebar .fs-resize-handle-module-handle-right, #sidebar .fs-resize-handle-module-handle-right::before {
max-height:calc(-10rem + 100vh);
}
#left-sidebar {
max-height:calc(-9rem + 100vh);
}
#default-layout:not(:has(.fs-window-bar-module-windows-container)) #sidebar {
max-height:calc(-9rem + 100vh);
}
#default-layout:has(.fs-window-bar-module-windows-container) #sidebar {
max-height:calc(-11rem + 100vh);
}
#sidebar {
margin-left:1rem;
}
#left-sidebar .fs-sidebar-module-accordion-content, #left-sidebar .fs-accordion-module-panel, .fs-main-content-module-sidebar-expanded #sidebar {
background-color:initial;
background-clip:initial;
background-origin:initial;
background-attachment:initial;
background-repeat:initial;
background-size:initial;
background-position-y:initial;
background-position-x:initial;
background-image:none;
}
#drawer-queue > div > div {
background-color:unset !important;
border-top-left-radius:unset;
border-top-right-radius:unset;
border-bottom-right-radius:unset;
border-bottom-left-radius:unset;
background-image:unset;
background-position-x:unset;
background-position-y:unset;
background-size:unset;
background-repeat:unset;
background-attachment:unset;
background-origin:unset;
background-clip:unset;
}
#drawer-queue *, .fs-context-menu-module-container *, .fs-popover-module-dropdown *, .fs-dropdown-menu-module-menu-dropdown * {
--ag-background-color: unset !important;
--ag-odd-row-background-color: unset !important;
--ag-header-background-color: unset !important;
}
#default-layout:not(:has(.fs-window-bar-module-windows-container)) #drawer-queue {
height:calc(-9rem + 100vh) !important;
}
#default-layout:has(.fs-window-bar-module-windows-container) #drawer-queue {
height:calc(-11rem + 100vh) !important;
}
#drawer-queue {
right:1rem !important;
top:0px !important;
z-index:201 !important;
}
#player-bar > .fs-playerbar-module-container {
width:100%;
}
#player-bar {
margin-right:1rem;
margin-left:1rem;
}
#player-bar ._image_ly86j_1 button, #player-bar .fs-left-controls-module-image-wrapper button {
display:none;
}
#default-layout .fs-full-screen-player-module-container {
height:100vh !important;
padding-top:1rem !important;
padding-right:1rem !important;
padding-bottom:9rem !important;
padding-left:1rem !important;
}
#default-layout .fs-full-screen-player-module-responsive-container {
margin-top:2rem;
}
.fs-full-screen-player-module-responsive-container {
display:flex;
flex-direction:row;
}
.fs-full-screen-player-module-container .full-screen-player-queue-container {
position:absolute;
top:calc(50% - 25px);
right:2rem;
width:70px;
height:70px;
margin-top:auto;
margin-bottom:auto;
transition-behavior:normal;
transition-duration:2s;
transition-timing-function:ease;
transition-delay:0s;
transition-property:width;
}
.fs-full-screen-player-queue-module-grid-container:not(:hover)::before {
opacity:1 !important;
padding-top:17px;
text-align:center;
background-color:var(--theme-colors-surface);
color:var(--theme-colors-foreground);
font-size:3rem;
content: "<" !important;
transition-property:opacity;
transition-delay:0s;
transition-timing-function:ease;
transition-duration:0.3s;
transition-behavior:normal;
height:50px;
width:50px;
z-index:201;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-right-radius:20px;
border-top-left-radius:20px;
}
.fs-full-screen-player-queue-module-grid-container:not(:hover) * {
display:none;
}
.fs-full-screen-player-queue-module-grid-container:hover::before {
margin-right:initial;
border-top-width:initial;
border-top-style:initial;
border-top-color:initial;
border-bottom-width:initial;
border-bottom-style:initial;
border-bottom-color:initial;
border-right-width:initial;
border-right-style:initial;
border-right-color:initial;
z-index:unset;
width:100%;
height:100%;
opacity:var(--opacity, 1);
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-right-radius:20px;
border-top-left-radius:20px;
}
.full-screen-player-image-container {
flex-grow:1;
}
.fs-full-screen-player-module-container .full-screen-player-queue-container:hover {
width:initial;
height:initial;
margin-top:initial;
margin-bottom:initial;
position:relative;
top:initial;
right:initial;
flex-grow:1;
}
#default-layout:not(:has(.fs-window-bar-module-windows-container)) .fs-full-screen-player-module-background-image-overlay {
top:0px;
}
#default-layout:has(.fs-window-bar-module-windows-container) .fs-full-screen-player-module-background-image-overlay {
top:2rem;
}
.fs-full-screen-player-module-background-image-overlay {
position:fixed;
}
.full-screen-player-image {
border-top-left-radius:17px;
border-top-right-radius:17px;
border-bottom-right-radius:17px;
border-bottom-left-radius:17px;
}
@media screen and (width >= 950px) and (width < 1100px){
.fs-playerbar-module-right-grid-item .fs-playerbar-slider-module-root {
width:calc(7rem * var(--mantine-scale)) !important;
}
}
@media screen and (width >= 1000px) and (width < 1800px){
.fs-playerbar-module-right-grid-item .fs-playerbar-slider-module-root {
width:calc(8rem * var(--mantine-scale)) !important;
}
}
@media screen and (width >= 1800px){
.fs-playerbar-module-right-grid-item .fs-playerbar-slider-module-root {
width:calc(10rem * var(--mantine-scale)) !important;
}
}

.ag-header-viewport {
background-color:var(--ctp-mocha-surface1);
background-clip:initial;
background-origin:initial;
background-attachment:initial;
background-repeat:initial;
background-size:initial;
background-position-y:initial;
background-position-x:initial;
background-image:initial;
}
.fs-right-sidebar-module-right-sidebar-container {
background-color:var(--ctp-mocha-surface1);
background-clip:initial;
background-origin:initial;
background-attachment:initial;
background-repeat:initial;
background-size:initial;
background-position-y:initial;
background-position-x:initial;
background-image:initial;
}
.fs-feature-carousel-module-carousel .fs-poster-card-module-image-container {
border-bottom-left-radius:22px !important;
border-bottom-right-radius:22px !important;
border-top-right-radius:22px !important;
border-top-left-radius:22px !important;
overflow-y:hidden;
overflow-x:hidden;
}
.fs-feature-carousel-module-carousel {
border-bottom-left-radius:22px;
border-bottom-right-radius:22px;
border-top-right-radius:22px;
border-top-left-radius:22px;
height:0px;
}
.fs-sidebar-item-module-inner svg {
stroke-width:1.8px;
}
.mantine-Modal-content {
border-bottom-left-radius:22px !important;
border-bottom-right-radius:22px !important;
border-top-right-radius:22px !important;
border-top-left-radius:22px !important;
}
.mantine-Popover-dropdown {
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
border-top-right-radius:16px;
border-top-left-radius:16px;
}
.mantine-Input-input {
border-top-left-radius:16px !important;
border-top-right-radius:16px !important;
border-bottom-right-radius:16px !important;
border-bottom-left-radius:16px !important;
}
.mantine-Button-root {
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-right-radius:16px;
border-bottom-left-radius:16px;
padding-left:18px;
padding-right:18px;
}
.fs-poster-card-module-image-container {
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-right-radius:16px;
border-bottom-left-radius:16px;
}
.fs-feature-carousel-module-carousel .fs-image-module-image-container {
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-right-radius:16px;
border-bottom-left-radius:16px;
overflow-x:hidden;
overflow-y:hidden;
}
.fs-dropdown-menu-module-menu-dropdown {
border-top-left-radius:22px;
border-top-right-radius:22px;
border-bottom-right-radius:22px;
border-bottom-left-radius:22px;
}
.ag-row-odd {
background-color:var(--ctp-mocha-surface0);
}
:root .ag-theme-alpine-dark {
--ag-background-color: var(--ctp-mocha-surface0) !important;
--ag-header-foreground-color: var(--theme-colors-foreground) !important;
--ag-header-background-color: var(--ctp-mocha-surface0) !important;
--ag-border-color: var(--theme-colors-border) !important;
--ag-borders: none !important;
--ag-font-family: var(--theme-content-font-family) !important;
}
.fs-page-header-module-background-image-overlay.fs-page-header-module-dark {
background-image:initial;
background-position-x:initial;
background-position-y:initial;
background-size:initial;
background-repeat:initial;
background-attachment:initial;
background-origin:initial;
background-clip:initial;
background-color:var(--ctp-mocha-surface0);
}
.fs-player-bar-module-container {
background-color:var(--ctp-mocha-surface1);
}
.fs-main-content-module-main-content-container {
background-color:var(--ctp-mocha-surface0);
}
.fs-sidebar-module-container {
background-color:var(--ctp-mocha-surface1);
}
.fs-sidebar-module-accordion-content {
background-color:var(--ctp-mocha-surface1);
}
.fs-window-bar-module-macos-container {
background-color:var(--ctp-mocha-surface1);
}
.fs-button-module-root[data-variant="default"] {
background-color:var(--ctp-mocha-surface1);
}
.fs-text-input-module-input[data-variant="default"] {
background-image:initial;
background-position-x:initial;
background-position-y:initial;
background-size:initial;
background-repeat:initial;
background-attachment:initial;
background-origin:initial;
background-clip:initial;
background-color:var(--ctp-mocha-surface1);
}
body {
color:var(--ctp-mocha-text);
}
.fs-player-button-module-main {
background-image:initial !important;
background-position-x:initial !important;
background-position-y:initial !important;
background-size:initial !important;
background-repeat:initial !important;
background-attachment:initial !important;
background-origin:initial !important;
background-clip:initial !important;
background-color:var(--ctp-mocha-accent) !important;
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-right-radius:50%;
border-bottom-left-radius:50%;
}
.ag-row-odd {
background-color:var(--ctp-mocha-surface1) !important;
}
.ag-row {
background-color:var(--ctp-mocha-surface1);
}
.ag-body-horizontal-scroll-viewport {
background-color:var(--ctp-mocha-surface1);
}