164 行
3.3 KiB
CSS
164 行
3.3 KiB
CSS
.banner {
|
|
text-align: center;
|
|
margin: 0 0.5em 0.5em 0.5em;
|
|
padding: 0.5em 0;
|
|
border-bottom:1px solid gray;
|
|
font-size: 125%;
|
|
}
|
|
.hue-rotate {
|
|
filter: hue-rotate(144deg);
|
|
}
|
|
|
|
#stream {
|
|
position: relative;
|
|
padding-bottom: calc(100% * 9 / 16);
|
|
}
|
|
#stream > video, #videojs, #offline {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
#offline > div:last-child {
|
|
position: absolute;
|
|
top: calc(50% - 0.607em);
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 400%;
|
|
text-shadow: 0 0 8px #000,0 0 128px #000;
|
|
}
|
|
#offline > div:first-child {
|
|
background-image: url("/static/noise.png");
|
|
height: 100%;
|
|
width: 100%;
|
|
animation: noise-x 7s steps(14) infinite, noise-y 11s linear infinite;
|
|
background-size: cover;
|
|
filter: blur(2px) brightness(40%) contrast(70%);
|
|
}
|
|
@keyframes noise-x {
|
|
0% {background-position-x: 0%;}
|
|
100% {background-position-x: 100%;}
|
|
}
|
|
@keyframes noise-y {
|
|
0% {background-position-y: 0%;}
|
|
100% {background-position-y: 100%;}
|
|
}
|
|
|
|
#chat-border {
|
|
border-top: 1px solid #434343;
|
|
}
|
|
#stream-info-container {
|
|
border-top: 1px solid #434343;
|
|
}
|
|
|
|
#chat-window iframe {
|
|
height: calc(100vh - (100vw * 9 / 16 + 20.5em));
|
|
margin-bottom: 0.5em;
|
|
min-height: 12em;
|
|
}
|
|
#chat {
|
|
transform: scaleY(-1);
|
|
}
|
|
#noscript {
|
|
text-align: center;
|
|
margin-top: calc(-100vw * 9 / 16 / 2 - 1ex);
|
|
position: relative;
|
|
}
|
|
#stream-info {
|
|
min-height: 7em;
|
|
height: 7em;
|
|
}
|
|
#source {
|
|
display: none;
|
|
}
|
|
.users-logo {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
svg.users-logo {
|
|
fill: white;
|
|
}
|
|
.chat-banner-left {
|
|
float: left;
|
|
width: 1em;
|
|
margin-top: 2px; /* wasn't centred vertically for some reason */
|
|
}
|
|
.users-logo:hover {
|
|
border-radius: 6px;
|
|
background-color: #2f2f2f;
|
|
padding: 4px;
|
|
margin: -4px;
|
|
}
|
|
#users-toggle:checked + .banner .users-logo {
|
|
border-radius: 6px;
|
|
background-color: #3f3f3f;
|
|
padding: 4px;
|
|
margin: -4px;
|
|
}
|
|
#users-toggle:checked + .banner svg.users-logo {
|
|
fill: #0078e7;
|
|
}
|
|
#users-toggle:checked + .banner .users-logo img {
|
|
filter: brightness(0) saturate(100%) invert(41%) sepia(92%) saturate(5359%) hue-rotate(195deg) brightness(97%) contrast(103%); /* thanks to https://codepen.io/sosuke/pen/Pjoqqp */
|
|
}
|
|
form[target="users"] {
|
|
display: none;
|
|
}
|
|
#users-toggle:checked + .banner form[target="chat"] button {
|
|
filter: revert;
|
|
}
|
|
@media screen and (min-width:48em) {
|
|
#chat-border {
|
|
border-top: none;
|
|
border-left: 1px solid #434343;
|
|
}
|
|
#chat-window iframe {
|
|
height: calc(100vh - 1px - 10.5em);
|
|
}
|
|
#noscript {
|
|
margin-top: calc(-100vw * 2 / 3 * 9 / 16 / 2 - 1ex);
|
|
}
|
|
#stream-info {
|
|
height: calc(100vh - 100vw * 2 / 3 * 9 / 16 - 2px);
|
|
}
|
|
#source {
|
|
display: revert;
|
|
}
|
|
}
|
|
iframe {
|
|
border:0;
|
|
width: 100%;
|
|
}
|
|
.dark-theme a:hover,
|
|
.dark-theme a:active {
|
|
color: #00b6f0;
|
|
}
|
|
.dark-theme a {
|
|
color: #a0a0a0;
|
|
text-decoration: none;
|
|
}
|
|
body.dark-theme {
|
|
background-color: #232323;
|
|
color: #f0f0f0;
|
|
}
|
|
.dark-theme input,
|
|
.dark-theme select,
|
|
.dark-theme textarea {
|
|
color: #232323;
|
|
}
|
|
|
|
/* workaround to make some custom user css work
|
|
e.g. https://raw.githubusercontent.com/33kk/uso-archive/flomaster/data/usercss/2154.user.css */
|
|
div[class="vjs-text-track-display"] {
|
|
display: none;
|
|
}
|
|
|
|
/* for text-based browsers */
|
|
.textonly {
|
|
display: none
|
|
}
|