first (largest) part of sync for both themes with toolkit windows theme changes in...
[themes.git] / LCARStrek / devtools / app-manager / device.css
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2  * License, v. 2.0. If a copy of the MPL was not distributed with this
3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5 /*****************      GENERAL      *****************/
6
7 * {
8   margin: 0;
9   padding: 0;
10   box-sizing: border-box;
11 }
12
13 html, body {
14   height: 100%;
15 }
16
17 body {
18   font-size: 0.9rem;
19   color: #FF9F00;
20   background-color: #000000;
21   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
22   display: flex;
23   flex-direction: column;
24 }
25
26 template {
27   display: none;
28 }
29
30 h1 {
31   font-size: 20px;
32 }
33
34 #content {
35   display: flex;
36   flex-direction: row;
37   height: 100%;
38   overflow: hidden;
39 }
40
41 #detail {
42   display: flex;
43   flex-grow: 1;
44   z-index: 1;
45   overflow: hidden;
46 }
47
48 #meta {
49   background-size: 100%;
50   padding-top: 50px;
51 }
52
53 #connection-footer {
54   border-width: 0;
55   height: 50px;
56   min-height: 50px;
57 }
58
59 #root-actor-debug {
60   background: #000000;
61 }
62
63
64
65 /*****************     APP BUTTONS      *****************/
66
67
68
69 .app-buttons {
70   display: block;
71   margin-left: 20px;
72   color: #FF9F00;
73 }
74
75 button {
76   margin: 0;
77   font-size: 11px;
78   padding: 5px 15px;
79   cursor: pointer;
80   background-color: #C09070;
81   text-transform: uppercase;
82   border-radius: 300px;
83   border-width: 1px;
84 }
85
86 .app-buttons > button {
87   display: none;
88 }
89
90 .app-buttons > button:not([disabled]):hover {
91   background-color: #FFCF00;
92   color: #000000;
93 }
94
95 .app-buttons > button[disabled] {
96   background-color: #402858;
97   color: #000000;
98   pointer-events: none;
99 }
100
101 .app[running="false"] > .app-buttons > .button-start,
102 .app[running="true"] > .app-buttons > .button-stop,
103 .app[running="true"] > .app-buttons > .button-debug {
104   display: inline-block;
105 }
106 /*
107 .button-debug {
108   color: #3498DB;
109 }
110
111 .button-debug:hover {
112   background-color: #3498DB;
113   color: #FFF;
114 }
115
116 .button-debug[disabled] {
117   color: #3498DB;
118 }
119
120 .button-start {
121   color: #18BC9C
122 }
123
124 .button-start:hover {
125   background-color: #18BC9C;
126   color: #FFF;
127 }
128
129 .button-start[disabled] {
130   color: #18BC9C
131 }
132
133 .button-stop {
134   color: #E74C3C;
135 }
136
137 .button-stop:hover {
138   background-color: #E74C3C;
139   color: #FFF;
140 }
141
142 .button-stop[disabled] {
143   color: #E74C3C;
144 }
145 */
146
147
148 /*****************     PERMISSIONS     *****************/
149
150
151
152
153 .permission-table {
154   display: flex;
155   flex-direction: column;
156   height: 100%;
157 }
158
159 .permission-table-body {
160   overflow: auto;
161   display: flex;
162   flex-grow: 1;
163   flex-direction: column;
164 }
165
166 .permission-table-header,
167 .permission-table-footer {
168   display: flex;
169   background: #000000;
170   border-top: 1px solid #9C9CFF;
171   z-index: 2;
172   flex-shrink: 0;
173 }
174
175 .permission-table-header > div,
176 .permission-table-footer > div {
177   z-index: 2;
178   flex-grow: 1;
179   background-color: #000000;
180   color: #FF9F00;
181   border: 0;
182   margin: auto 0;
183   padding: 5px;
184   text-align: center;
185   background: transparent;
186   box-shadow: none;
187   text-shadow: none;
188 }
189
190 .permission-table-header > div {
191   flex-basis: 20%;
192 }
193
194 .permission-table-header > div:first-child {
195   text-align: start;
196   padding-left: 10px;
197   flex-basis: 30%;
198 }
199
200 .permission-table-header {
201   border: 0;
202   border-bottom: 1px solid #9C9CFF;
203 /*  box-shadow: 0 1px 4px rgba(0,0,0,0.3);*/
204 }
205
206 .permission-table-footer {
207 /*  box-shadow: 0 -1px 4px rgba(0,0,0,0.3);*/
208 }
209
210 .permission {
211   display: flex;
212   flex-grow: 1;
213 }
214
215 .permission:nth-child(odd) {
216   background-color: #404000;
217 }
218
219 .permission:hover {
220   background-color: #FFCF00;
221   color: #000000;
222 }
223
224 .permission > div {
225   flex-grow: 1;
226   flex-basis: 20%;
227   text-align: center;
228   padding: 3px;
229   border-right: 1px solid #9C9CFF;
230   border-bottom: 1px solid #9C9CFF;
231 }
232
233 .permission > div:first-child {
234   text-align: start;
235   padding: 3px 10px;
236   flex-basis: 30%;
237   font-weight: bold;
238 }
239
240 .permission > div[permission="1"]:before, .allow-label:after {
241   color: #008484;
242   content: '   \2713';
243 }
244
245 .permission > div[permission="2"]:before, .deny-label:after {
246   color: #FF0000;
247   content: '   \2715';
248 }
249
250 .permission > div[permission="3"]:before, .prompt-label:after {
251   color: #9C9CFF;
252   content: '   !';
253 }
254
255
256
257
258 /*****************     SIDEBAR      *****************/
259
260
261
262
263 #sidebar {
264   background: #000000;
265   position: relative;
266   display: flex;
267   flex-direction: column;
268   flex: 0 0 350px;
269   overflow: hidden;
270   z-index: 100;
271 }
272
273 .sidebar-item {
274   background-color: #000000;
275   color: #FF9F00;
276   line-height: 120%;
277   cursor: pointer;
278   display: flex;
279   padding: 15px 10px;
280   display: block;
281   text-align: start;
282   flex-grow: 1;
283 }
284
285 .sidebar-item > * {
286   flex-shrink: 0;
287 }
288
289 .sidebar-item:hover,
290 .sidebar-item.selected:hover {
291   background-color: #FFCF00;
292   color: #000000
293 }
294
295 .sidebar-item.selected {
296   background-color: #008484;
297   color: #000000;
298 }
299
300 .help {
301   float: right;
302   padding: 0 5px;
303 }
304
305 /*****************     HEADER      *****************/
306
307 header {
308   padding-top: 140px;
309   color: #9C9CFF;
310   padding: 10px;
311 }
312
313
314
315 /*****************      APPS & BROWSER TABS      *****************/
316
317
318
319 .browser-tabs.hidden {
320   display: none;
321 }
322
323 .apps, .browser-tabs {
324   display: flex;
325   flex-direction: column;
326   overflow: auto;
327 }
328
329 .app, .browser-tab {
330   display: flex;
331   align-items: center;
332   order: 1;
333 }
334
335 .app-name, .browser-tab-details {
336   flex-grow: 1;
337   font-weight: bold;
338 }
339
340 .app, .browser-tab {
341   padding: 10px 20px;
342   border-bottom: 1px solid #9C9CFF;
343 }
344
345 .app:hover, .browser-tab:hover {
346   background-color: #404000;
347 }
348
349 .app-icon {
350   width: 32px;
351   height: 32px;
352   margin-right: 10px;
353 }
354
355 .browser-tab-url-subheading {
356   font-size: 10px;
357 }
358
359
360
361 /*****************      NOT CONNECTED      *****************/
362
363
364
365 body:not(.notconnected) > #notConnectedMessage,
366 body.notconnected > #content {
367   display: none;
368 }
369
370 #notConnectedMessage {
371   flex-grow: 1;
372   flex-direction: column;
373   margin: 50px auto;
374 }
375
376 #notConnectedMessage > span {
377   padding: 20px;
378   border: 1px solid #9C9CFF;
379   border-radius: 5px;
380 }
381
382 #notConnectedMessage > span:before {
383   content: '';
384   background: url('error.svg') no-repeat;
385   background-size: 18px;
386   height: 24px;
387   width: 24px;
388   position: relative;
389   top: 10px;
390   display: inline-block;
391 }
392
393
394
395 /*****************      TABS       *****************/
396
397 #tabs {
398   flex-grow: 1;
399   overflow: auto;
400 }
401
402 .tabpanel:not(.selected) {
403   display: none;
404 }
405
406 #tabs-headers {
407   flex-shrink: 0;
408   display: flex;
409   flex-direction: column;
410 }