]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/core/hotkeys/hotkeys.component.scss
wrap the hotkeys component to allow templating :art:
[github/Chocobozzz/PeerTube.git] / client / src / app / core / hotkeys / hotkeys.component.scss
CommitLineData
7aba23d1
RK
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}