path: root/baitv.css

*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;word-wrap:break-word;outline:none}
html, body { font-family:sans-serif; font-size:16px; background:#070707; margin:0; }

/*@keyframes blinker {50% {-webkit-text-stroke:2px red;}}*/
@keyframes blinker {50% {color:red;}}

iframe { border:0px none transparent; }
#chat {
  position:absolute;
  top:5px;
  font-size:2.6vw;
  color:#FFF;
  font-weight:bold;
  width:100%;
}
#chat span { 
  position:absolute;
  white-space:nowrap;
  transition:left 5s linear;
  text-shadow:2px 2px #000, -2px 2px #000, 2px -2px #000, -2px -2px #000;
  line-height:1;
  left:100%;
  box-sizing:content-box;
}
#chat .own { border:1px solid yellow; padding:3px; }
#chat .c0 { color:#FFF; }
#chat .c1 { color:#F00; }
#chat .c2 { color:#FF8080; }
#chat .c3 { color:#FFA500; }
#chat .c4 { color:#FF0; }
#chat .c5 { color:#008000; }
#chat .c6 { color:#0FF; }
#chat .c7 { color:#00F; }
#chat .c8 { color:#800080; }
#chat .c9 { color:#000; text-shadow:2px 2px #BBB,-2px 2px #BBB,2px -2px #BBB,-2px -2px #BBB; }
#colors .c0 { background:#FFF;color:#FFF; }
#colors .c1 { background:#F00;color:#F00; }
#colors .c2 { background:#FF8080;color:#FF8080; }
#colors .c3 { background:#FFA500;color:#FFA500; }
#colors .c4 { background:#FF0;color:#FF0; }
#colors .c5 { background:#008000;color:#008000; }
#colors .c6 { background:#0FF;color:#0FF; }
#colors .c7 { background:#00F;color:#00F; }
#colors .c8 { background:#800080;color:#800080; }
#colors .c9 { background:#000;color:#000; }

#main {
  margin-left:auto;
  margin-right:auto;
  /*width:calc(100% - 128px);*/
  width:90%;
}

#baitv, #player, #noticebox, #video_cont, #controls, #comment, #time, #volctrl, #buttons, #livestatus, #volume, #side, #info, #chatbox, #chatbox div {
  display:flex;
  display:-moz-flex;
  display:-ms-flex;
  display:-webkit-flex;
}

#player {
  background:#000;
  flex-direction:column;
  -ms-flex-direction:column;
  -moz-flex-direction:column;
  -webkit-flex-direction:column;
  position:relative;
  width:100%;
}

#noticebox {
  background-image:url('baitvlogo.png');
  background-position:center;
  background-repeat:no-repeat;
  background-color:#000;
  color:#FFF;
  font-weight:bold;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
  width:100%;
  height:50px;
  top: 0;
  left: 0;
  z-index: 1;
}
#notice {
  font-size:2vw;
  text-align:center;
}
#author {
  position:absolute;
  left:5px;
  top:5px;
  font-size:13px;
  font-weight:normal;
}

#video_cont {
  width:100%;
  overflow:hidden;
  flex-direction:column;
  position:relative;
}

video {
  width:100%;
  height:auto;
  min-width:0;
  min-height:0;
  margin:auto;
  z-index: 0;
}

#base {
  display:block;
  width:100%;
  bottom:0;
  background:#000;
  z-index:1;
}

#controls, #comment {
  align-items:center;
  position:relative;
}
#controls { height:32px; padding:0 8px; }

#time {
  align-content:center;
  border:1px inset #333;
  color:#EEE;
  font-size:13px;
  line-height:20px;
  justify-content:center;
  width:100px;
}

#volctrl {
  margin-left:12px;
  width:auto;
}

#buttons {
  flex:1;
  -ms-flex:1;
  -moz-flex:1;
  -webkit-flex:1;
  justify-content:flex-end;
}

.playerbtn {
  background-color:transparent;
  border:0;
  color:white;
  cursor:pointer;
  margin-left:4px;
  padding:4px;
  overflow:visible;
  position:relative;
  width:24px;
  height:24px;
  transition:color 0.3s;
}
.playerbtn:hover {
  color:#44E;
}
.playerbtn svg {
  fill:currentColor;
  fill-rule:evenodd
}

#livestatus {
  color:#444;
  font-size:12px;
  flex-grow:1;
  margin-left:16px;
}

#livestatus.live {
  color:#C22;
  font-weight:bold;
}

#volume { -webkit-appearance:none; background:none; margin-left:4px; padding:0; width:80px; }
#volume::-webkit-slider-runnable-track { background-color:#444; height:5px; border-radius:5px; outline:none;}
#volume::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; background-color:#FFF; width:13px; height:13px; border-radius:50%; border:none; cursor:pointer; margin-top:-4px; transition:background-color 0.3s;}
#volume::-webkit-slider-thumb:hover { background-color:#88E; }
#volume::-moz-range-progress { background-color:#EEE; height:5px; border-radius:5px; outline:none;}
#volume::-moz-range-track { background-color:#444; height:5px; border-radius:5px; outline:none;}
#volume::-moz-range-thumb { width:13px; height:13px; border-radius:50%; background:#FFF; border:none; transition:background-color 0.3s; cursor:pointer;}
#volume::-moz-range-thumb:hover { background-color:#88E; }

#comment > * { height:32px; padding:0 8px; }

