信号機Wiki

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

← 古い編集
羽井出 (トーク | 投稿記録)
ビューロクラット、checkuser、checkuser-temporary-account-viewer、インターフェース管理者、制限された名前空間の編集者、プッシュ・サブスクリプション取扱者、サーバー管理者、秘匿者、管理者
1,127 回編集
調整
羽井出 (トーク | 投稿記録)
ビューロクラット、checkuser、checkuser-temporary-account-viewer、インターフェース管理者、制限された名前空間の編集者、プッシュ・サブスクリプション取扱者、サーバー管理者、秘匿者、管理者
1,127 回編集
ダークモード対応など
 
148行目: 148行目:
}
}


/*デスクトップの場合のみ表示（モバイルビューでは非表示）*/
/*********************************************************************
.desktop-only {
ここから下はデスクトップ版からの移植
display: none !important;
**********************************************************************/
}
 
/*画像の最大サイズを指定(Boxmenu用)*/
.img-width-100 img{
    max-width: 100%;
    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;
}


/* Infobox等（デスクトップ版から複製） */
/* Infobox等（デスクトップ版から複製） */
312行目: 292行目:
right: 3px;
right: 3px;
font-weight: normal;
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;
}
}
/*デスクトップの場合のみ表示（モバイルビューでは非表示）*/
.desktop-only {
display: none !important;
}
/*画像の最大サイズを指定(Boxmenu用)*/
.img-width-100 img{
    max-width: 100%;
    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;
}
}


320行目: 405行目:
.skin-minerva ul.footer-info li, .skin-minerva ul.footer-places li {
.skin-minerva ul.footer-info li, .skin-minerva ul.footer-places li {
display: inline-block;
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」から取得