aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRemy Raes <raes.remy@gmail.com>2022-10-20 01:42:13 +0200
committerRemy Raes <raes.remy@gmail.com>2022-10-20 01:42:13 +0200
commit1aad4ef2346e336af82268ebf6dcddad1a4bde0e (patch)
treec3d977c74cff125c44d138949748eed7b71c3a3c
parent732cf68fe6fd2a9ed043b0795145039943351c1b (diff)
downloadFlightCore-1aad4ef2346e336af82268ebf6dcddad1a4bde0e.tar.gz
FlightCore-1aad4ef2346e336af82268ebf6dcddad1a4bde0e.zip
refactor: apply style to new app menu
-rw-r--r--src-vue/src/App.vue21
1 files changed, 12 insertions, 9 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 97a11539..45329fc1 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -22,7 +22,7 @@ export default {
// Enable dragging entire app by dragging menu bar.
// https://github.com/tauri-apps/tauri/issues/1656#issuecomment-1161495124
- document.querySelector(".el-tabs__nav-scroll")!.addEventListener("mousedown", async e => {
+ document.querySelector("#fc__menu_bar")!.addEventListener("mousedown", async e => {
if ((e.target as Element).closest(".el-menu-item")) return; // Disable drag when clicking menu items.
await tauriWindow.appWindow.startDragging();
});
@@ -48,7 +48,8 @@ export default {
default-active="/"
mode="horizontal"
@select="handleSelect"
- class="el-menu-demo fc_menu__tabs el-tabs__nav-scroll"
+ id="fc__menu_bar"
+ class="el-menu-demo el-tabs__nav-scroll"
>
<el-menu-item active index="/">Play</el-menu-item>
<el-menu-item index="/changelog">Changelog</el-menu-item>
@@ -66,33 +67,35 @@ export default {
<style>
/* Borders reset */
-.fc_menu__tabs .el-tabs__nav, .fc_menu__tabs .el-tabs__header {
- border: none !important;
+#fc__menu_bar {
+ border: none !important;
}
/* Header item */
-.fc_menu__tabs .el-tabs__item {
+#fc__menu_bar .el-menu-item {
color: #b4b6b9;
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;
- margin: 10px 0;
}
-.fc_menu__tabs .el-tabs__item:hover {
+#fc__menu_bar .el-menu-item:hover {
color: #c6c9ce;
+ background-color: transparent;
}
-.fc_menu__tabs .is-active {
+#fc__menu_bar .el-menu-item.is-active {
color: white !important;
+ background-color: transparent;
}
/* Header menu */
-.fc_menu__tabs .el-tabs__header {
+#fc__menu_bar {
background-image: radial-gradient(transparent 1px);
backdrop-filter: saturate(50%) blur(4px);
+ background-color: transparent;
height: auto !important;
}