]>
Commit | Line | Data |
---|---|---|
dcf3d43b DC |
1 | html,body { |
2 | height: 100%; | |
3 | min-height: 100%; | |
4 | margin: 0; | |
5 | padding: 0; | |
6 | overflow: hidden; | |
7 | font-family: Consolas,"DejaVu Sans Mono","Liberation Mono",Courier,monospace; | |
8 | background-color: #101010; | |
9 | } | |
10 | ||
11 | .terminal { | |
12 | background-color: #101010; | |
13 | color: #f0f0f0; | |
14 | font-size: 10pt; | |
15 | font-family: Consolas,"DejaVu Sans Mono","Liberation Mono",Courier,monospace; | |
16 | font-variant-ligatures: none; | |
17 | -moz-osx-font-smoothing: grayscale; | |
18 | -webkit-font-smoothing: antialiased; | |
19 | } | |
20 | ||
21 | .terminal .xterm-viewport { | |
22 | background-color: rgba(121, 121, 121, 0); | |
23 | -webkit-background-clip: text; | |
24 | -webkit-text-fill-color: transparent; | |
25 | transition: background-color 800ms linear; | |
26 | } | |
27 | ||
28 | /* fix line height on firefox */ | |
29 | .xterm-rows > div > span { | |
30 | display: inline-block; | |
31 | } | |
32 | ||
33 | #terminal-container { | |
34 | height: 100%; | |
35 | width: auto; | |
36 | } | |
37 | ||
38 | #wrap { | |
39 | height: 100%; | |
40 | width: auto; | |
41 | box-sizing: border-box; | |
42 | padding: 5px; | |
43 | } | |
44 | ||
45 | #status_bar { | |
46 | position: fixed; | |
47 | top: 0; | |
48 | left: 0; | |
49 | width: 100%; | |
50 | z-index: 500; | |
51 | transform: translateY(-100%); | |
52 | ||
53 | transition: 0.25s ease-in-out; | |
54 | ||
55 | visibility: hidden; | |
56 | opacity: 0; | |
57 | ||
58 | padding: 5px; | |
59 | ||
60 | display: flex; | |
61 | flex-direction: row; | |
62 | justify-content: center; | |
63 | align-content: center; | |
64 | ||
65 | line-height: 25px; | |
66 | color: #fff; | |
67 | ||
68 | border-bottom: 1px solid rgba(0, 0, 0, 0.9); | |
69 | } | |
70 | ||
71 | #status_bar.open { | |
72 | transform: translateY(0); | |
73 | visibility: visible; | |
74 | opacity: 1; | |
75 | } | |
76 | ||
77 | #status_bar.normal { | |
78 | background: rgba(128,128,128,0.9); | |
79 | } | |
80 | #status_bar.error { | |
81 | background: rgba(200,55,55,0.9); | |
82 | } | |
83 | #status_bar.warning { | |
84 | background: rgba(180,180,30,0.9); | |
85 | } | |
9871a3b8 DC |
86 | |
87 | #pve_start_info { | |
88 | color: white; | |
89 | text-align: center; | |
90 | font-size: 20px; | |
91 | padding: 6px; | |
92 | } | |
93 | ||
94 | #connect_dlg { | |
95 | transition: 0.2s ease-in-out; | |
96 | ||
97 | transform: scale(0, 0); | |
98 | visibility: hidden; | |
99 | opacity: 0; | |
100 | font-family: Helvetica; | |
101 | } | |
102 | ||
103 | #connect_dlg.pve_open { | |
104 | transform: scale(1, 1); | |
105 | visibility: visible; | |
106 | opacity: 1; | |
107 | } | |
108 | ||
109 | #connect_btn { | |
110 | cursor: pointer; | |
111 | padding: 6px; | |
112 | color: white; | |
113 | background:#4c4c4c;; | |
114 | border-radius: 8px; | |
115 | text-align: center; | |
116 | font-size: 20px; | |
117 | box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5); | |
118 | } | |
119 | #connect_btn div { | |
120 | margin: 2px; | |
121 | padding: 5px 30px; | |
122 | border: 1px solid #2f2f2f; | |
123 | border-bottom-width: 2px; | |
124 | border-radius: 5px; | |
125 | background:#4c4c4c;; | |
126 | ||
127 | /* This avoids it jumping around when :active */ | |
128 | vertical-align: middle; | |
129 | } | |
130 | #connect_btn div:active { | |
131 | border-bottom-width: 1px; | |
132 | margin-top: 3px; | |
133 | } | |
134 | ||
135 | div.center { | |
136 | display: flex; | |
137 | align-items: center; | |
138 | justify-content: center; | |
139 | position: fixed; | |
140 | top: 0; | |
141 | left: 0; | |
142 | width: 100%; | |
143 | height: 100%; | |
144 | } |