@senx/discovery-widgets
Version:
Discovery Widgets Elements
157 lines • 4.07 kB
CSS
/*!
* Copyright 2022-2025 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.
*/
/*!
* Copyright 2022-2024 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 {
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
:host .png-wrapper {
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
:host .chart-wrapper {
position: absolute;
z-index: 1;
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
opacity: 0.5;
}
:host .chart-wrapper > div {
display: block;
width: 100%;
height: 100%;
}
:host .display-container {
text-align: center;
justify-items: stretch;
display: flex;
overflow: hidden;
color: var(--warp-view-font-color, #404040);
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
align-items: stretch;
justify-content: start;
min-height: 0;
}
:host .display-container.pos-n {
align-items: start;
justify-content: center;
}
:host .display-container.pos-ne {
align-items: start;
justify-content: end;
}
:host .display-container.pos-nw {
align-items: start;
justify-content: start;
}
:host .display-container.pos-s {
align-items: end;
justify-content: center;
}
:host .display-container.pos-se {
align-items: end;
justify-content: end;
}
:host .display-container.pos-sw {
align-items: end;
justify-content: start;
}
:host .display-container.pos-e {
align-items: center;
justify-content: end;
}
:host .display-container.pos-w {
align-items: center;
justify-content: start;
}
:host .display-container.pos-c {
align-items: center;
justify-content: center;
}
:host .display-container .value {
white-space: nowrap;
overflow: hidden;
display: flex;
font-size: var(--warp-view-font-size, 5rem);
align-items: baseline;
margin-bottom: 10px;
padding: 10px;
}
:host .display-container .value span {
min-height: 100%;
max-width: 100% ;
width: 100%;
}
:host .display-container .value small {
font-size: 50%;
}
:host .display-container.display-md {
text-align: start ;
align-items: start;
justify-content: start;
overflow: auto;
width: calc(100% - 10px);
font-size: var(--warp-view-font-size, 14px) ;
}
:host .display-container.display-md > .value {
width: 100%;
font-size: var(--warp-view-font-size, 14px) ;
}
:host .display-container.display-md table {
margin-top: 10px;
margin-bottom: 10px;
}
:host .display-container.display-md table, :host .display-container.display-md th, :host .display-container.display-md td {
border: 1px solid;
border-color: var(--warp-view-font-color, #404040);
border-collapse: collapse;
padding: var(--warp-view-datagrid-cell-padding, 5px);
}
:host .display-container.display-md pre {
font-size: 0.8rem;
background-color: var(--warp-view-font-color, #404040);
color: var(--warp-view-tile-background, #ffffff);
padding: 10px;
margin-right: 10px;
}
:host .display-container img {
max-width: 100% ;
}