| /* |
| * Copyright 2014 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. |
| */ |
| |
| .responsive-design { |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .responsive-design-sliders-container { |
| position: absolute; |
| overflow: visible; |
| } |
| |
| .responsive-design-slider-width, |
| .responsive-design-slider-height { |
| flex: none; |
| justify-content: center; |
| } |
| |
| .responsive-design-slider-thumb { |
| border: 1px solid rgb(231, 231, 231); |
| background-color: lightgray; |
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); |
| background-repeat: no-repeat; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| flex: 0 1 100px; |
| } |
| |
| .responsive-design-slider-width .responsive-design-slider-thumb { |
| border-radius: 0 3px 3px 0; |
| border-left: none; |
| } |
| |
| .responsive-design-slider-height .responsive-design-slider-thumb { |
| border-radius: 0 0 3px 3px; |
| border-top: none; |
| } |
| |
| .responsive-design-thumb-handle { |
| content: url(Images/statusbarResizerHorizontal.png); |
| pointer-events: none; |
| } |
| |
| .responsive-design-slider-height .responsive-design-thumb-handle { |
| transform: rotate(90deg); |
| } |
| |
| /* Toolbar */ |
| |
| .responsive-design-toolbar { |
| display: flex; |
| flex: none; |
| background: linear-gradient(to bottom, rgb(64, 64, 64), rgb(58, 58, 58)); |
| color: rgb(255, 255, 255); |
| overflow: hidden; |
| border-bottom: 1px solid rgb(104, 104, 104); |
| } |
| |
| .responsive-design-separator { |
| flex: none; |
| width: 2px; |
| background-color: rgb(43, 43, 43); |
| margin: 2px; |
| } |
| |
| .responsive-design-section { |
| display: flex; |
| flex: none; |
| flex-direction: column; |
| white-space: nowrap; |
| align-items: stretch; |
| justify-content: flex-start; |
| padding: 0 10px; |
| } |
| |
| .responsive-design-section .status-bar-item .glyph.shadow { |
| background-color: black !important; |
| } |
| |
| |
| .responsive-design-section-separator { |
| height: 2px; |
| } |
| |
| .responsive-design-suite { |
| display: flex; |
| flex-direction: row; |
| padding-top: 2px; |
| padding-bottom: 2px; |
| color: rgb(180, 180, 180); |
| } |
| |
| .responsive-design-suite.responsive-design-suite-top { |
| color: rgb(255, 255, 255); |
| } |
| |
| .responsive-design-suite-separator { |
| flex: none; |
| width: 1px; |
| background-color: rgb(43, 43, 43); |
| margin: 0 3px; |
| } |
| |
| .responsive-design-suite > div:not(.responsive-design-suite-separator) { |
| flex: none; |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| justify-content: space-between; |
| height: 23px; |
| overflow: hidden; |
| } |
| |
| /* Toolbar controls */ |
| |
| .responsive-design-toolbar fieldset, |
| .responsive-design-toolbar p { |
| margin: 0; |
| border: 0; |
| padding: 0; |
| display: inline-block; |
| } |
| |
| .responsive-design-toolbar .field-error-message { |
| display: none; |
| } |
| |
| .responsive-design-toolbar label { |
| margin-right: 5px; |
| cursor: default !important; |
| } |
| |
| .responsive-design-toolbar input[type='text'] { |
| text-align: left; |
| background-color: transparent; |
| border: none; |
| margin: 0 1px 1px 0; |
| padding: 3px 2px; |
| } |
| |
| .responsive-design-toolbar input[type='text'].numeric { |
| text-align: center; |
| } |
| |
| .responsive-design-toolbar input:focus::-webkit-input-placeholder { |
| color: transparent !important; |
| } |
| |
| .responsive-design-toolbar fieldset:disabled input, |
| .responsive-design-toolbar fieldset:disabled button { |
| opacity: 0.7; |
| } |
| |
| .responsive-design-toolbar input[type='checkbox'] { |
| -webkit-appearance: none; |
| margin: auto 5px auto 0; |
| border: 1px solid rgb(45, 45, 45); |
| border-radius: 3px; |
| background-color: rgb(102, 102, 102); |
| position: relative; |
| top: 1px; |
| } |
| |
| .responsive-design-toolbar input[type='checkbox']:after { |
| content: ''; |
| line-height: 10px; |
| position: absolute; |
| cursor: pointer; |
| width: 12px; |
| height: 12px; |
| background: none; |
| } |
| |
| .responsive-design-toolbar input[type='checkbox']:checked:after { |
| background: rgb(220, 220, 220); |
| } |
| |
| .responsive-design-toolbar input.error-input { |
| color: red !important; |
| text-decoration: line-through; |
| } |
| |
| .responsive-design-toolbar select { |
| height: 18px; |
| background-color: rgb(81, 81, 81); |
| border: 0; |
| margin-left: 10px; |
| line-height: 16px; |
| } |
| |
| body.platform-mac .responsive-design-toolbar select { |
| position: relative; |
| top: 1px; |
| } |
| |
| .responsive-design-toolbar input:focus { |
| background-color: rgb(81, 81, 81); |
| } |
| |
| /* Toolbar icons */ |
| |
| .responsive-design-icon.status-bar-item > .glyph { |
| background-color: rgb(180, 180, 180); |
| -webkit-mask-image: url(Images/responsiveDesign.png); |
| -webkit-mask-size: 64px 16px; |
| } |
| |
| .responsive-design-icon.status-bar-item { |
| display: inline-block; |
| width: 16px; |
| height: 16px; |
| position: relative; |
| top: 4px; |
| } |
| |
| .responsive-design-icon.status-bar-item:disabled .glyph { |
| opacity: 1 !important; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .responsive-design-icon.status-bar-item > .glyph { |
| -webkit-mask-image: url(Images/responsiveDesign_2x.png); |
| } |
| } /* media */ |
| |
| .responsive-design-toolbar input[type='checkbox']:after { |
| -webkit-mask-image: url(Images/statusbarButtonGlyphs.png); |
| -webkit-mask-size: 320px 144px; |
| -webkit-mask-position: -128px -110px; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .responsive-design-toolbar input[type='checkbox']:after { |
| -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png); |
| } |
| } /* media */ |
| |
| .responsive-design-icon-resolution.status-bar-item > .glyph { |
| -webkit-mask-position: 0 0; |
| } |
| |
| .responsive-design-icon-dpr.status-bar-item > .glyph { |
| -webkit-mask-position: -16px 0; |
| } |
| |
| .responsive-design-icon-swap.status-bar-item > .glyph { |
| background-color: rgb(255, 170, 0); |
| -webkit-mask-position: -32px 0; |
| -webkit-appearance: none; |
| padding: 0; |
| border: 0; |
| } |
| |
| .responsive-design-icon-swap.status-bar-item:hover > .glyph { |
| background-color: rgb(255, 180, 0); |
| } |
| |
| .responsive-design-icon-swap:active { |
| opacity: 0.8; |
| } |
| |
| /* Buttons section */ |
| |
| .responsive-design-section-buttons { |
| padding: 0; |
| } |
| |
| .responsive-design-section-buttons .status-bar-item { |
| margin: 2px 0; |
| } |
| |
| .responsive-design-section-buttons .status-bar-item .glyph { |
| background-color: white; |
| } |
| |
| .responsive-design-more-button-container { |
| flex: auto; |
| display: flex; |
| justify-content: flex-end; |
| align-items: flex-end; |
| overflow: hidden; |
| } |
| |
| .responsive-design-more-button { |
| -webkit-appearance: none; |
| border: 0; |
| background-color: transparent; |
| color: white; |
| opacity: 0.8; |
| font-size: 16px; |
| text-shadow: black 1px 1px; |
| } |
| |
| .responsive-design-more-button:hover { |
| opacity: 1; |
| } |
| |
| .responsive-design-more-button:active { |
| opacity: 0.8; |
| } |
| |
| /* Device section */ |
| |
| .responsive-design-section-device .responsive-design-section-separator { |
| background: linear-gradient(to bottom, rgb(255, 186, 68), rgb(255, 119, 0)); |
| } |
| |
| .responsive-design-section-device select { |
| width: 180px; |
| } |
| |
| .responsive-design-section-device input[type='text'], |
| .responsive-design-section-device input[type='text']::-webkit-input-placeholder, |
| .responsive-design-section-device select { |
| color: rgb(255, 156, 0); |
| } |
| |
| .responsive-design-section-device input[type='checkbox']:checked:after { |
| background: rgb(255, 156, 0); |
| } |
| |
| /* Network section */ |
| |
| .responsive-design-section-network select { |
| width: 150px; |
| } |
| |
| .responsive-design-section-network input[type='text'] { |
| width: 192px; |
| } |
| |
| .responsive-design-section-network input[type='text'], |
| .responsive-design-section-network input[type='text']::-webkit-input-placeholder, |
| .responsive-design-section-network select { |
| color: rgb(65, 175, 255); |
| } |
| |
| .responsive-design-section-network .responsive-design-section-separator { |
| background: linear-gradient(to bottom, rgb(77, 170, 243), rgb(0, 130, 255)); |
| } |
| |
| /* Warning message */ |
| |
| .responsive-design-warning { |
| background-color: rgb(252, 234, 156); |
| color: #222; |
| position: absolute; |
| left: 0; |
| right: 0; |
| top: 0; |
| padding: 2px 4px; |
| white-space: nowrap; |
| display: flex; |
| align-items: center; |
| border-bottom: 1px solid rgb(171, 171, 171); |
| } |
| |
| .responsive-design-warning > span { |
| flex: auto; |
| padding-left: 3px; |
| overflow: hidden; |
| } |
| |
| .responsive-design-warning > div { |
| flex: none; |
| } |
| |
| .responsive-design-ruler-glasspane { |
| position: absolute; |
| left: 0px; |
| right: 0px; |
| top: 0px; |
| background-color: transparent; |
| } |
| |
| .responsive-design-toggle-media-inspector .glyph { |
| background-color: rgb(180, 180, 180); |
| -webkit-mask-position: -128px -48px; |
| } |
| |
| .responsive-design-toolbar button.responsive-design-toggle-media-inspector.toggled-on .glyph:not(.shadow) { |
| background-color: rgb(105, 194, 236) !important; |
| } |
| |
| /* media */ |
| |
| .view.media-inspector-view { |
| overflow-y: auto; |
| overflow-x: hidden; |
| background-color: rgb(0, 0, 0); |
| border-bottom: 1px solid rgb(163, 163, 163); |
| flex: none; |
| } |
| |
| .view.media-inspector-view-fixed-height { |
| height: 100px; |
| } |
| |
| .media-inspector-view::-webkit-scrollbar { |
| background: rgb(54, 54, 54); |
| } |
| |
| .media-inspector-view::-webkit-scrollbar-thumb { |
| background: rgb(94, 94, 94); |
| } |
| |
| .media-inspector-marker-container { |
| position: relative; |
| margin: 2px 0 2px 0; |
| } |
| |
| .media-inspector-min-width-label-container { |
| position: relative; |
| } |
| |
| .media-inspector-marker { |
| position: absolute; |
| top: 0px; |
| bottom: 0px; |
| white-space: nowrap; |
| } |
| |
| .media-inspector-marker-container:hover { |
| background-color: rgb(32, 32, 32); |
| } |
| |
| .media-inspector-marker-container:hover .media-inspector-marker { |
| -webkit-filter: brightness(125%); |
| } |
| |
| .media-inspector-marker-max-width { |
| background-color: rgba(111, 168, 220, 0.66); |
| border-right: 5px solid rgba(111, 168, 220, 0.86); |
| } |
| |
| .media-inspector-marker-min-max-width { |
| background-color: rgba(100, 200, 0, 0.66); |
| border-left: 5px solid rgba(100, 200, 0, 0.86); |
| border-right: 5px solid rgba(100, 200, 0, 0.86); |
| } |
| |
| .media-inspector-marker-min-width { |
| background-color: rgba(225, 124, 0, 0.66); |
| border-left: 5px solid rgba(225, 124, 0, 0.86); |
| } |
| |
| .media-inspector-marker-label { |
| position: absolute; |
| color: rgb(180, 180, 180); |
| } |
| |
| .media-inspector-min-label::after { |
| padding-left: 2px; |
| height: 6px; |
| width: 11px; |
| content: url(Images/graphLabelCalloutLeft.png); |
| -webkit-filter: invert(0.8); |
| } |
| |
| .media-inspector-max-label::before { |
| padding-right: 2px; |
| height: 6px; |
| content: url(Images/graphLabelCalloutRight.png); |
| -webkit-filter: invert(0.8); |
| } |
| |
| .media-inspector-threshold-serif { |
| position: absolute; |
| top: 0px; |
| bottom: 0px; |
| width: 5px; |
| margin-left: -2px; |
| } |
| |
| .media-inspector-threshold-serif::before { |
| content: "."; |
| color: transparent; |
| position: absolute; |
| left: 2px; |
| right: 2px; |
| top: 0px; |
| bottom: 0px; |
| background-color: rgba(225, 124, 0, 0.86); |
| } |
| |
| .media-inspector-threshold-serif:hover::before { |
| left: 1px; |
| right: 1px; |
| } |