mirror of
https://github.com/Pandipipas/scoreko-dev.git
synced 2026-06-06 03:32:06 +00:00
Style scoreboard flags to match Runback look
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user