Something went wrong. Try again.
Self-hosted web interface and downloader for Qobuz.
downloader self-hosted music qobuz
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235:root,:root[data-theme="light"] { /* Colors */ --bg-color: #dad2c6; --surface-color: #c8Bfb1; --surface-high-color: #b4aa9B; --surface-text-color: #121110; --accent-color: #9e0b10; --border-color: #a3998a; --text-color: #121110; --shadow-color: #a3998a; --button-bg: var(--surface-color); --seg-ctrl-bg-active: var(--surface-color);
/* 3-Column Grid Layout Sizing */ --side-col-min-width: 260px; --center-col-min-width: 540px; --center-col-max-width: 1100px; --grid-gap: 32px;
/* Card Grid Sizing */ --album-grid-card-min-width: 180px; --artist-grid-card-min-width: 280px;
/* Album Detail View Sizing */ --album-detail-cover-size: 220px;
/* Header & Branding Sizing */ --header-inner-height: 56px; --header-action-size: 28px; --logo-size-desktop: 96px; --logo-size-mobile: 96px;
/* Components & Queue Sizing */ --search-margin-bottom: 32px; --search-loading-bar-height: 2px;}
:root[data-theme="dark"] { --bg-color: #121110; --surface-color: #1d1b18; --surface-high-color: #2a2723; --surface-text-color: #e6dfd5; --accent-color: #c92a30; --border-color: #38342f; --text-color: #e6dfd5; --shadow-color: #000000; --button-bg: var(--surface-color); --seg-ctrl-bg-active: var(--surface-high-color);}
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.4; position: relative;}
* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0 !important;
&:focus-visible { outline: 1px solid var(--accent-color); outline-offset: 2px; }}
.app-layout-grid { display: grid; grid-template-columns: minmax(var(--side-col-min-width), 1fr) minmax(var(--center-col-min-width), var(--center-col-max-width)) minmax(var(--side-col-min-width), 1fr); gap: var(--grid-gap);}
.left-column { position: sticky; top: 0; padding: max(32px, env(safe-area-inset-top)) 0 0 24px; height: 100dvh;}
.app-brand { width: var(--logo-size-desktop); height: var(--logo-size-desktop); background-color: var(--accent-color); color: var(--bg-color); text-decoration: none; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
& .app-brand-text { font-weight: 800; font-size: 0.85rem; line-height: 1; white-space: nowrap; transform: translate(6px, 10px); }
&:hover { opacity: 0.9; }}
.center-column { min-width: 0; width: 100%; padding-block-end: 32px;}
.app-header { & .app-header-inner { block-size: var(--header-inner-height); display: flex; align-items: center; justify-content: space-between; }
& .app-header-nav { display: flex; align-items: center; gap: 13px;
.btn-nav { block-size: var(--header-action-size); font-size: 0.78rem; text-decoration: none; } }
& .app-header-actions { display: flex; align-items: center; gap: 13px;
.theme-toggle-btn { block-size: var(--header-action-size); inline-size: var(--header-action-size); font-size: 1rem; color: var(--text-color); padding: 2px;
&:active { padding: 2.5px 1.5px 1.5px 2.5px; } }
.btn-logout { block-size: var(--header-action-size); font-size: 0.78rem; text-decoration: none;
&>span { border-inline-end: 1px solid var(--border-color); padding-inline-end: 8px; margin-inline-end: 8px; } } }}
.main-container { width: 100%; margin: 0 auto; padding: 0;}
.right-column { min-width: var(--side-col-min-width); padding: 16px 16px 0 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; justify-content: flex-start;}
.btn-dev-raw { text-transform: lowercase; padding: 6px 14px; font-size: 0.85rem; letter-spacing: 0.5px; border-radius: var(--radius-md);}
/* Mobile / Narrow Responsive Layout (< 1100px) */@media (max-width: 1100px) { .app-layout-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; }
.app-header-inner { margin-block-end: 24px; }
.left-column { position: static; flex-direction: row; align-items: center; justify-content: flex-start; height: auto; min-height: 0; max-height: none; min-width: 0; }
.center-column { padding-inline: 24px; padding-bottom: calc(32px + 42px + 42px + 32px);
& .search-form { display: none; } }
#queue-content { flex: 0 0 auto; }
.app-brand { width: var(--logo-size-mobile); height: var(--logo-size-mobile); }
.right-column { display: none; }}