Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
3 contributors

Users who have contributed to this file

@fgl27 @CazuzaCzz @midN
1768 lines (1596 sloc) 59.9 KB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1920" />
<link rel="dns-prefetch" href="https://fgl27.github.io/">
<link rel="preconnect" href="https://fgl27.github.io/">
<link rel="dns-prefetch" href="https://api.twitch.tv/">
<link rel="preconnect" href="https://api.twitch.tv/">
<link rel="dns-prefetch" href="https://static-cdn.jtvnw.net/">
<link rel="preconnect" href="https://static-cdn.jtvnw.net/">
<link rel="dns-prefetch" href="https://twemoji.maxcdn.com">
<link rel="preconnect" href="https://twemoji.maxcdn.com">
<link rel="dns-prefetch" href="https://api.frankerfacez.com">
<link rel="preconnect" href="https://api.frankerfacez.com">
<link rel="dns-prefetch" href="https://api.betterttv.net">
<link rel="preconnect" href="https://api.betterttv.net">
<link rel="dns-prefetch" href="https://api.betterttv.net">
<link rel="preconnect" href="https://badges.twitch.tv">
<link rel="dns-prefetch" href="https://clips.twitch.tv">
<link rel="preconnect" href="https://clips.twitch.tv">
<link rel="dns-prefetch" href="https://usher.ttvnw.net">
<link rel="preconnect" href="https://usher.ttvnw.net">
<link rel="stylesheet" href="https://fgl27.github.io/smarttv-twitch/release/githubio/css/font-awesome.min.css">
<title>SmartTV Twitch</title>
<link rel='shortcut icon' type='image/x-icon' href="https://fgl27.github.io/SmartTwitchTV/release/githubio/images/favicon.ico" />
<style>
body {
background-color: #000000;
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: 100;
letter-spacing: normal;
position: absolute;
overflow: hidden;
/*Prevent Scroling*/
z-index: 5;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}
/*cssstart this is here so release_maker can work don't remove*/
/*Do not add css comments on the same line as code, add it on a new line, TODO fix release maker to be able to do this*/
div.class_bold {
font-family: 'Roboto-Bold';
}
div.icon_center_focus,
div.stream_thumbnail_channel,
div.stream_channel_content_icon,
div.side_panel_return,
div.side_panel_text_focus {
text-shadow: -2px 0 0 #000000,
1px -1px 0 #000000,
1px 1px 0 #000000,
0 1px 0 #000000,
-1px 0 0 #000000,
-1px 1px 0 #000000,
-1px -3px 0 #000000,
0 -1px 0 #000000,
0 2px 0 #777777,
0 3px 0 #666666,
0 4px 0 #555555,
0 6px 0 #000000,
2px -1px 0 #000000,
2px -2px 0 #000000,
1px -3px 0 #000000,
-2px -1px 0 #000000,
-2px -2px 0 #000000,
-2px -3px 0 #000004,
2px 2px 0 #000000,
2px 3px 0 #000000,
2px 4px 0 #000000,
2px 5px 0 #000000,
2px 6px 0 #000000,
-2px 2px 0 #000000,
-2px 3px 0 #000000,
-2px 4px 0 #000000,
-2px 5px 0 #000004,
-2px 6px 0 #000000;
}
.pause_button3d {
text-shadow: -2px 0 0 #000000,
1px -1px 0 #000000,
1px 1px 0 #000000,
0 1px 0 #000000,
-1px 0 0 #000000,
-1px 1px 0 #000000,
0 -1px 0 #000000,
0 0.75px 0 #777777,
0 1.5px 0 #666666,
0 2.25px 0 #555555,
0 4px 0 #000000,
0 5px 0 #000000,
2px 2px 0 #000000,
2px 3px 0 #000000,
-2px 2px 0 #000000,
-2px 3px 0 #000000,
-1px 4px 0 #000000,
1px 4px 0 #000000;
}
div.icon_center_label,
div.side_panel_text {
text-shadow: 1px 0 0 #000000,
1px -1px 0 #000000,
1px 1px 0 #000000,
0 1px 0 #000000,
-1px 0 0 #000000,
-1px 1px 0 #000000,
-1px -1px 0 #000000,
0 -1px 0 #000000,
0 2px 0 #444444,
0 3px 0 #333333,
0 4px 0 #222222,
0 6px 0 #000000,
2px -1px 0 #000000,
2px -2px 0 #000000,
2px -3px 0 #000000,
-2px -1px 0 #000000,
-2px -2px 0 #000000,
-2px -3px 0 #000000,
2px 2px 0 #000000,
2px 3px 0 #000000,
2px 4px 0 #000000,
2px 5px 0 #000000,
2px 6px 0 #000000,
-2px 2px 0 #000000,
-2px 3px 0 #000000,
-2px 4px 0 #000000,
-2px 5px 0 #000000,
-2px 6px 0 #000000;
}
div.screen_size,
div.scroll_size,
div.screens {
font-family: Roboto, Jomolhari, 'dejavu-sans', CambriaMath, CODE2000, 'Roboto-Bold';
position: fixed;
background-color: rgba(0, 0, 0, 0);
width: 100vw;
height: 100vh;
overflow: hidden;
letter-spacing: 0.12ch;
}
div.scroll_size {
position: fixed;
z-index: 298;
width: 1%;
padding-left: 99%;
}
div.screens {
position: fixed;
overflow: hidden;
}
div.screen_holder,
div.screen_holder_games {
width: 100vw;
position: fixed;
top: 7%;
}
div.screen_holder_games {
top: 4.1%;
}
div.settings_holder {
position: fixed;
top: 8.5%;
width: 100%;
height: 91.5%;
overflow: hidden;
}
div.screen_holder_settings {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scroll {
width: 0.5%;
height: 4.6%;
border: 2px solid #000000;
border-radius: 15px;
background-color: #000000;
position: absolute;
right: 0.2%;
top: 9.25%;
}
.live_icon {
vertical-align: middle;
font-size: 65%;
}
div.icon_top_label {
width: auto;
height: 20px;
text-align: left;
color: #FFFFFF;
font-size: 16px;
font-family: 'Roboto-Bold';
vertical-align: middle;
transition: opacity 1s;
text-shadow: #000000 0 0 5.7px, #000000 0 0 5.7px, #000000 0 0 4px;
}
div.icon_center_label {
max-width: 64%;
height: 60px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #777777;
display: inline-block;
font-size: 350%;
font-family: 'Roboto-Bold';
padding-right: 0.7%;
transition: opacity 1s;
border-top: 5.5px solid rgba(0, 0, 0, 0);
}
div.icon_center_focus {
transition: none !important;
color: #FFFFFF;
}
div.icon_center_line {
height: 60px;
border-top: 5.5px solid rgb(255, 255, 255);
}
td.stream_cell {
padding: 4px;
position: relative;
width: 33.33%;
}
div.stream_cell_period {
padding: 4px;
position: relative;
width: 32.33%;
display: inline-block;
}
div.stream_thumbnail_channel_vod {
margin-left: 5%;
width: 90%;
height: 0;
padding-bottom: 7%;
border-radius: 4px;
}
div.stream_thumbnail_video,
div.stream_thumbnail_game,
div.stream_thumbnail_clip,
div.stream_thumbnail_channel {
width: 100%;
height: 0;
position: relative;
border-radius: 4px;
}
div.stream_thumbnail_video {
/* height / width * 100% of Main.VideoSize*/
padding-bottom: 56.25%;
background-repeat: no-repeat;
}
div.stream_thumbnail_clip {
width: 99%;
/* height / width * 100% of Main.VideoSize*/
padding-bottom: 56.25%;
background-repeat: no-repeat;
}
div.stream_thumbnail_game {
padding-bottom: 139.70%;
}
div.stream_thumbnail_channel {
width: 99%;
padding-bottom: 100%;
background-repeat: no-repeat;
}
div.stream_thumbnail_focused {
box-shadow: 0 0 0 4px #000000, 0 0 0 9px #FFFFFF;
}
div.feed_thumbnail_focused {
box-shadow: 0 0 0 4px #000000, 0 0 0 8px #FFFFFF;
}
div.stream_user_icon {
width: 100%;
color: #FFFFFF;
text-align: center;
font-size: 9vw;
}
div.stream_channel_content_icon {
width: 100%;
color: #FFFFFF;
text-align: center;
font-size: 12vw;
padding-top: 4%;
}
img.stream_img {
width: 100%;
position: absolute;
max-width: 100%;
max-height: 100%;
overflow: hidden;
border-radius: 4px;
}
img.stream_img_fallow {
height: 100%;
position: absolute;
right: 0;
}
div.stream_text_channel,
div.stream_text2,
div.stream_text {
position: absolute;
bottom: 3px;
right: 4px;
left: 4px;
background-color: rgba(0, 0, 0, 0.5);
padding: 0.5%;
}
div.stream_text_channel {
background-color: rgba(0, 0, 0, 0);
}
div.stream_text2 {
bottom: 0;
right: 0;
left: 0;
}
.next_channel,
.next_info {
width: 100%;
text-align: left;
word-wrap: break-word;
color: #FFFFFF;
font-family: 'Roboto-Bold';
font-size: 170%;
}
.next_info {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-family: 'Roboto';
font-size: 150%;
}
.stream_info,
div.stream_channel,
div.stream_channel_info,
div.stream_channel_fallow_game {
width: 100%;
text-align: left;
word-wrap: break-word;
color: #FFFFFF;
font-size: 170%;
font-family: 'Roboto-Bold';
text-shadow: #000000 0 0 3.6px, #000000 0 0 3.6px, #000000 0 0 2.5px;
}
.stream_info {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-family: 'Roboto';
font-size: 150%;
}
div.stream_channel_info {
width: 63vw;
margin: 0;
position: absolute;
bottom: 20px;
left: 0;
font-size: 150%;
}
div.stream_channel_fallow_game,
.strokicon {
text-shadow:
-0.6px 0 0 #000000,
0.6px -0.6px 0 #000000,
0.6px 0.6px 0 #000000,
0 0.6px 0 #000000,
0 1.5px 0 #777777,
0 2px 0 #666666,
0 2.5px 0 #555555,
0 -1px 0 #000000,
1px -1px 0 #000000,
-1px -1px 0 #000000,
1px 0 0 #000000,
1px 1px 0 #000000,
1px 2px 0 #000000,
-1px 0 0 #000000,
-1px 1px 0 #000000,
-1px 2px 0 #000000,
-1px 3.5px 0 #000000,
1px 3.5px 0 #000000,
0 4.5px 0 #000000;
}
div.stream_channel_fallow_game {
text-align: center;
height: 98%;
padding-top: 1.5%;
font-size: 160%;
}
.stream_channel_fallow_icon {
color: #FFFFFF;
font-size: 100%
}
div.user_feed {
z-index: 3;
position: absolute;
bottom: 0.1%;
height: 26vh;
width: 100vw;
overflow: hidden;
}
div.user_feed_hide {
bottom: -100%;
}
div.user_feed_scroll {
position: absolute;
width: 100vw;
bottom: 0;
height: auto;
white-space: nowrap;
}
/* don't use this class for anything else other then userfeed div because of UserLiveFeed_GetSize()*/
div.user_feed_thumb {
width: 19.55%;
display: inline-block;
padding: 4px;
}
div.buffertext {
display: flex;
font-weight: bold;
font-size: 36%;
transform: translate(0, -235%);
text-shadow: #000000 0 0 15px, #000000 0 0 15px, #000000 0 0 10px;
}
div.input_text_box {
width: 70%;
margin-top: 13%;
margin-left: 15%;
}
input.input_class {
width: 100%;
height: 100px;
box-shadow: 0 0 29px rgba(0, 0, 0, 0.45);
color: black;
font-family: 'Roboto-Bold';
font-size: 300%;
text-align: center;
vertical-align: middle;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 15px;
border: 4px solid #FFFFFF;
box-shadow: inset 0 0 0 4px #000000;
padding: 4px;
}
div.button_search {
width: 18%;
height: 80px;
line-height: 80px;
border-radius: 15px;
margin-top: 2%;
margin-left: 10%;
padding-top: 0.5%;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.45);
color: #000000;
font-family: 'Roboto-Bold';
font-size: 245%;
text-align: center;
vertical-align: middle;
background-color: #AAAAAA;
border: 4px solid #AAAAAA;
display: inline-block;
text-shadow: #FFFFFF 0 0 7.2px, #FFFFFF 0 0 7.2px, #FFFFFF 0 0 5px;
}
div.button_search_focused {
padding-top: 0.5%;
color: #FFFFFF;
background-color: #454545;
border: 4px solid #FFFFFF;
text-shadow: #000000 0 0 7.2px, #000000 0 0 7.2px, #000000 0 0 5px;
}
.follower_header {
width: 97vw;
max-height: 250px;
overflow: hidden;
text-align: left;
word-wrap: break-word;
color: white;
font-weight: 100;
font-size: 150%;
margin-bottom: 0;
margin-top: -5.2px;
}
.follower_banner {
width: 97vw;
height: 26vh;
}
img.stream_img_banner {
height: 26vh;
display: block;
margin: auto;
}
div.about_text_title {
text-align: center;
width: 100%;
font-size: 130%;
font-family: 'Roboto-Bold';
}
div.about_text,
div.exit_text,
div.controls_text {
display: inline-block;
color: #FFFFFF;
margin-left: 1%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
width: 98%;
text-align: center;
word-wrap: break-word;
font-size: 180%;
text-shadow: #000000 0 0 4px, #000000 0 0 4px, #000000 0 0 3px;
}
div.exit_text {
margin-top: 2%;
margin-bottom: 2%;
width: 96%;
font-size: 220%;
}
div.controls_text {
font-size: 160%;
font-family: 'Roboto-Bold';
}
div.up,
div.down {
border-left: 9px solid transparent;
border-right: 9px solid transparent;
}
div.up {
border-bottom: 12px solid white;
}
div.down {
border-top: 12px solid white;
}
div.scene_channel_panel {
position: fixed;
z-index: 2;
opacity: 0;
transition: 0.4s;
}
div.playsideinfotext {
word-wrap: break-word;
}
div.playsideinfo {
position: absolute;
top: 1.5%;
right: 0;
width: 32ch;
color: #FFFFFF;
font-size: 166%;
text-shadow: #000000 0 0 5.7px, #000000 0 0 5.7px, #000000 0 0 4px;
}
div.playerinfo {
width: 100%;
background: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.055));
}
div.partnericon_div {
display: inline-block;
width: auto;
}
img.partnericon_img {
display: inline-block;
width: 1.5ch;
vertical-align: middle;
}
div.partnericon_text {
border-radius: 2px;
display: inline-block;
width: auto;
font-size: 60%;
text-shadow: none;
}
/* don't use this class for anything else other then side panel div because of Sidepannel_GetSize()*/
div.side_panel_feed {
width: 100%;
padding: 1%;
}
div.side_panel_feed_focus {
width: 100%;
}
div.side_panel_feed_top {
margin-top: 1%;
margin-bottom: 1%;
margin-left: 5%;
vertical-align: middle;
display: inline-block;
width: 84%;
font-size: 180%;
word-wrap: break-word;
overflow: hidden;
color: #FFFFFF;
}
div.side_panel_feed_thumb_text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div.playmaininfo {
vertical-align: top;
padding-left: 1%;
padding-top: 1.5%;
display: inline-block;
width: 64%;
font-size: 180%;
color: #FFFFFF;
word-wrap: break-word;
text-shadow: #000000 0 0 7.2px, #000000 0 0 7.2px, #000000 0 0 5.5px;
}
div.side_panel_feed_thumb {
border-radius: 4px;
box-shadow: 0 0 0 3.5px #000000, 0 0 0 6.5px #FFFFFF;
position: absolute;
width: 60vw;
height: 80vh;
top: 10%;
left: 32%;
background-color: #000000;
}
div.side_panel_dialog {
text-align: center;
margin-top: 5%;
margin-left: 20%;
width: 50%;
font-family: 'Roboto-Bold';
color: #FFFFFF;
}
div.side_panel {
position: absolute;
border-radius: 15px;
border: 3px solid #FFFFFF;
background-color: #090909;
bottom: 0;
left: -1%;
height: 91%;
width: 25%;
transition: 0.65s;
overflow: hidden;
}
div.side_panel_hide {
margin-left: -31.5%;
}
.side_panel_icons {
vertical-align: middle;
display: inline-block
}
div.side_panel_return,
div.side_panel_text {
color: #7B7B7B;
display: inline-block;
margin-top: 1%;
margin-bottom: 1%;
font-size: 300%;
font-family: 'Roboto-Bold';
text-align: left;
width: 84%;
margin-left: 22%;
}
div.side_panel_return,
div.side_panel_text_focus {
color: #FFFFFF;
}
div.side_panel_return {
position: absolute;
bottom: 0;
left: 0;
font-size: 300%;
}
div.about_dialogs {
position: fixed;
z-index: 99;
border-radius: 15px;
border: 3px solid #FFFFFF;
background-color: rgba(0, 0, 0, 0.90);
top: 50%;
transform: translateY(-50%);
}
div.about_dialogs {
background-color: rgba(0, 0, 0, 1);
}
div.dialogs {
position: fixed;
text-align: center;
width: 100%;
font-family: 'Roboto-Bold';
color: #FFFFFF;
}
div.dialogs_feed {
text-align: center;
width: 100%;
font-family: 'Roboto-Bold';
color: #FFFFFF;
}
.strokedextramini {
color: #FFFFFF;
text-shadow: #000000 0 0 5.7px, #000000 0 0 5.7px, #000000 0 0 4px;
}
.strokedextraminired {
color: #FF2121;
}
.strokedeline {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.strokicon {
font-size: 180%;
color: #FFFFFF;
}
table.streams_tables {
border: 0;
margin-left: 15px;
table-layout: fixed;
width: 98%;
}
div.streams_div {
margin-left: 30px;
width: 98%;
}
div.counter_class {
width: 100%;
text-align: left;
word-wrap: break-word;
color: #FFFFFF;
font-size: 200%;
font-family: 'Roboto-Bold';
text-shadow: #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 2px;
}
div.dialog_exit {
position: fixed;
z-index: 100;
border-radius: 15px;
border: 3px solid #FFFFFF;
width: 60%;
margin-top: 16%;
margin-left: 20%;
background-color: #000000;
}
div.chat_container {
z-index: 2;
border-radius: 2px;
left: 75.3%;
top: 51.5%;
position: fixed;
width: 24.7%;
height: 48%;
background-color: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
div.topbar {
z-index: 99;
position: fixed;
width: 100%;
height: 9%;
background: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.06));
}
div.topbar_dim {
background: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.03));
}
div.controls_div {
float: left;
padding-left: 1%;
padding-top: 0.5%;
max-width: 25%;
}
div.top_clock {
position: absolute;
right: 1%;
top: 0.5vw;
}
.hide {
display: none;
}
div.dialog_end_icons {
font-size: 180%;
vertical-align: top;
display: inline-block;
padding-top: 1%;
padding-bottom: 1%;
padding-right: 1%;
padding-left: 1%;
width: 15%;
border-radius: 15px;
border: 3px solid rgba(0, 0, 0, 0);
}
div.dialog_end_icons_focus {
border-color: #FFFFFF;
background-color: rgba(150, 150, 150, 0.7);
}
div.right,
div.left {
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
opacity: 0;
}
div.right {
border-left: 20px solid white;
}
div.left {
border-right: 20px solid white;
}
div.settings_main {
font-family: 'Roboto-Bold';
color: #FFFFFF;
width: 95%;
margin-left: 2.5%;
}
div.settings_div,
div.settings_title,
div.settings_summary,
div.settings_section {
width: 100%;
display: inline-block;
vertical-align: middle;
font-size: 160%;
}
div.settings_div {
border-radius: 12px;
box-sizing: border-box;
border: 2px solid rgba(0, 0, 0, 0);
}
div.settings_div_focus {
border-color: #FFFFFF;
background-color: rgba(255, 255, 255, 0.1);
}
div.settings_section {
font-size: 300%;
text-align: center;
}
div.settings_title {
width: 80%;
font-size: 200%;
text-align: center;
}
div.settings_summary {
width: 93%;
margin-left: 3.5%;
font-size: 150%;
text-align: left;
}
div.settings_name {
margin-left: 3.5%;
width: 61%;
display: inline-block;
text-align: left;
font-size: 150%;
vertical-align: middle;
word-wrap: break-word;
}
div.settings_arraw_div {
width: 2%;
display: inline-block;
vertical-align: middle;
/* When the html code is compressed loaded from js this div and the next have no space in between, adding a margin makes it look ok, but too big when the code is not compresed*/
}
div.settings_value {
width: 27%;
display: inline-block;
text-align: center;
border: 2px solid rgba(0, 0, 0, 0);
border-radius: 4px;
font-size: 110%;
margin-left: 10px;
margin-right: 10px;
box-sizing: border-box;
vertical-align: middle;
}
div.settings_value_focus {
margin-bottom: 3px;
border-color: #FFFFFF;
background-color: rgba(255, 255, 255, 0.4);
}
.controls_holder {
z-index: -100;
position: absolute;
bottom: 0;
width: 100%;
height: auto;
text-align: center;
background: linear-gradient(to top, black, rgba(0, 0, 0, 0.055));
}
.progress_pause_holder {
bottom: 12%;
position: absolute;
width: 100%;
justify-content: center;
}
.next_button,
.pause_button {
display: inline-block;
width: 5%;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
border-radius: 15px;
border: 3px solid rgba(0, 0, 0, 0);
}
.pause_button {
padding-top: 10px;
padding-bottom: 10px;
}
.controls_button_holder {
display: inline-block;
width: 6.75%;
}
.controls_button {
display: inline-block;
width: 45%;
padding: 5px;
text-align: center;
border-radius: 15px;
border: 3px solid rgba(0, 0, 0, 0);
position: relative;
}
.extra_button_text {
width: 100vw;
height: 1.5ch;
position: relative;
left: 50%;
/* translateX(-50%) but as scale(0.8) it because 0.5/0.8 = 0.625 */
transform: scale(0.8) translateX(-62.5%);
}
.extra_button_text_holder {
font-size: 200%;
color: #FFFFFF;
white-space: nowrap;
}
.arrows_text {
display: inline-block;
vertical-align: middle;
color: #FFFFFF;
}
.pause_button3d {
color: #FFFFFF;
font-size: 240%;
}
.next_button {
padding-left: 7px;
padding-right: 7px;
width: auto;
max-width: 96%;
background-color: rgba(0, 0, 0, 0.25);
transform: translateY(9%);
}
.next_text {
display: inline-block;
width: auto;
max-width: 90%;
font-size: 100%;
}
.pause_next_div {
text-align: center;
width: 95%;
margin-left: 2.5%;
}
.progress_bar_div {
width: 95%;
margin-left: 2.5%;
height: 80px;
text-align: center;
border-radius: 15px;
border: 3px solid rgba(0, 0, 0, 0);
}
.progress_bar_div_focus {
background-color: rgba(0, 0, 0, 0.7);
border-color: #FFFFFF;
}
.progress_bar_jump,
.progress_bar_timer {
text-align: center;
width: 7%;
font-size: 160%;
font-family: 'Roboto-Bold';
color: #FFFFFF;
display: inline-block;
}
.progress_bar_jump {
width: 40%;
}
.progress_bar_holder {
vertical-align: middle;
width: 80%;
border-radius: 12px;
display: inline-block;
}
.progress_bar_holder_focus {
box-shadow: 0 0 0 2px #FFFFFF;
}
.progress_bar {
width: 100%;
box-sizing: border-box;
border: 2px solid #000000;
border-radius: 12px;
background-color: #DDDDDD;
overflow: hidden;
}
.inner_progress_bar {
width: 10%;
height: 7px;
border-radius: 12px;
background-color: #444444;
text-align: center;
line-height: 30px;
color: white;
}
/* Chat this is a adaptation of https://www.nightdev.com/kapchat/ functions*/
.nick {
font-family: 'Roboto-Bold';
}
.chat_line {
margin-left: 3px;
margin-right: 3px;
padding-top: 2px;
padding-bottom: 3px;
line-height: 16px;
color: #FFFFFF;
font-size: 18px !important;
font-family: 'Roboto-Bold';
}
.chat_line,
.message {
/*word-break: break-all;*/
word-wrap: break-word;
margin-bottom: 3.5px;
line-height: 20px;
}
#chat_box {
background-color: transparent;
font-size: 13px;
position: absolute;
border-radius: 4px;
width: calc(100% - 10px);
height: calc(100% - 10px);
margin: 5px;
overflow: hidden;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.tag {
display: inline-block;
background-position: 0 center;
background-repeat: no-repeat;
background-size: contain;
vertical-align: bottom;
height: 20px;
min-width: 20px;
margin-right: 5px;
overflow: hidden;
}
.emoticon {
margin-bottom: -7px;
height: 30px;
min-width: 30px;
}
.emoji {
width: 11px;
height: auto;
margin-right: 2px;
margin-left: 2px;
margin-bottom: -1px;
}
.chat_extra_small {
width: 115%;
height: 115%;
transform: scale(0.869);
transform-origin: 0 0;
}
.chat_size_small {
width: 100%;
height: 100%;
transform: scale(1);
transform-origin: 0 0;
}
.chat_size_default {
width: 75%;
height: 75%;
transform: scale(1.3333);
transform-origin: 0 0;
}
.chat_size_biger {
width: 60%;
height: 60%;
transform: scale(1.66667);
transform-origin: 0 0;
}
.chat_size_bigest {
width: 50%;
height: 50%;
transform: scale(2);
transform-origin: 0 0;
}
div.side_panel_div {
width: 99%;
height: 0;
position: relative;
border-radius: 4px;
padding-bottom: 16.1%;
background-repeat: no-repeat;
color: #7B7B7B;
}
div.side_panel_iner_div1,
div.side_panel_iner_div2,
div.side_panel_iner_div3 {
width: 16%;
display: inline-block;
overflow: hidden;
}
div.side_panel_iner_div1 {
padding-left: 1%;
}
div.side_panel_iner_div2 {
width: 60%;
padding-left: 4px;
}
div.side_panel_iner_div3 {
width: 17%;
}
img.side_panel_channel_img {
height: 90%;
position: absolute;
top: 0;
border-radius: 4px;
}
div.side_panel_new_title,
div.side_panel_new_game {
width: 100%;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-family: 'Roboto-Bold';
font-size: 155%;
}
div.side_panel_new_game {
font-family: 'Roboto';
font-size: 130%;
}
div.side_panel_feed_text_focus {
color: #FFFFFF;
}
/*cssend this is here so release_maker can work don't remove*/
</style>
<script src="$WEBAPIS/webapis/webapis.min.js" defer></script>
<script src="app/languages/0_Strings.js" defer></script>
<script src="app/languages/en_US.js" defer></script>
<script src="app/languages/default.js" defer></script>
<script src="app/general/TVKeyValue.js" defer></script>
<script src="app/general/img64.js" defer></script>
<script src="app/specific/Play.js" defer></script>
<script src="app/specific/PlayClip.js" defer></script>
<script src="app/specific/PlayVod.js" defer></script>
<script src="app/specific/AddUser.js" defer></script>
<script src="app/specific/AddCode.js" defer></script>
<script src="app/specific/ChatVod.js" defer></script>
<script src="app/specific/ChatLive.js" defer></script>
<script src="app/thirdparty/irc-message.js" defer></script>
<script src="app/thirdparty/reconnecting-websocket.js" defer></script>
<script src="app/thirdparty/twemoji.js" defer></script>
<script src="app/thirdparty/punycode.js" defer></script>
<script src="app/thirdparty/kapchat.js" defer></script>
<script src="app/thirdparty/lazyload.js"></script>
<script src="app/specific/Settings.js" defer></script>
<script src="app/specific/SettingsLanguages.js" defer></script>
<script src="app/specific/ChannelContent.js" defer></script>
<script src="app/specific/Search.js" defer></script>
<script src="app/specific/Users.js" defer></script>
<script src="app/specific/UserLiveFeed.js" defer></script>
<script src="app/specific/Screens.js" defer></script>
<script src="app/specific/Main.js" defer></script>
<script src="app/specific/ScreensObj.js" defer></script>
<script src="app/specific/Sidepannel.js" defer></script>
<!-- this is here so release_maker can work don't remove jsend-->
</head>
<body>
<!-- bodystart this is here so release_maker can work don't remove-->
<div id="scene1" class="screen_size" style="background-color: rgba(0, 0, 0, 1);">
<div id="topbar" class="topbar hide">
<div class="top_clock">
<div id="label_clock" class="icon_top_label" style="text-align: right;"></div>
</div>
<div id="controls_div" class="controls_div">
<div id="label_update" class="icon_top_label hide"></div>
<div id="label_side_panel" class="icon_top_label"></div>
<div id="label_refresh" class="icon_top_label"></div>
</div>
<div id="top_lables" style="text-align: center; width: 72%; margin-left: 18.5%;">
<div id="top_bar_live" class="icon_center_label"></div>
<div id="top_bar_user" class="icon_center_label"></div>
<div id="top_bar_featured" class="icon_center_label"></div>
<div id="top_bar_game" class="icon_center_label"></div>
<div id="top_bar_vod" class="icon_center_label"></div>
<div id="top_bar_clip" class="icon_center_label"></div>
</div>
</div>
<div id="scrollbar_size" class="scroll_size">
<div id="scrollbar" class="scroll"></div>
</div>
<div id="dialog_loading" class="screen_size dialogs hide" style="z-index:98; margin-top: 24%; ">
<i class="icon icon-circle-o-notch fa fa-spin strokedextramini" style="font-size: 600%;"></i>
</div>
<div id="main_remove_dialog" class="dialog_exit hide" style="width: 75%; margin-left: 12.5%;">
<div id="main_dialog_remove" class="exit_text"></div>
<div style="text-align: center; margin-bottom: 4%;">
<div id="remove_cancel" class="button_search_focused button_search" style="margin-left: 0%;"></div>
<div id="remove_yes" class="button_search"></div>
</div>
</div>
<div id="main_dialog_exit" class="dialog_exit hide">
<div id="main_dialog_exit_text" class="exit_text"></div>
<div style="text-align: center; margin-bottom: 4%;">
<div id="exit_app_cancel" class="button_search_focused button_search" style="margin-left: 0%;"></div>
<div id="exit_app_minimize" class="button_search"></div>
<div id="exit_app_close" class="button_search"></div>
</div>
</div>
<div id="dialog_warning" class="strokedeline dialogs hide" style="z-index:101; margin-top: 31%; ">
<div id="dialog_warning_text" class="strokedeline" style="font-size: 600%; "></div>
</div>
<div id="dialog_about" class="about_dialogs hide" style="width: 95%; margin-left: 2.5%;">
<div id="dialog_about_text" class="about_text"></div>
</div>
<div id="dialog_controls" class="about_dialogs hide" style="width: 80%; margin-left: 10%;">
<div id="dialog_controls_text" class="controls_text"></div>
</div>
<div id="dialog_counter" style="position: fixed; z-index:101; width: 100%; bottom: 0;">
<div style="float: right; width: auto; height: auto; display: inline-block; border-radius: 12px; background: linear-gradient(to top, black, rgba(0, 0, 0, 0.75));">
<div id="dialog_counter_text" class="counter_class"></div>
</div>
</div>
<div id="screens_holder" class="screens">
<!-- Channel screens-->
<div id="UserChannels_scroll" class="screen_holder hide">
<div id="stream_table_user_channels" class="streams_div"></div>
</div>
<div id="SearchChannels_scroll" class="screen_holder hide">
<div id="stream_table_search_channel" class="streams_div"></div>
</div>
<div id="channel_content_scroll" class="screen_holder hide">
<table id="stream_table_channel_content" class="streams_tables"></table>
</div>
<!-- Clip screens-->
<div id="Clip_scroll" class="screen_holder hide">
<div id="stream_table_clip" class="streams_div"></div>
</div>
<div id="ChannelClip_scroll" class="screen_holder hide">
<div id="stream_table_channel_clip" class="streams_div"></div>
</div>
<div id="AGameClip_scroll" class="screen_holder hide">
<div id="stream_table_a_game_clip" class="streams_div"></div>
</div>
<!-- Etc screens-->
<div id="user_scroll" class="screen_holder hide">
<table id="stream_table_user" class="streams_tables"></table>
</div>
<div class="settings_holder">
<div id="settings_scroll" class="screen_holder_settings hide">
<div id="settings_main" class="settings_main">
<!-- Settings_SetSettings()-->
</div>
<div id="settings_lang" class="settings_main hide">
<!-- Settings_SetLang()-->
</div>
</div>
</div>
<!-- Games screens-->
<div id="Game_scroll" class="screen_holder_games hide">
<div id="stream_table_games" class="streams_div"></div>
</div>
<div id="UserGames_scroll" class="screen_holder_games hide">
<div id="stream_table_user_games" class="streams_div"></div>
</div>
<div id="SearchGames_scroll" class="screen_holder_games hide">
<div id="stream_table_search_game" class="streams_div"></div>
</div>
<!-- Input screens-->
<div id="add_user_scroll" class="screen_holder hide">
<div id="add_user" class="input_text_box">
<input id="user_input" class="input_class" type="text" placeholder="" />
</div>
</div>
<div id="oauth_scroll" class="screen_holder hide">
<div id="oauth" class="input_text_box" style="margin-top: 2%;">
<div id="oauth_text" class="strokedextramini class_bold" style="font-size: 170%;"></div>
<input id="oauth_input" class="input_class" type="text" placeholder="" />
</div>
</div>
<div id="search_scroll" class="screen_holder hide">
<div id="search" class="input_text_box" style="margin-top: 10%;">
<input id="search_input" class="input_class" type="text" placeholder="" />
<div id="chanel_button" class="button_search"></div>
<div id="game_button" class="button_search"></div>
<div id="live_button" class="button_search"></div>
</div>
</div>
<!-- Live screens-->
<div id="Live_scroll" class="screen_holder hide">
<div id="stream_table_live" class="streams_div"></div>
</div>
<div id="Featured_scroll" class="screen_holder hide">
<div id="stream_table_featured" class="streams_div"></div>
</div>
<div id="UserHost_scroll" class="screen_holder hide">
<div id="stream_table_user_host" class="streams_div"></div>
</div>
<div id="UserLive_scroll" class="screen_holder hide">
<div id="stream_table_user_live" class="streams_div"></div>
</div>
<div id="AGame_scroll" class="screen_holder hide">
<div id="stream_table_a_game" class="streams_div"></div>
</div>
<div id="SearchLive_scroll" class="screen_holder hide">
<div id="stream_table_search_live" class="streams_div"></div>
</div>
<!-- Vod screens-->
<div id="Vod_scroll" class="screen_holder hide">
<div id="stream_table_vod" class="streams_div"></div>
</div>
<div id="AGameVod_scroll" class="screen_holder hide">
<div id="stream_table_a_game_vod" class="streams_div"></div>
</div>
<div id="ChannelVod_scroll" class="screen_holder hide">
<div id="stream_table_channel_vod" class="streams_div"></div>
</div>
<div id="UserVod_scroll" class="screen_holder hide">
<div id="stream_table_user_vod" class="streams_div"></div>
</div>
</div>
</div>
<div id="scene2" class="screen_size hide">
<div id="chat_container" class="chat_container hide">
<div id="chat_inner_container" class="chat_size_default">
<div id="chat_box"></div>
<div id="play_chat_dialog" style="position: absolute; text-align: center; width: 100%; margin-top: 50%;">
<div id="play_chat_dialog_text" class="strokedeline" style="display: inline-block; font-size: 225%; color: #FFFFFF;">
</div>
</div>
</div>
</div>
<div id="scene_channel_panel" class="screen_size scene_channel_panel">
<div class="playerinfo">
<div class="playsideinfo">
<div id="stream_clock" class="playsideinfotext"></div>
<div id="stream_live_icon" class="playsideinfotext" style="display: inline-block; margin-right: 5px;">
</div>
<div id="stream_live_time" class="playsideinfotext" style="display: inline-block"></div>
<div id="stream_watching_time" class="playsideinfotext"></div>
<div id="stream_quality" class="playsideinfotext"></div>
</div>
<img id="stream_info_icon" style="padding-left: 1%; padding-top: 1%; padding-bottom: 1%; display: inline-block; width: 8%;" alt="" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
<div class="playmaininfo">
<div id="stream_info_name" class="class_bold" style="font-size: 180%;"></div>
<div id="stream_info_title"></div>
<div id="stream_info_game"></div>
</div>
</div>
<div id="controls_holder" class="controls_holder">
</div>
<div id="progress_pause_holder" class="progress_pause_holder">
<div id="progress_bar_div" class="progress_bar_div">
<div id="progress_bar_jump_to" class="progress_bar_jump strokedextramini" style="transform: translateY(-10%);"></div>
<div>
<div style="width: 100%; position: relative; transform: translateY(-40%);">
<div id="progress_bar_current_time" class="progress_bar_timer strokedextramini"></div>
<div id="progress_bar" class="progress_bar_holder">
<div class="progress_bar">
<div id="inner_progress_bar" class="inner_progress_bar"></div>
</div>
</div>
<div id="progress_bar_duration" class="progress_bar_timer strokedextramini"></div>
</div>
</div>
<div id="progress_bar_steps" class="progress_bar_jump strokedextramini" style="position: relative; top: 35%; transform: translateY(-50%);"></div>
</div>
<div id="pause_next_div" class="pause_next_div">
<div style="width: 44%; display: inline-block; text-align: right;">
<div id="back_button" class="next_button" style="opacity: 0;">
<div id="back_button_text" class="next_text">
<div id="back_button_text_name" class="next_channel strokedeline" style="text-align: right;"></div>
<div id="back_button_text_title" class="next_info strokedeline" style="text-align: right;"></div>
</div>
<i class="pause_button3d icon-back"></i>
</div>
</div>
<div id="pause_button" class="pause_button">
<div style="transform: translateY(10%);">
<i class="pause_button3d icon-pause"></i>
</div>
</div>
<div style="width: 44%; display: inline-block; text-align: left;">
<div id="next_button" class="next_button" style="opacity: 0;">
<i class="pause_button3d icon-next"></i>
<div id="next_button_text" class="next_text">
<div id="next_button_text_name" class="next_channel strokedeline"></div>
<div id="next_button_text_title" class="next_info strokedeline"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="scene2_dialogs" style="display:flex; position: absolute; width: 100%; height : 50%; z-index: 2;">
<div id="dialog_vod_start" class="dialogs hide" style="z-index:3; font-size: 230%; height: 75%; margin-top: 25%;">
<div id="dialog_vod_text" class="strokedeline" style="font-size: 165%; padding-bottom: 2%;">
</div>
<!-- from saved-->
<div id="dialog_vod_0" class="dialog_end_icons dialog_end_icons_focus">
<i class="icon-history strokicon" style="font-size: 200%;"></i>
<div id="dialog_vod_saved_text" class="strokedeline"></div>
</div>
<!-- from start-->
<div id="dialog_vod_1" class="dialog_end_icons">
<i class="icon-play strokicon" style="font-size: 200%;"></i>
<div id="dialog_vod_start_text" class="strokedeline"></div>
</div>
</div>
<div id="dialog_end_stream" class="dialogs hide" style="z-index:4; font-size: 150%; height: 100%; background-color: rgba(0, 0, 0, 0.8);">
<div id="dialog_end_stream_text" class="strokedeline" style="margin-top: 27%; font-size: 230%; padding-bottom: 2%;">
</div>
<!-- next-->
<div id="dialog_end_-1" class="dialog_end_icons hide">
<i class="icon-next strokicon" style="font-size: 250%;"></i>
<div id="dialog_end_next_text" class="strokedeline"></div>
<div style="font-size: 50%;">
<div id="end_next_button_text_name" class="next_channel strokedeline"></div>
<div id="end_next_button_text_title" class="next_info strokedeline"></div>
</div>
</div>
<!-- replay-->
<div id="dialog_end_0" class="dialog_end_icons dialog_end_icons_focus">
<i class="icon-refresh strokicon" style="font-size: 250%;"></i>
<div id="dialog_end_replay_text" class="strokedeline"></div>
</div>
<!-- open vod-->
<div id="dialog_end_1" class="dialog_end_icons">
<i class="icon-play strokicon" style="font-size: 250%;"></i>
<div id="dialog_end_vod_text" class="strokedeline"></div>
</div>
<!-- channel content-->
<div id="dialog_end_2" class="dialog_end_icons">
<i class="icon-filmstrip strokicon" style="font-size: 250%;"></i>
<div id="dialog_end_channel_text" class="strokedeline"></div>
</div>
<!-- game content-->
<div id="dialog_end_3" class="dialog_end_icons">
<i class="icon-gamepad strokicon" style="font-size: 250%;"></i>
<div id="dialog_end_game_text" class="strokedeline"></div>
</div>
</div>
<div id="dialog_loading_play" class="screen_size dialogs hide" style="z-index:98; margin-top: 24%; ">
<i class="icon icon-circle-o-notch fa fa-spin strokedextramini" style="font-size: 600%;"></i>
</div>
<div id="play_dialog_exit" class="dialogs hide" style="z-index:6; margin-top: 21%;">
<div id="play_dialog_exit_text" class="strokedeline" style="font-size: 500%;"></div>
</div>
<div id="dialog_warning_play" class="dialogs hide" style="z-index:7; margin-top: 16%;">
<div id="dialog_warning_play_text" class="strokedeline" style="font-size: 250%;"></div>
</div>
<div id="dialog_buffer_play" class="dialogs hide" style="z-index:98; margin-top: 24%; font-size: 727%;">
<i class="icon icon-circle-o-notch fa fa-spin strokeloadingplay"></i>
<div id="dialog_buffer_play_percentage" class="buffertext"></div>
</div>
</div>
</div>
<div id="scenefeed" class="screen_size">
<div id="user_feed" class="user_feed user_feed_hide">
<div id="icon_feed_refresh" class="dialogs_feed" style="bottom: 22vh; text-align: left; margin-left: 1%; font-size: 200%;">
</div>
<div id="dialog_loading_feed" class="dialogs_feed hide" style="margin-top: 2.5%;">
<i class="icon icon-circle-o-notch fa fa-spin strokedextramini" style="font-size: 650%;"></i>
</div>
<div id="user_feed_scroll" class="user_feed_scroll">
</div>
</div>
<div id="side_panel_feed_thumb" class="side_panel_feed_thumb hide">
<div class="stream_thumbnail_clip" style="width: 100%;"><img id="feed_thumb_img" class="stream_img" alt="" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="></div>
<div style="width: 96%; height: 20%; bottom:0; color: #FFFFFF; font-size: 240%; padding: 1%;">
<div id="feed_thum_name" class="side_panel_feed_thumb_text class_bold" style="width: 75%; display: inline-block; font-size: 130%;"></div>
<div id="feed_thum_quality" class="side_panel_feed_thumb_text" style="width: 24%; float: right; text-align: right; display: inline-block;"></div>
<div id="feed_thum_title" class="side_panel_feed_thumb_text"></div>
<div id="feed_thum_game" class="side_panel_feed_thumb_text"></div>
<div id="feed_thum_views" class="side_panel_feed_thumb_text"></div>
</div>
</div>
<div id="side_panel" class="side_panel side_panel_hide" style="margin-left: -31.5%;">
<div id="side_panel_new" style="width: 100%; position: absolute;">
<div id="side_panel_feed_holder" style="width: 94%; margin-left: 6%;">
<div id="side_panel_row_0">
<div id="side_panel_cell0_0" style="width: 100%; display: inline-block; padding: 1%;">
<div id="side_panel_thumbdiv0_0" class="side_panel_div">
<div id="side_panel_feed_1" class="side_panel_feed_top">
<div class="side_panel_icons">
<i class="icon icon-arrow-circle-left"></i>
</div>&nbsp;
<span id="side_panel_feed_settings"></span>
</div>
<div id="side_panel_feed_2" class="side_panel_feed_top">
<div class="side_panel_icons">
<i class="icon icon-arrow-circle-right"></i>
</div>&nbsp;
<span id="side_panel_feed_refresh"></span>
</div>
</div>
</div>
</div>
<div id="side_panel_new_row_1" style="overflow: hidden;">
<div id="side_panel_holder" style="margin-top: 1%;">
</div>
</div>
<div id="dialog_loading_side_feed" class="side_panel_dialog hide">
<i class="icon icon-circle-o-notch fa fa-spin strokedextramini" style="font-size: 700%;"></i>
</div>
</div>
</div>
<div id="side_panel_etc" class="hide">
<div id="side_panel_0" class="side_panel_text side_panel_text_focus" style="margin-top: 10px;">
<div class="side_panel_icons">
<i class="icon icon-search"></i>
</div>&nbsp;
<span id="side_panel_search"></span>
</div>
<div id="side_panel_1" class="side_panel_text">
<div class="side_panel_icons">
<i class="icon icon-settings"></i>
</div>&nbsp;
<span id="side_panel_settings"></span>
</div>
<div id="side_panel_2" class="side_panel_text">
<div class="side_panel_icons">
<i class="icon icon-info-circle"></i>
</div>&nbsp;
<span id="side_panel_about"></span>
</div>
<div id="side_panel_3" class="side_panel_text">
<div class="side_panel_icons">
<i class="icon icon-question-circle"></i>
</div>&nbsp;
<span id="side_panel_controls"></span>
</div>
<div id="side_panel_4" class="side_panel_text">
<div class="side_panel_icons">
<i class="icon icon-exit"></i>
</div>&nbsp;
<span id="side_panel_exit"></span>
</div>
<div id="side_panel_5" class="side_panel_text" style="margin-top: 18px;">
<div class="side_panel_icons">
<i class="icon icon-play"></i>
</div>&nbsp;
<span id="side_panel_live"></span>
</div>
<div id="side_panel_6" class="side_panel_text">
<div class="side_panel_icons">
<i class="icon icon-users"></i>
</div>&nbsp;
<span id="side_panel_user"></span>
</div>
<div id="side_panel_7" class="side_panel_text">
<div class="side_panel_icons">
<i class="icon icon-star"></i>
</div>&nbsp;
<span id="side_panel_featured"></span>
</div>
<div id="side_panel_8" class="side_panel_text">
<div class="side_panel_icons">
<i class="icon icon-gamepad"></i>
</div>&nbsp;
<span id="side_panel_games"></span>
</div>
<div id="side_panel_9" class="side_panel_text">
<div class="side_panel_icons">
<i class="icon icon-movie-play"></i>
</div>&nbsp;
<span id="side_panel_videos"></span>
</div>
<div id="side_panel_10" class="side_panel_text">
<div class="side_panel_icons">
<i class="icon icon-movie"></i>
</div>
<span id="side_panel_clips"></span>
</div>
<div class="side_panel_return">
<div>
<div class="side_panel_icons">
<i class="icon icon-arrow-circle-right"></i>
</div>&nbsp;
<span id="side_panel_back"></span>
</div>
<div>
<div class="side_panel_icons">
<i class="icon icon-arrow-circle-left"></i>
</div>&nbsp;
<span id="side_panel_hide"></span>
</div>
</div>
</div>
</div>
</div>
<!-- bodyend this is here so release_maker can work don't remove-->
</body>
</html>
You can’t perform that action at this time.