src/third_party/WebKit/Source/devtools/front_end/toolbox/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-canvas {
  14     pointer-events: none;
  15 }
  16
  17 .responsive-design-sliders-container {
  18     position: absolute;
  19     overflow: visible;
  20 }
  21
  22 .responsive-design-generic-outline-container {
  23     position: absolute;
  24     overflow: hidden;
  25     top: 0;
  26     left: 0;
  27     right: -19px;
  28     bottom: -19px;
  29 }
  30
  31 .responsive-design-generic-outline {
  32     position: absolute;
  33     top: -10px;
  34     left: -10px;
  35     right: 5px;
  36     bottom: 5px;
  37     border-radius: 8px;
  38     background-color: rgb(51, 51, 51);
  39     box-shadow: rgb(20, 20, 20) 3px 3px 4px;
  40 }
  41
  42 .responsive-design-slider-width {
  43     position: absolute;
  44     top: 0;
  45     bottom: 0;
  46     right: -14px;
  47     width: 14px;
  48     display: flex;
  49     align-items: center;
  50     justify-content: center;
  51 }
  52
  53 .responsive-design-slider-height {
  54     position: absolute;
  55     left: 0;
  56     right: 0;
  57     bottom: -14px;
  58     height: 14px;
  59     display: flex;
  60     align-items: center;
  61     justify-content: center;
  62 }
  63
  64 .responsive-design-thumb-handle {
  65     content: url(Images/statusbarResizerHorizontal.png);
  66     pointer-events: none;
  67 }
  68
  69 .responsive-design-slider-height .responsive-design-thumb-handle  {
  70     transform: rotate(90deg);
  71 }
  72
  73 .responsive-design-page-scale-container {
  74     position: absolute !important;
  75     top: 0;
  76     right: 0;
  77     padding: 10px;
  78     background-color: rgba(0, 0, 0, 0.3);
  79     align-items: center;
  80 }
  81
  82 .responsive-design-page-scale-label {
  83     display: block;
  84     height: 20px;
  85     margin: 0 4px;
  86     padding-top: 3px;
  87     color: white;
  88     cursor: default !important;
  89 }
  90
  91 .responsive-design-page-scale-container .responsive-design-page-scale-button.status-bar-item {
  92     display: block;
  93     width: 18px;
  94     height: 18px;
  95     border: 1px solid transparent;
  96     border-radius: 2px;
  97 }
  98
  99 .responsive-design-page-scale-container .responsive-design-page-scale-button.status-bar-item:not(:disabled):hover {
 100     box-shadow: rgb(255, 255, 255) 0 0 3px;
 101 }
 102
 103 .responsive-design-page-scale-container .responsive-design-page-scale-button.status-bar-item > .glyph {
 104     background-color: rgb(180, 180, 180);
 105     -webkit-mask-image: url(Images/responsiveDesign.png);
 106     -webkit-mask-size: 112px 16px;
 107     opacity: 1;
 108 }
 109
 110 .responsive-design-page-scale-container .status-bar-item .glyph.shadow {
 111     background-color: black !important;
 112 }
 113
 114 @media (-webkit-min-device-pixel-ratio: 1.5) {
 115     .responsive-design-page-scale-container .responsive-design-page-scale-button.status-bar-item > .glyph {
 116         -webkit-mask-image: url(Images/responsiveDesign_2x.png);
 117     }
 118 } /* media */
 119
 120 .responsive-design-page-scale-increase > .glyph {
 121     -webkit-mask-position: -81px 1px;
 122 }
 123
 124 .responsive-design-page-scale-decrease > .glyph {
 125     -webkit-mask-position: -97px 1px;
 126 }
 127
 128 /* Toolbar */
 129
 130 .responsive-design-toolbar {
 131     display: flex;
 132     flex: none;
 133     background: linear-gradient(to bottom, rgb(83, 81, 81), rgb(59, 59, 59));
 134     color: rgb(255, 255, 255);
 135     overflow: hidden;
 136     border-bottom: 1px solid rgb(71, 71, 71);
 137 }
 138
 139 .responsive-design-separator {
 140     flex: none;
 141     width: 3px;
 142     background-color: rgb(46, 46, 46);
 143     border-right: 1px solid rgb(75, 75, 75);
 144 }
 145
 146 .responsive-design-section {
 147     display: flex;
 148     flex: none;
 149     flex-direction: column;
 150     white-space: nowrap;
 151     align-items: stretch;
 152     justify-content: flex-start;
 153     padding-top: 1px;
 154 }
 155
 156 .responsive-design-section .status-bar-item .glyph.shadow {
 157     background-color: black !important;
 158 }
 159
 160
 161 .responsive-design-section-decorator {
 162     height: 2px;
 163     margin-left: -2px;
 164     margin-right: -1px;
 165     position: relative;
 166 }
 167
 168 .responsive-design-suite {
 169     display: flex;
 170     flex-direction: row;
 171     padding: 2px 11px;
 172     color: rgb(180, 180, 180);
 173 }
 174
 175 .responsive-design-suite.responsive-design-suite-top {
 176     color: rgb(255, 255, 255);
 177 }
 178
 179 .responsive-design-suite-separator {
 180     flex: none;
 181     width: 1px;
 182     background-color: rgb(43, 43, 43);
 183     margin: 0 6px;
 184 }
 185
 186 .responsive-design-suite > div:not(.responsive-design-suite-separator) {
 187     flex: none;
 188     display: flex;
 189     flex-direction: row;
 190     align-items: center;
 191     justify-content: space-between;
 192     height: 23px;
 193     overflow: hidden;
 194 }
 195
 196 /* Toolbar controls */
 197
 198 .responsive-design-toolbar fieldset,
 199 .responsive-design-toolbar p {
 200     margin: 0;
 201     border: 0;
 202     padding: 0;
 203     display: inline-block;
 204 }
 205
 206 .responsive-design-toolbar .field-error-message {
 207     display: none;
 208 }
 209
 210 .responsive-design-toolbar label {
 211     cursor: default !important;
 212 }
 213
 214 .responsive-design-toolbar input[type='text'] {
 215     text-align: left;
 216     background-color: transparent;
 217     border: none;
 218     margin: 0 1px 1px 0;
 219     padding: 3px 2px;
 220 }
 221
 222 .responsive-design-toolbar input[type='text'].numeric {
 223     text-align: center;
 224 }
 225
 226 .responsive-design-toolbar input:focus::-webkit-input-placeholder {
 227     color: transparent !important;
 228 }
 229
 230 .responsive-design-toolbar fieldset:disabled input,
 231 .responsive-design-toolbar fieldset:disabled button {
 232     opacity: 0.7;
 233 }
 234
 235 .responsive-design-toolbar input[type='checkbox'] {
 236     -webkit-appearance: none;
 237     margin: auto 5px auto 2px;
 238     border: 1px solid rgb(45, 45, 45);
 239     border-radius: 3px;
 240     background-color: rgb(102, 102, 102);
 241     position: relative;
 242     top: 1px;
 243 }
 244
 245 .responsive-design-toolbar input[type='checkbox']:after {
 246     content: '';
 247     line-height: 10px;
 248     position: absolute;
 249     cursor: pointer;
 250     width: 12px;
 251     height: 12px;
 252     background: none;
 253 }
 254
 255 .responsive-design-toolbar input[type='checkbox']:checked:after {
 256     background: rgb(220, 220, 220);
 257 }
 258
 259 .responsive-design-toolbar input.error-input {
 260     color: red !important;
 261     text-decoration: line-through;
 262 }
 263
 264 .responsive-design-toolbar select {
 265     height: 18px;
 266     background-color: rgb(87, 87, 87);
 267     border: 0;
 268     margin-left: 10px;
 269     line-height: 16px;
 270 }
 271
 272 .responsive-design-toolbar input:focus {
 273     background-color: rgb(81, 81, 81);
 274 }
 275
 276 /* Toolbar icons */
 277
 278 .responsive-design-icon.status-bar-item > .glyph {
 279     background-color: rgb(180, 180, 180);
 280     -webkit-mask-image: url(Images/responsiveDesign.png);
 281     -webkit-mask-size: 112px 16px;
 282 }
 283
 284 .responsive-design-icon.status-bar-item {
 285     display: inline-block;
 286     width: 16px;
 287     height: 16px;
 288     position: relative;
 289     top: 3px;
 290 }
 291
 292 .responsive-design-icon.status-bar-item:disabled .glyph {
 293     opacity: 1 !important;
 294 }
 295
 296 @media (-webkit-min-device-pixel-ratio: 1.5) {
 297     .responsive-design-icon.status-bar-item > .glyph {
 298         -webkit-mask-image: url(Images/responsiveDesign_2x.png);
 299     }
 300 } /* media */
 301
 302 .responsive-design-toolbar input[type='checkbox']:after {
 303     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
 304     -webkit-mask-size: 320px 144px;
 305     -webkit-mask-position: -128px -110px;
 306 }
 307
 308 @media (-webkit-min-device-pixel-ratio: 1.5) {
 309     .responsive-design-toolbar input[type='checkbox']:after {
 310         -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
 311     }
 312 } /* media */
 313
 314 .responsive-design-icon-resolution.status-bar-item > .glyph {
 315     -webkit-mask-position: 0 0;
 316 }
 317
 318 .responsive-design-icon-dpr.status-bar-item > .glyph {
 319     -webkit-mask-position: -16px 0;
 320 }
 321
 322 .responsive-design-icon-swap.status-bar-item > .glyph {
 323     background-color: rgb(255, 170, 0);
 324     -webkit-mask-position: -32px 0;
 325     -webkit-appearance: none;
 326     padding: 0;
 327     border: 0;
 328 }
 329
 330 .responsive-design-icon-swap {
 331     margin-left: 1px;
 332 }
 333
 334 .responsive-design-icon-swap.status-bar-item:hover > .glyph {
 335     background-color: rgb(255, 180, 0);
 336 }
 337
 338 .responsive-design-icon-swap:active {
 339     opacity: 0.8;
 340 }
 341
 342 /* Buttons section */
 343
 344 .responsive-design-section-buttons {
 345     padding: 4px 0 0 0;
 346     background: rgb(17, 17, 17);
 347     border-right: 2px solid rgb(0, 0, 0);
 348 }
 349
 350 .responsive-design-section-buttons .status-bar-item {
 351     margin: 2px 0;
 352 }
 353
 354 .responsive-design-section-buttons .status-bar-item .glyph {
 355     background-color: white;
 356 }
 357
 358 .responsive-design-more-button-container {
 359     flex: auto;
 360     display: flex;
 361     justify-content: flex-end;
 362     align-items: flex-end;
 363     overflow: hidden;
 364 }
 365
 366 .responsive-design-more-button {
 367     -webkit-appearance: none;
 368     border: 0;
 369     background-color: transparent;
 370     color: white;
 371     opacity: 0.8;
 372     font-size: 16px;
 373     text-shadow: black 1px 1px;
 374 }
 375
 376 .responsive-design-more-button:hover {
 377     opacity: 1;
 378 }
 379
 380 .responsive-design-more-button:active {
 381     opacity: 0.8;
 382 }
 383
 384 /* Device section */
 385
 386 .responsive-design-section-device .responsive-design-section-decorator {
 387     background: linear-gradient(to bottom, rgb(255, 186, 68), rgb(255, 119, 0));
 388     margin-left: 0;
 389 }
 390
 391 .responsive-design-section-device select {
 392     width: 185px;
 393 }
 394
 395 .responsive-design-section-device input[type='text'],
 396 .responsive-design-section-device input[type='text']::-webkit-input-placeholder,
 397 .responsive-design-section-device select {
 398     color: rgb(255, 156, 0);
 399 }
 400
 401 .responsive-design-section-device input[type='checkbox']:checked:after {
 402     background: rgb(255, 156, 0);
 403 }
 404
 405 .responsive-design-device-select button {
 406     display: none !important;
 407 }
 408
 409 /* Network section */
 410
 411 .responsive-design-section-network select {
 412     width: 185px;
 413 }
 414
 415 .responsive-design-section-network input[type='text'] {
 416     width: 222px;
 417     margin-left: 5px;
 418     text-overflow: ellipsis;
 419 }
 420
 421 .responsive-design-section-network input[type='text'],
 422 .responsive-design-section-network input[type='text']::-webkit-input-placeholder,
 423 .responsive-design-section-network select {
 424     color: rgb(65, 175, 255);
 425 }
 426
 427 .responsive-design-section-network .responsive-design-section-decorator {
 428     background: linear-gradient(to bottom, rgb(77, 170, 243), rgb(0, 130, 255));
 429 }
 430
 431 /* Warning message */
 432
 433 .responsive-design-warning {
 434     background-color: rgb(252, 234, 156);
 435     color: rgb(34, 34, 34);
 436     position: absolute;
 437     left: 0;
 438     right: 0;
 439     top: 0;
 440     padding: 2px 4px;
 441     white-space: nowrap;
 442     display: flex;
 443     align-items: center;
 444     border-bottom: 1px solid rgb(171, 171, 171);
 445 }
 446
 447 .responsive-design-warning > span {
 448     flex: auto;
 449     padding-left: 3px;
 450     overflow: hidden;
 451 }
 452
 453 .responsive-design-warning > div {
 454     flex: none;
 455 }
 456
 457 .responsive-design-warning .disable-warning {
 458     margin-right: 5px;
 459     text-decoration: underline;
 460     cursor: pointer;
 461 }
 462
 463 .responsive-design-toggle-media-inspector .glyph {
 464     background-color: rgb(180, 180, 180);
 465     -webkit-mask-position: -128px -48px;
 466 }
 467
 468 .responsive-design-toolbar button.responsive-design-toggle-media-inspector.toggled-on .glyph:not(.shadow) {
 469     background-color: rgb(105, 194, 236) !important;
 470 }
 471
 472 /* Media query inspector */
 473
 474 .responsive-design-media-container {
 475     position: absolute;
 476     right: 0;
 477     top: 0;
 478     padding-bottom: 5px;
 479     overflow: hidden;
 480 }
 481
 482 /* Media query bars */
 483
 484 .media-inspector-marker-container {
 485     position: relative;
 486     height: 14px;
 487     margin: 2px 0;
 488 }
 489
 490 .media-inspector-marker {
 491     position: absolute;
 492     top: 1px;
 493     bottom: 1px;
 494     white-space: nowrap;
 495     border-radius: 2px;
 496 }
 497
 498 .media-inspector-marker-inactive {
 499     -webkit-filter: brightness(80%);
 500 }
 501
 502 .media-inspector-marker:hover {
 503     top: -1px;
 504     bottom: -1px;
 505     -webkit-filter: brightness(115%) !important;
 506 }
 507
 508 .media-inspector-marker-max-width {
 509     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));
 510     border-radius: 0 2px 2px 0;
 511     border-right: 2px solid rgb(171, 207, 255);
 512 }
 513
 514 .media-inspector-marker-min-max-width {
 515     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));
 516     border-radius: 2px;
 517     border-left: 2px solid rgb(80, 226, 40);
 518     border-right: 2px solid rgb(80, 226, 40);
 519 }
 520
 521 .media-inspector-marker-min-max-width:hover {
 522     z-index: 1;
 523 }
 524
 525 .media-inspector-marker-min-width {
 526     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));
 527     border-radius: 2px 0 0 2px;
 528     border-left: 2px solid rgb(255, 181, 142);
 529 }
 530
 531 /* Media query labels */
 532
 533 .media-inspector-marker:not(:hover) .media-inspector-marker-label-container {
 534     display: none;
 535 }
 536
 537 .media-inspector-marker-label-container {
 538     position: absolute;
 539 }
 540
 541 .media-inspector-marker-label-container-left {
 542     left: -2px;
 543 }
 544
 545 .media-inspector-marker-label-container-right {
 546     right: -2px;
 547 }
 548
 549 .media-inspector-marker-label {
 550     color: #eee;
 551     position: absolute;
 552     top: 1px;
 553     bottom: 0;
 554     font-size: 10px;
 555     text-shadow: rgba(0, 0, 0, 0.6) 1px 1px;
 556     pointer-events: none;
 557 }
 558
 559 .media-inspector-label-right {
 560     right: 4px;
 561 }
 562
 563 .media-inspector-label-left {
 564     left: 4px;
 565 }