미디어위키:Common.css: 두 판 사이의 차이

← 이전 편집

@@ 1번째 줄: / 1번째 줄: @@
-/* 이 CSS 설정은 모든 스킨에 적용됩니다 */
+/* ===== WATCHWIKI MAIN PAGE — FLAT TIFFANY BLUE =====
+   기본 대문(대문), 프로젝트 네임스페이스형(시계위키: 대문), 영문(Main_Page) 모두 타깃 */
-/* Monochrome for Timeless */
+.page-대문,
-body.skin-timeless .mw-header,
+.page-시계위키\:_대문,
-body.skin-timeless .mw-footer,
+.page-Main_Page {
-body.skin-timeless .site-header,
+  /* 팔레트: 그라디언트 없이 평면톤 */
-body.skin-timeless .sidebar { background:#f7f7f7 !important; border-color:#e5e5e5 !important; }
+  --ww-bg:        #eafaf8;              /* 연한 티파니 블루 배경 */
+  --ww-ink:       #0e3a37;              /* 포인트 텍스트 컬러(딥 틸) */
-body.skin-timeless .mw-parser-output a,
+  --ww-line:      rgba(17,151,143,.14); /* 아주 옅은 틴티드 선/보더 */
-body.skin-timeless a { color:#222 !important; }
+  --ww-link:      #11978f;              /* 링크 */
-body.skin-timeless a:visited { color:#555 !important; }
+  --ww-link-hov:  #0d7c75;              /* 링크 호버 */
-body.skin-timeless a:hover, body.skin-timeless a:focus { color:#000 !important; }
+  --ww-shadow:    0 8px 24px rgba(0,0,0,.06); /* 뉴트럴 그림자(촌스럽지 않게) */
-body.skin-timeless .mw-ui-button,
-body.skin-timeless .mw-ui-button.mw-ui-progressive,
-body.skin-timeless .mw-ui-button.mw-ui-destructive {
-  background:#e6e6e6 !important; color:#111 !important; border-color:#cfcfcf !important;
-}
-body.skin-timeless .mw-message-box,
-body.skin-timeless .mw-message-box-warning,
-body.skin-timeless .mw-message-box-error,
-body.skin-timeless .mw-message-box-success {
-  background:#f3f3f3 !important; border-color:#dcdcdc !important; color:#111 !important;
 }
-body.skin-timeless input, body.skin-timeless select, body.skin-timeless textarea {
+/* 배경(히어로): 단색만 사용 */
-   background:#fff !important; color:#111 !important; border-color:#dcdcdc !important;
+.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);
 }
@@ 36번째 줄: / 30번째 줄: @@
 .skin-vector-2022 .mw-logo-wordmark { margin-left: 0 !important; }
-/* 배경(히어로) 영역 */
+/* 카드(본문 박스) */
-.main-hero {
+.page-대문 .main-card,
-   position: relative;
+.page-시계위키\:_대문 .main-card,
-   padding: 48px 16px;            /* 위아래 여백 */
+.page-Main_Page .main-card {
-   background: linear-gradient(180deg,#0f1220 0%, #171b29 100%); /* 배경색/그라데이션 */
+   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
+/* ===== Compact Segmented Toolbar ===== */
+.portal-toolbar {
+  /* 색/크기 기본값 */
+  --ptb-radius: 8px;
+  --ptb-divider: #c8ccd1;   /* 칸막이/외곽선 */
+   --ptb-surface: #f6f7f8;   /* 블록 배경 */
+  --ptb-hover:   #eaecf0;   /* 호버 배경 */
+  --ptb-label:   #202122;   /* 글자색 */
+  display: inline-flex;      /* 한 덩어리 */
+  align-items: stretch;
+  border: 1px solid var(--ptb-divider);
+  border-radius: var(--ptb-radius);
+  background: var(--ptb-surface);
+  overflow: hidden;          /* 둥근 모서리 내부로 자르기 */
+  gap: 0;
+  margin: 8px 0 18px;
+  font-size: 0.93em;         /* 살짝 컴팩트 */
+  line-height: 1.2;
 }
-/* 배경 이미지를 쓰고 싶다면(선택) — 이미지 경로만 바꾸면 됩니다 */
+/* 위키텍스트 줄바꿈이 만들어내는 <p>를 평탄화 → 가로 유지 */
-.main-hero {
+.portal-toolbar > p { margin: 0; display: contents; }
-   background: url(/images/site/hero.jpg) center/cover no-repeat fixed;
+/* 각 칸(세그먼트) */
+.portal-toolbar .tab { display: flex; }
+/* 칸막이 */
+.portal-toolbar .tab + .tab {
+   border-left: 1px solid var(--ptb-divider);
 }
-/* 가운데 카드 박스(본문) */
+/* 링크(버튼) — 칸 전체 클릭 영역 */
-.main-card {
+.portal-toolbar .tab a {
-   max-width: 980px;              /* 카드 최대 가로 폭 */
+   display: inline-flex;
-   margin: 0 auto;                /* 가운데 정렬 */
+  align-items: center;
-   background: #fff;              /* 박스 배경색(라이트) */
+  justify-content: center;
-   border: 1px solid rgba(0,0,0,.06);
+  padding: 4px 10px;         /* 좌우 여백 */
-   border-radius: 16px;
+   min-height: 30px;          /* 버튼 높이 */
-   box-shadow: 0 8px 24px rgba(0,0,0,.12);
+   min-width: 76px;           /* 너무 좁아지지 않게 */
-   padding: 28px;
+   text-decoration: none;
+   font-weight: 600;
+   color: var(--ptb-label);
+   white-space: nowrap;
 }
+.portal-toolbar .tab a:hover  { background: var(--ptb-hover); }
+.portal-toolbar .tab a:active { background: #e0e3e7; }
+/* 가운데 정렬 유틸 */
+.portal-toolbar-wrap { display: flex; justify-content: center; }
-/* 다크 모드 대응(선택) */
+/* 다크 모드(Vector-2022 night & 시스템 다크) */
+html.skin-theme-clientpref-night .portal-toolbar,
 @media (prefers-color-scheme: dark) {
-   .main-card {
+   .portal-toolbar {
-     background: #161a22;
+     --ptb-divider: #3a3f44;
-     border-color: rgba(255,255,255,.06);
+     --ptb-surface: #2e3237;
-     box-shadow: 0 8px 24px rgba(0,0,0,.28);
+     --ptb-hover:   #3a3f45;
+    --ptb-label:   #e6e8ea;
    }
-}
-/* 반응형(선택) — 모바일은 여백만 살짝 줄이기 */
-@media (max-width: 720px) {
-  .main-hero { padding: 28px 12px; }
-  .main-card { padding: 20px; border-radius: 12px; }
 }