From 4645250357e1e5f82d20a680780b269228105c88 Mon Sep 17 00:00:00 2001
From: gsd <mamu@ebal.net>
Date: Tue, 24 Oct 2023 22:20:37 +0300
Subject: [PATCH] tf2 restyle

---
 src/App.vue                                   | 97 +++----------------
 src/components/ActionDialogs/AdminDialog.vue  | 14 +--
 src/components/ActionDialogs/ReportView.vue   |  4 +-
 src/components/Others/Auth/AuthWindow.vue     |  2 +-
 src/components/Others/Auth/DiscordWindow.vue  | 18 ++--
 .../Others/CustomSvg/TerminalSvg.vue          |  2 +-
 .../Others/Images/BackgroundImage.vue         |  2 +-
 .../Others/Loader/ProfileViewer.vue           | 10 +-
 .../TabsMenuElements/AboutView/AboutView.vue  |  5 +-
 .../BackendStatus/BackendStatus.vue           |  6 +-
 .../BackendStatus/Components/FindPlayer.vue   |  8 +-
 .../Components/LogoWithCharacters.vue         |  4 +-
 .../SubComponents/ConnectButton.vue           |  6 +-
 .../SubComponents/CurrentPlayers.vue          |  6 +-
 .../MainView/Components/WhyNot.vue            |  2 +-
 .../MainView/Components/WhyNotText.vue        |  7 --
 .../Components/ProfileContainer.vue           | 17 ++--
 .../ProfileView/ProfileView.vue               |  9 +-
 .../TabsMenuElements/RulesView/RulesView.vue  |  6 +-
 .../Components/PlayerExtendedInfo.vue         | 15 ++-
 .../ServersView/Components/ServerFullInfo.vue |  9 +-
 .../ServersView/ServersView.vue               |  2 +-
 .../VipView/Components/FreeVipDialog.vue      |  2 +-
 .../TabsMenuElements/VipView/VipView.vue      |  2 +-
 src/css/baseui.css                            |  3 +
 src/css/buttons.css                           | 61 ++++++++++++
 src/css/menus.css                             |  9 ++
 src/css/rounded.css                           | 27 ++++++
 src/css/text.css                              | 61 ++++++++++++
 29 files changed, 247 insertions(+), 169 deletions(-)
 create mode 100644 src/css/baseui.css
 create mode 100644 src/css/buttons.css
 create mode 100644 src/css/menus.css
 create mode 100644 src/css/rounded.css
 create mode 100644 src/css/text.css

diff --git a/src/App.vue b/src/App.vue
index f0dadb9..bf84bcb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,6 +46,12 @@ Vue.use(MdContent);
 Vue.use(MdRipple);
 Vue.use(MdSwitch);
 
+import "@/css/buttons.css";
+import "@/css/rounded.css";
+import "@/css/text.css";
+import "@/css/baseui.css";
+import "@/css/menus.css";
+
 import TabsMenu from "@/components/TabsMenu.vue";
 import LoaderPage from "@/components/Others/Loader/LoaderPage.vue";
 import FailLoad from "@/components/Others/Loader/FailLoad.vue";
@@ -93,80 +99,10 @@ export default {
   margin-top: 60px;
 }*/
 
-h1,h2,h3,h4,h5,h6 {
-  font-family: tf2build;
-  color: #131213;
-}
-h1 {
-  font-family: tf2build;
-  line-height: 1em;
-  font-size: 5em;
-}
-
-h2 {
-  font-family: tf2build;
-  font-size: 4em;
-}
-
-h3 {
-  font-family: tf2build;
-  font-size: 3em;
-}
-
-h4 {
-  line-height: 1em;
-  font-size: 2em;
-}
-
-h5 {
-  font-size: 1.3em;
-}
-
-h6 {
-  font-size: 0.5em;
-}
-
-p {
-  font-family: tf2secondary;
-  color: #fdecc1;
-  font-size: 16px;
-}
-
-a {
-  font-family: tf2build;
-}
-
 .md-tab {
   background-size: cover
 }
 
-.rounded-and-colored {
-  border-radius: 10px;
-  border: 2px solid black;
-  background: #fd8846;
-}
-
-.rounded-and-colored-circle {
-  border-radius: 30px;
-  border: 2px solid black;
-  background: #fd8846;
-}
-
-.rounded-and-colored-without-bottom {
-  border-radius: 10px;
-  border-top: 2px solid black;
-  border-left: 2px solid black;
-  border-right: 2px solid black;
-  border-bottom: 0px solid transparent;
-  background: #fd8846;
-}
-
-.rounded-only {
-  border-radius: 10px;
-  border: 1px solid black;
-  background: #ffffff;
-}
-
 .pt-5 {
   padding-top: 10px;
 }
@@ -179,23 +115,10 @@ a {
   background-color: #131213;
 }
 
-.md-button.md-active {
-  font-size: 1.7em;
-  color: #fdecc1;
-  font-family: tf2build;
-  border-bottom: 2px solid #fdecc1;
-}
-
 .md-tabs-navigation {
   font-size: 1.5em;
 }
 
-.md-button {
-  color: #efdfb7;
-  font-family: tf2secondary;
-  text-transform: none;
-}
-
 .md-progress-bar {
   background-color: rgba(253,136,70,0.5) !important;
 }
@@ -212,6 +135,10 @@ a {
   color: black;
 }
 
