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

Optimized and cleaned up more scss

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-04 21:27:17 +02:00
parent 3257a3511a
commit 4f96fb5824
7 changed files with 75 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
z-index: -1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
transform: translate(-50%, -50%);
}
.content-wrapper {
@ -24,6 +24,7 @@
display: flex;
flex-direction: column;
gap: 1.5rem;
.login-form {
width: inherit;
@ -43,10 +44,9 @@
label {
color: $black;
background-color: rgba($white, 0.5);
padding: 0.25rem 0.25rem;
padding: 0.25rem;
font-size: 0.875rem;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-radius: 3px 3px 0 0;
}
input {
@ -69,7 +69,6 @@
.button {
padding: 0.6rem 0;
min-width: 6.25rem;
position: relative;
font-size: 0.65rem;
border-radius: 5px;

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

@ -18,22 +18,12 @@ body {
user-select: none; /* Standard syntax */
}
h1,
h2,
h3,
h4,
h5,
h6 {
h1, h2, h3, h4, h5, h6 {
font-family: GentiumPlus, serif;
color: $white;
}
p,
span,
li,
a,
button,
label {
p, span, li, a, button, label {
font-family: Arial, sans-serif;
color: $white;
}
@ -45,18 +35,19 @@ button, input {
button {
text-align: center;
&.btn-purple {
background-color: rgba($purple, 0.75);
border: rgba($white, 0.35) 1px solid;
border: 1px solid rgba($white, 0.35);
&:hover {
background-color: rgba($lilac, 0.75);
}
}
}
button:hover {
cursor: pointer;
&:hover {
cursor: pointer;
}
}
::-webkit-scrollbar {

3
src/components/Game.vue
View File

@ -86,6 +86,7 @@ const bootScene = (scene: Phaser.Scene) => {
padding: 30px;
position: relative;
}
.top-ui,
.bottom-ui {
display: flex;
@ -94,9 +95,11 @@ const bootScene = (scene: Phaser.Scene) => {
right: 0;
margin: 0 3rem;
}
.top-ui {
top: 3rem;
}
.bottom-ui {
justify-content: space-between;
align-items: center;

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

@ -17,51 +17,43 @@
.hud-wrapper {
position: relative;
left: -2rem;
.profile {
.profile, .hud, &::before {
position: absolute;
left: 0;
top: 0;
top: 2rem;
left: 2rem;
width: 245px;
height: 75px;
border-radius: 1rem;
z-index: 1;
}
.profile {
width: 4rem;
height: 4rem;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 3px solid $white;
z-index: 1;
top: 0;
left: 0;
z-index: 2; // Ensure profile is above hud and before
img {
width: 2rem;
position: absolute;
left: calc(50% - 1rem);
left: 50%;
top: 50%;
transform: translateY(-50%);
transform: translate(-50%, -50%);
}
}
.hud {
position: absolute;
left: 2rem;
top: 2rem;
width: 245px;
height: 75px;
background-image: url('/assets/shapes/hud-shape.svg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 1rem;
z-index: 1;
background: url('/assets/shapes/hud-shape.svg') center/cover no-repeat;
}
&::before {
content: '';
position: absolute;
left: 2rem;
top: 2rem;
width: 245px;
height: 75px;
background-image: url('/assets/clouds.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 1rem;
mask-image: url('/assets/shapes/hud-image-shape.svg');
background: url('/assets/clouds.png') center/cover no-repeat;
mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
mask-mode: luminance;
}
}

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

@ -42,6 +42,7 @@
.menu-item {
position: relative;
p {
position: absolute;
bottom: 3.125rem;
@ -65,7 +66,8 @@
height: 0.5rem;
width: 0.875rem;
clip-path: polygon(100% 0, 0 0, 50% 100%);
left: calc(50% - 0.4375rem);
left: 50%;
transform: translateX(-50%);
}
}
@ -73,7 +75,7 @@
padding: 0.5rem;
background-color: rgba(127, 127, 127, 0.7);
border: 2px solid $white;
border-radius: 100%;
border-radius: 50%;
display: block;
width: 1.875rem;
height: 1.875rem;
@ -88,12 +90,13 @@
p {
display: block;
}
a {
background-image: url('/assets/galaxy.png');
background-position: center;
background-size: cover;
img {
-webkit-filter: drop-shadow(0px 3px 6px $black);
filter: drop-shadow(0px 3px 6px $black);
}
}

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

@ -99,8 +99,8 @@ function create() {
.character-select-screen {
background: #dddddd;
.ui-wrapper {
// vertical and vertical center
height: 100vh;
display: flex;
flex-direction: column;
@ -123,11 +123,10 @@ function create() {
height: 275px;
display: flex;
flex-direction: column;
background-image: url('/assets/shapes/character-select-shape-unselected.svg');
background-repeat: no-repeat;
border-radius: 20px;
position: relative;
background-repeat: no-repeat;
background-image: url('/assets/shapes/character-select-shape-unselected.svg');
&.active {
background-image: url('/assets/shapes/character-select-shape.svg');
@ -152,11 +151,13 @@ function create() {
height: 100px;
margin: auto;
}
span {
align-self: center;
font-size: 16px;
}
}
&::before,
&::after {
display: none;
@ -184,7 +185,6 @@ function create() {
border-radius: 0 0 20px 20px;
}
// hide the radio buttons
input[type='radio'] {
opacity: 0;
height: 100%;
@ -208,11 +208,11 @@ function create() {
height: 30px;
padding: 5px;
border-radius: 100%;
z-index: 1;
position: absolute;
right: -10px;
top: 5px;
transform: translateY(-50%);
position: absolute;
z-index: 1;
&:hover {
background-color: $dark-red;
@ -228,7 +228,6 @@ function create() {
z-index: 1;
}
// img under the label
.sprite-container {
display: flex;
flex-direction: column;
@ -241,6 +240,7 @@ function create() {
.button-wrapper {
display: flex;
gap: 30px;
button {
padding: 8px 10px 8px 20px;
min-width: 6.25rem;
@ -260,10 +260,6 @@ function create() {
opacity: 0.3;
}
&:hover {
background-color: rgba($lilac, 0.75);
}
&:disabled {
background-color: rgba($purple, 0.5);
cursor: not-allowed;

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

@ -114,33 +114,32 @@ onUnmounted(() => {
button {
width: 40px;
height: 40px;
margin: auto 0;
margin: 0;
padding: 0;
position: relative;
img {
width: inherit;
height: inherit;
width: 100%;
height: 100%;
}
&:hover {
&::after {
content: '';
position: absolute;
width: 38px;
height: 38px;
left: 1px;
top: 1px;
border-radius: 100%;
background-color: $lilac;
z-index: -1;
}
&:hover::after {
content: '';
position: absolute;
width: 38px;
height: 38px;
left: 1px;
top: 1px;
border-radius: 50%;
background-color: $lilac;
z-index: -1;
}
}
}
.modal-body {
padding: 15px;
.submit {
display: inline-block;
button {
@ -151,19 +150,26 @@ onUnmounted(() => {
button {
padding: 10px 16px;
min-width: 6.25rem;
position: relative;
border-radius: 5px;
}
p {
color: $black;
}
.modal-form {
display: inline;
.form-fields {
display: flex;
flex-direction: column;
margin-bottom: 20px;
label {
margin-bottom: 10px;
color: $black;
}
input {
max-width: 250px;
border: 1px solid $purple;