Updated styling, little cleaning up
This commit is contained in:
parent
34032e5c2f
commit
d7e4da307a
@ -1 +1 @@
|
||||
<svg width="49" xmlns="http://www.w3.org/2000/svg" height="49" id="screenshot-2eeb1bb6-24d8-8068-8004-52a064185289" viewBox="0 0 49 49" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2eeb1bb6-24d8-8068-8004-52a064185289" height="800px" width="800px" rx="0" ry="0" style="fill: rgb(255, 255, 255);"><g id="shape-2eeb1bb6-24d8-8068-8004-52a06419c052"><g class="fills" id="fills-2eeb1bb6-24d8-8068-8004-52a06419c052"><path d="M24.500,4.594C13.524,4.594,4.594,13.524,4.594,24.500C4.594,35.476,13.524,44.406,24.500,44.406C35.476,44.406,44.406,35.476,44.406,24.500C44.406,13.524,35.476,4.594,24.500,4.594ZZM31.707,29.543C32.111,29.926,32.275,30.498,32.135,31.036C31.996,31.575,31.575,31.996,31.036,32.135C30.498,32.275,29.926,32.111,29.543,31.707L24.500,26.666L19.457,31.707C18.855,32.279,17.907,32.267,17.320,31.680C16.733,31.093,16.721,30.145,17.293,29.543L22.334,24.500L17.293,19.457C16.721,18.855,16.733,17.907,17.320,17.320C17.907,16.733,18.855,16.721,19.457,17.293L24.500,22.334L29.543,17.293C30.145,16.721,31.093,16.733,31.680,17.320C32.267,17.907,32.279,18.855,31.707,19.457L26.666,24.500Z" style="fill: none;"/></g><g id="strokes-2eeb1bb6-24d8-8068-8004-52a06419c052" class="strokes"><g class="outer-stroke-shape"><defs><mask id="outer-stroke-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" x="-2.6488906871192848" y="-2.6488906871192848" width="54.29778137423857" height="54.29778137423857" maskUnits="userSpaceOnUse"><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" style="fill: none; stroke: white; stroke-width: 6;"/><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" style="fill: black; stroke: none;"/></mask><path d="M24.500,4.594C13.524,4.594,4.594,13.524,4.594,24.500C4.594,35.476,13.524,44.406,24.500,44.406C35.476,44.406,44.406,35.476,44.406,24.500C44.406,13.524,35.476,4.594,24.500,4.594ZZM31.707,29.543C32.111,29.926,32.275,30.498,32.135,31.036C31.996,31.575,31.575,31.996,31.036,32.135C30.498,32.275,29.926,32.111,29.543,31.707L24.500,26.666L19.457,31.707C18.855,32.279,17.907,32.267,17.320,31.680C16.733,31.093,16.721,30.145,17.293,29.543L22.334,24.500L17.293,19.457C16.721,18.855,16.733,17.907,17.320,17.320C17.907,16.733,18.855,16.721,19.457,17.293L24.500,22.334L29.543,17.293C30.145,16.721,31.093,16.733,31.680,17.320C32.267,17.907,32.279,18.855,31.707,19.457L26.666,24.500Z" id="stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0"/></defs><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" mask="url(#outer-stroke-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0)" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/><use href="#stroke-shape-render-2-2eeb1bb6-24d8-8068-8004-52a06419c052-0" style="fill: none; stroke-width: 3; stroke: none; stroke-opacity: 1;"/></g></g></g></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="screenshot-7904a66d-0c2c-80b0-8004-7aa8e4dbc6e0" viewBox="5853.755 6642.086 23.788 23.788" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-7904a66d-0c2c-80b0-8004-7aa8e4dbc6e0"><g class="fills" id="fills-7904a66d-0c2c-80b0-8004-7aa8e4dbc6e0"><path d="M5867.837,6654.000L5877.045,6644.792C5877.199,6644.649,5877.322,6644.476,5877.408,6644.284C5877.493,6644.093,5877.539,6643.886,5877.543,6643.676C5877.546,6643.466,5877.508,6643.258,5877.429,6643.063C5877.350,6642.869,5877.234,6642.692,5877.085,6642.544C5876.937,6642.395,5876.760,6642.278,5876.565,6642.200C5876.371,6642.121,5876.163,6642.082,5875.953,6642.086C5875.743,6642.090,5875.536,6642.136,5875.344,6642.221C5875.153,6642.307,5874.980,6642.430,5874.837,6642.583L5865.629,6651.792L5856.420,6642.583C5856.124,6642.307,5855.732,6642.157,5855.328,6642.164C5854.923,6642.171,5854.537,6642.335,5854.250,6642.622C5853.964,6642.908,5853.800,6643.294,5853.793,6643.699C5853.786,6644.104,5853.936,6644.495,5854.212,6644.792L5863.420,6654.000L5854.212,6663.208C5853.919,6663.501,5853.755,6663.898,5853.755,6664.312C5853.755,6664.726,5853.919,6665.124,5854.212,6665.417C5854.505,6665.709,5854.902,6665.874,5855.316,6665.874C5855.730,6665.874,5856.127,6665.709,5856.420,6665.417L5865.629,6656.208L5874.837,6665.417C5875.130,6665.709,5875.527,6665.874,5875.941,6665.874C5876.355,6665.874,5876.753,6665.709,5877.045,6665.417C5877.338,6665.124,5877.502,6664.726,5877.502,6664.312C5877.502,6663.898,5877.338,6663.501,5877.045,6663.208L5867.837,6654.000ZZ" style="fill: rgb(255, 255, 255);"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 1.6 KiB |
@ -1,8 +1,6 @@
|
||||
// Colors
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$purple: #4741e6;
|
||||
$lilac: #7b76ff;
|
||||
$light-blue: #00c2ff;
|
||||
$red: #d50000;
|
||||
$dark-red: #b30000;
|
||||
@ -12,4 +10,5 @@ $dark-gray: #313638;
|
||||
$light-gray: #d3d3d3;
|
||||
$blue-gray: #778899;
|
||||
$cyan: #368f8b;
|
||||
$dark-cyan: #376362;
|
||||
$green: #09ad19;
|
||||
@ -1,11 +1,6 @@
|
||||
@import '@/assets/scss/_variables';
|
||||
|
||||
// Fonts
|
||||
@font-face {
|
||||
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 {
|
||||
@ -20,8 +15,8 @@ body {
|
||||
user-select: none; /* Standard syntax */
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: GentiumPlus, serif;
|
||||
h1, h2, h3, h4, h5, h6, button, a {
|
||||
font-family: "Poppins";
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@ -30,8 +25,6 @@ p, span, li, label {
|
||||
color: $white;
|
||||
}
|
||||
button, a {
|
||||
font-family: "Poppins";
|
||||
color: $white;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 4px 6px rgba($black, 0.25);
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
|
||||
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
|
||||
<template #modal-header>
|
||||
<h2 class="modal-title">Create your character</h2>
|
||||
<h3 class="modal-title">Create your character</h3>
|
||||
</template>
|
||||
|
||||
<template #modal-body>
|
||||
@ -45,10 +45,14 @@
|
||||
<input v-model="name" name="name" id="name" />
|
||||
</div>
|
||||
<div class="submit">
|
||||
<button class="btn-cyan" type="submit">Create</button>
|
||||
<button class="btn-cyan" type="submit">CREATE</button>
|
||||
</div>
|
||||
</form>
|
||||
<button class="btn-cyan" @click="isModalOpen = false">Cancel</button>
|
||||
<button class="btn-cyan" @click="isModalOpen = false">CANCEL</button>
|
||||
</template>
|
||||
|
||||
<template #modal-footer>
|
||||
<button class="btn-cyan">Test</button>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
@ -258,13 +262,13 @@ function create() {
|
||||
gap: 30px;
|
||||
|
||||
button {
|
||||
padding: 8px 10px 8px 20px;
|
||||
padding: 8px 10px 8px 30px;
|
||||
min-width: 100px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
font-size: 1.125rem;
|
||||
font-size: 1.25rem;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
color: '#FFF',
|
||||
fontSize: '1rem',
|
||||
strokeThickness: 4,
|
||||
stroke: 'red'
|
||||
stroke: '#000'
|
||||
}"
|
||||
/>
|
||||
<Sprite ref="sprite" :x="props.character?.position_x" :y="props.character?.position_y" play="walk" />
|
||||
|
||||
@ -8,6 +8,9 @@
|
||||
<div class="modal-body">
|
||||
<slot name="modal-body" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<slot name="modal-footer" />
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
@ -90,30 +93,34 @@ onUnmounted(() => {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 500px;
|
||||
min-width: 350px;
|
||||
min-height: 300px;
|
||||
border-radius: 20px;
|
||||
background-color: rgba($white, 0.8);
|
||||
max-width: 1000px;
|
||||
min-width: 500px;
|
||||
min-height: 280px;
|
||||
background-color: rgba($dark-gray, 0.8);
|
||||
border: 2px solid $dark-cyan;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
|
||||
.modal-header {
|
||||
cursor: move;
|
||||
background-color: rgba($purple, 0.6);
|
||||
padding: 0 20px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
height: 60px;
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $dark-cyan;
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
@ -123,16 +130,9 @@ onUnmounted(() => {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
border-radius: 50%;
|
||||
background-color: $lilac;
|
||||
z-index: -1;
|
||||
&:hover {
|
||||
transform: rotate(180deg);
|
||||
transition: ease-in-out 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -141,6 +141,7 @@ onUnmounted(() => {
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
padding: 15px;
|
||||
flex-grow: 1;
|
||||
|
||||
.submit {
|
||||
display: inline-block;
|
||||
@ -150,13 +151,10 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 16px;
|
||||
padding: 6px 15px;
|
||||
min-width: 100px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $black;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.modal-form {
|
||||
@ -169,18 +167,36 @@ onUnmounted(() => {
|
||||
|
||||
label {
|
||||
margin-bottom: 10px;
|
||||
color: $black;
|
||||
font-family: "Poppins";
|
||||
}
|
||||
|
||||
input {
|
||||
max-width: 250px;
|
||||
border: 1px solid $purple;
|
||||
font-family: "Poppins";
|
||||
border: 1px solid $cyan;
|
||||
border-radius: 5px;
|
||||
background-color: rgba($white, 0.5);
|
||||
padding: 10px;
|
||||
background-color: rgba($white, 0.8);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 0 20px;
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
border-top: 1px solid $dark-cyan;
|
||||
|
||||
button {
|
||||
padding: 6px 15px;
|
||||
min-width: 100px;
|
||||
border-radius: 5px;
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user