VulpesOS/gaia/tv_apps/smart-system/style/window_layout.css

/*****************************************************************************\
| Window Layout
|
| By default all windows are positioned at coordinates:
| {
|   top: 0;
|   bottom: 0;
|   width: 100%;
|   height: 100%;
| }
|
| As a result, windows covered 100% of the screen.
| It is tempting to use right: 0; and bottom: 0; to automatically adjust the
| height of elements, but because windows contains some iframes, which are
| replaced element it does not work as expected as the width/height needs to
| be added as css rules for iframes.
| This would be doable once bug 527585 is resolved, by using:
|   iframe {
|     width: -moz-available; (already works)
|     height: -moz-available; (bug 527585)
|   }
|
| The window position/geometry is usually static, but some System app changes
| may affect those.
| The list here try to cover all the possible cases:
|   * Software home button
|     The software home button is managed by the system app, and covers the
|     bottom part of the screen.
|
|   * Navigation toolbar
|     Some apps and the system browser use a navigation helper at rendered
|     outside the app window.
|
\*****************************************************************************/

.appWindow,
.activityWindow,
.popupWindow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  border: 0;
  margin: 0;
  padding: 0;

  background-repeat: no-repeat;
  background-position: center center;
}

#screen.software-button-enabled #windows > .appWindow:not(.lockScreenWindow) {
  height: 100%;
}

@media not all and (-moz-physical-home-button) {
  #screen:not(.software-button-disabled) #windows > .appWindow:not(.lockScreenWindow) {
    height: 100%;
  }
}

#screen.fullscreen-layout-app #windows > .appWindow {
  height: 100%;
}

#screen.fullscreen-layout-app.active-statusbar #windows > .appWindow {
  height: calc(100% - 4rem);
}

@media (orientation: landscape) {
  #screen.software-button-enabled:not(.fullscreen-layout-app) #windows > .appWindow:not(.lockScreenWindow) {
    height: 100%;
    width: 100%;
  }

  #screen.software-button-enabled.active-statusbar:not(.fullscreen-layout-app) #windows > .appWindow:not(.lockScreenWindow) {
    height: calc(100% - 4rem);
    width: 100%;
  }

  @media not all and (-moz-physical-home-button) {
    #screen:not(.software-button-disabled):not(.fullscreen-layout-app) #windows > .appWindow:not(.lockScreenWindow) {
      height: 100%;
      width: 100%;
    }

    #screen:not(.software-button-disabled).active-statusbar:not(.fullscreen-layout-app) #windows > .appWindow:not(.lockScreenWindow) {
      height: calc(100% - 4rem);
      width: 100%;
    }
  }
}

/*****************************************************************************\
| Childs Layout
\*****************************************************************************/

/* Regular windows */

.appWindow > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* The loading indicator is part of .chrome and needs to animate with it
 so do not apply overflow: hidden to it */
.appWindow > div:not(.chrome) {
  overflow: hidden;
}

.appWindow > div > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.appWindow.collapsible:not(.scrollable) > div > iframe {
  height: calc(100% - 4.6rem);
}

.appWindow > .fade-overlay,
.appWindow > .identification-overlay {
  top: 0;
}

.appWindow > .fade-overlay,
.appWindow > .identification-overlay {
  height: 100%;
}

/* Fullscreen windows */

#screen:-moz-full-screen-ancestor .appWindow > div,
.appWindow.fullscreen-app:not(.popupWindow) > div:not(.titlebar):not(.maximized):not(.chrome) {
  top: 0;
  height: 100%;
}

#screen:-moz-full-screen-ancestor .appWindow > .titlebar,
.appWindow.fullscreen-app > .titlebar {
  transform: translateY(0);
  /* Same z-index as: https://github.com/mozilla-b2g/gaia/pull/22174/files#diff-889fcaf0800608d5aaa275a452c7492fR23 */
  z-index: 1001;
}


#screen:-moz-full-screen-ancestor .appWindow > .titlebar.dragged,
.appWindow.fullscreen-app > .titlebar.dragged {
  transform: translateY(0);
}

#screen .appWindow.fullscreen-app > .chrome.dragged {
  transform: scaleY(1) translateY(0);
}

/* Nested Windows */
.appWindow > .appWindow {
  top: 0;
  height: 100%;
}

/* The popup window does not collapse the rocketbar and has a static header. */
.popupWindow .browser-container {
  /* 5rem header + statusbar height */
  top: 5rem;
  height: calc(100% - 5rem);
}

/*****************************************************************************\
| Scrollable Layout
\*****************************************************************************/

.appWindow.collapsible > div.browser-container {
  overflow-x: hidden;
  overflow-y: scroll;
}

.appWindow.collapsible > div.browser-container > iframe {
  top: 4.6rem;
}

/*
 * For the moment the lockscreen window is a kind weird mix between
 * a fullscreen app and a non fullscreen app.
 */
.appWindow.lockScreenWindow > div.browser-container {
  top: 0;
  height: 100%;
  z-index: 0;
}

/*
 * Attention window layout.
 */
.attentionWindow > div.browser-container > iframe {
  border: 0;
}

.appWindow.attentionWindow,
.appWindow.attentionWindow[transition-state="closed"] {
  transform: translateY(calc(-100%));
  opacity: 1;
}

.appWindow.attentionWindow[transition-state="closed"].toaster-mode {
  transition: transform .3s ease-in-out;
}

.appWindow.attentionWindow[transition-state="closed"] > .chrome,
.appWindow.attentionWindow[transition-state="closed"] > .titlebar {
  display: none;
}

.appWindow.attentionWindow[transition-state="closed"] > div.browser-container {
  height: 100%;
  top: 0;
}

.appWindow.attentionWindow[transition-state="closed"].displayed {
  transform: translateY(0);
}

.appWindow.attentionWindow[transition-state="closed"].toaster-mode[toaster-transition-state="opened"] {
  transition: transform .2s linear;
}