「MediaWiki:Common.css」の版間の差分
#owarai-wp-footer に z-index:50 (sticky last-modified-bar より前面に表示) |
.owarai-cta-buttons の <p> も flex 化し Pill 間に gap を確保 |
||
| (同じ利用者による、間の10版が非表示) | |||
| 446行目: | 446行目: | ||
margin-top: 0.9em; | margin-top: 0.9em; | ||
} | } | ||
/* MW では <p> でリンクが包まれて出力されるため、その中でも横並び gap を効かせる */ | |||
.owarai-cta-buttons p { | |||
display: flex; flex-wrap: wrap; gap: 0.6em; justify-content: center; | |||
margin: 0; width: 100%; | |||
} | |||
.owarai-cta-buttons p > span { display: inline-flex; } | |||
.owarai-cta-buttons a { | .owarai-cta-buttons a { | ||
display: inline-block; padding: 0.55em 1.4em; | display: inline-block; padding: 0.55em 1.4em; | ||
| 685行目: | 691行目: | ||
.skin-minerva .last-modified-bar { | .skin-minerva .last-modified-bar { | ||
position: sticky !important; | position: sticky !important; | ||
} | |||
/* WP 共通フッター: Vector 2022 個別記事の親 (.mw-page-container-inner / sidebar あり) に */ | |||
/* 幅を制約されて grid が 1 列に潰れる問題を回避するため、viewport 全幅へ強制拡張する。 */ | |||
#owarai-wp-footer { | |||
width: 100vw; | |||
max-width: 100vw; | |||
margin-left: calc(50% - 50vw); | |||
margin-right: calc(50% - 50vw); | |||
box-sizing: border-box; | |||
} | |||
/* Mobile (Minerva) は body 直下相当に近いので影響が少ない。同 rule でも問題なし。 */ | |||
/* JS 側で <body> 直下に置くようにしたため、100vw + calc 強制拡張は不要 */ | |||
/* (親が body なので そのまま 100% で全幅) → 前ルールを上書きで打ち消す */ | |||
#owarai-wp-footer { | |||
width: auto !important; | |||
max-width: none !important; | |||
margin-left: 0 !important; | |||
margin-right: 0 !important; | |||
} | |||
/* === owarai-wp-align : WP フロント風デザインに寄せた上書き ============= */ | |||
/* WP テーマと色・余白・radius・shadow・タイポグラフィを揃える */ | |||
body.skin-vector-2022, | |||
body.skin-minerva { | |||
background: #fffdf4; | |||
} | |||
.mw-parser-output { | |||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; | |||
color: #111; | |||
font-size: 16px; | |||
line-height: 1.75; | |||
} | |||
/* h2: 黄色リボンの代わりに WP 風の左ブランドドット + 黒太字 */ | |||
.mw-parser-output h2 { | |||
border-bottom: none !important; | |||
padding: 0; | |||
font-weight: 900; | |||
font-size: 1.55em; | |||
color: #111; | |||
display: flex; | |||
align-items: center; | |||
gap: 0.55em; | |||
margin-top: 1.8em; | |||
margin-bottom: 0.7em; | |||
letter-spacing: 0; | |||
} | |||
.mw-parser-output h2::before { | |||
content: ""; | |||
display: inline-block; | |||
width: 0.5em; | |||
height: 0.5em; | |||
background: #f0c000; | |||
border-radius: 9999px; | |||
flex: 0 0 auto; | |||
} | |||
.mw-parser-output h3 { | |||
border-bottom: none; | |||
font-weight: 800; | |||
font-size: 1.2em; | |||
color: #2a2400; | |||
padding-bottom: 0; | |||
margin-top: 1.3em; | |||
} | |||
/* tables: rounded card + soft shadow */ | |||
table.wikitable, | |||
table.infobox, | |||
table.navbox { | |||
background: #ffffff; | |||
border: 1px solid rgba(20,16,0,0.06); | |||
border-radius: 18px; | |||
box-shadow: 0 1px 4px rgba(20,16,0,0.05); | |||
overflow: hidden; | |||
} | |||
/* hero: WP の rounded-3xl + shadow-card */ | |||
.owarai-hero { | |||
background: linear-gradient(135deg, #fffdf4 0%, #fff8db 100%); | |||
border: none; | |||
border-radius: 24px; | |||
box-shadow: 0 2px 8px rgba(20,16,0,0.04), 0 12px 32px rgba(20,16,0,0.06); | |||
} | |||
.owarai-hero-text .mw-heading, | |||
.owarai-hero-text h1 { | |||
font-weight: 900 !important; | |||
color: #111 !important; | |||
} | |||
.owarai-hero-tagline { | |||
color: #2a2400 !important; | |||
font-weight: 800 !important; | |||
} | |||
/* mp-section: 黄色リボンを廃止して WP 風ドット h2 + 白 surface body */ | |||
.owarai-mp-section > h2 { | |||
background: none !important; | |||
color: #111 !important; | |||
border-radius: 0 !important; | |||
padding: 0 !important; | |||
box-shadow: none !important; | |||
font-weight: 900 !important; | |||
font-size: 1.5em !important; | |||
letter-spacing: 0 !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
gap: 0.55em !important; | |||
margin: 1.6em 0 0.7em 0 !important; | |||
} | |||
.owarai-mp-section > h2::before { | |||
content: ""; | |||
display: inline-block; | |||
width: 0.5em; | |||
height: 0.5em; | |||
background: #f0c000; | |||
border-radius: 9999px; | |||
flex: 0 0 auto; | |||
} | |||
.owarai-mp-section > .owarai-mp-section-body { | |||
background: #ffffff; | |||
border: none; | |||
border-radius: 18px; | |||
box-shadow: 0 1px 4px rgba(20,16,0,0.05); | |||
padding: 1.4em; | |||
margin-top: 0; | |||
} | |||
/* portal cards: white surface + soft shadow + WP hover translate */ | |||
.owarai-portal { | |||
background: #ffffff; | |||
border: none; | |||
border-radius: 18px; | |||
box-shadow: 0 1px 4px rgba(20,16,0,0.05); | |||
padding: 1.1em 1em; | |||
transition: transform 0.15s ease, box-shadow 0.15s ease; | |||
} | |||
.owarai-portal:hover { | |||
transform: translateY(-2px); | |||
box-shadow: 0 2px 8px rgba(20,16,0,0.04), 0 12px 32px rgba(20,16,0,0.06); | |||
} | |||
.owarai-portal-jinbutsu, .owarai-portal-konbi, .owarai-portal-jimusho, | |||
.owarai-portal-gekijo, .owarai-portal-shorace, .owarai-portal-haishin, | |||
.owarai-portal-podcast, .owarai-portal-daigaku { | |||
border: none; | |||
} | |||
/* award + feat cards: 統一 surface */ | |||
.owarai-award-card, | |||
.owarai-feat { | |||
background: #ffffff; | |||
border: none; | |||
border-radius: 18px; | |||
box-shadow: 0 1px 4px rgba(20,16,0,0.05); | |||
} | |||
.owarai-feat:hover { | |||
box-shadow: 0 2px 8px rgba(20,16,0,0.04), 0 12px 32px rgba(20,16,0,0.06); | |||
} | |||
.owarai-award-title { | |||
border-bottom-color: #f0c000; | |||
color: #2a2400; | |||
} | |||
.owarai-award-title a { color: #2a2400; } | |||
/* CTA: brand-soft hero panel */ | |||
.owarai-cta { | |||
background: linear-gradient(135deg, #fff8db 0%, #fff5cc 100%); | |||
border: none; | |||
border-radius: 24px; | |||
box-shadow: 0 4px 14px rgba(240, 192, 0, 0.18); | |||
} | |||
.owarai-cta h3 { color: #111; font-weight: 900; } | |||
.owarai-cta-buttons a { | |||
background: #f0c000; | |||
color: #2a2400; | |||
border: none; | |||
box-shadow: 0 4px 14px rgba(240, 192, 0, 0.4); | |||
font-weight: 800; | |||
} | |||
.owarai-cta-buttons a:hover { | |||
background: #caa000; | |||
color: #ffffff; | |||
} | |||
.owarai-cta-buttons a.outline { | |||
background: #ffffff; | |||
color: #2a2400; | |||
box-shadow: 0 1px 4px rgba(20,16,0,0.05); | |||
} | |||
.owarai-cta-buttons a.outline:hover { | |||
background: #fff5cc; | |||
color: #2a2400; | |||
} | |||
/* tag list: WP のチップ風 */ | |||
.owarai-tags a { | |||
background: #ffffff; | |||
border: none; | |||
box-shadow: 0 1px 4px rgba(20,16,0,0.05); | |||
color: #111; | |||
} | |||
.owarai-tags a:hover { | |||
background: #fff5cc; | |||
color: #2a2400; | |||
} | |||
/* quick stats panel */ | |||
.owarai-stats { | |||
background: #ffffff; | |||
border: none; | |||
border-radius: 18px; | |||
box-shadow: 0 1px 4px rgba(20,16,0,0.05); | |||
padding: 1.2em 1em; | |||
} | |||
.owarai-stat-num { color: #2a2400; } | |||
/* mp-note: 黄色帯 → WP 風カード調 */ | |||
.owarai-mp-note { | |||
background: rgba(240,192,0,0.14); | |||
border-left: 4px solid #f0c000; | |||
border-radius: 0 18px 18px 0; | |||
color: #2a2400; | |||
} | |||
/* === /owarai-wp-align ================================================== */ | |||
/* tag pill: 縦パディングと行間を広げる */ | |||
.owarai-tags { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 0.5em 0.4em; | |||
line-height: 1.6; | |||
} | |||
.owarai-tags a { | |||
padding: 0.45em 0.9em !important; | |||
margin: 0 !important; | |||
font-size: 0.92em; | |||
line-height: 1.4; | |||
} | |||
/* FA SVG icon (emoji 置換) — img データURI として埋め込んだ SVG のサイズ調整 */ | |||
.owarai-fa-icon { | |||
display: inline-block; | |||
vertical-align: -0.125em; | |||
width: 1em; | |||
height: 1em; | |||
} | |||
/* portal カードのアイコン枠 (旧 emoji 1.7em) と同サイズに */ | |||
.owarai-portal-icon .owarai-fa-icon { | |||
width: 1.7em; | |||
height: 1.7em; | |||
vertical-align: middle; | |||
} | |||
/* セクション見出し h2 の左に並ぶ icon は WP ドットと両立しない */ | |||
/* — wikitext 側で h2 の先頭に icon を置いている。WP ドットを抑える */ | |||
.owarai-mp-section > h2 .owarai-fa-icon { | |||
width: 0.85em; | |||
height: 0.85em; | |||
margin-right: 0.1em; | |||
} | |||
.owarai-mp-section > h2:has(.owarai-fa-icon)::before { | |||
display: none; | |||
} | |||
.owarai-mp-section > h2:has(img.owarai-fa-icon)::before { | |||
display: none; | |||
} | |||
.mw-parser-output h2:has(.owarai-fa-icon)::before { | |||
display: none; | |||
} | |||
/* fix: portal-icon の SVG が親の font-size 1.7em と乗算され大きすぎ&余白潰しになる */ | |||
.owarai-portal-icon .owarai-fa-icon { | |||
width: 1em !important; | |||
height: 1em !important; | |||
display: block; | |||
vertical-align: top; | |||
margin-bottom: 0.05em; | |||
} | |||
/* カードホバー時の浮き上がりエフェクトを廃止 */ | |||
.owarai-portal:hover, | |||
.owarai-feat:hover, | |||
.owarai-award-card:hover { | |||
transform: none !important; | |||
} | |||
/* fix: owarai-tags は実体が <div><p><a>...<a>...</p></div> なので | |||
* display:flex は効かない (子は <p> 1 つだけ)。inline 流に戻し、 | |||
* line-height で行間を稼ぐ + a 自身に十分なパディングを付ける。 */ | |||
.owarai-tags { | |||
display: block !important; | |||
line-height: 2.5; | |||
padding: 0.2em 0 0.4em 0; | |||
} | |||
.owarai-tags p { | |||
margin: 0 !important; | |||
line-height: inherit; | |||
} | |||
.owarai-tags a { | |||
display: inline-block !important; | |||
padding: 0.45em 1em !important; | |||
margin: 0 0.15em 0.1em 0 !important; | |||
border-radius: 999px; | |||
font-size: 0.92em; | |||
line-height: 1.2; | |||
vertical-align: middle; | |||
} | |||
/* カードホバー時のシャドウ変化も廃止 (visual lift を完全に止める) */ | |||
.owarai-portal, | |||
.owarai-feat, | |||
.owarai-award-card { | |||
transition: none !important; | |||
} | |||
.owarai-portal:hover, | |||
.owarai-feat:hover, | |||
.owarai-award-card:hover { | |||
transform: none !important; | |||
box-shadow: 0 1px 4px rgba(20,16,0,0.05) !important; | |||
} | |||
/* Minerva (モバイル) では h2 のブランドドット ::before を出さない */ | |||
.skin-minerva .mw-parser-output h2::before, | |||
.skin-minerva .owarai-mp-section > h2::before { | |||
display: none !important; | |||
} | } | ||