347 lines
9.4 KiB
CSS
347 lines
9.4 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
|
|
|
|
.popup-notification-icon,
|
|
.identity-popup-permission-icon {
|
|
-moz-context-properties: fill, fill-opacity;
|
|
fill: currentColor;
|
|
fill-opacity: 0.6;
|
|
}
|
|
|
|
#notification-popup-box {
|
|
padding: 5px 0px;
|
|
margin: -5px 0px;
|
|
margin-inline-end: -5px;
|
|
padding-inline-end: 5px;
|
|
}
|
|
|
|
/* This class can be used alone or in combination with the class defining the
|
|
type of icon displayed. This rule must be defined before the others in order
|
|
for its list-style-image to be overridden. */
|
|
.notification-anchor-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/default-info.svg);
|
|
}
|
|
|
|
/* INDIVIDUAL NOTIFICATIONS */
|
|
|
|
.focus-tab-by-prompt-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/focus-tab-by-prompt.svg);
|
|
}
|
|
|
|
.popup-notification-icon[popupid="persistent-storage"],
|
|
.persistent-storage-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg);
|
|
}
|
|
|
|
.persistent-storage-icon.blocked-permission-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage-blocked.svg);
|
|
}
|
|
|
|
.popup-notification-icon[popupid="web-notifications"],
|
|
.desktop-notification-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg);
|
|
}
|
|
|
|
.desktop-notification-icon.blocked-permission-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification-blocked.svg);
|
|
}
|
|
|
|
.geo-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/geo.svg);
|
|
}
|
|
|
|
.geo-icon.blocked-permission-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/geo-blocked.svg);
|
|
}
|
|
|
|
.popup-notification-icon[popupid="autoplay-media"],
|
|
.autoplay-media-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg);
|
|
}
|
|
|
|
.autoplay-media-icon.blocked-permission-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media-blocked.svg);
|
|
}
|
|
|
|
.popup-notification-icon[popupid="geolocation"] {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/geo-detailed.svg);
|
|
}
|
|
|
|
.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
|
|
.indexedDB-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/indexedDB.svg);
|
|
}
|
|
|
|
.login-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/login.svg);
|
|
}
|
|
|
|
.popup-notification-icon[popupid="password"] {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/login-detailed.svg);
|
|
}
|
|
|
|
.camera-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
|
|
}
|
|
|
|
.camera-icon.in-use {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
|
|
}
|
|
|
|
.camera-icon.blocked-permission-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg);
|
|
}
|
|
|
|
.microphone-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
|
|
}
|
|
|
|
.microphone-icon.in-use {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
|
|
}
|
|
|
|
.microphone-icon.blocked-permission-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg);
|
|
}
|
|
|
|
.popup-notification-icon.microphone-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/microphone-detailed.svg);
|
|
}
|
|
|
|
.screen-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/screen.svg);
|
|
}
|
|
|
|
.screen-icon.in-use {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/screen.svg);
|
|
}
|
|
|
|
.screen-icon.blocked-permission-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg);
|
|
}
|
|
|
|
.midi-icon,
|
|
.midi-sysex-icon,
|
|
.popup-notification-icon[popupid="midi"],
|
|
.popup-notification-icon[popupid="midi-sysex"] {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/midi.svg);
|
|
}
|
|
|
|
#canvas-notification-icon,
|
|
.popup-notification-icon[popupid="canvas-permissions-prompt"],
|
|
.canvas-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/canvas.svg);
|
|
}
|
|
|
|
.canvas-icon.blocked-permission-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/canvas-blocked.svg);
|
|
}
|
|
|
|
#webauthn-notification-icon,
|
|
.popup-notification-icon[popupid^="webauthn-prompt-"] {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/webauthn.svg);
|
|
}
|
|
|
|
#webRTC-preview:not([hidden]) {
|
|
display: -moz-stack;
|
|
border-radius: 4px;
|
|
border: 1px solid GrayText;
|
|
overflow: hidden;
|
|
min-width: 300px;
|
|
min-height: 10em;
|
|
}
|
|
|
|
html|*#webRTC-previewVideo {
|
|
width: 300px;
|
|
/* If we don't set the min-width, width is ignored. */
|
|
min-width: 300px;
|
|
max-height: 200px;
|
|
}
|
|
|
|
#webRTC-previewWarning {
|
|
background: rgba(255,217,99,.8) url("chrome://browser/skin/warning.svg") no-repeat .75em .75em;
|
|
-moz-context-properties: fill;
|
|
fill: #fff;
|
|
margin: 0;
|
|
padding: .5em;
|
|
padding-inline-start: calc(1.5em + 16px);
|
|
border-top: 1px solid GrayText;
|
|
}
|
|
|
|
#webRTC-previewWarning > .text-link {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
/* This icon has a block sign in it, so we don't need a blocked version. */
|
|
.popup-icon {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/popup.svg");
|
|
}
|
|
|
|
.popup-subitem {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/popup-subitem.svg");
|
|
margin-inline-start: 30px;
|
|
}
|
|
|
|
.identity-popup-popup-menulist {
|
|
min-width: 6.5em;
|
|
}
|
|
|
|
/* EME */
|
|
|
|
.popup-notification-icon[popupid="drmContentPlaying"],
|
|
.drm-icon {
|
|
list-style-image: url("chrome://browser/skin/drm-icon.svg");
|
|
}
|
|
|
|
#eme-notification-icon[firstplay=true] {
|
|
animation: emeTeachingMoment 0.2s linear 0s 5 normal;
|
|
}
|
|
|
|
@keyframes emeTeachingMoment {
|
|
0% {transform: translateX(0); }
|
|
25% {transform: translateX(3px) }
|
|
75% {transform: translateX(-3px) }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
|
|
/* INSTALL ADDONS */
|
|
|
|
.install-icon {
|
|
list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.svg);
|
|
}
|
|
|
|
.popup-notification-icon[popupid="xpinstall-disabled"],
|
|
.popup-notification-icon[popupid="addon-install-blocked"],
|
|
.popup-notification-icon[popupid="addon-install-origin-blocked"] {
|
|
list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
|
|
}
|
|
|
|
.popup-notification-icon[popupid="addon-progress"] {
|
|
list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
|
|
}
|
|
|
|
.popup-notification-icon[popupid="addon-install-failed"] {
|
|
list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
|
|
}
|
|
|
|
.popup-notification-icon[popupid="addon-install-confirmation"] {
|
|
list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
|
|
}
|
|
|
|
#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
|
|
list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
|
|
}
|
|
|
|
.popup-notification-icon[popupid="addon-install-complete"] {
|
|
list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
|
|
}
|
|
|
|
/* OFFLINE APPS */
|
|
|
|
.popup-notification-icon[popupid*="offline-app-requested"],
|
|
.popup-notification-icon[popupid="offline-app-usage"] {
|
|
list-style-image: url(chrome://global/skin/icons/question-64.png);
|
|
}
|
|
|
|
/* PLUGINS */
|
|
|
|
.plugin-icon {
|
|
list-style-image: url(chrome://mozapps/skin/plugins/plugin.svg);
|
|
transition: fill 1.5s;
|
|
}
|
|
|
|
.plugin-icon.blocked-permission-icon {
|
|
list-style-image: url(chrome://mozapps/skin/plugins/plugin-blocked.svg);
|
|
}
|
|
|
|
#plugin-icon-badge {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/plugin-badge.svg);
|
|
opacity: 0;
|
|
transition: opacity 1.5s;
|
|
}
|
|
|
|
#plugins-notification-icon[extraAttr="inactive"] > .plugin-icon {
|
|
fill: #bfbfbf;
|
|
}
|
|
|
|
#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge {
|
|
opacity: 1;
|
|
}
|
|
|
|
#plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge[animate] {
|
|
animation: blink-badge 1000ms ease 0s 5 alternate both;
|
|
}
|
|
|
|
@keyframes blink-badge {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.plugin-blocked > .plugin-icon {
|
|
list-style-image: url(chrome://mozapps/skin/plugins/plugin-blocked.svg);
|
|
fill: #d92215 !important;
|
|
}
|
|
|
|
.plugin-blocked > #plugin-icon-badge {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#notification-popup-box[hidden] {
|
|
/* Override display:none to make the pluginBlockedNotification animation work
|
|
when showing the notification repeatedly. */
|
|
display: -moz-box;
|
|
visibility: collapse;
|
|
}
|
|
|
|
#plugins-notification-icon.plugin-blocked[showing] {
|
|
animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
|
|
}
|
|
|
|
@keyframes pluginBlockedNotification {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* TRANSLATION */
|
|
|
|
.translation-icon {
|
|
list-style-image: url(chrome://browser/skin/translation-16.png);
|
|
-moz-image-region: rect(0px, 16px, 16px, 0px);
|
|
}
|
|
|
|
.translation-icon.in-use {
|
|
-moz-image-region: rect(0px, 32px, 16px, 16px);
|
|
}
|
|
|
|
%ifdef XP_MACOSX
|
|
@media (min-resolution: 1.1dppx) {
|
|
.translation-icon {
|
|
list-style-image: url(chrome://browser/skin/translation-16@2x.png);
|
|
-moz-image-region: rect(0px, 32px, 32px, 0px);
|
|
}
|
|
|
|
.translation-icon.in-use {
|
|
-moz-image-region: rect(0px, 64px, 32px, 32px);
|
|
}
|
|
}
|
|
%endif
|
|
|
|
/* UPDATE */
|
|
.popup-notification-icon[popupid="update-available"],
|
|
.popup-notification-icon[popupid="update-manual"],
|
|
.popup-notification-icon[popupid="update-restart"] {
|
|
background: #74BF43 url(chrome://browser/skin/notification-icons/update.svg) no-repeat center;
|
|
border-radius: 50%;
|
|
}
|