b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
545 lines
12 KiB
CSS
Executable file
545 lines
12 KiB
CSS
Executable file
.appWindow[transition-state="closed"]:not(.fadeout):not(.homescreen):not(.attentionWindow) {
|
|
opacity: 0;
|
|
transform: none;
|
|
}
|
|
|
|
#screen.utility-tray #windows > .appWindow {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.appWindow:not(.homescreen) {
|
|
background-color: black;
|
|
}
|
|
|
|
.appWindow.popupWindow {
|
|
background-color: white;
|
|
}
|
|
|
|
.appWindow:not(.homescreen).render {
|
|
background-image: none !important;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.appWindow:not(.homescreen).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).render > div.browser-container {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.appWindow:not(.homescreen).light.render > div.browser-container {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.appWindow:not(.homescreen).render > div.browser-container > iframe {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.appWindow.enlarge {
|
|
animation: openApp 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.transition-closing.perpendicular {
|
|
animation-duration: 0.1s;
|
|
}
|
|
|
|
.appWindow.from-cardview {
|
|
overflow: hidden;
|
|
animation: openAppFromCardView 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
/* 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 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
@keyframes zoom-in {
|
|
0% { transform: scale(1); }
|
|
100% { transform: scale(3); }
|
|
}
|
|
|
|
@keyframes openAppFromCardView {
|
|
0% { transform: scale(0.48); }
|
|
100% { transform: scale(1.0); }
|
|
}
|
|
|
|
.appWindow.invoked {
|
|
animation: invokedApp .3s forwards linear;
|
|
}
|
|
|
|
.appWindow.invoking {
|
|
animation: invokingApp .3s forwards linear;
|
|
}
|
|
|
|
/* Invoking app moves out */
|
|
@keyframes invokingApp {
|
|
0% { transform: translateX(0) }
|
|
100% { transform: translateX(calc(-100% - 20px)); }
|
|
}
|
|
|
|
/* Invoked app moves in */
|
|
@keyframes invokedApp {
|
|
0% { transform: translateX(calc(100% + 20px)); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
|
|
.appWindow.fade-in {
|
|
animation: fadeInApp 0.6s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.fast-fade-in {
|
|
animation: fastFadeInApp 0.3s forwards cubic-bezier(0.25, 0.0, 0.0, 1.0);
|
|
}
|
|
|
|
.appWindow.fade-out {
|
|
animation: fadeOutApp 0.6s forwards cubic-bezier(0.25, 0.0, 0.0, 1.0);
|
|
}
|
|
|
|
/* Invoking secure app moves out */
|
|
@keyframes fadeInApp {
|
|
0% {
|
|
transform: scale(2.0);
|
|
opacity: 0.0;
|
|
}
|
|
50% {
|
|
transform: scale(1.5);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: scale(1.0);
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@keyframes fastFadeInApp {
|
|
0% {
|
|
transform: scale(1.0);
|
|
opacity: 0.0;
|
|
}
|
|
100% {
|
|
transform: scale(1.0);
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
/* Invoked secure app moves in */
|
|
@keyframes fadeOutApp {
|
|
0% {
|
|
opacity: 1.0;
|
|
}
|
|
100% {
|
|
opacity: 0.0;
|
|
}
|
|
}
|
|
|
|
#windows.slow-transition .appWindow.transition-closing,
|
|
#windows.slow-transition .appWindow.transition-opening {
|
|
animation-duration: 3s;
|
|
}
|
|
|
|
.appWindow.reduce {
|
|
animation: closeApp 0.3s 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.
|
|
*/
|
|
.appWindow.zoom-out {
|
|
transform: scale(3);
|
|
animation: zoom-out 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
@keyframes zoom-out {
|
|
0% { transform: scale(3);}
|
|
100% { transform: scale(1);}
|
|
}
|
|
|
|
.appWindow.to-cardview {
|
|
overflow: hidden;
|
|
animation: closeAppTowardsCardView 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
@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.48); }
|
|
}
|
|
|
|
.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: none;
|
|
transition: transform 0.25s cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow iframe {
|
|
visibility: visible;
|
|
}
|
|
|
|
.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.transition-closing .touch-blocker,
|
|
.appWindow.enlarge .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 > .authentication-dialog,
|
|
.authentication-dialog > .authentication-dialog-http {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.appWindow > .contextmenu {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.appWindow > .contextmenu.visible,
|
|
.appWindow > .authentication-dialog.visible,
|
|
.authentication-dialog > .authentication-dialog-http.visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
/****************** Screenshot Overlay ******************/
|
|
.appWindow .screenshot-overlay {
|
|
pointer-events: none;
|
|
height: 100%;
|
|
visibility: hidden;
|
|
|
|
/* We need this to resize hi-res screenshot */
|
|
background-size: cover;
|
|
}
|
|
|
|
.appWindow .screenshot-overlay.visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
.appWindow.collapsible .screenshot-overlay {
|
|
background-color: inherit;
|
|
}
|
|
|
|
/* Bug 1071235: Workaround for bug 1076783 */
|
|
.browser-container:-moz-full-screen-ancestor > .screenshot-overlay {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.appWindow.collapsible:not(.active) .screenshot-overlay {
|
|
margin-top: 4.6rem;
|
|
}
|
|
|
|
.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.suspended > .identification-overlay,
|
|
.appWindow:not(.active):not(.in-task-manager) > .identification-overlay.visible {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 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 > .identification-overlay.visible,
|
|
.appWindow.enlarge > .identification-overlay.visible,
|
|
.appWindow.from-cardview > .identification-overlay.visible {
|
|
opacity: 0 !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.identification-overlay > div {
|
|
position: absolute;
|
|
top: calc(50% - 4.65rem);
|
|
left: 1.5rem;
|
|
width: calc(100% - 3rem);
|
|
height: 9.3rem;
|
|
}
|
|
|
|
.identification-overlay > div .icon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(50% - 3rem);
|
|
width: 6rem;
|
|
height: 6rem;
|
|
|
|
background-size: 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;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.appWindow iframe.hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* 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 > .chrome {
|
|
z-index: 5;
|
|
}
|
|
|
|
.appWindow > .authentication-dialog {
|
|
z-index: 100;
|
|
}
|
|
|
|
.appWindow.slideleft {
|
|
animation: slideLeft 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.slideright {
|
|
animation: slideRight 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.slide-from-bottom {
|
|
animation: slideFromDown 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.slide-to-bottom {
|
|
animation: slideToDown 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.slide-from-top {
|
|
animation: slideFromUp 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
#windows.slow-transition .appWindow.slide-from-top {
|
|
animation: slideFromUp 3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.slide-to-top {
|
|
animation: slideToUp 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.in-from-left {
|
|
animation: inFromLeft 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
|
|
}
|
|
|
|
.appWindow.out-to-right {
|
|
animation: outToRight 0.3s 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 0.3s 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%)); }
|
|
}
|
|
|
|
/* Edges */
|
|
#windows > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow) {
|
|
/* not in the viewport */
|
|
transform: translateX(-100%);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* making the appWindows moz-elementable for the cardview */
|
|
#screen #windows > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow).in-task-manager {
|
|
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: none;
|
|
}
|
|
|
|
#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));
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
#screen.software-button-enabled:not(.fullscreen-layout-app) #windows > .appWindow.outside-edges-right {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
#windows .appWindow.active iframe {
|
|
transition-property: transform;
|
|
transition-duration: 0.5s;
|
|
}
|
|
|
|
#screen.locked #windows .appWindow.active iframe {
|
|
transition-property: none;
|
|
}
|
|
|
|
.appWindow.attentionWindow[transition-state="closed"] > div.browser-container {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hide chrome UI of attention window */
|
|
.appWindow.attentionWindow > .chrome > .controls > .urlbar > .title {
|
|
display: none;
|
|
}
|
|
|
|
#screen #windows .transparent-inline-activity.render > div.browser-container,
|
|
#screen #windows .transparent-inline-activity.render > div.browser-container > iframe.browser {
|
|
background-color: transparent;
|
|
}
|