mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 03:05:34 +00:00
8a5df47f41
MozReview-Commit-ID: 90eUNtqE0ee --HG-- extra : rebase_source : 833a1738599b9620a05859a40e687329a229368a
510 lines
14 KiB
CSS
510 lines
14 KiB
CSS
:root {
|
|
--toolbarbutton-icon-fill-attention: #0a84ff;
|
|
}
|
|
|
|
toolbar[brighttext] {
|
|
--toolbarbutton-icon-fill-attention: #45a1ff;
|
|
}
|
|
|
|
.toolbarbutton-animatable-box,
|
|
.toolbarbutton-1 {
|
|
-moz-context-properties: fill;
|
|
fill: #4c4c4c;
|
|
}
|
|
|
|
.toolbarbutton-animatable-box[brighttext],
|
|
toolbar[brighttext] .toolbarbutton-animatable-box,
|
|
toolbar[brighttext] .toolbarbutton-1 {
|
|
fill: #fff;
|
|
}
|
|
|
|
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
|
|
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
|
|
#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
|
|
#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
|
|
#PlacesChevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
|
|
#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
#back-button {
|
|
list-style-image: url("chrome://browser/skin/back.svg");
|
|
}
|
|
|
|
#forward-button {
|
|
list-style-image: url("chrome://browser/skin/forward.svg");
|
|
}
|
|
|
|
.toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: 1;
|
|
list-style-image: none;
|
|
}
|
|
|
|
/* The animations for the reload-button and stop-button are disabled
|
|
outside of the nav-bar due to bug 1382894. */
|
|
:-moz-any(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
|
|
display: none;
|
|
}
|
|
#nav-bar-customization-target > #stop-reload-button > :-moz-any(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
|
|
display: -moz-box;
|
|
}
|
|
|
|
#stop-reload-button[animate] > #reload-button > .toolbarbutton-icon,
|
|
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-icon {
|
|
fill: transparent;
|
|
}
|
|
|
|
@keyframes reload-to-stop {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-450px);
|
|
}
|
|
}
|
|
|
|
@keyframes reload-to-stop-rtl {
|
|
from {
|
|
transform: scaleX(-1) translateX(0);
|
|
}
|
|
to {
|
|
transform: scaleX(-1) translateX(-450px);
|
|
}
|
|
}
|
|
|
|
@keyframes stop-to-reload {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-450px);
|
|
}
|
|
}
|
|
|
|
@keyframes stop-to-reload-rtl {
|
|
from {
|
|
transform: scaleX(-1) translateX(0);
|
|
}
|
|
to {
|
|
transform: scaleX(-1) translateX(-450px);
|
|
}
|
|
}
|
|
|
|
#stop-reload-button[animate] > #reload-button,
|
|
#stop-reload-button[animate] > #stop-button {
|
|
position: relative;
|
|
}
|
|
|
|
#reload-button > .toolbarbutton-animatable-box,
|
|
#stop-button > .toolbarbutton-animatable-box {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */
|
|
/* Since .toolbarbutton-icon uses a different width than the animatable-box,
|
|
we need to set a padding relative to the difference in widths. */
|
|
margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 18px) / 2);
|
|
/* Set the min- and max- width and height of the box equal to that
|
|
of each frame of the SVG sprite. Setting the width and height via
|
|
the `width` and `height` CSS properties causes an assertion for
|
|
`inline-size less than zero: 'aContainingBlockISize >= 0'` (bug 1379332). */
|
|
min-width: 18px;
|
|
max-width: 18px;
|
|
min-height: 20px;
|
|
max-height: 20px;
|
|
}
|
|
|
|
#reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
|
|
#stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
|
|
}
|
|
|
|
#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
background-image: url("chrome://browser/skin/reload-to-stop.svg");
|
|
width: 468px;
|
|
}
|
|
|
|
#stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-name: reload-to-stop;
|
|
}
|
|
|
|
#stop-reload-button[animate] > #reload-button:not([displaystop]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-name: reload-to-stop-rtl;
|
|
}
|
|
|
|
#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-timing-function: steps(25);
|
|
animation-duration: 417ms;
|
|
}
|
|
|
|
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
background-image: url("chrome://browser/skin/stop-to-reload.svg");
|
|
width: 468px;
|
|
}
|
|
|
|
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-name: stop-to-reload;
|
|
}
|
|
|
|
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-name: stop-to-reload-rtl;
|
|
}
|
|
|
|
#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-timing-function: steps(25);
|
|
animation-duration: 417ms;
|
|
}
|
|
|
|
#reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
transform: translateX(-450px);
|
|
}
|
|
|
|
#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
transform: scaleX(-1) translateX(-450px);
|
|
}
|
|
|
|
#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
transform: translateX(-450px);
|
|
}
|
|
|
|
#reload-button[displaystop] + #stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
transform: scaleX(-1) translateX(-450px);
|
|
}
|
|
|
|
#reload-button {
|
|
list-style-image: url("chrome://browser/skin/reload.svg");
|
|
}
|
|
|
|
#stop-button {
|
|
list-style-image: url("chrome://browser/skin/stop.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/bookmark-hollow.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/download-icons.svg#arrow-with-bar");
|
|
}
|
|
|
|
#add-ons-button {
|
|
list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.svg");
|
|
}
|
|
|
|
#open-file-button {
|
|
list-style-image: url("chrome://browser/skin/open.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");
|
|
}
|
|
|
|
#containers-panelmenu {
|
|
list-style-image: url("chrome://browser/skin/containers.svg");
|
|
}
|
|
|
|
#feed-button {
|
|
list-style-image: url("chrome://browser/skin/feed.svg");
|
|
}
|
|
|
|
#characterencoding-button {
|
|
list-style-image: url("chrome://browser/skin/characterEncoding.svg");
|
|
}
|
|
|
|
#new-window-button {
|
|
list-style-image: url("chrome://browser/skin/new-window.svg");
|
|
}
|
|
|
|
#e10s-button {
|
|
list-style-image: url("chrome://browser/skin/new-window.svg");
|
|
}
|
|
|
|
#e10s-button > .toolbarbutton-icon {
|
|
transform: scaleY(-1);
|
|
}
|
|
|
|
#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://browser/skin/find.svg");
|
|
}
|
|
|
|
#print-button {
|
|
list-style-image: url("chrome://browser/skin/print.svg");
|
|
}
|
|
|
|
%ifdef XP_MACOSX
|
|
#restore-button,
|
|
%endif
|
|
#fullscreen-button {
|
|
list-style-image: url("chrome://browser/skin/fullscreen.svg");
|
|
}
|
|
|
|
#developer-button {
|
|
list-style-image: url("chrome://browser/skin/developer.svg");
|
|
}
|
|
|
|
#preferences-button {
|
|
list-style-image: url("chrome://browser/skin/settings.svg");
|
|
}
|
|
|
|
#PanelUI-menu-button {
|
|
list-style-image: url("chrome://browser/skin/menu.svg");
|
|
}
|
|
|
|
#cut-button {
|
|
list-style-image: url("chrome://browser/skin/edit-cut.svg");
|
|
}
|
|
|
|
#copy-button {
|
|
list-style-image: url("chrome://browser/skin/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://browser/skin/zoom-in.svg");
|
|
}
|
|
|
|
#PlacesChevron,
|
|
#nav-bar-overflow-button {
|
|
list-style-image: url("chrome://browser/skin/chevron.svg");
|
|
}
|
|
|
|
#nav-bar-overflow-button[animate] > .toolbarbutton-icon {
|
|
fill: transparent;
|
|
}
|
|
|
|
@keyframes overflow-animation {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
to {
|
|
transform: translateX(-1260px);
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
}
|
|
|
|
@keyframes overflow-animation-rtl {
|
|
from {
|
|
transform: scaleX(-1) translateX(0);
|
|
}
|
|
50% {
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
to {
|
|
transform: scaleX(-1) translateX(-1260px);
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
}
|
|
|
|
/* The animation is supposed to show the blue fill color for 520ms, then the
|
|
fade to the toolbarbutton-fill color for the remaining 210ms. Thus with an
|
|
animation-duration of 730ms, 71% is the point where we start the fade out. */
|
|
@keyframes overflow-fade {
|
|
from {
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
71% {
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
to {
|
|
fill: inherit;
|
|
}
|
|
}
|
|
|
|
#nav-bar-overflow-button > .toolbarbutton-animatable-box {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
top: calc(50% - 18px); /* Vertically center the 36px tall animatable image */
|
|
/* Since .toolbarbutton-icon uses a different width than the animatable box,
|
|
we need to set a padding relative to the difference in widths. */
|
|
margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 18px) / 2);
|
|
width: 18px; /* Width of each frame within the SVG sprite */
|
|
height: 36px; /* Height of each frame within the SVG sprite */
|
|
}
|
|
|
|
#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
/* Height must be equal to height of toolbarbutton padding-box. --toolbarbutton-height
|
|
is calculated and set during runtime by BrowserUtils.setToolbarButtonHeightProperty()
|
|
before the animation begins. */
|
|
height: var(--toolbarbutton-height);
|
|
min-height: 36px; /* Minimum height must be equal to the height of the SVG sprite */
|
|
}
|
|
|
|
#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-name: overflow-animation;
|
|
animation-timing-function: steps(70);
|
|
animation-duration: 1167ms;
|
|
background-image: url("chrome://browser/skin/chevron-animation.svg");
|
|
width: 1278px;
|
|
}
|
|
|
|
#nav-bar-overflow-button[animate]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-name: overflow-animation-rtl;
|
|
}
|
|
|
|
#nav-bar-overflow-button[animate][fade] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-name: overflow-fade;
|
|
animation-timing-function: ease-out;
|
|
animation-duration: 730ms;
|
|
}
|
|
|
|
#nav-bar-overflow-button[animate][fade]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
#email-link-button {
|
|
list-style-image: url("chrome://browser/skin/mail.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: rgb(213, 32, 20);
|
|
}
|
|
|
|
#webide-button {
|
|
list-style-image: url("chrome://browser/skin/webIDE.svg");
|
|
}
|
|
|
|
#library-button {
|
|
list-style-image: url("chrome://browser/skin/library.svg");
|
|
}
|
|
|
|
@keyframes library-bookmark-animation {
|
|
from {
|
|
transform: translateX(0);
|
|
fill: inherit;
|
|
}
|
|
25% {
|
|
fill: inherit;
|
|
}
|
|
50% {
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
to {
|
|
transform: translateX(-1056px);
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
}
|
|
|
|
@keyframes library-bookmark-animation-rtl {
|
|
from {
|
|
transform: translateX(1056px);
|
|
fill: inherit;
|
|
}
|
|
25% {
|
|
fill: inherit;
|
|
}
|
|
50% {
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
}
|
|
|
|
@keyframes library-bookmark-fade {
|
|
from {
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
to {
|
|
fill: inherit;
|
|
}
|
|
}
|
|
|
|
#library-button[animate] > .toolbarbutton-icon {
|
|
fill: transparent;
|
|
}
|
|
|
|
.toolbarbutton-animatable-box[animate] {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
/* Position the sprite at the y-position of the library-button, then adjust
|
|
based on the size difference between half of the button height and half
|
|
of the sprite height. The titlebar may have padding from -moz-appearance
|
|
that needs to be accounted for. */
|
|
top: calc(var(--library-button-y) + var(--library-button-height) / 2 - 27px - var(--toolbox-y));
|
|
/* Set a margin relative to the difference in widths of the .toolbarbutton-icon
|
|
and the .toolbar-animatable-box. This is correct even in RTL because the item
|
|
is positioned using `left`. */
|
|
left: calc(var(--library-icon-x) + (16px + 2 * var(--toolbarbutton-inner-padding) - 22px) / 2);
|
|
/* Set the min- and max- width and height of the box equal to that
|
|
of each frame of the SVG sprite (must use min- and max- due to bug 1379332). */
|
|
min-width: 22px;
|
|
max-width: 22px;
|
|
min-height: 54px;
|
|
max-height: 54px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.toolbarbutton-animatable-box[animate] > .toolbarbutton-animatable-image {
|
|
height: var(--toolbarbutton-height);
|
|
min-height: 54px; /* Minimum height must be equal to the height of the SVG sprite */
|
|
}
|
|
|
|
.toolbarbutton-animatable-box[animate="bookmark"] > .toolbarbutton-animatable-image {
|
|
background-image: url("chrome://browser/skin/library-bookmark-animation.svg");
|
|
width: 1078px;
|
|
animation-name: library-bookmark-animation;
|
|
animation-duration: 800ms;
|
|
animation-timing-function: steps(48);
|
|
-moz-context-properties: fill, stroke;
|
|
stroke: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
|
|
.toolbarbutton-animatable-box[animate="bookmark"]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-image {
|
|
animation-name: library-bookmark-animation-rtl;
|
|
}
|
|
|
|
.toolbarbutton-animatable-box[animate="bookmark"][fade] > .toolbarbutton-animatable-image {
|
|
animation-name: library-bookmark-fade;
|
|
animation-duration: 2s;
|
|
animation-timing-function: ease-out;
|
|
}
|