From da8ad23244532e3d82e69cbbbf66cc7971a4af71 Mon Sep 17 00:00:00 2001 From: bmFtZQ <62812711+bmFtZQ@users.noreply.github.com> Date: Tue, 13 Apr 2021 02:47:51 +0800 Subject: [PATCH] Add files via upload * add reload/stop animation * add pin to overflow menu animation * sidebar icon adapts to the position and status of sidebar --- chrome/icons/arrow-back.svg | 9 ++++++- chrome/icons/chevron-animation.svg | 3 +++ chrome/icons/icons.css | 40 ++++++++++++++++++++++-------- chrome/icons/reload-to-stop.svg | 11 ++++++++ chrome/icons/sidebar-fill.svg | 5 ++++ chrome/icons/stop-to-reload.svg | 9 +++++++ 6 files changed, 66 insertions(+), 11 deletions(-) create mode 100644 chrome/icons/chevron-animation.svg create mode 100644 chrome/icons/reload-to-stop.svg create mode 100644 chrome/icons/sidebar-fill.svg create mode 100644 chrome/icons/stop-to-reload.svg diff --git a/chrome/icons/arrow-back.svg b/chrome/icons/arrow-back.svg index be42d4c..17922db 100644 --- a/chrome/icons/arrow-back.svg +++ b/chrome/icons/arrow-back.svg @@ -1,5 +1,12 @@ + + d="M 7.4765625,0.50024219 C 7.3521298,0.50624502 7.2344198,0.5584832 7.1464844,0.64672657 L 0.14648438,7.1464844 c -0.19518416,0.1952649 -0.19518416,0.5117663 0,0.7070312 L 7.1464844,14.353516 c 0.1952535,0.195212 0.5117777,0.195212 0.7070312,0 0.1952123,-0.195254 0.1952123,-0.511778 0,-0.707032 L 1.7070312,8 H 15.5 C 15.776142,8 16,7.7761424 16,7.5 16,7.2238576 15.776142,7 15.5,7 H 1.7070312 L 7.8535156,1.3537578 c 0.1952118,-0.1952535 0.1952118,-0.51177773 0,-0.70703123 C 7.7540987,0.54699465 7.6172351,0.49380931 7.4765625,0.50024219 Z" + id="flip" /> diff --git a/chrome/icons/chevron-animation.svg b/chrome/icons/chevron-animation.svg new file mode 100644 index 0000000..36e3ad5 --- /dev/null +++ b/chrome/icons/chevron-animation.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css index acaeef7..31947b5 100644 --- a/chrome/icons/icons.css +++ b/chrome/icons/icons.css @@ -5,15 +5,20 @@ fill: currentColor; } -.toolbarbutton-1:-moz-any(#back-button, #forward-button), +.toolbarbutton-1#back-button, #context-back, -#context-forward, .subviewbutton-back, .identity-popup-expander { list-style-image: url(arrow-back.svg) !important; } +.toolbarbutton-1#forward-button, +#context-forward +{ + list-style-image: url(arrow-back.svg#flip) !important; +} + #PanelUI-menu-button { list-style-image: url(menu.svg) !important; @@ -24,9 +29,14 @@ { list-style-image: url(refresh.svg) !important; } -:-moz-any(#reload-button, #stop-button):not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { - animation-timing-function: steps(0) !important; - animation-duration: 0ms !important; + +#reload-button > .toolbarbutton-animatable-box, #stop-button > .toolbarbutton-animatable-box, +#nav-bar-overflow-button > .toolbarbutton-animatable-box { + margin-inline-start: calc((16px + 2 * 12px - 18px) / 2) !important; +} + +#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url(reload-to-stop.svg) !important; } #stop-button, @@ -35,10 +45,12 @@ list-style-image: url(stop.svg) !important; } -.toolbarbutton-1#forward-button, -#context-forward -{ - transform: scaleX(-1) !important; +#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url(stop-to-reload.svg) !important; +} + +#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url(chevron-animation.svg) !important; } #home-button @@ -147,6 +159,14 @@ list-style-image: url(sidebar.svg) !important; } +#sidebar-button[positionend] { + transform: scaleX(-1) !important; +} + +#sidebar-button[checked] { + list-style-image: url(sidebar-fill.svg) !important; +} + #nav-bar-overflow-button, #alltabs-button { list-style-image: url(overflow.svg) !important; } @@ -441,4 +461,4 @@ richlistitem[originaltype="loginsFooter"] .ac-site-icon, .urlbarView-favicon[src*="search-glass.svg"] { background-image: url(search.svg) !important; -} +} \ No newline at end of file diff --git a/chrome/icons/reload-to-stop.svg b/chrome/icons/reload-to-stop.svg new file mode 100644 index 0000000..38c2664 --- /dev/null +++ b/chrome/icons/reload-to-stop.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/chrome/icons/sidebar-fill.svg b/chrome/icons/sidebar-fill.svg new file mode 100644 index 0000000..b7ec631 --- /dev/null +++ b/chrome/icons/sidebar-fill.svg @@ -0,0 +1,5 @@ + + + diff --git a/chrome/icons/stop-to-reload.svg b/chrome/icons/stop-to-reload.svg new file mode 100644 index 0000000..7a62c85 --- /dev/null +++ b/chrome/icons/stop-to-reload.svg @@ -0,0 +1,9 @@ + + + + + + + + +