forked from noxious/client
New styling changes (WIP)
This commit is contained in:
parent
b25a05839e
commit
cf43894654
@ -1,4 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11 16L15 12M15 12L11 8M15 12H3M4.51555 17C6.13007 19.412 8.87958 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C8.87958 3 6.13007 4.58803 4.51555 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 320 B After Width: | Height: | Size: 453 B |
@ -1 +0,0 @@
|
||||
<svg width="170" xmlns="http://www.w3.org/2000/svg" height="40" id="screenshot-2ec5776a-76a9-8039-8004-71e1627cda51" viewBox="0 0 170 40" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71e1627cda51"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71e1627cda51"><path d="M170.000,23.599L170.000,40.000L0.000,40.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" style="fill: rgb(71, 65, 230); fill-opacity: 0.6;"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 640 B |
1
public/assets/shapes/character-select-shape-2.svg
Normal file
1
public/assets/shapes/character-select-shape-2.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="170" xmlns="http://www.w3.org/2000/svg" height="275" id="screenshot-c7008730-586b-8052-8004-79a2f5807f5c" viewBox="0 0 170 275" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-c7008730-586b-8052-8004-79a2f5807f5c"><defs><linearGradient id="fill-color-gradient-render-1-0" x1="0.4238862507773219" y1="0.26897966364321624" x2="0.7513711107948178" y2="0.9146156628521559" gradientTransform=""><stop offset="0" stop-color="#ffffff" stop-opacity="0.4"/><stop offset="1" stop-color="#ffffff" stop-opacity="0"/></linearGradient><pattern patternUnits="userSpaceOnUse" x="0" y="0" width="170" height="275" patternTransform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" id="fill-0-render-1"><g><rect width="170" height="275" style="fill: url("#fill-color-gradient-render-1-0");"/></g></pattern></defs><g class="fills" id="fills-c7008730-586b-8052-8004-79a2f5807f5c"><path d="M170.000,20.000L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L150.000,0.000C150.000,0.000,150.000,0.000,150.000,0.000C150.000,11.038,158.962,20.000,170.000,20.000Z" fill="url(#fill-0-render-1)"/></g><g id="strokes-c7008730-586b-8052-8004-79a2f5807f5c" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-c7008730-586b-8052-8004-79a2f5807f5c-0"><use href="#stroke-shape-render-1-c7008730-586b-8052-8004-79a2f5807f5c-0"/></clipPath><path d="M170.000,20.000L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L150.000,0.000C150.000,0.000,150.000,0.000,150.000,0.000C150.000,11.038,158.962,20.000,170.000,20.000Z" id="stroke-shape-render-1-c7008730-586b-8052-8004-79a2f5807f5c-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-c7008730-586b-8052-8004-79a2f5807f5c-0" clip-path="url('#inner-stroke-render-1-c7008730-586b-8052-8004-79a2f5807f5c-0')"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -1 +0,0 @@
|
||||
<svg width="170" xmlns="http://www.w3.org/2000/svg" height="275" id="screenshot-2ec5776a-76a9-8039-8004-71e29b2b325b" viewBox="0 0 170 275" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71e29b2b325b"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71e29b2b325b"><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" style="fill: rgb(177, 178, 181); fill-opacity: 0.8;"/></g><g id="strokes-2ec5776a-76a9-8039-8004-71e29b2b325b" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0"><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0"/></clipPath><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" id="stroke-shape-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0" style="fill: none; stroke-width: 4; stroke: rgb(177, 178, 181); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0" clip-path="url('#inner-stroke-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0')"/></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@ -1 +0,0 @@
|
||||
<svg width="170" xmlns="http://www.w3.org/2000/svg" height="275" id="screenshot-2ec5776a-76a9-8039-8004-71df57dfd568" viewBox="0 0 170 275" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71df57dfd568"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71df57dfd568"><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" style="fill: rgb(255, 255, 255); fill-opacity: 0.8;"/></g><g id="strokes-2ec5776a-76a9-8039-8004-71df57dfd568" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0"><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0"/></clipPath><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" id="stroke-shape-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0" clip-path="url('#inner-stroke-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0')"/></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
1
public/assets/shapes/select-screen-bg-shape.svg
Normal file
1
public/assets/shapes/select-screen-bg-shape.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="1508.086" xmlns="http://www.w3.org/2000/svg" height="1511.251" id="screenshot-0d120e2a-8725-8061-8004-79728483f7ea" viewBox="-201.784 -208.012 1508.086 1511.251" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-0d120e2a-8725-8061-8004-79728483f7ea" width="800px" height="800px" rx="0" ry="0" style="opacity: 0.3; fill: rgb(0, 0, 0);"><g id="shape-0d120e2a-8725-8061-8004-79728484b3fe"><g class="fills" id="fills-0d120e2a-8725-8061-8004-79728484b3fe"><path d="M1190.359,745.690L1043.367,575.945L1133.504,630.603C1099.180,585.722,1047.978,532.622,975.722,469.519L780.783,401.898L896.468,404.538C851.234,371.382,797.068,339.090,738.130,311.073L601.350,337.338L689.349,289.039C627.425,263.088,562.143,241.922,497.713,229.160C430.172,215.674,363.453,211.534,303.512,221.641L314.753,151.382C271.664,177.012,239.130,209.992,214.226,251.017L204.390,177.710C166.181,212.950,148.095,250.172,143.131,301.343C69.092,307.974,-2.300,327.925,-73.861,347.005L-63.628,384.898C361.675,238.903,753.109,407.667,987.467,615.054L960.305,643.506C749.259,458.743,490.332,358.712,193.406,380.541C209.110,415.226,228.858,447.126,251.288,474.785L371.998,430.671L277.417,504.449C294.635,521.771,312.591,536.670,331.111,548.765L396.081,470.998L358.366,564.253C377.625,573.924,397.183,580.217,416.674,582.837C534.164,599.232,652.310,618.566,782.785,703.535L773.618,601.955L831.163,737.792C852.261,754.489,876.370,771.191,897.168,782.701L861.169,684.190L960.409,811.519C976.589,817.512,992.991,822.477,1008.953,826.486C1066.083,840.287,1120.015,842.594,1157.256,819.002C1175.975,807.393,1189.205,786.963,1190.791,762.853C1191.080,756.933,1190.907,750.762,1190.359,745.690ZZ" style="fill: rgb(54, 143, 139);"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user