@use '_variables' as *; @use '_mixins' as *; .cfp-hotkeys-container { display: flex !important; align-items: center; position: fixed; overflow: auto; width: 100%; height: 100%; top: 0; left: 0; color: pvar(--mainForegroundColor); font-size: 1em; background-color: pvar(--mainBackgroundColor); } .cfp-hotkeys-container.fade { z-index: -1024; visibility: hidden; opacity: 0; transition: opacity 0.15s linear; } .cfp-hotkeys-container.fade.in { z-index: z(hotkeys); visibility: visible; opacity: 1; } .cfp-hotkeys-title { font-weight: bold; text-align: center; font-size: 1.2em; } .cfp-hotkeys { width: 100%; max-height: 100%; } .cfp-hotkeys ul { margin: auto; width: fit-content; list-style: none; color: pvar(--mainForegroundColor); } .cfp-hotkeys-keys, .cfp-hotkeys-text { display: inline-block; } .cfp-hotkeys-keys { padding: 5px; min-width: 90px; > span { @include margin-right(5px); display: inline-block; color: pvar(--mainBackgroundColor); background-color: pvar(--mainForegroundColor); border: 1px solid pvar(--mainForegroundColor); border-radius: 5px; text-align: center; box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb; padding: 5px 9px; font-size: 1em; } } .cfp-hotkeys-text { @include padding-left(10px); font-size: 1em; } .cfp-hotkeys-close { position: fixed; top: 20px; right: 20px; font-size: 2em; font-weight: bold; padding: 5px 10px; border: 1px solid #ddd; border-radius: 5px; min-height: 45px; min-width: 45px; text-align: center; &:hover { cursor: pointer; opacity: 0.8; } } @media all and (max-width: $mobile-view) { .cfp-hotkeys { font-size: 0.8em; } } @media all and (min-width: 750px) { .cfp-hotkeys { font-size: 1.2em; } }