many ui iprovements by lechd

web/chat_style.css

@@ -1,15 +1,29 @@
 #chat {
 	position:absolute;
-	bottom:14px;
+	bottom:0px;
 	left:14px;
-	border: 1px solid rgba(0,0,0,0.5);
+
+    border-color: rgba(0,0,0,0.5);
     background: rgba(0,0,0,0.6);
+
+    border-style: solid;
+    border-width: 1px 1px 0px 1px;
+
+    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+    -o-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+
+    -moz-border-radius: 3px 3px 0px 0px;
+    -webkit-border-radius: 3px 3px 0px 0px;
+    -o-border-radius: 3px 3px 0px 0px;
+
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+    border-radius: 3px 3px 0px 0px;
 }
 #chatcursor {
 	position:absolute;
 	left:5px;
 	bottom:5px;
-	font-size:10px;
 	color: white;
 	padding:0px;
 }
@@ -17,8 +31,6 @@
 	margin:4px;
 	width:608px;
 	height:12px;
-	font-family:sans-serif;
-	font-size:10px;
 	padding:1px;
 	padding-left:15px;
 	color: white;
@@ -29,11 +41,8 @@
 	margin:4px 4px 0px 4px;
 	width:622px;
 	max-height:198px;
-	font-family:sans-serif;
-	font-size: 10px;
 	padding:1px;
 	color: white;
-	background: rgba(0, 0, 0, 0.6);
 	overflow:hidden;
 	display:none;
 }
@@ -42,9 +51,8 @@
 	left:0px;
 	bottom:0px;
 	max-height:200px;
-	font-family:sans-serif;
-	font-size: 10px;
 	color: white;
