b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
116 lines
1.9 KiB
CSS
Executable file
116 lines
1.9 KiB
CSS
Executable file
body {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
body[data-search="true"] {
|
|
overflow: hidden;
|
|
}
|
|
|
|
music-search-box {
|
|
padding: 0 16px 10px;
|
|
border-bottom: solid 1px var(--border-color);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
music-search-box[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
#tiles {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.search-open #tiles {
|
|
display: none;
|
|
}
|
|
|
|
.tile {
|
|
border-bottom: solid 0.1rem var(--background);
|
|
box-sizing: border-box;
|
|
display: block;
|
|
float: inline-start;
|
|
text-align: match-parent;
|
|
position: relative;
|
|
width: 33.333vw;
|
|
height: 33.333vw;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tile:nth-child(3n+1) {
|
|
width: 66.666vw;
|
|
height: 66.666vw;
|
|
}
|
|
|
|
.tile:nth-child(6n+4),
|
|
.tile:nth-child(6n+5),
|
|
.tile:nth-child(6n+6) {
|
|
float: inline-end;
|
|
}
|
|
|
|
.tile:nth-child(1),
|
|
.tile:nth-child(2) {
|
|
border-top: solid 0.1rem var(--background);
|
|
}
|
|
|
|
.tile:nth-child(6n+1) {
|
|
border-right: solid 0.1rem var(--background);
|
|
}
|
|
|
|
.tile:nth-child(6n+4) {
|
|
border-left: solid 0.1rem var(--background);
|
|
}
|
|
|
|
.tile:before,
|
|
.tile:after {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
text-shadow: 0 0.1rem rgba(0, 0, 0, 0.5);
|
|
position: absolute;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
padding: 0.15rem 1rem;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2.8rem;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
opacity: 1;
|
|
transition: opacity 250ms;
|
|
}
|
|
|
|
.tile.loaded:not(.show-title):before,
|
|
.tile.loaded:not(.show-title):after {
|
|
opacity: 0;
|
|
}
|
|
|
|
.tile:before {
|
|
content: attr(data-artist);
|
|
color: #fff;
|
|
font-size: 1.9rem;
|
|
line-height: 2.8rem;
|
|
top: 0;
|
|
}
|
|
|
|
.tile:after {
|
|
content: attr(data-album);
|
|
color: rgba(255, 255, 255, 0.65);
|
|
font-size: 1.4rem;
|
|
line-height: 2.2rem;
|
|
top: 2.8rem;
|
|
}
|
|
|
|
.tile > img {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0;
|
|
transition: opacity 250ms;
|
|
}
|
|
|
|
.tile.loaded > img {
|
|
opacity: 1;
|
|
}
|