fix(frontend): restore Ref document and control contracts
Ref's `.bg0/.bg1/.bg2` set only a background image and `html, body` centre the texture with vertical tiling, so the extra background colours and the default tiling are removed. Two ranking views declared unscoped `body` rules that leaked a 500px min-width and a 21px line-height onto every screen; each page now owns its own contract. Controls that Ref renders with the Bootstrap/Lumen family get the shared modifier so the bottom edge moves on hover and while pressed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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) /
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -181,7 +181,7 @@ onMounted(loadOptions);
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:global(body) {
|
||||
:global(body:has(.legacy-hall-page)) {
|
||||
min-width: 500px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@@ -346,7 +346,7 @@ onMounted(loadOptions);
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
:global(body) {
|
||||
:global(body:has(.legacy-hall-page)) {
|
||||
min-width: 1000px;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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="
|
||||
@@ -258,6 +258,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 +283,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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user