Перешел на css ВК

.gitignore

@@ -1,4 +1,5 @@
 /node_modules
 /.cache
 /.idea
+/assets
 .zip

extension/dist/donate.html

@@ -25,7 +25,7 @@
         }
 
         .container {
-            background-color: hsl(207, 90%, 90%);
+            background-color: hsl(207, 90%, 95%);
             max-width: 700px;
             margin: auto;
             padding: 2rem;
@@ -50,4 +50,4 @@
         <span class="wallet"><strong>BTC:</strong> bc1qf4wtp636m6pqcfz0c42t4fdutqrs4unkdpt5r8</span>
     </div>
 </body>
-</html>
+</html>

src/dom/controls.js

@@ -9,8 +9,9 @@ function muteBtnHTML(id) {
     const element = document.createElement('span');
     element.setAttribute('class', 'mute_message');
     element.setAttribute('id', `mute${id}`);
+    element.setAttribute('label', 'Заглушить');
     element.style.background = `url(${chrome.runtime.getURL("assets/mute.png")}) center no-repeat`;
-    element.innerHTML ='<span class="mutetooltip">Заглушить</span>';
+    element.innerHTML = '<div class="mute_tooltip tt_w tt_black tt_down"><div class="tt_text">Заглушить</div></div>';
     return element;
 }
 

src/dom/dom.css

@@ -1,50 +1,28 @@
-.mute_message .mutetooltip {
-    visibility: hidden;
-    width: 120px;
-    background-color: #555;
-    color: #fff;
-    text-align: center;
-    padding: 5px 0;
-    border-radius: 6px;
-    
-    /* Position the tooltip text */
+.mute_tooltip {
     position: absolute;
-    z-index: 1;
-    bottom: 110%;
-    margin-left: -53px;
-    
-    /* Fade in tooltip */
-    opacity: 0;
-    transition: opacity 0.3s;
+    left: -50px;
+    top: -33px;
+    display: none;
 }
 
-/* Tooltip arrow */
-.mute_message .mutetooltip::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #555 transparent transparent transparent;
+.mute_tooltip::after {
+    left: 61px !important;
 }
 
 /* Show the tooltip text when you mouse over the tooltip container */
-.mute_message:hover .mutetooltip {
-    visibility: visible;
+.mute_message:hover .mute_tooltip {
+    display: block !important;
     opacity: 1;
 }
 
 .mute_message {
-    margin-top: .46rem;
-    margin-left: 4px;
-    margin-right: 3px;
+    position: relative;
     display: inline-block;
     vertical-align: top;
-    width: 12px;
-    height: 12px;
-    background-size: contain !important;
+    padding-top: 2px;
+    width: 24px;
+    height: 24px;
+    background-size: 11px !important;
 }
 
 .im-mess--actions {

src/dom/main.js

@@ -10,7 +10,11 @@ function init() {
             createTryToInitInterval();
             addNewMessageEventListener();
             returnMessagesEventListener();
-            hideExistingMessages();
+            chrome.storage.sync.get('isExtensionOn', function(data) {
+                if (data.isExtensionOn) {
+                    hideExistingMessages();
+                }
+            });
         }
     })
 }

src/donate.html

@@ -25,7 +25,7 @@
         }
 
         .container {
-            background-color: hsl(207, 90%, 90%);
+            background-color: hsl(207, 90%, 95%);
             max-width: 700px;
             margin: auto;
             padding: 2rem;
@@ -50,4 +50,4 @@
         <span class="wallet"><strong>BTC:</strong> bc1qf4wtp636m6pqcfz0c42t4fdutqrs4unkdpt5r8</span>
     </div>
 </body>
-</html>
+</html>

src/popup/popup.css

@@ -96,7 +96,7 @@ h3 {
 }
 
 .idToHide:hover {
-    background-color: #dcdfde;
+    background-color: #f1f1f1;
 }
 
 #id_list {
@@ -109,6 +109,11 @@ h3 {
 
 .del_item {
     cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.del_item:hover {
+    transform: scale(1.15);
 }
 
 .donation_btn {