mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-07-10 19:09:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

no-bug: Properly animate library icons

Browse Source
This commit is contained in:
mr. m
2026-07-03 14:34:17 +02:00
parent 80f424f68d
commit cd71a36765
9 changed files with 6237 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1519
src/browser/themes/shared/zen-icons/common/library/library-boosts-sprite.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

2
src/browser/themes/shared/zen-icons/common/library/library-downloads-active.svg
View File

@@ -22,7 +22,7 @@
.zen-downloads-arrow { animation: zenDownloadsArrowBounce 0.583s forwards; }
</style>
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-spaces-grad-front">
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>

511
src/browser/themes/shared/zen-icons/common/library/library-downloads-sprite.svg Normal file
View File

@@ -0,0 +1,511 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!-- Generated by scripts/generate-library-sprites.mjs. Do not edit;
- regenerate from the library-*-active.svg sources instead. -->
<svg xmlns="http://www.w3.org/2000/svg" width="1008" height="28" fill="none">
<svg x="0" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f0">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 0) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f0)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 0)"/>
</svg>
<svg x="28" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f1">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 0.131) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f1)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45.355 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 0.296)"/>
</svg>
<svg x="56" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f2">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 0.473) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f2)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 46.299 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 1.082)"/>
</svg>
<svg x="84" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f3">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 0.955) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f3)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 47.669 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 2.224)"/>
</svg>
<svg x="112" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f4">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 1.517) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f4)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 49.32 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 3.6)"/>
</svg>
<svg x="140" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f5">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 2.103) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f5)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 51.12 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 5.1)"/>
</svg>
<svg x="168" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f6">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 2.656) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f6)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 52.937 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 6.614)"/>
</svg>
<svg x="196" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f7">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 3.119) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f7)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 54.637 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 8.031)"/>
</svg>
<svg x="224" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f8">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 3.425) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f8)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 56.076 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 9.23)"/>
</svg>
<svg x="252" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f9">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 3.496) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f9)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 57.089 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 10.075)"/>
</svg>
<svg x="280" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f10">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 3.233) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f10)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 57.481 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 10.4)"/>
</svg>
<svg x="308" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f11">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 2.501) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f11)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 57.001 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 10)"/>
</svg>
<svg x="336" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f12">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 0.423) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f12)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 56.035 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 8.325)"/>
</svg>
<svg x="364" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f13">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -2.757) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f13)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 54.37 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 5.434)"/>
</svg>
<svg x="392" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f14">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -5.733) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f14)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 51.937 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 1.211)"/>
</svg>
<svg x="420" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f15">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -8.006) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f15)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 49.263 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -3.429)"/>
</svg>
<svg x="448" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f16">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -9.597) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f16)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 47.182 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -7.043)"/>
</svg>
<svg x="476" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f17">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -10.631) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f17)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45.895 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -9.277)"/>
</svg>
<svg x="504" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f18">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -11.223) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f18)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45.228 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -10.434)"/>
</svg>
<svg x="532" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f19">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -11.46) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f19)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -10.83)"/>
</svg>
<svg x="560" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f20">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -11.413) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f20)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -10.754)"/>
</svg>
<svg x="588" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f21">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -11.089) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f21)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -10.398)"/>
</svg>
<svg x="616" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f22">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -10.494) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f22)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -9.781)"/>
</svg>
<svg x="644" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f23">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -9.636) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f23)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -8.922)"/>
</svg>
<svg x="672" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f24">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -8.527) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f24)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -7.844)"/>
</svg>
<svg x="700" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f25">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -7.186) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f25)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -6.57)"/>
</svg>
<svg x="728" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f26">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -5.639) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f26)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -5.133)"/>
</svg>
<svg x="756" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f27">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -3.928) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f27)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -3.575)"/>
</svg>
<svg x="784" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f28">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -2.132) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f28)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -1.967)"/>
</svg>
<svg x="812" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f29">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 -0.407) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f29)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 -0.441)"/>
</svg>
<svg x="840" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f30">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 0.851) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f30)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 0.661)"/>
</svg>
<svg x="868" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f31">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 0.99) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f31)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 0.846)"/>
</svg>
<svg x="896" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f32">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 0.823) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f32)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 0.718)"/>
</svg>
<svg x="924" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f33">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 0.566) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f33)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 0.496)"/>
</svg>
<svg x="952" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f34">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 0.271) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f34)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 0.236)"/>
</svg>
<svg x="980" width="28" height="28" viewBox="0 0 128 128">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="20" x2="64" y2="148" id="zen-downloads-grad-front-f35">
<stop offset="0" stop-color="context-fill"/>
<stop offset="1" stop-color="context-stroke"/>
</linearGradient>
</defs>
<g class="zen-downloads-circle-translate" transform="translate(64 64) translate(0 0) translate(-64 -64)">
<circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
<circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front-f35)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
<circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
</g>
<path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 0)"/>
</svg>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

