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

New styling changes (WIP)

Browse Source
This commit is contained in:
Colin Kallemein
2024-06-09 00:36:58 +02:00
parent b25a05839e
commit cf43894654
10 changed files with 72 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/scss/_variables.scss
View File

@ -8,6 +8,8 @@ $red: #d50000;
$dark-red: #b30000;
$gray: #7f7f7f;
$gray-2: #696969;
$dark-gray: #454545;
$light-gray: #b1b2b5;
$dark-gray: #313638;
$light-gray: #d3d3d3;
$blue-gray: #778899;
$cyan: #368f8b;
$green: #09ad19;

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

@ -5,6 +5,8 @@
font-family: GentiumPlus;
src: url('@/assets/fonts/Gentium_plus.ttf');
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
-ms-overflow-style: none;
@ -23,10 +25,16 @@ h1, h2, h3, h4, h5, h6 {
color: $white;
}
p, span, li, a, button, label {
font-family: Helvetica, Arial, sans-serif;
p, span, li, label {
font-family: "Inter";
color: $white;
}
button, a {
font-family: "Poppins";
color: $white;
font-weight: 500;
text-shadow: 0 4px 6px rgba($black, 0.25);
}
button, input {
border: none;
@ -36,12 +44,12 @@ button, input {
button {
text-align: center;
&.btn-purple {
background-color: rgba($purple, 0.75);
border: 1px solid rgba($white, 0.35);
&.btn-cyan {
background-color: rgba($cyan, 0.5);
border: 2px solid rgba($white, 0.9);
&:hover {
background-color: rgba($lilac, 0.75);
background-color: $cyan;
}
}

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

@ -25,8 +25,8 @@
</div>
<div class="button-wrapper">
<button class="btn-purple" :disabled="!selected_character" @click="select_character()">
Play
<button class="btn-cyan" :disabled="!selected_character" @click="select_character()">
PLAY
<img draggable="false" src="/assets/icons/arrow.svg">
</button>
</div>
@ -45,10 +45,10 @@
<input v-model="name" name="name" id="name" />
</div>
<div class="submit">
<button class="btn-purple" type="submit">Create</button>
<button class="btn-cyan" type="submit">Create</button>
</div>
</form>
<button class="btn-purple" @click="isModalOpen = false">Cancel</button>
<button class="btn-cyan" @click="isModalOpen = false">Cancel</button>
</template>
</Modal>
</template>
@ -98,7 +98,18 @@ function create() {
@import '@/assets/scss/main';
.character-select-screen {
background: #dddddd;
&::before {
content: '';
position: absolute;
background-image: url('/assets/shapes/select-screen-bg-shape.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% cover;
width: 100%;
height: 100%;
}
background-color: $dark-gray;
position: relative;
.ui-wrapper {
height: 100vh;
@ -122,7 +133,7 @@ function create() {
overflow: auto;
.character {
margin: 10px;
margin: 15px;
width: 170px;
height: 275px;
display: flex;
@ -130,10 +141,25 @@ function create() {
border-radius: 20px;
position: relative;
background-repeat: no-repeat;
background-image: url('/assets/shapes/character-select-shape-unselected.svg');
background-image: url('/assets/shapes/character-select-shape-2.svg');
box-shadow: 0 4px 30px rgba($black, 0.1);
&.active {
background-image: url('/assets/shapes/character-select-shape.svg');
&::after {
content: '';
position: absolute;
max-width: 0;
width: 65%;
height: 3px;
background-color: $white;
border-radius: 3px;
left: 50%;
bottom: -15px;
transform: translateX(-50%);
transition: ease-in-out max-width 0.3s;
}
&.active::after {
max-width: 170px;
}
&.new-character {
@ -161,32 +187,6 @@ function create() {
font-size: 1rem;
}
}
&::before,
&::after {
display: none;
}
}
&::before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 40px;
background-image: url('/assets/shapes/character-select-header-shape.svg');
background-repeat: no-repeat;
border-radius: 20px 20px 0 0;
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
background-color: rgba($purple, 0.6);
border-radius: 0 0 20px 20px;
}
input[type='radio'] {
@ -208,19 +208,21 @@ function create() {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-shadow: 1px 1px 5px rgba($black, 0.25);
}
button.delete {
background-color: $red;
width: 30px;
height: 30px;
padding: 5px;
padding: 3px;
border-radius: 100%;
position: absolute;
right: -10px;
top: 5px;
right: -15px;
top: 0;
transform: translateY(-50%);
z-index: 1;
border: 2px solid $white;
&:hover {
background-color: $dark-red;
@ -234,6 +236,7 @@ function create() {
text-align: center;
transform: translateY(50%);
z-index: 1;
text-shadow: 1px 1px 5px rgba($black, 0.25);
}
.sprite-container {
@ -241,6 +244,10 @@ function create() {
flex-direction: column;
align-items: center;
margin: auto;
img {
filter: drop-shadow(0 3px 6px rgba($black, 0.25));
}
}
}
}
@ -264,12 +271,12 @@ function create() {
}
img {
height: 35px;
opacity: 0.3;
height: 30px;
filter: drop-shadow(0 4px 6px rgba($black, 0.25));
}
&:disabled {
background-color: rgba($purple, 0.5);
background-color: rgba($cyan, 0.5);
cursor: not-allowed;
}
}

6
src/components/screens/Login.vue
View File

@ -14,9 +14,9 @@
</div>
</div>
<div class="row-buttons">
<button class="button btn-purple" type="submit"><span>LOGIN</span></button>
<button class="button btn-purple" type="button" @click.prevent="registerFunc"><span>REGISTER</span></button>
<button class="button btn-purple"><span>CREDITS</span></button>
<button class="button btn-cyan" type="submit"><span>LOGIN</span></button>
<button class="button btn-cyan" type="button" @click.prevent="registerFunc"><span>REGISTER</span></button>
<button class="button btn-cyan"><span>CREDITS</span></button>
</div>
</div>
</form>