#colors {
  -moz-appearance:none;
  -webkit-appearance:none;
  background:#111;
  border:0;
  border-right:1px solid #070707;
  color:#DDD;
  display:block;
  max-width:80px;
  width:100%;
  vertical-align:middle;
}
select::-ms-expand { display:none; }

#chat_msg {
  background:#111;
  border:0;
  cursor:text;
  color:#EEE;
  display:block;
  flex:1;
  -ms-flex:1;
  -moz-flex:1;
  -webkit-flex:1;
  min-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#sendchat {
  color:#FFF;
  background:#444;
  border:1px outset #444;
  font-weight:bold;
  min-width:80px;
  max-width:135px;
  display:block;
  cursor:pointer;
  outline:none;
  vertical-align:middle;
  flex-shrink:0;
  overflow-wrap:normal;
}
#sendchat:hover {
  background:#555;
}
#sendchat:disabled {
  color:#444;
  background:#222;
  border-bottom:1px solid #222;
  cursor:progress;
} 

#side {
  background:#111;
  border-left:1px solid #070707;
  color:#DDD;
  flex-direction:column;
  -ms-flex-direction:column;
  -moz-flex-direction:column;
  -webkit-flex-direction:column;
  position:relative;
  height:auto;
  white-space:nowrap;
}

#side, #side > * { width:400px; }

#info {
  align-items:center;
  background:#222;
  border-bottom:1px solid #070707;
  flex-direction:column;
  -ms-flex-direction:column;
  -moz-flex-direction:column;
  -webkit-flex-direction:column;
  height:50px;
  text-align:center;
  overflow:hidden;
  padding:0 8px;
  vertical-align:middle;
  width:100%;
}

#title {
  font-size:14px;
  font-weight:bold;
  line-height:24px;
}

#count {
  border-top:1px solid #AAA;
  display:inline-block;
  font-size:13px;
  line-height:16px;
  padding:3px 8px 0;
  min-width:100px;
}

#count svg {
  fill:#AAA;
  width:12px;
  height:12px;
  outline:none;
  vertical-align:middle;
}

#chatbox {
  display:block;
  position:relative;
  flex-grow:1;
  flex-basis:0;
  /*-ms-flex:1;
  -moz-flex:1;
  -webkit-flex:1;*/
  font-size:12px;
  overflow-x:hidden;
  overflow-y:scroll;
}

#status { float:left; padding:6px; }

#chatbox div {
  width:100%;
  box-sizing:border-box;
  text-overflow:ellipsis;
  border-bottom:1px solid #070707;
  white-space:nowrap;
  overflow:hidden;
  /*line-height:1;*/
}
#chatbox div:hover { background:#070707; }
#chatbox .msg {
  flex-grow:1;
  padding:6px;
  border-right:1px solid #070707;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
#chatbox .own { background:#252525; color:#FFE4B5; }
#chatbox .mod { background:#2525AA; color:#FFA; }
#chatbox .sys { background:#151515; font-style:italic; color:#EEE; }
#chatbox .sys .msg {
    white-space:normal !important
}
#chatbox .warn { background:#F08080;font-style:italic; color:#EEE; }
#chatbox .time { padding:6px; }
#top { font-size:40px; }
.slogan { font-size:20px; font-style:italic; }
#footer { font-size:12px; text-decoration:none; width: 400px; margin: 0 auto;}
#top, #footer {
  color:#111;
  font-weight:bold;
  text-align:center;
  line-height:1;
  display:block;
  padding:50px;
  transition:color 0.2s linear;
}
#top:hover, #footer:hover {
  color:#DDD;
  transition:color 0.3s linear;
}
#tt {
  color:#070707;
  visibility:hidden;
  font-size:13px;
  background:#DDD;
  border:1px solid #070707;
  word-wrap:break-word;
  position:absolute;
  max-width:300px;
  padding:6px;  
}
.modpanel {
  background:#000;
  border:1px outset #333;
  box-shadow:4px 4px #000;
  color:#FFF;
  display:inline-block;
  font-size:14px;
  position:fixed;
  right:1em;
  bottom:1em;
}
.modpanel h3 {
  background:#222;
  font-size:16px;
  margin:0;
  padding:4px;
  text-align:center;
}
.modpanel h4 {
  font-style:italic;
  margin:4px 0;
  text-align:center;:
}
.modpanel div {
  margin:4px;
  white-space:nowrap;
}
.modpanel input {
  background:#333;
  border:0;
  color:#EEE;
  margin:0;
  padding:4px;
}
.modpanel input:disabled {
  background:#222;
}
.modpanel input[type="checkbox"] {
  margin:0 2px;
  padding:0;
  vertical-align:sub;
}
.modpanel button {
  border:0;
  background:#555;
  color:#FFF;
  margin-left:3px;
  padding:4px 6px;
  text-shadow:1px 1px #000;
}
.modpanel button:active {
  background:#333;
}
.modpanel button:disabled {
  background:#444;
  color:#AAA;
}
@media(max-width:720px){
  #main { width:100%; }
  #controls, #comment > * { height:28px; padding:0 4px; }
  #time { width:75px; }
  #side, #side > * { width:200px; }
}
#loading {
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:#000;
  position:absolute;
  opacity: 0.5;
  display:none;
}
#loading .spinner { top:50%; position:absolute; transform: translateY(-50%); height:8vw; width: 100%;}
#loading .spinner::after {
  content:"";display:block;
  width: 8vw;
  height: 8vw;
  background-color: #FFF;
  margin: 0 auto;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}