b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
681 lines
16 KiB
CSS
681 lines
16 KiB
CSS
.appWindow[transition-state="closed"]:not(.fadeout):not(.homescreen):not(.attentionWindow):not(.lockScreenInputWindow) {
|
|
opacity: 0;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
#screen.utility-tray #windows > .appWindow {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.appWindow:not(.homescreen):not(.searchWindow):not(.lockScreenInputWindow):not(.globalOverlayWindow) {
|
|
background-color: black;
|
|
}
|
|
|
|
.appWindow.popupWindow {
|
|
background-color: white;
|
|
}
|
|
|
|
.appWindow.popupWindow.alwaysLowered {
|
|
display: none;
|
|
}
|
|
|
|
.appWindow:not(.homescreen):not(.searchWindow).render {
|
|
background-image: none !important;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Utility tray needs to be actionable on the attention screen */
|
|
|
|
.appWindow.attentionWindow,
|
|
.appWindow.attentionWindow .chrome .controls {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Attention Screen needs to be clickable */
|
|
|
|
.appWindow.attentionWindow .render,
|
|
.appWindow.attentionWindow.toaster-mode {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.appWindow:not(.homescreen):not(.searchWindow):not(.globalOverlayWindow).light {
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* mozbrowser iframe layout */
|
|
|
|
.appWindow iframe {
|
|
border: none;
|
|
}
|
|
|
|
.appWindow .throbber.loading {
|
|
height: 0.3rem;
|
|
background-image: url('../shared/progress.gif');
|
|
background-size: auto 0.3rem;
|
|
}
|
|
|
|
.appWindow:not(.homescreen):not(.searchWindow):not(.globalOverlayWindow).render > div.browser-container {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.appWindow:not(.homescreen):not(.searchWindow):not(.globalOverlayWindow).light.render > div.browser-container {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.appWindow:not(.homescreen):not(.searchWindow):not(.globalOverlayWindow).render > div.browser-container > iframe {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.appWindow.enlarge {
|
|
animation: openApp var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.transition-closing.perpendicular {
|
|
animation-duration: 0.1s;
|
|
}
|
|
|
|
.appWindow.from-cardview {
|
|
animation: openAppFromCardView 300ms forwards cubic-bezier(.35,.9,.6,1);
|
|
}
|
|
|
|
@keyframes openAppFromNewCard {
|
|
0% { transform: scale(0.5) translateY(200%); }
|
|
20% { transform: scale(0.5) translateY(200%); }
|
|
65% { transform: scale(0.5) translateY(0); }
|
|
100% { transform: scale(1) translateY(0); }
|
|
}
|
|
|
|
.appWindow.from-new-card {
|
|
animation: openAppFromNewCard 1200ms forwards ease-in-out;
|
|
}
|
|
|
|
/* Opacity increases start up time then we don't use it anymore for opening */
|
|
@keyframes openApp {
|
|
0% { transform: scale(0.2);}
|
|
100% { transform: scale(1.0);}
|
|
}
|
|
|
|
.appWindow.zoom-in {
|
|
transform: scale(1);
|
|
animation: zoom-in var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
@keyframes zoom-in {
|
|
0% { transform: scale(1); }
|
|
100% { transform: scale(2); }
|
|
}
|
|
|
|
@keyframes openAppFromCardView {
|
|
0% { transform: scale(0.5); }
|
|
100% { transform: scale(1.0); }
|
|
}
|
|
|
|
/* Invoking app moves out */
|
|
html[dir="ltr"] .appWindow.invoking {
|
|
animation: invokingApp_ltr var(--transition-duration) forwards linear;
|
|
}
|
|
html[dir="rtl"] .appWindow.invoking {
|
|
animation: invokingApp_rtl var(--transition-duration) forwards linear;
|
|
}
|
|
@keyframes invokingApp_ltr {
|
|
0% { transform: translateX(0) }
|
|
100% { transform: translateX(calc(-100% - 20px)); }
|
|
}
|
|
@keyframes invokingApp_rtl {
|
|
0% { transform: translateX(0) }
|
|
100% { transform: translateX(calc(100% + 20px)); }
|
|
}
|
|
|
|
/* Invoked app moves in */
|
|
html[dir="ltr"] .appWindow.invoked {
|
|
animation: invokedApp_ltr var(--transition-duration) forwards linear;
|
|
}
|
|
html[dir="rtl"] .appWindow.invoked {
|
|
animation: invokedApp_rtl var(--transition-duration) forwards linear;
|
|
}
|
|
@keyframes invokedApp_ltr {
|
|
0% { transform: translateX(calc(100% + 20px)); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
@keyframes invokedApp_rtl {
|
|
0% { transform: translateX(calc(-100% - 20px)); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
|
|
.appWindow.fade-in {
|
|
animation: fadeInApp var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.fade-out {
|
|
animation: fadeOutApp var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
/* Invoking secure app moves out */
|
|
@keyframes fadeInApp {
|
|
0% {
|
|
transform: scale(2.0);
|
|
opacity: 0.0;
|
|
}
|
|
100% {
|
|
transform: scale(1.0);
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
/* Invoked secure app moves in */
|
|
@keyframes fadeOutApp {
|
|
0% {
|
|
transform: scale(1.0);
|
|
opacity: 1.0;
|
|
}
|
|
100% {
|
|
transform: scale(2);
|
|
opacity: 0.0;
|
|
}
|
|
}
|
|
|
|
#windows.slow-transition .appWindow.transition-closing,
|
|
#windows.slow-transition .appWindow.transition-opening {
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.appWindow.reduce {
|
|
animation: closeApp var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.transition-opening.perpendicular {
|
|
animation-duration: 0.1s;
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
/* The scale transformation used to be 5. In order to benefit from async
|
|
* transform the frame width/height needs to be < 4096.
|
|
* The size of one side of the frame is equal to
|
|
* devicePixelRatio * frame.[width|height] * scale, and as a result we need
|
|
* to pick a value that fits well for pixel ratio between 1 and 2.6.
|
|
*/
|
|
.appWindow.zoom-out {
|
|
transform: scale(2);
|
|
animation: zoom-out var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
@keyframes zoom-out {
|
|
0% { transform: scale(2);}
|
|
100% { transform: scale(1);}
|
|
}
|
|
|
|
.appWindow.to-cardview {
|
|
animation: closeAppTowardsCardView 300ms forwards cubic-bezier(.35,.9,.6,1);
|
|
}
|
|
|
|
@keyframes closeApp {
|
|
0% { transform: scale(1.0); opacity: 1;}
|
|
100% { transform: scale(0.01); opacity: 0;}
|
|
}
|
|
|
|
@keyframes closeAppTowardsCardView {
|
|
0% { transform: scale(1.0); }
|
|
100% { transform: scale(0.5); }
|
|
}
|
|
|
|
.appWindow.home-from-cardview {
|
|
animation: home-from-cardview 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.home-to-cardview {
|
|
animation: home-to-cardview 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
@keyframes home-from-cardview {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes home-to-cardview {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
.appWindow.back {
|
|
transition: transform 0.25s cubic-bezier(0.7, 0.0, 1.0, 1.0), visibility 0.25s cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
transform: scale(0.86);
|
|
}
|
|
|
|
.appWindow.restored {
|
|
transform: translateX(0);
|
|
transition: transform 0.25s cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow iframe {
|
|
visibility: visible;
|
|
}
|
|
|
|
.appWindow[transition-state="closed"]:not(.toaster-mode) > div.browser-container > iframe {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.appWindow > .fade-overlay {
|
|
background-color: black;
|
|
visibility: hidden;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.appWindow.homescreen.fadeout .fade-overlay.hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.appWindow.fadeout .fade-overlay {
|
|
visibility: visible;
|
|
}
|
|
|
|
.appWindow.homescreen.fadeout .fade-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.appWindow > .touch-blocker {
|
|
visibility: hidden;
|
|
background: transparent;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.appWindow.inactive > .touch-blocker,
|
|
.appWindow.overlay > .touch-blocker,
|
|
.appWindow.transition-closing > .touch-blocker,
|
|
.appWindow.transition-opening > .touch-blocker {
|
|
/* The animation takes .3 seconds so users cannot touch the app while the
|
|
* closing animation is performing */
|
|
visibility: visible;
|
|
}
|
|
|
|
.appWindow > .modal-dialog,
|
|
.appWindow > .authentication-dialog,
|
|
.authentication-dialog > .authentication-dialog-http {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.appWindow.searchWindow {
|
|
overflow: visible;
|
|
}
|
|
|
|
.appWindow > .modal-dialog.visible,
|
|
.appWindow > .authentication-dialog.visible,
|
|
.authentication-dialog > .authentication-dialog-http.visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
.appWindow > .modal-dialog > form {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.appWindow > .modal-dialog input {
|
|
border-radius: 0.2rem;
|
|
height: 4rem;
|
|
font-size: 2rem;
|
|
width: 100%;
|
|
color: white;
|
|
background: none;
|
|
box-sizing: border-box;
|
|
margin-bottom: 1.5rem; /* not overlap by menu while keyboard pop */
|
|
}
|
|
|
|
.appWindow > .modal-dialog > form.visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
/****************** Screenshot Overlay ******************/
|
|
.appWindow .screenshot-overlay {
|
|
pointer-events: none;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
visibility: hidden;
|
|
|
|
/* We need this to resize hi-res screenshot */
|
|
background-size: cover;
|
|
}
|
|
|
|
.appWindow .screenshot-overlay.visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Bug 1071235: Workaround for bug 1076783 */
|
|
.browser-container:-moz-full-screen-ancestor > .screenshot-overlay {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.appWindow.collapsible .screenshot-overlay {
|
|
margin-top: var(--rocketbar-urlbar-height);
|
|
}
|
|
|
|
.appWindow > .identification-overlay {
|
|
pointer-events: none;
|
|
|
|
background: rgba(255, 255, 255, 0.8);
|
|
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease-in, visibility 0.2s;
|
|
}
|
|
|
|
.appWindow.private > .identification-overlay {
|
|
background: rgba(57, 46, 84, 0.9);
|
|
}
|
|
|
|
.appWindow.suspended > .identification-overlay,
|
|
.appWindow:not(.active):not(.in-task-manager).overlay > .identification-overlay {
|
|
transition: none;
|
|
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
#screen.cards-view .appWindow.in-task-manager.overlay.no-screenshot > .identification-overlay {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: opacity 0.2s ease-in, visibility 0.2s;
|
|
}
|
|
.appWindow.overlay.no-screenshot.from-cardview.overlay > .identification-overlay {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease-in, visibility 0.2s;
|
|
}
|
|
|
|
|
|
/* we don't want to show the overlay at all during the opening
|
|
transition (from the homescreen and from the cardview) */
|
|
#screen .appWindow.in-task-manager:not(.no-screenshot).overlay > .identification-overlay,
|
|
.appWindow.enlarge.overlay > .identification-overlay,
|
|
.appWindow:not(.no-screenshot).from-cardview.overlay > .identification-overlay {
|
|
opacity: 0 !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.identification-overlay > div {
|
|
position: absolute;
|
|
top: calc(50% - 4.65rem);
|
|
offset-inline-start: 1.5rem;
|
|
width: calc(100% - 3rem);
|
|
height: 9.3rem;
|
|
}
|
|
|
|
.identification-overlay > div .icon {
|
|
position: absolute;
|
|
top: 0;
|
|
offset-inline-start: calc(50% - 3rem);
|
|
width: 6rem;
|
|
height: 6rem;
|
|
background: no-repeat center / contain;
|
|
}
|
|
|
|
.identification-overlay > div .title {
|
|
display: block;
|
|
position: absolute;
|
|
top: 7.5rem;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 0;
|
|
|
|
color: #4d4d4d;
|
|
text-align: center;
|
|
font-size: 1.6rem;
|
|
font-style: italic;
|
|
line-height: 1.8rem;
|
|
font-weight: 400;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.private .identification-overlay > div .title {
|
|
color: #e7e7e7;
|
|
}
|
|
|
|
/* inline components */
|
|
|
|
.appWindow > .appWindow {
|
|
z-index: 65536;
|
|
}
|
|
|
|
.appWindow > .touch-blocker {
|
|
z-index: 1026;
|
|
}
|
|
|
|
.appWindow > .fade-overlay {
|
|
z-index: 1025;
|
|
}
|
|
|
|
.appWindow > .identification-overlay {
|
|
z-index: 1024;
|
|
}
|
|
|
|
.appWindow > .browser-container .screenshot-overlay {
|
|
z-index: 10;
|
|
}
|
|
|
|
.appWindow > .chrome {
|
|
z-index: 5;
|
|
}
|
|
|
|
.appWindow > .authentication-dialog {
|
|
z-index: 100;
|
|
}
|
|
|
|
.appWindow.slideleft {
|
|
animation: slideLeft var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.slideright {
|
|
animation: slideRight var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.slide-from-bottom {
|
|
animation: slideFromDown var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.slide-to-bottom {
|
|
animation: slideToDown var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.slide-from-top {
|
|
animation: slideFromUp var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
#windows.slow-transition .appWindow.slide-from-top {
|
|
animation: slideFromUp 2s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.slide-to-top {
|
|
animation: slideToUp var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.in-from-left {
|
|
animation: inFromLeft var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.out-to-right {
|
|
animation: outToRight var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
@keyframes slideLeft {
|
|
0% { transform: translateX(100%); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
|
|
.appWindow > .contextmenu {
|
|
z-index: 11;
|
|
}
|
|
|
|
@keyframes inFromLeft {
|
|
0% {
|
|
transform: translateX(-20%);
|
|
opacity: 0.25;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@keyframes outToRight {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
.appWindow.slidedown {
|
|
animation: slideDown var(--transition-duration) forwards
|
|
cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
@keyframes slideFromDown {
|
|
0% { transform: translateY(calc(100%)); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slideToDown {
|
|
0% { transform: translateY(0); }
|
|
100% { transform: translateY(calc(100%)); }
|
|
}
|
|
|
|
@keyframes inFromLeft {
|
|
0% {
|
|
transform: translateX(-20%);
|
|
opacity: 0.25;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@keyframes outToRight {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
@keyframes slideFromUp {
|
|
0% { transform: translateY(calc(-100%)); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slideToUp {
|
|
0% { transform: translateY(0); }
|
|
100% { transform: translateY(calc(-100%)); }
|
|
}
|
|
|
|
/*
|
|
When a mozbrowser iframe requests fullscreen with SHB enabled,
|
|
Gecko will make that element fixed and take up the entire viewport.
|
|
However, due to bug 879443 the transform property will make fixed
|
|
relative to this ancestor rather than the viewport, so we unset
|
|
the transform for this case.
|
|
See: https://bugzilla.mozilla.org/show_bug.cgi?id=1212960
|
|
*/
|
|
#screen:-moz-full-screen-ancestor > #windows > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow):not(.lockScreenInputWindow).active {
|
|
transform: unset;
|
|
}
|
|
|
|
/* Edges */
|
|
#windows > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow):not(.lockScreenInputWindow) {
|
|
/* not in the viewport */
|
|
transform: translateY(-100%);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* making the appWindows moz-elementable for the cardview */
|
|
#screen #windows > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow):not(.lockScreenInputWindow).in-task-manager {
|
|
position: fixed;
|
|
transform: none;
|
|
}
|
|
|
|
.appWindow.attentionWindow.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#screen #windows > .appWindow.will-become-inactive {
|
|
opacity: 0;
|
|
}
|
|
|
|
#screen #windows > .appWindow.active:not(.will-become-inactive):not(.back),
|
|
#screen #windows > .appWindow.will-become-active,
|
|
#screen #windows > .appWindow.inside-edges {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
#screen #windows > .appWindow.outside-edges-left {
|
|
opacity: 1;
|
|
transform: translateX(calc(-100% - 2rem));
|
|
}
|
|
|
|
#screen #windows > .appWindow.outside-edges-right {
|
|
opacity: 1;
|
|
transform: translateX(calc(100% + 2rem));
|
|
}
|
|
|
|
#screen #windows > .appWindow.will-become-active,
|
|
#screen #windows > .appWindow.inside-edges,
|
|
#screen #windows > .appWindow.outside-edges-left,
|
|
#screen #windows > .appWindow.outside-edges-right {
|
|
will-change: transform;
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
#screen.software-button-enabled:not(.fullscreen-layout-app) #windows > .appWindow.outside-edges-right {
|
|
/* BiDi note: the software home button should not be mirrored in RTL. */
|
|
transform: translateX(calc(100% + var(--software-home-button-height)));
|
|
}
|
|
}
|
|
|
|
#windows .appWindow.active iframe {
|
|
transition-property: transform;
|
|
transition-duration: var(--transition-duration);
|
|
}
|
|
|
|
#screen.locked #windows .appWindow.active iframe {
|
|
transition-property: none;
|
|
}
|
|
|
|
.appWindow.attentionWindow[transition-state="closed"] > div.browser-container {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hide chrome UI of windows */
|
|
.appWindow.attentionWindow > .chrome > .controls > .urlbar > .title {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide chrome UI of lockScreenInputWindow since we don't need */
|
|
.appWindow.lockScreenInputWindow > .titlebar,
|
|
.appWindow.lockScreenInputWindow > .chrome {
|
|
display: none;
|
|
}
|
|
|
|
.appWindow.lockScreenInputWindow {
|
|
background: none;
|
|
pointer-events: none;
|
|
}
|