Aternos Create Your Own Theme by Harrafee

/* ==UserStyle==
@name         Aternos Create Your Own Theme
@namespace    USO Archive
@author       ScreeZyt
@description  This theme was made so anyone can make their own theme for Aternos!  If you need any help, join my discord:  https://discord.gg/nP6Vqu9
@version      20200124.23.34
@license      NONE
@preprocessor uso
==/UserStyle== */
/*
Read Me:
This theme was created by ScreeZ - A moderator on Aternos' official discord server!

Thank you for using my theme. I spent quite a lot of time to make this, so most "bugs" should be fixed. Tho if you find any, feel free to let me know!


This theme only works for the Aternos server website, and not for the forums. Some of my other themes works on the forums as well,
but i dont have the time to apply this theme on the forums page. Might do it in the future, tho as of right now i have no plans for it.

-------------------------------
My Other Themes:
https://userstyles.org/users/555385
-------------------------------
Socials:
𝓨𝓸𝓾𝓽𝓾𝓫𝓮:
https://www.youtube.com/channel/UC6qMMwtCmm-81BucQ7uvLuw

𝓢𝓽𝓮𝓪𝓶:
https://steamcommunity.com/id/ScreeZYT/

𝓓𝓲𝓼𝓬𝓸𝓻𝓭:
ScreeZ#9976
-------------------------------
*/

/*
PLEASE READ:

Hello there! So, you want to make your own Aternos theme huh?
Well, now you can. If you need any help, join my discord (Link below).
Dont hesitate to ask anything about the code.

Tip: Don't remove any "!important". Or the theming you've made might not be applied!

This is just a simple theme for those who does not rly know anything about css.
I hope i made this easy enough to understand so that you can at least change the backgrounds and colors.
For those who knows some more about css, there is a lot of more things you can do to make Aternos look amazing!

If you struggle with making your own, i have some themes made already:
https://userstyles.org/users/555385

And if you think you have a nice idea of a new theme,
i have a channel in my discord where you can give me your theme ideas
and i'll try to make a theme using it!

In my discord, you can ask anything about the theme. For example, what a line of code does,
or if there's anything else you want to add to a text, or want something to happen when you hover something.
I will help you with everything, (the best i can).

Also, i havent changed everything in this theme template, so if you want to theme something else,
that you cant find in the code already... Feel free to ask me, and i'll give you the line of code you need!

==============
Discord:
https://discord.gg/nP6Vqu9
==============
*/

