짧은 UI 텍스트의 세로 정렬과 두 축 정렬 원칙을 적용한다

2026-09-29 08:51:05 +00:00
parent 295ecb39a3
commit 71155186b7
31 changed files with 293 additions and 3 deletions
@@ -39,6 +39,7 @@
 }

 .game-shell__action {
+    align-content: safe center;
    border: 1px solid var(--sammo-color-border);
    padding: 6px 12px;
    background: var(--sammo-color-action-bg);
@@ -1,4 +1,5 @@
 .legacy-button {
+    align-content: safe center;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid var(--sammo-button-base1-border);
@@ -310,6 +310,7 @@ small {
    text-align: center;
 }
 .recruitment-status > span {
+    align-content: safe center;
    padding: 4px 2px;
 }
 .injured {
@@ -157,6 +157,7 @@ const nationStyle = computed(() => {

 .city-title,
 .city-nation {
+    align-content: safe center;
    grid-column: 1 / -1;
    min-width: 0;
    border-top: 1px solid gray;
@@ -481,6 +481,7 @@ const specialText = computed(() => {
 }

 .general-basic-grid > * {
+    align-content: safe center;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
@@ -117,6 +117,7 @@ const killRate = computed(() => {
 }

 .battle-general-extra > * {
+    align-content: safe center;
    min-height: 24px;
    box-sizing: border-box;
    border-right: 1px solid #777;
@@ -142,6 +142,7 @@ watch(
 }

 .activity-status .status-row {
+    align-content: safe center;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
@@ -23,6 +23,7 @@ defineProps<{
 }

 .record-title {
+    align-content: safe center;
    box-sizing: border-box;
    height: 23px;
    margin: 0;
@@ -114,6 +114,7 @@ const experiencePercent = computed(() =>
 .stat-grid > *,
 .experience-row > *,
 .dex-row > * {
+    align-content: safe center;
    box-sizing: border-box;
    min-width: 0;
    border-right: 1px solid #666;
@@ -1617,7 +1617,7 @@ button:disabled {
 /*
 * 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.
+ * emits. Core centers the compact label/value cells vertically.
 */
 .summary-table th,
 .summary-table td {
@@ -1625,7 +1625,7 @@ button:disabled {
    border-bottom: 1px solid #444;
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0);
    text-align: left;
-    vertical-align: top;
+    vertical-align: middle;
 }

 .summary-table th {
@@ -693,6 +693,7 @@ onBeforeUnmount(() => {
 }

 .panel-header {
+    align-content: safe center;
    height: 18px;
    text-align: center;
 }
@@ -1705,6 +1705,7 @@ small {
 }

 .npc-token-status {
+    align-content: safe center;
    min-height: 22px;
    text-align: center;
    font-size: var(--sammo-font-size-small);
@@ -597,6 +597,7 @@ onMounted(() => {
 }

 .payout-row > div {
+    align-content: safe center;
    min-width: 0;
    padding: 0 4px;
 }
@@ -677,6 +677,7 @@ select {
    font: inherit;
 }
 .nation-heading {
+    align-content: safe center;
    height: 32px;
    text-align: center;
    font-size: var(--sammo-font-size-title);
@@ -530,6 +530,7 @@ textarea:focus-visible {
    text-align: center;
 }
 .diplomacy-row > div {
+    align-content: safe center;
    border-bottom: 1px solid gray;
    overflow: hidden;
    white-space: nowrap;
@@ -618,6 +619,7 @@ textarea {
    width: 50%;
 }
 .blue-heading {
+    align-content: safe center;
    height: 18.19px;
    text-align: center;
    background: var(--sammo-texture-blue);
@@ -633,6 +635,9 @@ textarea {
 .green-label {
    background: var(--sammo-texture-green);
 }
+.budget-row > span {
+    align-content: safe center;
+}
 .budget-row > span,
 .green-label,
 .policy-control,
@@ -647,6 +647,7 @@ small {
 }

 .section_bar {
+    align-content: safe center;
    min-height: 23px;
    border: 0.5px solid #aaa;
    box-sizing: border-box;
@@ -826,6 +827,7 @@ small {
 }

 .sub_bar {
+    align-content: safe center;
    height: 22px;
    margin: 0 5px;
    border: 0.5px solid #aaa;
@@ -661,6 +661,7 @@ th {

 .hall-battle-record dt,
 .hall-battle-record dd {
+    align-content: safe center;
    margin: 0;
    padding: 2px 5px;
 }