noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed rem to px aside from font-size

Browse Source 
Good code practice
This commit is contained in:
Colin Kallemein
2024-06-04 22:34:51 +02:00
parent 4f96fb5824
commit d0450ca673
9 changed files with 49 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/game/Chat.vue
View File

@ -18,12 +18,12 @@
align-items: center;
input {
width: 32rem;
height: 3rem;
border-radius: 3rem;
width: 500px;
height: 48px;
border-radius: 48px;
opacity: 0.8;
font-size: 1.2rem;
padding: 0 1.5rem;
padding: 0 24px;
background-color: rgba($white, 0.85);
border: 2px solid $white;
color: black;
@ -31,9 +31,9 @@
img {
position: absolute;
left: 32rem;
width: 1.875rem;
height: 1.875rem;
left: 500px;
width: 30px;
height: 30px;
}
}
</style>

14
src/components/game/Hud.vue
View File

@ -16,21 +16,21 @@
.hud-wrapper {
position: relative;
left: -2rem;
left: -32px;
.profile, .hud, &::before {
position: absolute;
top: 2rem;
left: 2rem;
top: 32px;
left: 32px;
width: 245px;
height: 75px;
border-radius: 1rem;
border-radius: 16px;
z-index: 1;
}
.profile {
width: 4rem;
height: 4rem;
width: 64px;
height: 64px;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 3px solid $white;
@ -38,7 +38,7 @@
left: 0;
z-index: 2; // Ensure profile is above hud and before
img {
width: 2rem;
width: 32px;
position: absolute;
left: 50%;
top: 50%;

22
src/components/game/Menu.vue
View File

@ -38,22 +38,22 @@
.menu {
list-style: none;
display: flex;
gap: 1.25rem;
gap: 20px;
.menu-item {
position: relative;
p {
position: absolute;
bottom: 3.125rem;
width: 4rem;
bottom: 50px;
width: 64px;
text-align: center;
background-color: #b1b2b5;
border: 2px solid $white;
border-radius: 1.5rem;
height: 1.5rem;
border-radius: 24px;
height: 24px;
font-size: 0.875rem;
line-height: 1.5rem;
line-height: 24px;
left: 50%;
transform: translateX(-50%);
display: none;
@ -63,8 +63,8 @@
position: absolute;
top: 100%;
background-color: $white;
height: 0.5rem;
width: 0.875rem;
height: 8px;
width: 14px;
clip-path: polygon(100% 0, 0 0, 50% 100%);
left: 50%;
transform: translateX(-50%);
@ -72,13 +72,13 @@
}
a {
padding: 0.5rem;
padding: 8px;
background-color: rgba(127, 127, 127, 0.7);
border: 2px solid $white;
border-radius: 50%;
display: block;
width: 1.875rem;
height: 1.875rem;
width: 30px;
height: 30px;
img {
width: inherit;