diff options
Diffstat (limited to 'browser/themes/shared')
191 files changed, 10237 insertions, 0 deletions
diff --git a/browser/themes/shared/UITour.inc.css b/browser/themes/shared/UITour.inc.css new file mode 100644 index 000000000..bc89ade76 --- /dev/null +++ b/browser/themes/shared/UITour.inc.css @@ -0,0 +1,293 @@ +%if 0 +/* 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/. */ +%endif + +/* UI Tour */ + +#UITourHighlightContainer { + -moz-appearance: none; + -moz-window-shadow: none; + border: none; + background-color: transparent; + /* This is a buffer to compensate for the movement in the "wobble" effect, + and for the box-shadow of #UITourHighlight. */ + padding: 4px; +} + +#UITourHighlight { + background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%); + border-radius: 40px; + border: 1px solid white; + /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity + on Linux without an X compositor where opacity is either 0 or 1. */ + box-shadow: 0 0 3px 0 rgba(0,0,0,0.49); + min-height: 32px; + min-width: 32px; +} + +#UITourTooltipBody { + -moz-box-align: start; +} + +#UITourTooltipTitleContainer { + -moz-box-align: start; + margin-bottom: 10px; +} + +#UITourTooltipIcon { + width: 48px; + height: 48px; + margin-inline-end: 10px; +} + +#UITourTooltipTitle, +#UITourTooltipDescription { + max-width: 20rem; +} + +#UITourTooltipTitle { + font-size: 1.45rem; + font-weight: bold; + margin: 0; +} + +#UITourTooltipDescription { + margin-inline-start: 0; + margin-inline-end: 0; + font-size: 1.15rem; + line-height: 1.8rem; + margin-bottom: 0; /* Override global.css */ +} + +#UITourTooltipClose { + position: relative; + -moz-appearance: none; + border: none; + background-color: transparent; + min-width: 0; + margin-inline-start: 4px; + margin-top: -2px; +} + +#UITourTooltipClose > .toolbarbutton-text { + display: none; +} + +#UITourTooltipButtons { + -moz-box-pack: end; + background-color: hsla(210,4%,10%,.07); + border-top: 1px solid hsla(210,4%,10%,.14); + margin: 10px -16px -16px; + padding: 16px; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button { + margin: 0 15px; +} + +#UITourTooltipButtons > label:first-child, +#UITourTooltipButtons > button:first-child { + margin-inline-start: 0; +} + +#UITourTooltipButtons > label:last-child, +#UITourTooltipButtons > button:last-child { + margin-inline-end: 0; +} + +#UITourTooltipButtons > button[image] > .button-box > .button-icon { + width: 16px; + height: 16px; + margin-inline-end: 5px; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button .button-text { + font-size: 1.15rem; +} + +#UITourTooltipButtons > button:not(.button-link) { + -moz-appearance: none; + background-color: rgb(251,251,251); + border-radius: 3px; + border: 1px solid; + border-color: rgb(192,192,192); + color: rgb(71,71,71); + padding: 4px 30px; + transition-property: background-color, border-color; + transition-duration: 150ms; +} + +#UITourTooltipButtons > button:not(.button-link):not(:active):hover { + background-color: hsla(210,4%,10%,.15); + border-color: hsla(210,4%,10%,.15); + box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset; +} + +#UITourTooltipButtons > label, +#UITourTooltipButtons > button.button-link { + -moz-appearance: none; + background: transparent; + border: none; + box-shadow: none; + color: rgba(0,0,0,0.35); + padding-left: 10px; + padding-right: 10px; +} + +#UITourTooltipButtons > button.button-link:hover { + color: black; +} + +/* The primary button gets the same color as the customize button. */ +#UITourTooltipButtons > button.button-primary { + background-color: rgb(116,191,67); + color: white; + padding-left: 30px; + padding-right: 30px; +} + +#UITourTooltipButtons > button.button-primary:not(:active):hover { + background-color: rgb(105,173,61); +} + +/* Notification overrides for Heartbeat UI */ + +notification.heartbeat { +%ifdef XP_MACOSX + background-image: linear-gradient(-179deg, #FBFBFB 0%, #EBEBEB 100%); +%else + background-color: #F1F1F1; +%endif + border-bottom: 1px solid #C1C1C1; + height: 40px; +} + +/* In themes/osx/global/notification.css the close icon is inverted because notifications + on OSX are usually dark. Heartbeat is light, so override that behaviour. */ + +%ifdef XP_MACOSX +notification.heartbeat[type="info"] .close-icon:not(:hover) { + -moz-image-region: rect(0, 16px, 16px, 0px) !important; +} +@media (min-resolution: 2dppx) { + notification.heartbeat[type="info"] .close-icon:not(:hover) { + -moz-image-region: rect(0, 32px, 32px, 0px) !important; + } +} +%endif + +@keyframes pulse-onshow { + 0% { + opacity: 0; + transform: scale(1.0); + } + 25% { + opacity: 1; + transform: scale(1.1); + } + 50% { + transform: scale(1.0); + } + 75% { + transform: scale(1.1); + } + 100% { + transform: scale(1.0); + } +} + +@keyframes pulse-twice { + 0% { + transform: scale(1.1); + } + 50% { + transform: scale(0.8); + } + 100% { + transform: scale(1); + } +} + +.messageText.heartbeat { + color: #333333; + text-shadow: none; + margin-inline-start: 0px; + /* The !important is required to override OSX default style. */ + margin-inline-end: 12px !important; +} + +.messageImage.heartbeat { + width: 24px; + height: 24px; + margin-inline-start: 8px; + margin-inline-end: 8px; +} + +.messageImage.heartbeat.pulse-onshow { + animation-name: pulse-onshow; + animation-duration: 1.5s; + animation-iteration-count: 1; + animation-timing-function: cubic-bezier(.7,1.8,.9,1.1); +} + +.messageImage.heartbeat.pulse-twice { + animation-name: pulse-twice; + animation-duration: 1s; + animation-iteration-count: 2; + animation-timing-function: linear; +} + +/* Learn More link styles */ +.heartbeat > .text-link { + color: #0095DD; + margin-inline-start: 0px; +} + +.heartbeat > .text-link:hover { + color: #008ACB; + text-decoration: none; +} + +.heartbeat > .text-link:hover:active { + color: #006B9D; +} + +/* Heartbeat UI Rating Star Classes */ +.heartbeat > #star-rating-container { + display: -moz-box; + margin-bottom: 4px; +} + +.heartbeat > #star-rating-container > #star5 { + -moz-box-ordinal-group: 5; +} + +.heartbeat > #star-rating-container > #star4 { + -moz-box-ordinal-group: 4; +} + +.heartbeat > #star-rating-container > #star3 { + -moz-box-ordinal-group: 3; +} + +.heartbeat > #star-rating-container > #star2 { + -moz-box-ordinal-group: 2; +} + +.heartbeat > #star-rating-container > .star-x { + background: url("chrome://browser/skin/heartbeat-star-off.svg"); + cursor: pointer; + /* Overrides the margin-inline-end for all platforms defined in the .plain class */ + margin-inline-end: 4px !important; + width: 16px; + height: 16px; +} + +.heartbeat > #star-rating-container > .star-x:hover, +.heartbeat > #star-rating-container > .star-x:hover ~ .star-x { + background: url("chrome://browser/skin/heartbeat-star-lit.svg"); +} diff --git a/browser/themes/shared/aboutNetError.css b/browser/themes/shared/aboutNetError.css new file mode 100644 index 000000000..c0b76aa47 --- /dev/null +++ b/browser/themes/shared/aboutNetError.css @@ -0,0 +1,169 @@ +/* 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/. */ + +@import url("chrome://browser/skin/error-pages.css"); + +body { + background-image: linear-gradient(-45deg, #eeeeee, #eeeeee 33%, + #fbfbfb 33%, #fbfbfb 66%, + #eeeeee 66%, #eeeeee); +} + +body.certerror { + background-image: linear-gradient(-45deg, #f0d000, #f0d000 33%, + #fedc00 33%, #fedc00 66%, + #f0d000 66%, #f0d000); +} + +body.captiveportal .title { + background-image: url("wifi.svg"); +} + +body.certerror .title { + background-image: url("cert-error.svg"); +} + +#errorContainer { + display: none; +} + +/* Pressing the retry button will cause the cursor to flicker from a pointer to + * not-allowed. Override the disabled cursor behaviour since we will never show + * the button disabled as the initial state. */ +button:disabled { + cursor: pointer; +} + +#prefChangeContainer { + display: none; +} + +#learnMoreContainer { + display: none; +} + +#certErrorAndCaptivePortalButtonContainer { + display: none; +} + +body:not(.neterror) #certErrorAndCaptivePortalButtonContainer { + display: flex; +} + +body:not(.neterror) #netErrorButtonContainer { + display: none; +} + +#errorTryAgain { + margin-top: 1.2em; + min-width: 150px; +} + +#returnButton { + min-width: 250px; +} + +#advancedButton { + display: none; +} + +body.captiveportal #returnButton { + display: none; +} + +body:not(.captiveportal) #openPortalLoginPageButton { + display: none; +} + +#openPortalLoginPageButton { + margin-inline-start: 0; +} + +body:not(.neterror) #advancedButton { + display: block; +} + +#certificateErrorReporting { + display: none; +} + +.container { + position: relative; +} + +#advancedPanelContainer { + position: absolute; + padding: 24px 0; + width: 100%; +} + +.advanced-panel { + /* Hidden until the link is clicked */ + display: none; + background-color: white; + border: 1px lightgray solid; + /* Don't use top padding because the default p style has top padding, and it + * makes the overall div look uneven */ + padding: 0 12px 12px 12px; + box-shadow: 0 0 4px #ddd; + font-size: 0.9em; +} + +#overrideWeakCryptoPanel { + display: none; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-content: space-between; + align-items: flex-start; + margin-top: 1em; +} + +span#hostname { + font-weight: bold; +} + +#automaticallyReportInFuture { + cursor: pointer; + display: inline-block; + padding-inline-start: 2.3em; + text-indent: -2.3em; + line-height: 16px +} + +#errorCode:not([href]) { + color: var(--in-content-page-color); + cursor: text; + text-decoration: none; +} + +#errorCode[href] { + white-space: nowrap; +} + +#badCertTechnicalInfo { + overflow: auto; + white-space: pre-wrap; +} + +#certificateErrorReporting { + display: none; +} + +#certificateErrorDebugInformation { + display: none; + background-color: var(--in-content-box-background-hover) !important; + border-top: 1px solid var(--in-content-border-color); + position: absolute; + left: 0%; + top: 100%; + width: 65%; + padding: 1em 17.5%; +} + +#certificateErrorText { + font-family: monospace; + white-space: pre-wrap; + padding: 1em 0; +} diff --git a/browser/themes/shared/aboutProviderDirectory.css b/browser/themes/shared/aboutProviderDirectory.css new file mode 100644 index 000000000..73e570aad --- /dev/null +++ b/browser/themes/shared/aboutProviderDirectory.css @@ -0,0 +1,30 @@ +%include aboutSocialError.css + +body { + width: 310px; + margin: 1em auto; +} + +#message-box { + margin-top: 2em; + background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px; + padding-inline-start: 30px; +} + +#activation-frame { + border: none; + margin: 0; + width: 310px; + height: 200px; +} +#activation > p { + width: 100%; + text-align: center; + margin: 0; + line-height: 2em; +} +.link { + text-decoration: none; + color: -moz-nativehyperlinktext; + cursor: pointer; +} diff --git a/browser/themes/shared/aboutSessionRestore.css b/browser/themes/shared/aboutSessionRestore.css new file mode 100644 index 000000000..52488af40 --- /dev/null +++ b/browser/themes/shared/aboutSessionRestore.css @@ -0,0 +1,38 @@ +%if 0 +/* 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/. */ +%endif + +.title { + background-image: url("chrome://browser/skin/session-restore.svg"); +} + +treechildren::-moz-tree-image(icon), +treechildren::-moz-tree-image(noicon) { + padding-right: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(noicon) { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} +treechildren::-moz-tree-image(container, noicon) { + list-style-image: url("chrome://browser/skin/aboutSessionRestore-window-icon.png"); +} + +treechildren::-moz-tree-image(checked) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); +} +treechildren::-moz-tree-image(checked, selected) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted"); +} + +treechildren::-moz-tree-image(partial) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial"); +} +treechildren::-moz-tree-image(partial, selected) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial-inverted"); +} diff --git a/browser/themes/shared/aboutSocialError.css b/browser/themes/shared/aboutSocialError.css new file mode 100644 index 000000000..f5a922ff4 --- /dev/null +++ b/browser/themes/shared/aboutSocialError.css @@ -0,0 +1,40 @@ +@import url("chrome://global/skin/in-content/common.css"); + +#errorPageContainer { + min-width: 50%; +} + +#errorTitle { + background: url("chrome://global/skin/icons/info.svg") left 0 no-repeat; + background-size: 2em; + padding-inline-start: 3em; +} + +#button-box { + text-align: center; + width: 75%; + margin: 0 auto; +} + +button { + width: auto !important; + min-width: 150px; +} + +@media all and (max-width: 300px) { + body { + padding: 0px 10px; + } + #errorPageContainer { + min-width: 100%; + } + #errorTitle { + background: none; + padding-inline-start: 0 !important; + } + button { + width: auto !important; + min-width: auto !important; + } +} + diff --git a/browser/themes/shared/aboutTabCrashed.css b/browser/themes/shared/aboutTabCrashed.css new file mode 100644 index 000000000..264fb4275 --- /dev/null +++ b/browser/themes/shared/aboutTabCrashed.css @@ -0,0 +1,101 @@ +/* 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/. */ + +body { + font-size: 1.25rem; +} + +.title { + background-image: url("chrome://browser/skin/tab-crashed.svg"); +} + +.title > h1, +.offers { + margin-left: 14px; +} + +.title > h1 { + /** + * Add commentary? + */ + padding-right: 14px; +} + +.container { + width: 45%; +} + +#reportSent { + font-weight: bold; +} + +#reportBox { + background-color: var(--in-content-box-background-hover); + margin: 24px 0; + padding: 14px; + border: 1px solid var(--in-content-box-border-color); + border-radius: 2px; +} + +#reportBox > h2:first-child { + margin-top: 0; +} + +#crash-reporter-title { + font-weight: bold; + margin: 0 0 14px 0; +} + +input[type="text"], +textarea { + width: 100%; + box-sizing: border-box; + resize: none; +} + +input[type="text"], +input[type="checkbox"] { + -moz-margin-start: 0px; +} + +#options { + list-style: none; + margin-inline-start: 0; +} + +#options > li, +#email { + margin-top: 14px; +} + +.checkbox-with-label { + display: flex; +} + +.checkbox-with-label > label { + margin-top: auto; + margin-bottom: auto; +} + +/** + * Hack alert: the #autoSubmit checkbox has a long label, which means + * it often wraps, at least in en-US. Bug 418833 and bug 1317795 allows + * us to fix this properly, but bug 418833 didn't uplift in time for this + * release. We use some hackery here to make sure that this label wraps + * properly, and doesn't end up underneath the checkbox pseudoelement. + * We do this by setting a negative margin on the pseudoelement, and then + * a positive equivalent margin on the label itself. + * + * The magic number of 35px is derived from the total width of the checkbox. + * The checkbox width is explicitly set at 23px. This, plus the 1px border on either + * side gives us 25px. Then there's the 10px margin-inline-end, which gives us 35px. + */ +#autoSubmit + label:before { + margin-inline-start: -35px; +} + +#autoSubmit + label { + margin-inline-start: 35px; + line-height: 1.75em; +}
\ No newline at end of file diff --git a/browser/themes/shared/aboutWelcomeBack.css b/browser/themes/shared/aboutWelcomeBack.css new file mode 100644 index 000000000..815ad462e --- /dev/null +++ b/browser/themes/shared/aboutWelcomeBack.css @@ -0,0 +1,47 @@ +/* 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/. */ + +.title { + background-image: url("chrome://browser/skin/welcome-back.svg"); +} + +.radioRestoreContainer:not(:last-child) { + margin-bottom: 0.2em; +} + +/* tablist starts out hidden, but JS may make it visible in response to + clicks on the radio buttons by setting an "available" attribute. +*/ +.tree-container:not([available]) { + display: none; +} + +treechildren::-moz-tree-image(icon), +treechildren::-moz-tree-image(noicon) { + padding-right: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(noicon) { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} +treechildren::-moz-tree-image(container, noicon) { + list-style-image: url("chrome://browser/skin/aboutSessionRestore-window-icon.png"); +} + +treechildren::-moz-tree-image(checked) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); +} +treechildren::-moz-tree-image(checked, selected) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted"); +} + +treechildren::-moz-tree-image(partial) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial"); +} +treechildren::-moz-tree-image(partial, selected) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial-inverted"); +} diff --git a/browser/themes/shared/addons/addon-install-anchor.svg b/browser/themes/shared/addons/addon-install-anchor.svg new file mode 100644 index 000000000..1ee69ca0d --- /dev/null +++ b/browser/themes/shared/addons/addon-install-anchor.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + class="fieldtext" + width="16" height="16" viewBox="0 0 16 16"> +#include ../icon-colors.inc.svg + <defs> + <path id="shape-notifications-addons" d="M10,15c0.5,0,1-0.4,1-1v-3c0,0,0-0.8,0.8-0.8c0.6,0,0.6,0.8,1.8,0.8c0.6,0,1.5-0.2,1.5-2c0-1.8-0.9-2-1.5-2 c-1.1,0-1.1,0.7-1.8,0.7C11,7.7,11,7,11,7V6c0-0.6-0.5-1-1-1H8c0,0-0.8,0-0.8-0.8C7.2,3.6,8,3.6,8,2.5C8,1.9,7.8,1,6,1 C4.2,1,4,1.9,4,2.5c0,1.1,0.8,1.1,0.8,1.8C4.8,5,4,5,4,5H2C1.5,5,1,5.4,1,6l0,1.5c0,0-0.1,1,1.1,1c0.8,0,0.9-1,1.9-1 C4.5,7.4,5,8,5,9c0,1-0.5,1.6-1,1.6c-1,0-1.1-1.1-1.9-1.1C0.9,9.5,1,10.8,1,10.8V14c0,0.6,0.5,1,1,1l2.6,0c0,0,1.1,0,1.1-1 c0-0.8-1-0.1-1-1.1c0-0.5,0.7-1.2,1.8-1.2s1.8,0.7,1.8,1.2c0,1-1.1,0.3-1.1,1.1c0,1,1.2,1,1.2,1H10z"/> + </defs> + <use xlink:href="#shape-notifications-addons"/> +</svg> diff --git a/browser/themes/shared/addons/addon-install-blocked.svg b/browser/themes/shared/addons/addon-install-blocked.svg new file mode 100644 index 000000000..caaaa466b --- /dev/null +++ b/browser/themes/shared/addons/addon-install-blocked.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="64" height="64" viewBox="0 0 64 64"> + <defs> + <style> + .style-puzzle-piece { + fill: url('#gradient-linear-puzzle-piece'); + } + .style-badge-shadow { + fill: #0d131a; + fill-opacity: .15; + } + .style-badge-background { + fill: #fff; + } + .style-badge-inside { + fill: #e62117; + } + .style-badge-icon { + fill: #fff; + } + </style> + <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#999999" stop-opacity="1"/> + <stop offset="100%" stop-color="#8c8c8c" stop-opacity="1"/> + </linearGradient> + </defs> + <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/> + <svg width="32" height="32" x="32" y="0"> + <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" /> + <circle class="style-badge-background" r="15" cy="15" cx="16" /> + <circle class="style-badge-inside" r="12" cy="15" cx="16" /> + <rect class="style-badge-icon" x="9" y="13" width="14" height="4" rx="1" ry="1" /> + </svg> +</svg> diff --git a/browser/themes/shared/addons/addon-install-confirm.svg b/browser/themes/shared/addons/addon-install-confirm.svg new file mode 100644 index 000000000..a16455253 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-confirm.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="64" height="64" viewBox="0 0 64 64"> + <defs> + <style> + .style-puzzle-piece { + fill: url('#gradient-linear-puzzle-piece'); + } + </style> + <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/> + <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/> + </linearGradient> + </defs> + <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/> +</svg> diff --git a/browser/themes/shared/addons/addon-install-downloading.svg b/browser/themes/shared/addons/addon-install-downloading.svg new file mode 100644 index 000000000..9dcc8069c --- /dev/null +++ b/browser/themes/shared/addons/addon-install-downloading.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="64" height="64" viewBox="0 0 64 64"> + <defs> + <style> + .style-puzzle-piece { + fill: url('#gradient-linear-puzzle-piece'); + } + .style-badge-shadow { + fill: #0d131a; + fill-opacity: .15; + } + .style-badge-background { + fill: #fff; + } + .style-badge-inside { + fill: #55cc3d; + } + .style-badge-icon { + fill: #fff; + } + </style> + <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/> + <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/> + </linearGradient> + </defs> + <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/> + <svg width="32" height="32" x="32" y="0"> + <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" /> + <circle class="style-badge-background" r="15" cy="15" cx="16" /> + <circle class="style-badge-inside" r="12" cy="15" cx="16" /> + <path class="style-badge-icon" d="M22.7,16.1l-5.6,5.5C16.8,21.9,16.4,22,16,22c-0.4,0-0.7-0.1-1-0.4 l-5.6-5.5C8.8,15.5,8.9,15,9.8,15l3.2,0V9c0-0.6,0.5-1,1.1-1h4c0.6,0,1,0.4,1,1v6h3.2C23.1,15,23.3,15.5,22.7,16.1z"/> + </svg> +</svg> diff --git a/browser/themes/shared/addons/addon-install-error.svg b/browser/themes/shared/addons/addon-install-error.svg new file mode 100644 index 000000000..e25950f25 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-error.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="64" height="64" viewBox="0 0 64 64"> + <defs> + <style> + .style-puzzle-piece { + fill: url('#gradient-linear-puzzle-piece'); + } + .style-badge-shadow { + fill: #0d131a; + fill-opacity: .15; + } + .style-badge-background { + fill: #fff; + } + .style-badge-inside { + fill: #e62117; + } + .style-badge-icon { + fill: #fff; + } + </style> + <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#999999" stop-opacity="1"/> + <stop offset="100%" stop-color="#8c8c8c" stop-opacity="1"/> + </linearGradient> + </defs> + <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/> + <svg width="32" height="32" x="32" y="0"> + <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" /> + <circle class="style-badge-background" r="15" cy="15" cx="16" /> + <circle class="style-badge-inside" r="12" cy="15" cx="16" /> + <path class="style-badge-icon" d="M14.9,16.2c0,0,0.1,0.8,1.1,0.8c1,0,1.1-0.8,1.1-0.8 s0.7-3.5,0.8-5.2C18,9.3,18.4,7,16,7s-2,2.4-1.9,4C14.2,12.7,14.9,16.2,14.9,16.2z M16,19c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2 c1.1,0,2-0.9,2-2C18,19.9,17.1,19,16,19z" /> + </svg> +</svg> diff --git a/browser/themes/shared/addons/addon-install-installed.svg b/browser/themes/shared/addons/addon-install-installed.svg new file mode 100644 index 000000000..3b352c21d --- /dev/null +++ b/browser/themes/shared/addons/addon-install-installed.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="64" height="64" viewBox="0 0 64 64"> + <defs> + <style> + .style-puzzle-piece { + fill: url('#gradient-linear-puzzle-piece'); + } + .style-badge-shadow { + fill: #0d131a; + fill-opacity: .15; + } + .style-badge-background { + fill: #fff; + } + .style-badge-inside { + fill: #55cc3d; + } + .style-badge-icon { + fill: #fff; + } + </style> + <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/> + <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/> + </linearGradient> + </defs> + <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/> + <svg width="32" height="32" x="32" y="0"> + <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" /> + <circle class="style-badge-background" r="15" cy="15" cx="16" /> + <circle class="style-badge-inside" r="12" cy="15" cx="16" /> + <path class="style-badge-icon" d="M22.8,12.3c0,0-6.7,8.1-6.9,8.3c-0.4,0.5-1.5,0.3-1.7,0 c-0.2-0.3-5-5.8-5-5.8c-0.3-0.3-0.3-0.7,0-1l1-1c0.4-0.4,0.9,0,1.2,0.3c0.3,0.4,3.4,3.8,3.4,3.8s5.2-6.1,5.4-6.4 c0.5-0.8,1.6-0.8,1.9-0.5l0.7,0.6C23.1,11.1,23.1,12,22.8,12.3z" /> + </svg> +</svg> diff --git a/browser/themes/shared/addons/addon-install-restart.svg b/browser/themes/shared/addons/addon-install-restart.svg new file mode 100644 index 000000000..e3269c3b1 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-restart.svg @@ -0,0 +1,46 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="64" height="64" viewBox="0 0 64 64"> + <defs> + <style> + .style-puzzle-piece { + fill: url('#gradient-linear-puzzle-piece'); + fill-opacity: .25; + } + .style-puzzle-piece-outline { + fill: none; + stroke-width: 2; + stroke: #52b33e; + stroke-dasharray: 4 2; + } + .style-badge-shadow { + fill: #0d131a; + fill-opacity: .15; + } + .style-badge-background { + fill: #fff; + } + .style-badge-inside { + fill: #00a1e5; + } + .style-badge-icon { + fill: #fff; + } + </style> + <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/> + <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/> + </linearGradient> + </defs> + <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/> + <path class="style-puzzle-piece-outline" d="M23.6,3c6.3,0,7.3,3,7.3,4.9c0,2.2-1,3.1-2,4c-0.8,0.8-1.8,1.6-1.8,3.1c0,2.6,2.7,3.7,4.3,4l0.1,0h0.1H42 c1.7,0,3,1.4,3,3v5.8v0l0,0c0.2,1.7,1.2,4.7,3.8,4.7c1.5,0,2.3-0.9,3-1.8c0.8-1,1.6-1.9,3.7-1.9c3.5,0,5.2,2.2,5.2,6.9 c0,6.2-3.2,7.2-5.2,7.2c-2.1,0-2.9-1-3.7-2c-0.7-0.9-1.5-1.9-3-1.9c-2.6,0-3.6,2.9-3.8,4.6l0,0l0,0L45,58c0,1.6-1.3,3-3,3h-5.2l0,0 l0,0c0,0-0.1,0-0.3,0c-4.5,0-4.9-2.4-4.9-3.4c0-1,0.5-1.6,1.5-2.6c1.1-1.1,2.4-2.5,2.4-5.1c0-3.3-3.9-5.5-7.6-5.5 c-4.6,0-7.4,2.8-7.4,5.5c0,2.6,1.4,4,2.5,5.1c1,1,1.5,1.6,1.5,2.6c0,3.1-3.4,3.4-4.9,3.4c-0.2,0-0.3,0-0.3,0l0,0h0H6 c-1.6,0-3-1.3-3-3l0-12.2l0,0l0,0c0,0-0.1-2.5,1.1-3.9c0.6-0.6,1.3-0.9,2.3-0.9c0.9,0,1.5,0.5,2.3,1.5c1,1.2,2.3,2.6,4.9,2.6 c3.3,0,5-3.6,5-7.3c0-3.4-1.6-7-5-7c-2.6,0-3.9,1.4-4.9,2.6c-0.9,1-1.4,1.5-2.3,1.5c-1,0-1.7-0.3-2.3-0.9C2.8,32.6,3,29.9,3,29.9 l0,0l0,0L3,22c0-1.7,1.3-3,3-3h9.7h0.1l0.1,0c1.6-0.3,4.3-1.4,4.3-4c0-1.4-0.9-2.3-1.6-3.1c-0.9-1-1.8-1.9-1.8-4.1 C16.6,4.6,18.9,3,23.6,3"/> + <svg width="32" height="32" x="32" y="0"> + <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" /> + <circle class="style-badge-background" r="15" cy="15" cx="16" /> + <circle class="style-badge-inside" r="12" cy="15" cx="16" /> + <path class="style-badge-icon" d="M21,15h-6l2.4-2.4c-0.6-0.4-1.2-0.6-1.9-0.6c-2,0-3.5,1.6-3.5,3.5 c0,2,1.6,3.5,3.5,3.5c1,0,2-0.5,2.6-1.2l1.7,1c-1,1.3-2.6,2.1-4.3,2.1c-3,0-5.5-2.5-5.5-5.5c0-3,2.5-5.5,5.5-5.5 c1.3,0,2.4,0.4,3.3,1.2L21,9V15z"/> + </svg> +</svg> diff --git a/browser/themes/shared/addons/addon-install-warning.svg b/browser/themes/shared/addons/addon-install-warning.svg new file mode 100644 index 000000000..bac1903c6 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-warning.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="64" height="64" viewBox="0 0 64 64"> + <defs> + <style> + .style-puzzle-piece { + fill: url('#gradient-linear-puzzle-piece'); + } + .style-badge-shadow { + fill: #0d131a; + fill-opacity: .15; + } + .style-badge-background { + fill: #fff; + } + .style-badge-inside { + fill: #ffcd02; + } + .style-badge-icon { + fill: #fff; + } + </style> + <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#999999" stop-opacity="1"/> + <stop offset="100%" stop-color="#8c8c8c" stop-opacity="1"/> + </linearGradient> + </defs> + <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/> + <svg width="32" height="32" x="32" y="0"> + <path class="style-badge-shadow" d="M29.5,25.8L18.7,4c-0.6-1.2-1.6-2-2.7-2c-1.1,0-2.1,0.7-2.7,2L2.5,25.8 c-0.6,1.2-0.6,2.5-0.1,3.6C2.9,30.4,4,31,5.2,31h21.6c1.2,0,2.3-0.6,2.8-1.6C30.2,28.4,30.1,27.1,29.5,25.8z" /> + <path class="style-badge-background" d="M16,0c-1.7,0-3.2,1-4.1,2.7L1.7,21.9c-0.9,1.7-0.9,3.4,0,4.8C2.5,28.2,4.1,29,5.9,29H26 c1.9,0,3.4-0.8,4.3-2.2c0.9-1.4,0.8-3.2,0-4.8L20.1,2.7C19.2,1,17.7,0,16,0L16,0z" /> + <path class="style-badge-inside" d="M5.9,26c-1.7,0-2.4-1.2-1.6-2.7L14.6,4.1c0.8-1.5,2.1-1.5,2.8,0l10.3,19.3 c0.8,1.5,0.1,2.7-1.6,2.7H5.9z" /> + <path class="style-badge-icon" d="M14.9,17.6c0,0,0.1,0.7,1.1,0.7c1,0,1.1-0.7,1.1-0.7 s0.7-2.9,0.8-4.2c0.1-1.3,0.5-3.2-1.9-3.2c-2.4,0-2,1.9-1.9,3.2C14.2,14.8,14.9,17.6,14.9,17.6z M16,20c-1.1,0-2,0.9-2,2 c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2C18,20.9,17.1,20,16,20z" /> + </svg> +</svg> diff --git a/browser/themes/shared/autocomplete.inc.css b/browser/themes/shared/autocomplete.inc.css new file mode 100644 index 000000000..d9923a7e7 --- /dev/null +++ b/browser/themes/shared/autocomplete.inc.css @@ -0,0 +1,65 @@ +%if 0 +/* 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/. */ +%endif + +#PopupAutoComplete > richlistbox > richlistitem { + height: 20px; + min-height: 20px; + border: 0; + border-radius: 0; + padding: 0px 1px 0px 1px; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon { + margin-inline-start: 4px; + margin-inline-end: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-title { + font: icon; + margin-inline-start: 4px; +} + +#PopupAutoComplete > richlistbox { + padding: 0; +} + + +/* Login form autocompletion */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { + display: initial; + list-style-image: url(chrome://browser/skin/notification-icons.svg#login); +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] { + list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted); +} + + +/* Insecure field warning */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] { + background-color: var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--panel-separator-color); + padding-bottom: 4px; + padding-top: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] { + background-color: var(--arrowpanel-dimmed-further); + color: -moz-DialogText; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title { + color: GrayText; + font-size: 1em; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title { + color: inherit; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); +} diff --git a/browser/themes/shared/blockedSite.css b/browser/themes/shared/blockedSite.css new file mode 100644 index 000000000..49846ee89 --- /dev/null +++ b/browser/themes/shared/blockedSite.css @@ -0,0 +1,65 @@ +/* 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/. */ + +@import url("chrome://browser/skin/error-pages.css"); + +body { + background-image: linear-gradient(-45deg, #9b2e2e, #9b2e2e 33%, + #a83232 33%, #a83232 66%, + #9b2e2e 66%, #9b2e2e); + background-color: #b14646; + color: white; +} + +.title { + background-image: url("chrome://global/skin/icons/blocked.svg"); +} + +.title-text { + color: white; +} + +.button-container button:not(.primary) { + background-color: transparent; + color: white; + border: 1px solid #9b2e2e; + margin-inline-end: 0; +} + +.button-container button:not(.primary):hover { + background-color: #a83232; +} + +.button-container button:not(.primary):active { + background-color: #9b2e2e; +} + +.button-container button { + margin-top: 1.2em; +} + +/* Style warning button to look like a small text link in the + bottom right. This is preferable to just using a text link + since there is already a mechanism in browser.js for trapping + oncommand events from unprivileged chrome pages (BrowserOnCommand).*/ +#ignoreWarningButton { + -moz-appearance: none; + background: transparent; + border: none; + color: white; + text-decoration: underline; + margin: 4px 0 0 0; + padding: 0; + font-size: smaller; + min-width: 0; +} + +#ignoreWarningButton:hover { + cursor: pointer; +} + +#ignoreWarning { + margin-top: 1.2em; + text-align: end; +} diff --git a/browser/themes/shared/browser.inc b/browser/themes/shared/browser.inc new file mode 100644 index 000000000..c57b59237 --- /dev/null +++ b/browser/themes/shared/browser.inc @@ -0,0 +1,13 @@ +%filter substitution + +% Note that zoom-reset-button is a bit different since it doesn't use an image and thus has the image with display: none. +%define nestedButtons #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button +%define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, @nestedButtons@, #e10s-button, #panic-button, #webide-button, #containers-panelmenu + +%ifdef XP_MACOSX +% Prior to 10.7 there wasn't a native fullscreen button so we use #restore-button to exit fullscreen +% and want it to behave like other toolbar buttons. +%define primaryToolbarButtons @primaryToolbarButtons@, #restore-button +%endif + +%define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) diff --git a/browser/themes/shared/content-contextmenu.svg b/browser/themes/shared/content-contextmenu.svg new file mode 100644 index 000000000..6b53c13d9 --- /dev/null +++ b/browser/themes/shared/content-contextmenu.svg @@ -0,0 +1,18 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <style> + path:not(:target), + polygon:not(:target) { + display: none; + } + </style> + <path id="back" fill-rule="evenodd" d="M1.192,8.893L2.21,9.964c0.064,0.065,0.136,0.117,0.214,0.159 l5.199,5.301c0.607,0.63,1.465,0.764,1.915,0.297l1.02-1.082c0.449-0.467,0.32-1.357-0.288-1.99l-2.116-2.158h5.705 c0.671,0,1.215-0.544,1.215-1.215v-2.43c0-0.671-0.544-1.215-1.215-1.215H8.094l2.271-2.309c0.609-0.626,0.737-1.512,0.288-1.974 L9.635,0.278C9.184-0.188,8.327-0.055,7.718,0.575L2.479,5.901C2.38,5.946,2.289,6.008,2.21,6.089L1.192,7.171 c-0.21,0.219-0.293,0.53-0.26,0.864C0.899,8.367,0.981,8.676,1.192,8.893z"/> + <path id="forward" fill-rule="evenodd" d="M14.808,7.107L13.79,6.036c-0.064-0.065-0.136-0.117-0.214-0.159 L8.377,0.576C7.77-0.054,6.912-0.189,6.461,0.278L5.441,1.36c-0.449,0.467-0.32,1.357,0.288,1.99l2.116,2.158H2.14 c-0.671,0-1.215,0.544-1.215,1.215v2.43c0,0.671,0.544,1.215,1.215,1.215h5.765l-2.271,2.309c-0.609,0.626-0.737,1.512-0.288,1.974 l1.019,1.072c0.451,0.465,1.308,0.332,1.917-0.297l5.238-5.326c0.1-0.045,0.191-0.107,0.269-0.188l1.019-1.082 c0.21-0.219,0.293-0.53,0.26-0.864C15.101,7.633,15.019,7.324,14.808,7.107z"/> + <path id="reload" fill-rule="evenodd" d="M15.429,8h-8l3.207-3.207C9.889,4.265,8.986,3.947,8,3.947 c-2.554,0-4.625,2.071-4.625,4.625S5.446,13.196,8,13.196c1.638,0,3.069-0.857,3.891-2.141l2.576,1.104 C13.199,14.439,10.794,16,8,16c-4.103,0-7.429-3.326-7.429-7.429S3.897,1.143,8,1.143c1.762,0,3.366,0.624,4.631,1.654L15.429,0V8z"/> + <polygon id="stop" points="16,2.748 13.338,0.079 8.038,5.391 2.661,0 0,2.669 5.377,8.059 0.157,13.292 2.819,15.961 8.039,10.728 13.298,16 15.959,13.331 10.701,8.06"/> + <path id="bookmark" d="M8.008,3.632l0.986,2.012l0.452,0.922l1.014,0.169l2.326,0.389l-1.719,1.799l-0.676,0.708l0.145,0.967 L10.896,13l-1.959-1.039l-0.937-0.497l-0.937,0.497l-1.957,1.038L5.468,10.6l0.146-0.968L4.937,8.924L3.219,7.126l2.351-0.39 l1.023-0.17l0.45-0.934L8.008,3.632 M8,0C7.72,0,7.44,0.217,7.228,0.65L5.242,4.766L0.907,5.485c-0.958,0.159-1.195,0.861-0.53,1.56 l3.113,3.258l-0.69,4.583c-0.105,0.689,0.172,1.092,0.658,1.092c0.185,0,0.399-0.058,0.635-0.181l3.906-2.072l3.906,2.072 c0.236,0.123,0.45,0.181,0.635,0.181c0.486,0,0.762-0.403,0.659-1.092l-0.687-4.583l3.109-3.255c0.666-0.702,0.428-1.404-0.53-1.564 l-4.303-0.719L8.772,0.65C8.56,0.217,8.28,0,8,0L8,0z"/> + <path id="bookmarked" d="M8,0C7.719,0,7.438,0.217,7.225,0.651L5.233,4.773l-4.35,0.72c-0.961,0.159-1.199,0.862-0.531,1.562 l3.124,3.262l-0.692,4.589C2.679,15.596,2.957,16,3.444,16c0.185,0,0.401-0.058,0.637-0.181L8,13.744l3.919,2.075 C12.156,15.942,12.372,16,12.557,16c0.487,0,0.764-0.404,0.661-1.094l-0.69-4.589l3.12-3.259c0.668-0.703,0.43-1.406-0.532-1.566 l-4.317-0.72L8.775,0.651C8.562,0.217,8.281,0,8,0L8,0z"/> +</svg> diff --git a/browser/themes/shared/contextmenu.inc.css b/browser/themes/shared/contextmenu.inc.css new file mode 100644 index 000000000..2ec60b55b --- /dev/null +++ b/browser/themes/shared/contextmenu.inc.css @@ -0,0 +1,51 @@ +#context-navigation > .menuitem-iconic { + -moz-box-flex: 1; + -moz-box-pack: center; + -moz-box-align: center; +} + +#context-navigation > .menuitem-iconic > .menu-iconic-left { + -moz-appearance: none; +} + +#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; + margin: 7px; + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; +} + +#context-back { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); +} + +#context-forward { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); +} + +#context-reload { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); +} + +#context-stop { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); +} + +#context-bookmarkpage { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); +} + +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); +} + +#context-back:-moz-locale-dir(rtl), +#context-forward:-moz-locale-dir(rtl), +#context-reload:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#context-media-eme-learnmore { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); +} diff --git a/browser/themes/shared/controlcenter/arrow-subview-back.svg b/browser/themes/shared/controlcenter/arrow-subview-back.svg new file mode 100644 index 000000000..9f681207c --- /dev/null +++ b/browser/themes/shared/controlcenter/arrow-subview-back.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> +#include ../icon-colors.inc.svg + <polygon class="highlighttext" points="12,3.5 10.5,2 4.625,8 10.5,14 12,12.5 7.625,8"/> +</svg> diff --git a/browser/themes/shared/controlcenter/arrow-subview.svg b/browser/themes/shared/controlcenter/arrow-subview.svg new file mode 100644 index 000000000..2802fa055 --- /dev/null +++ b/browser/themes/shared/controlcenter/arrow-subview.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> +#include ../icon-colors.inc.svg + <polygon class="fieldtext" points="5,3.5 6.5,2 12.375,8 6.5,14 5,12.5 9.375,8"/> +</svg> diff --git a/browser/themes/shared/controlcenter/conn-not-secure.svg b/browser/themes/shared/controlcenter/conn-not-secure.svg new file mode 100644 index 000000000..ef2df7c69 --- /dev/null +++ b/browser/themes/shared/controlcenter/conn-not-secure.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> +#include ../icon-colors.inc.svg + <defs> + <mask id="mask-globe"> + <circle fill="#fff" cx="12" cy="12" r="11"/> + <path transform="translate(1 1)" fill="#000" d="M8.41648275,2.92371996 C8.38948313,2.92220329 8.35948356,2.92371996 8.33398393,2.93433671 C8.32798401,2.93737006 8.32048413,2.94343677 8.31448421,2.95102016 C8.32348407,2.95102016 8.33398393,2.95102016 8.34148382,2.94950348 C8.36848344,2.94343677 8.38948313,2.92523664 8.41648275,2.92371996 L8.41648275,2.92371996 L8.41648275,2.92371996 Z M8.45098225,4.22654587 C8.48548176,4.18256223 8.40298294,4.14616197 8.35648361,4.14919533 C8.36848344,4.09611162 8.43598246,4.06881142 8.41798272,4.00207762 C8.40148297,3.93231045 8.31748416,3.94596055 8.27248482,3.98387749 C8.23198539,4.01876107 8.21098569,4.07942816 8.17648618,4.12037845 C8.15698646,4.14312862 8.12098698,4.150712 8.10748718,4.1780122 C8.09548735,4.20379571 8.11048713,4.24777936 8.10898715,4.27659623 C8.16448635,4.28417962 8.22298552,4.26749616 8.26348494,4.22806255 L8.29048456,4.21592913 C8.28448464,4.22047916 8.28148468,4.23109591 8.27848473,4.23716262 C8.30548433,4.27052952 8.42548262,4.26142946 8.45098225,4.22654587 L8.45098225,4.22654587 L8.45098225,4.22654587 Z M8.50798144,2.36558267 C8.50498148,2.44748325 8.58448033,2.45658332 8.64297949,2.48843354 C8.62497975,2.53545054 8.56048068,2.53393387 8.53048111,2.5718508 C8.49448162,2.6188678 8.56048068,2.65981809 8.59348021,2.68105158 C8.65797929,2.72048519 8.6219798,2.76598551 8.60997998,2.82210258 C8.59198024,2.9009698 8.7614778,2.87973632 8.79897727,2.87821964 C8.86347635,2.87518629 8.96547488,2.88580303 9.02697399,2.85546948 C9.09297304,2.81906922 9.12747255,2.73868532 9.19647157,2.6992517 C9.25347076,2.6658848 9.33446958,2.64768467 9.39746869,2.67043483 C9.46346774,2.693185 9.45596785,2.77811893 9.50996707,2.81451919 C9.57296618,2.85850283 9.64196518,2.87215293 9.6959644,2.8069358 C9.73046391,2.76598551 9.80696281,2.71441848 9.80996278,2.67043483 C9.81596269,2.59308428 9.83846236,2.53241719 9.92396114,2.51573374 C9.99296016,2.50208364 9.97796036,2.56881745 10.0259597,2.58095087 C10.1324581,2.60825106 10.1834574,2.28368209 10.2989558,2.37923277 C10.3259554,2.40198293 10.3334553,2.48995022 10.3799546,2.48236683 C10.4279539,2.47478345 10.4294539,2.40501628 10.4804532,2.40349961 C10.4969529,2.45051661 10.3919544,2.50815035 10.3784546,2.55971738 C10.4429537,2.50663367 10.4744532,2.51421706 10.5479522,2.50663367 C10.5674519,2.55668403 10.423454,2.63858461 10.3859545,2.64616799 C10.3334553,2.65981809 10.3019557,2.62948454 10.2614563,2.65830141 C10.2299568,2.6795349 10.1864574,2.67801822 10.1489579,2.68105158 C10.0964587,2.68711829 9.99746008,2.75688545 9.99896007,2.81451919 C9.99896007,2.83726935 10.0169598,2.88883638 9.99746008,2.90703651 C9.97946034,2.92675332 9.93596097,2.90855319 9.93146103,2.88883638 C9.88646168,2.95557019 9.82796252,2.83878603 9.79046305,2.93282003 C9.85046218,2.9479868 9.9059614,3.00562055 9.97346042,3.022304 C10.0394595,3.03898745 10.1054585,3.0556709 10.1699576,3.07387103 C10.279456,3.10723793 10.4429537,2.975287 10.5269525,2.91158654 C10.6064514,2.85243612 10.7069499,2.71896851 10.7279496,2.62341783 C10.7519493,2.51876709 10.8659476,2.39894957 10.841948,2.29581551 C10.8209483,2.19874815 10.8059485,2.15324783 10.9154469,2.11836425 C10.9619463,2.10319748 11.0744446,2.07893064 11.0909444,2.02584693 C11.1149441,1.9469797 10.8674476,1.96821318 10.8299482,1.95001306 C10.7054499,1.89389599 10.6514507,1.83171222 10.5074528,1.88782928 C10.4324539,1.91664615 10.3589549,1.94091299 10.280956,1.96214647 C10.2404566,1.97276322 10.1999572,1.97579657 10.1774575,2.01068015 C10.1684576,2.02433025 10.1564578,2.03494699 10.141458,2.04253038 C10.0769589,2.06831389 10.1564578,1.94546302 10.1639577,1.93787964 C10.1849574,1.9136128 10.2194569,1.8392956 10.1519579,1.85597906 C10.0529593,1.87872922 9.98096031,2.03039696 9.87446184,2.03798035 C9.79346301,2.04404706 9.81896264,1.97276322 9.83996235,1.93181293 C9.88046177,1.85749573 9.76496342,1.84839567 9.71396414,1.84839567 C9.64196518,1.84839567 9.58796595,1.88934596 9.51896694,1.89692935 C9.45446788,1.90299606 9.37946895,1.91512947 9.31496987,1.9136128 C9.18597171,1.90906277 9.10047295,1.98489664 8.97297477,1.94242967 C8.8379767,1.89844602 8.69247879,2.01068015 8.56198067,2.02584693 C8.51848128,2.03191364 8.45548219,2.02281357 8.43748245,2.0743806 C8.42248266,2.11684757 8.43748245,2.1820647 8.47048197,2.21391493 L8.48098182,2.20481486 C8.45248223,2.23363173 8.44948228,2.27458203 8.40748288,2.2897488 C8.36698346,2.3033989 8.32648404,2.35648261 8.30548433,2.39288286 C8.28898458,2.42018306 8.24248525,2.53393387 8.32348407,2.47478345 C8.38198324,2.4307998 8.41498277,2.34889922 8.50798144,2.36558267 L8.50798144,2.36558267 L8.50798144,2.36558267 Z M3.65405101,9.54705029 C3.516053,9.44694958 3.20255749,9.42268274 3.24155692,9.18911442 C3.26555658,9.04654674 3.41255447,8.93582929 3.53105277,8.86606213 C3.68705055,8.77506148 3.86104805,8.77202812 4.03654553,8.7871949 C4.07854493,8.79174493 4.15804379,8.78416154 4.18054347,8.81752845 C4.19254329,8.8342119 4.21654295,8.84482864 4.23604266,8.85089535 C4.282542,8.86454545 4.33054131,8.86606213 4.37854064,8.87516219 C4.4505396,8.88881229 4.50153886,8.95099606 4.57353783,8.89942903 C4.65603664,8.84179529 4.66953646,8.82966187 4.77003502,8.84179529 C4.86003373,8.85241203 4.91403295,8.78416154 4.98903188,8.79022825 C5.01303154,8.79174493 5.03403123,8.79629496 5.05203097,8.80387835 C5.05953087,8.77809483 5.07003071,8.75534467 5.08653048,8.75079464 C5.12402995,8.7401779 5.20652875,8.83117854 5.2455282,8.83876193 C5.34452678,8.85999542 5.33852687,8.79022825 5.34602676,8.71894441 C5.39552604,8.70984435 5.4195257,8.77809483 5.46452506,8.73562787 C5.46302509,8.74927796 5.47202495,8.77051145 5.47202495,8.78416154 C5.48102483,8.79022825 5.49152468,8.79022825 5.50052454,8.78264487 C5.50502448,8.77506148 5.50652446,8.76747809 5.50352451,8.75837803 C5.52752416,8.76596142 5.53952399,8.74927796 5.54252394,8.72046109 C5.56052368,8.72197777 5.58902327,8.71136103 5.60702302,8.71439438 C5.62052282,8.66282735 5.6505224,8.59457687 5.61302293,8.54755987 C5.62202281,8.54604319 5.63252265,8.54300983 5.6430225,8.54149316 C5.6430225,8.48992612 5.67752201,8.46717596 5.67902198,8.42622567 C5.62502276,8.41864228 5.56502362,8.42167564 5.50952442,8.42319232 C5.54252394,8.39285877 5.62202281,8.32612496 5.6295227,8.28517467 C5.64452249,8.21237415 5.55002384,8.16839051 5.55752373,8.0819399 C5.56652359,8.12744022 5.61752287,8.23209096 5.66552218,8.24725773 C5.77352063,8.28365799 5.74202108,8.1759739 5.74952097,8.11985683 C5.77652059,7.94240557 5.93551831,8.08952328 5.93851826,8.18204061 C5.9850176,8.07587319 6.10051595,8.19417402 6.0480167,8.28517467 C6.02251706,8.32915832 5.98801756,8.31247486 6.01951711,8.37010861 C6.04201679,8.4110589 6.07501631,8.41257557 6.12301562,8.40195883 C6.13501544,8.37769199 6.1455153,8.3503918 6.1455153,8.32157493 C6.22801412,8.29579141 6.28201334,8.39437545 6.23401403,8.45352586 C6.29551316,8.42015896 6.35851224,8.38830874 6.4245113,8.37162528 C6.38551186,8.23512432 6.34501244,8.1016567 6.37051207,7.95605567 C6.37651198,7.92420544 6.38101192,7.88780518 6.40501158,7.86353835 C6.43501115,7.83168812 6.39751169,7.84382154 6.39451173,7.82258806 C6.38551186,7.7588876 6.45301089,7.69367047 6.47851052,7.63603673 C6.40801154,7.62086996 6.47251061,7.48133563 6.51900994,7.4570688 C6.57000922,7.43128528 6.72000706,7.47375225 6.73050691,7.43280196 C6.76050648,7.44948541 6.78900608,7.47375225 6.82500556,7.47375225 C6.90750438,7.47526892 6.96300358,7.4767856 7.02000276,7.54351941 C7.04850236,7.57840299 7.09050176,7.65575354 7.14150103,7.66182025 C7.14000104,7.71945399 7.20600009,7.76192096 7.13700109,7.81045464 C7.08300187,7.84837157 7.00800294,7.83927151 6.98550326,7.91207202 C6.97050348,7.95757235 6.92700409,7.97880583 6.99300314,8.01065606 C7.02150274,8.02582283 7.05750222,8.02885619 7.08900178,8.02885619 C7.09650167,8.07283983 7.11900135,8.13199025 7.17600052,8.12440686 C7.28699894,8.11075677 7.31099859,7.97122244 7.39949732,7.92420544 C7.54349525,7.84837157 7.52099559,8.1759739 7.6454938,8.09407331 C7.67549337,8.07435651 7.67549337,7.99093925 7.69049315,7.95908902 C7.72049272,7.89235522 7.75499223,7.82410473 7.79849161,7.76495431 C7.85399081,7.68912044 7.92298983,7.61025322 7.89899017,7.51166918 C7.88549035,7.4570688 7.78049187,7.43431863 7.73249254,7.3964017 C7.67549337,7.3493847 7.61999416,7.29933434 7.58549466,7.23411721 C7.56449496,7.1946836 7.55249513,7.1810335 7.58549466,7.1613167 C7.60499438,7.15069995 7.59899447,7.12946647 7.59149458,7.1142997 C7.5554951,7.03846583 7.45799649,6.90348153 7.59449453,6.85646453 C7.6244941,6.84584779 7.6874932,6.74878044 7.69199314,6.7108635 C7.69949303,6.64716305 7.60349441,6.58952931 7.64699378,6.52582885 C7.67849332,6.47881185 7.75799219,6.44847831 7.79849161,6.40146131 C7.81799133,6.37871114 7.84049101,6.35899434 7.87049058,6.35292763 C7.87199055,6.32714411 7.87799047,6.29832724 7.90049015,6.28164379 C7.93648963,6.25434359 7.99348882,6.26799369 8.03548821,6.25434359 C8.10448721,6.23311011 8.13448678,6.16182627 8.18848602,6.12239266 C8.23348537,6.08902576 8.28448464,6.10115917 8.33248395,6.07689234 C8.35798358,6.06475892 8.36848344,6.03745872 8.39398307,6.0253253 C8.45698217,5.99499175 8.52898113,6.04352543 8.55748073,6.09660914 C8.62497975,6.22401005 8.70897855,6.42117811 8.9009758,6.36961108 C8.97897468,6.3483776 9.03747384,6.28467714 9.0614735,6.21187663 C9.08397318,6.14210947 9.05697356,6.08447572 9.0614735,6.01622524 C9.06747341,5.89489104 9.18597171,5.8175405 9.19947152,5.69772298 C9.10947281,5.69923966 9.15597215,5.64312259 9.12597258,5.59155556 C9.09297304,5.53392182 9.01797413,5.57638878 8.96847483,5.56728872 C9.0194741,5.44443785 9.0194741,5.40197088 8.89947583,5.34282046 C8.84697658,5.31703694 8.75997782,5.19570275 8.7194784,5.20025278 C8.75247793,5.15475246 8.83047681,5.23058633 8.85447647,5.25181982 C8.90697572,5.30187017 8.95347505,5.32462033 9.02697399,5.33068704 C9.0059743,5.29883682 8.99547445,5.24120307 9.00897425,5.20480282 C9.02247405,5.17143591 8.98947453,5.13655233 8.99247448,5.09408536 C9.07647329,5.20176946 9.06297347,5.32462033 9.11097278,5.44292117 C9.13047252,5.49297153 9.1799718,5.52633843 9.20097151,5.57790546 C9.22797111,5.64312259 9.20997137,5.64160591 9.26697056,5.68103953 C9.30147007,5.70530637 9.31346989,5.74777333 9.31946981,5.78569027 C9.32996965,5.85242408 9.35396932,5.82360721 9.3899688,5.86152414 C9.41096849,5.8842743 9.46496771,5.88730766 9.45446788,5.93432466 C9.44696797,5.96769156 9.42446829,5.99499175 9.41996837,6.02987534 C9.40646855,6.12997605 9.60296575,5.99347508 9.62246546,5.97982498 C9.66446486,5.94797475 9.73346387,5.94190804 9.76646339,5.90399111 C9.8009629,5.8645575 9.79346301,5.80692375 9.82946249,5.7705235 C9.87446184,5.7235065 9.91796123,5.75535672 9.97196045,5.74625666 C10.0349596,5.73715659 10.0889588,5.68710624 10.1354581,5.6491893 C10.2344567,5.56577204 10.2974558,5.4747714 10.3799546,5.37922072 C10.3439551,5.38832078 10.2209569,5.47780475 10.213457,5.39438749 C10.1669577,5.39438749 10.0589592,5.38680411 10.0424594,5.33523707 C10.0289596,5.29732014 10.0334596,5.25485317 10.0334596,5.21693623 C10.0319596,5.17598594 9.9824603,5.18963604 9.94946077,5.16840256 C9.88346172,5.12593559 9.85046218,5.04706836 9.77996321,5.0106681 C9.66746482,4.95151768 9.59996578,4.85596701 9.53246675,4.75434962 C9.49346731,4.6951992 9.35546929,4.57538168 9.36596914,4.50409784 C9.37196906,4.45708084 9.41096849,4.40703049 9.40796854,4.36001349 C9.40646855,4.31754652 9.37346903,4.29479636 9.37796897,4.24777936 C9.38246889,4.19317897 9.25047079,4.09762829 9.36596914,4.08701155 C9.40196863,4.0839782 9.40796854,4.03999455 9.44846795,4.01572771 C9.49346731,3.98842752 9.48296745,3.96416068 9.53246675,3.97781078 C9.61196561,4.00207762 9.66746482,3.91411032 9.72146405,3.86709332 C9.8144627,3.78519274 9.66596483,3.78367607 9.65846494,3.72149229 C9.65096506,3.65930852 9.61496557,3.61380819 9.60446572,3.54100768 C9.59846581,3.48792397 9.54896651,3.50915745 9.52046693,3.52280755 C9.48146748,3.54100768 9.44246803,3.51370748 9.40496858,3.5061241 C9.37046907,3.49854071 9.34196947,3.44090697 9.29997008,3.4591071 C9.26847053,3.47427387 9.26997051,3.51219081 9.22497116,3.50764077 C9.19197163,3.50460742 9.17097194,3.47275719 9.1379724,3.46669048 C9.08697313,3.46062377 9.13197249,3.50915745 9.0749733,3.51370748 C9.0344739,3.51674084 8.90397575,3.46214045 8.9009758,3.51370748 C8.86047638,3.44394032 8.84397661,3.56224116 8.80047724,3.57437458 C8.75247793,3.58802468 8.70147866,3.57589126 8.65347935,3.59409139 C8.54848085,3.63655836 8.58298036,3.7412091 8.68347892,3.75789255 C8.76447776,3.77002597 8.65947926,3.82614303 8.68647888,3.88074342 C8.71047854,3.9292771 8.71797842,3.962644 8.77047767,3.98236081 C8.85747643,4.01421103 8.95047509,4.03999455 8.92047552,4.15222868 C8.88147609,4.291763 8.78397748,4.42371394 8.64747943,4.48741439 C8.51698131,4.54808149 8.48098182,4.38276365 8.38198324,4.34029668 C8.32048413,4.31451317 8.25148511,4.32361323 8.18698603,4.33119662 C8.17648618,4.34788007 8.27698474,4.37973029 8.29348451,4.40854717 C8.32348407,4.46769759 8.24098526,4.4601142 8.23498534,4.50561452 C8.22898543,4.54353146 8.17948614,4.57083165 8.20648576,4.60874859 C8.17798617,4.57386501 8.12248696,4.62088201 8.10298724,4.64211549 C8.07448765,4.67244904 8.08048756,4.69216584 8.09248739,4.73008278 C8.11648704,4.80743333 7.99948873,4.88781723 7.93048971,4.87871717 C7.87199055,4.8696171 7.81649135,4.87416714 7.76099214,4.84686694 C7.69499309,4.81501672 7.71749277,4.83473352 7.70399297,4.76041633 C7.69049315,4.69064917 7.59449453,4.66031562 7.65149372,4.57386501 C7.69199314,4.51016455 7.67249341,4.51623126 7.66499352,4.45556417 C7.65599366,4.39186371 7.68449323,4.38276365 7.73549251,4.37366358 C7.79099171,4.36304684 7.81499136,4.26446281 7.8479909,4.21744581 C7.85549078,4.20682907 7.88999029,4.11886178 7.83599107,4.14161194 C7.8059915,4.15526204 7.82849118,4.19317897 7.78199184,4.19924568 C7.74899231,4.20531239 7.71599279,4.18256223 7.68149329,4.18256223 C7.64249384,4.18256223 7.60199442,4.20227904 7.56599493,4.1780122 C7.58399467,4.15677871 7.71299283,4.05061129 7.61099429,4.02937781 C7.57049487,4.02027774 7.60349441,4.08701155 7.54949518,4.07791149 C7.53899533,4.1309952 7.47449625,4.12644516 7.44299671,4.15981207 C7.45649651,4.103695 7.57499481,4.06122803 7.53599536,4.01572771 C7.62149415,3.94141052 7.63949389,3.92776042 7.52399554,3.88681013 C7.34249815,3.82310968 7.35599795,3.63655836 7.48049617,3.52432423 C7.59449453,3.42119016 7.78199184,3.2907559 7.89299026,3.46214045 C8.01148856,3.64565842 8.08648747,3.51219081 8.18398608,3.39388997 C8.15098655,3.38023987 8.18098612,3.37113981 8.17048627,3.33018951 C8.06248782,3.37417316 7.9664892,3.23463884 8.03998814,3.15122158 C8.0849875,3.10117122 8.15398651,3.11482132 8.21398565,3.09965455 C8.2664849,3.08600445 8.31448421,3.03443742 8.33698389,2.98590374 C8.29198453,2.99803716 8.29798444,2.97073696 8.31448421,2.95102016 C8.28748459,2.9479868 8.25748502,2.93585338 8.23498534,2.92827 C8.17048627,2.90551983 8.1749862,2.85546948 8.1059872,2.84636942 C7.94248954,2.82210258 8.27698474,2.63403458 8.11348709,2.63403458 C8.06098784,2.6325179 8.01448851,2.55365067 7.97548908,2.56881745 C7.94848946,2.57943419 7.94098957,2.60066767 7.90799003,2.58701758 C7.88549035,2.57791751 7.85849075,2.5582007 7.83149113,2.57336748 C7.77299197,2.60976774 7.76099214,2.56578409 7.70399297,2.58246754 C7.65749363,2.59763432 7.63199399,2.64313464 7.57799476,2.63100122 C7.63199399,2.5582007 7.69799305,2.49753361 7.74599236,2.42169974 C7.77749191,2.3701327 7.81649135,2.3231157 7.8689906,2.29126548 C7.89749018,2.27458203 7.97848902,2.25789857 7.98298896,2.21846496 C7.99048885,2.15324783 7.94998943,2.15931454 7.90499008,2.18509806 C7.78799176,2.25486522 7.66649349,2.32918241 7.55249513,2.40349961 C7.48349612,2.44748325 7.42949689,2.48540019 7.34399812,2.47326677 C7.27799907,2.46265003 7.25099945,2.53545054 7.1985002,2.52938383 C7.17300057,2.42776645 6.61050864,2.79631906 6.54150962,2.82816929 C6.4320112,2.87670296 6.30901296,2.96012022 6.19201463,2.98893709 C6.14401532,3.00107051 6.04351676,3.11330464 6.04951668,2.98893709 C5.98951754,2.98135371 5.94451818,3.0420208 5.90401876,3.07235435 C5.84701958,3.116338 5.77952054,3.14363819 5.71802143,3.18155513 C5.58602333,3.26648906 5.46152511,3.36810645 5.33852687,3.46365713 C5.22152854,3.55465777 5.10453022,3.66082519 4.98153198,3.74272577 C4.93953258,3.77154265 4.7850348,3.85040987 4.78953474,3.90956029 C4.89903316,3.93079378 5.27252782,3.46365713 5.3775263,3.58954135 C5.40452592,3.62139158 5.2185286,3.71542558 5.18852901,3.73362571 C5.16302938,3.74727581 5.13302981,3.74575913 5.10753018,3.75940923 C5.07453065,3.77912603 5.05353096,3.81249294 5.0220314,3.83372642 C4.93803261,3.88681013 4.86753362,3.95506061 4.8060345,4.03089449 C4.76253512,4.08701155 4.73103557,4.15981207 4.68303626,4.2113791 C4.69053615,4.15677871 4.6800363,4.1173451 4.68153629,4.06426139 C4.62003716,4.103695 4.59453753,4.17042881 4.50903876,4.15222868 C4.43103987,4.13402855 4.36954076,4.21289578 4.31404156,4.25536275 C4.1850434,4.35394678 4.09804465,4.46314755 3.9900462,4.57841504 C3.93004706,4.64363217 3.86554798,4.68913249 3.82804851,4.76951639 C3.78754911,4.85596701 3.73054992,4.93331756 3.67805067,5.01370146 C3.57755211,5.16081917 3.46205377,5.29580346 3.36305519,5.44292117 C3.16055809,5.74473998 3.02706,6.09054243 2.86056239,6.41207805 C2.77506361,6.57891256 2.6925648,6.74271373 2.65806529,6.92926505 C2.62806573,7.09003286 2.62656574,7.25383402 2.6295657,7.41763518 C2.72106438,7.34635134 2.71656446,7.49498573 2.6925648,7.53896938 C2.65806529,7.60721986 2.64456548,7.68457041 2.63406564,7.76040428 C2.61906585,7.85898831 2.60106611,7.95757235 2.60106611,8.05767306 C2.60106611,8.14260699 2.5740665,8.22147422 2.57256651,8.3033748 C2.54106697,8.27910796 2.60856599,8.1759739 2.54856686,8.19114067 C2.51856729,8.19872406 2.51706731,8.2427077 2.50956742,8.26545786 C2.48556777,8.34432509 2.3790693,8.3367417 2.36256953,8.42622567 C2.35356965,8.48082606 2.34756974,8.51267628 2.31157026,8.55665993 C2.28307066,8.59002683 2.31007028,8.60519361 2.31607019,8.63856051 C2.32957,8.71742774 2.22757146,8.82662851 2.25457108,8.89032896 C2.28007071,8.95251274 2.26207097,9.0222799 2.29057056,9.08143032 C2.30557034,9.11176387 2.34006985,9.15119748 2.32657005,9.18911442 C2.26207097,9.20124784 2.34456979,9.34988222 2.3505697,9.39538255 C2.35956957,9.46969974 2.42556862,9.70326807 2.4975676,9.73663497 C2.5875663,9.87465261 2.71056454,10.0672706 2.86956225,10.1370378 C2.98206064,10.1855715 3.02256006,10.0399705 3.08555916,9.97930336 C3.16505802,9.90043613 3.26855654,9.85038578 3.37355504,9.81398552 C3.46205377,9.78213529 3.83254845,9.67445119 3.65405101,9.54705029 L3.65405101,9.54705029 L3.65405101,9.54705029 Z M3.81004877,14.5293356 C3.82804851,14.4990021 3.81454871,14.4216515 3.78154919,14.395868 C3.70205032,14.3291342 3.67055078,14.4868687 3.72155004,14.5338857 C3.74104977,14.583936 3.78754911,14.5672526 3.81004877,14.5293356 L3.81004877,14.5293356 L3.81004877,14.5293356 Z M4.1355441,9.9429031 C4.11304444,9.92318629 4.09654467,9.93531971 4.0950447,9.89436942 C4.09654467,9.85796916 4.09954462,9.788202 4.05154531,9.83218565 C4.03804551,9.83673568 4.05604525,9.84431907 4.03654553,9.85190245 C4.02304572,9.85645249 4.01254588,9.84583574 4.003546,9.84128571 C3.97804637,9.83066897 3.96304658,9.82915229 3.94354686,9.85645249 C3.93004706,9.87465261 3.93004706,9.8958861 3.90754738,9.91105287 L3.86854793,9.92470297 C3.85504813,9.929253 3.81604868,9.9565532 3.81454871,9.97171997 C3.8085488,9.99447013 3.8430483,10.0111536 3.86704796,10.0172203 C3.88654768,10.0308704 3.91204732,10.0430038 3.93154704,10.0566539 C3.95104675,10.070304 3.98254631,10.0945708 4.00654597,10.1006376 C4.06054519,10.1309711 4.14454398,10.164338 4.18654338,10.1006376 C4.19854321,10.0763707 4.20754309,10.0581706 4.19104332,10.0369371 C4.17604353,10.0141869 4.15204387,10.0081202 4.14454398,9.9899201 C4.13854407,9.97020329 4.15504384,9.95806987 4.1355441,9.9429031 L4.1355441,9.9429031 L4.1355441,9.9429031 Z M11.3489407,11.0879946 C11.3204411,11.0895112 11.2694418,11.1077114 11.2469422,11.1274282 C11.2019428,11.1668618 11.2979414,11.1896119 11.3354409,11.2002287 C11.3774403,11.2244955 11.4374394,11.2366289 11.4779389,11.2608958 C11.5124384,11.2866793 11.536438,11.3215629 11.5754375,11.3382463 C11.6234368,11.3609965 11.6894358,11.3716132 11.7419351,11.3852633 C11.7644348,11.3928467 11.7989343,11.39133 11.8289338,11.3973968 C11.8619334,11.4171136 11.8769331,11.4474471 11.9039328,11.4686806 C11.9504321,11.5111476 12.0164312,11.5217643 12.0779303,11.5187309 C12.1364294,11.5247977 12.1799288,11.5354144 12.232428,11.5217643 C12.2924272,11.5065975 12.3344266,11.5369311 12.3899258,11.5369311 C12.4124255,11.5369311 12.4349251,11.5187309 12.4559248,11.5202476 C12.4844244,11.5202476 12.4874244,11.532381 12.5009242,11.5566479 C12.5249239,11.5915315 12.586423,11.6446152 12.6299223,11.6461318 C12.656922,11.6461318 12.6779217,11.6415818 12.7004213,11.6491652 C12.725921,11.664332 12.7364208,11.664332 12.7544206,11.6794988 C12.7859201,11.6931489 12.8129197,11.7022489 12.8264195,11.7265158 C12.8504192,11.7689827 12.8489192,11.8159997 12.8864187,11.8493666 C12.9119183,11.8690834 12.9389179,11.8903169 12.9659175,11.9100337 C12.9839173,11.9267172 12.9689175,11.9236838 12.9959171,11.9236838 C13.0109169,11.9267172 13.0394165,11.9267172 13.0589162,11.9206505 C13.1339151,11.9161004 13.0934157,11.809933 13.0694161,11.7750494 C13.0544163,11.7447159 13.0409165,11.720449 13.0469164,11.6916322 C13.0514163,11.6567486 13.0679161,11.6324818 13.0454164,11.6036649 C13.0334166,11.5854648 13.0169168,11.5763647 13.000417,11.5672646 C12.9914172,11.5551312 12.9869172,11.5429978 12.9764174,11.5247977 C12.9539177,11.4959808 12.9104183,11.4868807 12.8819187,11.4595805 C12.8339194,11.4110468 12.8084198,11.3412797 12.7469207,11.2957794 C12.7139211,11.2760626 12.6839216,11.2912293 12.6434222,11.2745459 C12.6269224,11.2639291 12.6179225,11.2533124 12.5939229,11.245729 C12.5714232,11.2381456 12.5519235,11.2426957 12.5309238,11.241179 C12.4874244,11.2381456 12.4499249,11.2002287 12.4079255,11.203262 C12.3614262,11.2093288 12.3524263,11.2593791 12.3254267,11.2866793 C12.3014271,11.3063961 12.2744274,11.3063961 12.2654276,11.2745459 C12.2624276,11.2335956 12.2774274,11.2093288 12.2984271,11.1835452 C12.3314266,11.1486617 12.2984271,11.1289448 12.2549277,11.1259115 C12.1994285,11.1259115 12.1889287,11.1698951 12.166429,11.2169121 C12.1304295,11.2669625 12.1079298,11.2320789 12.0569306,11.2244955 C12.0224311,11.2260122 11.9984314,11.2396623 11.9654319,11.2260122 C11.9429322,11.2184288 11.9384323,11.2002287 11.9219325,11.1896119 C11.8964329,11.1759618 11.8769331,11.1805119 11.8589334,11.1926453 C11.8334338,11.198712 11.8334338,11.198712 11.8079341,11.1850619 C11.7854345,11.1759618 11.7794345,11.1577617 11.750935,11.151695 C11.7059356,11.1425949 11.6594363,11.1805119 11.6219368,11.1698951 C11.605437,11.1607951 11.5919372,11.1365282 11.5694376,11.1289448 C11.5439379,11.1137781 11.5484378,11.1274282 11.5319381,11.1456283 C11.5034385,11.1729285 11.4644391,11.1820286 11.4374394,11.1607951 C11.4029399,11.1365282 11.39994,11.0955779 11.3489407,11.0879946 L11.3489407,11.0879946 L11.3489407,11.0879946 Z M13.0619162,12.8807073 C13.0859158,12.8776739 13.0979156,12.8534071 13.1189153,12.8564404 C13.142915,12.8518904 13.1309152,12.8761572 13.1474149,12.891324 C13.1624147,12.9049741 13.1774145,12.9049741 13.1924143,12.9049741 C13.2194139,12.9095241 13.2719132,12.9125575 13.282413,12.8882907 C13.2944128,12.8503737 13.2314137,12.8427903 13.214914,12.8124568 C13.1999142,12.7684731 13.2344137,12.7260062 13.2464135,12.6880892 C13.2644132,12.6365222 13.1999142,12.613772 13.2059141,12.5728218 C13.2044141,12.5288381 13.2344137,12.5136713 13.2254138,12.4712044 C13.2179139,12.4393541 13.1909143,12.4044706 13.1714146,12.3817204 C13.1534148,12.3574536 13.1189153,12.3347034 13.1219153,12.2998198 C13.1249153,12.2634196 13.1909143,12.2649362 13.1594148,12.2209526 C13.141415,12.1830357 13.0934157,12.190619 13.0499163,12.1845523 C13.0349165,12.1845523 13.0199168,12.186069 13.004917,12.1709022 C12.9914172,12.1496688 12.9974171,12.139052 12.9974171,12.1238852 C12.9884172,12.0829349 12.9569177,12.0677682 12.9209182,12.0510847 C12.9089183,12.045018 12.8909186,12.0374346 12.8834187,12.0192345 C12.8774188,12.0010344 12.8954185,11.9949677 12.8894186,11.9782842 C12.8699189,11.9388506 12.7979199,11.993451 12.7679204,11.9798009 C12.7469207,11.9767675 12.7499206,11.9570507 12.7364208,11.9358172 L12.7004213,11.9191338 C12.6509221,11.8963836 12.6314223,11.9373339 12.6404222,11.9782842 C12.6629219,12.0708015 12.7304209,12.1314686 12.722921,12.2239859 C12.727421,12.2619029 12.7334209,12.280103 12.7469207,12.3149866 C12.7589205,12.365037 12.7724203,12.3893038 12.7499206,12.4378375 C12.7139211,12.4651377 12.7469207,12.4985046 12.7589205,12.5333881 C12.7664204,12.5804051 12.7784202,12.6168054 12.7769202,12.6668558 C12.7679204,12.7578564 12.7394208,12.8473404 12.7469207,12.9398577 C12.7514206,12.9777746 12.7484206,13.0126582 12.7619205,13.0490585 C12.7679204,13.0960755 12.8054198,13.1127589 12.8444193,13.1385424 C12.8819187,13.1703927 13.0559162,13.2750434 13.004917,13.1476425 C12.9899172,13.1188256 12.9659175,13.0778753 12.9584176,13.0445084 C12.9464178,13.0096249 12.9884172,12.985358 12.9899172,12.9489578 C12.9959171,12.9080075 12.9644176,12.8943574 13.0229167,12.8837406 C13.0349165,12.8746406 13.0529163,12.8837406 13.0619162,12.8807073 L13.0619162,12.8807073 L13.0619162,12.8807073 Z M11.2529421,1.95152973 C11.2994414,1.94091299 11.3459408,1.95456309 11.3894401,1.93787964 C11.4119398,1.92877957 11.4854388,1.90299606 11.4809388,1.87266251 C11.4734389,1.81654544 11.2349423,1.8529457 11.1959429,1.86962915 C11.1839431,1.90451273 11.2199426,1.93181293 11.2514421,1.94091299 C11.2514421,1.94394635 11.2529421,1.94849638 11.2529421,1.95152973 L11.2529421,1.95152973 L11.2529421,1.95152973 Z M12.3989257,12.0950684 C12.3899258,12.0753516 12.3989257,12.0571514 12.3989257,12.0374346 C12.3944257,12.0055844 12.3854259,11.9964843 12.3899258,11.9631174 C12.4004256,11.9449173 12.4004256,11.9161004 12.3959257,11.8933503 C12.3869258,11.8751501 12.3719261,11.8599834 12.3584262,11.8463333 C12.3584262,11.8372332 12.3539263,11.8220664 12.3434265,11.8129664 C12.3254267,11.7947662 12.305927,11.8220664 12.2864273,11.8311665 C12.2714275,11.8448166 12.2429279,11.8539167 12.238428,11.8690834 C12.2234282,11.8918336 12.232428,11.9100337 12.232428,11.9297505 L12.236928,11.9525007 C12.2039285,11.9858676 12.235428,12.0738349 12.2309281,12.1072018 C12.2309281,12.1451187 12.1769288,12.2512861 12.2489278,12.2194359 C12.2684275,12.2103359 12.2834273,12.1966858 12.3014271,12.1875857 C12.3254267,12.1739356 12.3554263,12.1739356 12.3839259,12.1648355 C12.3929257,12.1648355 12.445425,12.1602855 12.445425,12.1511854 C12.446925,12.1314686 12.4034256,12.1178185 12.3989257,12.0950684 L12.3989257,12.0950684 L12.3989257,12.0950684 Z M11.0444451,14.0121486 C11.1044442,14.0409655 11.2094427,13.9833318 11.2664419,13.9651316 C11.3384409,13.9423815 11.4524392,13.8665476 11.5259382,13.9090146 C11.5559377,13.925698 11.5709375,13.9605816 11.6024371,13.9742317 C11.6414365,13.9909152 11.6879359,13.9757484 11.7269353,13.9666483 C11.7674347,13.9575482 11.813934,13.9514815 11.8514335,13.9332814 C11.884433,13.916598 11.9054327,13.8892978 11.9339323,13.8680643 C12.0074313,13.8119472 12.0704304,13.8650309 12.1514292,13.8528975 C12.1979285,13.8468308 12.2414279,13.8240806 12.2864273,13.8119472 C12.3194268,13.8043638 12.377926,13.8043638 12.4034256,13.780097 C12.4319252,13.7527968 12.4184254,13.6936464 12.4184254,13.6587628 C12.4169254,13.6117458 12.4199254,13.5632121 12.4034256,13.5192285 C12.3704261,13.4327779 12.2504278,13.3311605 12.374926,13.26291 C12.3989257,13.1112422 12.2219282,13.1370258 12.1709289,13.027825 C12.1379294,12.9565411 12.1274295,12.9019408 12.0329309,12.8943574 C11.953432,12.886774 11.9054327,12.929241 11.8364337,12.9565411 C11.7584348,12.985358 11.6984357,12.9595745 11.6309367,12.9216576 C11.5904373,12.8989074 11.5049385,12.8458237 11.4884387,12.9155909 C11.4734389,12.976258 11.5319381,13.0354084 11.4839388,13.0900088 C11.4419394,13.1385424 11.3684404,13.1597759 11.3084413,13.173426 C11.1779432,13.2007262 11.0744446,13.3008269 10.979946,13.3872775 L10.9904458,13.3963776 C10.9529464,13.3948609 10.8974472,13.4949616 10.8959472,13.5252952 C10.910947,13.5298452 10.9244468,13.5343952 10.9409466,13.5389453 C10.9394466,13.5905123 10.9979457,13.5556287 11.0024457,13.5192285 C11.0144455,13.5222618 11.0264453,13.5298452 11.0384452,13.5313619 C11.048945,13.5343952 11.0714447,13.5328786 11.0804446,13.5374286 C11.1059442,13.5480453 11.1104441,13.5723122 11.1419437,13.5753455 C11.1239439,13.6542128 11.1404437,13.73763 11.1029442,13.8119472 C11.0789446,13.8574475 10.9574463,13.9696817 11.0444451,14.0121486 L11.0444451,14.0121486 L11.0444451,14.0121486 Z M11.6639362,2.34586586 C11.7089356,2.39439954 11.7644348,2.40804964 11.7539349,2.48388351 C11.8109341,2.4914669 11.8469336,2.51270038 11.8799331,2.4641667 C11.9009328,2.43383315 11.9324323,2.40956632 11.9669319,2.3974329 C12.0089312,2.38074944 12.1814288,2.38226612 12.1739289,2.45354996 C12.1694289,2.48843354 12.1484293,2.51876709 12.1424293,2.55365067 C12.1349295,2.60218435 12.1874287,2.56730077 12.2099284,2.57943419 C12.1844287,2.59763432 12.1529292,2.60825106 12.1214296,2.61583445 C12.1349295,2.62493451 12.1439293,2.63706793 12.1454293,2.6522347 C12.1064299,2.66133477 12.0869301,2.77053554 12.0179311,2.79176903 C11.9759317,2.80541912 11.9144326,2.77660225 11.8724332,2.77205222 C11.8229339,2.76598551 11.7854345,2.75081874 11.7359352,2.74778538 C11.6879359,2.74475203 11.7269353,2.68105158 11.6669361,2.693185 C11.6564363,2.73565196 11.677436,2.84333606 11.6849359,2.88580303 C11.6924358,2.93888674 11.7374351,2.96922029 11.7899344,2.97832035 C11.8634333,2.99045377 11.8979328,3.01472061 11.9609319,3.05112087 C12.0104312,3.07842106 12.0659304,3.06173761 12.1199297,3.06628764 C12.1559291,3.069321 12.1859287,3.08297109 12.2129283,3.10572126 C12.2069284,3.12240471 12.1934286,3.1497049 12.2024285,3.16790503 C12.2129283,3.19217187 12.2894272,3.16487168 12.307427,3.163355 C12.3614262,3.15728829 12.4124255,3.09813787 12.4634247,3.10572126 C12.4829245,3.10875461 12.5729232,3.1360548 12.5684232,3.15880497 C12.5204239,3.13908816 12.4889244,3.19823858 12.4514249,3.16638835 C12.4184254,3.13757148 12.3299267,3.16183832 12.3869258,3.20278861 C12.3914258,3.20733864 12.4064255,3.32108945 12.4064255,3.33322287 C12.4019256,3.37568984 12.3254267,3.42119016 12.3314266,3.44849035 C12.3419265,3.45000703 12.4109255,3.45455706 12.4259253,3.46820716 C12.4304252,3.45000703 12.4169254,3.44242364 12.4589248,3.43029022 C12.4904244,3.42119016 12.5279238,3.41815681 12.5594234,3.43332358 C12.5714232,3.48640729 12.5324238,3.54100768 12.6059227,3.52735758 C12.6749217,3.51370748 12.7049213,3.55920781 12.7769202,3.51219081 C12.8219196,3.48489061 12.8699189,3.48944064 12.9089183,3.52887426 C12.9614176,3.58044129 12.8549191,3.65172513 12.9164182,3.70177548 C12.9404179,3.72149229 12.9599176,3.78215939 12.9839173,3.79277613 C13.000417,3.80035952 13.0904157,3.76850929 13.1069155,3.7609259 C13.1354151,3.81249294 13.1609147,3.73362571 13.1834144,3.72907568 C13.1924143,3.69570877 13.2344137,3.65779184 13.2749131,3.65324181 C13.3349122,3.6471751 13.3364122,3.65779184 13.3769116,3.68660871 C13.4954099,3.76850929 13.4789102,3.56830787 13.5404093,3.51674084 C13.6514077,3.42574019 13.7069069,3.33928958 13.7834058,3.22250542 C13.8434049,3.12847142 13.9274038,3.10572126 14.0339022,3.0890378 C14.117901,3.07538771 14.2468992,3.0556709 14.2813987,2.96467025 C14.3218981,2.85850283 14.2243995,2.80086909 14.1389007,2.76901887 C14.0429021,2.73565196 13.9349036,2.6992517 13.976903,2.57791751 C14.0264023,2.43686651 13.982903,2.35496593 13.8329051,2.30946561 C13.5164096,2.21088157 13.2314137,2.04556373 12.9089183,1.95456309 C12.6239224,1.87417918 12.3359266,1.84536231 12.0434308,1.83019554 C11.9129326,1.78469522 11.6369366,1.78014518 11.5574377,1.89086264 C11.5064384,1.96214647 11.5709375,2.02433025 11.5649376,2.09864744 C11.5574377,2.18813141 11.6009371,2.27913206 11.6639362,2.34586586 L11.6639362,2.34586586 L11.6639362,2.34586586 Z M16.6423649,16.4069823 L16.6408648,16.4054657 C16.6453648,16.4130491 16.6423649,16.4266991 16.6438648,16.4373159 C16.702364,16.4373159 16.7278637,16.4903996 16.7908628,16.4706828 C16.8553617,16.4524827 16.8928612,16.3902989 16.841862,16.3387319 C16.7968627,16.2947482 16.7578632,16.2568313 16.6918641,16.2689647 C16.6138653,16.2841315 16.6303649,16.3463152 16.6423649,16.4069823 L16.6423649,16.4069823 L16.6423649,16.4069823 Z M18.6808357,14.3791846 C18.6778357,14.3655345 18.6748358,14.3534011 18.6718357,14.339751 C18.6103366,14.3215508 18.5713371,14.3852513 18.514338,14.3382343 C18.4048396,14.4125515 18.5218379,14.5596692 18.3418405,14.5505691 C18.37334,14.5884861 18.3703401,14.630953 18.3553403,14.6749367 C18.3328406,14.7431872 18.3148408,14.7371204 18.2683415,14.7462205 C18.1708429,14.7613873 18.1243436,14.7007202 18.094344,14.6188196 C17.9983455,14.621853 17.8663472,14.7704874 17.7913484,14.8175044 C17.7718486,14.8281211 17.7373491,14.8599713 17.7163495,14.8736214 C17.6998497,14.8827215 17.6593503,14.9024383 17.6383505,14.9145717 C17.5873513,14.9403552 17.4778528,14.9752388 17.4718529,15.0328725 C17.4463533,15.0283225 17.4073539,15.0434893 17.3818543,15.0404559 C17.3728543,15.0525894 17.3728543,15.0662394 17.3818543,15.0798895 C17.4988526,15.0996064 17.5603516,15.0601727 17.6593503,15.0177058 C17.7628488,14.9706888 17.8738472,14.9813055 17.9713458,14.9449053 C18.0178451,14.9282218 18.0193451,14.8766548 18.095844,14.9069883 C18.1288435,14.9221551 18.167843,14.9706888 18.1753429,15.0040557 C18.1903427,15.0798895 18.1108438,15.1921237 18.0313449,15.1966737 C18.0118452,15.1496567 18.0403448,15.101123 18.0493446,15.0632061 C17.9443462,15.0283225 17.7718486,15.1769569 17.743349,15.2649242 C17.8513475,15.2876744 17.8963469,15.4454088 17.8378476,15.5318595 C17.818348,15.5530929 17.7958484,15.5803931 17.7583489,15.5925266 C17.6968497,15.6107267 17.6683501,15.5546096 17.608351,15.5985933 C17.5303522,15.6577437 17.6158509,15.8200282 17.5708515,15.9110288 C17.5363521,15.980796 17.4778528,16.0065795 17.4283536,16.0551132 C17.395354,16.0899968 17.3758544,16.1279137 17.330855,16.1582472 C17.2723558,16.1976809 17.1298578,16.2826148 17.1418577,16.3645154 C17.2708559,16.408499 17.537852,16.1840308 17.6488504,16.1097136 C17.7193494,16.0626966 17.7628488,15.989896 17.8348477,15.942879 C17.9158466,15.8928287 18.0223451,15.8670452 18.0748442,15.7775612 C18.1048439,15.7259942 18.0808441,15.6804939 18.098844,15.6289268 C18.1153438,15.5834265 18.1468433,15.5682597 18.1768428,15.5333761 C18.2323421,15.4666423 18.2833413,15.4454088 18.3463403,15.3908084 C18.4243393,15.3210413 18.4063395,15.2118405 18.442339,15.1193232 C18.4738386,15.0389393 18.5353378,14.9767555 18.5788371,14.9009216 C18.6463362,14.7811041 18.8233336,14.4959687 18.7483346,14.3609844 C18.7303349,14.3761512 18.6973353,14.3716012 18.6808357,14.3791846 L18.6808357,14.3791846 L18.6808357,14.3791846 Z M20.2123137,10.498007 C20.1733142,10.4252065 20.2318134,10.215905 20.2318134,10.1294544 C20.2303134,9.97020329 20.182314,9.85038578 20.1598145,9.70175139 C20.1463146,9.56221706 20.1268149,9.19214777 20.1778142,9.06626355 C20.2498131,8.88881229 19.8988181,8.58851016 19.8793184,8.39589212 C19.8613187,8.22905761 19.7668201,8.07132315 19.630322,7.97577248 C19.5748228,7.93482218 19.4548246,7.38426828 19.3843255,7.41005179 C19.349826,7.42673525 19.421825,7.54806944 19.4173251,7.58598638 C19.3978254,7.71945399 19.3303263,7.58598638 19.2598273,7.61631992 C19.1293292,7.66940363 18.9913311,7.79528786 18.9748315,7.92420544 C18.9133323,8.40195883 18.5743371,7.90752199 18.6013368,7.88780518 C18.6763357,7.83017144 18.7033352,7.84837157 18.7918339,7.83623815 C18.8893327,7.80135457 18.7378349,7.73158741 18.8908326,7.71642064 C18.8548332,7.6178366 18.935832,7.58598638 18.8968325,7.50863583 C18.8383334,7.39488502 18.7963339,7.40853512 18.8548332,7.28568425 C18.8803327,7.21895044 18.727335,7.00813228 18.7153352,6.92774837 C18.7033352,6.84888115 18.7018353,6.74574708 18.6913354,6.65777979 C18.6853355,6.60166273 18.7768342,6.54857902 18.7603344,6.50459537 C18.7573345,6.3483776 18.7918339,6.1800264 18.7363348,6.02835866 C18.6973353,5.92522459 18.6523361,5.78872362 18.586337,5.70075633 C18.5638373,5.67042279 18.4933383,5.51420501 18.4858384,5.47022136 C18.4678387,5.37315401 18.4243393,5.40955427 18.3703401,5.37163733 C18.3403404,5.3337204 18.2053424,5.20783617 18.1663429,5.18963604 C18.1303435,5.17295259 17.8693472,4.93483423 17.8633473,4.91511743 C17.8408476,4.84686694 17.6938498,4.79378323 17.7103496,4.71946604 C17.7343492,4.60723191 17.3428548,4.31602984 17.2333564,4.29631304 C17.1628574,4.28417962 17.4493532,4.62694872 17.4478533,4.61936533 C17.4523532,4.63908213 17.6323506,4.86810043 17.6323506,4.86810043 C17.6728501,4.88175052 17.7718486,5.16233585 17.7688487,5.19873611 C17.7583489,5.30490353 17.4838527,5.0243182 17.4628531,4.98640127 C17.327855,4.82108343 17.0833585,4.68761581 16.9288607,4.57689836 C16.8193624,4.47528097 16.8733616,4.41764723 16.6858642,4.33119662 C16.6168652,4.29934639 16.4293679,4.14616197 16.3708688,4.14161194 C16.3003698,4.13857858 16.3813685,4.28721297 16.3828686,4.30389642 C16.3933683,4.41006384 16.5088668,4.41764723 16.5778657,4.48741439 C16.6333649,4.54504813 16.6828643,4.61633197 16.6348649,4.68003243 C16.6333649,4.68003243 16.5478663,4.83776688 16.5433663,4.82411678 C16.5673659,4.89085059 16.766863,5.0379683 16.8163624,5.09256869 C16.8073624,5.07891859 17.0773586,5.43230443 17.0998583,5.24423643 C17.1088581,5.17598594 17.0323592,5.09408536 17.0428591,5.03493494 C17.0503591,4.99853468 17.3518546,5.37922072 17.3683544,5.41258762 C17.4418534,5.61430572 17.4358535,5.38225407 17.5123523,5.40652091 C17.5753514,5.42623772 17.7448491,5.63705588 17.603851,5.64615595 C17.3893541,5.65980604 17.6428505,5.84635737 17.7028496,5.87517424 C17.8273479,5.93584134 17.9128467,6.07689234 18.0418448,6.12997605 C18.2443419,6.21187663 18.2023425,6.35747766 18.304341,6.50611205 C18.3373405,6.55312905 17.7223494,6.50611205 17.67435,6.53341224 C17.5933512,6.59711269 17.9833456,7.03239912 17.9848456,7.09761624 C17.9878456,7.23411721 18.0658444,7.33421792 18.0868442,7.47071889 C18.098844,7.59660312 18.0838442,7.76192096 18.1663429,7.86353835 C18.233842,7.92572212 18.2968411,7.76040428 18.4033395,7.85898831 C18.442339,7.87718844 18.4978383,7.92117209 18.5098381,7.95453899 C18.5458375,8.04857299 18.7498347,8.62339374 18.5053381,8.58092677 C18.3973396,8.56120996 18.4588388,9.03289664 18.4663386,9.10114713 C18.4993382,9.24978151 18.5593373,9.23764809 18.5203379,9.4257161 C18.5248379,9.58193387 18.3988397,9.6608011 18.3088409,9.77303523 C18.2668416,9.82460226 18.2398419,9.88526936 18.2203422,9.95048649 C18.1708429,9.90195281 18.1468433,9.82460226 18.0778442,9.79881874 C18.0028453,9.77000187 17.8378476,9.86100252 17.7718486,9.89285274 C17.612851,9.97323665 17.7298493,10.1188377 17.6668501,10.2447219 C17.6218508,10.3372392 17.4868527,10.3827396 17.3983539,10.4282399 C17.2918555,10.4828403 17.1493575,10.540474 17.044359,10.4525067 C16.9543604,10.3797062 16.9933599,10.2325885 16.8988611,10.168888 C16.7923627,10.0976042 16.7818629,10.2568553 16.7578632,10.3205558 C16.7113639,10.4403733 16.5718659,10.4813236 16.6078654,10.6314747 C16.6228651,10.6936584 16.6543647,10.7497755 16.6663645,10.8119593 C16.6813642,10.8893098 16.6423649,10.959077 16.6378649,11.0364275 C16.628865,11.1683785 16.766863,11.198712 16.8028626,11.3063961 C16.8343621,11.4034635 16.8013625,11.5536145 16.6933642,11.5900148 C16.5778657,11.6309651 16.4503675,11.5263143 16.3363691,11.5141809 C16.2223709,11.5020475 16.076873,11.5338977 16.0558732,11.664332 C16.0363735,11.7795995 16.1533718,11.8736335 16.0963726,11.9919343 C16.072373,12.0419847 16.0303736,12.0814183 16.0003741,12.1269186 C15.9478747,12.2027525 15.9178752,12.2907198 15.868376,12.3680703 C15.9268751,12.369587 15.9208752,12.3331867 15.9733744,12.3438035 C16.0288737,12.3559369 16.0783729,12.2998198 16.1248722,12.2816197 C16.1338722,12.31802 16.1293722,12.3559369 16.1338722,12.3923371 C16.1728715,12.4044706 16.211871,12.3893038 16.2463705,12.3756537 C16.2508705,12.4075039 16.2358706,12.4439042 16.2493705,12.4757544 C16.2598704,12.5030546 16.2913699,12.5121547 16.3093696,12.5333881 C16.3558689,12.5895052 16.2988697,12.6820225 16.2658703,12.7305562 C16.1713716,12.8700905 16.0093739,12.9474411 15.9043754,13.0778753 C15.8053768,13.1992095 15.7963769,13.3463272 15.7228781,13.4782782 C15.6973784,13.5237785 15.6718788,13.5859623 15.7393777,13.6071958 C15.7543776,13.5829289 15.7768773,13.5632121 15.8083769,13.5632121 C15.8548761,13.5616954 15.8368765,13.596579 15.860876,13.6238792 C15.9583746,13.7482468 16.0618731,13.5434953 16.1038725,13.4843449 C16.145872,13.4206444 16.3198695,13.3250938 16.3678688,13.4312612 C16.4053683,13.5116451 16.3618688,13.6253959 16.3243694,13.6981964 C16.3873684,13.7270133 16.3693687,13.7725136 16.3843685,13.827114 C16.4038682,13.9029479 16.4728672,13.9514815 16.4728672,14.0348988 C16.4728672,14.1349995 16.2538705,14.3336843 16.3393692,14.4095181 C16.4458677,14.5035521 16.5718659,14.2426836 16.6138653,14.1865665 C16.6933642,14.0788824 16.8748615,14.0637157 16.9198609,13.9317647 C16.9693601,13.7816137 16.9528603,13.6921297 17.1523575,13.6875797 C17.2363564,13.686063 17.2978554,13.6329793 17.3773543,13.6162958 C17.4643531,13.5996124 17.5033525,13.5905123 17.5588518,13.5237785 C17.6383505,13.4282278 17.7103496,13.5419786 17.7133495,13.6178125 C17.7163495,13.6951631 17.68185,13.7922304 17.7298493,13.8619976 C17.7883484,13.9469315 17.8528475,13.8346974 17.9128467,13.780097 C17.9068468,13.8377307 17.9833456,13.8710976 18.028345,13.8892978 C18.0973439,13.8422808 18.1408433,13.7649302 18.2143423,13.7224632 C18.2488418,13.7027464 18.2878413,13.6951631 18.3268407,13.6890963 C18.3373405,13.7512801 18.3478404,13.8180139 18.4033395,13.8483475 C18.4828384,13.8938478 18.3853398,13.9378314 18.4903384,13.9863651 C18.6208365,14.0364155 18.6643359,14.1683664 18.727335,14.2745338 C18.7573345,14.3230675 19.0303306,14.0273154 19.1353291,14.0166987 C19.4833242,13.9772651 19.6648215,13.5237785 19.7938196,13.2553266 C19.9798171,12.8716072 20.0638158,12.4454209 20.1118151,12.049568 C20.2303134,11.805383 20.2783127,11.3579631 20.2303134,11.0743445 C20.2018138,10.9014432 20.3008124,10.6618082 20.2123137,10.498007 L20.2123137,10.498007 L20.2123137,10.498007 Z M17.0623589,16.2568313 C17.0713587,16.2143643 17.1613573,16.0566299 17.0773586,16.0338797 C17.047359,16.0262963 17.0218595,16.0717966 16.9948598,16.07938 C16.9588602,16.0915134 16.9198609,16.0687633 16.8868613,16.0854467 C16.8568618,16.1021302 16.8283622,16.1506639 16.8103624,16.177964 C16.7878628,16.211331 16.7968627,16.224981 16.832862,16.2431812 C16.8688616,16.262898 16.9153609,16.271998 16.9363607,16.3114317 C16.9543604,16.3463152 16.9453605,16.3933322 16.9408605,16.4297325 C16.9408605,16.4282158 16.9468604,16.4221491 16.9483605,16.4160824 C16.9543604,16.4145657 16.9648603,16.4130491 16.9708602,16.4145657 L16.9633602,16.4297325 C17.0593589,16.4448993 17.051859,16.319015 17.0623589,16.2568313 L17.0623589,16.2568313 L17.0623589,16.2568313 Z M18.1858427,14.3594678 C18.1888426,14.4049681 18.238342,14.4004181 18.2713415,14.3882846 C18.3013411,14.3791846 18.3208408,14.3534011 18.3403404,14.3306509 C18.3673401,14.2957673 18.3838399,14.2608837 18.3598402,14.2199334 C18.3358406,14.1774665 18.3208408,14.1471329 18.3088409,14.0970826 C18.2893412,14.1076993 18.2653416,14.1258994 18.2443419,14.1319662 C18.2233421,14.1395495 18.2203422,14.1334828 18.1963426,14.1319662 C18.1408433,14.1304495 18.1528432,14.1729164 18.1288435,14.2078 C18.1093437,14.2381336 18.0658444,14.250267 18.0823442,14.2897006 C18.094344,14.3200342 18.1438434,14.3458177 18.172343,14.3594678 L18.1798428,14.3503677 C18.1783429,14.3534011 18.1768428,14.3549177 18.1753429,14.3579511 C18.1783429,14.3594678 18.1828427,14.3594678 18.1858427,14.3594678 L18.1858427,14.3594678 L18.1858427,14.3594678 Z M12.7709203,17.6157743 C12.8264195,17.5171902 12.9254181,17.4550064 13.0139168,17.386756 C13.1204153,17.3048554 13.214914,17.2093047 13.2989128,17.1061706 C13.2494135,17.0940372 13.2464135,17.0470202 13.214914,17.0166867 C13.1669147,16.9696697 13.0934157,17.0000032 13.0829159,16.9287194 C13.072416,16.8650189 13.0199168,16.8513688 12.9689175,16.8255853 C12.8519192,16.7664349 12.8039199,16.6511674 12.7094212,16.5707835 C12.6059227,16.4797829 12.4649247,16.5101164 12.3389265,16.4858496 C12.2279281,16.4646161 12.1154297,16.2871648 11.9969314,16.3629987 C11.9219325,16.4100157 11.887433,16.5298332 11.9384323,16.6041504 C11.9789317,16.6617841 12.0479307,16.690601 12.0749303,16.7588515 C12.0344309,16.7967684 12.025431,16.8210353 12.0749303,16.8559189 C12.1334295,16.8968691 12.2459278,16.9393361 12.2174283,17.0288201 C12.2024285,17.0773538 12.1619291,17.1243708 12.1094298,17.1334708 C12.0719303,17.1410542 11.9804317,17.1198207 11.9999314,17.1880712 C11.957932,17.0758371 11.8394337,17.2517717 11.7749346,17.1592543 C11.7224354,17.0849372 11.6894358,17.0182033 11.606937,16.968153 C11.5004385,16.9029359 11.6504364,16.8392354 11.6324367,16.7406514 C11.605437,16.596567 11.4299395,16.6360006 11.3669405,16.5298332 C11.329441,16.4691661 11.3804403,16.4206324 11.4044399,16.3675487 C11.4284396,16.3129483 11.4929386,16.356932 11.5274382,16.3720988 C11.6399365,16.4251825 11.8049342,16.4054657 11.8994328,16.3281151 C11.9429322,16.2917149 12.0389308,16.1233637 11.9174326,16.1233637 C11.8334338,16.1248803 11.7689347,16.1976809 11.6894358,16.2022309 C11.677436,16.1066802 11.6324367,15.9443957 11.7344352,15.8806953 C11.8274339,15.8230615 12.0224311,15.7563277 11.9399322,15.6076933 C11.9099327,15.5561263 11.8574334,15.6410602 11.813934,15.6031433 C11.7959343,15.5879765 11.8094341,15.5530929 11.815434,15.5364095 C11.7869344,15.510626 11.7599348,15.4787758 11.744935,15.4423755 C11.678936,15.2816076 11.8739332,15.1557234 11.7914344,14.9858555 C11.7569349,14.9145717 11.6984357,14.8721047 11.6339366,14.8281211 C11.5694376,14.7826208 11.5664376,14.724987 11.5424379,14.6567365 C11.5304381,14.6188196 11.467439,14.5293356 11.4134398,14.5520858 C11.3669405,14.5702859 11.3534406,14.6506698 11.3174412,14.6840367 C11.2364423,14.762904 11.0654448,14.7932375 10.9574463,14.767454 C10.8704476,14.7477372 10.8749475,14.7143703 10.8329481,14.6567365 C10.8194483,14.6355031 10.7894487,14.6339864 10.766949,14.6248863 C10.7279496,14.6097195 10.7234497,14.574836 10.7144498,14.5399524 C10.6784503,14.4080014 10.4174541,14.5718026 10.3769546,14.386768 C10.3679548,14.344301 10.3829546,14.2730172 10.3214554,14.2639171 C10.2524564,14.2517837 10.2494565,14.1850499 10.2494565,14.1289328 C10.2494565,14.0834325 10.2524564,14.019732 10.2044571,13.9939485 C10.142958,13.9605816 10.1279582,13.9757484 10.1084585,13.9059812 C10.0859588,13.8164972 10.0244597,13.9090146 9.97346042,13.8908144 C9.86546198,13.8483475 9.88496169,13.9014312 9.79796295,13.9469315 C9.64946507,14.0257987 9.63296531,13.6602795 9.58196604,13.5889956 C9.48296745,13.4524947 9.5084671,13.7573468 9.44096806,13.7952638 C9.37946895,13.8301473 9.31496987,13.7497634 9.29247019,13.7027464 C9.27897039,13.6754462 9.2714705,13.6451127 9.25497073,13.6178125 C9.22947109,13.5783789 9.18447174,13.5616954 9.15897211,13.5222618 C9.1379724,13.4873782 9.10647286,13.446428 9.09147307,13.408511 C9.07797327,13.3751441 9.08097322,13.3326771 9.05547359,13.305377 C9.02397404,13.2704934 9.06297347,13.2128596 9.08547316,13.168876 C9.1244726,13.1537092 9.18297177,13.1840428 9.21147134,13.2098263 C9.28197034,13.2689767 9.38846881,13.5283285 9.51146705,13.4797949 C9.48596742,13.446428 9.50246719,13.4054777 9.48446744,13.3690774 C9.46496771,13.3311605 9.42746826,13.3084103 9.39896866,13.2780768 C9.33596956,13.2052762 9.26697056,13.1324757 9.22497116,13.0445084 C9.18897168,12.9686746 9.17097194,12.8882907 9.09747298,12.835207 C9.03747384,12.7912233 8.91897554,12.7487563 8.94447517,12.6547223 C8.94447517,12.6532057 8.94597516,12.651689 8.94597516,12.651689 C8.99547445,12.6623057 9.02997396,12.698706 9.06597344,12.7305562 C9.11847269,12.7760565 9.18597171,12.7988067 9.24747084,12.8291402 C9.35996923,12.8837406 9.49046736,12.9216576 9.58646598,13.0050748 C9.64646512,13.0551252 9.61496557,13.1673593 9.68996449,13.2295431 C9.7454637,13.2750434 9.82796252,13.4282278 9.92996105,13.3675607 C9.96746051,13.3448106 9.98396028,13.3008269 10.0214597,13.2750434 C10.0619592,13.2462265 10.1294582,13.220443 10.1759575,13.1992095 C10.2044571,13.1855594 10.2524564,13.1901095 10.2749561,13.1673593 C10.3109556,13.1324757 10.2254568,13.032375 10.2059571,13.0065915 C10.1294582,12.9080075 10.0589592,12.8003234 9.95696066,12.7260062 C9.90446142,12.6880892 9.85346215,12.647139 9.79196304,12.6213554 C9.7589635,12.6077053 9.70046434,12.609222 9.69446443,12.5637217 C9.71096419,12.5743384 9.71996406,12.5713051 9.72296402,12.5546216 C9.72146405,12.5242881 9.67796466,12.5227714 9.65696497,12.5167047 C9.60596569,12.5030546 9.57146619,12.5030546 9.55196647,12.4605876 C9.52646684,12.4090206 9.43646812,12.4105373 9.38846881,12.3984039 C9.31646984,12.3802037 9.25947067,12.3256033 9.19047165,12.2983031 C9.10947281,12.2679696 9.0479737,12.2998198 8.96847483,12.31802 C8.95497503,12.3210533 8.92797542,12.3680703 8.90247578,12.4075039 C8.8454766,12.3938538 8.7824775,12.3999205 8.73447819,12.4378375 C8.66247923,12.4939545 8.62047983,12.5788885 8.56348064,12.6486556 C8.53948099,12.6774725 8.50498148,12.7062894 8.47048197,12.6956726 C8.46448206,12.6926393 8.46748202,12.6850559 8.46298208,12.6820225 C8.50648145,12.3711037 8.53048111,12.0571514 8.50198153,12.1193352 C8.44498234,12.2406694 8.40298294,12.3256033 8.35948356,12.4135706 C8.29648447,12.3862704 8.22298552,12.3847538 8.19598591,12.4514876 C8.16748632,12.5227714 8.20498577,12.6152887 8.15998643,12.6774725 C8.14948658,12.694156 8.13298681,12.6926393 8.11798703,12.7002227 C8.11498707,12.6926393 8.09998729,12.6729225 8.10148726,12.6714058 C8.08798746,12.694156 8.08648747,12.7017393 8.07448765,12.7214561 C8.0294883,12.7229728 7.97398909,12.7047727 7.91848989,12.6865726 C7.91848989,12.6865726 7.91848989,12.6820225 7.91698991,12.6820225 C7.91548992,12.6835392 7.91548992,12.6835392 7.91398995,12.6850559 C7.8479909,12.6623057 7.77899188,12.6410722 7.71899274,12.6623057 C7.59899447,12.7047727 7.59449453,12.8761572 7.51799562,12.980808 C7.40399726,13.1400591 7.11000147,13.0718086 7.05900221,12.882224 C7.10100161,12.8306569 7.14150103,12.7790899 7.18350043,12.7275229 C7.11900135,12.5637217 6.94650382,12.4499709 6.77250631,12.4545209 C6.72300702,12.4560376 6.67050778,12.4651377 6.62550841,12.4439042 C6.57900908,12.421154 6.55350945,12.3726203 6.51301003,12.3422868 C6.38701184,12.2482528 6.21901425,12.3726203 6.11401575,12.4894045 C5.93401832,12.519738 5.76752071,12.6213554 5.65502233,12.7669565 C5.58302336,12.7608898 5.5110244,12.754823 5.4405254,12.7487563 C5.4825248,12.8640238 5.34302681,12.9580578 5.28002771,13.0642252 C5.20202883,13.1931428 5.24252825,13.3432939 5.31902714,13.4813115 C5.31002728,13.502545 5.30402736,13.5252952 5.28452765,13.5343952 C5.19302895,13.5829289 5.21702861,13.6117458 5.24402822,13.7103298 C5.26802788,13.7952638 5.259028,13.9545149 5.23952829,14.0394488 C5.22452851,14.1061826 5.15852944,14.2669504 5.07753061,14.2290335 C5.03553122,14.2078 4.99053186,14.1911166 4.95153241,14.2305502 C4.93353267,14.2472336 4.92153284,14.2684671 4.91553293,14.2912173 C4.88853332,14.292734 4.8615337,14.2957673 4.83603407,14.301834 C4.7850348,14.3124508 4.73103557,14.3245842 4.68153629,14.3033507 C4.63203699,14.2821172 4.56603794,14.2411669 4.51053874,14.2593671 C4.4640394,14.2745338 4.37254072,14.3154841 4.35304099,14.3640178 C4.34404113,14.3852513 4.37254072,14.4413683 4.37254072,14.4701852 C4.37104073,14.5217523 4.41154015,14.5991028 4.39504039,14.6461198 C4.35754093,14.6279197 4.30204173,14.621853 4.27654209,14.583936 C4.25254243,14.5520858 4.21654295,14.5596692 4.18954334,14.5263023 C4.18354343,14.583936 4.16254372,14.6643199 4.09354471,14.6794867 C4.02754566,14.6946535 3.96304658,14.6415698 3.89554755,14.6597699 C3.71855009,14.7052702 4.00204603,14.9267051 4.03954548,14.9691721 C4.10254459,15.0404559 4.12354428,15.1344899 4.17004361,15.2148738 C4.22104289,15.3028411 4.32604139,15.331658 4.3875405,15.4090085 C4.43853977,15.4742257 4.44903961,15.562193 4.52253857,15.6107267 C4.60353741,15.6668438 4.67703635,15.7168941 4.71003588,15.8124448 C4.74453538,15.7790779 4.81653436,15.9368123 4.8900333,15.8109281 C4.92903274,15.7426776 4.99803174,15.6835272 5.04153113,15.7942447 C5.07903059,15.8897953 5.04153113,15.9504624 5.12402995,16.0338797 C5.18702904,16.0990968 5.18402909,16.1764474 5.07603062,16.168864 C5.09403037,16.2173977 5.12252996,16.2659313 5.07603062,16.309915 C5.05503093,16.3311485 4.9950318,16.3751321 5.03853117,16.4054657 C5.08803045,16.3827155 5.1405297,16.3690654 5.190029,16.3463152 C5.24402822,16.3235651 5.29652747,16.2689647 5.35952656,16.2704814 C5.36252653,16.2901982 5.27552777,16.3478319 5.32952699,16.352382 C5.37452635,16.356932 5.43902543,16.309915 5.47502491,16.3493486 C5.51552433,16.3918156 5.46452506,16.4570327 5.48852472,16.5040497 C5.51252437,16.5525834 5.59352321,16.5161831 5.63252265,16.5237665 C5.61602289,16.5662335 5.55302379,16.5586501 5.51852428,16.5753335 C5.59802315,16.6724009 5.49452463,16.8149686 5.37902629,16.8180019 C5.32352708,16.8180019 5.1270299,16.592017 5.11803004,16.737618 C5.11653005,16.780085 5.13002986,16.8331687 5.14352967,16.874119 C5.16152941,16.9272027 5.29052756,16.9044525 5.3370269,16.9241693 C5.40452592,16.9514695 5.4825248,17.0166867 5.50952442,17.0849372 C5.53502405,17.1547043 5.59352321,17.2002046 5.61602289,17.2669384 C5.65952227,17.391306 5.77802057,17.4079894 5.90101881,17.4443897 C6.06451645,17.4929234 5.9850176,17.7462085 5.97601774,17.8675427 C5.96851783,17.9873602 6.13651543,18.0161771 6.21301434,18.0844276 C6.29851311,18.1587448 6.31201291,18.3028291 6.17101494,18.3149625 C6.09901596,18.3210293 5.97901769,18.2876624 5.95201807,18.3801797 C5.91301863,18.5106139 6.11101579,18.4969638 6.19801455,18.5257807 C6.23851397,18.5394308 6.40201163,18.5561143 6.41701141,18.5940312 C6.43951109,18.6531816 6.42151135,18.7335655 6.44251104,18.7957493 C6.49351031,18.9550004 6.64050821,19.0611678 6.78300616,19.1400351 C7.08900178,19.3114196 7.45199657,19.4191037 7.78799176,19.5146544 C7.97548908,19.5692548 8.16598634,19.6117217 8.35798358,19.6375053 C8.54398093,19.6617721 8.70747857,19.6466053 8.86647629,19.7497394 C8.97597473,19.8210232 9.04497373,19.7679395 9.15747212,19.7876563 C9.20547143,19.7967564 9.22647114,19.84074 9.26247062,19.8665236 C9.30297004,19.8983738 9.34946938,19.8574235 9.39296875,19.8741069 C9.40046864,19.8452901 9.39746869,19.8179899 9.38396888,19.7906897 C9.46946765,19.8225399 9.57446615,19.9135406 9.66446486,19.84074 C9.70946422,19.8043398 9.73946379,19.7542894 9.78596312,19.7194058 C9.84146232,19.7239559 9.89546155,19.7269892 9.95096074,19.7269892 C10.1834574,19.7269892 10.3664548,19.6208218 10.5524521,19.4964543 C10.7519493,19.3629866 10.9919458,19.3599533 11.2229425,19.3387198 C11.467439,19.314453 11.7269353,19.2826027 11.9504321,19.1764353 C12.1454293,19.0824013 12.1949286,18.9110168 12.2504278,18.7214321 C12.3104269,18.515164 12.4904244,18.4317467 12.6089227,18.2649122 C12.7484206,18.0707775 12.656922,17.8174923 12.7709203,17.6157743 L12.7709203,17.6157743 L12.7709203,17.6157743 Z M3.82354859,14.8796881 C3.81604868,14.8311544 3.79804894,14.8008209 3.76054949,14.772004 C3.75904951,14.7765541 3.75754954,14.7795874 3.75754954,14.7856541 C3.70655026,14.7598706 3.70055035,14.6628033 3.63155133,14.6703866 C3.57455216,14.579386 3.43055421,14.6203363 3.38555487,14.7037535 C3.3555553,14.7598706 3.39155478,14.7856541 3.4245543,14.8266044 C3.4665537,14.8781714 3.45905381,14.9176051 3.4740536,14.9767555 C3.51155306,15.1299399 3.63905124,15.0252892 3.72904994,15.0844396 C3.76354945,15.1071897 3.77704925,15.1724069 3.82804851,15.1617901 C3.8850477,15.14814 3.88204775,15.0632061 3.86704796,15.0252892 C3.84604827,14.9706888 3.83104848,14.9388385 3.82354859,14.8796881 L3.82354859,14.8796881 L3.82354859,14.8796881 Z M5.0220314,16.686051 C5.03103128,16.6602675 4.99053186,16.6314506 4.96353224,16.6329673 C4.93953258,16.634484 4.91703292,16.6678509 4.90803304,16.686051 C4.87803347,16.7391347 4.911033,16.8104185 4.980032,16.8104185 C4.99653177,16.7816017 4.99053186,16.7254846 5.03403123,16.7209346 C5.03103128,16.7072845 5.0220314,16.7027344 5.01003157,16.6981844 L5.0220314,16.686051 L5.0220314,16.686051 Z M3.74704968,14.7613873 C3.75154962,14.7644206 3.75604955,14.767454 3.76054949,14.772004 C3.76504943,14.7644206 3.76954936,14.7583539 3.77254931,14.7492539 L3.74704968,14.7613873 L3.74704968,14.7613873 Z M17.8018483,16.8892858 C17.7763486,16.9135526 17.7838484,16.9408528 17.7718486,16.9696697 C17.7583489,17.0045532 17.7058496,17.0182033 17.67735,17.0364035 C17.6323506,17.0652203 17.6173508,17.1334708 17.5678516,17.1501543 C17.5468518,17.1183041 17.5153523,17.0288201 17.4718529,17.1061706 C17.4463533,17.156221 17.4628531,17.2062713 17.4223537,17.2517717 C17.3818543,17.2942386 17.3848542,17.3458057 17.3563546,17.3928227 C17.3128551,17.4671399 17.2693558,17.5111235 17.195857,17.5551072 C17.1373577,17.5899907 17.1253579,17.6552079 17.0833585,17.7037415 C17.0383591,17.7568253 16.9693601,17.7765421 16.9078611,17.8038423 C16.8643616,17.8220424 16.7923627,17.8736094 16.7428634,17.8447925 C16.6768644,17.8038423 16.766863,17.7310417 16.7983626,17.7052582 C16.8283622,17.6809914 16.9708602,17.5945408 16.9378606,17.5460071 C16.9153609,17.5141569 16.8343621,17.5187069 16.8013625,17.5217402 C16.7338636,17.5293236 16.6828643,17.5975741 16.6258651,17.6294243 C16.561366,17.6658246 16.5058668,17.6961582 16.4353678,17.720425 C16.354369,17.7492419 16.3483691,17.8250757 16.28387,17.8705761 C16.2328707,17.9100097 16.1668716,17.9403432 16.1008726,17.9403432 C16.0138739,17.9403432 16.0183738,17.8675427 15.9928741,17.8068756 C15.9598747,17.8114256 15.9313751,17.8538926 15.8998755,17.8675427 C15.8488762,17.8887762 15.8158767,17.913043 15.8383763,17.9691601 C15.859376,18.0267938 15.6268794,18.0798775 15.58638,18.1086944 C15.5773802,18.0798775 15.6223794,18.049544 15.6403792,18.0328605 C15.5683802,18.0267938 15.4873814,18.0889776 15.4138824,18.0995943 C15.3433835,18.1086944 15.2563847,18.1572281 15.2458848,18.2300286 C15.238385,18.2876624 15.1618861,18.2861457 15.1138867,18.3058625 C15.0343879,18.3392294 15.0673874,18.3862464 15.0523876,18.4499468 C15.0223881,18.5697644 14.7718916,18.4787637 14.8993898,18.3195126 C14.9443892,18.2633955 15.0118882,18.2269953 15.0523876,18.1693615 C15.098887,18.1026277 15.1063869,18.0192104 15.1423863,17.9479266 C15.0628875,17.9706768 15.0028883,18.0161771 14.9353893,18.0601607 C14.8588904,18.1102111 14.7943913,18.0980777 14.7088926,18.0813942 C14.609894,18.0601607 14.540895,18.1102111 14.4493963,18.1329613 C14.3908971,18.1466113 14.260399,18.1420613 14.2528991,18.2269953 C14.2483992,18.2815956 14.3428978,18.2922124 14.3743973,18.3240626 C14.4208967,18.3725963 14.471896,18.4438801 14.5108954,18.4984805 C14.5423949,18.5409475 14.6593933,18.6000979 14.6518934,18.6546983 C14.6398935,18.7608657 14.5063954,18.7426656 14.4343965,18.7608657 C14.3623975,18.7790658 14.3518977,18.844283 14.2993984,18.8837166 C14.2393993,18.9277002 14.1584004,18.8761332 14.0924014,18.9034334 C14.0249024,18.9292169 13.976903,18.989884 13.9184039,19.0293176 C13.8194053,19.0975681 13.7549062,19.0232509 13.6529077,19.0187009 C13.5704089,19.0156675 13.4954099,19.0535845 13.4174111,19.0702679 C13.3469121,19.0854347 13.2614133,19.0975681 13.2074141,19.1476185 C13.0889158,19.2537859 13.4699103,19.224969 13.5059098,19.2219356 C13.48941,19.2826027 13.4729103,19.3538866 13.4174111,19.3933202 C13.3484121,19.4433706 13.2509134,19.4312371 13.1714146,19.4494373 C13.1099155,19.464604 13.0244167,19.5328545 13.1144154,19.5813882 C13.1954142,19.6223385 13.2989128,19.601105 13.3799116,19.5722881 C13.4729103,19.5404379 13.559909,19.4903876 13.6574076,19.4691541 C13.7594062,19.4464039 13.8659046,19.4570206 13.9679032,19.4388205 C14.0774016,19.417587 14.1734002,19.3584366 14.2753988,19.3174863 C14.3728974,19.2780527 14.4748959,19.2628859 14.5783944,19.2598526 C14.5573947,19.2977695 14.4553962,19.2947362 14.4163967,19.3038362 C14.3398978,19.319003 14.2873986,19.3857368 14.2078997,19.3811868 C14.117901,19.3781534 14.1284009,19.4418539 14.0639018,19.4570206 C14.0219024,19.4676374 13.9229038,19.5647047 13.8914043,19.5040376 C13.8674046,19.4570206 13.8209053,19.4661207 13.8059055,19.5237545 C13.7939057,19.5662214 13.8179053,19.5813882 13.7594062,19.5829049 C13.7144068,19.5829049 13.6934071,19.5647047 13.6529077,19.554088 C13.5719088,19.5328545 13.5359094,19.6162718 13.4789102,19.6375053 C13.3949114,19.6693555 13.3049127,19.6587387 13.2239138,19.7118225 C13.1774145,19.742156 13.1264152,19.7512561 13.070916,19.7679395 C12.9704175,19.7997897 12.8759188,19.8377067 12.7754203,19.8710736 C12.6974214,19.8983738 12.6194225,19.9317407 12.5354237,19.9332574 C12.5009242,19.9332574 12.3629262,19.9089905 12.3404265,19.9499408 C12.2984271,20.0257747 12.4274253,19.9969578 12.4544249,19.981791 C12.5309238,19.9408407 12.6239224,19.9651076 12.7094212,19.9651076 C12.8144197,19.9651076 12.9014185,19.9438741 12.9959171,19.8953404 C13.0214167,19.8816903 13.1909143,19.8452901 13.1999142,19.8650069 C13.214914,19.8741069 13.3274123,19.8331566 13.3469121,19.8286066 C13.4384108,19.8073731 13.5299094,19.7876563 13.6199082,19.7649062 C13.8974042,19.6936223 14.1704003,19.5859382 14.4403964,19.4934209 C14.9788887,19.3114196 15.4738816,19.0035341 15.9418748,18.6910985 C16.1533718,18.5500475 16.3258694,18.3650129 16.5553661,18.2497454 C16.7863628,18.1344779 16.9933599,17.9812935 17.2048568,17.8372092 C17.4118538,17.6961582 17.5693515,17.5020234 17.7418491,17.3245722 C17.9158466,17.1440876 18.0628444,16.9742197 18.1393434,16.7345847 C18.095844,16.7239679 18.0508447,16.8134519 18.0148451,16.8301353 C17.954846,16.8589522 17.8498476,16.8437854 17.8018483,16.8892858 L17.8018483,16.8892858 L17.8018483,16.8892858 Z M16.5088668,16.6451007 C16.561366,16.5738169 16.5163667,16.4767495 16.423368,16.5328666 C16.3888685,16.5525834 16.3933683,16.592017 16.3663688,16.6162838 C16.3378692,16.6420673 16.3348692,16.6117338 16.3063697,16.6041504 C16.2658703,16.5950503 16.1998712,16.6496507 16.1863714,16.686051 C16.1308722,16.6845343 16.0813728,16.7467181 16.1068725,16.7952518 C16.1803715,16.7679516 16.2253709,16.6997011 16.3048696,16.7209346 C16.3678688,16.737618 16.4683674,16.6981844 16.5088668,16.6451007 L16.5088668,16.6451007 L16.5088668,16.6451007 Z"/> + </mask> + </defs> + + <rect width="24" height="24" mask="url(#mask-globe)" class="fieldtext"/> +</svg> diff --git a/browser/themes/shared/controlcenter/connection.svg b/browser/themes/shared/controlcenter/connection.svg new file mode 100644 index 000000000..85396d68f --- /dev/null +++ b/browser/themes/shared/controlcenter/connection.svg @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="24" height="24" viewBox="0 0 24 24"> +#include ../icon-colors.inc.svg + <style> + svg > rect:not(:target) { + display: none; + } + + #connection-secure { + fill: #4d9a26; + } + </style> + + <defs> + <rect id="shape-lock-clasp-outer" x="5" y="1" width="14" height="20" rx="7" ry="7" /> + <rect id="shape-lock-clasp-inner" x="8" y="4" width="8" height="14" rx="4" ry="4" /> + <rect id="shape-lock-base" x="3" y="10" width="18" height="13" rx="1.5" ry="1.5" /> + + <mask id="mask-clasp-cutout"> + <rect width="24" height="24" fill="#000" /> + <use xlink:href="#shape-lock-clasp-outer" fill="#fff" /> + <use xlink:href="#shape-lock-clasp-inner" fill="#000" /> + </mask> + + <mask id="mask-lock"> + <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" fill="#fff"/> + <use xlink:href="#shape-lock-base" fill="#fff"/> + </mask> + </defs> + + <rect id="connection-degraded" class="fieldtext" width="24" height="24" mask="url(#mask-lock)"/> + <rect id="connection-secure" width="24" height="24" mask="url(#mask-lock)"/> +</svg> diff --git a/browser/themes/shared/controlcenter/mcb-disabled.svg b/browser/themes/shared/controlcenter/mcb-disabled.svg new file mode 100644 index 000000000..76bad47ee --- /dev/null +++ b/browser/themes/shared/controlcenter/mcb-disabled.svg @@ -0,0 +1,34 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="24" height="24" viewBox="0 0 24 24"> +#include ../icon-colors.inc.svg + <defs> + <rect id="shape-lock-clasp-outer" x="5" y="1" width="14" height="20" rx="7" ry="7" /> + <rect id="shape-lock-clasp-inner" x="8" y="4" width="8" height="14" rx="4" ry="4" /> + <rect id="shape-lock-base" x="3" y="10" width="18" height="13" rx="1.5" ry="1.5" /> + + <mask id="mask-clasp-cutout"> + <rect width="24" height="24" fill="#000" /> + <use xlink:href="#shape-lock-clasp-outer" fill="#fff" /> + <use xlink:href="#shape-lock-clasp-inner" fill="#000" /> + <line x1="3" y1="21" x2="21.5" y2="0.5" stroke="#000" stroke-width="3" /> + <line x1="3" y1="25" x2="21.5" y2="4.5" stroke="#000" stroke-width="3" /> + <rect x="3" y="10" width="18" height="13" rx="1.5" ry="1.5" /> + </mask> + + <mask id="mask-base-cutout"> + <rect width="24" height="24" fill="#000" /> + <use xlink:href="#shape-lock-base" fill="#fff" /> + <line x1="2.25" y1="24.75" x2="21.5" y2="4.5" stroke="#000" stroke-width="3" /> + </mask> + </defs> + + <use class="fieldtext" xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)"/> + <use class="fieldtext" xlink:href="#shape-lock-base" mask="url(#mask-base-cutout)"/> + + <line x1="2.25" y1="22.75" x2="21.5" y2="2.5" stroke="#d92d21" stroke-width="3" /> +</svg> diff --git a/browser/themes/shared/controlcenter/panel.inc.css b/browser/themes/shared/controlcenter/panel.inc.css new file mode 100644 index 000000000..a0f3aa854 --- /dev/null +++ b/browser/themes/shared/controlcenter/panel.inc.css @@ -0,0 +1,445 @@ +%if 0 +/* 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/. */ +%endif + +/* Hide all conditional elements by default. */ +:-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) { + display: none; +} + +/* Show the right elements for the right connection states. */ +#identity-popup[connection=not-secure] [when-connection~=not-secure], +#identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden], +#identity-popup[connection=secure-ev] [when-connection~=secure-ev], +#identity-popup[connection=secure] [when-connection~=secure], +#identity-popup[connection=chrome] [when-connection~=chrome], +#identity-popup[connection=file] [when-connection~=file], +/* Show insecure login forms messages when needed. */ +#identity-popup[loginforms=insecure] [when-loginforms=insecure], +/* Show weak cipher messages when needed. */ +#identity-popup[ciphers=weak] [when-ciphers~=weak], +/* Show mixed content warnings when needed */ +#identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded], +#identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded], +#identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked], +/* Show the right elements when there is mixed passive content loaded and active blocked. */ +#identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded], +/* Show 'disable MCB' button always when there is mixed active content blocked. */ +#identity-popup-securityView-body[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] { + display: inherit; +} + +/* Hide redundant messages based on insecure login forms presence. */ +#identity-popup[loginforms=secure] [and-when-loginforms=insecure] { + display: none; +} +#identity-popup[loginforms=insecure] [and-when-loginforms=secure] { + display: none; +} + +/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */ +#identity-popup-securityView-body:-moz-any([mixedcontent],[ciphers]) > description[when-connection=not-secure], +/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */ +#identity-popup-securityView-body[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] { + display: none; +} + +/* Make sure hidden elements don't accidentally become visible from one of the + above selectors (see Bug 1194258) */ +#identity-popup [hidden] { + display: none !important; +} + +#identity-popup, +#identity-popup:not([panelopen]) .panel-viewstack[viewtype="main"]:not([transitioning]) #identity-popup-mainView { + /* Tiny hack to ensure the panel shrinks back to its original + size after closing a subview that is bigger than the main view. */ + max-height: 0; +} + +.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView menulist, +.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView button:not([panel-multiview-anchor]) { + -moz-user-focus: ignore; +} + +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +.panel-mainview[panelid=identity-popup] { + min-width: 30em; +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews { + transform: translateX(100%); + box-shadow: none; +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) { + transform: translateX(-100%); +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews { + background: var(--arrowpanel-background); + padding: 0; +} + +.identity-popup-section:not(:first-child) { + border-top: 1px solid var(--panel-separator-color); +} + +#identity-popup-securityView, +#identity-popup-security-content, +#identity-popup-permissions-content, +#tracking-protection-content { + background-repeat: no-repeat; + background-position: 1em 1em; + background-size: 24px auto; +} + +#identity-popup-security-content, +#identity-popup-permissions-content, +#tracking-protection-content { + padding: 0.5em 0 1em; + /* .identity-popup-headline.host depends on this width */ + padding-inline-start: calc(2em + 24px); + padding-inline-end: 1em; +} + +#identity-popup-securityView:-moz-locale-dir(rtl), +#identity-popup-security-content:-moz-locale-dir(rtl), +#identity-popup-permissions-content:-moz-locale-dir(rtl), +#tracking-protection-content:-moz-locale-dir(rtl) { + background-position: calc(100% - 1em) 1em; +} + +/* EXPAND BUTTON */ + +.identity-popup-expander { + margin: 0; + padding: 4px 0; + min-width: auto; + width: var(--identity-popup-expander-width); + border: 0 none; + -moz-appearance: none; + background: url("chrome://browser/skin/controlcenter/arrow-subview.svg") center no-repeat; + background-size: 16px, auto; +} + +.identity-popup-expander:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.identity-popup-expander[panel-multiview-anchor] { + transition: background-color 250ms ease-in; + background-color: Highlight; + background-image: url("chrome://browser/skin/controlcenter/arrow-subview-back.svg"), + linear-gradient(rgba(255,255,255,0.3), transparent); +} + +.identity-popup-expander > .button-box { + padding: 0; + -moz-appearance: none; + border-style: none; + border-left: 1px solid var(--panel-separator-color); +} + +.identity-popup-expander:-moz-focusring > .button-box, +.identity-popup-expander[panel-multiview-anchor] > .button-box { + border-style: none; +} + +.identity-popup-expander:hover { + background-color: var(--arrowpanel-dimmed); + background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg"), + linear-gradient(rgba(255,255,255,0.3), transparent); +} + +.identity-popup-expander:hover:active { + background-color: var(--arrowpanel-dimmed-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +/* CONTENT */ + +.identity-popup-permission-label, +.identity-popup-permission-state-label, +#identity-popup-security-content > description, +#identity-popup-security-descriptions > description, +#identity-popup-securityView-header > description, +#identity-popup-securityView-body > description, +#identity-popup-permissions-content > description, +#tracking-protection-content > label { + white-space: pre-wrap; + font-size: 110%; + margin: 0; +} + +.identity-popup-headline { + margin: 3px 0 4px; + font-size: 150%; +} + +.identity-popup-headline.host { + word-wrap: break-word; + /* 1em + 2em + 24px is #identity-popup-security-content padding + * 30em is .panel-mainview:not([panelid="PanelUI-popup"]) width */ + max-width: calc(30rem - 3rem - 24px - var(--identity-popup-expander-width)) +} + +.identity-popup-warning-gray { + padding-inline-start: 24px; + background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%; +} + +.identity-popup-warning-yellow { + padding-inline-start: 24px; + background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%; +} + +.identity-popup-warning-gray:-moz-locale-dir(rtl), +.identity-popup-warning-yellow:-moz-locale-dir(rtl) { + background-position: 100% 50%; +} + +/* SECURITY */ + +.identity-popup-connection-secure { + color: #418220; +} + +.identity-popup-connection-not-secure { + color: #d74345; +} + +#identity-popup-securityView { + overflow: hidden; +} + +#identity-popup-securityView, +#identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg); +} + +#identity-popup[connection=chrome] #identity-popup-securityView, +#identity-popup[connection=chrome] #identity-popup-security-content { + background-image: url(chrome://branding/content/icon48.png); +} + +#identity-popup[connection^=secure] #identity-popup-securityView, +#identity-popup[connection^=secure] #identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-secure); +} + +/* Use [isbroken] to make sure we don't show a lock on an http page. See Bug 1192162. */ +#identity-popup[ciphers=weak] #identity-popup-securityView, +#identity-popup[ciphers=weak] #identity-popup-security-content, +#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-securityView, +#identity-popup[mixedcontent~=passive-loaded][isbroken] #identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/connection.svg#connection-degraded); +} + +#identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView, +#identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content { + background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); +} + +#identity-popup[loginforms=insecure] #identity-popup-securityView, +#identity-popup[loginforms=insecure] #identity-popup-security-content, +#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-securityView, +#identity-popup[mixedcontent~=active-loaded][isbroken] #identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); +} + +#identity-popup-security-descriptions > description { + margin-top: 6px; + color: Graytext; +} + +#identity-popup-securityView-header, +#identity-popup-securityView-body { + margin-inline-start: calc(2em + 24px); + margin-inline-end: 1em; +} + +#identity-popup-securityView-header { + margin-top: 0.5em; + border-bottom: 1px solid var(--panel-separator-color); + padding-bottom: 1em; +} + +#identity-popup-securityView-body { + padding-inline-end: 1em; +} + +#identity-popup-securityView-footer { + margin-top: 1em; + background-color: var(--arrowpanel-dimmed); +} + +#identity-popup-securityView-footer > button { + -moz-appearance: none; + margin: 0; + border: none; + border-top: 1px solid var(--panel-separator-color); + padding: 8px 20px; + color: inherit; + background-color: transparent; +} + +#identity-popup-securityView-footer > button:hover, +#identity-popup-securityView-footer > button:focus { + background-color: var(--arrowpanel-dimmed); +} + +#identity-popup-securityView-footer > button:hover:active { + background-color: var(--arrowpanel-dimmed-further); +} + +#identity-popup-content-verifier ~ description { + margin-top: 1em; + color: Graytext; +} + +description#identity-popup-content-verified-by, +description#identity-popup-content-owner, +description#identity-popup-content-verifier, +#identity-popup-securityView-body > button { + margin-top: 1em; +} + +#identity-popup-securityView-body > button { + margin-inline-start: 0; + margin-inline-end: 0; +} + +/* TRACKING PROTECTION */ + +#tracking-protection-content { + background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#enabled"); +} + +#tracking-protection-content[state="loaded-tracking-content"] { + background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg#disabled"); +} + +#tracking-action-block, +#tracking-action-unblock, +#tracking-action-unblock-private { + margin: 1em 0 0; +} + +#tracking-protection-content[state] > #tracking-not-detected, +#tracking-protection-content:not([state="blocked-tracking-content"]) > #tracking-blocked, +#main-window[privatebrowsingmode] #tracking-action-unblock, +#main-window:not([privatebrowsingmode]) #tracking-action-unblock-private, +#tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock, +#tracking-protection-content:not([state="blocked-tracking-content"]) #tracking-action-unblock-private, +#tracking-protection-content:not([state="loaded-tracking-content"]) > #tracking-loaded, +#tracking-protection-content:not([state="loaded-tracking-content"]) #tracking-action-block, +#tracking-protection-content:not([state]) > #tracking-actions { + display: none; +} + +/* PERMISSIONS */ + +#identity-popup-permissions-content { + background-image: url(chrome://browser/skin/controlcenter/permissions.svg); +} + +#identity-popup-permissions-headline { + /* Make sure the label is as tall as the icon so that the permission list + which is aligned with the icon doesn't cover it up. */ + min-height: 24px; +} + +#identity-popup-permission-list { + /* Offset the padding set on #identity-popup-permissions-content so that it + shows up just below the section. The permission icons are 16px wide and + should be right aligned with the section icon. */ + margin-inline-start: calc(-1em - 16px); +} + +.identity-popup-permission-item { + min-height: 24px; +} + +#identity-popup-permission-list:not(:empty) { + margin-top: 5px; +} + +.identity-popup-permission-icon { + width: 16px; + height: 16px; +} + +.identity-popup-permission-icon.in-use { + animation: 1.5s ease in-use-blink infinite; +} + +@keyframes in-use-blink { + 50% { opacity: 0; } +} + +.identity-popup-permission-label, +.identity-popup-permission-state-label { + /* We need to align the action buttons and permission icons with the text. + This is tricky because the icon height is defined in pixels, while the + font height can vary with platform and system settings, and at least on + Windows the default font metrics reserve more extra space for accents. + This value is a good compromise for different platforms and font sizes. */ + margin-top: -0.1em; +} + +.identity-popup-permission-label { + margin-inline-start: 1em; +} + +.identity-popup-permission-state-label { + margin-inline-end: 5px; + text-align: end; + color: graytext; +} + +.identity-popup-permission-remove-button { + -moz-appearance: none; + margin: 0; + border-width: 0; + border-radius: 50%; + min-width: 0; + padding: 2px; + background-color: transparent; +} + +.identity-popup-permission-remove-button > .button-box { + padding: 0; + -moz-appearance: none; +} + +.identity-popup-permission-remove-button > .button-box > .button-icon { + margin: 0; + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/panel-icons.svg#cancel); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: graytext; +} + +.identity-popup-permission-remove-button > .button-box > .button-text { + display: none; +} + +/* swap foreground / background colors on hover */ +.identity-popup-permission-remove-button:not(:-moz-focusring):hover { + background-color: graytext; +} + +.identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon { + fill: -moz-field; +} + +.identity-popup-permission-remove-button:not(:-moz-focusring):hover:active { + background-color: -moz-fieldtext; +} diff --git a/browser/themes/shared/controlcenter/permissions.svg b/browser/themes/shared/controlcenter/permissions.svg new file mode 100644 index 000000000..77f0f3e50 --- /dev/null +++ b/browser/themes/shared/controlcenter/permissions.svg @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + width="24" height="24" viewBox="0 0 24 24"> +#include ../icon-colors.inc.svg + + <defs> + <mask id="mask-permissions"> + <path fill="#fff" d="M2,1h20c1.1,0,2,0.9,2,2v18c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V3 C0,1.9,0.9,1,2,1z"/> + <path fill="#000" d="M12,3h9c0.6,0,1,0.4,1,1v16c0,0.6-0.4,1-1,1h-9V3z"/> + <path fill="#000" d="M5.5,12.5l2.7-3.7C8.4,8.5,8.8,8.5,9,8.7l0.7,0.5 c0.2,0.2,0.2,0.5,0,0.7L5.8,15c-0.2,0.2-0.5,0.3-0.8,0.1l-2.2-2.2c-0.2-0.2-0.2-0.5,0-0.7l0.8-0.8c0.2-0.2,0.5-0.2,0.7,0L5.5,12.5z" /> + <rect x="16.3" y="8.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.5061 15.5355)" fill="#fff" width="1.4" height="7.1"/> + <rect x="16.3" y="8.5" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 20.5355 32.5061)" fill="#fff" width="1.4" height="7.1"/> + </mask> + </defs> + + <rect class="fieldtext" id="permissions" width="24" height="24" mask="url(#mask-permissions)"/> +</svg> diff --git a/browser/themes/shared/controlcenter/tracking-protection.svg b/browser/themes/shared/controlcenter/tracking-protection.svg new file mode 100644 index 000000000..1779378c1 --- /dev/null +++ b/browser/themes/shared/controlcenter/tracking-protection.svg @@ -0,0 +1,43 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="24" height="24" viewBox="0 0 24 24"> +#include ../icon-colors.inc.svg + <style> + g:not(:target) { + display: none; + } + </style> + + <defs> + <path id="shape-shield-outer" d="M12,1L3.4,2.4C2.6,2.5,2,3.1,2,3.9c0,1.9,0,5.2,0.2,6.6c0.4,4.2,1.3,6.3,3.2,8.8C8,22.6,12,23,12,23s4-0.4,6.6-3.7 c1.9-2.4,2.8-4.5,3.2-8.8C22,9.1,22,5.7,22,3.9c0-0.8-0.6-1.4-1.4-1.5L12,1L12,1z"/> + <path id="shape-shield-inner" d="M12,3l7.9,1.2c0.1,0,0.1,0,0.1,0.1c0,2.9,0,5.2-0.1,6.1c-0.4,4-1.2,5.6-2.8,7.6c-1.8,2.3-4.4,2.8-5.1,3 c-0.7-0.1-3.3-0.7-5.1-3c-1.6-1.9-2.4-3.6-2.8-7.6C4,9.5,4,7.3,4,4.3c0,0,0-0.1,0.1-0.1L12,3"/> + <path id="shape-shield-detail" d="M12,20c-0.8-0.2-2.9-0.7-4.4-2.6c-1.4-1.8-2.1-3.2-2.5-7C5,9.6,5,7.7,5,5.1L12,4 V20z"/> + + <mask id="mask-shield-cutout"> + <rect width="24" height="24" fill="#000"/> + <use xlink:href="#shape-shield-outer" fill="#fff"/> + <use xlink:href="#shape-shield-inner" fill="#000"/> + <use xlink:href="#shape-shield-detail" fill="#fff"/> + </mask> + + <mask id="mask-shield-cutout-disabled"> + <rect width="24" height="24" fill="#000"/> + <use xlink:href="#shape-shield-outer" fill="#fff"/> + <use xlink:href="#shape-shield-inner" fill="#000"/> + <use xlink:href="#shape-shield-detail" fill="#fff"/> + <line x1="3" y1="24" x2="23" y2="3" stroke="#000" stroke-width="3"/> + </mask> + </defs> + + <g id="enabled"> + <use class="fieldtext" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/> + </g> + + <g id="disabled"> + <use class="fieldtext" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/> + <line x1="3" y1="22" x2="23" y2="1" stroke="#d92d21" stroke-width="3"/> + </g> +</svg> diff --git a/browser/themes/shared/controlcenter/warning-gray.svg b/browser/themes/shared/controlcenter/warning-gray.svg new file mode 100644 index 000000000..5f122c3ee --- /dev/null +++ b/browser/themes/shared/controlcenter/warning-gray.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="16" height="16" viewBox="0 0 16 16"> + <path fill="#808080" d="M14.8,12.5L9.3,1.9C9,1.3,8.5,1,8,1C7.5,1,7,1.3,6.7,1.9L1.2,12.5c-0.3,0.6-0.3,1.2,0,1.7C1.5,14.7,2,15,2.6,15h10.8 c0.6,0,1.1-0.3,1.4-0.8C15.1,13.7,15.1,13.1,14.8,12.5z"/> + <path fill="#fff" d="M8,11c-0.8,0-1.5,0.7-1.5,1.5C6.5,13.3,7.2,14,8,14 c0.8,0,1.5-0.7,1.5-1.5C9.5,11.7,8.8,11,8,11z M8,10L8,10C8.6,10,9,9.6,9,9l0.2-4.2c0-0.7-0.5-1.2-1.2-1.2S6.8,4.1,6.8,4.8L7,9 C7,9.6,7.4,10,8,10z"/> +</svg> diff --git a/browser/themes/shared/controlcenter/warning-yellow.svg b/browser/themes/shared/controlcenter/warning-yellow.svg new file mode 100644 index 000000000..e2d3a3664 --- /dev/null +++ b/browser/themes/shared/controlcenter/warning-yellow.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="16" height="16" viewBox="0 0 16 16"> + <path fill="#ffbf00" d="M14.8,12.5L9.3,1.9C9,1.3,8.5,1,8,1C7.5,1,7,1.3,6.7,1.9L1.2,12.5c-0.3,0.6-0.3,1.2,0,1.7C1.5,14.7,2,15,2.6,15h10.8 c0.6,0,1.1-0.3,1.4-0.8C15.1,13.7,15.1,13.1,14.8,12.5z"/> + <path fill="#fff" d="M8,11c-0.8,0-1.5,0.7-1.5,1.5C6.5,13.3,7.2,14,8,14 c0.8,0,1.5-0.7,1.5-1.5C9.5,11.7,8.8,11,8,11z M8,10L8,10C8.6,10,9,9.6,9,9l0.2-4.2c0-0.7-0.5-1.2-1.2-1.2S6.8,4.1,6.8,4.8L7,9 C7,9.6,7.4,10,8,10z"/> +</svg> diff --git a/browser/themes/shared/ctrlTab.inc.css b/browser/themes/shared/ctrlTab.inc.css new file mode 100644 index 000000000..1205d0499 --- /dev/null +++ b/browser/themes/shared/ctrlTab.inc.css @@ -0,0 +1,63 @@ +%if 0 +/* 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/. */ +%endif + +/* Ctrl-Tab */ + +#ctrlTab-panel { + -moz-appearance: none; +%ifdef XP_MACOSX + -moz-window-shadow: none; +%endif + background: hsla(0,0%,33%,.85); + color: white; + border-style: none; + padding: 20px 10px 10px; +%ifndef XP_MACOSX + font-weight: bold; +%endif + text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%); +} + +.ctrlTab-favicon[src] { + background-color: white; + width: 20px; + height: 20px; + padding: 2px; +} + +.ctrlTab-preview-inner > .tabPreview-canvas { + box-shadow: 1px 1px 2px hsl(0,0%,12%); +} + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { + margin-bottom: 2px; +} + +.ctrlTab-preview-inner { + padding: 8px; + border: 2px solid transparent; + border-radius: .5em; +} + +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner { + margin: -10px -10px 0; +} + +#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { + background-color: rgba(255,255,255,.2); +} + +.ctrlTab-preview:focus > * > .ctrlTab-preview-inner { + color: white; + background-color: rgba(0,0,0,.6); + text-shadow: none; + border-color: white; +} + +#ctrlTab-showAll { + margin-top: .5em; +} + diff --git a/browser/themes/shared/customizableui/customize-illustration-rtl.png b/browser/themes/shared/customizableui/customize-illustration-rtl.png Binary files differnew file mode 100644 index 000000000..12005095c --- /dev/null +++ b/browser/themes/shared/customizableui/customize-illustration-rtl.png diff --git a/browser/themes/shared/customizableui/customize-illustration-rtl@2x.png b/browser/themes/shared/customizableui/customize-illustration-rtl@2x.png Binary files differnew file mode 100644 index 000000000..c1af12990 --- /dev/null +++ b/browser/themes/shared/customizableui/customize-illustration-rtl@2x.png diff --git a/browser/themes/shared/customizableui/customize-illustration.png b/browser/themes/shared/customizableui/customize-illustration.png Binary files differnew file mode 100644 index 000000000..9131951b0 --- /dev/null +++ b/browser/themes/shared/customizableui/customize-illustration.png diff --git a/browser/themes/shared/customizableui/customize-illustration@2x.png b/browser/themes/shared/customizableui/customize-illustration@2x.png Binary files differnew file mode 100644 index 000000000..50c0d1949 --- /dev/null +++ b/browser/themes/shared/customizableui/customize-illustration@2x.png diff --git a/browser/themes/shared/customizableui/customizeFavicon.ico b/browser/themes/shared/customizableui/customizeFavicon.ico Binary files differnew file mode 100644 index 000000000..c7bd84339 --- /dev/null +++ b/browser/themes/shared/customizableui/customizeFavicon.ico diff --git a/browser/themes/shared/customizableui/customizeMode.inc.css b/browser/themes/shared/customizableui/customizeMode.inc.css new file mode 100644 index 000000000..48681d9f3 --- /dev/null +++ b/browser/themes/shared/customizableui/customizeMode.inc.css @@ -0,0 +1,461 @@ +/* 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/. */ + +/* Customization mode */ + +:root { + --drag-drop-transition-duration: .3s; +} + +#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox { + margin-bottom: 2em; +} + +#main-window:-moz-any([customize-entering],[customize-entered]) #content-deck, +#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox, +#main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox { + margin-left: 2em; + margin-right: 2em; +} + +#main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck { + pointer-events: none; +} + +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, +#PanelUI-contents > .panel-customization-placeholder { + -moz-outline-radius: 2.5px; + outline: 1px dashed transparent; +} + +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before { + /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */ + -moz-box-ordinal-group: 0; + content: ""; + display: -moz-box; + height: 100%; + left: 0; + outline-offset: -2px; + pointer-events: none; + position: absolute; + top: 0; + width: 100%; +} + +/* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the + #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the + offset from the bottom effectively the same as other targets (-2px). */ +#main-window[customize-entered] #TabsToolbar.customization-target::before { + top: -2px; +} + +/* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */ +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover, +#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)), +#main-window[customize-entered] #nav-bar-customization-target.customization-target { + position: relative; +} + +/* Most target outlines are shown on hover and drag over but the panel menu uses + placeholders instead. */ +#main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before, +#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before, +/* nav-bar and panel outlines are always shown */ +#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { + outline-color: currentColor; +} + +#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before { + transition: outline-color 250ms linear; +} + +#PanelUI-contents[showoutline=true] > .panel-customization-placeholder { + transition: outline-color 250ms linear; + outline-color: var(--panel-separator-color); +} + +#PanelUI-contents > .panel-customization-placeholder { + cursor: auto; + outline-offset: -5px; +} + +#main-window[customizing] .customization-target:not(#PanelUI-contents) { + min-width: 100px; + padding-left: 10px; + padding-right: 10px; +} + +#customization-container { + background-color: -moz-field; + color: -moz-fieldText; + text-shadow: none; +} + +#customization-palette, +#customization-empty { + padding: 5px 25px 25px; +} + +#customization-header { + font-size: 1.75em; + line-height: 1.75em; + color: GrayText; + font-weight: 200; + margin: 25px 25px 12px; + padding-bottom: 12px; + border-bottom: 1px solid ThreeDLightShadow; +} + +#customization-panel-container { + padding: 15px 25px 25px; + background-image: linear-gradient(to bottom, #3e86ce, #3878ba); +} + +#main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox, +#customization-footer { + background-color: -moz-dialog; +} + +#customization-footer { + border-top: 1px solid ThreeDLightShadow; + padding: 10px; +} + +%if defined(XP_MACOSX) || defined(XP_WIN) +%ifdef XP_WIN +@media (-moz-windows-default-theme) { +%endif + +.customizationmode-button { + border: 1px solid rgb(192,192,192); + border-radius: 3px; + margin: 5px; + padding: 2px 10px; + background-color: rgb(251,251,251); + color: rgb(71,71,71); + box-shadow: 0 1px rgba(255, 255, 255, 0.5), + inset 0 1px rgba(255, 255, 255, 0.5); + -moz-appearance: none; +} + +.customizationmode-button > .box-inherit { + border-width: 0; + padding-inline-start: 0; + padding-inline-end: 0; +} + +.customizationmode-button > .button-icon { + margin-inline-start: 0; +} + +.customizationmode-button:not([type=menu]) > .button-text { + margin-inline-end: 0; +} + +.customizationmode-button > .button-menu-dropmarker { + margin-inline-end: 0; + padding-inline-end: 0; +} + +.customizationmode-button:hover:active:not([disabled]), +.customizationmode-button[open], +.customizationmode-button[checked] { + background-color: rgb(218, 218, 218); + border-color: rgb(168, 168, 168); + text-shadow: 0 1px rgb(236, 236, 236); + box-shadow: 0 1px rgba(255, 255, 255, 0.5), + inset 0 1px rgb(196, 196, 196); +} + +.customizationmode-button[disabled="true"] { + opacity: .5; +} + +%ifdef XP_WIN +} /* @media (-moz-windows-default-theme) */ +%endif +%endif /* defined(XP_MACOSX) || defined(XP_WIN) */ + +.customizationmode-button > .box-inherit > .box-inherit > .button-icon, +.customizationmode-button > .button-box > .button-icon { + height: 24px; +} + +%ifdef CAN_DRAW_IN_TITLEBAR +#customization-titlebar-visibility-button > .button-box > .button-text, +%endif +#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text { + /* Sadly, button.css thinks its margins are perfect for everyone. */ + margin-inline-start: 6px !important; +} + +#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon { + width: 20px; + height: 20px; + border-radius: 2px; + background-image: url("chrome://browser/skin/theme-switcher-icon.png"); + background-size: contain; +} + +%ifdef CAN_DRAW_IN_TITLEBAR +#customization-titlebar-visibility-button { + list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); + -moz-image-region: rect(0, 24px, 24px, 0); +} + +#customization-titlebar-visibility-button > .button-box > .button-icon { + vertical-align: middle; +} + +#customization-titlebar-visibility-button[checked] { + -moz-image-region: rect(0, 48px, 24px, 24px); +} + +@media (min-resolution: 1.1dppx) { + #customization-titlebar-visibility-button { + list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png"); + -moz-image-region: rect(0, 48px, 48px, 0); + } + + #customization-titlebar-visibility-button[checked] { + -moz-image-region: rect(0, 96px, 48px, 48px); + } +} +%endif /* CAN_DRAW_IN_TITLEBAR */ + +#main-window[customize-entered] #customization-panel-container { + background-image: url("chrome://browser/skin/customizableui/customizeMode-separatorHorizontal.png"), + url("chrome://browser/skin/customizableui/customizeMode-separatorVertical.png"), + url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"), + url("chrome://browser/skin/customizableui/background-noise-toolbar.png"), + linear-gradient(to bottom, #3e86ce, #3878ba); + background-position: center top, left center, left top, left top, left top; + background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat; + background-size: auto 12px, 12px 100%, auto, auto, auto; + background-attachment: scroll, scroll, fixed, fixed, scroll; +} + +toolbarpaletteitem[place="toolbar"] { + transition: border-width 250ms ease-in-out; +} + +toolbarpaletteitem[mousedown] { + cursor: -moz-grabbing; +} + +.panel-customization-placeholder, +toolbarpaletteitem[place="palette"], +toolbarpaletteitem[place="panel"] { + transition: transform var(--drag-drop-transition-duration) ease-in-out; +} + +#customization-palette { + transition: opacity .3s ease-in-out; + opacity: 0; +} + +#customization-palette[showing="true"] { + opacity: 1; +} + +toolbarpaletteitem toolbarbutton[disabled] { + color: inherit !important; +} + +toolbarpaletteitem[notransition].panel-customization-placeholder, +toolbarpaletteitem[notransition][place="toolbar"], +toolbarpaletteitem[notransition][place="palette"], +toolbarpaletteitem[notransition][place="panel"] { + transition: none; +} + +toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarpaletteitem > toolbaritem.panel-wide-item, +toolbarpaletteitem > toolbarbutton[type="menu-button"] { + transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important; +} + +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { + transform: scale(1.3); +} + +toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, +toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] { + transform: scale(1.1); +} + +/* Override the toolkit styling for items being dragged over. */ +toolbarpaletteitem[place="toolbar"] { + border-left-width: 0; + border-right-width: 0; + margin-right: 0; + margin-left: 0; +} + +#customization-palette:not([hidden]) { + margin-bottom: 25px; +} + +toolbarpaletteitem[place="palette"]:-moz-focusring, +toolbarpaletteitem[place="panel"]:-moz-focusring, +toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline-width: 0; +} + +toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + /* Delay adding the focusring back until after the transform transition completes. */ + transition: outline-width .01s linear var(--drag-drop-transition-duration); + outline: 1px dotted; + -moz-outline-radius: 2.5px; +} + +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + outline-offset: -5px; +} + +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, +#wrapper-edit-controls[place="palette"] > #edit-controls > separator, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > separator { + margin-top: 20px; +} + +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton { + margin-left: 0; + margin-right: 0; + max-width: 24px; + min-width: 24px; + max-height: 24px; + min-height: 24px; + padding: 4px; +} + +#wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { + width: 16px; +} + +#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon { + opacity: 1; /* To ensure these buttons always look enabled in customize mode */ +} + +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator { + display: none; +} + +#wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks { + -moz-box-pack: center; + min-height: 48px; +} + +#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { + margin-inline-end: 5px; +} + +#customization-palette > toolbarpaletteitem > label { + text-align: center; + margin-left: 0; + margin-right: 0; +} + +#customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent { + -moz-box-orient: vertical; + /* Make the panel padding uniform across all platforms due to the + styling of the section headers and footer. */ + padding: 10px; +} + +.customization-lwtheme-menu-theme > .toolbarbutton-icon { + width: 32px; + height: 32px; +} + +.customization-lwtheme-menu-theme { + -moz-appearance: none; + border: 1px solid transparent; + margin: 0 -5px 5px; + padding-top: 0; + padding-inline-end: 5px; + padding-bottom: 0; + padding-inline-start: 0; +} + +.customization-lwtheme-menu-theme[defaulttheme] { + list-style-image: url(chrome://browser/skin/theme-switcher-icon.png); +} + +.customization-lwtheme-menu-theme[active="true"], +.customization-lwtheme-menu-theme:hover { + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); +} + +.customization-lwtheme-menu-theme[active="true"], +.customization-lwtheme-menu-theme:hover:active { + background-color: var(--arrowpanel-dimmed-further); +} + +.customization-lwtheme-menu-theme > .toolbarbutton-icon { + margin: 5px; +} + +.customization-lwtheme-menu-theme > .toolbarbutton-text { + text-align: start; +} + +#customization-lwtheme-menu-header, +#customization-lwtheme-menu-recommended { + padding: 10px; + margin-bottom: 5px; +} + +#customization-lwtheme-menu-header, +#customization-lwtheme-menu-recommended, +#customization-lwtheme-menu-footer { + background-color: var(--arrowpanel-dimmed); + margin-right: -10px; + margin-left: -10px; +} + +#customization-lwtheme-menu-header { + margin-top: -10px; + border-bottom: 1px solid var(--arrowpanel-dimmed); +} + +#customization-lwtheme-menu-recommended { + border-top: 1px solid var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--arrowpanel-dimmed); +} + +#customization-lwtheme-menu-footer { + background: linear-gradient(var(--arrowpanel-dimmed) 60%, transparent) border-box; + border-top: 1px solid var(--arrowpanel-dimmed); + margin-bottom: -10px; +} + +.customization-lwtheme-menu-footeritem { + -moz-appearance: none; + -moz-box-flex: 1; + color: inherit; + border-style: none; + padding: 10px; + margin-left: 0; + margin-right: 0; +} + +.customization-lwtheme-menu-footeritem:hover { + background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box; +} + +.customization-lwtheme-menu-footeritem:first-child { + border-inline-end: 1px solid var(--panel-separator-color); +} + +%include customizeTip.inc.css diff --git a/browser/themes/shared/customizableui/customizeTip.inc.css b/browser/themes/shared/customizableui/customizeTip.inc.css new file mode 100644 index 000000000..26c6ee1ea --- /dev/null +++ b/browser/themes/shared/customizableui/customizeTip.inc.css @@ -0,0 +1,77 @@ +/* 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/. */ + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; + margin: 0; + min-width: 400px; + max-width: 1000px; + min-height: 200px; + border-radius: 3px; + background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%); + border: 0px solid rgba(0,148,221,.5); + box-shadow: 0 1px 5px 0 rgba(0,0,0,.5), inset 0 1px 1px 0 #fff; + color: rgb(51,51,51); +} + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) { + background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%); +} + +.customization-tipPanel-infoBox { + margin: 20px 25px 25px; + width: 25px; + background-image: url(chrome://browser/skin/customizableui/info-icon-customizeTip.png); + background-repeat: no-repeat; +} + +.customization-tipPanel-content { + margin: 25px 0; + font-size: 12px; + line-height: 18px; +} + +.customization-tipPanel-em { + margin: 0; + font-weight: bold; +} + +.customization-tipPanel-contentImage { + margin-top: 25px; + list-style-image: url(chrome://browser/skin/customizableui/customize-illustration.png); + min-width: 300px; + max-width: 300px; + min-height: 190px; + max-height: 190px; + display: -moz-box; +} + +.customization-tipPanel-contentImage:-moz-locale-dir(rtl) { + list-style-image: url(chrome://browser/skin/customizableui/customize-illustration-rtl.png); +} + +.customization-tipPanel-link { + -moz-appearance: none; + background: transparent; + border: none; + box-shadow: none; + color: rgb(25,82,171); + margin: 0; + cursor: pointer; +} + +.customization-tipPanel-link > .button-box > .button-text { + margin: 0 !important; +} + +.customization-tipPanel-closeBox > .close-icon { + -moz-appearance: none; + border: 0; + margin-inline-end: -25px; +} + +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"], +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] { + list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png"); +} diff --git a/browser/themes/shared/customizableui/info-icon-customizeTip.png b/browser/themes/shared/customizableui/info-icon-customizeTip.png Binary files differnew file mode 100644 index 000000000..0dfbbce5d --- /dev/null +++ b/browser/themes/shared/customizableui/info-icon-customizeTip.png diff --git a/browser/themes/shared/customizableui/info-icon-customizeTip@2x.png b/browser/themes/shared/customizableui/info-icon-customizeTip@2x.png Binary files differnew file mode 100644 index 000000000..7a87fac20 --- /dev/null +++ b/browser/themes/shared/customizableui/info-icon-customizeTip@2x.png diff --git a/browser/themes/shared/customizableui/menuPanel-customizeFinish.png b/browser/themes/shared/customizableui/menuPanel-customizeFinish.png Binary files differnew file mode 100644 index 000000000..07be6a76a --- /dev/null +++ b/browser/themes/shared/customizableui/menuPanel-customizeFinish.png diff --git a/browser/themes/shared/customizableui/menuPanel-customizeFinish@2x.png b/browser/themes/shared/customizableui/menuPanel-customizeFinish@2x.png Binary files differnew file mode 100644 index 000000000..7562e138c --- /dev/null +++ b/browser/themes/shared/customizableui/menuPanel-customizeFinish@2x.png diff --git a/browser/themes/shared/customizableui/panelUI.inc.css b/browser/themes/shared/customizableui/panelUI.inc.css new file mode 100644 index 000000000..b46110ab5 --- /dev/null +++ b/browser/themes/shared/customizableui/panelUI.inc.css @@ -0,0 +1,1769 @@ +/* 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/. */ + +%filter substitution + +%define menuPanelWidth 22.35em +%define standaloneSubviewWidth 30em +% XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla. +% Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap. +% For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11 +% There's no calc() here (and therefore lots of calc() where this is used) because +% we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761 +%define menuPanelButtonWidth (@menuPanelWidth@ / 3 - 0.1px) +%define buttonStateHover :not(:-moz-any([disabled],[open],:active)):hover +%define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive] +%define buttonStateActive :not([disabled]):-moz-any([open],:hover:active) +%define menuStateActive :not([disabled])[_moz-menuactive]:active +%define menuStateMenuActive :not([disabled])[_moz-menuactive] + +%include ../browser.inc + +:root { + --panel-ui-exit-subview-gutter-width: 38px; +} + +#PanelUI-popup #PanelUI-contents:empty { + height: 128px; +} + +#PanelUI-popup #PanelUI-contents:empty::before { + content: ""; + background-image: url(chrome://browser/skin/customizableui/whimsy.png); + background-size: 64px 64px; + display: block; + width: 64px; + height: 64px; + position: absolute; + transition: transform 1s ease-out; + animation: whimsyMoveX 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate; +} + +#PanelUI-popup #PanelUI-contents:not(:hover):empty::before { + filter: grayscale(100%); +} + +#PanelUI-popup #PanelUI-contents:active:empty::before { + animation: whimsyMoveX 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate, + whimsyRotate 1s linear 0s infinite normal; +} + +#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before { + animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate; +} + +#PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before { + animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate, + whimsyMoveY 3.4s linear 0s infinite alternate, + whimsyRotate 1s linear 0s infinite normal; +} + +@media (min-resolution: 2dppx) { + #PanelUI-popup #PanelUI-contents:empty::before { + background-image: url(chrome://browser/skin/customizableui/whimsy@2x.png); + } +} + +@keyframes whimsyMoveX { + /* These values are adjusted for the padding on the panel. */ + from { margin-left: -15px; } to { margin-left: calc(100% - 49px); } +} + +@keyframes whimsyMoveXRTL { + /* These values are adjusted for the padding on the panel. */ + from { margin-right: -15px; } to { margin-right: calc(100% - 49px); } +} + +@keyframes whimsyMoveY { + /* These values are adjusted for the padding and height of the panel. */ + from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); } +} + +@keyframes whimsyRotate { + to { transform: perspective(5000px) rotateY(360deg); } +} + +#PanelUI-button { + margin-inline-start: 2px; + border-inline-start: 1px solid; + border-image: linear-gradient(transparent, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, transparent); + border-image-slice: 1; +} + +#nav-bar[brighttext] > #PanelUI-button { + border-image-source: linear-gradient(transparent, rgba(100%,100%,100%,.2) 20%, rgba(100%,100%,100%,.2) 80%, transparent); +} + +#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: -moz-box; + height: 10px; + width: 10px; + background-size: contain; + border: none; +} + +#PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: none; +} + +#PanelUI-menu-button[badge-status="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #74BF43 url(chrome://browser/skin/update-badge.svg) no-repeat center; + height: 13px; +} + +#PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #D90000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; + height: 13px; +} + +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + box-shadow: none; + filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15)); +} + +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + width: 7px; + height: 7px; + min-width: 0; + border-radius: 50%; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin-top: -1px !important; + margin-right: -2px !important; +} + +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #FFBF00; +} + +#PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: #D90000; +} + +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + height: 13px; + background: transparent url(chrome://browser/skin/warning.svg) no-repeat center; +} + +#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: none; +} + +.panel-subviews { + padding: 4px; + background-clip: padding-box; + border-left: 1px solid var(--arrowpanel-border-color); + box-shadow: 0 3px 5px hsla(210,4%,10%,.1), + 0 0 7px hsla(210,4%,10%,.1); + margin-inline-start: var(--panel-ui-exit-subview-gutter-width); +} + +.panel-viewstack[viewtype="main"] > .panel-subviews { + transform: translateX(@menuPanelWidth@); +} + +.panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) { + transform: translateX(-@menuPanelWidth@); +} + +panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews { + display: none; +} + +.panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView { + -moz-box-flex: 1; +} + +.panel-subview-body { + overflow-y: auto; + overflow-x: hidden; + -moz-box-flex: 1; +} + +#PanelUI-popup .panel-subview-body { + margin: -4px; + padding: 4px 4px; +} + +.panel-subview-header, +.subviewbutton.panel-subview-footer { + box-sizing: border-box; + min-height: 41px; + padding: 11px 12px; +} + +.panel-subview-header { + margin: -4px -4px 4px; + border-bottom: 1px solid var(--panel-separator-color); + color: GrayText; + font-variant: small-caps; +} + +.cui-widget-panelview .panel-subview-header { + display: none; +} + +.cui-widget-panelview .subviewbutton.panel-subview-footer { + margin: 4px 0 0; + -moz-box-pack: center; +} + +#PanelUI-mainView { + display: flex; + flex-direction: column; +} + +#PanelUI-popup > arrowscrollbox > autorepeatbutton { + display: none; +} +#PanelUI-popup > arrowscrollbox > scrollbox { + overflow: visible; +} + +#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent { + overflow: hidden; +} + +#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent, +.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box { + padding: 0; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text { + line-height: 1.2; + max-height: 2.4em; +} + +.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, +.panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text { + -moz-hyphens: auto; +} + +.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, +.panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text { + position: absolute; + clip: rect(-0.1em, auto, 2.6em, auto); +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-text, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text { + text-align: center; + /* Need to override toolkit theming which sets margin: 0 !important; */ + margin: 2px 0 0 !important; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text { + text-align: center; + margin: -1px 0 0; +} + +#wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls, +#wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls { + margin-inline-start: 0; +} + +#PanelUI-contents { + max-width: @menuPanelWidth@; +} + +#BMB_bookmarksPopup, +.panel-mainview:not([panelid="PanelUI-popup"]) { + max-width: @standaloneSubviewWidth@; +} + +/* Give WebExtension stand-alone panels extra width for Chrome compatibility */ +.cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview { + max-width: 800px; +} + +.cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +panelview[id^=PanelUI-webext-] { + overflow: hidden; +} + +panelview:not([mainview]) .toolbarbutton-text, +.cui-widget-panel toolbarbutton > .toolbarbutton-text { + text-align: start; + display: -moz-box; +} + +.cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 4px 0; +} + +.cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent { + padding-bottom: 0; +} + +#PanelUI-contents { + display: block; + flex: 1 0 auto; + margin-left: auto; + margin-right: auto; + padding: .5em 0; + max-width: @menuPanelWidth@; +} + +#PanelUI-contents-scroller { + overflow-y: auto; + overflow-x: hidden; + width: @menuPanelWidth@; + padding-left: 5px; + padding-right: 5px; + flex: auto; +} + +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon { + min-width: 0; + min-height: 0; + margin: 0; +} + +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item), +.panelUI-grid .toolbarbutton-1, +.panel-customization-placeholder-child { + -moz-appearance: none; + -moz-box-orient: vertical; + width: calc(@menuPanelButtonWidth@); + height: calc(51px + 2.2em); +} + +/* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem + * should have a min-width set so they abide by the width set above (which they do outside of + * customize mode because they're in a flexed container) */ +toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 { + min-width: 0.01px; +} + +/* Help SDK buttons fit in. */ +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon, +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: 32px; + width: 32px; +} + +toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon { + width: 32px; + height: 32px; +} + +.customization-palette .toolbarbutton-1 { + -moz-appearance: none; + -moz-box-orient: vertical; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button { + -moz-appearance: none; + -moz-box-orient: vertical; + width: calc(@menuPanelButtonWidth@ - 2px); + height: calc(49px + 2.2em); + border: 0; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text { + margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */ +} + +.panel-customization-placeholder-child { + margin: 6px 0 0; + padding: 2px 6px; + border: 1px solid transparent; +} + +.panelUI-grid .toolbarbutton-1[type="menu"] { + background-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png"); + background-position: right 3px top 16px; + background-repeat: no-repeat; +} + +.panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) { + background-position: left 3px top 16px; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker { + display: none; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { + -moz-box-align: center; + width: 16px; + margin-inline-start: -16px; + height: 51px; + margin-bottom: 2.2em; + padding: 0; +} + +.panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker { + background-color: var(--arrowpanel-dimmed) !important; + border-radius: 0 0 0 2px; +} + +.panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) { + border-radius: 0 0 2px 0; +} + +#main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon { + opacity: .5; +} + +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) { + width: calc(@menuPanelButtonWidth@); + margin: 0 !important; +} + +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) { + -moz-box-align: center; + -moz-box-pack: center; +} + +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe { + margin: 4px auto; +} + +#PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView { + background-color: var(--arrowpanel-dimmed); +} + +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]), +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) { + opacity: .5; +} + +/* + * XXXgijs: this is a workaround for a layout issue that was caused by these iframes, + * which was affecting subview display. Because of this, we're hiding the iframe *only* + * when displaying a subview. The discerning user might notice this, but it's not nearly + * as bad as the brokenness. + * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375 + * is addressed. + */ +#PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe { + visibility: hidden; +} + +toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text { + text-align: center; +} + +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack, +.customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, +.customization-palette .toolbarbutton-1 > .toolbarbutton-icon, +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack, +.panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon, +.customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon, +.panel-customization-placeholder-child > .toolbarbutton-icon { + width: 32px; + height: 32px; + min-width: 32px; + min-height: 32px; + /* Explanation for the below formula (A / B - C) + A + Each button is @menuPanelButtonWidth@ wide + B + Each button has two margins. + C (46px / 2 = 23px) + The button icon is 32 pixels wide. + The button has 12px of horizontal padding (6 on each side). + The button has 2px of horizontal border (1 on each side). + Total width of button's icon + button padding should therefore be 46px, + which means each horizontal margin should be the half the button's width - (46/2) px. + */ + margin: 4px calc(@menuPanelButtonWidth@ / 2 - 23px); +} + +/* above we treat the container as the icon for the margins, that is so the +/* badge itself is positioned correctly. Here we make sure that the icon itself +/* has the minimum size we want, but no padding/margin. */ +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon, +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon { + width: 32px; + height: 32px; + min-width: 32px; + min-height: 32px; + margin: 0; + padding: 0; +} + +toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { + -moz-box-flex: 1; +} + +#personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder { + -moz-box-flex: 1; +} + +#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { + margin-inline-end: 2px; +} + +#edit-controls@inAnyPanel@ > #copy-button, +#zoom-controls@inAnyPanel@ > #zoom-reset-button { + border-left: none; + border-right: none; + border-radius: 0; +} + +#zoom-in-button > .toolbarbutton-text, +#zoom-out-button > .toolbarbutton-text, +#zoom-reset-button > .toolbarbutton-icon { + display: none; +} + +#PanelUI-footer { + display: flex; + flex-shrink: 0; + flex-direction: column; + background-color: var(--arrowpanel-dimmed); + padding: 0; + margin: 0; +} + +#main-window[customizing] #PanelUI-footer-fxa { + display: none; +} + +#PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator, +#PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon, +#PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + display: none; +} + +#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after { + content: url(chrome://browser/skin/warning.svg); + filter: drop-shadow(0 1px 0 hsla(206,50%,10%,.15)); + width: 47px; + padding-top: 1px; + display: block; + text-align: center; + position: relative; + top: 25%; +} + +#PanelUI-update-status[update-status]::after { + content: ""; + width: 14px; + height: 14px; + margin-inline-end: 16.5px; + box-shadow: 0px 1px 0px rgba(255,255,255,.2) inset, 0px -1px 0px rgba(0,0,0,.1) inset, 0px 1px 0px rgba(12,27,38,.2); + border-radius: 2px; + background-size: contain; + display: -moz-box; +} + +#PanelUI-update-status[update-status="succeeded"]::after { + background-image: url(chrome://browser/skin/update-badge.svg); + background-color: #74BF43; +} + +#PanelUI-update-status[update-status="failed"]::after { + background-image: url(chrome://browser/skin/update-badge-failed.svg); + background-color: #D90000; +} + +#PanelUI-fxa-status { + display: flex; + flex: 1 1 0%; + width: 1px; +} + +#PanelUI-footer-inner, +#PanelUI-footer-fxa:not([hidden]) { + display: flex; + border-top: 1px solid var(--panel-separator-color); +} + +#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner, +#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa { + position: relative; +} + +#PanelUI-footer-inner > toolbarseparator, +#PanelUI-footer-fxa > toolbarseparator { + border: 0; + border-left: 1px solid var(--panel-separator-color); + margin: 7px 0 7px; + -moz-appearance: none; +} + +#PanelUI-footer-inner:hover > toolbarseparator, +#PanelUI-footer-fxa:hover > toolbarseparator { + margin: 0; +} + +#PanelUI-update-status, +#PanelUI-help, +#PanelUI-fxa-label, +#PanelUI-fxa-icon, +#PanelUI-customize, +#PanelUI-quit { + margin: 0; + padding: 11px 0; + box-sizing: border-box; + min-height: 40px; + -moz-appearance: none; + box-shadow: none; + border: none; + border-radius: 0; + transition: background-color; + -moz-box-orient: horizontal; +} + +#PanelUI-update-status { + border-top: 1px solid var(--panel-separator-color); +} + +#PanelUI-update-status { + border-bottom: 1px solid transparent; + margin-bottom: -1px; +} + +#PanelUI-update-status > .toolbarbutton-text { + width: 0; /* Fancy cropping solution for flexbox. */ +} + +#PanelUI-help, +#PanelUI-quit { + min-width: 46px; +} + +#PanelUI-update-status > .toolbarbutton-text, +#PanelUI-fxa-label > .toolbarbutton-text, +#PanelUI-customize > .toolbarbutton-text { + margin: 0; + padding: 0 6px; + text-align: start; +} + +#PanelUI-help > .toolbarbutton-text, +#PanelUI-quit > .toolbarbutton-text, +#PanelUI-fxa-avatar > .toolbarbutton-text { + display: none; +} + +#PanelUI-update-status > .toolbarbutton-icon, +#PanelUI-fxa-label > .toolbarbutton-icon, +#PanelUI-fxa-icon > .toolbarbutton-icon, +#PanelUI-customize > .toolbarbutton-icon, +#PanelUI-help > .toolbarbutton-icon, +#PanelUI-quit > .toolbarbutton-icon { + margin-inline-end: 0; +} + +#PanelUI-fxa-icon { + padding-inline-start: 15px; + padding-inline-end: 15px; +} + +#PanelUI-fxa-label, +#PanelUI-customize { + flex: 1; + padding-inline-start: 15px; + border-inline-start-style: none; +} + +#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label, +#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label { + padding-inline-start: 0px; +} + +#PanelUI-update-status { + width: calc(@menuPanelWidth@ + 30px); + padding-inline-start: 15px; + border-inline-start-style: none; +} + +#PanelUI-update-status { + list-style-image: url(chrome://branding/content/icon16.png); +} + +#PanelUI-fxa-label, +#PanelUI-fxa-icon { + list-style-image: url(chrome://browser/skin/sync-horizontalbar.png); +} + +#PanelUI-remotetabs { + --panel-ui-sync-illustration-height: 157.5px; +} + +.PanelUI-remotetabs-instruction-title, +.PanelUI-remotetabs-instruction-label, +#PanelUI-remotetabs-mobile-promo { + /* If you change the margin here, the min-height of the synced tabs panel + (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may + need adjusting (see bug 1248506) */ + margin: 15px; + text-align: center; + text-shadow: none; + max-width: 15em; + color: GrayText; +} + +.PanelUI-remotetabs-instruction-title { + font-size: 1.3em; +} + +/* The boxes with "instructions" get extra top and bottom padding for space + around the illustration and buttons */ +.PanelUI-remotetabs-instruction-box { + /* If you change the padding here, the min-height of the synced tabs panel + (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may + need adjusting (see bug 1248506) */ + padding-bottom: 30px; + padding-top: 15px; +} + +.PanelUI-remotetabs-prefs-button { + -moz-appearance: none; + background-color: #0096dd; + /* !important for the color as an OSX specific rule when a lightweight theme + is used for buttons in the toolbox overrides. See bug 1238531 for details */ + color: white !important; + border-radius: 2px; + /* If you change the margin or padding below, the min-height of the synced tabs + panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, + etc) may need adjusting (see bug 1248506) */ + margin-top: 10px; + margin-bottom: 10px; + padding: 8px; + text-shadow: none; + min-width: 200px; +} + +.PanelUI-remotetabs-prefs-button:hover, +.PanelUI-remotetabs-prefs-button:hover:active { + background-color: #018acb; +} + +.remotetabs-promo-link { + margin: 0; +} + +.PanelUI-remotetabs-notabsforclient-label { + color: GrayText; + /* This margin is to line this label up with the labels in toolbarbuttons. */ + margin-left: 28px; +} + +.fxaSyncIllustration { + height: var(--panel-ui-sync-illustration-height); + list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg); +} + +.PanelUI-remotetabs-prefs-button > .toolbarbutton-text { + /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */ + text-align: center !important; + text-shadow: none; +} + +#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */ + min-width: 19em; +} + +/* Work around bug 1224412 - these boxes will cause scrollbars to appear when + the panel is anchored to a toolbar button. +*/ +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane { + min-height: calc(var(--panel-ui-sync-illustration-height) + + 20px + /* margin of .PanelUI-remotetabs-prefs-button */ + 16px + /* padding of .PanelUI-remotetabs-prefs-button */ + 30px + /* margin of .PanelUI-remotetabs-instruction-label */ + 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */ + 11em); +} + +#PanelUI-remotetabs-tabslist > label[itemtype="client"] { + color: GrayText; +} + +/* Collapse the non-active vboxes in the remotetabs deck to use only the + height the active box needs */ +#PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane, +#PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching, +#PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane { + visibility: collapse; +} + +#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons { + display: none; +} + +#PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) { + list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png); +} + +#PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label, +#PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label { + list-style-image: url(chrome://browser/skin/warning.svg); + -moz-image-region: auto; +} + +#PanelUI-customize { + list-style-image: url(chrome://browser/skin/menuPanel-customize.png); +} + +#customization-panelHolder #PanelUI-customize { + list-style-image: url(chrome://browser/skin/customizableui/menuPanel-customizeFinish.png); +} + +#PanelUI-help { + list-style-image: url(chrome://browser/skin/menuPanel-help.png); +} + +#PanelUI-quit { + border-inline-end-style: none; + list-style-image: url(chrome://browser/skin/menuPanel-exit.png); +} + +#PanelUI-fxa-label, +#PanelUI-fxa-icon, +#PanelUI-customize, +#PanelUI-help, +#PanelUI-quit { + -moz-image-region: rect(0, 16px, 16px, 0); +} + +#PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon, +#PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon { + display: none; +} + +#PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + display: none; +} + +#PanelUI-fxa-status[disabled], +#PanelUI-fxa-icon[disabled] { + pointer-events: none; +} + +#PanelUI-fxa-avatar { + width: 32px; + height: 32px; + border-radius: 50%; + background-repeat: no-repeat; + background-position: 0 0; + background-size: contain; + align-self: center; + margin: 0px 7px; + padding: 0px; + border: 0px none; + margin-inline-end: 0; +} + +#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg); +} + +#PanelUI-customize:hover, +#PanelUI-help:not([disabled]):hover, +#PanelUI-quit:not([disabled]):hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +#PanelUI-customize:hover:active, +#PanelUI-help:not([disabled]):hover:active, +#PanelUI-quit:not([disabled]):hover:active { + -moz-image-region: rect(0, 48px, 16px, 32px); +} + +#PanelUI-help[panel-multiview-anchor="true"] { + -moz-image-region: rect(0, 64px, 16px, 48px); +} + +#PanelUI-help[disabled], +#PanelUI-quit[disabled], +#PanelUI-fxa-icon[disabled], +#PanelUI-fxa-avatar[disabled], +#PanelUI-fxa-label[disabled] > .toolbarbutton-icon, +#PanelUI-fxa-status::after { + opacity: 0.4; +} + +#PanelUI-fxa-status:not([disabled]):hover, +#PanelUI-fxa-icon:not([disabled]):hover, +#PanelUI-help:not([disabled]):hover, +#PanelUI-customize:hover, +#PanelUI-quit:not([disabled]):hover { + outline: 1px solid var(--arrowpanel-dimmed); + background-color: var(--arrowpanel-dimmed); +} + +#PanelUI-fxa-status:not([disabled]):hover:active, +#PanelUI-fxa-icon:not([disabled]):hover:active, +#PanelUI-help:not([disabled]):hover:active, +#PanelUI-customize:hover:active, +#PanelUI-quit:not([disabled]):hover:active { + outline: 1px solid var(--arrowpanel-dimmed-further); + background-color: var(--arrowpanel-dimmed-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +#PanelUI-fxa-status:not([disabled]):hover, +#PanelUI-fxa-status:not([disabled]):hover:active, +#PanelUI-fxa-icon:not([disabled]):hover, +#PanelUI-fxa-icon:not([disabled]):hover:active { + outline: none; +} + +#PanelUI-footer-fxa[fxastatus="error"] { + background-color: hsl(42,94%,88%); + border-top: 1px solid hsl(42,94%,70%); +} + +#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover { + background-color: hsl(42,94%,85%); +} + +#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active { + background-color: hsl(42,94%,82%); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +#PanelUI-update-status { + color: black; +} + +#PanelUI-update-status[update-status="succeeded"] { + background-color: hsla(96,65%,75%,.5); +} + +#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover { + background-color: hsla(96,65%,75%,.8); +} + +#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active { + background-color: hsl(96,65%,75%); +} + +#PanelUI-update-status[update-status="failed"] { + background-color: hsla(359,69%,84%,.5); +} + +#PanelUI-update-status[update-status="failed"]:not([disabled]):hover { + background-color: hsla(359,69%,84%,.8); +} + +#PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active { + background-color: hsl(359,69%,84%); +} + +#PanelUI-quit:not([disabled]):hover { + background-color: #d94141; + outline-color: #c23a3a; +} + +#PanelUI-quit:not([disabled]):hover:active { + background-color: #ad3434; + outline-color: #992e2e; +} + +#customization-panelHolder #PanelUI-customize { + color: white; + background-color: hsl(108,66%,30%); + text-shadow: none; + margin-top: -1px; +} + +#customization-panelHolder #PanelUI-customize + toolbarseparator { + display: none; +} + +#customization-panelHolder #PanelUI-customize:hover { + background-color: hsl(109,65%,26%); +} + +#customization-panelHolder #PanelUI-customize:hover:active { + background-color: hsl(109,65%,22%); +} + +#customization-palette .toolbarbutton-multiline-text, +#customization-palette .toolbarbutton-text { + display: none; +} + +panelview .toolbarbutton-1, +.subviewbutton, +.widget-overflow-list .toolbarbutton-1, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button, +.share-provider-button, +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton { + -moz-appearance: none; + padding: 0 6px; + background-color: transparent; + border-radius: 2px; + border-style: solid; + border-color: transparent; +} + +panelview .toolbarbutton-1, +.subviewbutton, +.widget-overflow-list .toolbarbutton-1, +.share-provider-button, +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton { + border-width: 1px; +} + +.subviewbutton.panel-subview-footer { + border-radius: 0; + border: none; +} + +.subviewbutton.panel-subview-footer > .menu-text { + -moz-appearance: none; + margin-inline-start: 0px !important; + padding-inline-start: 6px; + padding-inline-end: 6px; + -moz-box-flex: 0; + text-align: center; +} + +.subviewbutton.panel-subview-footer > .toolbarbutton-icon { + margin: 0; +} + +.subviewbutton.panel-subview-footer > .toolbarbutton-text { + text-align: center; + padding: 0; +} + +.subviewbutton.panel-subview-footer > .menu-accel-container { + padding-inline-start: 6px; +} + +.subviewbutton:not(.panel-subview-footer) { + margin: 0; +} + +.subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text, +/* Bookmark items need a more specific selector. */ +.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text, +.PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text { + font: menu; +} + +.PanelUI-subView .subviewbutton[shortcut]::after { + content: attr(shortcut); + float: right; + color: GrayText; +} + +.PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after { + margin-inline-start: 10px; +} + +/* This is a <label> but it should fit in with the menu font- and colorwise. */ +#PanelUI-characterEncodingView-autodetect-label { + font: menu; + color: inherit; +} + +.cui-widget-panelview .subviewbutton:not(.panel-subview-footer) { + margin-left: 4px; + margin-right: 4px; +} + +panelview .toolbarbutton-1, +.widget-overflow-list > .toolbarbutton-1:not(:first-child), +.widget-overflow-list > toolbaritem:not(:first-child) { + margin-top: 6px; +} + +panelview .toolbarbutton-1@buttonStateHover@, +toolbarbutton.subviewbutton@buttonStateHover@, +menu.subviewbutton@menuStateHover@, +menuitem.subviewbutton@menuStateHover@, +.share-provider-button@buttonStateHover@:not([checked="true"]), +.widget-overflow-list .toolbarbutton-1@buttonStateHover@, +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateHover@ { + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); +} + +.toolbaritem-combined-buttons@inAnyPanel@@buttonStateHover@ { + border-color: var(--panel-separator-color); +} + +panelview .toolbarbutton-1:-moz-any(@buttonStateActive@,[checked=true]), +toolbarbutton.subviewbutton@buttonStateActive@, +menu.subviewbutton@menuStateActive@, +menuitem.subviewbutton@menuStateActive@, +.share-provider-button:-moz-any(@buttonStateActive@,[checked=true]), +.widget-overflow-list .toolbarbutton-1@buttonStateActive@, +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton@buttonStateActive@ { + background-color: var(--arrowpanel-dimmed-further); + border-color: var(--panel-separator-color); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; +} + +.subviewbutton.panel-subview-footer { + margin: 4px -4px -4px; + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); + border-radius: 0; +} + +menuitem.panel-subview-footer@menuStateHover@, +.subviewbutton.panel-subview-footer@buttonStateHover@ { + background-color: var(--arrowpanel-dimmed-further); +} + +menuitem.panel-subview-footer@menuStateActive@, +.subviewbutton.panel-subview-footer@buttonStateActive@ { + background-color: var(--arrowpanel-dimmed-even-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +#BMB_bookmarksPopup .subviewbutton { + font: menu; + font-weight: normal; +} + +#BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) { + color: inherit; +} + +#BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up, +#BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down { + -moz-appearance: none; + margin-top: 0; + margin-bottom: 0; +} + +/* Remove padding on xul:arrowscrollbox to avoid extra padding on footer */ +#BMB_bookmarksPopup arrowscrollbox { + padding-bottom: 0px; +} + +#BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator { + /* Hide bottom separator as the styled footer includes a top border serving the same purpose */ + display: none; +} + +/* Popups with only one item don't have a footer */ +#BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox, +/* These popups never have a footer */ +#BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox, +#BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox { + /* And so they need some bottom padding: */ + padding-bottom: 4px; +} + +/* Disabled (empty) item is always alone and never has an icon, so fix its left padding */ +#BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton { + padding-left: 6px; +} + +.PanelUI-subView menuseparator, +.PanelUI-subView toolbarseparator, +.cui-widget-panelview menuseparator { + -moz-appearance: none; + min-height: 0; + border-top: 1px solid var(--panel-separator-color); + border-bottom: none; + margin: 6px 0; + padding: 0; +} + +.PanelUI-subView menuseparator, +.PanelUI-subView toolbarseparator { + margin-inline-start: -5px; + margin-inline-end: -4px; +} + +.PanelUI-subView menuseparator.small-separator, +.PanelUI-subView toolbarseparator.small-separator { + margin-left: 5px; + margin-right: 5px; +} + +.cui-widget-panelview menuseparator.small-separator { + margin-left: 10px; + margin-right: 10px; +} + +.subviewbutton > .menu-accel-container { + -moz-box-pack: start; + margin-inline-start: 10px; + margin-inline-end: auto; + color: GrayText; +} + +#PanelUI-remotetabs-tabslist > toolbarbutton, +#PanelUI-historyItems > toolbarbutton { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} + +@media (min-resolution: 1.1dppx) { + #PanelUI-remotetabs-tabslist > toolbarbutton, + #PanelUI-historyItems > toolbarbutton { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png"); + } +} + +#PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon, +#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon, +#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon, +#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +toolbarbutton[panel-multiview-anchor="true"], +toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button { + color: HighlightText; + background-color: Highlight; +} + +#PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator { + display: none; +} + +#PanelUI-help[panel-multiview-anchor="true"] { + background-image: linear-gradient(rgba(255,255,255,0.3), transparent); + background-position: 0; +} + +#PanelUI-help[panel-multiview-anchor="true"]::after { + content: ""; + position: absolute; + top: 0; + height: 100%; + width: var(--panel-ui-exit-subview-gutter-width); + background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png), + linear-gradient(rgba(255,255,255,0.3), transparent); + background-repeat: no-repeat; + background-color: Highlight; + background-position: left 10px center, 0; +} + +#PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after { + background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png), + linear-gradient(rgba(255,255,255,0.3), transparent); + background-position: right 10px center, 0; +} + +toolbarbutton[panel-multiview-anchor="true"] { + background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png), + linear-gradient(rgba(255,255,255,0.3), transparent); + background-position: right calc(@menuPanelButtonWidth@ / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center; + background-repeat: no-repeat, repeat; +} + +toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) { + background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png), + linear-gradient(rgba(255,255,255,0.3), transparent); + background-position: left calc(@menuPanelButtonWidth@ / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center; +} + +toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker, +#bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker { + display: none; +} + +#search-container[cui-areatype="menu-panel"], +#wrapper-search-container[place="panel"] { + width: @menuPanelWidth@; +} + +#search-container[cui-areatype="menu-panel"] { + margin-top: 6px; + margin-bottom: 6px; +} + +toolbarpaletteitem[place="palette"] > #search-container { + min-width: 7em; + width: 7em; +} + +.toolbaritem-combined-buttons@inAnyPanel@ { + background-color: transparent; + border-radius: 2px; + border: 1px solid; + border-color: transparent; + border-bottom-color: var(--panel-separator-color); + padding: 0; + transition-property: background-color, border-color; + transition-duration: 150ms; +} + +/* Make direct siblings overlap borders: */ +.toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@ { + border-top-color: transparent !important; +} + +.toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@, +toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] { + margin-top: -1px; +} + +.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton { + border: 0; + padding: .5em; + margin: 0; + -moz-box-flex: 1; + min-width: calc(@menuPanelButtonWidth@); + max-width: calc(@menuPanelButtonWidth@); + /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope: + 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */ + height: calc(2.2em + 4px); + max-height: none; + -moz-box-orient: horizontal; +} + +#edit-controls@inAnyPanel@ > #copy-button, +#zoom-controls@inAnyPanel@ > #zoom-reset-button { + /* reduce the width with 2px for this button to compensate for two separators + of 1px. */ + min-width: calc(@menuPanelButtonWidth@ - 2px); + max-width: calc(@menuPanelButtonWidth@ - 2px); +} + +#main-window:not([customizing]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon { + opacity: .25; +} + +#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text { +%ifdef XP_MACOSX + min-width: 6ch; +%else + min-width: 7ch; +%endif +} + +#edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(ltr), +#edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(rtl), +#zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(ltr), +#zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +#edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(rtl), +#edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(ltr), +#zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(rtl), +#zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(ltr) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.toolbaritem-combined-buttons@inAnyPanel@ > separator { + -moz-appearance: none; + -moz-box-align: stretch; + margin: .5em 0; + width: 1px; + height: auto; + background: var(--panel-separator-color); + transition-property: margin; + transition-duration: 10ms; + transition-timing-function: ease; +} + +.toolbaritem-combined-buttons@inAnyPanel@:hover > separator { + margin: 0; +} + +#widget-overflow > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +.cui-widget-panelview, +#widget-overflow-scroller { + overflow-y: auto; + overflow-x: hidden; +} + +#widget-overflow-scroller { + max-height: 30em; + margin-top: 10px; + margin-bottom: 10px; +} + +#widget-overflow-list { + width: @menuPanelWidth@; + padding-left: 10px; + padding-right: 10px; +} + +toolbaritem[overflowedItem=true], +.widget-overflow-list .toolbarbutton-1 { + width: 100%; + max-width: @menuPanelWidth@; + min-height: 36px; + background-repeat: no-repeat; + background-position: 0 center; +} + +.widget-overflow-list .toolbarbutton-1, +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button { + -moz-box-align: center; + -moz-box-orient: horizontal; +} + +.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text, +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text { + text-align: start; + padding-inline-start: .5em; +} + +#widget-overflow-list > .toolbaritem-combined-buttons { + min-height: 28px; +} + +.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after { + content: ""; + display: -moz-box; + width: 1px; + height: 18px; + margin-inline-end: -1px; + background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px); + background-clip: padding-box; + background-position: center; + background-repeat: no-repeat; + background-size: 1px 18px; + box-shadow: 0 0 0 1px hsla(0,0%,100%,.2); +} + +.subviewbutton[checked="true"] { + background: url("chrome://global/skin/menu/shared-menu-check.png") center left 7px / 11px 11px no-repeat transparent; +} + +.subviewbutton[checked="true"]:-moz-locale-dir(rtl) { + background-position: center right 7px; +} + +.subviewbutton > .menu-iconic-left { + -moz-appearance: none; + margin-inline-end: 3px; +} + +menuitem[checked="true"].subviewbutton > .menu-iconic-left { + visibility: hidden; +} + +#PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +.panel-mainview[panelid=customizationui-widget-panel], +#customizationui-widget-multiview > .panel-viewcontainer, +#customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack, +#PanelUI-panicView > .panel-subview-body, +#PanelUI-panicView { + overflow: visible; +} + +#PanelUI-panicView.cui-widget-panelview { + min-width: 280px; +} + +#PanelUI-panic-timeframe { + padding: 15px; + border-bottom: 1px solid var(--panel-separator-color); +} + +#panic-button-success-icon, +#PanelUI-panic-timeframe-icon, +#PanelUI-panic-timeframe-icon-small { + background-color: transparent; + margin-inline-end: 10px; +} + +#panic-button-success-icon, +#PanelUI-panic-timeframe-icon { + list-style-image: url(chrome://browser/skin/panic-panel/header.png); + max-height: 48px; + width: 48px; +} + +#PanelUI-panic-timeframe-icon-small { + list-style-image: url(chrome://browser/skin/panic-panel/header-small.png); + max-height: 32px; + width: 32px; +} + +/* current attribute is only set when in use as a subview instead of a main view */ +#PanelUI-panicView[current] #PanelUI-panic-timeframe-icon { + display: none; +} + +#PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small { + display: none; +} + +#panic-button-success-header, +#PanelUI-panic-header { + -moz-box-align: center; + margin-bottom: 5px; +} + +#PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header { + margin-bottom: 0; +} + +#PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl), +#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.subviewradio { + -moz-binding: url(chrome://global/content/bindings/radio.xml#radio); + -moz-appearance: none; + -moz-box-align: center; + padding: 1px; + margin: 0 0 2px; + background-color: transparent; + border-radius: 2px; + border: 1px solid transparent; +} + +.subviewradio@buttonStateHover@ { + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); +} + +.subviewradio[selected], +.subviewradio[selected]:hover, +.subviewradio@buttonStateActive@ { + background-color: var(--arrowpanel-dimmed-further); + border-color: var(--panel-separator-color); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; +} + +.subviewradio > .radio-check { + -moz-appearance: none; + width: 16px; + height: 16px; + border: 1px solid #e7e7e7; + border-radius: 50%; + margin: 1px 5px; + background-color: #f1f1f1; +} + +.subviewradio > .radio-check[selected] { + background-color: #fff; + border: 4px solid #177ee6; +} + +#PanelUI-panic-explanations { + padding: 10px 10px 0; +} + +#PanelUI-panic-actionlist-main-label { + color: GrayText; + font-size: 0.9em; +} + +.PanelUI-panic-actionlist { + padding-inline-start: 20px; + padding-top: 2px; + padding-bottom: 2px; + background-size: 16px 16px; + background-repeat: no-repeat; + background-color: transparent; + background-position: center left; +} + +.PanelUI-panic-actionlist:-moz-locale-dir(rtl) { + background-position: center right; +} + +#PanelUI-panic-actionlist-cookies { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0); +} + +#PanelUI-panic-actionlist-history { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16); +} + +#PanelUI-panic-actionlist-windows { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32); +} + +#PanelUI-panic-actionlist-newwindow { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48); +} + +#PanelUI-panic-warning { + color: #C11F14; + text-align: center; + width: 100%; + margin-top: 20px; +} + +#PanelUI-panic-view-button { + -moz-appearance: none; + background-color: #d92316; + color: white; + margin: 5px 15px 11px; + border: 1px solid #c92014; + border-radius: 3px; + padding: 10px; +} + +#PanelUI-panic-view-button:hover { + background-color: #bf1f13; + border-color: #b81d12; +} + +#PanelUI-panic-view-button:hover:active { + background-color: #99180f; + border-color: #91170f; +} + +#PanelUI-panic-view-button > .toolbarbutton-text { + text-align: center; + text-shadow: none; +} + +#panic-button-success-closebutton { + background-color: #e5e5e5; + color: black; + margin: 5px 0 0; + border: 1px solid #ccc; + border-radius: 3px; + padding: 10px; + -moz-appearance: none; +} + +#panic-button-success-closebutton:hover { + background-color: #dedede; + border-color: #bbb; +} + +#panic-button-success-closebutton:hover:active { + background-color: #d0d0d0; + border-color: #aaa; +} + +@media (min-resolution: 1.1dppx) { + #PanelUI-help[panel-multiview-anchor="true"]::after, + toolbarbutton[panel-multiview-anchor="true"] { + background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted@2x.png), + linear-gradient(rgba(255,255,255,0.3), transparent); + background-size: 16px, auto; + } + + #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after, + toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) { + background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl@2x.png), + linear-gradient(rgba(255,255,255,0.3), transparent); + } + + #PanelUI-update-status { + list-style-image: url(chrome://branding/content/icon32.png); + } + + #PanelUI-fxa-label, + #PanelUI-fxa-icon { + list-style-image: url(chrome://browser/skin/sync-horizontalbar@2x.png); + } + + #PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) { + list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar@2x.png); + } + + #PanelUI-customize { + list-style-image: url(chrome://browser/skin/menuPanel-customize@2x.png); + } + + #customization-panelHolder #PanelUI-customize { + list-style-image: url(chrome://browser/skin/customizableui/menuPanel-customizeFinish@2x.png); + } + + #PanelUI-help { + list-style-image: url(chrome://browser/skin/menuPanel-help@2x.png); + } + + #PanelUI-quit { + list-style-image: url(chrome://browser/skin/menuPanel-exit@2x.png); + } + + #PanelUI-fxa-label, + #PanelUI-fxa-icon, + #PanelUI-customize, + #PanelUI-help, + #PanelUI-quit { + -moz-image-region: rect(0, 32px, 32px, 0); + } + + #PanelUI-update-status > .toolbarbutton-icon, + #PanelUI-fxa-label > .toolbarbutton-icon, + #PanelUI-fxa-icon > .toolbarbutton-icon, + #PanelUI-customize > .toolbarbutton-icon, + #PanelUI-help > .toolbarbutton-icon, + #PanelUI-quit > .toolbarbutton-icon { + width: 16px; + } + + #PanelUI-customize:hover, + #PanelUI-help:not([disabled]):hover, + #PanelUI-quit:not([disabled]):hover { + -moz-image-region: rect(0, 64px, 32px, 32px); + } + + #PanelUI-customize:hover:active, + #PanelUI-help:not([disabled]):hover:active, + #PanelUI-quit:not([disabled]):hover:active { + -moz-image-region: rect(0, 96px, 32px, 64px); + } + + #PanelUI-help[panel-multiview-anchor="true"] { + -moz-image-region: rect(0, 128px, 32px, 96px); + background-size: auto; + } + + .subviewbutton[checked="true"] { + background-image: url("chrome://global/skin/menu/shared-menu-check@2x.png"); + } + + #panic-button-success-icon, + #PanelUI-panic-timeframe-icon { + list-style-image: url(chrome://browser/skin/panic-panel/header@2x.png); + } + + #PanelUI-panic-timeframe-icon-small { + list-style-image: url(chrome://browser/skin/panic-panel/header-small@2x.png); + } + + #PanelUI-panic-actionlist-cookies { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 32, 32, 0); + } + + #PanelUI-panic-actionlist-history { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 64, 32, 32); + } + + #PanelUI-panic-actionlist-windows { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 96, 32, 64); + } + + #PanelUI-panic-actionlist-newwindow { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 128, 32, 96); + } +} diff --git a/browser/themes/shared/customizableui/panelarrow-customizeTip.png b/browser/themes/shared/customizableui/panelarrow-customizeTip.png Binary files differnew file mode 100644 index 000000000..cbdf4692b --- /dev/null +++ b/browser/themes/shared/customizableui/panelarrow-customizeTip.png diff --git a/browser/themes/shared/customizableui/panelarrow-customizeTip@2x.png b/browser/themes/shared/customizableui/panelarrow-customizeTip@2x.png Binary files differnew file mode 100644 index 000000000..cfd7ba966 --- /dev/null +++ b/browser/themes/shared/customizableui/panelarrow-customizeTip@2x.png diff --git a/browser/themes/shared/customizableui/subView-arrow-back-inverted-rtl.png b/browser/themes/shared/customizableui/subView-arrow-back-inverted-rtl.png Binary files differnew file mode 100644 index 000000000..cf4198c60 --- /dev/null +++ b/browser/themes/shared/customizableui/subView-arrow-back-inverted-rtl.png diff --git a/browser/themes/shared/customizableui/subView-arrow-back-inverted-rtl@2x.png b/browser/themes/shared/customizableui/subView-arrow-back-inverted-rtl@2x.png Binary files differnew file mode 100644 index 000000000..bb250403d --- /dev/null +++ b/browser/themes/shared/customizableui/subView-arrow-back-inverted-rtl@2x.png diff --git a/browser/themes/shared/customizableui/subView-arrow-back-inverted.png b/browser/themes/shared/customizableui/subView-arrow-back-inverted.png Binary files differnew file mode 100644 index 000000000..86178abfe --- /dev/null +++ b/browser/themes/shared/customizableui/subView-arrow-back-inverted.png diff --git a/browser/themes/shared/customizableui/subView-arrow-back-inverted@2x.png b/browser/themes/shared/customizableui/subView-arrow-back-inverted@2x.png Binary files differnew file mode 100644 index 000000000..1c8e86db3 --- /dev/null +++ b/browser/themes/shared/customizableui/subView-arrow-back-inverted@2x.png diff --git a/browser/themes/shared/customizableui/whimsy.png b/browser/themes/shared/customizableui/whimsy.png Binary files differnew file mode 100644 index 000000000..2e9fdd7eb --- /dev/null +++ b/browser/themes/shared/customizableui/whimsy.png diff --git a/browser/themes/shared/customizableui/whimsy@2x.png b/browser/themes/shared/customizableui/whimsy@2x.png Binary files differnew file mode 100644 index 000000000..61f55f60f --- /dev/null +++ b/browser/themes/shared/customizableui/whimsy@2x.png diff --git a/browser/themes/shared/devedition.inc.css b/browser/themes/shared/devedition.inc.css new file mode 100644 index 000000000..a5c0db948 --- /dev/null +++ b/browser/themes/shared/devedition.inc.css @@ -0,0 +1,311 @@ +% 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/. + +/* devedition.css is loaded in browser.xul after browser.css when it is + preffed on. The bulk of the styling is here in the shared file, but + there are overrides for each platform in their devedition.css files. */ + +:root { + --tab-toolbar-navbar-overlap: 0px; + --navbar-tab-toolbar-highlight-overlap: 0px; + --space-above-tabbar: 0px; + --toolbarbutton-text-shadow: none; + --backbutton-urlbar-overlap: 0px; +} + +:root[devtoolstheme="dark"] { + /* Chrome */ + --chrome-background-color: #272b35; + --chrome-color: #F5F7FA; + --chrome-secondary-background-color: #393F4C; + --chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2); + --chrome-nav-bar-separator-color: rgba(0,0,0,.2); + --chrome-nav-buttons-background: #252C33; + --chrome-nav-buttons-hover-background: #1B2127; + --chrome-nav-bar-controls-border-color: #1D2328; + --chrome-selection-color: #fff; + --chrome-selection-background-color: #5675B9; + + /* Tabs */ + --tabs-toolbar-color: #F5F7FA; + --tab-background-color: #272b35; + --tab-hover-background-color: #07090a; + --tab-selection-color: #f5f7fa; + --tab-selection-background-color: #5675B9; + --tab-selection-box-shadow: none; + --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, rgba(0,0,0,0.4) 16%, transparent 70%); + + /* Url and search bars */ + --url-and-searchbar-background-color: #171B1F; + --urlbar-separator-color: #5F6670; + --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); + --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px); + --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px); + --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px); + --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); + --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px); + --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px); + --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px); +} + +/* Override the lwtheme-specific styling for toolbar buttons */ +:root[devtoolstheme="dark"], +:root[devtoolstheme="dark"] toolbar:-moz-lwtheme { + --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box; + --toolbarbutton-hover-boxshadow: none; + --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6); + --toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box; + --toolbarbutton-active-boxshadow: none; + --toolbarbutton-active-bordercolor: rgba(25,33,38,.8); + --toolbarbutton-checkedhover-backgroundcolor: #3C5283; + +} + +:root[devtoolstheme="light"] { + --url-and-searchbar-background-color: #fff; + + --chrome-background-color: #E3E4E6; + --chrome-color: #18191a; + --chrome-secondary-background-color: #f5f6f7; + --chrome-navigator-toolbox-separator-color: #cccccc; + --chrome-nav-bar-separator-color: #B6B6B8; + --chrome-nav-buttons-background: #ffffff; /* --theme-body-background */ + --chrome-nav-buttons-hover-background: #DADBDB; + --chrome-nav-bar-controls-border-color: #ccc; + --chrome-selection-color: #f5f7fa; + --chrome-selection-background-color: #4c9ed9; + + --tab-background-color: #E3E4E6; + --tab-hover-background-color: #D7D8DA; + --tab-selection-color: #f5f7fa; + --tab-selection-background-color: #4c9ed9; + --tab-selection-box-shadow: none; + --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%); +} + +/* Override the lwtheme-specific styling for toolbar buttons */ +:root[devtoolstheme="light"], +:root[devtoolstheme="light"] toolbar:-moz-lwtheme { + --toolbarbutton-hover-background: #eaeaea; + --toolbarbutton-hover-boxshadow: none; + --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1); + --toolbarbutton-active-background: #d7d7d8 border-box; + --toolbarbutton-active-boxshadow: none; + --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15); + --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8; +} + +/* Give some space to drag the window around while customizing + (normal space to left and right of tabs doesn't work in this case) */ +#main-window[tabsintitlebar][customizing] { + --space-above-tabbar: 9px; +} + +/* Override @tabCurveHalfWidth@ and @tabCurveWidth@. XXX: Switch to a CSS variable once the perf is sorted out - bug 1088771 */ +.tab-background-middle { + border-left-width: 0; + border-right-width: 0; + margin: 0; +} + +.tab-background, +.tabs-newtab-button { + margin-inline-end: 0; + margin-inline-start: 0; +} + +.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { + padding-inline-end: 0; + padding-inline-start: 0; +} + +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, +.tab-background-start, +.tab-background-end, +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { + width: 0; +} + +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { + margin-inline-start: 0; +} +/* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */ + +#urlbar ::-moz-selection, +#navigator-toolbox .searchbar-textbox ::-moz-selection, +.browserContainer > findbar ::-moz-selection { + background-color: var(--chrome-selection-background-color); + color: var(--chrome-selection-color); +} + +/* Change the base colors for the browser chrome */ + +#tabbrowser-tabs, +#TabsToolbar, +#browser-panel { + background: var(--chrome-background-color); + color: var(--chrome-color); +} + +#navigator-toolbox:-moz-lwtheme::after { + border-bottom-color: var(--chrome-navigator-toolbox-separator-color); +} + +#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar), +.browserContainer > findbar, +#browser-bottombox { + background-color: var(--chrome-secondary-background-color) !important; + background-image: none !important; + color: var(--chrome-color); +} + +/* Default findbar text color doesn't look good - Bug 1125677 */ +.browserContainer > findbar .findbar-find-status, +.browserContainer > findbar .found-matches { + color: inherit; +} + +#navigator-toolbox .toolbarbutton-1, +.browserContainer > findbar .findbar-button, +#PlacesToolbar toolbarbutton.bookmark-item { + color: var(--chrome-color); + text-shadow: var(--toolbarbutton-text-shadow); +} + +/* Using toolbar[brighttext] instead of important to override linux */ +toolbar[brighttext] #downloads-indicator-counter { + text-shadow: var(--toolbarbutton-text-shadow); + color: var(--chrome-color); +} + +#TabsToolbar { + text-shadow: none !important; +} + +/* URL bar and search bar*/ +#urlbar, +#navigator-toolbox .searchbar-textbox { + background-color: var(--url-and-searchbar-background-color) !important; + background-image: none !important; + color: inherit !important; + border: 1px solid var(--chrome-nav-bar-controls-border-color) !important; + box-shadow: none !important; +} + +%filter substitution +%define selectorPrefix :root[devtoolstheme="dark"] +%define selectorSuffix :-moz-lwtheme +%define iconVariant -white +%include identity-block/icons.inc.css + +#urlbar { + border-inline-start: none !important; + opacity: 1 !important; +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper { + overflow: -moz-hidden-unscrollable; + clip-path: none; + margin-inline-start: 0; +} + +:root[devtoolstheme="dark"] #urlbar-zoom-button:hover { + background-color: rgba(255,255,255,.2); +} + +:root[devtoolstheme="dark"] #urlbar-zoom-button:hover:active { + background-color: rgba(255,255,255,.3); +} + +/* Nav bar specific stuff */ +#nav-bar { + margin-top: 0 !important; + border-top: none !important; + border-bottom: none !important; + border-radius: 0 !important; + box-shadow: 0 -1px var(--chrome-nav-bar-separator-color) !important; +} + +/* No extra vertical padding for nav bar */ +#nav-bar-customization-target, +#nav-bar { + padding-top: 0; + padding-bottom: 0; +} + +/* Use smaller back button icon */ +#back-button { + -moz-image-region: rect(0, 54px, 18px, 36px); +} + +@media (min-resolution: 1.1dppx) { + #back-button { + -moz-image-region: rect(0, 108px, 36px, 72px); + } +} + +.tab-background { + visibility: hidden; +} + +/* Tab separators */ +.tabbrowser-tab::after, +.tabbrowser-tab::before { + background: currentColor; + opacity: 0.2 !important; +} + +.tabbrowser-arrowscrollbox > .scrollbutton-down, +.tabbrowser-arrowscrollbox > .scrollbutton-up { + background-color: var(--tab-background-color); + border-color: transparent; +} + +.tabbrowser-tab { + /* We normally rely on other tab elements for pointer events, but this + theme hides those so we need it set here instead */ + pointer-events: auto; +} + +.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + background-image: var(--pinned-tab-glow); + background-position: center; + background-size: 100%; +} + +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) { + background-position: left bottom var(--tab-toolbar-navbar-overlap); + background-size: 34px 100%; +} + +.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover, +.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover, +.tabbrowser-tab:hover { + background-color: var(--tab-hover-background-color); +} + +.tabbrowser-tab[visuallyselected] { + color: var(--tab-selection-color) !important; /* Override color: inherit */ + background-color: var(--tab-selection-background-color); +} + +.tab-icon-sound[soundplaying], +.tab-icon-sound[muted] { + filter: url(chrome://browser/skin/filters.svg#fill) !important; /* removes drop-shadow filter */ +} + +/* Don't need space for the tab curves (66px - 30px) */ +.tabs-newtab-button { + width: 36px; +} + +.tabs-newtab-button:hover { + /* Important needed because !important is used in browser.css */ + background-color: var(--tab-hover-background-color) !important; + background-image: none; +} diff --git a/browser/themes/shared/devedition/urlbar-history-dropmarker.svg b/browser/themes/shared/devedition/urlbar-history-dropmarker.svg new file mode 100644 index 000000000..115fbf127 --- /dev/null +++ b/browser/themes/shared/devedition/urlbar-history-dropmarker.svg @@ -0,0 +1,22 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="14" viewBox="0 0 33 14"> + <defs> + <polygon points="0,0 5.5,7 11,0" id="dropmarker-shape"/> + </defs> + <style> + use { + fill: #b6babf; + } + .hover { + fill: #61bdeb; + } + .active { + fill: #39ace6; + } + </style> + <use xlink:href="#dropmarker-shape" style="transform: translate(0, 4px)"/> + <use xlink:href="#dropmarker-shape" style="transform: translate(11px, 4px)" class="hover"/> + <use xlink:href="#dropmarker-shape" style="transform: translate(22px, 4px)" class="active"/> +</svg> diff --git a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css new file mode 100644 index 000000000..bdb8b7df8 --- /dev/null +++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css @@ -0,0 +1,131 @@ +/* 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/. */ + +%filter substitution + +%define item richlistitem.download +%define itemFocused @item@[selected] + +/*** View and outer controls ***/ + +#downloadsRichListBox { + /** The default listbox appearance comes with an unwanted margin. **/ + -moz-appearance: none; + margin: 0; +} + +/*** List items ***/ + +#downloadsRichListBox > richlistitem.download { + height: var(--downloads-item-height); +} + +.downloadTypeIcon { + margin: 8px 13px; + width: 32px; + height: 32px; +} + +.downloadBlockedBadge { + margin: 0 5px; + background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat; +} + +.downloadBlockedBadge:-moz-locale-dir(rtl) { + background-position-x: left; +} + +@item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge { + background-image: url("chrome://browser/skin/warning.svg"); +} + +@item@[verdict="Uncommon"] .downloadBlockedBadge { + background-image: url("chrome://browser/skin/info.svg"); +} + +@item@ > toolbarseparator { + display: none; +} + +.downloadTarget { + margin: 0; +} + +.downloadDetails { + opacity: 0.7; + font-size: 95%; + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / 0.95 - 1em); +} + +.downloadButton { + -moz-appearance: none; + -moz-box-align: center; + background: transparent; + min-width: 0; + min-height: 0; + margin: 0; + border: none; + color: inherit; + padding: 0 18px; +} + +.downloadButton > .button-box { + -moz-appearance: none; + padding: 2px !important; + border-radius: 50%; +} + +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 0; + filter: url("chrome://browser/skin/filters.svg#fill"); + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + display: none; +} + +.downloadButton:hover > .button-box { + background-color: graytext; + color: -moz-field; +} + +.downloadButton:hover:active > .button-box { + background-color: -moz-fieldtext; +} + +@itemFocused@ > .downloadButtonArea > .downloadButton:hover > .button-box { + background-color: HighlightText; + color: Highlight; +} + +@itemFocused@ > .downloadButtonArea > .downloadButton:hover:active > .button-box { + background-color: -moz-field; + color: -moz-fieldtext; +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel"); +} + +.downloadIconShow > .button-box > .button-icon { +%ifdef XP_MACOSX + list-style-image: url("chrome://browser/skin/panel-icons.svg#magnifier"); +%else + list-style-image: url("chrome://browser/skin/panel-icons.svg#folder"); +%endif +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#retry"); +} + +/*** Progressmeter ***/ +%include progressmeter.inc.css diff --git a/browser/themes/shared/downloads/contentAreaDownloadsView.css b/browser/themes/shared/downloads/contentAreaDownloadsView.css new file mode 100644 index 000000000..aef7df1d9 --- /dev/null +++ b/browser/themes/shared/downloads/contentAreaDownloadsView.css @@ -0,0 +1,31 @@ +/* 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/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +#contentAreaDownloadsView { + padding: 18px; +} + +#downloadsRichListBox:empty { + border-color: transparent; + background-color: transparent; +} + +.downloadButton:not([disabled="true"]):hover, +.downloadButton:not([disabled="true"]):hover:active, +.downloadButton:not([disabled]):hover:active { + background: transparent; + border: none; +} + +.downloadButton > .button-box { + padding-bottom: 0; +} + +#downloadsListEmptyDescription { + margin: 1em; + text-align: center; + color: GrayText; +} diff --git a/browser/themes/shared/downloads/download-blocked.svg b/browser/themes/shared/downloads/download-blocked.svg new file mode 100644 index 000000000..e73efe99e --- /dev/null +++ b/browser/themes/shared/downloads/download-blocked.svg @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> + <style> + circle { + fill: #D92215; + } + rect { + fill: #fff; + } + </style> + + <circle cx="8" cy="8" r="8" /> + <rect x="3" y="6" width="10" height="4" rx=".5" ry=".5" /> +</svg> diff --git a/browser/themes/shared/downloads/download-summary.svg b/browser/themes/shared/downloads/download-summary.svg new file mode 100644 index 000000000..c10ee95fc --- /dev/null +++ b/browser/themes/shared/downloads/download-summary.svg @@ -0,0 +1,11 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + width="32" height="32" viewBox="0 0 32 32"> + <path fill="#fff" d="M26.2,31.4H6.8c-1.8,0-3.4-1.5-3.4-3.3V3.8c0-1.8,1.6-3.3,3.4-3.3H23l5.6,6.4V28C28.7,29.9,28,31.4,26.2,31.4z" /> + <path fill="#939393" d="M26.2,31.9H6.8c-2,0-3.8-1.7-3.8-3.8V3.8C3,1.7,4.8,0,6.8,0h16.4L29,6.7v21.4C29,30.2,28.2,31.9,26.2,31.9z M6.8,1C5.2,1,4,2.3,4,3.8V28c0,1.6,1.4,3,2.9,3h19.2c1.6,0,2-1.5,2-3V7.1L22.7,1C22.7,1,6.8,1,6.8,1z" /> + <path fill="#4c4c4c" d="M22.5,18.2L17,23.6c-0.3,0.3-0.6,0.4-1.1,0.4c-0.3,0-0.8-0.1-1.1-0.4l-5.5-5.4c-0.5-0.5-0.4-1.1,0.4-1.1H13 v-5.9c0-0.5,0.4-1,1-1h3.9c0.5,0,1,0.4,1,1v5.9h3.1C22.8,17.2,23,17.6,22.5,18.2z" /> + <polygon fill="#939393" points="27,9 21,9 21,1.9 22,1.9 22,8 27,8" /> +</svg> diff --git a/browser/themes/shared/downloads/downloads.inc.css b/browser/themes/shared/downloads/downloads.inc.css new file mode 100644 index 000000000..b4d670648 --- /dev/null +++ b/browser/themes/shared/downloads/downloads.inc.css @@ -0,0 +1,372 @@ +/* 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/. */ + +%filter substitution + +%define keyfocus #downloadsPanel[keyfocus] +%define notKeyfocus #downloadsPanel:not([keyfocus]) +%define item richlistitem[type="download"] +%define itemFinished @item@[state="1"] +%define itemNotFinished @item@:not([state="1"]) +%define itemFocused #downloadsListBox:focus > @item@[selected] + +/*** Panel and outer controls ***/ + +#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { + overflow: hidden; + display: block; +} + +#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent, +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews { + padding: 0; +} + +#downloadsListBox { + background: transparent; + color: inherit; + -moz-appearance: none; + margin: 0; +} + +#emptyDownloads { + padding: 16px 25px; + margin: 0; + /* The panel can be wider than this description after the blocked subview is + shown, so center the text. */ + text-align: center; +} + +.downloadsPanelFooter { + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); +} + +.downloadsPanelFooter toolbarseparator, +@item@ > toolbarseparator { + margin: 0; + border: 0; + min-width: 0; + border-left: 1px solid var(--panel-separator-color); + -moz-appearance: none; +} + +.downloadsPanelFooterButton { + -moz-appearance: none; + background-color: transparent; + color: inherit; + margin: 0; + padding: 0; + min-width: 0; + min-height: 40px; + border: none; +} + +.downloadsPanelFooterButton:hover { + outline: 1px solid var(--arrowpanel-dimmed); + background-color: var(--arrowpanel-dimmed); +} + +.downloadsPanelFooterButton:hover:active, +.downloadsPanelFooterButton[open="true"] { + outline: 1px solid var(--arrowpanel-dimmed-further); + background-color: var(--arrowpanel-dimmed-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +.downloadsPanelFooterButton[default] { + background-color: #0996f8; + color: white; +} + +.downloadsPanelFooterButton[default]:hover { + background-color: #0675d3; +} + +.downloadsPanelFooterButton[default]:hover:active { + background-color: #0568ba; +} + +.downloadsPanelFooterButton > .button-box { + padding: 0; + margin: 0; + border: none; +} + +#downloadsHistory { + padding-inline-start: 10px; + padding-inline-end: 10px; +} + +#downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory { + padding-inline-start: 68px; +} + +toolbarseparator.downloadsDropmarkerSplitter { + margin: 7px 0; +} + +@item@ > toolbarseparator { + margin: 10px 0; +} + +@item@:hover > toolbarseparator, +#downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter, +#downloadsFooter[showingdropdown] toolbarseparator { + margin: 0; +} + +.downloadsDropmarker { + padding: 0 21px; +} + +.downloadsDropmarker > .button-box > hbox { + display: none; +} + +.downloadsDropmarker > .button-box > .button-menu-dropmarker { + /* This is to override the linux !important */ + -moz-appearance: none !important; + display: -moz-box; + padding: 0; + margin: 0; +} + +.downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon { + width: 16px; + height: 16px; + list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg"); + filter: url("chrome://browser/skin/filters.svg#fill"); + fill: currentColor; +} + +/* Override default icon size which is too small for this dropdown */ +.downloadsDropmarker > .button-box > .button-menu-dropmarker { + width: 16px; + height: 16px; +} + +#downloadsSummary { + -moz-user-focus: normal; +} + +#downloadsSummary > .downloadTypeIcon { + list-style-image: url("chrome://browser/skin/downloads/download-summary.svg"); +} + +#downloadsSummaryDescription { + color: -moz-nativehyperlinktext; +} + +/*** List items and similar elements in the summary ***/ + +#downloadsSummary, +richlistitem[type="download"] { + height: var(--downloads-item-height); +} + +richlistitem[type="download"] { + border-bottom: 1px solid var(--panel-separator-color); + background: transparent; + color: inherit; +} + +richlistitem[type="download"]:last-child { + border-bottom: none; +} + +.downloadTypeIcon { + margin: 8px 13px; + width: 32px; + height: 32px; +} + +.downloadBlockedBadge { + margin: 0 5px; + background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat; +} + +.downloadBlockedBadge:-moz-locale-dir(rtl) { + background-position-x: left; +} + +@item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge { + background-image: url("chrome://browser/skin/warning.svg"); +} + +@item@[verdict="Uncommon"] .downloadBlockedBadge { + background-image: url("chrome://browser/skin/info.svg"); +} + +/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of + a vbox with class .downloadContainer. We set the font-size of the entire + container to --downloads-item-font-size-factor because: + + 1) This is the size that we want .downloadDetails to be + 2) The container's width is set by localizers by &downloadDetails.width;, + which is a ch unit. Since this is the value that should control the + panel width, we apply it to the outer container to constrain + .downloadTarget and .downloadProgress. + + Finally, since we want .downloadTarget's font-size to be at 100% of the + font-size of .downloadContainer's parent, we use calc to go from the + smaller font-size back to the original font-size. + */ +.downloadContainer { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-inline-end: 13px; +} + +#downloadsSummaryDescription, +.downloadTarget { + margin: 0; + font-size: calc(100% / var(--downloads-item-font-size-factor)); +} + +#downloadsSummaryDetails, +.downloadDetails { + opacity: var(--downloads-item-details-opacity); + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em); +} + +@item@[verdict] > toolbarseparator { + visibility: hidden; +} + +.downloadButton { + -moz-appearance: none; + min-width: 58px; + margin: 0; + border: none; + background: transparent; + padding: 0; + color: inherit; +} + +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 1px; + filter: url("chrome://browser/skin/filters.svg#fill"); + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + margin: 0 !important; + padding: 0; +} + +@itemFinished@[exists] .downloadMainArea:hover, +@item@:not([verdict]) > .downloadButtonArea:hover, +@item@[verdict]:hover { + background-color: var(--arrowpanel-dimmed); +} + +@itemFinished@[exists] > .downloadMainArea:hover:active, +@item@:not([verdict]) > .downloadButtonArea:hover:active, +@item@[verdict]:hover:active { + background-color: var(--arrowpanel-dimmed-further); +} + +@item@[showingsubview] { + background-color: Highlight; + color: HighlightText; + transition: background-color var(--panelui-subview-transition-duration), + color var(--panelui-subview-transition-duration); +} + +@item@[verdict="Malware"]:hover, +@item@[verdict="Malware"]:hover:active, +@item@[verdict="Malware"][showingsubview] { + background-color: #aa1b08; + color: white; +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel"); +} + +.downloadIconShow > .button-box > .button-icon { +%ifdef XP_MACOSX + list-style-image: url("chrome://browser/skin/panel-icons.svg#magnifier"); +%else + list-style-image: url("chrome://browser/skin/panel-icons.svg#folder"); +%endif +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#retry"); +} + +.downloadShowBlockedInfo > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right"); +} + +.downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left"); +} + +/*** Blocked subview ***/ + +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews { + /* When the main view is showing, the shadow on the left edge of the subview is + barely visible on the right edge of the main view, so set it to none. */ + box-shadow: none; +} + +/* When the subview is showing, turn the download button into an arrow pointing + back to the main view. */ +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton { + color: HighlightText; +} + +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left"); +} + +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right"); +} + +#downloadsPanel-blockedSubview { + background-image: url("chrome://browser/skin/warning.svg"); + background-size: 32px 32px; + background-position: 16px 16px; + background-repeat: no-repeat; +} + +#downloadsPanel-blockedSubview:-moz-locale-dir(rtl) { + background-position: calc(100% - 16px) 16px; +} + +#downloadsPanel-blockedSubview[verdict=Malware] { + background-image: url("chrome://browser/skin/downloads/download-blocked.svg"); +} + +#downloadsPanel-blockedSubview-title { + margin-top: 16px; + margin-bottom: 16px; + font-size: calc(100% / var(--downloads-item-font-size-factor)); +} + +#downloadsPanel-blockedSubview-details1, +#downloadsPanel-blockedSubview-details2 { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-bottom: 16px; + opacity: var(--downloads-item-details-opacity); +} + +#downloadsPanel-blockedSubview-title, +#downloadsPanel-blockedSubview-details1, +#downloadsPanel-blockedSubview-details2 { + -moz-margin-start: 64px; + -moz-margin-end: 16px; +} + +/*** Progressmeter ***/ +%include progressmeter.inc.css diff --git a/browser/themes/shared/downloads/menubutton-dropmarker.svg b/browser/themes/shared/downloads/menubutton-dropmarker.svg new file mode 100644 index 000000000..76af113a7 --- /dev/null +++ b/browser/themes/shared/downloads/menubutton-dropmarker.svg @@ -0,0 +1,8 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + width="16" height="16" viewBox="0 0 16 16"> + <path d="m 2,6 6,6 6,-6 -1.5,-1.5 -4.5,4.5 -4.5,-4.5 z" /> +</svg> diff --git a/browser/themes/shared/downloads/progressmeter.inc.css b/browser/themes/shared/downloads/progressmeter.inc.css new file mode 100644 index 000000000..22e780e09 --- /dev/null +++ b/browser/themes/shared/downloads/progressmeter.inc.css @@ -0,0 +1,70 @@ +/*** Common-styled progressmeter ***/ +.downloadProgress { + height: 8px; + border-radius: 1px; + margin: 4px 0 0; + margin-inline-end: 12px; + + /* for overriding rules in progressmeter.css */ + -moz-appearance: none; + border-style: none; + background-color: transparent; + min-width: initial; + min-height: initial; +} + +.downloadProgress[mode="undetermined"] { + /* for overriding rules on global.css in Linux. */ + -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter"); +} + +.downloadProgress > .progress-bar { + background-color: Highlight; + + /* for overriding rules in progressmeter.css */ + -moz-appearance: none; +} + +.downloadProgress[paused="true"] > .progress-bar { + background-color: GrayText; +} + +.downloadProgress[mode="undetermined"] > .progress-bar { + /* Make a white reflecting animation. + Create a gradient with 2 identical pattern, and enlarge the size to 200%. + This allows us to animate background-position with percentage. */ + background-image: linear-gradient(90deg, transparent 0%, + rgba(255,255,255,0.5) 25%, + transparent 50%, + rgba(255,255,255,0.5) 75%, + transparent 100%); + background-blend-mode: lighten; + background-size: 200% 100%; + animation: downloadProgressSlideX 1.5s linear infinite; +} + +.downloadProgress > .progress-remainder { + border: solid ButtonShadow; + border-block-start-width: 1px; + border-block-end-width: 1px; + border-inline-start-width: 0; + border-inline-end-width: 1px; + background-color: ButtonFace; +} + +.downloadProgress[value="0"] > .progress-remainder { + border-width: 1px; +} + +.downloadProgress > .progress-remainder[mode="undetermined"] { + border: none; +} + +@keyframes downloadProgressSlideX { + 0% { + background-position: 0 0; + } + 100% { + background-position: -100% 0; + } +} diff --git a/browser/themes/shared/drm-icon.svg b/browser/themes/shared/drm-icon.svg new file mode 100644 index 000000000..db2b36df6 --- /dev/null +++ b/browser/themes/shared/drm-icon.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"> + <style> + #chains { + fill: url(#baseGradient); + } + #chains-pressed { + fill: url(#pressedGradient); + } + #chains-black { + fill: #000; + } + use:not(:target) { + display: none; + } + </style> + <defs> + <linearGradient id="baseGradient" gradientUnits="userSpaceOnUse" x1="8" x2="8" y1="16" y2="0"> + <stop offset="0" style="stop-color: #808080"/> + <stop offset="1" style="stop-color: #999"/> + </linearGradient> + <linearGradient id="pressedGradient" gradientUnits="userSpaceOnUse" x1="8" x2="8" y1="16" y2="0"> + <stop offset="0" style="stop-color: #4d4d4d"/> + <stop offset="1" style="stop-color: #808080"/> + </linearGradient> + <g id="path"> + <path d="M7.058,9.72c-0.245,0.245-0.62,0.27-0.834,0.056C6.01,9.562,6.035,9.186,6.28,8.942l0.218-0.218 c-0.245-0.245-0.645-0.245-0.89,0L4.496,9.836c-0.245,0.245-0.245,0.645,0,0.89l0.779,0.779c0.245,0.245,0.645,0.245,0.89,0 l1.112-1.112c0.245-0.245,0.245-0.645,0-0.89L7.058,9.72z"/> + <path d="M10.726,4.496c-0.245-0.245-0.645-0.245-0.89,0L8.723,5.608c-0.245,0.245-0.245,0.645,0,0.89 L8.95,6.272c0.245-0.245,0.62-0.27,0.834-0.056s0.189,0.59-0.056,0.834L9.502,7.277c0.245,0.245,0.645,0.245,0.89,0l1.112-1.112 c0.245-0.245,0.245-0.645,0-0.89L10.726,4.496z"/> + <path d="M8,0C3.582,0,0,3.582,0,8s3.582,8,8,8s8-3.582,8-8S12.418,0,8,0z M12.527,6.81l-1.489,1.489 c-0.631,0.631-1.663,0.631-2.293,0L8.612,8.167L8.167,8.612l0.133,0.133c0.631,0.631,0.631,1.663,0,2.293L6.81,12.527 c-0.631,0.631-1.663,0.631-2.293,0l-1.044-1.044c-0.631-0.631-0.631-1.663,0-2.293l1.489-1.489c0.631-0.631,1.663-0.631,2.293,0 l0.133,0.133l0.445-0.445L7.701,7.255c-0.631-0.631-0.631-1.663,0-2.293L9.19,3.473c0.631-0.631,1.663-0.631,2.293,0l1.044,1.044 C13.158,5.148,13.158,6.18,12.527,6.81z"/> + </g> + </defs> + <use xlink:href="#path" id="chains"/> + <use xlink:href="#path" id="chains-pressed"/> + <use xlink:href="#path" id="chains-black"/> +</svg> diff --git a/browser/themes/shared/e10s-64@2x.png b/browser/themes/shared/e10s-64@2x.png Binary files differnew file mode 100644 index 000000000..1dc243865 --- /dev/null +++ b/browser/themes/shared/e10s-64@2x.png diff --git a/browser/themes/shared/error-pages.css b/browser/themes/shared/error-pages.css new file mode 100644 index 000000000..0711be9c7 --- /dev/null +++ b/browser/themes/shared/error-pages.css @@ -0,0 +1,81 @@ +/* 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/. */ + +@import url("chrome://global/skin/in-content/info-pages.css"); + +body { + background-size: 64px 32px; + background-repeat: repeat-x; + /* Top padding for when the window height is small. + Bottom padding to keep everything centered. */ + padding: 75px 0; + /* info-pages.css sets a minimum width of 13em to the content + * container. If we don't set a min-width here, the content + * gets clipped in iframes with small width. We don't accomodate + * any padding to prioritize real estate in the small viewport. */ + min-width: 13em; +} + +.button-container { + display: flex; + flex-flow: row wrap; +} + +.button-spacer { + flex: 1; +} + +@media only screen and (max-width: 959px) { + body { + padding: 75px 48px; + } + + .title { + background-image: none !important; + padding-inline-start: 0; + margin-inline-start: 0; + } + + .title-text { + padding-top: 0; + } +} + +@media only screen and (max-width: 640px) { + body { + justify-content: unset; + /* Now that everything is top-aligned, we don't need the + * bottom padding for centering - though it's added back + * when the viewport height is < 480px (see below). */ + padding: 75px 20px 0; + } + + .title-text { + padding-bottom: 0; + border-bottom: none; + } +} + +@media only screen and (max-width: 480px) { + .button-container button { + /* Force buttons to display: block here to try and enforce collapsing margins */ + display: block; + width: 100%; + margin: 0.66em 0 0; + } +} + +/* For small window height, shift the stripes up by 10px. + * We could just change the background size, but that changes + * the angle of the stripes so just shifting up is easier. */ +@media only screen and (max-height: 480px) { + body { + background-position: 10px -10px; + padding-top: 38px; + /* We get rid of bottom padding for width < 640px, but + * for height < 480px a bit of space between the content + * and the viewport edge is nice. */ + padding-bottom: 38px; + } +}
\ No newline at end of file diff --git a/browser/themes/shared/favicon-search-16.svg b/browser/themes/shared/favicon-search-16.svg new file mode 100644 index 000000000..e839cc804 --- /dev/null +++ b/browser/themes/shared/favicon-search-16.svg @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <circle cx="8" cy="8" r="8" fill="#58bf43"/> + <circle cx="8" cy="8" r="7.5" stroke="#41a833" stroke-width="1" fill="none"/> + <path d="M12.879,12L12,12.879,9.015,9.9A4.276,4.276,0,1,1,9.9,9.015ZM6.5,3.536A2.964,2.964,0,1,0,9.464,6.5,2.964,2.964,0,0,0,6.5,3.536Z" stroke="#41a833" stroke-width="2" fill="none"/> + <path d="M12.879,12L12,12.879,9.015,9.9A4.276,4.276,0,1,1,9.9,9.015ZM6.5,3.536A2.964,2.964,0,1,0,9.464,6.5,2.964,2.964,0,0,0,6.5,3.536Z" fill="#fff"/> +</svg> diff --git a/browser/themes/shared/filters.svg b/browser/themes/shared/filters.svg new file mode 100644 index 000000000..8fccb13cc --- /dev/null +++ b/browser/themes/shared/filters.svg @@ -0,0 +1,9 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="fill"> + <feComposite in="FillPaint" in2="SourceGraphic" operator="in"/> + </filter> +</svg> diff --git a/browser/themes/shared/fullscreen/insecure.svg b/browser/themes/shared/fullscreen/insecure.svg new file mode 100644 index 000000000..eec272f7c --- /dev/null +++ b/browser/themes/shared/fullscreen/insecure.svg @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="24" height="24" viewBox="0 0 24 24"> + <style> + .icon-default { + fill: #fafafa; + } + </style> + + <defs> + <rect id="shape-lock-clasp-outer" x="5" y="1" width="14" height="20" rx="7" ry="7" /> + <rect id="shape-lock-clasp-inner" x="8" y="4" width="8" height="14" rx="4" ry="4" /> + <rect id="shape-lock-base" x="3" y="10" width="18" height="13" rx="1.5" ry="1.5" /> + + <mask id="mask-clasp-cutout"> + <rect width="24" height="24" fill="#000" /> + <use xlink:href="#shape-lock-clasp-outer" fill="#fff" /> + <use xlink:href="#shape-lock-clasp-inner" fill="#000" /> + <line x1="3" y1="21" x2="21.5" y2="0.5" stroke="#000" stroke-width="3" /> + <line x1="3" y1="25" x2="21.5" y2="4.5" stroke="#000" stroke-width="3" /> + <rect x="3" y="10" width="18" height="13" rx="1.5" ry="1.5" /> + </mask> + + <mask id="mask-base-cutout"> + <rect width="24" height="24" fill="#000" /> + <use xlink:href="#shape-lock-base" fill="#fff" /> + <line x1="2.25" y1="24.75" x2="21.5" y2="4.5" stroke="#000" stroke-width="3" /> + </mask> + </defs> + + <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" /> + <use xlink:href="#shape-lock-base" mask="url(#mask-base-cutout)" class="icon-default" /> + + <line x1="2.25" y1="22.75" x2="21.5" y2="2.5" stroke="#d92d21" stroke-width="3" /> +</svg> diff --git a/browser/themes/shared/fullscreen/secure.svg b/browser/themes/shared/fullscreen/secure.svg new file mode 100644 index 000000000..960fc1df0 --- /dev/null +++ b/browser/themes/shared/fullscreen/secure.svg @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> + <style> + .icon-default { + fill: #fafafa; + } + </style> + + <defs> + <rect id="shape-lock-clasp-outer" x="5" y="1" width="14" height="20" rx="7" ry="7" /> + <rect id="shape-lock-clasp-inner" x="8" y="4" width="8" height="14" rx="4" ry="4" /> + <rect id="shape-lock-base" x="3" y="10" width="18" height="13" rx="1.5" ry="1.5" /> + + <mask id="mask-clasp-cutout"> + <rect width="24" height="24" fill="#000" /> + <use xlink:href="#shape-lock-clasp-outer" fill="#fff" /> + <use xlink:href="#shape-lock-clasp-inner" fill="#000" /> + </mask> + </defs> + + <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" /> + <use xlink:href="#shape-lock-base" class="icon-default" /> +</svg> diff --git a/browser/themes/shared/fullscreen/warning.inc.css b/browser/themes/shared/fullscreen/warning.inc.css new file mode 100644 index 000000000..7111a57c7 --- /dev/null +++ b/browser/themes/shared/fullscreen/warning.inc.css @@ -0,0 +1,51 @@ +%if 0 +/* 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/. */ +%endif + +html|*.pointerlockfswarning { + align-items: center; + background: rgba(45, 62, 72, 0.9); + border: 2px solid #fafafa; + box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); + border-radius: 8px; + padding: 24px 16px; + font: message-box; +} + +html|*.pointerlockfswarning::before { + margin: 0; + width: 24px; height: 24px; +} + +html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before, +html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before { + content: url("chrome://browser/skin/fullscreen/secure.svg"); +} + +html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before { + content: url("chrome://browser/skin/fullscreen/insecure.svg"); +} + +html|*.pointerlockfswarning-domain-text, +html|*.pointerlockfswarning-generic-text { + font-size: 21px; + font-weight: lighter; + color: #fafafa; + margin: 0 16px; +} + +html|*.pointerlockfswarning-domain { + font-weight: bold; + margin: 0; +} + +html|*.pointerlockfswarning-exit-button { + padding: 5px 30px; + font: message-box; + font-size: 14px; + font-weight: lighter; + margin: 0; + box-sizing: content-box; +}
\ No newline at end of file diff --git a/browser/themes/shared/fxa/android.png b/browser/themes/shared/fxa/android.png Binary files differnew file mode 100644 index 000000000..e0a37a85e --- /dev/null +++ b/browser/themes/shared/fxa/android.png diff --git a/browser/themes/shared/fxa/android@2x.png b/browser/themes/shared/fxa/android@2x.png Binary files differnew file mode 100644 index 000000000..bb6bab5e0 --- /dev/null +++ b/browser/themes/shared/fxa/android@2x.png diff --git a/browser/themes/shared/fxa/default-avatar.svg b/browser/themes/shared/fxa/default-avatar.svg new file mode 100644 index 000000000..540234911 --- /dev/null +++ b/browser/themes/shared/fxa/default-avatar.svg @@ -0,0 +1,8 @@ +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" viewBox="194 -104 1000 1000" width="80" height="80"> + <path fill="#c3cfd8" d="M694-104.3c276.1 0 500 223.9 500 500s-223.9 500-500 500-500-223.9-500-500c0-276.2 223.9-500 500-500z"/> + <path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M892.4 585.9c10 3.1 19.1 5.7 27.5 8.2 34.5 10 44.8 54.6 17.5 78.1-65.4 56.5-150.7 90.8-244 90.8-92.8 0-177.6-33.8-242.9-89.8-27.4-23.5-17.3-68.2 17.4-78.3 9.2-2.7 19.2-5.5 30.2-9 62.6-19.5 92.6-43.7 98.2-68.7 0-.1 0-.2.1-.2 3.6-16.1-2.8-32.9-15.5-43.5-26.4-22.1-37.1-59.8-44.1-87.5-.8-3.2-1.7-6.5-2.5-9.8-12.1-2.1-25.4-17.3-32.2-38.5-8.2-25.5-3.9-49.8 9.6-54.1 1.3-.4 2.6-.4 3.9-.5-3.1-18.2-6.9-45.4-7.3-69.3-.1-5.2-.2-10.9-.2-16.9 0-3 .1-6.1.1-9.3 0-1.6.1-3.2.2-4.8.1-1.6.2-3.2.3-4.9.9-13.1 2.9-26.8 7-40 7.4-23.7 21.6-45.4 47.4-57.3 5.8-2.7 11-6.4 15.1-11.3 22.4-26.4 49.1-39.6 74.2-45.4 6.9-1.6 13.6-2.6 20.1-3.2 3.2-.3 6.4-.5 9.5-.6 1.6-.1 3.1-.1 4.6-.1h4.5c11.7.3 22 1.8 29.6 3.7 50 12.3 89.2 38 116.4 69.5 13.5 15.8 23.9 33 30.7 50.7 3.4 8.9 5.9 17.9 7.4 26.9.8 4.5 1.3 9 1.6 13.5.3 4.5.3 8.9.1 13.4-1.5 27.1-4.4 45.9-7.3 60.1-2.3 11.1.1 22.2 5 32.4 4.9 10.3 5.3 26.7.2 43.9-6.1 20.3-18.3 35.3-29.8 38.7-2.2 8.1-3.8 13.5-3.9 13.5-3.8 29-10.7 59.8-35.3 82.9-10.5 9.8-15 24.5-13.1 38.7.5 3.5 1 6.6 1.6 9.2 5.6 25.1 35.5 49.3 98.1 68.8z"/> +</svg> diff --git a/browser/themes/shared/fxa/ios.png b/browser/themes/shared/fxa/ios.png Binary files differnew file mode 100644 index 000000000..40c90b1fa --- /dev/null +++ b/browser/themes/shared/fxa/ios.png diff --git a/browser/themes/shared/fxa/ios@2x.png b/browser/themes/shared/fxa/ios@2x.png Binary files differnew file mode 100644 index 000000000..af2d5ace5 --- /dev/null +++ b/browser/themes/shared/fxa/ios@2x.png diff --git a/browser/themes/shared/fxa/logo.png b/browser/themes/shared/fxa/logo.png Binary files differnew file mode 100644 index 000000000..63c006c29 --- /dev/null +++ b/browser/themes/shared/fxa/logo.png diff --git a/browser/themes/shared/fxa/logo@2x.png b/browser/themes/shared/fxa/logo@2x.png Binary files differnew file mode 100644 index 000000000..283b091df --- /dev/null +++ b/browser/themes/shared/fxa/logo@2x.png diff --git a/browser/themes/shared/fxa/sync-illustration.png b/browser/themes/shared/fxa/sync-illustration.png Binary files differnew file mode 100644 index 000000000..3d3730849 --- /dev/null +++ b/browser/themes/shared/fxa/sync-illustration.png diff --git a/browser/themes/shared/fxa/sync-illustration.svg b/browser/themes/shared/fxa/sync-illustration.svg new file mode 100644 index 000000000..dd2b7bde6 --- /dev/null +++ b/browser/themes/shared/fxa/sync-illustration.svg @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="320" height="280" viewBox="0 0 320 280"> + <g fill="#cdcdcd"> + <path d="M46.352,148.919 L46.352,148.919 L44.938,150.333 L43.523,148.919 L43.523,148.919 L37.866,143.262 L39.281,141.848 L44.938,147.505 L50.594,141.848 L52.009,143.262 L46.352,148.919 ZM43.937,134.000 L45.938,134.000 L45.938,142.000 L43.937,142.000 L43.937,134.000 ZM43.937,122.000 L45.938,122.000 L45.938,130.000 L43.937,130.000 L43.937,122.000 Z"/> + <path d="M306.641,132.110 L300.984,126.453 L295.328,132.110 L293.913,130.696 L300.984,123.625 L308.055,130.696 L306.641,132.110 ZM302.000,223.969 L300.000,223.969 L300.000,215.969 L302.000,215.969 L302.000,223.969 ZM302.000,211.969 L300.000,211.969 L300.000,203.969 L302.000,203.969 L302.000,211.969 ZM302.000,199.969 L300.000,199.969 L300.000,191.969 L302.000,191.969 L302.000,199.969 ZM302.000,187.969 L300.000,187.969 L300.000,179.969 L302.000,179.969 L302.000,187.969 ZM302.000,175.969 L300.000,175.969 L300.000,167.969 L302.000,167.969 L302.000,175.969 ZM302.000,163.969 L300.000,163.969 L300.000,155.969 L302.000,155.969 L302.000,163.969 ZM300.000,131.969 L302.000,131.969 L302.000,139.969 L300.000,139.969 L300.000,131.969 ZM302.000,151.969 L300.000,151.969 L300.000,143.969 L302.000,143.969 L302.000,151.969 ZM300.000,227.969 L302.000,227.969 L302.000,232.000 L302.000,234.000 L300.000,234.000 L292.000,234.000 L292.000,232.000 L300.000,232.000 L300.000,227.969 Z"/> + <path d="M101.335,236.009 L99.921,234.594 L105.578,228.938 L99.921,223.281 L101.335,221.866 L108.406,228.938 L101.335,236.009 ZM100.000,229.938 L92.000,229.938 L92.000,227.937 L100.000,227.937 L100.000,229.938 ZM80.000,227.937 L88.000,227.937 L88.000,229.938 L80.000,229.938 L80.000,227.937 Z"/> + <path d="M182.000,54.000 L182.000,52.000 L190.000,52.000 L190.000,54.000 L182.000,54.000 ZM170.000,52.000 L178.000,52.000 L178.000,54.000 L170.000,54.000 L170.000,52.000 ZM168.488,60.071 L161.417,53.000 L168.488,45.929 L169.902,47.343 L164.245,53.000 L169.902,58.657 L168.488,60.071 Z"/> + <path d="M297.688,276.000 L102.312,276.000 C97.721,276.000 94.000,272.279 94.000,267.688 L94.000,260.000 L306.000,260.000 L306.000,267.688 C306.000,272.279 302.279,276.000 297.688,276.000 ZM117.906,150.312 C117.906,145.721 121.628,142.000 126.218,142.000 L273.688,142.000 C278.279,142.000 282.000,145.721 282.000,150.312 L282.000,256.000 L117.906,256.000 L117.906,150.312 ZM132.000,242.000 L270.000,242.000 L270.000,156.000 L132.000,156.000 L132.000,242.000 Z"/> + <path d="M307.074,115.969 L206.926,115.969 C203.101,115.969 200.000,112.868 200.000,109.042 L200.000,38.926 C200.000,35.101 203.101,32.000 206.926,32.000 L307.074,32.000 C310.899,32.000 314.000,35.101 314.000,38.926 L314.000,109.042 C314.000,112.868 310.899,115.969 307.074,115.969 ZM210.000,65.875 C210.000,64.770 209.105,63.875 208.000,63.875 C206.895,63.875 206.000,64.770 206.000,65.875 L206.000,82.000 C206.000,83.105 206.895,84.000 208.000,84.000 C209.105,84.000 210.000,83.105 210.000,82.000 L210.000,65.875 ZM302.000,42.000 L216.000,42.000 L216.000,106.000 L302.000,106.000 L302.000,42.000 Z"/> + <path d="M65.844,240.000 L26.156,240.000 C23.861,240.000 22.000,238.139 22.000,235.844 L22.000,162.156 C22.000,159.861 23.861,158.000 26.156,158.000 L65.844,158.000 C68.139,158.000 70.000,159.861 70.000,162.156 L70.000,235.844 C70.000,238.139 68.139,240.000 65.844,240.000 ZM46.000,236.000 C48.287,236.000 50.141,234.195 50.141,231.969 C50.141,229.742 48.287,227.938 46.000,227.938 C43.713,227.938 41.859,229.742 41.859,231.969 C41.859,234.195 43.713,236.000 46.000,236.000 ZM66.000,168.000 L26.000,168.000 L26.000,224.000 L66.000,224.000 L66.000,168.000 Z"/> + <path d="M171.906,86.156 C171.906,102.329 159.026,115.469 143.017,115.797 L143.039,115.955 L28.850,115.955 L28.869,115.797 C12.872,115.475 -0.000,102.333 -0.000,86.156 C-0.000,71.661 10.336,59.603 23.994,57.019 C23.620,55.457 23.401,53.834 23.401,52.156 C23.401,40.714 32.606,31.438 43.962,31.438 C47.561,31.438 50.941,32.375 53.884,34.012 C53.883,33.930 53.878,33.848 53.878,33.766 C53.878,17.137 67.301,3.656 83.858,3.656 C97.763,3.656 109.453,13.164 112.843,26.059 C116.677,23.334 121.343,21.719 126.393,21.719 C139.394,21.719 149.933,32.331 149.933,45.422 C149.933,49.572 148.868,53.468 147.007,56.861 C161.114,59.082 171.906,71.351 171.906,86.156 Z"/> + </g> +</svg> diff --git a/browser/themes/shared/fxa/sync-illustration@2x.png b/browser/themes/shared/fxa/sync-illustration@2x.png Binary files differnew file mode 100644 index 000000000..23a38587d --- /dev/null +++ b/browser/themes/shared/fxa/sync-illustration@2x.png diff --git a/browser/themes/shared/heartbeat-icon.svg b/browser/themes/shared/heartbeat-icon.svg new file mode 100644 index 000000000..db2cb5f03 --- /dev/null +++ b/browser/themes/shared/heartbeat-icon.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- 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/. --> +<svg width="288px" height="248px" viewBox="0 0 288 248" xmlns="http://www.w3.org/2000/svg"> + <path fill="#d74345" d="M144,248.571429 C141.214272,248.571429 138.857152,247.607152 136.928571,245.678571 L36.6428571,148.928571 C35.5714232,148.071424 34.0982237,146.678581 32.2232143,144.75 C30.3482049,142.821419 27.3750204,139.312525 23.3035714,134.223214 C19.2321225,129.133903 15.5893018,123.910741 12.375,118.553571 C9.16069821,113.196402 6.29465545,106.714324 3.77678571,99.1071429 C1.25891598,91.499962 0,84.1071788 0,76.9285714 C0,53.357025 6.80350339,34.9286379 20.4107143,21.6428571 C34.0179252,8.35707643 52.8213086,1.71428571 76.8214286,1.71428571 C83.4643189,1.71428571 90.2410369,2.86605991 97.1517857,5.16964286 C104.062535,7.4732258 110.491042,10.5803376 116.4375,14.4910714 C122.383958,18.4018053 127.499979,22.0714114 131.785714,25.5 C136.07145,28.9285886 140.142838,32.5714093 144,36.4285714 C147.857162,32.5714093 151.92855,28.9285886 156.214286,25.5 C160.500021,22.0714114 165.616042,18.4018053 171.5625,14.4910714 C177.508958,10.5803376 183.937465,7.4732258 190.848214,5.16964286 C197.758963,2.86605991 204.535681,1.71428571 211.178571,1.71428571 C235.178691,1.71428571 253.982075,8.35707643 267.589286,21.6428571 C281.196497,34.9286379 288,53.357025 288,76.9285714 C288,100.607261 275.732266,124.714163 251.196429,149.25 L151.071429,245.678571 C149.142847,247.607152 146.785728,248.571429 144,248.571429 L144,248.571429 Z" transform="translate(0,-1)"/> + <g transform="translate(0,-0.29)"> + <mask id="mask" fill="#fff"> + <path d="M144,246.857143 C141.214272,246.857143 138.857152,245.892867 136.928571,243.964286 L36.6428571,147.214286 C35.5714232,146.357139 34.0982237,144.964295 32.2232143,143.035714 C30.3482049,141.107133 27.3750204,137.59824 23.3035714,132.508929 C19.2321225,127.419617 15.5893018,122.196455 12.375,116.839286 C9.16069821,111.482116 6.29465545,105.000038 3.77678571,97.3928571 C1.25891598,89.7856763 0,82.392893 0,75.2142857 C0,51.6427393 6.80350339,33.2143521 20.4107143,19.9285714 C34.0179252,6.64279071 52.8213086,0 76.8214286,0 C83.4643189,0 90.2410369,1.1517742 97.1517857,3.45535714 C104.062535,5.75894009 110.491042,8.86605187 116.4375,12.7767857 C122.383958,16.6875196 127.499979,20.3571257 131.785714,23.7857143 C136.07145,27.2143029 140.142838,30.8571236 144,34.7142857 C147.857162,30.8571236 151.92855,27.2143029 156.214286,23.7857143 C160.500021,20.3571257 165.616042,16.6875196 171.5625,12.7767857 C177.508958,8.86605187 183.937465,5.75894009 190.848214,3.45535714 C197.758963,1.1517742 204.535681,0 211.178571,0 C235.178691,0 253.982075,6.64279071 267.589286,19.9285714 C281.196497,33.2143521 288,51.6427393 288,75.2142857 C288,98.8929755 275.732266,122.999877 251.196429,147.535714 L151.071429,243.964286 C149.142847,245.892867 146.785728,246.857143 144,246.857143 L144,246.857143 Z"/> + </mask> + <path fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask)" d="M-166,115.135254 C-166,115.135254 0.595052083,115.135254 2.9765625,115.135254 L91.9101562,115.135254 L97.9638977,100.101562 L105.430695,115.135254 L114.893585,115.135254 L131.129913,189.53125 L148.161163,57 L165.348663,131.027344 L172.272491,115.135254 L250.84967,115.135254 L428.259813,115.135254"/> + </g> +</svg> diff --git a/browser/themes/shared/heartbeat-star-lit.svg b/browser/themes/shared/heartbeat-star-lit.svg new file mode 100644 index 000000000..3f59099b9 --- /dev/null +++ b/browser/themes/shared/heartbeat-star-lit.svg @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="100%" height="100%"> + <path fill="#0095dd" d="M8,0C7.7,0,7.4,0.2,7.2,0.7l-2,4.1L0.9,5.5c-1,0.2-1.2,0.9-0.5,1.6l3.1,3.3l-0.7,4.6C2.7,15.6,3,16,3.4,16c0.2,0,0.4-0.1,0.6-0.2L8,13.7l3.9,2.1c0.2,0.1,0.5,0.2,0.6,0.2c0.5,0,0.8-0.4,0.7-1.1l-0.7-4.6l3.1-3.3c0.7-0.7,0.4-1.4-0.5-1.6l-4.3-0.7l-2-4.1C8.6,0.2,8.3,0,8,0L8,0z"/> +</svg> diff --git a/browser/themes/shared/heartbeat-star-off.svg b/browser/themes/shared/heartbeat-star-off.svg new file mode 100644 index 000000000..143fe48e2 --- /dev/null +++ b/browser/themes/shared/heartbeat-star-off.svg @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="100%" height="100%"> + <path fill="#c0c0c0" d="M8,0C7.7,0,7.4,0.2,7.2,0.7l-2,4.1L0.9,5.5c-1,0.2-1.2,0.9-0.5,1.6l3.1,3.3l-0.7,4.6C2.7,15.6,3,16,3.4,16c0.2,0,0.4-0.1,0.6-0.2L8,13.7l3.9,2.1c0.2,0.1,0.5,0.2,0.6,0.2c0.5,0,0.8-0.4,0.7-1.1l-0.7-4.6l3.1-3.3c0.7-0.7,0.4-1.4-0.5-1.6l-4.3-0.7l-2-4.1C8.6,0.2,8.3,0,8,0L8,0z"/> +</svg> diff --git a/browser/themes/shared/icon-colors.inc.svg b/browser/themes/shared/icon-colors.inc.svg new file mode 100644 index 000000000..dc29d6055 --- /dev/null +++ b/browser/themes/shared/icon-colors.inc.svg @@ -0,0 +1,39 @@ +<style> + +.fieldtext { + fill: -moz-fieldtext; +#ifdef MOZ_WIDGET_GTK + /* The fill-opacity needs to be sufficient for high-contrast settings, and + pathological Gtk themes where -moz-fieldtext provides low contrast by + default. */ + fill-opacity: .7; +#else + fill-opacity: .5; +#endif +} + +#ifdef XP_WIN +@media (-moz-windows-default-theme: 0) { + /* more opacity for high-contrast themes */ + .fieldtext { + fill-opacity: .8; + } +} +#endif + +.highlighttext { + fill: highlighttext; + fill-opacity: 1; +} + +.black { + fill: black; + fill-opacity: .6; +} + +.white { + fill: white; + fill-opacity: .7; +} + +</style> diff --git a/browser/themes/shared/icon.png b/browser/themes/shared/icon.png Binary files differnew file mode 100644 index 000000000..891e7afb1 --- /dev/null +++ b/browser/themes/shared/icon.png diff --git a/browser/themes/shared/identity-block/connection-mixed-active-loaded.svg b/browser/themes/shared/identity-block/connection-mixed-active-loaded.svg new file mode 100644 index 000000000..35d84784a --- /dev/null +++ b/browser/themes/shared/identity-block/connection-mixed-active-loaded.svg @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="16" height="16" viewBox="0 0 16 16"> +#include ../icon-colors.inc.svg + <style> + svg > g:not(:target) { + display: none; + } + </style> + + <defs> + <rect id="shape-lock-clasp-outer" x="4" y="2" width="8" height="10" rx="4" ry="4" /> + <rect id="shape-lock-clasp-inner" x="6" y="4" width="4" height="6" rx="2" ry="2" /> + <rect id="shape-lock-base" x="3" y="7" width="10" height="7" rx="1" ry="1" /> + + <mask id="mask-clasp-cutout"> + <use xlink:href="#shape-lock-clasp-outer" fill="#fff" /> + <use xlink:href="#shape-lock-clasp-inner" fill="#000" /> + <line x1="2" y1="13" x2="14" y2="1.5" stroke="#000" stroke-width="2" /> + <line x1="2" y1="15" x2="14" y2="3.5" stroke="#000" stroke-width="2" /> + <rect x="3" y="7" width="10" height="7" rx="1" ry="1" fill="#000" /> + </mask> + + <mask id="mask-base-cutout"> + <use xlink:href="#shape-lock-base" fill="#fff" /> + <line x1="2" y1="14.8" x2="14" y2="3.2" stroke="#000" stroke-width="1.8" /> + </mask> + + <g id="lock"> + <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)"/> + <use xlink:href="#shape-lock-base" mask="url(#mask-base-cutout)"/> + </g> + + <line id="strike-through-red" x1="2" y1="14.1" x2="14" y2="2.5" stroke="#d92d21" stroke-width="1.8"/> + </defs> + + <g id="icon"> + <use xlink:href="#lock" class="fieldtext"/> + <use xlink:href="#strike-through-red"/> + </g> + + <g id="icon-black"> + <use xlink:href="#lock" class="black"/> + <use xlink:href="#strike-through-red"/> + </g> + + <g id="icon-white"> + <use xlink:href="#lock" class="white"/> + <use xlink:href="#strike-through-red"/> + </g> +</svg> diff --git a/browser/themes/shared/identity-block/connection-mixed-passive-loaded.svg b/browser/themes/shared/identity-block/connection-mixed-passive-loaded.svg new file mode 100644 index 000000000..66cb96ee0 --- /dev/null +++ b/browser/themes/shared/identity-block/connection-mixed-passive-loaded.svg @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="16" height="16" viewBox="0 0 16 16"> +#include ../icon-colors.inc.svg + <style> + svg > g:not(:target) { + display: none; + } + </style> + + <defs> + <rect id="shape-lock-clasp-outer" x="2" y="1" width="8" height="10" rx="4" ry="4" /> + <rect id="shape-lock-clasp-inner" x="4" y="3" width="4" height="6" rx="2" ry="2" /> + <rect id="shape-lock-base" x="1" y="6" width="10" height="7" rx="1" ry="1" /> + + <mask id="mask-clasp-cutout"> + <rect width="16" height="16" fill="#000" /> + <use xlink:href="#shape-lock-clasp-outer" fill="#fff" /> + <use xlink:href="#shape-lock-clasp-inner" fill="#000" /> + </mask> + + <mask id="mask-lock"> + <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" fill="#fff"/> + <use xlink:href="#shape-lock-base" fill="#fff"/> + </mask> + + <g id="warning-triangle"> + <path fill="#fff" d="M10.5,5C9.8,5,9.1,5.4,8.8,6.2l-3.5,6.8c-0.4,0.7-0.4,1.4,0,2c0.4,0.6,1,1,1.8,1H14c0.8,0,1.4-0.4,1.8-1 c0.3-0.6,0.3-1.4,0-2l-3.5-6.8C11.9,5.4,11.2,5,10.5,5L10.5,5z"/> + <path fill="#ffbf00" d="M14.8,13.4l-3.5-6.8C11.2,6.2,10.9,6,10.5,6c-0.3,0-0.7,0.2-0.9,0.6l-3.5,6.8c-0.2,0.4-0.2,0.8,0,1.1C6.3,14.8,6.6,15,7,15 H14c0.4,0,0.7-0.2,0.9-0.5C15.1,14.2,15,13.8,14.8,13.4z"/> + <path fill="#fff" d="M10,8.5C10,8.2,10.2,8,10.5,8S11,8.2,11,8.5L10.8,11h-0.6L10,8.5z"/> + <circle fill="#fff" cx="10.5" cy="12.5" r=".75"/> + </g> + </defs> + + <g id="icon"> + <rect width="16" height="16" mask="url(#mask-lock)" class="fieldtext"/> + <use xlink:href="#warning-triangle"/> + </g> + + <g id="icon-black"> + <rect width="16" height="16" mask="url(#mask-lock)" class="black"/> + <use xlink:href="#warning-triangle"/> + </g> + + <g id="icon-white"> + <rect width="16" height="16" mask="url(#mask-lock)" class="white"/> + <use xlink:href="#warning-triangle"/> + </g> +</svg> diff --git a/browser/themes/shared/identity-block/connection-secure.svg b/browser/themes/shared/identity-block/connection-secure.svg new file mode 100644 index 000000000..5dad8903b --- /dev/null +++ b/browser/themes/shared/identity-block/connection-secure.svg @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="16" height="16" viewBox="0 0 16 16"> + <style> + .icon-default { + fill: #4d9a26; + } + </style> + + <defs> + <rect id="shape-lock-clasp-outer" x="4" y="2" width="8" height="10" rx="4" ry="4" /> + <rect id="shape-lock-clasp-inner" x="6" y="4" width="4" height="6" rx="2" ry="2" /> + <rect id="shape-lock-base" x="3" y="7" width="10" height="7" rx="1" ry="1" /> + + <mask id="mask-clasp-cutout"> + <rect width="16" height="16" fill="#000" /> + <use xlink:href="#shape-lock-clasp-outer" fill="#fff" /> + <use xlink:href="#shape-lock-clasp-inner" fill="#000" /> + </mask> + </defs> + + <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" /> + <use xlink:href="#shape-lock-base" class="icon-default" /> +</svg> diff --git a/browser/themes/shared/identity-block/icons.inc.css b/browser/themes/shared/identity-block/icons.inc.css new file mode 100644 index 000000000..6cf300061 --- /dev/null +++ b/browser/themes/shared/identity-block/icons.inc.css @@ -0,0 +1,62 @@ +%if 0 +/* 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/. */ +%endif + +@selectorPrefix@#identity-icon@selectorSuffix@ { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal@iconVariant@); +} + +@selectorPrefix@#identity-box:hover > #identity-icon:not(.no-hover)@selectorSuffix@, +@selectorPrefix@#identity-box[open=true] > #identity-icon@selectorSuffix@ { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover@iconVariant@); +} + +@selectorPrefix@#identity-box.grantedPermissions > #identity-icon@selectorSuffix@ { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice@iconVariant@); +} + +@selectorPrefix@#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover)@selectorSuffix@, +@selectorPrefix@#identity-box.grantedPermissions[open=true] > #identity-icon@selectorSuffix@ { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover@iconVariant@); +} + +@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon@selectorSuffix@ { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); +} + + +@selectorPrefix@#tracking-protection-icon@selectorSuffix@ { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled@iconVariant@); +} + +@selectorPrefix@#tracking-protection-icon[state="loaded-tracking-content"]@selectorSuffix@ { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled@iconVariant@); +} + + +@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon@selectorSuffix@, +@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon@selectorSuffix@, +@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon@selectorSuffix@ { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; +} + +@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon@selectorSuffix@ { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon@iconVariant@); + visibility: visible; +} + +@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon@selectorSuffix@, +@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon@selectorSuffix@ { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon@iconVariant@); + visibility: visible; +} + +@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon@selectorSuffix@, +@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon@selectorSuffix@, +@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon@selectorSuffix@ { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon@iconVariant@); + visibility: visible; +} diff --git a/browser/themes/shared/identity-block/identity-block.inc.css b/browser/themes/shared/identity-block/identity-block.inc.css new file mode 100644 index 000000000..6fa40e9db --- /dev/null +++ b/browser/themes/shared/identity-block/identity-block.inc.css @@ -0,0 +1,163 @@ +%if 0 +/* 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/. */ +%endif + +%filter substitution + +%define selectorPrefix +%define selectorSuffix +%define iconVariant +%include icons.inc.css + +%define selectorPrefix +%define selectorSuffix :-moz-lwtheme +%define iconVariant -black +%include icons.inc.css + +#identity-box { + font-size: .9em; + padding: 3px 5px; + overflow: hidden; + /* The padding-left and padding-right transitions handle the delayed hiding of + the forward button when hovered. */ + transition: padding-left, padding-right; +} + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels { + color: hsl(92,100%,30%); +} + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels { +%ifdef MOZ_OFFICIAL_BRANDING + color: rgb(229,115,0); +%else + color: inherit; +%endif +} + +#identity-icon-labels:-moz-locale-dir(ltr) { + padding-left: 2px; +} + +#identity-icon-labels:-moz-locale-dir(rtl) { + padding-right: 2px; +} + +@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #identity-box { + padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5px); +} + +@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box { + /* Forward button hiding is delayed when hovered, so we should use the same + delay for the identity box. We handle both horizontal paddings (for LTR and + RTL), the latter two delays here are for padding-left and padding-right. */ + transition-delay: 100s, 100s; +} + +@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box { + /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ + padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5.01px); +} + +/* MAIN IDENTITY ICON */ + +#identity-icon { + width: 16px; + height: 16px; +} + +#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon { + opacity: .3; +} + +#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; +} + +#urlbar[actiontype="extension"] > #identity-box > #identity-icon { + -moz-image-region: inherit; + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg); + width: 16px; + height: 16px; +} + +/* SHARING ICON */ + +#sharing-icon { + width: 16px; + height: 16px; + margin-inline-start: -16px; + position: relative; + display: none; +} + +#identity-box[sharing="camera"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); +} + +#identity-box[sharing="microphone"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); +} + +#identity-box[sharing="screen"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); +} + +#identity-box[sharing] > #sharing-icon { + display: -moz-box; + animation-delay: -1.5s; +} + +#identity-box[sharing] > #identity-icon, +#sharing-icon { + animation: 3s linear pulse infinite; +} + +@keyframes pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; + } + 33.33%, 66.66% { + opacity: 1; + } +} + +/* TRACKING PROTECTION ICON */ + +#tracking-protection-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; + margin-inline-end: 0; +} + +#tracking-protection-icon[animate] { + transition: margin-left 200ms ease-out, margin-right 200ms ease-out; +} + +#tracking-protection-icon:not([state]) { + margin-inline-end: -18px; + pointer-events: none; + opacity: 0; + /* Only animate the shield in, when it disappears hide it immediately. */ + transition: none; +} + +#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon { + visibility: collapse; +} + +/* CONNECTION ICON */ + +#connection-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; + visibility: collapse; +} + diff --git a/browser/themes/shared/identity-block/identity-icon.svg b/browser/themes/shared/identity-block/identity-icon.svg new file mode 100755 index 000000000..9f4c81655 --- /dev/null +++ b/browser/themes/shared/identity-block/identity-icon.svg @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + class="fieldtext" + width="16" height="16" viewBox="0 0 16 16"> +#include ../icon-colors.inc.svg + <style> + use:not(:target) { + display: none; + } + use { + fill-rule: evenodd; + } + </style> + + <defs> + <path id="glyph-normal" d="M128,193a7,7,0,1,1,7-7A7,7,0,0,1,128,193Zm0-13a6,6,0,1,0,6,6A6,6,0,0,0,128,180Zm0,10a1,1,0,0,1-1-1v-3a1,1,0,0,1,2,0v3A1,1,0,0,1,128,190Zm0-6a1,1,0,1,1,1-1A1,1,0,0,1,128,184Z" transform="translate(-120 -178)"/> + <path id="glyph-hover" d="M102,179a7,7,0,1,1-7,7A7,7,0,0,1,102,179Zm0,3a1,1,0,1,1-1,1A1,1,0,0,1,102,182Zm0,3a1,1,0,0,1,1,1v3a1,1,0,0,1-2,0v-3A1,1,0,0,1,102,185Z" transform="translate(-94 -178)"/> + <path id="glyph-notice" d="M133.5,202a2.5,2.5,0,1,1,2.5-2.5A2.5,2.5,0,0,1,133.5,202Zm-5.5,1a1,1,0,1,1,1-1A1,1,0,0,1,128,203Zm1,5a1,1,0,0,1-2,0v-3a1,1,0,0,1,2,0v3Zm-1-9a6.08,6.08,0,1,0,5.629,3.987,3.452,3.452,0,0,0,.984-0.185A6.9,6.9,0,0,1,135,205a7,7,0,1,1-7-7,6.9,6.9,0,0,1,2.2.387,3.452,3.452,0,0,0-.185.984A5.951,5.951,0,0,0,128,199Z" transform="translate(-120 -197)"/> + <path id="glyph-notice-hover" d="M107.5,202a2.5,2.5,0,1,1,2.5-2.5A2.5,2.5,0,0,1,107.5,202Zm0,1.039a3.5,3.5,0,0,0,1.125-.2,7.124,7.124,0,1,1-4.464-4.464,3.5,3.5,0,0,0-.2,1.125A3.54,3.54,0,0,0,107.5,203.039ZM102,201a1,1,0,1,0,1,1A1,1,0,0,0,102,201Zm1,4a1,1,0,0,0-2,0v3a1,1,0,0,0,2,0v-3Z" transform="translate(-94 -197)"/> + </defs> + + <use id="normal" xlink:href="#glyph-normal"/> + <use id="hover" xlink:href="#glyph-hover"/> + <use id="notice" xlink:href="#glyph-notice"/> + <use id="notice-hover" xlink:href="#glyph-notice-hover"/> + + <use class="black" id="normal-black" xlink:href="#glyph-normal"/> + <use class="black" id="hover-black" xlink:href="#glyph-hover"/> + <use class="black" id="notice-black" xlink:href="#glyph-notice"/> + <use class="black" id="notice-hover-black" xlink:href="#glyph-notice-hover"/> + + <use class="white" id="normal-white" xlink:href="#glyph-normal"/> + <use class="white" id="hover-white" xlink:href="#glyph-hover"/> + <use class="white" id="notice-white" xlink:href="#glyph-notice"/> + <use class="white" id="notice-hover-white" xlink:href="#glyph-notice-hover"/> +</svg> diff --git a/browser/themes/shared/identity-block/tracking-protection-16.svg b/browser/themes/shared/identity-block/tracking-protection-16.svg new file mode 100755 index 000000000..6517fe36b --- /dev/null +++ b/browser/themes/shared/identity-block/tracking-protection-16.svg @@ -0,0 +1,59 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="16" height="16" viewBox="0 0 16 16"> +#include ../icon-colors.inc.svg + <style> + g:not(:target) { + display: none; + } + </style> + + <defs> + <path id="shape-shield-outer" d="M8,1L2.8,1.9C2.4,1.9,2,2.4,2,2.8C2,4,2,6.1,2.1,7.1c0.3,2.7,0.8,4,1.9,5.6C5.6,14.7,8,15,8,15s2.4-0.3,4-2.4 c1.2-1.5,1.7-2.9,1.9-5.6C14,6.1,14,4,14,2.8c0-0.5-0.4-0.9-0.8-1L8,1L8,1z"/> + <path id="shape-shield-inner" d="M8,2l5,0.8c0,2,0,3.5-0.1,4.1c-0.3,2.7-0.8,3.8-1.7,5.1c-1.1,1.5-2.7,1.9-3.2,2c-0.4-0.1-2.1-0.5-3.2-2 c-1-1.3-1.5-2.4-1.7-5.1C3,6.3,3,4.8,3,2.8L8,2"/> + <path id="shape-shield-detail" d="M8,13c-0.5-0.1-1.6-0.5-2.4-1.5c-0.9-1.2-1.3-2.1-1.5-4.6C4,6.3,4,5.2,4,3.7L8,3 V13z"/> + + <mask id="mask-shield-cutout"> + <rect width="16" height="16" fill="#000" /> + <use xlink:href="#shape-shield-outer" fill="#fff" /> + <use xlink:href="#shape-shield-inner" fill="#000" /> + <use xlink:href="#shape-shield-detail" fill="#fff" /> + </mask> + + <mask id="mask-shield-cutout-disabled"> + <rect width="16" height="16" fill="#000"/> + <use xlink:href="#shape-shield-outer" fill="#fff"/> + <use xlink:href="#shape-shield-inner" fill="#000"/> + <use xlink:href="#shape-shield-detail" fill="#fff"/> + <line x1="3" y1="15" x2="15" y2="3" stroke="#000" stroke-width="2"/> + </mask> + + <line id="strike-through-red" x1="3" y1="14" x2="15" y2="2" stroke="#d92d21" stroke-width="2"/> + </defs> + + <g id="enabled"> + <use class="fieldtext" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/> + </g> + <g id="enabled-black"> + <use class="black" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/> + </g> + <g id="enabled-white"> + <use class="white" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/> + </g> + + <g id="disabled"> + <use class="fieldtext" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/> + <use xlink:href="#strike-through-red"/> + </g> + <g id="disabled-black"> + <use class="black" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/> + <use xlink:href="#strike-through-red"/> + </g> + <g id="disabled-white"> + <use class="white" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/> + <use xlink:href="#strike-through-red"/> + </g> +</svg> diff --git a/browser/themes/shared/incontent-icons/cert-error.svg b/browser/themes/shared/incontent-icons/cert-error.svg new file mode 100644 index 000000000..9d23267bb --- /dev/null +++ b/browser/themes/shared/incontent-icons/cert-error.svg @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="utf-8"?> + +<svg version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="45" + height="45" + viewBox="0 0 45 45"> + + <style> + .icon-default { + fill: #999; + } + </style> + + <defs> + <rect id="shape-lock-clasp-outer" x="8" y="2" width="28" height="40" rx="14" ry="14" /> + <rect id="shape-lock-clasp-inner" x="14" y="8" width="16" height="28" rx="8" ry="8" /> + <rect id="shape-lock-base" x="4" y="18" width="36" height="24" rx="3" ry="3" /> + + <mask id="mask-clasp-cutout"> + <rect width="48" height="48" fill="#000" /> + <use xlink:href="#shape-lock-clasp-outer" fill="#fff" /> + <use xlink:href="#shape-lock-clasp-inner" fill="#000" /> + <line x1="4" y1="38" x2="41" y2="3" stroke="#000" stroke-width="5.5" /> + <line x1="4" y1="46" x2="41" y2="11" stroke="#000" stroke-width="5.5" /> + <rect x="4" y="18" width="36" height="26" rx="6" ry="6" /> + </mask> + + <mask id="mask-base-cutout"> + <rect width="45" height="45" fill="#000" /> + <use xlink:href="#shape-lock-base" fill="#fff" /> + <line x1="2.5" y1="41.5" x2="41" y2="5" stroke="#000" stroke-width="8.5" /> + </mask> + </defs> + + <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" fill="#999" /> + <use xlink:href="#shape-lock-base" mask="url(#mask-base-cutout)" fill="#999" /> + + <line x1="2.5" y1="41.5" x2="41" y2="5" stroke="#d92d21" stroke-width="5.5" /> + +</svg> diff --git a/browser/themes/shared/incontent-icons/icon-search-64.svg b/browser/themes/shared/incontent-icons/icon-search-64.svg new file mode 100644 index 000000000..56ba96fff --- /dev/null +++ b/browser/themes/shared/incontent-icons/icon-search-64.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> + <ellipse cx="32" cy="34" rx="29.5" ry="30" fill="#000" fill-opacity=".1"/> + <circle cx="32" cy="32" r="30" fill="#58bf43"/> + <circle cx="32" cy="32" r="29.5" stroke="#41a833" stroke-width="1" fill="none"/> + <path d="M50,47.131L47.131,50,36.776,39.647a16.038,16.038,0,1,1,2.871-2.871ZM27,15A12,12,0,1,0,39,27,12,12,0,0,0,27,15Z" stroke="#41a833" stroke-width="2" fill="none"/> + <path d="M50,47.131L47.131,50,36.776,39.647a16.038,16.038,0,1,1,2.871-2.871ZM27,15A12,12,0,1,0,39,27,12,12,0,0,0,27,15Z" fill="#fff"/> + <circle cx="27" cy="27" r="13" fill="#fff" fill-opacity=".2"/> +</svg> diff --git a/browser/themes/shared/incontent-icons/session-restore.svg b/browser/themes/shared/incontent-icons/session-restore.svg new file mode 100644 index 000000000..f545a3362 --- /dev/null +++ b/browser/themes/shared/incontent-icons/session-restore.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
+ <defs>
+ <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="30" y1="10" x2="30" y2="50">
+ <stop offset="0" style="stop-color: #fedb00"/>
+ <stop offset="1" style="stop-color: #fcce00"/>
+ </linearGradient>
+ </defs>
+ <path fill="url(#gradient)" d="M49.316,42.867L33.829,12.7c-0.879-1.715-2.274-2.7-3.828-2.7c-1.554,0-2.949,0.985-3.829,2.702 L10.685,42.864c-0.869,1.69-0.913,3.482-0.121,4.909C11.35,49.187,12.817,50,14.591,50h30.82c1.772,0,3.24-0.81,4.023-2.224 C50.227,46.349,50.185,44.56,49.316,42.867z M32.176,22.304l-0.48,14.304h-3.424L27.76,22.304H32.176z M30,44.896 c-1.44,0-2.592-1.184-2.592-2.592c0-1.44,1.152-2.592,2.592-2.592c1.472,0,2.592,1.152,2.592,2.592 C32.592,43.712,31.472,44.896,30,44.896z"/>
+</svg>
diff --git a/browser/themes/shared/incontent-icons/tab-crashed.svg b/browser/themes/shared/incontent-icons/tab-crashed.svg new file mode 100644 index 000000000..41470df5c --- /dev/null +++ b/browser/themes/shared/incontent-icons/tab-crashed.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
+ <defs>
+ <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="30" y1="12.85" x2="30" y2="47.15">
+ <stop offset="0" style="stop-color: #e63b2e"/>
+ <stop offset="1" style="stop-color: #c33931"/>
+ </linearGradient>
+ </defs>
+ <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#gradient)" d="M49.048,17.648H29.004 c-2.289-0.016-2.809-1.142-3.165-2.401c-0.359-1.269-1.076-2.397-3.229-2.397c-5.775,0-5.42,0-6.167,0 c-2.153,0-2.87,1.127-3.229,2.397c-0.359,1.269-0.882,2.403-3.214,2.403h0.94c-0.519,0.008-0.937,0.433-0.937,0.958v27.583 c0,0.53,0.426,0.959,0.952,0.959h38.093c0.526,0,0.952-0.429,0.952-0.959V18.607C50,18.077,49.574,17.648,49.048,17.648z M18.441,27.932c0-2.119,1.705-3.837,3.809-3.837c2.103,0,3.809,1.718,3.809,3.837c0,2.119-1.705,3.837-3.809,3.837 C20.146,31.769,18.441,30.051,18.441,27.932z M36.717,41.83c-1.525,0-1.525-2.305-6.864-2.305c-5.339,0-5.339,2.305-6.864,2.305 c-0.842,0-1.526-0.512-1.526-1.537c0-1.024,1.271-3.842,8.39-3.842c7.119,0,8.39,2.804,8.39,3.842 C38.243,41.331,37.56,41.83,36.717,41.83z M37.485,31.769c-2.104,0-3.809-1.718-3.809-3.837c0-2.119,1.705-3.837,3.809-3.837 c2.104,0,3.809,1.718,3.809,3.837C41.294,30.051,39.588,31.769,37.485,31.769z"/>
+</svg>
diff --git a/browser/themes/shared/incontent-icons/welcome-back.svg b/browser/themes/shared/incontent-icons/welcome-back.svg new file mode 100644 index 000000000..2fbea04b4 --- /dev/null +++ b/browser/themes/shared/incontent-icons/welcome-back.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
+ <defs>
+ <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0" y1="30" x2="60" y2="30">
+ <stop offset="0" style="stop-color: #fd6b0c"/>
+ <stop offset="1" style="stop-color: #e65206"/>
+ </linearGradient>
+ </defs>
+ <path fill="url(#gradient)" d="M45.844,41.272c0.018-0.08,0.039-0.156,0.055-0.239c0.097-0.35,0.164-0.735,0.215-1.136 c0.375-0.835,0.747-2.172,0.5-3.936c-0.021-0.326-0.073-0.669-0.14-1.018c4.957-3.957,24.499-20.957,5.137-29.039 c0,0,4.23,6.9-2.898,13.92c-4.332,4.266-5.37,8.436-5.058,11.538c0,0,0.036,0.21,0.096,0.564c-1.62-2.178-5.652-4.53-14.256-2.022 c-8.736,2.544-7.476,4.518-9.234,3.606c0,0-0.93-2.166-3.564-4.452c0,0,0.726-4.416-0.42-5.472 c-1.146-1.062-2.628,2.244-5.346,3.432c-2.712,1.188-6.234,2.928-6.57,6.024l-3.39,2.328c0,0-1.446,0.684-0.81,1.32 c0.636,0.636,1.698,1.44,3.012,1.314c1.314-0.126,2.928-0.51,4.158-0.168c1.23,0.336,2.202,2.67,4.872,6.102 c0,0,2.142,4.542,6.936,5.412c0.036,0.024,0.072,0.054,0.108,0.078c1.404,1.026,4.584,3.336,5.148,3.834 c0.744,0.636,7.422,1.158,9.486,0.474c0,0-0.6-3.408-5.04-1.944c0,0-2.082,0.078-4.59-2.892c0.228-0.072,0.456-0.156,0.69-0.252 c1.056-0.402,2.184-0.966,3.39-1.728c0,0,1.542-0.774,3.846-1.356c0,0,2.497-0.555,4.376,0.455c2.542,1.829,6.483,2.442,12.58-0.566 c0,0,5.357,5.102,7.575,8.644c0,0,4.916-1.89-5.065-11.76C51.643,42.336,47.455,42.801,45.844,41.272z"/>
+</svg>
diff --git a/browser/themes/shared/incontent-icons/wifi.svg b/browser/themes/shared/incontent-icons/wifi.svg new file mode 100644 index 000000000..39fd93623 --- /dev/null +++ b/browser/themes/shared/incontent-icons/wifi.svg @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg version="1.1" + xmlns="http://www.w3.org/2000/svg" + width="64" + height="64" + viewBox="0 0 64 64"> + + <style> + .gray { + fill: #797c80; + } + </style> + + <defs> + <clipPath id="clip-path"> + <polygon points="32 52.35 78.88 6.06 -14.88 6.06 32 52.35"/> + </clipPath> + </defs> + + <circle class="gray" cx="32" cy="52" r="6"/> + + <g clip-path="url('#clip-path')"> + <path class="gray" d="M71.63,52A39.63,39.63,0,1,1,32,12.38,39.63,39.63,0,0,1,71.63,52ZM32,7.63A44.38,44.38,0,1,0,76.38,52,44.38,44.38,0,0,0,32,7.63Z"/> + <path class="gray" d="M47.75,52A15.75,15.75,0,1,1,32,36.25,15.75,15.75,0,0,1,47.75,52ZM32,31.65A20.35,20.35,0,1,0,52.35,52,20.35,20.35,0,0,0,32,31.65Z"/> + <path class="gray" d="M59.58,52A27.58,27.58,0,1,1,32,24.42,27.58,27.58,0,0,1,59.58,52ZM32,19.38A32.63,32.63,0,1,0,64.63,52,32.63,32.63,0,0,0,32,19.38Z"/> + </g> +</svg> diff --git a/browser/themes/shared/incontentprefs/containers.css b/browser/themes/shared/incontentprefs/containers.css new file mode 100644 index 000000000..5446dccce --- /dev/null +++ b/browser/themes/shared/incontentprefs/containers.css @@ -0,0 +1,32 @@ +/* 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/. */ + +%include ../../../components/contextualidentity/content/usercontext.css + +.container-header-links { + margin-block-end: 15px; +} + +[data-identity-icon] { + margin: 0; + margin-inline-end: 16px; +} + +#containersView { + border: 0 none; + background: transparent; +} + +#containersView richlistitem { + margin: 0px; + margin-inline-end: 8px; + padding: 0; + padding-block-end: 8px; + border-block-end: 1px solid var(--in-content-header-border-color); +} + +#containersView richlistitem:last-of-type { + border-block-end: 0 none; + margin-block-end: 8px; +} diff --git a/browser/themes/shared/incontentprefs/dialog.inc.css b/browser/themes/shared/incontentprefs/dialog.inc.css new file mode 100644 index 000000000..27de416ab --- /dev/null +++ b/browser/themes/shared/incontentprefs/dialog.inc.css @@ -0,0 +1,68 @@ +%if 0 +/* - 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/. */ +%endif + +dialog, +window, +prefpane, +prefwindow, +.windowDialog { + -moz-appearance: none; + background-color: #fbfbfb; + color: #424e5a; + margin: 0; + padding: 0; +} + +.contentPane { + margin: 0; +} + +tabbox { + /* override the rule in certManager.xul */ + margin: 0 0 5px !important; +} + +tabpanels { + font-size: 1em; +} + +tabs, +label, +description, +#useDocumentColors { + margin-right: 4px; + margin-left: 4px; +} + +tree:not(#rejectsTree) { + min-height: 15em; +} + +.actionButtons { + margin: 3px 0 0 !important; +} + +caption { + padding-inline-start: 0; +} + +groupbox { + font-size: 1em; + margin-top: 0; + margin-right: 4px; + margin-left: 4px; + padding-top: 0; + padding-bottom: 5px; +} + +prefpane .groupbox-body { + padding: 0 0 5px; +} + +groupbox description { + margin-right: 0; + margin-left: 0; +} diff --git a/browser/themes/shared/incontentprefs/favicon.ico b/browser/themes/shared/incontentprefs/favicon.ico Binary files differnew file mode 100644 index 000000000..4d07d2b5d --- /dev/null +++ b/browser/themes/shared/incontentprefs/favicon.ico diff --git a/browser/themes/shared/incontentprefs/icons.svg b/browser/themes/shared/incontentprefs/icons.svg new file mode 100644 index 000000000..2d0b67155 --- /dev/null +++ b/browser/themes/shared/incontentprefs/icons.svg @@ -0,0 +1,63 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> + <style> + use:not(:target) { + display: none; + } + use { + fill: #fbfbfb; + stroke: rgba(0,0,0,0.4); + stroke-width: .5px; + } + use[id$="-native"] { + fill: ThreeDHighlight; + } + </style> + <defs> + <g id="general-shape"> + <path d="M18.97,3H5.03C3.914,3,3,3.914,3,5.03v13.94C3,20.086,3.914,21,5.03,21H18.97c1.117,0,2.03-0.914,2.03-2.03 V5.03C21,3.914,20.086,3,18.97,3z M5.35,19.326c-0.404,0-0.731-0.327-0.731-0.731c0-0.404,0.327-0.731,0.731-0.731 c0.404,0,0.731,0.327,0.731,0.731C6.081,19,5.754,19.326,5.35,19.326z M5.35,6.168c-0.403,0-0.731-0.328-0.731-0.731 c0-0.404,0.328-0.731,0.731-0.731c0.403,0,0.731,0.327,0.731,0.731C6.081,5.84,5.753,6.168,5.35,6.168z M15.243,14.035 c0,0.229-0.186,0.416-0.414,0.416c-0.229,0-0.415,0.186-0.415,0.414v3.347c0,0.228-0.185,0.384-0.414,0.384l-4.141,0.03 c-0.227,0-0.414-0.186-0.414-0.414v-3.347c0-0.228-0.185-0.414-0.414-0.414c-0.227,0-0.414-0.187-0.414-0.416V6.582 c0-0.229,0.187-0.414,0.414-0.414h5.798c0.228,0,0.414,0.185,0.414,0.414V14.035z M18.509,19.326c-0.404,0-0.731-0.327-0.731-0.731 c0-0.404,0.327-0.731,0.731-0.731c0.404,0,0.731,0.327,0.731,0.731C19.24,19,18.913,19.326,18.509,19.326z M18.509,6.168 c-0.404,0-0.731-0.328-0.731-0.731c0-0.404,0.327-0.731,0.731-0.731c0.404,0,0.731,0.327,0.731,0.731 C19.24,5.84,18.913,6.168,18.509,6.168z"/> + <path d="M12.757,7.824h-1.657c-0.456,0-0.828,0.373-0.828,0.828v8.282c0,0.456,0.373,0.828,0.828,0.828h1.657 c0.456,0,0.828-0.373,0.828-0.828V8.652C13.586,8.196,13.213,7.824,12.757,7.824z"/> + </g> + <g id="search-shape"> + <path d="M2,10.018c0,4.43,3.585,8.019,8.009,8.019 c1.603,0,3.095-0.473,4.348-1.285l4.806,4.81c0.58,0.583,1.523,0.583,2.105,0l0.296-0.297c0.582-0.583,0.582-1.527,0-2.11 l-4.808-4.814c0.8-1.247,1.265-2.73,1.265-4.323c0-4.43-3.587-8.018-8.012-8.018C5.585,2,2,5.589,2,10.018z M5.104,10.021 c0-2.716,2.196-4.915,4.906-4.915c2.71,0,4.908,2.199,4.908,4.915c0,2.712-2.198,4.911-4.908,4.911 C7.3,14.931,5.104,12.732,5.104,10.021z"/> + </g> + <g id="content-shape"> + <path d="M16.286,2H5.571C4.388,2,3.429,2.96,3.429,4.143v15.714 C3.429,21.04,4.388,22,5.571,22h12.857c1.185,0,2.143-0.96,2.143-2.143V6.286L16.286,2z M18.945,19.223c0,0.22-0.18,0.4-0.4,0.4 h-13.2c-0.22,0-0.4-0.18-0.4-0.4v-0.846c0-0.22,0.18-0.4,0.4-0.4h13.2c0.22,0,0.4,0.18,0.4,0.4V19.223z M18.945,15.223 c0,0.22-0.18,0.4-0.4,0.4h-13.2c-0.22,0-0.4-0.18-0.4-0.4v-0.846c0-0.22,0.18-0.4,0.4-0.4h13.2c0.22,0,0.4,0.18,0.4,0.4V15.223z M18.945,11.229c0,0.22-0.18,0.4-0.4,0.4h-13.2c-0.22,0-0.4-0.18-0.4-0.4v-0.846c0-0.22,0.18-0.4,0.4-0.4h13.2 c0.22,0,0.4,0.18,0.4,0.4V11.229z M14.833,7.707v-4.65l4.65,4.65H14.833z"/> + </g> + <g id="applications-shape"> + <path d="M16.673,8.914C16.089,4.122,13.248,1,12,1c-1.25,0-3.986,3.122-4.767,7.914l-3.122,3.131v7.889h2.268 l2.978-3.436c0.28,0.29,0.737,1.666,1.065,1.858h3.155c0.331-0.193,0.789-1.569,1.068-1.858l3.123,3.436h2.12v-7.84L16.673,8.914z M12.042,8.735c-0.604,0-1.279,0.06-1.818,0.165c0.478-1.453,1.345-3.117,1.781-3.117c0.435,0,1.301,1.655,1.775,3.1 C13.265,8.789,12.615,8.735,12.042,8.735z M12.524,19.145c0.076,0.196,0.119,0.602,0.119,0.86c0,0.66-0.524,1.074-0.687,1.074 c-0.163,0-0.615-0.414-0.615-1.074c0-0.257,0.045-0.664,0.119-0.86h-0.754c-0.089,0.345-0.39,1.005-0.39,1.408 c0,1.458,1.328,2.447,1.686,2.447c0.359,0,1.686-0.951,1.686-2.407c0-0.404-0.301-1.103-0.388-1.449H12.524z"/> + </g> + <g id="privacy-shape"> + <path d="M21.632,9.541c-0.083,1.403,0.246,3.079-1.597,5.498 c-1.965,2.578-3.914,2.594-4.284,2.575c-2.249-0.117-2.502-1.875-3.792-1.875c-1.13,0-2.012,1.745-3.711,1.836 c-0.37,0.02-2.319,0.042-4.284-2.536c-1.841-2.419-1.514-4.095-1.597-5.498C2.287,8.138,2,6.618,2,6.618s0.887,0.895,2.033,0.973 C5.179,7.67,5.394,7.191,7.811,6.501C10.424,5.752,12,8.814,12,8.814s1.776-3.016,4.189-2.313c2.414,0.7,2.515,1.169,3.661,1.091 C20.996,7.513,22,6.618,22,6.618S21.713,8.138,21.632,9.541z M8.117,10.129c-1.429-0.314-2.028,0.223-2.642,0.451 c-0.534,0.202-1.02,0.264-1.02,0.264s0.083,0.819,1.515,1.521c1.432,0.703,4.37,0.338,4.37,0.338S10.651,10.687,8.117,10.129z M18.525,10.58c-0.612-0.228-1.212-0.765-2.642-0.451c-2.534,0.558-2.223,2.573-2.223,2.573s2.938,0.365,4.37-0.338 c1.432-0.702,1.515-1.521,1.515-1.521S19.059,10.782,18.525,10.58z"/> + </g> + <g id="security-shape"> + <path d="M18.909,9.783h-0.863V8.086C18.046,4.725,15.339,2,12,2 C8.661,2,5.954,4.725,5.954,8.086v1.697H5.091c-0.955,0-1.728,0.779-1.728,1.739v8.738c0,0.961,0.773,1.74,1.728,1.74h13.818 c0.954,0,1.728-0.779,1.728-1.74v-8.738C20.637,10.562,19.863,9.783,18.909,9.783z M8.545,8.086c0-1.92,1.547-3.478,3.455-3.478 c1.908,0,3.455,1.557,3.455,3.478v1.697h-6.91V8.086z M5.181,16.092l-0.909-1.2v-2.284l2.728,3.483H5.181z M8.818,16.092 l-2.773-3.657h1.727l2.864,3.657H8.818z M12,16.092l-2.773-3.657h1.727l2.864,3.657H12z M15.637,16.092l-2.773-3.657h1.727 l2.864,3.657H15.637z M19.728,16.092h-0.455l-2.773-3.657h1.727l1.501,1.916V16.092z"/> + </g> + <g id="sync-shape"> + <path d="M17.024,3.351 c-0.562,0.331 -1.311,0.879 -1.821,1.698 -0.367,0.592 -0.752,1.288 -1.08,1.914 0.987,0.413 1.862,1.095 2.476,2.029 0.614,0.957 0.929,2.122 0.83,3.351 -0.201,1.787 -1.359,3.433 -3.046,4.36 -0.696,-0.774 -1.951,-2.945 -1.951,-2.945 -0.007,0.007 -0.004,2.556 -0.871,4.334 -0.573,1.184 -1.24,2.202 -2.305,2.995 1.431,0.51 2.915,0.886 4.282,0.909 l 0.162,0.002 c 2.99,0.021 5.844,-0.48 5.844,-0.48 0,0 -1.236,-0.802 -1.808,-1.346 1.86,-1.072 3.111,-2.791 3.634,-4.708 0.283,-0.759 0.478,-1.566 0.57,-2.409 C 22.383,9.011 20.33,5.278 17.024,3.351 Z M 6.569,12.302 C 6.526,10.271 7.755,8.327 9.644,7.29 c 0.696,0.774 2.32,2.899 2.32,2.899 0,0 -0.064,-5.157 1.657,-7.973 -6.097,-0.668 -9.69,0.443 -9.69,0.443 0,0 1.763,0.607 2.333,1.136 C 6.122,3.891 5.984,3.992 5.85,4.096 4.4,5.064 3.368,6.449 2.825,7.994 2.436,8.892 2.171,9.863 2.06,10.887 1.622,14.886 3.629,18.572 6.871,20.515 7.39,20.124 7.975,19.631 8.61,18.983 9.189,18.389 9.647,17.682 10.021,16.967 8.082,16.208 6.714,14.404 6.569,12.302 Z"/> + </g> + <g id="advanced-shape"> + <path d="M19.173,16.163c0.004,0.04,0.007,0.08,0.007,0.121c0,1.748-3.197,3.165-7.14,3.165 c-3.943,0-7.14-1.417-7.14-3.165c0 -0.037,0.003-0.073,0.006-0.109C3.11,16.572,2,17.243,2,18.341C2,20.362,6.477,22,12,22 c5.523,0,10-1.638,10-3.659 C22,17.22,20.922,16.553,19.173,16.163z"/> + <path d="M18.224,15.979c0.006-0.11-0.018-0.285-0.054-0.39c0,0-0.762-2.205-1.176-3.403 c-0.624-1.807-2.112-6.139-2.112-6.139c-0.036-0.104-0.031-0.273,0.01-0.376l0.497-1.234c0.041-0.102,0.116-0.266,0.166-0.364 l0.986-1.942c0.05-0.098,0.013-0.133-0.081-0.077L9.965,5.871c-0.095,0.056-0.203,0.186-0.24,0.29c0,0-0.252,0.7-0.412,1.144 C8.64,9.173,7.968,11.04,7.296,12.908c-0.26,0.723-0.52,1.446-0.78,2.168c-0.056,0.156-0.112,0.311-0.168,0.466 c-0.093,0.26-0.049,0.617,0.032,0.881c0.237,0.763,1.001,1.189,1.708,1.435c0.611,0.213,1.254,0.328,1.895,0.403 c0.895,0.105,1.805,0.14,2.706,0.112c1.356-0.041,2.767-0.261,4.004-0.846c0.429-0.203,0.854-0.459,1.174-0.816 c0.121-0.135,0.226-0.287,0.297-0.455C18.215,16.134,18.224,15.979,18.224,15.979z M14.063,16.131 c0.019,0.108-0.046,0.156-0.143,0.104l-1.466-0.772c-0.097-0.052-0.257-0.052-0.354,0l-1.466,0.773 c-0.097,0.052-0.162,0.004-0.143-0.104l0.28-1.636c0.019-0.109-0.031-0.261-0.109-0.338l-1.186-1.158 c-0.079-0.077-0.054-0.153,0.055-0.169l1.638-0.239c0.109-0.016,0.238-0.11,0.286-0.209l0.733-1.488 c0.049-0.099,0.128-0.099,0.177,0l0.733,1.488c0.049,0.099,0.178,0.193,0.286,0.209l1.639,0.239 c0.109,0.016,0.134,0.092,0.055,0.169l-1.186,1.158c-0.079,0.077-0.128,0.229-0.109,0.338L14.063,16.131z"/> + </g> + </defs> + <use id="general" xlink:href="#general-shape"/> + <use id="general-native" xlink:href="#general-shape"/> + <use id="search" xlink:href="#search-shape"/> + <use id="search-native" xlink:href="#search-shape"/> + <use id="content" xlink:href="#content-shape"/> + <use id="content-native" xlink:href="#content-shape"/> + <use id="applications" xlink:href="#applications-shape"/> + <use id="applications-native" xlink:href="#applications-shape"/> + <use id="privacy" xlink:href="#privacy-shape"/> + <use id="privacy-native" xlink:href="#privacy-shape"/> + <use id="security" xlink:href="#security-shape"/> + <use id="security-native" xlink:href="#security-shape"/> + <use id="sync" xlink:href="#sync-shape"/> + <use id="sync-native" xlink:href="#sync-shape"/> + <use id="advanced" xlink:href="#advanced-shape"/> + <use id="advanced-native" xlink:href="#advanced-shape"/> +</svg> diff --git a/browser/themes/shared/incontentprefs/preferences.inc.css b/browser/themes/shared/incontentprefs/preferences.inc.css new file mode 100644 index 000000000..577baa6ed --- /dev/null +++ b/browser/themes/shared/incontentprefs/preferences.inc.css @@ -0,0 +1,591 @@ +%if 0 +/* - 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/. */ +%endif +@namespace html "http://www.w3.org/1999/xhtml"; + +#mainPrefPane { + max-width: 800px; + padding: 0; + font: message-box; + font-size: 1.25rem; +} + +* { + -moz-user-select: text; +} + +button, +treecol { + /* override the * rule */ + -moz-user-select: none; +} + +#engineList treechildren::-moz-tree-image(engineShown, checked), +#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); + width: 21px; + height: 21px; +} + +#engineList treechildren::-moz-tree-image(engineShown, checked, selected), +#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked, selected) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted"); +} + +#engineList treechildren::-moz-tree-row, +#blocklistsTree treechildren::-moz-tree-row { + min-height: 36px; +} + +#selectionCol { + min-width: 26px; +} + +/* Category List */ + +#categories { + max-height: 100vh; +} + +#categories > scrollbox { + overflow-x: hidden !important; +} + +/** + * We want the last category to always have non-0 getBoundingClientRect().bottom + * so we can use the value to figure out the max-height of the list in + * preferences.js, so use collapse instead of display: none; if it's hidden + */ +#categories > .category[hidden="true"] { + display: -moz-box; + visibility: collapse; +} + +#category-general > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general"); +} + +#category-search > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search"); +} + +#category-content > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content"); +} + +#category-application > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications"); +} + +#category-privacy > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy"); +} + +#category-security > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security"); +} + +#category-sync > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync"); +} + +#category-advanced > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced"); +} + +@media (max-width: 800px) { + .category-name { + display: none; + } +} + +/* header */ +.header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.header[hidden=true] { + display: none; +} + +#header-advanced { + border-bottom: none; + padding-bottom: 0; +} + +/* General Pane */ + +#startupTable { + border-collapse: collapse; +} + +#startupTable > tr > td { + padding: 0; /* remove the padding from html.css */ +} + +#startupTable > tr:not(:first-child) > td { + padding-top: 0.5em; /* add a spacing between the rows */ +} + +#startupTable > tr > .label-cell { + text-align: end; + width: 0; /* make the column as small as possible */ +} + +#startupTable > tr > .label-cell > label { + white-space: nowrap; +} + +#startupTable > tr > .content-cell > menulist, +#startupTable > tr > .content-cell > textbox { + width: calc(100% - 8px); + margin-left: 4px; + margin-right: 4px; +} + +#startupTable > tr > .homepage-buttons { + display: flex; + flex-wrap: wrap; +} + +#startupTable > tr > .homepage-buttons > .content-cell-item { + flex-grow: 1; +} + +#useFirefoxSync { + font-size: 90%; + margin-inline-end: 8px !important; +} + +#getStarted { + font-size: 90%; +} + +#isNotDefaultLabel { + font-weight: bold; +} + +#downloadFolder { + margin-inline-start: 0; +} + +/* Content pane */ +#playDRMContentLink { + /* Line up with the buttons in the other grid bits: */ + margin-left: 4px !important; + margin-right: 4px !important; +} + +#notificationsPolicyLearnMore { + margin-inline-start: 1.5em !important; +} + +#defaultFontSizeLabel { + /* !important needed to override common !important rule */ + margin-inline-start: 4px !important; +} + +/* Applications Pane Styles */ + +#applicationsContent { + padding: 15px 0; +} + +#filter { + margin-inline-start: 0; +} + +#handlersView { + height: 25em; +} + +#handlersView > richlistitem { + min-height: 36px !important; +} + +.typeIcon { + margin-inline-start: 10px !important; + margin-inline-end: 9px !important; +} + +.actionIcon { + margin-inline-start: 11px !important; + margin-inline-end: 8px !important; +} + +.actionsMenu { + min-height: 36px; +} + +.actionsMenu > menupopup > menuitem { + padding-inline-start: 10px !important; +} + +.actionsMenu > menupopup > menuitem > .menu-iconic-left { + margin-inline-end: 8px !important; +} + +/* Privacy pane */ + +#trackingProtectionPBMLearnMore, +#trackingProtectionLearnMore, +#browserContainersLearnMore { + margin-inline-start: 1.5em !important; + margin-top: 0; + font-weight: normal; +} + +.doNotTrackLearnMore { + margin-inline-start: calc(1em + 30px); + margin-bottom: 1em; + font-weight: normal; +} + +.doNotTrackLearnMore > label { + font-size: 1em !important; + margin-left: 0; +} + +/* Collapse the non-active vboxes in decks to use only the height the + active vbox needs */ +#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane, +#historyPane:not([selectedIndex="2"]) > #historyCustomPane, +#weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount, +#weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate, +#weavePrefsDeck:not([selectedIndex="3"]) > #noFxaAccount, +#weavePrefsDeck:not([selectedIndex="4"]) > #hasFxaAccount, +#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified, +#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected { + visibility: collapse; +} + +/* XXX This style is for bug 740213 and should be removed once that + bug has a solution. */ +description > html|a { + cursor: pointer; +} + +#weavePrefsDeck > vbox > label, +#weavePrefsDeck > vbox > groupbox, +#weavePrefsDeck > vbox > description, +#weavePrefsDeck > vbox > #pairDevice > label, +#weavePrefsDeck > #needsUpdate > hbox > #loginError, +#weavePrefsDeck > #hasFxaAccount > vbox > label, +#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label { + /* no margin-inline-start for elements at the beginning of a line */ + margin-inline-start: 0; +} + +#tabsElement { + margin-inline-end: 4px; /* add the 4px end-margin of other elements */ +} + +#telemetryLearnMore, +#FHRLearnMore, +#crashReporterLearnMore { + /* provide some margin between the links and the label text */ + /* !important is needed to override the rules defined in common.css */ + margin-inline-start: 20px !important; + /* center the links */ + margin-top: 8px; + margin-bottom: 8px; +} + +.indent { + /* !important needed to override margin-inline-start:0 !important; rule + define in common.css for labels */ + margin-inline-start: 33px !important; +} + +.text-link { + margin-bottom: 0; +} + +#showUpdateHistory { + margin-inline-start: 0; +} + +/** + * Dialog + */ + +#dialogOverlay { + background-color: rgba(0,0,0,0.5); + visibility: hidden; +} + +#dialogBox { + background-color: #fbfbfb; + background-clip: content-box; + color: #424e5a; + font-size: 14px; + /* `transparent` will use the dialogText color in high-contrast themes and + when page colors are disabled */ + border: 1px solid transparent; + border-radius: 3.5px; + box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3); + display: -moz-box; + margin: 0; + padding: 0; +} + +#dialogBox[resizable="true"] { + resize: both; + overflow: hidden; + min-height: 20em; + min-width: 66ch; +} + +#dialogBox > .groupbox-title { + padding: 3.5px 0; + background-color: #F1F1F1; + border-bottom: 1px solid #C1C1C1; +} + +#dialogTitle { + text-align: center; + -moz-user-select: none; +} + +.close-icon { + background-color: transparent !important; + border: none; + box-shadow: none; + padding: 0; + height: auto; + min-height: 16px; + min-width: 0; +} + +#dialogBox > .groupbox-body { + -moz-appearance: none; + padding: 20px; +} + +#dialogFrame { + -moz-box-flex: 1; + /* Default dialog dimensions */ + width: 66ch; +} + +.largeDialogContainer.doScroll { + overflow-y: auto; + -moz-box-flex: 1; +} + +/** + * End Dialog + */ + +/** + * Font dialog menulist fixes + */ + +#defaultFontType, +#serif, +#sans-serif, +#monospace { + min-width: 30ch; +} + +/** + * Sync + */ + +#fxaProfileImage { + max-width: 60px; + border-radius: 50%; + list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg); + margin-inline-end: 15px; + image-rendering: -moz-crisp-edges; +} + +#fxaLoginStatus[hasName] #fxaProfileImage { + max-width: 80px; +} + +#fxaProfileImage.actionable { + cursor: pointer; +} + +#fxaProfileImage.actionable:hover { + box-shadow: 0px 0px 0px 1px #0095DD; +} + +#fxaProfileImage.actionable:hover:active { + box-shadow: 0px 0px 0px 1px #ff9500; +} + +#noFxaAccount { + /* Overriding the margins from the base preferences.css theme file. + These overrides can be simplified by fixing bug 1027174 */ + margin: 0; + padding-top: 15px; +} + +#fxaContentWrapper { + -moz-box-flex: 1; +} + +#noFxaGroup { + -moz-box-flex: 1; + margin: 0; +} + +#fxaContentWrapper { + padding-right: 15px; +} + +#noFxaGroup > vbox, +#fxaGroup { + -moz-box-align: start; +} + +#fxaSyncEngines > vbox:first-child { + margin-right: 80px; +} + +#fxaSyncComputerName { + margin-inline-start: 0px; + -moz-box-flex: 1; +} + +#tosPP-small-ToS { + margin-bottom: 14px; +} + +#noFxaCaption { + font-weight: bold; + margin-bottom: 11px; +} + +.fxaSyncIllustration { + margin-top: 35px; +} + +#syncOptions caption { + margin-bottom: 11px; +} + +#fxaDeviceName { + margin-bottom: 27.5px; +} + +#noFxaDescription { + margin-bottom: 20px !important; +} + +.separator { + border-bottom: 1px solid var(--in-content-header-border-color); +} + +.fxaAccountBox { + border: 1px solid #D1D2D3; + border-radius: 5px; + padding: 14px 20px 14px 14px; +} + +#signedOutAccountBoxTitle { + font-weight: bold; +} + +.fxaAccountBoxButtons { + margin-bottom: 0 !important; + margin-top: 11px; + display: flex; + align-items: center; +} + +.fxaAccountBoxButtons > * { + -moz-box-flex: 1; +} + +.fxaAccountBoxButtons > button { + text-align: center; + padding-left: 11px; + padding-right: 11px; + margin: 0; + min-width: 0; +} + +.fxaAccountBoxButtons > button:first-child { + margin-right: 14px !important; +} + +.fxaSyncIllustration { + width: 231px; + list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png) +} + +#fxaLoginStatus[hasName] #fxaEmailAddress1 { + font-size: 1.1rem; +} + +#fxaEmailAddress1, +#fxaEmailAddress2, +#fxaEmailAddress3 { + word-break: break-all; +} + +.fxaFirefoxLogo { + list-style-image: url(chrome://browser/skin/fxa/logo.png); + max-width: 64px; + margin-inline-end: 14px; +} + +.fxaMobilePromo { + margin-bottom: 20px; + margin-top: 25px; +} + +#fxaLoginRejectedWarning { + list-style-image: url(chrome://browser/skin/warning.svg); + filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15)); + margin: 4px 8px 0px 0px; +} + +#syncOptions { + margin-bottom: 27.5px; +} + +.androidLink { + background-image: url("chrome://browser/skin/fxa/android.png"); +} + +.iOSLink { + background-image: url("chrome://browser/skin/fxa/ios.png"); +} + +.androidLink, +.iOSLink { + margin: 0 0 0 2px; + padding-left: 28px; + padding-top: 6px; + height: 28px; + background-repeat: no-repeat; + background-size: 24px 28px; +} + +#tosPP-small { + margin-top: 20px; + margin-bottom: 20px; +} + +@media (min-resolution: 1.1dppx) { + .androidLink { + background-image: url("chrome://browser/skin/fxa/android@2x.png"); + } + .iOSLink { + background-image: url("chrome://browser/skin/fxa/ios@2x.png"); + } + .fxaSyncIllustration { + list-style-image: url(chrome://browser/skin/fxa/sync-illustration@2x.png) + } + .fxaFirefoxLogo { + list-style-image: url(chrome://browser/skin/fxa/logo@2x.png); + } +} diff --git a/browser/themes/shared/incontentprefs/search.css b/browser/themes/shared/incontentprefs/search.css new file mode 100644 index 000000000..f3c206b41 --- /dev/null +++ b/browser/themes/shared/incontentprefs/search.css @@ -0,0 +1,49 @@ +/* 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/. */ + + #defaultEngine { + margin-inline-start: 0; + } + +#defaultEngine > .menulist-label-box > .menulist-icon { + height: 16px; +} + +/* work around a display: none in Linux's menu.css, see bug 1112310 */ +.searchengine-menuitem > .menu-iconic-left { + display: -moz-box; +} + +#engineList { + margin: .5em 0; +} + +#engineList treechildren::-moz-tree-image(engineName) { + margin-inline-end: 10px; + margin-inline-start: 1px; + width: 16px; + height: 16px; +} + +#engineList treechildren::-moz-tree-drop-feedback { + background-color: Highlight; + width: 10000px; /* 100% doesn't work; 10k is hopefully larger than any window + we may have, overflow isn't visible. */ + height: 2px; + margin-inline-start: 0; +} + +#engineShown { + min-width: 26px; +} + +#addEnginesBox { + margin-bottom: 1em; +} + +#removeEngineButton, +#restoreDefaultSearchEngines { + margin-right: 0; + margin-left: 0; +} diff --git a/browser/themes/shared/info.svg b/browser/themes/shared/info.svg new file mode 100644 index 000000000..9ff38dd68 --- /dev/null +++ b/browser/themes/shared/info.svg @@ -0,0 +1,9 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <circle fill="#00a1f2" cx="8" cy="8" r="8" /> + <circle fill="#fff" cx="8" cy="4" r="1.25" /> + <rect x="7" y="7" width="2" height="6" rx="1" ry="1" fill="#fff" /> +</svg> diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn new file mode 100644 index 000000000..f99f8de3c --- /dev/null +++ b/browser/themes/shared/jar.inc.mn @@ -0,0 +1,154 @@ +# 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/. + +# This is not a complete / proper jar manifest. It is included by the +# actual theme-specific manifests, so that shared resources need only +# be specified once. As a result, the source file paths are relative +# to the location of the actual manifest. + + skin/classic/browser/aboutNetError.css (../shared/aboutNetError.css) + skin/classic/browser/blockedSite.css (../shared/blockedSite.css) + skin/classic/browser/error-pages.css (../shared/error-pages.css) +* skin/classic/browser/aboutProviderDirectory.css (../shared/aboutProviderDirectory.css) +* skin/classic/browser/aboutSessionRestore.css (../shared/aboutSessionRestore.css) + skin/classic/browser/aboutSocialError.css (../shared/aboutSocialError.css) + skin/classic/browser/aboutTabCrashed.css (../shared/aboutTabCrashed.css) + skin/classic/browser/aboutWelcomeBack.css (../shared/aboutWelcomeBack.css) + skin/classic/browser/content-contextmenu.svg (../shared/content-contextmenu.svg) + skin/classic/browser/addons/addon-install-blocked.svg (../shared/addons/addon-install-blocked.svg) + skin/classic/browser/addons/addon-install-confirm.svg (../shared/addons/addon-install-confirm.svg) + skin/classic/browser/addons/addon-install-downloading.svg (../shared/addons/addon-install-downloading.svg) + skin/classic/browser/addons/addon-install-error.svg (../shared/addons/addon-install-error.svg) + skin/classic/browser/addons/addon-install-installed.svg (../shared/addons/addon-install-installed.svg) + skin/classic/browser/addons/addon-install-restart.svg (../shared/addons/addon-install-restart.svg) + skin/classic/browser/addons/addon-install-warning.svg (../shared/addons/addon-install-warning.svg) +* skin/classic/browser/addons/addon-install-anchor.svg (../shared/addons/addon-install-anchor.svg) +* skin/classic/browser/controlcenter/arrow-subview.svg (../shared/controlcenter/arrow-subview.svg) +* skin/classic/browser/controlcenter/arrow-subview-back.svg (../shared/controlcenter/arrow-subview-back.svg) +* skin/classic/browser/controlcenter/conn-not-secure.svg (../shared/controlcenter/conn-not-secure.svg) +* skin/classic/browser/controlcenter/connection.svg (../shared/controlcenter/connection.svg) +* skin/classic/browser/controlcenter/mcb-disabled.svg (../shared/controlcenter/mcb-disabled.svg) +* skin/classic/browser/controlcenter/permissions.svg (../shared/controlcenter/permissions.svg) +* skin/classic/browser/controlcenter/tracking-protection.svg (../shared/controlcenter/tracking-protection.svg) + skin/classic/browser/controlcenter/warning-gray.svg (../shared/controlcenter/warning-gray.svg) + skin/classic/browser/controlcenter/warning-yellow.svg (../shared/controlcenter/warning-yellow.svg) + skin/classic/browser/customizableui/customizeFavicon.ico (../shared/customizableui/customizeFavicon.ico) + skin/classic/browser/customizableui/customize-illustration.png (../shared/customizableui/customize-illustration.png) + skin/classic/browser/customizableui/customize-illustration@2x.png (../shared/customizableui/customize-illustration@2x.png) + skin/classic/browser/customizableui/customize-illustration-rtl.png (../shared/customizableui/customize-illustration-rtl.png) + skin/classic/browser/customizableui/customize-illustration-rtl@2x.png (../shared/customizableui/customize-illustration-rtl@2x.png) + skin/classic/browser/customizableui/info-icon-customizeTip.png (../shared/customizableui/info-icon-customizeTip.png) + skin/classic/browser/customizableui/info-icon-customizeTip@2x.png (../shared/customizableui/info-icon-customizeTip@2x.png) + skin/classic/browser/customizableui/menuPanel-customizeFinish.png (../shared/customizableui/menuPanel-customizeFinish.png) + skin/classic/browser/customizableui/menuPanel-customizeFinish@2x.png (../shared/customizableui/menuPanel-customizeFinish@2x.png) + skin/classic/browser/customizableui/panelarrow-customizeTip.png (../shared/customizableui/panelarrow-customizeTip.png) + skin/classic/browser/customizableui/panelarrow-customizeTip@2x.png (../shared/customizableui/panelarrow-customizeTip@2x.png) + skin/classic/browser/customizableui/subView-arrow-back-inverted.png (../shared/customizableui/subView-arrow-back-inverted.png) + skin/classic/browser/customizableui/subView-arrow-back-inverted@2x.png (../shared/customizableui/subView-arrow-back-inverted@2x.png) + skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl.png (../shared/customizableui/subView-arrow-back-inverted-rtl.png) + skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl@2x.png (../shared/customizableui/subView-arrow-back-inverted-rtl@2x.png) + skin/classic/browser/customizableui/whimsy.png (../shared/customizableui/whimsy.png) + skin/classic/browser/customizableui/whimsy@2x.png (../shared/customizableui/whimsy@2x.png) + skin/classic/browser/downloads/contentAreaDownloadsView.css (../shared/downloads/contentAreaDownloadsView.css) + skin/classic/browser/downloads/download-blocked.svg (../shared/downloads/download-blocked.svg) + skin/classic/browser/downloads/menubutton-dropmarker.svg (../shared/downloads/menubutton-dropmarker.svg) + skin/classic/browser/downloads/download-summary.svg (../shared/downloads/download-summary.svg) + skin/classic/browser/drm-icon.svg (../shared/drm-icon.svg) + skin/classic/browser/filters.svg (../shared/filters.svg) + skin/classic/browser/fullscreen/insecure.svg (../shared/fullscreen/insecure.svg) + skin/classic/browser/fullscreen/secure.svg (../shared/fullscreen/secure.svg) + skin/classic/browser/heartbeat-icon.svg (../shared/heartbeat-icon.svg) + skin/classic/browser/heartbeat-star-lit.svg (../shared/heartbeat-star-lit.svg) + skin/classic/browser/heartbeat-star-off.svg (../shared/heartbeat-star-off.svg) + skin/classic/browser/connection-secure.svg (../shared/identity-block/connection-secure.svg) +* skin/classic/browser/connection-mixed-passive-loaded.svg (../shared/identity-block/connection-mixed-passive-loaded.svg) +* skin/classic/browser/connection-mixed-active-loaded.svg (../shared/identity-block/connection-mixed-active-loaded.svg) +* skin/classic/browser/identity-icon.svg (../shared/identity-block/identity-icon.svg) + skin/classic/browser/info.svg (../shared/info.svg) +* skin/classic/browser/menuPanel.svg (../shared/menuPanel.svg) +* skin/classic/browser/menuPanel-small.svg (../shared/menuPanel-small.svg) +* skin/classic/browser/notification-icons.svg (../shared/notification-icons.svg) +* skin/classic/browser/tracking-protection-16.svg (../shared/identity-block/tracking-protection-16.svg) + skin/classic/browser/newtab/close.png (../shared/newtab/close.png) + skin/classic/browser/newtab/controls.svg (../shared/newtab/controls.svg) + skin/classic/browser/newtab/whimsycorn.png (../shared/newtab/whimsycorn.png) + skin/classic/browser/panel-icons.svg (../shared/panel-icons.svg) + skin/classic/browser/preferences/in-content/favicon.ico (../shared/incontentprefs/favicon.ico) + skin/classic/browser/preferences/in-content/icons.svg (../shared/incontentprefs/icons.svg) + skin/classic/browser/preferences/in-content/search.css (../shared/incontentprefs/search.css) +* skin/classic/browser/preferences/in-content/containers.css (../shared/incontentprefs/containers.css) +* skin/classic/browser/preferences/containers.css (../shared/preferences/containers.css) + skin/classic/browser/fxa/default-avatar.svg (../shared/fxa/default-avatar.svg) + skin/classic/browser/fxa/logo.png (../shared/fxa/logo.png) + skin/classic/browser/fxa/logo@2x.png (../shared/fxa/logo@2x.png) + skin/classic/browser/fxa/sync-illustration.png (../shared/fxa/sync-illustration.png) + skin/classic/browser/fxa/sync-illustration@2x.png (../shared/fxa/sync-illustration@2x.png) + skin/classic/browser/fxa/sync-illustration.svg (../shared/fxa/sync-illustration.svg) + skin/classic/browser/fxa/android.png (../shared/fxa/android.png) + skin/classic/browser/fxa/android@2x.png (../shared/fxa/android@2x.png) + skin/classic/browser/fxa/ios.png (../shared/fxa/ios.png) + skin/classic/browser/fxa/ios@2x.png (../shared/fxa/ios@2x.png) + skin/classic/browser/search-indicator.png (../shared/search/search-indicator.png) + skin/classic/browser/search-indicator@2x.png (../shared/search/search-indicator@2x.png) + skin/classic/browser/search-engine-placeholder.png (../shared/search/search-engine-placeholder.png) + skin/classic/browser/search-engine-placeholder@2x.png (../shared/search/search-engine-placeholder@2x.png) + skin/classic/browser/searchReset.css (../shared/searchReset.css) + skin/classic/browser/badge-add-engine.png (../shared/search/badge-add-engine.png) + skin/classic/browser/badge-add-engine@2x.png (../shared/search/badge-add-engine@2x.png) + skin/classic/browser/search-indicator-badge-add.png (../shared/search/search-indicator-badge-add.png) + skin/classic/browser/search-indicator-badge-add@2x.png (../shared/search/search-indicator-badge-add@2x.png) + skin/classic/browser/search-history-icon.svg (../shared/search/history-icon.svg) + skin/classic/browser/search-indicator-magnifying-glass.svg (../shared/search/search-indicator-magnifying-glass.svg) + skin/classic/browser/search-arrow-go.svg (../shared/search/search-arrow-go.svg) + skin/classic/browser/gear.svg (../shared/search/gear.svg) + skin/classic/browser/social/gear_default.png (../shared/social/gear_default.png) + skin/classic/browser/social/gear_clicked.png (../shared/social/gear_clicked.png) + skin/classic/browser/tabbrowser/connecting.png (../shared/tabbrowser/connecting.png) + skin/classic/browser/tabbrowser/connecting@2x.png (../shared/tabbrowser/connecting@2x.png) + skin/classic/browser/tabbrowser/crashed.svg (../shared/tabbrowser/crashed.svg) + skin/classic/browser/tabbrowser/pendingpaint.png (../shared/tabbrowser/pendingpaint.png) + skin/classic/browser/tabbrowser/tab-audio.svg (../shared/tabbrowser/tab-audio.svg) + skin/classic/browser/tabbrowser/tab-audio-small.svg (../shared/tabbrowser/tab-audio-small.svg) + skin/classic/browser/tabbrowser/tab-overflow-indicator.png (../shared/tabbrowser/tab-overflow-indicator.png) + skin/classic/browser/theme-switcher-icon.png (../shared/theme-switcher-icon.png) + skin/classic/browser/theme-switcher-icon@2x.png (../shared/theme-switcher-icon@2x.png) + skin/classic/browser/toolbarbutton-dropdown-arrow.png (../shared/toolbarbutton-dropdown-arrow.png) + skin/classic/browser/translating-16.png (../shared/translation/translating-16.png) + skin/classic/browser/translating-16@2x.png (../shared/translation/translating-16@2x.png) + skin/classic/browser/translation-16.png (../shared/translation/translation-16.png) + skin/classic/browser/translation-16@2x.png (../shared/translation/translation-16@2x.png) + skin/classic/browser/undoCloseTab.png (../shared/undoCloseTab.png) + skin/classic/browser/undoCloseTab@2x.png (../shared/undoCloseTab@2x.png) + skin/classic/browser/update-badge.svg (../shared/update-badge.svg) + skin/classic/browser/update-badge-failed.svg (../shared/update-badge-failed.svg) + skin/classic/browser/warning.svg (../shared/warning.svg) + skin/classic/browser/warning-white.svg (../shared/warning-white.svg) + skin/classic/browser/cert-error.svg (../shared/incontent-icons/cert-error.svg) + skin/classic/browser/wifi.svg (../shared/incontent-icons/wifi.svg) + skin/classic/browser/session-restore.svg (../shared/incontent-icons/session-restore.svg) + skin/classic/browser/tab-crashed.svg (../shared/incontent-icons/tab-crashed.svg) + skin/classic/browser/favicon-search-16.svg (../shared/favicon-search-16.svg) + skin/classic/browser/icon-search-64.svg (../shared/incontent-icons/icon-search-64.svg) + skin/classic/browser/welcome-back.svg (../shared/incontent-icons/welcome-back.svg) + skin/classic/browser/reader-tour.png (../shared/reader/reader-tour.png) + skin/classic/browser/reader-tour@2x.png (../shared/reader/reader-tour@2x.png) + skin/classic/browser/readerMode.svg (../shared/reader/readerMode.svg) + skin/classic/browser/webRTC-camera-white-16.png (../shared/webrtc/camera-white-16.png) + skin/classic/browser/webRTC-microphone-white-16.png (../shared/webrtc/microphone-white-16.png) + skin/classic/browser/webRTC-screen-white-16.png (../shared/webrtc/screen-white-16.png) + skin/classic/browser/panic-panel/header.png (../shared/panic-panel/header.png) + skin/classic/browser/panic-panel/header@2x.png (../shared/panic-panel/header@2x.png) + skin/classic/browser/panic-panel/header-small.png (../shared/panic-panel/header-small.png) + skin/classic/browser/panic-panel/header-small@2x.png (../shared/panic-panel/header-small@2x.png) + skin/classic/browser/panic-panel/icons.png (../shared/panic-panel/icons.png) + skin/classic/browser/panic-panel/icons@2x.png (../shared/panic-panel/icons@2x.png) + skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css) + skin/classic/browser/privatebrowsing/check.svg (../shared/privatebrowsing/check.svg) + skin/classic/browser/privatebrowsing/favicon.svg (../shared/privatebrowsing/favicon.svg) + skin/classic/browser/privatebrowsing/private-browsing.svg (../shared/privatebrowsing/private-browsing.svg) + skin/classic/browser/privatebrowsing/tracking-protection-off.svg (../shared/privatebrowsing/tracking-protection-off.svg) + skin/classic/browser/privatebrowsing/tracking-protection.svg (../shared/privatebrowsing/tracking-protection.svg) + skin/classic/browser/devedition/urlbar-history-dropmarker.svg (../shared/devedition/urlbar-history-dropmarker.svg) + skin/classic/browser/urlbar-star.svg (../shared/urlbar-star.svg) + skin/classic/browser/urlbar-tab.svg (../shared/urlbar-tab.svg) diff --git a/browser/themes/shared/menuPanel-small.svg b/browser/themes/shared/menuPanel-small.svg new file mode 100644 index 000000000..db28992e2 --- /dev/null +++ b/browser/themes/shared/menuPanel-small.svg @@ -0,0 +1,16 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + width="96" height="16" viewBox="0 0 96 16" + class="fieldtext"> +#include icon-colors.inc.svg + + <path id="placeholder" d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM12,4H4v8h8V4ZM5,9.939V6.061L6.939,8ZM9.939,11H6.061L8,9.061ZM11,11h0Zm0-4.939V9.939L9.061,8ZM11,5h0ZM6.061,5H9.939L8,6.939Z"/> + <path id="cut" d="M29.63,15a2.426,2.426,0,0,1-2.282-1.277c-0.761-1.109-1.694-2.488-1.694-2.488S25,10.329,24.549,9.623a1.05,1.05,0,0,0-1.106-.538S20.6,4.437,20.124,3.706C19.465,2.689,20.7,1,20.7,1l4.4,7.044a19.333,19.333,0,0,0,1.867,2.286c0.519,0.4,1.382-.373,2.8.908C31.7,12.984,31.048,15,29.63,15ZM29.423,12.11c-0.933-1.042-1.728-.908-1.936-0.639a2.093,2.093,0,0,0,.38,1.748,1.612,1.612,0,0,0,1.383.74C29.838,13.959,30.356,13.153,29.423,12.11ZM25.582,7.372L24.4,5.6,27.276,1s1.233,1.69.575,2.708C27.568,4.142,26.445,5.967,25.582,7.372Zm-4.576,2.956A12.482,12.482,0,0,0,22.43,8.645l0.826,1.239c-0.428.65-.937,1.352-0.937,1.352s-0.933,1.378-1.694,2.488A2.426,2.426,0,0,1,18.344,15c-1.417,0-2.074-2.017-.138-3.765C19.624,9.956,20.487,10.732,21.006,10.329ZM18.551,12.11c-0.933,1.042-.415,1.849.173,1.849a1.612,1.612,0,0,0,1.383-.74,2.093,2.093,0,0,0,.38-1.748C20.28,11.2,19.485,11.068,18.551,12.11Z"/> + <path id="copy" d="M46,15H40a1,1,0,0,1-1-1V6a1,1,0,0,1,1-1h4.953C45,5,47,6.984,47,7.047V14A1,1,0,0,1,46,15ZM44,6V8h2ZM38,4.886V11H34a1,1,0,0,1-1-1V2a1,1,0,0,1,1-1h4.953C39,1,41,2.985,41,3.047v1.34H38.5A0.5,0.5,0,0,0,38,4.886ZM38,2V4h2Z"/> + <path id="paste" d="M59.5,15h-7A1.5,1.5,0,0,1,51,13.5v-9A1.5,1.5,0,0,1,52.5,3H54a2,2,0,1,1,4,0h1.5A1.5,1.5,0,0,1,61,4.5v9A1.5,1.5,0,0,1,59.5,15ZM58.682,4L57.61,3.5a1.613,1.613,0,0,0-3.219,0L53.318,4,52.781,5h6.437ZM58.82,5.688H54.074L51.059,7.428l2.849,4.935,6.574-3.8Z"/> + <rect id="zoomOut" x="67" y="7" width="10" height="2"/> + <path id="zoomIn" d="M93,9H89v4H87V9H83V7h4V3h2V7h4V9Z"/> +</svg> diff --git a/browser/themes/shared/menuPanel.svg b/browser/themes/shared/menuPanel.svg new file mode 100644 index 000000000..e20f0197c --- /dev/null +++ b/browser/themes/shared/menuPanel.svg @@ -0,0 +1,42 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + width="1056" height="32" viewBox="0 0 1056 32" + class="fieldtext"> +#include icon-colors.inc.svg + + <path id="containers" d="M1050,30h-20a2,2,0,0,1-2-2V4.414a1.03,1.03,0,0,1,.29-0.707L1030,2h20l1.71,1.707a1.03,1.03,0,0,1,.29.707V28A2,2,0,0,1,1050,30Zm0-24h-20V28h20V6Zm-2,10h-16V8h16v8Zm-4-4.5a0.5,0.5,0,0,0-1,0V13h-6V11.5a0.5,0.5,0,0,0-1,0v2a0.5,0.5,0,0,0,.5.5h7a0.5,0.5,0,0,0,.5-0.5v-2Zm4,14.5h-16V18h16v8Zm-4-4.5a0.5,0.5,0,0,0-1,0V23h-6V21.5a0.5,0.5,0,0,0-1,0v2a0.5,0.5,0,0,0,.5.5h7a0.5,0.5,0,0,0,.5-0.5v-2Z"/> + <path id="tabs" d="M1021.98,28h-28a2,2,0,0,1-2-2V22a2,2,0,0,1,2-2H994c4.591,0,4-3,4.009-8,0.009-4.686.166-8,6.261-8h7.41c6.13,0,6.27,3.314,6.3,8,0.02,5-.59,8,4.02,8h-0.02a2,2,0,0,1,2,2v4A2,2,0,0,1,1021.98,28Z"/> + <path id="pocket" d="M975.969,29.969A13.969,13.969,0,0,1,962,16V8.333A4.333,4.333,0,0,1,966.333,4H985.6a4.333,4.333,0,0,1,4.333,4.333V16A13.969,13.969,0,0,1,975.969,29.969Zm7.507-19.035a2.009,2.009,0,0,0-1.424.59l-0.007-.007-6.095,6.015-5.479-5.422a2,2,0,1,0-2.917,2.727l-0.01.01,5.555,5.5h0l1.518,1.5a1.9,1.9,0,0,0,2.661,0l7.558-7.459a1.979,1.979,0,0,0,.649-1.46A2,2,0,0,0,983.476,10.933Z"/> + <path id="webIDE" d="M951.947,10a24.679,24.679,0,0,1,.362,2.691L949,16h-4v4l-2,2h-4.393a14.261,14.261,0,0,0,1.358,3.076l-1.716,3.777A15,15,0,1,1,957.175,7.825L955,10h-3.053ZM938.292,26.023A17.1,17.1,0,0,1,936.54,22h-2.819A12.445,12.445,0,0,0,938.292,26.023ZM932.616,20h3.437a25.331,25.331,0,0,1-.462-4h-3.978A12.38,12.38,0,0,0,932.616,20Zm0-10a12.38,12.38,0,0,0-1,4h3.978a25.331,25.331,0,0,1,.462-4h-3.437Zm1.105-2h2.819a17.093,17.093,0,0,1,1.752-4.023A12.444,12.444,0,0,0,933.721,8ZM943,2.613c-0.393.031-.777,0.093-1.158,0.16A10.229,10.229,0,0,0,938.607,8H943V2.613ZM943,10h-4.914a24.566,24.566,0,0,0-.467,4H943V10Zm0,6h-5.381a24.566,24.566,0,0,0,.467,4H943V16Zm2-2h5.381a24.566,24.566,0,0,0-.467-4H945v4Zm1.158-11.227c-0.381-.067-0.765-0.128-1.158-0.16V8h4.393A10.229,10.229,0,0,0,946.158,2.773Zm3.55,1.2A17.093,17.093,0,0,1,951.46,8h2.819A12.444,12.444,0,0,0,949.708,3.977ZM947.068,28.3L939,32l3.726-8.047ZM944,23l13-13,4,4L948,27Zm3.4,6.6,11.2-11.2A15,15,0,0,1,947.4,29.6Z"/> + <path id="app" d="M920.044,27.006l-4.354-4.863c-0.39.4-1.028,2.507-1.49,2.769h-4.4c-0.459-.262-1.094-2.375-1.484-2.769l-4.153,4.863H901V16.067l4.353-4.271C906.443,5.26,910.259,1,912,1s5.7,4.26,6.515,10.8L923,16.135V27.006h-2.956Zm-8.036-19.48c-0.61,0-1.819,2.268-2.484,4.251a14.406,14.406,0,0,1,2.535-.224,14.627,14.627,0,0,1,2.423.2C913.818,9.782,912.613,7.526,912.008,7.526Zm-0.762,18.23a4.106,4.106,0,0,0-.165,1.17,1.493,1.493,0,0,0,.858,1.466,1.535,1.535,0,0,0,.957-1.466,4.071,4.071,0,0,0-.165-1.17h1.079a9.949,9.949,0,0,1,.544,1.973A3.6,3.6,0,0,1,912,31.014a3.686,3.686,0,0,1-2.352-3.337,9.384,9.384,0,0,1,.544-1.921h1.051Z"/> + <path id="forget" d="M880,31a15,15,0,1,1,15-15A15,15,0,0,1,880,31ZM879.963,8.208V4.159l-6.328,5.2,6.328,5.524v-4.27A5.279,5.279,0,0,1,885.391,16,5.233,5.233,0,0,1,880,21.391a5.406,5.406,0,0,1-5.28-3.516h-2.189A7.773,7.773,0,0,0,887.852,16,8.115,8.115,0,0,0,879.963,8.208Z"/> + <path id="sidebars" d="M862,29H834a1,1,0,0,1-1-1V4a1,1,0,0,1,1-1h28a1,1,0,0,1,1,1V28A1,1,0,0,1,862,29ZM840,9h-3a1,1,0,0,0-1,1V25a1,1,0,0,0,1,1h3V9Zm3,17h16a1,1,0,0,0,1-1V10a1,1,0,0,0-1-1H843V26Zm8-20.986a0.991,0.991,0,1,0,1,.99A0.995,0.995,0,0,0,851,5.015Zm3,0a0.991,0.991,0,1,0,1,.99A0.995,0.995,0,0,0,854,5.015ZM859,5h-2a1,1,0,0,0,0,2h2A1,1,0,0,0,859,5Z"/> + <path id="addon-generic" d="M815.988,2.013a13.987,13.987,0,1,1-13.975,14A14,14,0,0,1,815.988,2.013ZM814.923,4.4a2.112,2.112,0,0,0-2.371,2,2.064,2.064,0,0,0,.547,1.585,0.884,0.884,0,0,1,.285.717,1.458,1.458,0,0,1-1.706,1.329h-3.2a0.581,0.581,0,0,0-.552.584c-0.011.061,0,2.462,0,2.462a2.445,2.445,0,0,0,.289,1.489,0.8,0.8,0,0,0,.841.411,2.8,2.8,0,0,0,1.6-.487,1.632,1.632,0,0,1,1.221-.428c1.108,0,1.293.45,1.293,1.856,0,1.013-.469,1.931-1.262,1.931a1.054,1.054,0,0,1-.969-0.384,2.6,2.6,0,0,0-1.718-.63,0.99,0.99,0,0,0-1,.485c-0.339.544-.3,1.255-0.3,2.768,0,2.015,0,3.248,0,3.285a0.591,0.591,0,0,0,.552.668h3.2c1.072,0,2.874.361,2.874-1.05a1.611,1.611,0,0,0-.458-1.111,1.685,1.685,0,0,1-.377-1.149c0-.285-0.068-1.283,1.668-1.283,0.071,0,1.634.148,1.634,1.346a1.388,1.388,0,0,1-.245,1.04A1.4,1.4,0,0,0,816.185,23c0,1.5,1.683,1.039,2.213,1.039,1.884,0,2.763.017,3.031,0a0.628,0.628,0,0,0,.585-0.634C822,22.875,822,22.735,822,19.861a6.582,6.582,0,0,1,.172-2.259,0.642,0.642,0,0,1,.657-0.231,1.869,1.869,0,0,1,1.047.384,2.142,2.142,0,0,0,1.625,1.006c1.386,0,2.125-1.622,2.125-2.779,0-1.232-.628-2.754-2.158-2.754a2.029,2.029,0,0,0-1.516.723,1.384,1.384,0,0,1-.876.584,1.131,1.131,0,0,1-1.067-.877V10.738a0.734,0.734,0,0,0-.56-0.709c-0.012,0-1.881,0-3.34,0a1.407,1.407,0,0,1-1.541-1.389,1.292,1.292,0,0,1,.279-0.984,1.8,1.8,0,0,0,.548-1.283C817.392,5.666,817.042,4.4,814.923,4.4Z"/> + <path id="mail" d="M787.333,16a4.507,4.507,0,0,1-6.666,0L769.39,6.7A3.349,3.349,0,0,1,772.333,5h23.334a3.348,3.348,0,0,1,2.943,1.7Zm-6.666,3.143a4.507,4.507,0,0,0,6.666,0L799,9.243V23.857A3.242,3.242,0,0,1,795.667,27H772.333A3.243,3.243,0,0,1,769,23.857V9.243Z"/> + <path id="settings" d="M763.005,16c0,1.307.425,2.516,1.03,2.728L765,19.068a13.308,13.308,0,0,1-1.644,3.956l-0.921-.443c-0.578-.278-1.733.276-2.657,1.2s-1.478,2.079-1.2,2.657l0.444,0.923a13.357,13.357,0,0,1-3.964,1.622l-0.333-.949c-0.212-.6-1.421-1.03-2.728-1.03s-2.516.425-2.728,1.03l-0.34.969a13.322,13.322,0,0,1-3.956-1.644l0.443-.921c0.278-.578-0.276-1.733-1.2-2.657s-2.08-1.478-2.658-1.2l-0.923.444a13.366,13.366,0,0,1-1.622-3.964l0.949-.333C740.57,18.516,741,17.308,741,16s-0.425-2.516-1.03-2.728l-0.971-.341a13.255,13.255,0,0,1,1.667-3.946l0.9,0.433c0.578,0.278,1.733-.276,2.658-1.2s1.478-2.08,1.2-2.657l-0.433-.9A13.261,13.261,0,0,1,748.932,3l0.34,0.969C749.484,4.57,750.693,5,752,5s2.516-.425,2.728-1.03L755.068,3a13.321,13.321,0,0,1,3.956,1.644l-0.443.921c-0.277.577,0.276,1.733,1.2,2.657s2.079,1.478,2.657,1.2l0.923-.444a13.337,13.337,0,0,1,1.622,3.964l-0.949.333C763.43,13.485,763.005,14.693,763.005,16ZM752,8.946A7.054,7.054,0,1,0,759.054,16,7.054,7.054,0,0,0,752,8.946Z"/> + <path id="developer" d="M724.986,11.177a2.978,2.978,0,0,1,.246.367,2.361,2.361,0,0,0,2.835-.346l4.975-4.932A7.808,7.808,0,0,1,734,9.952a7.969,7.969,0,0,1-10.791,7.435L711.4,29.075a3.192,3.192,0,0,1-4.486,0,3.125,3.125,0,0,1,0-4.447l11.675-11.563a7.863,7.863,0,0,1-.64-3.113,7.974,7.974,0,0,1,11.725-7.014l-4.972,4.929a2.307,2.307,0,0,0-.246,2.964A3.066,3.066,0,0,1,724.986,11.177ZM709.25,25A1.747,1.747,0,1,0,711,26.748,1.746,1.746,0,0,0,709.25,25Z"/> + <path id="fullscreen" d="M696,22V10l6,6Zm-14,2h12l-6,6Zm11-2H683a1,1,0,0,1-1-1V11a1,1,0,0,1,1-1h10a1,1,0,0,1,1,1V21A1,1,0,0,1,693,22Zm-1-7a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V15ZM688,2l6,6H681.982Zm-8,8V22l-6-6Z"/> + <path id="print" d="M670,26h-4V24h-1l3,6H644l2-4h-4a2,2,0,0,1-2-2V14a2,2,0,0,1,2-2h2V10a2,2,0,0,1,2-2V3a1,1,0,0,1,1-1h18a1,1,0,0,1,1,1V8a2,2,0,0,1,2,2v2h2a2,2,0,0,1,2,2V24A2,2,0,0,1,670,26Zm-24,0,1-2h-1v2Zm1-10h-2a1,1,0,0,0,0,2h2A1,1,0,0,0,647,16ZM664,4.5a0.5,0.5,0,0,0-.5-0.5h-15a0.5,0.5,0,0,0-.5.5v9a0.5,0.5,0,0,0,.5.5h15a0.5,0.5,0,0,0,.5-0.5v-9ZM662.222,24H649.778L648,28h16Z"/> + <path id="search" d="M626.853,23.318a10.074,10.074,0,0,1-5.361-1.545l-6.611,6.619a2.028,2.028,0,0,1-2.87,0l-0.4-.4a2.033,2.033,0,0,1,0-2.873l6.618-6.627A10.137,10.137,0,1,1,626.853,23.318Zm0-16.254a6.1,6.1,0,1,0,6.088,6.1A6.092,6.092,0,0,0,626.853,7.064Z"/> + <path id="privateBrowsing" d="M574.273,11.973c-0.122,2.136.37,4.688-2.4,8.367-2.953,3.926-5.886,3.626-6.44,3.685-3.322.354-3.76-2.62-5.7-2.62-1.7,0-3.083,2.955-5.578,2.62-0.552-.074-3.487.241-6.44-3.685-2.768-3.679-2.276-6.231-2.4-8.367a41.419,41.419,0,0,0-.553-4.451,5.372,5.372,0,0,0,3.056,1.484c1.722,0.119,2.044-.61,5.678-1.662,3.929-1.137,6.3,3.522,6.3,3.522s2.668-4.591,6.3-3.522,3.78,1.78,5.5,1.662a6.249,6.249,0,0,0,3.232-1.484A41.574,41.574,0,0,0,574.273,11.973Zm-20.315.895c-2.148-.479-3.049.339-3.969,0.688a7.615,7.615,0,0,1-1.534.4s0.123,1.246,2.276,2.314,6.569,0.517,6.569.517S557.769,13.718,553.958,12.868ZM569.6,13.557c-0.92-.349-1.821-1.167-3.969-0.688-3.811.85-3.342,3.918-3.342,3.918s4.416,0.551,6.569-.517,2.276-2.314,2.276-2.314A7.615,7.615,0,0,1,569.6,13.557Z"/> + <path id="new-tab" d="M541.977,28h-28a2,2,0,0,1-2-2V22a2,2,0,0,1,2-2H514c4.591,0,4-3,4.009-8,0.009-4.686.166-8,6.26-8h7.415c6.126,0,6.271,3.314,6.293,8,0.023,5-.592,8,4.023,8h-0.023a2,2,0,0,1,2,2v4A2,2,0,0,1,541.977,28ZM533,14h-4V10h-2v4h-4v2h4v4h2V16h4V14Z"/> + <path id="new-window" d="M510,29H482a1,1,0,0,1-1-1V4a1,1,0,0,1,1-1h28a1,1,0,0,1,1,1V28A1,1,0,0,1,510,29ZM499,5.015a0.991,0.991,0,1,0,1,.99A0.995,0.995,0,0,0,499,5.015Zm3,0a0.991,0.991,0,1,0,1,.99A0.995,0.995,0,0,0,502,5.015ZM507,5h-2a1,1,0,0,0,0,2h2A1,1,0,0,0,507,5Zm1,5a1,1,0,0,0-1-1H485a1,1,0,0,0-1,1V25a1,1,0,0,0,1,1h22a1,1,0,0,0,1-1V10Z"/> + <path id="encoding" d="M474,30H454a4,4,0,0,1-4-4V6a4,4,0,0,1,4-4h20a4,4,0,0,1,4,4V26A4,4,0,0,1,474,30Zm-1-19a6,6,0,0,0-6-6h-8a6,6,0,0,0-6,6v8a6,6,0,0,0,6,6h8c3.314,0,6-.686,6-4V11Zm-5.953,6.863a7.6,7.6,0,0,0,1.655-.171,7.822,7.822,0,0,0,1.587-.552v1.445a8.416,8.416,0,0,1-1.567.532,8.014,8.014,0,0,1-1.714.161A4.231,4.231,0,0,1,462.964,17a4.931,4.931,0,0,1-1.753,1.758,4.724,4.724,0,0,1-2.271.518,3.547,3.547,0,0,1-2.5-.83,3,3,0,0,1-.9-2.325,2.846,2.846,0,0,1,1.211-2.447,6.7,6.7,0,0,1,3.692-.952l1.8-.059V12a2.632,2.632,0,0,0-.566-1.86,2.271,2.271,0,0,0-1.729-.6,6.575,6.575,0,0,0-3,.82l-0.508-1.24a7.934,7.934,0,0,1,3.623-.918,4.438,4.438,0,0,1,2.076.425,2.656,2.656,0,0,1,1.206,1.353A3.647,3.647,0,0,1,464.7,8.653a3.833,3.833,0,0,1,1.909-.469,3.787,3.787,0,0,1,3.008,1.3,5.1,5.1,0,0,1,1.133,3.472V14H463.9Q463.98,17.863,467.047,17.863ZM462.2,13.819l-1.543.068a5.31,5.31,0,0,0-2.617.611,1.837,1.837,0,0,0-.8,1.646,1.673,1.673,0,0,0,.522,1.363,2.092,2.092,0,0,0,1.382.435,3.013,3.013,0,0,0,2.237-.825,3.16,3.16,0,0,0,.82-2.329V13.819Zm6.808-1.114a3.81,3.81,0,0,0-.625-2.344,2.124,2.124,0,0,0-1.8-.82,2.3,2.3,0,0,0-1.861.811,4.028,4.028,0,0,0-.786,2.354h5.069Z"/> + <path id="share" d="M433.425,19.753l-0.658.08,0-.08L443.07,4.742l-13.5,15.01,0.154,0.45-0.494.06,0.547,0.094,3.651,10.653L426.77,20.562l-8.777,1.067L445,1V25.188Zm0,1.231,4.938,2.986-4.938,7.04-0.6-10.129Z"/> + <path id="feed" d="M412.68,29.958l-3.1.031a1.516,1.516,0,0,1-1.538-1.516s0.687-7.114-6.308-14.356c-5.1-6.065-14.151-6.358-14.151-6.358a1.517,1.517,0,0,1-1.6-1.451l0.031-2.833a1.463,1.463,0,0,1,1.538-1.451s12.628,0.807,19.264,8.856c6.554,6.143,7.213,17.593,7.213,17.593A1.337,1.337,0,0,1,412.68,29.958Zm-25.159-18s7.416,0.88,11.585,4.753c4.264,3.961,4.9,11.794,4.9,11.794,0,0.832-.112,1.474-0.952,1.474l-2.852-.031a1.321,1.321,0,0,1-1.235-1.537,12.715,12.715,0,0,0-3.786-8.6c-2.877-2.641-7.694-2.8-7.694-2.8a1.437,1.437,0,0,1-1.521-1.412L386,13.371A1.436,1.436,0,0,1,387.521,11.96Zm2.488,10.03a4.012,4.012,0,1,1-4,4.012A4,4,0,0,1,390.009,21.989Z"/> + <path id="sync" d="M381.914,17.518a13.937,13.937,0,0,1-.8,3.367,10.892,10.892,0,0,1-5.084,6.587,23.381,23.381,0,0,0,2.531,1.884,51.867,51.867,0,0,1-8.176.671c-0.073.012-.145-0.233-0.218-0.221l-0.009.219a19.383,19.383,0,0,1-5.989-1.271,10.818,10.818,0,0,0,3.225-4.19,16.7,16.7,0,0,0,1.216-6.063,36.351,36.351,0,0,0,2.73,4.119,8.152,8.152,0,0,0,4.263-6.1,7.53,7.53,0,0,0-1.165-4.689,7.645,7.645,0,0,0-3.463-2.839c0.461-.872,1-1.847,1.513-2.674a7.385,7.385,0,0,1,2.559-2.383A13.959,13.959,0,0,1,381.914,17.518ZM367.96,13.509s-2.271-2.971-3.244-4.054a8.006,8.006,0,0,0-4.306,7.011,7.6,7.6,0,0,0,4.837,6.526,11.93,11.93,0,0,1-1.982,2.818,21.3,21.3,0,0,1-2.45,2.158,13.955,13.955,0,0,1-5.641-17.528,10.883,10.883,0,0,1,4.232-5.453c0.189-.147.382-0.287,0.577-0.424-0.8-.739-3.667-1.049-3.667-1.049s5.431-2.093,13.959-1.16C367.87,6.295,367.96,13.509,367.96,13.509Z"/> + <path id="save" d="M346.25,30h-20.5A1.755,1.755,0,0,1,324,28.25V3.75A1.755,1.755,0,0,1,325.75,2h13.5a5.164,5.164,0,0,1,3.033,1.19L346.717,7.3A4.6,4.6,0,0,1,348,10.241V28.25A1.755,1.755,0,0,1,346.25,30ZM345.774,9.293l-5-4.586C340.347,4.318,340,4.45,340,5v5h5.455C346.055,10,346.2,9.682,345.774,9.293Z"/> + <path id="open" d="M319.749,13.924a67.491,67.491,0,0,0-1.34,7.977,37.552,37.552,0,0,0-.4,6.4,0.708,0.708,0,0,1-.714.7H290.679a0.709,0.709,0,0,1-.715-0.7,37.552,37.552,0,0,0-.4-6.4,67.491,67.491,0,0,0-1.34-7.977C287.973,12.779,288.606,12,289,12h29.974C319.368,12,320,12.779,319.749,13.924Zm-29.682-6.9h-0.076V5.019a1.987,1.987,0,0,1,1.968-2.006h8.105c1.087,0,2.276,1.755,2.276,1.755l1.635,2.222,13-.009a1.012,1.012,0,0,1,1.025,1V11H290.048Z"/> + <path id="addOns" d="M277.051,30.97a1.987,1.987,0,0,0,1.977-2V21.86s0.3-1.829,1.515-1.829,1.088,1.934,3.356,1.934c1.133,0,3.085-.581,3.085-4.082s-1.952-3.924-3.085-3.924c-2.268,0-2.138,1.828-3.356,1.828s-1.515-1.881-1.515-1.881V10.994a1.988,1.988,0,0,0-1.977-2h-5.2s-1.725-.3-1.725-1.515,1.882-1.3,1.882-3.565c0-1.131-.632-2.926-4.135-2.926s-3.977,1.8-3.977,2.926c0,2.268,1.724,2.349,1.724,3.565S263.9,8.993,263.9,8.993h-4.951a1.989,1.989,0,0,0-1.976,2l0,3.906s-0.211,3.015,2.213,3.015c1.528,0,1.732-2.057,3.742-2.057,1,0,2.019.941,2.019,3.02S263.932,22,262.932,22c-2.01,0-2.214-2.055-3.742-2.055-2.424,0-2.213,2.909-2.213,2.909l0,6.115a1.988,1.988,0,0,0,1.976,2h6.638s3.154,0.212,3.154-2.214c0-1.528-1.991-1.824-1.991-3.835,0-1,1.109-2.238,3.19-2.238s3.314,1.238,3.314,2.238c0,2.012-1.928,2.307-1.928,3.835,0,2.425,3.154,2.214,3.154,2.214h2.572Z"/> + <path id="downloads" d="M253.285,18.118L242.09,29.126a3.008,3.008,0,0,1-4.242,0L226.59,18.118c-1.166-1.166-.772-2.121.879-2.121h6.5l0.062-12a2.027,2.027,0,0,1,2.032-2H244a2,2,0,0,1,2,2V16h6.406C254.057,16,254.451,16.952,253.285,18.118Z"/> + <path id="history" d="M208.007,30.007a14,14,0,1,1,14-14A14,14,0,0,1,208.007,30.007Zm0-24.007a10.008,10.008,0,1,0,10,10.008A10,10,0,0,0,208.007,6ZM206.1,15.9V10.412a1.829,1.829,0,0,1,1.829-1.829,1.951,1.951,0,0,1,1.965,1.829v5.032a22.977,22.977,0,0,1,3.52,5.939s-4.106-1.8-6.059-3.773A1.811,1.811,0,0,1,206.1,15.9Z"/> + <path id="bookmark-filled" d="M188.4,11.546l-2.241-.371-5.3-.872-1.354-2.728v0l-1.09-2.192-1.088-2.2c-0.743-1.5-1.96-1.5-2.7,0l-1.089,2.2-1.088,2.192v0L171.1,10.3l-5.295.872-2.242.371c-1.677.275-2.093,1.49-.928,2.7l5.452,5.634-0.834,5.464L166.879,27.8c-0.253,1.643.766,2.348,2.264,1.576L171.2,28.3l2.051-1.071a0.007,0.007,0,0,0,.005,0l2.726-1.427,2.725,1.427a0.016,0.016,0,0,0,.007,0l2.048,1.071,2.06,1.082c1.5,0.772,2.514.068,2.266-1.576l-0.376-2.461-0.828-5.464,5.444-5.628C190.5,13.037,190.08,11.821,188.4,11.546Z"/> + <path id="Bookmark-hollow" d="M144,8.365l1.725,3.526,0.79,1.616,1.773,0.3,4.069,0.681-3.007,3.153-1.182,1.24,0.254,1.7,0.63,4.207-3.426-1.821-1.639-.871-1.639.871-3.423,1.819,0.632-4.2,0.255-1.7-1.184-1.241-3-3.15,4.111-.683,1.79-.3,0.787-1.636L144,8.365M143.984,2a1.671,1.671,0,0,0-1.351,1.139l-3.472,7.213-7.582,1.259c-1.675.279-2.091,1.509-.926,2.735l5.445,5.709-1.207,8.031c-0.183,1.207.3,1.914,1.151,1.914a2.448,2.448,0,0,0,1.111-.317l6.832-3.631,6.832,3.631a2.447,2.447,0,0,0,1.11.317c0.85,0,1.333-.707,1.152-1.914l-1.2-8.031,5.438-5.7c1.165-1.229.749-2.461-.926-2.74l-7.527-1.259-3.527-7.213A1.668,1.668,0,0,0,143.984,2h0Z"/> + <path id="home" d="M124,16L112,6,100,16H96L112,2l16,14h-4Zm-2,0v13.96h-8V20h-4v9.96h-8V16l10-8Z"/> + <path id="stop" d="M93.121,24.879l-4.243,4.243-8.9-8.9L71.206,29l-4.2-4.2,8.774-8.774-8.9-8.9,4.243-4.243,8.9,8.9L88.794,3l4.2,4.2L84.222,15.98Z"/> + <path id="reload" d="M62,14a2,2,0,0,1-2,2H48l5.833-5.833a8.993,8.993,0,1,0,1,12.686l3.035,2.6A13,13,0,1,1,56.669,7.331L62,2V14Z"/> + <path id="placeholder" fill-rule="evenodd" d="M16,0A16,16,0,1,1,0,16,16,16,0,0,1,16,0ZM8,24V8H24V24H8Zm14-2h0Zm-2.121,0L16,18.121,12.121,22h7.757Zm-6-6L10,12.121v7.757Zm-1.757-6L16,13.879,19.879,10H12.121Zm6,6L22,19.879V12.121Z"/> +</svg> diff --git a/browser/themes/shared/menupanel.inc.css b/browser/themes/shared/menupanel.inc.css new file mode 100644 index 000000000..7517e4df0 --- /dev/null +++ b/browser/themes/shared/menupanel.inc.css @@ -0,0 +1,183 @@ +/* Menu panel and palette styles */ + +toolbaritem[sdkstylewidget="true"] > toolbarbutton, +:-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(@primaryToolbarButtons@) { + list-style-image: url(chrome://browser/skin/menuPanel.svg); +} + +:-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon, +:-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon, +:-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; +} + +#home-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); +} + +#bookmarks-menu-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 192px, 32px, 160px); +} + +#history-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); +} + +#downloads-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 256px, 32px, 224px); +} + +#add-ons-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 288px, 32px, 256px); +} + +#open-file-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 320px, 32px, 288px); +} + +#save-page-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 352px, 32px, 320px); +} + +#sync-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 1024px, 32px, 992px); +} + +#containers-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #containers-panelmenu { + -moz-image-region: rect(0px, 1056px, 32px, 1024px); +} + +#feed-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); +} + +#social-share-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 448px, 32px, 416px); +} + +#characterencoding-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0px, 480px, 32px, 448px); +} + +#new-window-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); +} + +#e10s-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); +} + +#new-tab-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 544px, 32px, 512px); +} + +#privatebrowsing-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 576px, 32px, 544px); +} + +#find-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 640px, 32px, 608px); +} + +#print-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 672px, 32px, 640px); +} + +#fullscreen-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 704px, 32px, 672px); +} + +#developer-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 736px, 32px, 704px); +} + +#preferences-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 768px, 32px, 736px); +} + +#email-link-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0, 800px, 32px, 768px); +} + +#sidebar-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0, 864px, 32px, 832px); +} + +#panic-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); +} + +#webide-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); +} + +toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); +} + +/* Wide panel control icons */ + +#edit-controls@inAnyPanel@ > toolbarbutton, +#zoom-controls@inAnyPanel@ > toolbarbutton, +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); +} + +#edit-controls@inAnyPanel@ > #cut-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +#edit-controls@inAnyPanel@ > #copy-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 48px, 16px, 32px); +} + +#edit-controls@inAnyPanel@ > #paste-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 64px, 16px, 48px); +} + +#zoom-controls@inAnyPanel@ > #zoom-out-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { + -moz-image-region: rect(0px, 80px, 16px, 64px); +} + +#zoom-controls@inAnyPanel@ > #zoom-in-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { + -moz-image-region: rect(0px, 96px, 16px, 80px); +} + +#add-share-provider { + list-style-image: url(chrome://browser/skin/menuPanel-small.svg); + -moz-image-region: rect(0px, 96px, 16px, 80px); +} + diff --git a/browser/themes/shared/newtab/close.png b/browser/themes/shared/newtab/close.png Binary files differnew file mode 100644 index 000000000..ea6ada49e --- /dev/null +++ b/browser/themes/shared/newtab/close.png diff --git a/browser/themes/shared/newtab/controls.svg b/browser/themes/shared/newtab/controls.svg new file mode 100644 index 000000000..6eb00965d --- /dev/null +++ b/browser/themes/shared/newtab/controls.svg @@ -0,0 +1,85 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="288" height="32" viewBox="0 0 288 32"> + <defs> + <style> + /* Glyph Styles */ + .glyphShape-style { + fill: #737373; + } + .glyphShape-style-pin { + fill: #b4b4b4; + } + .glyphShape-style-hover-gear { + fill: #4a90e2; + } + .glyphShape-style-hover-pin { + fill: #4a90e2; + } + .glyphShape-style-hover-delete { + fill: #ea0000; + } + .glyphShape-style-hover-active { + fill: #231f20; + } + /* Circle Background Styles */ + .glyphShape-style-circle { + fill: #fff; + } + .glyphShape-style-circle-dropshadow { + fill: #000; + fill-opacity: .5; + filter: url(#filter-shadow-drop); + } + </style> + <filter id="filter-shadow-drop" x="-10%" y="-10%" width="120%" height="120%"> + <feOffset in="SourceAlpha" dx="0" dy=".75" result="filter-shadow-drop-offset" /> + <feGaussianBlur in="filter-shadow-drop-offset" stdDeviation="1" result="filter-shadow-drop-blur"/> + </filter> + <path id="glyphShape-gear" d="M28,16c0-1.7,0.9-3.1,2-3.3c-0.4-1.5-0.9-2.9-1.7-4.2c-0.9,0.7-2.6,0.3-3.8-0.9c-1.2-1.2-1.6-2.8-0.9-3.8 c-1.3-0.8-2.7-1.4-4.2-1.7c-0.2,1.1-1.6,2-3.3,2S13,3.1,12.8,2c-1.5,0.4-2.9,0.9-4.2,1.7c0.7,0.9,0.3,2.6-0.9,3.8 c-1.4,1.1-3,1.5-4,0.9C2.9,9.7,2.4,11.2,2,12.7c1.1,0.2,2,1.6,2,3.3s-0.9,3.1-2,3.3c0.4,1.5,0.9,2.9,1.7,4.2 c0.9-0.7,2.6-0.3,3.8,0.9c1.2,1.2,1.6,2.8,0.9,3.8c1.3,0.8,2.7,1.4,4.2,1.7c0.2-1.1,1.6-2,3.3-2s3.1,0.9,3.3,2 c1.5-0.4,2.9-0.9,4.2-1.7c-0.7-0.9-0.3-2.6,0.9-3.8c1.3-1.2,2.8-1.6,3.8-0.9c0.8-1.3,1.4-2.7,1.7-4.2C28.9,19.1,28,17.7,28,16z M16,24c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S20.4,24,16,24z"/> + <circle id="glyphShape-circle" cx="16" cy="16" r="14"/> + <path id="glyphShape-pin" d="M19,15v-5h2V7H11v3h2v5l-3,2v2h5c0,4.5,0.4,8,1,8s1-3.5,1-8h5v-2L19,15z"/> + <polygon id="glyphShape-delete" points="23,11 21,9 16,14 11,9 9,11 14,16 9,21 11,23 16,18 21,23 23,21 18,16"/> + </defs> + <g id="icon-gear-default"> + <use xlink:href="#glyphShape-gear" class="glyphShape-style"/> + </g> + <g id="icon-gear-default" transform="translate(32)"> + <use xlink:href="#glyphShape-gear" class="glyphShape-style-hover-gear"/> + </g> + <g id="icon-pin-default" transform="translate(64)"> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/> + <use xlink:href="#glyphShape-pin" class="glyphShape-style"/> + </g> + <g id="icon-pin-hover" transform="translate(96)"> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/> + <use xlink:href="#glyphShape-pin" class="glyphShape-style-hover-pin"/> + </g> + <g id="icon-pin-hover-active" transform="translate(128)"> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/> + <use xlink:href="#glyphShape-pin" class="glyphShape-style-hover-active"/> + </g> + <g id="icon-delete-default" transform="translate(160)"> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/> + <use xlink:href="#glyphShape-delete" class="glyphShape-style"/> + </g> + <g id="icon-delete-hover" transform="translate(192)"> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/> + <use xlink:href="#glyphShape-delete" class="glyphShape-style-hover-delete"/> + </g> + <g id="icon-delete-hover-active" transform="translate(224)"> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/> + <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/> + <use xlink:href="#glyphShape-delete" class="glyphShape-style-hover-active"/> + </g> + <g id="icon-pin-default" transform="translate(256)"> + <use xlink:href="#glyphShape-pin" class="glyphShape-style-pin"/> + </g> +</svg> diff --git a/browser/themes/shared/newtab/newTab.inc.css b/browser/themes/shared/newtab/newTab.inc.css new file mode 100644 index 000000000..8ecd603c9 --- /dev/null +++ b/browser/themes/shared/newtab/newTab.inc.css @@ -0,0 +1,344 @@ +/* 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 { + -moz-appearance: none; + font-size: 75%; + background-color: transparent; +} + +/* UNDO */ +#newtab-undo-container { + padding: 4px 3px; + border: 1px solid; + border-color: rgba(8,22,37,.12) rgba(8,22,37,.14) rgba(8,22,37,.16); + background-color: rgba(255,255,255,.4); + color: #525e69; +} + +#newtab-undo-label { + margin-top: 0; + margin-bottom: 0; +} + +.newtab-undo-button { + -moz-appearance: none; + cursor: pointer; + padding: 0; + margin: 0 4px; + border: 0; + background: transparent; + text-decoration: none; + min-width: 0; +} + +.newtab-undo-button:hover { + text-decoration: underline; +} + +.newtab-undo-button:-moz-focusring { + outline: 1px dotted; +} + +#newtab-undo-close-button { + -moz-appearance: none; + padding: 0; + border: none; +} + +#newtab-undo-close-button { + -moz-appearance: none; + padding: 0; + border: none; + height: 16px; + width: 16px; + float: right; + right: 0; + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 16, 16, 0); + background-color: transparent; +} + +#newtab-undo-close-button:hover { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 32, 16, 16); +} + +#newtab-undo-close-button:hover:active { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 48, 16, 32); +} + +/* CUSTOMIZE */ +#newtab-customize-button, +.newtab-customize { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 32, 32, 0); + background-size: 28px; + height: 38px; + width: 38px; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; + border: none; +} + +.newtab-customize { + height: 28px; + width: 28px; +} + +#newtab-customize-button { + font-size: 28px; + padding: 0; + /* only display the text label when CSS backgrounds are disabled (e.g. in high contrast mode) */ + color: transparent; +} + +#newtab-customize-button:-moz-any(:hover, :active, [active]) { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32); + background-color: #FFFFFF; + border: solid 1px #CCCCCC; + border-radius: 2px; +} + +/* GRID */ +#topsites-heading { + color: #7A7A7A; + font-size: 1em; + font-weight: normal; + /* Position the heading such that it doesn't affect how many cells we + can fit into the grid. */ + position: absolute; + /* The top margin moves the heading away from the grid. + The horizontal margin aligns the heading with the cells. */ + margin: -1em 10px 0; +} + +/* CELLS */ +.newtab-cell { + --cell-corner-radius: 8px; + background-color: rgba(255,255,255,.2); + border-radius: var(--cell-corner-radius); +} + +body.compact .newtab-cell { + --cell-corner-radius: 2px; +} + +.newtab-cell:empty { + outline: 2px dashed #c1c1c1; + outline-offset: -2px; + -moz-outline-radius: var(--cell-corner-radius); +} + +/* SITES */ +.newtab-site { + border-radius: var(--cell-corner-radius); + box-shadow: 0 1px 3px #c1c1c1; + text-decoration: none; + transition-property: top, left, opacity, box-shadow, background-color; +} + +.newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link, +.newtab-cell:not([ignorehover]) .newtab-link:hover, +.newtab-site[dragged] { + border: 2px solid white; + box-shadow: 0 0 6px 1px #add6ff; + margin: -2px; +} + +.newtab-site[dragged] { + transition-property: box-shadow, background-color; + background-color: rgb(242,242,242); +} + +/* LINKS */ +.newtab-link { + border-radius: var(--cell-corner-radius); + overflow: hidden; +} + +/*** + * If you change the sizes here, change them in newTab.css + * and the preference values: + * toolkit.pageThumbs.minWidth + * toolkit.pageThumbs.minHeight + */ +/* THUMBNAILS */ +.newtab-thumbnail { + background-origin: padding-box; + background-clip: padding-box; + background-repeat: no-repeat; + background-size: cover; + height: 180px; + transition: opacity 100ms ease-out; +} + +body.compact .newtab-thumbnail { + height: 100%; + border-radius: calc(var(--cell-corner-radius) + 1px); + outline: 1px solid hsla(0,0%,0%,.1); + -moz-outline-radius: var(--cell-corner-radius); + outline-offset: -1px; +} + +.newtab-thumbnail.placeholder { + color: white; + font-size: 85px; + line-height: 200%; +} + +body.compact .newtab-thumbnail.placeholder { + font-size: 45px; +} + +.newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content { + opacity: 0; +} + +.newtab-site[type=affiliate] .newtab-thumbnail, +.newtab-site[type=enhanced] .newtab-thumbnail, +.newtab-site[type=organic] .newtab-thumbnail, +.newtab-site[type=sponsored] .newtab-thumbnail { + background-position: center center; +} + +body.compact .newtab-site[type=affiliate] .newtab-thumbnail { + background-position: center 30%; +} + +.newtab-site[type=affiliate] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=enhanced] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=organic] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=sponsored] .newtab-thumbnail { + background-size: auto; +} + +/* TITLES */ + +.newtab-title { + background-color: #F2F2F2; + font-size: 13px; + line-height: 30px; + border: 1px solid #fff; + border-radius: 0 0 var(--cell-corner-radius) var(--cell-corner-radius); +} + +body.compact .newtab-title { + background-color: hsla(0,0%,100%,.85); + font-size: 12px; + line-height: 21px; + border: 1px solid hsla(0,0%,80%,.8); + border-top-color: hsla(0,0%,0%,.1); + background-clip: padding-box; +} + +.newtab-title, +.newtab-suggested { + color: #5c5c5c; +} + +body.compact .newtab-title, +body.compact .newtab-suggested { + color: black; +} + +.newtab-suggested[active] { + background-color: rgba(51, 51, 51, 0.95); + border: 0; + color: white; +} + +body:not(.compact) .newtab-site:hover .newtab-title { + color: white; + background-color: #333; + border-color: #333; + border-top-color: white; +} + +body.compact .newtab-site:hover .newtab-title { + color: white; + background-color: hsla(0,0%,20%,.85); + border-color: hsla(0,0%,0%,.8); + border-top-color: white; +} + +.newtab-site[pinned] .newtab-title { + padding-inline-start: 24px; +} + +.newtab-site[pinned] .newtab-title::before { + background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266); + background-size: 10px; + content: ""; + height: 17px; + left: 0; + position: absolute; + width: 10px; + margin-left: 8px; + margin-top: 6px; +} + +.newtab-site[pinned] .newtab-title:dir(rtl)::before { + left: auto; + right: 0; +} + +/* CONTROLS */ +.newtab-control { + background-color: transparent; + background-size: 24px; + border: none; + height: 24px; + width: 24px; + top: 4px; +} + +.newtab-control-pin:dir(ltr), +.newtab-control-block:dir(rtl) { + left: 4px; +} + +.newtab-control-block:dir(ltr), +.newtab-control-pin:dir(rtl) { + right: 4px; +} + +body.compact .newtab-control { + top: -8px; +} + +body.compact .newtab-control-pin:dir(ltr), +body.compact .newtab-control-block:dir(rtl) { + left: -8px; +} + +body.compact .newtab-control-block:dir(ltr), +body.compact .newtab-control-pin:dir(rtl) { + right: -8px; +} + +.newtab-control-pin, +.newtab-site[pinned] .newtab-control-pin:hover:active { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 96, 32, 64); +} + +.newtab-control-pin:hover, +.newtab-site[pinned] .newtab-control-pin:hover { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 160, 32, 128); +} + +.newtab-control-pin:hover:active, +.newtab-site[pinned] .newtab-control-pin { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 128, 32, 96); +} + +.newtab-control-block { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 192, 32, 160); +} + +.newtab-control-block:hover { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 224, 32, 192); +} + +.newtab-control-block:hover:active { + background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 256, 32, 224); +} diff --git a/browser/themes/shared/newtab/whimsycorn.png b/browser/themes/shared/newtab/whimsycorn.png Binary files differnew file mode 100644 index 000000000..5c5c2f498 --- /dev/null +++ b/browser/themes/shared/newtab/whimsycorn.png diff --git a/browser/themes/shared/notification-icons.inc.css b/browser/themes/shared/notification-icons.inc.css new file mode 100644 index 000000000..595e911b6 --- /dev/null +++ b/browser/themes/shared/notification-icons.inc.css @@ -0,0 +1,318 @@ +%if 0 +/* 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/. */ +%endif + +#notification-popup-box { + padding: 5px 0px; + margin: -5px 0px; + margin-inline-end: -5px; + padding-inline-end: 5px; +} + +.notification-anchor-icon, +#blocked-permissions-container > .blocked-permission-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; +} + +/* This class can be used alone or in combination with the class defining the + type of icon displayed. This rule must be defined before the others in order + for its list-style-image to be overridden. */ +.notification-anchor-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info); +} + +.popup-notification-icon { + width: 64px; + height: 64px; + margin-inline-end: 10px; +} + +.notification-anchor-icon:not(.plugin-blocked):-moz-lwtheme, +#blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme { + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; +} + +.notification-anchor-icon:not(.plugin-blocked):not(:hover) { + opacity: .8; +} + +/* INDIVIDUAL NOTIFICATIONS */ + +.popup-notification-icon[popupid="web-notifications"], +.desktop-notification-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification); +} + +.desktop-notification-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked); +} + +.geo-icon { +%ifdef XP_MACOSX + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-osx); +%elif defined(MOZ_WIDGET_GTK) + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux); +%else + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows); +%endif +} + +.geo-icon.blocked-permission-icon { +%ifdef XP_MACOSX + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-osx-blocked); +%elif defined(MOZ_WIDGET_GTK) + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-blocked); +%else + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked); +%endif +} + +.popup-notification-icon[popupid="geolocation"] { +%ifdef XP_MACOSX + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-osx); +%elif defined(MOZ_WIDGET_GTK) + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-linux-detailed); +%else + list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed); +%endif +} + +.popup-notification-icon[popupid="indexedDB-permissions-prompt"], +.indexedDB-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB); +} + +.indexedDB-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked); +} + +.login-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#login); +} + +.popup-notification-icon[popupid="password"] { + list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed); +} + +.camera-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera); +} + +.camera-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing); +} + +.camera-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked); +} + +.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone); +} + +.microphone-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing); +} + +.microphone-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked); +} + +.popup-notification-icon.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed); +} + +.screen-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen); +} + +.screen-icon.in-use { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing); +} + +.screen-icon.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked); +} + +#webRTC-preview:not([hidden]) { + display: -moz-stack; + border-radius: 4px; + border: 1px solid GrayText; + overflow: hidden; + min-width: 300px; + min-height: 10em; +} + +html|*#webRTC-previewVideo { + width: 300px; + /* If we don't set the min-width, width is ignored. */ + min-width: 300px; + max-height: 200px; +} + +#webRTC-previewWarning { + background: rgba(255, 217, 99, .8) url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em; + margin: 0; + padding: .5em; + padding-inline-start: calc(1.5em + 16px); + border-top: 1px solid GrayText; +} + +#webRTC-previewWarning > .text-link { + margin-inline-start: 0; +} + +/* This icon has a block sign in it, so we don't need a blocked version. */ +.popup-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#popup"); +} + +/* EME */ + +.popup-notification-icon[popupid="drmContentPlaying"], +.drm-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); +} + +.drm-icon:hover:active { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); +} + +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; +} + +@keyframes emeTeachingMoment { + 0% {transform: translateX(0); } + 25% {transform: translateX(3px) } + 75% {transform: translateX(-3px) } + 100% { transform: translateX(0); } +} + +/* INSTALL ADDONS */ + +.install-icon { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg); +} + +.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(chrome://browser/skin/addons/addon-install-blocked.svg); +} + +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); +} + +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); +} + +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); +} + +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); +} + +.popup-notification-icon[popupid="addon-install-complete"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); +} + +.popup-notification-icon[popupid="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); +} + +.popup-notification-icon[popupid="click-to-play-plugins"] { + list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); +} + +/* OFFLINE APPS */ + +.popup-notification-icon[popupid*="offline-app-requested"], +.popup-notification-icon[popupid="offline-app-usage"] { + list-style-image: url(chrome://global/skin/icons/question-64.png); +} + +/* PLUGINS */ + +.plugin-icon { + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); +} + +.plugin-icon.plugin-blocked { + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); +} + +#notification-popup-box[hidden] { + /* Override display:none to make the pluginBlockedNotification animation work + when showing the notification repeatedly. */ + display: -moz-box; + visibility: collapse; +} + +#plugins-notification-icon.plugin-blocked[showing] { + animation: pluginBlockedNotification 500ms ease 0s 5 alternate both; +} + +@keyframes pluginBlockedNotification { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +/* SOCIAL API */ + +.popup-notification-icon[popupid="servicesInstall"] { + list-style-image: url(chrome://browser/skin/social/services-64.png); +} + +.service-icon { + list-style-image: url(chrome://browser/skin/social/services-16.png); +} + +%ifdef XP_MACOSX +@media (min-resolution: 1.1dppx) { + .popup-notification-icon[popupid="servicesInstall"] { + list-style-image: url(chrome://browser/skin/social/services-64@2x.png); + } + + .service-icon { + list-style-image: url(chrome://browser/skin/social/services-16@2x.png); + } +} +%endif + +/* TRANSLATION */ + +.translation-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + +.translation-icon.in-use { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +%ifdef XP_MACOSX +@media (min-resolution: 1.1dppx) { + .translation-icon { + list-style-image: url(chrome://browser/skin/translation-16@2x.png); + -moz-image-region: rect(0px, 32px, 32px, 0px); + } + + .translation-icon.in-use { + -moz-image-region: rect(0px, 64px, 32px, 32px); + } +} +%endif diff --git a/browser/themes/shared/notification-icons.svg b/browser/themes/shared/notification-icons.svg new file mode 100644 index 000000000..206157cf2 --- /dev/null +++ b/browser/themes/shared/notification-icons.svg @@ -0,0 +1,104 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="fieldtext" + width="32" height="32" viewBox="0 0 32 32"> +#include icon-colors.inc.svg + <style> + :root > use:not(:target), + :root > g:not(:target), + #strikeout { + display: none; + } + .blocked:target ~ #strikeout { + display: block; + } + .blocked { + clip-path: url(#blocked-clipPath); + } + + #login-highlighted { + fill: HighlightText; + fill-opacity: 1; + } + + #plugin-blocked, + #plugin-blocked:target ~ #strikeout { + fill: #d92215; + fill-opacity: 1; + } + + #camera-sharing, + #microphone-sharing, + #screen-sharing { + fill: rgb(224, 41, 29); + fill-opacity: 1; + } + </style> + + <defs> + <path id="camera-icon" d="m 2,23 a 3,3 0 0 0 3,3 l 14,0 a 3,3 0 0 0 3,-3 l 0,-4 6,5.5 c 0.5,0.5 1,0.7 2,0.5 l 0,-18 c -1,-0.2 -1.5,0 -2,0.5 l -6,5.5 0,-4 a 3,3 0 0 0 -3,-3 l -14,0 a 3,3 0 0 0 -3,3 z" /> + <path id="desktop-notification-icon" d="m 2,20 a 4,4 0 0 0 4,4 l 13,0 7,7 0,-7 a 4,4 0 0 0 4,-4 l 0,-12 a 4,4 0 0 0 -4,-4 l -20,0 a 4,4 0 0 0 -4,4 z m 5,-2 a 1,1 0 1 1 0,-2 l 10,0 a 1,1 0 1 1 0,2 z m 0,-4 a 1,1 0 1 1 0,-2 l 14,0 a 1,1 0 1 1 0,2 z m 0,-4 a 1,1 0 1 1 0,-2 l 18,0 a 1,1 0 1 1 0,2 z" /> + <path id="geo-linux-icon" d="m 2,15.9 a 14,14 0 1 1 0,0.2 z m 4,2.1 a 10,10 0 0 0 8,8 l 0,-4 4,0 0,4 a 10,10 0 0 0 8,-8 l -4,0 0,-4 4,0 a 10,10 0 0 0 -8,-8 l 0,4 -4,0 0,-4 a 10,10 0 0 0 -8,8 l 4,0 0,4 z" /> + <path id="geo-linux-detailed-icon" d="m 2,15.9 a 14,14 0 1 1 0,0.2 z m 3,2.1 a 11,11 0 0 0 9,9 l 1,-5 2,0 1,5 a 11,11 0 0 0 9,-9 l -5,-1 0,-2 5,-1 a 11,11 0 0 0 -9,-9 l -1,5 -2,0 -1,-5 a 11,11 0 0 0 -9,9 l 5,1 0,2 z" /> + <path id="geo-osx-icon" d="m 0,16 16,0 0,16 12,-28 z" /> + <path id="geo-windows-icon" d="m 2,14 0,4 2,0 a 12,12 0 0 0 10,10 l 0,2 4,0 0,-2 a 12,12 0 0 0 10,-10 l 2,0 0,-4 -2,0 a 12,12 0 0 0 -10,-10 l 0,-2 -4,0 0,2 a 12,12 0 0 0 -10,10 z m 4,1.9 a 10,10 0 1 1 0,0.2 z m 4,0 a 6,6 0 1 1 0,0.2 z" /> + <path id="geo-windows-detailed-icon" d="m 2,14.5 0,3 2,0.5 a 12,12 0 0 0 10,10 l 0.5,2 3,0 0.5,-2 a 12,12 0 0 0 10,-10 l 2,-0.5 0,-3 -2,-0.5 a 12,12 0 0 0 -10,-10 l -0.5,-2 -3,0 -0.5,2 a 12,12 0 0 0 -10,10 z m 4,1.4 a 10,10 0 1 1 0,0.2 z m 3,0 a 7,7 0 1 1 0,0.2 z" /> + <path id="indexedDB-icon" d="m 2,24 a 4,4 0 0 0 4,4 l 2,0 0,-4 -2,0 0,-16 20,0 0,16 -2,0 0,4 2,0 a 4,4 0 0 0 4,-4 l 0,-16 a 4,4 0 0 0 -4,-4 l -20,0 a 4,4 0 0 0 -4,4 z m 8,-2 6,7 6,-7 -4,0 0,-8 -4,0 0,8 z" /> + <path id="login-icon" d="m 2,26 0,4 6,0 0,-2 2,0 0,-2 1,0 0,-1 2,0 0,-3 2,0 2.5,-2.5 1.5,1.5 3,-3 a 8,8 0 1 0 -8,-8 l -3,3 2,2 z m 20,-18.1 a 2,2 0 1 1 0,0.2 z" /> + <path id="login-detailed-icon" d="m 1,27 0,3.5 a 0.5,0.5 0 0 0 0.5,0.5 l 5,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1.5 1.5,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1.5 1,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-1 1,0 a 0.5,0.5 0 0 0 0.5,-0.5 l 0,-2 2,0 2.5,-2.5 q 0.5,-0.5 1,0 l 1,1 c 0.5,0.5 1,0.5 1.5,-0.5 l 1,-2 a 9,9 0 1 0 -8,-8 l -2,1 c -1,0.5 -1,1 -0.5,1.5 l 1.5,1.5 q 0.5,0.5 0,1 z m 21,-19.1 a 2,2 0 1 1 0,0.2 z" /> + <path id="microphone-icon" d="m 8,14 0,4 a 8,8 0 0 0 6,7.7 l 0,2.3 -2,0 a 2,2 0 0 0 -2,2 l 12,0 a 2,2 0 0 0 -2,-2 l -2,0 0,-2.3 a 8,8 0 0 0 6,-7.7 l 0,-4 -2,0 0,4 a 6,6 0 0 1 -12,0 l 0,-4 z m 4,4 a 4,4 0 0 0 8,0 l 0,-12 a 4,4 0 0 0 -8,0 z" /> + <path id="microphone-detailed-icon" d="m 8,18 a 8,8 0 0 0 6,7.7 l 0,2.3 -1,0 a 3,2 0 0 0 -3,2 l 12,0 a 3,2 0 0 0 -3,-2 l -1,0 0,-2.3 a 8,8 0 0 0 6,-7.7 l 0,-4 a 1,1 0 0 0 -2,0 l 0,4 a 6,6 0 0 1 -12,0 l 0,-4 a 1,1 0 0 0 -2,0 z m 4,0 a 4,4 0 0 0 8,0 l 0,-12 a 4,4 0 0 0 -8,0 z" /> + <path id="plugin-icon" d="m 2,26 a 2,2 0 0 0 2,2 l 24,0 a 2,2 0 0 0 2,-2 l 0,-16 a 2,2 0 0 0 -2,-2 l -24,0 a 2,2 0 0 0 -2,2 z m 2,-20 10,0 0,-2 a 2,2 0 0 0 -2,-2 l -6,0 a 2,2 0 0 0 -2,2 z m 14,0 10,0 0,-2 a 2,2 0 0 0 -2,-2 l -6,0 a 2,2 0 0 0 -2,2 z" /> + <path id="popup-icon" d="m 2,24 a 4,4 0 0 0 4,4 l 8,0 a 10,10 0 0 1 -2,-4 l -4,0 a 2,2 0 0 1 -2,-2 l 0,-12 18,0 0,2 a 10,10 0 0 1 4,2 l 0,-8 a 4,4 0 0 0 -4,-4 l -18,0 a 4,4 0 0 0 -4,4 z m 12,-2.1 a 8,8 0 1 1 0,0.2 m 10.7,-4.3 a 5,5 0 0 0 -6.9,6.9 z m -5.4,8.4 a 5,5 0 0 0 6.9,-6.9 z" /> + <path id="screen-icon" d="m 2,18 a 2,2 0 0 0 2,2 l 2,0 0,-6 a 4,4 0 0 1 4,-4 l 14,0 0,-6 a 2,2 0 0 0 -2,-2 l -18,0 a 2,2 0 0 0 -2,2 z m 6,10 a 2,2 0 0 0 2,2 l 18,0 a 2,2 0 0 0 2,-2 l 0,-14 a 2,2 0 0 0 -2,-2 l -18,0 a 2,2 0 0 0 -2,2 z" /> + + <clipPath id="blocked-clipPath"> + <path d="m 0,0 0,31 31,-31 z m 6,32 26,0 0,-26 z"/> + </clipPath> + + <mask id="i-mask" style="fill-opacity: 1;"> + <rect fill="white" width="32" height="32"/> + <circle fill="black" cx="16" cy="9" r="2.5"/> + <rect fill="black" x="14" y="14" width="4" height="10" rx="2" ry="2"/> + </mask> + </defs> + + <g id="default-info"> + <circle cx="16" cy="16" r="14" mask="url(#i-mask)"/> + </g> + + <use id="camera" xlink:href="#camera-icon" /> + <use id="camera-sharing" xlink:href="#camera-icon"/> + <use id="camera-blocked" class="blocked" xlink:href="#camera-icon" /> + <use id="desktop-notification" xlink:href="#desktop-notification-icon" /> + <use id="desktop-notification-blocked" class="blocked" xlink:href="#desktop-notification-icon" /> + <use id="geo-osx" xlink:href="#geo-osx-icon" /> + <use id="geo-osx-blocked" class="blocked" xlink:href="#geo-osx-icon" /> + <use id="geo-linux" xlink:href="#geo-linux-icon" /> + <use id="geo-linux-blocked" class="blocked" xlink:href="#geo-linux-icon" /> + <use id="geo-linux-detailed" xlink:href="#geo-linux-detailed-icon" /> + <use id="geo-windows" xlink:href="#geo-windows-icon" /> + <use id="geo-windows-blocked" class="blocked" xlink:href="#geo-windows-icon" /> + <use id="geo-windows-detailed" xlink:href="#geo-windows-detailed-icon" /> + <use id="indexedDB" xlink:href="#indexedDB-icon" /> + <use id="indexedDB-blocked" class="blocked" xlink:href="#indexedDB-icon" /> + <use id="login" xlink:href="#login-icon" /> + <use id="login-highlighted" class="highlighted" xlink:href="#login-icon" /> + <use id="login-detailed" xlink:href="#login-detailed-icon" /> + <use id="microphone" xlink:href="#microphone-icon" /> + <use id="microphone-sharing" xlink:href="#microphone-icon"/> + <use id="microphone-blocked" class="blocked" xlink:href="#microphone-icon" /> + <use id="microphone-detailed" xlink:href="#microphone-detailed-icon" /> + <use id="plugin" xlink:href="#plugin-icon" /> + <use id="plugin-blocked" class="blocked" xlink:href="#plugin-icon" /> + <use id="popup" xlink:href="#popup-icon" /> + <use id="screen" xlink:href="#screen-icon" /> + <use id="screen-sharing" xlink:href="#screen-icon"/> + <use id="screen-blocked" class="blocked" xlink:href="#screen-icon" /> + + <path id="strikeout" d="m 2,28 2,2 26,-26 -2,-2 z"/> +</svg> diff --git a/browser/themes/shared/panel-icons.svg b/browser/themes/shared/panel-icons.svg new file mode 100644 index 000000000..2092e0f64 --- /dev/null +++ b/browser/themes/shared/panel-icons.svg @@ -0,0 +1,18 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + width="32" height="32" viewBox="0 0 32 32"> + <style> + path:not(:target) { + display: none; + } + </style> + <path id="cancel" d="m 6,9.5 6.5,6.5 -6.5,6.5 3.5,3.5 6.5,-6.5 6.5,6.5 3.5,-3.5 -6.5,-6.5 6.5,-6.5 -3.5,-3.5 -6.5,6.5 -6.5,-6.5 z" /> + <path id="folder" d="M17.3,9.4c0,0,1.1,0,3.7,0c1.7,0,2,0,5.6,0c0.6,0,0.6,0,1.1,0V9.2c0-1.5-0.9-2.6-2-2.6h-5.8V6.3c0-0.6-1.5-2-2.8-2h-7.1 H7.6H4.9v2.4v2.4v2.2c2.8,0,8.5,0,8.5,0C16.4,11.3,17.3,9.4,17.3,9.4z M29,13c0-0.6-0.6-1.1-1.5-1.7l0,0c-0.2,0-0.6,0-0.9,0 c-2.8,0-3,0-4.8,0c-1.9,0-3.3,0-3.3,0s-1.5,2.4-3.7,2.4c0,0-6.5,0-9.1,0H5.4C3,13.7,3,15.9,3,15.9l1.1,9.7C4.1,27.1,5,28,6.5,28 h19.1c1.5,0,2.4-0.9,2.4-2.4L29,13.7l0,0l0,0C29,13.7,29,13,29,13z" /> + <path id="magnifier" d="M12.9,2c6,0,11,5,11,11c0,2.2-0.6,4.2-1.8,6l7.2,7c0.8,0.8,0.8,2.4,0,3.2c-0.6,0.6-1.2,0.8-1.6,0.8s-1.2-0.2-1.6-0.6l-7-7 c-1.8,1.2-3.8,1.8-6,1.8c-6,0-11-5-11-11C2.1,7.2,6.9,2,12.9,2z M12.9,20c3.8,0,7-3.2,7-7s-3.2-7-7-7s-7,3.2-7,7S9.1,20,12.9,20z" /> + <path id="retry" d="M28,16.5v-14l-5,4.8c-1.8-1.4-4.4-2.4-7-2.4c-6.4,0-11.8,5.2-11.8,11.8c0,6.4,5.2,11.8,11.8,11.8c3.4,0,6.2-1.4,8.2-3.6 l-3.4-3.4c-1.2,1.2-3,1.8-5,1.8c-3.6,0.2-6.8-2.8-6.8-6.8c0-3.8,3-7.2,7-7.2c1.4,0,2.6,0.4,3.6,1l-6,6.2H28z"/> + <path id="arrow-left" d="M23.5,25l-9-9l9-9l-3-3l-12,12l12,12L23.5,25z" /> + <path id="arrow-right" d="M11.6,28l12-12l-12-12l-3,3l9,9l-9,9L11.6,28z" /> +</svg> diff --git a/browser/themes/shared/panic-panel/header-small.png b/browser/themes/shared/panic-panel/header-small.png Binary files differnew file mode 100644 index 000000000..ef1956fb8 --- /dev/null +++ b/browser/themes/shared/panic-panel/header-small.png diff --git a/browser/themes/shared/panic-panel/header-small@2x.png b/browser/themes/shared/panic-panel/header-small@2x.png Binary files differnew file mode 100644 index 000000000..ae445a4a9 --- /dev/null +++ b/browser/themes/shared/panic-panel/header-small@2x.png diff --git a/browser/themes/shared/panic-panel/header.png b/browser/themes/shared/panic-panel/header.png Binary files differnew file mode 100644 index 000000000..edac3e6d6 --- /dev/null +++ b/browser/themes/shared/panic-panel/header.png diff --git a/browser/themes/shared/panic-panel/header@2x.png b/browser/themes/shared/panic-panel/header@2x.png Binary files differnew file mode 100644 index 000000000..f137928e5 --- /dev/null +++ b/browser/themes/shared/panic-panel/header@2x.png diff --git a/browser/themes/shared/panic-panel/icons.png b/browser/themes/shared/panic-panel/icons.png Binary files differnew file mode 100644 index 000000000..f7f9a3e08 --- /dev/null +++ b/browser/themes/shared/panic-panel/icons.png diff --git a/browser/themes/shared/panic-panel/icons@2x.png b/browser/themes/shared/panic-panel/icons@2x.png Binary files differnew file mode 100644 index 000000000..959ebf586 --- /dev/null +++ b/browser/themes/shared/panic-panel/icons@2x.png diff --git a/browser/themes/shared/plugin-doorhanger.inc.css b/browser/themes/shared/plugin-doorhanger.inc.css new file mode 100644 index 000000000..dd315bb8b --- /dev/null +++ b/browser/themes/shared/plugin-doorhanger.inc.css @@ -0,0 +1,65 @@ +#notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0px; +} + +.click-to-play-plugins-notification-center-box { + border: 1px solid ThreeDShadow; + margin: 10px; +} + +.plugin-popupnotification-centeritem:nth-child(odd) { + background-color: rgba(0,0,0,0.1); +} + +.center-item-label { + margin-inline-start: 6px; + margin-bottom: 0; + text-overflow: ellipsis; +} + +.center-item-warning-icon { + background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg"); + background-repeat: no-repeat; + width: 16px; + height: 15px; + margin-inline-start: 6px; +} + +.click-to-play-plugins-notification-button-container { + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); + padding: 10px; + margin-top: 5px; +} + +.click-to-play-popup-button { + width: 50%; +} + +.click-to-play-plugins-notification-description-box { + padding: 10px; +} + +.click-to-play-plugins-outer-description { + margin-top: 8px; +} + +.click-to-play-plugins-notification-link, +.center-item-link { + margin: 0; +} + +.messageImage[value="plugin-hidden"] { + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin); +} + +/* Keep any changes to this style in sync with pluginProblem.css */ +notification.pluginVulnerable { + background-color: rgb(72,72,72); + background-image: url(chrome://mozapps/skin/plugins/contentPluginStripe.png); + color: white; +} + +notification.pluginVulnerable .messageImage { + list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked); +} diff --git a/browser/themes/shared/preferences/containers.css b/browser/themes/shared/preferences/containers.css new file mode 100644 index 000000000..3fb965331 --- /dev/null +++ b/browser/themes/shared/preferences/containers.css @@ -0,0 +1,53 @@ +/* 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/. */ + +%include ../../../components/contextualidentity/content/usercontext.css + +:root { + --preference-selected-color: #0996f8; + --preference-unselected-color: #333; + --preference-active-color: #858585; +} + +radiogroup { + display: flex; + margin-inline-start: 0.35rem; +} + +radio { + flex: auto; + display: flex; + align-items: center; + justify-content: center; + -moz-user-select: none; + outline: 2px solid transparent; + outline-offset: 4px; + -moz-outline-radius: 100%; + min-block-size: 24px; + min-inline-size: 24px; + border-radius: 50%; + padding: 2px; + margin: 10px; +} + +.icon-buttons > radio > [data-identity-icon] { + fill: #4d4d4d; +} + +radio > [data-identity-icon] { + inline-size: 22px; + block-size: 22px; +} + +radio[selected=true] { + outline-color: var(--preference-unselected-color); +} + +radio[focused=true] { + outline-color: var(--preference-selected-color); +} + +radio:hover:active { + outline-color: var(--preference-active-color); +} diff --git a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css new file mode 100644 index 000000000..923aa929b --- /dev/null +++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css @@ -0,0 +1,227 @@ +/* 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/. */ + +@import url("chrome://global/skin/in-content/info-pages.css"); + +:root { + --color-grey-lightest: #fbfbfb; + --color-grey: #b1b1b1; + + --color-blue: #0996f8; + --color-blue-dark: #0670cc; + --color-blue-darker: #005bab; + + --icon-margin: 64px; +} + +html.private { + --in-content-page-color: #beb8cc; + --in-content-text-color: #beb8cc; + --in-content-page-background: #1c023c; +} + +body { + padding: 40px; +} + +a:link { + color: var(--color-blue); + text-decoration: none; +} + +a:hover { + color: var(--color-blue-dark); + text-decoration: underline; +} + +a:hover:active { + color: var(--color-blue-darker); +} + +a:visited { + color: var(--color-blue-darker); +} + +.about-content-container { + max-width: 780px; +} + +.section-main { + margin-bottom: 48px; + margin-inline-start: var(--icon-margin); + padding-inline-start: 24px; +} + +.section-main:last-child { + margin-bottom: 0; +} + +p { + line-height: 1.5em; +} + +.list-row { + overflow: auto; +} + +.list-row > ul > li { + float: left; + width: 220px; + line-height: 1.5em; + margin-inline-start: 1em; + margin-bottom: 0; +} + +.list-row > ul > li:dir(rtl) { + float: right; +} + +.title { + background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg"); + background-size: 64px; + background-position: left, center; + font-weight: lighter; + line-height: 1.5em; + min-height: 64px; + margin-inline-start: 0; + padding-inline-start: calc(var(--icon-margin) + 24px); +} + +.title:dir(rtl) { + background-position: right, center; +} + +.about-subheader { + display: flex; + align-items: center; + font-size: 1.5em; + font-weight: lighter; + min-height: 32px; + background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg"); + background-repeat: no-repeat; + background-size: 32px; + margin-inline-start: calc(var(--icon-margin) - 32px); + padding-inline-start: 56px; +} + +.about-subheader:dir(rtl) { + background-position: right; +} + +.about-subheader.tp-off { + background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg"); +} + +.about-info { + font-size: .875em; +} + +.tpTitle { + margin-inline-end: 12px; +} + +.private strong { + color: var(--color-grey-lightest); + font-weight: normal; +} + +a.button { + padding: 5px 40px; + background-color: #381e59; + border: 1px solid #43256a; + border-radius: 4px; + text-decoration: none; + display: inline-block; +} + +/** + * We want to hide the checkbox in lieu of the toggle-btn + * "slider toggle". We need to make the toggle keyboard + * focusable, however, which is not possible if it's + * display:none. We work around this by making the toggle + * invisible but still present in the display list, allowing + * it to receive keyboard events. When it is focused by keyboard, + * we use the -moz-focusring selector on the invisible checkbox + * to show a focus ring around the slider toggle. + */ +.toggle-input { + opacity: 0; + width: 0; + pointer-events: none; + position: absolute; +} + +.toggle + .toggle-btn { + box-sizing: border-box; + cursor: pointer; + min-width: 60px; + height: 24px; + border-radius: 12px; + background-color: var(--color-grey); + border: 1px var(--color-grey) solid; + padding: 2px; +} + +.toggle + .toggle-btn::after, +.toggle + .toggle-btn::before { + position: relative; + display: block; + content: ""; + width: 19px; + height: 100%; +} + +.toggle + .toggle-btn::after { + left: 0; + box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, .1), + 0 1px 0 hsla(0, 0%, 0%, .2); + border-radius: 50%; + background: white; + transition: left .2s ease; +} + +.toggle + .toggle-btn::before { + float: left; + left: 9px; + visibility: hidden; + background-size: 16px; + background-repeat: no-repeat; + background-color: transparent; + background-image: url("chrome://browser/skin/privatebrowsing/check.svg"); +} + +.toggle + .toggle-btn:dir(rtl)::after { + left: auto; + right: 0; + transition-property: right; +} + +.toggle + .toggle-btn:dir(rtl)::before { + float: right; + left: auto; + right: 9px; +} + +.toggle:checked + .toggle-btn { + background: #3fc455; + border: 1px solid #269939; +} + +.toggle:checked + .toggle-btn::after { + left: 35px; +} + +.toggle:checked + .toggle-btn:dir(rtl)::after { + right: 35px; +} + +.toggle:checked + .toggle-btn::before { + visibility: visible; +} + +.toggle:-moz-focusring + .toggle-btn { + outline: 2px solid rgba(0, 149, 221, 0.5); + outline-offset: 1px; + -moz-outline-radius: 2px; +} diff --git a/browser/themes/shared/privatebrowsing/attention.png b/browser/themes/shared/privatebrowsing/attention.png Binary files differnew file mode 100755 index 000000000..8706928ff --- /dev/null +++ b/browser/themes/shared/privatebrowsing/attention.png diff --git a/browser/themes/shared/privatebrowsing/attention@2x.png b/browser/themes/shared/privatebrowsing/attention@2x.png Binary files differnew file mode 100755 index 000000000..5b32888c8 --- /dev/null +++ b/browser/themes/shared/privatebrowsing/attention@2x.png diff --git a/browser/themes/shared/privatebrowsing/check.png b/browser/themes/shared/privatebrowsing/check.png Binary files differnew file mode 100755 index 000000000..59ca51b7b --- /dev/null +++ b/browser/themes/shared/privatebrowsing/check.png diff --git a/browser/themes/shared/privatebrowsing/check.svg b/browser/themes/shared/privatebrowsing/check.svg new file mode 100644 index 000000000..a8e4bcc2b --- /dev/null +++ b/browser/themes/shared/privatebrowsing/check.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> + <path fill="#fff" d="M30.057,9.752L15.9,23.909h0l-4.044,4.045-4.045-4.045h0l-6.068-6.067,4.045-4.045,6.068,6.067L26.012,5.707Z"/> +</svg> diff --git a/browser/themes/shared/privatebrowsing/check@2x.png b/browser/themes/shared/privatebrowsing/check@2x.png Binary files differnew file mode 100755 index 000000000..031685cbf --- /dev/null +++ b/browser/themes/shared/privatebrowsing/check@2x.png diff --git a/browser/themes/shared/privatebrowsing/favicon.svg b/browser/themes/shared/privatebrowsing/favicon.svg new file mode 100644 index 000000000..6de9c6450 --- /dev/null +++ b/browser/themes/shared/privatebrowsing/favicon.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <circle cx="8" cy="8" r="8" fill="#8d20ae" /> + <circle cx="8" cy="8" r="7.5" stroke="#7b149a" stroke-width="1" fill="none" /> + <path d="M11.309,10.995C10.061,10.995,9.2,9.5,8,9.5s-2.135,1.5-3.309,1.5c-1.541,0-2.678-1.455-2.7-3.948C1.983,5.5,2.446,5.005,4.446,5.005S7.031,5.822,8,5.822s1.555-.817,3.555-0.817S14.017,5.5,14.006,7.047C13.987,9.54,12.85,10.995,11.309,10.995ZM5.426,6.911a1.739,1.739,0,0,0-1.716.953A2.049,2.049,0,0,0,5.3,8.544c0.788,0,1.716-.288,1.716-0.544A1.428,1.428,0,0,0,5.426,6.911Zm5.148,0A1.429,1.429,0,0,0,8.981,8c0,0.257.928,0.544,1.716,0.544a2.049,2.049,0,0,0,1.593-.681A1.739,1.739,0,0,0,10.574,6.911Z" stroke="#670c83" stroke-width="2" fill="none" /> + <path d="M11.309,10.995C10.061,10.995,9.2,9.5,8,9.5s-2.135,1.5-3.309,1.5c-1.541,0-2.678-1.455-2.7-3.948C1.983,5.5,2.446,5.005,4.446,5.005S7.031,5.822,8,5.822s1.555-.817,3.555-0.817S14.017,5.5,14.006,7.047C13.987,9.54,12.85,10.995,11.309,10.995ZM5.426,6.911a1.739,1.739,0,0,0-1.716.953A2.049,2.049,0,0,0,5.3,8.544c0.788,0,1.716-.288,1.716-0.544A1.428,1.428,0,0,0,5.426,6.911Zm5.148,0A1.429,1.429,0,0,0,8.981,8c0,0.257.928,0.544,1.716,0.544a2.049,2.049,0,0,0,1.593-.681A1.739,1.739,0,0,0,10.574,6.911Z" fill="#fff" /> +</svg> diff --git a/browser/themes/shared/privatebrowsing/private-browsing.svg b/browser/themes/shared/privatebrowsing/private-browsing.svg new file mode 100644 index 000000000..cc37bc4f3 --- /dev/null +++ b/browser/themes/shared/privatebrowsing/private-browsing.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> + <ellipse cx="32" cy="34" rx="29.5" ry="30" fill="#000" fill-opacity=".1" /> + <circle cx="32" cy="32" r="30" fill="#8d20ae" /> + <circle cx="32" cy="32" r="29.5" stroke="#7b149a" stroke-width="1" fill="none" /> + <path d="M45.225,43c-4.989,0-8.44-5.5-13.224-5.5S23.468,43,18.776,43C12.62,43,8.074,37.656,8,28.5,7.954,22.815,9.805,21,17.8,21S28.128,24,32,24s6.214-3,14.2-3,9.842,1.815,9.8,7.5C55.926,37.656,51.381,43,45.225,43ZM21.714,28c-4.857.193-6.857,2.846-6.857,3.5s3.22,2.5,6.367,2.5,6.857-1.057,6.857-2C28.082,30.948,26.3,27.818,21.714,28Zm20.572,0c-4.583-.182-6.367,2.948-6.367,4,0,0.943,3.709,2,6.857,2s6.367-1.846,6.367-2.5S47.143,28.193,42.286,28Z" stroke="#670c83" stroke-width="2" fill="none" /> + <path d="M45.225,43c-4.989,0-8.44-5.5-13.224-5.5S23.468,43,18.776,43C12.62,43,8.074,37.656,8,28.5,7.954,22.815,9.805,21,17.8,21S28.128,24,32,24s6.214-3,14.2-3,9.842,1.815,9.8,7.5C55.926,37.656,51.381,43,45.225,43ZM21.714,28c-4.857.193-6.857,2.846-6.857,3.5s3.22,2.5,6.367,2.5,6.857-1.057,6.857-2C28.082,30.948,26.3,27.818,21.714,28Zm20.572,0c-4.583-.182-6.367,2.948-6.367,4,0,0.943,3.709,2,6.857,2s6.367-1.846,6.367-2.5S47.143,28.193,42.286,28Z" fill="#fff" /> +</svg> diff --git a/browser/themes/shared/privatebrowsing/shield-page.png b/browser/themes/shared/privatebrowsing/shield-page.png Binary files differnew file mode 100755 index 000000000..2ddcf34e9 --- /dev/null +++ b/browser/themes/shared/privatebrowsing/shield-page.png diff --git a/browser/themes/shared/privatebrowsing/shield-page@2x.png b/browser/themes/shared/privatebrowsing/shield-page@2x.png Binary files differnew file mode 100755 index 000000000..72a0b8273 --- /dev/null +++ b/browser/themes/shared/privatebrowsing/shield-page@2x.png diff --git a/browser/themes/shared/privatebrowsing/tracking-protection-off.svg b/browser/themes/shared/privatebrowsing/tracking-protection-off.svg new file mode 100644 index 000000000..7da0ca78a --- /dev/null +++ b/browser/themes/shared/privatebrowsing/tracking-protection-off.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> + <g fill="#ccc"> + <path d="M28.8,0.3l-2.4,2.4L16.1,1.1L4.9,2.9c-1,0.2-1.8,1-1.8,2c0,2.5,0,6.9,0.3,8.7c0.4,4.3,1.2,6.9,2.7,9.4l-3.5,3.5l2,2 + L30.8,2.3L28.8,0.3z M5.3,13.5c-0.2-1.9-0.2-6.2-0.2-8.6c0,0,0,0,0.1,0l10.9-1.8l8.6,1.4L16.1,13V5L7.2,6.6c-0.1,0-0.1,0-0.1,0 + c0,2,0,5.6,0.2,7.1c0.3,3,0.8,4.9,1.6,6.5l-1.4,1.4C6.3,19.6,5.6,17.3,5.3,13.5z"/> + <path d="M16.1,20.3l-3.9,3.9c1.7,1.2,3.4,1.6,3.9,1.7V20.3z"/> + <path d="M26.9,13.4c-0.5,5.6-1.7,8-3.8,10.7c-2.4,3.1-6.1,3.9-7,4.1c-0.7-0.2-3.2-0.7-5.4-2.5L9.3,27c3.1,2.7,6.7,3,6.7,3 + s5.2-0.5,8.6-4.9c2.5-3.2,3.6-5.9,4.2-11.6c0.1-1.3,0.2-4,0.2-6.3l-2,2C27,10.9,27,12.5,26.9,13.4z"/> + </g> +</svg> diff --git a/browser/themes/shared/privatebrowsing/tracking-protection.svg b/browser/themes/shared/privatebrowsing/tracking-protection.svg new file mode 100644 index 000000000..d22fe7df3 --- /dev/null +++ b/browser/themes/shared/privatebrowsing/tracking-protection.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> + +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> + <path fill="#ccc" d="M27.2,2.8L16,1L4.8,2.8C3.8,3,3,3.8,3,4.8c0,2.5,0,6.9,0.3,8.7C3.8,19,5,21.8,7.5,25.1C10.8,29.5,16,30,16,30 + s5.2-0.5,8.6-4.9c2.5-3.2,3.6-5.9,4.2-11.6C29,11.7,29,7.2,29,4.8C29,3.8,28.2,3,27.2,2.8z M26.8,13.3L26.8,13.3L26.8,13.3 + c-0.5,5.6-1.7,8-3.8,10.7c-2.4,3.1-6.1,3.9-7,4.1c-0.9-0.2-4.6-1-7-4.1c-2.1-2.8-3.3-5.2-3.8-10.6l0,0l0,0C5,11.5,5,7.2,5,4.8 + c0,0,0,0,0.1,0l0,0l0,0L16,3l10.8,1.8l0,0l0,0c0.1,0,0.1,0,0.1,0C27,7,27,11.5,26.8,13.3z M7.1,6.5L7.1,6.5L7.1,6.5 + C7,6.5,7,6.5,7.1,6.5C7,8.5,7,12.1,7.2,13.6l0,0l0,0c0.4,4.5,1.4,6.5,3.1,8.9c2,2.6,5,3.3,5.7,3.4v-21L7.1,6.5z"/> +</svg> diff --git a/browser/themes/shared/reader/reader-mode-16.png b/browser/themes/shared/reader/reader-mode-16.png Binary files differnew file mode 100644 index 000000000..12e2fd991 --- /dev/null +++ b/browser/themes/shared/reader/reader-mode-16.png diff --git a/browser/themes/shared/reader/reader-mode-16@2x.png b/browser/themes/shared/reader/reader-mode-16@2x.png Binary files differnew file mode 100644 index 000000000..236f52d8f --- /dev/null +++ b/browser/themes/shared/reader/reader-mode-16@2x.png diff --git a/browser/themes/shared/reader/reader-tour.png b/browser/themes/shared/reader/reader-tour.png Binary files differnew file mode 100644 index 000000000..be346b384 --- /dev/null +++ b/browser/themes/shared/reader/reader-tour.png diff --git a/browser/themes/shared/reader/reader-tour@2x.png b/browser/themes/shared/reader/reader-tour@2x.png Binary files differnew file mode 100644 index 000000000..1a60d93ca --- /dev/null +++ b/browser/themes/shared/reader/reader-tour@2x.png diff --git a/browser/themes/shared/reader/readerMode.svg b/browser/themes/shared/reader/readerMode.svg new file mode 100644 index 000000000..9293d1df2 --- /dev/null +++ b/browser/themes/shared/reader/readerMode.svg @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="16" viewBox="0 0 48 16">
+ <defs>
+ <path id="glyphShape-readerMode-book" d="M5.5,5h-2C3.2,5,3,5.2,3,5.5S3.2,6,3.5,6h2 C5.8,6,6,5.8,6,5.5S5.8,5,5.5,5z M5.5,7h-2C3.2,7,3,7.2,3,7.5S3.2,8,3.5,8h2C5.8,8,6,7.8,6,7.5S5.8,7,5.5,7z M5.5,9h-2 C3.2,9,3,9.2,3,9.5S3.2,10,3.5,10h2C5.8,10,6,9.8,6,9.5S5.8,9,5.5,9z M15.4,2c0,0-3.1,0-4.4,0S8.1,2.5,8,4.3C7.9,2.5,6.3,2,5,2 S0.6,2,0.6,2C0.3,2,0,2.3,0,2.7v9.6C0,12.6,0.3,13,0.6,13c0,0,2.6,0,4.4,0c1.6,0,2.8,1,3,2.3C8.2,14,9.4,13,11,13 c1.8,0,4.4,0,4.4,0c0.4,0,0.6-0.4,0.6-0.8V2.7C16,2.3,15.7,2,15.4,2z M14,11L14,11c-0.2,0-1.6,0-3,0c-1.6,0-2.9,0.8-3,2.2 C7.9,11.8,6.6,11,5,11c-1.4,0-2.8,0-3,0l0,0l0,0V4c0,0,2.7,0,3.5,0C6.6,4,8,5.5,8,6.8C8,5.5,9.4,4,10.5,4C11.3,4,14,4,14,4V11 L14,11z"/>
+ <linearGradient id="gradient-state-default" x1="0%" y1="0%" x2="0" y2="100%">
+ <stop stop-color="#989898" offset="0%"/>
+ <stop stop-color="#808080" offset="100%"/>
+ </linearGradient>
+ <linearGradient id="gradient-state-hover" x1="0%" y1="0%" x2="0" y2="100%">
+ <stop stop-color="#24aef4" offset="0%"/>
+ <stop stop-color="#177bdb" offset="100%"/>
+ </linearGradient>
+ <linearGradient id="gradient-state-pressed" x1="0%" y1="0%" x2="0" y2="100%">
+ <stop stop-color="#ff9300" offset="0%"/>
+ <stop stop-color="#ff5500" offset="100%"/>
+ </linearGradient>
+ <style>
+ .icon-state-default { fill: url(#gradient-state-default); }
+ .icon-state-hover { fill: url(#gradient-state-hover); }
+ .icon-state-pressed { fill: url(#gradient-state-pressed); }
+ </style>
+ </defs>
+ <use xlink:href="#glyphShape-readerMode-book" class="icon-state-default"/>
+ <use xlink:href="#glyphShape-readerMode-book" class="icon-state-hover" transform="translate(16)"/>
+ <use xlink:href="#glyphShape-readerMode-book" class="icon-state-pressed" transform="translate(32)"/>
+</svg>
diff --git a/browser/themes/shared/search/badge-add-engine.png b/browser/themes/shared/search/badge-add-engine.png Binary files differnew file mode 100644 index 000000000..226b7bf2b --- /dev/null +++ b/browser/themes/shared/search/badge-add-engine.png diff --git a/browser/themes/shared/search/badge-add-engine@2x.png b/browser/themes/shared/search/badge-add-engine@2x.png Binary files differnew file mode 100644 index 000000000..abf084aad --- /dev/null +++ b/browser/themes/shared/search/badge-add-engine@2x.png diff --git a/browser/themes/shared/search/gear.svg b/browser/themes/shared/search/gear.svg new file mode 100755 index 000000000..b765f3dfe --- /dev/null +++ b/browser/themes/shared/search/gear.svg @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"> + <path id="glyphShape-gear" d="M28,16c0-1.7,0.9-3.1,2-3.3c-0.4-1.5-0.9-2.9-1.7-4.2c-0.9,0.7-2.6,0.3-3.8-0.9c-1.2-1.2-1.6-2.8-0.9-3.8 c-1.3-0.8-2.7-1.4-4.2-1.7c-0.2,1.1-1.6,2-3.3,2S13,3.1,12.8,2c-1.5,0.4-2.9,0.9-4.2,1.7c0.7,0.9,0.3,2.6-0.9,3.8 c-1.4,1.1-3,1.5-4,0.9C2.9,9.7,2.4,11.2,2,12.7c1.1,0.2,2,1.6,2,3.3s-0.9,3.1-2,3.3c0.4,1.5,0.9,2.9,1.7,4.2 c0.9-0.7,2.6-0.3,3.8,0.9c1.2,1.2,1.6,2.8,0.9,3.8c1.3,0.8,2.7,1.4,4.2,1.7c0.2-1.1,1.6-2,3.3-2s3.1,0.9,3.3,2 c1.5-0.4,2.9-0.9,4.2-1.7c-0.7-0.9-0.3-2.6,0.9-3.8c1.3-1.2,2.8-1.6,3.8-0.9c0.8-1.3,1.4-2.7,1.7-4.2C28.9,19.1,28,17.7,28,16z M16,24c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S20.4,24,16,24z"/> +</svg> diff --git a/browser/themes/shared/search/history-icon.svg b/browser/themes/shared/search/history-icon.svg new file mode 100644 index 000000000..213694a8b --- /dev/null +++ b/browser/themes/shared/search/history-icon.svg @@ -0,0 +1,22 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> + <style> + use:not(:target) { + display: none; + } + use { + fill: graytext; + } + use[id$="-active"] { + fill: HighlightText; + } + </style> + <defs> + <path id="search-history-glyph" d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7 C15,4.1,11.9,1,8,1z M8,13.3c-2.9,0-5.3-2.4-5.3-5.3S5.1,2.7,8,2.7c2.9,0,5.3,2.4,5.3,5.3S10.9,13.3,8,13.3z M10.5,7H9V5 c0-0.6-0.4-1-1-1S7,4.4,7,5v3c0,0.6,0.4,1,1,1h2.5c0.6,0,1-0.4,1-1C11.5,7.4,11.1,7,10.5,7z"/> + </defs> + <use id="search-history-icon" xlink:href="#search-history-glyph"/> + <use id="search-history-icon-active" xlink:href="#search-history-glyph"/> +</svg> diff --git a/browser/themes/shared/search/search-arrow-go.svg b/browser/themes/shared/search/search-arrow-go.svg new file mode 100644 index 000000000..66d4bc913 --- /dev/null +++ b/browser/themes/shared/search/search-arrow-go.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> + <style> + use:not(:target) { + display: none; + } + use { + fill: #616366; + } + use[id$="-inverted"] { + fill: #fff; + } + </style> + <defs> + <path id="search-arrow-go-glyph" d="M1,7v2.2C1,9.8,1.4,10,2,10h7.5l-3,3.1c-0.4,0.3-0.4,1,0,1.4l0.8,0.8 c0.4,0.4,1,0.4,1.4,0l6.6-6.6c0.4-0.4,0.4-1,0-1.4L8.7,0.7c-0.4-0.4-1-0.4-1.4,0L6.5,1.6C6.1,2,6.1,2.6,6.5,3l3,3H2C1.4,6,1,6.4,1,7z"/> + </defs> + <use id="search-arrow-go" xlink:href="#search-arrow-go-glyph"/> + <use id="search-arrow-go-rtl" transform="rotate(180 8 8)" xlink:href="#search-arrow-go-glyph"/> + <use id="search-arrow-go-inverted" xlink:href="#search-arrow-go-glyph"/> + <use id="search-arrow-go-rtl-inverted" transform="rotate(180 8 8)" xlink:href="#search-arrow-go-glyph"/> +</svg> diff --git a/browser/themes/shared/search/search-engine-placeholder.png b/browser/themes/shared/search/search-engine-placeholder.png Binary files differnew file mode 100644 index 000000000..bff355bf4 --- /dev/null +++ b/browser/themes/shared/search/search-engine-placeholder.png diff --git a/browser/themes/shared/search/search-engine-placeholder@2x.png b/browser/themes/shared/search/search-engine-placeholder@2x.png Binary files differnew file mode 100644 index 000000000..1565fc55d --- /dev/null +++ b/browser/themes/shared/search/search-engine-placeholder@2x.png diff --git a/browser/themes/shared/search/search-indicator-badge-add.png b/browser/themes/shared/search/search-indicator-badge-add.png Binary files differnew file mode 100644 index 000000000..62bf01b3d --- /dev/null +++ b/browser/themes/shared/search/search-indicator-badge-add.png diff --git a/browser/themes/shared/search/search-indicator-badge-add@2x.png b/browser/themes/shared/search/search-indicator-badge-add@2x.png Binary files differnew file mode 100644 index 000000000..81056248f --- /dev/null +++ b/browser/themes/shared/search/search-indicator-badge-add@2x.png diff --git a/browser/themes/shared/search/search-indicator-magnifying-glass.svg b/browser/themes/shared/search/search-indicator-magnifying-glass.svg new file mode 100644 index 000000000..15bddfba4 --- /dev/null +++ b/browser/themes/shared/search/search-indicator-magnifying-glass.svg @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> + <path fill="#808080" d="M21.7,20.3l-1.4,1.4l-5.4-5.4c-1.3,1-3,1.7-4.9,1.7 c-4.4,0-8-3.6-8-8c0-4.4,3.6-8,8-8c4.4,0,8,3.6,8,8c0,1.8-0.6,3.5-1.7,4.9L21.7,20.3z M10,4c-3.3,0-6,2.7-6,6s2.7,6,6,6s6-2.7,6-6 S13.3,4,10,4z"/> +</svg> diff --git a/browser/themes/shared/search/search-indicator.png b/browser/themes/shared/search/search-indicator.png Binary files differnew file mode 100644 index 000000000..a4eab0d7a --- /dev/null +++ b/browser/themes/shared/search/search-indicator.png diff --git a/browser/themes/shared/search/search-indicator@2x.png b/browser/themes/shared/search/search-indicator@2x.png Binary files differnew file mode 100644 index 000000000..2722c1697 --- /dev/null +++ b/browser/themes/shared/search/search-indicator@2x.png diff --git a/browser/themes/shared/searchReset.css b/browser/themes/shared/searchReset.css new file mode 100644 index 000000000..3573d7d15 --- /dev/null +++ b/browser/themes/shared/searchReset.css @@ -0,0 +1,22 @@ +/* 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/. */ + +body { + align-items: center; +} + +.title { + background-image: url("chrome://browser/skin/icon-search-64.svg"); +} + +#defaultEngine { + padding-inline-start: 26px; + background-repeat: no-repeat; + background-position: 5px center; + background-size: 16px, 16px; +} + +#defaultEngine:-moz-dir(rtl) { + background-position: calc(100% - 5px) center; +} diff --git a/browser/themes/shared/social/gear_clicked.png b/browser/themes/shared/social/gear_clicked.png Binary files differnew file mode 100644 index 000000000..7c93aa767 --- /dev/null +++ b/browser/themes/shared/social/gear_clicked.png diff --git a/browser/themes/shared/social/gear_default.png b/browser/themes/shared/social/gear_default.png Binary files differnew file mode 100644 index 000000000..2a9c8e198 --- /dev/null +++ b/browser/themes/shared/social/gear_default.png diff --git a/browser/themes/shared/social/social.inc.css b/browser/themes/shared/social/social.inc.css new file mode 100644 index 000000000..31389b215 --- /dev/null +++ b/browser/themes/shared/social/social.inc.css @@ -0,0 +1,23 @@ +%if 0 +/* 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/. */ +%endif + +#manage-share-providers { + list-style-image: url("chrome://browser/skin/Toolbar.png"); + -moz-image-region: rect(0, 468px, 18px, 450px); +} + +#manage-share-providers > .toolbarbutton-icon { + min-height: 18px; + min-width: 18px; +} + +.social-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} +/* fixup corners for share panel */ +.social-panel > .social-panel-frame { + border-radius: inherit; +} diff --git a/browser/themes/shared/sync-desktopIcon.svg b/browser/themes/shared/sync-desktopIcon.svg new file mode 100644 index 000000000..d3279a984 --- /dev/null +++ b/browser/themes/shared/sync-desktopIcon.svg @@ -0,0 +1,22 @@ +<!-- 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/. --> +<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> + <style> + g:not(:target) { display: none; } + + .glyph { fill: #4d4d4d; } + .glyph.translucent { fill-opacity: .15; } + + .inverted .glyph { fill: #fff; } + .inverted .glyph.translucent { fill-opacity: .15; } + </style> + <g id="icon"> + <path class="glyph" d="M15,14H1a1,1,0,0,1-1-1V12.526H16V13A1,1,0,0,1,15,14ZM1,4A1,1,0,0,1,2,3H14a1,1,0,0,1,1,1v8H1V4Zm1,7H14V4H2v7Z"/> + <rect class="glyph translucent" x="2" y="4" width="12" height="7"/> + </g> + <g id="icon-inverted" class="inverted"> + <path class="glyph" d="M15,14H1a1,1,0,0,1-1-1V12.526H16V13A1,1,0,0,1,15,14ZM1,4A1,1,0,0,1,2,3H14a1,1,0,0,1,1,1v8H1V4Zm1,7H14V4H2v7Z"/> + <rect class="glyph translucent" x="2" y="4" width="12" height="7"/> + </g> +</svg> diff --git a/browser/themes/shared/sync-mobileIcon.svg b/browser/themes/shared/sync-mobileIcon.svg new file mode 100644 index 000000000..df19994f8 --- /dev/null +++ b/browser/themes/shared/sync-mobileIcon.svg @@ -0,0 +1,22 @@ +<!-- 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/. --> +<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> + <style> + g:not(:target) { display: none; } + + .glyph { fill: #4d4d4d; } + .glyph.translucent { fill-opacity: .15; } + + .inverted .glyph { fill: #fff; } + .inverted .glyph.translucent { fill-opacity: .15; } + </style> + <g id="icon"> + <path class="glyph" d="M12,16H4a1,1,0,0,1-1-1V1A1,1,0,0,1,4,0h8a1,1,0,0,1,1,1V15A1,1,0,0,1,12,16Zm-4-.684a0.785,0.785,0,1,0-.785-0.785A0.785,0.785,0,0,0,8,15.316ZM12,2H4V13h8V2Z"/> + <rect class="glyph translucent" x="4" y="2" width="8" height="11"/> + </g> + <g id="icon-inverted" class="inverted"> + <path class="glyph" d="M12,16H4a1,1,0,0,1-1-1V1A1,1,0,0,1,4,0h8a1,1,0,0,1,1,1V15A1,1,0,0,1,12,16Zm-4-.684a0.785,0.785,0,1,0-.785-0.785A0.785,0.785,0,0,0,8,15.316ZM12,2H4V13h8V2Z"/> + <rect class="glyph translucent" x="4" y="2" width="8" height="11"/> + </g> +</svg> diff --git a/browser/themes/shared/syncedtabs/sidebar.inc.css b/browser/themes/shared/syncedtabs/sidebar.inc.css new file mode 100644 index 000000000..4e76a7fc5 --- /dev/null +++ b/browser/themes/shared/syncedtabs/sidebar.inc.css @@ -0,0 +1,234 @@ +% 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/. + +/* These styles are intended to mimic XUL trees and the XUL search box. */ + +html { + height: 100%; +} + +body { + height: 100%; + margin: 0; + font: message-box; + color: #333333; + -moz-user-select: none; +} + +/* The content-container holds the non-scrollable header and the scrollable + content area. +*/ +.content-container { + display: flex; + flex-flow: column; + height: 100%; +} + +/* The content header is not scrollable */ +.content-header { + flex: 0 1 auto; +} + +/* The main content area is scrollable and fills the rest of the area */ +.content-scrollable { + flex: 1 1 auto; + overflow: auto; +} + +.emptyListInfo { + cursor: default; + padding: 3em 1em; + text-align: center; +} + +.list, +.item-tabs-list { + display: flex; + flex-flow: column; + flex-grow: 1; +} + +.item.client { + opacity: 1; + max-height: unset; + display: unset; +} + +.item.client.closed .item-tabs-list { + display: none; +} + +.item { + display: inline-block; + opacity: 1; + flex: 1; + min-width: 0; + white-space: nowrap; + overflow: hidden; + outline: none; + color: -moz-FieldText; +} + +.item.selected > .item-title-container { + background-color: -moz-cellhighlight; + color: -moz-cellhighlighttext; + font-weight: bold; +} + +.item.selected:focus > .item-title-container { + background-color: Highlight; + color: HighlightText; +} + +.client .item.tab > .item-title-container { + padding-inline-start: 35px; +} + +.item.tab > .item-title-container { + padding-inline-start: 20px; +} + +.item.client.device-image-desktop > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon"); +} + +.item.client.device-image-desktop.selected:focus > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon-inverted"); +} + +.item.client.device-image-mobile > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon"); +} + +.item.client.device-image-mobile.selected:focus > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon-inverted"); +} + +.item.tab > .item-title-container > .item-icon-container { + background-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} + +@media (min-resolution: 1.1dppx) { +.item.tab > .item-title-container > .item-icon-container { + background-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png"); + } +} + +.item-icon-container { + min-width: 16px; + max-width: 16px; + min-height: 16px; + max-height: 16px; + margin-right: 5px; + margin-left: 5px; + background-size: 16px 16px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.item-title-container { + display: flex; + flex-flow: row; + overflow: hidden; + flex-grow: 1; + padding: 1px 0px 1px 0px; +} + +.item-title { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + margin: 0px; + line-height: 1.3; + cursor: default; +} + +.item[hidden] { + opacity: 0; + max-height: 0; + transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms; +} + +.item.empty .item-title-container { + color: #aeaeae; +} + +.client .item.empty > .item-title-container { + padding-inline-start: 35px; +} + +.text-input-box { + display: flex; + flex-flow: row nowrap; +} + +.textbox-input-box { + display: flex; + flex-direction: row; +} + +.tabsFilter { + flex: 1; + /* min-width of anything to override the implicit "-moz-min-content" value. + 0px is safe as the sidebar itself has a constrained size meaning we will + never actually hit this minimum + */ + min-width: 0px; +} + +.sync-state > p { + padding-inline-end: 10px; + padding-inline-start: 10px; + color: #888; +} + +.text-link { + color: rgb(0, 149, 221); + cursor: pointer; +} + +.text-link:hover { + text-decoration: underline; +} + +.text-link, +.text-link:focus { + margin: 0px; + padding: 0px; + border: 0px; +} + +.deck .sync-state { + display: none; + opacity: 0; + transition: opacity 1.5s; + border-top: 1px solid #bdbdbd; +} + +.deck .sync-state.tabs-container { + border-top: 0px; +} + +.deck .sync-state.selected { + display: unset; + opacity: 100; +} + +.sidebar-search-container.tabs-container:not(.selected) { + display: none; +} + +.textbox-search-clear:not([disabled]) { + cursor: default; +} + +.textbox-search-icons .textbox-search-clear, +.filtered .textbox-search-icons .textbox-search-icon { + display: none; +} + +.filtered .textbox-search-icons .textbox-search-clear { + display: block; +} diff --git a/browser/themes/shared/tab-selected.svg b/browser/themes/shared/tab-selected.svg new file mode 100644 index 000000000..ca66d8116 --- /dev/null +++ b/browser/themes/shared/tab-selected.svg @@ -0,0 +1,36 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="30px" height="31px" preserveAspectRatio="none"> + <defs> + <style> +%filter substitution +%ifdef XP_MACOSX +%include ../osx/shared.inc +%elif defined(MOZ_WIDGET_GTK) +%include ../linux/linuxShared.inc +%else +%include ../windows/windowsShared.inc +%endif + #tab-background-fill { + background-color: @fgTabBackgroundColor@; + background-image: @fgTabTexture@; + background-repeat: no-repeat; + height: 100%; + width: 100%; + } +%ifdef XP_WIN + @media (-moz-windows-default-theme) and (-moz-os-version: windows-vista), + (-moz-windows-default-theme) and (-moz-os-version: windows-win7) { + #tab-background-fill { + background-color: @customToolbarColor@; + } + } +%endif + </style> +%include ../../base/content/tab-shape.inc.svg + </defs> + <foreignObject width="30" height="31" clip-path="url(#tab-curve-clip-path-@TAB_SIDE@)"> + <div id="tab-background-fill" xmlns="http://www.w3.org/1999/xhtml"></div> + </foreignObject> +</svg> diff --git a/browser/themes/shared/tabbrowser/connecting.png b/browser/themes/shared/tabbrowser/connecting.png Binary files differnew file mode 100644 index 000000000..e564fb570 --- /dev/null +++ b/browser/themes/shared/tabbrowser/connecting.png diff --git a/browser/themes/shared/tabbrowser/connecting@2x.png b/browser/themes/shared/tabbrowser/connecting@2x.png Binary files differnew file mode 100644 index 000000000..97e2b2eb6 --- /dev/null +++ b/browser/themes/shared/tabbrowser/connecting@2x.png diff --git a/browser/themes/shared/tabbrowser/crashed.svg b/browser/themes/shared/tabbrowser/crashed.svg new file mode 100644 index 000000000..85f3d8514 --- /dev/null +++ b/browser/themes/shared/tabbrowser/crashed.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="22 22 16 16">
+ <defs>
+ <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="30" y1="23" x2="30" y2="37">
+ <stop offset="0" style="stop-color: #e63b2e"/>
+ <stop offset="1" style="stop-color: #c33931"/>
+ </linearGradient>
+ </defs>
+ <circle fill="url(#gradient)" cx="30" cy="30" r="7"/>
+ <path fill="#fff" d="M31.03,33.304c0,0.6-0.479,1.092-1.091,1.092c-0.6,0-1.079-0.492-1.079-1.092 c0-0.588,0.479-1.079,1.079-1.079C30.551,32.225,31.03,32.716,31.03,33.304z M29.171,31.133l-0.24-5.253h2.015l-0.24,5.253H29.171z"/>
+</svg>
diff --git a/browser/themes/shared/tabbrowser/pendingpaint.png b/browser/themes/shared/tabbrowser/pendingpaint.png Binary files differnew file mode 100644 index 000000000..7bbf0fe4b --- /dev/null +++ b/browser/themes/shared/tabbrowser/pendingpaint.png diff --git a/browser/themes/shared/tabbrowser/tab-audio-small.svg b/browser/themes/shared/tabbrowser/tab-audio-small.svg new file mode 100644 index 000000000..abfe71268 --- /dev/null +++ b/browser/themes/shared/tabbrowser/tab-audio-small.svg @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> + <style> + .icon:not(:target) { + display: none; + } + + .icon { + fill: #262626; + } + .icon > .outline { + fill: #fff; + } + + .icon.white { + fill: #fff; + } + .icon.white > .outline { + fill: #000; + fill-opacity: .5; + } + </style> + + <g id="tab-audio" class="icon"> + <path class="outline" d="M12.4,3.6l-1-0.6l-0.9,2.5H10V1.8c0-0.4-0.5-0.7-0.9-0.4L5.6,5H4C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.6l3.6,3.6 c0.3,0.3,0.9,0.1,0.9-0.4v-3.7h0.5l0.9,2.5l1-0.6C14,11.5,15,9.8,15,8S14,4.5,12.4,3.6z M9,13l-3-3H4c-0.6,0-1-0.4-1-1V7 c0-0.6,0.4-1,1-1h2l3-3V13z M10,9.5v-3c0.8,0,1.5,0.7,1.5,1.5S10.8,9.5,10,9.5z M11.9,11.5l-0.4-0.9C12.4,10,13,9.1,13,8 s-0.6-2-1.4-2.5l0.3-1C13.2,5.2,14,6.5,14,8S13.2,10.8,11.9,11.5z"/> + <path d="M4,6C3.4,6,3,6.4,3,7v2c0,0.6,0.4,1,1,1h2l3,3V3L6,6H4z M10,6.5v3c0.8,0,1.5-0.7,1.5-1.5S10.8,6.5,10,6.5z M11.9,4.5 l-0.4,0.9C12.4,6,13,6.9,13,8s-0.6,2-1.4,2.5l0.4,0.9c1.2-0.7,2.1-2,2.1-3.5S13.2,5.2,11.9,4.5z"/> + </g> + <g id="tab-audio-muted" class="icon"> + <path class="outline" d="M5.6,5H4C2.9,5,2,5.9,2,7v2c0,0.7,0.3,1.3,0.9,1.7l-1.8,1.8l2.5,2.5l3-3l2.6,2.6c0.3,0.3,0.9,0.1,0.9-0.4V8.5l3.9-3.9 l-2.5-2.5L10,3.5V1.8c0-0.4-0.5-0.7-0.9-0.4L5.6,5z"/> + <path d="M11.5,3.5L9,5.9V3L6,6H4C3.4,6,3,6.4,3,7v2c0,0.6,0.4,1,1,1h0.9l-2.5,2.5l1.1,1.1l9-9L11.5,3.5z M9,13V9.7l-1.7,1.7L9,13z"/> + </g> + + <g id="tab-audio-white" class="icon white"> + <path class="outline" d="M12.4,3.6l-1-0.6l-0.9,2.5H10V1.8c0-0.4-0.5-0.7-0.9-0.4L5.6,5H4C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.6l3.6,3.6 c0.3,0.3,0.9,0.1,0.9-0.4v-3.7h0.5l0.9,2.5l1-0.6C14,11.5,15,9.8,15,8S14,4.5,12.4,3.6z M9,13l-3-3H4c-0.6,0-1-0.4-1-1V7 c0-0.6,0.4-1,1-1h2l3-3V13z M10,9.5v-3c0.8,0,1.5,0.7,1.5,1.5S10.8,9.5,10,9.5z M11.9,11.5l-0.4-0.9C12.4,10,13,9.1,13,8 s-0.6-2-1.4-2.5l0.3-1C13.2,5.2,14,6.5,14,8S13.2,10.8,11.9,11.5z"/> + <path d="M4,6C3.4,6,3,6.4,3,7v2c0,0.6,0.4,1,1,1h2l3,3V3L6,6H4z M10,6.5v3c0.8,0,1.5-0.7,1.5-1.5S10.8,6.5,10,6.5z M11.9,4.5 l-0.4,0.9C12.4,6,13,6.9,13,8s-0.6,2-1.4,2.5l0.4,0.9c1.2-0.7,2.1-2,2.1-3.5S13.2,5.2,11.9,4.5z"/> + </g> + <g id="tab-audio-white-muted" class="icon white"> + <path class="outline" d="M5.6,5H4C2.9,5,2,5.9,2,7v2c0,0.7,0.3,1.3,0.9,1.7l-1.8,1.8l2.5,2.5l3-3l2.6,2.6c0.3,0.3,0.9,0.1,0.9-0.4V8.5l3.9-3.9 l-2.5-2.5L10,3.5V1.8c0-0.4-0.5-0.7-0.9-0.4L5.6,5z"/> + <path d="M11.5,3.5L9,5.9V3L6,6H4C3.4,6,3,6.4,3,7v2c0,0.6,0.4,1,1,1h0.9l-2.5,2.5l1.1,1.1l9-9L11.5,3.5z M9,13V9.7l-1.7,1.7L9,13z"/> + </g> + + <g id="tab-audio-blocked" class="icon"> + <path class="outline" d="M8,1.2C4.3,1.2,1.2,4.3,1.2,8s3.1,6.8,6.8,6.8s6.8-3.1,6.8-6.8S11.7,1.2,8,1.2z M8,11.9 + c-2.1,0-3.9-1.7-3.9-3.9c0-2.1,1.7-3.9,3.9-3.9s3.9,1.7,3.9,3.9C11.9,10.1,10.1,11.9,8,11.9z M11.1,7.3L6.6,4.6L5.4,3.9v1.4v5.3V12 + l1.2-0.7L11,8.6L12.2,8L11.1,7.3z"/> + <path d="M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z M8,12.7c-2.6,0-4.7-2.1-4.7-4.7 + S5.4,3.3,8,3.3s4.7,2.1,4.7,4.7S10.6,12.7,8,12.7z M10.7,8L6.2,5.3v5.4L10.7,8z"/> + </g> + <g id="tab-audio-white-blocked" class="icon"> + <path class="outline" d="M8,0c3.3,0,6.4,2.2,7.5,5.3c1.1,3.1,0.1,6.7-2.5,8.9c-2.6,2.1-6.3,2.4-9.2,0.7 + C1,13.1-0.5,9.8,0.1,6.5C0.9,2.8,4.2,0,8,0z"/> + <path d="M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z M8,12.7c-2.6,0-4.7-2.1-4.7-4.7 + S5.4,3.3,8,3.3s4.7,2.1,4.7,4.7S10.6,12.7,8,12.7z M10.7,8L6.2,5.3v5.4L10.7,8z"/> + </g> +</svg> diff --git a/browser/themes/shared/tabbrowser/tab-audio.svg b/browser/themes/shared/tabbrowser/tab-audio.svg new file mode 100644 index 000000000..274e10c29 --- /dev/null +++ b/browser/themes/shared/tabbrowser/tab-audio.svg @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> + <style> + path:not(:target) { + display: none; + } + </style> + + <path id="tab-audio" d="M4,5C2.9,5,2,5.9,2,7v2c0,1.1,0.9,2,2,2h1.2L9,14V2L5.2,5H4z M11,8c0-0.6-0.4-1-1-1v2C10.6,9,11,8.6,11,8z M13,8 c0-1.4-1-2.6-2.3-2.9L10.4,6C11.3,6.2,12,7,12,8s-0.7,1.8-1.6,2l0.4,0.9C12,10.6,13,9.4,13,8z M11.4,3.2l-0.4,0.9 C12.8,4.6,14,6.2,14,8s-1.2,3.4-2.9,3.8l0.4,0.9C13.5,12.2,15,10.3,15,8S13.5,3.8,11.4,3.2z"/> + + <path id="tab-audio-muted" d="M12.5,3.4L9,6.3V2L5.2,5H4C2.9,5,2,5.9,2,7v2c0,0.9,0.6,1.6,1.4,1.9l-1.9,1.5l1,1.2l11-9L12.5,3.4z M9,14v-4l-2.5,2L9,14z"/> + + <path id="tab-audio-blocked" d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M5.6,11.6l6-3.6l-6-3.6V11.6z M8,14.2 + c-3.4,0-6.2-2.8-6.2-6.2S4.6,1.8,8,1.8s6.2,2.8,6.2,6.2S11.4,14.2,8,14.2z"/> +</svg> diff --git a/browser/themes/shared/tabbrowser/tab-overflow-indicator.png b/browser/themes/shared/tabbrowser/tab-overflow-indicator.png Binary files differnew file mode 100644 index 000000000..17d27c99e --- /dev/null +++ b/browser/themes/shared/tabbrowser/tab-overflow-indicator.png diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css new file mode 100644 index 000000000..632a6e606 --- /dev/null +++ b/browser/themes/shared/tabs.inc.css @@ -0,0 +1,566 @@ +%if 0 +/* 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/. */ +%endif + +:root { + --tab-toolbar-navbar-overlap: 1px; + --navbar-tab-toolbar-highlight-overlap: 1px; + --tab-min-height: 31px; +} +#TabsToolbar { + --tab-stroke-background-size: auto 100%; +} + +%define tabCurveWidth 30px +%define tabCurveHalfWidth 15px + +/* image preloading hack */ +#tabbrowser-tabs::before { + /* Because of bug 853415, we need to ordinal this to the first position: */ + -moz-box-ordinal-group: 0; + content: ''; + display: block; + background-image: + url(chrome://browser/skin/tabbrowser/tab-background-end.png), + url(chrome://browser/skin/tabbrowser/tab-background-middle.png), + url(chrome://browser/skin/tabbrowser/tab-background-start.png); +} + +#tabbrowser-tabs { + min-height: var(--tab-min-height); +} + +.tabbrowser-tab, +.tabs-newtab-button { + -moz-appearance: none; + background-color: transparent; + border-radius: 0; + border-width: 0; + margin: 0; + padding: 0; +} + +.tabbrowser-tab { + -moz-box-align: stretch; +} + +/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ +.tabbrowser-tab[visuallyselected=true] { + position: relative; + z-index: 2; +} + +.tab-background-middle { + -moz-box-flex: 1; + background-clip: padding-box; + border-left: @tabCurveHalfWidth@ solid transparent; + border-right: @tabCurveHalfWidth@ solid transparent; + margin: 0 -@tabCurveHalfWidth@; +} + +.tab-content { + padding-inline-end: 9px; + padding-inline-start: 9px; +} + +.tab-content[pinned] { + padding-inline-end: 3px; +} + +.tab-throbber, +.tab-icon-image, +.tab-sharing-icon-overlay, +.tab-icon-sound, +.tab-close-button { + margin-top: 1px; +} + +.tab-throbber, +.tab-sharing-icon-overlay, +.tab-icon-image { + height: 16px; + width: 16px; + margin-inline-end: 6px; +} + +.tab-icon-image { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} + +.tab-icon-image[sharing]:not([selected]), +.tab-sharing-icon-overlay { + animation: 3s linear pulse infinite; +} + +@keyframes pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; + } + 33.33%, 66.66% { + opacity: 1; + } +} + +.tab-icon-image[sharing]:not([selected]) { + animation-delay: -1.5s; +} + +.tab-sharing-icon-overlay { + /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */ + margin-inline-start: -22px; + position: relative; +} + +.tab-sharing-icon-overlay[sharing="camera"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); +} + +.tab-sharing-icon-overlay[sharing="microphone"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); +} + +.tab-sharing-icon-overlay[sharing="screen"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); +} + +.tab-icon-overlay { + width: 16px; + height: 16px; + margin-top: -8px; + margin-inline-start: -15px; + margin-inline-end: -1px; + position: relative; +} + +.tab-icon-overlay[crashed] { + list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); +} + +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-overlay[blocked]:not([crashed]) { + border-radius: 10px; +} + +.tab-icon-overlay[soundplaying]:hover, +.tab-icon-overlay[muted]:not([crashed]):hover, +.tab-icon-overlay[blocked]:not([crashed]):hover { + background-color: white; +} + +.tab-icon-overlay[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); +} + +.tab-icon-overlay[muted]:not([crashed]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); +} + +.tab-icon-overlay[blocked]:not([crashed]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover), +.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover), +.tab-icon-overlay[muted][selected]:-moz-lwtheme-brighttext:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover), +.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked"); +} + +.tab-throbber[busy] { + list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); +} + +.tab-throbber[progress] { + list-style-image: url("chrome://global/skin/icons/loading.png"); +} + +.tab-label { + margin-inline-end: 0; + margin-inline-start: 0; +} + +.tab-close-button { + margin-inline-start: 4px; + margin-inline-end: -2px; + padding: 0; +} + +.tab-icon-sound { + margin-inline-start: 4px; + width: 16px; + height: 16px; + padding: 0; +} + +.tab-icon-sound[soundplaying], +.tab-icon-sound[muted], +.tab-icon-sound[blocked] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; +} + +.tab-icon-sound[muted] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted); +} + +.tab-icon-sound[blocked] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked); +} + +.tab-icon-sound:-moz-lwtheme-darktext[soundplaying], +.tab-icon-sound:-moz-lwtheme-darktext[muted], +.tab-icon-sound:-moz-lwtheme-darktext[blocked] { + filter: url(chrome://browser/skin/filters.svg#fill) drop-shadow(1px 1px 1px white); +} + +.tab-icon-sound:-moz-lwtheme-brighttext[soundplaying], +.tab-icon-sound:-moz-lwtheme-brighttext[muted], +.tab-icon-sound:-moz-lwtheme-brighttext[blocked] { + filter: url(chrome://browser/skin/filters.svg#fill) drop-shadow(1px 1px 1px black); +} + +.tab-icon-sound[soundplaying]:not(:hover), +.tab-icon-sound[muted]:not(:hover), +.tab-icon-sound[blocked]:not(:hover) { + opacity: .8; +} + +.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover), +.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) { + transition: opacity .3s linear var(--soundplaying-removal-delay); + opacity: 0; +} + +.tab-background, +.tabs-newtab-button { + /* overlap the tab curves */ + margin-inline-end: -@tabCurveHalfWidth@; + margin-inline-start: -@tabCurveHalfWidth@; +} + +.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { + padding-inline-end: @tabCurveHalfWidth@; + padding-inline-start: @tabCurveHalfWidth@; +} + +/* Tab Overflow */ +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]), +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { + background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png); + background-size: 100% 100%; + width: 14px; + margin-bottom: var(--navbar-tab-toolbar-highlight-overlap); + pointer-events: none; + position: relative; + z-index: 3; /* the selected tab's z-index + 1 */ +} + +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl), +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) { + transform: scaleX(-1); +} + +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) { + margin-inline-start: -2px; + margin-inline-end: -12px; +} + +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { + margin-inline-start: -12px; + margin-inline-end: -2px; +} + +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed], +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] { + opacity: 0; +} + +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator, +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator { + transition: opacity 150ms ease; +} + +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, +.tab-background-start, +.tab-background-end, +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { + min-height: var(--tab-min-height); + width: @tabCurveWidth@; +} + +.tabbrowser-tab:not([visuallyselected=true]), +.tabbrowser-tab:-moz-lwtheme { + color: inherit; +} + +/* Selected tab */ + +/* + Tab background pseudo-elements which are positioned above .tab-background-start/end: + - ::before - provides the fill of the tab curve and is clipped to the tab shape. This is where + pointer events go for the curve. + - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer + events go through to ::before to get the proper shape. + */ + + +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { + /* position ::after on top of its parent */ + margin-inline-start: -@tabCurveWidth@; + background-size: 100% 100%; + content: ""; + display: -moz-box; + position: relative; +} + +.tab-background-start[selected=true]::before, +.tab-background-end[selected=true]::before { + /* all ::before pseudo elements */ + content: ""; + display: -moz-box; +} + +.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { + background-image: url(chrome://browser/skin/tabbrowser/tab-selected-start.svg); + background-size: 100% 100%; +} + +.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { + background-image: url(chrome://browser/skin/tabbrowser/tab-selected-end.svg); + background-size: 100% 100%; +} + +/* For lightweight themes, clip the header image on start, middle, and end. */ +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { + clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); +} + +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { + clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); +} + +.tab-background-start[selected=true]:-moz-locale-dir(ltr)::after, +.tab-background-end[selected=true]:-moz-locale-dir(rtl)::after { + background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png); +} + +.tab-background-end[selected=true]:-moz-locale-dir(ltr)::after, +.tab-background-start[selected=true]:-moz-locale-dir(rtl)::after { + background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png); +} + +.tab-background-middle[selected=true] { + background-clip: padding-box, padding-box, content-box; + background-color: @fgTabBackgroundColor@; + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), + @fgTabTexture@, + none; + background-repeat: repeat-x; + background-size: var(--tab-stroke-background-size), auto 100%; + /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the + background-color doesn't extend above the top border. */ + padding-top: 2px; +} + +/* Selected tab lightweight theme styles. + See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ +.tab-background-middle[selected=true]:-moz-lwtheme { + background-color: transparent; + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), + @fgTabTextureLWT@;/*, + lwtHeader;*/ + /* Don't stretch the LWT header images */ + background-size: var(--tab-stroke-background-size), auto 100%, auto auto; +} + +/* These LWT styles are normally overridden by browser-lightweightTheme.css */ +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { + background-image: @fgTabTextureLWT@; +} + +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before, +.tab-background-middle[selected=true]:-moz-lwtheme { + background-color: transparent; +} + +/* End selected tab */ + +/* new tab button border and gradient on hover */ +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), +.tabs-newtab-button:hover { + background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png), + url(chrome://browser/skin/tabbrowser/tab-background-middle.png), + url(chrome://browser/skin/tabbrowser/tab-background-end.png); + background-position: left bottom, @tabCurveWidth@ bottom, right bottom; + background-repeat: no-repeat; + background-size: @tabCurveWidth@ 100%, calc(100% - (2 * @tabCurveWidth@)) 100%, @tabCurveWidth@ 100%; +} + +/* Tab pointer-events */ +.tabbrowser-tab { + pointer-events: none; +} + +.tab-background-middle, +.tabs-newtab-button, +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-overlay[blocked]:not([crashed]), +.tab-icon-sound, +.tab-close-button { + pointer-events: auto; +} + +/* Pinned tabs */ + +/* Pinned tab separators need position: absolute when positioned (during overflow). */ +#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before { + height: 100%; + position: absolute; +} + +.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + background-image: radial-gradient(farthest-corner at center bottom, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 20%, rgba(127,179,255,0.25) 40%, transparent 70%); + background-position: center bottom var(--tab-toolbar-navbar-overlap); + background-repeat: no-repeat; + background-size: 85% 100%; +} + +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) { + background-position: left bottom var(--tab-toolbar-navbar-overlap); + background-size: 34px 100%; +} + +.tab-label[attention]:not([selected="true"]) { + font-weight: bold; +} + +/* Tab separators */ + +.tabbrowser-tab::after, +.tabbrowser-tab::before { + margin-inline-start: -1px; + /* Vertical margin doesn't work here for positioned pinned tabs, see + bug 1198236 and bug 1300410. We're using linear-gradient instead + to cut off the border at the top and at the bottom. */ + border-left: 1px solid; + border-image: linear-gradient(transparent 6px, + currentColor 6px, + currentColor calc(100% - 5px), + transparent calc(100% - 5px)); + border-image-slice: 1; + /* The 1px border and negative margin may amount to a different number of + device pixels (bug 477157), so we also set a width to match the margin. */ + width: 1px; + box-sizing: border-box; + opacity: 0.2; +} + +#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before, +#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after { + opacity: 0.4; +} + +/* Also show separators beside the selected tab when dragging it. */ +#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after, +.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before, +#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { + content: ""; + display: -moz-box; +} + +/* New tab button */ + +.tabs-newtab-button { + width: calc(36px + @tabCurveWidth@); +} + +@media (min-resolution: 1.1dppx) { + /* image preloading hack from like lowdpi styles */ + #tabbrowser-tabs::before { + background-image: + url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png), + url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png), + url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png); + } + + .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), + .tabs-newtab-button:hover { + background-image: url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png), + url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png), + url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png); + } + + .tab-background-middle[selected=true] { + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png), + @fgTabTexture@, + none; + } + + .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after, + .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after { + background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start@2x.png); + } + + .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after, + .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after { + background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end@2x.png); + } + + .tab-throbber[busy] { + list-style-image: url("chrome://browser/skin/tabbrowser/connecting@2x.png"); + } + + .tab-icon-image { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png"); + } + + .tab-throbber[progress] { + list-style-image: url("chrome://global/skin/icons/loading@2x.png"); + } +} + +/* All tabs menupopup */ + +.alltabs-item[tabIsVisible] { + /* box-shadow instead of background-color to work around native styling */ + box-shadow: inset -5px 0 ThreeDShadow; +} + +.alltabs-endimage[soundplaying], +.alltabs-endimage[muted], +.alltabs-endimage[blocked] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; +} + +.alltabs-endimage[muted] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted); +} + +.alltabs-endimage[blocked] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked); +} diff --git a/browser/themes/shared/theme-switcher-icon.png b/browser/themes/shared/theme-switcher-icon.png Binary files differnew file mode 100644 index 000000000..891e7afb1 --- /dev/null +++ b/browser/themes/shared/theme-switcher-icon.png diff --git a/browser/themes/shared/theme-switcher-icon@2x.png b/browser/themes/shared/theme-switcher-icon@2x.png Binary files differnew file mode 100644 index 000000000..286adfeaa --- /dev/null +++ b/browser/themes/shared/theme-switcher-icon@2x.png diff --git a/browser/themes/shared/toolbarbutton-dropdown-arrow.png b/browser/themes/shared/toolbarbutton-dropdown-arrow.png Binary files differnew file mode 100644 index 000000000..08d9da1d1 --- /dev/null +++ b/browser/themes/shared/toolbarbutton-dropdown-arrow.png diff --git a/browser/themes/shared/toolbarbuttons.inc.css b/browser/themes/shared/toolbarbuttons.inc.css new file mode 100644 index 000000000..b3b3ffcf8 --- /dev/null +++ b/browser/themes/shared/toolbarbuttons.inc.css @@ -0,0 +1,347 @@ +:-moz-any(@primaryToolbarButtons@), +#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + list-style-image: url("chrome://browser/skin/Toolbar.png"); +} + +toolbar[brighttext] :-moz-any(@primaryToolbarButtons@), +toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + list-style-image: url(chrome://browser/skin/Toolbar-inverted.png); +} + +#back-button { + -moz-image-region: rect(0, 36px, 18px, 18px); +} + +#forward-button { + -moz-image-region: rect(0, 72px, 18px, 54px); +} + +#home-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 126px, 18px, 108px); +} + +#bookmarks-menu-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 144px, 18px, 126px); +} + +#bookmarks-menu-button[cui-areatype="toolbar"][starred] { + -moz-image-region: rect(0, 162px, 18px, 144px); +} + +#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + -moz-image-region: rect(0, 630px, 18px, 612px); +} + +#history-panelmenu[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 180px, 18px, 162px); +} + +#downloads-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 198px, 18px, 180px); +} + +#add-ons-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 216px, 18px, 198px); +} + +#open-file-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 234px, 18px, 216px); +} + +#save-page-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 252px, 18px, 234px); +} + +#sync-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 792px, 18px, 774px); +} + +#containers-panelmenu[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 810px, 18px, 792px); +} + +#feed-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 288px, 18px, 270px); +} + +#social-share-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0px, 306px, 18px, 288px); +} + +#characterencoding-button[cui-areatype="toolbar"]{ + -moz-image-region: rect(0, 324px, 18px, 306px); +} + +#new-window-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 342px, 18px, 324px); +} + +#e10s-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 342px, 18px, 324px); +} + +#e10s-button > .toolbarbutton-icon { + transform: scaleY(-1); +} + +#new-tab-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 360px, 18px, 342px); +} + +#privatebrowsing-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 378px, 18px, 360px); +} + +#find-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 396px, 18px, 378px); +} + +#print-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 414px, 18px, 396px); +} + +%ifdef XP_MACOSX +#restore-button, +%endif +#fullscreen-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 432px, 18px, 414px); +} + +#developer-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 450px, 18px, 432px); +} + +#preferences-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 468px, 18px, 450px); +} + +#PanelUI-menu-button { + -moz-image-region: rect(0, 486px, 18px, 468px); +} + +#edit-controls:not(@inAnyPanel@) > #cut-button { + -moz-image-region: rect(0, 504px, 18px, 486px); +} + +#edit-controls:not(@inAnyPanel@) > #copy-button { + -moz-image-region: rect(0, 522px, 18px, 504px); +} + +#edit-controls:not(@inAnyPanel@) > #paste-button { + -moz-image-region: rect(0, 540px, 18px, 522px); +} + +#zoom-controls:not(@inAnyPanel@) > #zoom-out-button { + -moz-image-region: rect(0, 558px, 18px, 540px); +} + +#zoom-controls:not(@inAnyPanel@) > #zoom-in-button { + -moz-image-region: rect(0, 576px, 18px, 558px); +} + +#nav-bar-overflow-button { + -moz-image-region: rect(0, 612px, 18px, 594px); +} + +#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); +} + +#email-link-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 666px, 18px, 648px); +} + +#sidebar-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 684px, 18px, 666px); +} + +#panic-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 702px, 18px, 684px); +} + +#panic-button[cui-areatype="toolbar"][open] { +%ifdef XP_MACOSX + -moz-image-region: rect(36px, 702px, 54px, 684px); +%else + -moz-image-region: rect(18px, 702px, 36px, 684px); +%endif +} + +#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); +} + +#webide-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 738px, 18px, 720px); +} + +@media (min-resolution: 1.1dppx) { + :-moz-any(@primaryToolbarButtons@), + #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + list-style-image: url("chrome://browser/skin/Toolbar@2x.png"); + } + + toolbar[brighttext] :-moz-any(@primaryToolbarButtons@), + toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + list-style-image: url("chrome://browser/skin/Toolbar-inverted@2x.png"); + } + + #back-button { + -moz-image-region: rect(0, 72px, 36px, 36px); + } + + #forward-button { + -moz-image-region: rect(0, 144px, 36px, 108px); + } + + #home-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 252px, 36px, 216px); + } + + #bookmarks-menu-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 288px, 36px, 252px); + } + + #bookmarks-menu-button[cui-areatype="toolbar"][starred] { + -moz-image-region: rect(0, 324px, 36px, 288px); + } + + #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + -moz-image-region: rect(0px, 1260px, 36px, 1224px); + } + + #history-panelmenu[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 360px, 36px, 324px); + } + + #downloads-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 396px, 36px, 360px); + } + + #add-ons-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 432px, 36px, 396px); + } + + #open-file-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 468px, 36px, 432px); + } + + #save-page-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 504px, 36px, 468px); + } + + #sync-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1584px, 36px, 1548px); + } + + #containers-panelmenu[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1620px, 36px, 1584px); + } + + #feed-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 576px, 36px, 540px); + } + + #social-share-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 612px, 36px, 576px); + } + + #characterencoding-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 648px, 36px, 612px); + } + + #new-window-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 684px, 36px, 648px); + } + + #e10s-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 684px, 36px, 648px); + } + + #e10s-button > .toolbarbutton-icon { + transform: scaleY(-1); + } + + #new-tab-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 720px, 36px, 684px); + } + + #privatebrowsing-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 756px, 36px, 720px); + } + + #find-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 792px, 36px, 756px); + } + + #print-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 828px, 36px, 792px); + } + +%ifdef XP_MACOSX + #restore-button, +%endif + #fullscreen-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 864px, 36px, 828px); + } + + #developer-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 900px, 36px, 864px); + } + + #preferences-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 936px, 36px, 900px); + } + + #PanelUI-menu-button { + -moz-image-region: rect(0, 972px, 36px, 936px); + } + + #edit-controls[cui-areatype="toolbar"] > #cut-button { + -moz-image-region: rect(0, 1008px, 36px, 972px); + } + + #edit-controls[cui-areatype="toolbar"] > #copy-button { + -moz-image-region: rect(0, 1044px, 36px, 1008px); + } + + #edit-controls[cui-areatype="toolbar"] > #paste-button { + -moz-image-region: rect(0, 1080px, 36px, 1044px); + } + + #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button { + -moz-image-region: rect(0, 1116px, 36px, 1080px); + } + + #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button { + -moz-image-region: rect(0, 1152px, 36px, 1116px); + } + + #nav-bar-overflow-button { + -moz-image-region: rect(0, 1224px, 36px, 1188px); + } + + #email-link-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1332px, 36px, 1296px); + } + + #sidebar-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1368px, 36px, 1332px); + } + + #panic-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1404px, 36px, 1368px); + } + + #panic-button[cui-areatype="toolbar"][open] { +%ifdef XP_MACOSX + -moz-image-region: rect(72px, 1404px, 108px, 1368px); +%else + -moz-image-region: rect(36px, 1404px, 72px, 1368px); +%endif + } + + #webide-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 1476px, 36px, 1440px); + } +} diff --git a/browser/themes/shared/translation/infobar.inc.css b/browser/themes/shared/translation/infobar.inc.css new file mode 100644 index 000000000..50d1acc01 --- /dev/null +++ b/browser/themes/shared/translation/infobar.inc.css @@ -0,0 +1,95 @@ +%if 0 +/* 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/. */ +%endif +notification[value="translation"] .messageImage { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +@media (min-resolution: 1.25dppx) { + notification[value="translation"] .messageImage { + list-style-image: url(chrome://browser/skin/translation-16@2x.png); + -moz-image-region: rect(0, 64px, 32px, 32px); + } +} + +notification[value="translation"][state="translating"] .messageImage { + list-style-image: url(chrome://browser/skin/translating-16.png); + -moz-image-region: auto; +} + +@media (min-resolution: 1.25dppx) { + notification[value="translation"][state="translating"] .messageImage { + list-style-image: url(chrome://browser/skin/translating-16@2x.png); + } +} + +notification[value="translation"] hbox[anonid="details"] { + overflow: hidden; +} + +notification[value="translation"] button, +notification[value="translation"] menulist { + -moz-appearance: none; + border-width: 1px; + -moz-border-top-colors: none; + -moz-border-right-colors: none; + -moz-border-bottom-colors: none; + -moz-border-left-colors: none; + border-radius: 2px; + min-width: 0; + box-shadow: 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, 0.5) inset; +} + +notification[value="translation"] menulist > .menulist-dropmarker { + -moz-appearance: toolbarbutton-dropdown; + border: none; + background-color: transparent; + margin: auto; + padding: 5px 0; +} + +.translation-menupopup arrowscrollbox { + padding-bottom: 0; +} + +.translation-attribution { + cursor: pointer; + -moz-box-align: end; + font-size: small; +} + +.translation-attribution > label { + margin-bottom: 0; +} + +.translation-attribution > image { + width: 70px; +} + +.translation-welcome-panel { + width: 305px; +} + +.translation-welcome-logo { + height: 32px; + width: 32px; + list-style-image: url(chrome://browser/skin/translation-16@2x.png); + -moz-image-region: rect(0, 64px, 32px, 32px); +} + +.translation-welcome-content { + margin-inline-start: 16px; +} + +.translation-welcome-headline { + font-size: larger; + font-weight: bold; +} + +.translation-welcome-body { + padding: 1em 0; + margin: 0 0; +} diff --git a/browser/themes/shared/translation/translating-16.png b/browser/themes/shared/translation/translating-16.png Binary files differnew file mode 100644 index 000000000..71ca37c22 --- /dev/null +++ b/browser/themes/shared/translation/translating-16.png diff --git a/browser/themes/shared/translation/translating-16@2x.png b/browser/themes/shared/translation/translating-16@2x.png Binary files differnew file mode 100644 index 000000000..ab6184047 --- /dev/null +++ b/browser/themes/shared/translation/translating-16@2x.png diff --git a/browser/themes/shared/translation/translation-16.png b/browser/themes/shared/translation/translation-16.png Binary files differnew file mode 100644 index 000000000..4b42dedcf --- /dev/null +++ b/browser/themes/shared/translation/translation-16.png diff --git a/browser/themes/shared/translation/translation-16@2x.png b/browser/themes/shared/translation/translation-16@2x.png Binary files differnew file mode 100644 index 000000000..2105a3e4a --- /dev/null +++ b/browser/themes/shared/translation/translation-16@2x.png diff --git a/browser/themes/shared/undoCloseTab.png b/browser/themes/shared/undoCloseTab.png Binary files differnew file mode 100644 index 000000000..1d629c82c --- /dev/null +++ b/browser/themes/shared/undoCloseTab.png diff --git a/browser/themes/shared/undoCloseTab@2x.png b/browser/themes/shared/undoCloseTab@2x.png Binary files differnew file mode 100644 index 000000000..4854c5681 --- /dev/null +++ b/browser/themes/shared/undoCloseTab@2x.png diff --git a/browser/themes/shared/update-badge-failed.svg b/browser/themes/shared/update-badge-failed.svg new file mode 100644 index 000000000..e31e6ec6b --- /dev/null +++ b/browser/themes/shared/update-badge-failed.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="10px"> + <path d="M5,6C4.2,6,3.5,6.7,3.5,7.5S4.2,9,5,9s1.5-0.7,1.5-1.5S5.8,6,5,6z M5,5L5,5c0.6,0,1-0.4,1-1l0.2-2.8 C6.2,0.5,5.7,0,5,0S3.8,0.5,3.8,1.2L4,4C4,4.6,4.4,5,5,5z" fill="#fff"/> +</svg> diff --git a/browser/themes/shared/update-badge.svg b/browser/themes/shared/update-badge.svg new file mode 100644 index 000000000..3b692e526 --- /dev/null +++ b/browser/themes/shared/update-badge.svg @@ -0,0 +1,6 @@ +<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="10px">
+ <polygon points="4,9 4,5 2,5 5,1 8,5 6,5 6,9" fill="#fff"/>
+</svg>
diff --git a/browser/themes/shared/urlbar-star.svg b/browser/themes/shared/urlbar-star.svg new file mode 100644 index 000000000..3080aca1a --- /dev/null +++ b/browser/themes/shared/urlbar-star.svg @@ -0,0 +1,20 @@ +<?xml version="1.0"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+ <style>
+ path:not(:target) {
+ display: none;
+ }
+ path {
+ fill: #b2b2b2;
+ }
+ path[id$="-inverted"] {
+ fill: #fff;
+ }
+ </style>
+
+ <path id="star" d="M8.7,0.5l2,4.3l4.6,0.7c0.6,0.1,0.9,0.9,0.4,1.4l-3.3,3.4l0.8,4.8c0.1,0.7-0.6,1.2-1.1,0.9L8,13.7l-4.1,2.3 c-0.6,0.3-1.2-0.2-1.1-0.9l0.8-4.8L0.2,6.9C-0.2,6.4,0,5.6,0.7,5.5l4.6-0.7l2-4.3C7.6-0.1,8.4-0.1,8.7,0.5z"/>
+ <path id="star-inverted" d="M8.7,0.5l2,4.3l4.6,0.7c0.6,0.1,0.9,0.9,0.4,1.4l-3.3,3.4l0.8,4.8c0.1,0.7-0.6,1.2-1.1,0.9L8,13.7l-4.1,2.3 c-0.6,0.3-1.2-0.2-1.1-0.9l0.8-4.8L0.2,6.9C-0.2,6.4,0,5.6,0.7,5.5l4.6-0.7l2-4.3C7.6-0.1,8.4-0.1,8.7,0.5z"/>
+</svg>
diff --git a/browser/themes/shared/urlbar-tab.svg b/browser/themes/shared/urlbar-tab.svg new file mode 100644 index 000000000..87a2c7f12 --- /dev/null +++ b/browser/themes/shared/urlbar-tab.svg @@ -0,0 +1,21 @@ +<?xml version="1.0"?> +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> + <style> + path:not(:target) { + display: none; + } + path { + fill: #b2b2b2; + } + path[id$="-inverted"] { + fill: #fff; + } + </style> + + <path id="tab" d="M14,9.5V6c0-1.7-1.3-3-3-3H5C3.3,3,2,4.3,2,6v3.5C2,10.3,1.3,11,0.5,11h0C0.2,11,0,11.2,0,11.5v1 C0,12.8,0.2,13,0.5,13h15c0.3,0,0.5-0.2,0.5-0.5v-1c0-0.3-0.2-0.5-0.5-0.5h0C14.7,11,14,10.3,14,9.5z"/> + <path id="tab-inverted" d="M14,9.5V6c0-1.7-1.3-3-3-3H5C3.3,3,2,4.3,2,6v3.5C2,10.3,1.3,11,0.5,11h0C0.2,11,0,11.2,0,11.5v1 C0,12.8,0.2,13,0.5,13h15c0.3,0,0.5-0.2,0.5-0.5v-1c0-0.3-0.2-0.5-0.5-0.5h0C14.7,11,14,10.3,14,9.5z"/> + +</svg> diff --git a/browser/themes/shared/urlbarSearchSuggestionsNotification.inc.css b/browser/themes/shared/urlbarSearchSuggestionsNotification.inc.css new file mode 100644 index 000000000..a34c2bf11 --- /dev/null +++ b/browser/themes/shared/urlbarSearchSuggestionsNotification.inc.css @@ -0,0 +1,54 @@ +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { + border-bottom: 1px solid var(--panel-separator-color); + background-color: hsla(210, 4%, 10%, 0.07); + padding: 6px 0; + padding-inline-start: 44px; + padding-inline-end: 6px; + background-image: url("chrome://browser/skin/info.svg"); + background-clip: padding-box; + background-position: 20px center; + background-repeat: no-repeat; + background-size: 16px 16px; +} + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { + background-position: right 20px center; +} + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { + margin: 0; + padding: 0; +} + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { + margin-inline-start: 0; +} + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { + -moz-appearance: none; + min-width: 80px; + border-radius: 3px; + padding: 4px 16px; + margin: 0; + margin-inline-start: 10px; +} + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { + color: hsl(210, 0%, 38%); + background-color: hsl(210, 0%, 88%); + border: 1px solid hsl(210, 0%, 82%); +} + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { + background-color: hsl(210, 0%, 84%); +} + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { + color: white; + background-color: hsl(93, 82%, 44%); + border: 1px solid hsl(93, 82%, 44%); +} + +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { + background-color: hsl(93, 82%, 40%); +} diff --git a/browser/themes/shared/warning-white.svg b/browser/themes/shared/warning-white.svg new file mode 100644 index 000000000..942c23cf6 --- /dev/null +++ b/browser/themes/shared/warning-white.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"> + <path fill="#fff" stroke="#000" stroke-opacity="0.3" d="M15.4,12.9 9.46,1.41 C9.12,0.756 8.59,0.381 8,0.381 7.41,0.381 6.88,0.756 6.54,1.41 L0.642,12.9 c-0.331,0.6 -0.348,1.3 -0.05,1.9 0.299,0.5 0.854,0.8 1.534,0.8 H13.9 c0.6,0 1.2,-0.3 1.5,-0.8 0.3,-0.6 0.3,-1.3 0,-1.9z M8.83,5.07 8.65,10.5 H7.34 L7.15,5.07 H8.83z M8,13.7 c-0.55,0 -0.99,-0.5 -0.99,-1 0,-0.6 0.44,-1 0.99,-1 0.56,0 0.99,0.4 0.99,1 0,0.5 -0.43,1 -0.99,1z"/> +</svg> diff --git a/browser/themes/shared/warning.svg b/browser/themes/shared/warning.svg new file mode 100644 index 000000000..7befd73d9 --- /dev/null +++ b/browser/themes/shared/warning.svg @@ -0,0 +1,7 @@ +<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="#ffbf00" d="M14.8,12.5L9.3,1.9C9,1.3,8.5,1,8,1C7.5,1,7,1.3,6.7,1.9L1.2,12.5c-0.3,0.6-0.3,1.2,0,1.7C1.5,14.7,2,15,2.6,15h10.8 c0.6,0,1.1-0.3,1.4-0.8C15.1,13.7,15.1,13.1,14.8,12.5z"/>
+ <path fill="#fff" d="M8,11c-0.8,0-1.5,0.7-1.5,1.5C6.5,13.3,7.2,14,8,14 c0.8,0,1.5-0.7,1.5-1.5C9.5,11.7,8.8,11,8,11z M8,10L8,10C8.6,10,9,9.6,9,9l0.2-4.2c0-0.7-0.5-1.2-1.2-1.2S6.8,4.1,6.8,4.8L7,9 C7,9.6,7.4,10,8,10z"/>
+</svg>
diff --git a/browser/themes/shared/webrtc/camera-white-16.png b/browser/themes/shared/webrtc/camera-white-16.png Binary files differnew file mode 100644 index 000000000..e1e360bd8 --- /dev/null +++ b/browser/themes/shared/webrtc/camera-white-16.png diff --git a/browser/themes/shared/webrtc/camera-white-16@2x.png b/browser/themes/shared/webrtc/camera-white-16@2x.png Binary files differnew file mode 100644 index 000000000..ddbbf5083 --- /dev/null +++ b/browser/themes/shared/webrtc/camera-white-16@2x.png diff --git a/browser/themes/shared/webrtc/microphone-white-16.png b/browser/themes/shared/webrtc/microphone-white-16.png Binary files differnew file mode 100644 index 000000000..0091529ba --- /dev/null +++ b/browser/themes/shared/webrtc/microphone-white-16.png diff --git a/browser/themes/shared/webrtc/microphone-white-16@2x.png b/browser/themes/shared/webrtc/microphone-white-16@2x.png Binary files differnew file mode 100644 index 000000000..5bf1f5c62 --- /dev/null +++ b/browser/themes/shared/webrtc/microphone-white-16@2x.png diff --git a/browser/themes/shared/webrtc/screen-white-16.png b/browser/themes/shared/webrtc/screen-white-16.png Binary files differnew file mode 100644 index 000000000..045bfd35a --- /dev/null +++ b/browser/themes/shared/webrtc/screen-white-16.png diff --git a/browser/themes/shared/webrtc/screen-white-16@2x.png b/browser/themes/shared/webrtc/screen-white-16@2x.png Binary files differnew file mode 100644 index 000000000..1e5fca5d6 --- /dev/null +++ b/browser/themes/shared/webrtc/screen-white-16@2x.png |
