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

style: formatting

Browse source
This commit is contained in:
PandaDEV 2024-11-23 14:57:42 +10:00
parent 7e6b2f8b63
commit f2f554074b
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C
22 changed files with 1493 additions and 1171 deletions
Download patch file Download diff file Expand all files Collapse all files

242
assets/css/keybind.scss
View file

@ -1,149 +1,149 @@
$primary: #2E2D2B;
$accent: #FEB453;
$primary: #2e2d2b;
$accent: #feb453;
$divider: #ffffff0d;
$text: #E5DFD5;
$text2: #ADA9A1;
$mutedtext: #78756F;
$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;
width: 750px;
height: 474px;
background-color: $primary;
border: 1px solid $divider;
border-radius: 12px;
z-index: -1;
position: fixed;
outline: none;
}
.back {
position: absolute;
top: 16px;
left: 16px;
display: flex;
gap: 8px;
align-items: center;
position: absolute;
top: 16px;
left: 16px;
display: flex;
gap: 8px;
align-items: center;
img{
background-color: $divider;
border-radius: 6px;
padding: 8px 6px;
}
img {
background-color: $divider;
border-radius: 6px;
padding: 8px 6px;
}
p {
color: $text2;
}
p {
color: $text2;
}
}
.keybind-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
gap: 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
gap: 6px;
.title {
font-size: 20px;
font-weight: 800;
}
.title {
font-size: 20px;
font-weight: 800;
}
.keybind-input {
padding: 6px;
border: 1px solid $divider;
color: $text2;
display: flex;
border-radius: 13px;
outline: none;
gap: 6px;
.keybind-input {
padding: 6px;
border: 1px solid $divider;
color: $text2;
display: flex;
border-radius: 13px;
outline: none;
gap: 6px;
.key {
color: $text2;
font-family: SFRoundedMedium;
background-color: $divider;
padding: 6px 8px;
border-radius: 8px;
}
}
.key {
color: $text2;
font-family: SFRoundedMedium;
background-color: $divider;
padding: 6px 8px;
border-radius: 8px;
}
}
.keybind-input:focus {
border: 1px solid rgba(255, 255, 255, 0.2);
}
.keybind-input:focus {
border: 1px solid rgba(255, 255, 255, 0.2);
}
}
.bottom-bar {
height: 40px;
width: calc(100vw - 2px);
backdrop-filter: blur(18px);
background-color: hsla(40, 3%, 16%, 0.8);
position: fixed;
bottom: 1px;
left: 1px;
z-index: 100;
border-radius: 0 0 12px 12px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-inline: 12px;
padding-right: 6px;
padding-top: 1px;
align-items: center;
font-size: 14px;
border-top: 1px solid $divider;
height: 40px;
width: calc(100vw - 2px);
backdrop-filter: blur(18px);
background-color: hsla(40, 3%, 16%, 0.8);
position: fixed;
bottom: 1px;
left: 1px;
z-index: 100;
border-radius: 0 0 12px 12px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-inline: 12px;
padding-right: 6px;
padding-top: 1px;
align-items: center;
font-size: 14px;
border-top: 1px solid $divider;
p {
color: $text2;
}
p {
color: $text2;
}
.left {
display: flex;
align-items: center;
gap: 8px;
.left {
display: flex;
align-items: center;
gap: 8px;
.logo {
width: 18px;
height: 18px;
}
}
.logo {
width: 18px;
height: 18px;
}
}
.right {
display: flex;
align-items: center;
.right {
display: flex;
align-items: center;
.actions div {
display: flex;
align-items: center;
gap: 2px;
}
.actions div {
display: flex;
align-items: center;
gap: 2px;
}
.divider {
width: 2px;
height: 12px;
background-color: $divider;
margin-left: 8px;
margin-right: 4px;
transition: all .2s;
}
.divider {
width: 2px;
height: 12px;
background-color: $divider;
margin-left: 8px;
margin-right: 4px;
transition: all 0.2s;
}
.actions {
padding: 4px;
padding-left: 8px;
display: flex;
align-items: center;
gap: 8px;
border-radius: 7px;
background-color: transparent;
transition: all .2s;
cursor: pointer;
}
.actions {
padding: 4px;
padding-left: 8px;
display: flex;
align-items: center;
gap: 8px;
border-radius: 7px;
background-color: transparent;
transition: all 0.2s;
cursor: pointer;
}
.actions:hover {
background-color: $divider;
}
.actions:hover {
background-color: $divider;
}
&:hover .actions:hover~.divider {
opacity: 0;
}
}
}
&:hover .actions:hover ~ .divider {
opacity: 0;
}
}
}