diff options
Diffstat (limited to 'browser/themes/shared/preferences')
22 files changed, 2402 insertions, 0 deletions
diff --git a/browser/themes/shared/preferences/android-menu.svg b/browser/themes/shared/preferences/android-menu.svg new file mode 100644 index 0000000000..1084f264a8 --- /dev/null +++ b/browser/themes/shared/preferences/android-menu.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" viewBox="0 0 24 24"> + <path fill="context-fill" d="M14 6a2 2 0 11-4.001-.001A2 2 0 0114 6zm0 6a2 2 0 11-4.001-.001A2 2 0 0114 12zm-2 8a2 2 0 10-.001-4.001A2 2 0 0012 20z"/> +</svg> diff --git a/browser/themes/shared/preferences/category-general.svg b/browser/themes/shared/preferences/category-general.svg new file mode 100644 index 0000000000..952164e863 --- /dev/null +++ b/browser/themes/shared/preferences/category-general.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" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="m10.791 20-1.574 0a2.009 2.009 0 0 1-1.922-1.448l-.51-1.777a7.641 7.641 0 0 1-1.037-.604l-1.801.448a2.01 2.01 0 0 1-2.215-.94l-.787-1.364a2.012 2.012 0 0 1 .281-2.377l1.299-1.37A6.652 6.652 0 0 1 2.528 9.4L1.241 8.067a2.008 2.008 0 0 1-.293-2.389l.787-1.363a2.009 2.009 0 0 1 2.199-.945l1.84.442c.326-.225.664-.42 1.01-.586l.51-1.777A2.011 2.011 0 0 1 9.217 0l1.574 0c.879 0 1.668.589 1.918 1.432l.535 1.805c.334.162.663.354.981.574l1.84-.442a2.02 2.02 0 0 1 2.199.945l.787 1.363c.444.768.323 1.75-.293 2.389L17.472 9.4a6.606 6.606 0 0 1 .003 1.168l1.299 1.37a2.01 2.01 0 0 1 .281 2.376l-.787 1.363a2.005 2.005 0 0 1-2.215.94l-1.801-.448a7.558 7.558 0 0 1-1.009.593l-.535 1.805A2.01 2.01 0 0 1 10.791 20zm-5.066-5.37.637.132c.423.323.872.585 1.336.778l.432.485.606 2.112a.503.503 0 0 0 .481.362l1.574 0c.22 0 .417-.147.479-.358l.632-2.134.428-.478c.45-.19.89-.448 1.307-.768l.637-.132 2.141.533a.504.504 0 0 0 .554-.236l.787-1.363a.503.503 0 0 0-.07-.594l-1.537-1.621-.201-.608c.031-.241.052-.488.052-.74a5.94 5.94 0 0 0-.056-.771l.204-.617 1.531-1.587a.5.5 0 0 0 .073-.596l-.787-1.364a.503.503 0 0 0-.55-.236l-2.175.522-.627-.131a6.042 6.042 0 0 0-1.283-.75l-.427-.478-.632-2.133a.503.503 0 0 0-.48-.359l-1.574 0a.503.503 0 0 0-.481.362L8.13 3.974l-.433.485a5.972 5.972 0 0 0-1.31.759l-.628.133-2.175-.522a.504.504 0 0 0-.55.236l-.787 1.363a.503.503 0 0 0 .073.597l1.531 1.587.204.617A6.123 6.123 0 0 0 4 10c0 .252.021.499.051.742l-.2.608-1.537 1.621a.503.503 0 0 0-.07.594l.787 1.363a.503.503 0 0 0 .554.235l2.14-.533z"/> + <path d="M10 13.5c-1.93 0-3.5-1.57-3.5-3.5S8.07 6.5 10 6.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5zM10 8c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"/> +</svg> diff --git a/browser/themes/shared/preferences/category-privacy-security.svg b/browser/themes/shared/preferences/category-privacy-security.svg new file mode 100644 index 0000000000..deecf8702f --- /dev/null +++ b/browser/themes/shared/preferences/category-privacy-security.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" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M15.5 9 15 9l0-4A5 5 0 0 0 5 5l0 4-.5 0A2.5 2.5 0 0 0 2 11.5l0 6A2.5 2.5 0 0 0 4.5 20l11 0a2.5 2.5 0 0 0 2.5-2.5l0-6A2.5 2.5 0 0 0 15.5 9zm-9-4c0-1.93 1.57-3.5 3.5-3.5 1.93 0 3.5 1.57 3.5 3.5l0 4-7 0 0-4zm10 12.7-.8.8-11.4 0-.8-.8 0-6.4.8-.8 11.4 0 .8.8 0 6.4z"/> +</svg> diff --git a/browser/themes/shared/preferences/category-search.svg b/browser/themes/shared/preferences/category-search.svg new file mode 100644 index 0000000000..942846b673 --- /dev/null +++ b/browser/themes/shared/preferences/category-search.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" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M13.685 12.074A6.957 6.957 0 0 0 15 8c0-3.859-3.14-7-7-7S1 4.141 1 8s3.14 7 7 7a6.953 6.953 0 0 0 4.087-1.324l.524-.006 5.11 5.11a.748.748 0 0 0 1.06 0 .75.75 0 0 0 0-1.061l-5.106-5.107.01-.538zM8 13.5c-3.033 0-5.5-2.468-5.5-5.5S4.967 2.5 8 2.5s5.5 2.468 5.5 5.5-2.467 5.5-5.5 5.5z"/> +</svg> diff --git a/browser/themes/shared/preferences/category-sync.svg b/browser/themes/shared/preferences/category-sync.svg new file mode 100644 index 0000000000..0af29ec1e1 --- /dev/null +++ b/browser/themes/shared/preferences/category-sync.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" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="m10 2.675 0-2.174a.5.5 0 0 0-.852-.355L6.295 2.97l0 .926 2.853 2.825A.5.5 0 0 0 10 6.366l0-2.191a5.823 5.823 0 0 1 4.434 9.602.75.75 0 0 0 1.141.974 7.327 7.327 0 0 0 1.749-4.75c.001-4.04-3.285-7.326-7.324-7.326z"/> + <path d="m10 13.634 0 2.191A5.831 5.831 0 0 1 4.175 10c0-1.372.486-2.704 1.369-3.751a.75.75 0 0 0-1.147-.967A7.328 7.328 0 0 0 2.675 10c0 4.039 3.286 7.325 7.325 7.325l0 2.174a.5.5 0 0 0 .852.355l2.853-2.825 0-.926-2.853-2.824a.5.5 0 0 0-.852.355z"/> +</svg> diff --git a/browser/themes/shared/preferences/containers-dialog.css b/browser/themes/shared/preferences/containers-dialog.css new file mode 100644 index 0000000000..870c4141eb --- /dev/null +++ b/browser/themes/shared/preferences/containers-dialog.css @@ -0,0 +1,50 @@ +/* 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/content/usercontext/usercontext.css"); + +#name { + -moz-box-flex: 1; +} + +.radio-buttons { + -moz-box-orient: horizontal; + margin-inline-start: 0.35rem; +} + +.radio-buttons > radio { + user-select: none; + outline: 2px solid transparent; + outline-offset: 4px; + min-block-size: 24px; + min-inline-size: 24px; + border-radius: 50%; + padding: 2px; + margin: 9px; +} + +.icon-buttons > radio > .userContext-icon { + fill: var(--in-content-text-color); +} + +.radio-buttons > radio { + padding-inline-start: 2px; +} + +radio > .userContext-icon { + inline-size: 22px; + block-size: 22px; +} + +.radio-buttons > radio[selected=true] { + outline-color: var(--in-content-text-color); +} + +.radio-buttons > radio[focused=true] { + outline-color: var(--in-content-accent-color); +} + +.radio-buttons > radio:hover:active { + outline-color: var(--in-content-accent-color-active); +} diff --git a/browser/themes/shared/preferences/containers.css b/browser/themes/shared/preferences/containers.css new file mode 100644 index 0000000000..43081ce8a4 --- /dev/null +++ b/browser/themes/shared/preferences/containers.css @@ -0,0 +1,54 @@ +/* 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/content/usercontext/usercontext.css"); + +#category-containers { + display: none; +} + +.container-header-links { + margin-block-end: 15px; +} + +[data-identity-icon] { + margin: 0; + margin-inline-end: 16px; +} + +#containersView { + border: 0; + background: transparent; + margin-block-end: 8px; +} + +#containersView richlistitem { + padding-block: 4px; + border-block-end: 1px solid var(--in-content-border-color); +} + +#containersView richlistitem > .container-buttons { + margin-inline-end: 4px; +} + +/* Crop the label at the end using CSS. This isn't using XUL crop + * and a value attribute because those labels cannot be highlighted + * by the prefs' find-in-page feature. + */ +.userContext-label-inprefs { + display: -moz-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.userContext-icon-inprefs { + margin-inline: 4px 10px; + width: 24px; + height: 24px; +} + +#containersView richlistitem:last-of-type { + border-block-end: 0; +} diff --git a/browser/themes/shared/preferences/dialog.css b/browser/themes/shared/preferences/dialog.css new file mode 100644 index 0000000000..dcd7783cca --- /dev/null +++ b/browser/themes/shared/preferences/dialog.css @@ -0,0 +1,42 @@ +/* - 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/. */ + +window, +dialog { + appearance: none; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); + margin: 0; + padding: 0; +} + +/* Add some padding around the contents of the dialog */ +dialog { + padding: 6px; +} + +.contentPane, +dialog::part(content-box) { + -moz-box-flex: 1; + /* This allows the focus ring to display fully when scrolling is enabled. */ + padding: 4px; +} + +.contentPane.doScroll, +dialog.doScroll::part(content-box) { + overflow-y: auto; + contain: size; +} + +tree:not(#rejectsTree) { + height: 15em; +} + +.actionButtons { + margin: 3px 0 0; +} + +menulist label { + font-weight: unset; +} diff --git a/browser/themes/shared/preferences/face-sad.svg b/browser/themes/shared/preferences/face-sad.svg new file mode 100644 index 0000000000..7e50710648 --- /dev/null +++ b/browser/themes/shared/preferences/face-sad.svg @@ -0,0 +1,9 @@ +<!-- 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 20 20"> + <path fill="#00D3E7" d="M9.94.8a9.01 9.01 0 0 0-9 9.42 1.07 1.07 0 0 0 .13 2.12h.21A9.01 9.01 0 1 0 9.94.8"/> + <path fill="#00A1C1" d="M18.93 10.21v-.4c0-2.4-.93-4.6-2.47-6.2A9.26 9.26 0 0 1 3.72 16.34a9 9 0 0 0 14.85-4l.21-.01c.6 0 1.07-.48 1.07-1.07.01-.54-.4-.99-.92-1.06"/> + <path fill="#323B59" d="M5.47 6.55a.99.99 0 0 0-.99.99v2.22a.99.99 0 1 0 1.98 0V7.54a.99.99 0 0 0-1-.99m8.98 0a.99.99 0 0 0-1 .99v2.22a.99.99 0 1 0 1.98 0V7.54a.99.99 0 0 0-.98-.99m-4.5 5.47a2.27 2.27 0 0 0-2.34 2.13c-.02.23.09.45.27.58.19.14.43.17.64.09 0 0 .47-.17 1.34-.17.91 0 1.55.19 1.56.19a.69.69 0 0 0 .61-.11.67.67 0 0 0 .26-.58 2.27 2.27 0 0 0-2.34-2.13"/> + <path fill="#00A1C1" d="M4.59 7.02c-.36 0-.72-.11-1.03-.32a.318.318 0 1 1 .35-.53 1.25 1.25 0 0 0 1.8-.47.313.313 0 1 1 .56.28 1.88 1.88 0 0 1-1.68 1.04m10.47 0a1.88 1.88 0 0 1-1.68-1.04.313.313 0 1 1 .56-.28 1.24 1.24 0 0 0 1.8.48.32.32 0 0 1 .35.53c-.3.2-.66.3-1.03.3"/> +</svg> diff --git a/browser/themes/shared/preferences/face-smile.svg b/browser/themes/shared/preferences/face-smile.svg new file mode 100644 index 0000000000..6ab7f26131 --- /dev/null +++ b/browser/themes/shared/preferences/face-smile.svg @@ -0,0 +1,14 @@ +<!-- 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 20 20"> + <path fill="#FFBF49" d="M9.95.8A9.03 9.03 0 0 0 .92 9.83l.01.4a1.07 1.07 0 0 0 .14 2.13h.21A9.04 9.04 0 1 0 9.95.8"/> + <path fill="#323B59" d="M14.44 6.7c.55 0 1 .44 1 .99V9.9c0 .55-.45.12-1 .12s-.99.42-.99-.12V7.69c0-.55.45-1 1-1"/> + <path fill="#FFA500" d="M13.54 10.46a.31.31 0 0 1-.14-.59 2.36 2.36 0 0 1 2.08-.03.3.3 0 0 1 .14.41.3.3 0 0 1-.41.15 1.75 1.75 0 0 0-1.53.02.28.28 0 0 1-.14.04"/> + <path fill="#323B59" d="M5.46 6.7c.55 0 .99.44.99.99V9.9c0 .55-.44.12-.99.12s-.99.42-.99-.12V7.69c0-.55.45-1 .99-1"/> + <path fill="#FFA500" d="M4.56 10.46a.31.31 0 0 1-.14-.59 2.36 2.36 0 0 1 2.07-.03.3.3 0 0 1 .15.41.3.3 0 0 1-.41.15 1.75 1.75 0 0 0-1.53.02.3.3 0 0 1-.14.04"/> + <path fill="#323B59" d="M16.06 12.42l-.62-.05c-.06.02-.21.06-.45.1-.3.04-.73.15-1.25.2-.51.04-1.12.14-1.76.17-.65.04-1.33.05-2.03.06-.68-.01-1.37-.02-2.02-.07-.65-.03-1.25-.12-1.76-.17-.52-.04-.95-.15-1.25-.2l-.45-.09a30.35 30.35 0 0 0-.7.07.17.17 0 0 0-.04.23l.1.17a7.67 7.67 0 0 0 1.54 1.75c.5.45 1.01.78 1.53 1.06l.41.19c.78-.55 1.68.2 2.64.2.97 0 1.87-.74 2.64-.2.14-.05.28-.1.42-.18a8.34 8.34 0 0 0 3.06-2.82l.1-.18c.02-.02.03-.04.03-.07a.16.16 0 0 0-.14-.17"/> + <path fill="#FFF" d="M6.17 12.66c.51.05 1.12.14 1.76.17.65.05 1.33.06 2.02.07.7-.01 1.38-.02 2.03-.06.65-.04 1.25-.13 1.76-.17.52-.05.95-.15 1.25-.2.24-.04.4-.08.45-.1l-.9-.05-1.53-.06c-1.02-.03-2.04-.03-3.06-.05-1.02.02-2.04.02-3.05.05l-1.53.06-.9.05c.05.02.21.06.45.1.3.04.73.15 1.25.2"/> + <path fill="#FFA500" d="M18.96 10.23v-.4c0-2.42-.94-4.6-2.48-6.22A9.27 9.27 0 0 1 3.72 16.37a9.02 9.02 0 0 0 14.87-4l.22-.01c.6 0 1.08-.48 1.08-1.07 0-.55-.4-1-.93-1.06"/> + <path fill="#FF7664" d="M12.58 15.85h.01c-.77-.55-1.68-.37-2.64-.25-.96-.12-1.87-.3-2.64.25.87.39 1.73.57 2.6.58H10c.86 0 1.73-.2 2.6-.58h-.02"/> +</svg> diff --git a/browser/themes/shared/preferences/fxaPairDevice.css b/browser/themes/shared/preferences/fxaPairDevice.css new file mode 100644 index 0000000000..51183b84c7 --- /dev/null +++ b/browser/themes/shared/preferences/fxaPairDevice.css @@ -0,0 +1,122 @@ +/* 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/. */ + +#fxaPairDeviceDialog { + padding-bottom: 2em; +} + +#pairTitle { + font-size: 2.1rem; + font-weight: bold; + padding-top: 12px; + text-align: center; +} + +.pairHeading { + font-size: 1.08em; +} + +.menu-icon { + width: 20px; + height: 20px; + vertical-align: middle; + -moz-context-properties: fill; + fill: currentColor; +} + +#qrCodeDisplay { + width: 450px; + margin: auto; +} + +#qrWrapper { + position: relative; + width: 200px; + height: 200px; + margin: auto; + margin-top: 28px; +} + +#qrContainer { + height: 200px; + width: 200px; + background-size: contain; + image-rendering: -moz-crisp-edges; + transition: filter 250ms cubic-bezier(.07,.95,0,1); +} + +#qrWrapper:not([pairing-status="ready"]) #qrContainer { + opacity: 0.05; + filter: blur(3px); +} + +#qrWrapper:not([pairing-status="loading"]) #qrSpinner { + opacity: 0; +} + +#qrSpinner { + display: block; + position: absolute; + height: 250px; + width: 250px; +} + +#qrSpinner::before { + background-image: url("chrome://browser/skin/fxa/fxa-spinner.svg"); + animation: 0.9s spin infinite linear; + background-size: 36px; + background-repeat: no-repeat; + background-position: center; + display: block; + position: absolute; + height: 200px; + width: 200px; + content: ""; + transition: opacity 250ms cubic-bezier(.07,.95,0,1); + will-change: transform; + margin-inline: auto; +} + +#qrWrapper:not([pairing-status="error"]) #qrError { + display: none; +} + +#qrError { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 200px; /* Same as #qrContainer */ + position: absolute; + inset: 0; + margin-inline: auto; + transition: opacity 250ms cubic-bezier(.07,.95,0,1); + cursor: pointer; +} + +.qr-error-text { + text-align: center; + user-select: none; + display: block; + color: #2484C6; + cursor: pointer; +} + +#refresh-qr { + width: 36px; + height: 36px; + background-image: url("chrome://global/skin/icons/reload.svg"); + background-size: contain; + -moz-context-properties: fill; + fill: #2484C6; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/browser/themes/shared/preferences/ios-menu.svg b/browser/themes/shared/preferences/ios-menu.svg new file mode 100644 index 0000000000..15183a814d --- /dev/null +++ b/browser/themes/shared/preferences/ios-menu.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" viewBox="0 0 24 24"> + <path fill="context-fill" d="M5 5h14a1 1 0 100-2H5a1 1 0 100 2M19 11H5a1 1 0 100 2h14a1 1 0 100-2M19 19H5a1 1 0 100 2h14a1 1 0 100-2"/> +</svg> diff --git a/browser/themes/shared/preferences/mozilla-logo.svg b/browser/themes/shared/preferences/mozilla-logo.svg new file mode 100644 index 0000000000..af66da5135 --- /dev/null +++ b/browser/themes/shared/preferences/mozilla-logo.svg @@ -0,0 +1,5 @@ +<!-- 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="20" height="20" xmlns="http://www.w3.org/2000/svg"><path fill="context-fill" fill-rule="evenodd" d="M0 .5h20v20H0z +M17.702 13.46h1.256v2.04h-3.96v-5.476c0-1.72-.548-2.365-1.61-2.365-1.289 0-1.804.977-1.804 2.325v3.438h1.255v2.042H8.884V10.02c0-1.719-.547-2.365-1.61-2.365-1.289 0-2.01.977-2.01 2.325v3.438h2.002v2.046H1.474v-2.04H2.66V8.108H1.417v-2.43h3.578v1.535A3.873 3.873 0 0 1 8.3 5.505a3.03 3.03 0 0 1 3.058 2.123 3.14 3.14 0 0 1 3.06-2.123 3.123 3.123 0 0 1 3.252 3.404v4.551h.032z"/></svg> diff --git a/browser/themes/shared/preferences/no-search-bar.svg b/browser/themes/shared/preferences/no-search-bar.svg new file mode 100644 index 0000000000..b5c17b5f26 --- /dev/null +++ b/browser/themes/shared/preferences/no-search-bar.svg @@ -0,0 +1,20 @@ +<!-- 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="631" height="36"> + <style> + .addressBarOutline { + stroke: context-stroke; + stroke-linejoin: round; + stroke-width: 1px + } + .addressBarIcons { + fill: context-stroke; + fill-rule: evenodd; + } + </style> + <rect width="630" height="35" x=".5" y=".5" fill="context-fill" class="addressBarOutline" rx="4" ry="4"/> + <rect width="434" height="23" x="110.5" y="6.5" fill="rgba(255,255,255,0.05)" class="addressBarOutline" rx="4" ry="4"/> + <path d="M604 .5h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574zm500.57-1.986h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/> + <path d="M23.783 17.292h-8.649l3.206-3.2a.738.738 0 0 0-1.044-1.043l-4.474 4.47a.72.72 0 0 0 0 1.043l4.474 4.47a.72.72 0 0 0 1.044 0 .72.72 0 0 0 0-1.043l-3.206-3.2h8.649a.749.749 0 1 0 0-1.497z" class="addressBarIcons"/> +</svg> diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css new file mode 100644 index 0000000000..12beaa7e01 --- /dev/null +++ b/browser/themes/shared/preferences/preferences.css @@ -0,0 +1,1471 @@ +/* - 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/. */ + +@namespace html "http://www.w3.org/1999/xhtml"; + +/* Global rules */ +* { + user-select: text; +} + +#preferences-root { + text-rendering: optimizeLegibility; + -moz-box-layout: flex; +} + +@media not print { + #preferences-root, + #preferences-body { + height: 100%; + overflow: hidden; + } +} + +#preferences-root, +#preferences-body { + margin: 0; + padding: 0; + width: 100%; +} + +#preferences-body { + vertical-align: top; /* See bug 1606130 */ + display: -moz-box; + -moz-box-orient: vertical; + + --main-pane-width: 664px; +} + +/* + The stack has some very tall content but it shouldn't be taller than the + viewport (and we know the tall content will still be accessible via scrollbars + regardless if the stack has a shorter height). So we use min-height: 0 to allow + the stack to be smaller than its content height so it can fit the viewport size. +*/ +#preferences-stack { + min-height: 0; +} + +.main-content { + padding-top: 0; + /* the 32px min-height, plus 20+30px margin below, plus some leeway: */ + scroll-padding-top: 90px; + contain: inline-size; +} + +.pane-container { + /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */ + display: block; + width: min(100%, var(--main-pane-width)); + min-width: min-content; +} + +#mainPrefPane { + width: 100%; + padding: 0; +} + +groupbox[data-category] { + margin: 0 0 32px; +} + +html|h1 { + margin: 0 0 8px; + font-size: 1.46em; + font-weight: 300; + line-height: 1.3em; +} + +html|h2 { + margin: 16px 0 4px; + font-size: 1.14em; + line-height: normal; +} + +description.indent, +.indent:not(#browserPrivateEngineSelection) > description { + color: var(--in-content-deemphasized-text); +} + +button, +treecol, +html|option { + /* override the * rule */ + user-select: none; +} + +/* Buttons get a default min-width in XUL. When they also have flex, they will + * be large enough anyway, and we don't want them to become smaller than their inner + * text which would then overflow the button. Set min-width back to auto for that: + */ +button[flex] { + min-width: auto; +} + +description, +label { + line-height: 1.8em; + margin: 0; +} + +.tip-caption { + font-size: .9em; +} + +menulist::part(label), +menuitem > label, +button > hbox > label { + line-height: unset; +} + +.indent { + /* This should match the checkboxes/radiobuttons' width and inline margin, + such that when we have a toggle with a label followed by another element + with this class, the other element's text aligns with the toggle label. */ + margin-inline-start: 22px !important; +} + +checkbox { + margin-inline: 0; +} + +.tail-with-learn-more { + margin-inline: 0 10px; +} + +/* Add a bit of space to the end of descriptions to + * leave margin with e.g. additional buttons on the side. */ +.description-with-side-element { + margin-inline-end: 10px !important; +} + +.learnMore { + margin-inline-start: 0; + font-weight: normal; + white-space: nowrap; +} + +.accessory-button { + min-width: 150px; + margin: 4px 0; +} + +.spotlight { + background-color: color-mix(in srgb, var(--in-content-accent-color) 15%, transparent); + outline: var(--in-content-accent-color) 1px dotted; + animation: fade-out 0.5s ease-out 2s forwards; + /* Show the border to spotlight the components in high-contrast mode. */ + border: 1px solid transparent; + border-radius: 2px; +} + +@keyframes fade-out { + 100% { + background-color: transparent; + outline-color: transparent; + } +} + +[data-subcategory] { + margin-inline: -4px; + padding-inline: 4px; +} + +.ac-site-icon { + display: -moz-box; +} + +/* Subcategory title */ + +/** + * The first subcategory title for each category should not have margin-top. + */ + +.subcategory:not([hidden]) ~ .subcategory { + margin-top: 16px; + padding-top: 16px; + border-top: 1px solid var(--in-content-border-color); +} + +/* Category List */ + +#categories { + overflow: visible !important; /* Cancel scrollbar and do not clip overflow content when window size goes very small */ + padding: 1px; /* Adding padding around richlistitem in order to make entire keyboard focusing outline visible */ +} + +#category-general > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-general.svg"); +} + +#category-home > .category-icon { + list-style-image: url("chrome://browser/skin/home.svg"); +} + +#category-search > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-search.svg"); +} + +#category-privacy > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-privacy-security.svg"); +} + +#category-sync > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/category-sync.svg"); +} + +#category-experimental > .category-icon { + list-style-image: url("chrome://global/skin/icons/experiments.svg"); +} + +#category-more-from-mozilla > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/mozilla-logo.svg"); +} + +/* All panes */ + +.info-icon, +.androidIcon, +.iOSIcon { + -moz-context-properties: fill; + fill: currentColor; +} + +/* General Pane */ + +.is-default > #isNotDefaultPane, +:not(.is-default) > #isDefaultPane { + visibility: hidden; +} + +#isDefaultLabel, +#isNotDefaultLabel { + font-weight: 600; +} + +#browserContainersExtensionContent { + padding-block: 5px; +} + +.extension-controlled { + margin-block: 18px; +} + +.extension-controlled-icon { + height: 20px; + margin: 2px 0 6px; + vertical-align: middle; + width: 20px; + -moz-context-properties: fill; + fill: currentColor; +} + +.extension-controlled-disabled { + -moz-context-properties: fill; + color: GrayText; + fill: currentColor; +} + +.extension-controlled-disabled > .extension-controlled-button { + display: none; +} + +.extension-controlled-icon.close-icon { + height: 30px; + width: 30px; + margin-inline-start: 5px; +} + +#getStarted { + font-size: 90%; +} + +#colors { + margin-inline-start: 5px; +} + +#FontsDialog menulist:empty { + /* When there's no menupopup, while the font builder is running, + * the height of the menulist would otherwise shrink. This throws + * off the height determination SubDialog.sys.mjs does, which then + * leads to content being cut off. Fix by enforcing a minimum height + * when there's no content: */ + min-height: max(32px, calc(1.4em + 16px)); +} + +#useDocumentColors { + margin: 4px 0; +} + +#translationAttributionImage { + width: 70px; + cursor: pointer; +} + +#activeLanguages > richlistitem { + padding: 0.3em; +} + +#saveWhere { + -moz-box-align: center; +} + +#saveTo { + margin-inline-end: 1em; +} + +#downloadFolder { + -moz-box-flex: 1; + margin-block: 4px; + margin-inline-start: 0; + padding-inline-start: 30px; + background-repeat: no-repeat; + background-size: 16px; + background-position: center left 8px; +} + +#downloadFolder:-moz-locale-dir(rtl) { + background-position-x: right 8px; +} + +#updateBox { + margin-block: 4px 32px; +} + +/* Work around bug 560067 - animated images in visibility: hidden + * still eat CPU. */ +#updateDeck > *:not(.deck-selected) > .update-throbber { + display: none; +} + +#updateDeck > hbox > button { + margin-block: 0; + margin-inline-end: 0; +} + +#updateDeck > hbox > label { + -moz-box-flex: 1; +} + +.manualLink { + margin-inline-start: 6px !important; +} + +#updateRadioGroup > radio { + min-height: 30px; + margin: 2px 0; +} + +#filter { + margin: 4px 0 8px; +} + +#handlersView { + height: 25em; + margin-inline-end: 0; +} + +#handlersView > richlistitem { + min-height: 30px; +} + +#handlersViewHeader > treecol, +#handlersView > richlistitem > hbox { + width: 50%; +} + +#handlersView .actionsMenu { + margin: 0; + min-height: 0; + padding: 0; + border: none; + padding-inline-end: 8px; +} + +#handlersView .actionsMenu::part(label) { + margin: 0; +} + +.typeIcon, +.actionIcon, +.actionsMenu::part(icon) { + height: 16px; + width: 16px; +} + +.typeIcon { + margin-inline: 10px 9px !important; +} + +#handlersView .actionsMenu::part(icon), +.actionIcon { + margin-inline: 11px 8px !important; +} + +.actionsMenu > menupopup > menuitem { + padding-inline-start: 10px !important; +} + +.actionsMenu > menupopup > menuitem > .menu-iconic-left { + margin-inline-end: 8px !important; +} + +/* Increase the specifity to override common.inc.css */ +richlistitem[selected] .actionsMenu:focus-visible { + outline-offset: -3px; +} + +/* Home Pane */ + +#homepageGroup menulist, +#homepageGroup html|input { + margin: 5px 0; +} + +#homepageGroup html|input { + text-align: match-parent; +} + +#homepageGroup:-moz-locale-dir(rtl) html|input { + unicode-bidi: plaintext; +} + +#homepageAndNewWindowsOption { + margin-top: 20px; +} + +#homepageGroup:-moz-locale-dir(rtl) panel[type="autocomplete-richlistbox"] { + direction: rtl; +} + +.homepage-button:first-of-type { + margin-inline-start: 0; +} + +.homepage-button:last-of-type { + margin-inline-end: 0; +} + +#homeContentsGroup .checkbox-icon[src] { + -moz-context-properties: fill; + fill: currentColor; + margin-inline: 2px 8px; + width: 16px; +} + +#homeContentsGroup [data-subcategory] { + margin-top: 14px; +} + +#homeContentsGroup [data-subcategory] .section-checkbox { + font-weight: 600; +} + +#homeContentsGroup [data-subcategory] > vbox menulist { + margin-block: 0; +} + +.addon-with-favicon .menu-iconic-icon { + margin-inline-start: 0; +} + +/* Search Pane */ + +#engineList { + margin: 2px 0 5px; +} + +#engineList > treechildren::-moz-tree-image(engineShown, checked), +#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) { + list-style-image: url("chrome://global/skin/icons/check.svg"); + -moz-context-properties: fill, stroke; + fill: var(--in-content-accent-color); +} + +#engineList > treechildren::-moz-tree-image(engineShown, checked, selected), +#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) { + fill: var(--in-content-item-selected-text); + stroke: var(--in-content-item-selected); +} + +@media (prefers-contrast) { + #engineList > treechildren::-moz-tree-image(hover), + #blocklistsTree > treechildren::-moz-tree-image(hover) { + fill: var(--in-content-item-hover-text); + stroke: var(--in-content-item-hover); + } +} + +#engineList > treechildren::-moz-tree-row, +#blocklistsTree > treechildren::-moz-tree-row { + min-height: 36px; +} + +#selectionCol { + min-width: 26px; +} + +#addEnginesBox { + margin: 4px 0 0; +} + +/* Privacy Pane */ + +#allowSmartSize { + margin-block: 0 4px; +} + +#doNotTrackLearnMoreBox { + margin-top: 32px; +} + +#historyPane { + margin-top: 4px; +} + +#historyButtons { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#blockCookies, +#keepRow { + margin-top: 1.5em; +} + +/* 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"]) > #hasFxaAccount, +#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified, +#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected, +#syncStatus:not([selectedIndex="1"]) > #syncConfigured { + visibility: collapse; +} + +#tabsElement { + margin-inline-end: 4px; /* add the 4px end-margin of other elements */ +} + +.text-link { + margin-bottom: 0; +} + +.text-link[disabled="true"] { + pointer-events: none; +} + +#showUpdateHistory { + margin-inline-start: 0; +} + +@media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + #windows-sso, + #windows-sso-caption { + display: none; + } +} + +/** + * Dialog + */ + +.dialogOverlay { + visibility: hidden; +} + +.dialogOverlay[topmost="true"] { + background-color: rgba(0,0,0,0.5); +} + +.dialogBox { + background-color: var(--in-content-page-background); + background-clip: content-box; + color: var(--in-content-page-color); + /* `transparent` will use the dialogText color in high-contrast themes and + when page colors are disabled */ + border: 1px solid transparent; + border-radius: 8px; + box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3); + display: -moz-box; + margin: 0; + padding: 0; + overflow-x: auto; +} + +@media (prefers-color-scheme: dark) { + @media not (prefers-contrast) { + .dialogBox { + --in-content-page-background: #42414d; + } + } +} + +.dialogBox[resizable="true"] { + resize: both; + overflow: hidden; + min-height: 20em; + min-width: 66ch; +} + +.dialogTitleBar { + padding: .4em .2em; + border-bottom: 1px solid var(--in-content-border-color); +} + +.dialogTitle { + font-weight: 600; + text-align: center; + user-select: none; +} + +.fxaPairDeviceIcon { + background-image: url("chrome://browser/content/logos/fxa-logo.svg"); + background-position: center center; + background-repeat: no-repeat; + position: relative; + height: 80px; + padding-top: 42px; + margin-top: -40px; +} + +.fxaPairDeviceIcon .close-icon { + margin-top: 10px; +} + +.close-icon { + border: none; + background-color: transparent; /* override common.css, but keep hover/active states */ + min-width: 0; + min-height: auto; + width: 20px; + height: 20px; + padding: 0; + margin-inline: 0 8px; +} + +.dialogFrame { + margin: 10px; + -moz-box-flex: 1; + /* Default dialog dimensions */ + min-width: 66ch; +} + +/** + * End Dialog + */ + +/** + * Font group and font dialog menulist fixes + */ + +#font-chooser-group { + display: grid; + grid-template-columns: max-content 1fr max-content max-content; +} + +#defaultFont { + width: 25ch; +} + +#defaultFontType, +#serif, +#sans-serif, +#monospace { + width: 0; /* Might be able to be removed */ + min-width: 30ch; +} + +/** + * Sync + */ + +.fxaProfileImage { + width: 80px; + height: 80px; + border-radius: 50%; + border: 1px solid transparent; + list-style-image: url(chrome://browser/skin/fxa/avatar-color.svg); + margin-inline-end: 24px; + -moz-user-focus: normal; +} + +.fxaProfileImage.actionable { + cursor: pointer; +} + +.fxaProfileImage.actionable:hover { + border-color: #0095DD; +} + +.fxaProfileImage.actionable:hover:active { + border-color: #ff9500; +} + +#useFirefoxSync { + font-size: 90%; + margin-inline-end: 8px !important; +} + +#fxaNoLoginStatus { + margin-block: 46px 64px; +} + +#fxaSyncComputerName { + -moz-box-flex: 1; + margin-block: 4px; + margin-inline-start: 0; +} + +#fxaChangeDeviceName { + margin-block: 4px; + margin-inline-end: 0; +} + +#noFxaAccount { + line-height: 1.2em; +} + +#noFxaAccount > label:first-child { + margin-bottom: 0.6em; +} + +#noFxaCaption { + line-height: 30px; + margin-block: 0 4px; +} + +#noFxaSignIn { + margin-inline-start: 8px; +} + +.fxaSyncIllustration { + list-style-image: url(chrome://browser/skin/fxa/sync-devices.svg); + width: 312px; + height: 136px; +} + +#noFxaDescription { + padding-inline-end: 52px; +} + +.separator { + border-bottom: 1px solid var(--in-content-box-border-color); +} + +#fxaGroup { + margin-bottom: 32px; +} + +.openLink { + line-height: 30px; + cursor: pointer; +} + +.openLink:visited { + color: var(--in-content-link-color); +} + +#fxaDisplayName { + margin-inline-end: 10px !important; +} + +.fxaLoginRejectedWarning { + list-style-image: url(chrome://global/skin/icons/warning.svg); + -moz-context-properties: fill; + fill: #FFBF00; + margin-inline: 4px 8px; +} + +#syncStatus { + margin-top: 32px; +} + +.sync-group { + margin-block: 16px; + border: 1px solid var(--in-content-border-color); +} + +.sync-configured { + display: block; +} + +.sync-engines-list > div, +.sync-engines-list + hbox { + margin-top: 0; + padding-top: 16px; + max-width: 300px; + height: auto; +} + +dialog > .sync-engines-list > div, +dialog > .sync-engines-list + hbox { + padding-top: 0; +} + +.sync-engines-list checkbox .checkbox-icon, +.sync-engine-image { + margin-inline: 2px 8px; + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: currentColor; + align-self: center; +} + +.sync-engines-list checkbox { + min-width: max-content; + max-width: calc(50vw - 10px); +} + +.sync-engines-list .checkbox-label-box { + -moz-box-align: center; +} + +.sync-engines-list { + column-count: 2; + column-fill: balance; +} + +.sync-engines-list > div:not([hidden]) { + display: flex; +} + +.sync-engine-bookmarks .checkbox-icon, +.sync-engine-bookmarks.sync-engine-image { + list-style-image: url("chrome://browser/skin/bookmark.svg"); +} + +.sync-engine-history .checkbox-icon, +.sync-engine-history.sync-engine-image { + list-style-image: url("chrome://browser/skin/history.svg"); +} + +.sync-engine-tabs .checkbox-icon, +.sync-engine-tabs.sync-engine-image { + list-style-image: url("chrome://browser/skin/synced-tabs.svg"); +} + +.sync-engine-passwords .checkbox-icon, +.sync-engine-passwords.sync-engine-image { + list-style-image: url("chrome://browser/skin/login.svg"); +} + +.sync-engine-addons .checkbox-icon, +.sync-engine-addons.sync-engine-image { + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} + +.sync-engine-prefs .checkbox-icon, +.sync-engine-prefs.sync-engine-image { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +.sync-engine-addresses .checkbox-icon, +.sync-engine-addresses.sync-engine-image { + list-style-image: url("chrome://formautofill/content/formfill-anchor.svg"); +} + +.sync-engine-creditcards .checkbox-icon, +.sync-engine-creditcards.sync-engine-image { + list-style-image: url("chrome://formautofill/content/icon-credit-card-generic.svg"); +} + +.fxaMobilePromo { + margin-top: 2px !important; +} + +.androidIcon, +.iOSIcon { + margin-inline: 2px 4px; + width: 20px; + height: 20px; + vertical-align: text-bottom; +} + +#updateDeck > hbox > label { + margin-inline-end: 5px ! important; +} + +.update-throbber { + width: 16px; + min-height: 16px; + margin-block: 7px; + margin-inline-end: 8px; +} + +html|img.update-throbber { + vertical-align: middle; +} + +image.update-throbber { + list-style-image: url("chrome://global/skin/icons/loading.png"); +} + +@media (min-resolution: 1.1dppx) { + .update-throbber { + list-style-image: url("chrome://global/skin/icons/loading@2x.png"); + } +} + +.navigation { + overflow-x: hidden; + overflow-y: auto; + position: relative; +} + +@media (prefers-reduced-motion) { + /* Setting border-inline-end on .navigation makes it a focusable element */ + .navigation::after { + content: ""; + width: 1px; + height: 100%; + background-color: var(--in-content-border-color); + top: 0; + inset-inline-end: 0; + position: absolute; + } +} + +.face-sad { + list-style-image: url("chrome://browser/skin/preferences/face-sad.svg"); + width: 20px; + height: 20px; + margin-block: 5px; + margin-inline-end: 8px; +} + +.face-smile { + list-style-image: url("chrome://browser/skin/preferences/face-smile.svg"); + width: 20px; + height: 20px; + margin-block: 5px; + margin-inline-end: 8px; +} + +#policies-container, +#searchInput { + min-height: 32px; + margin: 20px 0 30px; +} + +#policies-container { + margin-inline-end: 16px; + /* Make sure the container is at least the same height as the searchbox. + This is needed in addition to the min-height above to make the info icon + the same height as the first line in the policies label. + Searchbox's height - line-height - border top and bottom */ + padding-block: max(0px, calc((32px - 1.8em - 2px) / 2)); +} + +.info-box-container { + background-color: var(--in-content-box-info-background); + padding: 9px; + border: 1px solid transparent; + border-radius: 4px; +} + +.info-box-container.smaller-font-size { + font-size: 85%; +} + +.info-icon-container { + display: flex; +} + +.info-icon { + list-style-image: url("chrome://global/skin/icons/info.svg"); + width: 16px; + height: 16px; + margin-inline-end: 6px; + align-self: start; + margin-top: 0.4em; + flex-shrink: 0; +} + +.info-box-container.smaller-font-size .info-icon { + margin-top: 0.3em; +} + +.sticky-container { + position: sticky; + background-color: var(--in-content-page-background); + top: 0; + z-index: 1; + /* The sticky-container should have the capability to cover all spotlight area. */ + width: calc(100% + 8px); + margin-inline: -4px; + padding-inline: 4px; +} + +.sticky-inner-container { + -moz-box-flex: 1; + max-width: var(--main-pane-width); +} + +.search-tooltip { + max-width: 10em; + font-size: 1rem; + position: absolute; + padding: 0 .7em; + background-color: #ffe900; + color: #000; + border: 1px solid #d7b600; + margin-top: -18px; + opacity: .85; +} + +.search-tooltip:hover { + opacity: .1; +} + +.search-tooltip::before { + position: absolute; + content: ""; + border: 7px solid transparent; + border-top-color: #d7b600; + top: 100%; + inset-inline-start: calc(50% - 7px); +} + +.search-tooltip::after { + position: absolute; + content: ""; + border: 6px solid transparent; + border-top-color: #ffe900; + top: 100%; + inset-inline-start: calc(50% - 6px); +} + +.search-tooltip-parent { + position: relative; +} + +.search-tooltip > span { + display: block; + user-select: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.visually-hidden { + visibility: collapse; +} + +menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left { + display: -moz-box; + min-width: auto; /* Override the min-width defined in menu.css */ + margin-inline-end: 6px; +} + +menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left > .menu-iconic-icon { + width: 8px; + height: 10px; + margin: 0; +} + +menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon { + list-style-image: url(chrome://browser/skin/preferences/search-arrow-indicator.svg); +} + +menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.menu-iconic-highlightable-text { + margin: 0; /* Align with the margin of xul:label.menu-iconic-text */ +} + +#no-results-message > label { + margin: 2px 0; + line-height: 30px; +} + +/* Proxy port input */ + +.proxy-port-input { + width: calc(5ch + 18px); /* 5 chars + (8px padding + 1px border) on both sides */ + margin-inline-start: 4px; +} + +#primaryBrowserLocale { + margin-inline-start: 0; + min-width: 20em; +} + +#availableLanguages, +#availableLocales { + margin-inline-start: 0; +} + +#availableLanguages, +#availableLocales, +#activeLanguages, +#selectedLocales { + margin-inline-end: 4px; +} + +#selectedLocales > richlistitem { + padding-inline-start: 13px; +} + +#warning-message > .message-bar-description { + width: 32em; +} + +#warning-message { + margin-top: 8px; +} + +.action-button { + margin-inline-end: 0; +} + +/* Menulist styles */ +.label-item { + font-size: 0.8em; +} + +.updateSettingCrossUserWarningContainer { + margin-block-end: 17px; +} + +#updateSettingCrossUserWarningDesc { + padding-inline-start: calc(16px + 6px); /* radio-check's width + margin-inline-end */ + margin-block-start: 20px; +} + +richlistitem .text-link { + color: inherit; + text-decoration: underline; +} + +richlistitem .text-link:hover { + color: inherit; +} + +#proxy-grid, +#dnsOverHttps-grid { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; +} + +.proxy-grid-row:not([hidden]), +.dnsOverHttps-grid-row:not([hidden]) { + display: contents; +} + +#proxy-grid > .thin { + grid-column: span 2; + height: 20px; +} + +#pane-experimental-search-results-header, +#pane-experimental-subtitle { + background-image: url("chrome://global/skin/icons/warning.svg"); + background-repeat: no-repeat; + background-position: 0 center; + background-size: contain; + min-height: 30px; + padding-inline-start: 38px; + display: flex; + align-items: center; + -moz-context-properties: fill; + fill: #FFBF00; +} + +#pane-experimental-search-results-header:-moz-locale-dir(rtl), +#pane-experimental-subtitle:-moz-locale-dir(rtl) { + background-position-x: right; +} + +#pane-experimental-featureGates { + margin-top: 16px; +} + +.featureGate { + margin-bottom: 16px; +} + +.featureGateCheckbox { + font-size: 1.14em; + -moz-box-align: center; +} + +.featureGateCheckbox > .checkbox-label-box { + -moz-box-align: center; +} + +.featureGateDescription { + margin-inline-start: 28px; +} + +.checkbox-row { + display: flex; + align-items: baseline; +} + +.checkbox-row input[type=checkbox] { + translate: 0 2px +} + +.checkbox-row a { + margin-inline-start: 6px; +} + +#moreFromMozillaCategory-header .title { + margin-block-end: 4px; +} + +#moreFromMozillaCategory-header .subtitle { + color: var(--in-content-text-color); + margin-block-end: 24px; + line-height: 1.4em; +} + +#moreFromMozillaCategory:not([hidden]) { + display: flex; + flex-direction: column; +} + +#moreFromMozillaCategory .mozilla-product-item { + margin-top: 30px; +} + +#moreFromMozillaCategory .product-title { + margin: 4px 0 3px; + background-repeat: no-repeat; + background-size: contain; + padding-inline-start: 30px; + -moz-context-properties: fill; + fill: currentColor; +} + +#moreFromMozillaCategory .product-title:-moz-locale-dir(rtl) { + background-position-x: right; +} + +#moreFromMozillaCategory .product-description-box { + padding-inline-start: 30px; + margin: 2px 0; + line-height: 1.4em; +} + +#moreFromMozillaCategory .description { + display: inline; +} + +#moreFromMozillaCategory .small-button { + margin-block: 14px 2px; + margin-inline: 30px 0; +} + +#firefox-mobile { + background-image: url("chrome://browser/skin/device-phone.svg"); +} + +#mozilla-vpn { + background-image: url("chrome://browser/skin/preferences/vpn-logo.svg"); +} + +#firefox-relay { + background-image: url("chrome://browser/skin/preferences/relay-logo.svg"); +} + +/* + * The :not clause is required because hiding an element with `display: flex` only + * partially hides it. + */ +.qr-code-box:not([hidden="true"]) { + max-width: 320px; /* a unit better than px for this & next? */ + min-height: 204px; + margin-block: 10px 0; + margin-inline-start: 30px; + background-color: var(--in-content-box-info-background); + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + border-radius: 4px; +} + +@media (prefers-contrast) { + .qr-code-box:not([hidden="true"]) { + border: 1px solid currentColor; + } +} + +.qr-code-box-image { + border-radius: 4px; + padding: 2px; + width: 80px; + flex: 0 0 auto; + -moz-context-properties: fill; + fill: currentColor; +} + +.qr-code-title-label { + flex: 1 1 auto; +} + +.qr-code-box-title { + font-size: .87em; + font-weight: normal; + line-height: 1.42em; + + text-align: center; + + margin-block: 20px 0; + margin-inline: 40px; +} + +.simple .qr-code-box-title { + margin-block: 0; + width: 296px; +} + +.simple .qr-code-box { + padding-inline: 24px; + padding-block: 20px +} + +.simple .qr-code-box-image { + padding: 10px; +} + +#moreFromMozillaCategory .qr-code-link { + font-size: .87em; + line-height: 1.42em; +} + +@media (prefers-color-scheme: dark) { + .qr-code-box:not([hidden="true"]) { + background-color: rgba(91,91,102,0.45); + } + + .qr-code-box-title { + color: #fbfbfe; + } +} + +#websiteAppearanceGroup { + display: block; +} + +#web-appearance-chooser { + display: flex; + justify-content: space-between; + gap: 16px; +} + +#web-appearance-chooser, +#web-appearance-override-warning { + margin: 12px 0; +} + +#web-appearance-override-warning:not([hidden]) { + display: flex; +} + +.web-appearance-choice { + width: 100%; + border: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-box-background-color); + color: var(--in-content-text-color); + border-radius: 4px; + overflow: clip; +} + +.web-appearance-choice-image-container { + background-color: var(--in-content-button-background); + padding: 12px 0; +} + +.web-appearance-choice:hover > .web-appearance-choice-image-container { + background-color: var(--in-content-button-background-hover); +} + +.web-appearance-choice:hover:active > .web-appearance-choice-image-container { + background-color: var(--in-content-button-background-active); +} + +.web-appearance-choice img { + display: block; + margin: 0 auto; + + border: 1px solid var(--in-content-box-border-color); + border-radius: 4px; + box-shadow: 0 0 2px 0 rgba(0,0,0,0.2); + + transform: scaleX(1); + content: url("chrome://browser/content/preferences/web-appearance-light.svg") +} + +.web-appearance-choice.dark img { + content: url("chrome://browser/content/preferences/web-appearance-dark.svg") +} + +.web-appearance-choice img:dir(rtl) { + transform: scaleX(-1); +} + +.web-appearance-choice-footer { + border-top: 1px solid var(--in-content-box-border-color); + padding: 4px 8px; + overflow-wrap: anywhere; + display: flex; +} + +.web-appearance-choice input { + margin-top: 0.4em; +} + +/* Platform-specific tweaks & overrides */ + +@media (-moz-platform: macos) { + tabpanels { + padding: 20px 7px 7px; + } + + #browserUseCurrent, + #browserUseBookmark, + #browserUseBlank { + margin-top: 10px; + } + + #privacyPrefs { + padding: 0 4px; + } + + #privacyPrefs > tabpanels { + padding: 18px 10px 10px; + } + + #OCSPDialogPane { + font: message-box !important; + } + + /** + * Update Preferences + */ + #autoInstallOptions { + margin-inline-start: 20px; + } + + .updateControls { + margin-inline-start: 10px; + } +} + +@media (-moz-platform: linux) { + .treecol-sortdirection { + /* override the Linux only toolkit rule */ + appearance: none; + } +} diff --git a/browser/themes/shared/preferences/privacy.css b/browser/themes/shared/preferences/privacy.css new file mode 100644 index 0000000000..69342135b6 --- /dev/null +++ b/browser/themes/shared/preferences/privacy.css @@ -0,0 +1,364 @@ +/* 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/. */ + +/* Permissions */ + +#trackingGroup { + --section-highlight-background-color: color-mix(in srgb, var(--in-content-accent-color) 20%, transparent); +} + +.permission-icon { + width: 20px; + height: 20px; + vertical-align: middle; + margin-inline-end: 0.2em; +} + +.permission-icon, +.content-blocking-category .checkbox-label-box, +.extra-information-label > image, +.arrowhead, +.reload-tabs-button, +.content-blocking-warning-image { + -moz-context-properties: fill; + fill: currentColor; +} + +.geo-icon { + list-style-image: url(chrome://browser/skin/notification-icons/geo.svg); +} + +.xr-icon { + list-style-image: url(chrome://browser/skin/notification-icons/xr.svg); +} + +.camera-icon { + list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); +} + +.microphone-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); +} + +.desktop-notification-icon { + list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg); +} + +.autoplay-icon { + list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg); +} + +.midi-icon { + list-style-image: url(chrome://browser/skin/notification-icons/midi.svg); +} + +/* Content Blocking */ + +/* Override styling that sets descriptions as grey */ +#trackingGroup description.indent, +#trackingGroup .indent > description { + color: inherit; +} + +[data-subcategory="trackingprotection"] { + margin-top: 10px; +} + +#trackingProtectionShield { + list-style-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg"); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.5; + width: 64px; + height: 64px; + margin-inline-end: 10px; +} + +.content-blocking-category, +#fpiIncompatibilityWarning { + margin: 3px 0; +} + +#fpiIncompatibilityWarning { + background-color: var(--section-highlight-background-color); +} + +#fpiIncompatibilityWarning, +#contentBlockingCategories { + margin-top: 16px; +} + +.content-blocking-category { + border-color: var(--in-content-box-border-color); +} + +.content-blocking-category.disabled { + opacity: 0.5; +} + +.content-blocking-category.disabled .radio-check { + opacity: 1; +} + +.content-blocking-category > .indent { + margin-inline-end: 22px; +} + +.arrowhead { + border-radius: 2px; + min-height: 20px; + min-width: 20px; + max-height: 20px; + max-width: 20px; + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + background-color: transparent; + padding: 3px; +} + +.arrowhead:not([disabled]):hover { + cursor: pointer; +} + +.arrowhead.up { + list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); +} + +.content-blocking-category.expanded:not(.selected) .reload-tabs { + display: none; +} + +.content-blocking-warning.reload-tabs:not([hidden]) { + display: flex; + flex-wrap: wrap; +} + +.content-blocking-reload-desc-container { + /* 345px is enough for (almost) twice the size of the default English + * string at default font sizes. If this and the button do not fit + * on one line, the button will get wrapped to the next line and this + * item will stretch to fill all available space. */ + flex: 1 1 345px; + display: flex; + align-self: center; +} + +.content-blocking-reload-description { + line-height: 1.8em; + margin-inline-end: 5px; +} + +.reload-tabs-button { + max-height: 30px; + min-height: 30px; + padding: 0 20px; + list-style-image: url("chrome://global/skin/icons/reload.svg"); + align-self: center; +} + +.reload-tabs-button .button-icon { + margin: 0 6px; + color: inherit; +} + +.reload-tabs-button .button-text { + color: inherit; +} + +.content-blocking-category.selected .content-blocking-warning { + background-color: var(--section-highlight-background-color); +} + +.content-blocking-category.selected .arrowhead { + display: none; +} + +.content-blocking-category.selected { + border-color: var(--in-content-accent-color); +} + +@media (prefers-contrast) { + .content-blocking-category.selected { + outline: 2px solid var(--in-content-accent-color); + } +} + +@media not (prefers-contrast) { + .content-blocking-category { + background-color: rgba(215, 215, 219, 0.1); + } + + .content-blocking-category.selected { + background-color: var(--section-highlight-background-color); + } +} + +.content-blocking-warning-title, +.content-blocking-category .radio-label-box { + font-weight: bold; +} + +.content-blocking-category:not(.expanded, .selected) .content-blocking-extra-information { + visibility: collapse; +} + +.extra-information-label { + margin-top: 18px; +} + +/* Apply display: block to the containers of all the category information, as + * without this the flex-wrapped blocks inside don't stretch vertically to + * enclose their content. */ +.content-blocking-category > .indent { + display: block; +} + +.content-blocking-category.expanded .content-blocking-extra-information, +.content-blocking-category.selected .content-blocking-extra-information { + display: flex; + flex-direction: column; + align-content: stretch; +} + +.content-blocking-extra-information > .indent { + margin-bottom: 18px; +} + +.content-blocking-extra-information > .custom-option { + margin: 10px 0; +} + +.content-blocking-warning { + /* Match .indent's horizontal padding, minus the border added via .info-box-container: */ + padding-inline: calc(22px - 1px); + margin: 10px 0; +} + +.content-blocking-warning:not([hidden]) + .content-blocking-warning { + margin-top: 0; +} + +.content-blocking-extra-blocking-desc { + margin-inline-start: 0.5em; + position: relative; + top: 0.65em; +} + +.content-blocking-label { + display: list-item; + line-height: 1.2em; +} + +.content-blocking-warning-image { + list-style-image: url("chrome://global/skin/icons/warning.svg"); + margin-inline-end: 6px; +} + +#blockCookiesMenu { + width: 450px; +} + +#blockCookiesMenu, +#trackingProtectionMenu { + margin: 0; +} + +#changeBlockListLink { + margin-inline-start: 56px; +} + +#telemetry-container { + margin-block: 4px; + line-height: 1.8em; + width: 100%; +} + +.content-blocking-category-description { + font-size: 90%; + opacity: 0.6; +} + +.warning-description { + background: url(chrome://global/skin/icons/warning.svg) no-repeat 0 5px; + opacity: 0.6; + -moz-context-properties: fill, stroke; + fill: #d7b600; + stroke: white; + padding-inline-start: 20px; +} + +.reject-trackers-warning-icon:-moz-locale-dir(rtl) { + background-position-x: right 0; +} + +#contentBlockingChangeCookieSettings { + padding: 0.25em 0.75em; + margin: 4px 8px; +} + +#deleteOnCloseNote { + margin-top: 8px; + margin-inline-end: 32px; +} + +#submitHealthReportBox { + display: -moz-inline-box; +} + +/* Address bar */ + +.firefoxSuggestOptionBox { + /* With this value we're trying to keep the apparent vertical space between + option boxes the same as the apparent vertical space between the labels of + the checkboxes above the Firefox Suggest subsection. */ + margin-block-start: 11px; +} + +.firefoxSuggestOptionBox:first-of-type { + /* Similar here: Make the apparent vertical space between the last checkbox + and first option box the same as elsewhere. */ + margin-block-start: 5px; +} + +.firefoxSuggestToggle { + /* These variables and comments are copied from and override + toggle-button.css. We include values for all variables, even those that are + the same at the time this comment was written, for sanity and locality of + reference. */ + --button-height: 16px !important; + --button-half-height: 8px !important; + --button-width: 32px !important; + --button-border-width: 1px !important; + /* dot-size = button-height - 2*dot-margin - 2*button-border-width */ + --dot-size: 14px !important; + --dot-margin: 0px !important; + /* --dot-transform-x = button-width - 2*dot-margin - dot-size - 2*button-border-width */ + --dot-transform-x: 16px !important; +} + +.firefoxSuggestOptionDescription { + /* Prevent the description from flowing under the toggle button. + 32px = toggle button width + 1em = a little extra */ + padding-inline-end: calc(32px + 1em); + color: var(--in-content-deemphasized-text); +} + +#firefoxSuggestInfoBox { + margin-block-start: 16px; + padding: 12px; +} + +#firefoxSuggestInfoBox > description { + margin-inline-start: 2px; + margin-block: 2px; +} + +#openSearchEnginePreferences { + margin-block-start: 6px; + line-height: 30px; +} + +#openSearchEnginePreferences.extraMargin { + margin-block-start: 24px; +} diff --git a/browser/themes/shared/preferences/relay-logo.svg b/browser/themes/shared/preferences/relay-logo.svg new file mode 100644 index 0000000000..bf99230a1f --- /dev/null +++ b/browser/themes/shared/preferences/relay-logo.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 width="22" height="22" viewBox="0 0 22 22" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M20.054,4.777l-8.112-4.542c-0.579-0.313-1.277-0.313-1.856,0l-8.14,4.542C1.347,5.115,0.977,5.748,0.975,6.434v9.112c-0.005,0.689,0.368,1.324,0.971,1.655l8.112,4.542c0.283,0.17,0.61,0.26,0.942,0.257c0.331-0.001,0.657-0.089,0.943-0.257l8.112-4.542c0.598-0.337,0.969-0.969,0.971-1.655V6.434C21.022,5.748,20.652,5.115,20.054,4.777z M6.421,14.289c-0.054,0.194-0.183,0.357-0.359,0.455l-0.485,0.285c-0.115,0.055-0.243,0.085-0.371,0.087c-0.275-0.004-0.528-0.158-0.657-0.4c-0.1-0.173-0.126-0.381-0.073-0.573c0.054-0.194,0.183-0.357,0.359-0.454l0.481-0.283c0.371-0.228,0.826-0.087,1.033,0.312C6.449,13.889,6.475,14.095,6.421,14.289z M6.348,8.205c-0.131,0.242-0.382,0.396-0.657,0.4C5.562,8.603,5.435,8.574,5.32,8.519L4.834,8.233C4.649,8.141,4.508,7.978,4.447,7.78C4.385,7.582,4.408,7.367,4.51,7.186c0.102-0.18,0.274-0.312,0.474-0.362C5.185,6.773,5.398,6.809,5.573,6.92l0.485,0.285C6.431,7.404,6.572,7.861,6.348,8.205z M9.416,12.576c-0.054,0.193-0.183,0.357-0.357,0.454l-1.001,0.572c-0.115,0.055-0.242,0.084-0.37,0.085c-0.276-0.004-0.527-0.157-0.657-0.4c-0.1-0.173-0.126-0.381-0.073-0.573c0.054-0.192,0.183-0.356,0.359-0.454l1-0.572c0.177-0.095,0.386-0.115,0.579-0.056c0.192,0.059,0.355,0.193,0.448,0.371C9.442,12.176,9.468,12.382,9.416,12.576z M9.343,9.918c-0.131,0.243-0.381,0.396-0.656,0.4c-0.128-0.001-0.256-0.03-0.371-0.085l-1-0.572C6.952,9.442,6.827,8.976,7.03,8.605c0.098-0.176,0.261-0.304,0.454-0.357c0.194-0.054,0.4-0.028,0.573,0.073l1,0.571c0.176,0.098,0.304,0.261,0.357,0.455C9.469,9.537,9.443,9.745,9.343,9.918z M12.342,11.604c-0.081,0.164-0.225,0.287-0.4,0.342v5.793c0,0.426-0.345,0.771-0.771,0.771s-0.771-0.345-0.771-0.771v-5.767c-0.173-0.055-0.318-0.179-0.4-0.342c-0.107-0.203-0.118-0.445-0.028-0.657c-0.091-0.212-0.08-0.454,0.029-0.657c0.081-0.164,0.225-0.287,0.4-0.342V4.206c0-0.426,0.345-0.771,0.771-0.771s0.771,0.345,0.771,0.771v5.741c0.175,0.055,0.319,0.179,0.4,0.344c0.109,0.203,0.12,0.444,0.029,0.656C12.461,11.158,12.45,11.4,12.342,11.604z M15.313,13.26c-0.131,0.242-0.382,0.395-0.657,0.4c-0.128-0.001-0.256-0.03-0.371-0.085l-1-0.572c-0.349-0.212-0.467-0.661-0.267-1.017s0.648-0.487,1.009-0.297l1,0.572C15.398,12.46,15.513,12.946,15.313,13.26z M15.385,9.207c-0.054,0.194-0.183,0.357-0.359,0.455l-1,0.571c-0.115,0.055-0.242,0.085-0.371,0.085c-0.275-0.004-0.527-0.157-0.657-0.4c-0.099-0.173-0.125-0.379-0.071-0.573c0.054-0.194,0.183-0.357,0.359-0.455l1-0.571c0.179-0.095,0.386-0.115,0.58-0.056c0.192,0.059,0.355,0.192,0.45,0.371C15.414,8.807,15.44,9.014,15.385,9.207z M17.798,14.657c-0.131,0.242-0.382,0.396-0.657,0.4c-0.128-0.001-0.256-0.03-0.371-0.085l-0.487-0.286c-0.344-0.213-0.459-0.66-0.258-1.013c0.199-0.352,0.642-0.484,1.002-0.298l0.485,0.285C17.883,13.887,17.997,14.345,17.798,14.657z M17.868,7.806c-0.054,0.192-0.181,0.356-0.356,0.455l-0.485,0.286c-0.115,0.055-0.242,0.084-0.371,0.085c-0.271,0.01-0.525-0.135-0.657-0.371c-0.1-0.173-0.126-0.381-0.073-0.573s0.183-0.356,0.358-0.454l0.487-0.286c0.175-0.099,0.379-0.124,0.573-0.07c0.192,0.054,0.356,0.181,0.455,0.356C17.895,7.407,17.922,7.613,17.868,7.806z"/>
+</svg>
diff --git a/browser/themes/shared/preferences/search-arrow-indicator.svg b/browser/themes/shared/preferences/search-arrow-indicator.svg new file mode 100644 index 0000000000..8ac83df260 --- /dev/null +++ b/browser/themes/shared/preferences/search-arrow-indicator.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 8 10"> + <defs> + <path id="anchor" d="M33 20l5 8H28z"/> + </defs> + <g fill="none" fill-rule="evenodd" transform="rotate(90 28 0)"> + <use fill="#FFEB19" href="#anchor"/> + <path stroke="#0C0C0D" stroke-opacity=".2" d="M33 20.94l-4.1 6.56h8.2L33 20.94z"/> + </g> +</svg> diff --git a/browser/themes/shared/preferences/search-bar.svg b/browser/themes/shared/preferences/search-bar.svg new file mode 100644 index 0000000000..0f592bf476 --- /dev/null +++ b/browser/themes/shared/preferences/search-bar.svg @@ -0,0 +1,25 @@ +<!-- 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="631" height="36"> + <style> + .addressBarOutline { + stroke: context-stroke; + stroke-linejoin: round; + stroke-width: 1px; + } + .addressBarIcons { + fill: context-stroke; + fill-rule: evenodd; + } + .searchBarFill { + fill: #0a84ff; + } + </style> + <rect width="630" height="35" x=".5" y=".5" fill="context-fill" class="addressBarOutline" rx="4" ry="4"/> + <rect width="314" height="23" x="110.5" y="6.5" fill="rgba(255,255,255,0.05)" class="addressBarOutline" rx="4" ry="4"/> + <path d="M604 .5h-.5V.5zM126.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="addressBarIcons"/> <rect width="115" height="23" x="429.5" y="6.5" fill-opacity=".2" stroke="#0a84ff" rx="4" ry="4" class="searchBarFill"/> + <path fill-rule="evenodd" d="M445.41 22l-3.09-3.085a3.881 3.881 0 0 0-.64-5.2 3.855 3.855 0 0 0-5.4 5.462 3.958 3.958 0 0 0 5.21.643l3.08 3.085a.622.622 0 0 0 .9 0 .677.677 0 0 0-.06-.9zm-6.23-2.764a2.571 2.571 0 1 1 2.57-2.57 2.652 2.652 0 0 1-2.57 2.574z" class="searchBarFill"/> + <path d="M620.75 17.25h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0 3.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m0-7.5h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5m-34.98 0a.75.75 0 0 0-.52 1.28l3.18 3.22-3.18 3.22a.746.746 0 1 0 1.05 1.06l3.7-3.75a.774.774 0 0 0 0-1.06l-3.7-3.75a.754.754 0 0 0-.53-.22m4.44 0a.715.715 0 0 0-.52.22.754.754 0 0 0 0 1.06l3.17 3.22-3.17 3.22a.754.754 0 0 0 0 1.06.715.715 0 0 0 .52.22.754.754 0 0 0 .53-.22l3.69-3.75a.754.754 0 0 0 0-1.06l-3.69-3.75a.754.754 0 0 0-.53-.22m-22.84 2.25h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm2.63-3h-9a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5zm-4.5 9H561v-7.5h4.5v7.5zm4.5 0h-3.75v-7.5H570v7.5zm-2.63-4.5h1.5a.375.375 0 1 0 0-.75h-1.5a.375.375 0 0 0 0 .75zm0 1.5h.75a.375.375 0 1 0 0-.75h-.75a.375.375 0 0 0 0 .75zm-477.54 2.5a.375.375 0 1 1 .37-.375.356.356 0 0 1-.37.375m-2.6 1.5a.7.7 0 0 1-.742-.75v-4.95l2.961-3 2.97 3V22a.706.706 0 0 1-.74.75h-.74V19a.706.706 0 0 0-.74-.75h-1.49a.706.706 0 0 0-.74.75v3.75h-.739m2.219-10.5a.7.7 0 0 0-.51.225l-5.193 5.25a.738.738 0 1 0 1.037 1.05l.223-.225v4.2a1.5 1.5 0 0 0 1.482 1.5h5.931a1.491 1.491 0 0 0 1.48-1.5v-4.2l.22.225a.678.678 0 0 0 .52.225.663.663 0 0 0 .52-.225.725.725 0 0 0 0-1.05l-5.19-5.25a.709.709 0 0 0-.52-.225M70.375 13a.749.749 0 0 0-.75.75v1.808a5.245 5.245 0 1 0-.788 6.4.75.75 0 0 0-1.061-1.061 3.755 3.755 0 1 1 .776-4.151h-1.927a.75.75 0 0 0 0 1.5h3.75a.749.749 0 0 0 .75-.75v-3.75a.749.749 0 0 0-.75-.75m-34.158 4.296h8.649l-3.206-3.2a.738.738 0 0 1 1.044-1.043l4.474 4.47a.72.72 0 0 1 0 1.043l-4.474 4.47a.72.72 0 0 1-1.044 0 .72.72 0 0 1 0-1.043l3.206-3.2h-8.649a.749.749 0 1 1 0-1.497z" class="addressBarIcons"/> + <path d="M23.783 17.292h-8.649l3.206-3.2a.738.738 0 0 0-1.044-1.043l-4.474 4.47a.72.72 0 0 0 0 1.043l4.474 4.47a.72.72 0 0 0 1.044 0 .72.72 0 0 0 0-1.043l-3.206-3.2h8.649a.749.749 0 1 0 0-1.497z" class="addressBarIcons"/> +</svg> diff --git a/browser/themes/shared/preferences/search.css b/browser/themes/shared/preferences/search.css new file mode 100644 index 0000000000..65651e5583 --- /dev/null +++ b/browser/themes/shared/preferences/search.css @@ -0,0 +1,100 @@ +/* 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/. */ + +.searchBarImage { + height: 36px; + width: 631px; + -moz-context-properties: fill, stroke; + fill: var(--in-content-box-background); + stroke: var(--in-content-box-border-color); +} + +.searchBarImage, +#searchShowSearchTermCheckbox { + margin-inline-start: 33px; +} + +.searchBarImage:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.searchBarHiddenImage { + list-style-image: url("chrome://browser/skin/preferences/no-search-bar.svg"); +} + +#searchBarShownRadio { + /* Allow a little visual space to separate the radio from the image above it. */ + margin-top: 10px; +} + +.searchBarShownImage { + list-style-image: url("chrome://browser/skin/preferences/search-bar.svg"); +} + +#defaultEngine, +#defaultPrivateEngine { + margin-inline-start: 0; +} + +#defaultEngine::part(icon), +#defaultPrivateEngine::part(icon) { + height: 16px; + width: 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: 1px 10px; + width: 16px; + height: 16px; +} + +#engineList treechildren::-moz-tree-drop-feedback { + background-color: SelectedItem; + 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; +} + +#engineList treechildren::-moz-tree-image(bookmarks), +#engineList treechildren::-moz-tree-image(tabs), +#engineList treechildren::-moz-tree-image(history) { + -moz-context-properties: fill; +} + +/* Local search shortcut icon colors. These should match the values in + urlbarView.inc.css. */ +#engineList treechildren::-moz-tree-image(bookmarks) { + fill: #0060df; /* Blue-60 */ +} +#engineList treechildren::-moz-tree-image(tabs) { + fill: #008eaf; /* Teal-70 */ +} +#engineList treechildren::-moz-tree-image(history), +#engineList treechildren::-moz-tree-image(bookmarks, selected), +#engineList treechildren::-moz-tree-image(tabs, selected) { + fill: currentColor; +} + +#engineShown { + min-width: 26px; +} + +#addEnginesBox { + margin-bottom: 1em; +} + +#removeEngineButton, +#restoreDefaultSearchEngines { + margin-inline: 0; +} diff --git a/browser/themes/shared/preferences/siteDataSettings.css b/browser/themes/shared/preferences/siteDataSettings.css new file mode 100644 index 0000000000..c793fb740a --- /dev/null +++ b/browser/themes/shared/preferences/siteDataSettings.css @@ -0,0 +1,64 @@ +/* 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/. */ + +/** + * Site Data - Settings dialog + */ +#sitesList { + height: 20em; +} + +/* Show selected items in high contrast mode. */ +#sitesList > richlistitem[selected] { + outline: 1px solid transparent; +} + +#sitesList > richlistitem > hbox, +.item-box > label { + -moz-box-flex: 1; +} + +.item-box { + padding: 5px 8px; + -moz-box-align: center; + width: 50px; +} + +/** + * Confirmation dialog of removing sites selected + */ +#SiteDataRemoveSelectedDialog { + -moz-box-layout: flex; + padding: 16px; + min-width: 50px; +} + +#SiteDataRemoveSelectedDialog.single-entry { + min-height: 8em; +} + +#SiteDataRemoveSelectedDialog.single-entry .multi-site { + display: none; +} + +#SiteDataRemoveSelectedDialog.multi-entry #removalList { + max-height: 20em; +} + +#SiteDataRemoveSelectedDialog > dialog { + padding: 0; /* override dialog.css */ +} + +#contentContainer { + font-size: 1.2em; + margin-bottom: 10px; +} + +.question-icon { + margin: 6px; +} + +#removing-label { + font-weight: bold; +} diff --git a/browser/themes/shared/preferences/vpn-logo.svg b/browser/themes/shared/preferences/vpn-logo.svg new file mode 100644 index 0000000000..5300d3bf5c --- /dev/null +++ b/browser/themes/shared/preferences/vpn-logo.svg @@ -0,0 +1,4 @@ +<!-- 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="22" height="22" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 2.256a1.692 1.692 0 1 0 0 3.384 1.692 1.692 0 0 0 0-3.384zM7.05 3.948a3.949 3.949 0 1 1 2.071 3.474l-1.7 1.7c.13.236.234.487.313.75h6.533a3.948 3.948 0 1 1 1.906 4.602l-1.7 1.7a3.949 3.949 0 1 1-1.595-1.597l1.7-1.699a3.916 3.916 0 0 1-.311-.75H7.734a3.95 3.95 0 1 1-1.907-4.603l1.698-1.698a3.931 3.931 0 0 1-.474-1.879zm2.258 14.103a1.692 1.692 0 1 1 3.384 0 1.692 1.692 0 0 1-3.384 0zm-5.36-8.744a1.693 1.693 0 1 0 0 3.385 1.693 1.693 0 0 0 0-3.385zM16.36 11a1.692 1.692 0 1 1 3.384 0 1.692 1.692 0 0 1-3.384 0z"/></svg> |
