[hidden] { display: none !important; } [data-trap-click] { cursor: pointer; } img { width: 100%; } button { border: none; background: unset; display: inline-block; box-sizing: content-box; padding: 0; margin: 0; font-size: inherit; font-family: inherit; color: inherit; cursor: pointer; } .VBox { display: flex; flex-flow: column nowrap; } .HBox { display: flex; flex-flow: row nowrap; align-items: center; } .VGrid { display: flex; flex-flow: column wrap; align-items: flex-start; } .HGrid { display: flex; flex-flow: row wrap; align-items: center; } .Grow { flex-grow: 2; } .HReverse { flex-direction: row-reverse; } .VReverse { flex-direction: column-reverse; } .Around { justify-content: space-around; } .Between { justify-content: space-between; } .Evenly { justify-content: space-evenly; } .Left { text-align: left; } .Right { text-align: right; } .Center { text-align: center; justify-content: center; } .Middle { margin-left: auto; margin-right: auto; } .Start { align-self: flex-start; } .Full { width: 100%; } .Half { width: 50%; } .Third { width: 33.3%; } .Indent { padding: 0 1em; } .Pad { padding: 1vh 1vw; } .Pre { white-space: pre; } .NoWrap { white-space: nowrap; } .Pointer { cursor: pointer; } .Relative { position: relative; } .Reader { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .Stain { background: rgba(0, 0, 0, 0.8); } .Modal { height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 100; } #portal { width: 75vw; min-width: 380px; height: 80vh; margin: 10vh auto; display: block; } .Loadable { border: calc(var(--control-size)/16) solid transparent; } .Loading { border-color: transparent var(--artwork-dark); animation: rotate-loading 1.7s linear 0s infinite normal; transform-origin: 50% 50%; border-radius: 100%; } .Loading > svg { animation: rotate-loading 1.7s linear 0s infinite reverse; } @keyframes rotate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .Pulsing { animation: pulse-loading 1s linear 0s infinite normal; } @keyframes pulse-loading { 0% { transform: scale(1.1); } 50% { transform: scale(0.75); } 100% { transform: scale(1.0); } } #Preroll { --base-size: calc(200 * clamp(1px, 100vw - 638px, 2px)); width: calc(1.6 * var(--base-size)); height: var(--base-size); margin: calc(calc(100vh - var(--base-size)) / 2) auto; } #Leaderboard { width: 728px; height: 90px; margin: 3vh auto; text-align: center; } #MPU { width: 300px; height: 250px; margin: 3vh auto; text-align: center; } #Leaderboard.Empty { height: 0px; } #Log.Empty { max-width: 1200px; } #MPU.Empty { display: none; } #Rail.Empty { display: none; } @font-face { font-family: 'Anek Latin'; font-style: normal; font-weight: 400; font-stretch: normal; src: url(https://fonts.gstatic.com/s/aneklatin/v2/co3pmWZulTRoU4a8dqrWiajBS5ByUkvdrluH-xWG5uJTY4x-L3PuR7AZKQ.ttf) format('truetype'); font-display: swap; } :root[data-theme="dark"] { --theme-bg: #333; --theme-fg: #ddd; --theme-border: #222; --theme-control: #000; --theme-dark: inline-block; --theme-light: none; } :root { --theme-bg: #fff; --theme-fg: #000; --theme-border: #eee; --theme-control: #fff; --theme-dark: none; --theme-light: inline-block; --text: #000; --background: #fff; --highlight: #aaa; --frame: #555; --artwork-dark: var(--frame); --artwork-light: var(--highlight); --image-size: clamp(300px, min(40vw, 65vh), 450px); --control-size: clamp(40px, 7vh, 80px); --screen-step: clamp(0px, 100vh - 900px, 1px); --font: "Anek Latin", Helvetica, sans-serif; } body { padding: 0; margin: 0; font-family: var(--font); background: var(--theme-bg); color: var(--theme-fg); fill: var(--theme-fg); position: relative; overflow-x: hidden; } a { color: inherit; fill: inherit; text-decoration: none; } h1 { font-size: clamp(2.0rem, 0.714rem + 4.285vw, 3.5rem); } h2 { font-size: 1.4em; } h3 { font-size: 1.2em; } h1, h4 { padding: 0; margin: 0; line-height: 1em; min-height: 1em; } #Header { padding: 0 2vw; border-bottom: 1px solid var(--highlight); overflow: hidden; height: calc(90 * var(--screen-step)); } #brand_logo { max-width: 35vw; max-height: 72px; width: auto; height: auto; display: block; } #Settings { position: absolute; padding-top: calc(16 * var(--screen-step)); top: 1vh; right: 1vw; z-index: 2; } #Overlay { --control-size: 24px; --line-clamp: 2; background: var(--artwork-light); box-shadow: inset 0px 85px 75px -25px var(--artwork-dark); padding: 1vh 2vw; position: fixed; top: 0; left: 0; right: 0; z-index: 2; height: 80px; } #overlay_image { margin-top: 3px; width: 72px; height: 72px; } img.Overlay { width: auto; } div.Overlay { position: absolute; top: -5px; left: -8px; border-radius: 100%; background-color: var(--artwork-dark); fill: var(--artwork-light); } svg.Overlay { width: 24px; height: 24px; vertical-align: middle; } #Main { background: var(--artwork-dark); background: linear-gradient(180deg, var(--artwork-dark) 0%, var(--artwork-light) 100%); width: 100%; margin: 0 auto; padding: 1.2vh 0; position: relative; color: #fff; fill: #fff; stroke: #fff; } #Container { height: clamp(340px, min(97.6vh, 140vw), 640px); } .Container { max-width: 1200px; padding: 0 1em; margin: 0 auto; } #Info { flex-wrap: wrap; } #List { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background-color: #000; } #player_image { width: var(--image-size); height: var(--image-size); border-radius: 5px; margin: auto; } #player_display { margin: 0 1em; min-width: min(90vw, 380px); max-width: clamp(450px, 50vw, 600px); position: relative; } #player_title { --line-clamp: 3; } #player_desc { --line-clamp: 2; font-weight: 100; } #player_progress { height: 4px; background-color: var(--artwork-light); margin: 1vh 0; position: relative; } #player_progress_bar { height: 4px; background-color: var(--artwork-dark); } #player_progress_wait { height: 4px; position: absolute; top: 0; left: 0%; background-color: var(--artwork-dark); } hr.divider { width: 25vw; max-width: 300px; margin-left: auto; border: 1px solid var(--artwork-light); } .Theme { color: var(--theme-control); fill: var(--theme-control); stroke: var(--theme-control); } .Slider { -webkit-appearance: none; width: 125px; height: 4px; outline: none; opacity: 0.7; margin-bottom: 0.5em; background-color: var(--theme-border); } .Slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; cursor: pointer; border-radius: 50%; background-color: var(--theme-border); } .Slider::-moz-range-thumb { width: 15px; height: 15px; cursor: pointer; border-radius: 50%; background-color: var(--theme-border); } .Hover:hover { filter: invert(1); cursor: pointer; opacity: 1.0; mix-blend-mode: normal; } .TextClamp { overflow: hidden; text-overflow: ellipsis; } .LineClamp { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-clamp); line-clamp: var(--line-clamp); } .ImageClamp { height: var(--image-size); object-fit: cover; } .Lift { padding-bottom: 0.35em; } .Smaller { font-size: 0.7em; font-weight: 600; } .Shadow { box-shadow: -2px 1px 27px -1px rgba(0,0,0,0.75); -webkit-box-shadow: -2px 1px 27px -1px rgba(0,0,0,0.75); -moz-box-shadow: -2px 1px 27px -1px rgba(0,0,0,0.75); } .Control { width: var(--control-size); height: var(--control-size); margin: 0 auto; vertical-align: middle; } .Radius { border-radius: max(0.5em, 1%); } .Sticky { align-self: baseline; position: sticky; top: 0; } .Fade { animation: aFadeIn 0.2s ease-in-out; visibility: visible; } .Fade.Hidden { animation-name: aFadeOut; visibility: hidden; } @keyframes aFadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; }} @keyframes aFadeOut { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; }} #Log { max-width: 1200px; width: 98vw; margin: 0 auto; } article.Log { max-width: 800px; width: calc(100vw - 1.3em); margin: 0 auto 2em auto; padding: 0.2em; border-radius: 0.25em; background-color: var(--theme-border); } h2.Log { margin: 0.4em; } div.LogTitle { flex-basis: 100%; margin: 0 auto; position: sticky; top: -2px; background: #000; z-index: 2; border-bottom: 1px solid var(--theme-bg); } div.LogItem { width: 87vw; max-width: 560px; color: #000; --favorite-stroke: var(--theme-bg); --favorite-fill: var(--theme-bg); } div.LogItem:hover, div.LogItem.Favorite { --favorite-stroke: var(--theme-fg); } div.LogItem.Favorite { --favorite-fill: gold } div.LogItem, article.LogItem { min-height: 60px; margin: max(0.4em, 0.5vw); padding: 0.2em; border-radius: 0.25em; line-height: 1.5em; text-align: left; background: var(--theme-bg); color: var(--theme-fg); position: relative; } article.LogItem { --line-clamp: 3; } article.OnAir { border: 1px solid #c00; } button.LogItem { font-size: 1.2em; border-radius: 0.2em; position: absolute; right: 0.5em; bottom: 0.9em; } button.LogItem.OnAir { color: #fff; background-color: #c00; padding: 0.1em 0.2em; } button.LogItem.Favorite { fill: var(--favorite-fill); stroke: var(--favorite-stroke); } img.LogItem { width: 60px; height: 60px; margin: 0.5em 1em 0.5em 0.5em; vertical-align: middle; border-radius: 0.25em; } h3.LogItem { white-space: nowrap; } p.LogItem, h3.LogItem { margin: 0; font-weight: bold; } p.Icons { margin-top: 0.5em; } a.LogItem { margin: 0 6px; } #Footer { margin: 0 auto 1em auto; } @media (hover: none) { div.LogItem { --favorite-stroke: var(--theme-fg); } } @media (max-height: 600px) and (max-width: 750px) { #player_image { max-height: 40vh; } #player_display { background: rgba(0, 0, 0, 0.85); } #Leaderboard { width: 320px; height: 50px; } } @media (max-width: 750px) { #player_title { --line-clamp: 2; } #player_desc { --line-clamp: 1; } h3.LogItem.NewsTitle { white-space: normal; } p.LogItem.NewsTime { display: none; } .NoNarrow { transition: opacity 0.4s linear; opacity: 0; } .UnNarrow:hover + .NoNarrow, .NoNarrow:hover { opacity: 1; } #Leaderboard { width: 320px; height: 50px; } }