third_party/WebKit/Source/devtools/front_end/emulation/responsiveDesignView.css

   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 select {
 403     width: 145px;
 404 }
 405
 406 .responsive-design-section-network input[type='text'] {
 407     width: 182px;
 408     margin-left: 5px;
 409     text-overflow: ellipsis;
 410 }
 411
 412 .responsive-design-section-network input[type='text'],
 413 .responsive-design-section-network input[type='text']::-webkit-input-placeholder,
 414 .responsive-design-section-network select {
 415     color: rgb(65, 175, 255);
 416 }
 417
 418 .responsive-design-section-network .responsive-design-section-decorator {
 419     background: linear-gradient(to bottom, rgb(77, 170, 243), rgb(0, 130, 255));
 420 }
 421
 422 /* Warning message */
 423
 424 .responsive-design-warning {
 425     position: absolute;
 426     left: 0;
 427     right: 0;
 428     top: 0;
 429     overflow: hidden;
 430     border-bottom: 1px solid rgb(187, 187, 187);
 431 }
 432
 433 /* Media query inspector */
 434
 435 .responsive-design-media-container {
 436     position: absolute;
 437     right: 0;
 438     top: 0;
 439     padding-bottom: 5px;
 440     overflow: hidden;
 441 }
 442
 443 /* Media query bars */
 444
 445 .media-inspector-marker-container {
 446     position: relative;
 447     height: 14px;
 448     margin: 2px 0;
 449 }
 450
 451 .media-inspector-marker {
 452     position: absolute;
 453     top: 1px;
 454     bottom: 1px;
 455     white-space: nowrap;
 456     border-radius: 2px;
 457 }
 458
 459 .media-inspector-marker-inactive {
 460     -webkit-filter: brightness(80%);
 461 }
 462
 463 .media-inspector-marker:hover {
 464     top: -1px;
 465     bottom: -1px;
 466     -webkit-filter: brightness(115%) !important;
 467 }
 468
 469 .media-inspector-marker-max-width {
 470     background: linear-gradient(to left, rgba(255, 255, 255, 0.27), rgba(0,0,0,0) 30px), linear-gradient(to bottom, rgb(72, 139, 249), rgb(26, 113, 233));
 471     border-radius: 0 2px 2px 0;
 472     border-right: 2px solid rgb(171, 207, 255);
 473 }
 474
 475 .media-inspector-marker-min-max-width {
 476     background: linear-gradient(to right, rgba(255, 255, 255, 0.27), rgba(0,0,0,0) 30px), linear-gradient(to left, rgba(255, 255, 255, 0.27), rgba(0,0,0,0) 30px), linear-gradient(to bottom, rgb(112, 174, 7), rgb(3, 131, 0));
 477     border-radius: 2px;
 478     border-left: 2px solid rgb(80, 226, 40);
 479     border-right: 2px solid rgb(80, 226, 40);
 480 }
 481
 482 .media-inspector-marker-min-max-width:hover {
 483     z-index: 1;
 484 }
 485
 486 .media-inspector-marker-min-width {
 487     background: linear-gradient(to right, rgba(255, 255, 255, 0.27), rgba(0,0,0,0) 30px), linear-gradient(to bottom, rgb(222, 129, 30), rgb(204, 104, 31));
 488     border-radius: 2px 0 0 2px;
 489     border-left: 2px solid rgb(255, 181, 142);
 490 }
 491
 492 /* Media query labels */
 493
 494 .media-inspector-marker:not(:hover) .media-inspector-marker-label-container {
 495     display: none;
 496 }
 497
 498 .media-inspector-marker-label-container {
 499     position: absolute;
 500 }
 501
 502 .media-inspector-marker-label-container-left {
 503     left: -2px;
 504 }
 505
 506 .media-inspector-marker-label-container-right {
 507     right: -2px;
 508 }
 509
 510 .media-inspector-marker-label {
 511     color: #eee;
 512     position: absolute;
 513     top: 1px;
 514     bottom: 0;
 515     font-size: 10px;
 516     text-shadow: rgba(0, 0, 0, 0.6) 1px 1px;
 517     pointer-events: none;
 518 }
 519
 520 .media-inspector-label-right {
 521     right: 4px;
 522 }
 523
 524 .media-inspector-label-left {
 525     left: 4px;
 526 }