MediaWiki:Common.css

提供: MochiuWiki : SUSE, EC, PCB

2025年11月11日 (火) 04:44時点におけるWiki (トーク | 投稿記録)による版

📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。

  • Firefox / Safari: Shift を押しながら 再読み込み をクリックするか、Ctrl-F5 または Ctrl-R を押してください (Mac では ⌘-R)
  • Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)
  • Microsoft Edge: Ctrl を押しながら 最新の情報に更新 をクリックするか、Ctrl-F5 を押してください。
/* ============================================
   WikiEditorツールバーのアイコン色修正
   ライトモードでアイコンを黒く表示
   ============================================ */

/* ============================================
   WikiEditorツールバーの背景色設定
   ============================================ */

/* ライトモード（デフォルト）での背景色 - 薄い灰色 */
/* グラデーションを完全に無効化して単色背景に */
.wikiEditor-ui-toolbar,
.wikiEditor-ui .wikiEditor-ui-top,
.wikiEditor-ui-toolbar .wikiEditor-ui-buttons {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    background-image: none !important;
}

/* ツールバーの各セクションの背景も統一 */
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .group-insert,
.wikiEditor-ui-toolbar .group-format {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ダークモードでは暗い背景色に */
body.theme-dark .wikiEditor-ui-toolbar,
body.theme-dark .wikiEditor-ui .wikiEditor-ui-top,
body.theme-dark .wikiEditor-ui-toolbar .wikiEditor-ui-buttons,
html.theme-dark .wikiEditor-ui-toolbar,
html.theme-dark .wikiEditor-ui .wikiEditor-ui-top,
html.theme-dark .wikiEditor-ui-toolbar .wikiEditor-ui-buttons {
    background: #2d2d2d !important;
    background-color: #2d2d2d !important;
    background-image: none !important;
}

body.theme-dark .wikiEditor-ui-toolbar .sections,
body.theme-dark .wikiEditor-ui-toolbar .group,
body.theme-dark .wikiEditor-ui-toolbar .group-insert,
body.theme-dark .wikiEditor-ui-toolbar .group-format,
html.theme-dark .wikiEditor-ui-toolbar .sections,
html.theme-dark .wikiEditor-ui-toolbar .group,
html.theme-dark .wikiEditor-ui-toolbar .group-insert,
html.theme-dark .wikiEditor-ui-toolbar .group-format {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* 自動モード用 */
@media (prefers-color-scheme: light) {
    body.theme-auto .wikiEditor-ui-toolbar,
    body.theme-auto .wikiEditor-ui .wikiEditor-ui-top,
    body.theme-auto .wikiEditor-ui-toolbar .wikiEditor-ui-buttons,
    html.theme-auto .wikiEditor-ui-toolbar,
    html.theme-auto .wikiEditor-ui .wikiEditor-ui-top,
    html.theme-auto .wikiEditor-ui-toolbar .wikiEditor-ui-buttons {
        background: #f5f5f5 !important;
        background-color: #f5f5f5 !important;
        background-image: none !important;
    }
    
    body.theme-auto .wikiEditor-ui-toolbar .sections,
    body.theme-auto .wikiEditor-ui-toolbar .group,
    html.theme-auto .wikiEditor-ui-toolbar .sections,
    html.theme-auto .wikiEditor-ui-toolbar .group {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
}

@media (prefers-color-scheme: dark) {
    body.theme-auto .wikiEditor-ui-toolbar,
    body.theme-auto .wikiEditor-ui .wikiEditor-ui-top,
    body.theme-auto .wikiEditor-ui-toolbar .wikiEditor-ui-buttons,
    html.theme-auto .wikiEditor-ui-toolbar,
    html.theme-auto .wikiEditor-ui .wikiEditor-ui-top,
    html.theme-auto .wikiEditor-ui-toolbar .wikiEditor-ui-buttons {
        background: #2d2d2d !important;
        background-color: #2d2d2d !important;
        background-image: none !important;
    }
    
    body.theme-auto .wikiEditor-ui-toolbar .sections,
    body.theme-auto .wikiEditor-ui-toolbar .group,
    html.theme-auto .wikiEditor-ui-toolbar .sections,
    html.theme-auto .wikiEditor-ui-toolbar .group {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
}

/* ライトモード（デフォルト）でのアイコン設定 */
/* OOUIアイコンの色を黒に変更 */
.wikiEditor-ui-toolbar .oo-ui-icon-bold,
.wikiEditor-ui-toolbar .oo-ui-icon-italic,
.wikiEditor-ui-toolbar .oo-ui-icon-link,
.wikiEditor-ui-toolbar .oo-ui-icon-reference,
.wikiEditor-ui-toolbar .oo-ui-icon-image,
.wikiEditor-ui-toolbar .oo-ui-iconElement-icon {
    /* アイコンのマスク画像を反転させて黒く表示 */
    filter: brightness(0) saturate(100%) !important;
    opacity: 0.87 !important;
}

/* ボタンテキストの色も黒に */
.wikiEditor-ui-toolbar .oo-ui-buttonElement-button {
    color: #202124 !important;
}

/* ホバー時の視認性向上 */
.wikiEditor-ui-toolbar .oo-ui-buttonElement:hover .oo-ui-iconElement-icon {
    opacity: 1 !important;
}

/* ============================================
   ダークモード用の設定
   ============================================ */

/* ダークモードではアイコンを白く表示 */
body.theme-dark .wikiEditor-ui-toolbar .oo-ui-icon-bold,
body.theme-dark .wikiEditor-ui-toolbar .oo-ui-icon-italic,
body.theme-dark .wikiEditor-ui-toolbar .oo-ui-icon-link,
body.theme-dark .wikiEditor-ui-toolbar .oo-ui-icon-reference,
body.theme-dark .wikiEditor-ui-toolbar .oo-ui-icon-image,
body.theme-dark .wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
html.theme-dark .wikiEditor-ui-toolbar .oo-ui-iconElement-icon {
    filter: none !important;
    opacity: 0.87 !important;
}

/* ダークモードではボタンテキストを白に */
body.theme-dark .wikiEditor-ui-toolbar .oo-ui-buttonElement-button,
html.theme-dark .wikiEditor-ui-toolbar .oo-ui-buttonElement-button {
    color: #e0e0e0 !important;
}

/* ============================================
   自動モード（OSの設定に従う）
   ============================================ */

/* 自動モード + ライトテーマの場合 */
@media (prefers-color-scheme: light) {
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .oo-ui-iconElement-icon {
        filter: brightness(0) saturate(100%) !important;
        opacity: 0.87 !important;
    }
    
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement-button,
    html.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement-button {
        color: #202124 !important;
    }
}

/* 自動モード + ダークテーマの場合 */
@media (prefers-color-scheme: dark) {
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .oo-ui-iconElement-icon {
        filter: none !important;
        opacity: 0.87 !important;
    }
    
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement-button,
    html.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement-button {
        color: #e0e0e0 !important;
    }
}

/* ============================================
   追加の調整: グループとツール全体
   ============================================ */

/* ツールバー全体のグループにも適用 */
.wikiEditor-ui-toolbar .group .tool {
    color: inherit;
}

/* アクティブ状態のボタン */
.wikiEditor-ui-toolbar .oo-ui-buttonElement-active .oo-ui-buttonElement-button {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

body.theme-dark .wikiEditor-ui-toolbar .oo-ui-buttonElement-active .oo-ui-buttonElement-button,
html.theme-dark .wikiEditor-ui-toolbar .oo-ui-buttonElement-active .oo-ui-buttonElement-button {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   より具体的なセレクタ（優先度を上げるため）
   ============================================ */

/* すべてのOOUIアイコン要素に強制適用 */
.wikiEditor-ui-toolbar .group .tool .oo-ui-iconElement-icon,
.wikiEditor-ui-toolbar .group-insert .tool .oo-ui-iconElement-icon,
.wikiEditor-ui-toolbar .group-format .tool .oo-ui-iconElement-icon {
    filter: brightness(0) saturate(100%) !important;
}

/* ダークモード用の強制適用 */
body.theme-dark .wikiEditor-ui-toolbar .group .tool .oo-ui-iconElement-icon,
body.theme-dark .wikiEditor-ui-toolbar .group-insert .tool .oo-ui-iconElement-icon,
body.theme-dark .wikiEditor-ui-toolbar .group-format .tool .oo-ui-iconElement-icon,
html.theme-dark .wikiEditor-ui-toolbar .group .tool .oo-ui-iconElement-icon,
html.theme-dark .wikiEditor-ui-toolbar .group-insert .tool .oo-ui-iconElement-icon,
html.theme-dark .wikiEditor-ui-toolbar .group-format .tool .oo-ui-iconElement-icon {
    filter: none !important;
}
「http://mochiuwiki.e2.valueserver.jp/index.php?title=MediaWiki:Common.css&oldid=13462」から取得