Make the UI theme grey when not connected to server

static/application.js

@@ -1815,6 +1815,7 @@ $(document).ready(function(){
 				document.activeElement.blur();
 				active_element.focus();
 			})();
+			$("body").addClass("connected");
 		} else if(msg.cmd == "updatescreen") {
 			var _gamestarted = gamestarted;
 			gamestarted = msg.gamestarted;
@@ -2201,6 +2202,7 @@ $(document).ready(function(){
 	
 	socket.on('disconnect', function() {
 		connected = false;
+		$("body").removeClass("connected");
 		connect_status.html("<b>Lost connection...</b>");
 		connect_status.removeClass("color_green");
 		connect_status.addClass("color_orange");

static/custom.css

@@ -27,11 +27,15 @@ chunk.editing, chunk.editing * {
 }
 
 #topmenu {
-	background-color: #337ab7;
+	background-color: #757575;
 	padding: 10px;
 	display: flex;
 }
 
+body.connected #topmenu, #topmenu.always-available {
+	background-color: #337ab7;
+}
+
 #topic {
 	margin-top: 20px;
 	resize: none;
@@ -66,10 +70,14 @@ chunk.editing, chunk.editing * {
 
 #navbar li {
 	margin-right: 5px;
-	background-color: #4787be;
+	background-color: #828282;
 	border-radius: 5px;
 }
 
+body.connected #navbar li, #navbar li.always-available {
+	background-color: #4787be;
+}
+
 #navbar li > a {
 	color: #ffffff;
 	font-weight: bold;
@@ -78,16 +86,24 @@ chunk.editing, chunk.editing * {
 #settingsmenu {
 	display: flex;
 	flex-wrap: wrap;
-	background-color: #295071;
+	background-color: #4d4d4d;
 	padding: 10px;
 }
 
+body.connected #settingsmenu, #settingsmenu.always-available {
+	background-color: #295071;
+}
+
 #formatmenu {
 	display:none;
-	background-color: #295071;
+	background-color: #4d4d4d;
 	padding: 10px;
 }
 
+body.connected #formatmenu, #formatmenu.always-available {
+	background-color: #295071;
+}
+
 #connectstatusdiv {
 	display: flex;
 	text-align: right;
@@ -255,6 +271,10 @@ chunk.editing, chunk.editing * {
 
 #popuptitlebar {
 	padding: 10px;
+	background-color: #757575;
+}
+
+body.connected #popuptitlebar, #popuptitlebar.always-available {
 	background-color: #337ab7;
 }
 
@@ -283,6 +303,10 @@ chunk.editing, chunk.editing * {
 	padding: 10px;
 	display: flex;
 	justify-content: center;
+	background-color: #4d4d4d;
+}
+
+body.connected #popupfooter, #popupfooter.always-available {
 	background-color: #295071;
 }
 
