html {
height: 100%;
}
html body {
margin: 0;
font-family: 'Cinzel', serif;
background-color: #0d0d0d;
color: #f0f0f0;
width: 100%;
min-width: 320px;
height: 100%;
text-align: center;
}
html body header {
width: 100%;
height: 100%;
position: relative;
}
html body header img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-height: 80%;
max-width: 80%;
cursor: pointer;
}
html body header button {
position: absolute;
right: 0;
bottom: 48px;
left: 0;
margin: auto;
height: 48px;
width: 158px;
background: url('/images/button-bg.png') center/contain no-repeat;
border: 0;
color: #a6a9a7;
font-size: 9px;
text-transform: uppercase;
}
html body header button:hover {
color: #fff;
}
html body hr, html body hr.two {
border: none;
height: 48px;
width: 100%;
margin: 24px 0;
}
html body hr {
background: url('/images/hr.png') center/contain no-repeat;
}
html body hr.two {
background: url('/images/hr2.png') center/contain no-repeat;
}
html body a {
color: #a6a9a7;
}
html body section {
display: block;
padding: 0 0 24px 0;
margin: 0 auto;
box-sizing: border-box;
text-align: center;
width: 100%;
max-width: 768px;
}
html body section h1, html body section h2 {
display: inline-block;
line-height: 48px;
height: 48px;
width: auto;
max-width: 512px;
background-image: url('/images/hrl.png'), url('/images/hrr.png');
background-position: left 12px center, right 12px center;
background-repeat: no-repeat;
margin: 24px 0;
padding: 0 120px;
box-sizing: border-box;
font-weight: normal;
font-size: 24px;
text-transform: uppercase;
}
html body section h3 {
display: block;
line-height: 48px;
height: 48px;
width: auto;
margin: 0 0 24px 0;
padding: 0;
box-sizing: border-box;
font-weight: normal;
font-size: 24px;
}
html body section h4 {
font-weight: normal;
text-transform: uppercase;
}
html body section h5 {
font-weight: normal;
text-transform: uppercase;
padding: 24px 0 0 24px;
margin: 0;
box-sizing: border-box;
font-size: 16px;
}
html body section p {
display: inline-block;
margin: 0;
padding: 24px 24px 0 24px;
box-sizing: border-box;
font-size: 16px;
line-height: 24px;
width: 100%;
}
html body section a {
color: #fff;
}
html body section img.cover {
width: 100%;
max-width: 480px;
}
html body section div.toggle {
height: 0;
overflow: hidden;
transition: height 1.6s ease;
text-align: left;
}
html body section div.toggle div.cover {
width: 100%;
padding: 24px;
box-sizing: border-box;
margin: 24px 0 0 0;
}
html body section div.toggle div.cover img {
width: 100%;
}
html body section ol {
display: inline-block;
list-style-type: none;
width: 100%;
max-width: 512px;
padding: 24px 24px 0 24px;
box-sizing: border-box;
margin: 0;
}
html body section ol li {
padding: 0;
}
html body section ol li ul {
display: inline-block;
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
width: 100%;
height: 48px;
}
html body section ol li ul li {
float: left;
padding: 0 4px 0 0;
line-height: 48px;
font-size: 15px;
min-width: 20px;
}
html body section ol li ul li:nth-last-child(-n+2) {
float: right;
}
html body section ol li ul li button {
display: inline-block;
height: 32px;
width: 98px;
border: 1px solid #a0a0a0;
border-radius: 4px;
float: right;
margin: 8px;
padding: 0 12px 0 42px;
box-sizing: border-box;
background-color: transparent;
background-image: url(/images/listen-off.png);
background-position: left 6px center;
background-repeat: no-repeat;
background-size: 24px 24px;
color: #a6a9a7;
font-size: 9px;
text-transform: uppercase;
}
html body section ol li ul li button:hover {
color: #fff;
border: 1px solid #fff;
}
html body section ol li ul li button.play {
background-image: url('/images/listen-on.png');
color: #fff;
background-color: #2d2d2d;
}
html body section ol li ul li span {
font-size: 15px;
border-bottom: 1px dashed #a6a9a7;
cursor: pointer;
}
html body section ol li ul li span.trim {
font-size: 15px;
border-bottom: 0;
cursor: default;
}
html body section button {
display: block;
height: 40px;
width: 185px;
border: 0;
padding: 0 16px 0 42px;
margin: 24px auto;
box-sizing: border-box;
background-color: transparent;
background-image: url('/images/play.png'), url('/images/button-bg.png');
background-position: left 16px center, center;
background-repeat: no-repeat, no-repeat;
background-size: 24px 24px, auto;
color: #a6a9a7;
font-size: 9px;
text-transform: uppercase;
}
html body section button:hover, html body section button.more:hover {
color: #fff;
}
html body section button.play {
background-image: url('/images/stop.png'), url('/images/button-bg.png');
}
html body section button.more {
padding: 0 16px;
background-image: url('/images/button-bg.png');
background-position: center;
background-repeat: no-repeat;
background-size: auto;
}
html body footer {
padding: 48px;
box-sizing: border-box;
text-align: center;
width: 100%;
}
html body audio {
display: none;
}
/* Streaming icons */
html body section .streaming-icons {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
padding: 24px 24px 0 24px;
}
html body section .streaming-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border: 2px solid #a0a0a0;
border-radius: 50%;
color: #fff;
text-decoration: none;
background-color: transparent;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
html body section .streaming-icons a:hover {
border-color: #fff;
background-color: #2d2d2d;
}
html body section .streaming-icons svg {
display: block;
width: 28px;
height: 28px;
fill: currentColor;
}
html body section .streaming-icons img {
display: block;
width: 28px;
height: 28px;
object-fit: contain;
}
/* Force Deezer icon to monochrome white */
html body section .streaming-icons a[aria-label="Deezer"] img {
filter: brightness(0) invert(1);
}
html body .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Общее время альбома над кнопкой */
html body .album-remaining {
display: block;
margin: 8px auto 4px auto;
color: #a6a9a7;
font-size: 12px;
opacity: .85;
width: 185px;
text-transform: none;
}
@media (max-width: 425px) {
html body header img {
max-height: 100%;
max-width: 100%;
}
html body section ol li ul li button {
width: 32px;
padding: 0 0 0 32px;
overflow: hidden;
}
}