MediaWiki:Common.css

/*
 * 3代目クッキー☆解説Wiki カスタムCSS
 * このページに記述した内容は、Wikiのすべてのページに適用されます。
 */

/* ===== 全体のコンテナ ===== */
.main-page-container {
    /* 必要であればここにスタイルを追加 */
}

/* ===== お知らせセクション ===== */
.main-page-notice {
    background-color: #f9f9f9; /* 背景を薄いグレーに */
    border: 1px solid #ccc;      /* 枠線を引く */
    border-radius: 8px;          /* 角を丸くする */
    padding: 1em;                /* 内側の余白 */
    margin-bottom: 2em;          /* 下側の余白 */
}

.main-page-notice p {
    margin: 0; /* お知らせ内の段落の余白をなくす */
}

/* ===== このWikiについてセクション ===== */
.main-page-about {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1em;
    margin-bottom: 2em;
}

/* ===== 警告ボックス ===== */
.main-page-warning {
    background-color: #fff0e6; /* 背景を薄いオレンジに */
    border: 2px solid #ff4500;   /* 枠線をオレンジ色に */
    border-radius: 5px;
    padding: 0.8em;
    margin-top: 1em;
}

/* ===== クイックリンク セクション ===== */
.main-page-quick-links {
    /* 必要であればここにスタイルを追加 */
}

/* クイックリンクのテーブル（グリッドレイアウト用） */
.quick-links-table {
    width: 100%;
    border-spacing: 15px; /* カード間の間隔 */
    border-collapse: separate;
    margin-top: 1em;
}

.quick-links-table td {
    width: 50%; /* 横に2つ並べる */
    vertical-align: top;
    padding: 0;
}

/* ===== クイックリンク (最終版) ===== */

/* PC表示：2列のグリッドレイアウト */
.quick-links-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2つの列を均等に配置 */
    gap: 15px; /* カード間の隙間 */
}

/* カード全体のスタイル */
.quick-link-card {
    display: flex;
    align-items: center;
    background-color: #f5faff;
    border: 1px solid #a3d1ff;
    border-radius: 8px;
    padding: 15px;
    transition: background-color 0.2s, border-color 0.2s;
}
.quick-link-card:hover {
    background-color: #eaf5ff;
    border-color: #66b3ff;
}

/* アイコンのスタイル */
.quick-link-icon {
    margin-right: 15px;
    flex-shrink: 0;
}

/* テキスト部分のスタイル */
.quick-link-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 5px;
}
.quick-link-title a {
    color: #0056b3;
    text-decoration: none;
}
.quick-link-desc {
    font-size: 0.9em;
    line-height: 1.4;
}

/* --- スマホ表示用の設定 (画面幅が720px以下で適用) --- */
@media (max-width: 720px) {
    /* クイックリンクを縦一列にする */
    .quick-links-container {
        grid-template-columns: 1fr; /* 1列表示に変更 */
    }
}



/* ===== キャラクター情報ボックスのデザイン ===== */
.infobox-character {
    width: 250px;
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
    border: 1px solid #ccc;
    border-spacing: 3px;
    background-color: #f9f9f9;
    font-size: 90%;
}
.infobox-character th,
.infobox-character td {
    text-align: left;
    vertical-align: top;
}
.infobox-character th {
    width: 30%;
    font-weight: bold;
}
.infobox-character td {
    width: 70%;
}
.infobox-character .infobox-character-name {
    font-size: 125%;
    font-weight: bold;
    text-align: center;
    background-color: #e6e6fa; /* ヘッダーの背景色 */
}
.infobox-character .infobox-character-image {
    text-align: center;
}

/* 「特別:新しいページ」などをページに埋め込んだ際の、上部のオプションパネルを非表示にする */
.mw-specialpage-summary,
.mw-newpages-form,
.mw-rc-filters-hr,
.mw-rc-filters,
.mw-rc-legend {
    display: none;
}
/* 「特別:新しいページ」などをページに埋め込んだ際の表示をシンプルにする */
.mw-specialpage-summary,
.mw-newpages-form,
.mw-rc-filters-hr,
.mw-rc-filters,
.mw-rc-legend,
.mw-changeslist-time,
.mw-changeslist-links,
.mw-usertoollinks,
.mw-newpages-length,
.mw-changeslist-comment { /* ← 編集の要約を非表示にする設定を追加 */
    display: none;
}

/* リストの各項目の左側の余白を調整 */
.mw-specialpage-embedded .mw-changeslist-line-inner {
    margin-left: -2em;
}

/* サイドバーの「このページを引用」を非表示にする */
#t-cite {
    display: none;
}

/*
 * =======================================
 * スマホ表示用の設定 (画面幅が720px以下で適用)
 * =======================================
 */
@media (max-width: 720px) {
    /* --- プロフィール表の回り込み解除 --- */
    .wikitable[style*="float:right"] {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    /* --- スポットライトコーナーを縦一列に --- */
    .spotlight-container {
        flex-direction: column;
    }
    .spotlight-item .thumb.tright {
        float: none;
        display: block;
        margin: 10px auto;
    }
    /* --- クイックリンクを縦一列に --- */
    .quick-links-container {
        grid-template-columns: 1fr;
    }
}
/* ===== トップページのお知らせ欄のデザイン ===== */
.main-page-notice {
    background-color: #fdfaea; /* 薄い黄色の背景 */
    border: 1px solid #f0e68c; /* 少し濃い黄色の枠線 */
    border-left: 5px solid #f0e68c; /* 左側の線を少し太くしてアクセントに */
    border-radius: 5px;
    padding: 15px 20px;
    margin: 1.5em 0;
}

.notice-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 0.5em;
    padding-left: 28px;
    position: relative;
}

/* お知らせアイコン (iマーク) をCSSで表示 */
.notice-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DAA520'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.notice-content {
    line-height: 1.5;
}