Facti13.Frontend.VueMaterial/src/App.vue

<template>
  <div>
    <FailLoad v-if="f"/>
    <TabsMenu v-else/>
    <LoaderPage v-if="l"/>
  </div>
</template>

<script>
import Vue from "vue";
//import 'vue-material/dist/theme/default.css'
import 'vue-material/dist/vue-material.min.css'

import MdTabs from "vue-material/dist/components/MdTabs";
import MdIcon from "vue-material/dist/components/MdIcon";
import MdCard from "vue-material/dist/components/MdCard";
import MdDialog from "vue-material/dist/components/MdDialog";
import MdDrawer from "vue-material/dist/components/MdDrawer";
import MdButton from "vue-material/dist/components/MdButton";
import MdProgress from "vue-material/dist/components/MdProgress";
import MdSnackbar from "vue-material/dist/components/MdSnackbar";
import MdMenu from "vue-material/dist/components/MdMenu";
import MdList from "vue-material/dist/components/MdList";

Vue.use(MdTabs);
Vue.use(MdIcon);
Vue.use(MdCard);
Vue.use(MdDialog);
Vue.use(MdDrawer);
Vue.use(MdButton);
Vue.use(MdProgress);
Vue.use(MdSnackbar);
Vue.use(MdMenu);
Vue.use(MdList);

import TabsMenu from "@/components/TabsMenu.vue";
import LoaderPage from "@/components/Others/LoaderPage.vue";
import FailLoad from "@/components/Others/FailLoad.vue";
export default {
  name: 'App',
  components: {
    FailLoad,
    LoaderPage,
    TabsMenu
  },
  data: () => ({
    l:true,
    f:true
  }),
  beforeMount() {
    this.$API.load().then(() => {
      this.l = this.$API.loading;
      this.f = this.$API.failed;
    }).catch(() => {
      console.log('e', this.l,this.f);
    })
  }
}
</script>

<style>
@font-face {
  font-family: tf2build;
  src: url('@/assets/fonts/tf2build.ttf');
}

@font-face {
  font-family: tf2secondary;
  src: url('@/assets/fonts/tf2secondary.ttf');
}

/*#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  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;
}

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: #e0eddd;
}

.pt-5 {
  padding-top: 10px;
}

.md-tabs {
  /*background-color: #131213;*/
}

.md-tabs-navigation {
  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;
}

.md-progress-bar-track {
  color: black;
}

.md-progress-bar-fill {
  color: black;
}

.md-progress-bar-buffer {
  color: black;
}

.clickable:hover {
  cursor: pointer;
}

.md-menu-content-container {
  color: black;
  background-color: #e0eddd;
  border: 3px solid black;
}

.md-scrollbar::-webkit-scrollbar-thumb {
  background-color: #fd8846 !important;
}

.md-scrollbar::-webkit-scrollbar-corner {
  background-color: black !important;
}
</style>