fix: 정보 화면 버튼을 공통 Lumen 계열로 통일

세력도시·세력정보·현재도시·내 정보·인사부·외교부의 raised control을 공통 semantic button family에 연결한다. 화면별 크기와 색상은 유지하고 실제 Chromium 상태 geometry 회귀를 추가한다.
This commit is contained in:
2026-08-21 17:34:45 +00:00
parent 24afa7f466
commit 71ce057318
13 changed files with 393 additions and 160 deletions
+23 -18
View File
@@ -92,7 +92,11 @@ const commandBrief = (command: ReservedCommand): string =>
<tbody>
<tr>
<td>
<br /><button class="back-link" type="button" @click="router.push('/')">
<br /><button
class="legacy-button legacy-button--navigation back-link"
type="button"
@click="router.push('/')"
>
돌아가기
</button>
</td>
@@ -129,7 +133,15 @@ const commandBrief = (command: ReservedCommand): string =>
<table class="legacy-table legacy-bg0 back-row">
<tbody>
<tr>
<td><button class="back-link" type="button" @click="router.push('/')">돌아가기</button></td>
<td>
<button
class="legacy-button legacy-button--navigation back-link"
type="button"
@click="router.push('/')"
>
돌아가기
</button>
</td>
</tr>
</tbody>
</table>
@@ -310,7 +322,15 @@ const commandBrief = (command: ReservedCommand): string =>
<table class="legacy-table legacy-bg0 footer">
<tbody>
<tr>
<td><button class="back-link" type="button" @click="router.push('/')">돌아가기</button></td>
<td>
<button
class="legacy-button legacy-button--navigation back-link"
type="button"
@click="router.push('/')"
>
돌아가기
</button>
</td>
</tr>
<tr>
<td class="legacy-banner">
@@ -457,23 +477,8 @@ const commandBrief = (command: ReservedCommand): string =>
margin-top: 0;
}
.back-link {
display: inline-block;
border: 1px solid #6c757d;
border-radius: 0.2rem;
background: #6c757d;
color: #fff;
padding: 0.25rem 0.5rem;
font-family: var(--sammo-font-sans);
font-size: 14px;
line-height: 1;
text-decoration: none;
}
.back-link:hover,
.back-link:focus,
.back-link:active {
border-color: #565e64;
background: #5c636a;
color: #fff;
}
.legacy-banner a {
color: #fff;
+33 -30
View File
@@ -260,7 +260,11 @@ onBeforeUnmount(() => {
<tbody>
<tr>
<td>
<br /><button class="legacy-button legacy-button--primary" type="button" @click="router.push('/')">
<br /><button
class="legacy-button legacy-button--navigation"
type="button"
@click="router.push('/')"
>
돌아가기
</button>
</td>
@@ -390,7 +394,7 @@ onBeforeUnmount(() => {
<div class="document-row action-row">
<div class="row-label">동작</div>
<div class="row-content">
<button type="button" @click="sendLetter">전송</button>
<button class="legacy-button legacy-button--primary" type="button" @click="sendLetter">전송</button>
</div>
</div>
<input ref="fileInputRef" type="file" accept="image/*" class="hidden" @change="onSelectImage" />
@@ -577,22 +581,41 @@ onBeforeUnmount(() => {
<footer class="document-row letter-actions">
<div class="row-label">동작</div>
<div class="row-content">
<button v-if="canRespond(letter)" type="button" @click="respondLetter(letter.id, true)">
<button
v-if="canRespond(letter)"
class="legacy-button legacy-button--primary"
type="button"
@click="respondLetter(letter.id, true)"
>
승인
</button>
<button
v-if="canRespond(letter)"
class="legacy-button legacy-button--danger"
type="button"
@click="respondLetter(letter.id, false, '거부')"
>
거부
</button>
<button v-if="canRollback(letter)" type="button" @click="rollbackLetter(letter.id)">
<button
v-if="canRollback(letter)"
class="legacy-button legacy-button--secondary"
type="button"
@click="rollbackLetter(letter.id)"
>
회수
</button>
<button v-if="canDestroy(letter)" type="button" @click="destroyLetter(letter.id)">파기</button>
<button
v-if="canDestroy(letter)"
class="legacy-button legacy-button--danger"
type="button"
@click="destroyLetter(letter.id)"
>
파기
</button>
<button
v-if="canRenew(letter)"
class="legacy-button legacy-button--secondary"
type="button"
@click="
selectedPrevId = letter.id;
@@ -611,10 +634,11 @@ onBeforeUnmount(() => {
<tbody>
<tr>
<td>
<button class="legacy-button legacy-button--primary" type="button" @click="router.push('/')">돌아가기</button
<button class="legacy-button legacy-button--navigation" type="button" @click="router.push('/')">
돌아가기</button
><br /><br />
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 :
HideD(hided62@gmail.com) /
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작 : HideD(hided62@gmail.com)
/
<a href="https://github.com/hided/SamK" target="_blank" rel="noopener noreferrer">Credit</a>
</td>
</tr>
@@ -659,17 +683,6 @@ onBeforeUnmount(() => {
text-align: left;
}
.legacy-button {
min-height: 34px;
padding: 5px 10px;
border: 1px solid #2d5d7f;
border-radius: 4px;
background: #315f86;
color: #fff;
font-weight: 700;
text-decoration: none;
}
.panel {
width: 1000px;
margin: 10px auto;
@@ -749,7 +762,7 @@ onBeforeUnmount(() => {
}
.editor-toolbar button,
.diplomacy-view button {
.diplomacy-view button:not(.legacy-button) {
border: 1px solid #aaa;
border-radius: 0;
background: #666;
@@ -758,16 +771,6 @@ onBeforeUnmount(() => {
cursor: pointer;
}
.diplomacy-view .legacy-button {
border: 0;
border-radius: 5.25px;
padding: 5.25px 10.5px;
background-color: rgb(55 90 127);
color: #fff;
font-weight: 700;
line-height: 21px;
}
.editor-toolbar button.active {
background: #315f86;
}
+72 -43
View File
@@ -399,10 +399,14 @@ onMounted(() => {
<span> </span>
<div class="title-actions">
<div class="navigation-actions">
<RouterLink class="legacy-button" to="/">돌아가기</RouterLink>
<button class="legacy-button" type="button" @click="() => loadPage()">새로고침</button>
<RouterLink class="legacy-button legacy-button--navigation" to="/">돌아가기</RouterLink>
<button class="legacy-button legacy-button--navigation" type="button" @click="() => loadPage()">
새로고침
</button>
</div>
<RouterLink class="legacy-button past-plays-link" to="/past-plays">지난 플레이</RouterLink>
<RouterLink class="legacy-button legacy-button--secondary past-plays-link" to="/past-plays">
지난 플레이
</RouterLink>
</div>
</div>
@@ -491,7 +495,7 @@ onMounted(() => {
</label>
<button
id="set_my_setting"
class="action-button"
class="legacy-button legacy-button--lumen legacy-button--fixed-height action-button"
type="button"
:hidden="!canSave"
@click="saveSettings"
@@ -508,7 +512,7 @@ onMounted(() => {
<div v-if="showVacation" class="action-line">
<br />
<button
class="action-button"
class="legacy-button legacy-button--lumen legacy-button--fixed-height action-button"
type="button"
@click="confirmMutation('휴가 기능을 신청할까요?', () => trpc.general.vacation.mutate())"
>
@@ -542,16 +546,27 @@ onMounted(() => {
/>
</label>
</div>
<button class="action-button" type="button" @click="changeGeneralIcon">아이콘 변경</button>
<button
class="legacy-button legacy-button--lumen legacy-button--fixed-height action-button"
type="button"
@click="changeGeneralIcon"
>
아이콘 변경
</button>
</div>
<div v-if="actionAvailability.dieOnPrestart" class="action-line">
가오픈 기간 장수 삭제 ({{ formatDieOnPrestartAvailableAt }} 부터)<br />
<button class="action-button" @click="dieOnPrestart">장수 삭제</button>
<button
class="legacy-button legacy-button--danger legacy-button--fixed-height action-button"
@click="dieOnPrestart"
>
장수 삭제
</button>
</div>
<div v-if="actionAvailability.buildNationCandidate" class="action-line">
서버 개시 이전 거병(2턴부터 건국 가능)<br />
<button
class="action-button"
class="legacy-button legacy-button--lumen legacy-button--fixed-height action-button"
@click="
confirmMutation(
'거병 이후 장수를 삭제할 수 없게됩니다. 거병하시겠습니까?',
@@ -569,7 +584,7 @@ onMounted(() => {
<div v-if="actionAvailability.instantRetreat" class="action-line">
거리 3칸 이내 아국 도시로 즉시 이동<br />
<button
class="action-button"
class="legacy-button legacy-button--lumen legacy-button--fixed-height action-button"
@click="
confirmMutation(
'아군 접경으로 이동할까요?',
@@ -588,7 +603,10 @@ onMounted(() => {
다른 장수 선택
<template v-if="formatSelectionAvailableAt"> ({{ formatSelectionAvailableAt }} 부터) </template>
<br />
<RouterLink class="action-button select-general-link" to="/select-general">
<RouterLink
class="legacy-button legacy-button--lumen legacy-button--fixed-height action-button select-general-link"
to="/select-general"
>
다른 장수 선택
</RouterLink>
<br /><br />
@@ -608,7 +626,11 @@ onMounted(() => {
모바일 레이아웃 순서 바꾸기<br />
<small>500px 메인 화면의 패널 순서를 기기에 저장합니다.</small>
</span>
<button class="mobile-layout-open" type="button" @click="openMobileLayoutDialog">
<button
class="legacy-button legacy-button--primary mobile-layout-open"
type="button"
@click="openMobileLayoutDialog"
>
순서 바꾸기
</button>
</div>
@@ -618,6 +640,7 @@ onMounted(() => {
<button
v-for="item in items"
:key="item.key"
class="legacy-button legacy-button--secondary item-button"
type="button"
:disabled="!item.code"
@click="dropItem(item)"
@@ -654,7 +677,7 @@ onMounted(() => {
<div v-if="logs[type].length === 0" class="empty">기록이 없습니다.</div>
<button
v-if="logHasMore[type]"
class="load-old"
class="legacy-button legacy-button--secondary load-old"
type="button"
@click="loadLog(type, logs[type].at(-1)?.id)"
>
@@ -667,23 +690,21 @@ onMounted(() => {
삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용, 응용하였습니다 / 제작: HideD / Credit
</footer>
</main>
<dialog
ref="mobileLayoutDialog"
class="mobile-layout-dialog"
aria-labelledby="mobile-layout-dialog-title"
>
<dialog ref="mobileLayoutDialog" class="mobile-layout-dialog" aria-labelledby="mobile-layout-dialog-title">
<div class="mobile-layout-dialog__header">
<h2 id="mobile-layout-dialog-title">모바일 레이아웃 순서 바꾸기</h2>
<form method="dialog">
<button type="submit" aria-label="모바일 레이아웃 순서 닫기">×</button>
<button
class="legacy-button legacy-button--secondary"
type="submit"
aria-label="모바일 레이아웃 순서 닫기"
>
×
</button>
</form>
</div>
<p>항목을 끌어 놓거나 ·아래 버튼으로 상대 순서를 바꿉니다.</p>
<SortableStringList
v-model:list="mobileLayoutOrder"
tag="ol"
class="mobile-layout-list"
>
<SortableStringList v-model:list="mobileLayoutOrder" tag="ol" class="mobile-layout-list">
<template #item="{ element: panelId, index }">
<li :data-mobile-layout-id="panelId">
<span class="mobile-layout-handle" aria-hidden="true"></span>
@@ -693,6 +714,7 @@ onMounted(() => {
</span>
<span class="mobile-layout-move-buttons">
<button
class="legacy-button legacy-button--secondary"
type="button"
:aria-label="`${mobileLayoutLabels[panelId]} 위로`"
:disabled="index === 0"
@@ -701,6 +723,7 @@ onMounted(() => {
</button>
<button
class="legacy-button legacy-button--secondary"
type="button"
:aria-label="`${mobileLayoutLabels[panelId]} 아래로`"
:disabled="index === mobileLayoutOrder.length - 1"
@@ -713,9 +736,19 @@ onMounted(() => {
</template>
</SortableStringList>
<div class="mobile-layout-dialog__actions">
<button type="button" @click="resetMobileLayoutOrder">기본값</button>
<form method="dialog"><button type="submit">취소</button></form>
<button class="mobile-layout-apply" type="button" @click="applyMobileLayoutOrder">적용</button>
<button class="legacy-button legacy-button--secondary" type="button" @click="resetMobileLayoutOrder">
기본값
</button>
<form method="dialog">
<button class="legacy-button legacy-button--secondary" type="submit">취소</button>
</form>
<button
class="legacy-button legacy-button--primary mobile-layout-apply"
type="button"
@click="applyMobileLayoutOrder"
>
적용
</button>
</div>
</dialog>
<div class="my-page-mobile-scroll-spacer" aria-hidden="true"></div>
@@ -772,8 +805,7 @@ onMounted(() => {
display: flex;
gap: 4px;
}
.legacy-button,
button,
button:not(.legacy-button),
select,
textarea {
border: 1px solid #777;
@@ -782,15 +814,8 @@ textarea {
background: #6b6b6b;
font: inherit;
}
.legacy-button {
min-height: 34px;
padding: 5px 10px;
border-color: #2d5d7f;
border-radius: 4px;
background: #315f86;
color: #fff;
font-weight: 700;
text-decoration: none;
.legacy-page .legacy-button,
.mobile-layout-dialog .legacy-button {
letter-spacing: 0;
}
button {
@@ -871,10 +896,17 @@ button:disabled {
color: orange;
}
.action-button {
--legacy-button-height: 30px;
--legacy-button-bg: #225500;
--legacy-button-border: #1f4d00;
position: relative;
top: 4px;
width: 160px;
height: 30px;
margin: 4px 0;
background: #225500;
margin-bottom: 8px;
}
.action-button.legacy-button--danger {
--legacy-button-bg: var(--sammo-button-danger-bg);
--legacy-button-border: var(--sammo-button-danger-border);
}
.select-general-link {
display: inline-flex;
@@ -909,7 +941,6 @@ button:disabled {
}
.mobile-layout-open {
min-height: 34px;
background: #315f86;
font-weight: 700;
}
.mobile-layout-dialog {
@@ -1000,7 +1031,6 @@ button:disabled {
.mobile-layout-move-buttons button {
width: 36px;
min-height: 34px;
background: #315f86;
font-weight: 700;
}
.mobile-layout-dialog__actions {
@@ -1013,7 +1043,6 @@ button:disabled {
padding: 4px 10px;
}
.mobile-layout-dialog__actions .mobile-layout-apply {
background: #225500;
font-weight: 700;
}
.button-group {
@@ -294,7 +294,11 @@ onMounted(async () => {
<tbody>
<tr>
<td>
<br /><button class="back-button" type="button" @click="router.push('/')">
<br /><button
class="legacy-button legacy-button--navigation back-button"
type="button"
@click="router.push('/')"
>
돌아가기
</button>
</td>
@@ -309,12 +313,18 @@ onMounted(async () => {
@update:model-value="updateSelectedSort"
@submit="applySelectedSort"
/>
<button type="button" :aria-busy="secretLoading" @click="loadSecretIntegration">
<button
class="legacy-button legacy-button--primary integration-button"
type="button"
:aria-busy="secretLoading"
@click="loadSecretIntegration"
>
암행부 연동
</button>
<button
v-if="secretData"
id="load-duty-button"
class="legacy-button legacy-button--primary integration-button"
type="button"
:aria-busy="personnelLoading"
@click="loadPersonnelIntegration"
@@ -327,15 +337,69 @@ onMounted(async () => {
<tr>
<td class="sort-more">
정렬 순서 :
<button type="button" @click="setExtraSort('name')">도시명</button>
<button type="button" @click="setExtraSort('populationRate')">인구율</button>
<button type="button" @click="setExtraSort('populationRemain')">남은 주민</button>
<button type="button" @click="setExtraSort('agricultureRemain')">남은 농업</button>
<button type="button" @click="setExtraSort('commerceRemain')">남은 상업</button>
<button type="button" @click="setExtraSort('securityRemain')">남은 치안</button>
<button type="button" @click="setExtraSort('defenceRemain')">남은 수비</button>
<button type="button" @click="setExtraSort('wallRemain')">남은 성벽</button>
<button type="button" @click="setExtraSort('generalCount')">배치 장수 </button>
<button
class="legacy-button legacy-button--secondary extra-sort-button"
type="button"
@click="setExtraSort('name')"
>
도시명
</button>
<button
class="legacy-button legacy-button--secondary extra-sort-button"
type="button"
@click="setExtraSort('populationRate')"
>
인구율
</button>
<button
class="legacy-button legacy-button--secondary extra-sort-button"
type="button"
@click="setExtraSort('populationRemain')"
>
남은 주민
</button>
<button
class="legacy-button legacy-button--secondary extra-sort-button"
type="button"
@click="setExtraSort('agricultureRemain')"
>
남은 농업
</button>
<button
class="legacy-button legacy-button--secondary extra-sort-button"
type="button"
@click="setExtraSort('commerceRemain')"
>
남은 상업
</button>
<button
class="legacy-button legacy-button--secondary extra-sort-button"
type="button"
@click="setExtraSort('securityRemain')"
>
남은 치안
</button>
<button
class="legacy-button legacy-button--secondary extra-sort-button"
type="button"
@click="setExtraSort('defenceRemain')"
>
남은 수비
</button>
<button
class="legacy-button legacy-button--secondary extra-sort-button"
type="button"
@click="setExtraSort('wallRemain')"
>
남은 성벽
</button>
<button
class="legacy-button legacy-button--secondary extra-sort-button"
type="button"
@click="setExtraSort('generalCount')"
>
배치 장수
</button>
</td>
</tr>
</tbody>
@@ -583,7 +647,7 @@ onMounted(async () => {
v-for="level in [4, 3, 2] as const"
:key="level"
type="button"
class="appointment-button for-duty"
class="legacy-button legacy-button--primary appointment-button for-duty"
:class="[`mode-${level}`, { 'chief-target': isChief(general.id) }]"
:disabled="
!canAppoint(city.id, general.id, level) || pendingAppointment !== ''
@@ -642,7 +706,15 @@ onMounted(async () => {
<table class="legacy-table legacy-bg0 title footer">
<tbody>
<tr>
<td><button class="back-button" type="button" @click="router.push('/')">돌아가기</button></td>
<td>
<button
class="legacy-button legacy-button--navigation back-button"
type="button"
@click="router.push('/')"
>
돌아가기
</button>
</td>
</tr>
<tr>
<td class="legacy-banner">
@@ -786,7 +858,7 @@ onMounted(async () => {
.footer {
margin-top: 0;
}
.nation-cities-page button:not(.legacy-sort-submit, .legacy-sort-header),
.nation-cities-page button:not(.legacy-button, .legacy-sort-submit, .legacy-sort-header),
.nation-cities-page input[type='submit'] {
border: 2px outset #fff;
background-color: buttonface;
@@ -795,15 +867,16 @@ onMounted(async () => {
padding: 1px 6px;
}
.nation-cities-page .back-button {
border: 0;
padding: 5.25px 10.5px;
background-color: rgb(55 90 127);
color: #fff;
font-weight: 700;
margin-bottom: 0;
}
.nation-cities-page .integration-button,
.nation-cities-page .extra-sort-button,
.nation-cities-page .appointment-button {
padding: 1px 6px;
line-height: 21px;
}
.sort-more button {
margin: 0;
.sort-more .extra-sort-button {
margin-bottom: 0;
}
.development-high {
color: lightgreen;
+14 -11
View File
@@ -27,7 +27,15 @@ onMounted(async () => {
<table class="legacy-table title-table legacy-bg0">
<tbody>
<tr>
<td> <br /><button type="button" @click="router.push('/')">돌아가기</button></td>
<td>
<br /><button
class="legacy-button legacy-button--navigation"
type="button"
@click="router.push('/')"
>
돌아가기
</button>
</td>
</tr>
</tbody>
</table>
@@ -110,7 +118,11 @@ onMounted(async () => {
<table class="legacy-table footer-table legacy-bg0">
<tbody>
<tr>
<td><button type="button" @click="router.push('/')">돌아가기</button></td>
<td>
<button class="legacy-button legacy-button--navigation" type="button" @click="router.push('/')">
돌아가기
</button>
</td>
</tr>
<tr>
<td class="credit">삼국지 모의전투 HiDCHe / KOEI의 이미지를 사용했습니다 / 제작: Hide.D</td>
@@ -167,15 +179,6 @@ onMounted(async () => {
.history {
text-align: left !important;
}
.title-table button,
.footer-table button {
border: 0;
border-radius: 3px;
padding: 8px 12px;
background: #345c85;
color: #fff;
cursor: pointer;
}
.credit {
padding: 0 !important;
}
@@ -282,7 +282,11 @@ onMounted(() => void loadPersonnel());
<tbody>
<tr>
<td>
<br /><button class="legacy-button" type="button" @click="router.push('/')">
<br /><button
class="legacy-button legacy-button--navigation"
type="button"
@click="router.push('/')"
>
돌아가기
</button>
</td>
@@ -338,7 +342,7 @@ onMounted(() => void loadPersonnel());
<button
v-if="canManage && level !== 12 && !chiefLocked(level)"
type="button"
class="personnel-change-button"
class="legacy-button legacy-button--lumen legacy-button--fixed-height personnel-change-button"
:aria-label="`${formatOfficerLevelText(level, nationLevel)} 변경하기`"
aria-haspopup="dialog"
@click="selectionContext = { kind: 'chief-general', level }"
@@ -398,7 +402,13 @@ onMounted(() => void loadPersonnel());
{{ candidate.name }}
</option>
</select>
<button type="button" @click="changePermissions(true)">임명</button>
<button
class="legacy-button legacy-button--primary"
type="button"
@click="changePermissions(true)"
>
임명
</button>
</td>
<td class="green-cell permission-label">조언자</td>
<td>
@@ -416,7 +426,13 @@ onMounted(() => void loadPersonnel());
{{ candidate.name }}
</option>
</select>
<button type="button" @click="changePermissions(false)">임명</button>
<button
class="legacy-button legacy-button--primary"
type="button"
@click="changePermissions(false)"
>
임명
</button>
</td>
</tr>
</tbody>
@@ -477,7 +493,7 @@ onMounted(() => void loadPersonnel());
<button
v-if="canManage && !cityOfficerLocked(city, level)"
type="button"
class="personnel-change-button city-change-button"
class="legacy-button legacy-button--lumen legacy-button--fixed-height personnel-change-button city-change-button"
:aria-label="`${city.name} ${officerLabels[level]} 변경하기`"
aria-haspopup="dialog"
@click="selectionContext = { kind: 'city-general', level, cityId: city.id }"
@@ -528,7 +544,14 @@ onMounted(() => void loadPersonnel());
}}/{{ candidate.stats.intelligence }})
</option>
</select>
<button type="button" :disabled="kickTargetId === 0" @click="kickGeneral">추방</button>
<button
class="legacy-button legacy-button--danger"
type="button"
:disabled="kickTargetId === 0"
@click="kickGeneral"
>
추방
</button>
</template>
</td>
</tr>
@@ -538,7 +561,15 @@ onMounted(() => void loadPersonnel());
<table class="legacy-table footer-table">
<tbody>
<tr>
<td><button class="legacy-button" type="button" @click="router.push('/')">돌아가기</button></td>
<td>
<button
class="legacy-button legacy-button--navigation"
type="button"
@click="router.push('/')"
>
돌아가기
</button>
</td>
</tr>
<tr>
<td class="legacy-banner">
@@ -601,7 +632,7 @@ onMounted(() => void loadPersonnel());
.heading-table td {
text-align: left;
}
button {
button:not(.legacy-button) {
display: inline-block;
border: 1px solid #6c757d;
border-radius: 4px;
@@ -613,24 +644,10 @@ button {
text-decoration: none;
cursor: pointer;
}
.legacy-button {
display: inline-block;
border: 1px solid #325172;
border-radius: 4px;
padding: 5.25px 10.5px;
color: #fff;
background: #375a7f;
font: inherit;
line-height: 21px;
text-decoration: none;
cursor: pointer;
}
button:hover,
.legacy-button:hover {
button:not(.legacy-button):hover {
filter: brightness(1.16);
}
button:focus-visible,
.legacy-button:focus-visible,
button:not(.legacy-button):focus-visible,
select:focus-visible {
outline: 2px solid #fff;
outline-offset: 1px;
@@ -736,18 +753,13 @@ select[multiple] {
white-space: nowrap;
}
.personnel-change-button {
--legacy-button-bg: #315b3d;
--legacy-button-border: #557d5e;
--legacy-button-height: 34px;
grid-area: action;
min-height: 34px;
border-color: #557d5e;
padding: 4px 8px;
background: #315b3d;
font-weight: 700;
}
.personnel-change-button:hover {
filter: none;
background: #3c704a;
border-color: #7ba286;
}
.personnel-lock-label {
grid-area: action;
color: #e7b64c;