/* GENERIC ELEMENTS */
:root {
    --bg1: #FFF1;
    --bg2: #FFF2;
    --text: #FFF;
    --status-offline: #FFF2;
    --status-online: #4F4;
    --status-afk: #F84;
    --error: #F44;
}

a {
    color: inherit;
}

.webstats-tableheading {
    margin-top: 20px;
    font-size: 1.5em;
    font-weight: bold;
}

.webstats-tableheading > .webstats-pagination {
    margin-left: 50px;
}
.webstats-tableheading > .webstats-pagination * {
    margin-right: 3px;
}
.webstats-pagination.pagination-hidden {
    display: none;
}

.webstats-error-message {
    color: var(--error);
}

table {
    border-spacing: 2px;
}

html.hide-offline tr.offline {
    display: none;
}

tr.current-player td:not(.empty) {
    background: var(--bg2);
    font-weight: bold;
}

td:not(.empty) {
    position: relative;
    height: 50px;
    padding: 0px 20px;
    background: var(--bg1);
    text-align: right;
    white-space: nowrap;
    -webkit-transition: height 0.2s, padding 0.2s;
    transition: height 0.2s, padding 0.2s;
}

td:not(.empty)[data-objective=Player] {
    text-align: left;
    padding-left: 40px;
}

td:not(.empty)[data-objective=Player][title="#server"] {
    padding-left: 20px;
}

td:not(.empty)::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: var(--relative);
    height: 100%;
    background: var(--bg2);
    z-index: -1;
}

td.skin {
    padding: 0px !important;
    background: transparent;
    z-index: 10;
}

td.skin img {
    width: 50px;
    height: 100%;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-pixelated;
    image-rendering: pixelated;
    display: block;
    transition: width 0.2s;
}

td.skin img[title="#server"] {
    /* Disable pixelated rendering for server icon (probably better most of the time) */
    image-rendering: auto;
}

td.skin[title="#server"] {
    /* "Console" image */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAPElEQVQ4T2NUUlL6z0ABYBw1gGE0DBioHAZ3795lUFZWJildosQCRQaQoxnkVLgL0A2A8dFpdP8NfEICAMkiK2HeQ9JUAAAAAElFTkSuQmCC");
    background-size: cover;
    image-rendering: pixelated;
}

html.compact td:not(.empty){
    height: 32px;
    padding: 0px 10px;
}

html.compact td:not(.empty)[data-objective=Player]{
    padding-left: 32px;
}

html.compact td:not(.empty)[data-objective=Player][title="#server"] {
    padding-left: 10px;
}

html.compact td.skin img {
    width: 32px;
}

.sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0;
}

th {
    padding: 10px 20px;
    background: var(--bg2);
    cursor: pointer;
    -webkit-transition: padding 0.2s;
    transition: padding 0.2s;
}

html.compact th{
    padding: 5px 10px;
}

th.webstats-sort-column {
    position: relative;
}

th.webstats-sort-column::after {
    position: absolute;
    top: 10px;
    right: 10px;
    transition: top 0.2s, right 0.2s;
}

th.webstats-sort-column.ascending::after {
    content: "↑";
}

th.webstats-sort-column.descending::after {
    content: "↓";
}

html.compact th.webstats-sort-column::after {
    top: 5px;
    right: 5px;
}

.status {
    position: absolute;
    top: calc(50% - 5px);
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: var(--status-offline);
    -webkit-transition: top 0.2s, left 0.2s;
    transition: top 0.2s, left 0.2s;
}

html.compact .status {
    left: 11px;
}

td[title="#server"] .status {
    display: none;
}

.status.online {
    background: var(--status-online);
}

.status.afk {
    background: var(--status-afk);
}

.mc-format.mc-black { color: #000000 }
.mc-format.mc-dark_blue { color: #0000AA }
.mc-format.mc-dark_green { color: #00AA00 }
.mc-format.mc-dark_aqua { color: #00AAAA }
.mc-format.mc-dark_red { color: #AA0000 }
.mc-format.mc-dark_purple { color: #AA00AA }
.mc-format.mc-gold { color: #FFAA00 }
.mc-format.mc-gray { color: #AAAAAA }
.mc-format.mc-dark_gray { color: #555555 }
.mc-format.mc-blue { color: #5555FF }
.mc-format.mc-green { color: #55FF55 }
.mc-format.mc-aqua { color: #55FFFF }
.mc-format.mc-red { color: #FF5555 }
.mc-format.mc-light_purple { color: #FF55FF }
.mc-format.mc-yellow { color: #FFFF55 }
.mc-format.mc-white { color: #FFFFFF }

.mc-format.mc-obfuscated { /* no style */ }
.mc-format.mc-bold { font-weight: bold }
.mc-format.mc-strikethrough { text-decoration: line-through }
.mc-format.mc-underline { text-decoration: underline }
.mc-format.mc-italic { font-style: italic }
.mc-format.mc-reset { /* no style */ }

/* POSITIONAL ELEMENTS */
body {
    margin: 0px;
    color: var(--text);
    background-color: #222;
    font-family: sans-serif;
}

main {
    margin: 100px auto;
    width: 60%;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
}

main > span {
    margin-right: 10px;
}

/* MEDIA DIRECTIVES */
@media (prefers-color-scheme: dark) {
    :root {
        --bg1: #0003;
        --bg2: #0005;
        --text: #DDD;
    }
}

@media screen and (max-width: 700px) {
    main {
        width: 100%;
    }
}