feat: Copy over CSS and some structure from App.vue from main branch

1 files changed, 95 insertions, 91 deletions

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 0426defe..cb588bf6 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts">
 import { ref } from "vue";
 import { invoke } from "@tauri-apps/api/core";
 
@@ -12,8 +12,8 @@ async function greet() {
 </script>
 
 <template>
-  <main class="container">
-    <h1>Welcome to Tauri + Vue</h1>
+  <div class="app-inner">
+    <div id="fc_bg__container" :style="bgStyle"/>
 
     <div class="row">
     </div>
@@ -24,128 +24,132 @@ async function greet() {
       <button type="submit">Greet</button>
     </form>
     <p>{{ greetMsg }}</p>
-  </main>
+  </div>
 </template>
 
-<style scoped>
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #747bff);
+<style>
+#fc_menu-bar {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  width: 100%;
+  height: var(--fc-menu_height);
 }
 
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #249b73);
+#fc__menu_bar::before {
+    position: absolute;
+    content: "";
+    inset: 0; /* same as { top: 0; right: 0; bottom: 0; left: 0; } */
+    background-image: linear-gradient(to bottom, red, orange);
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 1s linear;
 }
 
-</style>
-<style>
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color: #0f0f0f;
-  background-color: #f6f6f6;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+#fc__menu_bar:hover::before {
+    opacity: 1;
 }
 
-.container {
-  margin: 0;
-  padding-top: 10vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
+/* Borders reset */
+#fc__menu_bar, #fc__menu_items {
+    border: none !important;
 }
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: 0.75s;
+.app-inner {
+  height: 100%;
+  width: 100%;
 }
 
-.logo.tauri:hover {
-  filter: drop-shadow(0 0 2em #24c8db);
+/* Header item */
+#fc__menu_items {
+  height: 100%;
+  background-color: transparent;
+  float: left;
+  width: calc(100% - 168px); /* window controls container width */
 }
 
-.row {
-  display: flex;
-  justify-content: center;
+#fc__menu_items .el-menu-item, #fc__menu_items .el-sub-menu__title {
+  color: #b4b6b9;
+  border-color: white;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+#fc__menu_items > .el-menu-item {
+  text-transform: uppercase;
+  border: none !important;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  font-weight: bold;
+  font-size: large;
+  background-color: transparent !important;
+
+  border-width: 2px !important;
+  border-style: solid !important;
+  border-color: transparent !important;
+  border-radius: 10px !important;
+  transition: none;
 }
 
-a:hover {
-  color: #535bf2;
+#fc__menu_items .el-menu-item:hover, #fc__menu_items .el-sub-menu__title {
+  color: #c6c9ce;
+  background-color: transparent;
 }
 
-h1 {
-  text-align: center;
+#fc__menu_items .el-menu-item:focus-visible {
+  border-color: rgb(160, 207, 255) !important;
 }
 
-input,
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+#fc__menu_items .el-menu-item.is-active, #fc__menu_items .el-sub-menu.is-active > .el-sub-menu__title {
+  color: white !important;
 }
 
-button {
-  cursor: pointer;
+.app-inner > .fc__mods__container {
+  overflow-y: auto;
+  height: calc(100% - var(--fc-menu_height));
 }
 
-button:hover {
-  border-color: #396cd8;
+/* Header menu */
+.developer_build {
+  background: repeating-linear-gradient(
+    45deg,
+    rgba(0, 0, 0, 0.2),
+    rgba(0, 0, 0, 0.2) 20px,
+    rgba(0, 0, 0, 0.3) 20px,
+    rgba(0, 0, 0, 0.3) 40px
+  );
 }
-button:active {
-  border-color: #396cd8;
-  background-color: #e8e8e8;
+
+/* Window controls */
+#fc_window__controls {
+  float: right;
+  height: 100%;
 }
 
-input,
-button {
-  outline: none;
+#fc_window__controls > button,
+#fc_window__controls > .el-dropdown > button,
+#fc_window__controls > .el-dropdown > .el-badge > button {
+  color: white;
+  font-size: 20px;
+  margin: auto 5px;
+  background: none;
+  border: none;
+  height: 100%;
 }
 
-#greet-input {
-  margin-right: 5px;
+#fc_window__controls > button:hover,
+#fc_window__controls > .el-dropdown > button:hover,
+#fc_window__controls > .el-dropdown > .el-badge > button:hover {
+  color: #c6c9ce;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
-  }
+#fc_window__controls > button:active,
+#fc_window__controls > .el-dropdown > button:active {
+  color: #56585a;
+}
 
-  a:hover {
-    color: #24c8db;
-  }
+#fc_window__controls > button:last-of-type {
+  margin-right: 15px;
+}
 
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-  button:active {
-    background-color: #0f0f0f69;
-  }
+sup {
+  border: none !important;
 }
 
 </style>