104 lines
2.0 KiB
SCSS
104 lines
2.0 KiB
SCSS
@use './button.scss';
|
|
|
|
:host {
|
|
--mdc-icon-size: calc(var(--advanced-camera-card-status-bar-height) / 2);
|
|
|
|
display: block;
|
|
width: 100%;
|
|
|
|
pointer-events: auto;
|
|
|
|
opacity: 1;
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
/*******************************************************
|
|
* Non-hover styles should not interact with the pointer
|
|
*******************************************************/
|
|
|
|
:host(:not([data-style*='hover'])) {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/**********************
|
|
* Popup style behavior
|
|
**********************/
|
|
|
|
:host([data-style='popup'][hide]) {
|
|
opacity: 0;
|
|
}
|
|
:host([data-style='popup'][hide]) .item.action {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/*********************
|
|
* Status bar contents
|
|
*********************/
|
|
|
|
.status {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
overflow: hidden;
|
|
|
|
width: 100%;
|
|
height: var(--advanced-camera-card-status-bar-height);
|
|
}
|
|
|
|
.item {
|
|
display: inline-block;
|
|
|
|
margin: 3px 5px;
|
|
|
|
align-content: center;
|
|
}
|
|
.item:first-child {
|
|
margin-left: 10px;
|
|
}
|
|
.item:last-child {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.item.expand {
|
|
flex: 1;
|
|
}
|
|
|
|
.item.action {
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
// Preserve image aspect ratio. Must not apply to icons to avoid intrinsic-width
|
|
// related issues on icon rendering in Safari.
|
|
img.item {
|
|
display: block;
|
|
|
|
// To ensure images render somewhat reasonably looking their height is kept to
|
|
// the same height as icons.
|
|
height: var(--mdc-icon-size, 24px);
|
|
width: auto;
|
|
}
|
|
|
|
/************************
|
|
* Status bar theme hooks
|
|
************************/
|
|
|
|
// Further theme related styling is dynamically applied by `status-bar.ts`, see
|
|
// `_renderPerInstanceStyle`.
|
|
|
|
/*****************
|
|
* Severity colors
|
|
*****************/
|
|
|
|
.item[data-severity='high'] {
|
|
color: var(--advanced-camera-card-foreground-severity-high-color);
|
|
}
|
|
.item[data-severity='medium'] {
|
|
color: var(--advanced-camera-card-foreground-severity-medium-color);
|
|
}
|
|
.item[data-severity='low'] {
|
|
color: var(--advanced-camera-card-foreground-severity-low-color);
|
|
}
|