프로필 UI 글자 크기를 네 단계와 공통 축소 규칙으로 통일한다
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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,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' });
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,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;
|
||||
|
||||
Reference in New Issue
Block a user