diff options
Diffstat (limited to 'browser/themes/shared/toolbarbutton-icons.css')
| -rw-r--r-- | browser/themes/shared/toolbarbutton-icons.css | 469 |
1 files changed, 469 insertions, 0 deletions
diff --git a/browser/themes/shared/toolbarbutton-icons.css b/browser/themes/shared/toolbarbutton-icons.css new file mode 100644 index 0000000000..acbc0e9630 --- /dev/null +++ b/browser/themes/shared/toolbarbutton-icons.css @@ -0,0 +1,469 @@ +/* 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/. */ + +:root { + --toolbarbutton-icon-fill-attention: AccentColor; + --toolbarbutton-icon-fill-attention-text: AccentColorText; + --warning-icon-bgcolor: light-dark(#FFA436, #FFBD4F); +} + +:root:-moz-lwtheme { + --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, light-dark(rgb(0, 97, 224), rgb(0, 221, 255))); + /* FIXME(emilio): This could have poor contrast on some themes, maybe use + * contrast-color() once that's available, or compute a new variable in + * LightWeightThemeConsumer */ + --toolbarbutton-icon-fill-attention-text: var(--toolbar-field-background-color); +} + +.toolbarbutton-animatable-box, +.toolbarbutton-1 { + color: inherit; + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); +} + +.toolbarbutton-animatable-box { + display: block; + position: absolute; + overflow: hidden; + z-index: 2; + pointer-events: none; +} + +.toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-fill-mode: forwards; + animation-iteration-count: 1; + list-style-image: none; +} + +#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image, +#stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image, +#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image, +#PlacesChevron:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#PanelUI-menu-button:-moz-locale-dir(rtl) > .toolbarbutton-badge-stack > .toolbarbutton-icon { + scale: -1 1; +} + +#back-button { + list-style-image: url("chrome://browser/skin/back.svg"); +} + +#forward-button { + list-style-image: url("chrome://browser/skin/forward.svg"); +} + +/* The animations for the reload-button and stop-button are disabled + outside of the nav-bar due to bug 1382894. */ +:is(#reload-button, #stop-button) > .toolbarbutton-animatable-box { + display: none; +} +#nav-bar-customization-target > #stop-reload-button > :is(#reload-button, #stop-button) > .toolbarbutton-animatable-box { + display: block; +} + +#stop-reload-button[animate] > #reload-button > .toolbarbutton-icon, +#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-icon { + fill: transparent; +} + +@keyframes stop-to-reload { + /* pause on the first frame (step 0) for 6 frames of time */ + from { + /* 0 */ + transform: translateX(0); + } + /* resume at 7/35 and animate across the next 14 frames */ + 17.14% { + animation-timing-function: steps(14); + transform: translateX(calc(0 * -20px)); + } + /* pause on the last frame for the remainder of the duration */ + 54.29% { + transform: translateX(calc(14 * -20px)); + } + to { + /* end state for animation: */ + transform: translateX(calc(var(--anim-frames) * -20px)); + } +} + +@keyframes reload-to-stop { + /* pause on the first frame (step 0) for 6 frames of time */ + from { + /* 0 */ + transform: translateX(0); + animation-timing-function: steps(12); + } + /* pause at 13/15 for 3 frames */ + 86.67% { + transform: translateX(calc(var(--anim-frames) * -20px)); + } + to { + /* end state for animation: */ + transform: translateX(calc(var(--anim-frames) * -20px)); + } +} + +#stop-reload-button[animate] > #reload-button, +#stop-reload-button[animate] > #stop-button { + position: relative; +} + +#nav-bar-customization-target :where(#reload-button, #stop-button) > .toolbarbutton-icon { + padding: calc(var(--toolbarbutton-inner-padding) + 1px) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 1px ) !important; /* The animation is 18px but the other icons are 16px, lower it by 1px so it is vertically centered */ +} + +#reload-button > .toolbarbutton-animatable-box, +#stop-button > .toolbarbutton-animatable-box { + top: calc(50% - 9px); /* Vertically center the 20px tall animatable image, which is 1px higher than other icons */ + width: 20px; /* Width of each frame within the SVG sprite */ + height: 20px; /* Height of each frame within the SVG sprite */ +} + +#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url("chrome://browser/skin/stop-to-reload.svg"); + /* + transition from stop icon to reload icon + pause at frame 0 for 6 ticks, + pause at frame 15 for 16 ticks + total 35 steps*/ + --anim-frames: 14; + --anim-steps: calc(var(--anim-frames) + 21); /* Add steps for doing the pause at the start and end */ + width: calc(20px * (var(--anim-frames) + 1)); + height: 20px; + + /* initial state for animation */ + transform: translateX(0); +} + +#stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-name: stop-to-reload; +} + +#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-duration: calc(var(--anim-steps) * 16.667ms); +} + +#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url("chrome://browser/skin/reload-to-stop.svg"); + /* + transition from reload icon to stop icon + pause at end for 3 frames of time + pause at ... + total 15 steps*/ + --anim-frames: 12; + --anim-steps: calc(var(--anim-frames) + 3); /* Add steps for doing the pause at the start and end */ + width: calc(20px * (var(--anim-frames) + 1)); + height: 20px; + + /* initial state for animation */ + transform: translateX(0); +} + +#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-name: reload-to-stop; + animation-duration: calc(var(--anim-steps) * 16.667ms); +} + +#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-timing-function: steps(15); + animation-duration: 0.25s; +} + +#reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + transform: translateX(-700px); +} + +#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + transform: translateX(-300px); +} + +#reload-button { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} + +#stop-button { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +#home-button { + list-style-image: url("chrome://browser/skin/home.svg"); +} + +#bookmarks-toolbar-button, +#bookmarks-toolbar-placeholder { + list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); +} + +#bookmarks-menu-button { + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} + +#history-panelmenu { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +#downloads-button { + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +#open-file-button { + list-style-image: url("chrome://browser/skin/open.svg"); +} + +#screenshot-button { + list-style-image: url("chrome://browser/skin/screenshot.svg"); +} + +#save-page-button { + list-style-image: url("chrome://browser/skin/save.svg"); +} + +#sync-button { + list-style-image: url("chrome://browser/skin/synced-tabs.svg"); +} + +#characterencoding-button { + list-style-image: url("chrome://browser/skin/characterEncoding.svg"); +} + +#new-window-button { + list-style-image: url("chrome://browser/skin/window.svg"); +} + +#new-tab-button { + list-style-image: url("chrome://browser/skin/new-tab.svg"); +} + +#privatebrowsing-button { + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} + +#find-button { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} + +#print-button { + list-style-image: url("chrome://global/skin/icons/print.svg"); +} + +#fullscreen-button { + list-style-image: url("chrome://browser/skin/fullscreen.svg"); +} + +#developer-button { + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} + +#profiler-button-button > .toolbarbutton-icon { + list-style-image: url("chrome://devtools/skin/images/tool-profiler.svg"); +} + +#profiler-button-button:not(.profiler-active) > image { + transform: scaleX(-1); +} + +#profiler-button-button.profiler-active > image { + fill: #0060df; + fill-opacity: 1; + background-color: #0060df33; +} + +#profiler-button-button.profiler-active:hover > image { + background-color: #0060df22; +} + +#profiler-button-button.profiler-paused > image { + opacity: 0.4; +} + +#preferences-button { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +#PanelUI-menu-button { + list-style-image: url("chrome://browser/skin/menu.svg"); +} + +#PanelUI-menu-button[badge-status="update-available"], +#PanelUI-menu-button[badge-status="update-downloading"], +#PanelUI-menu-button[badge-status="update-manual"], +#PanelUI-menu-button[badge-status="update-other-instance"], +#PanelUI-menu-button[badge-status="update-restart"], +#PanelUI-menu-button[badge-status="update-unsupported"], +#PanelUI-menu-button[badge-status="addon-alert"], +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] { + list-style-image: url("chrome://browser/skin/menu-badged.svg"); +} + +#cut-button { + list-style-image: url("chrome://browser/skin/edit-cut.svg"); +} + +#copy-button { + list-style-image: url("chrome://global/skin/icons/edit-copy.svg"); +} + +#paste-button { + list-style-image: url("chrome://browser/skin/edit-paste.svg"); +} + +#zoom-out-button { + list-style-image: url("chrome://browser/skin/zoom-out.svg"); +} + +#zoom-in-button { + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} + +#PlacesChevron, +#nav-bar-overflow-button { + list-style-image: url("chrome://global/skin/icons/chevron.svg"); +} + +#nav-bar-overflow-button[animate] > .toolbarbutton-icon { + fill: transparent; +} + +@keyframes overflow-animation { + from { + transform: translateX(0); + } + /* Bug 1831300 is on file for this. */ + /* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */ + from { + transform: translateX(-832px); + } +} + +#nav-bar-overflow-button > .toolbarbutton-animatable-box { + visibility: hidden; + top: calc(50% - 8px); /* Vertically center the 16px tall animatable image */ + width: 16px; /* Width of each frame within the SVG sprite */ + height: 16px; /* Height of each frame within the SVG sprite */ + -moz-context-properties: fill, stroke; + fill: var(--toolbarbutton-icon-fill); + stroke: var(--toolbarbutton-icon-fill-attention); +} +#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + background-image: url("chrome://browser/skin/chevron-animation.svg"); + width: 848px; + height: 16px; + transform: translateX(0); +} + +#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box { + visibility: visible; +} +#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { + animation-name: overflow-animation; + animation-timing-function: steps(52); + animation-duration: calc(52 * 16.667ms); +} + +#unified-extensions-button { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} + +#reset-pbm-toolbar-button { + list-style-image: url("chrome://browser/skin/flame.svg"); + + :root:not([privatebrowsingmode]) & { + display: none; + } +} + +#email-link-button { + list-style-image: url("chrome://browser/skin/mail.svg"); +} + +#logins-button { + list-style-image: url("chrome://browser/skin/login.svg"); +} + +#sidebar-button { + list-style-image: url("chrome://browser/skin/sidebars-right.svg"); +} + +#sidebar-button:-moz-locale-dir(ltr):not([positionend]), +#sidebar-button:-moz-locale-dir(rtl)[positionend] { + list-style-image: url("chrome://browser/skin/sidebars.svg"); +} + +#panic-button { + list-style-image: url("chrome://browser/skin/forget.svg"); +} + +#panic-button[open] { + fill: light-dark(rgb(213, 32, 20), #ff848b); +} + +#library-button { + list-style-image: url("chrome://browser/skin/library.svg"); +} + +#save-to-pocket-button { + list-style-image: url("chrome://global/skin/icons/pocket-outline.svg"); + fill: var(--toolbarbutton-icon-fill); +} + +#save-to-pocket-button[open="true"], +#save-to-pocket-button[pocketed="true"] { + list-style-image: url("chrome://global/skin/icons/pocket.svg"); + fill: var(--pocket-icon-fill); +} + +/* ----- BOOKMARK BUTTONS ----- */ + +.bookmark-item { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +toolbarbutton.bookmark-item { + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); +} + +.bookmark-item[container] { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +.bookmark-item[container][query] { + list-style-image: url("chrome://browser/skin/places/folder-smart.svg"); +} + +.bookmark-item[query][tagContainer] { + list-style-image: url("chrome://browser/skin/places/tag.svg"); +} + +.bookmark-item[query][dayContainer] { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +.bookmark-item[query][hostContainer] { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +#whats-new-menu-button { + list-style-image: url("chrome://global/skin/icons/whatsnew.svg"); +} + +#ion-button { + list-style-image: url("chrome://browser/skin/ion.svg"); +} + +#import-button { + list-style-image: url("chrome://browser/skin/import.svg"); +} + +#firefox-view-button { + list-style-image: url("chrome://browser/skin/firefox-view.svg"); +} |