css/splashscreen.css

   1 #splash-screen {
   2   width: 100%;
   3   height: 100%;
   4   position: absolute;
   5   z-index: 999;
   6   overflow: hidden;
   7   background: -webkit-radial-gradient(center, ellipse cover, #4fc3f7 10%, #01579b 100%);
   8 }
   9
  10 #splashscreen * {
  11   overflow: hidden;
  12 }
  13 .clock {
  14   display: none;
  15 }
  16 #splash-screen-content {
  17   position: absolute;
  18   width: 100%;
  19   height: 100%;
  20   top: 0;
  21 }
  22 .SplashScreen-screen-img {
  23  /* nothing here right now */
  24 }
  25 .filter{
  26   filter: blur(4px) contrast(110%) brightness(80%);
  27 }
  28 .vignette {
  29   width: 100%;
  30   height: 100%;
  31   position: absolute;
  32   top: 0;
  33   box-shadow: inset 0 0 100px black;
  34   z-index: 2;
  35   display: none;
  36 }
  37 /* CSS animations for smoother response, delays have to be hardcoded */
  38 .move-up {
  39   animation-name: move-up;
  40   animation-duration: 500ms;
  41 }
  42 @keyframes move-up {
  43   from {top: 0;}
  44   to {top: -100%}
  45 }
  46
  47 .move-up {
  48   animation-name: move-up;
  49   /* animation-timing-function: ease-in-out; */
  50   animation-duration: 700ms; /* has to be hardcoded */
  51 }
  52 @keyframes move-up {
  53   from {top: 0;}
  54   to {top: -100%}
  55 }
  56 .move-down {
  57   animation-name: move-down;
  58   /* animation-timing-function: ease-in; */
  59   animation-duration: 700ms;
  60 }
  61 @keyframes move-down {
  62   from {top: -100%;}
  63   to {top: 0}
  64 }