forked from mirrors/gecko-dev
a895121d8b
Reduced the width of the url nav bar when the window is shrunk to make space for the hamburger menu in proton. Differential Revision: https://phabricator.services.mozilla.com/D108463
948 lines
26 KiB
CSS
948 lines
26 KiB
CSS
/* 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/. */
|
|
|
|
%include downloads/indicator.inc.css
|
|
%include addons/extension-controlled.inc.css
|
|
|
|
%filter substitution
|
|
%define themeTransition background-color 0.1s cubic-bezier(.17,.67,.83,.67)
|
|
%define urlbarBreakoutExtend 2px
|
|
|
|
:root {
|
|
--toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
|
|
--toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
|
|
--toolbar-color: var(--toolbar-non-lwt-textcolor);
|
|
|
|
/* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
|
|
--space-above-tabbar: 0px;
|
|
--tabs-navbar-shadow-size: 1px;
|
|
|
|
--panelui-subview-transition-duration: 150ms;
|
|
|
|
--short-notification-background: #0250BB;
|
|
--short-notification-gradient: #9059FF;
|
|
|
|
--button-bgcolor: color-mix(in srgb, currentColor 13%, transparent);
|
|
--button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent);
|
|
--button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent);
|
|
--button-color: currentColor;
|
|
|
|
--buttons-destructive-bgcolor: #e22850;
|
|
--buttons-destructive-hover-bgcolor: #c50042;
|
|
--buttons-destructive-active-bgcolor: #810220;
|
|
--buttons-destructive-color: #fbfbfe;
|
|
|
|
--identity-box-margin-inline: 4px;
|
|
--identity-box-label-opacity: .8;
|
|
--urlbar-box-bgcolor: var(--button-bgcolor);
|
|
--urlbar-box-hover-bgcolor: color-mix(in srgb, var(--urlbar-box-bgcolor), currentColor 12%);
|
|
--urlbar-box-active-bgcolor: color-mix(in srgb, var(--urlbar-box-bgcolor), currentColor 21%);
|
|
|
|
--urlbar-min-height: 32px;
|
|
--urlbar-icon-padding: 6px; /* (32px - 2px border - 2px padding - 16px icon) / 2 */
|
|
--urlbar-separator-color: var(--panel-separator-color);
|
|
--urlbar-popup-url-color: -moz-nativehyperlinktext;
|
|
|
|
--lwt-additional-images: none;
|
|
--lwt-background-alignment: right top;
|
|
--lwt-background-tiling: no-repeat;
|
|
--lwt-popup-brighttext-url-color: #74c0ff;
|
|
}
|
|
|
|
@supports not -moz-bool-pref("browser.proton.enabled") {
|
|
:root {
|
|
--focus-outline-width: 0;
|
|
--identity-box-margin-inline: 3px;
|
|
--identity-box-label-opacity: .6;
|
|
}
|
|
} /*** END !proton ***/
|
|
|
|
:root[uidensity=compact] {
|
|
--urlbar-min-height: 26px;
|
|
--urlbar-icon-padding: 3px; /* (26px - 2px border - 2px padding - 16px icon) / 2 */
|
|
}
|
|
|
|
@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
|
|
:root {
|
|
--urlbar-min-height: 30px;
|
|
--urlbar-icon-padding: 6px; /* (30px - 2px border - 16px icon) / 2 */
|
|
}
|
|
:root[uidensity=compact] {
|
|
--urlbar-min-height: 26px;
|
|
--urlbar-icon-padding: 4px; /* (26px - 2px border - 16px icon) / 2 */
|
|
}
|
|
:root[uidensity=touch] {
|
|
--urlbar-min-height: 32px;
|
|
--urlbar-icon-padding: 7px; /* (32px - 2px border - 16px icon) / 2 */
|
|
}
|
|
} /*** END !proton ***/
|
|
|
|
:root:-moz-lwtheme {
|
|
--toolbar-bgcolor: rgba(255,255,255,.4);
|
|
--toolbar-bgimage: none;
|
|
--toolbar-color: var(--lwt-text-color, inherit);
|
|
|
|
color: var(--lwt-text-color);
|
|
}
|
|
|
|
@supports -moz-bool-pref("browser.proton.enabled") {
|
|
:root {
|
|
--focus-outline-width: 2px;
|
|
--focus-outline-color: currentColor;
|
|
--focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
|
|
}
|
|
|
|
@media not (prefers-contrast) {
|
|
:root {
|
|
--focus-outline-color: #0061E0;
|
|
}
|
|
|
|
:root:-moz-lwtheme-brighttext {
|
|
--focus-outline-color: #00DDFF;
|
|
}
|
|
}
|
|
|
|
:root[lwt-toolbar-field-brighttext] {
|
|
--lwt-popup-brighttext-url-color: #00ddff;
|
|
}
|
|
} /*** END proton ***/
|
|
|
|
:root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
|
|
--space-above-tabbar: 8px;
|
|
}
|
|
|
|
@media (min-resolution: 1.5dppx) {
|
|
:root {
|
|
--tabs-navbar-shadow-size: 0.5px;
|
|
}
|
|
}
|
|
|
|
@media (min-resolution: 3dppx) {
|
|
:root {
|
|
--tabs-navbar-shadow-size: 0.33px;
|
|
}
|
|
}
|
|
|
|
/* Increase contrast of UI links on dark themes */
|
|
|
|
:root[lwt-popup-brighttext] panel .text-link {
|
|
color: var(--lwt-popup-brighttext-url-color);
|
|
}
|
|
|
|
#PersonalToolbar:-moz-lwtheme .text-link,
|
|
#nav-bar:-moz-lwtheme .text-link {
|
|
color: #0060df;
|
|
}
|
|
|
|
#PersonalToolbar[brighttext]:-moz-lwtheme .text-link,
|
|
#nav-bar[brighttext]:-moz-lwtheme .text-link {
|
|
color: #45a1ff;
|
|
}
|
|
|
|
/* Toolbar / content area border */
|
|
|
|
#navigator-toolbox {
|
|
border-bottom: 1px solid var(--chrome-content-separator-color);
|
|
}
|
|
|
|
:root[customizing] #navigator-toolbox {
|
|
border-bottom-style: none;
|
|
}
|
|
|
|
@supports -moz-bool-pref("browser.proton.enabled") {
|
|
/* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */
|
|
#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child,
|
|
#nav-bar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
|
|
padding-inline-start: var(--toolbar-start-end-padding);
|
|
}
|
|
} /*** END proton ***/
|
|
|
|
:root[sessionrestored] #nav-bar:-moz-lwtheme {
|
|
transition: @themeTransition@;
|
|
}
|
|
|
|
/* Places tooltips */
|
|
|
|
%include places/places-tooltip.inc.css
|
|
|
|
/* Bookmark toolbar */
|
|
|
|
#PersonalToolbar {
|
|
overflow: clip;
|
|
max-height: 4em;
|
|
}
|
|
|
|
@supports not -moz-bool-pref("browser.proton.enabled") {
|
|
#PersonalToolbar {
|
|
padding: 2px 6px;
|
|
}
|
|
} /*** END !proton ***/
|
|
|
|
@supports -moz-bool-pref("browser.proton.enabled") {
|
|
#PersonalToolbar {
|
|
padding-inline: 6px;
|
|
}
|
|
} /*** END proton ***/
|
|
|
|
:root[uidensity=compact] #PersonalToolbar {
|
|
padding-inline: 2px;
|
|
}
|
|
|
|
:root[sessionrestored] #PersonalToolbar:not(.instant) {
|
|
transition: min-height 170ms ease-out, max-height 170ms ease-out, @themeTransition@;
|
|
}
|
|
|
|
#PersonalToolbar[collapsed=true] {
|
|
min-height: 0.1px;
|
|
max-height: 0;
|
|
}
|
|
|
|
:root[sessionrestored] #PersonalToolbar:not(.instant)[collapsed=true] {
|
|
transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
|
|
}
|
|
|
|
#PersonalToolbar[collapsed=false]:not([initialized]) > #personal-toolbar-empty {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/*
|
|
* Make the empty bookmarks toolbar message take up no horizontal space.
|
|
* This avoids two issues:
|
|
* 1) drag/drop of urls/bookmarks to the toolbar not working, because they land
|
|
* on the personal-toolbar-empty element.
|
|
* 2) buttons in the toolbar moving horizontally while the window opens,
|
|
* because the element is first shown at full width and then completely
|
|
* hidden.
|
|
*/
|
|
#PersonalToolbar[collapsed=false] > #personal-toolbar-empty[nowidth] > #personal-toolbar-empty-description {
|
|
margin-inline: 0;
|
|
width: 0;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
#PersonalToolbar[collapsed=true].instant {
|
|
visibility: collapse;
|
|
}
|
|
|
|
#PersonalToolbar[customizing] {
|
|
outline: 1px dashed;
|
|
outline-offset: -3px;
|
|
-moz-outline-radius: 2px;
|
|
}
|
|
|
|
#PersonalToolbar[customizing]:empty {
|
|
/* Avoid the toolbar having no height when there's no items in it */
|
|
min-height: 22px;
|
|
}
|
|
|
|
#PlacesToolbarDropIndicator {
|
|
list-style-image: url(chrome://browser/skin/toolbar-drag-indicator.svg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* rules for menupopup drop indicators */
|
|
menupopup::part(drop-indicator-bar) {
|
|
position: relative;
|
|
/* these two margins must together compensate the indicator's height */
|
|
margin-block: -1px;
|
|
}
|
|
|
|
menupopup::part(drop-indicator) {
|
|
list-style-image: none;
|
|
height: 2px;
|
|
margin-inline-end: -4em;
|
|
background-color: Highlight;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Required for Library animation */
|
|
|
|
#navigator-toolbox {
|
|
position: relative;
|
|
}
|
|
|
|
#library-animatable-box {
|
|
display: none;
|
|
}
|
|
|
|
#library-animatable-box[animate] {
|
|
display: block;
|
|
}
|
|
|
|
/* Back / Forward context menu */
|
|
|
|
.unified-nav-back,
|
|
.unified-nav-forward {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
|
|
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
|
|
list-style-image: url("chrome://browser/skin/back.svg") !important;
|
|
}
|
|
|
|
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
|
|
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
|
|
list-style-image: url("chrome://browser/skin/forward.svg") !important;
|
|
}
|
|
|
|
/* Find bar */
|
|
|
|
.browserContainer > findbar {
|
|
background-color: var(--toolbar-non-lwt-bgcolor);
|
|
color: var(--toolbar-non-lwt-textcolor);
|
|
text-shadow: none;
|
|
}
|
|
|
|
:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme {
|
|
background-color: var(--lwt-accent-color);
|
|
background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
|
|
border-top-color: var(--chrome-content-separator-color);
|
|
color: var(--toolbar-color);
|
|
}
|
|
|
|
:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme:-moz-window-inactive {
|
|
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
|
|
}
|
|
|
|
@supports -moz-bool-pref("browser.proton.enabled") {
|
|
.browserContainer > findbar {
|
|
padding: 6px;
|
|
}
|
|
} /*** END proton ***/
|
|
|
|
/* Private browsing and accessibility indicators */
|
|
|
|
.accessibility-indicator,
|
|
.private-browsing-indicator {
|
|
background-repeat: no-repeat;
|
|
background-size: 100% auto;
|
|
background-position: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-inline: 7px;
|
|
position: relative;
|
|
/* Need to ensure this gets positioned on top of the position:relative #navigator-toolbox
|
|
* in case the dark/light themes give that item a background. */
|
|
z-index: 1;
|
|
}
|
|
|
|
.accessibility-indicator {
|
|
-moz-context-properties: fill;
|
|
fill: #00C8D7;
|
|
background-image: url("chrome://browser/skin/indicator-accessibility.svg");
|
|
-moz-user-focus: normal;
|
|
/* Clear default button styling */
|
|
appearance: none;
|
|
margin-block: unset;
|
|
min-width: unset;
|
|
color: unset;
|
|
text-shadow: unset;
|
|
}
|
|
|
|
.accessibility-indicator:is(:hover, :active, :focus, :-moz-focusring) {
|
|
fill: #008ea4;
|
|
outline: 0;
|
|
}
|
|
|
|
.private-browsing-indicator {
|
|
background-image: url("chrome://browser/skin/indicator-private-browsing.svg");
|
|
}
|
|
|
|
:root:not([accessibilitymode]) .accessibility-indicator,
|
|
:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {
|
|
display: none;
|
|
}
|
|
|
|
/* End private browsing and accessibility indicators */
|
|
|
|
/* Override theme colors since the picker uses extra colors that
|
|
themes cannot set */
|
|
#DateTimePickerPanel {
|
|
--arrowpanel-background: var(--default-arrowpanel-background);
|
|
--arrowpanel-color: var(--default-arrowpanel-color);
|
|
--arrowpanel-border-color: var(--default-arrowpanel-border-color);
|
|
}
|
|
|
|
#DateTimePickerPanel[side="top"],
|
|
#DateTimePickerPanel[side="bottom"] {
|
|
margin-inline: 0;
|
|
}
|
|
|
|
#widget-overflow .webextension-popup-browser {
|
|
background: #fff;
|
|
|
|
/* height set via JS can be lower than the stack min-height,
|
|
ensure the browser takes up at least that min-height */
|
|
min-height: 100%;
|
|
}
|
|
|
|
#addon-progress-notification-progressmeter {
|
|
margin: 2px 4px;
|
|
}
|
|
|
|
/* Permissions popup learn more link. */
|
|
#addon-webext-perm-info {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
/* Contextual Feature Recommendation popup-notification */
|
|
|
|
#cfr-notification-header {
|
|
width: 100%;
|
|
display: block;
|
|
text-align: center;
|
|
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
#cfr-notification-header-stack {
|
|
width: 100%;
|
|
}
|
|
|
|
#cfr-notification-header-label {
|
|
margin: 9px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#cfr-notification-header-link {
|
|
margin: 7px;
|
|
color: inherit;
|
|
cursor: default;
|
|
justify-self: end;
|
|
}
|
|
|
|
#cfr-notification-header-image {
|
|
width: 19px;
|
|
height: 19px;
|
|
padding: 2px;
|
|
-moz-context-properties: fill, fill-opacity;
|
|
fill: currentColor;
|
|
fill-opacity: 0.6;
|
|
list-style-image: url(chrome://activity-stream/content/data/content/assets/glyph-help-24.svg);
|
|
}
|
|
|
|
#cfr-notification-header-image:hover {
|
|
background-color: hsla(0,0%,70%,.2);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification {
|
|
width: 343px;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] {
|
|
background: radial-gradient(circle farthest-side at top right, var(--short-notification-gradient), var(--short-notification-background));
|
|
width: unset;
|
|
max-width: 700px;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"]:-moz-locale-dir(rtl) {
|
|
background: radial-gradient(circle farthest-side at top left, var(--short-notification-gradient), var(--short-notification-background));
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-body-container,
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-footer-container,
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] #cfr-notification-header-link {
|
|
display: none;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] #cfr-notification-header {
|
|
box-shadow: none;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] description {
|
|
font-weight: 400;
|
|
margin: unset;
|
|
margin-inline: 12px;
|
|
transform: translateY(50%);
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button-container,
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-header-container {
|
|
display: inline-flex;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button-container {
|
|
float: inline-end;
|
|
background-color: transparent;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button.popup-notification-primary-button {
|
|
background-color: rgba(216, 216, 216, 0.2);
|
|
border: none;
|
|
border-radius: 2px;
|
|
margin: 4px;
|
|
padding: 3px 12px;
|
|
flex: 1;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button.popup-notification-primary-button:after {
|
|
content: url(chrome://browser/skin/back-12.svg);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
transform: translateY(2px);
|
|
float: inline-end;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"]:-moz-locale-dir(ltr) .popup-notification-button.popup-notification-primary-button:after {
|
|
scale: -1 1;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button.popup-notification-primary-button:hover {
|
|
background-color: rgba(216, 216, 216, 0.4);
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button.popup-notification-primary-button:active {
|
|
background-color: rgba(216, 216, 216, 0.5);
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button.popup-notification-secondary-button {
|
|
margin: 3px;
|
|
border: none;
|
|
border-radius: 2px;
|
|
background-image: url(chrome://browser/skin/stop.svg);
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 10px;
|
|
-moz-context-properties: fill;
|
|
fill: white;
|
|
height: 22px;
|
|
width: 22px;
|
|
padding: 0;
|
|
align-self: center;
|
|
flex: none;
|
|
display: block;
|
|
font-size: 0;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-button.popup-notification-secondary-button:hover {
|
|
background-color: rgba(216, 216, 216, 0.4);
|
|
}
|
|
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-header-container {
|
|
color: white;
|
|
max-width: unset;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_SOCIAL_TRACKING_PROTECTION"] {
|
|
width: 386px;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification .popup-notification-icon {
|
|
margin-inline-end: 4px;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification .cfr-doorhanger-large-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification .popup-notification-body-container {
|
|
width: 100%;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification popupnotificationcontent {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification description {
|
|
margin-bottom: 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
#cfr-notification-footer-text-and-addon-info {
|
|
display: block;
|
|
padding: 10px var(--arrowpanel-padding);
|
|
font-size: 13px;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-category="message_and_animation"] .popup-notification-body-container,
|
|
#contextual-feature-recommendation-notification[data-notification-category="message_and_animation"] #cfr-notification-footer-addon-info,
|
|
#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] #cfr-notification-feature-steps,
|
|
#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] .popup-notification-footer-container {
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
* `icon_and_message` CFR doorhanger with: icon, title and subtitle.
|
|
* No panel header is shown
|
|
*/
|
|
#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] #cfr-notification-header {
|
|
display: none;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] .popup-notification-description {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] popupnotificationcontent {
|
|
display: block; /* This forces the subtitle content to wrap */
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] .popup-notification-body-container {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-bucket="CFR_SOCIAL_TRACKING_PROTECTION"] .popup-notification-description {
|
|
font-size: 13px;
|
|
}
|
|
|
|
#cfr-notification-feature-steps {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#cfr-notification-feature-steps li {
|
|
margin-inline-start: 10px;
|
|
position: relative;
|
|
display: list-item;
|
|
}
|
|
|
|
#cfr-notification-feature-steps li:not(:last-child) {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-category="message_and_animation"] #cfr-notification-footer-text {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#cfr-notification-footer-text,
|
|
#cfr-notification-footer-users,
|
|
#cfr-notification-footer-learn-more-link {
|
|
margin: 0;
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification .popup-notification-learnmore-link,
|
|
#cfr-notification-footer-users,
|
|
#cfr-notification-footer-learn-more-link {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#cfr-notification-footer-addon-info {
|
|
align-items: center;
|
|
display: flex;
|
|
margin-block: 10px 6px;
|
|
}
|
|
|
|
#cfr-notification-footer-filled-stars,
|
|
#cfr-notification-footer-empty-stars {
|
|
-moz-context-properties: fill, fill-opacity;
|
|
background-image: url(chrome://activity-stream/content/data/content/assets/glyph-star-17.svg);
|
|
background-size: 17px;
|
|
fill: currentColor;
|
|
fill-opacity: 0.7;
|
|
height: 16px;
|
|
}
|
|
|
|
#cfr-notification-footer-filled-stars:-moz-locale-dir(rtl),
|
|
#cfr-notification-footer-empty-stars {
|
|
background-position-x: right;
|
|
}
|
|
|
|
#cfr-notification-footer-filled-stars,
|
|
#cfr-notification-footer-empty-stars:-moz-locale-dir(rtl) {
|
|
background-position-x: left;
|
|
}
|
|
|
|
#cfr-notification-footer-empty-stars[tooltiptext] {
|
|
margin-inline-end: 6px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
#cfr-notification-footer-users {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
#cfr-notification-footer-spacer {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#cfr-notification-footer-pintab-animation-container {
|
|
height: 173px;
|
|
padding-top: 129px;
|
|
position: relative;
|
|
width: 343px;
|
|
}
|
|
|
|
#cfr-notification-footer-pintab-animation-container:before {
|
|
content: "";
|
|
background-image: url("chrome://activity-stream/content/data/content/assets/cfr_pinnedtab_animated.png");
|
|
background-position: top center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#cfr-notification-footer-pintab-animation-container:-moz-locale-dir(rtl):before {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
@media (min-resolution: 2dppx) {
|
|
#cfr-notification-footer-pintab-animation-container:before {
|
|
background-image: url("chrome://activity-stream/content/data/content/assets/cfr_pinnedtab_animated@2x.png");
|
|
}
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification[data-notification-category="addon_recommendation"] #cfr-notification-footer-pintab-animation-container {
|
|
display: none;
|
|
}
|
|
|
|
#cfr-notification-footer-pintab-animation-container:not([animate]):before,
|
|
#cfr-notification-footer-pintab-animation-container[paused]:before,
|
|
:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container:not([animate]):before,
|
|
:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container[paused]:before {
|
|
background-image: url("chrome://activity-stream/content/data/content/assets/cfr_pinnedtab_static.png");
|
|
}
|
|
|
|
@media (min-resolution: 2dppx) {
|
|
#cfr-notification-footer-pintab-animation-container:not([animate]):before,
|
|
#cfr-notification-footer-pintab-animation-container[paused]:before,
|
|
:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container:not([animate]):before,
|
|
:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container[paused]:before {
|
|
background-image: url("chrome://activity-stream/content/data/content/assets/cfr_pinnedtab_static@2x.png");
|
|
}
|
|
}
|
|
|
|
:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container:before {
|
|
background-image: url("chrome://activity-stream/content/data/content/assets/cfr_pinnedtab_animated_darktheme.png");
|
|
}
|
|
|
|
@media (min-resolution: 2dppx) {
|
|
:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container:before {
|
|
background-image: url("chrome://activity-stream/content/data/content/assets/cfr_pinnedtab_animated_darktheme@2x.png");
|
|
}
|
|
}
|
|
|
|
#cfr-notification-footer-animation-controls {
|
|
background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.95) 35%);
|
|
padding: 20px var(--arrowpanel-padding) 10px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
:root[lwt-popup-brighttext] #cfr-notification-footer-animation-controls {
|
|
margin-inline-start: 13px;
|
|
}
|
|
|
|
#cfr-notification-footer-pintab-animation-container:not([animate]) #cfr-notification-footer-animation-controls {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#cfr-notification-footer-animation-button {
|
|
background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pause-12.svg");
|
|
background-position: right center;
|
|
background-repeat: no-repeat;
|
|
background-size: 12px 10px;
|
|
-moz-context-properties: fill;
|
|
fill: rgba(12, 12, 13, 0.8);
|
|
padding-inline-end: 10px;
|
|
}
|
|
|
|
#cfr-notification-footer-pintab-animation-container[paused] #cfr-notification-footer-animation-button {
|
|
background-image: url("chrome://activity-stream/content/data/content/assets/glyph-play-12.svg");
|
|
}
|
|
|
|
#cfr-notification-footer-animation-button:-moz-locale-dir(rtl) {
|
|
background-position-x: left;
|
|
}
|
|
|
|
#cfr-notification-footer-animation-label {
|
|
font-weight: 600;
|
|
line-height: 11px;
|
|
}
|
|
|
|
#cfr-notification-footer-animation-button,
|
|
#cfr-notification-footer-animation-label {
|
|
color: rgba(12, 12, 13, 0.8);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#content-mask {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* nhnt11: Workaround to insert a linebreak after the DoH doorhanger's title.
|
|
* The title uses the inline html|b that usually contains the hostname for
|
|
* permission prompts to achieve bold formatting. This is always the 2nd child.
|
|
*/
|
|
.popup-notification-description[popupid="doh-first-time"] > html|b:first-of-type {
|
|
display: block;
|
|
margin-bottom: 4px; /* matches the margin-bottom on description elements */
|
|
}
|
|
|
|
/* Password Manager Doorhanger */
|
|
|
|
.ac-dropmarker {
|
|
appearance: none;
|
|
justify-self: end;
|
|
margin-inline-end: 8px;
|
|
align-self: center;
|
|
}
|
|
|
|
.ac-dropmarker::part(icon) {
|
|
list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
|
|
-moz-context-properties: fill;
|
|
fill: var(--input-color, -moz-DialogText);
|
|
}
|
|
|
|
.ac-has-end-icon {
|
|
/* icon width + icon end margin */
|
|
padding-inline-end: calc(12px + 8px);
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ENABLE DEVTOOLS POPUP */
|
|
|
|
#enable-devtools-popup {
|
|
%if defined(XP_MACOSX) || defined(XP_WIN)
|
|
font-size: 1.18em;
|
|
%endif
|
|
}
|
|
|
|
#sharing-tabs-warning-panel > hbox[type="window"] > vbox > label > #sharing-warning-screen-panel-header,
|
|
#sharing-tabs-warning-panel > hbox[type="screen"] > vbox > label > #sharing-warning-window-panel-header {
|
|
display: none;
|
|
}
|
|
|
|
#sharing-tabs-warning-panel {
|
|
max-width: 400px;
|
|
}
|
|
|
|
#sharing-warning-proceed-to-tab {
|
|
appearance: none;
|
|
border-style: none;
|
|
margin: 0;
|
|
background-color: rgb(0,96,223);
|
|
color: rgb(255,255,255);
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
margin-top: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#sharing-warning-proceed-to-tab:hover {
|
|
background-color: rgb(0,62,170);
|
|
}
|
|
|
|
.webRTC-selectDevice-selector-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.webRTC-selectDevice-selector-container > menulist {
|
|
flex: 1;
|
|
}
|
|
|
|
@supports not -moz-bool-pref("browser.proton.doorhangers.enabled") {
|
|
.webRTC-selectDevice-label {
|
|
margin-top: 6px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#webRTC-selectCamera-icon,
|
|
#webRTC-selectMicrophone-icon {
|
|
display: none;
|
|
}
|
|
} /** END not Proton **/
|
|
|
|
@supports -moz-bool-pref("browser.proton.doorhangers.enabled") {
|
|
popupnotificationcontent {
|
|
margin-block-start: 8px;
|
|
}
|
|
|
|
.popup-notification-checkbox {
|
|
margin-block: 8px 0;
|
|
}
|
|
|
|
.popup-notification-body-container {
|
|
padding-block-end: 0;
|
|
}
|
|
|
|
#webRTC-selectCamera-label,
|
|
#webRTC-selectMicrophone-label {
|
|
display: none;
|
|
}
|
|
|
|
.webRTC-selectDevice-icon {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
margin-inline-end: 6px;
|
|
}
|
|
|
|
#webRTC-selectCamera-icon {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
|
|
}
|
|
|
|
#webRTC-selectMicrophone-icon {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
|
|
}
|
|
|
|
.popup-notification-body :is(description, label, checkbox, input) {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
.popup-notification-body html|input {
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
border: 0;
|
|
outline: 1px solid var(--input-border-color, ThreeDShadow);
|
|
background-color: var(--input-bgcolor, Field);
|
|
color: var(--input-color, FieldText);
|
|
}
|
|
|
|
.popup-notification-body html|input:focus-visible {
|
|
outline: 2px solid var(--focus-outline-color);
|
|
}
|
|
|
|
/**
|
|
* There's already a margin-block-start of 8px on popupnotificationcontent,
|
|
* so the first label only needs 8px of margin-block-start to match the
|
|
* spec.
|
|
*/
|
|
.password-notification-label:first-of-type {
|
|
margin-block-start: 8px;
|
|
}
|
|
|
|
.password-notification-label:not(:first-of-type) {
|
|
margin-block-start: 16px;
|
|
}
|
|
|
|
#password-notification-visibilityToggle {
|
|
margin-block-start: 14px;
|
|
}
|
|
|
|
#password-notification-visibilityToggle > .checkbox-label-box > .checkbox-label {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.popup-notification-description > b {
|
|
font-weight: inherit;
|
|
}
|
|
|
|
.popup-notification-description {
|
|
font-weight: 600;
|
|
}
|
|
} /** END Proton **/
|
|
|
|
#tab-notification-deck {
|
|
display: flex;
|
|
}
|