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

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