MediaWiki:CodeMirror.css

From MB Wiki
Revision as of 04:07, 20 April 2026 by Ais (talk | contribs) (try fix the code-editor character spacing issue)
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* ============================================
   CodeMirror & WikiEditor Theme Integration
   Fix for character insertion positioning
   ============================================ */

/* Base styling - keep existing but add z-index fix */
.wikiEditor-ui-view {
    background: var(--theme-page-background-color--secondary);
    border: var(--theme-border-color);
    color: var(--theme-page-text-color);
    position: relative;  /* Added - creates proper stacking context */
}

/* Ensure editor area doesn't get covered by toolbar sections */
.wikiEditor-ui .wikiEditor-ui-text {
    position: relative;
    z-index: 5;  /* Lower than toolbar but above base */
}

/* CodeMirror specific fixes */
.CodeMirror {
    position: relative !important;
    z-index: 1 !important;
    height: auto;
    min-height: 300px;
    font-family: monospace;
    line-height: 1.5;
}

.CodeMirror-scroll {
    position: relative !important;
}

/* Ensure focused CodeMirror stays above */
.CodeMirror-focused {
    z-index: 6 !important;
}

/* Fix for cursor and selection positioning */
.CodeMirror-cursor {
    z-index: 100 !important;
}

.CodeMirror-selected {
    z-index: 50 !important;
}

/* Sub styling - FIXED: More specific selectors to avoid hiding necessary elements */
.wikiEditor-ui-toolbar,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .sections,
.wikiEditor-ui-toolbar .section,
.wikiEditor-ui-toolbar #msupload-dropzone,
.wikiEditor-ui-toolbar #msupload-div {
    background: var(--theme-page-background-color--secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-page-text-color);
    fill: var(--theme-page-text-color);
}

/* Specific fix for toolbar groups - ensure they stay above editor */
.wikiEditor-ui-toolbar .toolbar {
    position: relative;
    z-index: 20;
}

.wikiEditor-ui-toolbar .group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* Fix for labels - preserve display property */
.wikiEditor-ui-toolbar .group .label,
.wikiEditor-ui-toolbar .tool-select .label,
.wikiEditor-ui-toolbar .menu .options .option {
    background: var(--theme-page-background-color--secondary);
    color: var(--theme-page-text-color);
    fill: var(--theme-page-text-color);
    border: none;  /* Border variable may not work as-is, use actual border style */
    display: inline-block;  /* Preserve layout */
}

/* Tabs styling - keep but ensure proper z-index */
.wikiEditor-ui-toolbar .tabs {
    position: relative;
    z-index: 15;
}

.wikiEditor-ui-toolbar .tabs span.tab a,
.wikiEditor-ui-toolbar .group .oo-ui-iconElement-icon {
    color: var(--theme-link-color);
    fill: var(--theme-link-color);
}

.wikiEditor-ui-toolbar .tabs span.tab a.current {
    color: var(--theme-page-text-color);
}

/* Character palette - FIXED: Ensure proper positioning */
.wikiEditor-ui-toolbar #wikiEditor-section-characters {
    position: relative;
    z-index: 30;  /* Higher than editor to be clickable */
}

/* Character palette options */
.wikiEditor-ui-toolbar .page-characters div span,
.wikiEditor-ui-toolbar #wikiEditor-section-characters [role="option"] {
    color: var(--theme-page-text-color);
    display: inline-block;
    cursor: pointer;
    padding: 2px 6px;
    pointer-events: auto;  /* Ensure clickable */
}

.wikiEditor-ui-toolbar #wikiEditor-section-characters [role="option"]:hover,
.wikiEditor-ui-toolbar #wikiEditor-section-characters [role="option"].current {
    color: var(--theme-page-text-color);
    background-color: var(--theme-page-background-color) !important;
}

/* FIXED: Make section-hidden truly hidden without breaking layout */
.wikiEditor-ui-toolbar .section-hidden {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

/* Hide specific insert group buttons as originally intended */
.wikiEditor-ui-toolbar #wikiEditor-section-main .group-insert a.tool-button,
.wikiEditor-ui-toolbar #msupload-container,
.ve-init-mw-editSwitch {
    display: none;
}

/* Fix for custom MsWikiEditor tool buttons */
.wikiEditor-ui-toolbar a.tool-button[rel="anam"] {
    display: inline-block !important;  /* Override any hiding */
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    text-indent: -9999px;
    overflow: hidden;
    vertical-align: middle;
}

/* If you want to hide custom MsWikiEditor buttons, use this instead: */
.wikiEditor-ui-toolbar a.tool-button[rel="anam"] {
    display: none !important;
}
/* Remove the line above if you want to keep them visible */

/* Dropdown menus - ensure they float above editor */
.wikiEditor-ui-toolbar .menu {
    position: absolute;
    z-index: 1000;
}

.wikiEditor-ui-toolbar .options {
    background: var(--theme-page-background-color--secondary);
    border: 1px solid var(--theme-border-color);
}

/* Booklet sections (Help, Special characters) */
.wikiEditor-ui-toolbar .booklet {
    position: relative;
    clear: both;
    z-index: 25;
}

.wikiEditor-ui-toolbar .booklet .index {
    background: var(--theme-page-background-color--secondary);
}

.wikiEditor-ui-toolbar .booklet .pages {
    background: var(--theme-page-background-color--secondary);
}

/* Dialog styling - keep existing */
.skin-vector-dark .oo-ui-buttonElement-button,
.skin-vector-dark .ui-dialog .ui-dialog-titlebar-close {
    filter: invert();
}

.ui-dialog,
.ui-dialog > div,
body .ui-dialog .ui-widget-header {
    color: var(--theme-page-text-color);
    background: var(--theme-page-background-color) !important;
    background-image: none;
}

.ui-dialog .ui-button-text {
    background: var(--theme-page-background-color--secondary);
    color: var(--theme-link-color);
}

/* ============================================
   CRITICAL FIX: Ensure editor receives input correctly
   ============================================ */

/* Prevent any element from capturing clicks meant for editor */
.wikiEditor-ui-toolbar .section:not(.section-hidden) {
    pointer-events: auto;
}

/* Make sure the editor area is fully interactive */
.wikiEditor-ui .CodeMirror,
.wikiEditor-ui textarea#wpTextbox1 {
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Fix for any overlay issues */
.wikiEditor-ui-toolbar::after,
.wikiEditor-ui-toolbar > div[style*="clear: both"] {
    content: "";
    display: table;
    clear: both;
}

/* Ensure clear div doesn't block input */
.wikiEditor-ui-toolbar > div[style*="clear: both"] {
    pointer-events: none;
}

/* Fix for var() fallback if CSS variables aren't defined */
.wikiEditor-ui-view {
    --theme-page-background-color--secondary: var(--theme-page-background-color--secondary, #f8f9fa);
    --theme-border-color: var(--theme-border-color, #a2a9b1);
    --theme-page-text-color: var(--theme-page-text-color, #202122);
    --theme-link-color: var(--theme-link-color, #3366cc);
    --theme-page-background-color: var(--theme-page-background-color, #ffffff);
}
Retrieved from "https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CodeMirror.css&oldid=28394"