+.clickable {
+  color:#9a9280;
+}
+
 .clickable:hover {
   cursor: pointer;
   color: #fd8846;
@@ -230,4 +157,8 @@ a {
 .md-scrollbar::-webkit-scrollbar-corner {
   background-color: black !important;
 }
+
+.md-scrollbar::-webkit-scrollbar {
+  background-color: #9a9280 !important;
+}
 </style>
diff --git a/src/components/ActionDialogs/AdminDialog.vue b/src/components/ActionDialogs/AdminDialog.vue
index 153cfbe..0d47bf6 100644
--- a/src/components/ActionDialogs/AdminDialog.vue
+++ b/src/components/ActionDialogs/AdminDialog.vue
@@ -25,9 +25,9 @@
             </div>
           </div>
           <p v-if="response.length>0" style="font-family: tf2secondary; color: black">Ответ: {{response}}</p>
-          <md-button v-on:click="toBan()" style="float: left;background-color: #bd2200; color: black; font-family: tf2build">Забанить</md-button>
-          <md-button v-on:click="payload.ban_length = 0" style="float: left;background-color: #fd8846; color: black; font-family: tf2build">Навсегда</md-button>
-          <md-button v-on:click="showMe(false)" style="float: right;background-color: #46fd4f; color: black; font-family: tf2build">Закрыть</md-button>
+          <md-button v-on:click="toBan()" style="float: left;" class="btn-collect">Забанить</md-button>
+          <md-button v-on:click="payload.ban_length = 0" style="float: left;" class="btn-unusual">Навсегда</md-button>
+          <md-button v-on:click="showMe(false)" style="float: right;" class="btn-colored">Закрыть</md-button>
         </md-card-content>
       </md-card>
       <!---->
@@ -37,8 +37,8 @@
         </md-card-header>
         <md-card-content>
           <p v-if="response.length>0" style="font-family: tf2secondary; color: black">Ответ: {{response}}</p>
-          <md-button v-on:click="toUnBan()" style="float: left;background-color: #bd2200; color: black; font-family: tf2build">Разбанить</md-button>
-          <md-button v-on:click="showMe(false)" style="float: right;background-color: #46fd4f; color: black; font-family: tf2build">Закрыть</md-button>
+          <md-button v-on:click="toUnBan()" style="float: left;" class="btn-hand">Разбанить</md-button>
+          <md-button v-on:click="showMe(false)" style="float: right;" class="btn-colored">Закрыть</md-button>
         </md-card-content>
       </md-card>
       <!---->
@@ -57,8 +57,8 @@
             </div>
           </div>
           <p v-if="response.length>0" style="font-family: tf2secondary; color: black">Ответ: {{response}}</p>
-          <md-button v-on:click="toKick()" style="float: left;background-color: #579af1; color: black; font-family: tf2build">Кикнуть</md-button>
-          <md-button v-on:click="showMe(false)" style="float: right;background-color: #46fd4f; color: black; font-family: tf2build">Закрыть</md-button>
+          <md-button v-on:click="toKick()" style="float: left" class="btn-high">Кикнуть</md-button>
+          <md-button v-on:click="showMe(false)" style="float: right;" class="btn-colored">Закрыть</md-button>
         </md-card-content>
       </md-card>
     </div>
diff --git a/src/components/ActionDialogs/ReportView.vue b/src/components/ActionDialogs/ReportView.vue
index 2165d52..6a92d0e 100644
--- a/src/components/ActionDialogs/ReportView.vue
+++ b/src/components/ActionDialogs/ReportView.vue
@@ -7,8 +7,8 @@
           <md-input v-model="reason" minlength="32"></md-input>
           <span class="md-error" style="padding-left: 5%; padding-right: 5%">{{feedback}}</span>
         </md-field>
-        <md-button class="md-raised" style="color: #131213; font-family: tf2build; background: brown" v-on:click="sendReport()">Пожаловаться</md-button>
-        <md-button class="md-raised" style="color: #131213; font-family: tf2build; background: #a1a52a" v-on:click="showReportDialog=false">Передумал</md-button>
+        <md-button class="btn-gosty" v-on:click="sendReport()">Пожаловаться</md-button>
+        <md-button class="btn-colored" v-on:click="showReportDialog=false">Передумал</md-button>
       </div>
     </div>
   </md-dialog>
diff --git a/src/components/Others/Auth/AuthWindow.vue b/src/components/Others/Auth/AuthWindow.vue
index 7a56e6b..142c2f6 100644
--- a/src/components/Others/Auth/AuthWindow.vue
+++ b/src/components/Others/Auth/AuthWindow.vue
@@ -27,7 +27,7 @@
         </div>
         <div class="md-layout md-alignment-bottom-center">
           <div class="clickable md-layout-item md-size-15">
-            <md-button class="md-right" style="color: #fdfde1; font-family: tf2build; background: #000000;" v-on:click="closeAW()">Не хочу</md-button>
+            <md-button class="md-right btn-default" v-on:click="closeAW()">Не хочу</md-button>
           </div>
         </div>
       </div>
diff --git a/src/components/Others/Auth/DiscordWindow.vue b/src/components/Others/Auth/DiscordWindow.vue
index 3102c3f..a291d4c 100644
--- a/src/components/Others/Auth/DiscordWindow.vue
+++ b/src/components/Others/Auth/DiscordWindow.vue
@@ -5,24 +5,24 @@
         <md-steppers :md-active-step.sync="currentMove" md-linear>
           <md-step id="steamAuth" md-label="Steam" :md-done.sync="steamAuth">
             <p>Заранее извиняемся за данную жопу боль, но чтоб предостеречь рейды на сервер дискорда и залет мимоходов, мы сделали авторизацию. Не пройдя ее и зайдя на наш сервер дискорда тебе можно будет лишь читать канал с аннонсами. Так что быстро ты давай пальчик в попу себе вставляй.</p>
-            <md-button v-if="this.$API.player.success_auth" style="color: #ffffff; font-family: tf2build; background: #000000" v-on:click="moveTo('logout', 'steam')">Выйти из Steam</md-button>
-            <md-button v-else style="color: #ffffff; font-family: tf2build; background: #000000" v-on:click="moveTo('login', 'steam')">Войти в Steam</md-button>
+            <md-button v-if="this.$API.player.success_auth" class="btn-colored" v-on:click="moveTo('logout', 'steam')">Выйти из Steam</md-button>
+            <md-button v-else class="btn-colored" v-on:click="moveTo('login', 'steam')">Войти в Steam</md-button>
           </md-step>
 
           <md-step id="discordAuth" md-label="Discord" :md-error="steamAlreadyAttachment" :md-done.sync="discordAuth">
             <div v-if="discord.id!==''">
               <p>У тебя уже есть привязанный аккаунт дискорда с ид: {{discord.id}}!<br> Поэтому зайти к нам на сервер тебе не составляет больших проблем.<br>Конечно ты можешь отвязать свой дискорд от стима если желаешь)</p>
-              <md-button v-if="discord.id!==''" style="color: #fdfde1; font-family: tf2build; background: #4679e7" v-on:click="openDiscord()">Перейти на сервер</md-button>
-              <md-button v-if="discord.id!==''" style="color: #fdfde1; font-family: tf2build; background: #ff2828" v-on:click="unregisterDiscord()">Отвязать Discord от Steam</md-button>
+              <md-button v-if="discord.id!==''" class="btn-old" v-on:click="openDiscord()">Перейти на сервер</md-button>
+              <md-button v-if="discord.id!==''" class="btn-collect" v-on:click="unregisterDiscord()">Отвязать Discord от Steam</md-button>
             </div>
             <div v-else>
               <div v-if="discord.nickname===''">
                 <p>Теперь надо зайти в дискорд, иначе как мы узнаем твои данные?</p>
-                <md-button style="color: #ffffff; font-family: tf2build; background: #505050" v-on:click="moveTo('login', 'discord')">Войти в Discord</md-button>
+                <md-button class="btn-default" v-on:click="moveTo('login', 'discord')">Войти в Discord</md-button>
               </div>
               <div v-else>
                 <p>Вот теперь мы узнали что тебя зовут {{discord.nickname}}, пока привязывать одно к другому, так что давай быстрее иди к следующему шагу</p>
-                <md-button style="color: #ffffff; font-family: tf2build; background: #505050" v-on:click="moveTo('logout', 'discord')">Выйти из Discord</md-button>
+                <md-button class="btn-default" v-on:click="moveTo('logout', 'discord')">Выйти из Discord</md-button>
               </div>
 
             </div>
@@ -31,16 +31,16 @@
           <md-step id="connectAuth" md-label="Связать аккаунты" :md-done.sync="connectAuth">
             <div v-if="discord.id.length>0">
               <p>Вот теперь ты точно можешь общаться со всеми у нас на сервере дискорда, но если ты вдруг передумал и хочешь отвязать свой дискорд от стима, перейди на второй шаг и нажми на отвязать дискорд.</p>
-              <md-button v-if="discord.id!==''" style="color: #fdfde1; font-family: tf2build; background: #4679e7" v-on:click="openDiscord()">Открыть Discord</md-button>
+              <md-button v-if="discord.id!==''" class="btn-old" v-on:click="openDiscord()">Открыть Discord</md-button>
             </div>
             <div v-else>
               <p>Поздравляю друг и почти на финешной прямой, осталось лишь их только связать и зайти уже в нашу клоаку!</p>
               <p v-if="discord.reg_msg.length > 0">{{discord.reg_msg}}</p>
-              <md-button style="color: #000000; font-family: tf2build; background: #fd8846" v-on:click="registerDiscord()">Связать аккаунты!</md-button>
+              <md-button class="btn-old" v-on:click="registerDiscord()">Связать аккаунты!</md-button>
             </div>
           </md-step>
         </md-steppers>
-        <md-button style="color: #000000; font-family: tf2build; background: #edffe9" v-on:click="closeDW()">Я передумал</md-button>
+        <md-button class="btn-colored" v-on:click="closeDW()">Я передумал</md-button>
       </div>
     </div>
   </md-dialog>
diff --git a/src/components/Others/CustomSvg/TerminalSvg.vue b/src/components/Others/CustomSvg/TerminalSvg.vue
index 9548cbb..c5fade3 100644
--- a/src/components/Others/CustomSvg/TerminalSvg.vue
+++ b/src/components/Others/CustomSvg/TerminalSvg.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="512px" height="60%" focusable="false" viewBox="0 0 12 12">
+  <svg xmlns="http://www.w3.org/2000/svg" width="512px" height="60%" focusable="false" viewBox="0 0 12 12" class="clickable">
     <path fill="currentColor" d="M11 1H1c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zM2.5 9.12a.62.62 0 01-.44-.18.628.628 0 010-.88L4.12 6 2.06 3.94c-.24-.24-.24-.64 0-.88s.64-.24.88 0L5.09 5.2c.44.44.44 1.15 0 1.59L2.94 8.94a.62.62 0 01-.44.18zm7-.12h-4c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h4c.28 0 .5.22.5.5s-.22.5-.5.5z"/>
   </svg>
 </template>
diff --git a/src/components/Others/Images/BackgroundImage.vue b/src/components/Others/Images/BackgroundImage.vue
index 7274019..4969a9f 100644
--- a/src/components/Others/Images/BackgroundImage.vue
+++ b/src/components/Others/Images/BackgroundImage.vue
@@ -32,7 +32,7 @@ export default {
         "-moz-filter": `blur(${this.blur_px}px)`,
         "-o-filter": `blur(${this.blur_px}px)`,
         "-ms-filter": `blur(${this.blur_px}px)`,
-        "filter": `blur(${this.blur_px}px)`
+        "filter": `blur(${this.blur_px}px) brightness(25%)`
       }
     }
   }
