From 74be29ea29142d232fda2affe5bc84df20c78a2d Mon Sep 17 00:00:00 2001
From: Cameron Moon <cameron@moon.net.au>
Date: Mon, 11 Feb 2013 12:25:47 +1100
Subject: [PATCH] Made the sidebar transparent like the chat box

---
 code/boot.js | 13 ++++++-------
 style.css    | 23 ++++++++++-------------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/code/boot.js b/code/boot.js
index b4d927ba..246d6c1f 100644
--- a/code/boot.js
+++ b/code/boot.js
@@ -27,14 +27,14 @@ window.setupLargeImagePreview = function() {
 
 window.setupStyles = function() {
   $('head').append('<style>' +
-    [ '#map { margin-right: '+(SIDEBAR_WIDTH+2)+'px } ',
-      '#largepreview.enl img { border:2px solid '+COLORS[TEAM_ENL]+'; } ',
+    [ '#largepreview.enl img { border:2px solid '+COLORS[TEAM_ENL]+'; } ',
       '#largepreview.res img { border:2px solid '+COLORS[TEAM_RES]+'; } ',
       '#largepreview.none img { border:2px solid '+COLORS[TEAM_NONE]+'; } ',
       '#chatcontrols { bottom: '+(CHAT_SHRINKED+24)+'px; }',
       '#chat { height: '+CHAT_SHRINKED+'px; } ',
+      '.leaflet-right { margin-right: '+(SIDEBAR_WIDTH+1)+'px } ',
       '#updatestatus { width:'+(SIDEBAR_WIDTH-2*4)+'px;  } ',
-      '#sidebar { width:'+(SIDEBAR_WIDTH + HIDDEN_SCROLLBAR_ASSUMED_WIDTH + 2 /*border*/)+'px;  } ',
+      '#sidebar { width:'+(SIDEBAR_WIDTH + HIDDEN_SCROLLBAR_ASSUMED_WIDTH + 1 /*border*/)+'px;  } ',
       '#sidebartoggle { right:'+SIDEBAR_WIDTH+'px;  } ',
       '#scrollwrapper  { width:'+(SIDEBAR_WIDTH + 2*HIDDEN_SCROLLBAR_ASSUMED_WIDTH)+'px; right:-'+(2*HIDDEN_SCROLLBAR_ASSUMED_WIDTH-2)+'px } ',
       '#sidebar input, h2, #updatestatus  { width:'+(SIDEBAR_WIDTH - 2*4)+'px !important } ',
@@ -176,16 +176,15 @@ window.setupSidebarToggle = function() {
     var sidebar = $('#sidebar');
     if(sidebar.is(':visible')) {
       sidebar.hide();
-      $('#map').css('margin-right','0');
+      $('.leaflet-right').css('margin-right','0');
       toggle.html('◢<br>◥');
       toggle.css('right', '0');
     } else {
       sidebar.show();
-      $('#map').css('margin-right', SIDEBAR_WIDTH+2+'px');
+      $('.leaflet-right').css('margin-right', SIDEBAR_WIDTH+1+'px');
       toggle.html('◣<br>◤');
-      toggle.css('right', SIDEBAR_WIDTH+'px');
+      toggle.css('right', SIDEBAR_WIDTH+1+'px');
     }
-    window.map.invalidateSize(false);
   });
 }
 
diff --git a/style.css b/style.css
index 45145173..30b50d61 100644
--- a/style.css
+++ b/style.css
@@ -10,10 +10,6 @@ body {
   margin: 0;
 }
 
-#map {
-  margin-right:302px;
-}
-
 #scrollwrapper {
   height: 100%;
   overflow: hidden;
@@ -24,8 +20,8 @@ body {
 }
 
 #sidebar {
-  background: #000;
-  border-left: 2px solid #c3c3c3;
+  background-color: rgba(8, 48, 78, 0.9);
+  border-left: 1px solid #20A8B1;
   color: #888;
   height: 100%;
   position: relative;
@@ -33,16 +29,17 @@ body {
   top: 0;
   overflow-y:scroll;
   overflow-x:hidden;
+  z-index: 3000;
 }
 
 #sidebartoggle {
   display: block;
-  padding: 10px 5px;
+  padding: 20px 5px;
   margin-top: -31px;
   line-height: 10px;
   position: absolute;
   top: 50%;
-  z-index: 3000;
+  z-index: 3001;
   background-color: rgba(8, 48, 78, 0.9);
   color: #FFCE00;
   border: 1px solid #20A8B1;
@@ -257,7 +254,7 @@ summary {
 /* sidebar ************************************************************/
 
 #sidebar > * {
-  border-bottom: 1px solid #c3c3c3;
+  border-bottom: 1px solid #20A8B1;
 }
 
 
@@ -321,7 +318,7 @@ h2 sup, h2 sub {
 
 /* geosearch input, and others */
 input {
-  background: #313131;
+  background-color: rgba(0, 0, 0, 0.3);
   color: #ffce00;
   height: 22px;
   line-height: 22px;
@@ -381,7 +378,7 @@ h3 {
 }
 
 .mods span {
-  background: #313131;
+  background-color: rgba(0, 0, 0, 0.3);
   /* can’t use inline-block because Webkit’s implementation is buggy and
    * introduces additional margins in random cases. No clear necessary,
    * as that’s solved by setting height on .mods. */
@@ -541,9 +538,9 @@ aside:nth-child(odd) span {
 
 /* update status */
 #updatestatus {
-  background: #000;
+  background-color: rgba(8, 48, 78, 1);
   border-bottom: 0;
-  border-top: 1px solid #c3c3c3;
+  border-top: 1px solid #20A8B1;
   bottom: 0;
   color: #ffce00;
   font-size:13px;