browser/themes/shared/devtools/app-manager/connection-footer.css@6474c204b198
browser/themes/shared/devtools/app-manager/connection-footer.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 /************** LAYOUT **************/
7 #connection-footer {
8 display: flex;
9 flex-direction: column;
10 height: 50px;
11 }
13 #banners-and-logs {
14 display: flex;
15 flex-grow: 1;
16 }
18 #logs {
19 display: flex;
20 width: 40%;
21 padding: 0;
22 width: 100%;
23 }
25 .banner {
26 display: none;
27 width: 60%;
28 }
30 #connection-footer[status="connected"] #banner-connected,
31 #connection-footer[status="connecting"] #banner-connecting,
32 #connection-footer[status="disconnected"] #banner-disconnected,
33 #connection-footer[status="disconnecting"] #banner-disconnecting {
34 display: flex;
35 }
37 body.show-simulators .banner,
38 body.edit-connection .banner {
39 display: none !important;
40 }
42 body.show-simulators #banner-simulators,
43 body.edit-connection #banner-editing {
44 display: flex !important;
45 }
47 #banner-logs {
48 width: 40%;
49 display: flex;
50 }
52 #logs > pre {
53 overflow: auto;
54 white-space: pre-line;
55 }
57 #status.banner-box {
58 width: 100% !important;
59 }
61 .banner-box {
62 display: flex;
63 flex-direction: column;
64 justify-content: center;
65 width: 100%;
66 }
68 #banner-connected > .banner-box {
69 align-items: flex-start;
70 }
72 #start-simulator-box {
73 display: inline;
74 }
76 /************** PIXELS **************/
78 * {
79 margin: 0;
80 padding: 0;
81 box-sizing: border-box;
82 font-size: 0.9rem;
83 }
85 body {
86 color: #333;
87 background-color: white;
88 font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
89 }
91 button {
92 background: linear-gradient(to bottom, #49535C, #394148);
93 box-shadow: 0px 1px 1px #3C444D, inset 0 1px 0px rgba(255,255,255,0.1);
94 color: #9FA6AD;
95 text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
96 border: 1px solid #111;
97 cursor: pointer;
98 border-radius: 3px;
99 padding: 3px 10px;
100 }
102 button.left {
103 margin-right: 0px;
104 border-top-right-radius: 0;
105 border-bottom-right-radius: 0;
106 }
108 button.right {
109 margin-left: -6px;
110 border-top-left-radius: 0;
111 border-bottom-left-radius: 0;
112 }
114 button.action-primary {
115 background: linear-gradient(to bottom, #276DA3, #1E5580);
116 color: #EEE;
117 }
119 button.action-cancel {
120 background: linear-gradient(to bottom, #B32B02, #942300);
121 color: #EEE;
122 }
124 #banners-and-logs {
125 border-top: #111 solid;
126 border-width: 1px 0;
127 background: linear-gradient(to bottom, #323A42, #29313A);
128 color: #A8BABF;
129 box-shadow: inset 0 0 1px #424A51;
130 }
132 #status {
133 background: linear-gradient(to bottom, #454F59, #404952);
134 box-shadow: inset 0 0 1px #606D78, inset 0 1px 0 #5E6973;
135 }
137 #logs > pre {
138 border: 1px solid #111;
139 box-shadow: 0px 1px 1px #49525A, inset 0 0 5px rgba(0,0,0,0.3);
140 font-size: 10px;
141 background: #22272D;
142 padding: 5px;
143 height: 100%;
144 padding-left: 20px;
145 position: relative;
146 }
148 #logs > pre span{
149 text-shadow: 0 1px 2px #000;
150 color: #3195FB;
151 position: fixed;
152 right: calc(30% - 15px);
153 bottom: -1px;
154 }
156 #logs > pre b {
157 font-size: 10px;
158 color: #70C4FF;
159 }
161 .banner-box {
162 box-shadow: inset 0 0 1px #667480, inset 0 1px 0 #5E6973;
163 border-right: 1px solid #111;
164 background-position: center right;
165 background-size: 1px 100%;
166 background-repeat: no-repeat;
167 padding: 10px 20px;
168 position: relative;
169 }
171 .connected-status {
172 color: #B3BFC9;
173 text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
174 padding-bottom: 10px;
175 }
177 .connected-status {
178 font-size: 150%;
179 top: 10%;
180 padding-right: 3px;
181 position: relative;
182 }
184 .connected-indicator {
185 box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0px 1px rgba(255,255,255,0.3);
186 height: 100%;
187 flex: 0 0 10px;
188 }
190 #banner-connected .connected-indicator,
191 #banner-connecting .connected-indicator {
192 background: linear-gradient(to bottom, #69B8FF, #339FFF );
193 }
195 #banner-simulators .connected-indicator,
196 #banner-disconnected .connected-indicator,
197 #banner-editing .connected-indicator,
198 #banner-disconnecting .connected-indicator {
199 background: linear-gradient(to bottom, #375A87, #1C4375 );
200 }
202 #banner-simulators .banner-content > * {
203 display: inline-block;
204 }
206 #banner-simulators[simulator-count="0"] .found-simulator,
207 #banner-simulators:not([simulator-count="0"]) .no-simulator {
208 display: none;
209 }
211 #connection-no-device,
212 [device-count="0"] > #connection-found-device,
213 #connection-manual,
214 #connection-assisted {
215 display: none;
216 }
218 #connection-found-device,
219 [device-count="0"] > #connection-no-device,
220 [adb-available="true"] > #connection-assisted,
221 [adb-available="false"] > #connection-manual {
222 display: inline;
223 }
