From aa912a2eed5995046f7b1f4b9d0db072775a142b Mon Sep 17 00:00:00 2001 From: hided62 Date: Fri, 21 Aug 2026 16:31:42 +0000 Subject: [PATCH 1/3] =?UTF-8?q?fix(game-ui):=20=EA=B3=B5=ED=86=B5=20Lumen?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EB=AA=A8=EC=96=91=EC=9D=84=20=ED=86=B5?= =?UTF-8?q?=EC=9D=BC=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 상하단 이동·갱신 제어와 장수 목록, 토너먼트, 명령 선택을 공통 semantic button family로 연결한다. 고정 행은 공통 fixed-height 변형이 hover와 active 높이를 보정하게 하고 실제 Chromium geometry 회귀를 추가한다. --- app/game-frontend/e2e/mainNavigation.spec.ts | 38 +++++- .../e2e/nationGeneralSecret.spec.ts | 105 ++++++++++++++-- .../e2e/tournamentBracket.spec.ts | 11 +- .../src/assets/styles/legacy-controls.css | 19 ++- .../command/ReservedCommandEditor.vue | 20 ++- .../components/main/MainMobileBottomBar.vue | 21 +--- .../tournament/TournamentPageHeader.vue | 28 ++--- app/game-frontend/src/views/AuctionView.vue | 93 +++++--------- .../src/views/BattleCenterView.vue | 27 ++-- app/game-frontend/src/views/BettingView.vue | 39 +++--- app/game-frontend/src/views/BoardView.vue | 73 +++-------- .../src/views/ChiefCenterView.vue | 28 +++-- .../src/views/GlobalInfoView.vue | 25 ++-- app/game-frontend/src/views/InheritView.vue | 9 +- .../src/views/NationBettingView.vue | 40 ++---- .../src/views/NationGeneralsView.vue | 48 ++++--- .../src/views/NationStratFinanView.vue | 99 +++++++-------- .../src/views/NpcControlView.vue | 14 +-- app/game-frontend/src/views/SurveyView.vue | 11 +- .../src/views/TournamentView.vue | 27 ++-- app/game-frontend/src/views/TroopView.vue | 7 +- app/game-frontend/src/views/YearbookView.vue | 27 ++-- .../test/legacyButtonFamily.test.ts | 71 +++++++++++ docs/frontend-css-architecture.md | 7 +- .../tournament-betting.spec.ts | 118 +++++++++++++++++- 25 files changed, 628 insertions(+), 377 deletions(-) create mode 100644 app/game-frontend/test/legacyButtonFamily.test.ts diff --git a/app/game-frontend/e2e/mainNavigation.spec.ts b/app/game-frontend/e2e/mainNavigation.spec.ts index 2f5f31ea..948fc5c3 100644 --- a/app/game-frontend/e2e/mainNavigation.spec.ts +++ b/app/game-frontend/e2e/mainNavigation.spec.ts @@ -2186,7 +2186,43 @@ test('main cards and command input stay inside their Ref-sized grid slots', asyn await selectedMenu.evaluate((element) => ((element as HTMLDetailsElement).open = false)); await expect(selectedMenu).not.toHaveAttribute('open', ''); - await page.locator('[data-main-target="commands"] .select-command').click(); + const selectCommand = page.locator('[data-main-target="commands"] .select-command'); + await expect(selectCommand).toHaveClass(/legacy-button--info/u); + await page.mouse.move(1, 1); + const measureSelectCommand = () => + selectCommand.evaluate((element) => { + const rect = element.getBoundingClientRect(); + const style = getComputedStyle(element); + return { + top: rect.top, + bottom: rect.bottom, + height: rect.height, + marginTop: style.marginTop, + borderBottomWidth: style.borderBottomWidth, + borderRadius: style.borderRadius, + backgroundColor: style.backgroundColor, + }; + }); + const selectDefault = await measureSelectCommand(); + expect(selectDefault).toMatchObject({ + height: 34, + marginTop: '0px', + borderBottomWidth: '4px', + borderRadius: '5.25px', + backgroundColor: 'rgb(52, 152, 219)', + }); + await selectCommand.hover(); + const selectHover = await measureSelectCommand(); + expect(selectHover).toMatchObject({ height: 33, marginTop: '1px', borderBottomWidth: '3px' }); + expect(selectHover.bottom).toBeCloseTo(selectDefault.bottom, 2); + const selectBox = await selectCommand.boundingBox(); + if (!selectBox) throw new Error('select command control is not measurable'); + await page.mouse.move(selectBox.x + selectBox.width / 2, selectBox.y + selectBox.height / 2); + await page.mouse.down(); + const selectActive = await measureSelectCommand(); + expect(selectActive).toMatchObject({ height: 32, marginTop: '2px', borderBottomWidth: '2px' }); + expect(selectActive.bottom).toBeCloseTo(selectDefault.bottom, 2); + await page.mouse.up(); const picker = page.getByTestId('command-picker'); await expect(picker).toBeVisible(); // The trigger can end up directly above a newly opened category button. diff --git a/app/game-frontend/e2e/nationGeneralSecret.spec.ts b/app/game-frontend/e2e/nationGeneralSecret.spec.ts index 906c40d2..47f4426c 100644 --- a/app/game-frontend/e2e/nationGeneralSecret.spec.ts +++ b/app/game-frontend/e2e/nationGeneralSecret.spec.ts @@ -205,6 +205,86 @@ test('nation generals keeps the 1000px legacy grid and redacted member columns', await expect(page.locator('#nation-general-list')).toContainText('?'); }); +test('nation generals top controls share fixed Lumen state geometry on desktop and mobile', async ({ + page, +}, testInfo) => { + await install(page); + const evidence: Record = {}; + + for (const viewport of [ + { width: 1200, height: 900 }, + { width: 500, height: 900 }, + ]) { + await page.setViewportSize(viewport); + await page.goto('nation/generals'); + await expect(page.locator('#nation-general-list')).toBeVisible(); + const controls = [ + page.getByRole('button', { name: '돌아가기' }), + page.getByRole('button', { name: '갱신' }), + page.getByRole('button', { name: '보기 모드⌄' }), + page.getByRole('button', { name: '열 선택⌄' }), + ]; + const viewportEvidence: Record = {}; + + for (const control of controls) { + const label = (await control.textContent())?.trim() ?? 'unknown'; + await expect(control).toHaveClass(/legacy-button--fixed-height/u); + const measure = () => + control.evaluate((element) => { + const rect = element.getBoundingClientRect(); + const style = getComputedStyle(element); + return { + top: rect.top, + bottom: rect.bottom, + height: rect.height, + marginTop: style.marginTop, + borderBottomWidth: style.borderBottomWidth, + borderRadius: style.borderRadius, + backgroundColor: style.backgroundColor, + fontFamily: style.fontFamily, + fontSize: style.fontSize, + }; + }); + await page.mouse.move(viewport.width - 1, viewport.height - 1); + const base = await measure(); + expect(base).toMatchObject({ + height: 32, + marginTop: '0px', + borderBottomWidth: '4px', + borderRadius: '5.25px', + fontSize: '14px', + }); + expect(base.fontFamily).toContain('Pretendard'); + + await control.hover(); + const hover = await measure(); + expect(hover).toMatchObject({ height: 31, marginTop: '1px', borderBottomWidth: '3px' }); + expect(hover.bottom).toBeCloseTo(base.bottom, 2); + + const box = await control.boundingBox(); + if (!box) throw new Error(`${label} control is not measurable`); + await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); + await page.mouse.down(); + const active = await measure(); + expect(active).toMatchObject({ height: 30, marginTop: '2px', borderBottomWidth: '2px' }); + expect(active.bottom).toBeCloseTo(base.bottom, 2); + await page.mouse.move(viewport.width - 1, viewport.height - 1); + await page.mouse.up(); + viewportEvidence[label] = { default: base, hover, active }; + } + evidence[`${viewport.width}x${viewport.height}`] = viewportEvidence; + await page.screenshot({ + path: testInfo.outputPath(`nation-general-buttons-${viewport.width}.png`), + fullPage: true, + }); + } + + await testInfo.attach('nation-general-button-geometry', { + body: JSON.stringify(evidence, null, 2), + contentType: 'application/json', + }); +}); + test('nation generals restores Ref group, saved view, sort, and Korean search behavior', async ({ page }, testInfo) => { await install(page); await page.setViewportSize({ width: 1200, height: 900 }); @@ -405,17 +485,20 @@ test('secret office renders five Ref-style command briefs and the forbidden erro '5 : 휴식', ]); await expect(commandRows.nth(2)).toHaveAttribute('title', '【다른장수】에게 쌀 200을 증여'); - const geometry = await page.locator('#secret-general-list .turns').first().evaluate((element) => { - const rect = element.getBoundingClientRect(); - const style = getComputedStyle(element); - return { - width: rect.width, - height: rect.height, - fontSize: style.fontSize, - textAlign: style.textAlign, - horizontalOverflow: element.scrollWidth - element.clientWidth, - }; - }); + const geometry = await page + .locator('#secret-general-list .turns') + .first() + .evaluate((element) => { + const rect = element.getBoundingClientRect(); + const style = getComputedStyle(element); + return { + width: rect.width, + height: rect.height, + fontSize: style.fontSize, + textAlign: style.textAlign, + horizontalOverflow: element.scrollWidth - element.clientWidth, + }; + }); expect(geometry.width).toBeGreaterThanOrEqual(190); expect(geometry.width).toBeLessThanOrEqual(230); expect(geometry.height).toBeGreaterThanOrEqual(60); diff --git a/app/game-frontend/e2e/tournamentBracket.spec.ts b/app/game-frontend/e2e/tournamentBracket.spec.ts index 1b539f13..9fa44672 100644 --- a/app/game-frontend/e2e/tournamentBracket.spec.ts +++ b/app/game-frontend/e2e/tournamentBracket.spec.ts @@ -395,7 +395,10 @@ test('join refresh shows the assigned preliminary group immediately with accessi await refresh.focus(); await expect(refresh).toBeFocused(); await refresh.hover(); - await expect(refresh).toHaveCSS('filter', 'brightness(1.25)'); + await expect(refresh).toHaveCSS('filter', 'none'); + await expect(refresh).toHaveCSS('height', '43px'); + await expect(refresh).toHaveCSS('margin-top', '1px'); + await expect(refresh).toHaveCSS('border-bottom-width', '3px'); expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390); }); @@ -602,7 +605,11 @@ test('mobile betting rankings use tabs and keep dedicated icons beside general n await expect(dialog.getByText('예상 환수금 280')).toBeVisible(); await dialog.getByLabel('베팅 금액').selectOption('50'); await expect(dialog.getByText('예상 환수금 1,400')).toBeVisible(); - await persistScreenshot(page, 'tournament-betting-dialog-mobile', testInfo.outputPath('betting-dialog-mobile.webp')); + await persistScreenshot( + page, + 'tournament-betting-dialog-mobile', + testInfo.outputPath('betting-dialog-mobile.webp') + ); await dialog.getByRole('button', { name: '베팅 등록' }).click(); await expect(dialog).not.toBeVisible(); await expect(page.getByRole('status')).toHaveText('베팅이 등록되었습니다.'); diff --git a/app/game-frontend/src/assets/styles/legacy-controls.css b/app/game-frontend/src/assets/styles/legacy-controls.css index b7111403..2b2fcba0 100644 --- a/app/game-frontend/src/assets/styles/legacy-controls.css +++ b/app/game-frontend/src/assets/styles/legacy-controls.css @@ -144,7 +144,7 @@ /* * 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. + * and text colors; width and the optional fixed-height value stay with the owner. * Existing semantic modifiers also opt in for backward compatibility. */ .legacy-button:is( @@ -173,6 +173,15 @@ vertical-align: middle; } +/* + * Top bars and other fixed rows keep their owner-provided height while using + * the same Lumen edge movement. Shrinking the box with the edge keeps its + * bottom coordinate fixed instead of moving the whole control down. + */ +.legacy-button.legacy-button--fixed-height { + height: var(--legacy-button-height); +} + .legacy-button.legacy-button--secondary { --legacy-button-bg: var(--sammo-button-secondary-bg); --legacy-button-border: var(--sammo-button-secondary-border); @@ -213,6 +222,10 @@ background: var(--legacy-button-bg); } +.legacy-button.legacy-button--fixed-height:not(:disabled, [aria-disabled='true']):is(:hover, [aria-expanded='true']) { + height: calc(var(--legacy-button-height) - 1px); +} + .legacy-button:is( .legacy-button--lumen, .legacy-button--primary, @@ -244,6 +257,10 @@ box-shadow: none; } +.legacy-button.legacy-button--fixed-height:not(:disabled, [aria-disabled='true']):active { + height: calc(var(--legacy-button-height) - 2px); +} + .legacy-button:is( .legacy-button--lumen, .legacy-button--primary, diff --git a/app/game-frontend/src/components/command/ReservedCommandEditor.vue b/app/game-frontend/src/components/command/ReservedCommandEditor.vue index 0fc29698..b7ff6956 100644 --- a/app/game-frontend/src/components/command/ReservedCommandEditor.vue +++ b/app/game-frontend/src/components/command/ReservedCommandEditor.vue @@ -588,7 +588,13 @@ const clickOutsideMenu = (event: Event) => { - +
@@ -806,8 +812,7 @@ const clickOutsideMenu = (event: Event) => { } .control-pad > button, .clock, -.legacy-menu > summary, -.select-command { +.legacy-menu > summary { box-sizing: border-box; min-height: 34px; border: 0; @@ -822,6 +827,12 @@ const clickOutsideMenu = (event: Event) => { cursor: pointer; list-style: none; } +.select-command { + --legacy-button-height: 34px; + display: grid; + place-items: center; + padding: 4px; +} .clock { background: #345c85; font-variant-numeric: tabular-nums; @@ -1024,9 +1035,6 @@ const clickOutsideMenu = (event: Event) => { grid-template-columns: 5fr 7fr; order: 1; } -.advanced-actions > * { - border-radius: 0 !important; -} .bottom-actions { display: grid; grid-template-columns: repeat(3, 1fr); diff --git a/app/game-frontend/src/components/main/MainMobileBottomBar.vue b/app/game-frontend/src/components/main/MainMobileBottomBar.vue index b754c861..dc492b03 100644 --- a/app/game-frontend/src/components/main/MainMobileBottomBar.vue +++ b/app/game-frontend/src/components/main/MainMobileBottomBar.vue @@ -61,7 +61,7 @@ const onAction = (action: NonNullable) => { >
+
@@ -64,33 +72,21 @@ defineProps<{ gap: 4px; } button { - height: 44px; + --legacy-button-height: 44px; margin: 0; - border: 1px solid #666; - border-radius: 5.25px; - background: #444; - color: #fff; font-size: 14px; - line-height: 18px; - cursor: pointer; } .tournament-page-tabs button { min-width: 72px; padding: 10px 12px; } .tournament-page-tabs button.active { - border-color: #f39c12; - background: #8a5b13; + --legacy-button-bg: #8a5b13; + --legacy-button-border: #704a0f; } .close-button { width: 88px; padding: 10px 16px; - border-color: #375a7f; - background: #375a7f; -} -button:hover, -button:focus { - filter: brightness(1.25); } button:focus-visible { outline: 2px solid #f39c12; diff --git a/app/game-frontend/src/views/AuctionView.vue b/app/game-frontend/src/views/AuctionView.vue index 52d9a5b5..ed31780c 100644 --- a/app/game-frontend/src/views/AuctionView.vue +++ b/app/game-frontend/src/views/AuctionView.vue @@ -197,20 +197,31 @@ onMounted(() => { :class="activeTab === 'resource' ? 'resource-page' : 'unique-page'" >
- - +

{{ activeTab === 'resource' ? '경매장' : '유니크 경매장' }}

+

경매 등록

@@ -331,7 +347,7 @@ onMounted(() => { 매물
+

이전 경매(최근 20건)

@@ -408,7 +424,7 @@ onMounted(() => { 유산포인트 (잔여: {{ formatNumber(uniqueDetail.remainPoint) }}포인트) - + @@ -480,7 +496,9 @@ onMounted(() => {
- +
@@ -530,66 +548,17 @@ onMounted(() => { line-height: 32px; text-align: center; } -.legacy-button { - box-sizing: border-box; - border: solid #3d3d3d; - border-width: 0 1px 4px; - border-radius: 5.25px; - padding: 5.25px 10.5px; - color: #fff; - background: #444; - font: inherit; - font-weight: 700; - line-height: 21px; - cursor: pointer; -} -.legacy-button:hover, -.legacy-button:focus { - border-color: #353535; - background: #393939; -} -.legacy-button:focus-visible { - outline: 2px solid #8ab4f8; - outline-offset: -2px; -} -.legacy-button:active, -.legacy-button[aria-pressed='true'] { - border-color: #303030; - background: #333; -} -.legacy-button:disabled { - cursor: default; - opacity: 0.65; -} .close-button, .reload-button { margin-right: 2px; - border-color: #004f28; - background: #00582c; -} -.close-button:hover, -.close-button:focus, -.reload-button:hover, -.reload-button:focus { - border-color: #004523; - background: #004a25; } .top-back-bar .close-button, .top-back-bar .reload-button { - height: 32px; -} -.tab-button { - border-color: #3d3d3d; - background: #444; + --legacy-button-height: 32px; } .tab-button[aria-pressed='true'] { - border-color: #3d3d3d; - background: #444; -} -.tab-button:hover, -.tab-button:focus { - border-color: #3d3d3d; - background: #444; + --legacy-button-bg: #333; + --legacy-button-border: #303030; } .section-title, .subsection-title, diff --git a/app/game-frontend/src/views/BattleCenterView.vue b/app/game-frontend/src/views/BattleCenterView.vue index 6010d064..a2159806 100644 --- a/app/game-frontend/src/views/BattleCenterView.vue +++ b/app/game-frontend/src/views/BattleCenterView.vue @@ -238,9 +238,20 @@ onMounted(() => {
- + - +

감찰부

@@ -308,7 +319,9 @@ onMounted(() => {
- +
@@ -421,17 +434,11 @@ onMounted(() => { text-align: center; } .battle-nav { + --legacy-button-height: 32px; box-sizing: border-box; - height: 32px; margin-right: 2px; - border: 0; - border-radius: 3px; display: grid; place-items: center; - background: #00582c; - color: #fff; - font: inherit; - font-weight: 700; text-decoration: none; } .battle-footer { diff --git a/app/game-frontend/src/views/BettingView.vue b/app/game-frontend/src/views/BettingView.vue index 0d9626ab..9207e61e 100644 --- a/app/game-frontend/src/views/BettingView.vue +++ b/app/game-frontend/src/views/BettingView.vue @@ -130,7 +130,13 @@ const placeBet = async () => {
- + 불러오는 중... {{ message }}
@@ -159,12 +165,7 @@ const placeBet = async () => { @request-bet="openBetDialog" /> - +

베팅하기

@@ -194,9 +195,13 @@ const placeBet = async () => { 금{{ selectedAmount }} - 예상 환수금 {{ selectedExpectedReturn.toLocaleString('ko-KR') }} + 예상 환수금 {{ selectedExpectedReturn.toLocaleString('ko-KR') }} -

현재 배당 기준 예상값이며, 베팅 상황에 따라 최종 배당은 달라질 수 있습니다.

+

+ 현재 배당 기준 예상값이며, 베팅 상황에 따라 최종 배당은 달라질 수 있습니다. +

@@ -289,7 +294,9 @@ const placeBet = async () => {
- + 삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 : HideD(hided62@gmail.com) / Credit @@ -334,8 +341,8 @@ const placeBet = async () => { text-align: left; } .toolbar button { + --legacy-button-height: 44px; min-width: 72px; - height: 44px; padding: 10px 16px; font-size: 14px; } @@ -380,7 +387,7 @@ select { background: #000; color: #fff; } -button { +button:not(.legacy-button) { height: 35.5px; color: #fff; background: #444; @@ -388,16 +395,16 @@ button { border-radius: 5.25px; cursor: pointer; } -button:hover, -button:focus { +button:not(.legacy-button):hover, +button:not(.legacy-button):focus { filter: brightness(1.25); } -button:focus-visible, +button:not(.legacy-button):focus-visible, select:focus-visible { outline: 2px solid #f39c12; outline-offset: 1px; } -button:disabled, +button:not(.legacy-button):disabled, select:disabled { cursor: not-allowed; opacity: 0.5; diff --git a/app/game-frontend/src/views/BoardView.vue b/app/game-frontend/src/views/BoardView.vue index f8f2fde0..d604fad3 100644 --- a/app/game-frontend/src/views/BoardView.vue +++ b/app/game-frontend/src/views/BoardView.vue @@ -126,7 +126,13 @@ onMounted(() => {
- +

{{ title }}

@@ -163,7 +169,7 @@ onMounted(() => {
+
@@ -296,47 +308,9 @@ onMounted(() => { text-align: center; } -.legacy-button { - min-height: 31px; - box-sizing: border-box; - border: 1px solid #3d3d3d; - border-radius: 4px; - padding: 4px 12px; - color: #fff; - background: #444; - font: inherit; - font-weight: 600; - line-height: 1.5; - text-align: center; - text-decoration: none; - cursor: pointer; -} - -.legacy-button:hover { - border-color: #3d3d3d; - background: #444; -} - -.legacy-button:focus-visible { - outline: none; -} - -.legacy-button:active { - border-color: #3d3d3d; - background: #444; -} - .back-button { - height: 32px; + --legacy-button-height: 32px; margin-right: 2px; - border-color: #004f28; - background: #00582c; -} - -.back-button:hover, -.back-button:focus { - border-color: #004523; - background: #004a25; } .board-state { @@ -414,17 +388,10 @@ onMounted(() => { } .article-submit-row .legacy-button { + --legacy-button-height: 35.5px; width: auto; - min-height: 35.5px; margin-right: 10.5px; margin-left: 10.5px; - transition: none; -} - -.article-submit-row .legacy-button:hover, -.article-submit-row .legacy-button:focus, -.article-submit-row .legacy-button:active { - border-color: transparent; } .article-frame { @@ -513,8 +480,8 @@ onMounted(() => { } .submit-comment { + --legacy-button-height: 29.375px; width: 83.333px; - min-height: 29.375px; padding-top: 2px; padding-bottom: 2px; flex: 0 0 auto; @@ -529,9 +496,9 @@ onMounted(() => { } .bottom-bar .back-button { + --legacy-button-height: 35.5px; display: inline-block; width: 71px; - height: 35.5px; margin: 0; padding-right: 6px; padding-left: 6px; diff --git a/app/game-frontend/src/views/ChiefCenterView.vue b/app/game-frontend/src/views/ChiefCenterView.vue index ff8c9bba..a86a9b11 100644 --- a/app/game-frontend/src/views/ChiefCenterView.vue +++ b/app/game-frontend/src/views/ChiefCenterView.vue @@ -318,8 +318,19 @@ const repeatTurns = async (amount: number) => {
- +
@@ -643,19 +656,12 @@ const repeatTurns = async (amount: number) => { text-align: center; } .chief-nav { + --legacy-button-height: 32px; box-sizing: border-box; - height: 32px; margin-right: 2px; - border: 0; - border-radius: 3px; display: grid; place-items: center; - background: #00582c; - color: #fff; - font: inherit; - font-weight: 700; text-decoration: none; - cursor: pointer; } .layout-desktop { display: block; diff --git a/app/game-frontend/src/views/GlobalInfoView.vue b/app/game-frontend/src/views/GlobalInfoView.vue index 229856a1..bcafb689 100644 --- a/app/game-frontend/src/views/GlobalInfoView.vue +++ b/app/game-frontend/src/views/GlobalInfoView.vue @@ -53,7 +53,13 @@ onMounted(async () => { @@ -178,15 +192,10 @@ onMounted(async () => { line-height: 32px; } .legacy-title button { + --legacy-button-height: 32px; position: absolute; inset: 0 auto 0 0; width: 88px; - border: 1px solid #0a9960; - border-radius: 0 0 4px; - background: #087f45; - color: #fff; - font-weight: 700; - cursor: pointer; } .legacy-compat-button { display: none; diff --git a/app/game-frontend/src/views/InheritView.vue b/app/game-frontend/src/views/InheritView.vue index 049ef965..63632d38 100644 --- a/app/game-frontend/src/views/InheritView.vue +++ b/app/game-frontend/src/views/InheritView.vue @@ -449,10 +449,12 @@ onMounted(() => { @@ -472,32 +481,8 @@ onMounted(() => void loadStratFinan()); .top-back-bar button { grid-column: 5; } -.legacy-button, -button { - box-sizing: border-box; - border: 1px solid #00502a; - border-radius: 4px; - padding: 5.25px 10.5px; - color: #fff; - background: #00582c; - font: inherit; - line-height: 21px; - text-align: center; - text-decoration: none; - cursor: pointer; -} -.message-button, -.policy-cancel { - border-color: #6c757d; - background: #6c757d; -} -.policy-submit { - border-color: #325172; - background: #375a7f; -} -button:hover, -.legacy-button:hover { - filter: brightness(1.2); +.top-back-bar .legacy-button { + --legacy-button-height: 32px; } button:focus-visible, .legacy-button:focus-visible, diff --git a/app/game-frontend/src/views/NpcControlView.vue b/app/game-frontend/src/views/NpcControlView.vue index 69fe3665..0e35cfd7 100644 --- a/app/game-frontend/src/views/NpcControlView.vue +++ b/app/game-frontend/src/views/NpcControlView.vue @@ -355,13 +355,14 @@ const submitPriority = async (section: PrioritySectionKey) => { error.value = `설정하지 못했습니다: ${resolveErrorMessage(caught)}`; } }; -