65 lines
1 KiB
CSS
65 lines
1 KiB
CSS
body {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 128px 100px 300px 32px;
|
|
gap: 0 0;
|
|
grid-auto-flow: row;
|
|
grid-template-areas: "header" "playlist" "db" "footer";
|
|
}
|
|
|
|
header {
|
|
display: grid;
|
|
grid-template-columns: 128px 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
gap: 0 0;
|
|
grid-auto-flow: row;
|
|
grid-template-areas: "config playback-controls playlist-controls track-info";
|
|
grid-area: header;
|
|
}
|
|
|
|
div, header, footer, section {
|
|
border: dotted 1px;
|
|
}
|
|
|
|
header .config {
|
|
grid-area: config;
|
|
}
|
|
|
|
header .playback-controls {
|
|
grid-area: playback-controls;
|
|
}
|
|
|
|
header .playlist-controls {
|
|
grid-area: playlist-controls;
|
|
}
|
|
|
|
header .track-info {
|
|
grid-area: track-info;
|
|
}
|
|
|
|
footer {
|
|
grid-area: footer;
|
|
}
|
|
|
|
section.db {
|
|
display: grid;
|
|
grid-template-columns: 0.7fr 1.3fr;
|
|
grid-template-rows: 1fr;
|
|
gap: 0 0;
|
|
grid-auto-flow: row;
|
|
grid-template-areas: "tabs result";
|
|
grid-area: db;
|
|
}
|
|
|
|
.db .tabs {
|
|
grid-area: tabs;
|
|
}
|
|
|
|
.db .result {
|
|
grid-area: result;
|
|
}
|
|
|
|
.playlist {
|
|
overflow: auto;
|
|
}
|