2021-04-10 03:26:39 +09:00
. banner {
text-align : center ;
2021-04-17 03:04:38 +09:00
margin : 0 0 . 5em 0 . 5em 0 . 5em ;
padding : 0 . 5em 0 ;
2021-04-15 20:37:04 +09:00
border-bottom : 1px solid gray ;
font-size : 125 % ;
2021-04-10 03:26:39 +09:00
}
2021-04-15 20:37:04 +09:00
. hue-rotate {
2021-04-15 21:49:26 +09:00
filter : hue-rotate ( 144deg ) ;
2021-04-10 03:26:39 +09:00
}
2021-04-17 02:42:03 +09:00
2021-04-10 03:26:39 +09:00
# stream {
2021-04-17 02:42:03 +09:00
position : relative ;
padding-bottom : calc ( 100 % * 9 / 16 ) ;
}
2021-07-06 19:09:06 +09:00
# stream > video , # videojs , # offline {
2021-04-17 02:42:03 +09:00
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
2021-07-06 19:09:06 +09:00
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 % ; }
2021-04-10 03:26:39 +09:00
}
2021-04-17 02:42:03 +09:00
# chat-border {
border-top : 1px solid # 434343 ;
}
# stream-info-container {
border-top : 1px solid # 434343 ;
}
2021-04-15 20:37:04 +09:00
# chat-window iframe {
2021-04-16 21:28:41 +09:00
height : calc ( 100vh - ( 100vw * 9 / 16 + 20 . 5em ) ) ;
margin-bottom : 0 . 5em ;
2021-04-10 15:14:59 +09:00
min-height : 12em ;
2021-04-10 03:26:39 +09:00
}
2021-04-15 20:37:04 +09:00
# chat {
transform : scaleY ( -1 ) ;
}
2021-04-10 03:26:39 +09:00
# noscript {
text-align : center ;
margin-top : calc ( -100vw * 9 / 16 / 2 - 1ex ) ;
position : relative ;
}
2021-04-15 20:37:04 +09:00
# stream-info {
Update website/static/external/grids-responsive-min.css, website/static/external/pure-min.css, website/static/external/video-js.css, website/static/external/video.js, website/static/external/videojs-contrib-hls.js, website/static/platform.css, website/static/platform.js, website/templates/chat-iframe.html, website/templates/comment-iframe.html, website/templates/index.html, website/templates/stream-info-iframe.html, website/utils/captcha.py, website/utils/colour.py, website/utils/stream.py, website/utils/tripcode.py, website/chat.py, website/concatenate.py, website/routes.py, website/viewership.py files
2021-04-14 23:12:40 +09:00
min-height : 7em ;
height : 7em ;
}
2021-04-14 23:54:03 +09:00
# source {
display : none ;
}
2021-04-15 20:37:04 +09:00
. users-logo {
width : 20px ;
height : 20px ;
cursor : pointer ;
}
svg . users-logo {
fill : white ;
}
. chat-banner-left {
float : left ;
width : 1em ;
2021-04-16 00:18:46 +09:00
margin-top : 2px ; /* wasn't centred vertically for some reason */
2021-04-15 20:37:04 +09:00
}
. 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 ;
}
2021-04-10 03:26:39 +09:00
@ media screen and ( min-width : 48em ) {
2021-04-17 02:42:03 +09:00
# chat-border {
border-top : none ;
border-left : 1px solid # 434343 ;
}
2021-04-15 20:37:04 +09:00
# chat-window iframe {
2021-04-16 21:28:41 +09:00
height : calc ( 100vh - 1px - 10 . 5em ) ;
2021-04-10 03:26:39 +09:00
}
# noscript {
margin-top : calc ( -100vw * 2 / 3 * 9 / 16 / 2 - 1ex ) ;
}
2021-04-15 20:37:04 +09:00
# stream-info {
Update website/static/external/grids-responsive-min.css, website/static/external/pure-min.css, website/static/external/video-js.css, website/static/external/video.js, website/static/external/videojs-contrib-hls.js, website/static/platform.css, website/static/platform.js, website/templates/chat-iframe.html, website/templates/comment-iframe.html, website/templates/index.html, website/templates/stream-info-iframe.html, website/utils/captcha.py, website/utils/colour.py, website/utils/stream.py, website/utils/tripcode.py, website/chat.py, website/concatenate.py, website/routes.py, website/viewership.py files
2021-04-14 23:12:40 +09:00
height : calc ( 100vh - 100vw * 2 / 3 * 9 / 16 - 2px ) ;
}
2021-04-14 23:54:03 +09:00
# source {
display : revert ;
}
2021-04-10 03:26:39 +09:00
}
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 ;
}
2021-04-10 23:37:42 +09:00
/ * 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 ;
2021-04-17 03:04:38 +09:00
}