From f04160f5df482f9a5c46ac16d0cc52bcb3955c5f Mon Sep 17 00:00:00 2001
From: arctic <arctic>
Date: Fri, 13 Jan 2023 22:46:26 -0800
Subject: [PATCH] less hacky fix for spacing + new variable

---
 css/poketube.css   | 12 +++++-------
 css/watch.main.css |  2 +-
 html/poketube.ejs  |  2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/css/poketube.css b/css/poketube.css
index 2c4287c1..6c21f29b 100644
--- a/css/poketube.css
+++ b/css/poketube.css
@@ -73,6 +73,7 @@
   --ptd-margin-base: 4px;
   --ptd-avatar-size: 32px;
   --ptd-toolbar-height: 56px;
+  --ptd-button-spacing: 6px;
 
   /* margins */
   --ptd-margin-2x: 8px;
@@ -141,12 +142,9 @@ a.avatar {
   margin-right: -8px;
 }
 
-.video-info-buttons.pill > .engagement {
-  margin-right: 2px;
-}
-
-.video-info-buttons.pill > div:nth-child(2) > .new-button, .button-encryption {
-  margin-right: 2px;
+/* If the "Encryption duh" duplication bug is fixed, remove this rule. */
+.new-button.button-encryption + a[title="Encryption duh"] {
+  display: none;
 }
 
 .video > .info > .title {
@@ -300,7 +298,7 @@ a.avatar {
   grid-area: buttons;
   display: flex;
   flex-direction: row;
-  column-gap: 4px;
+  column-gap: var(--ptd-button-spacing);
   height: min-content;
   width: -moz-fit-content;
   width: fit-content;
diff --git a/css/watch.main.css b/css/watch.main.css
index 2ce77b98..e279af09 100644
--- a/css/watch.main.css
+++ b/css/watch.main.css
@@ -322,7 +322,7 @@ a.icon-button > img {
   color: var(--text-primary);
   justify-content: center;
   align-content: center;
-  column-gap: 4px;
+  column-gap: var(--ptd-button-spacing);
   text-decoration: none;
   height: 36px;
   line-height: 32px;
diff --git a/html/poketube.ejs b/html/poketube.ejs
index 8fca8233..63a994d7 100644
--- a/html/poketube.ejs
+++ b/html/poketube.ejs
@@ -596,7 +596,7 @@ display: block;" autoplay controls
                                                     
  <% if (!video.Channel.Name.endsWith(' - Topic')) { %> 
     <% if (!video.Title.endsWith('Audio)')) { %>                         
-      <div class="new-button button-lite" style=";margin-left: -4px;">
+      <div class="new-button button-lite">
         <a title="Low Bandwidth? try PokeTube Lite!" style="color:var(--text-color);text-decoration: none" href="/lite?v=<%=video.id%>">
                                         <div class="pill-button">