<script setup lang="ts">
import { onMounted } from 'vue'

import Layout from './layout/index.vue'

onMounted(() => {
  document.documentElement.classList.add('dark')
})
</script>

<template>
  <layout />
</template>

<style lang="scss">
#app {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.jtk-endpoint {
  z-index: 100;
}

.card-item + .card-item {
  margin-top: 35px;
}

.el-card {
  border-radius: 8px;
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-bg-tertiary);

  &:hover {
    background: #171b22;
    box-shadow: none !important;
    transition: background-color 0.3s ease-in-out;
  }

  .el-card__body {
    padding: 10px;
  }
}
</style>
