mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-16 23:06:30 +00:00
add note indicator SVG and integrate into media controls styling
This commit is contained in:
mr. M
@@ -66,6 +66,7 @@
|
|||||||
content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png)
|
content/browser/zen-images/layouts/multiple-toolbar.png (content/zen-images/layouts/multiple-toolbar.png)
|
||||||
content/browser/zen-images/layouts/single-toolbar.png (content/zen-images/layouts/single-toolbar.png)
|
content/browser/zen-images/layouts/single-toolbar.png (content/zen-images/layouts/single-toolbar.png)
|
||||||
content/browser/zen-images/grain-bg.png (content/zen-images/grain-bg.png)
|
content/browser/zen-images/grain-bg.png (content/zen-images/grain-bg.png)
|
||||||
|
content/browser/zen-images/note-indicator.svg (content/zen-images/note-indicator.svg)
|
||||||
|
|
||||||
# Actors
|
# Actors
|
||||||
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (zen-components/actors/ZenThemeMarketplaceParent.sys.mjs)
|
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (zen-components/actors/ZenThemeMarketplaceParent.sys.mjs)
|
||||||
|
|||||||
100
src/browser/base/content/zen-images/note-indicator.svg
Normal file
100
src/browser/base/content/zen-images/note-indicator.svg
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
<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[
|
||||||
|
.note {
|
||||||
|
fill: white;
|
||||||
|
transform-box: fill-box;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flyUpLeft {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(0px, 0px) scale(0.5) rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-9px, -35px) scale(5) rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes flyUpRight {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(0px, 0px) scale(0.5) rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(9px, -35px) scale(5) rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes flyUpCenter {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(0px, 0px) scale(0.5) rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(0px, -35px) scale(5) rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
]]></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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.8 KiB |
@@ -71,6 +71,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:not(:hover) {
|
||||||
|
#zen-media-focus-button::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: 1;
|
||||||
|
background: url('note-indicator.svg') no-repeat;
|
||||||
|
top: -20px;
|
||||||
|
left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#zen-media-focus-button {
|
#zen-media-focus-button {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
transition:
|
transition:
|
||||||
|
|||||||
Reference in New Issue
Block a user