Add main styles for double members elementsz

This commit is contained in:
Hepatica
2024-04-01 23:57:52 +02:00
parent 22b398ed5e
commit a96636635a
3 changed files with 60 additions and 6 deletions

View File

@@ -18,15 +18,17 @@
} }
.double-members-ingame-red { .double-members-ingame-red {
background: linear-gradient(to bottom, #FF416C, #FF4B2B);
z-index: 1; z-index: 1;
border: 2px solid #3B4260; border: 2px solid #3B4260;
border-radius: 15px; border-radius: 15px;
background: #1C2133; /* background: #1C2133; */
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
margin-top: 1vh; margin-top: 1vh;
margin-top: 1vh; margin-top: 1vh;
width: 100%; width: 100%;
height: 94%; height: 94%;
padding: 2vh;
} }
.double-members-ingame-green { .double-members-ingame-green {
@@ -41,6 +43,53 @@
height: 94%; height: 94%;
} }
.double-members-flex-container {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
/* Assuming the text is white */
}
.double-red-box {
display: flex;
align-items: baseline;
font-size: 18px;
font-family: Montserrat;
font-weight: bold;
color: #B64848;
}
.double-number-color {
color: #56629A;
font-weight: bold;
font-size: 20px;
font-family: Montserrat;
}
.double-red-box span {
font-size: larger;
/* Or any specific size */
margin-left: 5px;
/* Spacing between RED and X2 */
}
.double-user-icon {
display: flex;
align-items: center;
}
.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 { .double-members-ingame-black {
z-index: 1; z-index: 1;
border: 2px solid #3B4260; border: 2px solid #3B4260;

Binary file not shown.

After

Width:  |  Height:  |  Size: 690 B

View File

@@ -113,13 +113,20 @@
</div> </div>
<div class="col-md-4" style="padding-left: 0px"> <div class="col-md-4" style="padding-left: 0px">
<div class="double-members-ingame-red"> <div class="double-members-ingame-red">
<h1>Red X2</h1> <div class="double-members-flex-container">
<div class="double-red-box">
RED X2
</div>
<div class="double-user-icon">
<span class="double-user-icon-span"></span> <span class="double-number-color">6</span>
</div>
</div>
<h1>fds</h1> <h1>fds</h1>
<h1>fds</h1> <h1>fds</h1>
<h1>fds</h1> <h1>fds</h1>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4" style="padding-left: 0px">
<div class="double-members-ingame-green"> <div class="double-members-ingame-green">
<h1>Red X2</h1> <h1>Red X2</h1>
<h1>fds</h1> <h1>fds</h1>
@@ -127,7 +134,7 @@
<h1>fds</h1> <h1>fds</h1>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4" style="padding-left: 0px; padding-right: 0px">
<div class="double-members-ingame-black"> <div class="double-members-ingame-black">
<h1>Red X2</h1> <h1>Red X2</h1>
<h1>fds</h1> <h1>fds</h1>
@@ -135,8 +142,6 @@
<h1>fds</h1> <h1>fds</h1>
</div> </div>
</div> </div>
<!-- </div> -->
</div> </div>
</div> </div>
</div> </div>