Skip to content

Tanki QoL by doomersson

Screenshot of Tanki QoL

Details

Authordoomersson

LicenseMIT

Categorytankionline.com

Created

Updated

Size25 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Quality of Life + Dark theme
Custom background colours available

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Tanki QoL
@namespace      github.com/openstyles/stylus
@version        1.1
@description    quality of life updates to tanki
@author         doomersson
@preprocessor   default
@var color myBackgroundColor1 "Center Background" #203040
@var color myBackgroundColor2 "Outer Background" #03080d

--myBackgroundColor1: #203040
--myBackgroundColor2: #03080d

@var color mbgc1 "Color 1" #00000094
@var color mbgc2 "Color 2" #000000ba

--mbgc1: #00000094
--mbgc2: #000000ba

@var color accents "Accents" #76ff33

--accents: #76ff33

@var color tt "For Tanki Tweaks" #00000070
@var color btc "Battletab Color" #000000d6
@var color btrc "Battletab Color 2" #7f7f7f30

--tt: #00000070
--btc: #000000d6
--btrc "#7f7f7f30"
@var checkbox joke "Free Tankoins" 0


==/UserStyle== */

@-moz-document domain("tankionline.com") {

.Common-container, .LobbyLoaderComponentStyle-container {
    background: radial-gradient(var(--myBackgroundColor1) 0%,    var(--myBackgroundColor2) 100%) !important;
    background-color: var(--myBackgroundColor2) !important; 
}

/*Resizes the page*/html {
    font-size: max(min(1.35vh,1vw)* 1,3px);
}
.LobbyLoaderComponentStyle-container {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.4;
    }
}

/*Main Accents*/.Common-activeMenu,.ProBattlesComponentStyle-createBattleButton {
    color: var(--accents) !important;
}
.PrimaryMenuItemComponentStyle-itemCommonLi:hover .PrimaryMenuItemComponentStyle-itemName {
    color: var(--accents) !important;
}
.FooterComponentStyle-containerMenu:hover {
    box-shadow: var(--accents) 0em 0em 0em 0.125em;
}
.ScrollingCardsComponentStyle-scrollCard:hover {
    box-shadow: var(--accents) 0em 0em 0em 2px;
}
.PrimaryMenuItemComponentStyle-itemCommonLi:hover {
    box-shadow: var(--accents) 0em 0em 0em 0.125em;
    border-radius: 0.5em;
}
.Common-entranceGradient {
    background: radial-gradient(var(--myBackgroundColor1) 0%,    var(--myBackgroundColor2) 100%) !important;
}
.TankParametersStyle-parametersBlockGear span {
    color: var(--accents) !important;
}
.TankParametersStyle-iconGSSmall,.TankParametersStyle-iconGS {
    filter: grayscale(1);
}
.TableMainQuestComponentStyle-cardRewardCompletedTable,.MainQuestComponentStyle-cardRewardCompleted,.ItemDescriptionComponentStyle-blockButtons  {
    background-color: color-mix(in srgb, var(--accents) 15%, transparent)!important;
    box-shadow: rgba(255, 255, 255, .25) 0px 0px 0px 0.063em;
}
.TableMainQuestComponentStyle-cardRewardCompletedTable:hover,.MainQuestComponentStyle-cardRewardCompleted:hover,.ItemDescriptionComponentStyle-blockButtons:hover {
    box-shadow: var(--accents) 0px 0px 0px 0.125em;
}
.Common-maskImageContain.BattleModesComponentStyle-blockModesFilter.ProBattleCommonStyleMobile-blockModesFilter, {
    background-color: var(--accents);
}
.ItemDescriptionComponentStyle-blockButtons span{
    color: var(--accents)!important; 
}
.BattleModesComponentStyle-blockModesFilter.ProBattleCommonStyleMobile-blockModesFilter > .Common-flexCenterAlignCenter{
    background-color: color-mix(in srgb, var(--accents) 20%, transparent) !important;
}
    .ProBattlesComponentStyle-mainContainer .BattleModesComponentStyle-blockModesFilter.ProBattleCommonStyleMobile-blockModesFilter .Common-flexCenterAlignCenter > .Common-maskImageContain:hover {
        background-color: var(--accents);
}

