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

Add styles for displaying red green black labels on display active member in game

Browse Source
This commit is contained in:
Hepatica
2024-04-02 00:36:22 +02:00
parent a96636635a
commit 41734a0e9a
2 changed files with 75 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
View File

@@ -18,11 +18,40 @@
}
.double-members-ingame-red {
background: linear-gradient(to bottom, #FF416C, #FF4B2B);
background: linear-gradient(to bottom right,
#A9373C,
#1C2133 20%);
z-index: 1;
border: 2px solid #3B4260;
border-radius: 15px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
margin-top: 1vh;
width: 100%;
height: 94%;
padding: 2vh;
}
.double-members-ingame-green {
background: linear-gradient(to bottom right,
#345D3B,
#1C2133 20%);
z-index: 1;
border: 2px solid #3B4260;
border-radius: 15px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
margin-top: 1vh;
width: 100%;
height: 94%;
padding: 2vh;
}
.double-members-ingame-black {
background: linear-gradient(to bottom right,
#1B1A1A,
#1C2133 26%);
z-index: 1;
border: 2px solid #3B4260;
border-radius: 15px;
/* background: #1C2133; */
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
margin-top: 1vh;
margin-top: 1vh;
@@ -31,24 +60,12 @@
padding: 2vh;
}
.double-members-ingame-green {
z-index: 1;
border: 2px solid #3B4260;
border-radius: 15px;
background: #1C2133;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
margin-top: 1vh;
margin-top: 1vh;
width: 100%;
height: 94%;
}
.double-members-flex-container {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
/* Assuming the text is white */
margin-bottom: 2vh;
}
.double-red-box {
@@ -60,10 +77,28 @@
color: #B64848;
}
.double-white-box {
display: flex;
align-items: baseline;
font-size: 18px;
font-family: Montserrat;
font-weight: bold;
color: FEEBEB;
}
.double-green-box {
display: flex;
align-items: baseline;
font-size: 18px;
font-family: Montserrat;
font-weight: bold;
color: #5EA25C;
}
.double-number-color {
color: #56629A;
font-weight: bold;
font-size: 20px;
font-size: 18px;
font-family: Montserrat;
}
@@ -82,24 +117,8 @@
.double-user-icon .double-user-icon-span {
background-image: url('../../../icons-games/double-game/MembersInGame.png');
width: 20px;
/* Replace with actual size of your icon */
height: 20px;
/* Replace with actual size of your icon */
margin-right: 5px;
/* Spacing between icon and number 6 */
}
.double-members-ingame-black {
z-index: 1;
border: 2px solid #3B4260;
border-radius: 15px;
background: #1C2133;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
margin-top: 1vh;
margin-top: 1vh;
width: 100%;
height: 94%;
}
.double-game {

27
luckydiamond/src/pages/games-pages/DoublePage.vue
View File

@@ -118,17 +118,31 @@
RED X2
</div>
<div class="double-user-icon">
<span class="double-user-icon-span"></span> <span class="double-number-color">6</span>
<span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
</div>
</div>
<h1>fds</h1>
<h1>fds</h1>
<h1>fds</h1>
<h1>fds</h1>
<h1>fds</h1>
<h1>fds</h1>
<h1>fds</h1>
<h1>fds</h1>
<h1>fds</h1>
<h1>fds</h1>
</div>
</div>
<div class="col-md-4" style="padding-left: 0px">
<div class="double-members-ingame-green">
<h1>Red X2</h1>
<div class="double-members-flex-container">
<div class="double-green-box">
GREEN X20
</div>
<div class="double-user-icon">
<span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
</div>
</div>
<h1>fds</h1>
<h1>fds</h1>
<h1>fds</h1>
@@ -136,7 +150,14 @@
</div>
<div class="col-md-4" style="padding-left: 0px; padding-right: 0px">
<div class="double-members-ingame-black">
<h1>Red X2</h1>
<div class="double-members-flex-container">
<div class="double-white-box">
BLACK X2
</div>
<div class="double-user-icon">
<span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
</div>
</div>
<h1>fds</h1>
<h1>fds</h1>
<h1>fds</h1>