Pandipipas/scoreko-dev
1
0
Fork 0
mirror of https://github.com/Pandipipas/scoreko-dev.git synced 2026-06-06 03:32:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style scoreboard flags to match Runback look

Browse Source
This commit is contained in:
Pandipipas
2026-02-12 00:45:39 +01:00
parent 7e94297244
commit 79a690bbca
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/graphics/scoreboard/main.vue
+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) var(--name-panel-height) * 0.5 - (var(--name-text-height) * 0.5)
); );
--flag-width: 38px; --flag-height: 50px;
--flag-height: 26px; --flag-width: 120px;
--flag-offset-x: 16px; --flag-offset-x: calc(var(--flag-width) * (0.25 + 0.01));
--flag-offset-y: 12px;
--games-text-width: calc(var(--main-panel-width) * 0.11); --games-text-width: calc(var(--main-panel-width) * 0.11);
--games-text-height: calc(var(--main-panel-height) * 0.8); --games-text-height: calc(var(--main-panel-height) * 0.8);
@@ -301,11 +300,15 @@ img {
#p1-name-wrapper { #p1-name-wrapper {
left: var(--name-panel-offset); left: var(--name-panel-offset);
padding-left: var(--flag-width);
margin-left: calc(var(--flag-width) * -1);
text-align: left; text-align: left;
} }
#p2-name-wrapper { #p2-name-wrapper {
right: var(--name-panel-offset); right: var(--name-panel-offset);
padding-right: var(--flag-width);
margin-right: calc(var(--flag-width) * -1);
text-align: right; text-align: right;
} }
@@ -358,25 +361,25 @@ img {
.flag-wrapper { .flag-wrapper {
position: absolute; position: absolute;
top: var(--flag-offset-y); top: 0;
height: var(--flag-height); height: var(--flag-height);
width: var(--flag-width); width: var(--flag-width);
z-index: 1; z-index: -3;
} }
#p1-flag-wrapper { #p1-flag-wrapper {
left: var(--flag-offset-x); left: var(--flag-offset-x);
clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
} }
#p2-flag-wrapper { #p2-flag-wrapper {
right: var(--flag-offset-x); right: var(--flag-offset-x);
clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
} }
.flag-mask { .flag-mask {
width: 100%; width: 100%;
height: 100%; height: var(--flag-height);
border-radius: 4px;
overflow: hidden;
} }
.flag { .flag {