Merge branch 'develop' into 'scrobbles-age'

# Conflicts:
#   src/i18n/en.json

1 files changed, 11 insertions, 20 deletions

diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 681bab29..13afbe64 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Attachment {
   display: inline-flex;
   flex-direction: column;
@@ -9,10 +7,8 @@
   height: 100%;
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-radius: var(--roundness);
+  border-color: var(--border);
 
   .attachment-wrapper {
     flex: 1 1 auto;
@@ -84,6 +80,13 @@
     }
   }
 
+  .video-container {
+    border: none;
+    outline: none;
+    color: inherit;
+    background: transparent;
+  }
+
   .audio-container {
     display: flex;
     align-items: flex-end;
@@ -126,23 +129,12 @@
 
     .attachment-button {
       padding: 0;
-      border-radius: $fallback--tooltipRadius;
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      border-radius: var(--roundness);
       text-align: center;
       width: 2em;
       height: 2em;
       margin-left: 0.5em;
       font-size: 1.25em;
-      // TODO: theming? hard to theme with unknown background image color
-      background: rgb(230 230 230 / 70%);
-
-      .svg-inline--fa {
-        color: rgb(0 0 0 / 60%);
-      }
-
-      &:hover .svg-inline--fa {
-        color: rgb(0 0 0 / 90%);
-      }
     }
   }
 
@@ -217,8 +209,7 @@
 
   &.-placeholder {
     display: inline-block;
-    color: $fallback--link;
-    color: var(--postLink, $fallback--link);
+    color: var(--link);
     overflow: hidden;
     white-space: nowrap;
     height: auto;