mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-29 03:47:31 +09:00
import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo
This commit is contained in:
Roy Tam
commit
dcd9973243
150858 changed files with 23884658 additions and 0 deletions
293
browser/themes/shared/UITour.inc.css
Normal file
293
browser/themes/shared/UITour.inc.css
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
%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
|
||||
|
||||
/* UI Tour */
|
||||
|
||||
#UITourHighlightContainer {
|
||||
-moz-appearance: none;
|
||||
-moz-window-shadow: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
/* This is a buffer to compensate for the movement in the "wobble" effect,
|
||||
and for the box-shadow of #UITourHighlight. */
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#UITourHighlight {
|
||||
background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%);
|
||||
border-radius: 40px;
|
||||
border: 1px solid white;
|
||||
/* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
|
||||
on Linux without an X compositor where opacity is either 0 or 1. */
|
||||
box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
#UITourTooltipBody {
|
||||
-moz-box-align: start;
|
||||
}
|
||||
|
||||
#UITourTooltipTitleContainer {
|
||||
-moz-box-align: start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#UITourTooltipIcon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
#UITourTooltipTitle,
|
||||
#UITourTooltipDescription {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
#UITourTooltipTitle {
|
||||
font-size: 1.45rem;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#UITourTooltipDescription {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.8rem;
|
||||
margin-bottom: 0; /* Override global.css */
|
||||
}
|
||||
|
||||
#UITourTooltipClose {
|
||||
position: relative;
|
||||
-moz-appearance: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
min-width: 0;
|
||||
margin-inline-start: 4px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
#UITourTooltipClose > .toolbarbutton-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#UITourTooltipButtons {
|
||||
-moz-box-pack: end;
|
||||
background-color: hsla(210,4%,10%,.07);
|
||||
border-top: 1px solid hsla(210,4%,10%,.14);
|
||||
margin: 10px -16px -16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#UITourTooltipButtons > label,
|
||||
#UITourTooltipButtons > button {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
#UITourTooltipButtons > label:first-child,
|
||||
#UITourTooltipButtons > button:first-child {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
#UITourTooltipButtons > label:last-child,
|
||||
#UITourTooltipButtons > button:last-child {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
#UITourTooltipButtons > button[image] > .button-box > .button-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
|
||||
#UITourTooltipButtons > label,
|
||||
#UITourTooltipButtons > button .button-text {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
#UITourTooltipButtons > button:not(.button-link) {
|
||||
-moz-appearance: none;
|
||||
background-color: rgb(251,251,251);
|
||||
border-radius: 3px;
|
||||
border: 1px solid;
|
||||
border-color: rgb(192,192,192);
|
||||
color: rgb(71,71,71);
|
||||
padding: 4px 30px;
|
||||
transition-property: background-color, border-color;
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
#UITourTooltipButtons > button:not(.button-link):not(:active):hover {
|
||||
background-color: hsla(210,4%,10%,.15);
|
||||
border-color: hsla(210,4%,10%,.15);
|
||||
box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
|
||||
}
|
||||
|
||||
#UITourTooltipButtons > label,
|
||||
#UITourTooltipButtons > button.button-link {
|
||||
-moz-appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: rgba(0,0,0,0.35);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#UITourTooltipButtons > button.button-link:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* The primary button gets the same color as the customize button. */
|
||||
#UITourTooltipButtons > button.button-primary {
|
||||
background-color: rgb(116,191,67);
|
||||
color: white;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
#UITourTooltipButtons > button.button-primary:not(:active):hover {
|
||||
background-color: rgb(105,173,61);
|
||||
}
|
||||
|
||||
/* Notification overrides for Heartbeat UI */
|
||||
|
||||
notification.heartbeat {
|
||||
%ifdef XP_MACOSX
|
||||
background-image: linear-gradient(-179deg, #FBFBFB 0%, #EBEBEB 100%);
|
||||
%else
|
||||
background-color: #F1F1F1;
|
||||
%endif
|
||||
border-bottom: 1px solid #C1C1C1;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* In themes/osx/global/notification.css the close icon is inverted because notifications
|
||||
on OSX are usually dark. Heartbeat is light, so override that behaviour. */
|
||||
|
||||
%ifdef XP_MACOSX
|
||||
notification.heartbeat[type="info"] .close-icon:not(:hover) {
|
||||
-moz-image-region: rect(0, 16px, 16px, 0px) !important;
|
||||
}
|
||||
@media (min-resolution: 2dppx) {
|
||||
notification.heartbeat[type="info"] .close-icon:not(:hover) {
|
||||
-moz-image-region: rect(0, 32px, 32px, 0px) !important;
|
||||
}
|
||||
}
|
||||
%endif
|
||||
|
||||
@keyframes pulse-onshow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(1.0);
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-twice {
|
||||
0% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.messageText.heartbeat {
|
||||
color: #333333;
|
||||
text-shadow: none;
|
||||
margin-inline-start: 0px;
|
||||
/* The !important is required to override OSX default style. */
|
||||
margin-inline-end: 12px !important;
|
||||
}
|
||||
|
||||
.messageImage.heartbeat {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-inline-start: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.messageImage.heartbeat.pulse-onshow {
|
||||
animation-name: pulse-onshow;
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
|
||||
}
|
||||
|
||||
.messageImage.heartbeat.pulse-twice {
|
||||
animation-name: pulse-twice;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: 2;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
/* Learn More link styles */
|
||||
.heartbeat > .text-link {
|
||||
color: #0095DD;
|
||||
margin-inline-start: 0px;
|
||||
}
|
||||
|
||||
.heartbeat > .text-link:hover {
|
||||
color: #008ACB;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.heartbeat > .text-link:hover:active {
|
||||
color: #006B9D;
|
||||
}
|
||||
|
||||
/* Heartbeat UI Rating Star Classes */
|
||||
.heartbeat > #star-rating-container {
|
||||
display: -moz-box;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.heartbeat > #star-rating-container > #star5 {
|
||||
-moz-box-ordinal-group: 5;
|
||||
}
|
||||
|
||||
.heartbeat > #star-rating-container > #star4 {
|
||||
-moz-box-ordinal-group: 4;
|
||||
}
|
||||
|
||||
.heartbeat > #star-rating-container > #star3 {
|
||||
-moz-box-ordinal-group: 3;
|
||||
}
|
||||
|
||||
.heartbeat > #star-rating-container > #star2 {
|
||||
-moz-box-ordinal-group: 2;
|
||||
}
|
||||
|
||||
.heartbeat > #star-rating-container > .star-x {
|
||||
background: url("chrome://browser/skin/heartbeat-star-off.svg");
|
||||
cursor: pointer;
|
||||
/* Overrides the margin-inline-end for all platforms defined in the .plain class */
|
||||
margin-inline-end: 4px !important;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.heartbeat > #star-rating-container > .star-x:hover,
|
||||
.heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
|
||||
background: url("chrome://browser/skin/heartbeat-star-lit.svg");
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue