Add scale color, row highlight, transition adjustment

howar31 · Apr 17, 2014 · a1045c7 · a1045c7
1 parent 74043ae
commit a1045c7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 23 deletions.
diff --git a/index.css b/index.css
@@ -9,6 +9,7 @@ body {
 
 #table-worldboss {
 	font-size: 1.5em;
+	position: relative
 }
 
 .table-header {
@@ -22,17 +23,21 @@ body {
         -ms-animation: fadein 1s; /* Internet Explorer */
          -o-animation: fadein 1s; /* Opera */
             animation: fadein 1s;
+	transition: background-color 0.3s ease-out;
+}
+
+.row:hover {
+	background: #FFFFEE !important;
 }
 
 .row:nth-child(even) {
 	background: #F8F8F8;
 }
 
 .row:nth-child(2) {
-	position: relative
 }
 
-.row:nth-child(2)::before {
+.nowbar::before {
 	content: "Now";
 	position: absolute;
 	top: 7px;
@@ -41,47 +46,58 @@ body {
 	color: red;
 }
 
-.row:nth-child(2)::after {
+#nowbar {
+	position: absolute;
 	background: url(splash.png) no-repeat;
 	opacity: 0.3;
 	height: 40px;
 	width: 100%;
-	top: -4px;
-	left: 0px;
-	position: absolute;
+	top: 66px;
+	left: -15px;
 	z-index: -1;
-	content: "";
 }
 
-.row:nth-child(2):nth-child(1) {
-	color: white;
+#nowtext {
+	position: relative;
+	left: -40px;
+	color: red;
+	font-size: 0.8em;
+}
+
+.waypoint {
+	font-family: monospace;
+	cursor: pointer;
 }
 
-.scale-lowlevel {
+.waypoint input {
+	margin-left: -14px;
+	position: absolute;
 }
 
-.scale-standard {
+.chatlink {
+	width: 100%;
 }
 
-.scale-hardcore {
+.scale-lowlevel > .wbname {
+	color: #006600;
+	text-shadow: 0px 0px 20px #AAFFAA;
 }
 
-.wbname {
+.scale-standard > .wbname {
 }
 
-.pstime {
+.scale-hardcore > .wbname {
+	color: #990000;
+	text-shadow: 0px 0px 20px #FFAAAA;
 }
 
-.localtime {
+.wbname {
 }
 
-.waypoint {
-    font-family: monospace;
+.localtime {
 }
 
-.waypoint input {
-    margin-left: -4px;
-    position: absolute;
+.pstime {
 }
 
 #footer {

diff --git a/index.html b/index.html
@@ -32,6 +32,7 @@ <h1 id="header-title">Guild Wars 2 Timer</h1>
 		<div class="col-sm-3" id="psttime-title">US Pacific Time (Server Time)</div>
 		<div class="col-sm-2" id="waypoint-title">Waypoint</div>
 	</div>
+	<div id="nowbar"><span id="nowtext">Now</span></div>
 	</div>
 
 	<div id="footer">
@@ -93,7 +94,7 @@ <h1 id="header-title">Guild Wars 2 Timer</h1>
 	},60000);
 	$( document ).on("click", ".waypoint:not(:has(input))", function() {
 		var text = this;
-		var chatlink = $("<input class=\"chatlink\" type=\"text\" value=\""+$( text ).text()+"\" />");
+		var chatlink = $("<input class='chatlink' type='text' value='"+$( text ).text()+"' />");
 		$( text ).html( chatlink );
 		chatlink.one("focusout", function() {
 			$( text ).html($( this ).val());
@@ -102,7 +103,7 @@ <h1 id="header-title">Guild Wars 2 Timer</h1>
 });
 
 function refreshall () {
-	$(".row").slice(1).remove();
+	$(".table-content").remove();
 	$.getJSON("./wbtime.json", function(json) {
 		var i = 0;
 		var k = 0;
@@ -128,7 +129,7 @@ <h1 id="header-title">Guild Wars 2 Timer</h1>
 		}
 		wbt.sort(sortByTime);
 		for (i = 0; i<k; i++) {
-			var tmp = '<div class="row scale-'+wbt[i].scale+'">'
+			var tmp = '<div class="row table-content scale-'+wbt[i].scale+'">'
 				+'<div class="col-sm-4 wbname">'+wbt[i].name+'</div>'
 				+'<div class="col-sm-3 localtime">'+wbt[i].lctime+'</div>'
 				+'<div class="col-sm-3 psttime">'+wbt[i].uptime+'</div>'