1231
src/browser/themes/shared/zen-icons/common/library/library-history-sprite.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

1591
src/browser/themes/shared/zen-icons/common/library/library-media-sprite.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

1303
src/browser/themes/shared/zen-icons/common/library/library-spaces-sprite.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

15
src/browser/themes/shared/zen-icons/jar.inc.mn
View File

@@ -453,16 +453,11 @@
* skin/classic/browser/zen-icons/zoom-out.svg (../shared/zen-icons/nucleo/zoom-out.svg)
#endif
* skin/classic/browser/zen-icons/urlbar-arrow.svg (../shared/zen-icons/common/urlbar-arrow.svg)
* skin/classic/browser/zen-icons/library/library-boosts-active.svg (../shared/zen-icons/common/library/library-boosts-active.svg)
* skin/classic/browser/zen-icons/library/library-boosts.svg (../shared/zen-icons/common/library/library-boosts.svg)
* skin/classic/browser/zen-icons/library/library-downloads-active.svg (../shared/zen-icons/common/library/library-downloads-active.svg)
* skin/classic/browser/zen-icons/library/library-downloads.svg (../shared/zen-icons/common/library/library-downloads.svg)
* skin/classic/browser/zen-icons/library/library-history-active.svg (../shared/zen-icons/common/library/library-history-active.svg)
* skin/classic/browser/zen-icons/library/library-history.svg (../shared/zen-icons/common/library/library-history.svg)
* skin/classic/browser/zen-icons/library/library-media-active.svg (../shared/zen-icons/common/library/library-media-active.svg)
* skin/classic/browser/zen-icons/library/library-media.svg (../shared/zen-icons/common/library/library-media.svg)
* skin/classic/browser/zen-icons/library/library-spaces-active.svg (../shared/zen-icons/common/library/library-spaces-active.svg)
* skin/classic/browser/zen-icons/library/library-spaces.svg (../shared/zen-icons/common/library/library-spaces.svg)
skin/classic/browser/zen-icons/library/library-boosts-sprite.svg (../shared/zen-icons/common/library/library-boosts-sprite.svg)
skin/classic/browser/zen-icons/library/library-downloads-sprite.svg (../shared/zen-icons/common/library/library-downloads-sprite.svg)
skin/classic/browser/zen-icons/library/library-history-sprite.svg (../shared/zen-icons/common/library/library-history-sprite.svg)
skin/classic/browser/zen-icons/library/library-media-sprite.svg (../shared/zen-icons/common/library/library-media-sprite.svg)
skin/classic/browser/zen-icons/library/library-spaces-sprite.svg (../shared/zen-icons/common/library/library-spaces-sprite.svg)
* skin/classic/browser/zen-icons/selectable/airplane.svg (../shared/zen-icons/common/selectable/airplane.svg)
* skin/classic/browser/zen-icons/selectable/american-football.svg (../shared/zen-icons/common/selectable/american-football.svg)
* skin/classic/browser/zen-icons/selectable/baseball.svg (../shared/zen-icons/common/selectable/baseball.svg)

48
src/zen/library/ZenLibrary.mjs
View File

