信号機Wiki

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

← 古い編集
ダークモードいろいろ調整
細 動作確認に成功したためコメントを追記
 
(2人の利用者による、間の6版が非表示)
594行目: 594行目:
color: white !important;
color: white !important;
}
}
/*********************************************************************
ここから下は独自CSS
**********************************************************************/


@media screen {
@media screen {
html.skin-theme-clientpref-night .mbox {
  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; /* 暗い背景色 */
         background-color: #1f1f23;
         color: #ffffff; /*#f8f9fa;*/ /* 明るい文字色 */
         color: #f8f9fa;
         border-color: #54595d;
         border-color: #54595d;
     }
     }
    /* 情報 (notice) のダークモードスタイル */
     html.skin-theme-clientpref-night .infobox th {
     html.skin-theme-clientpref-night .mbox-notice {
         background-color: #1f1f23 !important; /* ヘッダーの暗い背景色 */
         background-color: #2a2a30;
color: #ffffff;
        border-color: #444;
     }
     }
     /* 警告 (warning) のダークモードスタイル */
     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 {
    html.skin-theme-clientpref-night .mbox-warning {
         color: #5b92e5;
        background-color: #4a4a30; /* 少し暗めの黄色系背景 */
        border-color: #7d7d52;
         color: #f8f9fa; /* テキストを明るい色に変更 */
     }
     }
     /* mbox内のリンクの色も調整 */
      
     html.skin-theme-clientpref-night .mbox a {
        /* ambox の種類別の色分けをダークモード向けに調整 */
         color: #5b92e5;  
     html.skin-theme-clientpref-night .ambox-content {
         background-color: #4a382e; /* オレンジ系を暗く */
        border-color: #8f5c35;
     }
     }
    html.skin-theme-clientpref-night .ambox-style {
html.skin-theme-clientpref-night .infobox {
         background-color: #4a4a30; /* 黄色系を暗く */
         background-color: #1f1f23; /* 暗い背景色 */
         border-color: #7d7d52;
        color: #f8f9fa; /* 明るい文字色 */
         border-color: #54595d;
     }
     }
     html.skin-theme-clientpref-night .infobox-header {
     html.skin-theme-clientpref-night .ambox-notice {
         background-color: #31353a; /* ヘッダーの暗い背景色 */
         background-color: #2a2a30; /* 青系を暗く */
         color: #f8f9fa;
         border-color: #44447a;
    }
    html.skin-theme-clientpref-night .infobox a {
        color: #5b92e5;
     }
     }
   
    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) {
636行目: 639行目:
}
}
.mbox {
.infobox, .mbox, .ambox, .boxmenu {
        /* ダークモードの一般的な背景と文字色 */
         background-color: #1f1f23; /* 暗い背景色 */
         background-color: #1f1f23;
         color: #ffffff; /* 明るい文字色 */
         color: #f8f9fa;
         border-color: #54595d;
         border-color: #54595d;
     }
     }
    /* 情報 (notice) のダークモードスタイル */
     .infobox th {
     .mbox-notice {
         background-color: #1f1f23 !important; /* ヘッダーの暗い背景色 */
         background-color: #2a2a30;
color: #ffffff;
        border-color: #444;
     }
     }
     /* 警告 (warning) のダークモードスタイル */
     .infobox a, .mbox a, .ambox a, .boxmenu a {
    .mbox-warning {
         color: #5b92e5;
        background-color: #4a4a30; /* 少し暗めの黄色系背景 */
        border-color: #7d7d52;
         color: #f8f9fa; /* テキストを明るい色に変更 */
     }
     }
     /* mbox内のリンクの色も調整 */
   
     .mbox a {
     /* ambox の種類別の色分けをダークモード向けに調整 */
         color: #5b92e5;  
     .ambox-content {
         background-color: #4a382e; /* オレンジ系を暗く */
        border-color: #8f5c35;
     }
     }
    .ambox-style {
.infobox {
         background-color: #4a4a30; /* 黄色系を暗く */
         background-color: #1f1f23; /* 暗い背景色 */
         border-color: #7d7d52;
        color: #f8f9fa; /* 明るい文字色 */
         border-color: #54595d;
     }
     }
     .infobox-header {
     .ambox-notice {
         background-color: #31353a; /* ヘッダーの暗い背景色 */
         background-color: #2a2a30; /* 青系を暗く */
         color: #f8f9fa;
         border-color: #44447a;
    }
    .infobox a {
        color: #5b92e5;
     }
     }
    .community-portal-h1 {
background: #1f1f23; /* 暗い背景色 */
        color: #ffffff; /* 明るい文字色 */
border-left: solid 5px #44447a;
border-bottom: solid 3px #54595d;
}
}
}


677行目: 678行目:
}
}


/**
20251117追記：BoxMenuで横幅いっぱいに画像を広げた場合に
極小サイズの画像の大きさが不揃いになる現象を修正
**/
/*画像の最大サイズを指定(Boxmenu用)*/
/*画像の最大サイズを指定(Boxmenu用)*/
.img-width-100 img{
.img-width-100 img{
     max-width: 100%;
display: block;
     width: 100%; /* max_widthから変更して強制 */
     height: auto;
     height: auto;
}
}
705行目: 711行目:
border-left: solid 5px #7db4e6;
border-left: solid 5px #7db4e6;
border-bottom: solid 3px #d7d7d7;
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:Common.css」から取得