The Tor Browser / file comparison
comparison: browser/themes/shared/devtools/app-manager/projects.css
browser/themes/shared/devtools/app-manager/projects.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:a449ca13cb7a |
|---|---|
| 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 margin: 0; | |
| 7 padding: 0; | |
| 8 box-sizing: border-box; | |
| 9 font-size: 0.9rem; | |
| 10 } | |
| 11 | |
| 12 html, body { | |
| 13 height: 100%; | |
| 14 } | |
| 15 | |
| 16 template { | |
| 17 display: none; | |
| 18 } | |
| 19 | |
| 20 body { | |
| 21 display: flex; | |
| 22 color: #333; | |
| 23 background-color: white; | |
| 24 font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; | |
| 25 overflow: hidden; | |
| 26 } | |
| 27 | |
| 28 body:not(.connected) button.device-action { | |
| 29 display: none; | |
| 30 } | |
| 31 | |
| 32 strong { | |
| 33 color: #111; | |
| 34 } | |
| 35 | |
| 36 | |
| 37 /********* SIDEBAR ***********/ | |
| 38 | |
| 39 | |
| 40 | |
| 41 #sidebar { | |
| 42 display: flex; | |
| 43 flex-direction: column; | |
| 44 flex: 0 0 350px; | |
| 45 overflow: hidden; | |
| 46 z-index: 100; | |
| 47 background-color: #E9EAEB; | |
| 48 position: relative; | |
| 49 box-shadow: 3px 0 1.5px rgba(0,0,0,0.08); | |
| 50 } | |
| 51 | |
| 52 #project-list { | |
| 53 height: 100%; | |
| 54 overflow: auto; | |
| 55 } | |
| 56 | |
| 57 #project-list:not([projects-count="0"]) > #no-project { | |
| 58 display: none; | |
| 59 } | |
| 60 | |
| 61 #no-project { | |
| 62 padding: 100px 20px 0; | |
| 63 font-weight: bold; | |
| 64 color: #BBB; | |
| 65 font-size: 22px; | |
| 66 } | |
| 67 | |
| 68 | |
| 69 /********* PROJECT MENU ***********/ | |
| 70 | |
| 71 | |
| 72 .project-item { | |
| 73 padding: 10px 0; | |
| 74 background-color: #F0F1F2; | |
| 75 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); | |
| 76 color: #666; | |
| 77 line-height: 120%; | |
| 78 cursor: pointer; | |
| 79 display: flex; | |
| 80 position: relative; | |
| 81 } | |
| 82 | |
| 83 .project-item:hover { | |
| 84 background-color: #EEE; | |
| 85 } | |
| 86 | |
| 87 .project-item > * { | |
| 88 flex-shrink: 0; | |
| 89 } | |
| 90 | |
| 91 .project-item.selected { | |
| 92 background-color: #46AFE3; | |
| 93 } | |
| 94 | |
| 95 .project-item.selected strong { | |
| 96 color: #FFF; | |
| 97 } | |
| 98 | |
| 99 .project-item.selected p, | |
| 100 .project-item.selected span { | |
| 101 color: #C1DCF0; | |
| 102 } | |
| 103 | |
| 104 .button-remove { | |
| 105 background-image: url('remove.svg'); | |
| 106 background-size: 20px; | |
| 107 width: 20px; | |
| 108 height: 20px; | |
| 109 position: absolute; | |
| 110 right: 5px; | |
| 111 bottom: 5px; | |
| 112 visibility: hidden; | |
| 113 opacity: 0.5; | |
| 114 } | |
| 115 | |
| 116 .project-item:hover .button-remove { | |
| 117 visibility: visible; | |
| 118 } | |
| 119 | |
| 120 .project-item-status { | |
| 121 width: 6px; | |
| 122 margin: -10px 0; | |
| 123 border-right: 1px solid rgba(0,0,0,0.1); | |
| 124 box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.2); | |
| 125 } | |
| 126 | |
| 127 .project-item-status[status="valid"] { | |
| 128 background-color: #70BF53; | |
| 129 } | |
| 130 | |
| 131 .project-item-status[status~="warning"] { | |
| 132 background-color: #F2B33F; | |
| 133 } | |
| 134 | |
| 135 .project-item-status[status~="error"] { | |
| 136 background-color: #ED4C62; | |
| 137 } | |
| 138 | |
| 139 .project-item-icon { | |
| 140 width: 32px; | |
| 141 height: 32px; | |
| 142 margin: 0 10px; | |
| 143 } | |
| 144 | |
| 145 .project-item-meta { | |
| 146 flex-grow: 1; | |
| 147 flex-shrink: 1 !important; | |
| 148 } | |
| 149 | |
| 150 .project-item-type { | |
| 151 font-size: 10px; | |
| 152 line-height: 20px; | |
| 153 float: right; | |
| 154 padding-right: 10px; | |
| 155 color: #7597B9; | |
| 156 text-transform: uppercase; | |
| 157 } | |
| 158 | |
| 159 .project-item-description { | |
| 160 color: #888; | |
| 161 font-size: 90%; | |
| 162 } | |
| 163 | |
| 164 /********* ADD PROJECT ***********/ | |
| 165 | |
| 166 #new-packaged-project { | |
| 167 box-shadow: 0 -1px 5px rgba(0,0,0,0.1); | |
| 168 background-position: calc(100% - 10px) 10px; | |
| 169 } | |
| 170 | |
| 171 #new-packaged-project, | |
| 172 #new-hosted-project { | |
| 173 background-color: #EEE; | |
| 174 border: none; | |
| 175 border-top: 1px solid #DDD; | |
| 176 padding: 10px; | |
| 177 font-weight: bold; | |
| 178 } | |
| 179 | |
| 180 #new-packaged-project:hover, | |
| 181 #new-hosted-project:hover { | |
| 182 background-color: #DDD; | |
| 183 } | |
| 184 | |
| 185 #new-hosted-project-wrapper { | |
| 186 display: flex; | |
| 187 align-items: center; | |
| 188 } | |
| 189 | |
| 190 #new-packaged-project, | |
| 191 #new-hosted-project-click { | |
| 192 background-image: url('plus.svg'); | |
| 193 background-size: 20px; | |
| 194 background-repeat: no-repeat; | |
| 195 cursor: pointer; | |
| 196 } | |
| 197 | |
| 198 #new-hosted-project-click { | |
| 199 background-position: top right; | |
| 200 width: 20px; | |
| 201 height: 20px; | |
| 202 margin-left: 5px; | |
| 203 } | |
| 204 | |
| 205 #url-input { | |
| 206 flex-grow: 1; | |
| 207 width: 90%; | |
| 208 box-shadow: none; | |
| 209 border-radius: 3px; | |
| 210 border: 1px solid #DDD; | |
| 211 padding: 4px; | |
| 212 margin-top: 4px; | |
| 213 } | |
| 214 | |
| 215 | |
| 216 /********* LENSE ***********/ | |
| 217 | |
| 218 | |
| 219 #lense { | |
| 220 height: 100%; | |
| 221 flex-grow: 1; | |
| 222 display: flex; | |
| 223 z-index: 1; | |
| 224 overflow: hidden; | |
| 225 background-color: rgb(225, 225, 225); | |
| 226 background-image: url('rocket.svg'), url('noise.png'); | |
| 227 background-repeat: no-repeat, repeat; | |
| 228 background-size: 35%, auto; | |
| 229 background-position: center center, top left; | |
| 230 } | |
| 231 | |
| 232 #lense > div { | |
| 233 display: flex; | |
| 234 flex-grow: 1; | |
| 235 flex-direction: column; | |
| 236 } | |
| 237 | |
| 238 | |
| 239 /********* PROJECT ***********/ | |
| 240 | |
| 241 | |
| 242 .project-details { | |
| 243 background-color: rgb(225, 225, 225); | |
| 244 padding: 10px; | |
| 245 line-height: 160%; | |
| 246 display: flex; | |
| 247 flex-direction: column; | |
| 248 } | |
| 249 | |
| 250 .project-metadata { | |
| 251 flex-grow: 1; | |
| 252 } | |
| 253 | |
| 254 .project-status { | |
| 255 display: flex; | |
| 256 } | |
| 257 | |
| 258 .project-title { | |
| 259 flex-direction: row; | |
| 260 display: flex; | |
| 261 align-items: flex-start; | |
| 262 padding-bottom: 10px; | |
| 263 border-bottom: 1px solid #CCC; | |
| 264 margin-bottom: 10px; | |
| 265 } | |
| 266 | |
| 267 .project-title > h1 { | |
| 268 flex-grow: 1; | |
| 269 font-size: 24px; | |
| 270 } | |
| 271 | |
| 272 .project-location { | |
| 273 color: gray; | |
| 274 font-size: 10px; | |
| 275 cursor: pointer; | |
| 276 font-family: monospace; | |
| 277 } | |
| 278 | |
| 279 .project-location:hover { | |
| 280 text-decoration: underline; | |
| 281 } | |
| 282 | |
| 283 .project-header { | |
| 284 display: flex; | |
| 285 border-bottom: 1px solid #CCC; | |
| 286 margin: 10px 20px 10px 20px; | |
| 287 padding-bottom: 10px; | |
| 288 } | |
| 289 | |
| 290 .project-icon { | |
| 291 flex-shrink: 0; | |
| 292 width: 64px; | |
| 293 height: 64px; | |
| 294 margin-right: 10px; | |
| 295 } | |
| 296 | |
| 297 .project-location { | |
| 298 font-size: 11px; | |
| 299 color: #999; | |
| 300 } | |
| 301 | |
| 302 .project-description { | |
| 303 font-style: italic; | |
| 304 color: #333; | |
| 305 } | |
| 306 | |
| 307 .project-status > p { | |
| 308 text-transform: uppercase; | |
| 309 font-size: 10px; | |
| 310 padding: 2px 10px; | |
| 311 border-radius: 2px; | |
| 312 margin-top: 6px; | |
| 313 line-height: 10px; | |
| 314 } | |
| 315 | |
| 316 .project-validation { | |
| 317 color: #FFF; | |
| 318 display: none; | |
| 319 margin-left: 10px; | |
| 320 } | |
| 321 | |
| 322 .project-validation.valid { | |
| 323 background-color: #70BF53; | |
| 324 } | |
| 325 | |
| 326 .project-validation.warning { | |
| 327 background-color: #F2B33F; | |
| 328 } | |
| 329 | |
| 330 .project-validation.error { | |
| 331 background-color: #ED4C62; | |
| 332 } | |
| 333 | |
| 334 [status="valid"] > .project-validation.valid, | |
| 335 [status~="warning"] > .project-validation.warning, | |
| 336 [status~="error"] > .project-validation.error { | |
| 337 display: inline; | |
| 338 } | |
| 339 | |
| 340 .project-type { | |
| 341 display: none; | |
| 342 margin-left: 10px; | |
| 343 } | |
| 344 [type="hosted"] > .project-type.hosted, | |
| 345 [type="packaged"] > .project-type.packaged { | |
| 346 display: inline; | |
| 347 } | |
| 348 | |
| 349 /********* PROJECT BUTTONS ***********/ | |
| 350 | |
| 351 | |
| 352 | |
| 353 .project-buttons { | |
| 354 display: flex; | |
| 355 margin-left: 20px; | |
| 356 color: #BBB; | |
| 357 } | |
| 358 | |
| 359 .project-buttons > button { | |
| 360 margin: 0; | |
| 361 font-size: 11px; | |
| 362 border: 1px solid #CCC; | |
| 363 border-left-width: 0; | |
| 364 padding: 5px 15px; | |
| 365 cursor: pointer; | |
| 366 background: rgba(255,255,255,0.4); | |
| 367 text-transform: uppercase; | |
| 368 } | |
| 369 | |
| 370 .project-buttons > button[disabled] { | |
| 371 background-color: transparent; | |
| 372 opacity: 0.4; | |
| 373 pointer-events: none; | |
| 374 } | |
| 375 | |
| 376 .project-buttons > button:first-child { | |
| 377 border-left-width: 1px; | |
| 378 } | |
| 379 | |
| 380 .project-button-debug { | |
| 381 color: #3498DB; | |
| 382 } | |
| 383 | |
| 384 .project-button-debug:hover { | |
| 385 background-color: #3498DB; | |
| 386 color: #FFF; | |
| 387 } | |
| 388 | |
| 389 .project-button-debug[disabled] { | |
| 390 color: #3498DB; | |
| 391 } | |
| 392 | |
| 393 .project-button-update { | |
| 394 color: #777; | |
| 395 } | |
| 396 | |
| 397 .project-button-update:hover { | |
| 398 background-color: #777; | |
| 399 color: #FFF; | |
| 400 } | |
| 401 | |
| 402 .project-button-update[disabled] { | |
| 403 color: #777; | |
| 404 } | |
| 405 | |
| 406 | |
| 407 | |
| 408 /********* ERRORS AND WARNINGS ***********/ | |
| 409 | |
| 410 .project-warnings, | |
| 411 .project-errors, | |
| 412 .project-item-warnings, | |
| 413 .project-item-errors { | |
| 414 display: none; | |
| 415 } | |
| 416 | |
| 417 [status~="warning"] .project-item-warnings, | |
| 418 [status~="error"] .project-item-errors { | |
| 419 display: inline-block; | |
| 420 } | |
| 421 | |
| 422 [status~="warning"] > .project-warnings, | |
| 423 [status~="error"] > .project-errors { | |
| 424 display: block; | |
| 425 } | |
| 426 | |
| 427 .project-warnings, | |
| 428 .project-errors { | |
| 429 margin: 20px 20px 0; | |
| 430 padding: 10px 10px; | |
| 431 font-family: monospace; | |
| 432 } | |
| 433 | |
| 434 .project-warnings { | |
| 435 border-left: 3px solid #ECB51E; | |
| 436 background-color: rgba(236, 181, 20, 0.1); | |
| 437 } | |
| 438 | |
| 439 .project-errors { | |
| 440 border-left: 3px solid #ED4C62; | |
| 441 background-color: rgba(237,76,98,0.1); | |
| 442 } | |
| 443 | |
| 444 .project-item-warnings { | |
| 445 background-image: url('warning.svg'); | |
| 446 } | |
| 447 | |
| 448 .project-item-errors { | |
| 449 background-image: url('error.svg'); | |
| 450 color: rgb(227, 79, 34); | |
| 451 } | |
| 452 | |
| 453 .project-item-warnings, | |
| 454 .project-item-errors { | |
| 455 background-repeat: no-repeat; | |
| 456 background-size: 12px; | |
| 457 background-position: left center; | |
| 458 margin-top: 6px; | |
| 459 } | |
| 460 | |
| 461 .project-item-warnings > span, | |
| 462 .project-item-errors > span { | |
| 463 font-size: 11px; | |
| 464 padding-left: 16px; | |
| 465 font-weight: bold; | |
| 466 } | |
| 467 | |
| 468 | |
| 469 /********* MANIFEST EDITOR ***********/ | |
| 470 | |
| 471 .manifest-editor { | |
| 472 display: flex; | |
| 473 flex-direction: column; | |
| 474 flex-grow: 1; | |
| 475 background-color: #E1E1E1; | |
| 476 } | |
| 477 | |
| 478 .manifest-header { | |
| 479 display: flex; | |
| 480 flex-direction: row; | |
| 481 } | |
| 482 | |
| 483 .manifest-header > h2 { | |
| 484 font-size: 18px; | |
| 485 margin: 1em 15px 1em 30px; | |
| 486 display: none; | |
| 487 } | |
| 488 | |
| 489 .manifest-header > button { | |
| 490 margin: 18px 0; | |
| 491 font-size: 11px; | |
| 492 border: 1px solid #CCC; | |
| 493 border-right-width: 0; | |
| 494 padding: 2px; | |
| 495 cursor: pointer; | |
| 496 background: rgba(255,255,255,0.4); | |
| 497 text-transform: uppercase; | |
| 498 display: none; | |
| 499 } | |
| 500 | |
| 501 .manifest-header > button[disabled] { | |
| 502 background-color: transparent; | |
| 503 opacity: 0.4; | |
| 504 pointer-events: none; | |
| 505 } | |
| 506 | |
| 507 .manifest-header > button:last-child { | |
| 508 border-right-width: 1px; | |
| 509 } | |
| 510 | |
| 511 [type="packaged"] > .editable { | |
| 512 display: block; | |
| 513 } | |
| 514 | |
| 515 [type="hosted"] > .viewable { | |
| 516 display: block; | |
| 517 } | |
| 518 | |
| 519 .manifest-button-save { | |
| 520 color: #777; | |
| 521 } | |
| 522 | |
| 523 .manifest-button-save:hover { | |
| 524 background-color: #777; | |
| 525 color: #FFF; | |
| 526 } | |
| 527 | |
| 528 .manifest-button-save[disabled] { | |
| 529 color: #777; | |
| 530 } | |
| 531 | |
| 532 .variables-view { | |
| 533 flex-grow: 1; | |
| 534 border: 0; | |
| 535 border-top: 5px solid #C9C9C9; | |
| 536 } | |
| 537 | |
| 538 /* Bug 925921: Remove when the manifest editor is always on */ | |
| 539 | |
| 540 .manifest-editor { | |
| 541 display: none; | |
| 542 } | |
| 543 | |
| 544 .project-details { | |
| 545 flex-grow: 1; | |
| 546 } | |
| 547 | |
| 548 #lense[manifest-editable] .manifest-editor { | |
| 549 display: flex; | |
| 550 } | |
| 551 | |
| 552 #lense[manifest-editable] .project-details { | |
| 553 flex-grow: 0; | |
| 554 } | |
| 555 | |
| 556 /* End blocks to remove */ |
