Commit | Line | Data |
---|---|---|
dadba0f2 RK |
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 | /* | |
6 | * | |
7 | * Icons.png: | |
8 | * | |
9 | * actions icons: 100x100. Starts at 0x0. | |
10 | * menu icons: 26x26. Starts at 312x0. | |
11 | * anchors icons: 27x16. Starts at 364x0. | |
12 | * | |
13 | */ | |
14 | ||
15 | #main-toolbar { | |
16 | padding: 0 12px; | |
17 | } | |
18 | ||
19 | #action-buttons-container { | |
20 | -moz-box-pack: center; | |
21 | height: 50px; | |
22 | } | |
23 | ||
24 | #panel-buttons-container { | |
25 | height: 50px; | |
26 | margin-top: -50px; | |
27 | pointer-events: none; | |
28 | } | |
29 | ||
30 | #panel-buttons-container > .panel-button { | |
31 | pointer-events: auto; | |
32 | } | |
33 | ||
34 | #action-busy-undetermined { | |
35 | height: 24px; | |
36 | width: 24px; | |
37 | } | |
38 | ||
39 | window.busy .action-button, | |
40 | window:not(.busy) #action-busy, | |
41 | window.busy-undetermined #action-busy-determined, | |
42 | window.busy-determined #action-busy-undetermined { | |
43 | display: none; | |
44 | } | |
45 | ||
46 | /* Panel buttons - runtime */ | |
47 | ||
48 | #runtime-panel-button > .panel-button-image { | |
49 | list-style-image: url('icons.png'); | |
50 | -moz-image-region: rect(78px,438px,104px,412px); | |
51 | width: 13px; | |
52 | height: 13px; | |
53 | } | |
54 | ||
55 | #runtime-panel-button[active="true"] > .panel-button-image { | |
56 | -moz-image-region: rect(78px,464px,104px,438px); | |
57 | } | |
58 | ||
59 | /* Action buttons */ | |
60 | ||
61 | .action-button { | |
62 | -moz-appearance: none; | |
63 | border-width: 0; | |
64 | margin: 0; | |
65 | padding: 0; | |
66 | list-style-image: url('icons.png'); | |
67 | } | |
68 | ||
69 | .action-button[disabled="true"] { | |
70 | opacity: 0.4; | |
71 | } | |
72 | ||
73 | .action-button > .toolbarbutton-icon { | |
74 | width: 40px; | |
75 | height: 40px; | |
76 | } | |
77 | ||
78 | .action-button > .toolbarbutton-text { | |
79 | display: none; | |
80 | } | |
81 | ||
82 | #action-button-play { -moz-image-region: rect(0,100px,100px,0) } | |
83 | #action-button-stop { -moz-image-region: rect(0,200px,100px,100px) } | |
84 | #action-button-debug { -moz-image-region: rect(0,300px,100px,200px) } | |
85 | ||
86 | #action-button-play:not([disabled="true"]):hover { -moz-image-region: rect(200px,100px,300px,0) } | |
87 | #action-button-stop:not([disabled="true"]):hover { -moz-image-region: rect(200px,200px,300px,100px) } | |
88 | #action-button-debug:not([disabled="true"]):not([active="true"]):hover { -moz-image-region: rect(200px,300px,300px,200px) } | |
89 | ||
90 | #action-button-play.reload { -moz-image-region: rect(0,400px,100px,303px) } | |
91 | #action-button-play.reload:hover { -moz-image-region: rect(200px,400px,300px,303px) } | |
92 | ||
93 | #action-button-debug[active="true"] { -moz-image-region: rect(100px,300px,200px,200px) } | |
94 | ||
95 | /* Panels */ | |
96 | ||
97 | .panel-list { | |
98 | display: none; | |
99 | position: relative; | |
100 | max-width: 190px; | |
101 | overflow: hidden; | |
102 | } | |
103 | ||
104 | #project-listing-panel { | |
105 | max-width: 165px; | |
106 | } | |
107 | ||
108 | .panel-list-wrapper { | |
109 | height: 100%; | |
110 | width: 100%; | |
111 | min-width: 100px; | |
112 | position: absolute; | |
113 | top: 0; | |
114 | bottom: 0; | |
115 | right: 0; | |
116 | left: 0; | |
117 | } | |
118 | ||
119 | .panel-list-wrapper > iframe { | |
120 | height: inherit; | |
121 | width: 100%; | |
122 | position: absolute; | |
123 | top: 0; | |
124 | bottom: 0; | |
125 | right: 0; | |
126 | left: 0; | |
127 | } | |
128 | ||
129 | [sidebar-displayed] { | |
130 | display: block; | |
131 | } | |
132 | ||
133 | /* Main view */ | |
134 | ||
135 | #deck { | |
136 | background-color: #000000; | |
137 | background-image: url('rocket.svg'); | |
138 | background-repeat: no-repeat; | |
139 | background-size: 35%, auto; | |
140 | background-position: center center; | |
141 | border-top: 1px solid #A09090; | |
142 | } | |
143 | ||
144 | .devtools-horizontal-splitter { | |
145 | position: relative; | |
146 | border-bottom: 1px solid #9C9CFF; | |
147 | } |