app/addons/components/assets/scss/code-editor.scss

// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.

.zen-editor-icon {
  float: right;
  font-size: 13px;
  margin-top: 3px;
  &:hover {
    color: $cf-brand-highlight;
  }
}

.cheatsheet-icon {
  float: right;
  padding-right: 0.5rem;
  font-size: 13px;
  margin-top: 3px;
  &:hover {
    color: $cf-brand-highlight;
  }
}

.full-page-editor-modal-wrapper {
  position: fixed;
  padding: 110px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  width: 100%;
  z-index: 1025;

  &.zen-theme-dark {
    background-color: $cf-code-bg;
  }
  &.zen-theme-light {
    background-color: $cf-white;
  }

  & > div {
    height: 100%;
    &.zen-mode-controls {
      height: 96px;
    }
  }

  .ace_editor {
    height: 100%;
    font-size: 15px;
    line-height: 25px;
    background-color: inherit;

    .ace_gutter,
    .ace_gutter-active-line {
      background-color: inherit;
    }
  }
}

.zen-theme-light {
  .zen-mode-controls {
    color: $cf-text01;
  }
}

.zen-mode-controls {
  position: absolute;
  right: 30px;
  top: 30px;
  font-size: 20px;
  color: $cf-text02;

  .zen-mode-controls-wrapper {
    position: relative;
    float: left;
  }

  .tooltips {
    position: relative;
    float: left;
  }

  ul {
    float: right;
    list-style-type: none;
  }

  .tooltip {
    margin-right: 20px;
    min-width: 140px;
  }

  span {
    cursor: pointer;
    width: 23px;
    height: 23px;
    margin: 10px;
    display: inline-block;
  }
}