]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/core/hotkeys/hotkeys.component.scss
Merge branch 'open-api-clients' into develop
[github/Chocobozzz/PeerTube.git] / 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 }