| OLD | NEW |
| 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
| 4 | 4 |
| 5 * { | 5 * { |
| 6 box-sizing: border-box; | 6 box-sizing: border-box; |
| 7 } | 7 } |
| 8 | 8 |
| 9 html { |
| 10 height: 100%; |
| 11 } |
| 12 |
| 9 body { | 13 body { |
| 10 color: rgb(48, 57, 66); | 14 color: rgb(48, 57, 66); |
| 11 font-size: 13px; | 15 font-size: 13px; |
| 16 height: 100%; |
| 12 margin: 0; | 17 margin: 0; |
| 13 min-width: 47em; | 18 overflow: auto; |
| 14 overflow: hidden; | |
| 15 } | 19 } |
| 16 | 20 |
| 17 .hidden { | 21 .hidden { |
| 18 display: none !important; | 22 display: none !important; |
| 19 } | 23 } |
| 20 | 24 |
| 21 img { | 25 img { |
| 22 flex-shrink: 0; | 26 flex-shrink: 0; |
| 23 height: 16px; | 27 height: 16px; |
| 24 padding-left: 2px; | 28 padding-left: 2px; |
| 25 padding-right: 5px; | 29 padding-right: 5px; |
| 26 vertical-align: top; | 30 vertical-align: top; |
| 27 width: 23px; | 31 width: 23px; |
| 28 } | 32 } |
| 29 | 33 |
| 30 #container { | 34 #container { |
| 31 -webkit-flex-direction: row; | 35 display: flex; |
| 32 display: -webkit-flex; | 36 height: 100% |
| 33 } | 37 } |
| 34 | 38 |
| 35 #infobar { | 39 #infobar { |
| 36 background: rgb(255, 212, 0); | 40 background: rgb(255, 212, 0); |
| 37 height: 20px; | 41 height: 20px; |
| 38 left: 0; | 42 left: 0; |
| 39 line-height: 20px; | 43 line-height: 20px; |
| 40 position: fixed; | 44 position: fixed; |
| 41 right: 0; | 45 right: 0; |
| 42 text-align: center; | 46 text-align: center; |
| 43 visibility: hidden; | 47 visibility: hidden; |
| 44 z-index: 1; | 48 z-index: 1; |
| 45 } | 49 } |
| 46 | 50 |
| 47 #infobar.show { | 51 #infobar.show { |
| 48 visibility: visible; | 52 visibility: visible; |
| 49 } | 53 } |
| 50 | 54 |
| 51 #navigation { | 55 #navigation { |
| 56 flex-shrink: 0; |
| 52 padding-top: 20px; | 57 padding-top: 20px; |
| 53 width: 150px; | 58 width: 150px; |
| 54 } | 59 } |
| 55 | 60 |
| 56 #content { | 61 #content { |
| 57 -webkit-flex: 1; | 62 flex-grow: 1; |
| 58 } | 63 } |
| 59 | 64 |
| 60 #caption { | 65 #caption { |
| 61 color: rgb(92, 97, 102); | 66 color: rgb(92, 97, 102); |
| 62 font-size: 150%; | 67 font-size: 150%; |
| 63 padding-bottom: 10px; | 68 padding-bottom: 10px; |
| 64 padding-left: 20px; | 69 padding-left: 20px; |
| 65 } | 70 } |
| 66 | 71 |
| 67 #serviceworker-internals { | 72 #serviceworker-internals { |
| (...skipping 17 matching lines...) Expand all Loading... |
| 85 line-height: 17px; | 90 line-height: 17px; |
| 86 margin: 6px 0; | 91 margin: 6px 0; |
| 87 padding: 0 2px; | 92 padding: 0 2px; |
| 88 } | 93 } |
| 89 | 94 |
| 90 .tab-header:not(.selected) > button { | 95 .tab-header:not(.selected) > button { |
| 91 color: #999; | 96 color: #999; |
| 92 } | 97 } |
| 93 | 98 |
| 94 #content > div { | 99 #content > div { |
| 100 min-width: 32em; |
| 95 padding: 0 20px 65px 0; | 101 padding: 0 20px 65px 0; |
| 96 } | 102 } |
| 97 #content > div:not(.selected) { | 103 #content > div:not(.selected) { |
| 98 display: none; | 104 display: none; |
| 99 } | 105 } |
| 100 | 106 |
| 101 .content-header { | 107 .content-header { |
| 102 background: linear-gradient(white, white 40%, rgba(255, 255, 255, 0.92)); | 108 background: linear-gradient(white, white 40%, rgba(255, 255, 255, 0.92)); |
| 103 border-bottom: 1px solid #eee; | 109 border-bottom: 1px solid #eee; |
| 104 font-size: 150%; | 110 font-size: 150%; |
| (...skipping 318 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 423 display: none; | 429 display: none; |
| 424 } | 430 } |
| 425 | 431 |
| 426 dialog.target-discovery .port-forwarding { | 432 dialog.target-discovery .port-forwarding { |
| 427 display: none; | 433 display: none; |
| 428 } | 434 } |
| 429 | 435 |
| 430 .config-buttons > label { | 436 .config-buttons > label { |
| 431 flex-grow: 1 | 437 flex-grow: 1 |
| 432 } | 438 } |
| 433 | |
| 434 @media (max-width: 47em) { | |
| 435 #navigation, | |
| 436 #content { | |
| 437 overflow: visible; | |
| 438 } | |
| 439 } | |
| 440 @media (min-width: 47em) { | |
| 441 #container { | |
| 442 max-height: 100vh; | |
| 443 } | |
| 444 #navigation, | |
| 445 #content { | |
| 446 max-height: 100vh; | |
| 447 overflow: auto; | |
| 448 } | |
| 449 } | |
| OLD | NEW |