.ͼ1.cm-focused { outline: 1px dotted #212121; } .ͼ1 { position: relative !important; box-sizing: border-box; display: flex !important; flex-direction: column; } .ͼ1 .cm-scroller { display: flex !important; align-items: flex-start !important; font-family: monospace; line-height: 1.4; height: 100%; overflow-x: auto; position: relative; z-index: 0; overflow-anchor: none; } .ͼ1 .cm-content[contenteditable="true"] { -webkit-user-modify: read-write-plaintext-only; } .ͼ1 .cm-content { margin: 0; flex-grow: 2; flex-shrink: 0; display: block; white-space: pre; word-wrap: normal; box-sizing: border-box; min-height: 100%; padding: 4px 0; outline: none; } .ͼ1 .cm-lineWrapping { white-space: pre-wrap; white-space: break-spaces; word-break: break-word; overflow-wrap: anywhere; flex-shrink: 1; } .ͼ2 .cm-content { caret-color: black; } .ͼ3 .cm-content { caret-color: white; } .ͼ1 .cm-line { display: block; padding: 0 2px 0 6px; } .ͼ1 .cm-layer > * { position: absolute; } .ͼ1 .cm-layer { position: absolute; left: 0; top: 0; contain: size style; } .ͼ2 .cm-selectionBackground { background: #d9d9d9; } .ͼ3 .cm-selectionBackground { background: #222; } .ͼ2.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground { background: #d7d4f0; } .ͼ3.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground { background: #233; } .ͼ1 .cm-cursorLayer { pointer-events: none; } .ͼ1.cm-focused > .cm-scroller > .cm-cursorLayer { animation: steps(1) cm-blink 1.2s infinite; } @keyframes cm-blink { 50% { opacity: 0; } } @keyframes cm-blink2 { 50% { opacity: 0; } } .ͼ1 .cm-cursor, .ͼ1 .cm-dropCursor { border-left: 1.2px solid black; margin-left: -0.6px; pointer-events: none; } .ͼ1 .cm-cursor { display: none; } .ͼ3 .cm-cursor { border-left-color: #444; } .ͼ1 .cm-dropCursor { position: absolute; } .ͼ1.cm-focused > .cm-scroller > .cm-cursorLayer .cm-cursor { display: block; } .ͼ1 .cm-iso { unicode-bidi: isolate; } .ͼ1 .cm-announced { position: fixed; top: -10000px; } @media print { .ͼ1 .cm-announced { display: none; } } .ͼ2 .cm-activeLine { background-color: #cceeff44; } .ͼ3 .cm-activeLine { background-color: #99eeff33; } .ͼ2 .cm-specialChar { color: red; } .ͼ3 .cm-specialChar { color: #f78; } .ͼ1 .cm-gutters { flex-shrink: 0; display: flex; height: 100%; box-sizing: border-box; inset-inline-start: 0; z-index: 200; } .ͼ2 .cm-gutters { background-color: #f5f5f5; color: #6c6c6c; border-right: 1px solid #ddd; } .ͼ3 .cm-gutters { background-color: #333338; color: #ccc; } .ͼ1 .cm-gutter { display: flex !important; flex-direction: column; flex-shrink: 0; box-sizing: border-box; min-height: 100%; overflow: hidden; } .ͼ1 .cm-gutterElement { box-sizing: border-box; } .ͼ1 .cm-lineNumbers .cm-gutterElement { padding: 0 3px 0 5px; min-width: 20px; text-align: right; white-space: nowrap; } .ͼ2 .cm-activeLineGutter { background-color: #e2f2ff; } .ͼ3 .cm-activeLineGutter { background-color: #222227; } .ͼ1 .cm-panels { box-sizing: border-box; position: sticky; left: 0; right: 0; z-index: 300; } .ͼ2 .cm-panels { background-color: #f5f5f5; color: black; } .ͼ2 .cm-panels-top { border-bottom: 1px solid #ddd; } .ͼ2 .cm-panels-bottom { border-top: 1px solid #ddd; } .ͼ3 .cm-panels { background-color: #333338; color: white; } .ͼ1 .cm-tab { display: inline-block; overflow: hidden; vertical-align: bottom; } .ͼ1 .cm-widgetBuffer { vertical-align: text-top; height: 1em; width: 0; display: inline; } .ͼ1 .cm-placeholder { color: #888; display: inline-block; vertical-align: top; } .ͼ1 .cm-highlightSpace { background-image: radial-gradient(circle at 50% 55%, #aaa 20%, transparent 5%); background-position: center; } .ͼ1 .cm-highlightTab { background-image: url('data:image/svg+xml,'); background-size: auto 100%; background-position: right 90%; background-repeat: no-repeat; } .ͼ1 .cm-trailingSpace { background-color: #ff332255; } .ͼ1 .cm-button { vertical-align: middle; color: inherit; font-size: 70%; padding: 0.2em 1em; border-radius: 1px; } .ͼ2 .cm-button:active { background-image: linear-gradient(#b4b4b4, #d0d3d6); } .ͼ2 .cm-button { background-image: linear-gradient(#eff1f5, #d9d9df); border: 1px solid #888; } .ͼ3 .cm-button:active { background-image: linear-gradient(#111, #333); } .ͼ3 .cm-button { background-image: linear-gradient(#393939, #111); border: 1px solid #888; } .ͼ1 .cm-textfield { vertical-align: middle; color: inherit; font-size: 70%; border: 1px solid silver; padding: 0.2em 0.5em; } .ͼ2 .cm-textfield { background-color: white; } .ͼ3 .cm-textfield { border: 1px solid #555; background-color: inherit; } .ͼ1 .cm-diagnostic { padding: 3px 6px 3px 8px; margin-left: -1px; display: block; white-space: pre-wrap; } .ͼ1 .cm-diagnostic-error { border-left: 5px solid #d11; } .ͼ1 .cm-diagnostic-warning { border-left: 5px solid orange; } .ͼ1 .cm-diagnostic-info { border-left: 5px solid #999; } .ͼ1 .cm-diagnostic-hint { border-left: 5px solid #66d; } .ͼ1 .cm-diagnosticAction { font: inherit; border: none; padding: 2px 4px; background-color: #444; color: white; border-radius: 3px; margin-left: 8px; cursor: var(--cursor-pointer); } .ͼ1 .cm-diagnosticSource { font-size: 70%; opacity: 0.7; } .ͼ1 .cm-lintRange { background-position: left bottom; background-repeat: repeat-x; padding-bottom: 0.7px; } .ͼ1 .cm-lintRange-error { background-image: url('data:image/svg+xml,%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%23d11%22%20fill%3D%22none%22%20stroke-width%3D%22.7%22%2F%3E'); } .ͼ1 .cm-lintRange-warning { background-image: url('data:image/svg+xml,%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22orange%22%20fill%3D%22none%22%20stroke-width%3D%22.7%22%2F%3E'); } .ͼ1 .cm-lintRange-info { background-image: url('data:image/svg+xml,%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%23999%22%20fill%3D%22none%22%20stroke-width%3D%22.7%22%2F%3E'); } .ͼ1 .cm-lintRange-hint { background-image: url('data:image/svg+xml,%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%2366d%22%20fill%3D%22none%22%20stroke-width%3D%22.7%22%2F%3E'); } .ͼ1 .cm-lintRange-active { background-color: #ffdd9980; } .ͼ1 .cm-tooltip-lint { padding: 0; margin: 0; } .ͼ1 .cm-lintPoint:after { content: ""; position: absolute; bottom: 0; left: -2px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 4px solid #d11; } .ͼ1 .cm-lintPoint { position: relative; } .ͼ1 .cm-lintPoint-warning:after { border-bottom-color: orange; } .ͼ1 .cm-lintPoint-info:after { border-bottom-color: #999; } .ͼ1 .cm-lintPoint-hint:after { border-bottom-color: #66d; } .ͼ1 .cm-panel.cm-panel-lint ul [aria-selected] u { text-decoration: underline; } .ͼ1 .cm-panel.cm-panel-lint ul [aria-selected] { background-color: #ddd; } .ͼ1 .cm-panel.cm-panel-lint ul:focus [aria-selected] { background: #bdf; background-color: Highlight; color: white; color: HighlightText; } .ͼ1 .cm-panel.cm-panel-lint ul u { text-decoration: none; } .ͼ1 .cm-panel.cm-panel-lint ul { max-height: 100px; overflow-y: auto; padding: 0; margin: 0; } .ͼ1 .cm-panel.cm-panel-lint [name="close"] { position: absolute; top: 0; right: 2px; background: inherit; border: none; font: inherit; padding: 0; margin: 0; } .ͼ1 .cm-panel.cm-panel-lint { position: relative; } .ͼ1 .cm-gutter-lint .cm-gutterElement { padding: 0.2em; } .ͼ1 .cm-gutter-lint { width: 1.4em; } .ͼ1 .cm-lint-marker { width: 1em; height: 1em; } .ͼ1 .cm-lint-marker-info { content: url('data:image/svg+xml,%3Cpath%20fill%3D%22%23aaf%22%20stroke%3D%22%2377e%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%20d%3D%22M5%205L35%205L35%2035L5%2035Z%22%2F%3E'); } .ͼ1 .cm-lint-marker-warning { content: url('data:image/svg+xml,%3Cpath%20fill%3D%22%23fe8%22%20stroke%3D%22%23fd7%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%20d%3D%22M20%206L37%2035L3%2035Z%22%2F%3E'); } .ͼ1 .cm-lint-marker-error { content: url('data:image/svg+xml,%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2215%22%20fill%3D%22%23f87%22%20stroke%3D%22%23f43%22%20stroke-width%3D%226%22%2F%3E'); } .ͼ1 .cm-selectionMatch { background-color: #99ff7780; } .ͼ1 .cm-searchMatch .cm-selectionMatch { background-color: transparent; } .ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > li, .ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > completion-section { padding: 1px 3px; line-height: 1.2; } .ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > li { overflow-x: hidden; text-overflow: ellipsis; cursor: var(--cursor-pointer); } .ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > completion-section { display: list-item; border-bottom: 1px solid silver; padding-left: 0.5em; opacity: 0.7; } .ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul { font-family: monospace; white-space: nowrap; overflow: hidden auto; max-width: 700px; max-width: min(700px, 95vw); min-width: 250px; max-height: 10em; height: 100%; list-style: none; margin: 0; padding: 0; } .ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] { background: #17c; color: white; } .ͼ2 .cm-tooltip-autocomplete-disabled ul li[aria-selected] { background: #777; } .ͼ3 .cm-tooltip-autocomplete ul li[aria-selected] { background: #347; color: white; } .ͼ3 .cm-tooltip-autocomplete-disabled ul li[aria-selected] { background: #444; } .ͼ1 .cm-completionListIncompleteTop:before, .ͼ1 .cm-completionListIncompleteBottom:after { content: "···"; opacity: 0.5; display: block; text-align: center; } .ͼ1 .cm-tooltip.cm-completionInfo { position: absolute; padding: 3px 9px; width: max-content; max-width: 400px; box-sizing: border-box; white-space: pre-line; } .ͼ1 .cm-completionInfo.cm-completionInfo-left { right: 100%; } .ͼ1 .cm-completionInfo.cm-completionInfo-right { left: 100%; } .ͼ1 .cm-completionInfo.cm-completionInfo-left-narrow { right: 30px; } .ͼ1 .cm-completionInfo.cm-completionInfo-right-narrow { left: 30px; } .ͼ2 .cm-snippetField { background-color: #00000022; } .ͼ3 .cm-snippetField { background-color: #ffffff22; } .ͼ1 .cm-snippetFieldPosition { vertical-align: text-top; width: 0; height: 1.15em; display: inline-block; margin: 0 -0.7px -0.7em; border-left: 1.4px dotted #888; } .ͼ1 .cm-completionMatchedText { text-decoration: underline; } .ͼ1 .cm-completionDetail { margin-left: 0.5em; font-style: italic; } .ͼ1 .cm-completionIcon { font-size: 90%; width: 0.8em; display: inline-block; text-align: center; padding-right: 0.6em; opacity: 0.6; box-sizing: content-box; } .ͼ1 .cm-completionIcon-function:after, .ͼ1 .cm-completionIcon-method:after { content: "ƒ"; } .ͼ1 .cm-completionIcon-class:after { content: "○"; } .ͼ1 .cm-completionIcon-interface:after { content: "◌"; } .ͼ1 .cm-completionIcon-variable:after { content: "𝑥"; } .ͼ1 .cm-completionIcon-constant:after { content: "𝐶"; } .ͼ1 .cm-completionIcon-type:after { content: "𝑡"; } .ͼ1 .cm-completionIcon-enum:after { content: "∪"; } .ͼ1 .cm-completionIcon-property:after { content: "□"; } .ͼ1 .cm-completionIcon-keyword:after { content: "🔑︎"; } .ͼ1 .cm-completionIcon-namespace:after { content: "▢"; } .ͼ1 .cm-completionIcon-text:after { content: "abc"; font-size: 50%; vertical-align: middle; } .ͼ1 .cm-tooltip { z-index: 100; box-sizing: border-box; } .ͼ2 .cm-tooltip { border: 1px solid #bbb; background-color: #f5f5f5; } .ͼ2 .cm-tooltip-section:not(:first-child) { border-top: 1px solid #bbb; } .ͼ3 .cm-tooltip { background-color: #333338; color: white; } .ͼ1 .cm-tooltip-arrow:before, .ͼ1 .cm-tooltip-arrow:after { content: ""; position: absolute; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; } .ͼ1 .cm-tooltip-above .cm-tooltip-arrow:before { border-top: 7px solid #bbb; } .ͼ1 .cm-tooltip-above .cm-tooltip-arrow:after { border-top: 7px solid #f5f5f5; bottom: 1px; } .ͼ1 .cm-tooltip-above .cm-tooltip-arrow { bottom: -7px; } .ͼ1 .cm-tooltip-below .cm-tooltip-arrow:before { border-bottom: 7px solid #bbb; } .ͼ1 .cm-tooltip-below .cm-tooltip-arrow:after { border-bottom: 7px solid #f5f5f5; top: 1px; } .ͼ1 .cm-tooltip-below .cm-tooltip-arrow { top: -7px; } .ͼ1 .cm-tooltip-arrow { height: 7px; width: 14px; position: absolute; z-index: -1; overflow: hidden; } .ͼ3 .cm-tooltip .cm-tooltip-arrow:before { border-top-color: #333338; border-bottom-color: #333338; } .ͼ3 .cm-tooltip .cm-tooltip-arrow:after { border-top-color: transparent; border-bottom-color: transparent; } .ͼ1.cm-focused .cm-matchingBracket { background-color: #328c8252; } .ͼ1.cm-focused .cm-nonmatchingBracket { background-color: #bb555544; } .ͼ1 .cm-foldPlaceholder { background-color: #eee; border: 1px solid #ddd; color: #888; border-radius: 0.2em; margin: 0 1px; padding: 0 1px; cursor: var(--cursor-pointer); } .ͼ1 .cm-foldGutter span { padding: 0 1px; cursor: var(--cursor-pointer); } .ͼ4 .cm-line ::selection, .ͼ4 .cm-line::selection { background-color: transparent !important; } .ͼ4 .cm-line { caret-color: transparent !important; } .ͼ4 .cm-content :focus::selection, .ͼ4 .cm-content :focus ::selection { background-color: Highlight !important; } .ͼ4 .cm-content :focus { caret-color: initial !important; } .ͼ4 .cm-content { caret-color: transparent !important; }