logviewer/static/css/pushmenu.css

   1 #pm_menu {
   2                 position: fixed; height: 100%; width: 300px; background:red; top: 0; z-index: 1001;
   3                 -webkit-animation: backSlideOut .3s both ease;
   4                 -moz-animation: backSlideOut .3s both ease;
   5                 animation: backSlideOut .3s both ease;
   6         }
   7         #pm_menu.pm_open{
   8                 left: 0px;
   9                 -webkit-animation: backSlideIn .5s both ease;
  10                 -moz-animation: backSlideIn .5s both ease;
  11                 animation: backSlideIn .5s both ease;
  12         }
  13     #pm_menu.pm_initial{
  14         display: none;
  15     }
  16         .pm_overlay{
  17                 width: 100%;
  18                 height: 100%;
  19                 padding: 0;
  20                 margin: 0;
  21                 position: fixed;
  22                 z-index: 1000;
  23                 background: rgba(0,0,0,0.5);
  24                 left: 0;
  25                 top: 0;
  26                 -webkit-animation: fadeOut .5s both ease;
  27                 -moz-animation: fadeOut .5s both ease;
  28                 animation: fadeOut .5s both ease;
  29         }
  30         .pm_overlay.pm_show{
  31                 display: block;
  32                 -webkit-animation: fadeIn .3s both ease;
  33                 -moz-animation: fadeIn .3s both ease;
  34                 animation: fadeIn .3s both ease;
  35         }
  36         .pm_overlay.pm_hide{
  37                 display: none;
  38         }
  39         /* Keyframes */
  40         /*empty*/
  41         @-webkit-keyframes empty {
  42           0% {opacity: 1}
  43         }
  44         @-moz-keyframes empty {
  45           0% {opacity: 1}
  46         }
  47         @keyframes empty {
  48           0% {opacity: 1}
  49         }
  50         @-webkit-keyframes fadeIn {
  51           0% { opacity:0; }
  52           100% { opacity:1; }
  53         }
  54         @-moz-keyframes fadeIn {
  55           0% { opacity:0; }
  56           100% { opacity:1; }
  57         }
  58         @keyframes fadeIn {
  59           0% { opacity:0; }
  60           100% { opacity:1; }
  61         }
  62         @-webkit-keyframes fadeOut {
  63           0% { opacity:1; }
  64           100% { opacity:0; display: none; }
  65         }
  66         @-moz-keyframes fadeOut {
  67           0% { opacity:1; }
  68           100% { opacity:0; display: none; }
  69         }
  70         @keyframes fadeOut {
  71           0% { opacity:1; }
  72           100% { opacity:0; display: none; }
  73         }
  74         @-webkit-keyframes backSlideOut {
  75           0% { opacity: 1; -webkit-transform: translateX(0px); }
  76           50% { opacity: 1; }
  77           100% { opacity: 0; -webkit-transform: translateX(-100%); }
  78         }
  79         @-moz-keyframes backSlideOut {
  80           0% { opacity: 1; -webkit-transform: translateX(0px); }
  81           50% { opacity: 1; }
  82           100% { opacity: 0; -webkit-transform: translateX(-100%); }
  83         }
  84         @keyframes backSlideOut {
  85           0% { opacity: 1; -webkit-transform: translateX(0px); }
  86           50% { opacity: 1; }
  87           100% { opacity: 0; -webkit-transform: translateX(-100%); }
  88         }
  89         @-webkit-keyframes backSlideIn {
  90           0% { opacity: 0; -webkit-transform: translateX(-100%); }
  91           100% { opacity: 1; -webkit-transform: translateX(0px); }
  92         }
  93         @-moz-keyframes backSlideIn {
  94           0% { opacity: 0; -webkit-transform: translateX(-100%); }
  95           100% { opacity: 1; -webkit-transform: translateX(0px); }
  96         }
  97         @keyframes backSlideIn {
  98           0% { opacity: 0; -webkit-transform: translateX(-100%); }
  99           100% { opacity: 1; -webkit-transform: translateX(0px); }
 100         }