diff --git a/src/components/Others/Loader/ProfileViewer.vue b/src/components/Others/Loader/ProfileViewer.vue
index 92dec40..0f5be19 100644
--- a/src/components/Others/Loader/ProfileViewer.vue
+++ b/src/components/Others/Loader/ProfileViewer.vue
@@ -4,12 +4,12 @@
       <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
         <h1 v-if="loading">Загрузка</h1>
         <ProfileContainer v-else :player="player"/>
-        <hr width="100%">
-        <md-button v-if="!loading && this.$API.admin.permition.kick && player!==null && 'play_on' in player && player['play_on'] !== null" class="md-raised" style="color: #131213; font-family: tf2build; background: darkcyan" v-on:click="$refs.ad.showMe(true, 3)">кикнуть</md-button>
-        <md-button v-if="!loading && this.$API.admin.permition.ban && player!==null && 'ban' in player && player['ban'] === null" class="md-raised" style="color: #131213; font-family: tf2build; background: brown" v-on:click="$refs.ad.showMe(true, 1)">забанить</md-button>
-        <md-button v-if="!loading && this.$API.admin.permition.ban && player!==null && 'ban' in player && player['ban'] !== null" class="md-raised" style="color: #131213; font-family: tf2build; background: #21ff00" v-on:click="$refs.ad.showMe(true, 2)">разбанить</md-button>
+        <hr width="100%" v-if="!loading">
+        <md-button v-if="!loading && this.$API.admin.permition.kick && player!==null && 'play_on' in player && player['play_on'] !== null" class="md-raised btn-high" v-on:click="$refs.ad.showMe(true, 3)">кикнуть</md-button>
+        <md-button v-if="!loading && this.$API.admin.permition.ban && player!==null && 'ban' in player && player['ban'] === null" class="md-raised btn-collect" v-on:click="$refs.ad.showMe(true, 1)">забанить</md-button>
+        <md-button v-if="!loading && this.$API.admin.permition.ban && player!==null && 'ban' in player && player['ban'] !== null" class="md-raised btn-hand" v-on:click="$refs.ad.showMe(true, 2)">разбанить</md-button>
         <!--<md-button v-if="!loading && this.$API.admin.permition.mute" style="color: #131213; font-family: tf2build; background: lightgreen">замьютить</md-button>-->
