Upgrade to Bootstrap 3

js/core.js

@@ -99,12 +99,14 @@ define([
     }
 
     // Load settings in settings dialog
+    var $themeInputElt = undefined;
     function loadSettings() {
 
         // Layout orientation
         utils.setInputRadio("radio-layout-orientation", settings.layoutOrientation);
         // Theme
-        utils.setInputValue("#input-settings-theme", localStorage.theme || 'default');
+        utils.setInputValue($themeInputElt, localStorage.theme || 'default');
+        $themeInputElt.change();
         // Lazy rendering
         utils.setInputChecked("#input-settings-lazy-rendering", settings.lazyRendering);
         // Editor font family
@@ -131,7 +133,7 @@ define([
         // Layout orientation
         newSettings.layoutOrientation = utils.getInputRadio("radio-layout-orientation");
         // Theme
-        var theme = utils.getInputValue("#input-settings-theme");
+        var theme = utils.getInputValue($themeInputElt);
         // Lazy Rendering
         newSettings.lazyRendering = utils.getInputChecked("#input-settings-lazy-rendering");
         // Editor font family
@@ -574,7 +576,7 @@ define([
                 $(this).find(".modal-footer a:last").click();
             }
         });
-        
+
         // Configure Mousetrap
         mousetrap.stopCallback = function(e, element, combo) {
             return uiLocked || isMenuPanelShown || isDocumentPanelShown || isModalShown || $(element).is("input, select, textarea:not(#wmd-input)");
@@ -614,6 +616,30 @@ define([
                 window.location.reload();
             }
         });
+
+        // Hot theme switcher in the settings
+        var currentTheme = localStorage.theme || 'default';
+        function applyTheme(theme) {
+            theme = theme || 'default';
+            if(currentTheme != theme) {
+                var themeModule = "less!styles/" + theme;
+                // Undefine the module in RequireJS
+                requirejs.undef(themeModule);
+                // Then reload the style
+                require([
+                    themeModule + ".less"
+                ]);
+                currentTheme = theme;
+            }
+        }
+        $themeInputElt = $("#input-settings-theme");
+        $themeInputElt.on("change", function() {
+            applyTheme(this.value);
+        });
+        $(".action-apply-theme").click("change", function() {
+            applyTheme(localStorage.theme);
+        });
+
         // Import settings
         $(".action-import-settings").click(function(e) {
             $("#input-file-import-settings").click();

js/extensions/documentSelector.js

@@ -47,6 +47,7 @@ define([
     var liEltList = undefined;
     var sortFunction = undefined;
     var selectFileDesc = undefined;
+    var selectedLi = undefined;
     var buildSelector = function() {
         var liListHtml = _.chain(fileSystem).sortBy(sortFunction).reduce(function(result, fileDesc) {
             return result + _.template(liEltTmpl, {
@@ -64,6 +65,7 @@ define([
             var fileDesc = fileSystem[$liElt.data('fileIndex')];
             liEltMap[fileDesc.fileIndex] = $liElt;
             $liElt.find("a").click(function() {
+                selectedLi = undefined;
                 if(!$liElt.hasClass("disabled")) {
                     fileMgr.selectFile(fileDesc);
                 }
@@ -127,7 +129,6 @@ define([
         }), dropdownElt));
         var $dropdownElt = $(dropdownElt).dropdown();
 
-        var shortcutLi = undefined;
         var documentPanelTogglerElt = $('.document-panel .collapse-button');
         documentPanelTogglerElt.prop("title", _.template("<%= title %>  <%= shortcutPrevious %>  <%= shortcutNext %>", {
             title: documentPanelTogglerElt.prop("title"),
@@ -138,30 +139,30 @@ define([
         // Handle key shortcut
         var shortcutPrevious = documentSelector.config.shortcutPrevious.toLowerCase();
         mousetrap.bind(shortcutPrevious, function() {
-            if(shortcutLi === undefined) {
+            if(selectedLi === undefined) {
                 $dropdownElt.dropdown('toggle');
-                shortcutLi = liEltMap[selectFileDesc.fileIndex];
+                selectedLi = liEltMap[selectFileDesc.fileIndex];
             }
-            var liIndex = _.indexOf(liEltList, shortcutLi) - 1;
+            var liIndex = _.indexOf(liEltList, selectedLi) - 1;
             if(liIndex === -2) {
                 liIndex = -1;
             }
-            shortcutLi = liEltList[(liIndex + liEltList.length) % liEltList.length];
+            selectedLi = liEltList[(liIndex + liEltList.length) % liEltList.length];
             _.defer(function() {
-                shortcutLi.find("a").focus();
+                selectedLi.find("a").focus();
             });
             return false;
         });
         var shortcutNext = documentSelector.config.shortcutNext.toLowerCase();
         mousetrap.bind(documentSelector.config.shortcutNext.toLowerCase(), function() {
-            if(shortcutLi === undefined) {
+            if(selectedLi === undefined) {
                 $dropdownElt.dropdown('toggle');
-                shortcutLi = liEltMap[selectFileDesc.fileIndex];
+                selectedLi = liEltMap[selectFileDesc.fileIndex];
             }
-            var liIndex = _.indexOf(liEltList, shortcutLi) + 1;
+            var liIndex = _.indexOf(liEltList, selectedLi) + 1;
-            shortcutLi = liEltList[liIndex % liEltList.length];
+            selectedLi = liEltList[liIndex % liEltList.length];
             _.defer(function() {
-                shortcutLi.find("a").focus();
+                selectedLi.find("a").focus();
             });
             return false;
         });
@@ -173,9 +174,8 @@ define([
             shortcutSelect1,
             shortcutSelect2
         ], function() {
-            if(shortcutLi !== undefined) {
+            if(selectedLi !== undefined) {
-                shortcutLi.find("a").click();
+                selectedLi.find("a").click();
-                shortcutLi = undefined;
             }
         }, "keyup");
     };

js/extensions/notifications.js

@@ -47,7 +47,7 @@ define([
             }
         }
         options = options || {};
-        iconClass = iconClass || "icon-info-sign";
+        iconClass = iconClass || "icon-info-circled";
         jGrowl("<i class='icon-white " + iconClass + "'></i> " + _.escape(message), options);
     }
 
@@ -58,10 +58,10 @@ define([
     notifications.onError = function(error) {
         logger.error(error);
         if(_.isString(error)) {
-            showMessage(error, "icon-warning-sign");
+            showMessage(error, "icon-attention");
         }
         else if(_.isObject(error)) {
-            showMessage(error.message, "icon-warning-sign");
+            showMessage(error.message, "icon-attention");
         }
     };
 

js/html/bodyIndex.html

@@ -949,7 +949,7 @@
 
 			</div>
 			<div class="modal-footer">
-				<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
+				<a href="#" class="btn btn-default action-apply-theme" data-dismiss="modal">Cancel</a>
 				<a href="#" class="btn btn-primary action-apply-settings"
 					data-dismiss="modal">OK</a>
 			</div>

js/libs/jgrowl.js

@@ -1,356 +0,0 @@
-/**
- * jGrowl 1.2.11
- *
- * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
- * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
- *
- * Written by Stan Lemon <stosh1985@gmail.com>
- * Last updated: 2013.02.14
- *
- * jGrowl is a jQuery plugin implementing unobtrusive userland notifications.  These
- * notifications function similarly to the Growl Framework available for
- * Mac OS X (http://growl.info).
- *
- * To Do:
- * - Move library settings to containers and allow them to be changed per container
- *
- * Changes in 1.2.11
- * - Fix artifacts left behind by the shutdown method and text-cleanup
- *
- * Changes in 1.2.10
- * - Fix beforeClose to be called in click event
- *
- * Changes in 1.2.9
- * - Fixed BC break in jQuery 2.0 beta
- *
- * Changes in 1.2.8
- * - Fixes for jQuery 1.9 and the MSIE6 check, note that with jQuery 2.0 support
- *   jGrowl intends to drop support for IE6 altogether
- *
- * Changes in 1.2.6
- * - Fixed js error when a notification is opening and closing at the same time
- *
- * Changes in 1.2.5
- * - Changed wrapper jGrowl's options usage to "o" instead of $.jGrowl.defaults
- * - Added themeState option to control 'highlight' or 'error' for jQuery UI
- * - Ammended some CSS to provide default positioning for nested usage.
- * - Changed some CSS to be prefixed with jGrowl- to prevent namespacing issues
- * - Added two new options - openDuration and closeDuration to allow
- *   better control of notification open and close speeds, respectively
- *   Patch contributed by Jesse Vincet.
- * - Added afterOpen callback.  Patch contributed by Russel Branca.
- *
- * Changes in 1.2.4
- * - Fixed IE bug with the close-all button
- * - Fixed IE bug with the filter CSS attribute (special thanks to gotwic)
- * - Update IE opacity CSS
- * - Changed font sizes to use "em", and only set the base style
- *
- * Changes in 1.2.3
- * - The callbacks no longer use the container as context, instead they use the actual notification
- * - The callbacks now receive the container as a parameter after the options parameter
- * - beforeOpen and beforeClose now check the return value, if it's false - the notification does
- *   not continue.  The open callback will also halt execution if it returns false.
- * - Fixed bug where containers would get confused
- * - Expanded the pause functionality to pause an entire container.
- *
- * Changes in 1.2.2
- * - Notification can now be theme rolled for jQuery UI, special thanks to Jeff Chan!
- *
- * Changes in 1.2.1
- * - Fixed instance where the interval would fire the close method multiple times.
- * - Added CSS to hide from print media
- * - Fixed issue with closer button when div { position: relative } is set
- * - Fixed leaking issue with multiple containers.  Special thanks to Matthew Hanlon!
- *
- * Changes in 1.2.0
- * - Added message pooling to limit the number of messages appearing at a given time.
- * - Closing a notification is now bound to the notification object and triggered by the close button.
- *
- * Changes in 1.1.2
- * - Added iPhone styled example
- * - Fixed possible IE7 bug when determining if the ie6 class shoudl be applied.
- * - Added template for the close button, so that it's content could be customized.
- *
- * Changes in 1.1.1
- * - Fixed CSS styling bug for ie6 caused by a mispelling
- * - Changes height restriction on default notifications to min-height
- * - Added skinned examples using a variety of images
- * - Added the ability to customize the content of the [close all] box
- * - Added jTweet, an example of using jGrowl + Twitter
- *
- * Changes in 1.1.0
- * - Multiple container and instances.
- * - Standard $.jGrowl() now wraps $.fn.jGrowl() by first establishing a generic jGrowl container.
- * - Instance methods of a jGrowl container can be called by $.fn.jGrowl(methodName)
- * - Added glue preferenced, which allows notifications to be inserted before or after nodes in the container
- * - Added new log callback which is called before anything is done for the notification
- * - Corner's attribute are now applied on an individual notification basis.
- *
- * Changes in 1.0.4
- * - Various CSS fixes so that jGrowl renders correctly in IE6.
- *
- * Changes in 1.0.3
- * - Fixed bug with options persisting across notifications
- * - Fixed theme application bug
- * - Simplified some selectors and manipulations.
- * - Added beforeOpen and beforeClose callbacks
- * - Reorganized some lines of code to be more readable
- * - Removed unnecessary this.defaults context
- * - If corners plugin is present, it's now customizable.
- * - Customizable open animation.
- * - Customizable close animation.
- * - Customizable animation easing.
- * - Added customizable positioning (top-left, top-right, bottom-left, bottom-right, center)
- *
- * Changes in 1.0.2
- * - All CSS styling is now external.
- * - Added a theme parameter which specifies a secondary class for styling, such
- *   that notifications can be customized in appearance on a per message basis.
- * - Notification life span is now customizable on a per message basis.
- * - Added the ability to disable the global closer, enabled by default.
- * - Added callbacks for when a notification is opened or closed.
- * - Added callback for the global closer.
- * - Customizable animation speed.
- * - jGrowl now set itself up and tears itself down.
- *
- * Changes in 1.0.1:
- * - Removed dependency on metadata plugin in favor of .data()
- * - Namespaced all events
- */
-(function($) {
-	/** Compatibility holdover for 1.9 to check IE6 **/
-	var $ie6 = (function(){
-		return false === $.support.boxModel && $.support.objectAll && $.support.leadingWhitespace;
-	})();
-
-	/** jGrowl Wrapper - Establish a base jGrowl Container for compatibility with older releases. **/
-	$.jGrowl = function( m , o ) {
-		// To maintain compatibility with older version that only supported one instance we'll create the base container.
-		if ( $('#jGrowl').size() == 0 )
-			$('<div id="jGrowl"></div>').addClass( (o && o.position) ? o.position : $.jGrowl.defaults.position ).appendTo('body');
-
-		// Create a notification on the container.
-		$('#jGrowl').jGrowl(m,o);
-	};
-
-
-	/** Raise jGrowl Notification on a jGrowl Container **/
-	$.fn.jGrowl = function( m , o ) {
-		if ( $.isFunction(this.each) ) {
-			var args = arguments;
-
-			return this.each(function() {
-				var self = this;
-
-				/** Create a jGrowl Instance on the Container if it does not exist **/
-				if ( $(this).data('jGrowl.instance') == undefined ) {
-					$(this).data('jGrowl.instance', $.extend( new $.fn.jGrowl(), { notifications: [], element: null, interval: null } ));
-					$(this).data('jGrowl.instance').startup( this );
-				}
-
-				/** Optionally call jGrowl instance methods, or just raise a normal notification **/
-				if ( $.isFunction($(this).data('jGrowl.instance')[m]) ) {
-					$(this).data('jGrowl.instance')[m].apply( $(this).data('jGrowl.instance') , $.makeArray(args).slice(1) );
-				} else {
-					$(this).data('jGrowl.instance').create( m , o );
-				}
-			});
-		};
-	};
-
-	$.extend( $.fn.jGrowl.prototype , {
-
-		/** Default JGrowl Settings **/
-		defaults: {
-			pool:			 0,
-			header:		 '',
-			group:			 '',
-			sticky:		 false,
-			position:		 'top-right',
-			glue:			 'after',
-			theme:			 'default',
-			themeState:	 'highlight',
-			corners:		 '10px',
-			check:			 250,
-			life:			 3000,
-			closeDuration:  'normal',
-			openDuration:   'normal',
-			easing:		 'swing',
-			closer:		 true,
-			closeTemplate: '&times;',
-			closerTemplate: '<div>[ close all ]</div>',
-			log:			 function(e,m,o) {},
-			beforeOpen:	 function(e,m,o) {},
-			afterOpen:		 function(e,m,o) {},
-			open:			 function(e,m,o) {},
-			beforeClose:	 function(e,m,o) {},
-			close:			 function(e,m,o) {},
-			animateOpen:	 {
-				opacity:	 'show'
-			},
-			animateClose:	 {
-				opacity:	 'hide'
-			}
-		},
-
-		notifications: [],
-
-		/** jGrowl Container Node **/
-		element:	 null,
-
-		/** Interval Function **/
-		interval:   null,
-
-		/** Create a Notification **/
-		create:	 function( message , o ) {
-			var o = $.extend({}, this.defaults, o);
-
-			/* To keep backward compatibility with 1.24 and earlier, honor 'speed' if the user has set it */
-			if (typeof o.speed !== 'undefined') {
-				o.openDuration = o.speed;
-				o.closeDuration = o.speed;
-			}
-
-			this.notifications.push({ message: message , options: o });
-
-			o.log.apply( this.element , [this.element,message,o] );
-		},
-
-		render:		 function( notification ) {
-			var self = this;
-			var message = notification.message;
-			var o = notification.options;
-
-			// Support for jQuery theme-states, if this is not used it displays a widget header
-			o.themeState = (o.themeState == '') ? '' : 'ui-state-' + o.themeState;
-
-			var notification = $('<div/>')
-				.addClass('jGrowl-notification ' + o.themeState + ' ui-corner-all' + ((o.group != undefined && o.group != '') ? ' ' + o.group : ''))
-				.append($('<div/>').addClass('jGrowl-close').html(o.closeTemplate))
-				.append($('<div/>').addClass('jGrowl-header').html(o.header))
-				.append($('<div/>').addClass('jGrowl-message').html(message))
-				.data("jGrowl", o).addClass(o.theme).children('div.jGrowl-close').bind("click.jGrowl", function() {
-					$(this).parent().trigger('jGrowl.beforeClose');
-				})
-				.parent();
-
-
-			/** Notification Actions **/
-			$(notification).bind("mouseover.jGrowl", function() {
-				$('div.jGrowl-notification', self.element).data("jGrowl.pause", true);
-			}).bind("mouseout.jGrowl", function() {
-				$('div.jGrowl-notification', self.element).data("jGrowl.pause", false);
-			}).bind('jGrowl.beforeOpen', function() {
-				if ( o.beforeOpen.apply( notification , [notification,message,o,self.element] ) != false ) {
-					$(this).trigger('jGrowl.open');
-				}
-			}).bind('jGrowl.open', function() {
-				if ( o.open.apply( notification , [notification,message,o,self.element] ) != false ) {
-					if ( o.glue == 'after' ) {
-						$('div.jGrowl-notification:last', self.element).after(notification);
-					} else {
-						$('div.jGrowl-notification:first', self.element).before(notification);
-					}
-
-					$(this).animate(o.animateOpen, o.openDuration, o.easing, function() {
-						// Fixes some anti-aliasing issues with IE filters.
-						if ($.support.opacity === false)
-							this.style.removeAttribute('filter');
-
-						if ( $(this).data("jGrowl") != null ) // Happens when a notification is closing before it's open.
-							$(this).data("jGrowl").created = new Date();
-
-						$(this).trigger('jGrowl.afterOpen');
-					});
-				}
-			}).bind('jGrowl.afterOpen', function() {
-				o.afterOpen.apply( notification , [notification,message,o,self.element] );
-			}).bind('jGrowl.beforeClose', function() {
-				if ( o.beforeClose.apply( notification , [notification,message,o,self.element] ) != false )
-					$(this).trigger('jGrowl.close');
-			}).bind('jGrowl.close', function() {
-				// Pause the notification, lest during the course of animation another close event gets called.
-				$(this).data('jGrowl.pause', true);
-				$(this).animate(o.animateClose, o.closeDuration, o.easing, function() {
-					if ( $.isFunction(o.close) ) {
-						if ( o.close.apply( notification , [notification,message,o,self.element] ) !== false )
-							$(this).remove();
-					} else {
-						$(this).remove();
-					}
-				});
-			}).trigger('jGrowl.beforeOpen');
-
-			/** Optional Corners Plugin **/
-			if ( o.corners != '' && $.fn.corner != undefined ) $(notification).corner( o.corners );
-
-			/** Add a Global Closer if more than one notification exists **/
-			if ( $('div.jGrowl-notification:parent', self.element).size() > 1 &&
-				 $('div.jGrowl-closer', self.element).size() == 0 && this.defaults.closer != false ) {
-				$(this.defaults.closerTemplate).addClass('jGrowl-closer ' + this.defaults.themeState + ' ui-corner-all').addClass(this.defaults.theme)
-					.appendTo(self.element).animate(this.defaults.animateOpen, this.defaults.speed, this.defaults.easing)
-					.bind("click.jGrowl", function() {
-						$(this).siblings().trigger("jGrowl.beforeClose");
-
-						if ( $.isFunction( self.defaults.closer ) ) {
-							self.defaults.closer.apply( $(this).parent()[0] , [$(this).parent()[0]] );
-						}
-					});
-			};
-		},
-
-		/** Update the jGrowl Container, removing old jGrowl notifications **/
-		update:	 function() {
-			$(this.element).find('div.jGrowl-notification:parent').each( function() {
-				if ( $(this).data("jGrowl") != undefined && $(this).data("jGrowl").created != undefined &&
-					 ($(this).data("jGrowl").created.getTime() + parseInt($(this).data("jGrowl").life))  < (new Date()).getTime() &&
-					 $(this).data("jGrowl").sticky != true &&
-					 ($(this).data("jGrowl.pause") == undefined || $(this).data("jGrowl.pause") != true) ) {
-
-					// Pause the notification, lest during the course of animation another close event gets called.
-					$(this).trigger('jGrowl.beforeClose');
-				}
-			});
-
-			if ( this.notifications.length > 0 &&
-				 (this.defaults.pool == 0 || $(this.element).find('div.jGrowl-notification:parent').size() < this.defaults.pool) )
-				this.render( this.notifications.shift() );
-
-			if ( $(this.element).find('div.jGrowl-notification:parent').size() < 2 ) {
-				$(this.element).find('div.jGrowl-closer').animate(this.defaults.animateClose, this.defaults.speed, this.defaults.easing, function() {
-					$(this).remove();
-				});
-			}
-		},
-
-		/** Setup the jGrowl Notification Container **/
-		startup:	function(e) {
-			this.element = $(e).addClass('jGrowl').append('<div class="jGrowl-notification"></div>');
-			this.interval = setInterval( function() {
-				$(e).data('jGrowl.instance').update();
-			}, parseInt(this.defaults.check));
-
-			if ($ie6) {
-				$(this.element).addClass('ie6');
-			}
-		},
-
-		/** Shutdown jGrowl, removing it and clearing the interval **/
-		shutdown:   function() {
-			$(this.element).removeClass('jGrowl')
-				.find('div.jGrowl-notification').trigger('jGrowl.close')
-				.parent().empty()
-		},
-
-		close:	 function() {
-			$(this.element).find('div.jGrowl-notification').each(function(){
-				$(this).trigger('jGrowl.beforeClose');
-			});
-		}
-	});
-
-	/** Reference the Defaults Object for compatibility with older versions of jGrowl **/
-	$.jGrowl.defaults = $.fn.jGrowl.prototype.defaults;
-
-})(jQuery);

js/main.js

@@ -17,7 +17,7 @@ requirejs.config({
         "jquery": "libs/jquery",
         "underscore": "libs/underscore",
         "crel": "libs/crel",
-        "jgrowl": "libs/jgrowl",
+        "jgrowl": "libs/jgrowl/jquery.jgrowl",
         "mousetrap": "libs/mousetrap",
         "toMarkdown": "libs/to-markdown",
         "text": "libs/text",
@@ -59,8 +59,8 @@ requirejs.config({
         ],
         'libs/Markdown.Extra': [
             'libs/Markdown.Converter',
-            'libs/prettify',
+            'libs/prettify/prettify',
-            'libs/highlight.pack',
+            'libs/highlight/highlight.pack',
         ],
         'libs/Markdown.Editor': [
             'libs/Markdown.Converter'

js/styles/main.less

@@ -1,59 +1,80 @@
 @import "../libs/bootstrap/less/bootstrap.less";
 @import "../libs/fontello/css/fontello.css"
-@import "../../css/jgrowl.css"
+@import "../libs/jgrowl/jquery.jgrowl.css"
-@import "../../css/prettify.css"
+@import "../libs/prettify/prettify.css"
-@import "../../css/highlight.css"
+@import "../libs/highlight/highlight.css"
 
-@bg-light: #f2f2f2;
+/* Colors */
-@preview-bg-light: #e8e8e8;
+@transparent: fade(#000, 0%);
-@bg-navbar-hover: @body-bg;
+@primary-bg: #ddd;
-@navbar-text-color: #666;
+@primary-bg-light: lighten(@primary-bg, 4%);
-@text-inv: #fff;
+@primary-bg-lighter: lighten(@primary-bg, 8%);
-@text-light: #888;
+@secondary-bg: #888;
+@secondary-bg-light: lighten(@secondary-bg, 7%);
+@secondary-bg-dark: darken(@secondary-bg, 7%);
+@primary-color: #333;
+@primary-color-light: lighten(@primary-color, 13%);
+@primary-color-lighter: lighten(@primary-color, 20%);
+@primary-color-inv: #fff;
+@bg-navbar-hover: @primary-bg-lighter;
 @error-border: #ff8661;
-@panel-button-color: #777;
+@disabled-color: #ccc;
+@panel-button-color: @primary-color-lighter;
+@panel-bg: @primary-bg-lighter;
+@panel-border-color: @primary-bg-light;
+@folder-color: @primary-color-light;
+@jgrowl-bg-color: @secondary-bg-dark;
+
+/* Sizes */
 @menu-panel-width: 280px;
 @document-panel-width: 350px;
-@panel-bg: @bg-navbar-hover;
+@jgrowl-width: 260px;
-@folder-color: #555;
-@transparent: fade(#000, 0%);
 
 /* Bootstrap */
-@body-bg: #f5f5f5;
+@body-bg: @primary-bg-lighter;
-@input-border: #ddd;
+@text-color: @primary-color;
+@input-border: @primary-bg;
 @input-height-base: 38px;
-@dropdown-border: #ddd;
+@dropdown-border: @primary-bg;
-@pre-border-color: #ddd;
+@pre-border-color: @primary-bg;
-@navbar-bg: #ddd;
+@navbar-bg: @primary-bg;
 @navbar-border: @transparent;
-@nav-disabled-link-color: #ccc;
+@nav-link-hover-bg: @primary-bg-lighter;
-@nav-disabled-link-hover-color: #bbb;
+@nav-disabled-link-color: @disabled-color;
+@nav-disabled-link-hover-color: @disabled-color;
 @nav-tabs-border-color: @transparent;
-@dropdown-link-hover-bg: #888;
+@dropdown-link-color: @primary-color;
-@dropdown-link-active-color: #fff;
+@dropdown-link-hover-bg: @secondary-bg;
-@list-group-link-color: #333;
+@dropdown-link-active-color: @primary-color-inv;
+@list-group-link-color: @primary-color;
 @list-group-border: @transparent;
 @list-group-active-bg: @dropdown-link-hover-bg;
-@input-color-placeholder: #ccc;
+@list-group-hover-bg: @primary-bg-lighter;
-@btn-default-color: #333;
+@input-color-placeholder: @disabled-color;
+@btn-default-color: @primary-color;
 @btn-default-bg: @transparent;
 @btn-default-border: @transparent;
-@btn-primary-color: #fff;
+@btn-default-hover-bg: fade(#000, 5%);
-@btn-primary-bg: #888;
+@btn-primary-color: @primary-color-inv;
+@btn-primary-bg: @secondary-bg;
 @btn-primary-border: @transparent;
-@btn-success-color: #555;
+@btn-primary-hover-bg: darken(@secondary-bg, 8%);
+@btn-success-color: @primary-color-light;
 @btn-success-bg: @navbar-bg;
 @btn-success-border: @transparent;
 @btn-info-bg: @body-bg;
 @btn-info-border: @transparent;
 @gray-lighter: @body-bg;
-@modal-header-border-color: @preview-bg-light;
+@modal-header-border-color: @primary-bg-light;
-@modal-content-border-color: @preview-bg-light;
+@modal-content-border-color: @primary-bg-light;
-@modal-footer-border-color: @preview-bg-light;
+@modal-footer-border-color: @primary-bg-light;
-@modal-content-separator-color: #eee;
+@modal-content-separator-color: @primary-bg-lighter;
-@modal-backdrop-bg: #999;
+@modal-backdrop-bg: @secondary-bg-light;
 @blockquote-border-color: fade(#000, 5%);
+@code-color: @primary-color;
+@code-bg: fade(#000, 5%);
 @tooltip-max-width: 220px;
+@close-color: @primary-color;
 
 
 body {
@@ -110,11 +131,12 @@ body {
 } 
 
 .btn-default:hover {
-	background-color: fade(#000, 5%);
+	background-color: @btn-default-hover-bg;
 }
 
 .btn-primary:hover {
 	color: @btn-primary-color;
+	background-color: @btn-primary-hover-bg;
 }
 
 .btn-success:hover {
@@ -155,15 +177,15 @@ body {
     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(128, 128, 128, 0.6)");
 }
 
-.help-block {
+.form-control.error {
-	font-size: 12px;
-}
-
-.modal textarea.error,.modal input.error {
 	border-color: @error-border;
     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 134, 97, 0.6)");
 }
 
+.help-block {
+	font-size: 12px;
+}
+
 // Input add-on
 .input-group-addon {
 	.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));	
@@ -244,7 +266,7 @@ body {
 		padding: 4px 15px;
 		font-size: 20px;
 		font-weight: 200;
-		color: @navbar-text-color;
+		color: @primary-color-light;
 		max-width: 400px;
 		overflow: hidden;
 		i {
@@ -322,7 +344,7 @@ body {
 	}
 	.panel-content {
 		padding-top: 6px;
-		border-right: 5px solid @preview-bg-light;
+		border-right: 5px solid @panel-border-color;
 	}
 }
 
@@ -353,7 +375,7 @@ body {
 	.panel-content {
 		background-color: @list-group-bg;
 		padding-top: 80px;
-		border-left: 5px solid @preview-bg-light;
+		border-left: 5px solid @panel-border-color;
 		.icon-layers {
 			font-size: 135%;
 		}	
@@ -364,7 +386,7 @@ body {
 		margin: -10px 25px 0;
 		padding: 20px 5px 10px 15px;
 		z-index: 3;
-		border: 1px solid @preview-bg-light;
+		border: 1px solid @primary-bg-light;
 		border-top: 0;
 		border-radius: 6px;
 		.form-control {
@@ -531,14 +553,14 @@ body {
 			position: initial;
 		}
 		&.open .btn{
-			background-color: @preview-bg-light;
+			background-color: @primary-bg-light;
 			i {
 				color: @btn-success-color
 			}
 		}
 	}
 	.dropdown-menu {
-    	background-color: @preview-bg-light;
+    	background-color: @primary-bg-light;
     	padding-bottom: 20px;
 	}
 	
@@ -584,6 +606,8 @@ body {
 		border: 0;
 		border-radius: inherit;
 		background: @modal-content-bg;
+		border-bottom: 1px solid @modal-content-separator-color;
+		.box-shadow(none);
 	}
 	
 	.accordion-heading {
@@ -631,13 +655,13 @@ body {
 		
 		& > li > a {
 			&:hover, &:focus {
-				background-color: @bg-light;
+				background-color: @btn-default-hover-bg;
 			}
 		}
 		
 		& > li.active > a {
 			&, &:hover, &:focus {
-				color: @text-inv;
+				color: @primary-color-inv;
 				background-color: @btn-primary-bg;
 				border-color: @btn-primary-bg;
 			}
@@ -736,11 +760,6 @@ body {
  * Markdown
  *********************/
 
-code {
-	color: #333333;
-	background-color: fade(#000, 5%);
-}
-
 a code {
 	color: inherit;
 }
@@ -764,11 +783,12 @@ hr {
 	margin: 30px 0;
 }
 
-
+/*****************************
+ * Editor
+ *****************************/
+ 
 #wmd-input {
-	-webkit-box-shadow: none !important;
+	.box-shadow(none);
-	-moz-box-shadow: none !important;
-	box-shadow: none !important;
 }
 
 #wmd-input,#md-section-helper {
@@ -776,6 +796,23 @@ hr {
 	border: none !important;
 }
 
+#md-section-helper {
+	position: absolute;
+	top: -100px;
+	height: 1px;
+	padding: 0 6px;
+	overflow-y: scroll;
+	z-index: -1;
+	.gecko & {
+		/* Firefox doesn't show the scrollbar if height is less than 40px */
+		height: 40px;
+	}	
+	.opera & {
+		/* Opera needs to have the textarea in the viewport to evaluate its size correctly */
+		top: 0;
+	}
+}
+
 .preview-container {
 	overflow: auto;
 }
@@ -918,12 +955,6 @@ div.dropdown-menu textarea {
 	float: left;
 }
 
-/*
-.nav>li>a:hover,.nav>li>a:focus {
-	background-color: @bg-light;
-}
-*/
-
 .tooltip-inner {
 	text-align: left;
 }
@@ -1018,49 +1049,48 @@ input[type="file"] {
 	height: 120px;
 }
 
-#md-section-helper {
+/********************
-	position: absolute;
+ * jGrowl
-	top: -100px;
+ ********************/
-	height: 1px;
+
-	padding: 0 6px;
+div.jGrowl {
-	overflow-y: scroll;
+	z-index: 1040;
-	z-index: -1;
+	font-size: inherit;
+	div.jGrowl-notification, div.jGrowl-closer {
+		background-color: @jgrowl-bg-color;
+		width: @jgrowl-width;
+		margin: 20px 30px;
+		padding: 15px 20px;
+		-ms-filter: none;
+		filter: none;
+		border-radius: 5px;
+	}
+	div.jGrowl-notification {
+		min-height: 80px;
+	}
 }
 
-.lock-ui {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	z-index: 1050;
-}
 
-.gecko #md-section-helper {
+/*******************
-	/* Firefox doesn't show the scrollbar if height is less than 40px */
+ * Viewer
-	height: 40px;
+ *******************/
+ 
+.viewer {
+	#navbar {
+		position: fixed;
+	}
+	
+	.navbar-inner {
+		background-color: rgba(215, 215, 215, 0.75) !important;
+	}
+	
+	#preview-contents {
+		max-width: 1024px;
+		margin: 50px auto;
+	}
+	
+	.btn-group {
+		margin-right: 0;
+		margin-left: 0;
+	}
 }
-
-.opera #md-section-helper {
-	/* Opera needs to have the textarea in the viewport to evaluate size correctly */
-	top: 0;
-}
-
-/* Viewer */
-.viewer #navbar {
-	position: fixed;
-}
-
-.viewer .navbar-inner {
-	background-color: rgba(215, 215, 215, 0.75) !important;
-}
-
-.viewer #preview-contents {
-	max-width: 1024px;
-	margin: 50px auto;
-}
-
-.viewer .btn-group {
-	margin-right: 0;
-	margin-left: 0;
-}

js/styles/night.less

@@ -1,48 +1,44 @@
 @import "main.less"
 
-@bg-light: #f2f2f2;
+@primary-bg: #444;
-@preview-bg-light: #444;
+@primary-bg-light: darken(@primary-bg, 7%);
-@bg-navbar-hover: #333;
+@primary-bg-lighter: darken(@primary-bg, 13%);
-@navbar-text-color: #999;
+@secondary-bg: #444;
-@text-inv: #fff;
+@secondary-bg-light: darken(@secondary-bg, 7%);
-@text-light: #888;
+@secondary-bg-dark: lighten(@secondary-bg, 7%);
-@error-border: #ff8661;
+@primary-color: #fff;
-@panel-button-color: #999;
+@primary-color-light: darken(@primary-color, 13%);
-@panel-bg: #222;
+@primary-color-lighter: darken(@primary-color, 20%);
-@folder-color: #aaa;
+@primary-color-inv: #fff;
+@disabled-color: #999;
 
-
+@bg-navbar-hover: @secondary-bg-dark;
-/* Bootstrap */
+@panel-border-color: @primary-bg;
-@body-bg: #222;
-@text-color: #fff;
 @link-color: #f73;
-@input-color: #fff; 
+@input-color: @primary-color; 
-@input-border: #444;
+@input-border: @primary-bg;
 @input-bg: #111;
-@dropdown-border: #ddd;
+@list-group-bg: @primary-bg-light;
-@pre-border-color: #ddd;
+@list-group-hover-bg: @primary-bg;
-@navbar-bg: #444;
+@code-bg: fade(#fff, 10%);
-@nav-link-hover-bg: #444;
+@modal-content-bg: @primary-bg-light;
-@nav-disabled-link-color: #ccc;
+@modal-header-border-color: @primary-bg;
-@nav-disabled-link-hover-color: #bbb;
+@modal-content-border-color: @primary-bg;
-@dropdown-link-hover-bg: #888;
+@modal-footer-border-color: @primary-bg;
-@dropdown-link-active-color: #fff;
+@modal-content-separator-color: @primary-bg;
-@list-group-link-color: #fff;
+@nav-link-hover-bg: @primary-bg;
-@list-group-active-bg: @dropdown-link-hover-bg;
+@list-group-hover-bg: @primary-bg;
-@list-group-hover-bg: #444;
+@btn-default-hover-bg: fade(#fff, 8%);
-@list-group-bg: #333;
+@btn-primary-hover-bg: lighten(@secondary-bg, 8%);
-@input-color-placeholder: #ccc;
-@btn-default-color: #fff;
-@btn-primary-color: #fff;
-@btn-primary-bg: #555;
-@btn-success-color: #bbb;
-@btn-info-bg: @body-bg;
-@gray-lighter: @body-bg;
-@modal-content-bg: #333;
-@modal-content-separator-color: #444;
-@modal-backdrop-bg: #000;
 @blockquote-border-color: fade(#fff, 8%);
-@close-color: #fff;
+@modal-backdrop-bg: #000;
+@dropdown-border: @primary-bg;
+@dropdown-bg: @primary-bg-light;
+
+.form-control:focus {
+    .box-shadow(~"inset 0 1px 1px rgba(255, 255, 255, 0), 0 0 8px rgba(255, 255, 255, 0.75)");
+}
+
 
 /*
 input[readonly], select[readonly], textarea[readonly] {

tools/optimize-js.json

@@ -13,6 +13,7 @@
     },
 	include: [
 		'less!styles/default.less',
+		'less!styles/blue-gray.less',
 		'less!styles/night.less',
 	],
 	excludeShallow: [