| @use 'node_modules/codemirror/lib/codemirror.css'; |
| @use 'node_modules/codemirror/theme/ambiance.css'; |
| @use 'node_modules/codemirror/theme/base16-light.css'; |
| |
| @import '../../../infra-sk/themes.scss'; |
| |
| /* |
| Only define deltas from the original theme and global changes from elements-sk |
| elements. |
| */ |
| |
| body { |
| margin: 0; |
| padding: 0; |
| font-family: Roboto, sans-serif; |
| } |
| |
| .body-sk { |
| --sidebar-width: 0; |
| --header-horiz-padding: 16px; |
| |
| main > * { |
| margin: 0 8px 8px 0; |
| } |
| |
| main { |
| padding: 8px; |
| |
| .output > * { |
| margin: 0 8px 8px 0; |
| } |
| |
| .output { |
| display: inline-block; |
| vertical-align: top; |
| max-width: 500px; |
| |
| .widget { |
| display: block; |
| border: none; |
| } |
| |
| .buttons, |
| canvas { |
| display: block; |
| } |
| |
| canvas { |
| border: 1px dashed var(--on-surface); |
| vertical-align: top; |
| } |
| } |
| |
| input[type='range'] { |
| margin: 0; |
| padding: 0; |
| border: none; |
| } |
| } |
| |
| #editor { |
| display: inline-block; |
| position: relative; |
| overflow: hidden; |
| color: var(--on-surface); |
| background: var(--surface); |
| font-family: Roboto Mono, monospace; |
| font-size: 13px; |
| width: 57em; |
| |
| .CodeMirror { |
| height: 80vh; |
| } |
| } |
| } |
| |
| button.action { |
| cursor: pointer; |
| |
| &.prompt { |
| animation: pulse 0.5s 1 linear; |
| } |
| } |
| |
| @keyframes pulse { |
| 0% { |
| box-shadow: 0px 0px 2px 2px var(--primary); |
| } |
| |
| 50% { |
| box-shadow: 0px 0px 2px 2px var(--primary); |
| } |
| |
| 100% { |
| box-shadow: 0px 0px 2px 2px var(--primary); |
| } |
| } |
| |
| #logsContainer { |
| color: var(--on-surface); |
| background: var(--surface); |
| margin: 0 8px 8px 0; |
| width: 100%; |
| min-height: 200px; |
| } |