| @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; |
| } |
| } |
| } |