1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/app-manager/device.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,406 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +/***************** GENERAL *****************/
1.9 +
1.10 +* {
1.11 + margin: 0;
1.12 + padding: 0;
1.13 + box-sizing: border-box;
1.14 +}
1.15 +
1.16 +html, body {
1.17 + height: 100%;
1.18 +}
1.19 +
1.20 +body {
1.21 + font-size: 0.9rem;
1.22 + color: #333;
1.23 + background-color: rgb(225, 225, 225);
1.24 + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
1.25 + display: flex;
1.26 + flex-direction: column;
1.27 +}
1.28 +
1.29 +template {
1.30 + display: none;
1.31 +}
1.32 +
1.33 +h1 {
1.34 + font-size: 20px;
1.35 +}
1.36 +
1.37 +#content {
1.38 + display: flex;
1.39 + flex-direction: row;
1.40 + height: 100%;
1.41 + overflow: hidden;
1.42 +}
1.43 +
1.44 +#detail {
1.45 + background-image: url('noise.png');
1.46 + display: flex;
1.47 + flex-grow: 1;
1.48 + z-index: 1;
1.49 + overflow: hidden;
1.50 +}
1.51 +
1.52 +#meta {
1.53 + background-size: 100%;
1.54 + padding-top: 50px;
1.55 +}
1.56 +
1.57 +#connection-footer {
1.58 + border-width: 0;
1.59 + height: 50px;
1.60 + min-height: 50px;
1.61 +}
1.62 +
1.63 +
1.64 +#root-actor-debug {
1.65 + background: white;
1.66 +}
1.67 +
1.68 +/***************** APP BUTTONS *****************/
1.69 +
1.70 +
1.71 +
1.72 +.app-buttons {
1.73 + display: block;
1.74 + margin-left: 20px;
1.75 + color: #BBB;
1.76 +}
1.77 +
1.78 +button {
1.79 + margin: 0;
1.80 + font-size: 11px;
1.81 + border: 1px solid #CCC;
1.82 + padding: 5px 15px;
1.83 + cursor: pointer;
1.84 + background: rgba(255,255,255,0.4);
1.85 + text-transform: uppercase;
1.86 + border-radius: 3px;
1.87 + border-width: 1px;
1.88 +}
1.89 +
1.90 +.app-buttons > button {
1.91 + display: none;
1.92 +}
1.93 +
1.94 +.app-buttons > button[disabled] {
1.95 + background-color: transparent;
1.96 + opacity: 0.4;
1.97 + pointer-events: none;
1.98 +}
1.99 +
1.100 +.app[running="false"] > .app-buttons > .button-start,
1.101 +.app[running="true"] > .app-buttons > .button-stop,
1.102 +.app[running="true"] > .app-buttons > .button-debug {
1.103 + display: inline-block;
1.104 +}
1.105 +
1.106 +.button-debug {
1.107 + color: #3498DB;
1.108 +}
1.109 +
1.110 +.button-debug:hover {
1.111 + background-color: #3498DB;
1.112 + color: #FFF;
1.113 +}
1.114 +
1.115 +.button-debug[disabled] {
1.116 + color: #3498DB;
1.117 +}
1.118 +
1.119 +.button-start {
1.120 + color: #18BC9C
1.121 +}
1.122 +
1.123 +.button-start:hover {
1.124 + background-color: #18BC9C;
1.125 + color: #FFF;
1.126 +}
1.127 +
1.128 +.button-start[disabled] {
1.129 + color: #18BC9C
1.130 +}
1.131 +
1.132 +.button-stop {
1.133 + color: #E74C3C;
1.134 +}
1.135 +
1.136 +.button-stop:hover {
1.137 + background-color: #E74C3C;
1.138 + color: #FFF;
1.139 +}
1.140 +
1.141 +.button-stop[disabled] {
1.142 + color: #E74C3C;
1.143 +}
1.144 +
1.145 +
1.146 +
1.147 +/***************** PERMISSIONS *****************/
1.148 +
1.149 +
1.150 +
1.151 +
1.152 +.permission-table {
1.153 + display: flex;
1.154 + flex-direction: column;
1.155 + height: 100%;
1.156 +}
1.157 +
1.158 +.permission-table-body {
1.159 + overflow: auto;
1.160 + display: flex;
1.161 + flex-grow: 1;
1.162 + flex-direction: column;
1.163 +}
1.164 +
1.165 +.permission-table-header,
1.166 +.permission-table-footer {
1.167 + display: flex;
1.168 + background: #FFF;
1.169 + border-top: 1px solid #CCC;
1.170 + z-index: 2;
1.171 + flex-shrink: 0;
1.172 +}
1.173 +
1.174 +.permission-table-header > div,
1.175 +.permission-table-footer > div {
1.176 + z-index: 2;
1.177 + flex-grow: 1;
1.178 + background: linear-gradient(to bottom, #49535C, #394148);
1.179 + box-shadow: 0px 1px 3px rgba(12, 20, 30, 0.5), inset 0 1px 0px rgba(255,255,255,0.1);
1.180 + color: #9FA6AD;
1.181 + text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
1.182 + border: 0;
1.183 + margin: auto 0;
1.184 + padding: 5px;
1.185 + text-align: center;
1.186 + background: transparent;
1.187 + box-shadow: none;
1.188 + text-shadow: none;
1.189 +}
1.190 +
1.191 +.permission-table-header > div {
1.192 + flex-basis: 20%;
1.193 +}
1.194 +
1.195 +.permission-table-header > div:first-child {
1.196 + text-align: left;
1.197 + padding-left: 10px;
1.198 + flex-basis: 30%;
1.199 +}
1.200 +
1.201 +.permission-table-header {
1.202 + border: 0;
1.203 + border-bottom: 1px solid #CCC;
1.204 + box-shadow: 0 1px 4px rgba(0,0,0,0.3);
1.205 +}
1.206 +
1.207 +.permission-table-footer {
1.208 + box-shadow: 0 -1px 4px rgba(0,0,0,0.3);
1.209 +}
1.210 +
1.211 +.permission {
1.212 + display: flex;
1.213 + flex-grow: 1;
1.214 +}
1.215 +
1.216 +.permission:nth-child(odd) {
1.217 + background: #E4E4E4;
1.218 +}
1.219 +
1.220 +.permission:hover {
1.221 + background: #EEE;
1.222 +}
1.223 +
1.224 +.permission > div {
1.225 + flex-grow: 1;
1.226 + flex-basis: 20%;
1.227 + text-align: center;
1.228 + padding: 3px;
1.229 + border-right: 1px solid #CCC;
1.230 + border-bottom: 1px solid #CCC;
1.231 +}
1.232 +
1.233 +.permission > div:first-child {
1.234 + text-align: left;
1.235 + padding: 3px 10px;
1.236 + flex-basis: 30%;
1.237 + font-weight: bold;
1.238 +}
1.239 +
1.240 +.permission > div[permission="1"]:before, .allow-label:after {
1.241 + color: #98CF39;
1.242 + content: ' \2713';
1.243 +}
1.244 +
1.245 +.permission > div[permission="2"]:before, .deny-label:after {
1.246 + color: #CC4908;
1.247 + content: ' \2715';
1.248 +}
1.249 +
1.250 +.permission > div[permission="3"]:before, .prompt-label:after {
1.251 + color: #009EED;
1.252 + content: ' !';
1.253 +}
1.254 +
1.255 +
1.256 +
1.257 +
1.258 +/***************** SIDEBAR *****************/
1.259 +
1.260 +
1.261 +
1.262 +
1.263 +#sidebar {
1.264 + background: #EEE;
1.265 + position: relative;
1.266 + box-shadow: 0 1px 6px rgba(0,0,0,0.3);
1.267 + display: flex;
1.268 + flex-direction: column;
1.269 + flex: 0 0 350px;
1.270 + overflow: hidden;
1.271 + z-index: 100;
1.272 +}
1.273 +
1.274 +.sidebar-item {
1.275 + background-color: #F6F6F6;
1.276 + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
1.277 + color: #666;
1.278 + line-height: 120%;
1.279 + cursor: pointer;
1.280 + display: flex;
1.281 + padding: 15px 10px;
1.282 + display: block;
1.283 + text-align: left;
1.284 + flex-grow: 1;
1.285 +}
1.286 +
1.287 +.sidebar-item > * {
1.288 + flex-shrink: 0;
1.289 +}
1.290 +
1.291 +.sidebar-item:hover {
1.292 + background-color: #EEE;
1.293 +}
1.294 +
1.295 +.sidebar-item.selected {
1.296 + background-color: #46AFE3;
1.297 + color: #FFF;
1.298 +}
1.299 +
1.300 +.help {
1.301 + float: right;
1.302 + padding: 0 5px;
1.303 +}
1.304 +
1.305 +/***************** HEADER *****************/
1.306 +
1.307 +header {
1.308 + padding-top: 140px;
1.309 + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
1.310 + color: #FFF;
1.311 + text-shadow: 0 1px 2px rgba(0,0,0,0.8);
1.312 + padding: 10px;
1.313 +}
1.314 +
1.315 +
1.316 +
1.317 +/***************** APPS & BROWSER TABS *****************/
1.318 +
1.319 +
1.320 +
1.321 +
1.322 +.apps, .browser-tabs {
1.323 + display: flex;
1.324 + flex-direction: column;
1.325 + overflow: auto;
1.326 +}
1.327 +
1.328 +.app, .browser-tab {
1.329 + display: flex;
1.330 + align-items: center;
1.331 + order: 1;
1.332 +}
1.333 +
1.334 +.app-name, .browser-tab-details {
1.335 + flex-grow: 1;
1.336 + font-weight: bold;
1.337 +}
1.338 +
1.339 +.app, .browser-tab {
1.340 + padding: 10px 20px;
1.341 + border-bottom: 1px solid #CCC;
1.342 +}
1.343 +
1.344 +.app:hover, .browser-tab:hover {
1.345 + background-color: #EFEFEF;
1.346 +}
1.347 +
1.348 +.app-icon {
1.349 + width: 32px;
1.350 + height: 32px;
1.351 + margin-right: 10px;
1.352 +}
1.353 +
1.354 +.browser-tab-url-subheading {
1.355 + font-size: 10px;
1.356 +}
1.357 +
1.358 +
1.359 +
1.360 +/***************** NOT CONNECTED *****************/
1.361 +
1.362 +
1.363 +
1.364 +body:not(.notconnected) > #notConnectedMessage,
1.365 +body.notconnected > #content {
1.366 + display: none;
1.367 +}
1.368 +
1.369 +#notConnectedMessage {
1.370 + flex-grow: 1;
1.371 + flex-direction: column;
1.372 + margin: 50px auto;
1.373 +}
1.374 +
1.375 +#notConnectedMessage > span {
1.376 + padding: 20px;
1.377 + border: 1px solid #CCC;
1.378 + border-radius: 5px;
1.379 +}
1.380 +
1.381 +#notConnectedMessage > span:before {
1.382 + content: '';
1.383 + background: url('error.svg') no-repeat;
1.384 + background-size: 18px;
1.385 + height: 24px;
1.386 + width: 24px;
1.387 + position: relative;
1.388 + top: 10px;
1.389 + display: inline-block;
1.390 +}
1.391 +
1.392 +
1.393 +
1.394 +/***************** TABS *****************/
1.395 +
1.396 +#tabs {
1.397 + flex-grow: 1;
1.398 + overflow: auto;
1.399 +}
1.400 +
1.401 +.tabpanel:not(.selected) {
1.402 + display: none;
1.403 +}
1.404 +
1.405 +#tabs-headers {
1.406 + flex-shrink: 0;
1.407 + display: flex;
1.408 + flex-direction: column;
1.409 +}
