webapp/packages/plugin-codemirror6/src/theme/base-code-editor.css - devel - vshmidt/cloudbeaver

webapp/packages/plugin-codemirror6/src/theme/base-code-editor.css
327 строк6 KB
sergeyteleshev
[CB] Replace material ui with native css variables and tailwind utilities (#4188)
02 апр 2026, 19:24
02 апр 2026, 19:24ea36247
@import '@cloudbeaver/plugin-tailwindcss-theme/tailwind.css';
/* Increase specificity by selector repetition */
.editor.editor,
.cm-editor.cm-editor,
.cm-mergeView.cm-mergeView,
.cm-mergeViewEditors.cm-mergeViewEditors,
.cm-scroller.cm-scroller,
.ReactCodemirror.ReactCodemirror {
  width: 100%;
  height: 100% !important;
}

.editor.editor,
.ReactCodemirror.ReactCodemirror,
.cm-mergeView.cm-mergeView,
.cm-mergeViewEditors.cm-mergeViewEditors,
.cm-editor.cm-editor,
.cm-gotoLine.cm-gotoLine {
  @apply tw:typography-body2;
}

.cm-mergeViewEditor.cm-mergeViewEditor {
  &:first-child {
    border-right: 1px solid;
    border-color: var(--theme-background);
  }
}

.editor.editor {
  background-color: var(--theme-surface);
  color: var(--theme-on-surface);

  & .cm-highlightTab {
    opacity: 0.6;
    color: var(--theme-text-hint-on-light);
    pointer-events: none;
  }

  & .cm-newline {
    color: var(--theme-text-hint-on-light);
    opacity: 0.6;
    margin-left: 4px;
    cursor: default;
    pointer-events: none;
  }

  & .cm-highlightSpace {
    background-image: radial-gradient(circle at 50% 55%, var(--theme-text-hint-on-light) 15%, transparent 5%);
    opacity: 0.6;
    background-position: center;
  }

  & .cm-scroller {
    outline: none;
    line-height: unset;
  }

  & .cm-content {
    caret-color: var(--editor-cursor);
  }

  & .cm-cursor {
    border-left-color: var(--editor-cursor);
  }

  & .cm-link {
    &.cm-link-loaded {
      color: var(--theme-primary);
      text-decoration: underline;
      cursor: pointer;
    }
  }

  & .cm-dropCursor {
    border-left: 1.2px solid var(--editor-cursor);
  }

  & .cm-gutters {
    background-color: var(--theme-surface);
    color: var(--theme-text-hint-on-light);
    border-color: var(--theme-background);
  }

  & .cm-activeLine {
    box-shadow: 0 0 0 2px var(--theme-sub-secondary);
  }

  & .cm-activeLineGutter {
    color: var(--theme-on-surface);
  }

  & .cm-gotoLine.cm-panel {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 4px 8px;
    gap: 8px;
    min-width: 160px;
    container-type: inline-size;

    & label {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      text-transform: uppercase;
      letter-spacing: -0.1px;
      gap: 4px;
    }

    & input {
      @apply tw:typography-body2;
      max-width: 60px;
      height: 24px;
      padding-inline: 8px;

      &:focus {
        border-color: var(--theme-primary);
      }
    }
    & .cm-button {
      @apply tw:typography-body2;
      background: transparent;
      height: 24px;
      padding-block: 0;
      margin-right: 24px;

      font-weight: 500;
      text-transform: uppercase;

      color: var(--theme-primary);
      border-radius: 4px;
      border-color: var(--theme-primary);

      &:hover {
        background: color-mix(in srgb, transparent, var(--theme-primary) 5%);
      }

      @container (width < 240px) {
        display: none;
      }
    }

    & button[name='close'] {
      margin-left: auto;
      padding: 0 8px;
      top: 4px;
      height: 24px;
      width: 24px;
      border-radius: 4px;
      background: transparent;
      color: var(--theme-on-surface);
      border-color: var(--theme-on-surface);
      font-size: 16px;

      &:hover {
        background: color-mix(in srgb, transparent, var(--theme-on-surface) 5%);
      }
    }
  }

  & .cm-content ::selection {
    background: var(--theme-primary);
    color: white;
  }

  & .cm-lineNumbers .cm-gutterElement {
    min-width: 3ch;
    box-sizing: content-box;
  }

  & .cm-gutters .cm-foldGutter .cm-gutterElement {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }

  & .cm-gutters .cm-foldGutter .cm-gutterElement-icon {
    padding: 0 3px 0 5px;
    width: 20px;
    height: 12px;
    display: flex;

    &.cm-foldGutter-folded svg {
      transform: rotate(-90deg);
    }
  }

  & .cm-gutters .query-status .cm-gutterElement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;

    .running-query-line {
      display: flex;
      height: 8px;
      width: 8px;
      border-radius: 100%;
      background: var(--theme-primary);
    }

    .running-query-error-line {
      display: flex;
      height: 8px;
      width: 8px;
      border-radius: 100%;
      background: var(--theme-negative);
    }
  }

  & .tok-keyword {
    color: var(--editor-keyword);
    font-weight: bold;
  }

  & .tok-operator {
    color: var(--editor-operator);
  }

  & .tok-variable-2 {
    color: var(--editor-variable-2);
  }

  & .tok-variable-3,
  & .tok-type {
    color: var(--editor-variable-3);
  }

  & .tok-builtin {
    color: var(--editor-builtin);
  }

  & .tok-atom {
    color: var(--editor-atom);
  }

  & .tok-number {
    color: var(--editor-number);
  }

  & .tok-def {
    color: var(--editor-def);
  }

  & .tok-string {
    color: var(--editor-string);
  }

  & .tok-string2 {
    color: var(--editor-string-2);
  }

  & .tok-comment {
    color: var(--editor-comment);
  }

  & .tok-variable {
    color: var(--editor-variable);
  }

  & .tok-tag {
    color: var(--editor-tag);
  }

  & .tok-meta {
    color: var(--editor-meta);
  }

  & .tok-attribute {
    color: var(--editor-attribute);
  }

  & .tok-property {
    color: var(--editor-property);
  }

  & .tok-qualifier {
    color: var(--editor-qualifier);
  }

  & .tok-typeName {
    color: var(--editor-type-name);
  }

  & .tok-punctuation {
    color: var(--editor-punctuation);
  }

  & .tok-propertyName {
    color: var(--editor-property-name);
  }

  & .tok-className {
    color: var(--editor-class-name);
  }

  & .tok-bool {
    color: var(--editor-bool);
  }

  & .tok-variableName {
    color: var(--editor-variable-name);
  }

  & .tok-labelName {
    color: var(--editor-label-name);
  }
}

.cm-panel.cm-panel {
  background-color: var(--theme-surface);
  color: var(--theme-text-hint-on-light);
  border-color: var(--theme-background);
}

.cm-panels-top.cm-panels-top,
.cm-panels-bottom.cm-panels-bottom {
  border-color: var(--theme-background) !important;
}

.ͼ2.ͼ2 {
  & .cm-activeLine:not(.cm-changedLine, .cm-deletedLine),
  & .cm-activeLineGutter:not(.cm-changedLineGutter, .cm-deletedLineGutter) {
    background-color: unset;
  }
}