mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 03:05:34 +00:00
c9b55f92a9
By adding a small blank space to the end of the text, we can make the animation look faster. Also, the issues with the animation wouldn't be noticeable in that space. MozReview-Commit-ID: H67YL6WZEd1 --HG-- extra : rebase_source : 2555fb0b40a9c83205537a969fe905f7f083f70a extra : amend_source : 7a2deeb18c3e8dcc93fce1bca4be9efb8585e685
186 lines
6.4 KiB
CSS
186 lines
6.4 KiB
CSS
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] {
|
|
border-bottom: 1px solid var(--panel-separator-color);
|
|
padding-inline-start: 0;
|
|
padding-inline-end: 6px;
|
|
min-height: 3em;
|
|
}
|
|
|
|
/* Limit the size of the hidden description, since a deck takes the size of the biggest child */
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][selectedIndex="0"] #search-suggestions-hint,
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][selectedIndex="1"] #search-suggestions-question {
|
|
max-height: 5em;
|
|
}
|
|
|
|
/* Opt-in notification */
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] {
|
|
padding: 6px 0;
|
|
padding-inline-start: 44px;
|
|
background-color: hsla(210, 4%, 10%, 0.07);
|
|
background-image: url("chrome://browser/skin/info.svg");
|
|
background-clip: padding-box;
|
|
background-position: 20px center;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px 16px;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"]:-moz-locale-dir(rtl) {
|
|
background-position: right 20px center;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] > description {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] > description > label.text-link {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button {
|
|
-moz-appearance: none;
|
|
min-width: 80px;
|
|
border-radius: 3px;
|
|
margin: 0;
|
|
margin-inline-start: 10px;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"] {
|
|
color: hsl(210, 0%, 38%);
|
|
background-color: hsl(210, 0%, 88%);
|
|
border: 1px solid hsl(210, 0%, 82%);
|
|
}
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"]:hover {
|
|
background-color: hsl(210, 0%, 84%);
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"] {
|
|
color: white;
|
|
background-color: hsl(93, 82%, 44%);
|
|
border: 1px solid hsl(93, 82%, 44%);
|
|
}
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"]:hover {
|
|
background-color: hsl(93, 82%, 40%);
|
|
}
|
|
|
|
/* Opt-out hint */
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-out"] {
|
|
font: message-box;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] {
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description {
|
|
margin: auto;
|
|
padding: 4px 8px;
|
|
background-color: #ffeebe;
|
|
border: 1px solid #ffdf81;
|
|
border-radius: 4px;
|
|
color: #7d3500;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span {
|
|
unicode-bidi: embed;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span.prefix {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] > hbox[anonid="search-suggestions-opt-out"] > .ac-site-icon {
|
|
transform: scale(0);
|
|
animation-name: search-suggestions-hint-grow;
|
|
animation-duration: 500ms;
|
|
animation-delay: 500ms;
|
|
animation-iteration-count: 1;
|
|
animation-timing-function: ease-in-out;
|
|
animation-fill-mode: forwards;
|
|
min-width: 16px;
|
|
}
|
|
|
|
@keyframes search-suggestions-hint-grow {
|
|
0% { transform: scale(0); }
|
|
40% { transform: scale(1.5); }
|
|
60% { transform: scale(1); }
|
|
80% { transform: scale(1.25); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] > .ac-title-text {
|
|
text-overflow: clip;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] {
|
|
overflow: hidden;
|
|
max-width: 12ch;
|
|
width: 0;
|
|
animation-name: search-suggestions-hint-typing;
|
|
animation-duration: 500ms;
|
|
animation-delay: 750ms;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@media all and (max-width: 800px) {
|
|
/* Hide the typing animation block */
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-typing"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@keyframes search-suggestions-hint-typing {
|
|
from { width: 0; }
|
|
to { width: 12ch; }
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"] {
|
|
opacity: 0;
|
|
animation-duration: 250ms;
|
|
animation-delay: 1500ms;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
/* Margin-inline-start can't be animated yet */
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(ltr) {
|
|
margin-left: 160px;
|
|
animation-name: search-suggestions-hint-buildin-ltr;
|
|
}
|
|
|
|
@keyframes search-suggestions-hint-buildin-ltr {
|
|
from { margin-left: 160px; opacity: 0; }
|
|
to { margin-left: 0; opacity: 1; }
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(rtl) {
|
|
/* Should be margin-inline-start but that can't be animated yet */
|
|
margin-right: 160px;
|
|
animation-name: search-suggestions-hint-buildin-rtl;
|
|
}
|
|
|
|
@keyframes search-suggestions-hint-buildin-rtl {
|
|
from { margin-right: 160px; opacity: 0; }
|
|
to { margin-right: 0; opacity: 1; }
|
|
}
|
|
|
|
#search-suggestions-change-settings {
|
|
opacity: 0;
|
|
animation-name: search-suggestions-hint-fadein;
|
|
animation-duration: 500ms;
|
|
animation-delay: 1800ms;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes search-suggestions-hint-fadein {
|
|
from { opacity: 0 }
|
|
to { opacity: 1 }
|
|
}
|