/*Forces modules to be always showing in battle*/.BattleTabStatisticComponentStyle-resistanceModuleCell {
    min-width: 10em;
    width: 10em !important;
    visibility: unset !important;

}
/*Battle Tab*/
.BattleTabStatisticComponentStyle-commonBlock, .BattleTabStatisticComponentStyle-blueTeamTableContainer table tbody tr td:nth-child(n+3), .BattleTabStatisticComponentStyle-redTeamTableContainer table tbody tr td:nth-child(n+3) {
    visibility: visible !important;
}
.BattleTabStatisticComponentStyle-rowBackGround {
    background-color: var(--btrc);
}
.BattleTabStatisticComponentStyle-selectedRowBackGround {
    border-radius: 0.25em;  
    cursor: pointer;
    background-color: color-mix(in srgb, var(--accents) 20%, transparent) !important;
}
.BattleTabStatisticComponentStyle-containerInsideTeams {
    background-color: var(--btc);
    width: 97em;
    font-size: max(min(1.48148vh, 1vw)* 1, 3px);
}
.BattleTabStatisticComponentStyle-containerInsideResults {
    background-color: var(--btc);
}

.BattleTabStatisticComponentStyle-blueTeamTableContainer table tbody tr, .BattleTabStatisticComponentStyle-redTeamTableContainer table tbody tr {
   
    width: 47.125em;
}
.BattleTabStatisticComponentStyle-blueTeamTableContainer table thead, .BattleTabStatisticComponentStyle-redTeamTableContainer table thead {
    /*top: -50.75em; gs nickname thing*/
}
.BattleTabStatisticComponentStyle-redTeamTableContainer table thead tr th:nth-child(n+2), .BattleTabStatisticComponentStyle-blueTeamTableContainer table thead tr th:nth-child(n+2) {
    opacity: 0;
}
 if themeToggle {
        .BattleTabStatisticComponentStyle-rowBackGround {
            background-color: rgba(127, 127, 127, .19);
     }
}
/*For Tanki Tweaks Battle Board*/
:is(.BattleTabStatisticComponentStyle-container>:first-child)>.tt-background {
    backdrop-filter: blur(0.3em)!important;
    background-color: var(--tt) !important;
}

/*Victory/Defeat top light*/.BattleResultHeaderComponentStyle-flashLight {
    background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
}



/*Play Button*/.MainScreenComponentStyle-buttonPlay {
    backdrop-filter: blur(1.563em);
    background-color: rgb(0, 0, 0)!important;
    background-image: url("https://tankionline.com/en/wp-content/uploads/2022/07/Challenge_accepted_news_740x504_2.png")!important;
    opacity: 1;
    width: 21.875em;
    height: 12.75em;
    left: 0.5em!important;
    background-size: cover;
    background-position: bottom!important;
}
.PrimaryMenuItemComponentStyle-menuItemContainer {
    bottom: -30px!important; /*-0.5em worked but left artifacts*/
 
}
.MainScreenComponentStyle-playButtonContainer h3 {
    color: var(--accents);
}
/*Vignette reduced*/.MainScreenComponentStyle-gradientBlock, .MainScreenComponentStyle-gradientBlockRight {
    background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
    width: 25%;
}

/*that dumb festive mode button showing a little yellow is now gone*/
.BattlePickComponentStyle-cardImgEvent.Common-backgroundImageContain.Common-backgroundImage {
   background-size: cover!important;
}
.BattlePickComponentStyle-styleIsEnableBlock:hover {
    box-shadow: var(--accents) 0em 0em 0em 2px;
}

