system.css

html {
  font-size: 10px;
  font-weight: 500;
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: #fff;
}

#screen {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-size: cover; /* Possible memory over-consumption with huge images, it should be removed for improving stability*/
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#screen.screenoff {
  background: #000 !important;
}

#screen.screenoff * {
  visibility: hidden !important;
}

/*
 *  Poweroff animation
 */
#screen > div#poweroff-splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

#screen > div#poweroff-splash.step1 {
  animation: poweroff-splash-fade-in 0.5s;
}

@keyframes poweroff-splash-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#bottom-panel {
  position: absolute;
  display: none;
  bottom: 0;
  width: 100%;
  height: 1rem;
}

#bottom-panel.visible{
  display: block;
}

.poweroff-ring {
  display: block;
  position: absolute;
  border-radius: 50%;
  width: 19vw;
  height: 19vw;
  margin-left: -9.5vw;
  margin-top: -9.5vw;
  left: 50%;
  opacity: 0;
}

#poweroff-ring-1 {
  top: 25%;
  background-color: #e66600;
}

#poweroff-ring-2 {
  top: 50%;
  background-color: #dc4e00;
}

#poweroff-ring-3 {
  top: 75%;
  background-color: #d24500;
}

.poweroff-ring > span {
  display: block;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: auto;
  background-color: black;
  width: 12vw;
  height: 12vw;
  margin-top: -6vw;
  margin-left: -6vw;
}

@media all and (orientation:landscape) {
  .poweroff-ring {
    width: 19vh;
    height: 19vh;
    margin-left: -9.5vh;
    margin-top: -9.5vh;
  }

  .poweroff-ring > span {
    width: 12vh;
    height: 12vh;
    margin-top: -6vh;
    margin-left: -6vh;
  }
}

#poweroff-ring-2 > span {
  transform: scale(1.125);
}

#poweroff-ring-3 > span {
  transform: scale(1.25);
}

/* Ring 1 : inner diameter scales from 40 pixel to 58 pixel */
@keyframes ring1-scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.45);
  }
}

/* Ring 2 : inner diameter scales from 45 pixel to 59.5 pixel */
@keyframes ring2-scale {
  0% {
    transform: scale(1.125);
  }
  100% {
    transform: scale(1.4875);
  }
}

/* Ring 3 : inner diameter scales from 50 pixel to 59 pixel */
@keyframes ring3-scale {
  0% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1.475);
  }
}

@keyframes ring-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ring-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-1 {
  animation: ring-fade-in  .4s ease-out  0s,
             ring-fade-out .5s linear   .4s;
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-2 {
  animation: ring-fade-in  .4s ease-out .25s,
             ring-fade-out .5s linear   .65s;
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-3 {
  animation: ring-fade-in  .4s ease-out .5s,
             ring-fade-out .5s linear   .9s;
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-1 > span {
  animation: ring1-scale   .5s linear   .4s;
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-2 > span {
  animation: ring2-scale   .5s linear   .65s;
}

#screen > div#poweroff-splash.step2 > #poweroff-ring-3 > span {
  animation: ring3-scale   .5s linear   .9s;
}



#system-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;

  pointer-events: none;
}

#system-overlay.volume {
  visibility: visible;
}

#windows {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  max-height: 100%;
  border: 0;
  overflow: hidden;
}

#windows::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 3rem;

  background: rgba(0, 0, 0, .15);
  content: '';
}

#screen.fullscreen-app #windows::before {
  background: black;
}

#secure-windows {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  max-height: 100%;
  border: 0;
  overflow: hidden;
}

#dialog-overlay {
  position: absolute;
  top: 3rem;
  left: 0;
  width: 100%;
  height: calc(100% - 3rem);
  visibility: hidden;
  pointer-events: none;
}

#screen.software-button-enabled #windows + #dialog-overlay {
  bottom: 5rem;
  height: calc(100% - 3rem - 5rem);
}

#screen.active-statusbar #dialog-overlay,
#screen.active-statusbar.fullscreen-app #dialog-overlay {
  top: 4rem;
  height: calc(100% - 4rem);
}

#screen:-moz-full-screen-ancestor #dialog-overlay,
#screen.fullscreen-app #dialog-overlay {
  top: 0;
  height: 100%;
}

#screen:not(.crash-dialog) #crash-dialog {
  visibility: hidden;
}

/* `.dialog` is set by system_dialog.js when a dialog is shown */
#screen.dialog #dialog-overlay {
  visibility: visible;
  pointer-events: auto;
}

#screen.crash-dialog #dialog-overlay,
#screen.crash-dialog #crash-dialog,
#screen.modal-dialog #dialog-overlay,
#screen.modal-dialog #modal-dialog,
#screen.popup #popup-container,
#screen.fxa-dialog #fxa-dialog,
#screen.trustedui #trustedui-container,
#screen.trustedui #dialog-overlay {
  visibility: visible;
  pointer-events: auto;
}

#screen.locked #dialog-overlay {
  visibility: hidden;
}

@keyframes banner-bounce {
  from, to {
    transform: translateY(100%);
    opacity: 0;
  }
  12.5%, 87.5% {
    transform: translateY(0);
    opacity: 1;
  }
}

.generic-dialog.banner {
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
}

/* Banner should be offset when software home button is enabled */
#screen.software-button-enabled .generic-dialog.banner {
  bottom: 5rem;
}

.generic-dialog.banner.visible {
  animation: banner-bounce 4s;
  visibility: visible;
}

.generic-dialog.banner button {
  width: auto;
}

.generic-dialog.banner[data-button="false"] button {
  visibility: hidden;
}

#screen iframe.communication-frame {
  visibility: hidden;
}

@media (min-width: 768px) {
  #dialog-overlay {
    background-color: rgba(0,0,0,0.6);
    background: url(../themes/default/images/ui/menu_bg.png) no-repeat;
  }
}