watchwiki

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

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


/* ===== 세그먼트형 버튼 블록 ===== */
/* ===== Segmented Toolbar (Vector-2022풍) ===== */
.portal-segments {
.portal-toolbar {
   /* 커스텀 변수 */
   display: inline-flex;              /* 한 덩어리로 */
   --seg-gap: 1px;
   align-items: stretch;
   --seg-radius: 12px;
   border: 1px solid var(--pt-divider, #bfc3c7);
   --seg-divider: #c8ccd1; /* 무채색 구분선 */
  border-radius: 10px;
   --seg-bg: #fff;         /* 칸 배경 */
   background: var(--pt-surface, #f6f7f8);
  overflow: hidden;                   /* 둥근 모서리 내부로 클리핑 */
   gap: 0;                             /* 분할선은 a 사이 보더로 처리 */
}


  display: grid;
/* 각 세그먼트(칸) */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 자동 칼럼 */
.portal-toolbar .tab { display: flex; }
  gap: var(--seg-gap);              /* 이 간격이 곧 구분선 두께가 됩니다 */
  background: var(--seg-divider);  /* gap 사이로 보이는 색 = 칸막이 */
  border-radius: var(--seg-radius);
  overflow: hidden;                /* 둥근 모서리 안으로 자르기 */
  margin: 16px 0 24px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}


/* 각 칸(세그먼트) */
/* 칸 사이 분할선 */
.portal-segments .seg {
.portal-toolbar .tab + .tab { border-left: 1px solid var(--pt-divider, #bfc3c7); }
  background: var(--seg-bg);
  display: flex;      /* a 태그를 칸 전체로 확장 */
}


/* 링크(버튼) – 칸 전체가 클릭되도록 block + flex:1 */
/* 링크(버튼) — 칸 전체가 클릭 영역 */
.portal-segments .seg a {
.portal-toolbar .tab a {
   flex: 1 1 auto;
   display: inline-flex;
   display: block;
  align-items: center;
   padding: 12px 16px;
   justify-content: center;
   min-height: 44px;  /* 터치 여유 */
  gap: 8px;                           /* (아이콘 쓰면 여유) */
  text-align: center;
   padding: 8px 14px;
   min-height: 36px;
   min-width: 88px;                    /* 너무 좁아지지 않게 */
   font-weight: 600;
   font-weight: 600;
   color: #202122;
   color: var(--pt-label, #202122);
   text-decoration: none;
   text-decoration: none;
   line-height: 1.25;
   white-space: nowrap;
  background: transparent;
}
}


/* 호버/액티브 – 무채색 유지 */
.portal-toolbar .tab a:hover { background: var(--pt-hover, #eaecf0); }
.portal-segments .seg a:hover  { background: #f6f7f8; }
 
.portal-segments .seg a:active { background: #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; }
}


/* 모바일에서 2열로 줄이기(원하면 조정) */
/* 다크 모드 대응 (Vector-2022 night 테마 및 시스템 다크) */
@media (max-width: 720px) {
html.skin-theme-clientpref-night .portal-toolbar,
   .portal-segments {
@media (prefers-color-scheme: dark) {
     grid-template-columns: repeat(2, 1fr);
   .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); }
}
}
원본 주소 "https://watchwiki.net/wiki/미디어위키:Common.css"