/** Globals styles, regardless of mode */ /* Remove native audio indicator button */ .tab-audio-button { display: none !important; } /* Resizes the glance tab indicator on essential tabs */ #navigator-toolbox #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[zen-essential="true"] .tabbrowser-tab[zen-glance-tab="true"] { --tab-collapsed-width: 24px !important; --tab-min-width: 16px !important; & .tab-icon-stack { align-content: center; } } /* Centers & resizes the glance tab indicator, to be more cohesive across essential & pinned tabs */ #navigator-toolbox #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[zen-glance-tab="true"] { & .tab-content { padding: 0px !important; } & .tab-icon-stack { height: var(--tab-min-height, 24px) !important; width: var(--tab-min-width, 24px) !important; & .tab-icon-image, .tab-throbber { place-self: center; } } } /* Centers the tab icon on essential tabs */ #navigator-toolbox #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[zen-essential="true"] { & .tab-icon-image, .tab-throbber { justify-self: center; } } /** Legacy Mode - Round circle */ @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]) { display: flex !important; background-color: #161717 !important; border: 1px solid #ffffff29 !important; transition: transform 100ms ease-in-out, background-color 100ms ease-in-out; background-repeat: no-repeat !important; background-position: center !important; @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; } } } &[soundplaying] { /* Revert old icon */ @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.returnOldIcons") { @media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg") !important; } @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !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") { @media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !important; } @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { 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; } } } /* Patches for essential tabs indicator */ #navigator-toolbox[zen-sidebar-expanded="true"] #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[zen-essential="true"] .tab-icon-stack { width: 100% !important; height: 100% !important; & .tab-icon-image, .tab-throbber { place-self: center; } /* Some stylistic changes for essential tabs indicator */ & .tab-icon-overlay:not([crashed]) { width: 24px !important; height: 24px !important; margin: 5px !important; background-color: hsl(180, 2%, 9%, 50%) !important; border: 1px solid hsla(0, 0%, 100%, 3%) !important; background-size: 65% !important; border-radius: 7px !important; transform-origin: top right !important; &[muted] { background-color: hsl(0, 59%, 30%, 50%) !important; } @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled") { &:hover { transform: scale(1.2); } } } } /* Patches for pinned tabs indicator while in SuperPins */ @media (-moz-bool-pref: "uc.pins.legacy-layout") { #navigator-toolbox[zen-sidebar-expanded="true"] #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[pinned] .tab-icon-stack { width: 100% !important; height: 100% !important; & .tab-icon-image, .tab-throbber { place-self: center; } /* Some stylistic changes for essential tabs indicator */ & .tab-icon-overlay:not([crashed]) { width: 24px !important; height: 24px !important; margin: 5px !important; background-color: hsl(180, 2%, 9%, 50%) !important; border: 1px solid hsla(0, 0%, 100%, 10%) !important; background-size: 75% !important; border-radius: 7px !important; transform-origin: top right !important; &[muted] { background-color: hsl(0, 59%, 30%, 50%) !important; } @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled") { &:hover { transform: scale(1.2); } } } } /* Change positioning of indicator on essential tabs */ #navigator-toolbox[zen-sidebar-expanded="true"] #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[pinned] { --tab-inline-padding: 0px !important; & .tab-icon-overlay:not([crashed]) { /* position: absolute !important; */ top: 0px !important; right: 0px !important; margin: 4px !important; place-self: start end; } } } /* Change positioning of indicator on essential tabs */ #navigator-toolbox[zen-sidebar-expanded="true"] #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[zen-essential="true"] { --tab-inline-padding: 0px !important; & .tab-icon-overlay:not([crashed]) { /* position: absolute !important; */ top: 0px !important; right: 0px !important; margin: 4px !important; place-self: start end; } } } /* 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") { /** Variables section */ /* Normal tab bar */ #tabbrowser-tabs[orient="vertical"] { /* Normal tab */ & .tabbrowser-tab { --audio-button-top: -4px; --audio-button-left: -3px; --audio-wave-top: 0px; --audio-wave-left: 0px; --audio-wave-height: 17px; } /* Patch for SuperPins */ @media (-moz-bool-pref: "uc.pins.legacy-layout") { /* Pinned tab */ & .tabbrowser-tab[pinned] { --audio-button-top: -4px; --audio-button-left: 0px; --audio-wave-top: -6px; --audio-wave-left: 0px; } } /* Essential tab */ & .tabbrowser-tab[zen-essential="true"] { --audio-button-top: -4px; --audio-button-left: 0px; --audio-wave-top: -4px; --audio-wave-left: 0px; } } /* Collapsed tab bar */ #navigator-toolbox:not([zen-sidebar-expanded="true"]) #tabbrowser-tabs[orient="vertical"] { /* Normal tab */ & .tabbrowser-tab { --audio-button-top: 0px; --audio-button-left: 6px; --audio-wave-top: 4px; --audio-wave-left: -6px; } /* Patch for SuperPins */ @media (-moz-bool-pref: "uc.pins.legacy-layout") { /* Pinned tab */ & .tabbrowser-tab[pinned] { --audio-button-top: 0px; --audio-button-left: 0px; --audio-wave-top: -2px; --audio-wave-left: -6px; } } /* Essential tab */ & .tabbrowser-tab[zen-essential="true"] { /* These 2 could be deleted, as are inherited */ --audio-button-top: 0px; --audio-button-left: 0px; --audio-wave-top: 4px; --audio-wave-left: -6px; } } /* Split tabs */ #tabbrowser-tabs[orient="vertical"] tab-group[split-view-group="true"] { /* Normal tab */ & .tabbrowser-tab { --audio-wave-top: 4px; --audio-wave-left: 0px; } /* Patch for SuperPins */ @media (-moz-bool-pref: "uc.pins.legacy-layout") { /* Pinned tab */ & .tabbrowser-tab[pinned] { --audio-wave-top: -2px; --audio-wave-left: 0px; } } } /* Collapsed tab bar & Split tabs */ #navigator-toolbox:not([zen-sidebar-expanded="true"]) { #tabbrowser-tabs[orient="vertical"] tab-group[split-view-group="true"] { /* Normal tab */ & .tabbrowser-tab { --audio-button-left: 0px; --audio-wave-top: 7px; --audio-wave-left: 0px; } /* Patch for SuperPins */ @media (-moz-bool-pref: "uc.pins.legacy-layout") { /* Pinned tab */ & .tabbrowser-tab[pinned] { --audio-wave-top: 1px; --audio-wave-left: -6px; } } } } /* Some styling for mute/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: 5px !important; border-radius: 6px !important; display: initial !important; opacity: 0; visibility: hidden; } /* Centers the tab icon, when collapsed tab bar */ #navigator-toolbox:not([zen-sidebar-expanded="true"]) #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab { & .tab-icon-image, .tab-throbber { place-self: center; } } /* Tab Icon to mute playing audio */ #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[soundplaying]:not([zen-glance-tab]):hover > .tab-stack > .tab-content > .tab-icon-stack > .tab-icon-overlay:not([crashed]) { @media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg") !important; } @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { 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]:not([zen-glance-tab]):hover > .tab-stack > .tab-content > .tab-icon-stack > .tab-icon-overlay:not([crashed]) { @media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !important; } @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { 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]):not( [zen-glance-tab] ):hover { & > .tab-stack > .tab-content > .tab-icon-stack > .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-stack > .tab-content > .tab-icon-stack > .tab-icon-image { opacity: 0 !important; } } /* Patches for SuperPins compatibility */ @media (-moz-bool-pref: "uc.pins.legacy-layout") { /* Patch for pinned tabs with SuperPins */ #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[pinned] .tab-icon-stack { width: 100% !important; justify-content: center; &::before { /* TODO: Take padding from variable */ width: calc(100% + 12px) !important; } & .tab-icon-image { justify-self: center !important; } } #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-icon-stack::before { bottom: 6px !important; } .tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-content { border-radius: var(--border-radius-medium) !important; } /* Patch for collapsed pinned tabs with SuperPins */ #navigator-toolbox:not([zen-sidebar-expanded="true"]) #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab .tab-icon-stack { width: var(--tab-collapsed-background-width) !important; &::before { width: var(--tab-collapsed-background-width) !important; } } } /* Patch for essential tabs */ #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[zen-essential="true"] .tab-icon-stack { width: 100% !important; justify-content: center; &::before { /* TODO: Take padding from variable */ width: calc(100% + 10px) !important; } } /* Patch for collapsed essential tabs */ #navigator-toolbox:not([zen-sidebar-expanded="true"]) #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[zen-essential="true"] .tab-icon-stack { width: var(--tab-collapsed-background-width) !important; &::before { width: var(--tab-collapsed-background-width) !important; } } /* Code for audio wave */ .tabbrowser-tab:not([zen-glance-tab]) > .tab-stack > .tab-content > .tab-icon-stack::before { content: "" !important; z-index: -1 !important; position: absolute !important; bottom: 0; left: 0; width: calc(var(--zen-sidebar-width) - 9px) !important; height: var(--audio-wave-height) !important; transform: translate( calc(-6px - var(--audio-wave-left)), calc(10px - var(--audio-wave-top)) ) !important; transform-origin: bottom; border-radius: 20px !important; opacity: 0; -moz-context-properties: fill, fill-opacity; background-size: 492px 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; transition: fill 1000ms ease-in-out, opacity 1000ms ease-in-out; } /* Compatibility patch for collapsed split tabs */ tab-group[split-view-group="true"] .tabbrowser-tab:not([zen-glance-tab]) > .tab-stack > .tab-content > .tab-icon-stack::before { width: calc(var(--zen-sidebar-width) - 14px) !important; } /* Compatibility patch for hidden tab bar */ #zen-main-app-wrapper[zen-compact-mode="true"] .tabbrowser-tab .tab-icon-stack::before { width: calc(var(--zen-sidebar-width) - 30px) !important; } /* Patch for Split Tabs */ #navigator-toolbox[zen-sidebar-expanded="true"] tab-group[split-view-group="true"] .tabbrowser-tab { /* Section based on how many tabs are split */ /* 2 split tabs */ &:nth-of-type(1):nth-last-of-type(2) .tab-icon-stack::before, &:nth-of-type(2):nth-last-of-type(1) .tab-icon-stack::before { width: calc(var(--zen-sidebar-width) / 2 - 11px) !important; } /* 3 split tabs */ &:nth-of-type(1):nth-last-of-type(3) .tab-icon-stack::before, &:nth-of-type(2):nth-last-of-type(2) .tab-icon-stack::before, &:nth-of-type(3):nth-last-of-type(1) .tab-icon-stack::before { width: calc(var(--zen-sidebar-width) / 3 - 8px) !important; } /* 4 split tabs */ &:nth-of-type(1):nth-last-of-type(4) .tab-icon-stack::before, &:nth-of-type(2):nth-last-of-type(3) .tab-icon-stack::before, &:nth-of-type(3):nth-last-of-type(2) .tab-icon-stack::before, &:nth-of-type(4):nth-last-of-type(1) .tab-icon-stack::before { width: calc(var(--zen-sidebar-width) / 4 - 8px) !important; } } /* TODO: Attempt at different animation for subset of tabs, will need manual re-timing of each svg animation sadly */ .tabbrowser-tab[soundplaying] { /* 4s delay */ &:nth-of-type(2n) .tab-icon-stack::before { /* background-image: '' !important; */ } /* 6s delay */ &:nth-of-type(3n) .tab-icon-stack::before { /* background-image: '' !important; */ } /* 2s delay */ &:nth-of-type(4n) .tab-icon-stack::before { /* background-image: '' !important; */ } /* 5s delay */ &:nth-of-type(5n) .tab-icon-stack::before { /* background-image: '' !important; */ } } .tabbrowser-tab[soundplaying]:not([zen-glance-tab]) > .tab-stack > .tab-content .tab-icon-stack::before { fill: -moz-dialogtext; opacity: 0.2; } .tabbrowser-tab[muted]:not([zen-glance-tab]) > .tab-stack > .tab-content .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' 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.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; } }