본문으로 이동

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

watchwiki
편집 요약 없음
편집 요약 없음
 
(같은 사용자의 중간 판 18개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/* ===== WATCHWIKI MAIN PAGE THEME (Tiffany Blue) START ===== */
/* ===== WATCHWIKI MAIN PAGE — FLAT TIFFANY BLUE =====
/* 페이지명이 다르면 .page-시계위키\:_대문 를 여러분 대문 이름으로 바꿔주세요. */
  기본 대문(대문), 프로젝트 네임스페이스형(시계위키: 대문), 영문(Main_Page) 모두 타깃 */
.page-시계위키\:_대문 {
.page-대문,
   --ww-tiffany-100: #e6fbf8;
.page-시계위키\:_대문,
   --ww-tiffany-200: #d4f7f3;
.page-Main_Page {
   --ww-ink:         #0e3a37;  /* 포인트 텍스트 색 */
  /* 팔레트: 그라디언트 없이 평면톤 */
   --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-hero,
.page-Main_Page .main-hero {
   padding: 56px 16px;
   padding: 56px 16px;
   background: linear-gradient(180deg, var(--ww-tiffany-100) 0%, var(--ww-tiffany-200) 100%);
   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-card,
.page-Main_Page .main-card {
   max-width: 980px;
   max-width: 980px;
   margin: 0 auto;
   margin: 0 auto;
   background: #fff;
   background: #fff;                 /* 플랫 화이트 */
   border: 1px solid rgba(129,216,208,.35);
   border: 1px solid var(--ww-line); /* 옅은 민트 보더 */
   border-radius: 16px;
   border-radius: 14px;
   box-shadow: 0 10px 28px rgba(129,216,208,.18), 0 2px 6px rgba(0,0,0,.06);
   box-shadow: var(--ww-shadow);
   padding: 28px;
   padding: 28px;
   color: #20262d;
   color: #20262d;
}
}


/* 제목/링크 컬러 */
/* 제목/링크 컬러 - 절제된 포인트 */
.page-시계위키\:_대문 .main-card h1,
.page-대문 .mai
.page-시계위키\:_대문 .main-card h2 { color: var(--ww-ink); }
 
/* ===== 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; }


.page-시계위키\:_대문 .main-card a { color: #11978f; }
/* 각 칸(세그먼트) */
.page-시계위키\:_대문 .main-card a:hover { color: #0d7c75; }
.portal-toolbar .tab { display: flex; }


/* 모바일 튜닝 */
/* 칸막이 */
@media (max-width: 720px) {
.portal-toolbar .tab + .tab {
  .page-시계위키\:_대문 .main-hero { padding: 36px 12px; }
   border-left: 1px solid var(--ptb-divider);
   .page-시계위키\:_대문 .main-card { padding: 20px; border-radius: 12px; }
}
}


/* (선택) 유리 느낌 카드 div에 class="main-card is-glass" 추가 시 적용 */
/* 링크(버튼) — 칸 전체 클릭 영역 */
.page-시계위키\:_대문 .main-card.is-glass {
.portal-toolbar .tab a {
   background: rgba(255,255,255,.88);
  display: inline-flex;
   backdrop-filter: blur(8px);
  align-items: center;
   -webkit-backdrop-filter: blur(8px);
  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 & 시스템 다크) */
/* .page-시계위키\:_대문 #firstHeading { display:none; } */
html.skin-theme-clientpref-night .portal-toolbar,
/* ===== WATCHWIKI MAIN PAGE THEME — END ===== */
@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;
  }
}