html { background-color: #fff; } body { font-family: lato, sans-serif; line-height: 1.3; background-color: #333; color: #fff; text-shadow: 0 1px 1px #000; max-width: 800px; margin: 0 auto; overflow: hidden; display: flex; flex-direction: column; height: 100vh; } body > header, body > footer { box-shadow: 0 0 3px #000; } input, select, button { color: inherit; } button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; padding: 0; border: none; line-height: 1; cursor: pointer; } .icon { width: 24px; } .icon path:not([fill]), .icon polygon:not([fill]), .icon circle:not([fill]) { fill: currentColor; } @font-face { font-family: 'Lato'; src: url('font/LatoLatin-Regular.woff2') format('woff2'); font-style: normal; font-weight: normal; } @font-face { font-family: 'Lato'; src: url('font/LatoLatin-bold.woff2') format('woff2'); font-style: bold; font-weight: normal; } main { flex-grow: 1; overflow: hidden; } nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; } nav ul li { text-align: center; flex: 1 0 0; line-height: 40px; } nav ul li:hover { background-color: red; } nav ul li.active { background-color: green; } #player { display: flex; flex-direction: row; } #player .art img { vertical-align: top; } #player .info { flex-grow: 1; } #player:not([data-state=play]) .pause { display: none; } #player[data-state=play] .play { display: none; } #player:not([data-flags~=random]) .random, #player:not([data-flags~=repeat]) .repeat { opacity: 0.5; } #player button { width: 64px; height: 64px; } .component { height: 100%; display: flex; flex-direction: column; } .component ul { flex-grow: 1; overflow: auto; list-style: none; margin: 0; padding: 0; } .component .grid li { display: flex; flex-direction: row; align-items: center; } .component .grid li h2 { flex-grow: 1; font-size: 100%; font-weight: normal; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .component .grid li:nth-child(odd) { background-color: #555; } .component .grid button { flex-shrink: 0; width: 32px; height: 32px; font-size: 32px; } #queue { height: 100%; display: flex; flex-direction: column; } #queue ul { flex-grow: 1; overflow: auto; list-style: none; margin: 0; padding: 0; } #queue .grid li { display: flex; flex-direction: row; align-items: center; } #queue .grid li h2 { flex-grow: 1; font-size: 100%; font-weight: normal; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #queue .grid li:nth-child(odd) { background-color: #555; } #queue .grid button { flex-shrink: 0; width: 32px; height: 32px; font-size: 32px; } #queue li { display: flex; flex-direction: row; } #queue li + li { border-top: 1px solid #888; } #queue .current { font-weight: bold; } #library { height: 100%; display: flex; flex-direction: column; } #library ul { flex-grow: 1; overflow: auto; list-style: none; margin: 0; padding: 0; } #library .grid li { display: flex; flex-direction: row; align-items: center; } #library .grid li h2 { flex-grow: 1; font-size: 100%; font-weight: normal; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #library .grid li:nth-child(odd) { background-color: #555; } #library .grid button { flex-shrink: 0; width: 32px; height: 32px; font-size: 32px; } #fs { height: 100%; display: flex; flex-direction: column; } #fs ul { flex-grow: 1; overflow: auto; list-style: none; margin: 0; padding: 0; } #fs .grid li { display: flex; flex-direction: row; align-items: center; } #fs .grid li h2 { flex-grow: 1; font-size: 100%; font-weight: normal; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #fs .grid li:nth-child(odd) { background-color: #555; } #fs .grid button { flex-shrink: 0; width: 32px; height: 32px; font-size: 32px; }