@@ -60,7 +60,6 @@ export class ZenLibrary extends MozLitElement {
constructor() {
super();
this._iconKeys = {};
this.activeTab = Services.prefs.getStringPref(PREVIOUS_TAB_PREF, "") || "history";
}
@@ -68,7 +67,6 @@ export class ZenLibrary extends MozLitElement {
if (this.activeTab === value) {
return;
}
this._iconKeys[value] = Date.now();
this._activeTab = value;
Services.prefs.setStringPref(PREVIOUS_TAB_PREF, value);
}
@@ -83,6 +81,7 @@ export class ZenLibrary extends MozLitElement {
return;
}
window.addEventListener("keydown", this);
this.addEventListener("animationend", this);
// Add connected call back and make `appContentWrapper` transform translate the oposite of this element
this.#resizeObserver = new ResizeObserver(() => {
if (gZenWorkspaces._swipeManager._swipeState.librarySwiping) {
@@ -118,6 +117,24 @@ export class ZenLibrary extends MozLitElement {
this._header.appendChild(
gZenVerticalTabsManager.actualWindowButtons.cloneNode(true)
);
const activeTabEl = this.querySelector(".zen-library-tab[active]");
if (activeTabEl) {
this.#animateTabIcon(activeTabEl);
}
}
/**
* Plays a tab's icon sprite animation, reload-to-stop style: the [animate]
* attribute starts the strip's steps() animation (see zen-library.css) and
* the animationend handler removes it again. Restarts if mid-animation.
*
* @param {Element} tab
*/
#animateTabIcon(tab) {
tab.removeAttribute("animate");
// Flush styles so re-adding the attribute restarts the animation.
void tab.offsetWidth;
tab.setAttribute("animate", "true");
}
render() {
@@ -134,22 +151,15 @@ export class ZenLibrary extends MozLitElement {
<vbox
class="zen-library-tab"
?active=${this.activeTab === Section.id}
@click=${() => {
this._iconKeys[Section.id] = Date.now();
if (this.activeTab !== Section.id) {
this.activeTab = Section.id;
} else {
this.requestUpdate();
}
data-section=${Section.id}
@click=${event => {
this.activeTab = Section.id;
this.#animateTabIcon(event.currentTarget);
}}
>
${this.activeTab === Section.id
? html`<img
src=${`chrome://browser/skin/zen-icons/library/library-${Section.id}-active.svg?t=${this._iconKeys[Section.id]}`}
/>`
: html`<img
src=${`chrome://browser/skin/zen-icons/library/library-${Section.id}.svg`}
/>`}
<div class="zen-library-tab-icon">
<div class="zen-library-tab-icon-image"></div>
</div>
<label>${lazy.l10n.formatValueSync(Section.label)}</label>
</vbox>
`
@@ -175,6 +185,12 @@ export class ZenLibrary extends MozLitElement {
}
break;
}
case "animationend": {
if (event.animationName === "zen-library-tab-icon-play") {
event.target.closest(".zen-library-tab")?.removeAttribute("animate");
}
break;
}
}
}

45
src/zen/library/zen-library.css
View File

@@ -109,12 +109,55 @@ zen-library[open] {
background: color-mix(in srgb, currentColor 10%, transparent);
}
& img {
& .zen-library-tab-icon {
width: 28px;
height: 28px;
overflow: clip;
}
& .zen-library-tab-icon-image {
width: calc(36 * 28px);
height: 28px;
fill: rgba(255, 255, 255, 0.8);
stroke: var(--zen-colors-primary);
-moz-context-properties: fill, stroke;
transform: translateX(0);
}
&[data-section="history"] .zen-library-tab-icon-image {
background-image: url("chrome://browser/skin/zen-icons/library/library-history-sprite.svg");
}
&[data-section="downloads"] .zen-library-tab-icon-image {
background-image: url("chrome://browser/skin/zen-icons/library/library-downloads-sprite.svg");
}
&[data-section="boosts"] .zen-library-tab-icon-image {
background-image: url("chrome://browser/skin/zen-icons/library/library-boosts-sprite.svg");
}
&[data-section="spaces"] .zen-library-tab-icon-image {
background-image: url("chrome://browser/skin/zen-icons/library/library-spaces-sprite.svg");
}
&[data-section="media"] .zen-library-tab-icon-image {
background-image: url("chrome://browser/skin/zen-icons/library/library-media-sprite.svg");
}
@media (prefers-reduced-motion: no-preference) {
&[animate] .zen-library-tab-icon-image {
animation: zen-library-tab-icon-play 0.583s steps(36, jump-none);
}
}
}
@keyframes zen-library-tab-icon-play {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(35 * -28px));
}
}