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

character selection work

Browse Source
This commit is contained in:
Dennis Postma
2024-05-31 23:02:44 +02:00
parent 2db7fc9905
commit 1febe56a50
11 changed files with 302 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/game/Chat.vue
View File

@ -10,6 +10,8 @@
</script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.chat-wrapper {
width: 100%;
height: 100px;
@ -24,8 +26,8 @@
opacity: 0.8;
font-size: 1.2rem;
padding: 0 1.5rem;
background-color: rgba(255, 255, 255, 0.85);
border: 2px solid #fff;
background-color: rgba($white, 0.85);
border: 2px solid $white;
color: black;
}

8
src/components/game/Hud.vue
View File

@ -14,6 +14,8 @@
</script>
<style scoped lang="scss">
@import '@/assets/scss/main';
.hud-wrapper {
position: relative;
.profile {
@ -22,9 +24,9 @@
top: 0;
width: 4rem;
height: 4rem;
background-color: rgba(255, 255, 255, 0.8);
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 2px solid #fff;
border: 2px solid $white;
z-index: 1;
img {
width: 2rem;
@ -46,7 +48,7 @@
// background-color: rgba(127, 127, 127, 0.7);
clip-path: ellipse(3rem 3rem at 0% 0%) invert;
border-radius: 1rem;
border: 2px solid #fff;
border: 2px solid $white;
}
}
</style>

128
src/components/game/Menu.vue
View File

@ -34,71 +34,73 @@
</script>
<style scoped lang="scss">
.menu-wrapper {
.menu {
list-style: none;
display: flex;
gap: 1.25rem;
@import '@/assets/scss/main';
.menu-item {
position: relative;
p {
position: absolute;
bottom: 3.125rem;
width: 4rem;
text-align: center;
background-color: #B1B2B5;
border: 2px solid #fff;
border-radius: 1.5rem;
height: 1.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
left: 50%;
transform: translateX(-50%);
display: none;
.menu-wrapper {
.menu {
list-style: none;
display: flex;
gap: 1.25rem;
&::after {
content: '';
position: absolute;
top: 100%;
background-color: #fff;
height: 0.5rem;
width: 0.875rem;
clip-path: polygon(100% 0, 0 0, 50% 100%);
left: calc(50% - 0.4375rem);
}
}
a {
padding: 0.5rem;
background-color: rgba(127, 127, 127, 0.7);
border: 2px solid #fff;
border-radius: 100%;
display: block;
width: 1.875rem;
height: 1.875rem;
.menu-item {
position: relative;
p {
position: absolute;
bottom: 3.125rem;
width: 4rem;
text-align: center;
background-color: #B1B2B5;
border: 2px solid $white;
border-radius: 1.5rem;
height: 1.5rem;
font-size: 0.875rem;
line-height: 1.5rem;
left: 50%;
transform: translateX(-50%);
display: none;
img {
width: inherit;
height: inherit;
}
}
&::after {
content: '';
position: absolute;
top: 100%;
background-color: $white;
height: 0.5rem;
width: 0.875rem;
clip-path: polygon(100% 0, 0 0, 50% 100%);
left: calc(50% - 0.4375rem);
}
}
&:hover {
p {
display: block;
}
a {
background-image: url('/assets/galaxy.png');
background-position: center;
background-size: cover;
img {
-webkit-filter: drop-shadow(0px 3px 6px #000);
filter: drop-shadow(0px 3px 6px #000);
}
}
}
}
}
}
a {
padding: 0.5rem;
background-color: rgba(127, 127, 127, 0.7);
border: 2px solid $white;
border-radius: 100%;
display: block;
width: 1.875rem;
height: 1.875rem;
img {
width: inherit;
height: inherit;
}
}
&:hover {
p {
display: block;
}
a {
background-image: url('/assets/galaxy.png');
background-position: center;
background-size: cover;
img {
-webkit-filter: drop-shadow(0px 3px 6px $black);
filter: drop-shadow(0px 3px 6px $black);
}
}
}
}
}
}
</style>