From 71884547901284ac21e20a667737a735d0321cc8 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 22 Aug 2019 09:10:02 -0700
Subject: [PATCH] perf: use more efficient CSS selectors for inline media
 (#1423)

---
 src/routes/_components/status/Media.html            | 4 ++--
 src/routes/_components/status/MediaAttachments.html | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/routes/_components/status/Media.html b/src/routes/_components/status/Media.html
index 440c809d..9f6e8575 100644
--- a/src/routes/_components/status/Media.html
+++ b/src/routes/_components/status/Media.html
@@ -1,7 +1,7 @@
 {#if !blurhash && (type === 'video' || type === 'audio')}
     <button id={elementId}
             type="button"
-            class="play-video-button focus-after {$largeInlineMedia ? '' : 'fixed-size'} {type === 'audio' ? 'play-audio-button' : ''}"
+            class="inline-media play-video-button focus-after {$largeInlineMedia ? '' : 'fixed-size'} {type === 'audio' ? 'play-audio-button' : ''}"
             aria-label="Play video: {description}"
             style="width: {inlineWidth}px; height: {inlineHeight}px;">
       <PlayVideoIcon />
@@ -22,7 +22,7 @@
 {:else}
   <button id={elementId}
           type="button"
-          class="show-image-button focus-after {$largeInlineMedia ? '' : 'fixed-size'}"
+          class="inline-media show-image-button focus-after {$largeInlineMedia ? '' : 'fixed-size'}"
           aria-label="Show image: {description}"
           title={description}
           on:mouseover="set({mouseover: event})"
diff --git a/src/routes/_components/status/MediaAttachments.html b/src/routes/_components/status/MediaAttachments.html
index e16d01e1..5d461fbb 100644
--- a/src/routes/_components/status/MediaAttachments.html
+++ b/src/routes/_components/status/MediaAttachments.html
@@ -23,16 +23,16 @@
     border-radius: 6px;
   }
 
-  .status-media.grouped-images > :global(*) {
+  .status-media.grouped-images > :global(.inline-media) {
       padding-bottom: 56.25%;
       width: 100%;
   }
 
-  .status-media.grouped-images.two-cols > :global(*) {
+  .status-media.grouped-images.two-cols > :global(.inline-media) {
       padding-bottom: calc(112.5% + 5px);
   }
 
-  .status-media.grouped-images.odd-cols > :global(:first-child) {
+  .status-media.grouped-images.odd-cols > :global(.inline-media:first-child) {
       grid-row-end: span 2;
       padding-bottom: calc(112.5% + 5px);
       background-color: blue;