미디어위키:Common.css

Murph38 (토론 | 기여)님의 2025년 9월 4일 (목) 18:22 판

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

  • 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
  • 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
  • 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
/* ===== WATCHWIKI MAIN PAGE — FLAT TIFFANY BLUE =====
   기본 대문(대문), 프로젝트 네임스페이스형(시계위키: 대문), 영문(Main_Page) 모두 타깃 */
.page-대문,
.page-시계위키\:_대문,
.page-Main_Page {
  /* 팔레트: 그라디언트 없이 평면톤 */
  --ww-bg:        #eafaf8;              /* 연한 티파니 블루 배경 */
  --ww-ink:       #0e3a37;              /* 포인트 텍스트 컬러(딥 틸) */
  --ww-line:      rgba(17,151,143,.14); /* 아주 옅은 틴티드 선/보더 */
  --ww-link:      #11978f;              /* 링크 */
  --ww-link-hov:  #0d7c75;              /* 링크 호버 */
  --ww-shadow:    0 8px 24px rgba(0,0,0,.06); /* 뉴트럴 그림자(촌스럽지 않게) */
}

/* 배경(히어로): 단색만 사용 */
.page-대문 .main-hero,
.page-시계위키\:_대문 .main-hero,
.page-Main_Page .main-hero {
  padding: 56px 16px;
  background-color: var(--ww-bg);   /* 단색! */
  border-top: 1px solid var(--ww-line);
  border-bottom: 1px solid var(--ww-line);
}

/* Vector 2022: 로고 아이콘 숨기고(작은 로고), 워드마크/텍스트만 표시 */
.skin-vector-2022 .mw-logo-icon,
.skin-vector-2022 .vector-sticky-header-logo { display: none !important; }

/* 여백 정리 (선택) */
.skin-vector-2022 .mw-logo-wordmark { margin-left: 0 !important; }

/* 카드(본문 박스) */
.page-대문 .main-card,
.page-시계위키\:_대문 .main-card,
.page-Main_Page .main-card {
  max-width: 980px;
  margin: 0 auto;
  background: #fff;                 /* 플랫 화이트 */
  border: 1px solid var(--ww-line); /* 옅은 민트 보더 */
  border-radius: 14px;
  box-shadow: var(--ww-shadow);
  padding: 28px;
  color: #20262d;
}

/* 제목/링크 컬러 - 절제된 포인트 */
.page-대문 .mai

/* ===== Segmented Toolbar (compact) ===== */
.portal-toolbar {
  display: inline-flex;               /* 한 덩어리 */
  align-items: stretch;
  border: 1px solid var(--pt-divider, #bfc3c7);
  border-radius: 8px;
  background: var(--pt-surface, #f8f9fa);
  overflow: hidden;                   /* 둥근 모서리 */
  gap: 0;
  margin: 12px 0 20px;
  font-size: 0.95em;                  /* 살짝 작게 */
}

/* 줄바꿈으로 생기는 <p>를 평탄화 → 가로 정렬 유지 */
.portal-toolbar > p { margin: 0; display: contents; }

/* 각 칸 */
.portal-toolbar .tab { display: flex; }

/* 칸 사이 1px 분할선 */
.portal-toolbar .tab + .tab {
  border-left: 1px solid var(--pt-divider, #bfc3c7);
}

/* 링크(버튼) = 칸 전체 클릭 영역 */
.portal-toolbar .tab a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  min-height: 32px;
  min-width: 84px;                    /* 너무 좁아지지 않게 */
  font-weight: 600;
  color: var(--pt-label, #202122);
  text-decoration: none;
  white-space: nowrap;
}
.portal-toolbar .tab a:hover  { background: var(--pt-hover, #eaecf0); }
.portal-toolbar .tab a:active { background: #e0e3e7; }

/* 다크 모드 대응 */
html.skin-theme-clientpref-night .portal-toolbar,
@media (prefers-color-scheme: dark) {
  .portal-toolbar {
    border-color: var(--pt-divider-dark, #383c40);
    background: var(--pt-surface-dark, #2d2f34);
  }
  .portal-toolbar .tab + .tab { border-left-color: var(--pt-divider-dark, #383c40); }
  .portal-toolbar .tab a { color: var(--pt-label-dark, #eaecf0); }
  .portal-toolbar .tab a:hover { background: var(--pt-hover-dark, #33373d); }
}

/* 가운데 정렬을 원하면 이 유틸 클래스를 래퍼에 사용 */
.portal-toolbar-center { display: flex; justify-content: center; }