mirror of
https://github.com/Feodor2/Mypal68.git
synced 2025-06-18 14:55:44 -04:00
793 lines
24 KiB
CSS
793 lines
24 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
|
|
|
|
%define fieldBorderColor hsla(240,5%,5%,.25)
|
|
%define fieldHoverBorderColor hsla(240,5%,5%,.35)
|
|
|
|
:root {
|
|
--toolbar-field-focus-border-color: Highlight;
|
|
|
|
/* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
|
|
--urlbar-icon-padding: 6px;
|
|
}
|
|
|
|
:root[uidensity=compact] {
|
|
/* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
|
|
--urlbar-icon-padding: 4px;
|
|
}
|
|
|
|
:root[uidensity=touch] {
|
|
/* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
|
|
--urlbar-icon-padding: 7px;
|
|
}
|
|
|
|
#urlbar,
|
|
.searchbar-textbox {
|
|
-moz-appearance: none;
|
|
background-clip: content-box;
|
|
border: 1px solid @fieldBorderColor@;
|
|
border-radius: var(--toolbarbutton-border-radius);
|
|
box-shadow: 0 1px 4px rgba(0,0,0,.05);
|
|
outline: none;
|
|
padding: 0;
|
|
margin: 3px 5px;
|
|
min-height: 30px;
|
|
cursor: default;
|
|
overflow: -moz-hidden-unscrollable;
|
|
}
|
|
|
|
#urlbar:hover,
|
|
.searchbar-textbox:hover {
|
|
border-color: @fieldHoverBorderColor@;
|
|
box-shadow: 0 1px 6px rgba(0,0,0,.1);
|
|
}
|
|
|
|
#urlbar:-moz-lwtheme,
|
|
#navigator-toolbox .searchbar-textbox:-moz-lwtheme {
|
|
background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
|
|
color: var(--lwt-toolbar-field-color, black);
|
|
}
|
|
|
|
#urlbar:not([focused="true"]):-moz-lwtheme,
|
|
#urlbar.hidden-focus:-moz-lwtheme,
|
|
#navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme {
|
|
border-color: var(--lwt-toolbar-field-border-color, @fieldBorderColor@);
|
|
}
|
|
|
|
#urlbar:not([focused="true"]):-moz-lwtheme:hover,
|
|
#urlbar.hidden-focus:-moz-lwtheme:hover,
|
|
#navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme:hover {
|
|
border-color: var(--lwt-toolbar-field-border-color, @fieldHoverBorderColor@);
|
|
}
|
|
|
|
#urlbar:-moz-lwtheme:hover,
|
|
#navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover {
|
|
background-color: var(--lwt-toolbar-field-background-color, white);
|
|
}
|
|
|
|
#urlbar:not(.hidden-focus)[focused="true"],
|
|
.searchbar-textbox[focused="true"] {
|
|
border-color: var(--toolbar-field-focus-border-color);
|
|
}
|
|
|
|
#urlbar:not(.hidden-focus):-moz-lwtheme[focused="true"],
|
|
#navigator-toolbox .searchbar-textbox:-moz-lwtheme[focused="true"] {
|
|
background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
|
|
color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, black));
|
|
}
|
|
|
|
:root[lwt-selection] .urlbar-input:-moz-lwtheme::selection,
|
|
:root[lwt-selection] .searchbar-textbox:-moz-lwtheme::selection {
|
|
background-color: var(--lwt-toolbar-field-highlight, Highlight);
|
|
color: var(--lwt-toolbar-field-highlight-text, HighlightText);
|
|
}
|
|
|
|
:root[uidensity=compact] #urlbar,
|
|
:root[uidensity=compact] .searchbar-textbox {
|
|
min-height: 26px;
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
:root[uidensity=touch] #urlbar,
|
|
:root[uidensity=touch] .searchbar-textbox {
|
|
min-height: 32px;
|
|
}
|
|
|
|
:root[chromehidden~="toolbar"] #urlbar {
|
|
/* Remove excess space between the address bar and the menu button in popups. */
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
:root[customizing] .urlbar-input-box {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.urlbar-input {
|
|
/* Remove the 1px padding-left (and padding-right) so that the titles in the
|
|
urlbar popup align with the text in the input. */
|
|
padding: 0;
|
|
}
|
|
|
|
#urlbar-container {
|
|
-moz-box-align: center;
|
|
}
|
|
|
|
#urlbar-search-splitter {
|
|
/* The splitter width should equal the location and search bars' combined
|
|
neighboring margin and border width. */
|
|
min-width: 12px;
|
|
margin: 0 -6px;
|
|
position: relative;
|
|
border: none;
|
|
background: transparent;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
/* Page action panel */
|
|
.pageAction-panel-button > .toolbarbutton-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
#pageAction-panel-bookmark,
|
|
#star-button {
|
|
list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
|
|
}
|
|
#pageAction-panel-bookmark[starred],
|
|
#star-button[starred] {
|
|
list-style-image: url("chrome://browser/skin/bookmark.svg");
|
|
}
|
|
#star-button[starred] {
|
|
fill-opacity: 1;
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
|
|
#pocket-button,
|
|
#pageAction-panel-pocket {
|
|
list-style-image: url("chrome://browser/skin/pocket-outline.svg");
|
|
}
|
|
|
|
#pocket-button-box[open="true"] > #pocket-button,
|
|
#pocket-button-box[pocketed="true"] > #pocket-button {
|
|
list-style-image: url("chrome://browser/skin/pocket.svg");
|
|
}
|
|
|
|
#pocket-button-box[animate="true"] > #pocket-button,
|
|
#pocket-button[open="true"][animationsenabled] > .toolbarbutton-icon {
|
|
fill: transparent;
|
|
}
|
|
|
|
#pocket-button-box[open="true"] > #pocket-button,
|
|
#pocket-button-box[pocketed="true"] > #pocket-button {
|
|
fill: #ef4056;
|
|
fill-opacity: 1;
|
|
}
|
|
|
|
#pageAction-panel-pinTab,
|
|
#pageAction-urlbar-pinTab {
|
|
list-style-image: url("chrome://browser/skin/pin-tab.svg");
|
|
}
|
|
|
|
#pageAction-panel-pinTab[pinned],
|
|
#pageAction-urlbar-pinTab[pinned] {
|
|
list-style-image: url("chrome://browser/skin/unpin-tab.svg");
|
|
}
|
|
|
|
#pageAction-panel-copyURL,
|
|
#pageAction-urlbar-copyURL {
|
|
list-style-image: url("chrome://browser/skin/link.svg");
|
|
}
|
|
|
|
#pageAction-panel-emailLink,
|
|
#pageAction-urlbar-emailLink {
|
|
list-style-image: url("chrome://browser/skin/mail.svg");
|
|
}
|
|
|
|
#pageAction-panel-sendToDevice,
|
|
#pageAction-urlbar-sendToDevice {
|
|
list-style-image: url("chrome://browser/skin/send-to-device.svg");
|
|
}
|
|
|
|
#pageAction-panel-pinTab:-moz-locale-dir(rtl) > .toolbarbutton-icon,
|
|
#pageAction-urlbar-pinTab:-moz-locale-dir(rtl),
|
|
#pageAction-panel-sendToDevice:-moz-locale-dir(rtl) > .toolbarbutton-icon,
|
|
#pageAction-urlbar-sendToDevice:-moz-locale-dir(rtl) {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.pageAction-sendToDevice-device[clientType=phone] {
|
|
list-style-image: url("chrome://browser/skin/device-phone.svg");
|
|
}
|
|
|
|
.pageAction-sendToDevice-device[clientType=tablet] {
|
|
list-style-image: url("chrome://browser/skin/device-tablet.svg");
|
|
}
|
|
|
|
.pageAction-sendToDevice-device[clientType=desktop] {
|
|
list-style-image: url("chrome://browser/skin/device-desktop.svg");
|
|
}
|
|
|
|
.pageAction-sendToDevice-device.signintosync,
|
|
#pageAction-panel-sendToDevice-fxa,
|
|
#pageAction-urlbar-sendToDevice-fxa {
|
|
list-style-image: url("chrome://browser/skin/sync.svg");
|
|
}
|
|
|
|
#pageAction-panel-addSearchEngine > .toolbarbutton-badge-stack > .toolbarbutton-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
#pageAction-panel-addSearchEngine > .toolbarbutton-badge-stack > .toolbarbutton-badge {
|
|
display: -moz-box;
|
|
background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
|
|
box-shadow: none;
|
|
/* "!important" is necessary to override the rule in toolbarbutton.css */
|
|
margin: -4px 0 0 !important;
|
|
margin-inline-end: -4px !important;
|
|
width: 11px;
|
|
height: 11px;
|
|
min-width: 11px;
|
|
min-height: 11px;
|
|
}
|
|
|
|
#pageActionActivatedActionPanel[actionID="pocket"] > .panel-arrowcontainer > .panel-arrowcontent {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#pageActionActivatedActionPanel[actionID="pocket"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow {
|
|
fill: #fbfbfb;
|
|
}
|
|
|
|
/* URL bar and page action buttons */
|
|
|
|
#page-action-buttons {
|
|
-moz-box-align: center;
|
|
}
|
|
|
|
#pageActionSeparator {
|
|
/* This draws the separator the same way that #urlbar-display-box draws its
|
|
left and right borders, which end up looking like separators. It might not
|
|
be the best way in this case, but it makes sure that all these vertical
|
|
lines in the urlbar look the same: same height, vertical position, etc. */
|
|
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;
|
|
width: 1px;
|
|
height: 28px;
|
|
visibility: hidden;
|
|
}
|
|
|
|
:root[uidensity=compact] #pageActionSeparator {
|
|
height: 24px;
|
|
}
|
|
|
|
:root[uidensity=touch] #pageActionSeparator {
|
|
height: 30px;
|
|
}
|
|
|
|
#page-action-buttons > :not([hidden]):not(toolbartabstop) ~ #pageActionSeparator {
|
|
/* Show the separator between the page actions and other elements when at
|
|
least one of the latter is shown. */
|
|
visibility: visible;
|
|
margin-left: 6px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
#userContext-icons,
|
|
#urlbar-zoom-button {
|
|
margin-left: 6px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.urlbar-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: var(--urlbar-icon-padding);
|
|
-moz-context-properties: fill, fill-opacity;
|
|
fill: currentColor;
|
|
fill-opacity: 0.6;
|
|
color: inherit;
|
|
}
|
|
|
|
.urlbar-page-action[disabled] {
|
|
fill-opacity: 0.3;
|
|
}
|
|
|
|
:root[uidensity=compact] .urlbar-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
:root[uidensity=touch] .urlbar-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.urlbar-icon:not([disabled]):hover,
|
|
.urlbar-icon-wrapper:not([disabled]):hover {
|
|
background-color: hsla(0,0%,70%,.2);
|
|
}
|
|
|
|
.urlbar-icon[open],
|
|
.urlbar-icon-wrapper[open],
|
|
.urlbar-icon:not([disabled]):hover:active,
|
|
.urlbar-icon-wrapper:hover:active {
|
|
background-color: hsla(0,0%,70%,.3);
|
|
}
|
|
|
|
.urlbar-icon-wrapper[open] > .urlbar-icon,
|
|
.urlbar-icon-wrapper > .urlbar-icon:hover,
|
|
.urlbar-icon-wrapper > .urlbar-icon:hover:active {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.urlbar-icon:-moz-focusring,
|
|
.urlbar-icon-wrapper:-moz-focusring {
|
|
outline: var(--toolbarbutton-focus-outline);
|
|
outline-offset: -2px;
|
|
-moz-outline-radius: var(--toolbarbutton-border-radius);
|
|
}
|
|
|
|
.urlbar-go-button,
|
|
.search-go-button {
|
|
list-style-image: url("chrome://browser/skin/forward.svg");
|
|
}
|
|
|
|
.urlbar-go-button:-moz-locale-dir(rtl),
|
|
.search-go-button:-moz-locale-dir(rtl) {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.urlbar-history-dropmarker {
|
|
-moz-appearance: none;
|
|
list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
#urlbar[hidedropmarker] > .urlbar-history-dropmarker {
|
|
display: none;
|
|
}
|
|
|
|
/* Avoid re-opening the popup when the dropmarker is clicked while the popup is still open. */
|
|
#urlbar[quantumbar="false"] > .urlbar-history-dropmarker[open] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
#urlbar[switchingtabs] > .urlbar-history-dropmarker {
|
|
transition: none;
|
|
}
|
|
|
|
#nav-bar:not([customizing="true"]) > #nav-bar-customization-target > #urlbar-container:not(:hover) > #urlbar:not([focused]) > .urlbar-history-dropmarker,
|
|
#nav-bar:not([customizing="true"]) > #nav-bar-customization-target > #urlbar-container:not(:hover) > #urlbar.hidden-focus > .urlbar-history-dropmarker {
|
|
opacity: 0;
|
|
}
|
|
|
|
#pageActionButton,
|
|
.share-more-button {
|
|
list-style-image: url("chrome://global/skin/icons/more.svg");
|
|
}
|
|
|
|
@keyframes bookmark-animation {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-627px);
|
|
}
|
|
}
|
|
|
|
@keyframes bookmark-animation-rtl {
|
|
from {
|
|
transform: scaleX(-1) translateX(0);
|
|
}
|
|
to {
|
|
transform: scaleX(-1) translateX(-627px);
|
|
}
|
|
}
|
|
|
|
#star-button-box[animationsenabled] {
|
|
position: relative;
|
|
}
|
|
|
|
/* Preload the bookmark animations to prevent a flicker during the first playing
|
|
of the animations. */
|
|
#star-button[preloadanimations] + #star-button-animatable-box > #star-button-animatable-image {
|
|
background-image: url("chrome://browser/skin/bookmark-animation.svg"),
|
|
url("chrome://browser/skin/library-bookmark-animation.svg");
|
|
background-size: 0, 0;
|
|
}
|
|
|
|
#star-button-box[animationsenabled] > #star-button[starred][animate] {
|
|
fill: transparent;
|
|
position: relative;
|
|
}
|
|
|
|
#star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
top: calc(50% - 16.5px); /* 16.5px is half the height of the sprite */
|
|
/* .urlbar-icon has width 28px. Each frame is 33px wide. Set margin-inline-start
|
|
to be half the difference, -2.5px. */
|
|
margin-inline-start: -2.5px;
|
|
width: 33px; /* Width of each frame within the SVG sprite */
|
|
height: 33px; /* Height of each frame within the SVG sprite */
|
|
}
|
|
|
|
:root[uidensity=compact] #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
|
|
/* .urlbar-icon has width 24px in this case */
|
|
margin-inline-start: -4.5px;
|
|
}
|
|
|
|
:root[uidensity=touch] #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
|
|
/* .urlbar-icon has width 30px in this case */
|
|
margin-inline-start: -1.5px;
|
|
}
|
|
|
|
#star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box > #star-button-animatable-image {
|
|
background-image: url("chrome://browser/skin/bookmark-animation.svg");
|
|
background-size: auto;
|
|
list-style-image: none;
|
|
height: var(--toolbarbutton-height);
|
|
min-height: 33px; /* Minimum height must be equal to the height of the SVG sprite */
|
|
animation-name: bookmark-animation;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: 1;
|
|
animation-timing-function: steps(19);
|
|
animation-duration: 317ms;
|
|
width: 660px;
|
|
-moz-context-properties: fill, stroke;
|
|
stroke: var(--toolbarbutton-icon-fill-attention);
|
|
}
|
|
|
|
#star-button-box[animationsenabled] > #star-button[starred][animate]:-moz-locale-dir(rtl) + #star-button-animatable-box > #star-button-animatable-image {
|
|
animation-name: bookmark-animation-rtl;
|
|
}
|
|
|
|
@keyframes pocket-animation {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-240px);
|
|
}
|
|
}
|
|
|
|
@keyframes pocket-animation-rtl {
|
|
from {
|
|
transform: scaleX(-1) translateX(0);
|
|
}
|
|
to {
|
|
transform: scaleX(-1) translateX(-240px);
|
|
}
|
|
}
|
|
|
|
#pocket-button-box[animate="true"] > #pocket-animatable-box,
|
|
#pocket-button > .toolbarbutton-animatable-box {
|
|
top: calc(50% - 8px); /* 8px is half the height of the sprite */
|
|
/* Since .toolbarbutton-icon uses a different width than the animatable box,
|
|
we need to set a padding relative to the difference in widths. */
|
|
margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 20px) / 2);
|
|
width: 20px; /* Width of each frame within the SVG sprite */
|
|
height: 16px; /* Height of each frame within the SVG sprite */
|
|
}
|
|
|
|
#pocket-button-box[animate="true"] > #pocket-animatable-box {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
/* .urlbar-icon has width 28px. Each frame is 20px wide. Set margin-inline-start
|
|
to be half the difference, 4px. */
|
|
margin-inline-start: 4px;
|
|
}
|
|
|
|
:root[uidensity=compact] #pocket-button-box[animate="true"] > #pocket-animatable-box {
|
|
/* .urlbar-icon has width 24px in this case */
|
|
margin-inline-start: 2px;
|
|
}
|
|
|
|
:root[uidensity=touch] #pocket-button-box[animate="true"] > #pocket-animatable-box {
|
|
/* .urlbar-icon has width 30px in this case */
|
|
margin-inline-start: 5px;
|
|
}
|
|
|
|
#pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image,
|
|
#pocket-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
|
|
}
|
|
|
|
#pocket-button-box[animate="true"],
|
|
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) {
|
|
position: relative;
|
|
}
|
|
|
|
#pocket-button-box:not([animate="true"]):not(:hover) > #pocket-animatable-box {
|
|
display: none;
|
|
}
|
|
|
|
/* Preload pocket-animation.svg and library-pocket-animation.svg to prevent
|
|
a flicker at the start of either animation. The preloading of the library
|
|
animation is triggered off of hovering the pocket button since the pocket
|
|
button always animates before the library button. */
|
|
#pocket-button-box:not([animate="true"]):hover > #pocket-animatable-box > #pocket-animatable-image,
|
|
#pocket-button[animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):not([open="true"]):hover > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
background-image: url("chrome://browser/skin/pocket-animation.svg"),
|
|
url("chrome://browser/skin/library-pocket-animation.svg");
|
|
background-size: 0, 0;
|
|
}
|
|
|
|
#pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image,
|
|
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-name: pocket-animation;
|
|
animation-timing-function: steps(12);
|
|
animation-duration: 200ms;
|
|
background-image: url("chrome://browser/skin/pocket-animation.svg");
|
|
fill: #ef4056;
|
|
-moz-context-properties: fill;
|
|
width: 260px;
|
|
}
|
|
|
|
#pocket-button-box[animate="true"]:-moz-locale-dir(rtl) > #pocket-animatable-box > #pocket-animatable-image,
|
|
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
|
animation-name: pocket-animation-rtl;
|
|
}
|
|
|
|
|
|
/**
|
|
* Contextual Feature Recommendation
|
|
*
|
|
* Animate the recommendation icon to expand outwards and display a text label.
|
|
* Fake the effect of a smoothly expanding width without animating any widths
|
|
* by (continuously) animating only `mask-position-x` and `transform`.
|
|
*
|
|
* In a few places, transition a property using the timing-function `step-start`
|
|
* while collapsed and `step-end` while expanded in order to (discretely) modify
|
|
* the value while expanded and while transitioning in either direction.
|
|
*
|
|
* This UI is part of an experiment launching in LTR locales only. Fixing the
|
|
* RTL issues is tracked by Bug 1485725.
|
|
*/
|
|
|
|
:root {
|
|
--cfr-animation-duration: 0.35s;
|
|
--cfr-button-addons-icon: url(resource://activity-stream/data/content/assets/glyph-webextension-16.svg);
|
|
--cfr-button-features-icon: url(resource://activity-stream/data/content/assets/glyph-cfr-feature-16.svg);
|
|
--cfr-active-color: #0060df;
|
|
}
|
|
|
|
#contextual-feature-recommendation {
|
|
width: 28px;
|
|
margin-inline-start: 0;
|
|
transition: margin-inline-start step-end var(--cfr-animation-duration);
|
|
}
|
|
#urlbar[cfr-recommendation-state="expanded"] #contextual-feature-recommendation {
|
|
margin-inline-start: calc(var(--cfr-label-width) * -1);
|
|
transition: margin-inline-start step-start var(--cfr-animation-duration);
|
|
}
|
|
|
|
#cfr-button {
|
|
margin: -2px 0;
|
|
transition-property: fill, fill-opacity, transform;
|
|
transition-timing-function: ease-in-out;
|
|
transition-duration: var(--cfr-animation-duration);
|
|
}
|
|
#cfr-button[data-cfr-icon="webextensions-icon"] {
|
|
list-style-image: var(--cfr-button-addons-icon);
|
|
}
|
|
#cfr-button[data-cfr-icon="recommendations-icon"] {
|
|
list-style-image: var(--cfr-button-features-icon);
|
|
}
|
|
#urlbar[cfr-recommendation-state="expanded"] #cfr-button {
|
|
fill: white;
|
|
fill-opacity: 1;
|
|
background-color: transparent; /* Override hover background-color */
|
|
transform: translateX(calc(var(--cfr-label-width) * -1));
|
|
}
|
|
#urlbar[cfr-recommendation-state="expanded"] #cfr-button:-moz-locale-dir(rtl) {
|
|
transform: translateX(calc(var(--cfr-label-width)));
|
|
}
|
|
@keyframes cfr-button-fade-through-active-color {
|
|
33% {
|
|
fill-opacity: 1;
|
|
fill: var(--cfr-active-color);
|
|
}
|
|
67% {
|
|
fill-opacity: 1;
|
|
fill: var(--cfr-active-color);
|
|
}
|
|
}
|
|
#urlbar[cfr-recommendation-state="collapsed"] #cfr-button {
|
|
animation: cfr-button-fade-through-active-color calc(3 * var(--cfr-animation-duration));
|
|
}
|
|
|
|
#cfr-label-container {
|
|
width: 0;
|
|
overflow: hidden;
|
|
border-radius: 5px;
|
|
padding-inline-start: 28px;
|
|
mask-image: linear-gradient(to right, transparent 0, black 0);
|
|
mask-position-x: var(--cfr-label-width);
|
|
mask-repeat: no-repeat;
|
|
transition-property: background-color, mask-position-x, width, margin-inline-end;
|
|
transition-timing-function: ease-in-out, ease-in-out, step-end, step-end;
|
|
transition-duration: var(--cfr-animation-duration);
|
|
}
|
|
#cfr-label-container:-moz-locale-dir(rtl) {
|
|
mask-position-x: calc(var(--cfr-label-width) * -1);
|
|
}
|
|
|
|
#urlbar[cfr-recommendation-state="expanded"] #cfr-label-container {
|
|
width: calc(var(--cfr-label-width) + 28px);
|
|
background-color: var(--cfr-active-color);
|
|
margin-inline-end: -28px;
|
|
mask-position-x: 0;
|
|
transition-timing-function: ease-in-out, ease-in-out, step-start, step-start;
|
|
}
|
|
|
|
#cfr-label {
|
|
margin: 0;
|
|
padding: 3px 5px;
|
|
padding-inline-start: 0;
|
|
color: white;
|
|
mask-image: linear-gradient(to right, transparent 0, black 0);
|
|
mask-position-x: var(--cfr-label-width);
|
|
mask-repeat: no-repeat;
|
|
transition: mask-position-x ease-in-out var(--cfr-animation-duration);
|
|
}
|
|
#cfr-label:-moz-locale-dir(rtl) {
|
|
mask-position-x: calc(var(--cfr-label-width) * -1);
|
|
}
|
|
#urlbar[cfr-recommendation-state="expanded"] #cfr-label {
|
|
mask-position-x: 0;
|
|
}
|
|
|
|
/* Translate the dropmarker to give illusion of increasing width of the recommendation */
|
|
#urlbar[cfr-recommendation-state] .urlbar-history-dropmarker {
|
|
transition: transform ease-in-out var(--cfr-animation-duration);
|
|
}
|
|
#urlbar[cfr-recommendation-state="expanded"] .urlbar-history-dropmarker {
|
|
transform: translateX(calc(var(--cfr-label-width) * -1));
|
|
}
|
|
#urlbar[cfr-recommendation-state="expanded"] .urlbar-history-dropmarker:-moz-locale-dir(rtl) {
|
|
transform: translateX(calc(var(--cfr-label-width)));
|
|
}
|
|
|
|
/* Shift the url-bar text fading to stop the recommendation overlapping */
|
|
#urlbar[cfr-recommendation-state] html|input.urlbar-input {
|
|
/* A mask-image is usually only defined for the url bar when text overflows.
|
|
We need to re-define the mask image here so that it shows up correctly when
|
|
we transition to or from an `expanded` state (in which the right end of the
|
|
url bar may be obscured without overflow). */
|
|
mask-image: linear-gradient(to left, transparent, black 3ch);
|
|
transition: mask-position-x ease-in-out var(--cfr-animation-duration);
|
|
}
|
|
#urlbar[cfr-recommendation-state] html|input.urlbar-input:-moz-locale-dir(rtl) {
|
|
mask-image: linear-gradient(to right, transparent, black 3ch);
|
|
}
|
|
#urlbar[cfr-recommendation-state="expanded"] html|input.urlbar-input {
|
|
mask-position-x: calc(var(--cfr-label-width) * -1);
|
|
}
|
|
#urlbar[cfr-recommendation-state="expanded"] html|input.urlbar-input:-moz-locale-dir(rtl) {
|
|
mask-position-x: calc(var(--cfr-label-width));
|
|
}
|
|
|
|
/* Reader mode icon */
|
|
|
|
#reader-mode-button {
|
|
list-style-image: url(chrome://browser/skin/readerMode.svg);
|
|
}
|
|
|
|
#reader-mode-button[readeractive] {
|
|
fill: var(--toolbarbutton-icon-fill-attention);
|
|
fill-opacity: 1;
|
|
}
|
|
|
|
/* Zoom button */
|
|
|
|
#urlbar-zoom-button {
|
|
font-size: .8em;
|
|
padding: 0 8px;
|
|
border-radius: 1em;
|
|
background-color: hsla(0,0%,0%,.05);
|
|
border: 1px solid hsla(210,4%,50%,.3);
|
|
}
|
|
|
|
#urlbar-zoom-button[animate="true"] {
|
|
animation-name: urlbar-zoom-reset-pulse;
|
|
animation-duration: 250ms;
|
|
}
|
|
|
|
#urlbar-zoom-button:hover {
|
|
background-color: hsla(0,0%,0%,.1);
|
|
}
|
|
|
|
#urlbar-zoom-button:hover:active {
|
|
background-color: hsla(0,0%,0%,.15);
|
|
}
|
|
|
|
:root[lwt-toolbar-field-brighttext] #urlbar-zoom-button:hover {
|
|
background-color: rgba(255,255,255,.2);
|
|
}
|
|
|
|
:root[lwt-toolbar-field-brighttext] #urlbar-zoom-button:hover:active {
|
|
background-color: rgba(255,255,255,.3);
|
|
}
|
|
|
|
#urlbar-zoom-button:-moz-focusring {
|
|
outline: var(--toolbarbutton-focus-outline);
|
|
outline-offset: unset;
|
|
-moz-outline-radius: 1em;
|
|
}
|
|
|
|
#urlbar-zoom-button > .toolbarbutton-text {
|
|
display: -moz-box;
|
|
}
|
|
|
|
#urlbar-zoom-button > .toolbarbutton-icon {
|
|
display: none;
|
|
}
|
|
|
|
/* Search bar */
|
|
|
|
.searchbar-search-button {
|
|
-moz-box-align: center;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.searchbar-search-icon {
|
|
list-style-image: url(chrome://browser/skin/search-glass.svg);
|
|
-moz-context-properties: fill, fill-opacity;
|
|
pointer-events: none;
|
|
margin-inline-start: 8px;
|
|
margin-inline-end: 6px;
|
|
width: 16px;
|
|
fill-opacity: .4;
|
|
}
|
|
|
|
.searchbar-search-button:hover > .searchbar-search-icon {
|
|
fill-opacity: .6;
|
|
}
|
|
|
|
.searchbar-search-button:hover:active > .searchbar-search-icon {
|
|
fill-opacity: .8;
|
|
}
|
|
|
|
.searchbar-search-icon-overlay {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay {
|
|
list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg);
|
|
margin-inline-start: -15px;
|
|
margin-inline-end: 4px;
|
|
margin-top: -10px;
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
|
|
margin-inline-start: -25px;
|
|
margin-inline-end: 14px;
|
|
}
|
|
|
|
.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay {
|
|
list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
|
|
-moz-context-properties: fill;
|
|
margin-inline-start: -8px;
|
|
margin-inline-end: 2px;
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
|
|
margin-inline-start: -26px;
|
|
margin-inline-end: 20px;
|
|
}
|
|
|
|
#urlbar.hidden-focus[focused="true"] {
|
|
caret-color: transparent;
|
|
}
|