/* zIndex of important system app parts * is gathered here to clearly specify all system-app hierarchy */ /* Reset zIndex */ #screen > *:not([data-z-index-level]) { z-index: 0; } /* Level 1 */ /** * Top layer, covers all of the screen no matter what's the height * of the status bar. * System overlay > Sleep menu > Card view */ /* Find the same code in system/index.html #screen > [data-z-index-level="initlogo"] { z-index: 65538; } */ /* Home gesture panel should not be covered by any element of system */ #screen > #bottom-panel.visible { z-index: 2147483647; } /* System developer HUD should be above everything */ #screen > .developer-hud { z-index: 2147483647; } #screen > *[data-z-index-level="poweroff-splash"] { z-index: 65536; } #screen > [data-z-index-level="debug-ttl"] { z-index: 65536; } #screen > [data-z-index-level="system-notification-banner"] { z-index: 65536; } #screen > [data-z-index-level="system-overlay"] { z-index: 65536; } #screen > [data-z-index-level="hardware-buttons"] { z-index: 65536; } #screen > [data-z-index-level="sleep-menu"] { z-index: 65536; } /* Software home button should have higher z-index than system notification banners to keep from being overlaid */ #screen > [data-z-index-level="software-buttons"] { z-index: 65537; } /* Promote the transitioning appWindow to this level as the entry and exiting * transition of the cards view. */ #screen > [data-z-index-level="app"] .appWindow.in-task-manager.active:not(.homescreen), #screen > [data-z-index-level="app"] .appWindow.in-task-manager.transition-opening:not(.homescreen), #screen > [data-z-index-level="app"] .appWindow.in-task-manager.transition-closing.to-cardview:not(.homescreen), #screen > [data-z-index-level="app"] .appWindow.in-task-manager.transition-opening.fullscreen-app:not(.homescreen), #screen > [data-z-index-level="app"] .appWindow.in-task-manager.transition-closing.fullscreen-app.to-cardview:not(.homescreen) { z-index: 65537 !important; } #screen > [data-z-index-level="cards-view"] { z-index: 65535; } #screen.cards-view > [data-z-index-level="software-buttons"] { z-index: 65538; } #screen > [data-z-index-level="attention-indicator"] { z-index: 32769; } /* Level 2: Notification toaster */ #screen > [data-z-index-level="notification-toaster"], #screen > [data-z-index-level="app"] > .appWindow.attentionWindow.toaster-mode { z-index: 32768; } #screen > [data-z-index-level="keyboards"] { /* It should lower than UtilityTray's, to let the tray overlay it in some situation like selecting a new keyboard. */ z-index: 4094; } /* Level 3: Statusbar, Utility-Tray */ #screen > [data-z-index-level="statusbar"] { z-index: 16385; } /* In landscape the software home button is on the right side of the screen * so we demote it below the gesture-panels to prevent edge gestures issues * (the software home button doesn't need to be on top of the keyboard * in landscape). */ @media (orientation: landscape) { #screen > [data-z-index-level="software-buttons"] { z-index: 4092; } } /* * Promote keyboards to attention screen level when * there is an active attention screen not minimized in * the status bar */ #screen > [data-z-index-level="utility-tray"] { z-index: 16384; } #screen > [data-z-index-level="utility-tray-notifications"] { z-index: 16384; } /* Level 4: Attention window */ #screen > [data-z-index-level="app"] > .appWindow.attentionWindow.active.top-most { z-index: 8193; } #screen > [data-z-index-level="app"] > .appWindow.attentionWindow { z-index: 8192; } /* Level 5: Activity menu, context menu, value selector, and permissions */ #screen > [data-z-index-level="action-menu"] { z-index: 4096; } #screen > [data-z-index-level="permission-screen"] { z-index: 4096; } /* The edges zones get promoted when an action menu is displayed */ #screen.action-menu > [data-z-index-level="gesture-panel"] { z-index: 4097; } #screen > [data-z-index-level="gesture-panel"] { z-index: 4093; } #screen > .selection-border { z-index: 4098; } /* Level 6: Lock Screen */ #screen > [data-z-index-level="app"] > .secureAppWindow.active:not(.homescreen) { /* Or the .appWindow one would be first adopted.*/ z-index: 4098 !important; } #screen > [data-z-index-level="app"] > .lockScreenWindow.active { /* Or the .appWindow one would be first adopted.*/ z-index: 2048 !important; } #screen > [data-z-index-level="lockscreen-camera"] { z-index: 2046; } #screen > [data-z-index-level="system-dialog"] { z-index: 2045; } /* Keep keyboard and edges zones under lockscreen when locked */ #screen.locked > [data-z-index-level="keyboards"] { z-index: 2044; } #screen > [data-z-index-level="rocketbar-results"] { z-index: 2043; } /* * In order to display a context menu on top of the search input * the z-indexes needs to be updated. * The real issue is that the search input is part of the statusbar. */ #screen.rocketbar-focused > [data-z-index-level="statusbar"] { z-index: 2042; } #screen > [data-z-index-level="rocketbar-backdrop"] { z-index: 2041; } #screen.locked > [data-z-index-level="gesture-panel"] { z-index: 2043; } /* Level 7: Dialog Module */ #screen > [data-z-index-level="dialog-overlay"], #screen > [data-z-index-level="app"] > .appWindow.active > [data-z-index-level="value-selector"], #screen > [data-z-index-level="ime-layout-dialog"], #screen > [data-z-index-level="app-install-dialog"], #screen > [data-z-index-level="updates-download-dialog"], #screen > [data-z-index-level="updates-viaDataConnection-dialog"], #screen > [data-z-index-level="emergency-callback-dialog"], #screen > [data-z-index-level="quick-setting-data-enabled-dialog"] { z-index: 1024; } #screen > [data-z-index-level="ext-selection-dialog"] { z-index: 100; } /* Level 8 */ /** *#screen > [data-z-index-level="app"] { * Should not specify z-index here * Keyboard should be kept upon #windows * and beneath #windows > .appWindow *} */ /* The below z-index numbers are used to meet the following conditions: * - active ones must be on top of inactive ones * - keyboard frame must be below active ones * - keyboard frame must be above inactive ones * - during an edge gesture a new app coming from the right needs to be on top * - active homescreen frame must be on top of app frame. * - app frame must be on top of inactie homescreen frame. * - finally, everything else needs to be on top of them (hence the lowest nums) */ #screen > [data-z-index-level="app"] > .appWindow.out-to-right { z-index: 20; } #screen > [data-z-index-level="app"] > .appWindow.transition-opening:not(.homescreen):not(.attentionWindow) { z-index: 18; } #screen > [data-z-index-level="app"] > .appWindow.transition-closing:not(.attentionWindow) { z-index: 16; } #screen > [data-z-index-level="app"] > .appWindow.homescreen.active { z-index: 14; } #screen > [data-z-index-level="app"] > .appWindow.active:not(.homescreen):not(.attentionWindow), #screen > [data-z-index-level="app"] > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow), #screen > [data-z-index-level="app"] > .appWindow.will-become-active { z-index: 12; } #screen > [data-z-index-level="app"] > .appWindow.in-from-left { z-index: 10; } #screen > [data-z-index-level="app"] > .appWindow:not(.attentionWindow) { z-index: 8; } #screen > [data-z-index-level="app"] > .appWindow.homescreen { z-index: 6; } #screen > [data-z-index-level="app"] > .appWindow.homescreen.transition-opening { z-index: 0; } /* We promote the following overlays on top of the fullscreen web content. */ #screen:-moz-full-screen-ancestor > [data-z-index-level="sleep-menu"], #screen:-moz-full-screen-ancestor > [data-z-index-level="action-menu"], #screen.locked:-moz-full-screen-ancestor > [data-z-index-level="statusbar"], #screen:-moz-full-screen-ancestor > [data-z-index-level="lockscreen-camera"], #screen:-moz-full-screen-ancestor > [data-z-index-level="app"] > .appWindow.active > [data-z-index-level="value-selector"], #screen:-moz-full-screen-ancestor > [data-z-index-level="system-overlay"], #screen:-moz-full-screen-ancestor > [data-z-index-level="dialog-overlay"], #screen:-moz-full-screen-ancestor > [data-z-index-level="app"] > .appWindow.attentionWindow, #screen:-moz-full-screen-ancestor > [data-z-index-level="app"] > .appWindow.active > .modal-dialog, #screen:-moz-full-screen-ancestor > [data-z-index-level="keyboards"], #screen:-moz-full-screen-ancestor > [data-z-index-level="notification-toaster"], #screen:-moz-full-screen-ancestor > [data-z-index-level="cards-view"], #screen:-moz-full-screen-ancestor > [data-z-index-level="permission-screen"], #screen:-moz-full-screen-ancestor > [data-z-index-level="app-install-dialog"], #screen:-moz-full-screen-ancestor > [data-z-index-level="ime-layout-dialog"], #screen:-moz-full-screen-ancestor > [data-z-index-level="fullscreen-software-home-button"], #screen:-moz-full-screen-ancestor > [data-z-index-level="gesture-panel"], #screen:-moz-full-screen-ancestor > [data-z-index-level="attention-indicator"] { z-index: 2147483647; } /* In fullscreen_layout mode we optimize for easy enter/exit of the fullscreen mode * and keep the potential software home button always on top. */ #screen.fullscreen-layout-app > [data-z-index-level="gesture-panel"], #screen.fullscreen-layout-app > [data-z-index-level="fullscreen-layout-software-home-button"] { z-index: 2147483647; } /** * Accessibility screen reader captions should be visible if they are enabled * and the screen reader is on */ #screen > [data-z-index-level="accessibility-captions"] { z-index: 2147483647; }