noxious/client
3
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/assets/scss/login.scss
View File

@ -19,18 +19,18 @@
flex-direction: column;
.content-elements {
margin: 5rem 0;
margin: 80px 0;
width: inherit;
display: flex;
flex-direction: column;
gap: 1.5rem;
gap: 24px;
.login-form {
width: inherit;
form {
display: grid;
gap: 1rem;
gap: 15px;
width: inherit;
.form-field {
@ -38,19 +38,19 @@
flex-direction: column;
background-color: rgba($white, 0.5);
border-radius: 3px;
min-width: 25rem;
min-width: 400px;
margin: 0 auto;
label {
color: $black;
background-color: rgba($white, 0.5);
padding: 0.25rem;
padding: 4px;
font-size: 0.875rem;
border-radius: 3px 3px 0 0;
}
input {
padding: 0.3rem 0.25rem;
padding: 4px;
font-size: 0.875rem;
&:focus-visible {
@ -64,11 +64,11 @@
.row-buttons {
display: flex;
justify-content: center;
gap: 0.5rem;
gap: 8px;
.button {
padding: 0.6rem 0;
min-width: 6.25rem;
padding: 10px 0;
min-width: 100px;
font-size: 0.65rem;
border-radius: 5px;
@ -81,7 +81,7 @@
}
.main-title {
margin-top: 7rem;
margin-top: 115px;
text-align: center;
font-size: 3rem;
text-shadow:

2
src/assets/scss/main.scss
View File

@ -24,7 +24,7 @@ h1, h2, h3, h4, h5, h6 {
}
p, span, li, a, button, label {
font-family: Arial, sans-serif;
font-family: Helvetica, Arial, sans-serif;
color: $white;
}

8
src/components/Game.vue
View File

@ -93,17 +93,17 @@ const bootScene = (scene: Phaser.Scene) => {
position: absolute;
left: 0;
right: 0;
margin: 0 3rem;
margin: 0 48px;
}
.top-ui {
top: 3rem;
top: 48px;
}
.bottom-ui {
justify-content: space-between;
align-items: center;
bottom: 6.25rem;
height: 6.25rem;
bottom: 100px;
height: 100px;
}
</style>

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;

12
src/components/screens/Characters.vue
View File

@ -106,8 +106,8 @@ function create() {
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6.25rem;
padding: 0 5rem;
gap: 100px;
padding: 0 80px;
&::before {
content: '';
}
@ -115,7 +115,7 @@ function create() {
.characters-wrapper {
display: flex;
justify-content: center;
gap: 5rem;
gap: 80px;
width: 100%;
.character {
@ -154,7 +154,7 @@ function create() {
span {
align-self: center;
font-size: 16px;
font-size: 1rem;
}
}
@ -243,10 +243,10 @@ function create() {
button {
padding: 8px 10px 8px 20px;
min-width: 6.25rem;
min-width: 100px;
position: relative;
border-radius: 5px;
font-size: 18px;
font-size: 1.125rem;
display: flex;
gap: 10px;
align-items: center;

2
src/components/sprites/Character.vue
View File

@ -8,7 +8,7 @@
:style="{
fontFamily: 'Helvetica, Arial',
color: '#42B883',
fontSize: '20px',
fontSize: '1.25rem',
fontStyle: 'bold',
strokeThickness: 8,
stroke: '#213547'

4
src/components/utilities/Modal.vue
View File

@ -102,7 +102,7 @@ onUnmounted(() => {
background-color: rgba($purple, 0.6);
padding: 0 20px;
border-radius: 20px 20px 0 0;
height: 3.75rem;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
@ -149,7 +149,7 @@ onUnmounted(() => {
button {
padding: 10px 16px;
min-width: 6.25rem;
min-width: 100px;
border-radius: 5px;
}