mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
323 lines
No EOL
33 KiB
CSS
323 lines
No EOL
33 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') {
|
|
/** 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;
|
|
}
|
|
|
|
/* 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:not([zen-essential='true']) {
|
|
--audio-button-top: 0px;
|
|
--audio-button-left: 0px;
|
|
--audio-wave-top: 4px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/* 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: 4px !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;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/* 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]) {
|
|
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]) {
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Compability 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
} |