信号機Wiki

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

← 古い編集
銀河連邦 (トーク | 投稿記録)
ビューロクラット、インターフェース管理者、制限された名前空間の編集者、プッシュ・サブスクリプション取扱者、サーバー管理者、秘匿者、管理者、テスト利用者グループ
780 回編集
大胆な編集終了
タグ: モバイル編集 モバイルウェブ編集 改良版モバイル編集
羽井出 (トーク | 投稿記録)
ビューロクラット、checkuser、checkuser-temporary-account-viewer、インターフェース管理者、制限された名前空間の編集者、プッシュ・サブスクリプション取扱者、サーバー管理者、秘匿者、管理者
1,127 回編集
ダークモード対応など
 
(同じ利用者による、間の2版が非表示)
146行目: 146行目:
.ambox-learn-more, .minerva-icon--issue-generic-defaultColor {
.ambox-learn-more, .minerva-icon--issue-generic-defaultColor {
display: none;
display: none;
}
/*********************************************************************
ここから下はデスクトップ版からの移植
**********************************************************************/
/* Infobox等（デスクトップ版から複製） */
/* Merge template style */
.messagebox {
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
width: 80%;
margin: 0 auto 1em auto;
padding: 0.2em;
text-align: justify;
}
.infobox {
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
color: black;
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
float: right;
clear: right;
text-align: left;
font-size: 88%;
line-height: 1.5em;
}
.infobox caption {
margin-top: 0.5em;
font-size: 125%;
font-weight: bold;
}
.infobox td,
.infobox th {
vertical-align: top;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #a2a9b1;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
border: 0;
border-top: 1px solid #a2a9b1;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
border: 0;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
/* Styles for geography infoboxes, eg countries,
  country subdivisions, cities, etc.            */
.infobox.geography {
border-collapse: collapse;
line-height: 1.6em;
font-size: 88%;
}
.infobox.geography  td,
.infobox.geography  th {
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
border: 0;
padding: 0 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
border-top: 0;
border-bottom: 1px solid #a2a9b1;
padding: 0 0.6em 0.4em 0.6em;
}
.infobox.geography .maptable td,
.infobox.geography .maptable th {
border: 0;
padding: 0;
}
/* NavFrame関係。[[MediaWiki:Monobook.css]]も参照 */
div.NavFrame {
margin: 0px;
padding: 2px;
border: 1px solid #a2a9b1;
text-align: center;
border-collapse: collapse;
font-size: 95%;
}
div.NavFrame div.NavHead {
height: 1.6em;
font-weight: bold;
font-size: 100%;
background-color: var(--background-color-neutral-subtle, #efefef);
position: relative;
text-align: center;
}
div.NavFrame p {
font-size: 100%;
}
div.NavFrame div.NavContent {
font-size: 100%;
}
div.NavFrame div.NavContent p {
font-size: 100%;
}
a.NavToggle {
position: absolute;
top: 0px;
right: 3px;
font-weight: normal;
}
/*********************************************************************
ここから上はデスクトップ版からの移植
----------------------------------------------------------------------
ここから下は独自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) {
html.skin-theme-clientpref-os .tmpl-language-icon {
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;
}
}
}


170行目: 397行目:
.aspect-ratio-1-1 img{
.aspect-ratio-1-1 img{
     aspect-ratio: 1 / 1;
     aspect-ratio: 1 / 1;
}
/*********************************************************************
20251108追記：モバイル版のフッターに追加したリンクが表示されるように変更
**********************************************************************/
/* Display all custom footer items in Minerva Neue skin */
.skin-minerva ul.footer-info li, .skin-minerva ul.footer-places li {
display: inline-block;
}
/*********************************************************************
20251116追記：コミュニティポータルで使用している
装飾などに対応 - モバイル版
**********************************************************************/
.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;
}
}
「https://wiki.signal-st.com/MediaWiki:Mobile.css」から取得