Add compatibility with DeArrow

Fixes #33

extension/manifest-chrome.json

@@ -20,7 +20,8 @@
     "content_scripts": [
         {
             "matches": ["https://www.youtube.com/*"],
-            "js": ["script.js"]
+            "js": ["script.js"],
+            "css": ["script.css"]
         }
     ],
     "background": {

extension/manifest-firefox.json

@@ -18,7 +18,8 @@
     "content_scripts": [
         {
             "matches": ["https://www.youtube.com/*"],
-            "js": ["script.js"]
+            "js": ["script.js"],
+            "css": ["script.css"]
         }
     ],
     "background": {

extension/script.css

@@ -0,0 +1,18 @@
+.ta-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #00202f;
+    color: #fff;
+    font-size: 1.4rem;
+    text-decoration: none;
+    border-radius: 8px;
+    cursor: pointer;
+    height: fit-content;
+    opacity: 0;
+}
+
+.ta-title-container {
+    display: flex;
+    gap: 15px;
+}

extension/script.js

@@ -348,20 +348,6 @@ function buildVideoButton(titleContainer) {
   dlButton.classList.add('ta-button');
   dlButton.href = '#';
 
-  Object.assign(dlButton.style, {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#00202f',
-    color: '#fff',
-    fontSize: '1.4rem',
-    textDecoration: 'none',
-    borderRadius: '8px',
-    cursor: 'pointer',
-    height: 'fit-content',
-    opacity: 0,
-  });
-
   let dlIcon = document.createElement('span');
   dlIcon.innerHTML = defaultIcon;
   Object.assign(dlIcon.style, {
@@ -394,10 +380,12 @@ function getNearestLink(element) {
 
 function processTitle(titleContainer) {
   if (titleContainer.hasListener) return;
-  Object.assign(titleContainer.style, {
-    display: 'flex',
-    gap: '15px',
-  });
+  titleContainer.classList.add("ta-title-container");
+
+  if (titleContainer.style.display === "-webkit-box") {
+    // Compatibility with DeArrow
+    titleContainer.style.setProperty("display", "flex", "important");
+  }
 
   titleContainer.classList.add('title-container');
   titleContainer.addEventListener('mouseenter', () => {