편집토론문서 역사

미디어위키:Nation List Manager.css

Nxdsxn (토론 | 기여)님의 2026년 7월 5일 (일) 22:59 판 (Install package: wiki-nation-flag-alpha-stroke-color-sync-20260705 / css/Nation_List_Manager.css)

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

  • 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
  • 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
  • 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
  • 오페라: Ctrl-F5를 입력.
.nation-list-manager,
.nation-list-manager * {
box-sizing:border-box;
}

.nation-list-shell,
.nation-list-loading {
position:relative;
width:100%;
background:#080808;
border:1px solid #000;
color:#d8d8d8;
font-size:12px;
line-height:1.45;
box-shadow:
inset 0 1px 0 #1a1a1a,
inset 0 -1px 0 #050505;
}

.nation-list-loading {
padding:10px;
background:#101010;
}

.nation-list-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-height:32px;
padding:0 8px;
background:#111111;
border-bottom:1px solid #000;
}

.nation-list-title {
font-weight:700;
letter-spacing:.04em;
color:#e2e2e2;
text-shadow:1px 1px 0 #000;
}

.nation-list-summary {
color:#888;
font-size:11px;
white-space:nowrap;
}

.nation-list-toolbar {
display:flex;
align-items:center;
gap:5px;
padding:6px;
background:#0b0b0b;
border-bottom:1px solid #000;
}

.nation-list-toolbar label {
display:flex;
align-items:center;
gap:5px;
color:#aaa;
white-space:nowrap;
}

.nation-list-toolbar select,
.nation-list-toolbar input[type="search"],
.nation-list-table input[type="text"] {
height:25px;
background:#070707;
color:#e2e2e2;
border:1px solid #000;
box-shadow:
inset 1px 1px 0 #020202,
inset -1px -1px 0 #191919;
outline:none;
border-radius:0;
padding:4px 6px;
font:inherit;
}

.nation-list-toolbar input[type="search"] {
width:320px;
}

.nation-list-toolbar button,
.nation-list-add,
.nation-list-move,
.nation-list-delete,
.nation-list-continent-tab {
border:1px solid #000;
background:#171717;
color:#dcdcdc;
border-radius:0;
font:inherit;
cursor:pointer;
box-shadow:
inset 0 1px 0 #333,
inset 0 -1px 0 #080808;
}

.nation-list-toolbar button {
height:25px;
padding:0 8px;
}

.nation-list-toolbar button:hover,
.nation-list-add:hover,
.nation-list-move:hover,
.nation-list-delete:hover,
.nation-list-continent-tab:hover {
background:#222222;
color:#ffffff;
}

.nation-list-status {
margin-left:auto;
color:#9db7c7;
font-size:11px;
white-space:nowrap;
}

.nation-list-warning-box {
display:flex;
flex-direction:column;
gap:4px;
padding:6px;
background:#080808;
border-bottom:1px solid #000;
}

.nation-list-warning {
padding:5px 7px;
border:1px solid #202020;
background:#101010;
color:#aaa;
font-size:11px;
line-height:1.45;
}

.nation-list-warning.is-ok {
color:#9fc59f;
border-color:#1e3520;
background:#0c130c;
}

.nation-list-warning.is-warn {
color:#d0b16e;
border-color:#493a16;
background:#151006;
}

.nation-list-warning.is-soft {
color:#8a8a8a;
}

.nation-list-continent-tabs {
display:grid;
grid-template-columns:repeat(6, minmax(0,1fr));
gap:3px;
padding:6px;
background:#0b0b0b;
border-bottom:1px solid #000;
}

.nation-list-continent-tab {
height:26px;
padding:0 6px;
font-weight:700;
}

.nation-list-continent-tab.is-active {
background:#1d1d1d;
color:#ffffff;
border-top-color:#555555;
}

.nation-list-body {
max-height:calc(100vh - 285px);
overflow:auto;
padding:6px;
}

.nation-list-region {
margin:0 0 7px;
border:1px solid #000;
background:#0b0b0b;
box-shadow:
inset 0 1px 0 #191919,
inset 0 -1px 0 #050505;
}

.nation-list-region:last-child {
margin-bottom:0;
}

.nation-list-region-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-height:28px;
padding:0 6px;
background:#111111;
border-bottom:1px solid #000;
}

.nation-list-region-title {
font-weight:700;
color:#e2e2e2;
}

.nation-list-region-count {
margin-left:7px;
color:#777;
font-size:11px;
}

.nation-list-add {
height:22px;
padding:0 7px;
font-size:11px;
}

.nation-list-table-wrap {
overflow:auto;
}

.nation-list-table {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}

