| OLD | NEW |
| (Empty) |
| 1 /* | |
| 2 * Copyright 2014 The Chromium Authors. All rights reserved. | |
| 3 * Use of this source code is governed by a BSD-style license that can be | |
| 4 * found in the LICENSE file. | |
| 5 */ | |
| 6 | |
| 7 .responsive-design { | |
| 8 position: relative; | |
| 9 background-color: rgb(0, 0, 0); | |
| 10 overflow: hidden; | |
| 11 } | |
| 12 | |
| 13 .responsive-design-view { | |
| 14 overflow: hidden; | |
| 15 } | |
| 16 | |
| 17 .responsive-design-canvas { | |
| 18 pointer-events: none; | |
| 19 } | |
| 20 | |
| 21 .responsive-design-sliders-container { | |
| 22 position: absolute; | |
| 23 overflow: visible; | |
| 24 } | |
| 25 | |
| 26 .responsive-design-generic-outline-container { | |
| 27 position: absolute; | |
| 28 overflow: hidden; | |
| 29 top: 0; | |
| 30 left: 0; | |
| 31 right: -19px; | |
| 32 bottom: -19px; | |
| 33 } | |
| 34 | |
| 35 .responsive-design-generic-outline { | |
| 36 position: absolute; | |
| 37 top: -10px; | |
| 38 left: -10px; | |
| 39 right: 5px; | |
| 40 bottom: 5px; | |
| 41 border-radius: 8px; | |
| 42 background-color: rgb(51, 51, 51); | |
| 43 box-shadow: rgb(20, 20, 20) 3px 3px 4px; | |
| 44 } | |
| 45 | |
| 46 .responsive-design-slider-width { | |
| 47 position: absolute; | |
| 48 top: 0; | |
| 49 bottom: 0; | |
| 50 right: -14px; | |
| 51 width: 14px; | |
| 52 display: flex; | |
| 53 align-items: center; | |
| 54 justify-content: center; | |
| 55 } | |
| 56 | |
| 57 .responsive-design-slider-height { | |
| 58 position: absolute; | |
| 59 left: 0; | |
| 60 right: 0; | |
| 61 bottom: -14px; | |
| 62 height: 14px; | |
| 63 display: flex; | |
| 64 align-items: center; | |
| 65 justify-content: center; | |
| 66 } | |
| 67 | |
| 68 .responsive-design-slider-corner { | |
| 69 position: absolute; | |
| 70 right: -14px; | |
| 71 width: 14px; | |
| 72 bottom: -14px; | |
| 73 height: 14px; | |
| 74 } | |
| 75 | |
| 76 .responsive-design-thumb-handle { | |
| 77 content: url(Images/toolbarResizerHorizontal.png); | |
| 78 pointer-events: none; | |
| 79 } | |
| 80 | |
| 81 .responsive-design-slider-height .responsive-design-thumb-handle { | |
| 82 transform: rotate(90deg); | |
| 83 } | |
| 84 | |
| 85 .responsive-design-page-container { | |
| 86 background-color: #171717; | |
| 87 } | |
| 88 | |
| 89 .responsive-design-page-container-image { | |
| 90 position: absolute;; | |
| 91 left: 0; | |
| 92 top: 0; | |
| 93 width: 100%; | |
| 94 height: 100%; | |
| 95 } | |
| 96 | |
| 97 .responsive-design-page-scale-container { | |
| 98 position: absolute !important; | |
| 99 top: 0; | |
| 100 right: 0; | |
| 101 padding: 10px; | |
| 102 background-color: rgba(0, 0, 0, 0.3); | |
| 103 align-items: center; | |
| 104 } | |
| 105 | |
| 106 .responsive-design-page-scale-label { | |
| 107 display: block; | |
| 108 height: 20px; | |
| 109 margin: 0 4px; | |
| 110 padding-top: 3px; | |
| 111 color: white; | |
| 112 cursor: default !important; | |
| 113 } | |
| 114 | |
| 115 .responsive-design-page-scale-container .responsive-design-page-scale-button > .
glyph { | |
| 116 display: block; | |
| 117 width: 18px; | |
| 118 height: 18px; | |
| 119 border: 1px solid transparent; | |
| 120 border-radius: 2px; | |
| 121 } | |
| 122 | |
| 123 .responsive-design-page-scale-container .responsive-design-page-scale-button:not
(:disabled):hover { | |
| 124 box-shadow: rgb(255, 255, 255) 0 0 3px; | |
| 125 } | |
| 126 | |
| 127 .responsive-design-page-scale-container .responsive-design-page-scale-button { | |
| 128 border: none; | |
| 129 background-color: transparent; | |
| 130 padding: 2px 0 0 0; | |
| 131 } | |
| 132 | |
| 133 .responsive-design-page-scale-container .responsive-design-page-scale-button > .
glyph { | |
| 134 background-color: rgb(180, 180, 180); | |
| 135 -webkit-mask-image: url(Images/responsiveDesign.png); | |
| 136 -webkit-mask-size: 112px 16px; | |
| 137 opacity: 1; | |
| 138 } | |
| 139 | |
| 140 @media (-webkit-min-device-pixel-ratio: 1.5) { | |
| 141 .responsive-design-page-scale-container .responsive-design-page-scale-button > .
glyph { | |
| 142 -webkit-mask-image: url(Images/responsiveDesign_2x.png); | |
| 143 } | |
| 144 } /* media */ | |
| 145 | |
| 146 .responsive-design-page-scale-increase > .glyph { | |
| 147 -webkit-mask-position: -80px 0; | |
| 148 } | |
| 149 | |
| 150 .responsive-design-page-scale-decrease > .glyph { | |
| 151 -webkit-mask-position: -96px 0; | |
| 152 } | |
| 153 | |
| 154 /* Toolbar */ | |
| 155 | |
| 156 .responsive-design-toolbar { | |
| 157 display: flex; | |
| 158 flex: none; | |
| 159 background: linear-gradient(to bottom, rgb(83, 81, 81), rgb(59, 59, 59)); | |
| 160 color: rgb(255, 255, 255); | |
| 161 overflow: hidden; | |
| 162 border-bottom: 1px solid rgb(71, 71, 71); | |
| 163 } | |
| 164 | |
| 165 .responsive-design-separator { | |
| 166 flex: none; | |
| 167 width: 3px; | |
| 168 background-color: rgb(46, 46, 46); | |
| 169 border-right: 1px solid rgb(75, 75, 75); | |
| 170 } | |
| 171 | |
| 172 .responsive-design-section { | |
| 173 display: flex; | |
| 174 flex: none; | |
| 175 flex-direction: column; | |
| 176 white-space: nowrap; | |
| 177 align-items: stretch; | |
| 178 justify-content: flex-start; | |
| 179 padding-top: 1px; | |
| 180 } | |
| 181 | |
| 182 .responsive-design-section-decorator { | |
| 183 height: 2px; | |
| 184 margin-left: -2px; | |
| 185 margin-right: -1px; | |
| 186 position: relative; | |
| 187 } | |
| 188 | |
| 189 .responsive-design-suite { | |
| 190 display: flex; | |
| 191 flex-direction: row; | |
| 192 padding: 2px 11px; | |
| 193 color: rgb(180, 180, 180); | |
| 194 } | |
| 195 | |
| 196 .responsive-design-suite.responsive-design-suite-top { | |
| 197 color: rgb(255, 255, 255); | |
| 198 } | |
| 199 | |
| 200 .responsive-design-suite-separator { | |
| 201 flex: none; | |
| 202 width: 1px; | |
| 203 background-color: rgb(43, 43, 43); | |
| 204 margin: 0 6px; | |
| 205 } | |
| 206 | |
| 207 .responsive-design-suite > div:not(.responsive-design-suite-separator) { | |
| 208 flex: none; | |
| 209 display: flex; | |
| 210 flex-direction: row; | |
| 211 align-items: center; | |
| 212 justify-content: space-between; | |
| 213 height: 23px; | |
| 214 overflow: hidden; | |
| 215 } | |
| 216 | |
| 217 /* Toolbar controls */ | |
| 218 | |
| 219 .responsive-design-toolbar fieldset, | |
| 220 .responsive-design-toolbar p { | |
| 221 margin: 0; | |
| 222 border: 0; | |
| 223 padding: 0; | |
| 224 display: inline-block; | |
| 225 } | |
| 226 | |
| 227 .responsive-design-toolbar .field-error-message { | |
| 228 display: none; | |
| 229 } | |
| 230 | |
| 231 .responsive-design-toolbar label { | |
| 232 cursor: default !important; | |
| 233 margin: 0 2px; | |
| 234 } | |
| 235 | |
| 236 .responsive-design-toolbar input[type='text'] { | |
| 237 text-align: left; | |
| 238 background-color: transparent; | |
| 239 border: none; | |
| 240 margin: 0 1px 1px 0; | |
| 241 padding: 3px 2px; | |
| 242 } | |
| 243 | |
| 244 .responsive-design-toolbar input[type='text'].numeric { | |
| 245 text-align: center; | |
| 246 } | |
| 247 | |
| 248 .responsive-design-toolbar input:focus::-webkit-input-placeholder { | |
| 249 color: transparent !important; | |
| 250 } | |
| 251 | |
| 252 .responsive-design-toolbar fieldset:disabled input, | |
| 253 .responsive-design-toolbar fieldset:disabled button { | |
| 254 opacity: 0.7; | |
| 255 } | |
| 256 | |
| 257 .responsive-design-toolbar input.error-input { | |
| 258 color: red !important; | |
| 259 text-decoration: line-through; | |
| 260 } | |
| 261 | |
| 262 .responsive-design-toolbar select { | |
| 263 height: 18px; | |
| 264 background-color: rgb(87, 87, 87); | |
| 265 border: 0; | |
| 266 margin-left: 10px; | |
| 267 line-height: 16px; | |
| 268 } | |
| 269 | |
| 270 .responsive-design-toolbar input:focus { | |
| 271 background-color: rgb(81, 81, 81); | |
| 272 } | |
| 273 | |
| 274 /* Toolbar icons */ | |
| 275 | |
| 276 .responsive-design-icon { | |
| 277 background-color: rgb(180, 180, 180); | |
| 278 -webkit-mask-image: url(Images/responsiveDesign.png); | |
| 279 -webkit-mask-size: 112px 16px; | |
| 280 } | |
| 281 | |
| 282 .responsive-design-icon { | |
| 283 display: inline-block; | |
| 284 width: 16px; | |
| 285 height: 16px; | |
| 286 position: relative; | |
| 287 top: 3px; | |
| 288 } | |
| 289 | |
| 290 div.responsive-design-icon:disabled { | |
| 291 opacity: 1 !important; | |
| 292 } | |
| 293 | |
| 294 @media (-webkit-min-device-pixel-ratio: 1.5) { | |
| 295 .responsive-design-icon { | |
| 296 -webkit-mask-image: url(Images/responsiveDesign_2x.png); | |
| 297 } | |
| 298 } /* media */ | |
| 299 | |
| 300 .responsive-design-icon-resolution { | |
| 301 -webkit-mask-position: 0 0; | |
| 302 } | |
| 303 | |
| 304 .responsive-design-icon-dpr { | |
| 305 -webkit-mask-position: -16px 0; | |
| 306 } | |
| 307 | |
| 308 .responsive-design-icon-swap { | |
| 309 background-color: rgb(255, 170, 0); | |
| 310 -webkit-mask-position: -32px 0; | |
| 311 -webkit-appearance: none; | |
| 312 padding: 0; | |
| 313 border: 0; | |
| 314 } | |
| 315 | |
| 316 .responsive-design-icon-swap { | |
| 317 margin-left: 1px; | |
| 318 top: 4px; | |
| 319 } | |
| 320 | |
| 321 .responsive-design-icon-swap:hover { | |
| 322 background-color: rgb(255, 180, 0); | |
| 323 } | |
| 324 | |
| 325 .responsive-design-icon-swap:active { | |
| 326 opacity: 0.8; | |
| 327 } | |
| 328 | |
| 329 /* Buttons section */ | |
| 330 | |
| 331 .responsive-design-section-buttons { | |
| 332 padding: 4px 0 0 0; | |
| 333 background: rgb(17, 17, 17); | |
| 334 } | |
| 335 | |
| 336 .responsive-design-more-button-container { | |
| 337 flex: auto; | |
| 338 display: flex; | |
| 339 justify-content: flex-end; | |
| 340 align-items: flex-end; | |
| 341 overflow: hidden; | |
| 342 } | |
| 343 | |
| 344 .responsive-design-more-button { | |
| 345 -webkit-appearance: none; | |
| 346 border: 0; | |
| 347 background-color: transparent; | |
| 348 color: white; | |
| 349 opacity: 0.8; | |
| 350 font-size: 16px; | |
| 351 text-shadow: black 1px 1px; | |
| 352 } | |
| 353 | |
| 354 .responsive-design-more-button:hover { | |
| 355 opacity: 1; | |
| 356 } | |
| 357 | |
| 358 .responsive-design-more-button:active { | |
| 359 opacity: 0.8; | |
| 360 } | |
| 361 | |
| 362 /* Device section */ | |
| 363 | |
| 364 .responsive-design-section-device .responsive-design-section-decorator { | |
| 365 background: linear-gradient(to bottom, rgb(255, 186, 68), rgb(255, 119, 0)); | |
| 366 margin-left: 0; | |
| 367 } | |
| 368 | |
| 369 .responsive-design-section-device .device-select { | |
| 370 width: 140px; | |
| 371 } | |
| 372 | |
| 373 .responsive-design-section-device .mode-container { | |
| 374 display: inline-block; | |
| 375 width: 116px; | |
| 376 padding: 0 10px; | |
| 377 } | |
| 378 | |
| 379 .responsive-design-section-device .mode-select select { | |
| 380 width: 82px; | |
| 381 } | |
| 382 | |
| 383 .responsive-design-section-device .mode-select label { | |
| 384 margin-left: 4px; | |
| 385 color: rgb(255, 156, 0); | |
| 386 position: relative; | |
| 387 top: 1px; | |
| 388 } | |
| 389 | |
| 390 .responsive-design-section-device input[type='text'], | |
| 391 .responsive-design-section-device input[type='text']::-webkit-input-placeholder, | |
| 392 .responsive-design-section-device select { | |
| 393 color: rgb(255, 156, 0); | |
| 394 } | |
| 395 | |
| 396 .responsive-design-section-device input[type='checkbox']:checked:after { | |
| 397 background: rgb(255, 156, 0); | |
| 398 } | |
| 399 | |
| 400 /* Network section */ | |
| 401 | |
| 402 .responsive-design-section-network .responsive-design-section-decorator { | |
| 403 background: linear-gradient(to bottom, rgb(77, 170, 243), rgb(0, 130, 255)); | |
| 404 } | |
| 405 | |
| 406 .responsive-design-section-network .responsive-design-suite a { | |
| 407 height: 20px; | |
| 408 background-color: transparent; | |
| 409 border: 0; | |
| 410 line-height: 16px; | |
| 411 color: rgb(66, 175, 255); | |
| 412 cursor: pointer; | |
| 413 border-radius: 2px; | |
| 414 text-decoration: underline; | |
| 415 } | |
| 416 | |
| 417 /* Warning message */ | |
| 418 | |
| 419 .responsive-design-warning { | |
| 420 position: absolute; | |
| 421 left: 0; | |
| 422 right: 0; | |
| 423 top: 0; | |
| 424 overflow: hidden; | |
| 425 border-bottom: 1px solid rgb(187, 187, 187); | |
| 426 } | |
| 427 | |
| 428 /* Media query inspector */ | |
| 429 | |
| 430 .responsive-design-media-container { | |
| 431 position: absolute; | |
| 432 right: 0; | |
| 433 top: 0; | |
| 434 padding-bottom: 5px; | |
| 435 overflow: hidden; | |
| 436 } | |
| OLD | NEW |