1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/app-manager/projects.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,556 @@
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 +* {
1.9 + margin: 0;
1.10 + padding: 0;
1.11 + box-sizing: border-box;
1.12 + font-size: 0.9rem;
1.13 +}
1.14 +
1.15 +html, body {
1.16 + height: 100%;
1.17 +}
1.18 +
1.19 +template {
1.20 + display: none;
1.21 +}
1.22 +
1.23 +body {
1.24 + display: flex;
1.25 + color: #333;
1.26 + background-color: white;
1.27 + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
1.28 + overflow: hidden;
1.29 +}
1.30 +
1.31 +body:not(.connected) button.device-action {
1.32 + display: none;
1.33 +}
1.34 +
1.35 +strong {
1.36 + color: #111;
1.37 +}
1.38 +
1.39 +
1.40 +/********* SIDEBAR ***********/
1.41 +
1.42 +
1.43 +
1.44 +#sidebar {
1.45 + display: flex;
1.46 + flex-direction: column;
1.47 + flex: 0 0 350px;
1.48 + overflow: hidden;
1.49 + z-index: 100;
1.50 + background-color: #E9EAEB;
1.51 + position: relative;
1.52 + box-shadow: 3px 0 1.5px rgba(0,0,0,0.08);
1.53 +}
1.54 +
1.55 +#project-list {
1.56 + height: 100%;
1.57 + overflow: auto;
1.58 +}
1.59 +
1.60 +#project-list:not([projects-count="0"]) > #no-project {
1.61 + display: none;
1.62 +}
1.63 +
1.64 +#no-project {
1.65 + padding: 100px 20px 0;
1.66 + font-weight: bold;
1.67 + color: #BBB;
1.68 + font-size: 22px;
1.69 +}
1.70 +
1.71 +
1.72 +/********* PROJECT MENU ***********/
1.73 +
1.74 +
1.75 +.project-item {
1.76 + padding: 10px 0;
1.77 + background-color: #F0F1F2;
1.78 + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
1.79 + color: #666;
1.80 + line-height: 120%;
1.81 + cursor: pointer;
1.82 + display: flex;
1.83 + position: relative;
1.84 +}
1.85 +
1.86 +.project-item:hover {
1.87 + background-color: #EEE;
1.88 +}
1.89 +
1.90 +.project-item > * {
1.91 + flex-shrink: 0;
1.92 +}
1.93 +
1.94 +.project-item.selected {
1.95 + background-color: #46AFE3;
1.96 +}
1.97 +
1.98 +.project-item.selected strong {
1.99 + color: #FFF;
1.100 +}
1.101 +
1.102 +.project-item.selected p,
1.103 +.project-item.selected span {
1.104 + color: #C1DCF0;
1.105 +}
1.106 +
1.107 +.button-remove {
1.108 + background-image: url('remove.svg');
1.109 + background-size: 20px;
1.110 + width: 20px;
1.111 + height: 20px;
1.112 + position: absolute;
1.113 + right: 5px;
1.114 + bottom: 5px;
1.115 + visibility: hidden;
1.116 + opacity: 0.5;
1.117 +}
1.118 +
1.119 +.project-item:hover .button-remove {
1.120 + visibility: visible;
1.121 +}
1.122 +
1.123 +.project-item-status {
1.124 + width: 6px;
1.125 + margin: -10px 0;
1.126 + border-right: 1px solid rgba(0,0,0,0.1);
1.127 + box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.2);
1.128 +}
1.129 +
1.130 +.project-item-status[status="valid"] {
1.131 + background-color: #70BF53;
1.132 +}
1.133 +
1.134 +.project-item-status[status~="warning"] {
1.135 + background-color: #F2B33F;
1.136 +}
1.137 +
1.138 +.project-item-status[status~="error"] {
1.139 + background-color: #ED4C62;
1.140 +}
1.141 +
1.142 +.project-item-icon {
1.143 + width: 32px;
1.144 + height: 32px;
1.145 + margin: 0 10px;
1.146 +}
1.147 +
1.148 +.project-item-meta {
1.149 + flex-grow: 1;
1.150 + flex-shrink: 1 !important;
1.151 +}
1.152 +
1.153 +.project-item-type {
1.154 + font-size: 10px;
1.155 + line-height: 20px;
1.156 + float: right;
1.157 + padding-right: 10px;
1.158 + color: #7597B9;
1.159 + text-transform: uppercase;
1.160 +}
1.161 +
1.162 +.project-item-description {
1.163 + color: #888;
1.164 + font-size: 90%;
1.165 +}
1.166 +
1.167 +/********* ADD PROJECT ***********/
1.168 +
1.169 +#new-packaged-project {
1.170 + box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
1.171 + background-position: calc(100% - 10px) 10px;
1.172 +}
1.173 +
1.174 +#new-packaged-project,
1.175 +#new-hosted-project {
1.176 + background-color: #EEE;
1.177 + border: none;
1.178 + border-top: 1px solid #DDD;
1.179 + padding: 10px;
1.180 + font-weight: bold;
1.181 +}
1.182 +
1.183 +#new-packaged-project:hover,
1.184 +#new-hosted-project:hover {
1.185 + background-color: #DDD;
1.186 +}
1.187 +
1.188 +#new-hosted-project-wrapper {
1.189 + display: flex;
1.190 + align-items: center;
1.191 +}
1.192 +
1.193 +#new-packaged-project,
1.194 +#new-hosted-project-click {
1.195 + background-image: url('plus.svg');
1.196 + background-size: 20px;
1.197 + background-repeat: no-repeat;
1.198 + cursor: pointer;
1.199 +}
1.200 +
1.201 +#new-hosted-project-click {
1.202 + background-position: top right;
1.203 + width: 20px;
1.204 + height: 20px;
1.205 + margin-left: 5px;
1.206 +}
1.207 +
1.208 +#url-input {
1.209 + flex-grow: 1;
1.210 + width: 90%;
1.211 + box-shadow: none;
1.212 + border-radius: 3px;
1.213 + border: 1px solid #DDD;
1.214 + padding: 4px;
1.215 + margin-top: 4px;
1.216 +}
1.217 +
1.218 +
1.219 +/********* LENSE ***********/
1.220 +
1.221 +
1.222 +#lense {
1.223 + height: 100%;
1.224 + flex-grow: 1;
1.225 + display: flex;
1.226 + z-index: 1;
1.227 + overflow: hidden;
1.228 + background-color: rgb(225, 225, 225);
1.229 + background-image: url('rocket.svg'), url('noise.png');
1.230 + background-repeat: no-repeat, repeat;
1.231 + background-size: 35%, auto;
1.232 + background-position: center center, top left;
1.233 +}
1.234 +
1.235 +#lense > div {
1.236 + display: flex;
1.237 + flex-grow: 1;
1.238 + flex-direction: column;
1.239 +}
1.240 +
1.241 +
1.242 +/********* PROJECT ***********/
1.243 +
1.244 +
1.245 +.project-details {
1.246 + background-color: rgb(225, 225, 225);
1.247 + padding: 10px;
1.248 + line-height: 160%;
1.249 + display: flex;
1.250 + flex-direction: column;
1.251 +}
1.252 +
1.253 +.project-metadata {
1.254 + flex-grow: 1;
1.255 +}
1.256 +
1.257 +.project-status {
1.258 + display: flex;
1.259 +}
1.260 +
1.261 +.project-title {
1.262 + flex-direction: row;
1.263 + display: flex;
1.264 + align-items: flex-start;
1.265 + padding-bottom: 10px;
1.266 + border-bottom: 1px solid #CCC;
1.267 + margin-bottom: 10px;
1.268 +}
1.269 +
1.270 +.project-title > h1 {
1.271 + flex-grow: 1;
1.272 + font-size: 24px;
1.273 +}
1.274 +
1.275 +.project-location {
1.276 + color: gray;
1.277 + font-size: 10px;
1.278 + cursor: pointer;
1.279 + font-family: monospace;
1.280 +}
1.281 +
1.282 +.project-location:hover {
1.283 + text-decoration: underline;
1.284 +}
1.285 +
1.286 +.project-header {
1.287 + display: flex;
1.288 + border-bottom: 1px solid #CCC;
1.289 + margin: 10px 20px 10px 20px;
1.290 + padding-bottom: 10px;
1.291 +}
1.292 +
1.293 +.project-icon {
1.294 + flex-shrink: 0;
1.295 + width: 64px;
1.296 + height: 64px;
1.297 + margin-right: 10px;
1.298 +}
1.299 +
1.300 +.project-location {
1.301 + font-size: 11px;
1.302 + color: #999;
1.303 +}
1.304 +
1.305 +.project-description {
1.306 + font-style: italic;
1.307 + color: #333;
1.308 +}
1.309 +
1.310 +.project-status > p {
1.311 + text-transform: uppercase;
1.312 + font-size: 10px;
1.313 + padding: 2px 10px;
1.314 + border-radius: 2px;
1.315 + margin-top: 6px;
1.316 + line-height: 10px;
1.317 +}
1.318 +
1.319 +.project-validation {
1.320 + color: #FFF;
1.321 + display: none;
1.322 + margin-left: 10px;
1.323 +}
1.324 +
1.325 +.project-validation.valid {
1.326 + background-color: #70BF53;
1.327 +}
1.328 +
1.329 +.project-validation.warning {
1.330 + background-color: #F2B33F;
1.331 +}
1.332 +
1.333 +.project-validation.error {
1.334 + background-color: #ED4C62;
1.335 +}
1.336 +
1.337 +[status="valid"] > .project-validation.valid,
1.338 +[status~="warning"] > .project-validation.warning,
1.339 +[status~="error"] > .project-validation.error {
1.340 + display: inline;
1.341 +}
1.342 +
1.343 +.project-type {
1.344 + display: none;
1.345 + margin-left: 10px;
1.346 +}
1.347 +[type="hosted"] > .project-type.hosted,
1.348 +[type="packaged"] > .project-type.packaged {
1.349 + display: inline;
1.350 +}
1.351 +
1.352 +/********* PROJECT BUTTONS ***********/
1.353 +
1.354 +
1.355 +
1.356 +.project-buttons {
1.357 + display: flex;
1.358 + margin-left: 20px;
1.359 + color: #BBB;
1.360 +}
1.361 +
1.362 +.project-buttons > button {
1.363 + margin: 0;
1.364 + font-size: 11px;
1.365 + border: 1px solid #CCC;
1.366 + border-left-width: 0;
1.367 + padding: 5px 15px;
1.368 + cursor: pointer;
1.369 + background: rgba(255,255,255,0.4);
1.370 + text-transform: uppercase;
1.371 +}
1.372 +
1.373 +.project-buttons > button[disabled] {
1.374 + background-color: transparent;
1.375 + opacity: 0.4;
1.376 + pointer-events: none;
1.377 +}
1.378 +
1.379 +.project-buttons > button:first-child {
1.380 + border-left-width: 1px;
1.381 +}
1.382 +
1.383 +.project-button-debug {
1.384 + color: #3498DB;
1.385 +}
1.386 +
1.387 +.project-button-debug:hover {
1.388 + background-color: #3498DB;
1.389 + color: #FFF;
1.390 +}
1.391 +
1.392 +.project-button-debug[disabled] {
1.393 + color: #3498DB;
1.394 +}
1.395 +
1.396 +.project-button-update {
1.397 + color: #777;
1.398 +}
1.399 +
1.400 +.project-button-update:hover {
1.401 + background-color: #777;
1.402 + color: #FFF;
1.403 +}
1.404 +
1.405 +.project-button-update[disabled] {
1.406 + color: #777;
1.407 +}
1.408 +
1.409 +
1.410 +
1.411 +/********* ERRORS AND WARNINGS ***********/
1.412 +
1.413 +.project-warnings,
1.414 +.project-errors,
1.415 +.project-item-warnings,
1.416 +.project-item-errors {
1.417 + display: none;
1.418 +}
1.419 +
1.420 +[status~="warning"] .project-item-warnings,
1.421 +[status~="error"] .project-item-errors {
1.422 + display: inline-block;
1.423 +}
1.424 +
1.425 +[status~="warning"] > .project-warnings,
1.426 +[status~="error"] > .project-errors {
1.427 + display: block;
1.428 +}
1.429 +
1.430 +.project-warnings,
1.431 +.project-errors {
1.432 + margin: 20px 20px 0;
1.433 + padding: 10px 10px;
1.434 + font-family: monospace;
1.435 +}
1.436 +
1.437 +.project-warnings {
1.438 + border-left: 3px solid #ECB51E;
1.439 + background-color: rgba(236, 181, 20, 0.1);
1.440 +}
1.441 +
1.442 +.project-errors {
1.443 + border-left: 3px solid #ED4C62;
1.444 + background-color: rgba(237,76,98,0.1);
1.445 +}
1.446 +
1.447 +.project-item-warnings {
1.448 + background-image: url('warning.svg');
1.449 +}
1.450 +
1.451 +.project-item-errors {
1.452 + background-image: url('error.svg');
1.453 + color: rgb(227, 79, 34);
1.454 +}
1.455 +
1.456 +.project-item-warnings,
1.457 +.project-item-errors {
1.458 + background-repeat: no-repeat;
1.459 + background-size: 12px;
1.460 + background-position: left center;
1.461 + margin-top: 6px;
1.462 +}
1.463 +
1.464 +.project-item-warnings > span,
1.465 +.project-item-errors > span {
1.466 + font-size: 11px;
1.467 + padding-left: 16px;
1.468 + font-weight: bold;
1.469 +}
1.470 +
1.471 +
1.472 +/********* MANIFEST EDITOR ***********/
1.473 +
1.474 +.manifest-editor {
1.475 + display: flex;
1.476 + flex-direction: column;
1.477 + flex-grow: 1;
1.478 + background-color: #E1E1E1;
1.479 +}
1.480 +
1.481 +.manifest-header {
1.482 + display: flex;
1.483 + flex-direction: row;
1.484 +}
1.485 +
1.486 +.manifest-header > h2 {
1.487 + font-size: 18px;
1.488 + margin: 1em 15px 1em 30px;
1.489 + display: none;
1.490 +}
1.491 +
1.492 +.manifest-header > button {
1.493 + margin: 18px 0;
1.494 + font-size: 11px;
1.495 + border: 1px solid #CCC;
1.496 + border-right-width: 0;
1.497 + padding: 2px;
1.498 + cursor: pointer;
1.499 + background: rgba(255,255,255,0.4);
1.500 + text-transform: uppercase;
1.501 + display: none;
1.502 +}
1.503 +
1.504 +.manifest-header > button[disabled] {
1.505 + background-color: transparent;
1.506 + opacity: 0.4;
1.507 + pointer-events: none;
1.508 +}
1.509 +
1.510 +.manifest-header > button:last-child {
1.511 + border-right-width: 1px;
1.512 +}
1.513 +
1.514 +[type="packaged"] > .editable {
1.515 + display: block;
1.516 +}
1.517 +
1.518 +[type="hosted"] > .viewable {
1.519 + display: block;
1.520 +}
1.521 +
1.522 +.manifest-button-save {
1.523 + color: #777;
1.524 +}
1.525 +
1.526 +.manifest-button-save:hover {
1.527 + background-color: #777;
1.528 + color: #FFF;
1.529 +}
1.530 +
1.531 +.manifest-button-save[disabled] {
1.532 + color: #777;
1.533 +}
1.534 +
1.535 +.variables-view {
1.536 + flex-grow: 1;
1.537 + border: 0;
1.538 + border-top: 5px solid #C9C9C9;
1.539 +}
1.540 +
1.541 +/* Bug 925921: Remove when the manifest editor is always on */
1.542 +
1.543 +.manifest-editor {
1.544 + display: none;
1.545 +}
1.546 +
1.547 +.project-details {
1.548 + flex-grow: 1;
1.549 +}
1.550 +
1.551 +#lense[manifest-editable] .manifest-editor {
1.552 + display: flex;
1.553 +}
1.554 +
1.555 +#lense[manifest-editable] .project-details {
1.556 + flex-grow: 0;
1.557 +}
1.558 +
1.559 +/* End blocks to remove */
