| OLD | NEW |
| 1 /* | 1 /* |
| 2 * Copyright 2015 The Chromium Authors. All rights reserved. | 2 * Copyright 2015 The Chromium Authors. All rights reserved. |
| 3 * Use of this source code is governed by a BSD-style license that can be | 3 * Use of this source code is governed by a BSD-style license that can be |
| 4 * found in the LICENSE file. | 4 * found in the LICENSE file. |
| 5 */ | 5 */ |
| 6 | 6 |
| 7 :host { | 7 :host { |
| 8 overflow: hidden; | 8 overflow: hidden; |
| 9 align-items: stretch; | 9 align-items: stretch; |
| 10 flex: auto; | 10 flex: auto; |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 45 .device-mode-media-container { | 45 .device-mode-media-container { |
| 46 flex: none; | 46 flex: none; |
| 47 overflow: hidden; | 47 overflow: hidden; |
| 48 box-shadow: inset 0 -1px #ccc; | 48 box-shadow: inset 0 -1px #ccc; |
| 49 } | 49 } |
| 50 | 50 |
| 51 .device-mode-content-clip:not(.device-mode-rulers-visible) .device-mode-media-co
ntainer { | 51 .device-mode-content-clip:not(.device-mode-rulers-visible) .device-mode-media-co
ntainer { |
| 52 margin-bottom: 20px; | 52 margin-bottom: 20px; |
| 53 } | 53 } |
| 54 | 54 |
| 55 .device-mode-content-clip:not(.device-mode-frame-visible) .device-mode-outline-a
rea { |
| 56 visibility: hidden; |
| 57 } |
| 58 |
| 55 .device-mode-presets-container { | 59 .device-mode-presets-container { |
| 56 flex: 0 0 20px; | 60 flex: 0 0 20px; |
| 57 display: flex; | 61 display: flex; |
| 58 } | 62 } |
| 59 | 63 |
| 60 .device-mode-presets-container-inner { | 64 .device-mode-presets-container-inner { |
| 61 flex: auto; | 65 flex: auto; |
| 62 justify-content: center; | 66 justify-content: center; |
| 63 position: relative; | 67 position: relative; |
| 64 background-color: hsl(0, 0%, 90%); | 68 background-color: hsl(0, 0%, 90%); |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 115 margin: 0; | 119 margin: 0; |
| 116 } | 120 } |
| 117 | 121 |
| 118 .device-mode-screen-area { | 122 .device-mode-screen-area { |
| 119 position: absolute; | 123 position: absolute; |
| 120 left: 0; | 124 left: 0; |
| 121 right: 0; | 125 right: 0; |
| 122 width: 0; | 126 width: 0; |
| 123 height: 0; | 127 height: 0; |
| 124 background-color: #171717; | 128 background-color: #171717; |
| 125 box-shadow: hsl(240, 3%, 84%) 0 0 0 0.5px, hsla(0, 0%, 80%, 0.4) 0 0 20px; | 129 } |
| 130 |
| 131 .device-mode-content-clip:not(.device-mode-frame-visible) .device-mode-screen-ar
ea { |
| 132 box-shadow: hsl(0, 0%, 88%) 1px 1px 0 1px, hsla(0, 0%, 80%, 0.6) 0 0 16px; |
| 133 } |
| 134 |
| 135 .device-mode-screen-area { |
| 136 width: 454px; |
| 137 height: 921px; |
| 126 } | 138 } |
| 127 | 139 |
| 128 .device-mode-screen-image { | 140 .device-mode-screen-image { |
| 129 position: absolute; | 141 position: absolute; |
| 130 left: 0; | 142 left: 0; |
| 131 top: 0; | 143 top: 0; |
| 132 width: 100%; | 144 width: 100%; |
| 133 height: 100%; | 145 height: 100%; |
| 134 } | 146 } |
| 135 | 147 |
| 148 .device-mode-outline-area { |
| 149 position: absolute; |
| 150 left: 0; |
| 151 right: 0; |
| 152 width: 0; |
| 153 height: 0; |
| 154 } |
| 155 |
| 156 .device-mode-outline-image { |
| 157 position: absolute; |
| 158 left: 0; |
| 159 top: 0; |
| 160 width: 100%; |
| 161 height: 100%; |
| 162 } |
| 163 |
| 136 .device-mode-resizer { | 164 .device-mode-resizer { |
| 137 position: absolute; | 165 position: absolute; |
| 138 display: flex; | 166 display: flex; |
| 139 align-items: center; | 167 align-items: center; |
| 140 justify-content: center; | 168 justify-content: center; |
| 141 overflow: hidden; | 169 overflow: hidden; |
| 142 transition: background-color 0.1s ease, opacity 0.1s ease; | 170 transition: background-color 0.1s ease, opacity 0.1s ease; |
| 143 } | 171 } |
| 144 | 172 |
| 145 .device-mode-resizer:hover { | 173 .device-mode-resizer:hover { |
| (...skipping 181 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 327 .device-mode-ruler-top .device-mode-ruler-text { | 355 .device-mode-ruler-top .device-mode-ruler-text { |
| 328 left: 2px; | 356 left: 2px; |
| 329 top: -2px; | 357 top: -2px; |
| 330 } | 358 } |
| 331 | 359 |
| 332 .device-mode-ruler-left .device-mode-ruler-text { | 360 .device-mode-ruler-left .device-mode-ruler-text { |
| 333 left: -4px; | 361 left: -4px; |
| 334 top: -15px; | 362 top: -15px; |
| 335 transform: rotate(270deg); | 363 transform: rotate(270deg); |
| 336 } | 364 } |
| OLD | NEW |