미디어위키:Common.css: 두 판 사이의 차이
보이기
편집 요약 없음 |
편집 요약 없음 |
||
(같은 사용자의 중간 판 24개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
/* | /* ===== 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 | |||
/* ===== 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>를 평탄화 → 가로 유지 */ | |||
.portal-toolbar > p { margin: 0; display: contents; } | |||
/* 각 칸(세그먼트) */ | |||
.portal-toolbar .tab { display: flex; } | |||
/* 칸막이 */ | |||
.portal-toolbar .tab + .tab { | |||
border-left: 1px solid var(--ptb-divider); | |||
} | |||
/* 링크(버튼) — 칸 전체 클릭 영역 */ | |||
.portal-toolbar .tab a { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 4px 10px; /* 좌우 여백 */ | |||
min-height: 30px; /* 버튼 높이 */ | |||
min-width: 76px; /* 너무 좁아지지 않게 */ | |||
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) { | |||
.portal-toolbar { | |||
--ptb-divider: #3a3f44; | |||
--ptb-surface: #2e3237; | |||
--ptb-hover: #3a3f45; | |||
--ptb-label: #e6e8ea; | |||
} | |||
} |
2025년 9월 4일 (목) 18:28 기준 최신판
/* ===== 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 /* ===== 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>를 평탄화 → 가로 유지 */ .portal-toolbar > p { margin: 0; display: contents; } /* 각 칸(세그먼트) */ .portal-toolbar .tab { display: flex; } /* 칸막이 */ .portal-toolbar .tab + .tab { border-left: 1px solid var(--ptb-divider); } /* 링크(버튼) — 칸 전체 클릭 영역 */ .portal-toolbar .tab a { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; /* 좌우 여백 */ min-height: 30px; /* 버튼 높이 */ min-width: 76px; /* 너무 좁아지지 않게 */ 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) { .portal-toolbar { --ptb-divider: #3a3f44; --ptb-surface: #2e3237; --ptb-hover: #3a3f45; --ptb-label: #e6e8ea; } }