「MediaWiki:Common.css」の版間の差分
細 試行錯誤中… タグ: モバイル編集 モバイルウェブ編集 改良版モバイル編集 |
細 動作確認に成功したためコメントを追記 |
||
| (2人の利用者による、間の18版が非表示) | |||
| 587行目: | 587行目: | ||
} | } | ||
.ambox-learn-more, .minerva-icon--issue-generic-defaultColor.minerva-ambox-icon | .ambox-learn-more, html:not(.overlay-enabled) .minerva-icon--issue-generic-defaultColor.minerva-ambox-icon{ | ||
display: none; | display: none; | ||
} | } | ||
| 595行目: | 595行目: | ||
} | } | ||
/********************************************************************* | |||
ここから下は独自CSS | |||
**********************************************************************/ | |||
@media screen { | |||
html.skin-theme-clientpref-night .infobox, html.skin-theme-clientpref-night .mbox, html.skin-theme-clientpref-night .ambox, html.skin-theme-clientpref-night .boxmenu { | |||
background-color: #1f1f23; /* 暗い背景色 */ | |||
color: #ffffff; /*#f8f9fa;*/ /* 明るい文字色 */ | |||
border-color: #54595d; | |||
} | |||
html.skin-theme-clientpref-night .infobox th { | |||
background-color: #1f1f23 !important; /* ヘッダーの暗い背景色 */ | |||
color: #ffffff; | |||
} | |||
html.skin-theme-clientpref-night .infobox a, html.skin-theme-clientpref-night .mbox a, html.skin-theme-clientpref-night .ambox a, html.skin-theme-clientpref-night .boxmenu a { | |||
color: #5b92e5; | |||
} | |||
/* ambox の種類別の色分けをダークモード向けに調整 */ | |||
html.skin-theme-clientpref-night .ambox-content { | |||
background-color: #4a382e; /* オレンジ系を暗く */ | |||
border-color: #8f5c35; | |||
} | |||
html.skin-theme-clientpref-night .ambox-style { | |||
background-color: #4a4a30; /* 黄色系を暗く */ | |||
border-color: #7d7d52; | |||
} | |||
html.skin-theme-clientpref-night .ambox-notice { | |||
background-color: #2a2a30; /* 青系を暗く */ | |||
border-color: #44447a; | |||
} | |||
html.skin-theme-clientpref-night .community-portal-h1 { | |||
background: #1f1f23; /* 暗い背景色 */ | |||
color: #ffffff; /* 明るい文字色 */ | |||
border-left: solid 5px #44447a; | |||
border-bottom: solid 3px #54595d; | |||
} | |||
} | |||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .tmpl-language-icon { | html.skin-theme-clientpref-os .tmpl-language-icon { | ||
color: white !important; | color: white !important; | ||
} | } | ||
.infobox, .mbox, .ambox, .boxmenu { | |||
background-color: #1f1f23; /* 暗い背景色 */ | |||
color: #ffffff; /* 明るい文字色 */ | |||
border-color: #54595d; | |||
} | |||
.infobox th { | |||
background-color: #1f1f23 !important; /* ヘッダーの暗い背景色 */ | |||
color: #ffffff; | |||
} | |||
.infobox a, .mbox a, .ambox a, .boxmenu a { | |||
color: #5b92e5; | |||
} | |||
/* ambox の種類別の色分けをダークモード向けに調整 */ | |||
.ambox-content { | |||
background-color: #4a382e; /* オレンジ系を暗く */ | |||
border-color: #8f5c35; | |||
} | |||
.ambox-style { | |||
background-color: #4a4a30; /* 黄色系を暗く */ | |||
border-color: #7d7d52; | |||
} | |||
.ambox-notice { | |||
background-color: #2a2a30; /* 青系を暗く */ | |||
border-color: #44447a; | |||
} | |||
.community-portal-h1 { | |||
background: #1f1f23; /* 暗い背景色 */ | |||
color: #ffffff; /* 明るい文字色 */ | |||
border-left: solid 5px #44447a; | |||
border-bottom: solid 3px #54595d; | |||
} | |||
} | |||
/*モバイルビューの場合のみ表示（デスクトップでは非表示）*/ | |||
.mobile-only{ | |||
display: none; | |||
} | |||
/** | |||
20251117追記：BoxMenuで横幅いっぱいに画像を広げた場合に | |||
極小サイズの画像の大きさが不揃いになる現象を修正 | |||
**/ | |||
/*画像の最大サイズを指定(Boxmenu用)*/ | |||
.img-width-100 img{ | |||
display: block; | |||
width: 100%; /* max_widthから変更して強制 */ | |||
height: auto; | |||
} | |||
/*画像の縦横比を指定*/ | |||
.aspect-ratio-3-2 img{ | |||
aspect-ratio: 3 / 2; | |||
} | |||
.aspect-ratio-4-3 img{ | |||
aspect-ratio: 4 / 3; | |||
} | |||
.aspect-ratio-16-9 img{ | |||
aspect-ratio: 16 / 9; | |||
} | |||
.aspect-ratio-1-1 img{ | |||
aspect-ratio: 1 / 1; | |||
} | |||
/********************************************************************* | |||
20250910追記：コミュニティポータルで使用している | |||
装飾などに対応 | |||
**********************************************************************/ | |||
.community-portal-h1 { | |||
padding: 0.4em 0.5em; | |||
background: #f4f4f4; | |||
border-left: solid 5px #7db4e6; | |||
border-bottom: solid 3px #d7d7d7; | |||
} | |||
/********************************************************************* | |||
20251116追記：Boxmenu用 | |||
**********************************************************************/ | |||
.boxmenu { | |||
width: auto; | |||
margin: 5px; | |||
padding: 5px; | |||
border: solid 2px #808080; | |||
background-color: #f0f0ff; | |||
} | } | ||