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

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;
}
}