You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
2.8 KiB
149 lines
2.8 KiB
@font-face {
|
|
font-family: "Montserrat-Bold";
|
|
src: url("../fonts/Montserrat/Montserrat-Bold.ttf") format("truetype");
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background: linear-gradient(
|
|
20deg,
|
|
#1b223a 0 20%,
|
|
#e84038 20% 40%,
|
|
#f39200 40% 60%,
|
|
#ffd300 60% 80%,
|
|
#1b223a 80% 100%
|
|
);
|
|
}
|
|
|
|
.bubble {
|
|
padding: 20px;
|
|
background-color: white;
|
|
border-radius: 24px;
|
|
box-shadow: 0 0 0px 0px #fbead6;
|
|
}
|
|
|
|
.bubble-header {
|
|
padding: 20px;
|
|
background-color: white;
|
|
border-radius: 24px;
|
|
box-shadow: 0 0 0px 0px #fbead6;
|
|
}
|
|
|
|
.bubble-footer {
|
|
background-color: white;
|
|
display: flex;
|
|
border-radius: 24px;
|
|
box-shadow: 0 0 0px 0px #fbead6;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
margin: 0;
|
|
}
|
|
|
|
.bubble-sponsor {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-broadcast {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0px;
|
|
z-index: 100;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.sponsor-logo-broadcast {
|
|
height: 100px;
|
|
width: 100px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.sponsor-logo-broadcast.screen-size-overlay {
|
|
object-fit: contain;
|
|
height: 80px;
|
|
width: 80px; /* Example height matching QR code */
|
|
}
|
|
|
|
.bold {
|
|
font-family: "Montserrat-Bold";
|
|
}
|
|
|
|
.player {
|
|
position: relative;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 3.2em; /* This ensures minimum height for 2 lines */
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Add this if you want empty lines to take up space */
|
|
.player div {
|
|
min-height: 1.4em; /* Height for single line */
|
|
}
|
|
|
|
/* For single player teams */
|
|
.player.single-player .bold {
|
|
line-height: 1.4em;
|
|
overflow: hidden;
|
|
position: relative;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* For two player teams */
|
|
.player.two-players .bold {
|
|
line-height: 1.4em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-left {
|
|
flex: 1;
|
|
text-align: left;
|
|
justify-content: center;
|
|
min-height: 4em;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.flex-right {
|
|
flex: initial;
|
|
text-align: right;
|
|
justify-content: center;
|
|
}
|
|
|
|
.center {
|
|
align-items: center;
|
|
}
|
|
|
|
.left-content.bubble-header {
|
|
display: flex;
|
|
align-items: top; /* Vertically align items (logo and text) */
|
|
height: 140px; /* Example height matching QR code */
|
|
}
|
|
|
|
.left-content.bubble-header.screen-size-overlay {
|
|
display: flex;
|
|
align-items: top; /* Vertically align items (logo and text) */
|
|
height: 100px; /* Example height matching QR code */
|
|
}
|
|
|
|
.logo {
|
|
height: 100%; /* Make the logo's height match the parent's height */
|
|
width: auto; /* Maintain the logo's aspect ratio */
|
|
}
|
|
|