diff --git a/public/assets/icons/arrow.svg b/public/assets/icons/arrow.svg
index 7a7ff9a..b1e7127 100644
--- a/public/assets/icons/arrow.svg
+++ b/public/assets/icons/arrow.svg
@@ -1,4 +1,4 @@
\ No newline at end of file
diff --git a/public/assets/shapes/character-select-header-shape.svg b/public/assets/shapes/character-select-header-shape.svg
deleted file mode 100644
index d3f4f65..0000000
--- a/public/assets/shapes/character-select-header-shape.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/assets/shapes/character-select-shape-2.svg b/public/assets/shapes/character-select-shape-2.svg
new file mode 100644
index 0000000..85b6f01
--- /dev/null
+++ b/public/assets/shapes/character-select-shape-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/assets/shapes/character-select-shape-unselected.svg b/public/assets/shapes/character-select-shape-unselected.svg
deleted file mode 100644
index f288adc..0000000
--- a/public/assets/shapes/character-select-shape-unselected.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/assets/shapes/character-select-shape.svg b/public/assets/shapes/character-select-shape.svg
deleted file mode 100644
index df67d53..0000000
--- a/public/assets/shapes/character-select-shape.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/assets/shapes/select-screen-bg-shape.svg b/public/assets/shapes/select-screen-bg-shape.svg
new file mode 100644
index 0000000..ffe951f
--- /dev/null
+++ b/public/assets/shapes/select-screen-bg-shape.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 27b18ae..f6449d0 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -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;
\ No newline at end of file
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index fd1c9c4..b902a1e 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -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;
}
}
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index ec1a23c..fa75dc1 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -25,8 +25,8 @@
@@ -45,10 +45,10 @@
-
+
-
+
@@ -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;
}
}
diff --git a/src/components/screens/Login.vue b/src/components/screens/Login.vue
index 64c86d3..3c26d35 100644
--- a/src/components/screens/Login.vue
+++ b/src/components/screens/Login.vue
@@ -14,9 +14,9 @@
-
-
-
+
+
+