55 lines
1.9 KiB
HTML
55 lines
1.9 KiB
HTML
<style>
|
|
.player-announcement--fullscreen {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
color: {{FOREGROUND}};
|
|
background: {{ACCENT}};
|
|
--announcement-canvas-min: min(var(--player-canvas-width, 100vw), var(--player-canvas-height, 100vh));
|
|
}
|
|
|
|
.player-announcement--fullscreen .player-announcement__body {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: clamp(36px, calc(var(--announcement-canvas-min) * 0.06), 96px);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.player-announcement--fullscreen .player-announcement__stack {
|
|
display: grid;
|
|
justify-items: center;
|
|
align-content: center;
|
|
gap: clamp(12px, calc(var(--announcement-canvas-min) * 0.015), 24px);
|
|
text-align: center;
|
|
}
|
|
|
|
.player-announcement--fullscreen .player-announcement__icon {
|
|
width: clamp(6rem, calc(var(--announcement-canvas-min) * 0.16), 12rem);
|
|
height: clamp(6rem, calc(var(--announcement-canvas-min) * 0.16), 12rem);
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: clamp(4rem, calc(var(--announcement-canvas-min) * 0.16), 10rem);
|
|
justify-content: center;
|
|
}
|
|
|
|
.player-announcement--fullscreen .player-announcement__message {
|
|
width: min(100%, calc(var(--announcement-canvas-min) * 1.35));
|
|
text-align: center;
|
|
font-size: clamp(2rem, calc(var(--announcement-canvas-min) * 0.065), 8rem);
|
|
font-weight: 900;
|
|
line-height: 1.08;
|
|
}
|
|
</style>
|
|
<section class="player-announcement player-announcement--fullscreen player-announcement--color-{{COLOR_KEY}} shadow-lg" style="--announcement-accent: {{ACCENT}}; --announcement-foreground: {{FOREGROUND}}; --announcement-glow: {{GLOW}};">
|
|
<div class="player-announcement__body">
|
|
<div class="player-announcement__stack">
|
|
<div class="player-announcement__icon player-announcement__icon--fullscreen" aria-hidden="true"><i class="bi bi-{{ICON}}"></i></div>
|
|
<div class="player-announcement__message">{{MESSAGE}}</div>
|
|
</div>
|
|
</div>
|
|
</section> |