-        <md-button v-if="!loading" v-on:click="showProfileDialog=false" style="background-color: #fd8846; font-family: tf2build;color: black; float: right">Закрыть</md-button>
+        <md-button v-if="!loading" v-on:click="showProfileDialog=false" style="float: right" class="btn-uniq">Закрыть</md-button>
       </div>
     </div>
     <AdminDialog :steam64 = "steam64" ref="ad"/>
diff --git a/src/components/TabsMenuElements/AboutView/AboutView.vue b/src/components/TabsMenuElements/AboutView/AboutView.vue
index 50ab3f2..f8d39e7 100644
--- a/src/components/TabsMenuElements/AboutView/AboutView.vue
+++ b/src/components/TabsMenuElements/AboutView/AboutView.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="md-layout md-alignment-bottom-center">
       <div class="md-layout-item md-size-15 md-small-size-100 md-alignment-bottom-center rounded-and-colored" style="z-index: 1">
-        <h3 style="text-align: center; margin-top: 1%; margin-bottom: 0%; line-height: 1em">О нас</h3>
+        <h3 class="txt-innert" style="text-align: center; margin-top: 1%; margin-bottom: 0%; line-height: 1em">О нас</h3>
       </div>
     </div>
     <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
@@ -28,7 +28,7 @@
             <hr width="50%" align="right">
             <p class="about-p">Посмотреть наши смешные до усрачки посты можно в Дискорде или в группе ВК, а так-же посетить мертвую группу стим</p>
             <div align="right">
-              <DiscordSvg :inline="true" :h="'2em'" :w="'2em'" :url="'https://tf2.pblr-nyk.pro/discord'" style="margin: 0% 1%"/>
+              <DiscordSvg :inline="true" :h="'2em'" :w="'2em'" :url="'https://tf2.pblr-nyk.pro/discord'" style="margin: 0% 1%;"/>
               <VkSvg :inline="true" :h="'2em'" :w="'2em'" :url="'https://tf2.pblr-nyk.pro/vk'" style="margin: 0% 1%"/>
               <SteamSvg :inline="true" :h="'2em'" :w="'2em'" :url="'https://tf2.pblr-nyk.pro/steam'" style="margin: 0% 1%"/>
             </div>
