mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-15 12:02:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

gh-7099: slight CSS and SVG optimizations on notes anim loop (gh-13246)

Browse Source
This commit is contained in:
rain capsule
2026-04-14 16:11:18 +02:00
committed by GitHub
parent 826f1f355f
commit 767dfce556
2 changed files with 57 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/zen/images/note-indicator.svg
View File

@@ -6,13 +6,44 @@
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="none"/>
<style type="text/css"><![CDATA[
<defs>
<path id="zen-note-shape-eighth"
d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
<path id="zen-note-shape-beamed"
d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
H512V90.785V2.152L133.703,45.86z"/>
</defs>
<style type="text/css"><![CDATA[
.note {
fill: currentColor;
transform-box: fill-box;
transform-origin: center;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.note--L { animation-name: flyUpLeft; }
.note--R { animation-name: flyUpRight; }
.note--C { animation-name: flyUpCenter; }
.note-d0 { animation-delay: 0s; }
.note-d1 { animation-delay: 0.5s; }
.note-d2 { animation-delay: 1s; }
.note-d3 { animation-delay: 1.5s; }
.note-d4 { animation-delay: 2s; }
.note-d5 { animation-delay: 2.5s; }
@keyframes flyUpLeft {
from {
opacity: 1;
@@ -20,7 +51,7 @@
}
to {
opacity: 0;
transform: translate(-9px, -35px) scale(5) rotate(0deg);
transform: translate(-9px, -35px) scale(4) rotate(0deg);
}
}
@keyframes flyUpRight {
@@ -30,7 +61,7 @@
}
to {
opacity: 0;
transform: translate(9px, -35px) scale(5) rotate(0deg);
transform: translate(9px, -35px) scale(4) rotate(0deg);
}
}
@keyframes flyUpCenter {
@@ -40,66 +71,35 @@
}
to {
opacity: 0;
transform: translate(0px, -35px) scale(5) rotate(0deg);
transform: translate(0px, -35px) scale(4) rotate(0deg);
}
}
@media (prefers-reduced-motion: reduce) {
.note-group {
display: none;
}
}
}*/
]]></style>
<g class="note-group">
<g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 0s;">
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
<g class="note note--L note-d0">
<use href="#zen-note-shape-eighth" transform="translate(15,40) scale(0.0078)"/>
</g>
<g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 0.5s;">
<path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
H512V90.785V2.152L133.703,45.86z"/>
<g class="note note--R note-d1">
<use href="#zen-note-shape-beamed" transform="translate(15,40) scale(0.0078)"/>
</g>
<g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 1s;">
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
<g class="note note--C note-d2">
<use href="#zen-note-shape-eighth" transform="translate(15,40) scale(0.0078)"/>
</g>
<g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 1.5s;">
<path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
H512V90.785V2.152L133.703,45.86z"/>
<g class="note note--L note-d3">
<use href="#zen-note-shape-beamed" transform="translate(15,40) scale(0.0078)"/>
</g>
<g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 2s;">
<path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
C475.403,321.974,514.2,236.599,448.231,166.755z"/>
<g class="note note--R note-d4">
<use href="#zen-note-shape-eighth" transform="translate(15,40) scale(0.0078)"/>
</g>
<g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 2.5s;">
<path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
H512V90.785V2.152L133.703,45.86z"/>
<g class="note note--C note-d5">
<use href="#zen-note-shape-beamed" transform="translate(15,40) scale(0.0078)"/>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

8
src/zen/media/zen-media-controls.css
View File

@@ -117,16 +117,16 @@
& #zen-media-focus-button::after {
content: "";
position: absolute;
width: 110%;
height: 110%;
background: url("chrome://browser/content/zen-images/note-indicator.svg") no-repeat;
top: -70%;
left: 50%;
transform: translateX(-50%);
left: 0;
right: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
transition: opacity 0.8s ease;
opacity: 1;
will-change: opacity;
}
&:is(:not(.playing:not([muted])), :hover) #zen-media-focus-button::after {