Init

1 files changed, 477 insertions, 0 deletions

diff --git a/baitv.css b/baitv.css
new file mode 100644
index 0000000..3fbe89c
--- /dev/null
+++ b/baitv.css
@@ -0,0 +1,477 @@
+*{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;

+  }

+}