add dark mode support
This commit is contained in:
parent
b145d5e9cb
commit
7b8f91af68
@ -31,11 +31,6 @@ strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Constants */
|
||||
#header, #footer, #tagline {
|
||||
|
||||
}
|
||||
|
||||
/* Header */
|
||||
#header {
|
||||
background: #EBEBEB;
|
||||
@ -296,3 +291,48 @@ h3 {
|
||||
margin-top: 20px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* Mojang status colors */
|
||||
.mojang-status-online {
|
||||
background: #87D37C;
|
||||
}
|
||||
|
||||
.mojang-status-unstable {
|
||||
background: #f1c40f;
|
||||
}
|
||||
|
||||
.mojang-status-offline {
|
||||
background: #DE5749;
|
||||
}
|
||||
|
||||
/* Dark color scheme overrides */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #1c1b1c;
|
||||
}
|
||||
|
||||
#header, #footer {
|
||||
background: #3B3738;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#footer a, #header a:hover {
|
||||
border-bottom: 1px dashed transparent !important;
|
||||
}
|
||||
|
||||
#footer a:hover, #header a {
|
||||
border-bottom: 1px dashed #EBEBEB !important;
|
||||
}
|
||||
|
||||
.mojang-status-online {
|
||||
background: #6b9963;
|
||||
}
|
||||
|
||||
.mojang-status-unstable {
|
||||
background: #a87b4b;
|
||||
}
|
||||
|
||||
.mojang-status-offline {
|
||||
background: #A6453B;
|
||||
}
|
||||
}
|
@ -8,12 +8,6 @@ var publicConfig;
|
||||
var createdCategories = false;
|
||||
var categoriesVisible;
|
||||
|
||||
var colorsByStatus = {
|
||||
'Online': '#87D37C',
|
||||
'Unstable': '#f1c40f',
|
||||
'Offline': '#DE5749'
|
||||
};
|
||||
|
||||
function showCaption(html) {
|
||||
var tagline = $('#tagline-text');
|
||||
tagline.stop(true, false);
|
||||
@ -116,9 +110,10 @@ function updateMojangServices(currentUpdate) {
|
||||
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
var key = keys[i];
|
||||
var status = lastMojangServiceUpdate[key];
|
||||
var status = lastMojangServiceUpdate[key];
|
||||
|
||||
$('#mojang-status_' + status.name).css({background: colorsByStatus[status.title]});
|
||||
// hack: ensure mojang-status is added for alignment, replace existing class to swap status color
|
||||
$('#mojang-status_' + status.name).attr('class', 'mojang-status mojang-status-' + status.title.toLowerCase());
|
||||
$('#mojang-status-text_' + status.name).text(status.title);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user