devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(game-ui): 버튼 눌림 효과를 공통화

Browse Source 
Lumen 버튼의 테두리와 hover/active 이동을 공통 레이어가 소유하도록 정리하고 색상 변형은 CSS 변수만 설정하게 합니다.\n\n모바일 하단의 외부·국가·빠른 이동·갱신·로비 버튼을 같은 계약에 연결하고 Chromium 회귀 검증을 확장합니다.
This commit is contained in:
Hide_D
2026-08-16 05:50:19 +00:00
parent 99e1f24285
commit 898fa7ac0d
5 changed files with 218 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/assets/styles/legacy-controls.css
+38 -11
View File
@@ -39,18 +39,23 @@
}
/*
* Ref Bootstrap 5.2 + Lumen button family. The modifier describes the legacy
* semantic role; width and placement remain in the owning scoped component.
* Ref Bootstrap 5.2 + Lumen button family. This class owns the common raised
* edge and pressed movement. Semantic modifiers below only select face, edge,
* and text colors; width and fixed-height compensation stay with the owner.
* Existing semantic modifiers also opt in for backward compatibility.
*/
.legacy-button:is(
.legacy-button--lumen,
.legacy-button--primary,
.legacy-button--secondary,
.legacy-button--danger,
.legacy-button--info,
.legacy-button--navigation
.legacy-button--navigation,
.legacy-button--dark
) {
--legacy-button-bg: var(--sammo-button-primary-bg);
--legacy-button-border: var(--sammo-button-primary-border);
--legacy-button-color: #fff;
min-height: 35.5px;
margin-top: 0;
border-color: var(--legacy-button-border);
@@ -59,7 +64,7 @@
border-radius: 5.25px;
padding: 5.25px 10.5px;
background: var(--legacy-button-bg);
color: #fff;
color: var(--legacy-button-color);
line-height: 21px;
/* Ref's framework baseline for these controls. */
vertical-align: middle;
@@ -85,12 +90,19 @@
--legacy-button-border: var(--sammo-button-navigation-border);
}
.legacy-button.legacy-button--dark {
--legacy-button-bg: var(--sammo-button-dark-bg);
--legacy-button-border: var(--sammo-button-dark-border);
}
.legacy-button:is(
.legacy-button--lumen,
.legacy-button--primary,
.legacy-button--secondary,
.legacy-button--danger,
.legacy-button--info,
.legacy-button--navigation
.legacy-button--navigation,
.legacy-button--dark
):not(:disabled, [aria-disabled='true']):hover {
margin-top: 1px;
border-color: var(--legacy-button-border);
@@ -99,11 +111,28 @@
}
.legacy-button:is(
.legacy-button--lumen,
.legacy-button--primary,
.legacy-button--secondary,
.legacy-button--danger,
.legacy-button--info,
.legacy-button--navigation
.legacy-button--navigation,
.legacy-button--dark
):not(:disabled, [aria-disabled='true'])[aria-expanded='true'] {
margin-top: 1px;
border-color: var(--legacy-button-border);
border-bottom-width: 3px;
background: var(--legacy-button-bg);
}
.legacy-button:is(
.legacy-button--lumen,
.legacy-button--primary,
.legacy-button--secondary,
.legacy-button--danger,
.legacy-button--info,
.legacy-button--navigation,
.legacy-button--dark
):not(:disabled, [aria-disabled='true']):active {
margin-top: 2px;
border-color: var(--legacy-button-border);
@@ -112,16 +141,14 @@
box-shadow: none;
}
.legacy-button.legacy-button--primary:not(:disabled):active {
background: #2d4967;
}
.legacy-button:is(
.legacy-button--lumen,
.legacy-button--primary,
.legacy-button--secondary,
.legacy-button--danger,
.legacy-button--info,
.legacy-button--navigation
.legacy-button--navigation,
.legacy-button--dark
):focus {
border-color: var(--legacy-button-border);
background: var(--legacy-button-bg);
app/game-frontend/src/assets/styles/tokens.css
+2
View File
@@ -21,6 +21,8 @@
--sammo-button-info-border: #2f89c5;
--sammo-button-navigation-bg: #00582c;
--sammo-button-navigation-border: #004f28;
--sammo-button-dark-bg: #212529;
--sammo-button-dark-border: #1e2125;
--sammo-texture-walnut: url('https://sam-image.hided.net/game/back_walnut.jpg');
--sammo-texture-green: url('https://sam-image.hided.net/game/back_green.jpg');
--sammo-texture-blue: url('https://sam-image.hided.net/game/back_blue.jpg');
app/game-frontend/src/components/main/MainMobileBottomBar.vue
+30 -79
View File
@@ -54,7 +54,7 @@ const onQuick = (item: QuickNavigationItem) => {
>
<div class="bottom-item">
<button
class="bottom-trigger ref-navigation-button"
class="bottom-trigger legacy-button legacy-button--navigation"
type="button"
data-bottom-menu="global"
:aria-expanded="openId === 'global'"
@@ -121,7 +121,12 @@ const onQuick = (item: QuickNavigationItem) => {
<div class="bottom-item nation-bottom-item">
<button
class="bottom-trigger nation-trigger"
class="bottom-trigger nation-trigger legacy-button legacy-button--lumen"
:style="{
'--legacy-button-bg': nationMenuColor,
'--legacy-button-border': 'color-mix(in srgb, var(--nation-menu-color) 90%, #000)',
'--legacy-button-color': nationMenuTextColor,
}"
type="button"
data-bottom-menu="nation"
:aria-expanded="openId === 'nation'"
@@ -162,7 +167,7 @@ const onQuick = (item: QuickNavigationItem) => {
<div class="bottom-item">
<button
class="bottom-trigger quick-trigger"
class="bottom-trigger quick-trigger legacy-button legacy-button--dark"
type="button"
data-bottom-menu="quick"
:aria-expanded="openId === 'quick'"
@@ -192,7 +197,7 @@ const onQuick = (item: QuickNavigationItem) => {
</template>
<li class="bottom-lobby" role="none">
<button
class="quick-link lobby-link ref-navigation-button"
class="quick-link lobby-link legacy-button legacy-button--navigation"
type="button"
role="menuitem"
@click="emit('lobby')"
@@ -205,7 +210,7 @@ const onQuick = (item: QuickNavigationItem) => {
<div class="bottom-refresh-controls">
<button
class="bottom-trigger auto-refresh-trigger ref-navigation-button"
class="bottom-trigger auto-refresh-trigger legacy-button legacy-button--navigation"
:class="{ active: realtimeEnabled }"
type="button"
data-bottom-menu="auto-refresh"
@@ -216,7 +221,7 @@ const onQuick = (item: QuickNavigationItem) => {
<strong>{{ realtimeEnabled ? 'ON' : 'OFF' }}</strong>
</button>
<button
class="bottom-trigger manual-refresh-trigger"
class="bottom-trigger manual-refresh-trigger legacy-button legacy-button--dark"
type="button"
data-bottom-menu="manual-refresh"
aria-label="직접 갱신"
@@ -267,10 +272,7 @@ const onQuick = (item: QuickNavigationItem) => {
box-sizing: border-box;
width: 125px;
height: 45px;
border: 1px solid #1f1712;
padding: 6px 4px;
background: #302016 var(--sammo-texture-walnut);
color: #fff;
font-family: inherit;
font-size: 16px;
line-height: 1.5;
@@ -278,16 +280,6 @@ const onQuick = (item: QuickNavigationItem) => {
cursor: pointer;
}
.nation-trigger {
border-color: color-mix(in srgb, var(--nation-menu-color) 85%, #000);
background: var(--nation-menu-color);
color: var(--nation-menu-text-color);
}
.quick-trigger {
background: #212529;
}
.auto-refresh-trigger {
display: flex;
flex-direction: column;
@@ -310,7 +302,6 @@ const onQuick = (item: QuickNavigationItem) => {
.manual-refresh-trigger {
padding: 0;
background: #212529;
font-size: 22px;
line-height: 1;
}
@@ -321,51 +312,13 @@ const onQuick = (item: QuickNavigationItem) => {
opacity: 0.55;
}
.bottom-trigger:hover,
.bottom-trigger:focus-visible,
.bottom-trigger[aria-expanded='true'] {
filter: brightness(1.14);
}
.bottom-trigger:active {
filter: brightness(0.82);
}
/*
* Ref's btn-sammo-base2 is a Lumen-style navigation button. Its lower edge
* shortens while the control moves down, so hover and pointer-down visibly
* feel pressed instead of only changing brightness.
*/
.ref-navigation-button {
border-color: var(--sammo-button-navigation-border);
border-style: solid;
border-width: 0 1px 4px;
background: var(--sammo-button-navigation-bg);
color: #fff;
font-weight: 700;
transition:
color 0.15s,
background-color 0.15s,
border-color 0.15s,
box-shadow 0.15s;
}
.bottom-trigger.ref-navigation-button:hover,
.bottom-trigger.ref-navigation-button:focus-visible,
.bottom-trigger.ref-navigation-button[aria-expanded='true'] {
.bottom-trigger.legacy-button:not(:disabled, [aria-disabled='true']):hover,
.bottom-trigger.legacy-button:not(:disabled, [aria-disabled='true'])[aria-expanded='true'] {
height: 44px;
margin-top: 1px;
border-bottom-width: 3px;
background: var(--sammo-button-navigation-bg);
filter: none;
}
.bottom-trigger.ref-navigation-button:active {
.bottom-trigger.legacy-button:not(:disabled, [aria-disabled='true']):active {
height: 43px;
margin-top: 2px;
border-bottom-width: 2px;
background: var(--sammo-button-navigation-bg);
filter: none;
}
.dropup-caret {
@@ -420,11 +373,7 @@ const onQuick = (item: QuickNavigationItem) => {
min-height: 34px;
align-items: center;
justify-content: flex-start;
border: 0;
border-radius: 0;
padding: 5px 16px;
background: transparent;
color: #fff;
font-family: inherit;
font-size: 16px;
line-height: 1.5;
@@ -434,10 +383,17 @@ const onQuick = (item: QuickNavigationItem) => {
cursor: pointer;
}
.quick-link:not(.legacy-button) {
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
}
.bottom-popup :deep(.main-menu-link:hover),
.bottom-popup :deep(.main-menu-link:focus-visible),
.quick-link:hover,
.quick-link:focus-visible {
.quick-link:not(.legacy-button):hover,
.quick-link:not(.legacy-button):focus-visible {
background: #353535;
}
@@ -459,28 +415,23 @@ const onQuick = (item: QuickNavigationItem) => {
.lobby-link {
width: auto;
height: 40px;
min-height: 40px;
justify-content: center;
margin-right: auto;
margin-left: auto;
border-color: var(--sammo-button-navigation-border);
border-style: solid;
border-width: 0 1px 4px;
border-radius: 6px;
padding: 6px 12px;
background: var(--sammo-button-navigation-bg);
}
.lobby-link:hover,
.lobby-link:focus-visible {
margin-top: 1px;
border-bottom-width: 3px;
background: var(--sammo-button-navigation-bg);
.lobby-link:hover {
height: 39px;
min-height: 39px;
}
.lobby-link:active {
margin-top: 2px;
border-bottom-width: 2px;
background: var(--sammo-button-navigation-bg);
height: 38px;
min-height: 38px;
}
@media (max-width: 939.98px) {