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

merge: scenario 2601 GUI precision parity

Browse Source 
Ref 원본 CSS를 근거로 문서·표·컨트롤 계약을 맞추고, scoped SFC의 :global(body)
누출과 Ref에 없는 클리핑을 페이지별 계약으로 정리했습니다.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hide_D
2026-08-04 07:59:12 +00:00
co-authored by Claude Opus 5
parent f0fa55245b 1f21379964
commit 8b8a285bc7
24 changed files with 244 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/assets/main.css
+23 -4
View File
@@ -14,19 +14,36 @@ html {
color-scheme: dark;
}
/*
* Ref's `html, body` contract: the page texture is centred and only tiles
* vertically, so a wide screen keeps one column of the texture.
*/
body {
min-width: 320px;
margin: 0;
background: #000;
background-position: center;
background-repeat: repeat-y;
color: #fff;
font-family: var(--sammo-font-sans);
font-size: 14px;
line-height: 1.3;
}
/*
* Ref's in-game document never narrows below its 500px mobile column, so the
* app root keeps that floor. Previously this came from an unscoped `body` rule
* inside two ranking views, which also leaked their line-height everywhere.
*/
#app {
min-width: 500px;
}
body:has(.battle-page),
body:has(.chief-page),
body:has(.global-page) {
body:has(.global-page),
body:has(.main-page),
body:has(.yearbook-page) {
line-height: 1.5;
}
@@ -37,17 +54,19 @@ textarea {
font: inherit;
}
/*
* Ref's `.bg0/.bg1/.bg2` set a background image and nothing else, so the
* element stays transparent where the texture does not cover it. Adding a
* background colour here paints over whatever the parent shows through.
*/
.legacy-bg0 {
background-color: #302016;
background-image: var(--sammo-texture-walnut);
}
.legacy-bg1 {
background-color: #14241b;
background-image: var(--sammo-texture-green);
}
.legacy-bg2 {
background-color: #172a52;
background-image: var(--sammo-texture-blue);
}
app/game-frontend/src/assets/styles/game-shell.css
+20
View File
@@ -48,6 +48,26 @@
cursor: pointer;
}
/*
* Ref renders the dashboard reload control with the Lumen navigation family:
* the bottom edge shortens on hover and again while pressed.
*/
.game-shell__action--navigation {
border-color: var(--sammo-button-navigation-border);
border-width: 0 1px 4px;
background: var(--sammo-button-navigation-bg);
}
.game-shell__action--navigation:not(:disabled):hover {
margin-top: 1px;
border-bottom-width: 3px;
}
.game-shell__action--navigation:not(:disabled):active {
margin-top: 2px;
border-bottom-width: 2px;
}
.game-feedback--error {
color: var(--sammo-color-error);
font-size: 0.85rem;
app/game-frontend/src/assets/styles/legacy-controls.css
+2
View File
@@ -61,6 +61,8 @@
background: var(--legacy-button-bg);
color: #fff;
line-height: 21px;
/* Ref's framework baseline for these controls. */
vertical-align: middle;
}
.legacy-button.legacy-button--secondary {
app/game-frontend/src/components/chief/ChiefTurnCard.vue
+4 -1
View File
@@ -117,6 +117,8 @@ const handleClick = () => {
min-height: 28px;
gap: 2px;
padding: 1px 4px;
/* Ref centres the office header row. */
text-align: center;
background-color: #143b28;
background-image: var(--sammo-texture-green);
}
@@ -161,8 +163,9 @@ const handleClick = () => {
gap: 2px;
align-items: center;
padding: 0 3px;
/* Ref draws no rule between reservation rows and keeps them left aligned. */
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
text-align: left;
font-size: 0.75rem;
}
app/game-frontend/src/views/AuctionView.vue
-2
View File
@@ -509,11 +509,9 @@ onMounted(() => {
}
.legacy-auction-page.resource-page {
height: 689px;
overflow: hidden;
}
.legacy-auction-page.unique-page {
height: 378px;
overflow: hidden;
}
.legacy-auction-page.bg0 {
background-color: transparent;
app/game-frontend/src/views/BattleSimulatorView.vue
+53 -8
View File
@@ -1317,10 +1317,9 @@ const shouldShowUI = computed(() => !loading.value && !!options.value);
.battle-simulator :deep(.panel-card) {
border-color: rgba(0, 0, 0, 0.18);
border-radius: 5px;
border-radius: 5.25px;
background: #303030;
background-image: none;
overflow: hidden;
}
.battle-simulator :deep(.panel-header) {
@@ -1373,15 +1372,24 @@ button {
color: inherit;
}
/*
* Ref uses the Bootstrap/Lumen family here: no top border, 1px sides and a 4px
* bottom that shortens on hover and active while the control moves down.
*/
.primary,
.ghost {
border: 1px solid transparent;
border-radius: 5px;
--simulator-button-border: #d04436;
border-color: var(--simulator-button-border);
border-style: solid;
border-width: 0 1px 4px;
border-radius: 5.25px;
padding: 5.25px 10.5px;
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 21px;
vertical-align: middle;
cursor: pointer;
transition:
color 0.15s ease-in-out,
@@ -1394,6 +1402,18 @@ button {
background: #e74c3c;
}
.primary:not(:disabled):hover,
.ghost:not(:disabled):hover {
margin-top: 1px;
border-bottom-width: 3px;
}
.primary:not(:disabled):active,
.ghost:not(:disabled):active {
margin-top: 2px;
border-bottom-width: 2px;
}
.primary:active {
background: #b93d30;
}
@@ -1404,14 +1424,20 @@ button {
}
.ghost {
--simulator-button-border: #2f89c5;
background: #3498db;
}
.load-action {
--simulator-button-border: #26527d;
background: #2c5d8f;
}
.add-action {
--simulator-button-border: #0da271;
background: #10b981;
}
@@ -1472,7 +1498,12 @@ button:disabled {
box-shadow 0.15s ease-in-out;
}
.unit-after input[type='number'] {
text-align: right;
}
.repeat-field select {
border-radius: 0 5.25px 5.25px 0;
padding-right: 31.5px;
background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23303030%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e');
background-repeat: no-repeat;
@@ -1485,6 +1516,7 @@ button:disabled {
.field input:focus,
.field select:focus {
border-color: #9badbf;
box-shadow: 0 0 0 3.5px rgba(55, 90, 127, 0.25);
outline: 0;
}
@@ -1557,19 +1589,32 @@ button:disabled {
.summary-table {
width: 100%;
border-collapse: collapse;
vertical-align: top;
}
.summary-table tbody,
.summary-table tr {
vertical-align: top;
}
/*
* Ref renders this as a Bootstrap table: 7px padding on every side, a #444
* bottom rule and the transparent accent inset shadow the framework always
* emits.
*/
.summary-table th,
.summary-table td {
padding: 7px 8px;
border-bottom: 1px solid rgba(201, 164, 90, 0.2);
padding: 7px;
border-bottom: 1px solid #444;
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0);
text-align: left;
vertical-align: top;
}
.summary-table th {
width: 18ch;
width: 180px;
color: #fff;
font-weight: 600;
font-weight: 700;
}
.battle-summary-card :deep(.panel-body) {
app/game-frontend/src/views/BestGeneralView.vue
+2 -2
View File
@@ -165,7 +165,7 @@ watch(viewMode, () => {
</template>
<style scoped>
:global(body) {
:global(body:has(.legacy-ranking-page)) {
min-width: 500px;
overflow-x: hidden;
}
@@ -348,7 +348,7 @@ watch(viewMode, () => {
}
@media (min-width: 1000px) {
:global(body) {
:global(body:has(.legacy-ranking-page)) {
min-width: 1000px;
}
app/game-frontend/src/views/BoardView.vue
+1 -1
View File
@@ -158,7 +158,7 @@ onMounted(() => {
</div>
<div class="article-submit-row">
<div></div>
<button id="submitArticle" class="legacy-button" type="button" @click="submitArticle">등록</button>
<button id="submitArticle" class="legacy-button legacy-button--secondary" type="button" @click="submitArticle">등록</button>
</div>
</section>
app/game-frontend/src/views/DiplomacyView.vue
+12 -3
View File
@@ -271,7 +271,7 @@ onBeforeUnmount(() => {
<tbody>
<tr>
<td>
외 교 부<br /><button class="legacy-button" type="button" @click="router.push('/')">
외 교 부<br /><button class="legacy-button legacy-button--primary" type="button" @click="router.push('/')">
돌아가기
</button>
</td>
@@ -622,7 +622,7 @@ onBeforeUnmount(() => {
<tbody>
<tr>
<td>
<button class="legacy-button" type="button" @click="router.push('/')">돌아가기</button
<button class="legacy-button legacy-button--primary" type="button" @click="router.push('/')">돌아가기</button
><br /><br />
삼국지 모의전투 PHP HiDCHe - unknown / KOEI의 이미지를 사용, 응용하였습니다 / 제작 :
HideD(hided62@gmail.com) /
@@ -648,10 +648,19 @@ onBeforeUnmount(() => {
line-height: 1.3;
}
/*
* Ref's diplomacy tables are not collapsed and carry an outset-style frame:
* gray on the top and left edges, black on the right and bottom.
*/
.legacy-layout-table {
width: 1000px;
margin: 0 auto;
border-collapse: collapse;
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid gray;
border-left: 1px solid gray;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
background-color: transparent;
}
app/game-frontend/src/views/DynastyDetailView.vue
+3 -2
View File
@@ -298,8 +298,9 @@ onMounted(loadDetail);
</template>
<style scoped>
:global(body) {
min-width: 1016px;
:global(body:has(.dynasty-page)) {
/* Ref renders this page as a 1000px column, mobile included. */
min-width: 1000px;
}
.dynasty-page {
app/game-frontend/src/views/DynastyListView.vue
+11 -7
View File
@@ -153,26 +153,30 @@ onMounted(loadDynasty);
</template>
<style scoped>
:global(body) {
min-width: 1016px;
:global(body:has(.dynasty-page)) {
/* Ref renders this page as a 1000px column, mobile included. */
min-width: 1000px;
}
.dynasty-page {
width: 1000px;
margin: 8px auto 0;
color: #fff;
font-family: 'Times New Roman', serif;
font-size: 16px;
line-height: normal;
}
/* Ref `table.tb_layout` + `.tb_layout td`: collapsed 1px gray cell borders. */
.legacy-table {
width: 1000px;
border-spacing: 2px;
background-color: transparent;
border-collapse: collapse;
font-size: 14px;
word-break: break-all;
}
.legacy-table td {
padding: 1px;
border: 1px solid gray;
padding: 0;
word-break: break-all;
}
.spaced-table {
app/game-frontend/src/views/GeneralListView.vue
+1 -6
View File
@@ -226,15 +226,10 @@ onMounted(() => {
padding: 0;
word-break: break-all;
}
.title-table {
text-align: center;
}
/* Ref's title table keeps the default cell alignment and zero cell padding. */
.directory-page > .title-table:first-child {
height: 80.875px;
}
.title-table td {
padding: 1px;
}
.legacy-button {
padding: 5px 10px;
font-size: 14px;
app/game-frontend/src/views/GlobalInfoView.vue
+13 -2
View File
@@ -152,9 +152,14 @@ onMounted(async () => {
position: relative;
width: 100%;
height: 32px;
text-align: center;
text-align: left;
background-image: var(--sammo-texture-walnut);
}
.legacy-title > strong {
display: block;
text-align: center;
}
.legacy-title strong {
font-size: 24px;
font-weight: 400;
@@ -209,7 +214,8 @@ onMounted(async () => {
transform-origin: top;
}
.matrix th {
font-weight: 400;
padding: 1px;
font-weight: 700;
}
.matrix .vertical {
writing-mode: vertical-rl;
@@ -302,6 +308,11 @@ onMounted(async () => {
.nation-count-column {
width: 15%;
}
/*
* Ref reports border-box and default alignment here, but adopting either
* changes this page's rendered height and the nation table centring, so the
* visible geometry is preserved instead.
*/
.footer {
box-sizing: content-box;
height: 35.5px;
app/game-frontend/src/views/HallOfFameView.vue
+3 -3
View File
@@ -181,9 +181,9 @@ onMounted(loadOptions);
</template>
<style scoped>
:global(body) {
/* Ref's document does not clip; the page column stays 500px wide instead. */
:global(body:has(.legacy-hall-page)) {
min-width: 500px;
overflow-x: hidden;
}
.legacy-hall-page {
@@ -346,7 +346,7 @@ onMounted(loadOptions);
}
@media (min-width: 1000px) {
:global(body) {
:global(body:has(.legacy-hall-page)) {
min-width: 1000px;
}
app/game-frontend/src/views/MainView.vue
+17 -3
View File
@@ -151,7 +151,7 @@ watch(
>
실시간 동기화: {{ realtimeLabel }}
</button>
<button class="game-shell__action" type="button" @click="loadMainData">갱 신</button>
<button class="game-shell__action game-shell__action--navigation" type="button" @click="loadMainData">갱 신</button>
<button class="game-shell__action" type="button" @click="moveLobby">로비로</button>
</div>
</header>
@@ -440,6 +440,10 @@ button {
color: inherit;
}
/*
* Ref's main document does not clip horizontally; the map panel below manages
* its own overflow.
*/
.main-page {
box-sizing: border-box;
width: 100%;
@@ -448,7 +452,6 @@ button {
margin: 0 auto;
padding: 0;
gap: 10px;
overflow-x: hidden;
background-color: transparent;
background-image: var(--sammo-texture-walnut);
}
@@ -713,17 +716,28 @@ button {
margin-top: 31px;
}
/*
* Ref renders these dashboard controls with the Lumen navigation family: no top
* border, 1px sides and a 4px bottom edge that shortens on hover and press
* while the control moves down.
*/
.desktop-action-controls .game-shell__action {
border: 1px solid transparent;
border-color: #004f28;
border-style: solid;
border-width: 0 1px 4px;
background: #006b36;
color: #fff;
}
.desktop-action-controls .game-shell__action:hover {
margin-top: 1px;
border-bottom-width: 3px;
background: #00582c;
}
.desktop-action-controls .game-shell__action:active {
margin-top: 2px;
border-bottom-width: 2px;
background: #005128;
}
app/game-frontend/src/views/MyPageView.vue
-1
View File
@@ -629,7 +629,6 @@ onMounted(() => {
font-family: var(--sammo-font-sans);
font-size: 14px;
line-height: 1.3;
overflow: hidden;
}
.my-page-mobile-scroll-spacer {
display: none;
app/game-frontend/src/views/NationBettingView.vue
+2 -3
View File
@@ -338,7 +338,7 @@ onMounted(() => {
<main id="nation-betting-container" class="nation-betting-page legacy-bg0">
<header class="legacy-top-bar">
<RouterLink v-slot="{ navigate }" custom to="/">
<button class="legacy-nav-button" type="button" @click="navigate">돌아가기</button>
<button class="legacy-button legacy-button--navigation" type="button" @click="navigate">돌아가기</button>
</RouterLink>
<div></div>
<h1>국가 베팅장</h1>
@@ -440,7 +440,7 @@ onMounted(() => {
</section>
<footer class="betting-footer">
<RouterLink class="legacy-nav-button" to="/">돌아가기</RouterLink>
<RouterLink class="legacy-button legacy-button--navigation" to="/">돌아가기</RouterLink>
</footer>
</main>
</template>
@@ -454,7 +454,6 @@ onMounted(() => {
font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
font-size: 14px;
line-height: 1.5;
overflow-x: hidden;
}
.nation-betting-page.legacy-bg0 {
app/game-frontend/src/views/NationGeneralsView.vue
+12 -3
View File
@@ -78,7 +78,7 @@ onMounted(load);
<strong>세력 장수</strong>
<span class="right-actions">
<span class="dropdown">
<button class="top-button mode-button" @click="viewMenuOpen = !viewMenuOpen">보기 모드⌄</button>
<button class="top-button mode-button" :aria-expanded="viewMenuOpen" @click="viewMenuOpen = !viewMenuOpen">보기 모드⌄</button>
<span v-if="viewMenuOpen" class="dropdown-menu">
<button
@click="
@@ -222,7 +222,6 @@ onMounted(load);
max-width: 1000px;
height: 100vh;
margin: 0 auto;
overflow: hidden;
font: 14px/21px var(--sammo-font-sans);
color: #fff;
background-color: transparent;
@@ -238,7 +237,7 @@ onMounted(load);
justify-content: center;
background-color: transparent;
background-image: var(--sammo-texture-walnut);
border-bottom: 1px solid #42484a;
/* Ref's `.back_bar` has no bottom rule; the grid below draws its own. */
font-size: 14px;
}
.top-bar strong {
@@ -258,6 +257,7 @@ onMounted(load);
.right-actions {
right: 0;
}
/* Ref Lumen primary: the bottom edge carries the pressed-state movement. */
.top-button {
display: inline-flex;
height: 32px;
@@ -282,7 +282,16 @@ onMounted(load);
}
.mode-button {
background: #375a7f;
border-bottom: 0 solid #325172;
}
/* Ref Lumen primary: a 3px bottom edge appears on hover and stays while open. */
.mode-button:hover,
.mode-button[aria-expanded='true'],
.mode-button:active {
border-bottom-width: 3px;
}
.mode-button,
.columns-button {
width: 90px;
app/game-frontend/src/views/NationInfoView.vue
+1 -1
View File
@@ -128,7 +128,7 @@ onMounted(async () => {
}
.legacy-table td,
.legacy-table th {
border: 1px solid #777;
border: 1px solid gray;
padding: 4px;
font-weight: 400;
}
app/game-frontend/src/views/NationSecretView.vue
+18 -3
View File
@@ -196,12 +196,16 @@ th,
text-align: center;
font-weight: 400;
}
/* Ref Lumen primary: no top border, 1px sides, 4px bottom that shortens. */
.close-button {
height: 35.5px;
padding: 5.25px 10.5px;
border: 1px solid transparent;
border-radius: 3.5px;
border-color: #325172;
border-style: solid;
border-width: 0 1px 4px;
border-radius: 5.25px;
background: rgb(55, 90, 127);
vertical-align: middle;
color: #fff;
font-weight: 700;
line-height: 21px;
@@ -212,6 +216,16 @@ th,
border-color 0.15s,
box-shadow 0.15s;
}
.close-button:not(:disabled):hover {
margin-top: 1px;
border-bottom-width: 3px;
}
.close-button:not(:disabled):active {
margin-top: 2px;
border-bottom-width: 2px;
}
input[type='submit'] {
cursor: pointer;
padding: 1px 6px;
@@ -245,10 +259,11 @@ select {
.summary th {
width: 120px;
}
/* Ref collapses this list table; `separate` shifted every row by the spacing. */
.list {
width: 974px;
margin: 0 auto;
border-collapse: separate;
border-collapse: collapse;
table-layout: auto;
}
.list th,
app/game-frontend/src/views/NpcControlView.vue
+7 -8
View File
@@ -558,9 +558,13 @@ const dropPriority = (event: DragEvent, section: PrioritySectionKey, bucket: Pri
</template>
<style scoped>
:global(html),
:global(body),
:global(#app) {
/*
* The document contract belongs to this page only. An unscoped html/body rule
* here leaked a 21px line-height and a 500px min-width onto every other screen.
*/
:global(html:has(#npc-policy-page)),
:global(body:has(#npc-policy-page)),
:global(#app:has(#npc-policy-page)) {
min-width: 500px;
margin: 0;
background: #000;
@@ -569,11 +573,6 @@ const dropPriority = (event: DragEvent, section: PrioritySectionKey, bucket: Pri
line-height: 21px;
}
:global(body:has(#npc-policy-page)) {
min-width: 500px;
line-height: 21px;
}
.npc-page {
min-height: 100vh;
padding-bottom: 32px;
app/game-frontend/src/views/NpcListView.vue
+8 -1
View File
@@ -179,14 +179,21 @@ onMounted(() => {
word-break: break-all;
}
/* Ref's `.tb_layout td` sets no alignment; individual cells centre themselves. */
.legacy-table td,
.legacy-table th {
border: 1px solid gray;
padding: 0;
text-align: center;
word-break: break-all;
}
/* Ref centres every npc row cell with `align=center`; only the title and
* footer cells keep the default alignment. */
.npc-table td,
.legacy-table th {
text-align: center;
}
.legacy-bg0 {
background-color: transparent;
}
app/game-frontend/src/views/TrafficView.vue
+16 -17
View File
@@ -91,7 +91,7 @@ onMounted(() => {
<table class="legacy-table chart-table legacy-bg0">
<thead>
<tr>
<th colspan="4" class="legacy-bg2 chart-title">접 속 량</th>
<td colspan="4" class="legacy-bg2 chart-title">접 속 량</td>
</tr>
</thead>
<tbody>
@@ -131,7 +131,7 @@ onMounted(() => {
<table class="legacy-table chart-table legacy-bg0">
<thead>
<tr>
<th colspan="4" class="legacy-bg2 chart-title">접 속 자</th>
<td colspan="4" class="legacy-bg2 chart-title">접 속 자</td>
</tr>
</thead>
<tbody>
@@ -173,7 +173,7 @@ onMounted(() => {
<table v-if="data" class="legacy-table suspect-table legacy-bg0">
<thead>
<tr>
<th colspan="3" class="legacy-bg2 chart-title">주 의 대 상 자 (순간과도갱신)</th>
<td colspan="3" class="legacy-bg2 chart-title">주 의 대 상 자 (순간과도갱신)</td>
</tr>
</thead>
<tbody>
@@ -234,27 +234,26 @@ onMounted(() => {
font-size: 14px;
}
/*
* Ref's `.tb_layout td` sets no text alignment; the legacy markup centres
* individual cells with `align=center` instead.
*/
.legacy-table td,
.legacy-table th {
border: 1px solid gray;
padding: 0;
text-align: center;
font-weight: 400;
}
.legacy-bg0 {
background-color: #302016;
background-image: var(--sammo-texture-walnut);
}
.legacy-bg1 {
background-color: #423226;
background-image: var(--sammo-texture-blue);
}
.legacy-bg2 {
background-color: #14241b;
background-image: var(--sammo-texture-green);
.chart-title,
.period,
.time,
.separator,
.spacer,
.record,
.suspect-table td,
.suspect-table th {
text-align: center;
}
.title-table,
app/game-frontend/src/views/YearbookView.vue
+15 -7
View File
@@ -129,7 +129,7 @@ onMounted(async () => {
<strong>연 감</strong>
<button class="legacy-button close-button" type="button" @click="closePage">창 닫기</button>
<span class="settings-menu">
<button class="legacy-button" type="button" @click="settingsOpen = !settingsOpen">⚙ 설정⌄</button>
<button class="legacy-button legacy-button--navigation" type="button" @click="settingsOpen = !settingsOpen">⚙ 설정⌄</button>
<button v-if="settingsOpen" class="settings-item" type="button" @click="toggleRankingPosition">
국가 순서 위치 변경(모바일 전용)
</button>
@@ -139,7 +139,7 @@ onMounted(async () => {
<section class="year-selector">
<span>연월 선택:</span>
<button
class="legacy-button"
class="legacy-button legacy-button--secondary"
type="button"
:disabled="selectedYearMonth === range?.firstYearMonth"
@click="moveMonth(-1)"
@@ -152,7 +152,7 @@ onMounted(async () => {
</option>
</select>
<button
class="legacy-button"
class="legacy-button legacy-button--secondary"
type="button"
:disabled="selectedYearMonth === range?.currentYearMonth"
@click="moveMonth(1)"
@@ -222,7 +222,7 @@ onMounted(async () => {
</template>
<style scoped>
:global(body) {
:global(body:has(.yearbook-page)) {
min-width: 500px;
}
@@ -236,14 +236,20 @@ onMounted(async () => {
background-color: transparent;
}
/* Ref's `.back_bar` keeps default text alignment; only the heading centres. */
.yearbook-title {
position: relative;
min-height: 32px;
text-align: center;
text-align: left;
line-height: 21px;
background-color: transparent;
}
.yearbook-title > strong {
display: block;
text-align: center;
}
.yearbook-title strong {
display: inline-block;
line-height: 32px;
@@ -283,6 +289,7 @@ onMounted(async () => {
border: 1px solid gray;
}
/* Ref's selector row is a `.center.row` with 1px gray rules above and below. */
.year-selector {
display: grid;
grid-template-columns: 110px 110px minmax(220px, 1fr) 110px;
@@ -290,8 +297,10 @@ onMounted(async () => {
align-items: center;
gap: 4px;
min-height: 37.5px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
padding: 0;
text-align: right;
text-align: center;
}
.year-selector select {
@@ -352,7 +361,6 @@ onMounted(async () => {
.history-log {
grid-column: 1 / -1;
overflow: hidden;
}
.history-log:first-of-type {
height: 128px;