Make the UI theme grey when not connected to server
This commit is contained in:
Gnome Ann
parent
276f24029e
commit
3532a30ad4
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
border: 1px solid #98bcdb;
|
||||
background-color: #757575;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Save</a>
|
||||
<li class="nav-item dropdown always-available">
|
||||
<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" href="#" id="btn_downloadtxt">Download Story as Plaintext</a>
|
||||
<a class="dropdown-item always-available" href="#" id="btn_download">Download Story as JSON</a>
|
||||
<a class="dropdown-item always-available" href="#" id="btn_downloadtxt">Download Story as Plaintext</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
|
|
|
|||
Loading…
Reference in New Issue