robotcoral/coral-app

@use "../../themes" as themes;
 
app-editor-view {
  flex: 1;
  width: 100%;
  display: block;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
 
app-editor-controls {
  box-shadow: -1px -2px 4px grey;
  width: 100%;
  z-index: 12;
}
 
.codemirrorhost {
  height: 100%;
  display: block;
  overflow: auto;
}
 
.cm-editor {
  height: 100%;
}
 
.cm-gutter {
Syntax Error: Invalid CSS after "  @include themes": expected "}", was ".bg-color-trans..."
  @include themes.bg-color-transition;
}
 
//TODO Comments
 
.ͼ1 {
  .cm-lineNumbers {
    .cm-gutterElement {
      transition: none;
      min-width: 2.5rem;
    }
  }
 
  .cm-panel {
    background-color: var(--theme-highlight-1);
  }
 
  .cm-panel.cm-search [name="close"] {
    color: var(--theme-font-color);
    font-size: 2rem;
    top: -0.5rem;
    background-color: transparent;
  }
 
  .cm-cursor {
    border-left: 0.1rem solid var(--theme-font-color);
  }
}
 
.ͼ2 {
  .cm-line {
    color: var(--theme-font-color-dim);
    padding-left: 1rem;
  }
 
  .cm-gutters {
    border: none;
    background-color: var(--theme-highlight-1);
    box-shadow: var(--box-shadow-elevation-1);
    @include themes.bg-color-transition;
  }
 
  .cm-activeLine {
    background-color: var(--theme-highlight-2);
    color: var(--theme-font-color);
  }
 
  .cm-activeLineGutter {
    background-color: var(--theme-highlight-2);
  }
 
  .cm-panels {
    color: var(--theme-font-color);
    border: none;
    box-shadow: var(--box-shadow-elevation-1-center);
  }
 
  .cm-button {
    background: var(--theme-highlight-2);
    border: none;
    color: var(--theme-font-color);
    @include themes.box-shadow-transition;
  }
 
  .cm-button:hover,
  .cm-button:focus {
    background: var(--theme-highlight-4);
    color: var(--theme-font-color-invert);
    box-shadow: var(--box-shadow-elevation-1);
    transform: translate(0, -0.05rem);
  }
 
  .cm-button:active {
    background: var(--theme-highlight-5);
    box-shadow: var(--box-shadow-elevation-low);
    transform: translate(0, 0);
  }
 
  .cm-textfield {
    color: var(--theme-font-color);
    border: 1px solid var(--theme-highlight-3);
    background-color: var(--theme-input-box);
    @include themes.textfield-borderradius;
  }
 
  .cm-textfield:focus-visible {
    @include themes.textfield-borderradius;
  }
}
 
.ͼ4 {
  .cm-line::selection {
    // !important required
    background-color: var(--theme-highlight-2) !important;
  }
}