From c78689f2c75051812d75c6adbc5649474a21aa87 Mon Sep 17 00:00:00 2001 From: Blake Grotewold Date: Thu, 14 Nov 2013 12:29:27 -0600 Subject: [PATCH] Add reverse color scheme. --- css/dark.css | 182 +++++++++++++++++++++++++++++++++++++++++++++++ script/engine.js | 44 ++++++++++++ script/space.js | 36 ++++++++-- 3 files changed, 255 insertions(+), 7 deletions(-) create mode 100644 css/dark.css diff --git a/css/dark.css b/css/dark.css new file mode 100644 index 0000000..78a4c10 --- /dev/null +++ b/css/dark.css @@ -0,0 +1,182 @@ +body { + background-color: #272823; + color: #EEE; +} + +div.headerButton { + border-left: 1px solid #EEE; +} + +div#notifyGradient { + background-color: #272823; + background: -webkit-linear-gradient( rgba(39, 40, 35, 0) 0%, rgba(39, 40, 35, 1) 100% ); + background: linear-gradient( rgba(39, 40, 35, 0) 0%, rgba(39, 40, 35, 1) 100% ); + filter: alpha( Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500 ); +} + +div#saveNotify { + background: #272823; +} + +.eventPanel:before { + background-color: #272823; +} + +.eventTitle:after { + background-color: #272823; +} + +div.tooltip { + background-color: #111; + border: 1px solid black; + box-shadow: -1px 3px 2px #111; +} + +div#population { + background-color: #272823; +} + +div#village:before { + background: #272823; +} + +div#village { + border: 1px solid #EEE; +} + +div#stores:before { + background: #272823; +} + +div#stores { + border: 1px solid #EEE; +} + +div#weapons:before { + background: #272823; +} + +div#weapons { + border: 1px solid #EEE; +} + +div#bagspace { + background-color: #272823; +} + +div#outfitting:before { + background: #272823; +} + +div#perks { + border: 1px solid #EEE; +} + +div#perks:before { + background-color: #272823; +} + +div#outfitting { + border: 1px solid #EEE; +} + +#bagspace-world { + border: 1px solid #EEE; +} + +div.supplyItem { + border: 1px solid #EEE; +} + +#backpackTitle { + background-color: #272823; +} + +#backpackSpace { + background-color: #272823; +} + +#healthCounter { + background-color: #272823; +} + +#map { + border: 1px solid #EEE; +} + +#map .landmark { + color: #EEE; +} + +#dropMenu { + background: none repeat scroll 0 0 #272823; + box-shadow: -1px 3px 2px #111; +} + +div.button { + border: 1px solid #EEE; +} + +div.button.disabled, div.button.disabled:hover { + border-color: #444; + color: #444; +} + + +.upBtn:after, .upManyBtn:after { + border-color: transparent transparent #272823; +} + +.upBtn:before, .upManyBtn:before { + border-color: transparent transparent #EEE; +} + +.upBtn.disabled:before, .upManyBtn.disabled:before { + border-color: transparent transparent #555; +} + +.dnBtn:after, .dnManyBtn:after { + border-color: #272823 transparent transparent; +} + +.dnBtn:before, .dnManyBtn:before { + border-color: #EEE transparent transparent; +} + +.dnBtn.disabled:before, .dnManyBtn.disabled:before { + border-color: #555 transparent transparent; +} + +body.noMask .eventTitle { + background-color: #EEE; + color: #272823; +} + +body.noMask .eventTitle:after { + background-color: #EEE; +} + +body.noMask .eventPanel { + background-color: #EEE; +} + +body.noMask #description { + color: #272823; +} + +body.noMask #buttons > .button { +border: 1px solid #272823; +color: #272823; +} + +#stars > div, #starsBack > div { + color: black; +} + +.endGame { + color:#272823; +} + +#theEnd { + color: #272823; +} \ No newline at end of file diff --git a/script/engine.js b/script/engine.js index 57130b1..055e51b 100644 --- a/script/engine.js +++ b/script/engine.js @@ -97,6 +97,12 @@ var Engine = { var menu = $('
') .addClass('menu') .appendTo('body'); + + $('') + .addClass('lightsOff menuBtn') + .text('lights off.') + .click(Engine.turnLightsOff) + .appendTo(menu); $('') .addClass('menuBtn') @@ -340,6 +346,44 @@ var Engine = { } }, {width: '400px'}); }, + + findStylesheet: function(title) { + for(var i=0; i'); + Engine.turnLightsOff; + $('.lightsOff').text('lights on.'); + } + else if (darkCss.disabled) { + darkCss.disabled = false; + $('.lightsOff').text('lights on.'); + } + else { + $("#darkenLights").attr("disabled", "disabled"); + darkCss.disabled = true; + $('.lightsOff').text('lights off.'); + } + }, // Gets a guid getGuid: function() { diff --git a/script/space.js b/script/space.js index 073d36f..f45a5ba 100644 --- a/script/space.js +++ b/script/space.js @@ -226,8 +226,17 @@ var Space = { }, startAscent: function() { - $('body').addClass('noMask').css({backgroundColor: '#FFFFFF'}).animate({ - backgroundColor: '#000000' + if (Engine.isLightsOff()) { + var body_color = '#272823'; + var to_color = '#EEEEEE'; + } + else { + var body_color = '#FFFFFF'; + var to_color = '#000000'; + } + + $('body').addClass('noMask').css({backgroundColor: body_color}).animate({ + backgroundColor: to_color }, { duration: Space.FTB_SPEED, easing: 'linear', @@ -251,7 +260,10 @@ var Space = { }, 1000); Space._panelTimeout = setTimeout(function() { - $('#spacePanel, .menu').animate({color: 'white'}, 500, 'linear'); + if (Engine.isLightsOff()) + $('#spacePanel, .menu').animate({color: '#272823'}, 500, 'linear'); + else + $('#spacePanel, .menu').animate({color: 'white'}, 500, 'linear'); }, Space.FTB_SPEED / 2); Space.createAsteroid(); @@ -312,10 +324,13 @@ var Space = { clearInterval(Space._timer); clearInterval(Space._shipTimer); clearTimeout(Space._panelTimeout); - + if (Engine.isLightsOff()) + var body_color = '#272823'; + else + var body_color = '#FFFFFF'; // Craaaaash! $('body').removeClass('noMask').stop().animate({ - backgroundColor: '#FFFFFF' + backgroundColor: body_color }, { duration: 300, progress: function() { @@ -329,9 +344,12 @@ var Space = { Space.starsBack.remove(); Space.stars = Space.starsBack = null; $('#starsContainer').remove(); + $('body').attr('style', ''); + $('#notifyGradient').attr('style', ''); + $('#spacePanel').attr('style', ''); } }); - $('#spacePanel, .menu').animate({color: 'black'}, 300, 'linear'); + $('.menu').animate({color: '#666'}, 300, 'linear'); $('#outerSlider').animate({top: '0px'}, 300, 'linear'); Engine.activeModule = Ship; Ship.onArrival(); @@ -374,9 +392,13 @@ var Space = { $('#header').empty(); setTimeout(function() { $('body').stop(); + if (Engine.isLightsOff()) + var container_color = '#EEE'; + else + var container_color = '#000'; $('#starsContainer').animate({ opacity: 0, - 'background-color': '#000' + 'background-color': container_color }, { duration: 2000, progress: function() {