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

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