VulpesOS/gaia/apps/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;

  overflow: hidden;
}

#screen.software-button-enabled #windows > .appWindow:not(.lockScreenWindow):not(.lockScreenInputWindow),
#screen.software-button-enabled.fullscreen-layout-app .activityWindow.inline-activity {
  height: calc(100% - var(--software-home-button-height));
}

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

#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):not(.lockScreenInputWindow) {
    height: 100%;
    width: calc(100% - var(--software-home-button-height));
  }

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

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

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

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

/* Regular windows */

.appWindow > div {
  position: absolute;
  top: var(--statusbar-height);
  left: 0;
  width: 100%;
  height: calc(100% - var(--statusbar-height));
}

/* 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% - var(--rocketbar-urlbar-height));
}

.appWindow.searchWindow > div {
  top: 0;
  height: 100%;
}

.appWindow.searchWindow > .value-selector {
  top: calc(-1 * (var(--rocketbar-urlbar-height) + var(--statusbar-height)));
  height: calc(100% + var(--rocketbar-urlbar-height) + var(--statusbar-height));
}

.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 > div:not(.titlebar):not(.maximized) {
  top: 0;
  height: 100%;
}

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

.appWindow.fullscreen-app[data-shrinking-state="true"] > .titlebar {
  transform: translateY(0);
}

#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 and trusted window does not collapse the rocketbar and has a static header. */
.popupWindow > .browser-container,
.trustedwindow > .browser-container {
  /* 5rem header + statusbar height */
  top: calc(5rem + var(--statusbar-height));
  height: calc(100% - 5rem - var(--statusbar-height));
}


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

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

.appWindow.collapsible > div.browser-container > iframe {
  top: var(--rocketbar-urlbar-height);
}

/*****************************************************************************\
| Search Window Layout
\*****************************************************************************/

/*
 * Because the search input lives in the system app, while the search app
 * lives into its own search window, the context menu for such an application
 * does not cover the whole screen.
 * In order to have it cover the whole screen, the contextmenu which is part of
 * the app window of the search window, is positioned negatively on the y-axis,
 * while overflow is authorize for such window.
 */
.appWindow.searchWindow .contextmenu {
  top: -7rem;
}

/*
 * Because the search input lives in the system app, while the search app
 * lives into its own window, activities windows attached to the search app
 * does not cover the whole screen.
 * In order to cover the whole screen, the activityWindow is positioned to the
 * top of the screen and expanded to cover the whole screen.
 */
.appWindow.searchWindow .activityWindow,
.appWindow.searchWindow .popupWindow {
  height: calc(100% + 7rem + var(--statusbar-height));
  top: calc(-7rem - var(--statusbar-height));
}

.appWindow.searchWindow > .titlebar {
  height: 0;
}

/*
 * 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.callscreenWindow,
.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;
}