Something went wrong. Try again.
listen to music with friends using Navidrome!
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163@import "tailwindcss";@source "../../shared/src";
@theme { /* using Dark Biscuit de Mar https://github.com/Biscuit-Theme/biscuit */ --color-licorice: hsl(0, 11%, 9%); --color-raisin-black: hsl(0, 11%, 16%); --color-van-dyke: hsl(0, 12%, 25%); --color-wenge: hsl(0, 12%, 40%); --color-cinereous: hsl(0, 12%, 56%); --color-champagne-pink: hsl(24, 31%, 80%); --color-papaya-whip: hsl(36, 100%, 89%); --color-crimson: hsl(352, 72%, 47%); --color-burnt-sienna: hsl(13, 85%, 60%); --color-persian-orange: hsl(26, 74%, 58%); --color-moss-green: hsl(50, 17%, 50%); --color-battleship-gray: hsl(129, 6%, 51%); --color-chinese-violet: hsl(270, 12%, 49%); --color-ultra-violet: hsl(250, 25%, 44%); --color-plum: hsl(302, 34%, 36%); --color-magenta-haze: hsl(332, 47%, 46%);
/* using https://github.com/the-moonwitch/Cozette */ --font-cozette: "CozetteVector", sans-serif;}
@font-face { font-family: 'CozetteVector'; src: url('/static/fonts/CozetteVector.woff2') format('woff2'); font-weight: normal; font-style: normal;}
/* .icon { */ /* font-family: 'CozetteVector'; */ /* font-variant-emoji: text; *//* } */
.toast-container { font-family: 'CozetteVector'; position: fixed; display: flex; pointer-events: none; margin: 0; padding: 0; border: none; background: transparent; z-index: 9999;}
.toast-container::backdrop { display: none;}
.toast-container[data-placement="top-right"] { @apply gap-2; bottom: 1rem; left: calc(100% - 1rem); transform: translateX(-100%); flex-direction: column-reverse;}
.toast { @apply text-champagne-pink lowercase border border-cinereous p-1 mx-1 min-w-3xs; --transition: 300ms; pointer-events: auto; transition: opacity var(--transition), transform var(--transition), max-height var(--transition), margin var(--transition), padding var(--transition);}
.toast-title { @apply text-xl mb-2;}
.toast[data-variant="danger"] .toast-title { @apply text-crimson;}
.toast[data-entering] { opacity: 0; transform: translateY(1rem);}
.toast[data-exiting] { opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; max-height: 0; overflow: hidden;}
range-slider { @apply rounded-none w-full mt-4 mb-2 disabled:filter-none disabled:opacity-100;}
range-slider [data-track] { @apply rounded-none;}
range-slider [data-track-fill] { @apply bg-champagne-pink rounded-none;}
range-slider [data-thumb] { @apply rounded-none bg-wenge outline-2 outline-wenge border-2 border-champagne-pink;}
.switch { --width: 48px; --height: 24px; --gap: 3px; --duration: 0.2s;
display: inline-block; cursor: pointer;}
.switch input { appearance: none; -webkit-appearance: none; width: var(--width); height: var(--height); position: relative; transition: background-color var(--duration) ease; cursor: pointer;}
.switch input::before { content: ""; position: absolute; top: var(--gap); left: var(--gap); width: calc(var(--height) - (var(--gap) * 2)); height: calc(var(--height) - (var(--gap) * 2)); transition: transform var(--duration) cubic-bezier(0.25, 0.8, 0.25, 1), border-color var(--duration) ease; z-index: 1; @apply bg-wenge outline-2 outline-wenge border-2 border-champagne-pink;}
.switch input::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 4px; transform: translateY(-50%); z-index: 0; @apply bg-papaya-whip;}
.switch input:checked::before { transform: translateX(calc(var(--width) - var(--height))); @apply border-ultra-violet bg-raisin-black outline-ultra-violet;}
.switch input:focus-visible { @apply outline-2 outline-moss-green outline-offset-2;}