client/src/app/core/hotkeys/hotkeys.component.scss

   1 .cfp-hotkeys-container {
   2   display: table !important;
   3   position: fixed;
   4   overflow: auto;
   5   width: 100%;
   6   height: 100%;
   7   top: 0;
   8   left: 0;
   9   color: #333;
  10   font-size: 1em;
  11   background-color: rgba(255,255,255,0.9);
  12 }
  13
  14 .cfp-hotkeys-container.fade {
  15   z-index: -1024;
  16   visibility: hidden;
  17   opacity: 0;
  18   -webkit-transition: opacity 0.15s linear;
  19   -moz-transition: opacity 0.15s linear;
  20   -o-transition: opacity 0.15s linear;
  21   transition: opacity 0.15s linear;
  22 }
  23
  24 .cfp-hotkeys-container.fade.in {
  25   z-index: 10002;
  26   visibility: visible;
  27   opacity: 1;
  28 }
  29
  30 .cfp-hotkeys-title {
  31   font-weight: bold;
  32   text-align: center;
  33   font-size: 1.2em;
  34 }
  35
  36 .cfp-hotkeys {
  37   width: 100%;
  38   height: 100%;
  39   display: table-cell;
  40   vertical-align: middle;
  41 }
  42
  43 .cfp-hotkeys table {
  44   margin: auto;
  45   color: #333;
  46 }
  47
  48 .cfp-content {
  49   display: table-cell;
  50   vertical-align: middle;
  51 }
  52
  53 .cfp-hotkeys-keys {
  54   padding: 5px;
  55   text-align: right;
  56 }
  57
  58 .cfp-hotkeys-key {
  59   display: inline-block;
  60   color: #fff;
  61   background-color: #333;
  62   border: 1px solid #333;
  63   border-radius: 5px;
  64   text-align: center;
  65   margin-right: 5px;
  66   box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
  67   padding: 5px 9px;
  68   font-size: 1em;
  69 }
  70
  71 .cfp-hotkeys-text {
  72   padding-left: 10px;
  73   font-size: 1em;
  74 }
  75
  76 .cfp-hotkeys-close {
  77   position: fixed;
  78   top: 20px;
  79   right: 20px;
  80   font-size: 2em;
  81   font-weight: bold;
  82   padding: 5px 10px;
  83   border: 1px solid #ddd;
  84   border-radius: 5px;
  85   min-height: 45px;
  86   min-width: 45px;
  87   text-align: center;
  88 }
  89
  90 .cfp-hotkeys-close:hover {
  91   background-color: #fff;
  92   cursor: pointer;
  93 }
  94
  95 @media all and (max-width: 500px) {
  96   .cfp-hotkeys {
  97     font-size: 0.8em;
  98   }
  99 }
 100
 101 @media all and (min-width: 750px) {
 102   .cfp-hotkeys {
 103     font-size: 1.2em;
 104   }
 105 }