:root{
--color-primary: #06c188;
--x-gap: 7.5vw;
--loop-cols: 6;
}
body{
--body-bg-color: #fff;
--side-width: 15rem;
--side-icon-height: 20px;
--side-nav-hover-background: #fff;
--content-width: 100%;
--border-radius: 0.5rem;
--button-radius: 0.5rem;
--header-title-size: 3rem;
--header-image-size: 16rem;
--header-x-gap: 2rem;
--header-y-gap: 1.5rem;
--site-logo-height: 2rem;
--loop-line: 2;
}
.wp-block-loop{
--loop-radius: 6px;
}
.wp-block-bg-light{
background-color: rgba(190, 200, 210, 0.1);
}
h3, .h3 {
font-size: 1.2rem;
}
h4, .h4 {
font-size: 1rem;
}
h5, .h5 {
font-size: 0.85rem;
}
h6, .h6 {
font-size: 0.75rem;
}
.comments-title,
.block-loop-title{
font-size: clamp(1.05rem, 5vw, 1.75rem);
font-weight: 700;
}
.single-post,
.archive.category,
.archive.tag {
--content-width: 50rem;
} .header-station > .entry-header .entry-artist,
.site-sidebar .nav li.current-menu-item > a,
.site-sidebar .nav li.current-menu-item svg{
color: var(--color-primary);
}
.site-sidebar .menu-item:not(.btn-link) svg{
color: #bbb;
}
.dark .plyr-playlist .plyr-list,
.dark .site-sidebar{
background-color: var(--color-grey-700);
}
.dark .site-sidebar{
--side-nav-hover-background: rgba(230,240,255,0.2);
}
.dark .mobile-menu,
.dark .plyr-playlist .plyr{
background-color: var(--color-grey-700);
}
[data-plyr="play"]{
background-color: var(--color-primary);
color: #fff;
} .btn-play{
box-shadow: none;
border: none;
}
.header-user .btn-play,
.header-station > .entry-header .btn-play{
width: 3rem;
height: 3rem;
font-size: 1.1rem;
background-color: var(--color-primary);
color: #fff;
}
.waveform .btn-play{
color: #aaa;
}
.btn-play-waveform{
background-color: transparent;
}
.btn-follow.active{
background-color: currentColor;
}
.btn-follow.active span{
color: #fff;
} body.author .site-content{
margin-top: 0;
}
.header-station,
.header-user{
display: flex;
flex-wrap: wrap;
grid-gap: var(--header-x-gap);
grid-row-gap: var(--header-y-gap);;
padding: 1.5rem var(--x-gap);
width: 100% !important;
max-width: 100vw !important;
position: relative;
overflow: hidden;
}
.header-station{
margin-bottom: 1.5rem;
}
.entry-header-container > .post-thumbnail{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
margin: 0;
background-color: var(--color-grey-800);
}
.entry-header-container .post-thumbnail:after{
padding-top: 100%;
min-height: auto;
content: "";
width: 100%;
display: block;
}
.entry-header-container .post-thumbnail img,
.entry-header-container .post-thumbnail .avatar{
border-radius: inherit;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.header-station .entry-meta{
--entry-meta-grid-gap: 0.5rem;
width: 100%;
margin-bottom: 0;
}
.header-station .waveform,
.header-station .editor-note,
.header-station .station-copyright,
.header-station .block-loop-row{
width: 100%;
}
.site-header:before{
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
background: var(--color-grey-800);
}
body.author:not(.scrolled) .site-header,
.is-single-play-post.featured-image .site-header{
background-color: transparent;
box-shadow: none;
}
body.author:not(.scrolled) .site-header:before,
.site-header-transparent:not(.scrolled) .site-header:before,
.is-single-play-post.featured-image:not(.scrolled) .site-header:before{
height: 150%;
background: linear-gradient(0, transparent, rgba(0, 0, 0, 0.45));
}
.scrolled .site-header:before{
height: 100%;
background: var(--color-grey-800);
}
.site-navbar{
transform: translate3d(0, 0, 0);
transition: min-height 0.5s ease;
}
body.author:not(.scrolled) .site-navbar,
body:not(.scrolled).site-header-transparent .site-navbar,
body:not(.scrolled).is-single-play-post.featured-image .site-navbar{
--navbar-height: 5rem;
}
.is-single-play-post.featured-image .site-content{
margin-top: 0;
}
.header-user,
.featured-image .header-station{
padding-top: calc(var(--navbar-height) + 20vh);
}
.featured-image .header-station .entry-header > *:not(.entry-meta){
color: #fff;
--color-primary: #fff;
--text-secondary-color: rgba(255,255,255,0.75);
}
.featured-image .header-station .entry-header .entry-meta,
.featured-image .header-station .entry-header .entry-info{
color: rgba(255,255,255,0.75);
margin-bottom: 1.5rem;
--text-secondary-color: rgba(255,255,255,0.75);
}
.featured-image .header-station .avatar,
.featured-image .header-station .verified,
.featured-image .header-station .private{
background-color: rgba(255,255,255,0.25);
}
.featured-image .header-station:after{
display: block;
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(0, var(--color-grey-800), transparent);
}
.editor-note{
margin-bottom: 0;
}
.header-station .waveform .btn-play,
.header-station .waveform .sep-1{
display: none;
}
.has-loop-posts .block-loop-item{
padding: 0.5rem 0.5rem;
border-radius: var(--border-radius);
min-height: 3.5rem;
}
.has-loop-posts .block-loop-item:nth-child(even){
background-color: rgba(150, 155, 160, 0.05);
}
.has-loop-posts .block-loop-item:hover{
background-color: var(--tracks-item-odd-color, rgba(150,155,160,0.1));
}
.has-loop-posts .block-loop-item.active{
background-color: var(--tracks-item-hover-color, rgba(150,155,160,0.2));
}
.has-loop-posts .icon-plus{
display: none;
}
.header-station .block-loop-item .entry-meta a{
pointer-events: inherit;
}
.header-station > .entry-header{
margin-top: 0;
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.header-station .entry-tag,
.station-content,
.station-release{
width: 100%;
}
.station-content,
.station-release,
.header-station ~ .entry-content .entry-tag{
margin-bottom: 1.5rem;
}
.header-station > .entry-header .entry-artist,
.header-station > .entry-header .entry-title{
line-height: 1.1;
display: block;
margin: 1rem 0;
font-weight: 700;
}
.header-station > .entry-header .entry-title{
font-size: var(--header-title-size);
margin-top: auto;
}
.header-station > .entry-header .entry-artist{
font-size: 1.25rem;
}
.header-station > .entry-header .entry-tag + .entry-title{
margin-top: 0;
}
.header-station > .entry-header .entry-meta{
margin-top: 1rem;
margin-bottom: 0;
}
.header-station .entry-info{
margin-bottom: auto;
}
.header-station .entry-tag{
margin-top: auto;
margin-bottom: 0.25rem;
font-size: 13px;
}
.header-station .tag{
margin: 0;
}
.header-station .tag a{
border: none;
padding: 0;
margin: 0;
margin-inline-end: 0.5rem;
-webkit-margin-end: 0.5rem;
background-color: transparent;
}
.header-station .tag a:hover{
text-decoration: underline;
color: inherit;
}
.header-station .tag a:before{
content: '#';
display: inline-block;
}
.header-station .station-content{
max-width: 28rem;
}
.header-station .station-content > p:last-child{
margin-bottom: 0;
}
.header-station .station-content,
.header-station .tag a,
.entry-info{
color: var(--text-secondary-color);
}
.waveform-time{
bottom: 0;
top: auto;
transform: none;
}
.waveform-time span{
border-radius: 0;
background-color: #000;
color: #fff;
padding: 0 3px;
}
.archive-content-column > h3{
border-bottom: 0.5px solid var(--color-border);
padding-bottom: var(--y-gap);
} .header-user{
align-items: center;
color: rgba(255, 255, 255, 0.85);
--text-secondary-color: rgba(255, 255, 255, 0.75);
background: linear-gradient(0, rgba(0, 0, 0, 0.9), transparent);
}
.header-user .entry-header{
margin-top: 0;
flex: 1;
}
.header-user .entry-title{
font-size: var(--header-title-size);
font-weight: 700;
margin-bottom: 0.5rem;
}
.header-user .entry-meta{
margin-top: 1rem;
margin-bottom: 0;
}
.header-user .entry-description{
max-width: 32rem;
}
.header-user .entry-description p{
margin-bottom: 2px;
} .navigation .nav > li > a{
padding: 0.75rem 0;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
.navigation .nav > li > a:hover{
border-bottom-color: var(--color-border);
}
.navigation .nav{
grid-gap: 1.5rem;
}
.navigation .nav > li.active > a,
.navigation .nav > li.current_page_item > a{
border-bottom-color: var(--color-primary);
}
.page-navigation{
width: 100%;
box-shadow: var(--box-shadow);
margin-bottom: 1.5rem;
}
.page-navigation .nav{
width: calc(100% - var(--x-gap)* 2);
max-width: var(--content-width);
padding-top: 0;
padding-bottom: 0;
margin: 0 auto;
}
.user-navigation{
margin-bottom: 1.5rem;
box-shadow: 0 0.5px 0 var(--color-border);
font-weight: normal;
width: auto;
padding: 0 var(--x-gap);
}
.user-links svg{
width: 1rem;
height: 1rem;
}
.nav .user-display-name{
display: none;
}
.site-sidebar{
background-color: #fff;
}
.site-navbar > *{
order: 5;
}
.site-navbar > .menu-toggle{
order: 1;
}
.site-navbar > .site-brand{
order: 2;
}
.site-navbar > .navbar-menu{
order: 3;
font-weight: 500;
margin: 0 1rem;
}
.site-navbar > .flex ~ .flex{
display: none;
}
.wp-block-search__input{
height: auto;
border-radius: 3rem;
padding: 0.75rem 1.25rem;
border-color: rgba(0, 0, 0, 0.3);
background-color: #fff !important;
color: #222;
background-clip: padding-box;
}
.wp-block-button.is-style-outline > .wp-block-button__link{
border-width: 1px;
}
.site-sidebar .nav > li:not(.menu-header) > a{
padding: 0.5rem 0.5rem;
margin: 0 -0.5rem;
border-radius: var(--nav-item-radius, 0.5rem);
font-size: 0.85rem;
}
#menu-state:not(:checked) ~ .site-sidebar .nav > li.hide-icon > a{
font-size: 0.95rem;
}
#menu-state:not(:checked) ~ .site-sidebar .nav > li.hide-icon > a svg{
display: none;
}
.site-sidebar .nav > li > a:hover{
background-color: var(--side-nav-hover-background);
}
.site-sidebar .menu-location-name{
font-size: 0 !important;
}
.site-sidebar .nav .svg-icon{
stroke-width: 1.75;
}
.site-sidebar .site-sidebar-header .wp-block-cover{
padding: 1.25rem;
}
.site-title{
color: #fff;
}
.site-header{
color: rgba(255,255,255,0.75);
--sub-menu-color: var(--color-grey-600);
}
.site-header .search-form{
padding: 0;
border-radius: var(--input-border-radius, 0.5rem);
max-width: 15rem;
border-radius: 2rem;
background-color: transparent;
color: rgba(255, 255, 255, 0.75);
flex: 0;
margin: 0;
}
.site-header .search-form input{
width: 0;
padding: 0;
}
#search-state:checked ~ .site-header .search-form{
position: static;
background-color: transparent;
color: #fff;
padding: 0;
}
#search-state:checked ~ .site-header .search-form input{
width: auto;
}
.site-header-transparent .header-container:after{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150%;
z-index: -1;
background: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}
.site-header-transparent .site-navbar .search-form{
background-color: transparent !important;
}
.block-loop-hero .entry-header-inner{
flex: none;
margin-top: auto;
clip-path: polygon(0 0,0 0,0 120%,0 120%);
transform: translate3d(0, 0, 0);
transition: clip-path cubic-bezier(0.075,.82,.165,1) 1s;
transition-delay: 0.6s;
}
.block-loop-hero .entry-meta{
opacity: 0;
transform: translate3d(0, 30%, 0);
transition: all 1s;
transition-delay: 0.5s;
}
.block-loop-hero .slider-active .entry-meta,
.block-loop-hero .slider-active .entry-header-inner{
opacity: 1;
transform: translate3d(0, 0%, 0);
clip-path: polygon(0 -10%, 100% -10%, 100% 120%, 0 120%);
} form label{
margin: 0;
font-size: 12px;
font-weight: normal;
}
.input,
button.btn-toggle-pwd,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
select,
textarea{
padding: 0;
height: 28px;
border-radius: 0;
border: 0;
border-bottom: 1px solid var(--color-border);
}
.comment-respond .must-log-in p,
textarea{
height: auto;
min-height: 28px;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):focus,
select:focus,
textarea:focus{
box-shadow: 0 1px 0 var(--color-primary);
} @media (max-width: 991px) {
body{
--header-image-size: 15rem;
}
}
@media (max-width: 599px){
body{
--header-title-size: 1.75rem;
--header-x-gap: 1rem;
--header-y-gap: 1rem;
--header-image-size: 14rem;
--x-gap: 1rem;
}
.header-station,
.header-user{
flex-direction: column;
}
.header-station > .entry-header{
align-items: center;
}
.header-station .entry-tag,
.header-station > .entry-header .entry-title{
text-align: center;
}
.header-station > .entry-header .entry-meta{
justify-content: center;
}
.header-station .post-thumbnail{
align-self: center;
}
.header-station .station-content{
margin-top: 1rem;
}
.header-user .entry-title{
justify-content: center;
}
.header-user .entry-description{
text-align: center;
}
.header-user .entry-meta{
justify-content: center;
}
.site-title{
font-size: 1rem;
}
.link-more{
display: none;
}
}
@media (min-width: 992px){
.is-album .has-loop-posts .entry-header-inner,
.is-playlist .has-loop-posts .entry-header-inner{
display: flex;
align-items: center;
grid-gap: 1rem;
}
.has-loop-posts .entry-header-inner .entry-title{
min-width: 20rem;
}
.navigation{
position: sticky;
top: calc(var(--adminbar-height) + var(--navbar-height));
z-index: 800;
background-color: var(--body-bg-color);
}
}
@media (min-width: 782px) and (max-width: 991px) {
body{
--header-image-size: 15rem;
--side-width: 25%;
}
}
@media (max-width: 781px) {
.site-navbar > .navbar-menu{
order: 10;
margin: 0;
}
}