PandaDEV/Qopy
1
0
Fork 0
mirror of https://github.com/0PandaDEV/Qopy.git synced 2025-04-22 05:34:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: new settings ui

Browse source
This commit is contained in:
PandaDEV 2025-01-02 18:41:10 +10:00
parent 2a44701178
commit 6d7874c1ae
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C
2 changed files with 179 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

133
assets/css/settings.scss
View file

@ -36,49 +36,116 @@ $mutedtext: #78756f;
}
}
.keybind-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
gap: 6px;
z-index: -1;
p {
font-family: SFRoundedMedium;
}
.title {
font-size: 20px;
font-weight: 800;
}
.settings-container {
width: 100%;
margin-top: 26px;
position: relative;
font-size: 12px;
font-family: SFRoundedMedium;
.keybind-input {
padding: 6px;
border: 1px solid $divider;
color: $text2;
.settings {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-left: -26px;
display: flex;
border-radius: 13px;
outline: none;
gap: 6px;
gap: 24px;
.key {
color: $text2;
font-family: SFRoundedMedium;
background-color: $divider;
padding: 6px 8px;
border-radius: 8px;
.names {
display: flex;
flex-direction: column;
gap: 16px;
p {
font-family: SFRoundedSemiBold;
color: $text2;
}
}
.actions {
display: flex;
flex-direction: column;
gap: 16px;
color: $mutedtext;
}
}
}
.launch {
display: flex;
align-items: center;
gap: 6px;
input[type="checkbox"] {
appearance: none;
width: 14px;
height: 14px;
background-color: transparent;
border-radius: 5px;
border: 1px solid $mutedtext;
position: relative;
cursor: pointer;
transition: background-color 0.2s;
&:checked {
~ .checkmark {
opacity: 1;
}
}
}
.keybind-input:focus {
border: 1px solid rgba(255, 255, 255, 0.2);
.checkmark {
height: 14px;
width: 14px;
position: absolute;
opacity: 0;
transition: opacity 0.2s;
}
&.empty-keybind {
.keybind-input {
border-color: rgba(255, 82, 82, 0.298);
}
p {
color: $text2;
}
}
.keybind-input {
width: min-content;
white-space: nowrap;
padding: 6px;
border: 1px solid $divider;
color: $text2;
display: flex;
border-radius: 10px;
outline: none;
gap: 4px;
.key {
color: $text2;
font-family: SFRoundedMedium;
background-color: $divider;
padding: 2px 6px;
border-radius: 6px;
font-size: 14px;
}
}
.keybind-input:focus {
border: 1px solid rgba(255, 255, 255, 0.2);
}
.empty-keybind {
border-color: rgba(255, 82, 82, 0.298);
}
.top-bar {
width: 100%;
height: 56px;
border-bottom: 1px solid $divider;
}
.bottom-bar {
height: 40px;
width: calc(100vw - 2px);
@ -144,6 +211,10 @@ $mutedtext: #78756f;
transition: all 0.2s;
cursor: pointer;
p {
color: $text;
}
&.disabled {
pointer-events: none;
opacity: 0.5;