テンプレート:WikiStatistics/style.css

/* MediaWiki:Common.css または MediaWiki:Vector.css など、適用したいCSSページにこのコードを貼り付けてください */

/* 統計コンテナ全体のスタイル */
.wiki-stats-container {
  margin: 20px 0;
  padding: 15px;
  /* MediaWikiのデフォルト背景色に合わせるため、背景色は指定しない */
  /* border: 1px solid #ddd; /* 必要に応じてボーダーを追加 */
  /* border-radius: 8px; /* 角を丸くする */
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 軽い影で立体感を出す */
  text-align: center;
}

/* 統計項目をグリッドで配置 */
.wiki-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* レスポンシブなグリッド */
  gap: 20px; /* 項目間のスペース */
  justify-content: center;
}

/* 各統計項目のスタイル */
.wiki-stat-item {
  padding: 20px;
  background-color: var(--theme-secondary-background-color, #f9f9f9); /* MediaWikiのデフォルトに近い背景色、または変数を使用 */
  border-radius: 8px; /* 角を丸くする */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影で立体感を出す */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease-in-out; /* ホバー時のアニメーション */
}

.wiki-stat-item:hover {
  transform: translateY(-5px); /* ホバーで少し上に持ち上げる */
}

/* 数字のスタイル */
.wiki-stat-number {
  font-size: 2.5em; /* 大きなフォントサイズ */
  font-weight: bold; /* 太字 */
  color: #007bff; /* 数字の色を青に指定 (変更可能) */
  margin-bottom: 5px; /* ラベルとの間隔 */
  /* MediaWikiのデフォルトフォントに合わせるため、フォントファミリーは指定しない */
}

/* ラベル（「総記事数」など）のスタイル */
.wiki-stat-label {
  font-size: 0.9em; /* 少し小さめのフォントサイズ */
  /* color: #555; /* 必要に応じて文字色を指定 (デフォルトはwikiに従う) */
  text-transform: uppercase; /* 大文字にする */
  letter-spacing: 0.05em; /* 文字間隔を広げる */
}