owarai.wiki

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

← 古い編集
K (トーク | 投稿記録)
ビューロクラット、インターフェース管理者、管理者
4,869 回編集
cache bump 20260505014804
.owarai-cta-buttons の <p> も flex 化し Pill 間に gap を確保
 
(同じ利用者による、間の15版が非表示)
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;
469行目: 475行目:
/* === /owarai-mp ========================================================== */
/* === /owarai-mp ========================================================== */
/* cache-bump 20260505014804 */
/* cache-bump 20260505014804 */
/* === owarai-wp-footer (WP 共通フッター) ================================== */
/* MediaWiki:Common.js が <body> 末尾に挿入する。WP テーマの brand color に合わせた full-bleed フッター */
.owarai-wp-footer {
background: #f0c000;
color: #4a3800;
width: 100%;
margin-top: 4em;
clear: both;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
box-sizing: border-box;
}
.owarai-wp-footer * { box-sizing: border-box; }
.owarai-wp-footer-inner {
max-width: 1240px;
margin: 0 auto;
padding: 3em 1.2em 1.8em;
}
.owarai-wp-footer a {
color: #4a3800;
text-decoration: none;
transition: color .15s ease;
}
.owarai-wp-footer a:hover { color: #5a4f15; text-decoration: none; }
.owarai-wp-footer-top {
display: flex;
flex-direction: column;
gap: 1.2em;
padding-bottom: 1.6em;
border-bottom: 1px solid rgba(74,56,0,0.18);
align-items: stretch;
}
@media (min-width: 640px) {
.owarai-wp-footer-top {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.owarai-wp-footer-logo {
display: inline-flex;
flex-direction: column;
gap: 0.15em;
}
.owarai-wp-footer-brand {
font-weight: 800;
font-size: 1.35em;
color: #1a1500;
letter-spacing: 0.01em;
}
.owarai-wp-footer-tag {
font-size: 0.72em;
font-weight: 800;
letter-spacing: 0.22em;
color: rgba(74,56,0,0.72);
text-transform: uppercase;
}
.owarai-wp-footer-cta {
display: flex;
gap: 0.5em;
flex-wrap: wrap;
}
.owarai-wp-btn-primary,
.owarai-wp-btn-secondary {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.6em 1.3em;
font-weight: 800;
font-size: 0.92em;
transition: background .15s ease, color .15s ease;
border: none;
}
.owarai-wp-btn-primary {
background: #4a3800;
color: #f0c000 !important;
}
.owarai-wp-btn-primary:hover {
background: #6a5300;
color: #fff !important;
}
.owarai-wp-btn-secondary {
background: #ffffff;
color: #4a3800 !important;
}
.owarai-wp-btn-secondary:hover {
background: #fffbeb;
color: #4a3800 !important;
}
.owarai-wp-footer-cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2em 1.5em;
padding: 2em 0;
}
@media (min-width: 640px) {
.owarai-wp-footer-cols { grid-template-columns: repeat(4, 1fr); }
}
.owarai-wp-footer-cols nav h3 {
margin: 0 0 0.7em 0;
padding: 0;
font-size: 0.74em;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.22em;
color: rgba(74,56,0,0.62);
border: none;
background: none;
}
.owarai-wp-footer-cols ul {
list-style: none;
margin: 0;
padding: 0;
}
.owarai-wp-footer-cols li {
margin: 0.42em 0;
font-size: 0.93em;
line-height: 1.4;
}
.owarai-wp-footer-disclaimer {
border-top: 1px solid rgba(74,56,0,0.18);
padding: 1.4em 0 0.4em;
font-size: 0.83em;
line-height: 1.85;
color: rgba(74,56,0,0.85);
max-width: 80ch;
}
.owarai-wp-footer-copy {
display: flex;
flex-direction: column;
gap: 0.4em;
padding-top: 1.4em;
font-size: 0.76em;
color: rgba(74,56,0,0.72);
}
@media (min-width: 640px) {
.owarai-wp-footer-copy {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.owarai-wp-footer-copy a {
color: rgba(74,56,0,0.78);
}
.owarai-wp-footer-copy a:hover { color: #4a3800; }
/* MediaWiki スキンの footer は wiki 機能 (lastmod, license など) を残しつつ、 */
/* 視覚的に縮めて WP フッターを主役にする */
.mw-footer-container,
.mw-footer,
#footer {
background: transparent !important;
border-top: none !important;
}
/* === /owarai-wp-footer ==================================================== */
/* --- SVG ロゴ対応 (Common.css の .owarai-wp-footer-logo を上書き) --- */
.owarai-wp-footer-logo {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 0.85em;
}
.owarai-wp-footer-icon {
height: 48px;
width: auto;
flex: 0 0 auto;
display: block;
}
.owarai-wp-footer-logo-text {
display: inline-flex;
flex-direction: column;
gap: 0.25em;
min-width: 0;
}
.owarai-wp-footer-wordmark {
height: 22px;
width: auto;
display: block;
}
@media (max-width: 480px) {
.owarai-wp-footer-icon { height: 40px; }
.owarai-wp-footer-wordmark { height: 18px; }
}
/* Minerva の last-modified-bar (編集履歴を閲覧) は position: sticky で */
/* ビューポート下端に常駐 → 共通フッター上部に被さる。Minerva のときだけ静的配置に戻す。 */
.skin-minerva .last-modified-bar {
position: static !important;
}
.skin-minerva #owarai-wp-footer {
clear: both;
position: relative;
z-index: 2;
}
/* Minerva の last-modified-bar sticky 解除を取り消す (上書き) — 元の sticky 動作に戻す */
.skin-minerva .last-modified-bar {
position: sticky !important;
}
/* 共通フッターを最終更新バーの「下」に置く運用 */
/* Minerva の last-modified-bar は sticky だが、共通フッターが一番下に来るため z-index を上げる */
#owarai-wp-footer {
position: relative;
z-index: 50;
clear: both;
}
/* 最終更新バーの sticky 解除 hack を撤回 (共通フッター位置を変えたため不要) */
.skin-minerva .last-modified-bar {
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;
}
「https://owarai.wiki/wiki/MediaWiki:Common.css」から取得