From d167aea2d0c74a24eeea7023877fa26e885461e6 Mon Sep 17 00:00:00 2001
From: TwistedUmbrellaX <twistedumbrella@gmail.com>
Date: Wed, 13 Mar 2024 12:49:30 -0400
Subject: [PATCH] Combine CSS with nested selector

---
 .../Configuration/inject.js                   | 54 ++++++++-----------
 1 file changed, 23 insertions(+), 31 deletions(-)

diff --git a/ConfusedPolarBear.Plugin.IntroSkipper/Configuration/inject.js b/ConfusedPolarBear.Plugin.IntroSkipper/Configuration/inject.js
index 87746ab..ff59976 100644
--- a/ConfusedPolarBear.Plugin.IntroSkipper/Configuration/inject.js
+++ b/ConfusedPolarBear.Plugin.IntroSkipper/Configuration/inject.js
@@ -66,21 +66,6 @@ introSkipper.injectCss = function () {
     let styleElement = document.createElement("style");
     styleElement.id = "introSkipperCss";
     styleElement.innerText = `
-    @media (hover:hover) and (pointer:fine) {
-        #skipIntro .paper-icon-button-light:hover:not(:disabled) {
-            color: black !important;
-            background-color: rgba(47, 93, 98, 0) !important;
-        }
-    }
-
-    #skipIntro .paper-icon-button-light.show-focus:focus {
-        transform: scale(1.04) !important;
-    }
-    
-    #skipIntro.upNextContainer {
-        width: unset;
-    }
-
     #skipIntro {
         padding: 0 1px;
         position: absolute;
@@ -95,24 +80,31 @@ introSkipper.injectCss = function () {
         -webkit-transition: ease-out 0.4s;
         -moz-transition: ease-out 0.4s;
         transition: ease-out 0.4s;
-    }
-
-    #skipIntro #btnSkipSegmentText {
-        padding-right: 3px;
-        padding-bottom: 2px;
-    }
-
-    @media (max-width: 1080px) {
-        #skipIntro {
+        @media (max-width: 1080px) {
             right: 10%;
         }
-    }
-
-    #skipIntro:hover {
-        box-shadow: inset 400px 0 0 0 #f9f9f9;
-        -webkit-transition: ease-in 1s;
-        -moz-transition: ease-in 1s;
-        transition: ease-in 1s;
+        &:hover {
+            box-shadow: inset 400px 0 0 0 #f9f9f9;
+            -webkit-transition: ease-in 1s;
+            -moz-transition: ease-in 1s;
+            transition: ease-in 1s;
+        }
+        &.upNextContainer {
+            width: unset;
+        }
+        @media (hover:hover) and (pointer:fine) {
+            .paper-icon-button-light:hover:not(:disabled) {
+                color: black !important;
+                background-color: rgba(47, 93, 98, 0) !important;
+            }
+        }
+        .paper-icon-button-light.show-focus:focus {
+            transform: scale(1.04) !important;
+        }
+        #btnSkipSegmentText {
+            padding-right: 3px;
+            padding-bottom: 2px;
+        }
     }
     `;
     document.querySelector("head").appendChild(styleElement);