yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 12:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

added style for main card, gamemode section

Browse Source
This commit is contained in:
Kostya
2023-11-15 22:24:06 +03:00
parent a1c39b7e22
commit 8c312293cb
2 changed files with 40 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
luckydiamond/src/assets/icons-gamemode/players-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

40
luckydiamond/src/pages/HomePage.vue
View File

@@ -35,6 +35,12 @@
<div class="line__content" style="margin: 16px 38px 0px 0px" :id="'maincard-' + mode.id">
<h1>{{ mode.title }}</h1>
<img src="../assets/icons-gamemode/diamond-icon-main.png">
<div class="line__players--main">
<h4><span><img src="../assets/icons-gamemode/players-icon.png"></span>{{ mode.players }} player</h4>
</div>
<div class="line__btn--main">
<a href="#">play ></a>
</div>
</div>
</li>
</ul>
@@ -226,6 +232,9 @@ export default {
text-align: center;
padding-top: 5px;
}
.gamemode__main .line__content img {
user-select: none;
}
.gamemode__main .line__content h1 {
text-shadow: 6px 12px 9px rgba(0, 0, 0, 0.25);
font-family: 'Press Start 2P';
@@ -233,4 +242,35 @@ export default {
color: #FFB400;
text-transform: uppercase;
}
.gamemode__main .line__players--main {
position: relative;
}
.gamemode__main .line__players--main h4 {
margin-top: -50px;
display: flex;
align-items: center;
text-align: center;
font-family: Montserrat;
color: #FFB400;
font-weight: 700;
font-size: 20px;
text-shadow: 1px 5px 6px rgba(0, 0, 0, 0.25);
}
.gamemode__main .line__btn--main {
padding: 20px 0px 20px 0px;
}
.gamemode__main .line__btn--main a {
font-size: 36px;
color: #000;
font-family: Montserrat;
font-weight: 700;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
padding: 21px 21px;
border-radius: 21px;
background: #FFB400;
box-shadow: 0px 4px 40px 1px #FFB400;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
</style>