.nation-list-table th,
.nation-list-table td {
border:1px solid #000;
padding:4px;
vertical-align:middle;
background:#0d0d0d;
}

.nation-list-table th {
background:#151515;
color:#aaa;
font-size:11px;
font-weight:600;
}

.nation-list-table tr:hover td {
background:#141414;
}

.nation-list-table input[type="text"] {
width:100%;
}

.nation-list-order-col {
width:56px;
text-align:center;
}

.nation-list-small-col {
width:58px;
text-align:center;
}

.nation-list-check-col {
width:48px;
text-align:center;
}

.nation-list-action-col {
width:56px;
text-align:center;
}

.nation-list-move {
width:22px;
height:22px;
margin:0 1px;
padding:0;
line-height:18px;
}

.nation-list-delete {
height:22px;
padding:0 6px;
font-size:11px;
}

.nation-list-delete:hover {
background:#2a1515;
color:#ffd0d0;
}

.nation-list-flag-cell {
display:grid;
grid-template-columns:24px minmax(0,1fr);
align-items:center;
gap:5px;
}

.nation-list-flag-cell img,
.nation-list-flag-cell span {
display:block;
width:16px;
height:16px;
object-fit:contain;
background:#080808;
border:1px solid #050505;
box-shadow:0 0 0 1px #2b2b2b;
}

.nation-list-flag-cell span {
box-shadow:none;
border-color:#202020;
background:#050505;
}

.nation-list-empty {
height:31px;
text-align:center;
color:#777;
background:#0b0b0b !important;
}

/* 20260705: 국가 목록 관리 - 드래그 정렬 / 저장 시 국기 보정 */
.nation-list-toolbar select,
.nation-list-table select {
height:25px;
background:#070707;
color:#e2e2e2;
border:1px solid #000;
box-shadow:
inset 1px 1px 0 #020202,
inset -1px -1px 0 #191919;
outline:none;
border-radius:0;
padding:3px 5px;
font:inherit;
}

.nation-list-body {
max-height:none;
overflow:visible;
}

.nation-list-table-wrap {
overflow:visible;
}

.nation-list-drag-col {
width:46px;
text-align:center;
}

.nation-list-offset-col {
width:86px;
text-align:center;
}

.nation-list-drag-handle {
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;
height:22px;
background:#171717;
border:1px solid #000;
box-shadow:
inset 0 1px 0 #333,
inset 0 -1px 0 #080808;
color:#c8c8c8;
cursor:grab;
user-select:none;
font-weight:700;
line-height:1;
}

.nation-list-drag-handle:hover {
background:#222222;
color:#ffffff;
}

.nation-list-table tr[draggable="true"] {
cursor:default;
}

.nation-list-table tr.is-dragging td {
opacity:.42;
background:#101010 !important;
}

.nation-list-table tr.is-drop-before td {
box-shadow:inset 0 2px 0 #d0b16e;
}

.nation-list-table tr.is-drop-after td {
box-shadow:inset 0 -2px 0 #d0b16e;
}

.nation-list-table tbody.is-region-drop {
box-shadow:inset 0 0 0 1px #493a16;
}

.nation-list-measure-stage {
position:absolute;
left:-10000px;
top:-10000px;
width:auto;
height:auto;
visibility:hidden;
pointer-events:none;
white-space:nowrap;
font-size:12px;
line-height:1.45;
}

.nation-list-measure-item {
display:inline-block;
margin:0 16px 0 0;
}

.nation-list-offset-col select {
width:100%;
}

/* 20260705: Nation List Manager flag picker */
.nation-list-flag-input {
font-family:inherit;
}

.nation-list-flag-picker {
position:absolute;
z-index:1000;
max-height:260px;
overflow:auto;
background:#080808;
border:1px solid #000;
box-shadow:
inset 0 1px 0 #2b2b2b,
inset 0 -1px 0 #050505,
0 8px 18px rgba(0,0,0,.65);
padding:4px;
}

.nation-list-flag-picker[hidden] {
display:none;
}

.nation-list-flag-picker-loading,
.nation-list-flag-picker-empty {
padding:6px;
color:#8a8a8a;
background:#101010;
border:1px solid #202020;
}

.nation-list-flag-option {
display:grid;
grid-template-columns:22px minmax(0,1fr);
align-items:center;
gap:6px;
width:100%;
min-height:26px;
margin:0 0 3px;
padding:3px 5px;
border:1px solid #202020;
background:#101010;
color:#d8d8d8;
text-align:left;
cursor:pointer;
box-sizing:border-box;
font:inherit;
}

.nation-list-flag-option:last-child {
margin-bottom:0;
}

