UNPKG

@senx/discovery-code

Version:

Discovery Code Editor

166 lines 4.33 kB
/*! * Copyright 2020-2023 SenX S.A.S. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ :host, discovery-code-result { position: relative; overflow-y: auto; /* Safari */ } :host .wrapper-result, discovery-code-result .wrapper-result { width: 100%; } :host .loader .spinner, discovery-code-result .loader .spinner { border: 5px solid #f3f3f3; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; border-top: 5px solid #555; border-radius: 50%; width: 50px; height: 50px; position: fixed; overflow: visible; z-index: 999; margin: auto; top: 0; left: 0; bottom: 0; right: 0; } :host .loader:after, discovery-code-result .loader:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); } :host .wrapper.dark, discovery-code-result .wrapper.dark { background-color: #1e1e1e !important; color: #fff; --warp-view-spinner-color: #f3f3f3; } :host .wrapper.light, discovery-code-result .wrapper.light { background-color: #fff !important; color: #000; } :host .wrapper .loader, discovery-code-result .wrapper .loader { background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; z-index: 1; left: 0; right: 0; bottom: 0; } :host .wrapper .loader .spinner, discovery-code-result .wrapper .loader .spinner { -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; border-color: var(--warp-view-spinner-color, #5899DA) transparent transparent transparent; border-style: solid; border-radius: 50%; width: 50px; height: 50px; position: absolute; overflow: visible; z-index: 999; margin: auto; top: calc(50% - 25px); left: calc(50% - 25px); } :host .raw, discovery-code-result .raw { font-family: "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; line-height: 19px; letter-spacing: 0; display: flex; flex-flow: column; } :host .raw.light, discovery-code-result .raw.light { background-color: #fff !important; color: #343a40; } :host .raw.light pre, discovery-code-result .raw.light pre { color: #343a40; font-family: "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; line-height: 19px; min-height: 19px; height: auto; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } :host .raw.light .line-num, discovery-code-result .raw.light .line-num { color: #2b91af; } :host .raw.dark, discovery-code-result .raw.dark { background-color: #1e1e1e !important; color: #fff; } :host .raw.dark pre, discovery-code-result .raw.dark pre { color: #fff; font-size: 14px; line-height: 19px; min-height: 19px; height: auto; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } :host .raw.dark .line-num, discovery-code-result .raw.dark .line-num { color: #5a5a5a; } :host .raw .line, discovery-code-result .raw .line { display: block; max-width: calc(100% - 4em); } :host .raw .line-num, discovery-code-result .raw .line-num { width: 4em; float: left; text-align: right; padding: 0.3em 0.5em 0.3em 0.3em; margin: 0; } :host .raw .line-content, discovery-code-result .raw .line-content { display: block; border-left: #5a5a5a solid 1px; padding: 0.3em 0.3em 0.3em 1em; max-width: calc(100% - 4em); margin: 0 0 0 5em; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }