:root { --text-color: white; --main-bg-color: #18181a; --chat-bg-color: #232327; --border-width: 1px; --chat-width: 320px; --main-border: var(--border-width) solid #38383d; --chat-border: var(--border-width) solid #4a4a4f; --aspect-x: 16; --aspect-y: 9; --pure-video-height: calc(100vw * var(--aspect-y) / var(--aspect-x)); --video-height: max(144px, min(75vh, var(--pure-video-height))); } body { margin: 0; background-color: var(--main-bg-color); color: var(--text-color); font-family: sans-serif; height: 100vh; display: grid; grid-auto-rows: var(--video-height) auto min-content 1fr auto; grid-template-areas: "stream" "toggle" "info" "chat" "footer"; } a { color: #42a5d7; } #stream { background: black; width: 100%; height: var(--video-height); grid-area: stream; } #info { border-top: var(--main-border); box-sizing: border-box; padding: 0.75ch 1ch; overflow-y: scroll; grid-area: info; } #info__title { font-size: 18pt; } #chat { display: grid; grid-auto-rows: auto 1fr auto; background-color: var(--chat-bg-color); border-top: var(--chat-border); border-bottom: var(--chat-border); grid-area: chat; height: 50vh; min-height: 24ch; } #chat__header { text-align: center; padding: 1ch 0; margin-bottom: 1ch; border-bottom: var(--chat-border); } #chat-form { display: grid; grid-template: auto 2rem / auto 8ch; grid-gap: 0.75ch; margin: 1ch; } #chat-form__submit { grid-column: 2 / span 1; } #chat-form__message { grid-column: 1 / span 2; background-color: #434347; border-radius: 4px; border: 2px solid transparent; transition: 0.25s; max-height: 16ch; min-height: 2.25ch; padding: 1.5ch; color: #c3c3c7; resize: vertical; } #chat-form__message:not(:focus):hover { border-color: #737377; } #chat-form__message:focus { background-color: black; border-color: #3584e4; } #chat__messages { margin: 0 1ch; overflow-y: auto; position: relative; } #chat-messages { list-style: none; padding: 0; margin: 0; width: 100%; max-height: 100%; position: absolute; bottom: 0; font-size: 11pt; } .chat-message { padding: 0.5ch 0.75ch ; width: 100%; box-sizing: border-box; border-radius: 4px; } .chat-message:hover { background-color: #434347; } .chat-message__name { font-weight: bold; color: attr("data-color"); cursor: default; } .chat-message__text { overflow-wrap: anywhere; } #chat-live { font-size: 9pt; line-height: 2rem; } #chat-live__ball { border: 4px solid maroon; border-radius: 4px; display: inline-block; margin-right: 2px; animation: 3s infinite glow; } @keyframes glow { 0% {filter: brightness(100%)} 50% {filter: brightness(150%)} 100% {filter: brightness(100%)} } #toggle { grid-area: toggle; border-top: var(--main-border); display: grid; grid-template-columns: repeat(3, 1fr); } #toggle > a { text-align: center; padding: 1ch; font-variant: all-small-caps; text-decoration: none; color: inherit; background-color: #3674bf; border: 2px outset #3584e4; } footer { grid-area: footer; text-align: center; padding: 0.75ch; background: linear-gradient(#38383d, #1d1d20 16%); font-size: 9pt; } #info, #chat { display: none; } #info:target, #both:target > #info { display: block; } #chat:target, #both:target > #chat { display: grid; } #info:target ~ #toggle > [href="#info"], #chat:target ~ #toggle > [href="#chat"], #both:target > #toggle > [href="#both"] { background-color: #3065a6; border-style: inset; } @media (min-width: 720px) { :root { --pure-video-height: calc((100vw - var(--chat-width) - var(--border-width)) * var(--aspect-y) / var(--aspect-x)); } body { grid-auto-rows: var(--video-height) 1fr auto; grid-auto-columns: 1fr 320px; grid-template-areas: "stream chat" "info chat" "footer chat"; } #toggle { display: none; } #stream { height: var(--video-height); } #info { display: block; } #chat { display: grid; border: none; border-left: var(--chat-border); min-height: 100vh; } }