.nation-list-flag-option:hover {
background:#1d1d1d;
border-color:#333;
color:#fff;
}

.nation-list-flag-option img {
display:block;
width:16px;
height:auto;
max-height:16px;
object-fit:contain;
border:1px solid #050505;
background:#080808;
box-sizing:content-box;
}

.nation-list-flag-option span {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

/* 20260705: Nation List ↔ Nation Link Map 연동 상태 */
.nation-list-link-col {
width:112px;
text-align:center;
}

.nation-list-link-status {
display:flex;
align-items:center;
justify-content:center;
gap:4px;
min-height:24px;
font-size:11px;
white-space:nowrap;
}

.nation-list-link-status > span {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:19px;
padding:1px 6px;
border:1px solid #202020;
background:#101010;
color:#9a9a9a;
box-shadow:inset 0 1px 0 #1d1d1d,inset 0 -1px 0 #050505;
}

.nation-list-link-status.is-ok > span {
color:#9fc59f;
border-color:#1e3520;
background:#0c130c;
}

.nation-list-link-status.is-missing > span,
.nation-list-link-status.is-flag-mismatch > span,
.nation-list-link-status.is-incomplete > span {
color:#d0b16e;
border-color:#493a16;
background:#151006;
}

.nation-list-link-status.is-soft > span {
color:#777;
}

.nation-list-link-create,
.nation-list-link-sync-one {
height:21px;
padding:0 5px;
border:1px solid #000;
background:#171717;
color:#dcdcdc;
border-radius:0;
font:inherit;
font-size:11px;
cursor:pointer;
box-shadow:inset 0 1px 0 #333,inset 0 -1px 0 #080808;
}

.nation-list-link-create:hover,
.nation-list-link-sync-one:hover {
background:#222;
color:#fff;
}


.nation-list-tag-col {
width:58px;
min-width:58px;
text-align:center;
}

.nation-list-tag-col input[type="text"] {
width:48px;
text-align:center;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
}


/* 20260705: unified flag editor
   The flag field is a normal text input. The preview is an absolute overlay inside the input field,
   so it never creates a separate grid column and cannot squeeze, split, or replace the input. */
.nation-list-table-wrap {
  overflow:auto;
}

.nation-list-table {
  width:max-content;
  min-width:100%;
  table-layout:auto;
  border-collapse:collapse;
}

.nation-list-table th,
.nation-list-table td {
  white-space:nowrap;
  vertical-align:middle;
}

.nation-list-flag-col {
  width:430px;
  min-width:430px;
}

.nation-list-flag-cell {
  display:block;
}

.nation-list-flag-field {
  position:relative;
  display:block;
  width:100%;
  min-width:0;
}

.nation-list-flag-input {
  display:block;
  width:100%;
  height:25px;
  min-width:0;
  box-sizing:border-box;
  padding-left:6px;
}

.nation-list-flag-field.has-preview .nation-list-flag-input {
  padding-left:31px;
}

.nation-list-flag-thumb {
  position:absolute;
  left:7px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:16px;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:2;
}

.nation-list-flag-field.has-preview .nation-list-flag-thumb {
  display:flex;
}

.nation-list-flag-preview,
.nation-list-flag-option img {
  display:block;
  width:auto;
  height:auto;
  max-width:16px;
  max-height:16px;
  min-width:0;
  min-height:0;
  object-fit:contain;
  border:1px solid #050505;
  background:#080808;
  box-sizing:content-box;
  box-shadow:none;
}

.nation-list-flag-preview.is-missing,
.nation-list-flag-option img.is-missing,
.nation-list-flag-field.is-flag-missing .nation-list-flag-thumb {
  display:none !important;
}

.nation-list-flag-field.is-flag-missing,
.nation-list-flag-cell.is-flag-missing {
  background:transparent;
}

.nation-list-flag-field.is-flag-missing .nation-list-flag-input {
  padding-left:6px;
  border-color:#000;
  box-shadow:inset 1px 1px 0 #020202,inset -1px -1px 0 #191919;
}


/* 20260705: restore stable flag field structure
   Preview is a real fixed slot beside the normal input, not an overlay inside it. */
.nation-list-table-wrap {
  overflow:auto !important;
}

.nation-list-table {
  width:max-content !important;
  min-width:100% !important;
  table-layout:auto !important;
  border-collapse:collapse;
}

.nation-list-table th,
.nation-list-table td {
  white-space:nowrap;
  vertical-align:middle;
}

.nation-list-flag-col {
  width:460px !important;
  min-width:460px !important;
  max-width:none !important;
}

.nation-list-flag-field {
  position:static !important;
  display:grid !important;
  grid-template-columns:24px minmax(390px,1fr) !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
}

.nation-list-flag-thumb {
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  width:20px !important;
  height:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
  z-index:auto !important;
}

.nation-list-flag-input {
  display:block !important;
  width:100% !important;
  min-width:390px !important;
  height:25px !important;
  box-sizing:border-box !important;
  padding-left:6px !important;
}

.nation-list-flag-field.has-preview .nation-list-flag-input,
.nation-list-flag-field.is-flag-missing .nation-list-flag-input {
  padding-left:6px !important;
}

.nation-list-flag-preview,
.nation-list-flag-option img {
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:16px !important;
  max-height:16px !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  border:1px solid #050505;
  background:#080808;
  box-sizing:content-box;
  box-shadow:none;
}

.nation-list-flag-preview.is-missing,
.nation-list-flag-option img.is-missing,
.nation-list-flag-field.is-flag-missing .nation-list-flag-thumb img {
  display:none !important;
}

/* 20260705: 통합 Nation Manager - 링크맵 필드까지 한 행에서 관리 */
.nation-list-table-wrap {
  overflow:auto !important;
}

.nation-list-table {
  width:max-content !important;
  min-width:100% !important;
  table-layout:auto !important;
  border-collapse:collapse;
}

.nation-list-table th,
.nation-list-table td {
  white-space:nowrap;
  vertical-align:middle;
}

.nation-list-drag-col { width:46px; min-width:46px; }
.nation-list-tag-col { width:58px; min-width:58px; }
.nation-list-color-col { width:112px; min-width:112px; }
.nation-list-name-col { width:190px; min-width:190px; }
.nation-list-link-col { width:104px; min-width:104px; }
.nation-list-flag-col { width:460px !important; min-width:460px !important; max-width:none !important; }
.nation-list-small-col { width:58px; min-width:58px; }
.nation-list-check-col { width:48px; min-width:48px; }
.nation-list-offset-col { width:86px; min-width:86px; }
.nation-list-parent-col { width:112px; min-width:112px; }
.nation-list-relation-col { width:140px; min-width:140px; }
.nation-list-note-col { width:190px; min-width:190px; }
.nation-list-action-col { width:56px; min-width:56px; }

.nation-list-color-field {
  display:grid;
  grid-template-columns:20px minmax(76px,1fr);
  align-items:center;
  gap:5px;
  width:100%;
}

.nation-list-color-field span {
  display:block;
  width:20px;
  height:14px;
  border:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.55);
  background:#333;
}

