body {
--vertical-spacing: 18px;
--horizontal-spacing: 18px;
--border-width: 2px;
--border-color: currentColor;
--one-line: calc( 1em * var( --line-height ) );
--one-line--small: calc( var( --font-size--small ) * var( --line-height--small ) );
--one-line--regular: calc( var( --font-size--regular ) * var( --line-height--regular ) );
--footer-spacing: calc( var( --one-line--small ) * 4 ); display: flex;
flex-direction: column;
}
header {
flex-shrink: 0;
}
#page {
overflow: hidden;
flex: 1;
display: flex;
flex-direction: column;
}
main {
padding: 0 var( --horizontal-spacing );
}
footer {
flex-shrink: 0;
}
table {
width: 100%;
}
th {
text-align: left;
}
audio-wrap {}
audio-control {}
audio-control > img {
height: calc( var( --one-line--regular ) * 0.9 );
width: auto;
}
audio-progress {
margin-left: calc( var( --one-line--regular ) * 0.4 );
}
audio-progress-bar::before {
content: '';
position: absolute;
top: calc( 50% - var( --border-width ) * 0.5 );
left: 0;
width: 100%;
height: var( --border-width );
background: currentColor;
}
audio-progress-bar::after {
left: calc( var( --progress ) * 100% - var( --border-width ) * 0.5 );
width: var( --border-width );
}
audio-tracks:not( :empty ) {
margin-top: calc( var( --one-line--regular ) * 0.5 );
}
audio-track {
display: flex;
justify-content: space-between;
}
.audio-track__title {
flex: 1;
}
.audio-track__duration {
flex-shrink: 0;
padding-left: var( --horizontal-spacing );
} @media ( min-width: 700px ) {
body {
--vertical-spacing: 14px;
--horizontal-spacing: 14px;
}
} @media ( min-width: 1100px ) {
body {
--vertical-spacing: 1.056vw;
--horizontal-spacing: 1.056vw;
}
}