MediaWiki:CodeMirror.css

From MB Wiki
Revision as of 04:13, 20 April 2026 by Ais (talk | contribs) (2nd fix for the CodeMirror spacing issue)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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 EDITOR FIXES
   Resolves character insertion positioning
   ============================================ */

/* Reset any inherited grid/flex behaviors from main styles */
.wikiEditor-ui {
    display: block !important;
    position: relative !important;
}

.wikiEditor-ui-view {
    background: var(--theme-page-background-color--secondary);
    border: 1px solid var(--theme-border-color);
    color: var(--theme-page-text-color);
    position: relative !important;
    display: block !important;
}

/* CRITICAL: Create proper stacking context */
.wikiEditor-ui .wikiEditor-ui-top,
.wikiEditor-ui .wikiEditor-ui-toolbar,
.wikiEditor-ui .wikiEditor-ui-text,
.wikiEditor-ui .wikiEditor-ui-bottom {
    position: relative;
    z-index: auto;
}

/* Editor text area - ensure it's the only element receiving input */
.wikiEditor-ui .wikiEditor-ui-text {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    clear: both !important;
}

/* CodeMirror specific fixes */
.CodeMirror {
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    min-height: 300px !important;
    font-family: 'Consolas', 'Monaco', 'Menlo', monospace !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    background: var(--theme-page-background-color--secondary) !important;
    color: var(--theme-page-text-color) !important;
    border: 1px solid var(--theme-border-color) !important;
    border-radius: 4px !important;
}

/* Ensure CodeMirror scroll container doesn't capture events incorrectly */
.CodeMirror-scroll {
    position: relative !important;
    overflow: auto !important;
    height: 100% !important;
}

/* Cursor positioning - CRITICAL FIX */
.CodeMirror-cursor {
    position: absolute !important;
    z-index: 100 !important;
    pointer-events: none !important;
    border-left: 2px solid var(--theme-page-text-color) !important;
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
    position: relative !important;
    z-index: 1 !important;
}

.CodeMirror-lines {
    position: relative !important;
    z-index: 1 !important;
    padding: 4px 0 !important;
}

.CodeMirror-focused {
    z-index: 2 !important;
}

/* Selection highlighting */
.CodeMirror-selected {
    background: rgba(108, 92, 231, 0.3) !important;
    z-index: 50 !important;
}

.CodeMirror-focused .CodeMirror-selected {
    background: rgba(108, 92, 231, 0.4) !important;
}

/* Line numbers */
.CodeMirror-gutters {
    background: var(--theme-page-background-color) !important;
    border-right: 1px solid var(--theme-border-color) !important;
    z-index: 1 !important;
}

.CodeMirror-linenumber {
    color: rgba(var(--theme-border-color-rgb), 0.7) !important;
    padding: 0 8px 0 5px !important;
}

/* Toolbar positioning - ensure it doesn't overlay editor input area */
.wikiEditor-ui-toolbar {
    position: relative !important;
    z-index: 10 !important;
    background: var(--theme-page-background-color--secondary) !important;
    border-bottom: 1px solid var(--theme-border-color) !important;
}

.wikiEditor-ui-toolbar .group {
    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);
    position: relative;
    z-index: 10;
}

/* Sections - ensure hidden sections don't block input */
.wikiEditor-ui-toolbar .sections {
    position: relative !important;
    z-index: 5 !important;
}

.wikiEditor-ui-toolbar .section-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Dropdown menus - must float above everything */
.wikiEditor-ui-toolbar .menu {
    position: absolute !important;
    z-index: 1000 !important;
    background: var(--theme-page-background-color--secondary) !important;
    border: 1px solid var(--theme-border-color) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.wikiEditor-ui-toolbar .options {
    background: var(--theme-page-background-color--secondary) !important;
}

.wikiEditor-ui-toolbar .menu .options .option {
    background: var(--theme-page-background-color--secondary);
    color: var(--theme-page-text-color);
    padding: 6px 12px;
    cursor: pointer;
}

.wikiEditor-ui-toolbar .menu .options .option:hover {
    background: var(--accent) !important;
    color: white !important;
}

/* Tabs styling */
.wikiEditor-ui-toolbar .tabs {
    position: relative !important;
    z-index: 8 !important;
    background: var(--theme-page-background-color--secondary) !important;
    border-top: 1px solid var(--theme-border-color) !important;
}

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

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

/* Character palette */
.wikiEditor-ui-toolbar .booklet {
    position: relative !important;
    z-index: 15 !important;
    background: var(--theme-page-background-color--secondary) !important;
}

.wikiEditor-ui-toolbar #wikiEditor-section-characters {
    background: var(--theme-page-background-color--secondary) !important;
}

.wikiEditor-ui-toolbar .page-characters div span,
.wikiEditor-ui-toolbar #wikiEditor-section-characters [role="option"] {
    color: var(--theme-page-text-color);
    display: inline-block !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 3px !important;
    transition: background 0.15s ease !important;
}

.wikiEditor-ui-toolbar #wikiEditor-section-characters [role="option"]:hover {
    background: var(--accent) !important;
    color: white !important;
}

/* OOUI Button fixes */
.wikiEditor-ui-toolbar .oo-ui-buttonElement-button {
    background: transparent !important;
    border: none !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

.wikiEditor-ui-toolbar .oo-ui-buttonElement-button:hover {
    background: var(--accent) !important;
}

.wikiEditor-ui-toolbar .oo-ui-buttonElement-button .oo-ui-iconElement-icon {
    filter: brightness(0) invert(1) !important;
}

/* Active toggle button */
.wikiEditor-ui-toolbar .oo-ui-toggleWidget-on .oo-ui-buttonElement-button {
    background: var(--accent) !important;
}

/* Help section tables */
.wikiEditor-ui-toolbar .page-table table {
    background: var(--theme-page-background-color--secondary) !important;
    color: var(--theme-page-text-color) !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

.wikiEditor-ui-toolbar .page-table th,
.wikiEditor-ui-toolbar .page-table td {
    border: 1px solid var(--theme-border-color) !important;
    padding: 8px 12px !important;
}

.wikiEditor-ui-toolbar .page-table th {
    background: var(--accent) !important;
    color: white !important;
}

/* Hide custom MsWikiEditor buttons if not needed */
.wikiEditor-ui-toolbar a.tool-button[rel="anam"] {
    display: none !important;
}

/* Clear float at bottom */
.wikiEditor-ui-toolbar > div[style*="clear: both"] {
    display: block !important;
    clear: both !important;
    height: 1px !important;
    pointer-events: none !important;
}

/* Ensure the actual textarea/editor is ALWAYS interactive */
.wikiEditor-ui textarea#wpTextbox1,
.wikiEditor-ui .CodeMirror,
.wikiEditor-ui .CodeMirror textarea {
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Fix for any overlay issues from main layout */
body .wikiEditor-ui {
    isolation: isolate !important;
}

body .wikiEditor-ui-view {
    isolation: isolate !important;
}

/* Dark theme specific fixes */
.skin-vector-dark .wikiEditor-ui .oo-ui-iconElement-icon {
    filter: invert(1) !important;
}

.skin-vector-dark .wikiEditor-ui-toolbar .oo-ui-buttonElement-button:hover .oo-ui-iconElement-icon {
    filter: invert(1) !important;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .wikiEditor-ui-toolbar .group {
        flex-wrap: wrap;
    }
    
    .CodeMirror {
        font-size: 16px !important; /* Prevent zoom on mobile */
    }
}
Retrieved from "https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CodeMirror.css&oldid=28395"