/* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] {
border-bottom: 1px solid var(--panel-separator-color);
- background-color: #000000;
+ padding-inline-start: 0;
+ padding-inline-end: 6px;
+ min-height: 3em;
+}
+
+/* Opt-in notification */
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] {
padding: 6px 0;
padding-inline-start: 44px;
- padding-inline-end: 6px;
+ background-color: #000000;
background-image: url("chrome://browser/skin/info.svg");
background-clip: padding-box;
background-position: 20px center;
background-size: 16px 16px;
}
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
background-position: right 20px center;
}
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description {
margin: 0;
padding: 0;
}
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
margin-inline-start: 0;
}
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button {
-moz-appearance: none;
min-width: 80px;
border-radius: 3px;
margin-inline-start: 10px;
}
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"] {
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"]:hover {
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"] {
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"]:hover {
+}
+
+/* Opt-out hint */
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-out"] {
+ font: message-box;
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description {
+ margin: auto;
+ padding: 4px 8px;
+ background-color: #000000;
+ border: 1px solid #FFCF00;
+ border-radius: 4px;
+ color: #A09090;
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span {
+ unicode-bidi: embed;
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span.prefix {
+ font-weight: bold;
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] > hbox[anonid="search-suggestions-opt-out"] > .ac-site-icon {
+ transform: scale(0);
+ animation-name: search-suggestions-hint-grow;
+ animation-duration: 500ms;
+ animation-delay: 500ms;
+ animation-iteration-count: 1;
+ animation-timing-function: ease-in-out;
+ animation-fill-mode: forwards;
+}
+
+@keyframes search-suggestions-hint-grow {
+ 0% { transform: scale(0); }
+ 40% { transform: scale(1.5); }
+ 60% { transform: scale(1); }
+ 80% { transform: scale(1.25); }
+ 100% { transform: scale(1); }
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] > .ac-title-text {
+ text-overflow: clip;
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] {
+ overflow: hidden;
+ max-width: 8ch;
+ width: 0;
+ animation-name: search-suggestions-hint-typing;
+ animation-duration: 500ms;
+ animation-delay: 750ms;
+ animation-iteration-count: 1;
+ animation-fill-mode: forwards;
+}
+
+@keyframes search-suggestions-hint-typing {
+ from { width: 0; }
+ to { width: 8ch; }
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"] {
+ opacity: 0;
+ animation-duration: 250ms;
+ animation-delay: 1500ms;
+ animation-iteration-count: 1;
+ animation-fill-mode: forwards;
}
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
+/* Margin-inline-start can't be animated yet */
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(ltr) {
+ margin-left: 160px;
+ animation-name: search-suggestions-hint-buildin-ltr;
}
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
+@keyframes search-suggestions-hint-buildin-ltr {
+ from { margin-left: 160px; opacity: 0; }
+ to { margin-left: 0; opacity: 1; }
+}
+
+#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(rtl) {
+ /* Should be margin-inline-start but that can't be animated yet */
+ margin-right: 160px;
+ animation-name: search-suggestions-hint-buildin-rtl;
+}
+
+@keyframes search-suggestions-hint-buildin-rtl {
+ from { margin-right: 160px; opacity: 0; }
+ to { margin-right: 0; opacity: 1; }
+}
+
+#search-suggestions-change-settings {
+ opacity: 0;
+ animation-name: search-suggestions-hint-fadein;
+ animation-duration: 500ms;
+ animation-delay: 1800ms;
+ animation-iteration-count: 1;
+ animation-fill-mode: forwards;
}
-#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
+@keyframes search-suggestions-hint-fadein {
+ from { opacity: 0 }
+ to { opacity: 1 }
}
/* === END urlbarSearchSuggestionsNotification.inc.css === */
/* page proxy icon */
/* === BEGIN identity-block.inc.css === */
-/* === BEGIN identity-block/icons.inc.css === */
-
-#identity-icon {
- list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
-}
-
-#identity-box:hover > #identity-icon:not(.no-hover),
-#identity-box[open=true] > #identity-icon {
- list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
-}
-
-#identity-box.grantedPermissions > #identity-icon {
- list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
-}
-
-#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
-#identity-box.grantedPermissions[open=true] > #identity-icon {
- list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
- list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
-}
-
-#tracking-protection-icon {
- list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
-}
-
-#tracking-protection-icon[state="loaded-tracking-content"] {
- list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
-}
-
-
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
- list-style-image: url(chrome://browser/skin/connection-secure.svg);
- visibility: visible;
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
- list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
- visibility: visible;
-}
-
-#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
-#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
- list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
- visibility: visible;
-}
-
-/* === END identity-block/icons.inc.css === */
-
#identity-box {
font-size: .9em;
border-radius: 2px;
padding-inline-start: 2.01px;
}
+#identity-icon,
+#tracking-protection-icon,
+#connection-icon,
+#extension-icon {
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill;
+ fill: #A09090;
+}
+
+#identity-icon:-moz-lwtheme,
+#tracking-protection-icon:-moz-lwtheme,
+#connection-icon:-moz-lwtheme,
+#extension-icon:-moz-lwtheme {
+/* fill: rgba(0,0,0,.6);*/
+}
+
/* MAIN IDENTITY ICON */
#identity-icon {
width: 16px;
height: 16px;
+ list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
+}
+
+#identity-box:hover > #identity-icon:not(.no-hover),
+#identity-box[open=true] > #identity-icon {
+ list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
+}
+
+#identity-box.grantedPermissions > #identity-icon {
+ list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
+}
+
+#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
+#identity-box.grantedPermissions[open=true] > #identity-icon {
+ list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
+ list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
}
#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
}
#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
- -moz-image-region: inherit;
list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
- context-properties: fill;
- fill: #FFCF00;
- width: 16px;
- 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 */
/* TRACKING PROTECTION ICON */
#tracking-protection-icon {
- width: 16px;
- height: 16px;
+ list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
margin-inline-start: 2px;
margin-inline-end: 0;
}
+#tracking-protection-icon[state="loaded-tracking-content"] {
+ list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
+}
+
#tracking-protection-icon[animate] {
transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
}
transition: none;
}
+#urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
visibility: collapse;
}
-/* CONNECTION ICON */
+/* CONNECTION ICON, EXTENSION ICON */
-#connection-icon {
+#connection-icon,
+#extension-icon {
width: 16px;
height: 16px;
margin-inline-start: 2px;
visibility: collapse;
}
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
+ list-style-image: url(chrome://browser/skin/connection-secure.svg);
+ visibility: visible;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
+ list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
+ visibility: visible;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
+ list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
+ visibility: visible;
+}
+
+#identity-box.extensionPage > #extension-icon {
+ list-style-image: url(chrome://browser/skin/controlcenter/extension.svg);
+ visibility: visible;
+}
+
/* REMOTE CONTROL ICON */
#main-window[remotecontrol] #remote-control-icon {
--- /dev/null
+<?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">
+ <path fill="context-fill" 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>
- 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">
-<style>
-.fieldtext {
- fill: #A09090;
-}
-
-.highlighttext {
- fill: #FFCF00;
-}
-
-.black {
- fill: #FFCF00;
-}
-
-.white {
- fill: #FFCF00;
-}
-</style>
<style>
use:not(:target) {
display: none;
}
- use {
- fill-rule: evenodd;
- }
</style>
<defs>
<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"/>
+ <use fill="context-fill" fill-rule="evenodd" id="normal" xlink:href="#glyph-normal"/>
+ <use fill="context-fill" fill-rule="evenodd" id="hover" xlink:href="#glyph-hover"/>
+ <use fill="context-fill" fill-rule="evenodd" id="notice" xlink:href="#glyph-notice"/>
+ <use fill="context-fill" fill-rule="evenodd" id="notice-hover" xlink:href="#glyph-notice-hover"/>
</svg>