From 22cc46f4b8c45f24e51777c2c5156de6fee1f924 Mon Sep 17 00:00:00 2001 From: Arthur Mayer Date: Sat, 19 Feb 2011 20:51:21 +0100 Subject: [PATCH] many ui iprovements by lechd --- web/chat_style.css | 30 +-- web/compass.png | Bin 5795 -> 5585 bytes web/dynmap_style.css | 434 ++++++++++++++++++++++++++++--------------- web/map.js | 25 ++- web/moon.png | Bin 3211 -> 3248 bytes web/sun.png | Bin 5233 -> 5319 bytes 6 files changed, 323 insertions(+), 166 deletions(-) diff --git a/web/chat_style.css b/web/chat_style.css index 253f90bd..30e5bab5 100644 --- a/web/chat_style.css +++ b/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); - background: rgba(0, 0, 0, 0.6); + + 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; diff --git a/web/compass.png b/web/compass.png index 6fdd21a0af66ea8278b1097d9b3b2664c1a11b13..a7e13e54c8c7e7d06d77d0d668b8853ca8106e9d 100644 GIT binary patch delta 2899 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 delta 3110 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%0D>SK*R0^y*4D1# z;^GcTlD-y2F%}MogH&H~VzC$kfj}n!FbreXtb1UO$J0?>UVf*|X5&tsI@R0W-u}Qn z_uNAbCLk0F4G#|wM`~(n>H(mwt?gd`S~GQiMpp5K6cqhYK#PD1rcl8YDwskAQ>b7H z6-=RmsbC5fOre4)R4|1Krcl8YDwqnU .map { - width: 100%; - height: 100%; - background-color: #000; + width: 100%; + height: 100%; + background: #000; } /* Map Controls */ .gmnoprint{ - margin-top:-75px; - margin-left:-20px + margin-top:-75px; + margin-left:-20px } /* Google branding */ -.dynmap > div.map > DIV > DIV:first-child + DIV, -.dynmap > div.map > DIV > DIV:first-child + DIV + DIV { - visibility: hidden !important; +.dynmap > div.map > DIV > DIV:first-child + DIV, +.dynmap > div.map > DIV > DIV:first-child + DIV + DIV { + visibility: hidden !important; } /******************* - * Alerts + * Alerts are pretty. */ .alertbox { - position: fixed; - width: 50%; + position: fixed; + width: 50%; + z-index: 999; - top: 0; - left: 0; - right: 0; + top: 0; + left: 0; + right: 0; - text-align: center; - color: #a00; - background-color: #fff; + text-align: center; + font-size: 16px; + font-weight: bold; - margin: auto; - padding: 5px; + color: #fff; + background: #c00; - border: 1px solid #a00; - box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3); - border-radius: 0 0 3px 3px; + border-color: #a00; + + margin: auto; + padding: 8px; } @@ -106,16 +108,35 @@ body { */ .dynmap .panel ul, .dynmap .panel li { - list-style: none; + list-style: none; - padding: 0; - margin: 0; + padding: 0; + margin: 0; } .maplist li a, .playerlist li a { - outline: none; - text-decoration: none; + outline: none; + 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; } /******************* @@ -124,139 +145,221 @@ body { .dynmap .sidebar { - display: block; - position: absolute; + display: block; + position: absolute; + z-index: 120; - top: 0px; - right: 0px; + top: 0px; + right: 0px; - width: 250px; - height: 100%; + width: 200px; + height: 100%; - background: rgb(0,0,0); /* FU IE */ - background: rgba(0,0,0,0.6); - color: #fff; + background: rgb(0,0,0); /* FU IE */ + background: rgba(0,0,0,0.6); + color: #fff; - border-left: 1px solid rgba(0,0,0,0.5); + border-left: 1px solid rgba(0,0,0,0.5); - margin-right: -253px; - /*margin-right: 251px;*/ + margin-right: -203px; - -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; + -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 .hitbar { - display: block; - position: fixed; + display: block; + position: fixed; + z-index: 110; - right: 0px; - top: 0px; + right: 0px; + top: 0px; - height: 100%; - width: 16px; + height: 100%; + width: 16px; - text-align: center; + text-align: center; - background: url(sidebar_hint.png) rgb(0,0,0); - background: url(sidebar_hint.png) rgba(0,0,0,0.6); - background-repeat: no-repeat; - background-position:center; + background: url(sidebar_hint.png) rgb(0,0,0); + background: url(sidebar_hint.png) rgba(0,0,0,0.6); + background-repeat: no-repeat; + background-position:center; - border: 1px solid rgba(0,0,0,0.5); + border: 1px solid rgba(0,0,0,0.5); - -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; -} + -moz-transition: all 0.6s ease-in-out; + -webkit-transition: all 0.6s ease-in-out; + -o-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); + transition: all 0.6s ease-in-out; } /* magic and metrics */ .dynmap .sidebar:hover, .dynmap .sidebar.pinned { - margin-right: 0px; + margin-right: 0px; } .dynmap .sidebar < .hitbar:hover { - margin-right: 0px; + margin-right: 0px; } .dynmap .sidebar:hover .hitbar, .dynmap .sidebar.pinned .hitbar { - right: -120px; + 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 */ .dynmap .panel .world { - display: block; - clear: both; + display: block; + clear: both; - width: 100%; - line-height: 18px; - margin: 0 0 30px 0; + width: 100%; + line-height: 18px; + margin: 0 0 30px 0; - border-bottom: 1px solid rgba(128,128,128,0.3); + border-bottom: 1px solid rgba(128,128,128,0.3); } .dynmap .maplist .map { - display: block; - float: left; + display: block; + float: left; - height: 18px; - width: 18px; + height: 18px; + width: 18px; - padding: 2px; - margin: 5px 2px; - - border-radius: 3px; - -moz-border-radius: 3px; - - background: rgba(32,32,32,0.6); - border: 1px solid rgba(64,64,64,0.6); + padding: 2px; + margin: 5px 2px; + + border-radius: 3px; + -moz-border-radius: 3px; + + background: rgba(32,32,32,0.6); + border: 1px solid rgba(64,64,64,0.6); } .dynmap .maplist .map:hover { - background: rgba(64,64,64,0.6); - border: 1px solid rgba(128,128,128,0.6); + background: rgba(64,64,64,0.6); + border: 1px solid rgba(128,128,128,0.6); } .dynmap .maplist .map.selected { - background: rgba(128,128,128,0.5); - border: 1px solid rgba(255,255,255,0.5); + background: rgba(128,128,128,0.5); + border: 1px solid rgba(255,255,255,0.5); } .dynmap .maplist .map > a { - display: block; + display: block; - text-indent: -99999px; - outline: none; + text-indent: -99999px; + outline: none; } .dynmap .maplist .map > a { - background-repeat: no-repeat; - background-position:center; + background-repeat: no-repeat; + background-position: center; } /******************* @@ -265,54 +368,93 @@ body { .dynmap .playerlist .player { - display: inline-block; - float: left; - width: 100%; + display: inline-block; + float: left; + width: 100%; - padding: 4px 0; - border: 3px solid transparent; + padding: 4px 0; + border: 3px solid transparent; } .dynmap .playerlist .player:hover { - background: rgba(64,64,64,0.6); + background: rgba(64,64,64,0.6); } .dynmap .playerlist .player a { - color: #fff; + color: #fff; } -/* may need to tweak this for canvas */ +.dynmap .playerlist .playerIcon img { + width: 16px; + height: 16px; +} .dynmap .playerlist .playerIcon > * { - vertical-align: middle; - border: none; + vertical-align: middle; + border: none; } .dynmap .playerlist .playerIcon { - width: 16px; - height: 16px; - margin: 0px 7px; - display: block; - float: left; + width: 16px; + height: 16px; + margin: 0px 7px; + display: block; + float: left; } .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; + background: rgba(128,128,128,0.5); + border: 1px solid rgba(255,255,255,0.5); + + border-radius: 3px; + -moz-border-radius: 3px; + + padding: 6px 2px; } .dynmap .playerlist .player:hover .playericon { - background: url(player_follow_off.png) no-repeat; + background: url(player_follow_off.png) no-repeat; } .dynmap .playerlist .player.following .playericon { - background: url(player_follow_on.gif) no-repeat; + background: url(player_follow_on.gif) no-repeat; } .dynmap .playerlist .player.following .playericon > *, .dynmap .playerlist .player:hover .playericon > * { - visibility: hidden; + 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); } \ No newline at end of file diff --git a/web/map.js b/web/map.js index 9aca3dd8..377ce06b 100644 --- a/web/map.js +++ b/web/map.js @@ -174,6 +174,19 @@ DynMap.prototype = { }); }); + // The clock + var largeclock = $('
') + .addClass('largeclock') + .appendTo(container); + var clock = me.clock = clocks['timeofday']( + $('
') + .appendTo(largeclock) + ); + var clockdigital = me.clockdigital = clocks['digital']( + $('
') + .appendTo(largeclock) + ); + // The Player List var playerlist; $('
') @@ -181,19 +194,12 @@ DynMap.prototype = { .append(me.playerlist = playerlist = $('