@@ -58,7 +58,6 @@ export default {
 .about-p {
   text-align: right;
   font-family: tf2secondary;
-  color: black
 }
 
 .about-img {
diff --git a/src/components/TabsMenuElements/BackendStatus/BackendStatus.vue b/src/components/TabsMenuElements/BackendStatus/BackendStatus.vue
index 1f6479e..afe1035 100644
--- a/src/components/TabsMenuElements/BackendStatus/BackendStatus.vue
+++ b/src/components/TabsMenuElements/BackendStatus/BackendStatus.vue
@@ -2,7 +2,7 @@
   <md-tab id="backendView" :md-icon="this.s_icon">
     <div class="md-layout md-alignment-bottom-center">
       <div class="md-layout-item md-size-30 md-small-size-100 md-alignment-bottom-center rounded-and-colored" style="z-index: 1">
-        <h3 style="text-align: center; margin-top: 1%; margin-bottom: 0%; line-height: 1em">Разное</h3>
+        <h3 class="txt-innert" style="text-align: center; margin-top: 1%; margin-bottom: 0%; line-height: 1em">Разное</h3>
       </div>
     </div>
     <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
@@ -10,10 +10,10 @@
         <h5 style="padding: 0% 3%">Сборка Frontend от {{this.$API.builddate !== null ? new Date(this.$API.builddate).toLocaleString() : 'Dev Build'}}</h5>
         <h5 style="padding: 0% 3%">Сборка Backend от {{this.$API.stats["builddate"] !== null ? new Date(parseInt(this.$API.stats["builddate"])*1000).toLocaleString() : 'Dev Build'}}</h5>
         <h5 v-if="this.$API.player.success_auth === false" style="text-align: center; cursor: pointer; text-decoration-line: underline" v-on:click="openAW()">Ты можешь искать других игроков здесь, но сначала надо авторизоваться!</h5>
-        <md-button v-else v-on:click="showFP()" style="color: #131213; font-family: tf2build; background: lightgreen">Найти игрока</md-button>
+        <md-button v-else v-on:click="showFP()" class="btn-gosty">Найти игрока</md-button>
         <FindPlayer ref="fp"/>
         <AuthWindow ref="aw" />
-        <md-button v-on:click="openDW()" style="color: #131213; font-family: tf2build; background: #5764f1">Привязать стим к дискорду</md-button>
+        <md-button v-on:click="openDW()" class="btn-old">Привязать стим к дискорду</md-button>
         <DiscordWindow ref="dw"/>
       </div>
     </div>
diff --git a/src/components/TabsMenuElements/BackendStatus/Components/FindPlayer.vue b/src/components/TabsMenuElements/BackendStatus/Components/FindPlayer.vue
index ed4bc93..01bfd71 100644
--- a/src/components/TabsMenuElements/BackendStatus/Components/FindPlayer.vue
+++ b/src/components/TabsMenuElements/BackendStatus/Components/FindPlayer.vue
@@ -4,13 +4,13 @@
       <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
         <h5 style="text-align: center; padding-left: 5%; padding-right: 5%;">Введи что-то из предложенного</h5>
         <md-field style="padding-left: 5%; padding-right: 5%;" :class="playerany">
-          <label style="padding-left: 5%; padding-right: 5%">{{'Steam|Ник|#ид бана|<@discordid>'}}</label>
+          <label class="txt" style="padding-left: 5%; padding-right: 5%">{{'Steam|Ник|#ид бана|<@discordid>'}}</label>
           <md-input v-model="player_string"></md-input>
           <span class="md-error" style="padding-left: 5%; padding-right: 5%">{{not_found}}</span>
         </md-field>
-        <md-button v-on:click="foundPlayer()" style="color: #131213; font-family: tf2build; background: lightgreen">Узнать</md-button>
-        <md-button v-on:click="closeFPD()" style="color: #131213; font-family: tf2build; background: #bd2200">Передумал</md-button>
-        <md-button v-on:click="closeFPD()" style="color: #131213; font-family: tf2build; background: #fd8846">Удалить себя</md-button>
+        <md-button v-on:click="foundPlayer()" class="btn-uniq">Узнать</md-button>
+        <md-button v-on:click="closeFPD()" class="btn-colored">Передумал</md-button>
+        <md-button v-on:click="closeFPD()" class="btn-gosty">Удалить себя</md-button>
         <ProfileViewer ref="pv" :steam64="player_steam64"/>
       </div>
     </div>
diff --git a/src/components/TabsMenuElements/MainView/Components/LogoWithCharacters.vue b/src/components/TabsMenuElements/MainView/Components/LogoWithCharacters.vue
index 4023bea..9558aa0 100644
--- a/src/components/TabsMenuElements/MainView/Components/LogoWithCharacters.vue
+++ b/src/components/TabsMenuElements/MainView/Components/LogoWithCharacters.vue
@@ -11,7 +11,7 @@
         </div>
         <div class="md-layout md-size-40">
           <div class="md-layout-item md-alignment-bottom-center rounded-and-colored-without-bottom">
-            <h1 style="text-align: center; text-shadow: rgba(80,80,80,0.59) 2px 5px; margin: 2%">Факты 13</h1>
+            <h1 class="txt-innert" style="text-align: center; text-shadow: rgba(80,80,80,0.59) 2px 5px; margin: 2%">Факты 13</h1>
           </div>
         </div>
       </div>
@@ -21,7 +21,7 @@
     <div class="md-layout">
       <div class="md-layout-item md-size"/>
       <div class="md-layout-item md-size-55 rounded-and-colored-without-bottom md-small-size-100">
-        <h4 style="text-align: center; text-transform: uppercase; font-size: 2.5em; margin: 1%">Добро пожаловать на "лучший" ру-сервер тф2</h4>
+        <h4 class="txt-innert" style="text-align: center; text-transform: uppercase; font-size: 2.5em; margin: 1%">Добро пожаловать на "лучший" ру-сервер тф2</h4>
       </div>
       <div class="md-layout-item md-size"/>
     </div>
diff --git a/src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue b/src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue
index 5cbc49b..82472b4 100644
--- a/src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue
+++ b/src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue
@@ -3,13 +3,13 @@
     <div class="md-layout-item md-size-50 rounded-and-colored md-small-size-80 clickable">
       <div class="md-layout md-alignment-center-center" style="margin: -5% 5%">
         <div class="md-layout-item md-size-5">
-          <h4 style="text-align: left; padding-right: 1%">{{' > '}}</h4>
+          <h4 class="txt-innert" style="text-align: left; padding-right: 1%">{{' > '}}</h4>
         </div>
         <div class="md-layout-item" v-on:click="moveToServer()">
-          <h4 style="text-align: center;">ПОДКЛЮЧИТЬСЯ К СЕРВЕРУ</h4>
+          <h4 class="txt-innert" style="text-align: center;">ПОДКЛЮЧИТЬСЯ К СЕРВЕРУ</h4>
         </div>
         <div class="md-layout-item md-size-5">
-          <h4 style="text-align: right; padding-left: 1%">{{' < '}}</h4>
+          <h4 class="txt-innert" style="text-align: right; padding-left: 1%">{{' < '}}</h4>
         </div>
       </div>
     </div>
diff --git a/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue b/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue
index 2adbd8a..cb0af26 100644
--- a/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue
+++ b/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue
@@ -15,15 +15,15 @@
     </div>
     <div class="md-layout md-alignment-center-center" style="margin-top: -1%">
       <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size} ${getSS()}`">
-        <h4 style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.player_now}}</h4>
+        <h4 class="txt-innert" style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.player_now}}</h4>
       </div>
       <div class="md-layout-item" v-bind:class="`md-size-${space_size} ${getSH()}`"/>
       <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size} ${getSS()}`">
-        <h4 style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.player_max}}</h4>
+        <h4 class="txt-innert" style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.player_max}}</h4>
       </div>
       <div class="md-layout-item" v-bind:class="`md-size-${space_size} ${getSH()}`"/>
       <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size} ${getSS()}`">
-        <h4 style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.working_servers}}/{{this.$API.stats.statistic.total_servers}}</h4>
+        <h4 class="txt-innert" style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.working_servers}}/{{this.$API.stats.statistic.total_servers}}</h4>
       </div>
     </div>
   </div>
diff --git a/src/components/TabsMenuElements/MainView/Components/WhyNot.vue b/src/components/TabsMenuElements/MainView/Components/WhyNot.vue
index f647250..9c3c51c 100644
--- a/src/components/TabsMenuElements/MainView/Components/WhyNot.vue
+++ b/src/components/TabsMenuElements/MainView/Components/WhyNot.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md-layout">
     <div class="md-layout-item md-size md-small-hide"/>
-    <div class="md-layout-item md-size-60 md-small-size-100 rounded-and-colored" style="background: #fffefc">
+    <div class="md-layout-item md-size-60 md-small-size-100 rounded-and-colored backfill">
       <h5 style="text-align: center;margin: 1%;">Давно искал место где можно почилить в данной мертвой игре??? Поздравляю ты его нашел!!!</h5>
       <hr>
       <CurrentPlayers/>
diff --git a/src/components/TabsMenuElements/MainView/Components/WhyNotText.vue b/src/components/TabsMenuElements/MainView/Components/WhyNotText.vue
index 4465a5f..abd250f 100644
--- a/src/components/TabsMenuElements/MainView/Components/WhyNotText.vue
+++ b/src/components/TabsMenuElements/MainView/Components/WhyNotText.vue
@@ -25,10 +25,3 @@ export default {
   })
 }
 </script>
-
-<style>
-.txt {
-  color: #131213;
-  font-size: 1.5em;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/TabsMenuElements/ProfileView/Components/ProfileContainer.vue b/src/components/TabsMenuElements/ProfileView/Components/ProfileContainer.vue
index bedbed1..b73cdd8 100644
--- a/src/components/TabsMenuElements/ProfileView/Components/ProfileContainer.vue
+++ b/src/components/TabsMenuElements/ProfileView/Components/ProfileContainer.vue
@@ -29,34 +29,34 @@
         </div>
         <hr>
         <!--GAMETIME-->
-        <md-button v-on:click="loadingUserTime()" v-if="usertime.loaded === false" class="md-raised" style="color: #131213; font-family: tf2build; background: #fd8846; margin: 0% 0%" md-menu-trigger>{{usertime.loading?'Загрузка':'Статистика по картам'}}</md-button>
+        <md-button v-on:click="loadingUserTime()" v-if="usertime.loaded === false" class="md-raised btn-strange" style="margin: 0% 0%" md-menu-trigger>{{usertime.loading?'Загрузка':'Статистика по картам'}}</md-button>
         <md-menu v-else md-direction="bottom-start" md-size="auto">
-          <md-button class="md-raised" style="color: #131213; font-family: tf2build; background: #fd8846" md-menu-trigger>Статистика по картам</md-button>
+          <md-button class="md-raised btn-strange" md-menu-trigger>Статистика по картам</md-button>
           <md-menu-content>
             <md-menu-item v-for="g in usertime.store" :key="g[0]+'g'">{{g[0]}} - {{timeFormat(g[1])}}</md-menu-item>
           </md-menu-content>
         </md-menu>
         <br>
         <md-menu md-direction="bottom-start" md-size="auto">
-          <md-button class="md-raised" style="color: #131213; font-family: tf2build; background: #fd8846" md-menu-trigger>Последние игры</md-button>
+          <md-button class="md-raised btn-strange" md-menu-trigger>Последние игры</md-button>
           <md-menu-content>
             <md-menu-item v-for="l in getLastPlay()" :key="l[0]+'l'">{{l[0]}} - {{l[1]}}</md-menu-item>
           </md-menu-content>
         </md-menu>
         <br>
         <!--DONATES-->
-        <md-button v-on:click="loadingDonates()" v-if="donates.loaded === false" class="md-raised" style="color: #131213; font-family: tf2build; background: #fd8846; margin: 0% 0%" md-menu-trigger>{{donates.loading?'Загрузка':'Покупки VIP'}}</md-button>
+        <md-button v-on:click="loadingDonates()" v-if="donates.loaded === false" class="md-raised btn-strange" style="margin: 0% 0%" md-menu-trigger>{{donates.loading?'Загрузка':'Покупки VIP'}}</md-button>
         <md-menu v-else md-direction="bottom-start" md-size="auto">
-          <md-button class="md-raised" style="color: #131213; font-family: tf2build; background: #fd8846" md-menu-trigger>Покупки VIP</md-button>
+          <md-button class="md-raised btn-strange" md-menu-trigger>Покупки VIP</md-button>
           <md-menu-content>
             <md-menu-item v-for="d in donates.store" :key="d['utime']+'d'">{{new Date(d['utime'] * 1000).toLocaleDateString()}} | {{d['status']}}</md-menu-item>
           </md-menu-content>
         </md-menu>
         <br>
         <!--BAN LIST-->
-        <md-button v-on:click="loadingBanList()" v-if="ban_list.loaded === false" class="md-raised" style="color: #131213; font-family: tf2build; background: #fd8846; margin: 0% 0%" md-menu-trigger>{{ban_list.loading?'Загрузка':'История банов'}}</md-button>
+        <md-button v-on:click="loadingBanList()" v-if="ban_list.loaded === false" class="md-raised btn-strange" style="margin: 0% 0%" md-menu-trigger>{{ban_list.loading?'Загрузка':'История банов'}}</md-button>
         <md-menu v-else md-direction="bottom-start" md-size="auto">
-          <md-button class="md-raised" style="color: #131213; font-family: tf2build; background: #fd8846" md-menu-trigger>История Банов</md-button>
+          <md-button class="md-raised btn-strange" md-menu-trigger>История Банов</md-button>
           <md-menu-content>
             <md-menu-item v-for="b in ban_list.store" :key="b['id']+'b'">#{{b['id']}} | {{new Date(b['ban_utime'] * 1000).toLocaleDateString()}} | {{b['ban_length']===0?'Навсегда':`${b['ban_length']} минут`}}</md-menu-item>
           </md-menu-content>
@@ -72,7 +72,7 @@
         <p class="profile-text" style="text-align: right; cursor: pointer" v-on:click="loadingUserTime()">Наиграно : {{usertime.total}}</p>
         <div style="justify-content: right; display: flex">
           <DiscordSvg :h="'10%'" :w="'40'" style="margin-left: 5%" v-if="this.player['attached_discords'].filter(v => v['active'] === 1).length>0" :url="`https://discord.com/channels/@me/${this.player['attached_discords'].filter(v => v['active'] === 1)[0]['discord_id']}`"/>