@@ -418,6 +442,44 @@ chunk.editing, chunk.editing * {
 
 /*================= Classes =================*/
 
+body:not(.connected) .btn-primary {
+	background-color: #757575;
+	border-color: #4a4a4a;
+}
+
+.btn-primary.always-available {
+	background-color: #337ab7;
+	border-color: #2e6da4;
+}
+
+body:not(.connected) .btn-primary.focus, body:not(.connected) .btn-primary:focus {
+	background-color: #5c5c5c;
+	border-color: #292929;
+}
+
+.btn-primary.focus.always-available, .btn-primary.always-available:focus {
+	background-color: #286090;
+	border-color: #122b40;
+}
+
+body:not(.connected) .btn-primary:hover {
+	background-color: #5c5c5c;
+	border-color: #4a4a4a;
+}
+
+.btn-primary.always-available:hover {
+	background-color: #286090;
+	border-color: #204d74;
+}
+
+body:not(.connected) a.dropdown-item:focus, body:not(.connected) a.dropdown-item:hover {
+	color: #4f4f4f;
+}
+
+a.dropdown-item.always-available:focus, a.dropdown-item.always-available:hover {
+	color: #23527c !important;
+}
+
 .aidgpopupcontent {
 	padding: 10px 40px 10px 40px;
 }
@@ -495,26 +557,42 @@ chunk.editing, chunk.editing * {
 }
 
 .dropdown-menu {
-	background-color: #337ab7;
+	background-color: #757575;
 	width: 200px;
 }
 
+body.connected .dropdown-menu, .dropdown-menu.always-available {
+	background-color: #337ab7;
+}
+
 .dropdown-item {
 	display: block;
 	padding: 10px;
 	color: #ffffff;
+	border-bottom: 1px solid #4d4d4d;
+}
+
+body.connected .dropdown-item, .dropdown-item.always-available {
 	border-bottom: 1px solid #295071;
 }
 
 .dropdown-item:first-child {
+	border-top: 1px solid #4d4d4d;
+}
+
+body.connected .dropdown-item:first-child, .dropdown-item:first-child.always-available {
 	border-top: 1px solid #295071;
 }
 
 .dropdown-item:hover {
-	background-color: #98bcdb;
+	background-color: #bababa;
 	text-decoration: none;
 }
 
+body.connected .dropdown-item:hover, .dropdown-item.always-available:hover {
+	background-color: #98bcdb;
+}
+
 .edit-flash, .edit-flash * {
 	color: #3bf723 !important;
 }
@@ -708,6 +786,10 @@ chunk.editing, chunk.editing * {
 	font-size: 1.4ex;
 	line-height: 1.8ex;
 	text-decoration: none;
+	color: #9e9e9e;
+}
+
+body.connected .statusicon, .statusicon.always-available {
 	color: #68a2d4;
 }
 
@@ -739,12 +821,16 @@ chunk.editing, chunk.editing * {
 
 .statusiconlabel {
 	pointer-events: none;
-	color: #337ab7;
+	color: #757575;
 	text-align: center;
 	font-weight: bold;
 	font-size: 13px;
 }
 
+body.connected .statusiconlabel, .statusiconlabel.always-available {
+	color: #337ab7;
+}
+
 #usiconlabel {
 	transform: translate(-3px, 10px);
 	-moz-transform: translate(-3px, 10px);
@@ -976,23 +1062,51 @@ chunk.editing, chunk.editing * {
 
 .navbar .navbar-nav .nav-link:hover {
 	border-radius: 5px;
+	background-color: #bababa;
+}
+
+body.connected .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.always-available:hover {
+	background-color: #98bcdb;
+}
+
+body .navbar .navbar-nav .dropdown-item.always-available {
+	background-color: #337ab7;
+}
+
+body .navbar .navbar-nav .dropdown-item.always-available:hover {
 	background-color: #98bcdb;
 }
 
 .navbar .navbar-nav .nav-link:focus {
 	border-radius: 5px;
+	background-color: #bababa;
+}
+
+body.connected .navbar .navbar-nav .nav-link:focus, .navbar .navbar-nav .nav-link.always-available:focus {
 	background-color: #98bcdb;
 }
 
 .navbar-toggler {
-	background-color: #337ab7;
+	background-color: #757575;
-	border: 1px solid #98bcdb;
+	border: 1px solid #bababa;
 	height: 45px;
 	width: 60px;
 	border-radius: 6px;
 }
 
+body.connected .navbar-toggler, .navbar-toggler.always-available {
+	border: 1px solid #98bcdb;
+}
+
+body .navbar-toggler {
+	background-color: #337ab7;
+}
+
 .navbar-toggler:hover {
+	background-color: #bababa;
+}
+
+body.connected .navbar-togger:hover, .navbar-togger.always-available:hover {
 	background-color: #98bcdb;
 }
 
@@ -1062,6 +1176,10 @@ chunk.editing, chunk.editing * {
 
 .popuptitlebar {
 	padding: 10px;
+	background-color: #757575;
+}
+
+body .popuptitlebar {
 	background-color: #337ab7;
 }
 
@@ -1083,6 +1201,10 @@ chunk.editing, chunk.editing * {
 	padding: 10px;
 	display: flex;
 	justify-content: center;
+	background-color: #4d4d4d;
+}
+
+body.connected .popupfooter, .popupfooter.always-available {
 	background-color: #295071;
 }
 

templates/index.html

@@ -10,12 +10,12 @@
 	<script src="static/bootstrap.min.js"></script>
 	<script src="static/bootstrap-toggle.min.js"></script>
 	<script src="static/rangy-core.min.js"></script>
-	<script src="static/application.js?ver=1.16.4p"></script>
+	<script src="static/application.js?ver=1.16.4q"></script>
 
 	<link rel="stylesheet" href="static/jquery-ui.sortable.min.css">
 	<link rel="stylesheet" href="static/bootstrap.min.css">
 	<link rel="stylesheet" href="static/bootstrap-toggle.min.css">
-	<link rel="stylesheet" href="static/custom.css?ver=1.16.4j">
+	<link rel="stylesheet" href="static/custom.css?ver=1.16.4k">
 	<link rel="stylesheet" href="static/open-iconic-bootstrap.min.css">
 </head>
 <body>
@@ -39,14 +39,14 @@
 										<a class="dropdown-item" href="#" id="btn_rndgame">Random Story</a>
 									</div>
 								</li>
-								<li class="nav-item dropdown">
+								<li class="nav-item dropdown always-available">
-									<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Save</a>
+									<a class="nav-link dropdown-toggle always-available" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Save</a>
 									<div class="dropdown-menu">
 										<a class="dropdown-item" href="#" id="btn_save">Save</a>
 										<a class="dropdown-item" href="#" id="btn_saveas">Save As</a>
 										<a class="dropdown-item" href="#" id="btn_savetofile">Save To File...</a>
-										<a class="dropdown-item" href="#" id="btn_download">Download Story as JSON</a>
+										<a class="dropdown-item always-available" href="#" id="btn_download">Download Story as JSON</a>
-										<a class="dropdown-item" href="#" id="btn_downloadtxt">Download Story as Plaintext</a>
+										<a class="dropdown-item always-available" href="#" id="btn_downloadtxt">Download Story as Plaintext</a>
 									</div>
 								</li>
 								<li class="nav-item dropdown">