@-moz-document url-prefix("https://aternos.org/") {
/*This section will be the code for the header (The top bar of Aternos).*/

/*Main*/
/*This animation will be used further down*/
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/*This line of code will remove the scrollers*/
.header ::-webkit-scrollbar {
	display: none !important;
}

/*This will change the css for the header wrapper, basically the background of the top bar*/
.header {
	background: #101a1e !important;
    box-shadow: 0 0 20px #09f !important;
    border-bottom: 2px solid black !important;
}

/*The next two lines belongs together. They will change the logo to the left. If you want the default logo, remove these lines!*/
header .logo > img {
display: none;
}

header .logo {
	content: url(https://i.imgur.com/O3Wih7j.png);
}

/*These next few lines will be the different colors of the social icons*/
.header .fa-twitter:before {
	color: #7EBC1D !important;   
}

.header .fa-facebook-square:before {
	color: #0860A8 !important;
}

.header .fa-youtube:before {
	color: #CD2905 !important;
}

.header .fa-instagram:before {
	color: #FFCA2D !important;
}

.header .fa-reddit:before {
	color: #7EBC1D !important;
}

.header .fa-discord:before {
	color: #0860A8 !important;
}

.header .fa-teamspeak:before {
	color: #CD2905 !important;
}

.header .fa-github:before {
	color: #FFCA2D !important;
}

/*This line of code will be for what happens when you hover over one of the icons
The animation is at the top of this section, in the "Main" section, called "@keyframes shake".
*/
.header .fab:hover {
    animation: shake 2s infinite !important;
}

/*This is the color of the ip to the right*/
.statusinfo {
	color: white !important;
}

/*This is the css of the friends-access dropwdon menu.
It will only be visible when logging in to a friends server on your account using the friends access!
*/
.friend-access-dropdown {
	background: #1C1817 !important;
    box-shadow: 0 0 10px black !important;
    border: 1px solid black !important;
}

/*If you want a border to separate the servers, delete this*/
.friend-access-switch {
	border-bottom: 1px solid black !important;
}

/*This will change the color of the name of the server owner under the server ip*/
.friend-access-by {
	color: white !important;
}

/*This will change the color of the username*/
.header .username {
	color: white !important;
}

/*This will change the color of the "Account" and "Logout" under the username*/
.userlinks a, .userlinks span {
	color: white !important;
}

/*This will change the hovering color of the ones above*/
.userlinks a:hover, .userlinks span:hover {
	color: whitesmoke !important;
}
}

@-moz-document url-prefix("https://aternos.org/") {
/*This section will be the code for the menu to the right*/

/*This will change the background of the menu*/
.navigation {
	background: #1C1817 !important;
}

/*This will change the borders separating the menu options. A background could be added to this if you'd like*/
.navigation .item {
	border: none !important;
    border-bottom: 1px solid black !important;
    border-right: 2px solid black !important;
}

/*This will change what happens to the menu option when hovering voer it*/
.navigation .item:hover {
	background: #343331 !important;
    border-right: none !important;
}

/**/
.navigation .item.active {
	background: #343331 !important;
    border-right: none !important;
}

/*Remove this if you want the icons to be the default ones!*/
.navigation .item .fas, .navigation .item .far {
	font-weight: 10 !important;
}

/*This will change the colors of the icons*/
.navigation .fa-home:before {
	color: #7EBC1D !important;
}

.navigation .fa-rocket:before {
	color: #0860A8 !important;
}

.navigation .fa-terminal:before {
	color: #CD2905 !important;
}

.navigation .fa-align-left:before {
	color: #FFCA2D !important;
}

.navigation .fa-sliders-h:before {
	color: #7EBC1D !important;
}

.navigation .fa-cogs:before {
	color: #0860A8 !important;
}

.navigation .fa-users:before {
	color: #CD2905 !important;
}

.navigation .fa-folder:before {
	color: #FFCA2D !important;
}

.navigation .fa-puzzle-piece:before {
	color: #7EBC1D !important;
}

.navigation .fa-globe-americas:before {
	color: #0860A8 !important;
}

.navigation .fa-undo:before {
	color: #CD2905 !important;
}
}

@-moz-document url-prefix("https://aternos.org/start/") {
/*This section will be for the content Home page*/

/*Main*/

/*This will remove the scrollbar from the page*/
::-webkit-scrollbar {
	display: none !important;
}

/*This is the background for the right bar, containing the advertisement.
Keep this background the same as in ".content" for the best look! */
.sidebar {
	background: linear-gradient(to bottom, #343331, #1c1b1a) !important;
}

/*This will change the background of the content*/
.content {
	background: linear-gradient(to bottom, #343331, #1c1b1a) !important;
}

/*This will change the color of the Topic*/
.content h1 {
	color: whitesmoke !important;
}

/*This will change the color of the sub-topics*/
.content h2 {
	color: grey !important;

}

/*If you want the icons of the server actions to be the default ones, delete this!*/
.start-activity .fas, .start-activity .far {
	font-weight: 10 !important;
}

/*This adds a border to the server tutorials, to make them stand out a little more*/
.tutorials .tutorial {
	border: 2px solid black !important;
}

/*This changes the background of the tutorials when hovering them*/
.tutorials .tutorial:hover {
	background: rgba(0,0,0,0.5) !important;
}

/*This changes the color of the "How to:"*/
.tutorial-text .tutorial-darker {
	color: whitesmoke !important;
}

/*This changes the color of the tutorial name*/
.tutorial-text {
	color: grey !important;
}

}

@-moz-document url-prefix("https://aternos.org/server/") {
/*This section will be for the content of the Server page*/

/*Main*/

/*This will remove the scrollbar from the page*/
::-webkit-scrollbar {
	display: none !important;
}

/*Once again, keep this the same as ".content"*/
.sidebar {
	background: linear-gradient(to bottom, #343331, #1c1b1a) !important;
}

/*Background of the content*/
.content {
	background: linear-gradient(to bottom, #343331, #1c1b1a) !important;
}

/*Color of the content topic*/
.content h1 {
	color: whitesmoke !important;
}

/*This will change the background of the ip and the tutorials wrapper*/
.server-ip, .server-tutorials {
	background: rgba(0,0,0,0.5) !important;
 }

/*This will change the background of the server info below*/
.server-info-box {
	background: rgba(0,0,0,0.5) !important;
}

/*Delete this if you want the icons to be the default ones!*/
.server-info-box .fas {
	font-weight: 10 !important;
}
}

@-moz-document url-prefix("https://aternos.org/console/") {
/*This section will be for the content of the Console page*/

/*Main*/

/*This will remove the scrollbar from the page
I recommend keeping the scroller in this page!
*/

/*
::-webkit-scrollbar {
	display: none !important;
}
*/

/*Once again, keep this the same as ".content"*/
.sidebar {
	background: linear-gradient(to bottom, #343331, #1c1b1a) !important;
}

/*Background of the content*/
.content {
	background: linear-gradient(to bottom, #343331, #1c1b1a) !important;
}

/*Color of the content topic*/
.content h1 {
	c...