Minetrack 5 (#143)
* remove unused #getServer methods, inline #roundToPoint * replace #safeName regex with incremental ids * remove legacy #setInterval based #updateMojangServices handling * add Tooltip class, move faviconSize to css instead of js * move server id assignment to ServerRegistry * move printPort logic to formatMinecraftServerAddress, add MINECRAFT_DEFAULT_PORTS * simplify ping tracking * rework perc-bar tooltip to not use mousemove event * begin moving graphing logic to GraphDisplayManager * begin merge graph point tracking into graphDisplayManager * centralizing graphing logic into GraphDisplayManager * properly reset GraphDisplayManager when handling disconnects * move individual server graph data into ServerGraph class * constantly run sortServers loop to simplify logic * inline #updateMojangServices method * resize performance improvements * remove legacy bootTime refresh behavior, require manual user refresh * move class defs to core.js * remove unused #isGraphDataVisible arg * remove #toggleControlsDrawer * dont call #updatePercentageBar in #updateServerStatus calls * centralize caption handling * inline #msToTime * remove hackish seconds handling for timestamps * reduce #forEach calls with filter/map * safely fallback to errorMessage if errno/description does not match * Add /images/missing_favicon.png path instead of putting base64 in js * remove debug * cleanup mojang status handling * move historyPlot instance into GraphDisplayManager * cleanup checkbox html generation * cleanup #updateServerStatus * fix up tooltip styling * move jquery code out of core.js * fix add server race condition when initially pinging servers * send error.placeholder=true for pending pings so the frontend can discard later * filter placeholder pings sent by the backend * del assets/images/logo_2014.png * move graph code into graph.js * merge pingTracker into ServerRegistry+ServerGraph * remove todos * simplify getVisibleGraphData * fix potential sortServers race condition when adding * use #show instead of #fadeIn(0) * remove publicConfig.json, send over socket * update docs/CHANGELOG.md * getOrAssign -> getOrCreateId * dont delete graph controls when disconnected * early work cleaning up HTML+CSS structures * cleanup server css elements * cleanup graph control css elements * move base CSS color values into @media(prefers-color-scheme: light) * move CSS magic colors to vars * reduce duplicated CSS color rules * inline body text color CSS * WIP replacing jQuery calls with vanilla JS * WIP replacing jQuery calls with vanilla JS * replace getElementsByClass with querySelectorAll * typeMarker -> serverTypeHTML * use jQuery slim for remaining flot.js dependency * merge setAllGraphVisibility into GraphDisplayManager * break apart element update and redraw logic * add eslint + parcel bundler * auto lint assets/js when building * statically serve favicons/ for faviconOverrides outside of dist/ * only send favicons when changed * move faviconOverride behavior into entry in servers.json * add warning to backend server files * remove .server-favicon-missing class * add Minetrack 5 migration guide * add npm run build step to install.sh * adjust package.json version to 5.0.0 * remove js references from index.html * move logic and behavior out of site.js * cleanup ServerRegistry methods * prevent multiple history graph redraws * add comments * cleanup #addServer usage, move to App * move graph control bindings into GraphDisplayManager * site.js -> main.js, core.js -> servers.js * move Tooltip/Caption into util.js * spacing tweak * format index.html * ensure the frontend does not handling updateHistoryGraph events * prevent versions/record updates if the same value * avoid empty percbar updates, ensure versions are sorted * only include main.js ref in index.html * serve minified copy of font awesome directly * bundle icons.css into main.css, remove Open Sans 400 * add new SVG logo * update docs/CHANGELOG.md * new design, server version grouping * remove start.sh call from install.sh * move graph controls into header with new button * move #handleSettingsToggle back to graph * fix legacy code behavior of currentVersionIndex applying globally * fix header text color in light mode * fix mojang status text color in light mode * fix toggle settings and checkbox colors * tweak button hover color * tweak button hover color * add new status-overlay to avoid complicated DOM management during loading * fix initial graph rendering bug * add comments * update default graph tick sizes * prevent #tooltip from overflowing page * remove localhost spec * prevent minor connection errors from reshuffling layout * update CHANGELOG.md * add message/button for manually loading historical graph on mobile devices * send isGraphVisible to frontend to prevent alert if logToDatabase: false * send timestamp data with record * update docs/CHANGELOG.md * remove clock icon * remove 24h peak timestamp * Only check favicon if present * safely handle undefined/empty knownVersions in #formatMinecraftVersions * merge config.versions and minecraft.json into minecraft_versions.json, simplify index matching behavior * remove localhost url in socket.io config * stub methods/linkage for FocusManager * add #isObjectEqual hack, add event proxying to FocusManager * wip extended stats box * remove server-type badging * tweak mojang unstable color * serve socket.io-client using parcel * fix incorrect mojang status colors * remove legacy capitalization design * redesign focus boxes * update docs/CHANGELOG.md * remove localhost ref * color clock icon * use background-color for hover effect, remove unused var * improve stats focus box icons * change mojang sessions icon to globe * Add favorites system * remove focus boxes * update docs/CHANGELOG.md * remove focus icons from font * simplify graph related event binding * Add Sort By button * store current sortOption in localStorage * update docs/CHANGELOG.md * move magic 0 sortOption to SORT_OPTION_INDEX_DEFAULT * remove localhost ref * merge #settings-toggle, #sort-by and .mojang-status CSS * remove .focus-box CSS * use sortedServerIds for _lastSortedServers * tweak --color-blue * new missing_favicon design to match logo * edit footer CSS/text, remove github icon * replace player count diff counter with GROWTH sort option * italize non-default sort options * add Only Favorites button to auto sync favorites to the visible graph data * add icons to graph control buttons * update docs/CHANGELOG.md * use * to denote non-default sort option instead * remove localhost url in socket.io config * add value highlighting to make sort by easier to read * remove last remaining uppercase text * remove serverTypesVisible from config.json * simplify header CSS, fix spacing with logToDatabase=false * fix inverted text color on highlighted values * remove localhost url in socket.io config * break header into rows on mobile devices Co-authored-by: Hugo Manrique <contact@hugmanrique.me>
This commit is contained in:
Nick Krecklow
59
assets/css/icons.css
Normal file
59
assets/css/icons.css
Normal file
@ -0,0 +1,59 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src:
|
||||
url('../fonts/icomoon.ttf?gn52nv') format('truetype'),
|
||||
url('../fonts/icomoon.woff?gn52nv') format('woff'),
|
||||
url('../fonts/icomoon.svg?gn52nv#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-star:before {
|
||||
content: "\f005";
|
||||
}
|
||||
.icon-star-o:before {
|
||||
content: "\f006";
|
||||
}
|
||||
.icon-lock:before {
|
||||
content: "\f023";
|
||||
}
|
||||
.icon-eye:before {
|
||||
content: "\f06e";
|
||||
}
|
||||
.icon-eye-slash:before {
|
||||
content: "\f070";
|
||||
}
|
||||
.icon-cogs:before {
|
||||
content: "\f085";
|
||||
}
|
||||
.icon-gears:before {
|
||||
content: "\f085";
|
||||
}
|
||||
.icon-globe:before {
|
||||
content: "\f0ac";
|
||||
}
|
||||
.icon-code:before {
|
||||
content: "\f121";
|
||||
}
|
||||
.icon-sort-amount-desc:before {
|
||||
content: "\f161";
|
||||
}
|
||||
.icon-street-view:before {
|
||||
content: "\f21d";
|
||||
}
|
||||
@ -1,16 +1,62 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300,400);
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
|
||||
@import url(../css/icons.css);
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
:root {
|
||||
--color-dark-gray: #A3A3A3;
|
||||
--color-gold: #FFD700;
|
||||
--color-dark-purple: #6c5ce7;
|
||||
--color-light-purple: #a29bfe;
|
||||
--color-dark-blue: #0984e3;
|
||||
--color-light-blue: #74b9ff;
|
||||
|
||||
--theme-color-dark: #3B3738;
|
||||
--theme-color-light: #EBEBEB;
|
||||
|
||||
--border-radius: 1px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--color-purple: var(--color-light-purple);
|
||||
--color-blue: var(--color-light-blue);
|
||||
--background-color: var(--theme-color-light);
|
||||
--text-decoration-color: var(--theme-color-dark);
|
||||
--text-color: #000;
|
||||
--text-color-inverted: #FFF;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #212021;
|
||||
color: #FFF;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-purple: var(--color-dark-purple);
|
||||
--color-blue: var(--color-dark-blue);
|
||||
--background-color: var(--theme-color-dark);
|
||||
--text-decoration-color: var(--theme-color-light);
|
||||
--text-color: #FFF;
|
||||
--text-color-inverted: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #1c1b1c;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
min-width: 800px;
|
||||
}
|
||||
|
||||
/* Page layout */
|
||||
@ -19,195 +65,287 @@ html, body {
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#push {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
display: none;
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.logo-text {
|
||||
letter-spacing: -3px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
#header {
|
||||
background: #EBEBEB;
|
||||
color: #3B3738;
|
||||
overflow: auto;
|
||||
header {
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#header-wrapper {
|
||||
overflow: auto;
|
||||
min-width: 850px;
|
||||
header .column-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header .column {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
header .column-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#header .column h1 {
|
||||
margin: -6px 0;
|
||||
header .logo-image {
|
||||
--fixed-logo-image-size: 36px;
|
||||
width: var(--fixed-logo-image-size);
|
||||
height: var(--fixed-logo-image-size);
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#header .slogan {
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
header .logo-text {
|
||||
font-size: 48px;
|
||||
margin: -6px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#header .subslogan {
|
||||
font-size: 19px;
|
||||
header .logo-status {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
#header a, #footer a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border-bottom: 1px dashed #3B3738;
|
||||
header a {
|
||||
border-bottom: 1px dashed var(--text-decoration-color);
|
||||
}
|
||||
|
||||
#header a:hover, #footer a:hover {
|
||||
border-bottom: 1px dashed transparent;
|
||||
header a:hover {
|
||||
border-bottom: 1px dashed transparent;
|
||||
}
|
||||
|
||||
#header > h1 {
|
||||
font-size: 42px;
|
||||
header .header-button {
|
||||
color: var(--text-color);
|
||||
width: 83px;
|
||||
height: 83px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
#header > #column-center {
|
||||
width: 1480px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
header .header-button > span:first-of-type {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
header .header-button-group {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
header .header-button-group:first-of-type {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
header .header-button-group:last-of-type {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
header .header-button-single {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
header .header-button-single:hover {
|
||||
background: var(--background-color) !important;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
#footer {
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
background: #EBEBEB;
|
||||
color: #3B3738;
|
||||
padding: 15px 0;
|
||||
min-width: 950px;
|
||||
margin-top: 15px;
|
||||
footer {
|
||||
display: none;
|
||||
background: var(--background-color);
|
||||
color: var(--text-color);
|
||||
padding: 10px 0 15px 0;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
font-weight: 700;
|
||||
border-bottom: none !important;
|
||||
footer a {
|
||||
border-bottom: 1px dashed var(--text-decoration-color);
|
||||
}
|
||||
|
||||
#footer a:hover {
|
||||
border-bottom: 1px dashed #000 !important;
|
||||
footer a:hover {
|
||||
border-bottom: 1px dashed transparent;
|
||||
}
|
||||
|
||||
/* Tagline */
|
||||
#tagline-text {
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
/* Status overly */
|
||||
#status-overlay {
|
||||
padding: 20px 0;
|
||||
background: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border-radius: var(--border-radius);
|
||||
text-align: center;
|
||||
height: 150px;
|
||||
width: 350px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -95px;
|
||||
margin-left: -175px;
|
||||
}
|
||||
|
||||
#status-overlay .logo-image {
|
||||
--fixed-logo-image-size: 72px;
|
||||
width: var(--fixed-logo-image-size);
|
||||
height: var(--fixed-logo-image-size);
|
||||
}
|
||||
|
||||
/* Floating tooltip */
|
||||
#tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 5px 8px;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--background-color);
|
||||
color: var(--text-color);
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
/* Server listing */
|
||||
.server-container {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
#server-list {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.server {
|
||||
padding: 5px 10px;
|
||||
margin: 0 5px;
|
||||
width: 800px;
|
||||
border: 1px solid transparent;
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
margin: 0 5px;
|
||||
width: 800px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 12px;
|
||||
.server .column {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/*.server:hover {
|
||||
background: #282828;
|
||||
border: 1px solid #444;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
}*/
|
||||
|
||||
.server > .column > img {
|
||||
border-radius: 2px;
|
||||
margin-top: 5px;
|
||||
.server .column-favicon {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.server > .column {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
.server .column-favicon .server-favicon {
|
||||
--fixed-server-favicon-size: 64px;
|
||||
width: var(--fixed-server-favicon-size);
|
||||
height: var(--fixed-server-favicon-size);
|
||||
border-radius: var(--border-radius);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.server > .column > .rank {
|
||||
width: 64px;
|
||||
padding-top: 4px;
|
||||
.server .column-favicon .server-rank {
|
||||
display: block;
|
||||
width: 64px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.server > .column > h3 > .type {
|
||||
padding: 1px 5px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #A09E9E;
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
.server .column-status {
|
||||
width: 282px;
|
||||
}
|
||||
|
||||
.server-meta {
|
||||
font-size: 16px !important;
|
||||
.server .column-status .server-name {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Charts */
|
||||
.chart {
|
||||
height: 100px;
|
||||
width: 400px;
|
||||
margin-right: -3px;
|
||||
margin-bottom: 5px;
|
||||
.server .column-status .server-is-favorite {
|
||||
cursor: pointer;
|
||||
color: var(--color-gold);
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
z-index: 10000;
|
||||
.server .column-status .server-is-favorite:hover::before {
|
||||
content: "\f006";
|
||||
}
|
||||
|
||||
/* Existing elements */
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
.server .column-status .server-is-not-favorite {
|
||||
cursor: pointer;
|
||||
color: var(--background-color);
|
||||
}
|
||||
|
||||
/* Basic classes used randomly */
|
||||
.color-gray {
|
||||
color: #C4C4C4;
|
||||
.server .column-status .server-is-not-favorite:hover {
|
||||
color: var(--color-gold);
|
||||
}
|
||||
|
||||
.color-dark-gray {
|
||||
color: #A3A3A3;
|
||||
.server .column-status .server-error {
|
||||
display: none;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.color-red {
|
||||
color: #e74c3c;
|
||||
.server .column-status .server-label {
|
||||
color: var(--color-dark-gray);
|
||||
font-size: 16px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
.server .column-status .server-value {
|
||||
color: var(--color-dark-gray);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.text-center-align {
|
||||
text-align: center;
|
||||
.server .column-graph {
|
||||
float: right;
|
||||
height: 100px;
|
||||
width: 400px;
|
||||
margin-right: -3px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Highlighted values */
|
||||
.server-highlighted-label {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.server-highlighted-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Global stats */
|
||||
.global-stat {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Sort by */
|
||||
#sort-by {
|
||||
background: var(--color-purple);
|
||||
}
|
||||
|
||||
/* Settings toggle */
|
||||
#settings-toggle {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
/* Historical graph */
|
||||
#big-graph-mobile-load-request {
|
||||
background: var(--background-color);
|
||||
color: var(--text-color);
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#big-graph-mobile-load-request a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* The big graph */
|
||||
#big-graph, #big-graph-controls, #big-graph-checkboxes {
|
||||
width: 90%;
|
||||
margin: 15px auto 0 auto;
|
||||
}
|
||||
|
||||
#big-graph-checkboxes > table {
|
||||
@ -215,119 +353,105 @@ h3 {
|
||||
}
|
||||
|
||||
#big-graph {
|
||||
margin-top: 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#big-graph-controls {
|
||||
margin: 10px auto;
|
||||
margin: 10px auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#big-graph-controls a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px dashed #FFF;
|
||||
font-size: 16px;
|
||||
#big-graph-controls .icon-star {
|
||||
color: var(--color-gold);
|
||||
}
|
||||
|
||||
#big-graph-controls a:hover {
|
||||
border-bottom: 1px dashed transparent;
|
||||
#big-graph-controls-drawer {
|
||||
background: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding-bottom: 10px;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#big-graph-controls-drawer .graph-controls-setall {
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
#big-graph-checkboxes {
|
||||
margin: 15px auto 0 auto;
|
||||
}
|
||||
|
||||
/* Basic elements */
|
||||
.button {
|
||||
background: #3498db;
|
||||
border-radius: 2px;
|
||||
text-shadow: 0 0 0 #000;
|
||||
width: 85px;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
margin: 0 auto;
|
||||
background: var(--color-blue);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #ecf0f1;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
background: var(--text-color);
|
||||
color: var(--text-color-inverted);
|
||||
}
|
||||
|
||||
/* Percentage bar */
|
||||
#perc-bar {
|
||||
height: 35px;
|
||||
position: relative;
|
||||
height: 35px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#perc-bar > .perc-bar-part {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
transition: 0.1s all;
|
||||
}
|
||||
|
||||
#perc-bar > .perc-bar-part:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Mojang Status */
|
||||
.mojang-status {
|
||||
width: 85px;
|
||||
height: 106px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mojang-status > strong {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.mojang-status > i {
|
||||
margin-top: 20px;
|
||||
font-size: 22px;
|
||||
#perc-bar .perc-bar-part {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Mojang status colors */
|
||||
.mojang-status-online {
|
||||
background: #87D37C;
|
||||
@media (prefers-color-scheme: light) {
|
||||
.mojang-status-online {
|
||||
background: #87D37C;
|
||||
}
|
||||
|
||||
.mojang-status-unstable {
|
||||
background: #f1c40f;
|
||||
}
|
||||
|
||||
.mojang-status-offline {
|
||||
background: #DE5749;
|
||||
}
|
||||
}
|
||||
|
||||
.mojang-status-unstable {
|
||||
background: #f1c40f;
|
||||
}
|
||||
|
||||
.mojang-status-offline {
|
||||
background: #DE5749;
|
||||
}
|
||||
|
||||
/* Dark color scheme overrides */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #1c1b1c;
|
||||
}
|
||||
.mojang-status-online {
|
||||
background: #66aa5a;
|
||||
}
|
||||
|
||||
#header, #footer {
|
||||
background: #3B3738;
|
||||
color: #FFF;
|
||||
}
|
||||
.mojang-status-unstable {
|
||||
background: #cc8a4f;
|
||||
}
|
||||
|
||||
#footer a, #header a:hover {
|
||||
border-bottom: 1px dashed transparent !important;
|
||||
}
|
||||
.mojang-status-offline {
|
||||
background: #A6453B;
|
||||
}
|
||||
}
|
||||
|
||||
#footer a:hover, #header a {
|
||||
border-bottom: 1px dashed #EBEBEB !important;
|
||||
}
|
||||
/* Header rows */
|
||||
@media only screen and (max-width: 1050px) {
|
||||
header {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.mojang-status-online {
|
||||
background: #6b9963;
|
||||
}
|
||||
.header-possible-row-break {
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mojang-status-unstable {
|
||||
background: #a87b4b;
|
||||
}
|
||||
|
||||
.mojang-status-offline {
|
||||
background: #A6453B;
|
||||
}
|
||||
}
|
||||
.header-possible-row-break:last-of-type {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user