change keybind test

0PandaDEV · Aug 27, 2024 · ebf6e03 · ebf6e03
1 parent 0b077a9
commit ebf6e03
Show file tree

Hide file tree

Showing 8 changed files with 777 additions and 528 deletions.
diff --git a/app.vue b/app.vue
diff --git a/assets/css/style.scss → assets/css/index.scss b/assets/css/style.scss → assets/css/index.scss
@@ -6,56 +6,6 @@ $text: #E5DFD5;
 $text2: #ADA9A1;
 $mutedtext: #78756F;
 
-@font-face {
-  font-family: SFRoundedRegular;
-  font-display: swap;
-  src: url("~/assets/fonts/SFRoundedRegular.otf") format("opentype");
-}
-
-@font-face {
-  font-family: SFRoundedMedium;
-  font-display: swap;
-  src: url("~/assets/fonts/SFRoundedMedium.otf") format("opentype");
-}
-
-@font-face {
-  font-family: SFRoundedSemiBold;
-  font-display: swap;
-  src: url("~/assets/fonts/SFRoundedSemiBold.otf") format("opentype");
-}
-
-@font-face {
-  font-family: CommitMono;
-  font-display: swap;
-  src: url("~/assets/fonts/CommitMono.woff2") format("woff2");
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  color: $text;
-  text-decoration: none;
-  font-family: SFRoundedRegular;
-  scroll-behavior: smooth;
-  scrollbar-width: thin;
-  user-select: none;
-
-  --os-handle-bg: #ADA9A1;
-  --os-handle-bg-hover: #78756F;
-  --os-handle-bg-active: #78756F;
-}
-
-html,
-body,
-#__nuxt {
-  background-color: transparent;
-}
-
-.os-scrollbar-horizontal {
-  display: none;
-}
-
 .bg {
   width: 750px;
   height: 474px;

diff --git a/assets/css/keybind.scss b/assets/css/keybind.scss
@@ -0,0 +1,66 @@
+$primary: #2E2D2B;
+$accent: #FEB453;
+$divider: #ffffff0d;
+
+$text: #E5DFD5;
+$text2: #ADA9A1;
+$mutedtext: #78756F;
+
+.bg {
+  width: 750px;
+  height: 474px;
+  background-color: $primary;
+  border: 1px solid $divider;
+  border-radius: 12px;
+  z-index: -1;
+  position: fixed;
+  outline: none;
+}
+
+.keybind-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 20px;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+.keybind-input {
+  width: 300px;
+  height: 50px;
+  border: 2px solid $accent;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  cursor: pointer;
+  margin-bottom: 20px;
+  background-color: rgba($accent, 0.1);
+  user-select: none;
+}
+
+.keybind-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba($accent, 0.5);
+}
+
+button {
+  padding: 10px 20px;
+  background-color: $accent;
+  color: $primary;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}