Siklos/edge-frfox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add reload/stop animation

Browse source
This commit is contained in:
bmFtZQ 2021-12-03 15:04:55 +08:00
parent 2b7c3991c6
commit d22f61f1e7
3 changed files with 100 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

63
chrome/icons/icons.css
View file

@ -276,7 +276,7 @@
#identity-popup-mainView .subviewbutton-nav::after,
.widget-overflow-list .subviewbutton-nav::after,
.PanelUI-subView .subviewbutton-nav::after {
content: url(arrow-right.svg) !important;
content: url("arrow-right.svg") !important;
}
#PlacesChevron,
@ -305,12 +305,14 @@
.tab-icon-image[src="chrome://branding/content/icon32.png"],
.tab-icon-image[src="chrome://global/skin/icons/settings.svg"],
.tab-icon-image[src="chrome://mozapps/skin/extensions/extension.svg"],
.tab-icon-image[src="chrome://browser/skin/customize.svg"] {
.tab-icon-image[src="chrome://browser/skin/customize.svg"],
.tab-icon-image[src="chrome://browser/skin/privatebrowsing/favicon.svg"] {
padding-left: 16px !important;
box-sizing: border-box !important;
}
.tab-icon-image[src="chrome://branding/content/icon32.png"] {
.tab-icon-image[src="chrome://branding/content/icon32.png"],
.tab-icon-image[src="chrome://browser/skin/privatebrowsing/favicon.svg"] {
background: url("new-tab-image.svg") !important;
}
@ -329,105 +331,105 @@
/* permissions */
#permissions-granted-icon {
list-style-image: url(permissions.svg) !important;
list-style-image: url("permissions.svg") !important;
}
.geo-icon {
list-style-image: url(geo.svg) !important;
list-style-image: url("geo.svg") !important;
}
.geo-icon.blocked-permission-icon {
list-style-image: url(geo-blocked.svg) !important;
list-style-image: url("geo-blocked.svg") !important;
}
.xr-icon {
list-style-image: url(xr.svg) !important;
list-style-image: url("xr.svg") !important;
}
.xr-icon.blocked-permission-icon {
list-style-image: url(xr-blocked.svg) !important;
list-style-image: url("xr-blocked.svg") !important;
}
.popup-notification-icon[popupid="web-notifications"],
.desktop-notification-icon {
list-style-image: url(desktop-notification.svg) !important;
list-style-image: url("desktop-notification.svg") !important;
}
.desktop-notification-icon.blocked-permission-icon {
list-style-image: url(desktop-notification-blocked.svg) !important;
list-style-image: url("desktop-notification-blocked.svg") !important;
}
.camera-icon {
list-style-image: url(camera.svg) !important;
list-style-image: url("camera.svg") !important;
}
.camera-icon.blocked-permission-icon {
list-style-image: url(camera-blocked.svg) !important;
list-style-image: url("camera-blocked.svg") !important;
}
.microphone-icon {
list-style-image: url(microphone.svg) !important;
list-style-image: url("microphone.svg") !important;
}
.microphone-icon.blocked-permission-icon {
list-style-image: url(microphone-blocked.svg) !important;
list-style-image: url("microphone-blocked.svg") !important;
}
.screen-icon {
list-style-image: url(screen.svg) !important;
list-style-image: url("screen.svg") !important;
}
.screen-icon.blocked-permission-icon {
list-style-image: url(screen-blocked.svg) !important;
list-style-image: url("screen-blocked.svg") !important;
}
.popup-notification-icon[popupid="persistent-storage"],
.persistent-storage-icon {
list-style-image: url(persistent-storage.svg) !important;
list-style-image: url("persistent-storage.svg") !important;
}
.persistent-storage-icon.blocked-permission-icon {
list-style-image: url(persistent-storage-blocked.svg) !important;
list-style-image: url("persistent-storage-blocked.svg") !important;
}
.popup-icon {
list-style-image: url(popup.svg) !important;
list-style-image: url("popup.svg") !important;
}
.autoplay-media-icon {
list-style-image: url(autoplay-media.svg) !important;
list-style-image: url("autoplay-media.svg") !important;
}
.autoplay-media-icon.blocked-permission-icon {
list-style-image: url(autoplay-media-blocked.svg) !important;
list-style-image: url("autoplay-media-blocked.svg") !important;
}
#canvas-notification-icon,
.popup-notification-icon[popupid="canvas-permissions-prompt"],
.canvas-icon {
list-style-image: url(canvas.svg) !important;
list-style-image: url("canvas.svg") !important;
}
.canvas-icon.blocked-permission-icon {
list-style-image: url(canvas-blocked.svg) !important;
list-style-image: url("canvas-blocked.svg") !important;
}
.midi-icon,
.midi-sysex-icon,
.popup-notification-icon[popupid="midi"],
.popup-notification-icon[popupid="midi-sysex"] {
list-style-image: url(midi.svg) !important;
list-style-image: url("midi.svg") !important;
}
.install-icon {
list-style-image: url(extension.svg) !important;
list-style-image: url("extension.svg") !important;
}
.install-icon.blocked-permission-icon,
.popup-notification-icon[popupid="xpinstall-disabled"],
.popup-notification-icon[popupid="addon-install-blocked"],
.popup-notification-icon[popupid="addon-install-origin-blocked"] {
list-style-image: url(extension-blocked.svg) !important;
list-style-image: url("extension-blocked.svg") !important;
}
/* tab sound icons */
@ -442,3 +444,12 @@
.tab-icon-overlay[activemedia-blocked] {
list-style-image: url("tab-audio-blocked-small.svg") !important;
}
/* reload/stop animation */
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
background-image: url("reload-to-stop.svg") !important;
}
#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
background-image: url("stop-to-reload.svg") !important;
}

