diff options
Diffstat (limited to 'src/css/codemirror.css')
| -rw-r--r-- | src/css/codemirror.css | 327 |
1 files changed, 327 insertions, 0 deletions
diff --git a/src/css/codemirror.css b/src/css/codemirror.css new file mode 100644 index 0000000..2d15bf8 --- /dev/null +++ b/src/css/codemirror.css @@ -0,0 +1,327 @@ +.codeMirrorContainer { + line-height: 1.25; + overflow: hidden; + position: relative; + } +.CodeMirror { + background-color: var(--surface-0); + box-sizing: border-box; + color: var(--ink-1); + flex-grow: 1; + font-size: var(--monospace-size); + height: 100%; + width: 100%; + } +.CodeMirror-cursor { + border-color: var(--cm-cursor); + } +.CodeMirror-selected { + background-color: var(--cm-selection-surface); + } +.CodeMirror-focused .CodeMirror-selected { + background-color: var(--cm-selection-focused-surface); + } +.CodeMirror-foldmarker { + color: var(--cm-foldmarker-ink); + cursor: pointer; + font-family: sans-serif; + font-weight: bold; + } +.CodeMirror-foldgutter-folded::after { + content: '\25B6'; + } +.CodeMirror-foldgutter-open::after { + content: '\25BC'; + } +.CodeMirror-gutters { + background-color: var(--cm-gutter-surface); + border-color: var(--cm-gutter-border); + } +.CodeMirror-line::selection, +.CodeMirror-line > span::selection, +.CodeMirror-line > span > span::selection { + background-color: var(--cm-selection-focused-surface); + } +.CodeMirror-linenumber { + color: var(--cm-gutter-ink); + } +.CodeMirror-lines { + padding-bottom: 6rem; + } +.CodeMirror-matchingbracket { + color: unset; + } +.CodeMirror-matchingbracket { + background-color: var(--cm-matchingbracket) !important; + color: inherit !important; + font-weight: bold; + } + +.CodeMirror-search-match { + background: none; + background-color: var(--cm-search-match-surface); + border: 0; + opacity: 1; + } + +/* For when panels are used */ +.codeMirrorContainer > div:not([class^="CodeMirror"]) { + display: flex; + flex-direction: column; + height: 100%; + } + +.codeMirrorContainer.codeMirrorBreakAll .CodeMirror-wrap pre { + word-break: break-all; + } + +.cm-theme-override .cm-s-default .cm-comment { + color: var(--sf-comment-ink); + } +.cm-theme-override .cm-s-default .cm-def { + color: var(--sf-def-ink); + } +.cm-theme-override .cm-s-default .cm-directive { + color: var(--sf-directive-ink); + font-weight: bold; + } +.cm-theme-override .cm-s-default .cm-error { + color: inherit; + } +.cm-theme-override .cm-s-default .cm-error, +.CodeMirror-linebackground.error { + background-color: var(--sf-error-surface); + text-decoration: var(--sf-error-ink) dashed underline; + } +.cm-theme-override .cm-s-default .cm-link { + text-decoration: none; + } +.cm-theme-override .cm-s-default .cm-link:hover { + color: var(--link-ink); + } +.cm-theme-override .cm-s-default .cm-keyword { + color: var(--sf-keyword-ink); + } +.cm-theme-override .cm-s-default .cm-negative { + color: var(--cm-negative); + } +.cm-theme-override .cm-s-default .cm-positive { + color: var(--cm-positive); + } +.cm-theme-override .cm-s-default .cm-notice { + text-decoration-color: var(--sf-notice-ink); + text-decoration-style: solid; + text-decoration-line: underline; + } +.cm-theme-override .cm-s-default .cm-unicode { + text-decoration-color: var(--sf-unicode-ink); + text-decoration-style: dashed; + text-decoration-line: underline; + } +.cm-theme-override .cm-s-default .cm-tag { + color: var(--sf-tag-ink); + } +.cm-theme-override .cm-s-default .cm-value { + color: var(--sf-value-ink); + } +.cm-theme-override .cm-s-default .cm-variable { + color: var(--sf-variable-ink); + } +.cm-theme-override .cm-s-default .cm-warning { + background-color: var(--sf-warning-surface); + text-decoration: underline var(--sf-warning-ink); + } +.cm-theme-override .cm-s-default .cm-readonly { + color: var(--sf-readonly-ink); + } + +/* Rules */ +.cm-s-default .cm-allowrule { + color: var(--df-allow-ink); + font-weight: bold; + } +.cm-s-default .cm-blockrule { + color: var(--df-block-ink); + font-weight: bold; + } +.cm-s-default .cm-nooprule { + color: var(--df-noop-ink); + font-weight: bold; + } +.cm-s-default .cm-sortkey { + color: var(--sf-keyword-ink); + } + +.cm-search-widget { + align-items: center; + background-color: var(--cm-gutter-surface); + border-bottom: 1px solid var(--cm-gutter-border); + cursor: default; + direction: ltr; + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + justify-content: space-between; + padding: var(--default-gap-xsmall); + row-gap: var(--default-gap-xsmall); + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + z-index: 1000; + } +.cm-search-widget > * { + flex-grow: 1; + } +.cm-search-widget > :last-child { + text-align: end; + } + +.cm-search-widget-input { + display: inline-flex; + flex-grow: 1; + } +.cm-search-widget .fa-icon { + fill: var(--cm-gutter-ink); + font-size: 140%; + } +.cm-search-widget .fa-icon:not(.fa-icon-ro):hover { + fill: var(--ink-1); + } +.cm-search-widget-input input { + border: 1px solid var(--cm-gutter-ink); + display: inline-flex; + flex-grow: 1; + max-width: 16em; + } +.cm-search-widget-count { + align-items: center; + display: inline-flex; + flex-grow: 0; + font-size: var(--font-size-smaller); + min-width: 6em; + visibility: hidden; + } +.cm-search-widget[data-query] .cm-search-widget-count { + visibility: visible; + } +.cm-search-widget[data-query] .cm-search-widget-count:empty { + visibility: hidden; + } +.cm-search-widget .cm-search-widget-button:hover { + color: #000; + } +.cm-search-widget .sourceURL[href=""] { + visibility: hidden; + } +:root.mobile .cm-search-widget .sourceURL[href=""] { + display: none; + } + +.cm-linter-widget { + align-items: center; + display: none; + flex-grow: 1; + } +.cm-linter-widget:not([data-lint="0"]) { + display: inline-flex; + } +.cm-linter-widget .cm-linter-widget-count { + color: var(--accent-surface-1); + fill: var(--accent-surface-1); + font-size: var(--font-size-smaller); + } + +.cm-searching.cm-overlay { + background-color: var(--cm-searching-surface) !important; + border: 0; + color: var(--cm-searching-ink) !important; + } + +.CodeMirror-merge { + border-color: var(--cm-gutter-border); + } +.CodeMirror-merge-copy, +.CodeMirror-merge-copy-reverse { + color: var(--cm-merge-copy-ink); + } +.CodeMirror-merge-l-chunk { + background-color: var(--cm-merge-chunk-surface); + } +.CodeMirror-merge-l-chunk-start, +.CodeMirror-merge-l-chunk-end { + border-color: var(--cm-merge-chunk-border); + } +.CodeMirror-merge-l-deleted { + background-image: none; + } +.CodeMirror-merge-l-inserted { + background-image: none; + } +/* This probably needs to be added to CodeMirror repo */ +.CodeMirror-merge-gap { + background-color: var(--cm-gutter-surface); + border-color: var(--cm-gutter-border); + vertical-align: top; + } +.CodeMirror-merge-scrolllock { + color: var(--cm-merge-copy-ink); + } +.CodeMirror-merge-spacer { + background-color: var(--cm-merge-chunk-surface); + } + +.CodeMirror-hints { + z-index: 10000; + } + +/* Must appear after other background color declarations to be sure it + * overrides them + * */ +.CodeMirror-activeline-background { + background-color: var(--cm-active-line); + } + +.CodeMirror-lintmarker { + height: calc(var(--font-size) - 2px); + margin-top: 1px; + position: relative; + } +.CodeMirror-lintmarker > * { + position: absolute; + } +.CodeMirror-lintmarker[data-error="y"] { + background-color: var(--sf-error-ink); + } +.CodeMirror-lintmarker .msg { + background-color: var(--surface-0); + border: 1px solid var(--sf-error-ink); + color: var(--ink-1); + display: none; + filter: drop-shadow(2px 2px 4px #0008); + left: 100%; + padding: var(--default-gap-xsmall); + top: -2px; + white-space: pre; + } +.CodeMirror-lintmarker svg { + height: 70%; + left: 15%; + top: 15%; + width: 70%; + } +.CodeMirror-lintmarker[data-error="y"] svg { + display: none; + } +.CodeMirror-lintmarker[data-fold="start"] { + fill: var(--cm-foldmarker-ink); + } +.CodeMirror-lintmarker[data-fold="start"].folded svg { + transform: rotate(-90deg); + } +.CodeMirror-lintmarker[data-fold="end"] { + fill: var(--border-2); + } +.CodeMirror-lintmarker[data-error="y"]:hover > span, +.CodeMirror-lintmarker[data-error="y"] > span:hover { + display: initial; + } |