@senx/discovery-code
Version:
Discovery Code Editor
166 lines • 4.33 kB
CSS
/*!
* 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 ;
color: #fff;
--warp-view-spinner-color: #f3f3f3;
}
:host .wrapper.light, discovery-code-result .wrapper.light {
background-color: #fff ;
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 ;
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 ;
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);
}
}