Debloated Typeracer by Perseus333

/* ==UserStyle==
@name         Debloated Typeracer
@version      20240516.07.57
@namespace    https://userstyles.world/user/Perseus333
@description  Typeracer is bloated no more.
@author       Perseus333
@license      MIT
==/UserStyle== */

@-moz-document url-prefix("https://play.typeracer.com/") {
/*Simpler Interface for Typerracer*/


/*General Edits*/

/*Hide Annoying or Unnecessary Elements*/

.createAccountLeaderboardPrompt, /* Typeracer Premium Ad in HomePage*/
.upgradeButton,/* Typeracer Premium Ad in Profile Stats*/
#school-edition-promo, /*Shool Edition Ad*/
.typeracerNotifications, /*Ads in the form of notifications*/

.podContainer.medium.statsView, /* Leaderboard pannel */
.navigation, /*The navigation in the header*/ 
.title, /*The name type racer on the top left*/
.curated-list-wrapper, /*A setting not available to free users*/
.profilePicContainer, /*The profile picture*/
#universe-background, /*Main Background*/
.socialItems, /*Social Media Links*/
.icon-universes, /*Icon at the title of the suggested universes*/

.newEastWidget, /*Unnecessary blank space before footer*/
.ag-logo, /*The logo in the footer*/
.change-theme-button, /*Redundant huge change theme button*/
.copyright /*The copyright - it isn't illegal to hide it, is it?*/
{
    display: none !important;
}



/*Formatting the Website*/


/*
=====================
=   HEADER / STATS  =
=====================
*/

/*All the user stats in one line*/
.userStats,
.userStats>div,
.userHeader,
table.themeHeader > tbody{
    flex: none !important;
}

/*Reduces the tize of the user stats*/
table.themeHeader > tbody {
    height: 1.5em;
}

/*Aligns the stats to the left*/
.userStats {
    margin-left: auto !important;
}

/*Reduces the margins of the userStats to the sides of the screen*/
table.themeHeader > tbody > tr {
    flex: 0 1 98%;
}

/*Removes the colored backgrounds from the stats and settings buttons*/
/*also from the create account and sign in buttons when logged out*/
.stat,
.ImageButton,
.createAcct,
.signIn {
    background-color: transparent !important;
}



/*
=================
=   HOMEPAGE    =
=================
*/


/*Removes background images*/
.enterRace,
.practice,
.friends {
    background: none !important;
}


/*Removes a bunch of backgrounds*/

body .sidebarBlocks iframe /*FU itself*/,
body .container .OptionsWrapper /*Race options*/
{
    background-color: transparent !important;
}

/*Main containers in home page*/
.podContainer {
    border: none !important;
}


/*Edits the buttons to enter the races*/
.prompt-button {
    padding: 0.5rem 0.5em;
    border: none !important;
}



/*Improve the "Instant Death" button*/

.off::before,
.on::after {
    background-image: none !important;
    border-radius: 8px;
}

.off,
.on{
    border-radius: 8px;
    width: 20px;
    text-indent: 9999px;
    overflow: hidden;
}

/*End of "Instant Death" section*/



/*Make race menus go Flex*/
/*Places the three main types of race horizontally*/

.enterRace {
    flex: 2;
}

.practice, .friends {
    flex: 1 !important;
}

.enterRace,
.practice {
    margin-right: 0.5em !important
}
/*End of make things go flex*/



/*Featured Universes (FU)*/
/*Edits on the content of this element are
in the second  section because it is
hosted in a different url*/
.sidebarBlocks {
    margin: auto !important;
    height: auto !important;
}


/*Colorless links*/
.gwt-Anchor {
    color: inherit !important;
}


/*Reduces the padding in the footer*/
.footer-cont {
    padding-top: 0.5em !important;
    padding-bottom: 0 !important;
}

/*Reduces text size in footer*/
.footer-menu {
    font-size: small;
}




/*POP-UP Settings (Create Account/Sign In)*/

/*The closing button for the pop-up*/
.xButton {
    background: none !important;
    box-shadow: none !important;
}

/*Icon besides the header of the pop-up*/
.CaptionWithIcon>img {
    display: none !important;
}




/*
 ====================
 =  Race Settings   = 
 ==================== 
*/

/*Change this to whatever image you want to change your car*/
/*Only visible on your end*/

.avatar-self > div:nth-child(2) {
    background-image: url("https://wallpapers.com/images/hd/squished-cat-face-meme-png-tx4s1bkejcx4firo.jpg") !important;
    scale: 2;
}

/*This changes the other's cars*/
/*Remove the ":not(.avatar-self)" and the statement above to apply it to all cars including yours*/

.avatar:not(.avatar-self) > div:nth-child(2) {
    background-image: url("https://i.ibb.co/2785hJj/dg7ltec-626871d6-371d-40b0-a86e-2f65dbf8eacb.png") !important;   
    scale: 1.5;
} 

/*Removes the icon of the text you just typed (after the race)*/
.textInfoView > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) {
 display: none !important;
}


/*Simplifying the countdown*/
.trafficLight, /*Traffic light*/
.popupContent > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1), /*The space that occupies the traffic light*/
.lightLabel /*The text besides the countdown*/
{
    display: none !important;
}


/*Nicer race countdown*/
.countdownPopup {
    left: 47% !important;
    top: 20% !important;
    scale: 1.5 !important;
    border: none !important;
    border-radius: 10px !important;
}

.raceLeaveLink, /*Leave Race Button "Return to main menu"*/
.raceAgainLink, /*Race again Button*/
table.textInfoView > tbody > tr .ScoreMenuButton > tbody > tr /*"Try again?" Button*/
{
    background-color: transparent !important;
    border: none !important;
}


table.inputPanel.smoothCaretInputBox tbody tr td table tbody tr td div div {
    line-height: 1.2 !important;
}



/*
==============
= AFTER RACE =
==============
*/

/*Images of the Stats (after the race)*/
table.textInfoView > tbody > tr .tblOwnStats tr:nth-child(1) td:nth-child(1),
table.textInfoView > tbody > tr .tblOwnStats tr:nth-child(2) td:nth-child(1),
table.textInfoView > tbody > tr .tblOwnStats tr:nth-child(3) td:nth-child(1),
table.textInfoView > tbody > tr .tblOwnStats tr:nth-child(4) td:nth-child(1)
{
    background-color: transparent !important;
    background-image: none !important;
}

/*Removes the top speeds of that text (after the race)*/
.textInfoView > tbody:nth-child(1) > tr:nth-child(5),
.textInfoView > tbody:nth-child(1) > tr:nth-child(6) {
    display: none !important;
}

/*Reduces the line height for the stats after the text to make it more compact*/
table.textInfoView > tbody > tr .tblOwnStats tr > td:nth-child(1) {
    line-height: initial !important;
}


/*Typing Review replay live stats and controls*/
table.TypingLogReplayPlayer > tbody > tr table tbody tr td,
table.TypingLogReplayPlayer > tbody > tr .statusIndicator
{
    border: none !important;
}

.TypingLogReplayPlayer > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) {
display: flex;
}


/*The border of the graph in the stats after the race*/
.IncrementSpeedChart {
    border: none !important;
}


/*Typing Review container*/
table.TypingLogReplayPlayer > tbody > tr:nth-child(8) > td,
table.TypingLogReplayPlayer > tbody > tr:nth-child(9) > td {
    border: none !important;
}

/*Typing review replay controls*/
table.TypingLogReplayPlayer > tbody > tr:nth-child(4) table tbody tr {
    border-radius: 10px !important;
    flex: 0 !important;
}

/*Typing review step control arrows*/
.TypingLogReplayPlayer > tbody:nth-child(1) > tr:nth-child(7) > td:nth-child(1) > table:nth-child(1) {
    width: 100px !important;
}

table.TypingLogReplayPlayer > tbody > tr:nth-child(8) > td {
    /*border-radius: 0px !important;*/
    margin-top: 0px !important;
}

/*Makes speed graph bigger when hovering over it*/
.IncrementSpeedChart>div>div>div>svg:hover {
    scale: 1.7;
}





/*
 ==================
 =   Recoloring   =
 ==================
*/


/*Catppucin Mocha Color Scheme*/

:root {
    --crust:    #11111b;
    --mantle:   #181825;
    --base:     #1e1e2e;
    --surface0: #313244;
    --surface1: #45475a;
    --surface2: #585b70;
    --overlay1: #7f849c;
    --subtext0: #a6adc8;
    --subtext1: #bac2de;
    --text:     #cdd6f4;
    --red:      #f38ba8;
    --green:    #a6e3a1;
}


/*Everforest Dark Color Scheme*/
/*
:root {
    --crust:    #1e2326;
    --base:     #272e33;
    --surface0: #2e383c;
    --surface1: #374145;
    --surface2: #414b50;
    --overlay1: #7A8478;
    --subtext0: #dbbc7f;
    --subtext1: #a7c080;
    --text:     #d3c6aa;
    --red:      #e67e80;
    --green:    #83c092;
}


/*Feel free to use whichever color palette you want */
/*Color palettes to add: Gruvbox and dracula */

/*Sets the color of most text*/
body,
.textInfoAuthor,
.textInfoContributor,
a,
table.textInfoView > tbody > tr .ScoreMenuButton > tbody > tr,
h1,
h2,
h3,
h4,

.userInfo, /*User stats*/
.gameView .gameStatusLabel, /*Status of the race*/
.scoreboard .row, /*Usernames of participants in the race*/
.xButton, /*Closing button of the create account/sign-up pop-up*/

/*Stats after the race*/
table.textInfoView > tbody > tr .tblOwnStats .tblOwnStatsNumber,
table.textInfoView > tbody > tr .tblOwnStats tr > td,
table.textInfoView > tbody > tr .textInfoHeader,
table.TypingLogReplayPlayer > tbody > tr:nth-child(8) > td .lblSectionHeading,

/*Typing review replay stats text*/
table.TypingLogReplayPlayer > tbody > tr:nth-child(3) .statusIndicator,
table.TypingLogReplayPlayer > tbody > tr:nth-child(3) .lblStatusIndicator,
div.TypingDisplaySection
{
    color: var(--text) !important;
}


/*Sets the color of the footer*/
.footer-cont {
    background-color: var(--crust) !important;
}

/*Sets the color of the button to enter the races*/
.prompt-button {
    background-color: var(--surface1) !important;
}

/*Sets the general background color*/
body .flex-wrapper {
    background-color: var(--base) !important;
}

/*The main container for the site, 
smaller than general background*/
.podContaine...