shaders/modules/debugger-app-sk/debugger-app-sk.scss

@use 'node_modules/codemirror/lib/codemirror.css';
@use 'node_modules/codemirror/theme/ambiance.css';
@use 'node_modules/codemirror/theme/base16-light.css';

@import '../themes/themes.scss';

.cm-s-base16-light .cm-current-line {
  background: rgba(0, 128, 255, 0.2);
}
.cm-s-ambiance .cm-current-line {
  background: rgba(128, 192, 255, 0.2);
}

.cm-breakpoints {
  width: 15px;
  border-left: 1px solid #00000020;
}
.cm-reachable,
.cm-breakpoint {
  text-align: center;
  font-size: 10px;
  text-shadow: 0 0 1.5px red;
}
.cm-s-base16-light .cm-reachable {
  color: #f5f5f5;
}
.cm-s-ambiance .cm-reachable {
  color: #3d3d3d;
}
.cm-s-base16-light .cm-breakpoint {
  color: #ee2222;
}
.cm-s-ambiance .cm-breakpoint {
  color: #cc0000;
}

.cm-reachable::after,
.cm-breakpoint::after {
  content: '●';
}

.change-highlight {
  background: var(--secondary-highlight);
}

.hover-highlight {
  background: var(--primary-highlight);
}

.body-sk debugger-app-sk {
  overflow: hidden;
  display: block;
  background: var(--background);
  margin: 0;
  min-height: 100vh;

  --sidebar-width: 0;

  --secondary: var(--green-500);

  main {
    padding: 16px;
    font-size: 13px;
    display: inline-grid;
    flex-direction: row;
    flex-wrap: wrap;

    textarea {
      display: block;
      background: var(--surface);
      color: var(--secondary);
      font-family: monospace;
      resize: none;
      margin: 0 8px 0 0;
    }

    button {
      margin: 0;
    }

    .linkish {
      text-decoration: underline;
      cursor: pointer;
    }

    #debuggerControls #buttonGroup {
      margin-right: 50px;
    }

    #codeEditor {
      vertical-align: top;
      display: inline-block;
      margin-right: 20px;
      margin-bottom: 20px;
    }

    #debuggerPane {
      #debuggerTables {
        vertical-align: top;
        display: inline-block;

        table {
          width: 100%;
          border-collapse: collapse;
          border: 2px solid var(--secondary);

          td {
            padding: 3px 8px;
            font-size: 13px;
            border-bottom: 1px solid var(--secondary);
            border-right: 1px solid var(--secondary);

            a {
              text-decoration: none;
              color: var(--on-surface);
            }
          }

          .heading {
            background-color: var(--secondary);
            color: var(--on-secondary);
            text-align: center;
            font-weight: bold;
          }
        }
      }
    }
  }

  .CodeMirror {
    height: 512px;
    resize: both;
    overflow: hidden;
    border: 1px solid var(--surface-2dp);

    * {
      font-family: monospace;
      font-size: 13px;
    }
  }
}