28
chrome/icons/reload-to-stop.svg Normal file
View file

@ -0,0 +1,28 @@
<!-- do not round the stroke-width -->
<svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.001" stroke="context-fill" stroke-opacity="context-fill-opacity" width="260" height="20" fill="none" stroke-linecap="round" stroke-linejoin="round">
<defs>
<clipPath id="a"><path d="M0 3h6l8 7 5 1v9H0z"/></clipPath>
<clipPath id="b"><path d="M9 0v12l-5 8H0V0z"/></clipPath>
<clipPath id="c"><path d="m5 3 2 4h5V0H5z"/></clipPath>
<clipPath id="d"><path d="m10 8-2 2-5-5 2-2z"/></clipPath>
<clipPath id="e"><path d="m5 3 10 10-2 2L3 5z"/></clipPath>
<clipPath id="f"><path d="m5 3 12 12-2 2L3 5z"/></clipPath>
<clipPath id="g"><path d="m3 1 16 16H3z"/></clipPath>
<clipPath id="h"><path d="M3 3h7l7 7v7H3z"/></clipPath>
<path id="reload" d="M17.48 9.5v.5c0 4.1-3.4 7.5-7.5 7.5s-7.5-3.4-7.5-7.5 3.4-7.5 7.5-7.5c2.8 0 5.2 1.5 6.5 3.8m.02-3.8v4h-4"/>
<path id="close" d="m4.5 4.5 11 11m-11 0 11-11"/>
</defs>
<svg><use href="#reload"/></svg>
<svg x="20"><use href="#reload" transform="rotate(45 10 10)"/></svg>
<svg x="40"><use href="#reload" transform="rotate(125 10 10)"/></svg>
<svg x="60"><use href="#reload" transform="rotate(195 10 10)"/></svg>
<svg x="80"><use href="#reload" transform="rotate(235 10 10)"/></svg>
<svg x="100"><g clip-path="url(#a)"><use href="#reload" transform="rotate(260 10 10)"/></g></svg>
<svg x="120"><g clip-path="url(#b)"><use href="#reload" transform="rotate(280 10 10)"/></g></svg>
<svg x="140"><g clip-path="url(#c)"><use href="#reload" transform="rotate(300 10 10)"/></g><use href="#close" clip-path="url(#d)"/></svg>
<svg x="160"><use href="#close" clip-path="url(#e)"/></svg>
<svg x="180"><use href="#close" clip-path="url(#f)"/></svg>
<svg x="200"><use href="#close" clip-path="url(#g)"/></svg>
<svg x="220"><use href="#close" clip-path="url(#h)"/></svg>
<svg x="240"><use href="#close"/></svg>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

