fix(game-ui): 분할 버튼 이음새를 하나로 연결

공용 split primitive가 내부 모서리와 구분선을 소유하게 해 Lumen 규칙의 cascade 덮어쓰기를 막습니다. 공통·국가 메뉴의 desktop/mobile 및 상호작용 상태를 Chromium 회귀로 고정합니다.
This commit is contained in:
2026-08-17 15:35:50 +00:00
parent 50e7d894e4
commit 6bc35f78f1
4 changed files with 136 additions and 16 deletions
@@ -153,3 +153,18 @@
border-color: var(--legacy-button-border);
background: var(--legacy-button-bg);
}
/*
* Split controls share one outer silhouette. Keep the main control's right
* border as the subtle divider while removing every inner corner and the
* toggle's overlapping left border. These rules intentionally follow the
* Lumen family so its border shorthand cannot restore the inner rounding.
*/
.legacy-split-button > .main-menu-link {
border-radius: 5.25px 0 0 5.25px;
}
.legacy-split-button > .legacy-split-button__toggle {
border-left-width: 0;
border-radius: 0 5.25px 5.25px 0;
}
@@ -59,7 +59,7 @@ const isActive = (link: MainNavigationLinkItem) => link.id === 'survey' && props
</template>
</ul>
</div>
<div v-else class="main-menu-split">
<div v-else class="main-menu-split legacy-split-button">
<MainNavigationLink
:link="entry.main"
:enabled="isNavigationConfigured(entry.main)"
@@ -67,7 +67,7 @@ const isActive = (link: MainNavigationLinkItem) => link.id === 'survey' && props
lumen-variant="navigation"
/>
<button
class="main-menu-button main-menu-split__toggle legacy-button legacy-button--navigation"
class="main-menu-button main-menu-split__toggle legacy-split-button__toggle legacy-button legacy-button--navigation"
type="button"
:data-menu-id="entry.id"
:aria-label="`${entry.main.label} 하위 메뉴`"
@@ -131,12 +131,6 @@ const isActive = (link: MainNavigationLinkItem) => link.id === 'survey' && props
min-width: 28px;
width: 28px;
padding: 0;
border-left-width: 0;
border-radius: 0 5.25px 5.25px 0;
}
.main-menu-split > :deep(.main-menu-link) {
border-radius: 5.25px 0 0 5.25px;
}
.menu-caret {
@@ -35,7 +35,7 @@ const isActive = (link: MainNavigationLinkItem) => link.highlightStage === props
:active="isActive(entry)"
lumen-variant="lumen"
/>
<div v-else-if="entry.kind === 'split'" class="nation-menu-split">
<div v-else-if="entry.kind === 'split'" class="nation-menu-split legacy-split-button">
<MainNavigationLink
:link="entry.main"
:enabled="isNationNavigationEnabled(entry.main, access)"
@@ -43,7 +43,7 @@ const isActive = (link: MainNavigationLinkItem) => link.highlightStage === props
lumen-variant="lumen"
/>
<button
class="main-menu-button nation-menu-split__toggle legacy-button legacy-button--lumen"
class="main-menu-button nation-menu-split__toggle legacy-split-button__toggle legacy-button legacy-button--lumen"
type="button"
:data-menu-id="entry.id"
:aria-label="`${entry.main.label} 하위 메뉴`"
@@ -108,12 +108,6 @@ const isActive = (link: MainNavigationLinkItem) => link.highlightStage === props
min-width: 28px;
width: 28px;
padding: 0;
border-left-width: 0;
border-radius: 0 5.25px 5.25px 0;
}
.nation-menu-split > :deep(.main-menu-link) {
border-radius: 5.25px 0 0 5.25px;
}
.menu-caret {