340 lines
6.8 KiB
CSS
340 lines
6.8 KiB
CSS
@font-face {
|
|
font-family: "Open Sans";
|
|
src: url("./priv/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf")
|
|
format("truetype") tech("variations");
|
|
src: url("./priv/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf")
|
|
format("truetype-variations");
|
|
font-weight: 300 800;
|
|
font-stretch: 75% 100%;
|
|
}
|
|
|
|
:root {
|
|
--font-family: "Open Sans", ui-sans-serif;
|
|
|
|
--background-gradient-bottom: rgb(131, 58, 180, 1);
|
|
--background-gradient-middle: rgba(253, 29, 29, 1);
|
|
--background-gradient-top: rgba(252, 176, 69, 1);
|
|
--text-color: #123456;
|
|
|
|
--glass-opacity: 0.3;
|
|
--glass-opacity-active: 0.2;
|
|
--glass-shadow-opacity: 0.1;
|
|
--glass-background: rgba(255, 255, 255, var(--glass-opacity));
|
|
--glass-blur: 10px;
|
|
--glass-border-color: rgba(255, 255, 255, var(--glass-opacity));
|
|
--glass-border: 1px solid var(--glass-border-color);
|
|
--glass-shadow: 0 4px 30px rgba(0, 0, 0, var(--glass-shadow-opacity));
|
|
|
|
--border-radius: 10px;
|
|
|
|
--button-border-radius-small: calc(var(--border-radius) / 2);
|
|
--button-border-radius: var(--border-radius);
|
|
|
|
--side-margin: 5px;
|
|
--double-margin: calc(var(--side-margin) * 2);
|
|
|
|
--track-thumb-size: 20px;
|
|
--track-scale-factor: 4;
|
|
|
|
--library-top-nav-height: 45px;
|
|
}
|
|
|
|
.glass-bg,
|
|
.glass-button,
|
|
.glass-input {
|
|
background: var(--glass-background);
|
|
}
|
|
|
|
.glass-button:active {
|
|
background: rgba(255, 255, 255, var(--glass-opacity-active));
|
|
}
|
|
|
|
.glass-shadow,
|
|
.glass-button,
|
|
.glass-input {
|
|
box-shadow: var(--glass-shadow);
|
|
}
|
|
|
|
.glass-blur,
|
|
.glass-button,
|
|
.glass-input {
|
|
backdrop-filter: blur(var(--glass-blur));
|
|
-webkit-backdrop-filter: blur(var(--glass-blur));
|
|
}
|
|
|
|
.glass-border,
|
|
.glass-button,
|
|
.glass-input {
|
|
border: var(--glass-border);
|
|
}
|
|
|
|
.glass-button {
|
|
border-radius: var(--button-border-radius);
|
|
}
|
|
|
|
.button-small,
|
|
.glass-input {
|
|
border-radius: var(--button-border-radius-small);
|
|
}
|
|
|
|
.glass-button,
|
|
.glass-input {
|
|
padding: var(--side-margin);
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.button-group .glass-button {
|
|
border-radius: 0;
|
|
border-right: none;
|
|
}
|
|
|
|
.button-group .glass-button:first-child {
|
|
border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
|
|
}
|
|
|
|
.button-group .glass-button:last-child {
|
|
border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
|
|
border-right: var(--glass-border);
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background-gradient-bottom);
|
|
background: linear-gradient(
|
|
0deg,
|
|
var(--background-gradient-bottom) 0%,
|
|
var(--background-gradient-middle) 50%,
|
|
var(--background-gradient-top) 100%
|
|
);
|
|
color: var(--text-color);
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
main {
|
|
margin: var(--side-margin);
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
tracks-view,
|
|
albums-view,
|
|
artists-view,
|
|
single-artist-view {
|
|
display: block;
|
|
|
|
margin-top: calc(var(--library-top-nav-height) + var(--side-margin));
|
|
overflow-y: hidden;
|
|
height: calc(
|
|
100vh - (var(--library-top-nav-height) + var(--side-margin)) -
|
|
var(--double-margin)
|
|
);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
#authed-view-wrapper {
|
|
height: calc(100vh - 2 * var(--side-margin));
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
#authed-view-library {
|
|
flex: 1 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#authed-view-player {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: var(--side-margin);
|
|
|
|
border-radius: 10px 10px 0 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
#authed-view-wrapper[data-player-status="closed"] #authed-view-player {
|
|
display: none;
|
|
}
|
|
|
|
#player-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 5px;
|
|
}
|
|
|
|
#player-wrapper-track-title {
|
|
font-weight: 100;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#player-controls {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
gap: 5px;
|
|
}
|
|
|
|
#player-track {
|
|
flex: 1 1;
|
|
}
|
|
|
|
#player-track::-webkit-slider-thumb {
|
|
appearance: none;
|
|
border: var(--glass-border);
|
|
height: var(--track-thumb-size);
|
|
width: var(--track-thumb-size);
|
|
border-radius: 50%;
|
|
background: var(--glass-background);
|
|
cursor: pointer;
|
|
box-shadow: var(--glass-shadow);
|
|
transform: translateY(
|
|
calc(
|
|
-50% - 0.5px + var(--track-thumb-size) / (var(--track-scale-factor) * 2)
|
|
)
|
|
);
|
|
}
|
|
#player-track::-moz-range-thumb {
|
|
appearance: none;
|
|
border: var(--glass-border);
|
|
height: var(--track-thumb-size);
|
|
width: var(--track-thumb-size);
|
|
border-radius: 50%;
|
|
background: var(--glass-background);
|
|
cursor: pointer;
|
|
box-shadow: var(--glass-shadow);
|
|
}
|
|
|
|
#player-track::-webkit-slider-runnable-track {
|
|
width: calc(100% - var(--track-thumb-size));
|
|
height: calc(var(--track-thumb-size) / var(--track-scale-factor));
|
|
cursor: pointer;
|
|
box-shadow: var(--glass-shadow);
|
|
background: var(--glass-background);
|
|
border-radius: 1.3px;
|
|
border: 0.2px solid var(--glass-border-color);
|
|
}
|
|
#player-track::-moz-range-track {
|
|
width: calc(100% - var(--track-thumb-size));
|
|
height: calc(var(--track-thumb-size) / var(--track-scale-factor));
|
|
cursor: pointer;
|
|
box-shadow: var(--glass-shadow);
|
|
background: var(--glass-background);
|
|
border-radius: 1.3px;
|
|
border: 0.2px solid var(--glass-border-color);
|
|
}
|
|
|
|
#library-top-nav {
|
|
position: fixed;
|
|
top: var(--side-margin);
|
|
left: var(--side-margin);
|
|
right: var(--side-margin);
|
|
height: var(--library-top-nav-height);
|
|
}
|
|
|
|
#library-top-nav .button-group {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#library-top-nav button {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
#search-bar {
|
|
position: absolute;
|
|
bottom: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: calc(100vw - 20px);
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
gap: var(--double-margin);
|
|
}
|
|
|
|
#search-bar-input-wrapper {
|
|
flex: 1 1;
|
|
}
|
|
|
|
#search-bar-input-wrapper input {
|
|
width: 100%;
|
|
}
|
|
|
|
.library-list {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#authed-view-wrapper[data-player-status="open"] .library-list {
|
|
padding-bottom: 80px;
|
|
}
|
|
|
|
#artists-view .library-list,
|
|
#albums-view .library-list,
|
|
#single-artist-view .library-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
grid-auto-flow: dense;
|
|
|
|
/* Ensure the grid doesn't stretch when there's only a few elements */
|
|
grid-auto-rows: min-content;
|
|
|
|
gap: var(--double-margin);
|
|
padding: var(--double-margin);
|
|
}
|
|
|
|
.track-item {
|
|
padding-left: var(--side-margin);
|
|
padding-right: var(--side-margin);
|
|
}
|
|
|
|
.library-list-shuffle-all {
|
|
grid-column: 1 / -1;
|
|
padding: var(--double-margin) var(--side-margin);
|
|
}
|
|
|
|
.library-item-thumbnail {
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.library-item-expanded {
|
|
}
|
|
|
|
.library-item-expanded-contents {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.library-item {
|
|
cursor: default;
|
|
}
|
|
|
|
.library-item:active {
|
|
background: var(--glass-background);
|
|
}
|
|
|
|
.library-item img {
|
|
}
|
|
|
|
.library-item h3 {
|
|
overflow-wrap: break-word;
|
|
}
|