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

提供: MochiuWiki : SUSE, EC, PCB

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

← 古い編集
編集の要約なし
タグ: 差し戻し済み
ページの白紙化
タグ: 白紙化 手動差し戻し
 
(同じ利用者による、間の25版が非表示)
1行目: 1行目:
/* ============================================
  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;
}
/* ============================================
  ライトモード専用のスタイル
  ============================================ */
/* theme-lightクラスが明示的に指定されている場合 */
body.theme-light .wikiEditor-ui-toolbar,
body.theme-light .wikiEditor-ui .wikiEditor-ui-top,
body.theme-light .wikiEditor-ui-toolbar .wikiEditor-ui-buttons,
html.theme-light .wikiEditor-ui-toolbar,
html.theme-light .wikiEditor-ui .wikiEditor-ui-top,
html.theme-light .wikiEditor-ui-toolbar .wikiEditor-ui-buttons {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    background-image: none !important;
}
body.theme-light .wikiEditor-ui-toolbar .sections,
body.theme-light .wikiEditor-ui-toolbar .group,
body.theme-light .wikiEditor-ui-toolbar .group-insert,
body.theme-light .wikiEditor-ui-toolbar .group-format,
html.theme-light .wikiEditor-ui-toolbar .sections,
html.theme-light .wikiEditor-ui-toolbar .group,
html.theme-light .wikiEditor-ui-toolbar .group-insert,
html.theme-light .wikiEditor-ui-toolbar .group-format {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
/* ライトモード: アイコンを黒に */
body.theme-light .wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
body.theme-light .wikiEditor-ui-toolbar .oo-ui-icon-bold,
body.theme-light .wikiEditor-ui-toolbar .oo-ui-icon-italic,
body.theme-light .wikiEditor-ui-toolbar .oo-ui-icon-link,
body.theme-light .wikiEditor-ui-toolbar .oo-ui-icon-reference,
body.theme-light .wikiEditor-ui-toolbar .oo-ui-icon-image,
body.theme-light .wikiEditor-ui-toolbar .group .tool .oo-ui-iconElement-icon,
body.theme-light .wikiEditor-ui-toolbar .group-insert .tool .oo-ui-iconElement-icon,
body.theme-light .wikiEditor-ui-toolbar .group-format .tool .oo-ui-iconElement-icon,
html.theme-light .wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
html.theme-light .wikiEditor-ui-toolbar .group .tool .oo-ui-iconElement-icon,
html.theme-light .wikiEditor-ui-toolbar .group-insert .tool .oo-ui-iconElement-icon,
html.theme-light .wikiEditor-ui-toolbar .group-format .tool .oo-ui-iconElement-icon {
    filter: brightness(0) saturate(100%) !important;
    opacity: 0.87 !important;
}
/* ライトモード: テキストを黒に */
body.theme-light .wikiEditor-ui-toolbar .oo-ui-buttonElement-button,
html.theme-light .wikiEditor-ui-toolbar .oo-ui-buttonElement-button {
    color: #202124 !important;
}
/* ライトモード: ホバー時 */
body.theme-light .wikiEditor-ui-toolbar .oo-ui-buttonElement:hover .oo-ui-iconElement-icon,
html.theme-light .wikiEditor-ui-toolbar .oo-ui-buttonElement:hover .oo-ui-iconElement-icon {
    opacity: 1 !important;
}
/* ============================================
  ダークモード専用のスタイル
  ============================================ */
/* theme-darkクラスが指定されている場合のみ適用 */
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;
}
/* ダークモード: アイコンを白に（黒にしてから反転） */
body.theme-dark .wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
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 .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 .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: brightness(0) saturate(100%) invert(1) !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;
}
/* ダークモード: ホバー時 */
body.theme-dark .wikiEditor-ui-toolbar .oo-ui-buttonElement:hover .oo-ui-iconElement-icon,
html.theme-dark .wikiEditor-ui-toolbar .oo-ui-buttonElement:hover .oo-ui-iconElement-icon {
    opacity: 1 !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;
}
/* ============================================
  自動モード専用のスタイル
  メディアクエリで完全に分離
  ============================================ */