35
chrome/icons/stop-to-reload.svg Normal file
View file

@ -0,0 +1,35 @@
<!-- do not round the stroke-width -->
<svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.001" stroke="context-fill" stroke-opacity="context-fill-opacity" fill="none" stroke-linecap="round" stroke-linejoin="round">
<defs>
<clipPath id="a"><path d="m3 6 11 11h3V3H3Z"/></clipPath>
<clipPath id="b"><path d="M5 3 3 5l12 12 2-2L5 3zm10 0-2 2 2 2 2-2-2-2z"/></clipPath>
<clipPath id="c"><path d="m5 3 12 12-2 2L3 5Z"/></clipPath>
<clipPath id="d"><path d="m5 3 7 7-2 2-7-7z"/></clipPath>
<clipPath id="e"><path d="m5 3 2 2-2 2-2-2Z"/></clipPath>
<clipPath id="f"><path d="m16 3-4 6h10Z"/></clipPath>
<clipPath id="g"><path d="m11 11 8 6V4h-4z"/></clipPath>
<clipPath id="h"><path d="m11 11-1 9h9V0l-7 8z"/></clipPath>
<clipPath id="i"><path d="M16 3 3 17v3h16V3Z"/></clipPath>
<clipPath id="j"><path d="m16 3-3 4-13 3v10h19V3Z"/></clipPath>
<clipPath id="k"><path d="m16 3-3 4L0 2v18h20V3Z"/></clipPath>
<clipPath id="l"><path d="m16 3-3 4-8-7H0v20h20V3Z"/></clipPath>
<clipPath id="m"><path d="m16 3-3 4-2-7H0v20h20V3Z"/></clipPath>
<path id="reload" d="M17.48 9.5v.5c0 4.1-3.4 7.5-7.5 7.5s-7.5-3.4-7.5-7.5 3.4-7.5 7.5-7.5c2.8 0 5.2 1.5 6.5 3.8m.02-3.8v4h-4"/>
<path id="close" d="m4.5 4.5 11 11m-11 0 11-11"/>
</defs>
<svg><use href="#close"/></svg>
<svg x="20"><use href="#close" clip-path="url(#a)"/></svg>
<svg x="40"><use href="#close" clip-path="url(#b)"/></svg>
<svg x="60"><g clip-path="url(#f)"><use href="#reload" transform="rotate(40 10 10)"/></g><use href="#close" clip-path="url(#c)"/></svg>
<svg x="80"><g clip-path="url(#g)"><use href="#reload" transform="rotate(80 10 10)"/></g><use href="#close" clip-path="url(#d)"/></svg>
<svg x="100"><g clip-path="url(#h)"><use href="#reload" transform="rotate(120 10 10)"/></g><use href="#close" clip-path="url(#e)"/></svg>
<svg x="120"><g clip-path="url(#i)"><use href="#reload" transform="rotate(160 10 10)"/></g></svg>
<svg x="140"><g clip-path="url(#j)"><use href="#reload" transform="rotate(200 10 10)"/></g></svg>
<svg x="160"><g clip-path="url(#k)"><use href="#reload" transform="rotate(250 10 10)"/></g></svg>
<svg x="180"><g clip-path="url(#l)"><use href="#reload" transform="rotate(270 10 10)"/></g></svg>
<svg x="200"><g clip-path="url(#m)"><use href="#reload" transform="rotate(300 10 10)"/></g></svg>
<svg x="220"><use href="#reload" transform="rotate(335 10 10)"/></svg>
<svg x="240"><use href="#reload" transform="rotate(345 10 10)"/></svg>
<svg x="260"><use href="#reload" transform="rotate(355 10 10)"/></svg>
<svg x="280"><use href="#reload"/></svg>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB