「MediaWiki:Common.css」の版間の差分

2025年3月30日 (日) 22:31時点における版

/* ここに記述したCSSはすべての外装に反映されます */

/* 🎯 メインページ専用装飾 */
body.page-メインページ h2 {
  border-bottom: 2px dashed #99ccff;
  padding-bottom: 0.2em;
  margin-top: 1.5em;
  font-size: 120%;
  color: #45b9ff;
}

/* 📦 メインページの3カラムボックス調整 */
body.page-メインページ .portal-box {
  max-width: 1200px;
  margin: auto;
  padding: 1.5em 0;
  gap: 24px;
}

/* 🎁 各ブロックに優しい白枠をつける */
body.page-メインページ .portal-box > div {
  background: #f9fcff;
  border: 1px solid #e0eaf5;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

body.page-メインページ .portal-box > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 📎 リストのマージン調整（余白＆整列） */
body.page-メインページ .portal-box ul,
body.page-メインページ .portal-box li {
  margin-left: 0;
  padding-left: 0.5em;
  list-style: none;
}

/* ✨ リンクをほんのりキラっと */
body.page-メインページ .portal-box a {
  color: #3366cc;
  text-decoration: none;
  transition: color 0.2s ease;
}

body.page-メインページ .portal-box a:hover {
  color: #ff66cc;
}

#ここまでメインページ用CSS

#コピーボタン
.copy-btn {
    float: right;
    margin-bottom: 5px;
    cursor: pointer;
    background-color: #4287f5;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 3px 6px;
}

/* 絵文字のフォント指定 */
#mw-panel, #mw-panel .portal h3, #mw-panel .portal .body {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
body {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* サイドバーの絵文字表示CSS */
#mw-panel .portal .body ul li::before {
    content: attr(data-emoji);
    margin-right: 6px;
    font-size: 1.1em;
}

/* ユーステラFANBOXボタンのスタイル */
.fanbox-button {
  display: inline-block;
  background-color: #ff6289;
  color: white;
  padding: 0.5em 1.2em;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease;
}
.fanbox-button:hover {
  background-color: #e8577a;
}

/* セクション編集リンク（鉛筆）を非表示にする */
.mw-editsection {
  display: none !important;
}

/* 🧑‍💻 ページ全体のフォントをNoto Sans JPに指定 */
body,
.mw-body,
#content,
#mw-content-text,
.skin-citizen .citizen-body {
  font-family: 'Noto Sans JP', 'Helvetica Neue', 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
}

/* 💬 数字専用：ちょっと文字間詰め＆整列 */
.num,
span.num,
.table td,
.table th {
  font-feature-settings: "pnum" on, "lnum" on;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.02em;
}

.sticky-header-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

/* ================================
   🧊 Stickyヘッダーテーブル設定
   テーブルのヘッダー行をスクロール追従にする
   class="sticky-header-table" を付けて使ってね
   ================================ */

.sticky-header-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow: visible;
}

.sticky-header-table th {
  position: sticky;
  top: 0;
  background-color: #f9f9f9; /* Citizenスキンに合わせた淡いグレー */
  z-index: 2;
  border-bottom: 1px solid #ccc;
  padding: 0.5em;
  text-align: left;
}

/* テーブルを包む用のwrapper（Citizenスキンのoverflow対策） */
.sticky-header-wrapper {
  overflow-x: auto;
  max-height: 700px; /* 必要に応じて調整してね */
}