Allow chevrons, thumbnails or no media controls.

2021-09-06 16:03:51 -07:00
parent 2fa928467e
commit 7bd7731811
9 changed files with 137 additions and 85 deletions
@@ -0,0 +1,123 @@
+@use "@material/image-list/mdc-image-list";
+@use "@material/image-list";
+@use './common.scss';
+
+.frigate-card-contents {
+  width: 100%;
+
+  max-height: 277px;        /* Max Lovelace 16/9 video height */
+  height: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: auto;
+}
+
+.frigate-card-viewer {
+  width: 100%;
+
+  height: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+.frigate-card-gallery {
+  overflow: auto;
+  -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
+  scrollbar-width: none;    /* Hide scrollbar: Firefox */
+
+  height: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.frigate-card-gallery::-webkit-scrollbar {
+  display: none;
+}
+
+.frigate-card-attention {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0% 5% 0% 5%;
+
+  height: 100%;
+}
+
+.frigate-card-image-list {
+  @include image-list.standard-columns(5, 1px);
+  @include image-list.shape-radius(5px);
+}
+
+ha-card .frigate-card-image-list-folder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  text-align: center;
+  border-style: 2px solid;
+  opacity: 0.7;
+  color: var(--secondary-text-color, white);
+  border-color: var(--secondary-text-color, black);
+  background-color: var(--primary-background-color, black);
+  padding: 10px;
+}
+
+video, img {
+  display: block;
+}
+
+ha-card {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: var(--secondary-background-color, black);
+
+  transform-style: preserve-3d; /* Safari brings video elements forward without this */
+}
+
+/* Don't drop shadow or have radius for nested webrtc card */
+webrtc-camera ha-card {
+  box-shadow: none;
+  border-radius: 0px;
+  background-color: var(--secondary-background-color, black);
+}
+
+.frigate-media-controls {
+  position: absolute;
+  z-index: 1;
+  overflow: hidden;
+}
+.frigate-media-controls.previous {
+  left: 45px;
+}
+.frigate-media-controls.next {
+  right: 45px;  
+}
+
+.frigate-media-controls.chevrons {
+  top: calc(50% - (40px / 2));
+}
+
+.frigate-media-controls.thumbnails {
+  border-radius: 50%;
+  height: 48px;
+  top: calc(50% - (48px / 2));
+  box-shadow: 0px 0px 30px 1px black;
+  transition: all .2s ease;
+  opacity: 0.8;
+}
+.frigate-media-controls.thumbnails:hover {
+  opacity: 1 !important;
+  height: 72px;
+  top: calc(50% - (72px / 2));
+}
+
+.frigate-media-controls.previous.thumbnails:hover {
+  left: 33px;
+}
+
+.frigate-media-controls.next.thumbnails:hover {
+  right: 33px;
+}