| /* |
| * 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 { |
| position: relative; |
| background-color: rgb(0, 0, 0); |
| overflow: hidden; |
| } |
| |
| .responsive-design-view { |
| overflow: hidden; |
| } |
| |
| .responsive-design-canvas { |
| pointer-events: none; |
| } |
| |
| .responsive-design-sliders-container { |
| position: absolute; |
| overflow: visible; |
| } |
| |
| .responsive-design-generic-outline-container { |
| position: absolute; |
| overflow: hidden; |
| top: 0; |
| left: 0; |
| right: -19px; |
| bottom: -19px; |
| } |
| |
| .responsive-design-generic-outline { |
| position: absolute; |
| top: -10px; |
| left: -10px; |
| right: 5px; |
| bottom: 5px; |
| border-radius: 8px; |
| background-color: rgb(51, 51, 51); |
| box-shadow: rgb(20, 20, 20) 3px 3px 4px; |
| } |
| |
| .responsive-design-slider-width { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| right: -14px; |
| width: 14px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .responsive-design-slider-height { |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: -14px; |
| height: 14px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .responsive-design-slider-corner { |
| position: absolute; |
| right: -14px; |
| width: 14px; |
| bottom: -14px; |
| height: 14px; |
| } |
| |
| .responsive-design-thumb-handle { |
| content: url(Images/toolbarResizerHorizontal.png); |
| pointer-events: none; |
| } |
| |
| .responsive-design-slider-height .responsive-design-thumb-handle { |
| transform: rotate(90deg); |
| } |
| |
| .responsive-design-page-container { |
| background-color: #171717; |
| } |
| |
| .responsive-design-page-container-image { |
| position: absolute;; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .responsive-design-page-scale-container { |
| position: absolute !important; |
| top: 0; |
| right: 0; |
| padding: 10px; |
| background-color: rgba(0, 0, 0, 0.3); |
| align-items: center; |
| } |
| |
| .responsive-design-page-scale-label { |
| display: block; |
| height: 20px; |
| margin: 0 4px; |
| padding-top: 3px; |
| color: white; |
| cursor: default !important; |
| } |
| |
| .responsive-design-page-scale-container .responsive-design-page-scale-button > .glyph { |
| display: block; |
| width: 18px; |
| height: 18px; |
| border: 1px solid transparent; |
| border-radius: 2px; |
| } |
| |
| .responsive-design-page-scale-container .responsive-design-page-scale-button:not(:disabled):hover { |
| box-shadow: rgb(255, 255, 255) 0 0 3px; |
| } |
| |
| .responsive-design-page-scale-container .responsive-design-page-scale-button { |
| border: none; |
| background-color: transparent; |
| padding: 2px 0 0 0; |
| } |
| |
| .responsive-design-page-scale-container .responsive-design-page-scale-button > .glyph { |
| background-color: rgb(180, 180, 180); |
| -webkit-mask-image: url(Images/responsiveDesign.png); |
| -webkit-mask-size: 112px 16px; |
| opacity: 1; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .responsive-design-page-scale-container .responsive-design-page-scale-button > .glyph { |
| -webkit-mask-image: url(Images/responsiveDesign_2x.png); |
| } |
| } /* media */ |
| |
| .responsive-design-page-scale-increase > .glyph { |
| -webkit-mask-position: -80px 0; |
| } |
| |
| .responsive-design-page-scale-decrease > .glyph { |
| -webkit-mask-position: -96px 0; |
| } |
| |
| /* Toolbar */ |
| |
| .responsive-design-toolbar { |
| display: flex; |
| flex: none; |
| background: linear-gradient(to bottom, rgb(83, 81, 81), rgb(59, 59, 59)); |
| color: rgb(255, 255, 255); |
| overflow: hidden; |
| border-bottom: 1px solid rgb(71, 71, 71); |
| } |
| |
| .responsive-design-separator { |
| flex: none; |
| width: 3px; |
| background-color: rgb(46, 46, 46); |
| border-right: 1px solid rgb(75, 75, 75); |
| } |
| |
| .responsive-design-section { |
| display: flex; |
| flex: none; |
| flex-direction: column; |
| white-space: nowrap; |
| align-items: stretch; |
| justify-content: flex-start; |
| padding-top: 1px; |
| } |
| |
| .responsive-design-section-decorator { |
| height: 2px; |
| margin-left: -2px; |
| margin-right: -1px; |
| position: relative; |
| } |
| |
| .responsive-design-suite { |
| display: flex; |
| flex-direction: row; |
| padding: 2px 11px; |
| 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 6px; |
| } |
| |
| .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 { |
| cursor: default !important; |
| margin: 0 2px; |
| } |
| |
| .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.error-input { |
| color: red !important; |
| text-decoration: line-through; |
| } |
| |
| .responsive-design-toolbar select { |
| height: 18px; |
| background-color: rgb(87, 87, 87); |
| border: 0; |
| margin-left: 10px; |
| line-height: 16px; |
| } |
| |
| .responsive-design-toolbar input:focus { |
| background-color: rgb(81, 81, 81); |
| } |
| |
| /* Toolbar icons */ |
| |
| .responsive-design-icon { |
| background-color: rgb(180, 180, 180); |
| -webkit-mask-image: url(Images/responsiveDesign.png); |
| -webkit-mask-size: 112px 16px; |
| } |
| |
| .responsive-design-icon { |
| display: inline-block; |
| width: 16px; |
| height: 16px; |
| position: relative; |
| top: 3px; |
| } |
| |
| div.responsive-design-icon:disabled { |
| opacity: 1 !important; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .responsive-design-icon { |
| -webkit-mask-image: url(Images/responsiveDesign_2x.png); |
| } |
| } /* media */ |
| |
| .responsive-design-icon-resolution { |
| -webkit-mask-position: 0 0; |
| } |
| |
| .responsive-design-icon-dpr { |
| -webkit-mask-position: -16px 0; |
| } |
| |
| .responsive-design-icon-swap { |
| background-color: rgb(255, 170, 0); |
| -webkit-mask-position: -32px 0; |
| -webkit-appearance: none; |
| padding: 0; |
| border: 0; |
| } |
| |
| .responsive-design-icon-swap { |
| margin-left: 1px; |
| top: 4px; |
| } |
| |
| .responsive-design-icon-swap:hover { |
| background-color: rgb(255, 180, 0); |
| } |
| |
| .responsive-design-icon-swap:active { |
| opacity: 0.8; |
| } |
| |
| /* Buttons section */ |
| |
| .responsive-design-section-buttons { |
| padding: 4px 0 0 0; |
| background: rgb(17, 17, 17); |
| } |
| |
| .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-decorator { |
| background: linear-gradient(to bottom, rgb(255, 186, 68), rgb(255, 119, 0)); |
| margin-left: 0; |
| } |
| |
| .responsive-design-section-device .device-select { |
| width: 140px; |
| } |
| |
| .responsive-design-section-device .mode-container { |
| display: inline-block; |
| width: 116px; |
| padding: 0 10px; |
| } |
| |
| .responsive-design-section-device .mode-select select { |
| width: 82px; |
| } |
| |
| .responsive-design-section-device .mode-select label { |
| margin-left: 4px; |
| color: rgb(255, 156, 0); |
| position: relative; |
| top: 1px; |
| } |
| |
| .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 .responsive-design-section-decorator { |
| background: linear-gradient(to bottom, rgb(77, 170, 243), rgb(0, 130, 255)); |
| } |
| |
| .responsive-design-section-network .responsive-design-suite a { |
| height: 20px; |
| background-color: transparent; |
| border: 0; |
| line-height: 16px; |
| color: rgb(66, 175, 255); |
| cursor: pointer; |
| border-radius: 2px; |
| text-decoration: underline; |
| } |
| |
| /* Warning message */ |
| |
| .responsive-design-warning { |
| position: absolute; |
| left: 0; |
| right: 0; |
| top: 0; |
| overflow: hidden; |
| border-bottom: 1px solid rgb(187, 187, 187); |
| } |
| |
| /* Media query inspector */ |
| |
| .responsive-design-media-container { |
| position: absolute; |
| right: 0; |
| top: 0; |
| padding-bottom: 5px; |
| overflow: hidden; |
| } |