mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-15 04:33:54 +02:00
198 lines
30 KiB
CSS
198 lines
30 KiB
CSS
@media not (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.audioWave.enabled') {
|
|
#tabbrowser-tabs[orient='vertical']
|
|
.tabbrowser-tab
|
|
.tab-icon-overlay:not([crashed]) {
|
|
&:is([soundplaying], [muted], [activemedia-blocked]) {
|
|
background-color: #161717 !important;
|
|
border: 1px solid #ffffff29 !important;
|
|
transition: transform 100ms ease-in-out,
|
|
background-color 100ms ease-in-out;
|
|
|
|
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled') {
|
|
&:hover {
|
|
transition: transform 100ms ease-in-out,
|
|
background-color 100ms ease-in-out !important;
|
|
transform: scale(1.3) translate(-8%, 14%);
|
|
transform-origin: center !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[muted] {
|
|
/* Different background color when muted */
|
|
background-color: rgb(122, 31, 31) !important;
|
|
|
|
/* Revert old icon */
|
|
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
|
|
background-image: url('chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg') !important;
|
|
}
|
|
}
|
|
|
|
&[soundplaying] {
|
|
/* Revert old icon */
|
|
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
|
|
background-image: url('chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg') !important;
|
|
}
|
|
}
|
|
|
|
&[activemedia-blocked] {
|
|
/* Revert old icon */
|
|
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
|
|
background-image: url('chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg') !important;
|
|
}
|
|
}
|
|
|
|
/* Revert new, zen's audio indicator */
|
|
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
|
|
&[muted],
|
|
&[soundplaying],
|
|
&[activemedia-blocked] {
|
|
list-style-image: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Standardize tab icon size, to prevent size flexing */
|
|
#navigator-toolbox[zen-sidebar-expanded='true']
|
|
#tabbrowser-tabs[orient='vertical']
|
|
.tabbrowser-tab
|
|
.tab-icon-stack {
|
|
height: 16px;
|
|
width: 28.5px;
|
|
}
|
|
|
|
/** Audio Wave version */
|
|
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.audioWave.enabled') {
|
|
#navigator-toolbox[zen-sidebar-expanded='true'] .tab-icon-stack {
|
|
--audio-button-top: -4px;
|
|
--audio-button-left: -4px;
|
|
--audio-wave-top: 31px;
|
|
}
|
|
|
|
/* Some styling formute/unmute audio button */
|
|
#tabbrowser-tabs[orient='vertical']
|
|
.tabbrowser-tab
|
|
.tab-icon-overlay:not([crashed]) {
|
|
top: var(--audio-button-top, 0px) !important;
|
|
left: var(--audio-button-left, 0px) !important;
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
|
|
padding: 4px !important;
|
|
border-radius: 6px !important;
|
|
display: initial !important;
|
|
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
#navigator-toolbox:not([zen-sidebar-expanded='true'])
|
|
#tabbrowser-tabs[orient='vertical']
|
|
.tabbrowser-tab
|
|
.tab-icon-image {
|
|
justify-self: center;
|
|
align-self: center;
|
|
}
|
|
|
|
/* Tab Icon to mute playing audio */
|
|
#tabbrowser-tabs[orient='vertical']
|
|
.tabbrowser-tab[soundplaying]:hover
|
|
.tab-icon-overlay:not([crashed]) {
|
|
list-style-image: url('chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg') !important;
|
|
}
|
|
|
|
/* Tab Icon to unmute muted audio */
|
|
#tabbrowser-tabs[orient='vertical']
|
|
.tabbrowser-tab[muted]:hover
|
|
.tab-icon-overlay:not([crashed]) {
|
|
list-style-image: url('chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg') !important;
|
|
}
|
|
|
|
/* Show button to mute/unmute audio, on hover, in place of tab icon */
|
|
#tabbrowser-tabs[orient='vertical']
|
|
.tabbrowser-tab:has([soundplaying], [muted]):hover {
|
|
& .tab-icon-overlay:not([crashed]) {
|
|
display: flex !important;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
|
|
background-color: transparent !important;
|
|
|
|
&:hover {
|
|
background-color: color-mix(
|
|
in srgb,
|
|
currentColor 10%,
|
|
transparent
|
|
) !important;
|
|
}
|
|
}
|
|
|
|
& .tab-icon-image {
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Code for audio wave */
|
|
.tabbrowser-tab .tab-icon-stack::before {
|
|
/* --transformOffset: calc(var(--zen-sidebar-width) / 18);
|
|
transform: translate(-6px, var(--transformOffset)) scaleY(0.4) !important; */
|
|
|
|
content: '' !important;
|
|
position: absolute !important;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: calc(var(--zen-sidebar-width) - 9px) !important;
|
|
width: 492px !important;
|
|
height: auto !important;
|
|
aspect-ratio: 1000 / 120;
|
|
position: absolute !important;
|
|
z-index: -1 !important;
|
|
transform: translate(-6px, var(--audio-wave-top, 27px)) scaleY(0.3) !important;
|
|
border-radius: 15px !important;
|
|
opacity: 0;
|
|
|
|
-moz-context-properties: fill, fill-opacity;
|
|
background-size: 100% 100% !important;
|
|
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='1000' height='120' viewBox='0 0 1000 120' preserveAspectRatio='none' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1000' height='120' /%3E%3Cg class='g' transform='translate(20 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.95;1 0.8;1 0.52;1 0.78;1 0.95;1 1.04;1 1.04;1 1.17;1 0.94;1 0.8;1 0.73;1 0.7;1 0.9;1 0.95' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(45 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.1;1 1.05;1 1.2;1 0.82;1 1.13;1 1.3;1 1.31;1 1.14;1 1.07;1 1.1;1 1.1' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(70 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.12;1 1.33;1 1.22;1 1.07;1 1.07;1 1.00;1 1.37;1 1.32;1 1.37;1 1.27;1 1.19;1 1.28;1 1.18;1 1.16;1 1.04;1 1.13;1 1.31;1 1.06;1 1.12' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(95 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.38;1 1.23;1 1.11;1 1.40;1 1.21;1 1.45;1 1.36;1 1.30;1 1.35;1 1.24;1 1.38;1 1.16;1 1.41;1 1.43;1 1.14;1 1.15;1 1.20;1 1.42;1 1.38' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(120 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.86;1 1.09;1 1.07;1 0.86;1 1.00;1 0.89;1 0.95;1 0.91;1 1.18;1 1.06;1 1.14;1 1.08;1 0.82;1 1.10;1 0.96;1 0.87;1 1.04;1 1.15;1 0.86' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(145 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.04;1 0.83;1 1.18;1 1.19;1 1.09;1 1.12;1 1.10;1 1.01;1 0.83;1 0.83;1 1.15;1 0.82;1 1.05;1 0.90;1 1.10;1 1.20;1 0.92;1 0.96;1 1.04' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(170 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.88;1 1.07;1 0.91;1 1.12;1 1.07;1 1.15;1 1.13;1 1.14;1 0.99;1 1.14;1 0.99;1 1.15;1 0.89;1 0.97;1 1.18;1 1.10;1 0.81;1 1.10;1 0.88' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(195 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.92;1 1.09;1 1.07;1 1.07;1 0.84;1 1.16;1 1.04;1 1.06;1 0.99;1 1.19;1 1.04;1 0.93;1 0.96;1 0.84;1 1.01;1 1.08;1 1.11;1 0.83;1 0.92' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(220 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.92;1 1.11;1 0.98;1 1.10;1 1.03;1 0.92;1 1.18;1 0.85;1 1.06;1 0.89;1 1.06;1 0.98;1 0.86;1 1.17;1 0.87;1 1.11;1 0.97;1 1.14;1 0.92' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(245 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.80;1 1.01;1 1.01;1 0.95;1 0.96;1 0.73;1 0.95;1 0.88;1 0.81;1 0.79;1 0.99;1 1.04;1 0.84;1 0.94;1 0.92;1 1.03;1 0.90;1 1.07;1 0.8' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(270 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.87;1 0.81;1 0.92;1 0.78;1 1.08;1 0.79;1 1.00;1 0.93;1 0.98;1 1.04;1 0.88;1 1.05;1 1.09;1 1.03;1 1.00;1 0.99;1 1.08;1 1.09;1 0.87' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(295 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.93;1 0.80;1 0.73;1 0.90;1 0.99;1 0.77;1 0.79;1 0.62;1 0.69;1 0.78;1 0.70;1 0.68;1 0.70;1 0.83;1 0.82;1 0.78;1 0.88;1 0.66;1 0.93' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(320 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.78;1 0.82;1 0.65;1 0.65;1 0.87;1 0.88;1 0.64;1 0.97;1 0.94;1 0.91;1 0.77;1 0.99;1 0.71;1 0.88;1 0.87;1 0.77;1 0.91;1 0.82;1 0.78' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(345 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.93;1 0.99;1 0.62;1 0.75;1 0.62;1 0.70;1 0.99;1 0.91;1 0.99;1 0.74;1 1.00;1 0.81;1 0.82;1 0.62;1 0.97;1 0.95;1 0.93;1 0.80;1 0.93' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(370 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.83;1 0.68;1 0.66;1 0.80;1 0.84;1 0.83;1 0.74;1 0.85;1 0.71;1 0.75;1 0.84;1 0.69;1 0.99;1 0.97;1 0.93;1 0.68;1 0.80;1 0.81;1 0.83' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(395 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.72;1 0.69;1 0.74;1 0.80;1 0.72;1 0.66;1 0.99;1 0.66;1 0.86;1 0.69;1 0.70;1 0.95;1 0.71;1 0.64;1 0.65;1 0.87;1 0.70;1 0.93;1 0.72' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(420 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.57;1 0.84;1 0.67;1 0.83;1 0.60;1 0.70;1 0.81;1 0.65;1 0.65;1 0.90;1 0.71;1 0.70;1 0.54;1 0.57;1 0.73;1 0.67;1 0.73;1 0.66;1 0.57' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(445 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.98;1 0.86;1 0.94;1 1.18;1 1.06;1 0.95;1 1.10;1 1.00;1 0.85;1 1.15;1 0.97;1 0.81;1 0.84;1 1.13;1 0.94;1 1.01;1 1.12;1 0.93;1 0.98' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(470 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.92;1 1.20;1 1.02;1 1.08;1 0.93;1 0.92;1 1.25;1 1.27;1 1.17;1 1.19;1 0.94;1 1.24;1 0.92;1 1.15;1 1.26;1 1.20;1 0.98;1 1.23;1 0.92' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(495 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.33;1 1.23;1 1.11;1 1.31;1 1.48;1 1.31;1 1.12;1 1.40;1 1.30;1 1.30;1 1.18;1 1.20;1 1.41;1 1.45;1 1.35;1 1.12;1 1.17;1 1.20;1 1.33' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(520 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.17;1 0.96;1 1.19;1 0.82;1 1.08;1 1.05;1 0.93;1 0.95;1 1.15;1 0.95;1 0.85;1 0.85;1 1.16;1 1.15;1 0.94;1 1.04;1 1.02;1 0.99;1 1.17' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(545 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.12;1 0.89;1 1.14;1 0.95;1 1.08;1 1.07;1 1.00;1 1.04;1 0.81;1 1.12;1 0.92;1 0.89;1 0.98;1 0.81;1 0.97;1 0.96;1 1.02;1 0.87;1 1.12' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(570 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.99;1 0.82;1 1.01;1 1.11;1 0.96;1 1.06;1 1.07;1 0.84;1 0.91;1 0.85;1 1.01;1 0.99;1 1.03;1 0.81;1 1.19;1 0.94;1 0.83;1 1.01;1 0.99' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(595 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.98;1 0.84;1 0.81;1 0.82;1 1.04;1 0.74;1 0.81;1 0.79;1 1.04;1 0.85;1 0.73;1 1.05;1 0.91;1 0.80;1 0.77;1 0.98;1 0.82;1 0.98;1 0.98' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(620 130) rotate(180)'%3E%3Crect class='test ' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.77;1 0.83;1 1.03;1 0.76;1 0.71;1 0.95;1 0.80;1 1.00;1 0.81;1 0.75;1 0.96;1 0.96;1 0.84;1 1.02;1 1.09;1 0.71;1 1.06;1 0.85;1 0.77' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(645 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.78;1 0.91;1 0.75;1 0.79;1 0.80;1 0.66;1 0.81;1 0.72;1 0.83;1 0.63;1 0.63;1 0.71;1 0.86;1 0.86;1 0.79;1 0.86;1 0.67;1 0.93;1 0.78' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(670 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.90;1 0.84;1 0.54;1 0.82;1 0.76;1 0.76;1 0.80;1 0.69;1 0.57;1 0.57;1 0.61;1 0.76;1 0.84;1 0.72;1 0.85;1 0.82;1 0.70;1 0.74;1 0.9' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(695 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.8;1 0.74;1 0.85;1 0.86;1 0.73;1 0.64;1 0.81;1 0.57;1 0.50;1 0.85;1 0.88;1 0.88;1 0.69;1 0.89;1 0.67;1 0.60;1 0.75;1 0.84;1 0.8' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(720 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.51;1 0.87;1 0.68;1 0.81;1 0.81;1 0.58;1 0.54;1 0.75;1 0.81;1 0.56;1 0.76;1 0.78;1 0.71;1 0.72;1 0.54;1 0.88;1 0.68;1 0.87;1 0.51' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(745 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.31;1 0.50;1 0.47;1 0.67;1 0.42;1 0.40;1 0.47;1 0.53;1 0.36;1 0.66;1 0.50;1 0.54;1 0.49;1 0.47;1 0.30;1 0.40;1 0.49;1 0.50;1 0.31' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(770 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.5;1 0.43;1 0.39;1 0.54;1 0.65;1 0.56;1 0.32;1 0.48;1 0.36;1 0.45;1 0.32;1 0.59;1 0.59;1 0.38;1 0.59;1 0.31;1 0.51;1 0.40;1 0.5' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(795 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.55;1 0.69;1 0.46;1 0.62;1 0.54;1 0.57;1 0.48;1 0.44;1 0.57;1 0.45;1 0.44;1 0.33;1 0.56;1 0.31;1 0.54;1 0.39;1 0.55;1 0.61;1 0.55' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(820 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.38;1 0.67;1 0.66;1 0.41;1 0.52;1 0.55;1 0.43;1 0.49;1 0.55;1 0.59;1 0.41;1 0.64;1 0.58;1 0.59;1 0.62;1 0.35;1 0.67;1 0.38;1 0.38' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(845 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.49;1 0.57;1 0.70;1 0.56;1 0.52;1 0.43;1 0.55;1 0.71;1 0.55;1 0.77;1 0.58;1 0.51;1 0.43;1 0.61;1 0.40;1 0.64;1 0.53;1 0.50;1 0.49' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(870 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.62;1 0.58;1 0.40;1 0.64;1 0.44;1 0.45;1 0.66;1 0.76;1 0.76;1 0.69;1 0.74;1 0.47;1 0.54;1 0.55;1 0.66;1 0.60;1 0.58;1 0.55;1 0.62' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(895 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.75;1 0.44;1 0.74;1 0.78;1 0.71;1 0.48;1 0.75;1 0.47;1 0.78;1 0.73;1 0.70;1 0.79;1 0.65;1 0.55;1 0.41;1 0.48;1 0.41;1 0.68;1 0.75' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(920 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.58;1 0.79;1 0.61;1 0.60;1 0.63;1 0.42;1 0.71;1 0.51;1 0.44;1 0.63;1 0.76;1 0.76;1 0.58;1 0.74;1 0.42;1 0.45;1 0.51;1 0.46;1 0.58' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(945 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.64;1 0.82;1 0.75;1 0.83;1 0.89;1 0.61;1 0.60;1 0.84;1 0.62;1 0.54;1 0.72;1 0.52;1 0.60;1 0.65;1 0.52;1 0.87;1 0.75;1 0.66;1 0.64' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(970 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.71;1 0.57;1 0.80;1 0.76;1 0.71;1 0.62;1 0.51;1 0.52;1 0.67;1 0.62;1 0.73;1 0.69;1 0.67;1 0.81;1 0.55;1 0.70;1 0.55;1 0.88;1 0.71' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(995 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.57;1 0.71;1 0.67;1 0.77;1 0.76;1 0.69;1 0.88;1 0.55;1 0.83;1 0.63;1 0.59;1 0.73;1 0.63;1 0.53;1 0.81;1 0.82;1 0.53;1 0.67;1 0.57' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cstyle%3E .test %7B fill: context-fill; %7D %3C/style%3E%3C/svg%3E") !important;
|
|
|
|
/* Clip audio wave to tab size */
|
|
clip-path: xywh(0% 0% calc(var(--zen-sidebar-width) - 9px) 100% round 20px);
|
|
|
|
transition: fill 1000ms ease-in-out, opacity 1000ms ease-in-out;
|
|
}
|
|
|
|
/* Compability patch for hidden tab bar */
|
|
#zen-main-app-wrapper[zen-compact-mode='true']
|
|
.tabbrowser-tab
|
|
.tab-icon-stack::before {
|
|
clip-path: xywh(
|
|
0% 0% calc(var(--zen-sidebar-width) - 29px) 100% round 20px
|
|
);
|
|
}
|
|
|
|
/* Support for collapsed Tab Bar */
|
|
.tabbrowser-tab .tab-icon-stack::before {
|
|
/* color: red; */
|
|
}
|
|
|
|
/* TODO: Attempt at different animation for subset of tabs, will need manual re-timing of each svg animation sadly */
|
|
/* .tabbrowser-tab[soundplaying]:nth-of-type(1n) .tab-icon-stack::before {
|
|
background-image: url('AudioWave1.svg') !important;
|
|
}
|
|
|
|
.tabbrowser-tab[soundplaying]:nth-of-type(2n) .tab-icon-stack::before {
|
|
background-image: url('AudioWave2.svg') !important;
|
|
} */
|
|
|
|
.tabbrowser-tab[soundplaying] .tab-icon-stack::before {
|
|
fill: -moz-dialogtext;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.tabbrowser-tab[muted] .tab-icon-stack::before {
|
|
fill: color-mix(in srgb, -moz-dialogtext 50%, rgb(129, 0, 0) 50%);
|
|
opacity: 0.2;
|
|
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='1000' height='120' viewBox='0 0 1000 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1000' height='120' /%3E%3Cg class='g' transform='translate(20 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(45 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(70 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(95 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(120 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(145 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(170 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(195 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(220 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(245 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(270 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(295 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(320 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(345 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(370 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(395 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(420 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(445 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(470 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(495 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(520 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(545 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(570 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(595 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(620 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(645 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(670 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(695 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(720 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(745 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(770 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(795 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(820 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(845 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(870 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(895 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(920 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(945 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(970 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(995 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cstyle%3E .test %7B fill: context-fill; %7D %3C/style%3E%3C/svg%3E") !important;
|
|
}
|
|
}
|