/* 自動モード + システムがライトテーマの場合 */
@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,
    body.theme-auto .wikiEditor-ui-toolbar .group-insert,
    body.theme-auto .wikiEditor-ui-toolbar .group-format,
    html.theme-auto .wikiEditor-ui-toolbar .sections,
    html.theme-auto .wikiEditor-ui-toolbar .group,
    html.theme-auto .wikiEditor-ui-toolbar .group-insert,
    html.theme-auto .wikiEditor-ui-toolbar .group-format {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
   
    /* アイコンを黒に */
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-icon-bold,
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-icon-italic,
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-icon-link,
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-icon-reference,
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-icon-image,
    body.theme-auto .wikiEditor-ui-toolbar .group .tool .oo-ui-iconElement-icon,
    body.theme-auto .wikiEditor-ui-toolbar .group-insert .tool .oo-ui-iconElement-icon,
    body.theme-auto .wikiEditor-ui-toolbar .group-format .tool .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .group .tool .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .group-insert .tool .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .group-format .tool .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;
    }
   
    /* ホバー時 */
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement:hover .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement:hover .oo-ui-iconElement-icon {
        opacity: 1 !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,
    body.theme-auto .wikiEditor-ui-toolbar .group-insert,
    body.theme-auto .wikiEditor-ui-toolbar .group-format,
    html.theme-auto .wikiEditor-ui-toolbar .sections,
    html.theme-auto .wikiEditor-ui-toolbar .group,
    html.theme-auto .wikiEditor-ui-toolbar .group-insert,
    html.theme-auto .wikiEditor-ui-toolbar .group-format {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
   
    /* アイコンを白に */
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-icon-bold,
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-icon-italic,
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-icon-link,
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-icon-reference,
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-icon-image,
    body.theme-auto .wikiEditor-ui-toolbar .group .tool .oo-ui-iconElement-icon,
    body.theme-auto .wikiEditor-ui-toolbar .group-insert .tool .oo-ui-iconElement-icon,
    body.theme-auto .wikiEditor-ui-toolbar .group-format .tool .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .group .tool .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .group-insert .tool .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .group-format .tool .oo-ui-iconElement-icon {
        filter: brightness(0) saturate(100%) invert(1) !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;
    }
   
    /* ホバー時 */
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement:hover .oo-ui-iconElement-icon,
    html.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement:hover .oo-ui-iconElement-icon {
        opacity: 1 !important;
    }
   
    /* アクティブ状態のボタン */
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement-active .oo-ui-buttonElement-button,
    html.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement-active .oo-ui-buttonElement-button {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
}
/* ============================================
  共通スタイル（すべてのモードで適用）
  ============================================ */
/* ツールバー全体のグループ */
.wikiEditor-ui-toolbar .group .tool {
    color: inherit;
}
/* ライトモード: アクティブ状態のボタン */
body.theme-light .wikiEditor-ui-toolbar .oo-ui-buttonElement-active .oo-ui-buttonElement-button,
html.theme-light .wikiEditor-ui-toolbar .oo-ui-buttonElement-active .oo-ui-buttonElement-button,
body:not(.theme-dark):not(.theme-auto) .wikiEditor-ui-toolbar .oo-ui-buttonElement-active .oo-ui-buttonElement-button {
    background-color: rgba(0, 0, 0, 0.05) !important;
}
/* 自動モード（ライト）: アクティブ状態のボタン */
@media (prefers-color-scheme: light) {
    body.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement-active .oo-ui-buttonElement-button,
    html.theme-auto .wikiEditor-ui-toolbar .oo-ui-buttonElement-active .oo-ui-buttonElement-button {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
}

2025年12月19日 (金) 18:42時点における最新版

「http://mochiuwiki.e2.valueserver.jp/index.php?title=MediaWiki:Common.css&oldid=13784」から取得