browser/themes/shared/devtools/app-manager/device.css@6474c204b198
browser/themes/shared/devtools/app-manager/device.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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/. */
5 /***************** GENERAL *****************/
7 * {
8 margin: 0;
9 padding: 0;
10 box-sizing: border-box;
11 }
13 html, body {
14 height: 100%;
15 }
17 body {
18 font-size: 0.9rem;
19 color: #333;
20 background-color: rgb(225, 225, 225);
21 font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
22 display: flex;
23 flex-direction: column;
24 }
26 template {
27 display: none;
28 }
30 h1 {
31 font-size: 20px;
32 }
34 #content {
35 display: flex;
36 flex-direction: row;
37 height: 100%;
38 overflow: hidden;
39 }
41 #detail {
42 background-image: url('noise.png');
43 display: flex;
44 flex-grow: 1;
45 z-index: 1;
46 overflow: hidden;
47 }
49 #meta {
50 background-size: 100%;
51 padding-top: 50px;
52 }
54 #connection-footer {
55 border-width: 0;
56 height: 50px;
57 min-height: 50px;
58 }
61 #root-actor-debug {
62 background: white;
63 }
65 /***************** APP BUTTONS *****************/
69 .app-buttons {
70 display: block;
71 margin-left: 20px;
72 color: #BBB;
73 }
75 button {
76 margin: 0;
77 font-size: 11px;
78 border: 1px solid #CCC;
79 padding: 5px 15px;
80 cursor: pointer;
81 background: rgba(255,255,255,0.4);
82 text-transform: uppercase;
83 border-radius: 3px;
84 border-width: 1px;
85 }
87 .app-buttons > button {
88 display: none;
89 }
91 .app-buttons > button[disabled] {
92 background-color: transparent;
93 opacity: 0.4;
94 pointer-events: none;
95 }
97 .app[running="false"] > .app-buttons > .button-start,
98 .app[running="true"] > .app-buttons > .button-stop,
99 .app[running="true"] > .app-buttons > .button-debug {
100 display: inline-block;
101 }
103 .button-debug {
104 color: #3498DB;
105 }
107 .button-debug:hover {
108 background-color: #3498DB;
109 color: #FFF;
110 }
112 .button-debug[disabled] {
113 color: #3498DB;
114 }
116 .button-start {
117 color: #18BC9C
118 }
120 .button-start:hover {
121 background-color: #18BC9C;
122 color: #FFF;
123 }
125 .button-start[disabled] {
126 color: #18BC9C
127 }
129 .button-stop {
130 color: #E74C3C;
131 }
133 .button-stop:hover {
134 background-color: #E74C3C;
135 color: #FFF;
136 }
138 .button-stop[disabled] {
139 color: #E74C3C;
140 }
144 /***************** PERMISSIONS *****************/
149 .permission-table {
150 display: flex;
151 flex-direction: column;
152 height: 100%;
153 }
155 .permission-table-body {
156 overflow: auto;
157 display: flex;
158 flex-grow: 1;
159 flex-direction: column;
160 }
162 .permission-table-header,
163 .permission-table-footer {
164 display: flex;
165 background: #FFF;
166 border-top: 1px solid #CCC;
167 z-index: 2;
168 flex-shrink: 0;
169 }
171 .permission-table-header > div,
172 .permission-table-footer > div {
173 z-index: 2;
174 flex-grow: 1;
175 background: linear-gradient(to bottom, #49535C, #394148);
176 box-shadow: 0px 1px 3px rgba(12, 20, 30, 0.5), inset 0 1px 0px rgba(255,255,255,0.1);
177 color: #9FA6AD;
178 text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
179 border: 0;
180 margin: auto 0;
181 padding: 5px;
182 text-align: center;
183 background: transparent;
184 box-shadow: none;
185 text-shadow: none;
186 }
188 .permission-table-header > div {
189 flex-basis: 20%;
190 }
192 .permission-table-header > div:first-child {
193 text-align: left;
194 padding-left: 10px;
195 flex-basis: 30%;
196 }
198 .permission-table-header {
199 border: 0;
200 border-bottom: 1px solid #CCC;
201 box-shadow: 0 1px 4px rgba(0,0,0,0.3);
202 }
204 .permission-table-footer {
205 box-shadow: 0 -1px 4px rgba(0,0,0,0.3);
206 }
208 .permission {
209 display: flex;
210 flex-grow: 1;
211 }
213 .permission:nth-child(odd) {
214 background: #E4E4E4;
215 }
217 .permission:hover {
218 background: #EEE;
219 }
221 .permission > div {
222 flex-grow: 1;
223 flex-basis: 20%;
224 text-align: center;
225 padding: 3px;
226 border-right: 1px solid #CCC;
227 border-bottom: 1px solid #CCC;
228 }
230 .permission > div:first-child {
231 text-align: left;
232 padding: 3px 10px;
233 flex-basis: 30%;
234 font-weight: bold;
235 }
237 .permission > div[permission="1"]:before, .allow-label:after {
238 color: #98CF39;
239 content: ' \2713';
240 }
242 .permission > div[permission="2"]:before, .deny-label:after {
243 color: #CC4908;
244 content: ' \2715';
245 }
247 .permission > div[permission="3"]:before, .prompt-label:after {
248 color: #009EED;
249 content: ' !';
250 }
255 /***************** SIDEBAR *****************/
260 #sidebar {
261 background: #EEE;
262 position: relative;
263 box-shadow: 0 1px 6px rgba(0,0,0,0.3);
264 display: flex;
265 flex-direction: column;
266 flex: 0 0 350px;
267 overflow: hidden;
268 z-index: 100;
269 }
271 .sidebar-item {
272 background-color: #F6F6F6;
273 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
274 color: #666;
275 line-height: 120%;
276 cursor: pointer;
277 display: flex;
278 padding: 15px 10px;
279 display: block;
280 text-align: left;
281 flex-grow: 1;
282 }
284 .sidebar-item > * {
285 flex-shrink: 0;
286 }
288 .sidebar-item:hover {
289 background-color: #EEE;
290 }
292 .sidebar-item.selected {
293 background-color: #46AFE3;
294 color: #FFF;
295 }
297 .help {
298 float: right;
299 padding: 0 5px;
300 }
302 /***************** HEADER *****************/
304 header {
305 padding-top: 140px;
306 background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
307 color: #FFF;
308 text-shadow: 0 1px 2px rgba(0,0,0,0.8);
309 padding: 10px;
310 }
314 /***************** APPS & BROWSER TABS *****************/
319 .apps, .browser-tabs {
320 display: flex;
321 flex-direction: column;
322 overflow: auto;
323 }
325 .app, .browser-tab {
326 display: flex;
327 align-items: center;
328 order: 1;
329 }
331 .app-name, .browser-tab-details {
332 flex-grow: 1;
333 font-weight: bold;
334 }
336 .app, .browser-tab {
337 padding: 10px 20px;
338 border-bottom: 1px solid #CCC;
339 }
341 .app:hover, .browser-tab:hover {
342 background-color: #EFEFEF;
343 }
345 .app-icon {
346 width: 32px;
347 height: 32px;
348 margin-right: 10px;
349 }
351 .browser-tab-url-subheading {
352 font-size: 10px;
353 }
357 /***************** NOT CONNECTED *****************/
361 body:not(.notconnected) > #notConnectedMessage,
362 body.notconnected > #content {
363 display: none;
364 }
366 #notConnectedMessage {
367 flex-grow: 1;
368 flex-direction: column;
369 margin: 50px auto;
370 }
372 #notConnectedMessage > span {
373 padding: 20px;
374 border: 1px solid #CCC;
375 border-radius: 5px;
376 }
378 #notConnectedMessage > span:before {
379 content: '';
380 background: url('error.svg') no-repeat;
381 background-size: 18px;
382 height: 24px;
383 width: 24px;
384 position: relative;
385 top: 10px;
386 display: inline-block;
387 }
391 /***************** TABS *****************/
393 #tabs {
394 flex-grow: 1;
395 overflow: auto;
396 }
398 .tabpanel:not(.selected) {
399 display: none;
400 }
402 #tabs-headers {
403 flex-shrink: 0;
404 display: flex;
405 flex-direction: column;
406 }
