forked from mirrors/gecko-dev
322 lines
9.3 KiB
CSS
322 lines
9.3 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 {
|
|
padding-inline-start: 8px;
|
|
padding-inline-end: 4px;
|
|
margin-inline-end: 4px;
|
|
/* Set default fill for icons in the identity block.
|
|
Individual icons can override this. */
|
|
fill: currentColor;
|
|
fill-opacity: .6;
|
|
/* This is for tracking-protection-icon's slide-in animation. */
|
|
overflow: hidden;
|
|
}
|
|
|
|
#identity-box:hover:not(.no-hover):not([open=true]) {
|
|
background-color: hsla(0,0%,70%,.2);
|
|
fill-opacity: .8;
|
|
}
|
|
|
|
#identity-box:hover:active:not(.no-hover),
|
|
#identity-box[open=true] {
|
|
background-color: hsla(0,0%,70%,.3);
|
|
fill-opacity: .8;
|
|
}
|
|
|
|
#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
|
|
color: #058B00;
|
|
}
|
|
|
|
:root[lwt-toolbar-field-brighttext] #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
|
|
color: #30e60b;
|
|
}
|
|
|
|
#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
|
|
%ifdef MOZ_OFFICIAL_BRANDING
|
|
color: rgb(229,115,0);
|
|
%else
|
|
color: inherit;
|
|
%endif
|
|
}
|
|
|
|
#identity-icon-labels:-moz-locale-dir(ltr) {
|
|
padding-left: 4px;
|
|
}
|
|
#identity-icon-labels:-moz-locale-dir(rtl) {
|
|
padding-right: 4px;
|
|
}
|
|
#identity-box:not(.chromeUI):not(.extensionPage):not(.notSecureText) {
|
|
--urlbar-separator-color: transparent;
|
|
}
|
|
#urlbar[pageproxystate=valid] > #identity-box.verifiedIdentity {
|
|
--urlbar-separator-color: rgba(18, 188, 0, .5);
|
|
}
|
|
|
|
#urlbar[pageproxystate=valid] > #identity-box.notSecureText,
|
|
#urlbar[pageproxystate=valid] > #identity-box.verifiedIdentity,
|
|
#urlbar[pageproxystate=valid] > #identity-box.chromeUI,
|
|
#urlbar[pageproxystate=valid] > #identity-box.extensionPage,
|
|
#urlbar-display-box {
|
|
margin-inline-end: 8px;
|
|
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;
|
|
}
|
|
|
|
#urlbar[pageproxystate=valid] > #identity-box.notSecureText,
|
|
#urlbar[pageproxystate=valid] > #identity-box.verifiedIdentity,
|
|
#urlbar[pageproxystate=valid] > #identity-box.chromeUI,
|
|
#urlbar[pageproxystate=valid] > #identity-box.extensionPage {
|
|
padding-inline-end: 8px;
|
|
}
|
|
|
|
#urlbar-display-box {
|
|
padding-inline-start: 4px;
|
|
border-inline-start: 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;
|
|
}
|
|
|
|
#sharing-icon,
|
|
#identity-icon,
|
|
#tracking-protection-icon,
|
|
#connection-icon,
|
|
.notification-anchor-icon,
|
|
#blocked-permissions-container > .blocked-permission-icon,
|
|
#extension-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-inline-start: 4px;
|
|
-moz-context-properties: fill, fill-opacity;
|
|
}
|
|
|
|
/* MAIN IDENTITY ICON */
|
|
#identity-icon {
|
|
margin-inline-start: 0;
|
|
list-style-image: url(chrome://browser/skin/identity-icon.svg);
|
|
}
|
|
|
|
#identity-box.grantedPermissions > #identity-icon {
|
|
list-style-image: url(chrome://browser/skin/identity-icon-notice.svg);
|
|
}
|
|
|
|
#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 {
|
|
list-style-image: url(chrome://browser/skin/search-glass.svg);
|
|
fill-opacity: .4;
|
|
}
|
|
|
|
#urlbar[actiontype="extension"] > #identity-box > #identity-icon {
|
|
list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.svg);
|
|
}
|
|
|
|
/* SHARING ICON */
|
|
|
|
#identity-box[sharing="camera"] > #sharing-icon {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
|
|
}
|
|
|
|
#identity-box[sharing="microphone"] > #sharing-icon {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
|
|
}
|
|
|
|
#identity-box[sharing="screen"] > #sharing-icon {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
|
|
}
|
|
|
|
#identity-box:not([sharing]) > #sharing-icon {
|
|
display: none;
|
|
}
|
|
|
|
#identity-box[sharing]:not([paused]) > #sharing-icon {
|
|
animation: 1.5s ease in-use-blink infinite;
|
|
-moz-context-properties: fill;
|
|
fill: rgb(224, 41, 29);
|
|
}
|
|
|
|
@keyframes in-use-blink {
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* TRACKING PROTECTION ICON */
|
|
|
|
#tracking-protection-icon-box {
|
|
visibility: collapse;
|
|
overflow: hidden;
|
|
width: 20px;
|
|
margin-inline-end: -20px;
|
|
}
|
|
|
|
#tracking-protection-icon-box[active],
|
|
#tracking-protection-icon-box[hasException] {
|
|
margin-inline-end: 0px;
|
|
visibility: visible;
|
|
}
|
|
|
|
#tracking-protection-icon-box[animationsenabled][animate] {
|
|
transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
|
|
}
|
|
|
|
#tracking-protection-icon-box:not([hasException])[active][animationsenabled] > #tracking-protection-icon,
|
|
#tracking-protection-icon-box:not([animationsenabled]) > #tracking-protection-icon-animatable-box {
|
|
display: none;
|
|
}
|
|
|
|
#tracking-protection-icon-box > #tracking-protection-icon-animatable-box {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
top: calc(50% - 10px); /* half the height of the sprite */
|
|
margin-inline-start: 4px;
|
|
width: 16px;
|
|
height: 20px;
|
|
}
|
|
|
|
#tracking-protection-icon-box:not([hasException])[active] #tracking-protection-icon-animatable-image {
|
|
background-image: url(chrome://browser/skin/tracking-protection-animation.svg);
|
|
transform: translateX(-1232px);
|
|
width: 1248px;
|
|
background-size: auto;
|
|
height: 16px;
|
|
min-height: 20px;
|
|
-moz-context-properties: fill, fill-opacity;
|
|
}
|
|
|
|
#tracking-protection-icon-box[active] #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
|
|
transform: scaleX(-1) translateX(-1232px);
|
|
}
|
|
|
|
#tracking-protection-icon-box[active][animate] #tracking-protection-icon-animatable-image {
|
|
animation-name: tp-icon-animation;
|
|
animation-timing-function: steps(77);
|
|
animation-duration: 3s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
#tracking-protection-icon-box[active][animate] #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
|
|
animation-name: tp-icon-animation-rtl;
|
|
}
|
|
|
|
#tracking-protection-icon-box[active] > #tracking-protection-icon {
|
|
list-style-image: url(chrome://browser/skin/tracking-protection.svg);
|
|
}
|
|
|
|
#tracking-protection-icon-box[hasException] > #tracking-protection-icon {
|
|
list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg);
|
|
}
|
|
|
|
#urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
|
|
#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon-box {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#tracking-protection-icon-animatable-image {
|
|
--tracking-protection-shield-color: #7f00d6;
|
|
}
|
|
|
|
:root[lwt-toolbar-field-brighttext] #tracking-protection-icon-animatable-image {
|
|
--tracking-protection-shield-color: #c069ff;
|
|
}
|
|
|
|
@keyframes tp-icon-animation {
|
|
from {
|
|
transform: translateX(0);
|
|
fill-opacity: 0.3;
|
|
}
|
|
30% {
|
|
fill: inherit;
|
|
fill-opacity: 0.3;
|
|
}
|
|
31% {
|
|
fill: var(--tracking-protection-shield-color);
|
|
fill-opacity: 1;
|
|
}
|
|
50% {
|
|
transform: translateX(-1232px);
|
|
}
|
|
65% {
|
|
fill: var(--tracking-protection-shield-color);
|
|
fill-opacity: 1;
|
|
}
|
|
to {
|
|
fill: inherit;
|
|
fill-opacity: inherit;
|
|
}
|
|
}
|
|
|
|
@keyframes tp-icon-animation-rtl {
|
|
from {
|
|
transform: scaleX(-1) translateX(0);
|
|
fill-opacity: 0.3;
|
|
}
|
|
30% {
|
|
fill: inherit;
|
|
fill-opacity: 0.3;
|
|
}
|
|
31% {
|
|
fill: var(--tracking-protection-shield-color);
|
|
fill-opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scaleX(-1) translateX(-1232px);
|
|
}
|
|
65% {
|
|
fill: var(--tracking-protection-shield-color);
|
|
fill-opacity: 1;
|
|
}
|
|
to {
|
|
fill: inherit;
|
|
fill-opacity: inherit;
|
|
}
|
|
}
|
|
|
|
/* CONNECTION ICON, EXTENSION ICON, REMOTE CONTROL ICON */
|
|
|
|
#connection-icon,
|
|
#extension-icon,
|
|
#remote-control-icon {
|
|
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;
|
|
-moz-context-properties: fill;
|
|
fill: #12BC00;
|
|
}
|
|
#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);
|
|
visibility: visible;
|
|
fill: unset;
|
|
-moz-context-properties: fill, fill-opacity;
|
|
}
|
|
|
|
#urlbar[pageproxystate="valid"] > #identity-box.notSecure > #connection-icon,
|
|
#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);
|
|
visibility: visible;
|
|
}
|
|
|
|
#identity-box.extensionPage > #extension-icon {
|
|
list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.svg);
|
|
visibility: visible;
|
|
}
|
|
|
|
#main-window[remotecontrol] #remote-control-icon {
|
|
list-style-image: url(chrome://browser/content/static-robot.png);
|
|
visibility: visible;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-inline-start: 2px;
|
|
}
|