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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   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: end;
  55 }
  56
  57 .cfp-hotkeys-key {
  58   @include margin-right(5px);
  59
  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   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   @include 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: $mobile-view) {
  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 }