Modernized Tribals.io Theme by Knockout_Gaming

/* ==UserStyle==
@name       tribals.io - Apr 2024
@version    20240412.16.21
@namespace  ?
==/UserStyle== */

@-moz-document domain("tribals.io") {
#shadow {
  background-image: url(https://media.discordapp.net/attachments/1227182387168022548/1228368439790403695/Tribals.png?ex=662bca42&is=66195542&hm=6dee58316ac3b167edfb0adb5d4e3422ca95711c5e7600cddd7d99114327f79c&=&format=webp&quality=lossless&width=1850&height=1040)
}
#logo {
    width: 300px;
    height: 170px;
    position: absolute;
    left: 50px;
    top: 0px;
    background: url() no-repeat center center;
    background-size: 100% auto;
}
#logo .version {
    position: absolute;
    right: 20px;
    bottom: 12px;
    color: #fff0;
    font-size: 24px;
}
.big-button {
    background: rgb(39, 0, 255);
    background: linear-gradient(0deg, rgb(23, 94, 232) 0%, rgb(18, 68, 241) 90%);
    font-family: 'Passion One', Arial, Helvetica, sans-serif;
    color: #fff;
    font-size: 45px;
    text-shadow: 0px 1px 2px rgb(0, 0, 0);
    letter-spacing: -2px;
    padding: 20px 30px;
    border-radius: 4px;
    border: none;
    width: 100%;
    border-left: solid 8px rgb(0, 69, 255);
    cursor: pointer;
    text-transform: uppercase;
    word-break: break-word;
}
.slide-prev, .slide-next {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    margin-left: -33px;
    border: 2px solid rgb(0, 87, 255);
    color: #0001ff;
    background: #3c3c3c00;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    text-indent: -2px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#game-info i {
    color: rgb(39, 0, 255);
}
.buy-server-subscription-button {
    background: rgb(21, 75, 175);
    background: linear-gradient(0deg, rgb(3, 0, 255) 0%, rgb(13, 146, 255) 90%);
    font-family: 'Passion One', Arial, Helvetica, sans-serif;
    color: #fff;
    font-size: 20px;
    text-shadow: 0px 1px 2px rgb(0, 0, 0);
    padding: 10px 10px;
    border-radius: 4px;
    border: none;
    width: 100%;
    border-left: solid 8px rgb(41, 40, 40);
    cursor: pointer;
    margin-top: 10px;
    text-transform: uppercase;
}
.invite-button {
    background: rgb(0, 89, 255);
    background: linear-gradient(0deg, rgb(3, 0, 255) 0%, rgb(13, 146, 255) 90%));
    font-family: 'Passion One', Arial, Helvetica, sans-serif;
    color: #fff;
    font-size: 20px;
    text-shadow: 0px 1px 2px rgb(0, 0, 0);
    padding: 10px 10px;
    border-radius: 4px;
    border: none;
    width: 100%;
    border-left: solid 8px rgb(41, 40, 40);
    cursor: pointer;
    margin-top: 10px;
    text-transform: uppercase;
}
#tribals-plus-banner h2 {
    color: #317fdd;
    font-size: 24px;
}
#tribals-plus-banner button {
    position: absolute;
    right: 12px;
    top: 14px;
    height: 30px;
    font-size: 19px;
    padding: 12px;
    line-height: 7px;
    color: #343fff;
    background: #000;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}
#content {
    padding: 25px 45px;
    top: 80px;
    position: absolute;
    color: #0081ff;
    width: 100%;
    box-sizing: border-box;
    height: calc(100vh - 80px - 100px);
    overflow-y: auto;
}
#header {
    color: #0078ff;
    position: absolute;
    left: 0px;
    top: 20px;
    font-size: 30px;
    padding: 0px;
    margin: 0px;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    line-height: 60px;
    height: 60px;
    text-transform: uppercase;
}
.server-buy-button {
    font-size: 20px;
    background: #565656;
    padding: 8px 15px;
    border-radius: 5px;
    text-shadow: 0px 1px 2px #000;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 25px;
    cursor: pointer;
    margin: 9px;
}
.tabs li.active {
    color: #0028ff;
    font-weight: 500;
    border-bottom: solid 4px #000cff;
    padding-bottom: 10px;
}
.tabs li.premium {
    color: #0074ff;
}
.favorite {
    font-size: 20px;
    color: rgb(23, 94, 232);
    cursor: pointer;
}
.button {
    background-color: rgb(39, 0, 255);
    border-radius: 5px;
    color: #fff;
    box-shadow: 0px 0.05vw 0.2vw rgb(0, 0, 0);
    padding: 10px 15px !important;
    font-size: 15px;
    border-top: solid 1px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    transition: ease all 0.4s;
    border: 1px solid transparent;
}
table button.btn-table {
    background-color: rgb(39, 0, 255);
    border-radius: 5px;
    color: #fff;
    box-shadow: 0px 0.05vw 0.2vw rgb(0 0 0 / 40%);
    padding: 10px 15px !important;
    font-size: 15px;
    font-weight: normal;
    border-top: solid 1px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    border: 1px solid transparent;
}
table button.btn-table-secondary {
    background-color: rgb(23, 94, 232) !important;
}
.btn-primary {
    background: rgb(39, 0, 255);
    border-bottom: solid 5px rgb(23, 94, 232) !important;
    color: #fff;
}
input[type="range"] {
    overflow: hidden;
    height: 20px;
    padding: 5px 0;
    -webkit-appearance: none;
    background-color: #0004ff;
}
.input-slider-text {
    min-width: 27px;
    padding: 7px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    background: rgb(23, 94, 232);
    border-radius: 10px;
    margin-right: 5px;
}
table button.btn-table.reset {
    background-color: rgb(23, 94, 232);
    border-color: rgb(39, 0, 255);
    color: #181818;
}

}