1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
|
/* 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/. */
:host {
/* in-content/common.css variables */
--blue-50: #0a84ff;
--grey-90-a10: rgba(12, 12, 13, 0.1);
--shadow-30: 0 4px 16px var(--grey-90-a10);
--border-active-shadow: var(--blue-50);
}
:host {
display: block;
position: absolute;
bottom: 24px;
inset-inline-start: 50%;
translate: -50%;
}
:host(:-moz-locale-dir(rtl)) {
translate: 50%;
}
.container {
margin-inline: auto;
align-items: center;
display: flex;
justify-content: center;
box-shadow: var(--shadow-30);
color: var(--toolbar-color);
background-color: var(--toolbar-bgcolor);
border-radius: 6px;
border-style: none;
}
.container::before {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: -1;
background-color: ButtonFace;
border-radius: 6px;
}
.toolbarButton,
.toolbarCenter {
align-self: stretch;
flex: 0 0 auto;
padding: var(--toolbarbutton-outer-padding);
border: none;
border-inline-end: 1px solid ThreeDShadow;
border-block: 1px solid ThreeDShadow;
color: inherit;
background-color: transparent;
min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
min-height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
}
.startItem {
border-inline-start: 1px solid ThreeDShadow;
border-start-start-radius: 6px;
border-end-start-radius: 6px;
}
.endItem {
border-start-end-radius: 6px;
border-end-end-radius: 6px;
}
.toolbarButton::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
vertical-align: text-bottom;
text-align: center;
background-repeat: no-repeat;
background-position: center center;
background-size: 12px;
-moz-context-properties: fill, fill-opacity;
fill: var(--toolbarbutton-icon-fill);
}
.toolbarButton:hover {
background-color: var(--toolbarbutton-hover-background);
}
.toolbarButton:hover:active {
background-color: var(--toolbarbutton-active-background);
}
.toolbarButton::-moz-focus-inner {
border: none;
}
.toolbarButton:focus {
z-index: 1;
}
.toolbarButton:-moz-focusring {
outline: 2px solid var(--border-active-shadow);
}
.toolbarCenter {
flex-shrink: 0;
/* 3 chars + (3px border + 1px padding) on both sides */
min-width: calc(8px + 3ch);
padding: 0 32px;
display: flex;
align-items: center;
justify-content: center;
}
#navigateHome::after,
#navigateEnd::after {
background-image: url("chrome://global/skin/icons/chevron.svg");
}
#navigatePrevious::after,
#navigateNext::after {
background-image: url("chrome://global/skin/icons/arrow-left.svg");
}
#navigatePrevious:-moz-locale-dir(rtl)::after,
#navigateNext:-moz-locale-dir(ltr)::after {
background-image: url("chrome://global/skin/icons/arrow-right.svg");
}
#navigateEnd:-moz-locale-dir(rtl)::after,
#navigateHome:-moz-locale-dir(ltr)::after {
transform: scaleX(-1);
}
/* progressively hide the navigation buttons when the print preview is too narrow to fit */
@media (max-width: 550px) {
#navigatePrevious,
#navigateNext,
#navigateEnd,
#navigateHome {
display: none;
}
.toolbarCenter {
border-inline-start: 1px solid ThreeDShadow;
border-radius: 6px;
}
}
|