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) {



/* --- キャラクターページのプロフィール表（情報ボックス）を回り込み解除 --- */

.infobox-character,

.wikitable[style*="float:right"],

.wikitable[style*="float: right"] {

float: none !important;

width: 100% !important;

margin-left: 0 !important;

margin-right: 0 !important;

margin-bottom: 1.5em !important;

}



/* --- トップページのクイックリンクを縦一列に並べる --- */

.quick-links-table,

.quick-links-table tr,

.quick-links-table td {

display: block;

width: 100%;

box-sizing: border-box;

}

.quick-links-table td {

padding-bottom: 15px;

}

.quick-links-table td:last-child {

padding-bottom: 0;

}

.quick-link-item {

flex-direction: column;

text-align: center;

}

.quick-link-icon {

margin-right: 0;

margin-bottom: 10px;

}



/* ===== トップページ・スポットライト (最終版) ===== */
.spotlight-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 1.5em;
}

.spotlight-item {
    flex: 1;
    min-width: 300px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
}

.spotlight-title {
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

.spotlight-body {
    overflow: auto; /* 画像の回り込みを正しく処理 */
}

.spotlight-body p {
    margin-top: 0; /* 文章の上の余白を調整 */
    line-height: 1.6;
}
}



/* ===== トップページのお知らせ欄のデザイン ===== */

.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;

}

/* ===== スポットライトボックスの中身のレイアウト調整 ===== */

/* 見出しと中身を区切る線 */
.spotlight-hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 10px 0;
}

/* テキストと画像を横並びにするための設定 */
.spotlight-body {
    display: flex;
    align-items: flex-start; /* 上端揃えにする */
}

/* テキスト部分が残りの幅をすべて使うようにする */
.spotlight-text {
    flex: 1;
    min-width: 0;
}

/* 画像の左側に余白を設ける */
.spotlight-image {
    margin-left: 15px;
}


/* ===== トップページ・ランダム表示ボックスのスタイル ===== */
#random-spotlight-display {
    max-width: 800px;  /* ボックスの最大の横幅を800pxに指定 */
    margin: 1.5em auto; /* 上下に余白を取り、左右を自動調整して中央揃え */
}