.MainScreenComponentStyle-playButtonContainer span { 
    color: rgb(255 194 51)!important; 
    text-shadow: -1px -1px 0 #fffef8ba, 0 -1px 0 #fffc0096, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;

}.MainScreenComponentStyle-playButtonContainer {
    background-color: rgba(0, 0, 0, .25)!important;
    border-radius: 0.5em!important;
    box-shadow: rgba(0, 0, 0, .25) 0em 0em 0em 0.063em!important;

}
.MainScreenComponentStyle-playButtonContainer:hover {
    box-shadow: var(--accents) 0em 0em 0em 2px!important;
}

/*context menu misc*/.ContextMenuStyle-menu,.TooltipStyle-tooltip {
    backdrop-filter: blur(0.125em);
    background-color: rgb(0 0 0 / 70%);
}.BattlePickComponentStyle-cardImg.Common-backgroundImageCover.Common-backgroundImage,.BattlePickComponentStyle-commonStyleBlock {
    border-radius: 0.25em;
}


/*Rank progress*/.UserInfoContainerStyle-containerProgressMainScreen > .Common-flexStartAlignStartColumn:after {
    background: var(--accents);
    box-shadow: var(--accents) 0em 0em 1px 0px;
    border-radius: 0em;
}
.UserProgressComponentStyle-progressItemCompleted {
    background: linear-gradient(rgba(0, 0, 0, .16) 0%, var(--accents) 300%);
}
.UserProgressComponentStyle-rankProgressBarGained {
    border-top: 4px solid var(--accents);
}
.UserProgressComponentStyle-rankGainedIndicator {
    border-left: 1px solid var(--accents);
}
.UserProgressComponentStyle-rankScore,.UserProgressComponentStyle-rankProgressLegend {
    color: var(--accents);
}
.UserProgressComponentStyle-progressItemCompleted:hover {
    box-shadow: var(--accents) 0px 0px 0px 2px;
}
.UserProgressComponentStyle-progressItemCompleted:hover:active {
    box-shadow: var(--accents) 0px 0px 0px 2px;
    animation: 0.5s linear 0s 1 normal none running RR;
}

@keyframes RR {
    0% {
    background-color: color-mix(in srgb, var(--accents) 50%, transparent);
}
    }
    50% {
        background-position: 100% 0%;
    10% {
    background-color: color-mix(in srgb, var(--accents) 100%, transparent);
    }100% {
    background-color: color-mix(in srgb, var(--accents) 50%, transparent);
    }
}

.UserProgressComponentStyle-xpIcon,.BattleResultUserInfoComponentStyle-xp img, .BattleRewardsComponentStyle-normalRow img {
    filter: brightness(10);
}
.UserInfoContainerStyle-containerProgressMainScreen > .Common-flexStartAlignStartColumn {
    background: rgba(255,255,255,.31);
    min-width: 10.6em;
    margin-top: 0.4em;
    border-radius: 0em;
}
/*
.UserInfoContainerStyle-progressValue {
    margin-left: 0.25em;
    color: rgb(0,0,0);
    text-shadow: 0px 0px 2px rgb(255,255,255),0px 0px 2px rgb(255,255,255),0px 0px 2px rgb(255,255,255) !important;
    z-index: 1;
}
.UserInfoContainerStyle-containerProgressMainScreen > .UserInfoContainerStyle-containerParameterProgress > .UserInfoContainerStyle-progressValue > span {
    color: rgb(0, 0, 0);
    text-shadow: 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255), 0px 0px 2px rgb(255, 255, 255) !important;
}*/
.UserInfoContainerStyle-progressValue {
    font-family: 'BaseFontBold';
    color: var(--accents);
    z-index: 1;
}
.UserInfoContainerStyle-containerProgressMainScreen > .UserInfoContainerStyle-containerParameterProgress > .UserInfoContainerStyle-progressValue > span {
    color: ...

Reviews

No reviews yet.