change keybind test

This commit is contained in:
PandaDEV 2024-08-27 17:15:37 +10:00
parent 0b077a9b2e
commit ebf6e0311f
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C
8 changed files with 780 additions and 531 deletions

View file

@ -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;

66
assets/css/keybind.scss Normal file
View file

@ -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;
}