body{ --body-bg-color: var(--color-grey-40); } .error-404 .search-form input, .not-found .search-form input{ border-radius: var(--button-radius); padding-left: 1.5rem; padding-right: 1.5rem; } .btn-play{ border-color: rgba(0,0,0,0.1); background-clip: padding-box; box-shadow: none; } .btn-play-waveform{ background-color: transparent; } .btn-follow.active{ background-color: currentColor; } .btn-follow.active span{ color: #fff; } .btn-play-wrap .btn-play{ color: var(--color-primary); background-color: transparent; border-width: 0; } .waveform .btn-play{ color: #aaa; border-width: 0; } .btn-play-wrap .btn-play:after, .btn-play-waveform:after{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 100%; border: 3px solid currentColor; } .block-loop-item{ background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -1px 0px rgba(120, 130, 140, 0.1); margin-bottom: 4px; } .yah-block-loop:not(.block-loop-row):not(.block-loop-overlay) .block-loop-item .post-thumbnail{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .yah-block-loop:not(.block-loop-row) .block-loop-item .entry-header{ padding: 0.75rem 1rem 1rem !important; } .yah-block-loop:not(.block-loop-row) .waveform{ margin-top: 0; padding: 0 1rem 1rem; max-width: 200px; } .yah-block-loop:not(.block-loop-row) .waveform .btn-play{ width: 32px; height: 32px; font-size: 1rem; border-width: 2px; } .block-loop-item .post-thumbnail .btn-more svg{ width: 20px; height: 20px; color: #fff; stroke: rgba(0,0,0,0.1); stroke-width: 1; } .block-loop-item .entry-action{ padding: 0; width: 0; left: 100%; } .block-loop-item .post-thumbnail button{ position: absolute; right: 0; bottom: 0; margin: 12px; } .block-loop-item .post-thumbnail .btn-more{ top: 0; bottom: auto; } .block-loop-item .post-thumbnail .btn-like{ display: none; } .block-loop-row:not(.album-tracks) .block-loop-item .entry-title{ font-size: 1rem; } .block-loop-row .post-thumbnail button{ margin: 4px; } .block-loop-row .btn-play{ transform: scale(0.75); } .block-loop-sm  .post-thumbnail .btn-more{ display: none; } .block-loop-row .block-loop-item{ padding: 1rem; margin-bottom: 0; } .header-station, .header-user{ display: flex; grid-gap: 2rem; flex-wrap: wrap; margin: 4rem 5vw 2rem 5vw; padding: 1.5rem 2rem 2rem; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -1px 0px rgba(0, 0, 0, 0.015); border-radius: 4px; } .header-station h1{ font-size: 2.5rem; margin-bottom: 0.25rem; } .header-station .entry-meta{ --entry-meta-grid-gap: 0.5rem; } .entry-header-container > .post-thumbnail{ position: relative; padding: 0; width: 270px; flex-shrink: 0; margin: 0; border-radius: 4px; align-self: flex-start; background-color: rgba(110,120,130,0.2); opacity: 1; transform: translate3d(0,0,0); transition: opacity .4s,transform .35s; transition-delay: .65s; margin-top: -3.5rem; box-shadow: 0 3px 14px rgba(0,0,0,0.1); } .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 .yah-block-loop, .header-station .waveform{ width: 100%; margin-bottom: 0; } .header-station .block-loop-items{ margin-bottom: 0; } .header-station .block-loop-items .count, .header-station .block-loop-items .play-count{ display: none; } .header-station .album-tracks .block-loop-item{ padding: 0.75rem 0.5rem; background-color: transparent; box-shadow: none; border-top: 1px solid rgba(120,130,140,0.1); border-radius: 0; margin-top: 1px; } .header-station .album-tracks .block-loop-item:hover, .header-station .album-tracks .block-loop-item.active{ border-top-color: transparent; background-color: rgba(120,130,140,0.1); border-radius: 5px; } .header-station .album-tracks .block-loop-item:hover:before, .header-station .album-tracks .block-loop-item.active:before{ text-align: center; } .header-station .album-tracks .block-loop-item:hover + .block-loop-item, .header-station .album-tracks .block-loop-item.active + .block-loop-item{ border-top-color: transparent; } .header-station .block-loop-item .entry-meta a{ color: #999; } .header-station .entry-header{ margin-top: 0; flex: 1; } .header-station .entry-tag, .header-station .ranks, .header-station .station-content, .header-station .station-release{ width: 100%; word-break: break-all; } .block-loop-item .entry-meta, .ranks span, .station-release > .posted-on a, .entry-info{ color: var(--text-secondary-color); } .header-user{ align-items: center; grid-gap: 2rem; } .header-user .post-thumbnail{ min-width: 120px; border-radius: 100%; padding: 0; } .header-user .entry-header{ margin-top: 0; flex: 1; } .header-user .entry-title{ font-size: 1.5rem; margin-bottom: 0.25rem; } .social-facebook svg, .social-twitter svg{ stroke: none; fill: currentColor; } .user-links svg{ width: 16px; height: 16px; } .navigation .active > a, .user-navigation .current_page_item > a, .page-navigation .current_page_item > a{ background-color: #fff; border-radius: 4px; box-shadow: 0 0 1px 0px rgba(0,0,0,0.1); } .dark .navigation .active a, .dark .page-navigation .current_page_item a{ background-color: #222; } .dark .block-loop-item, .dark .header-station,  .dark .user .entry-header-container{ color: #fff; background-color: var(--color-grey-700); } .site-footer .yah-social-link{ background-color: transparent !important; color: inherit !important; } .site-sidebar .menu-item:not(.btn-link) svg{ color: var(--color-primary); } .site-sidebar .site-footer{ border-top: 1px solid rgba(130,140,150, 0.1); } .sidebar-inner{ position: -webkit-sticky; position: sticky; top: 6rem; z-index: 1; } .entry-content-inner .comments-area{ margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(130,140,150,0.1); } .ranks li{ background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -1px 0px rgba(0, 0, 0, 0.015); } .dark .ranks li{ background-color: var(--color-grey-700); } .phone{ border-radius: 1.5rem; } .phone figure{ border-radius: inherit; margin: 0; } .archive-content-column > .entry{ background-color: #fff; box-shadow: var(--box-shadow); padding: 0 calc(var(--y-gap)*2); border-radius: 4px; } .archive-content-column article:not(.block-loop-item)  .entry-header{ margin-top: calc(var(--y-gap)*2); } .station-content{ color: #555; margin-bottom: 1rem; } .dark .station-content{ color: var(--text-secondary-color); } .dark .archive-content-column > .entry, .dark .dropdown-menu, .dark .mobile-menu, .dark .plyr-playlist, .dark .yah-block-loop:not(.block-loop-row):not(.block-loop-hover) .block-loop-item:hover, .dark .avatar{ background-color: var(--color-grey-600); } .dark .site-header .search-form:focus{ background-color: #fff; } @media (max-width: 599px){ .header-station, .header-user{ flex-direction: column; justify-content: center; margin-top: 5vw; padding: 1.5rem; } .header-station > .entry-header, .header-user > .entry-header{ text-align: center; margin: 0; } .header-station .entry-meta, .header-station .entry-title, .header-user .entry-meta, .header-user .entry-title{ justify-content: center; } .header-station .entry-info{ justify-content: center; } .header-station > .post-thumbnail, .header-user > .post-thumbnail{ width: 80%; align-self: center; margin: 0 auto; } .site-title{ font-size: 1rem; line-height: 1; } .link-more{ display: none; } } @media (min-width: 600px){ .entry-header-container .entry-meta .btn-more{ margin-inline-start: auto; -webkit-margin-start: auto; } .dark .site-header .search-form{ background-color: var(--color-grey-600); } } @media (min-width: 480px){ .entry-content-inner .entry-tag, .ranks, .station-content, .station-release{ margin-left: 4.75rem; margin-right: 4.75rem; } } @media (max-width: 781px) { .header-container{ padding-left: 0.5rem; padding-right: 0.5rem; } .site-sidebar{ top: 0; width: 300px; } .header-station h1{ font-size: 2rem; } .ranks{ grid-template-columns: repeat(2,1fr); } } @media (min-width: 600px) and (max-width: 781px) { .header-station > .post-thumbnail, .header-user > .post-thumbnail{ width: 230px; } } @media (min-width: 782px) and (max-width: 991px) { .primary-menu-has-icon{ --side-width: var(--side-folded-width); } .primary-menu-has-icon .site-sidebar .site-title{ display: none; } .primary-menu-has-icon .site-sidebar #icon-sidemenu{ justify-content: center; } .primary-menu-has-icon .site-sidebar .menu-header{ padding: 1rem 0.5rem; font-size: 10px; text-align: center; } .primary-menu-has-icon .site-sidebar .nav .menu-item-has-children > a:after{ display: none; } .primary-menu-has-icon .site-sidebar .nav .sub-menu{ display: none !important; } .primary-menu-has-icon .site-sidebar .site-sidebar-header, .primary-menu-has-icon .site-sidebar .site-sidebar-footer{ display: none; } .primary-menu-has-icon .site-sidebar .nav a{ text-align: center; justify-content: center; } .primary-menu-has-icon .site-sidebar .nav a span{ display: none; position: absolute; background-color: var(--color-grey-400); color: #eee; border-radius: 3px; font-size: 10px; line-height: 1; bottom: 100%; left: 50%; transform: translate(-50%, 0); padding: 4px 6px; margin: 0; } .primary-menu-has-icon .site-sidebar .nav a span:after{ content: ""; width: 0; height: 0; position: absolute; bottom: -3px; left: 50%; margin-left: -3px; border-color: var(--color-grey-400) transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; background-color: transparent; } .primary-menu-has-icon .site-sidebar .nav a:hover span{ display: block; } }