watchwiki

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

← 이전 편집다음 편집 →
편집 요약 없음
편집 요약 없음
47번째 줄: 47번째 줄:
.page-대문 .mai
.page-대문 .mai


/* ===== Segmented Toolbar (Vector-2022풍) ===== */
/* ===== Segmented Toolbar (compact) ===== */
.portal-toolbar {
.portal-toolbar {
   display: inline-flex;              /* 한 덩어리로 */
   display: inline-flex;              /* 한 덩어리 */
   align-items: stretch;
   align-items: stretch;
   border: 1px solid var(--pt-divider, #bfc3c7);
   border: 1px solid var(--pt-divider, #bfc3c7);
   border-radius: 10px;
   border-radius: 8px;
   background: var(--pt-surface, #f6f7f8);
   background: var(--pt-surface, #f8f9fa);
   overflow: hidden;                  /* 둥근 모서리 내부로 클리핑 */
   overflow: hidden;                  /* 둥근 모서리 */
   gap: 0;                             /* 분할선은 a 사이 보더로 처리 */
   gap: 0;
  margin: 12px 0 20px;
  font-size: 0.95em;                  /* 살짝 작게 */
}
}


/* 각 세그먼트(칸) */
/* 줄바꿈으로 생기는 <p>를 평탄화 → 가로 정렬 유지 */
.portal-toolbar > p { margin: 0; display: contents; }
 
/* 각 칸 */
.portal-toolbar .tab { display: flex; }
.portal-toolbar .tab { display: flex; }


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


/* 링크(버튼) — 칸 전체가 클릭 영역 */
/* 링크(버튼) = 칸 전체 클릭 영역 */
.portal-toolbar .tab a {
.portal-toolbar .tab a {
   display: inline-flex;
   display: inline-flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
  gap: 8px;                          /* (아이콘 쓰면 여유) */
   padding: 6px 12px;
   padding: 8px 14px;
   min-height: 32px;
   min-height: 36px;
   min-width: 84px;                    /* 너무 좁아지지 않게 */
   min-width: 88px;                    /* 너무 좁아지지 않게 */
   font-weight: 600;
   font-weight: 600;
   color: var(--pt-label, #202122);
   color: var(--pt-label, #202122);
78번째 줄: 84번째 줄:
   white-space: nowrap;
   white-space: nowrap;
}
}
.portal-toolbar .tab a:hover  { background: var(--pt-hover, #eaecf0); }
.portal-toolbar .tab a:active { background: #e0e3e7; }


.portal-toolbar .tab a:hover { background: var(--pt-hover, #eaecf0); }
/* 다크 모드 대응 */
 
/* 중앙 정렬이 필요하면 부모에 text-align:center 주거나 아래 유틸리티 사용 */
.portal-toolbar.is-centered { margin: 0 auto; }
 
/* 작은 화면 보정 */
@media (max-width: 480px) {
  .portal-toolbar .tab a { min-width: 72px; padding: 8px 10px; }
}
 
/* 다크 모드 대응 (Vector-2022 night 테마 및 시스템 다크) */
html.skin-theme-clientpref-night .portal-toolbar,
html.skin-theme-clientpref-night .portal-toolbar,
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
100번째 줄: 98번째 줄:
   .portal-toolbar .tab a:hover { background: var(--pt-hover-dark, #33373d); }
   .portal-toolbar .tab a:hover { background: var(--pt-hover-dark, #33373d); }
}
}
/* 가운데 정렬을 원하면 이 유틸 클래스를 래퍼에 사용 */
.portal-toolbar-center { display: flex; justify-content: center; }
원본 주소 "https://watchwiki.net/wiki/미디어위키:Common.css"