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 display in one row for twolines elements

Browse Source
This commit is contained in:
Kostya
2023-11-23 20:06:42 +03:00
parent 58f9533a55
commit e0fa6e615e
2 changed files with 45 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
luckydiamond/src/assets/css/PagesStyles/home.css
View File

@@ -156,7 +156,15 @@
font-size: 38px; font-size: 38px;
} }
.gamemode__lines {
display: flex;
flex-direction: column;
}
.gamemode__twolines {
display: flex;
align-items: flex-start;
}
.gamemode__firstline { .gamemode__firstline {
background: #EF4444; background: #EF4444;
@@ -213,7 +221,7 @@
background: #EF4444; background: #EF4444;
filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25)); filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 40px; border-radius: 40px;
width: 60%; width: 55%;
height: 50%; height: 50%;
margin: 18px 36px 0 35px; margin: 18px 36px 0 35px;
} }
@@ -226,7 +234,7 @@
} }
.gamemode__twoline--first__element .linecontent-3 h3 { .gamemode__twoline--first__element .linecontent-3 h3 {
padding-left: 15%; padding-left: 5%;
text-align: center; text-align: center;
color: #fff; color: #fff;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
@@ -247,4 +255,10 @@
padding: 20px 20px; padding: 20px 20px;
} }
.gamemode__twoline--two__element {
border-radius: 40px;
background: #EF4444;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
/* /GameMode */ /* /GameMode */

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

@@ -58,29 +58,35 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="gamemode__twoline--first__element"> <div class="gamemode__twolines">
<ul> <div class="gamemode__twoline--first__element">
<li <ul>
v-for="mode in twolinefirstelementGameMode" <li
:key="mode" v-for="mode in twolinefirstelementGameMode"
> :key="mode"
<div :class="'linecontent-' + mode.id"> >
<h3>{{ mode.title }}</h3> <div :class="'linecontent-' + mode.id">
</div> <h3>{{ mode.title }}</h3>
<div class="container"> </div>
<a href="#" class="line__btn">play <span class="line__btn--elm ">></span></a> <div class="container">
<img src="@/assets/icons-gamemodes/slots-icon.png"> <a href="#" class="line__btn">play <span class="line__btn--elm ">></span></a>
</div> <img src="@/assets/icons-gamemodes/slots-icon.png">
</li> </div>
</ul> </li>
</div> </ul>
<div class="gamemode__twoline--two__element"> </div>
<ul> <div class="gamemode__twoline--two__element">
<li <ul>
v-for="mode in two" <li
> v-for="mode in twolinetwoelementGameMode"
</li> :key="mode.id"
</ul> >
<div :class="'linecontent' + mode.id">
<h3>{{ mode.title }}</h3>
</div>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>