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