Initial skeletal Frigate lovelace card.

src/frigate-card.scss

@@ -0,0 +1,99 @@
+@use "@material/image-list/mdc-image-list";
+@use "@material/image-list";
+
+.frigate-card-viewer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.frigate-card-gallery {
+  overflow: auto;
+  position: absolute;
+
+  left: 55px;
+  right: 0px;
+  height: 100%;
+
+ -ms-overflow-style: none;  // Hide scrollbar: IE and Edge
+ scrollbar-width: none;     // Hide scrollbar: Firefox
+}
+
+.frigate-card-exception {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.frigate-card-gallery::-webkit-scrollbar {
+ display: none;
+}
+
+.frigate-card-image-list {
+  @include image-list.standard-columns(4);
+  @include image-list.shape-radius(5px);
+}
+
+.frigate-card-image-list-icon-overlay {
+  position: absolute;
+  margin: auto;
+}
+
+.frigate-card-image-list-highlight {
+  // Put border inside.
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+
+  opacity: 0.5;
+
+  border-style: dashed;
+  border-width: 1px;
+  border-color: var(--primary-color);
+}
+
+.frigate-card-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.frigate-card-navbar {
+  position: absolute;
+  width: 50px;
+  z-index: 1;
+}
+
+.frigate-card-statusbar {
+  @extend .frigate-card-navbar;
+  right: 3px;
+}
+
+ha-icon-button.button {
+  position: relative;
+  z-index: 2;
+  opacity: 50%;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  padding: 0px;
+  margin: 3px;
+}
+
+.invisible {
+  visibility: hidden;
+}
+.visibile {
+  visibility: visible;
+}
+
+ha-card {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin: auto;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}