Stylize sound playing button similar to the native one on Firefox 13x

piroor · Dec 6, 2024 · ec31746 · ec31746
1 parent 0b31db2
commit ec31746
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 49 deletions.
diff --git a/webextensions/sidebar/styles/proton/proton.css b/webextensions/sidebar/styles/proton/proton.css
@@ -369,8 +369,7 @@ tab-item tab-closebox {
   padding: var(--tab-closebox-offset) 0.25em;
 }
 
-tab-item tab-closebox::before,
-tab-item:not(.faviconized) tab-sound-button::before {
+tab-item tab-closebox::before {
   border-radius: 10%;
   content: "";
   display: inline-block;
@@ -381,27 +380,26 @@ tab-item:not(.faviconized) tab-sound-button::before {
   position: absolute;
 }
 
-tab-item tab-closebox:hover::before,
-tab-item:not(.faviconized) tab-sound-button:hover::before {
+tab-item tab-closebox:hover::before {
   background: var(--tab-text);
   box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.3);
   opacity: 0.1;
 }
 
-tab-item tab-closebox:active::before,
-tab-item:not(.faviconized) tab-sound-button:active::before {
+tab-item tab-closebox:active::before {
   opacity: 0.2;
 }
 
-tab-item.active tab-closebox:hover::before,
-tab-item:not(.faviconized).active tab-sound-button:hover::before {
+tab-item.active tab-closebox:hover::before {
   background: var(--tab-text);
 }
 
 tab-item tab-closebox::after {
   position: relative;
 }
 
+
+
 tab-item .burster {
   --throbber-color: var(--tab-loading-fill);
 }

diff --git a/webextensions/sidebar/styles/sound-button.css b/webextensions/sidebar/styles/sound-button.css
@@ -6,7 +6,7 @@
 */
 
 :root {
-  --sound-button-size: var(--svg-small-icon-size);
+  --sound-button-size: calc(var(--svg-small-icon-size) * 0.75);
 }
 
 tab-sound-button {
@@ -17,42 +17,51 @@ tab-sound-button {
   margin: 0;
   min-height: var(--sound-button-size);
   min-width: var(--sound-button-size); /* this is required to prevent shrinking of the box which has no position:static content */
-  opacity: 0.75;
+  opacity: 1;
   padding: 0;
   position: relative;
   width: var(--sound-button-size);
   z-index: var(--tab-ui-z-index);
 }
 
-tab-item.faviconized tab-sound-button::before,
+tab-sound-button::before {
+  background: var(--tab-text);
+  border-radius: 150%;
+  content: "";
+  display: inline-block;
+  height: calc(var(--sound-button-size) * 1.4);
+  left: calc(0px - (var(--sound-button-size) * 0.2));
+  top: calc(0px - (var(--sound-button-size) * 0.2));
+  width: calc(var(--sound-button-size) * 1.4);
+  opacity: 0.95;
+  position: absolute;
+}
+tab-sound-button:hover::before {
+  opacity: 0.5;
+}
+tab-item.faviconized tab-sound-button:hover::before {
+  opacity: 0.8;
+}
+
 tab-sound-button::after {
   -moz-context-properties: fill;
   background: none no-repeat center / 100%;
   content: "";
   display: inline-block;
-  fill: var(--tab-text);
+  fill: var(--tab-text-inverted);
   height: var(--sound-button-size);
   position: absolute;
   right: 0;
   top: 0;
   width: var(--sound-button-size);
 }
-:root.simulate-svg-context-fill tab-item.faviconized tab-sound-button::before,
 :root.simulate-svg-context-fill tab-sound-button::after {
-  background: var(--tab-text);
+  background: var(--tab-text-inverted);
   mask-position: center;
   mask-repeat: no-repeat;
   mask-size: 100%;
 }
 
-tab-item.faviconized tab-sound-button::before {
-  fill: var(--tab-text-inverted);
-  transform: scale(1.3, 1.3);
-}
-:root.simulate-svg-context-fill tab-item.faviconized tab-sound-button::before {
-  background: var(--tab-text-inverted);
-}
-
 tab-item:not(.collapsed) tab-sound-button:hover {
   opacity: var(--button-hover-opacity);
 }
@@ -73,36 +82,24 @@ tab-item:not(.collapsed).has-autoplay-blocked-member.subtree-collapsed[data-chil
   display: inline-block;
 }
 
-tab-item:not(.collapsed).muted.faviconized tab-sound-button::before,
 tab-item:not(.collapsed).muted tab-sound-button::after,
-tab-item:not(.collapsed).has-muted-member.subtree-collapsed[data-child-ids].faviconized
-  tab-sound-button::before,
 tab-item:not(.collapsed).has-muted-member.subtree-collapsed[data-child-ids]
   tab-sound-button::after {
   background-image: url("./icons/audio-16-mute.svg");
 }
-:root.simulate-svg-context-fill tab-item:not(.collapsed).muted.faviconized tab-sound-button::before,
 :root.simulate-svg-context-fill tab-item:not(.collapsed).muted tab-sound-button::after,
-:root.simulate-svg-context-fill tab-item:not(.collapsed).has-muted-member.subtree-collapsed[data-child-ids].faviconized
-  tab-sound-button::before,
 :root.simulate-svg-context-fill tab-item:not(.collapsed).has-muted-member.subtree-collapsed[data-child-ids]
   tab-sound-button::after {
   background-image: none;
   mask-image: url("./icons/audio-16-mute.svg");
 }
 
-tab-item:not(.collapsed).autoplay-blocked.faviconized tab-sound-button::before,
 tab-item:not(.collapsed).autoplay-blocked tab-sound-button::after,
-tab-item:not(.collapsed).has-autoplay-blocked-member.subtree-collapsed[data-child-ids].faviconized
-  tab-sound-button::before,
 tab-item:not(.collapsed).has-autoplay-blocked-member.subtree-collapsed[data-child-ids]
   tab-sound-button::after {
   background-image: url("./icons/audio-16-blocked.svg");
 }
-:root.simulate-svg-context-fill tab-item:not(.collapsed).autoplay-blocked.faviconized tab-sound-button::before,
 :root.simulate-svg-context-fill tab-item:not(.collapsed).autoplay-blocked tab-sound-button::after,
-:root.simulate-svg-context-fill tab-item:not(.collapsed).has-autoplay-blocked-member.subtree-collapsed[data-child-ids].faviconized
-  tab-sound-button::before,
 :root.simulate-svg-context-fill tab-item:not(.collapsed).has-autoplay-blocked-member.subtree-collapsed[data-child-ids]
   tab-sound-button::after {
   background-image: none;
@@ -112,34 +109,20 @@ tab-item:not(.collapsed).has-autoplay-blocked-member.subtree-collapsed[data-chil
 /* put style definition for sound-playing tab after muted tab,
    because "sound-playing" is more important than muted for
    mixed state tree. */
-tab-item:not(.collapsed).sound-playing:not(.muted).faviconized tab-sound-button::before,
 tab-item:not(.collapsed).sound-playing:not(.muted) tab-sound-button::after,
-tab-item:not(.collapsed).has-sound-playing-member.subtree-collapsed[data-child-ids].faviconized
-  tab-sound-button::before,
 tab-item:not(.collapsed).has-sound-playing-member.subtree-collapsed[data-child-ids]
   tab-sound-button::after {
   background-image: url("./icons/audio-16.svg");
 }
-:root.simulate-svg-context-fill tab-item:not(.collapsed).sound-playing:not(.muted).faviconized tab-sound-button::before,
 :root.simulate-svg-context-fill tab-item:not(.collapsed).sound-playing:not(.muted) tab-sound-button::after,
-:root.simulate-svg-context-fill tab-item:not(.collapsed).has-sound-playing-member.subtree-collapsed[data-child-ids].faviconized
-  tab-sound-button::before,
 :root.simulate-svg-context-fill tab-item:not(.collapsed).has-sound-playing-member.subtree-collapsed[data-child-ids]
   tab-sound-button::after {
   background-image: none;
   mask-image: url("./icons/audio-16.svg");
 }
 
-tab-item.faviconized tab-sound-button:hover::before {
-  background-color: var(--tab-text-inverted);
-  background-image: none !important;
-  mask-image: none !important;
-  border-radius: 150%;
-  transform: scale(1.1, 1.1);
-}
-
 tab-item.faviconized tab-sound-button {
-  transform: scale(0.9, 0.9);
+  --sound-button-size: 10px;
   padding: 0;
   position: absolute;
   right: 0;