.nation-list-color-field input[type="text"] {
  min-width:76px;
}

.nation-list-name-col input[type="text"],
.nation-list-parent-col input[type="text"],
.nation-list-relation-col input[type="text"],
.nation-list-note-col input[type="text"] {
  min-width:0;
}

.nation-list-flag-field {
  position:static !important;
  display:grid !important;
  grid-template-columns:24px minmax(390px,1fr) !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
}

.nation-list-flag-thumb {
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  width:20px !important;
  height:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
  z-index:auto !important;
}

.nation-list-flag-input {
  display:block !important;
  width:100% !important;
  min-width:390px !important;
  height:25px !important;
  box-sizing:border-box !important;
  padding-left:6px !important;
}

.nation-list-flag-field.has-preview .nation-list-flag-input,
.nation-list-flag-field.is-flag-missing .nation-list-flag-input {
  padding-left:6px !important;
}

.nation-list-flag-preview,
.nation-list-flag-option img {
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:16px !important;
  max-height:16px !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  border:1px solid #050505;
  background:#080808;
  box-sizing:content-box;
  box-shadow:none;
}

.nation-list-flag-preview.is-missing,
.nation-list-flag-option img.is-missing,
.nation-list-flag-field.is-flag-missing .nation-list-flag-thumb img {
  display:none !important;
}

/* 20260705: 국기 미리보기 획을 국가 목록과 같은 alpha-stroke 기준으로 통일 */
:root {
  --clbi-flag-stroke-dark:#050505;
  --clbi-flag-stroke-light:#2b2b2b;
  --clbi-flag-stroke-filter:
    drop-shadow(0 0 .65px var(--clbi-flag-stroke-dark))
    drop-shadow(0 0 .65px var(--clbi-flag-stroke-dark))
    drop-shadow(0 1px 0 var(--clbi-flag-stroke-light));
}

.nation-list-flag-preview,
.nation-list-flag-option img {
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  filter:var(--clbi-flag-stroke-filter) !important;
}

.nation-list-flag-preview.is-missing,
.nation-list-flag-field.is-flag-missing .nation-list-flag-thumb img {
  filter:none !important;
}