Facti13.Frontend.VueMaterial/src/App.vue

<template>
  <div>
    <HiddenEgg style="z-index: 9999"/>
    <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";
import MdField from "vue-material/dist/components/MdField";
import MdSteppers from "vue-material/dist/components/MdSteppers";
import MdTable from "vue-material/dist/components/MdTable";
import MdContent from "vue-material/dist/components/MdContent";
import MdRipple from "vue-material/dist/components/MdRipple";
import MdSwitch from "vue-material/dist/components/MdSwitch";
import MdTooltip from "vue-material/dist/components/MdTooltip";

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);
Vue.use(MdField);
Vue.use(MdSteppers);
Vue.use(MdTable);
Vue.use(MdContent);
Vue.use(MdRipple);
Vue.use(MdSwitch);
Vue.use(MdTooltip);

import "@/css/buttons.css";
import "@/css/rounded.css";
import "@/css/text.css";
import "@/css/baseui.css";
import "@/css/menus.css";
import "@/css/tables.css";

import TabsMenu from "@/components/TabsMenu.vue";
import LoaderPage from "@/components/Others/Loader/LoaderPage.vue";
import FailLoad from "@/components/Others/Loader/FailLoad.vue";
import HiddenEgg from "@/components/Others/Loader/HiddenEgg.vue";
export default {
  name: 'App',
  components: {
    HiddenEgg,
    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');
}

@font-face {
  font-family: "Material Icons";
  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;
}*/

.md-tab {
  background-size: cover
}

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

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

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

.md-tabs-navigation {
  font-size: 1.5em;
}

.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 {
  color:#9a9280;
}

.clickable:hover {
  cursor: pointer;
  color: #fd8846;
}

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

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

.md-scrollbar::-webkit-scrollbar-corner {
  background-color: black !important;
}

.md-scrollbar::-webkit-scrollbar {
  background-color: #9a9280 !important;
}
</style>