Dermot Duffy
cc376a8be1
Whilst the Frigate support in this card is the best among camera engines, the name incorrectly suggests that Frigate is a requirement. Instead, to broaden the appeal, change to more camera agnostic name. This does not suggest any change in priority, role or support for Frigate. This change is likely to be bug prone, due to the size of the rename -- the code contains 1500+ references to "Frigate" most of which make sense to rename, some which do not, all of which needed human assessment. - Closes #1298 BREAKING CHANGE: References to `frigate-card` in all kinds of configuration need to be updated to `advanced-camera-card`. An automated config upgrade should take care of the majority of usecases (click `Edit -> Upgrade -> Save`), though may not be perfect.
51 lines
1.3 KiB
SCSS
51 lines
1.3 KiB
SCSS
:host {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: var(--mdc-icon-size, 24px);
|
|
height: var(--mdc-icon-size, 24px);
|
|
}
|
|
|
|
input {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
|
|
padding: 0px;
|
|
border: 0px;
|
|
}
|
|
|
|
/**
|
|
* Hack warning: Safari on iOS does not support showPicker with
|
|
* datetime-local:
|
|
* https://caniuse.com/mdn-api_htmlinputelement_showpicker_datetime_local_input
|
|
*
|
|
* The hack is to render the input element in front of the icon, with an
|
|
* opacity of 0. This only works if the underlying input element accepts the
|
|
* click at the exact place the user happens to click. From trial and error,
|
|
* this seems to work better than expected / quite reliably, but had the user
|
|
* manually changed icon sizes with Safari iOS their experience may vary.
|
|
*/
|
|
|
|
// webkit-touch-callout used to "detect" Safari on iOS. See:
|
|
// - https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices
|
|
@supports (-webkit-touch-callout: none) {
|
|
input {
|
|
// Need it to be in "front" but not visible to the naked eye.
|
|
opacity: 0;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
@supports not (-webkit-touch-callout: none) {
|
|
input {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
advanced-camera-card-icon {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
}
|