Implement miniature disable gifs labels

AprilSylph · Jul 9, 2023 · 9a4bf06 · 9a4bf06
1 parent cc31bab
commit 9a4bf06
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/scripts/accesskit.css b/src/scripts/accesskit.css
@@ -4,7 +4,7 @@
   right: 1ch;
 
   height: 1em;
-  padding: 5px;
+  padding: 0.6ch;
   border-radius: 3px;
 
   background-color: rgb(var(--black));
@@ -18,6 +18,10 @@
   content: "GIF";
 }
 
+.xkit-paused-gif-label.mini {
+  font-size: 0.6rem;
+}
+
 .xkit-paused-gif {
   position: absolute;
   visibility: visible;

diff --git a/src/scripts/accesskit/disable_gifs.js b/src/scripts/accesskit/disable_gifs.js
@@ -18,7 +18,9 @@ const pauseGif = function (gifElement) {
     canvas.getContext('2d').drawImage(image, 0, 0);
 
     const gifLabel = document.createElement('p');
-    gifLabel.className = 'xkit-paused-gif-label';
+    gifLabel.className = gifElement.clientWidth < 150
+      ? 'xkit-paused-gif-label mini'
+      : 'xkit-paused-gif-label';
 
     gifElement.parentNode.append(canvas, gifLabel);
   };