Style scoreboard flags to match Runback look

This commit is contained in:
Pandipipas
2026-02-12 00:45:39 +01:00
parent 7e94297244
commit 79a690bbca
+12 -9
View File
@@ -220,10 +220,9 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
var(--name-panel-height) * 0.5 - (var(--name-text-height) * 0.5)
);
--flag-width: 38px;
--flag-height: 26px;
--flag-offset-x: 16px;
--flag-offset-y: 12px;
--flag-height: 50px;
--flag-width: 120px;
--flag-offset-x: calc(var(--flag-width) * (0.25 + 0.01));
--games-text-width: calc(var(--main-panel-width) * 0.11);
--games-text-height: calc(var(--main-panel-height) * 0.8);
@@ -301,11 +300,15 @@ img {
#p1-name-wrapper {
left: var(--name-panel-offset);
padding-left: var(--flag-width);
margin-left: calc(var(--flag-width) * -1);
text-align: left;
}
#p2-name-wrapper {
right: var(--name-panel-offset);
padding-right: var(--flag-width);
margin-right: calc(var(--flag-width) * -1);
text-align: right;
}
@@ -358,25 +361,25 @@ img {
.flag-wrapper {
position: absolute;
top: var(--flag-offset-y);
top: 0;
height: var(--flag-height);
width: var(--flag-width);
z-index: 1;
z-index: -3;
}
#p1-flag-wrapper {
left: var(--flag-offset-x);
clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
}
#p2-flag-wrapper {
right: var(--flag-offset-x);
clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}
.flag-mask {
width: 100%;
height: 100%;
border-radius: 4px;
overflow: hidden;
height: var(--flag-height);
}
.flag {