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