Fixes

nikitakatchik · Apr 23, 2014 · 29a65f5 · 29a65f5
1 parent c17e15b
commit 29a65f5
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 111 deletions.
diff --git a/app/htmls/SceneBrowser.html b/app/htmls/SceneBrowser.html
@@ -3,7 +3,7 @@
 <head>
 <style type="text/css">
 body {
-  background-color: #0f0f0f;
+  background-color: #090909;
   font-family: sans-serif;
   font-style: normal;
   font-variant: normal;
@@ -211,7 +211,7 @@
 		<div class="tip_label">Refresh</div>
 	</div>
 
-	<div id="dialog_loading" style="text-align: center; width: 100%; margin-top: 20%;">
+	<div id="dialog_loading" style="text-align: center; width: 100%; margin-top: 19%;">
 		<div class="spinner" style="display: inline-block;">
 			<div class="bounce1"></div>
 			<div class="bounce2"></div>

diff --git a/app/htmls/SceneChannel.html b/app/htmls/SceneChannel.html
@@ -6,47 +6,49 @@
 
 <style type="text/css">
 body {
-  background-color: #0f0f0f;
+  background-color: #090909;
   font-family: sans-serif;
   font-style: normal;
   font-variant: normal;
   font-weight: 100;
   letter-spacing: normal;
+  margin: 0px;
+  padding: 0px;
 }
-		
+    
 .spinner {
- 	margin: 120px auto 0;
- 	width: 120px;
- 	text-align: center;
+  margin: 120px auto 0;
+  width: 120px;
+  text-align: center;
 }
 
 .spinner > div {
-	width: 28px;
-	height: 28px;
-	background-color: #FFFFFF;
-	
-	border-radius: 100%;
-	display: inline-block;
-	-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
-	animation: bouncedelay 1.4s infinite ease-in-out;
-	/* Prevent first frame from flickering when animation starts */
-	-webkit-animation-fill-mode: both;
-	animation-fill-mode: both;
+  width: 28px;
+  height: 28px;
+  background-color: #FFFFFF;
+  
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
+  animation: bouncedelay 1.4s infinite ease-in-out;
+  /* Prevent first frame from flickering when animation starts */
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
 }
 
 .spinner .bounce1 {
-	-webkit-animation-delay: -0.32s;
-	animation-delay: -0.32s;
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
 }
 
 .spinner .bounce2 {
-	-webkit-animation-delay: -0.16s;
-	animation-delay: -0.16s;
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
 }
 
 @-webkit-keyframes bouncedelay {
-	0%, 80%, 100% { -webkit-transform: scale(0.0) }
-	40% { -webkit-transform: scale(1.0) }
+  0%, 80%, 100% { -webkit-transform: scale(0.0) }
+  40% { -webkit-transform: scale(1.0) }
 }
 
 @keyframes bouncedelay {
@@ -64,23 +66,22 @@
 <body>
   <div id="scene_channel_panel" style="position: absolute; left: 75%; width: 25%; height: 100%; z-index: 2; background-color: #6545a5;">
       <img style="width: 40%; padding-left: 10%; padding-top: 7%; padding-bottom: 1.5%;" src="images/twitchlogo.png"/>
-      <div style="margin: 0 auto; width: 80%; height: 8%; padding-left: 15%; padding-top: 10%; padding-bottom: 1.5%;">
-        <img style="display: inline-block; width: 20%;" src="http://static-cdn.jtvnw.net/jtv_user_pictures/starladder1-profile_image-7acfe4aa507436cb-300x300.jpeg"/>
-        <div style="text-align: center; color: white; vertical-align: top; display: inline-block; width: 65%; margin-top: 1%; margin-left: 2%;">
-          <div id="stream_info_name" style="font-size: 120%; padding-bottom: 5%;">Starladder1</div>
-          <div id="stream_info_viewer" style="font-size: 100%; color: rgba(255, 255, 255, 0.85)">1000 Viewers</div>
+      <div style="margin: 0 auto; width: 80%; height: 8%; padding-left: 15%; padding-top: 9%; padding-bottom: 1.5%;">
+        <img id="stream_info_icon" style="display: inline-block; width: 20%;" src=""/>
+        <div style="text-align: center; color: white; vertical-align: top; display: inline-block; width: 65%; margin-top: 1%; margin-left: 0%;">
+          <div id="stream_info_name" style="font-size: 120%; padding-bottom: 4%;"></div>
+          <div id="stream_info_viewers" style="font-size: 100%; color: rgba(255, 255, 255, 0.85)"></div>
         </div>
       </div>
-      <div style="width: 100%; height: 22.5%; background-color: #4c3082;">
-        <div id="stream_info_title" style="width: 80%; height: 45%; padding: 2%; margin: 0 auto; font-size: 110%; color: rgba(255, 255, 255, 0.9);">jgffjhfjhfjh</div>
-        <div style="width: 80%; height: 2px; margin: 0 auto; background-color: rgba(255, 255, 255, 0.25);"></div>
+      <div style="position: relative; width: 100%; height: 22.5%; margin-top: 2%; background-color: #4c3082;">
+        <div style="width: 80%; height: 48%; text-align: center; vertical-align: middle; padding: 2%; margin: 0 auto; font-size: 90%; color: rgba(255, 255, 255, 0.9);"><p id="stream_info_title"></p></div>
         <div style="width: 80%; height: 42px; line-height: 42px; margin: 0 auto; padding-top: 6%; font-size: 130%;">
           <div style="display: inline-block; width: 80%; margin-left: 5%; background-color: rgba(255, 255, 255, 0.4); color: black; font-weight: 100;">
             <div style="width: 41%; text-align: center; display: inline-block; background-color: rgba(255, 255, 255, 0.35);">Quality</div>
             <div id="quality_name" style="width: 52%; text-align: center; display: inline-block;"></div>
           </div>
           <div style="height: 42px; display: inline-block;">
-            <div style="display: inline-block; vertical-align: center;">
+            <div style="display: inline-block;">
               <div id="quality_arrow_up"
                 style="border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 8px solid rgba(255, 255, 255, 0.8);"></div>
               <div id="quality_arrow_down"