1// Copyright 2024 The Pigweed Authors 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); you may not 4// use this file except in compliance with the License. You may obtain a copy of 5// the License at 6// 7// https://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 11// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 12// License for the specific language governing permissions and limitations under 13// the License. 14 15import { css } from 'lit'; 16 17export const styles = css` 18 * { 19 box-sizing: border-box; 20 } 21 22 :host { 23 /* Repl */ 24 --sys-repl-height: 100%; 25 --sys-repl-view-outline-width: 1px; 26 --sys-repl-view-corner-radius: 0.5rem; 27 28 --sys-repl-table-cell-padding: 0.375rem 0.75rem; 29 --sys-repl-table-cell-icon-size: 1.125rem; 30 31 --sys-repl-header-bg: var(--sys-repl-gutter-bg); 32 --sys-repl-color-bg: var(--md-sys-color-surface-container); 33 --sys-repl-color-outline: var(--md-sys-color-outline-variant); 34 --sys-repl-color-error-bright: var(--sys-log-viewer-color-error-bright); 35 36 color: var(--md-sys-color-on-surface); 37 display: flex; 38 font-family: 'Roboto Mono', monospace; 39 flex-direction: column; 40 height: 100%; 41 width: 100%; 42 } 43 44 kbd { 45 background-color: #eee; 46 border-radius: 3px; 47 border: 1px solid #b4b4b4; 48 box-shadow: 49 0 1px 1px rgba(0, 0, 0, 0.2), 50 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; 51 color: #333; 52 display: inline-block; 53 font-size: 0.85em; 54 font-weight: 700; 55 line-height: 1; 56 padding: 2px 4px; 57 white-space: nowrap; 58 } 59 60 .actions-container { 61 --md-icon-button-icon-size: 1.375rem; 62 justify-content: flex-end; 63 display: flex; 64 flex: 1 0 auto; 65 } 66 67 .header { 68 align-items: center; 69 background-color: var(--sys-repl-header-bg); 70 border-bottom: 1px solid var(--sys-repl-color-outline); 71 color: var(--sys-log-viewer-color-controls-text); 72 display: flex; 73 padding: 0 1rem; 74 font-size: 1rem; 75 font-weight: 300; 76 min-height: 2.75rem; 77 } 78 79 #repl { 80 border: var(--sys-repl-view-outline-width) solid 81 var(--sys-repl-color-outline); 82 border-radius: var(--sys-repl-view-corner-radius); 83 display: flex; 84 flex-direction: column; 85 height: 100%; 86 overflow: hidden; 87 } 88 89 #repl .stdin { 90 color: var(--md-sys-color-primary); 91 font-weight: bold; 92 } 93 94 #repl #output { 95 border-radius: var(--sys-repl-view-corner-radius); 96 flex: 1; 97 margin: 0; 98 padding: 0.5rem 1rem; 99 overflow-y: auto; 100 } 101 102 li > span { 103 border-left: 3px solid transparent; 104 padding-left: 1rem; 105 font-size: 0.875rem; 106 } 107 108 #repl #output li { 109 border-top: 1px solid var(--md-sys-color-outline-variant); 110 display: flex; 111 flex-direction: column; 112 list-style: none; 113 margin-bottom: 5px; 114 padding-top: 5px; 115 white-space: pre-wrap; 116 } 117 118 #repl #output li:first-child { 119 border-top: 1px solid transparent; 120 } 121 122 #repl #output li:last-child .stdout, 123 #repl #output li:last-child .stderr { 124 border-left: 3px solid var(--md-sys-color-primary); 125 } 126 127 #repl #output .stderr { 128 color: var(--sys-repl-color-error-bright); 129 } 130`; 131