This commit is contained in:
flash 2023-10-14 13:41:31 +00:00
parent 3dd9a21069
commit d9758fb28a
3 changed files with 63 additions and 68 deletions

View file

@ -197,73 +197,7 @@ body {
@include index.css;
.header-now-playing {
max-height: 60px;
min-width: 300px;
max-width: 500px;
height: 100%;
background-image: linear-gradient(0deg, #111c 0%, #222c 50%, #333c 50%, #555c 100%);
box-shadow: 0 2px 1em #000;
border-radius: 5px;
overflow: hidden;
align-items: center;
bottom: 0;
padding: 5px;
display: grid;
grid-template-columns: 25px 50px 1fr;
column-gap: 5px;
transition: bottom .5s, width .2s, max-height .5s, padding .2s;
}
.header-now-playing-hidden {
bottom: -80px;
max-height: 0;
padding: 0;
}
.header-now-playing-icon img {
vertical-align: middle;
}
.header-now-playing-cover {
width: 50px;
height: 50px;
}
.header-now-playing-cover img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
}
.header-now-playing-details {
overflow: hidden;
white-space: nowrap;
}
.header-now-playing-details a {
color: #fff;
text-decoration: none;
transition: width .2s;
}
.header-now-playing-details a:hover,
.header-now-playing-details a:focus {
text-decoration: underline;
}
.header-now-playing-title {
font-size: 1.2em;
}
.header-now-playing-title,
.header-now-playing-artist {
overflow: hidden;
text-overflow: ellipsis;
}
.http-error {
text-align: center;
}
.http-error-head {
font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
font-size: 2.5em;
line-height: 2em;
font-weight: 400;
}
@include np.css;
@include featured.css;
@include section.css;

56
assets/2021.css/np.css Normal file
View file

@ -0,0 +1,56 @@
.header-now-playing {
max-height: 60px;
min-width: 300px;
max-width: 500px;
height: 100%;
background-image: linear-gradient(0deg, #111c 0%, #222c 50%, #333c 50%, #555c 100%);
box-shadow: 0 2px 1em #000;
border-radius: 5px;
overflow: hidden;
align-items: center;
bottom: 0;
padding: 5px;
display: grid;
grid-template-columns: 25px 50px 1fr;
column-gap: 5px;
transition: bottom .5s, width .2s, max-height .5s, padding .2s;
}
.header-now-playing-hidden {
bottom: -80px;
max-height: 0;
padding: 0;
}
.header-now-playing-icon img {
vertical-align: middle;
}
.header-now-playing-cover {
width: 50px;
height: 50px;
}
.header-now-playing-cover img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
}
.header-now-playing-details {
overflow: hidden;
white-space: nowrap;
}
.header-now-playing-details a {
color: #fff;
text-decoration: none;
transition: width .2s;
}
.header-now-playing-details a:hover,
.header-now-playing-details a:focus {
text-decoration: underline;
}
.header-now-playing-title {
font-size: 1.2em;
}
.header-now-playing-title,
.header-now-playing-artist {
overflow: hidden;
text-overflow: ellipsis;
}

View file

@ -14,7 +14,12 @@
]) %}
{% set master_body_attrs = master_body_attrs|default([])|merge({
'class': html_classes({ 'index': header_is_index is defined, 'fullscreen-header': header_full is defined, 'now-playing': header_now_playing is defined, 'header-minimal': header_minimal is defined }),
'class': html_classes({
'index': header_is_index is defined,
'fullscreen-header': header_full is defined,
'now-playing': header_now_playing is defined,
'header-minimal': header_minimal is defined
}),
}) %}
{% block master_head %}