프로필 UI 글자 크기를 네 단계와 공통 축소 규칙으로 통일한다

This commit is contained in:
2026-09-29 09:41:39 +00:00
parent 5bafdfc1e7
commit 7c65cf60f3
43 changed files with 1347 additions and 299 deletions
+3 -2
View File
@@ -1,6 +1,7 @@
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import 'tailwindcss';
@import './styles/tokens.css';
@import './styles/typography.css';
@import './styles/legacy-controls.css';
@import './styles/game-shell.css';
@import './styles/ref-shell.css';
@@ -144,7 +145,7 @@ input[inputmode='search'] {
}
.small_war_log .name_plate {
font-size: var(--sammo-font-size-war-name);
font-size: var(--sammo-font-size-small);
}
.small_war_log .name_plate_cover {
@@ -153,5 +154,5 @@ input[inputmode='search'] {
.small_war_log .crew_plate {
color: orangered;
font-size: var(--sammo-font-size-war-crew);
font-size: var(--sammo-font-size-small);
}
+7 -15
View File
@@ -1,22 +1,14 @@
:root {
/* 검증된 화면이 공유하는 네 단계. 콘텐츠 내부 축소/숨김은 별도 계약이다. */
--sammo-font-size-small: calc(var(--sammo-font-size-normal) * 12 / 14);
/* 모든 프로필 UI의 기본 네 단계. smaller는 바로 아래 단계이며 10px에서 멈춘다. */
--sammo-font-size-small: 12px;
--sammo-font-size-normal: 14px;
--sammo-font-size-emphasis: 16px;
--sammo-font-size-title: 24px;
/* 크기 변경을 보류한 밀집 UI와 콘텐츠의 상대 축소 계약. */
--sammo-font-size-nation-card: 12px;
--sammo-font-size-chief-compact-base: 0.75rem;
--sammo-font-size-chief-compact-row: 0.55rem;
--sammo-font-size-chief-compact-header: 0.65rem;
--sammo-font-size-chief-compact-name: 0.6rem;
--sammo-font-size-hall-name: 11px;
--sammo-font-size-hall-secondary: 95%;
--sammo-font-size-personnel-mobile-name: 15px;
--sammo-font-size-personnel-mobile-lock: 10px;
--sammo-font-size-bracket-bet-button: 11px;
--sammo-font-size-war-name: 0.75em;
--sammo-font-size-war-crew: 90%;
--sammo-font-size-minimum: 10px;
--sammo-font-size-smaller: calc(
clamp(var(--sammo-font-size-minimum), 1em - 2px, var(--sammo-font-size-normal)) +
clamp(0px, (1em - var(--sammo-font-size-emphasis)) / 4, 2px)
);
--sammo-font-sans: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
--sammo-color-text: #fff;
--sammo-color-text-muted: rgba(232, 221, 196, 0.7);
@@ -0,0 +1,32 @@
/* 페이지와 공통 컴포넌트가 같은 단계 이름을 사용한다. */
.sammo-text-title {
font-size: var(--sammo-font-size-title);
}
.sammo-text-emphasis {
font-size: var(--sammo-font-size-emphasis);
}
.sammo-text-normal {
font-size: var(--sammo-font-size-normal);
}
.sammo-text-small {
font-size: var(--sammo-font-size-small);
}
/* 부모의 단계에서 한 단계 아래. 12px의 보조 설명만 10px, 중첩해도 더 줄지 않는다. */
small,
sub,
sup,
.sammo-text-smaller,
.legacy-small {
font-size: var(--sammo-font-size-smaller);
}
/* v-fit-text measures from the inherited tier; an extreme name keeps its full title. */
.sammo-fit-text {
display: block;
min-width: 0;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@@ -107,7 +107,7 @@ const handleClick = () => {
.chief-card.compact {
padding: 0;
font-size: var(--sammo-font-size-chief-compact-base);
font-size: var(--sammo-font-size-small);
}
.chief-header {
@@ -175,7 +175,7 @@ const handleClick = () => {
height: 13px;
min-height: 0;
padding: 0 2px;
font-size: var(--sammo-font-size-chief-compact-row);
font-size: var(--sammo-font-size-small);
line-height: 11px;
}
@@ -183,7 +183,7 @@ const handleClick = () => {
box-sizing: border-box;
height: 20px;
min-height: 0;
font-size: var(--sammo-font-size-chief-compact-header);
font-size: var(--sammo-font-size-small);
}
.compact-name,
@@ -210,7 +210,7 @@ const handleClick = () => {
.chief-card.compact .chief-level,
.chief-card.compact .chief-name {
font-size: var(--sammo-font-size-chief-compact-name);
font-size: var(--sammo-font-size-small);
}
.chief-row.rest {
@@ -270,11 +270,6 @@ watch(
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.recruitment-command-form {
box-sizing: border-box;
width: 100%;
@@ -383,7 +378,6 @@ small {
}
.crew-name small {
display: block;
font-size: var(--sammo-font-size-small);
}
.crew-row small {
display: none;
@@ -515,12 +509,8 @@ small {
}
.crew-row small {
display: block;
font-size: var(--sammo-font-size-small);
line-height: 1;
}
.crew-row .crew-name small {
font-size: var(--sammo-font-size-small);
}
.crew-header .attack,
.crew-header .defence,
.crew-header .speed,
@@ -913,11 +913,6 @@ const clickOutsideMenu = (event: Event) => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.reserved-command-editor {
position: relative;
width: 100%;
@@ -1177,7 +1172,6 @@ small {
visibility: visible;
}
.action-column small {
font-size: var(--sammo-font-size-small);
line-height: 1;
}
.reserved-command-editor.mobile .action-column > div.autonomous {
@@ -1379,7 +1373,7 @@ small {
min-width: 0;
margin: 0;
overflow: hidden;
font-size: 18pt;
font-size: var(--sammo-font-size-title);
font-weight: normal;
line-height: 1.2;
white-space: nowrap;
@@ -1388,7 +1382,6 @@ small {
.overlay-title small {
overflow: hidden;
color: #ffe0a0;
font-size: var(--sammo-font-size-small);
text-overflow: ellipsis;
}
.command-picker.argument-overlay .selected-command,
@@ -1457,7 +1450,7 @@ small {
.argument-overlay-bar > .overlay-title {
grid-column: 1 / -1;
grid-row: 1;
font-size: 14pt;
font-size: var(--sammo-font-size-emphasis);
}
}
@@ -355,11 +355,6 @@ const sortHelp = (header: Header): string =>
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.directory-table {
width: 1000px;
border-collapse: collapse;
@@ -631,7 +631,10 @@ watch(
>
- {{ row.name }}
</button>
<span>: <span class="nation-type-pros">{{ row.pros }}</span>,</span>
<span
>: <span class="nation-type-pros">{{ row.pros }}</span
>,</span
>
<span class="nation-type-cons">{{ row.cons }}</span>
</li>
</ul>
@@ -967,11 +970,6 @@ watch(
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.target-search {
grid-column: 1 / -1;
display: flex;
@@ -1186,7 +1184,7 @@ small {
display: grid;
place-items: center;
min-height: 2em;
font-size: 1.3em;
font-size: var(--sammo-font-size-emphasis);
text-align: center;
}
@@ -1467,7 +1465,6 @@ small {
}
.assignment-target-list .target-option small {
font-size: inherit;
line-height: 1.45;
}
@@ -174,11 +174,6 @@ const commandTitle = (command: CommandAvailability) =>
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.command-form {
display: flex;
flex-direction: column;
@@ -214,7 +214,7 @@ const displayChiefName = (chief: NationChief | undefined): string => {
min-width: 0;
height: 193px;
color: #fff;
font-size: var(--sammo-font-size-nation-card);
font-size: var(--sammo-font-size-small);
}
.nation-grid {
@@ -219,11 +219,6 @@ onBeforeUnmount(() => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.personnel-picker-backdrop {
position: fixed;
z-index: 2050;
@@ -437,7 +432,6 @@ small {
.personnel-picker-stats small,
.personnel-picker-details small {
color: #aaa99f;
font-size: var(--sammo-font-size-small);
}
.personnel-picker-stats strong {
color: #f1d47e;
@@ -22,6 +22,11 @@ let chart: Chart<'line'> | undefined;
const render = () => {
if (!canvas.value) return;
chart?.destroy();
const style = getComputedStyle(canvas.value);
const font = {
family: style.fontFamily,
size: Number.parseFloat(style.getPropertyValue('--sammo-font-size-small')),
};
chart = new Chart(canvas.value, {
type: 'line',
data: {
@@ -42,10 +47,13 @@ const render = () => {
maintainAspectRatio: false,
animation: false,
interaction: { mode: 'index', intersect: false },
plugins: { legend: { labels: { color: '#e5eee9' } } },
plugins: {
legend: { labels: { color: '#e5eee9', font } },
tooltip: { titleFont: font, bodyFont: font, footerFont: font },
},
scales: {
x: { ticks: { color: '#c3d0c8', maxTicksLimit: 12 }, grid: { color: '#34473e' } },
y: { ticks: { color: '#c3d0c8' }, grid: { color: '#34473e' } },
x: { ticks: { color: '#c3d0c8', maxTicksLimit: 12, font }, grid: { color: '#34473e' } },
y: { ticks: { color: '#c3d0c8', font }, grid: { color: '#34473e' } },
},
},
});
@@ -342,7 +342,7 @@ const mobilePairs = computed(() => {
border-radius: 3px;
color: #fff3cd;
background: #59400e;
font: 700 var(--sammo-font-size-bracket-bet-button)/1 var(--sammo-font-sans);
font: 700 var(--sammo-font-size-small)/1 var(--sammo-font-sans);
cursor: pointer;
}
.bracket-bet-button:hover,
@@ -228,7 +228,7 @@ onBeforeUnmount(() => editor.value?.destroy());
<span class="legacy-html-editor__sr-only">크기</span>
<select aria-label="글꼴 크기" @change="setFontSize">
<option value="">크기</option>
<option v-for="size in fontSizes" :key="size" :value="size" :style="{ fontSize: size }">
<option v-for="size in fontSizes" :key="size" :value="size">
{{ size }}
</option>
</select>
@@ -0,0 +1,46 @@
import type { ObjectDirective } from 'vue';
type FitState = { observer: ResizeObserver; frame: number; alive: boolean };
const states = new WeakMap<HTMLElement, FitState>();
const fit = (element: HTMLElement): void => {
// Always measure from the CSS tier, so shorter text and wider cells can grow back.
element.style.removeProperty('font-size');
const maximum = Number.parseFloat(getComputedStyle(element).fontSize);
const available = element.clientWidth;
if (!available) return;
const range = document.createRange();
range.selectNodeContents(element);
const natural = range.getBoundingClientRect().width;
const minimum = Number.parseFloat(getComputedStyle(element).getPropertyValue('--sammo-font-size-minimum'));
const size = Math.min(maximum, Math.max(minimum, (maximum * available) / Math.max(natural, 1)));
element.dataset.fontFitMax = String(maximum);
if (size < maximum) element.style.fontSize = `${Math.floor(size * 100) / 100}px`;
};
const schedule = (element: HTMLElement): void => {
const state = states.get(element);
if (!state?.alive) return;
cancelAnimationFrame(state.frame);
state.frame = requestAnimationFrame(() => fit(element));
};
/** One-line UI labels: CSS selects the maximum tier; 10px is the readability floor. */
export const vFitText: ObjectDirective<HTMLElement> = {
mounted(element) {
const observer = new ResizeObserver(() => schedule(element));
states.set(element, { observer, frame: 0, alive: true });
observer.observe(element);
schedule(element);
void document.fonts.ready.then(() => schedule(element));
},
updated: schedule,
beforeUnmount(element) {
const state = states.get(element);
if (!state) return;
state.alive = false;
cancelAnimationFrame(state.frame);
state.observer.disconnect();
states.delete(element);
},
};
+1 -1
View File
@@ -1,3 +1,3 @@
import { formatLegacyLogHtml } from '@sammo-ts/common/logging/formatLegacyLogHtml';
export const formatLog = (text?: string): string => formatLegacyLogHtml(text);
export const formatLog = (text?: string): string => formatLegacyLogHtml(text, { smallText: 'semantic' });
+17 -14
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { vFitText } from '../directives/fitText';
import { usePageExit } from '../composables/usePageExit';
import { onMounted, ref, watch } from 'vue';
@@ -117,11 +118,18 @@ watch(viewMode, () => {
@error="useDefaultGeneralIcon"
/>
</div>
<div class="hall-nation" :style="{ backgroundColor: entry.bgColor, color: entry.fgColor }">
<div
v-fit-text
class="hall-nation sammo-fit-text"
:title="entry.nationName || '-'"
:style="{ backgroundColor: entry.bgColor, color: entry.fgColor }"
>
{{ entry.nationName || '-' }}
</div>
<div class="hall-name" :style="{ backgroundColor: entry.bgColor, color: entry.fgColor }">
<span>{{ entry.name || '-' }}</span>
<span v-fit-text class="sammo-fit-text" :title="entry.name || '-'">{{
entry.name || '-'
}}</span>
<small v-if="entry.ownerName">({{ entry.ownerName }})</small>
</div>
<div class="hall-value">{{ entry.printValue }}</div>
@@ -152,7 +160,9 @@ watch(viewMode, () => {
/>
</div>
<div
class="hall-nation"
v-fit-text
class="hall-nation sammo-fit-text"
:title="entry.owner.nationName || '-'"
:style="{ backgroundColor: entry.owner.bgColor, color: entry.owner.fgColor }"
>
{{ entry.owner.nationName || '-' }}
@@ -161,7 +171,9 @@ watch(viewMode, () => {
class="hall-name"
:style="{ backgroundColor: entry.owner.bgColor, color: entry.owner.fgColor }"
>
<span>{{ entry.owner.name || '-' }}</span>
<span v-fit-text class="sammo-fit-text" :title="entry.owner.name || '-'">{{
entry.owner.name || '-'
}}</span>
</div>
</li>
</ul>
@@ -179,11 +191,6 @@ watch(viewMode, () => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
:global(body:has(.legacy-ranking-page)) {
min-width: 500px;
overflow-x: hidden;
@@ -346,7 +353,7 @@ small {
.hall-nation,
.hall-name {
font-size: var(--sammo-font-size-hall-name);
font-size: var(--sammo-font-size-small);
}
.hall-name {
@@ -356,10 +363,6 @@ small {
justify-content: center;
}
.hall-name small {
font-size: var(--sammo-font-size-hall-secondary);
}
.hall-value {
box-sizing: border-box;
padding: 3px 0;
@@ -281,11 +281,6 @@ const placeBet = async (target: TournamentBracketSlot) => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.betting-page {
width: 100%;
max-width: 1200px;
@@ -347,7 +342,6 @@ small {
}
.section-title small {
color: orange;
font-size: var(--sammo-font-size-normal);
}
select {
width: 100%;
@@ -552,9 +546,6 @@ select:disabled {
white-space: normal;
}
}
.betting-page small {
font-size: var(--sammo-font-size-small);
}
.bet-preset {
position: relative;
display: grid;
+17 -17
View File
@@ -796,27 +796,27 @@ const repeatTurns = async (amount: number) => {
}
.chief-overview-frame {
width: 500px;
height: 310px;
height: 448px;
margin-top: 0;
margin-bottom: 11px;
overflow: hidden;
}
.chief-overview {
width: 500px;
height: 310px;
height: 448px;
margin-top: 0;
display: flex;
flex-direction: column;
}
.chief-overview-row {
width: 500px;
height: 155px;
height: 224px;
display: grid;
grid-template-columns: 12px repeat(4, 119px) 12px;
}
.chief-overview :deep(.chief-card) {
width: 119px;
height: 155px;
height: 224px;
border: 0;
border-left: 1px solid #fff;
box-shadow: none;
@@ -827,26 +827,26 @@ const repeatTurns = async (amount: number) => {
}
.chief-overview :deep(.chief-card.compact .chief-row) {
grid-template-columns: 38px minmax(0, 1fr);
height: 11.25px !important;
height: 16px !important;
min-height: 0;
padding: 0;
gap: 0;
text-align: center;
font-size: var(--sammo-font-size-chief-compact-row);
line-height: 11.25px !important;
font-size: var(--sammo-font-size-small);
line-height: 16px !important;
}
.chief-overview :deep(.chief-card.compact .chief-header) {
box-sizing: border-box;
height: 20px !important;
min-height: 20px !important;
height: 32px !important;
min-height: 32px !important;
grid-template-columns: 1fr;
grid-template-rows: 10px 10px;
line-height: 10px;
grid-template-rows: 16px 16px;
line-height: 16px;
}
.chief-overview :deep(.compact-name),
.chief-overview :deep(.compact-meta) {
height: 10px;
line-height: 10px;
height: 16px;
line-height: 16px;
}
.chief-overview :deep(.row-time),
.chief-overview :deep(.row-action) {
@@ -855,12 +855,12 @@ const repeatTurns = async (amount: number) => {
}
.overview-turn-index {
display: grid;
grid-template-rows: 20px repeat(12, 11.25px);
grid-template-rows: 32px repeat(12, 16px);
width: 12px;
height: 155px;
height: 224px;
color: #fff;
font-size: var(--sammo-font-size-chief-compact-row);
line-height: 11.25px;
font-size: var(--sammo-font-size-small);
line-height: 16px;
text-align: center;
}
.overview-turn-index span {
@@ -133,11 +133,6 @@ onMounted(() => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.directory-page {
width: 1000px;
margin: 0 auto;
+11 -12
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { vFitText } from '../directives/fitText';
import { usePageExit } from '../composables/usePageExit';
import { computed, onMounted, ref, watch } from 'vue';
@@ -169,11 +170,18 @@ onMounted(loadOptions);
>
{{ entry.serverName }}{{ entry.serverIdx }}기
</div>
<div class="hall-nation" :style="{ backgroundColor: entry.bgColor, color: entry.fgColor }">
<div
v-fit-text
class="hall-nation sammo-fit-text"
:title="entry.nationName || '-'"
:style="{ backgroundColor: entry.bgColor, color: entry.fgColor }"
>
{{ entry.nationName || '-' }}
</div>
<div class="hall-name" :style="{ backgroundColor: entry.bgColor, color: entry.fgColor }">
<span>{{ entry.name || '-' }}</span>
<span v-fit-text class="sammo-fit-text" :title="entry.name || '-'">{{
entry.name || '-'
}}</span>
<small v-if="entry.ownerName">({{ entry.ownerName }})</small>
</div>
<div class="hall-value">{{ entry.printValue }}</div>
@@ -193,11 +201,6 @@ onMounted(loadOptions);
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
/* Ref's document does not clip; the page column stays 500px wide instead. */
:global(body:has(.legacy-hall-page)) {
min-width: 500px;
@@ -349,7 +352,7 @@ small {
.hall-server,
.hall-nation,
.hall-name {
font-size: var(--sammo-font-size-hall-name);
font-size: var(--sammo-font-size-small);
}
.hall-name {
@@ -359,10 +362,6 @@ small {
justify-content: center;
}
.hall-name small {
font-size: var(--sammo-font-size-hall-secondary);
}
.hall-value {
box-sizing: border-box;
padding: 3px 0;
@@ -787,11 +787,6 @@ onMounted(() => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.top-back-bar {
width: min(100%, 1000px);
height: 32px;
+3 -10
View File
@@ -1270,11 +1270,6 @@ onMounted(() => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.join-page {
min-height: 100vh;
padding: 24px;
@@ -1519,7 +1514,6 @@ small {
.advanced-title small {
color: #ccc;
font-size: var(--sammo-font-size-small);
font-weight: 400;
}
@@ -1871,10 +1865,6 @@ small {
max-width: none;
}
.npc-general-name small {
font-size: var(--sammo-font-size-small);
}
#btn-print-more-generals {
width: 100%;
min-height: 28px;
@@ -1883,6 +1873,9 @@ small {
.muted {
color: rgba(232, 221, 196, 0.6);
}
.muted:not(small) {
font-size: var(--sammo-font-size-small);
}
@@ -314,11 +314,6 @@ onBeforeUnmount(() => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.legacy-page {
box-sizing: border-box;
width: 100%;
@@ -1015,11 +1015,6 @@ onBeforeUnmount(() => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.general-page {
width: 1000px;
min-width: 1000px;
@@ -422,11 +422,6 @@ onBeforeUnmount(() => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.directory-page {
width: 1000px;
margin: 0 auto;
@@ -609,11 +609,6 @@ onMounted(() => void loadPersonnel());
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.legacy-office {
width: 1000px;
min-height: 100vh;
@@ -758,7 +753,6 @@ select {
.chief-entry-copy small {
overflow: hidden;
color: #c8c5bc;
font-size: var(--sammo-font-size-small);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -855,9 +849,6 @@ select {
.city-identity strong {
display: block;
}
.city-identity small {
font-size: var(--sammo-font-size-small);
}
.city-officer-cell {
padding: 5px !important;
vertical-align: middle;
@@ -880,7 +871,6 @@ select {
}
.city-officer-copy small {
color: #c9c6bd;
font-size: var(--sammo-font-size-small);
}
.city-change-button {
min-width: 70px;
@@ -949,10 +939,7 @@ select {
height: 48px;
}
.chief-entry-copy strong {
font-size: var(--sammo-font-size-personnel-mobile-name);
}
.chief-entry-copy small {
font-size: var(--sammo-font-size-small);
font-size: var(--sammo-font-size-emphasis);
}
.personnel-change-button {
min-height: 30px;
@@ -961,7 +948,7 @@ select {
line-height: 18px;
}
.personnel-lock-label {
font-size: var(--sammo-font-size-personnel-mobile-lock);
font-size: var(--sammo-font-size-smaller);
}
.award-label {
font-size: var(--sammo-font-size-small);
@@ -995,9 +982,6 @@ select {
width: 16%;
font-size: var(--sammo-font-size-small);
}
.city-identity small {
font-size: var(--sammo-font-size-small);
}
.city-officer-cell {
padding: 4px !important;
}
@@ -1008,9 +992,6 @@ select {
.city-officer-copy strong {
font-size: var(--sammo-font-size-small);
}
.city-officer-copy small {
font-size: var(--sammo-font-size-small);
}
.city-change-button {
width: 100%;
min-width: 0;
+2 -4
View File
@@ -2,9 +2,7 @@
<template>
<main class="min-h-screen px-6 py-8">
<h1 class="text-2xl font-semibold">Not Found</h1>
<p class="mt-2 text-sm text-amber-200/80">
The requested page does not exist.
</p>
<h1 class="sammo-text-title font-semibold">Not Found</h1>
<p class="mt-2 sammo-text-normal text-amber-200/80">The requested page does not exist.</p>
</main>
</template>
@@ -555,11 +555,6 @@ const submitPriority = async (section: PrioritySectionKey) => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
/*
* 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.
@@ -813,7 +808,6 @@ small {
}
.priority-description small {
font-size: var(--sammo-font-size-small);
line-height: 18.375px;
}
@@ -363,11 +363,6 @@ const start = async () => {
</template>
<style scoped>
/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
small {
font-size: var(--sammo-font-size-small);
}
.legacy-page {
width: 100%;
max-width: 1200px;