-          <SteamSvg :h="'10%'" :w="'40'" style="margin-left: 5%" :url="this.player['steamids']['community_url']"/>
+          <SteamSvg :h="'10%'" :w="'40'" style="margin-left: 5%;" :url="this.player['steamids']['community_url']"/>
         </div>
       </div>
       <br>
@@ -197,7 +197,6 @@ export default {
 <style>
 .profile-text {
   text-align: left;
-  color: #131213;
   font-size: 1.5em;
 }
 
diff --git a/src/components/TabsMenuElements/ProfileView/ProfileView.vue b/src/components/TabsMenuElements/ProfileView/ProfileView.vue
index 1bc6d0d..2f682c2 100644
--- a/src/components/TabsMenuElements/ProfileView/ProfileView.vue
+++ b/src/components/TabsMenuElements/ProfileView/ProfileView.vue
@@ -4,20 +4,19 @@
       <CharacterImage :size="10" :img_src="require(`@/assets/images/characters/pyro.png`)" :audio_src="require(`@/assets/sounds/alertmgs.mp3`)" :hide_if_small="true"/>
     </div>
     <div class="md-layout md-alignment-bottom-center">
-      <div class="md-layout-item md-size-25 md-small-size-100 md-alignment-bottom-center rounded-and-colored" >
-        <h3 style="text-align: center; margin: 4% 0%">Профиль</h3>
+      <div class="md-layout-item md-size-25 md-small-size-100 md-alignment-bottom-center rounded-and-colored" style="z-index: 1">
+        <h3 class="txt-innert" style="text-align: center; margin: 4% 0%">Профиль</h3>
       </div>
     </div>
-    <div class="md-layout md-alignment-bottom-center">
+    <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
       <div class="md-layout-item md-size-50 md-small-size-100 md-alignment-bottom-center rounded-only">
-        <br>
         <hr width="50%">
         <div v-if="this.$API.player.auth('steam') === false" class="clickable">
           <h2 class="auth-button" v-on:click="openAW()">АВТОРИЗОВАТЬСЯ</h2>
         </div>
         <div v-else>
           <ProfileContainer :player="$API.player.store"/>
-          <h5 class="auth-button" v-on:click="logout()">Выйти</h5>
+          <md-button class="btn-boss" v-on:click="logout()" style="float: left">Выйти</md-button>
         </div>
       </div>
     </div>
diff --git a/src/components/TabsMenuElements/RulesView/RulesView.vue b/src/components/TabsMenuElements/RulesView/RulesView.vue
index 7a0318f..12348fe 100644
--- a/src/components/TabsMenuElements/RulesView/RulesView.vue
+++ b/src/components/TabsMenuElements/RulesView/RulesView.vue
@@ -5,12 +5,12 @@
     </div>
     <div class="md-layout md-alignment-bottom-center">
       <div class="md-layout-item md-size-30 md-small-size-100 md-alignment-bottom-center rounded-and-colored" style="z-index: 1">
-        <h3 style="text-align: center; margin-top: 1%; margin-bottom: 0%; line-height: 1em">Правила</h3>
-        <h5 style="text-align: center; margin: 0px">(для сам маленьких)</h5>
+        <h3 class="txt-innert" style="text-align: center; margin-top: 1%; margin-bottom: 0%; line-height: 1em">Правила</h3>
+        <h5 class="txt-innert" style="text-align: center; margin: 0px">(для сам маленьких)</h5>
       </div>
     </div>
     <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
-      <div class="md-layout-item md-size-60 md-small-size-100 md-alignment-bottom-center rounded-only">
+      <div class="md-layout-item md-size-60 md-small-size-100 md-alignment-bottom-center rounded-only backfill">
         <h4 style="text-align: center">Правила на которые ты забьешь хуй</h4>
         <h4 style="text-align: center">V V V</h4>
         <hr>
diff --git a/src/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue b/src/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue
index b12a489..6c731ef 100644
--- a/src/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue
+++ b/src/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue
@@ -3,14 +3,11 @@
       <div class="md-layout md-alignment-bottom-center"  style="z-index: 1">
         <div class="md-layout-item md-size-5 md-small-hide"/>
         <div class="md-layout-item rounded-and-colored md-size-60 md-small-size-90">
-          <h3 style="text-align: center; margin: 2% 0%; max-height: 30em" class="h3-player">{{player['name']}}</h3>
-        </div>
-        <div class="md-layout-item rounded-and-colored-circle md-size-5 clickable" v-on:click="closePEI()" style="min-width: 3em">
-          <h3 style="text-align: center; margin: 25% 0%">X</h3>
+          <h3 style="text-align: center; margin: 0% 0%; max-height: 30em" class="h3-player txt-innert">{{player['name']}}</h3>
         </div>
       </div>
       <div class="md-layout md-alignment-bottom-center" style="margin-top: -3.5%;">
-        <div class="md-layout-item md-size-65 server-info-rounded" style="min-width: 40em">
+        <div class="md-layout-item md-size-65 rounded-only server-info-rounded" style="min-width: 40em">
           <div style="margin-top: 5%; text-align: center">
             <a :href="player['steam']['community_url']" target="_blank" class="a-player">Открыть профиль Steam</a>
           </div>
@@ -29,8 +26,9 @@
             </div>
           </div>
           <div style="justify-content: center; display: flex; margin-top: 0%">
-            <md-button class="md-raised" v-if="showPlayerDialog && this.$API.player.success_auth" style="color: #131213; font-family: tf2build; background: #fd8846" v-on:click="$refs.rv.showRV(true)">Репорт</md-button>
-            <md-button v-if="showPlayerDialog && this.$API.player.success_auth" style="color: #131213; font-family: tf2build; background: #fdecc1" v-on:click="showProfile()">информация</md-button>
+            <md-button class="btn-gosty" v-if="showPlayerDialog && this.$API.player.success_auth" v-on:click="$refs.rv.showRV(true)">Репорт</md-button>
+            <md-button class="btn-uniq" v-if="showPlayerDialog && this.$API.player.success_auth" v-on:click="showProfile()">информация</md-button>
+            <md-button class="btn-colored" v-on:click="closePEI()">Закрыть</md-button>
           </div>
         </div>
       </div>
@@ -67,7 +65,7 @@ export default {
 
 <style>
 .a-player {
-  text-align: center; font-size: 2em; color: #131213;
+  text-align: center; font-size: 2em; color: #f5e5c1;
 }
 
 .h3-player {
@@ -75,7 +73,6 @@ export default {
 }
 
 .p-player {
-  color: #131213;
   font-size: 1.2em;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue b/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue
index 779ba9e..bc63471 100644
--- a/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue
+++ b/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue
@@ -4,14 +4,14 @@
       <div class="md-layout md-alignment-bottom-center" style="z-index: 1">
         <div class="md-layout-item md-size-5"/>
         <div class="md-layout-item rounded-and-colored md-size-45 md-small-size-90">
-          <h3 style="text-align: center; margin: 2% 0%">{{serverData['name']}}</h3>
+          <h3 class="txt-innert" style="text-align: center; margin: 2% 0%">{{serverData['name']}}</h3>
         </div>
         <div class="md-layout-item rounded-and-colored-circle md-size-5 clickable" v-on:click="closeFIF()">
-          <h3 style="text-align: center; margin: 25% 0%">X</h3>
+          <h3 class="txt-innert" style="text-align: center; margin: 25% 0%">X</h3>
         </div>
       </div>
       <div class="md-layout md-alignment-bottom-center" style="margin-top: -2.5%">
-        <div class="md-layout-item md-size-50 server-info-rounded md-small-size-100">
+        <div class="md-layout-item md-size-50 server-info-rounded rounded-only md-small-size-100">
           <img :src="serverData['preview']" style="width: 100%; height:12em;object-fit: cover;border-top-left-radius: 15px; border-top-right-radius: 15px">
           <div>
             <p class="p-server">{{serverData['description']}}</p>
@@ -96,7 +96,7 @@ export default {
 
 <style>
 .p-server {
-  text-align: center; font-size: 2em; color: #131213
+  text-align: center; font-size: 2em;
 }
 
 .p-server-address {
@@ -122,7 +122,6 @@ export default {
 .server-info-rounded {
   border-radius: 20px;
   border: 5px solid black;
-  background: #fdfdfe;
 }
 
 .md-dialog-container {
diff --git a/src/components/TabsMenuElements/ServersView/ServersView.vue b/src/components/TabsMenuElements/ServersView/ServersView.vue
index 3c52c00..8b22b3f 100644
--- a/src/components/TabsMenuElements/ServersView/ServersView.vue
+++ b/src/components/TabsMenuElements/ServersView/ServersView.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="md-layout md-alignment-bottom-center" v-on:click="updateServers()">
       <div class="md-layout-item md-size-25 md-small-size-100 md-alignment-bottom-center rounded-and-colored clickable" style="z-index: 1">
-        <h3 style="text-align: center; margin: 4% 0%; line-height: 1em">Список серверов</h3>
+        <h3 class="txt-innert" style="text-align: center; margin: 4% 0%; line-height: 1em">Список серверов</h3>
       </div>
     </div>
     <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
diff --git a/src/components/TabsMenuElements/VipView/Components/FreeVipDialog.vue b/src/components/TabsMenuElements/VipView/Components/FreeVipDialog.vue
index 51402f6..56d1232 100644
--- a/src/components/TabsMenuElements/VipView/Components/FreeVipDialog.vue
+++ b/src/components/TabsMenuElements/VipView/Components/FreeVipDialog.vue
@@ -4,7 +4,7 @@
       <div class="md-layout-item md-size-100 md-small-size-100 md-alignment-bottom-center rounded-only">
         <h1 v-if="loading">Загрузка</h1>
         <h5 v-else style="padding: 0% 5%; text-align: center">{{result}}</h5>
-        <md-button style="color: #fdfde1; font-family: tf2build; background: #000000;float: right" v-if="result.length>0" v-on:click="openFVD(false)">ОК</md-button>
+        <md-button style="float: right" class="btn-default" v-if="result.length>0" v-on:click="openFVD(false)">ОК</md-button>
       </div>
     </div>
   </md-dialog>
diff --git a/src/components/TabsMenuElements/VipView/VipView.vue b/src/components/TabsMenuElements/VipView/VipView.vue
index 85f12f9..8fe3be8 100644
--- a/src/components/TabsMenuElements/VipView/VipView.vue
+++ b/src/components/TabsMenuElements/VipView/VipView.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="md-layout md-alignment-bottom-center">
       <div class="md-layout-item md-size-30 md-small-size-100 md-alignment-bottom-center rounded-and-colored" style="z-index: 1">
-        <h3 style="text-align: center; margin-top: 1%; margin-bottom: 0%; line-height: 1em">Покупка VIP</h3>
+        <h3 class="txt-innert" style="text-align: center; margin-top: 1%; margin-bottom: 0%; line-height: 1em">Покупка VIP</h3>
       </div>
     </div>
     <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
diff --git a/src/css/baseui.css b/src/css/baseui.css
new file mode 100644
index 0000000..7ad6ead
--- /dev/null
+++ b/src/css/baseui.css
@@ -0,0 +1,3 @@
+.backfill {
+    background: #3e3e3e;
+}
\ No newline at end of file
diff --git a/src/css/buttons.css b/src/css/buttons.css
new file mode 100644
index 0000000..7f3b1c7
--- /dev/null
+++ b/src/css/buttons.css
@@ -0,0 +1,61 @@
+.md-button.md-active {
+    font-size: 1.7em;
+    color: #fdecc1;
+    font-family: tf2build;
+    border-bottom: 2px solid #fdecc1;
+}
+.md-button {
+    color: #efdfb7;
+    font-family: tf2secondary;
+    text-transform: none;
+}
+
+.btn-base, .btn-default, .btn-uniq, .btn-old, .btn-high, .btn-strange, .btn-unusual, .btn-gosty, .btn-collect, .btn-colored, .btn-hand, .btn-boss {
+    cursor: pointer;
+    font-family: tf2build;
+    background: #2a2725;
+}
+
+.btn-default {
+    color: #B2B2B2;
+}
+
+.btn-uniq {
+    color: #FFD700;
+}
+
+.btn-old {
+    color: #476291;
+}
+
+.btn-high {
+    color: #4D7455;
+}
+
+.btn-strange {
+    color: #CF6A32;
+}
+
+.btn-unusual {
+    color: #8650AC;
+}
+
+.btn-gosty {
+    color: #38F3AB;
+}
+
+.btn-collect {
+    color: #AA0000;
+}
+
+.btn-colored {
+    color: #FAFAFA;
+}
+
+.btn-hand {
+    color: #70B04A;
+}
+
+.btn-boss {
+    color: #A50F79;
+}
\ No newline at end of file
diff --git a/src/css/menus.css b/src/css/menus.css
new file mode 100644
index 0000000..78acd56
--- /dev/null
+++ b/src/css/menus.css
@@ -0,0 +1,9 @@
+.md-menu-content-container {
+    background-color: #3e3e3e !important;
+    border-radius: 5px;
+}
+
+.md-list-item-content {
+    font-family: tf2secondary;
+    color: #f5e5c1;
+}
\ No newline at end of file
diff --git a/src/css/rounded.css b/src/css/rounded.css
new file mode 100644
index 0000000..5c8009f
--- /dev/null
+++ b/src/css/rounded.css
@@ -0,0 +1,27 @@
+.rounded-base, .rounded-and-colored, .rounded-and-colored-circle, .rounded-and-colored-without-bottom {
+    background: #f4722b;
+}
+
+.rounded-and-colored {
+    border-radius: 10px;
+    border: 2px solid black;
+}
+
+.rounded-and-colored-circle {
+    border-radius: 30px;
+    border: 2px solid black;
+}
+
+.rounded-and-colored-without-bottom {
+    border-radius: 10px;
+    border-top: 2px solid black;
+    border-left: 2px solid black;
+    border-right: 2px solid black;
+    border-bottom: 0px solid transparent;
+}
+
+.rounded-only {
+    border-radius: 10px;
+    border: 1px solid black;
+    background: #3e3e3e;
+}
diff --git a/src/css/text.css b/src/css/text.css
new file mode 100644
index 0000000..af9135a
--- /dev/null
+++ b/src/css/text.css
@@ -0,0 +1,61 @@
+h1,h2,h3,h4,h5,h6 {
+    font-family: tf2build;
+    color: #f5e5c1;
+}
+h1 {
+    font-family: tf2build;
+    line-height: 1em;
+    font-size: 5em;
+}
+
+h2 {
+    font-family: tf2build;
+    font-size: 4em;
+}
+
+h3 {
+    font-family: tf2build;
+    font-size: 3em;
+}
+
+h4 {
+    line-height: 1em;
+    font-size: 2em;
+}
+
+h5 {
+    font-size: 1.3em;
+}
+
+h6 {
+    font-size: 0.5em;
+}
+
+p {
+    font-family: tf2secondary;
+    color: #f5e5c1;
+    font-size: 16px;
+}
+
+a {
+    font-family: tf2build;
+}
+
+.txt, label {
+    color: #f5e5c1;
+    font-size: 1.5em;
+}
+
+.txt-innert {
+    color: #3e3e3e;
+}
+
+.md-table-head-label, .md-table-cell-container, input {
+    color: #f5e5c1;
+    font-family: tf2secondary;
+}
+
+.md-title {
+    color: #f5e5c1;
+    font-family: tf2build;
+}
\ No newline at end of file