+	font-weight:bold;
 }
 .messageicon {
 	position:relative;

web/dynmap_style.css

@@ -19,7 +19,7 @@ body {
     padding: 0px ;
 }
 
-.dynmap .map .tile img {
+.dynmap .map .tile img, img {
     image-rendering: -moz-crisp-edges;
     -ms-interpolation-mode: nearest-neighbor;
 }
@@ -59,7 +59,7 @@ body {
 .dynmap > .map {
     width: 100%;
     height: 100%;
-	background-color: #000;
+    background: #000;
 }
 
 /* Map Controls */
@@ -77,27 +77,29 @@ body {
 
 
 /*******************
- * Alerts
+ * Alerts are pretty.
  */
 
 .alertbox {
     position: fixed;
     width: 50%;
+    z-index: 999;
 
     top: 0;
     left: 0;
     right: 0;
 
     text-align: center;
-	color: #a00;
+    font-size: 16px;
-	background-color: #fff;
+    font-weight: bold;
+
+    color: #fff;
+    background: #c00;
+
+    border-color: #a00;
 
     margin: auto;
-	padding: 5px;
+    padding: 8px;
-
-	border: 1px solid #a00;
-	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
-	border-radius: 0 0 3px 3px;
 }
 
 
@@ -118,6 +120,25 @@ body {
     text-decoration: none;
 }
 
+.alertbox,
+.largeclock {
+    background: rgba(0,0,0,0.6);
+
+    border-style: solid;
+    border-width: 0px 1px 1px 1px;
+
+    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+    -o-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+
+    -moz-border-radius: 0 0 3px 3px;
+    -webkit-border-radius: 0 0 3px 3px;
+    -o-border-radius: 0 0 3px 3px;
+
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
+    border-radius: 0 0 3px 3px;
+}
+
 /*******************
  * sidebar panels
  */
@@ -126,11 +147,12 @@ body {
 
     display: block;
     position: absolute;
+    z-index: 120;
 
     top: 0px;
     right: 0px;
 
-	width: 250px;
+    width: 200px;
     height: 100%;
 
     background: rgb(0,0,0); /* FU IE */
@@ -139,12 +161,12 @@ body {
 
     border-left: 1px solid rgba(0,0,0,0.5);
 
-	margin-right: -253px;
+    margin-right: -203px;
-	/*margin-right: 251px;*/
 
     -moz-transition: all 0.6s ease-in-out;
     -webkit-transition: all 0.6s ease-in-out;
     -o-transition: all 0.6s ease-in-out;
+
     transition: all 0.6s ease-in-out;
 }
 
@@ -152,6 +174,7 @@ body {
 
     display: block;
     position: fixed;
+    z-index: 110;
 
     right: 0px;
     top: 0px;
@@ -171,22 +194,10 @@ body {
     -moz-transition: all 0.6s ease-in-out;
     -webkit-transition: all 0.6s ease-in-out;
     -o-transition: all 0.6s ease-in-out;
+
     transition: all 0.6s ease-in-out;
 }
 
-.dynmap .sidebar .panel > .pin {
-	position: absolute;
-	right: 4px;
-	top: 4px;
-	width: 16px;
-	height: 16px;
-	background-image: url(window_unpinned.png);
-}
-
-.dynmap .sidebar.pinned .panel > .pin {
-	background-image: url(window_pinned.png);
-}
-
 /* magic and metrics */
 
 .dynmap .sidebar:hover,
@@ -203,6 +214,98 @@ body {
     right: -120px;
 }
 
+/* pinning */
+
+.dynmap .sidebar .panel > .pin {
+    position: absolute;
+
+    right: 8px;
+    top: 7px;
+
+    width: 16px;
+    height: 16px;
+
+    background-image: url(window_close.png);
+}
+
+.dynmap .sidebar .panel > .pin:hover {
+    background-image: url(window_pinned.png);
+}
+
+.dynmap .sidebar.pinned .panel > .pin:hover {
+    background-image: url(window_close.png);
+}
+
+.dynmap .sidebar.pinned .panel > .pin {
+    background-image: url(window_pinned.png);
+}
+
+
+/*******************
+ * Sidebar clock style
+ */
+
+/*.dynmap .panel .clock {
+    display: inline-block;
+    height: 16px;
+
+    font-weight: bold;
+    background-repeat: no-repeat;
+    padding-left: 20px;
+    margin-left: 8px;
+}*/
+.clock {
+	position:relative;
+	bottom:12px;
+	text-align:center;
+}
+
+/*.clock.night {
+    background-image: url(clock_night.png);
+    color: #dff;
+}
+
+.clock.day {
+    background-image: url(clock_day.png);
+    color: #fd3;
+}*/
+
+.clock.night, clock.day {
+    -moz-transition: all 8s 8s linear;
+    -webkit-transition: all 8s 8s linear;
+    -o-transition: all 8s 8s linear;
+    transition: all 8s 8s linear;
+}
+
+
+/*******************
+ * Large clock style
+ */
+
+.largeclock {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-color: rgba(0,0,0,0.5);
+    width: 150px;
+    height: 60px;
+    background: rgba(0,0,0,0.6);
+
+    margin: auto;
+}
+
+.timeofday { 
+    background-repeat: no-repeat; 
+}
+
+.timeofday.sun {
+    background-image: url(sun.png);
+}
+
+.timeofday.moon {
+    background-image: url(moon.png);
+}
 
 /*******************
  * map list-specific styling
@@ -281,7 +384,10 @@ body {
     color: #fff;
 }
 
-/* may need to tweak this for canvas */
+.dynmap .playerlist .playerIcon img {
+    width: 16px;
+    height: 16px;
+}
 
 .dynmap .playerlist .playerIcon > * {
     vertical-align: middle;
@@ -299,9 +405,11 @@ body {
 .dynmap .playerlist .player.following {
     background: rgba(128,128,128,0.5);
     border: 1px solid rgba(255,255,255,0.5);
+
     border-radius: 3px;
-	padding: 6px 2px;
     -moz-border-radius: 3px;
+
+    padding: 6px 2px;
 }
 
 .dynmap .playerlist .player:hover .playericon {
@@ -316,3 +424,37 @@ body {
 .dynmap .playerlist .player:hover .playericon > * {
     visibility: hidden;
 }
+
+
+/*******************
+ * players on the map
+ */
+
+.dynmap .playerName {
+    color: #fff;
+    background: rgba(0,0,0,0.6);
+    padding: 2px;
+
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+
+
+/*******************
+ * Compass
+ */
+
+.compass {
+    display: block;
+    position: absolute;
+    z-index: 10;
+
+    height: 830px;
+    width: 84px;
+
+    top: 10px;
+    right: 32px;
+
+    background-repeat: no-repeat;
+    background-image: url(compass.png);
+}

web/map.js

@@ -174,6 +174,19 @@ DynMap.prototype = {
 			});
 		});
 
+		// The clock
+		var largeclock = $('<div/>')
+			.addClass('largeclock')
+			.appendTo(container);
+		var clock = me.clock = clocks['timeofday'](
+			$('<div/>')
+			.appendTo(largeclock)
+		);
+		var clockdigital = me.clockdigital = clocks['digital'](
+			$('<div/>')
+			.appendTo(largeclock)
+		);
+		
 		// The Player List
 		var playerlist;
 		$('<fieldset/>')
@@ -181,19 +194,12 @@ DynMap.prototype = {
 			.append(me.playerlist = playerlist = $('<ul/>').addClass('playerlist'))
 			.appendTo(panel);
 		
-		// The clock
-		var clock = me.clock = clocks[me.options.clock](
-				$('<div/>')
-					.appendTo(panel)
-		);
-		
 		// The Compass
 		var compass = me.compass = new MinecraftCompass(
 				$('<div/>')
 					.addClass('compass')
-					.appendTo(panel)
+					.appendTo(container)
 		);
-		compass.initialize();
 		
 		// The chat
 		if (me.options.showchat == 'modal') {
@@ -270,6 +276,7 @@ DynMap.prototype = {
 			
 				me.lasttimestamp = update.timestamp;
 				me.clock.setTime(update.servertime);
+				me.clockdigital.setTime(update.servertime);
 
 				var typeVisibleMap = {};
 				var newmarkers = {};