Add support for 'scroll up refresh' in the gallery.

src/scss/gallery.scss

@@ -30,3 +30,19 @@ frigate-card-thumbnail {
 frigate-card-thumbnail:not([details]) {
   width: 100%;
 }
+frigate-card-thumbnail.selected {
+  border: 4px solid var(--accent-color);
+  // Because this is box-sizing: border-box, the border is effectively
+  // 'padding'. To get the curved borders to line up between the thumbnail and
+  // this outer border, we need to add the size of the border to the thumbnail
+  // image border radius.
+  // Related: https://www.30secondsofcode.org/articles/s/css-nested-border-radius
+  border-radius: calc(
+    var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px)) + 4px
+  );
+}
+
+frigate-card-progress-indicator.top {
+  // The top loading progress indicator should span the whole width.
+  grid-column: 1/-1;
+}

src/scss/message.scss

@@ -24,10 +24,13 @@ div.message {
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  padding: 20px;
   height: 100%;
 }
 
+div.message.padded {
+  padding: 20px;
+}
+
 div.message div.contents {
   display: flex;
   flex-direction: column;
@@ -55,7 +58,3 @@ div.message div.icon {
   white-space: pre-wrap;
   word-break: break-all;
 }
-
-.message ha-icon, ha-circular-progress {
-  padding: 10px;
-}