diff options
Diffstat (limited to 'client/src/app/core/hotkeys/hotkeys.component.scss')
-rw-r--r-- | client/src/app/core/hotkeys/hotkeys.component.scss | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss new file mode 100644 index 000000000..9af10b7c4 --- /dev/null +++ b/client/src/app/core/hotkeys/hotkeys.component.scss | |||
@@ -0,0 +1,105 @@ | |||
1 | .cfp-hotkeys-container { | ||
2 | display: table !important; | ||
3 | position: fixed; | ||
4 | overflow: auto; | ||
5 | width: 100%; | ||
6 | height: 100%; | ||
7 | top: 0; | ||
8 | left: 0; | ||
9 | color: #333; | ||
10 | font-size: 1em; | ||
11 | background-color: rgba(255,255,255,0.9); | ||
12 | } | ||
13 | |||
14 | .cfp-hotkeys-container.fade { | ||
15 | z-index: -1024; | ||
16 | visibility: hidden; | ||
17 | opacity: 0; | ||
18 | -webkit-transition: opacity 0.15s linear; | ||
19 | -moz-transition: opacity 0.15s linear; | ||
20 | -o-transition: opacity 0.15s linear; | ||
21 | transition: opacity 0.15s linear; | ||
22 | } | ||
23 | |||
24 | .cfp-hotkeys-container.fade.in { | ||
25 | z-index: 10002; | ||
26 | visibility: visible; | ||
27 | opacity: 1; | ||
28 | } | ||
29 | |||
30 | .cfp-hotkeys-title { | ||
31 | font-weight: bold; | ||
32 | text-align: center; | ||
33 | font-size: 1.2em; | ||
34 | } | ||
35 | |||
36 | .cfp-hotkeys { | ||
37 | width: 100%; | ||
38 | height: 100%; | ||
39 | display: table-cell; | ||
40 | vertical-align: middle; | ||
41 | } | ||
42 | |||
43 | .cfp-hotkeys table { | ||
44 | margin: auto; | ||
45 | color: #333; | ||
46 | } | ||
47 | |||
48 | .cfp-content { | ||
49 | display: table-cell; | ||
50 | vertical-align: middle; | ||
51 | } | ||
52 | |||
53 | .cfp-hotkeys-keys { | ||
54 | padding: 5px; | ||
55 | text-align: right; | ||
56 | } | ||
57 | |||
58 | .cfp-hotkeys-key { | ||
59 | display: inline-block; | ||
60 | color: #fff; | ||
61 | background-color: #333; | ||
62 | border: 1px solid #333; | ||
63 | border-radius: 5px; | ||
64 | text-align: center; | ||
65 | margin-right: 5px; | ||
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 | 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: 500px) { | ||
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 | } \ No newline at end of file | ||