| @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'; |
| |
| .body-sk shaders-app-sk { |
| overflow: hidden; |
| display: block; |
| background: var(--background); |
| margin: 0; |
| min-height: 100vh; |
| |
| --sidebar-width: 0; |
| --header-horiz-padding: 16px; |
| |
| --secondary: var(--green-500); |
| |
| header { |
| border-bottom: solid 1px var(--header-font-color); |
| } |
| |
| main { |
| padding: 16px; |
| display: flex; |
| flex-direction: row; |
| flex-wrap: wrap; |
| |
| textarea { |
| display: block; |
| background: var(--surface); |
| color: var(--secondary); |
| font-family: monospace; |
| resize: none; |
| font-size: 11px; |
| margin: 0 8px 0 0; |
| } |
| |
| button { |
| margin: 0; |
| } |
| |
| .editButton, |
| .deleteButton, |
| .addButton { |
| border: none; |
| } |
| |
| .linkish { |
| text-decoration: underline; |
| cursor: pointer; |
| } |
| |
| p.childShader { |
| display: flex; |
| justify-content: space-between; |
| margin: 0; |
| padding-right: 8px; |
| |
| color: var(--primary); |
| fill: var(--primary); |
| |
| span { |
| font-family: 'Courier New', Courier, monospace; |
| } |
| } |
| |
| add-icon-sk { |
| display: inline-block; |
| |
| svg { |
| width: 16px; |
| height: 16px; |
| } |
| } |
| |
| #examples { |
| margin: 0 8px 8px 0; |
| font-size: 12px; |
| } |
| |
| canvas { |
| margin: 0 16px 16px 0; |
| } |
| |
| #codeEditor { |
| margin: 0 8px 8px 0; |
| } |
| |
| #shaderControls { |
| margin-left: 0; |
| |
| .action { |
| margin: 0 8px 8px 0; |
| } |
| } |
| |
| #uniformControls { |
| margin-left: 0; |
| } |
| |
| #uniformControls > * { |
| padding: 0; |
| margin: 0 8px 8px 0; |
| } |
| |
| #uniformControls uniform-mouse-sk { |
| padding: 0; |
| margin: 0; |
| } |
| |
| #compileErrors { |
| h3 { |
| margin: 8px 0; |
| color: var(--error); |
| } |
| |
| pre { |
| margin: 0 0 0 8px; |
| } |
| } |
| } |
| |
| details[open] { |
| background: var(--surface); |
| } |
| |
| details#shaderinputs { |
| display: initial; |
| padding: initial; |
| list-style: initial; |
| box-shadow: initial; |
| margin: 0 8px 8px 0; |
| font-size: 11px; |
| background: var(--background); |
| border: none; |
| |
| textarea { |
| margin: 0 8px 0 8px; |
| } |
| |
| #imageSources { |
| display: flex; |
| align-items: flex-start; |
| margin: 8px; |
| |
| figure { |
| margin: 0 8px 0 0; |
| display: flex; |
| flex-flow: column; |
| align-items: center; |
| |
| img { |
| width: 32px; |
| height: 32px; |
| } |
| |
| figcaption { |
| margin: 4px 0; |
| } |
| } |
| } |
| |
| summary { |
| background-color: var(--surface); |
| border-color: var(--on-surface); |
| color: var(--on-surface); |
| } |
| |
| summary::-webkit-details-marker { |
| display: initial; |
| } |
| } |
| |
| details#image_edit { |
| margin: 0 8px 8px 0; |
| |
| summary { |
| list-style: none; |
| |
| edit-icon-sk { |
| display: inline-block; |
| |
| svg { |
| width: 16px; |
| height: 16px; |
| } |
| } |
| } |
| } |
| |
| details#image_edit > summary::-webkit-details-marker { |
| display: none; |
| } |
| |
| details#image_edit[open] { |
| summary { |
| margin: 0 8px 8px 0; |
| } |
| |
| #image_edit_dialog { |
| border: solid var(--surface-2dp) 1px; |
| padding: 8px; |
| |
| > * { |
| margin: 0 8px 8px 0; |
| } |
| } |
| |
| label { |
| display: block; |
| margin: 0 8px 8px 0; |
| } |
| |
| button { |
| margin: 0 0 0 4px; |
| } |
| |
| input[type='url'] { |
| padding: 4px; |
| } |
| } |
| |
| .CodeMirror { |
| height: 512px; |
| resize: both; |
| overflow: hidden; |
| |
| * { |
| font-family: monospace; |
| font-size: 13px; |
| } |
| } |
| } |