updated schema to support album tracks
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
parent
63221e9fd2
commit
749f9bc8b7
10 changed files with 324 additions and 806 deletions
|
|
@ -34,6 +34,27 @@ a:hover {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.link-button {
|
||||
padding: .3em .5em;
|
||||
border: 1px solid var(--links);
|
||||
color: var(--links);
|
||||
border-radius: 2px;
|
||||
background-color: transparent;
|
||||
transition-property: color, border-color, background-color;
|
||||
transition-duration: .2s;
|
||||
animation-delay: 0s;
|
||||
animation: list-item-fadein .2s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
a.link-button:hover {
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
background-color: var(--links) !important;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 1em var(--links);
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 1em;
|
||||
color: #aaa;
|
||||
|
|
|
|||
|
|
@ -358,6 +358,33 @@ ul#links a:hover {
|
|||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
#share {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
line-height: 1em;
|
||||
text-shadow: 0 .05em 2px #0004;
|
||||
cursor: pointer;
|
||||
opacity: .5;
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
|
||||
#share:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#share.active {
|
||||
animation: share-click .5s forwards
|
||||
}
|
||||
|
||||
#share.active::after {
|
||||
content: "✓";
|
||||
position: relative;
|
||||
left: .2em;
|
||||
font-size: 1.2em;
|
||||
line-height: 1em;
|
||||
animation: share-after 2s cubic-bezier(.5,0,1,.5) forwards
|
||||
}
|
||||
|
||||
div#extras ul {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -388,11 +415,6 @@ div#extras ul li a.active {
|
|||
color: #eee;
|
||||
}
|
||||
|
||||
a.scrollback {
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#credits ul {
|
||||
list-style: "> ";
|
||||
}
|
||||
|
|
@ -401,85 +423,30 @@ a.scrollback {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#share {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
line-height: 1em;
|
||||
text-shadow: 0 .05em 2px #0004;
|
||||
#tracks ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#tracks ul li {
|
||||
margin-bottom: .5rem;
|
||||
padding: 1rem;
|
||||
background-color: #0008;
|
||||
cursor: pointer;
|
||||
opacity: .5;
|
||||
transition: opacity .1s linear;
|
||||
transition: background-color .1s linear;
|
||||
}
|
||||
|
||||
#share:hover {
|
||||
opacity: 1;
|
||||
#tracks ul li:hover {
|
||||
background-color: #2228;
|
||||
}
|
||||
|
||||
#share.active {
|
||||
animation: share-click .5s forwards
|
||||
#tracks ul li:active {
|
||||
background-color: #4448;
|
||||
}
|
||||
|
||||
#share.active::after {
|
||||
content: "✓";
|
||||
position: relative;
|
||||
left: .2em;
|
||||
font-size: 1.2em;
|
||||
line-height: 1em;
|
||||
animation: share-after 2s cubic-bezier(.5,0,1,.5) forwards
|
||||
}
|
||||
|
||||
#tracks {
|
||||
flex-basis: 100%;
|
||||
max-height: 10rem;
|
||||
margin: auto 8rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 2rem;
|
||||
overflow-y: auto;
|
||||
scrollbar-color: #fff transparent;
|
||||
scrollbar-width: thin
|
||||
}
|
||||
|
||||
#tracks .track-preview {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #fff2;
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
transition: background-color .2s,color .2s
|
||||
}
|
||||
|
||||
#tracks .track-preview: last-of-type {
|
||||
border-bottom: none
|
||||
}
|
||||
|
||||
.track-preview:hover {
|
||||
background-color: #0002
|
||||
}
|
||||
|
||||
.track-preview.playing {
|
||||
color: #111;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.track-preview i {
|
||||
width: .7em;
|
||||
margin: auto .8em;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.track-preview p {
|
||||
margin: auto 0;
|
||||
display: inline-block;
|
||||
line-height: 2em;
|
||||
font-size: 1em;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.track-preview audio {
|
||||
width: 100%
|
||||
#tracks ul li.active {
|
||||
color: #000;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -510,28 +477,6 @@ footer a:hover {
|
|||
text-decoration: underline
|
||||
}
|
||||
|
||||
/*
|
||||
@media only screen and (min-width: 1105px) {
|
||||
div#music-container:not(:has(> div#info #credits:target)):not(:has(> div#info #lyrics:target)) {
|
||||
div#extras ul li:first-of-type a {
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
div#music-container:has(> div#info #credits:target) {
|
||||
div#extras ul li a[href="#credits"] {
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
div#music-container:has(> div#info #lyrics:target) {
|
||||
div#extras ul li a[href="#lyrics"] {
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@media only screen and (max-width: 1105px) {
|
||||
main {
|
||||
min-height: calc(100vh - 4rem);
|
||||
|
|
@ -619,10 +564,6 @@ footer a:hover {
|
|||
transform: translate(calc(-50% - .6em),1.5em);
|
||||
}
|
||||
|
||||
#tracks {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 4rem;
|
||||
font-size: .8rem;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@ main {
|
|||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
main nav {
|
||||
margin: -1rem .5rem 1rem .5rem;
|
||||
}
|
||||
|
||||
div.music {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1.5rem;
|
||||
|
|
@ -93,6 +97,7 @@ h3.music-type-upcoming {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
/*
|
||||
.music-links li a {
|
||||
padding: .2em .5em;
|
||||
border: 1px solid #65b4fd;
|
||||
|
|
@ -106,13 +111,13 @@ h3.music-type-upcoming {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.music-links li a:hover {
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
background-color: var(--links) !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
*/
|
||||
|
||||
h2.question {
|
||||
margin: 1rem 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue