183 lines
5.8 KiB
CSS
183 lines
5.8 KiB
CSS
%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
|
|
|
|
#identity-box {
|
|
--identity-box-hover-background-color: rgb(231,230,230);
|
|
--identity-box-selected-background-color: rgb(211,210,210);
|
|
--identity-box-verified-color: hsl(92,100%,30%);
|
|
%ifdef MOZ_OFFICIAL_BRANDING
|
|
--identity-box-chrome-color: rgb(229,115,0);
|
|
%else
|
|
%if MOZ_UPDATE_CHANNEL == aurora
|
|
--identity-box-chrome-color: rgb(51,30,84);
|
|
%else
|
|
--identity-box-chrome-color: rgb(0,33,71);
|
|
%endif
|
|
%endif
|
|
|
|
border-inline-end: 1px solid var(--urlbar-separator-color);
|
|
border-image: linear-gradient(transparent 15%,
|
|
var(--urlbar-separator-color) 15%,
|
|
var(--urlbar-separator-color) 85%,
|
|
transparent 85%);
|
|
border-image-slice: 1;
|
|
font-size: .9em;
|
|
padding: 3px 5px;
|
|
margin-inline-end: 4px;
|
|
overflow: hidden;
|
|
/* The latter two properties have a transition to handle the delayed hiding of
|
|
the forward button when hovered. */
|
|
transition: background-color 150ms ease, padding-left, padding-right;
|
|
}
|
|
|
|
#identity-box:hover,
|
|
#identity-box[open=true] {
|
|
border-image-source: none;
|
|
}
|
|
|
|
#identity-box:hover {
|
|
background-color: var(--identity-box-hover-background-color);
|
|
}
|
|
|
|
#identity-box:hover:active,
|
|
#identity-box[open=true] {
|
|
background-color: var(--identity-box-selected-background-color);
|
|
}
|
|
|
|
#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
|
|
color: var(--identity-box-verified-color);
|
|
}
|
|
|
|
#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
|
|
color: var(--identity-box-chrome-color);
|
|
}
|
|
|
|
#identity-icon-labels {
|
|
padding-inline-start: 2px;
|
|
}
|
|
|
|
#notification-popup-box:not([hidden]) + #identity-box {
|
|
padding-inline-start: 10px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
@conditionalForwardWithUrlbar@ > #urlbar > #identity-box {
|
|
border-radius: 0;
|
|
}
|
|
|
|
@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
|
|
padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 5px);
|
|
}
|
|
|
|
@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #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: 0s, 100s, 100s;
|
|
}
|
|
|
|
@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #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;
|
|
list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
|
|
}
|
|
|
|
#identity-box:hover > #identity-icon,
|
|
#identity-box[open=true] > #identity-icon {
|
|
list-style-image: url(chrome://browser/skin/identity-icon.svg#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 {
|
|
opacity: 0.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;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* TRACKING PROTECTION ICON */
|
|
|
|
#tracking-protection-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-inline-start: 2px;
|
|
margin-inline-end: 0;
|
|
list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
|
|
opacity: 1;
|
|
}
|
|
|
|
#tracking-protection-icon[state="loaded-tracking-content"] {
|
|
list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
|
|
#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
|
|
list-style-image: url(chrome://browser/skin/identity-secure.svg);
|
|
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/identity-mixed-active-loaded.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 {
|
|
list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
|
|
visibility: visible;
|
|
}
|
|
|
|
#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
|
|
list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
|
|
visibility: visible;
|
|
}
|
|
|
|
#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
|
|
list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
|
|
visibility: visible;
|
|
}
|