「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;
}
}