UNPKG

chrome-devtools-frontend

Version:
307 lines (256 loc) • 5.95 kB
/* * Copyright (c) 2015 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. */ .sensors-view { padding: 12px; display: block; } .sensors-view input { width: 100%; max-width: 120px; margin: -5px 10px 0 0; text-align: end; } .sensors-view input[readonly] { background-color: var(--color-background-elevation-1); } .sensors-view fieldset { border: none; padding: 10px 0; flex: 0 0 auto; margin: 0; } .sensors-view fieldset[disabled] { opacity: 50%; } .orientation-axis-input-container input { max-width: 120px; } .sensors-view input:focus::-webkit-input-placeholder { color: transparent !important; /* stylelint-disable-line declaration-no-important */ } .sensors-view .chrome-select { width: 200px; } .sensors-group-title { width: 80px; line-height: 24px; } .sensors-group { display: flex; flex-wrap: wrap; margin-bottom: 10px; } .geo-fields { flex: 2 0 200px; } .latlong-group { display: flex; margin-bottom: 10px; } .latlong-title { width: 70px; } .timezone-error { margin-left: 10px; color: var(--legacy-input-validation-error); } /* Device Orientation */ .orientation-content { display: flex; flex-wrap: wrap; } .orientation-fields { margin-right: 10px; } .orientation-stage { --override-gradient-color-1: #e1f5fe; --override-gradient-color-2: #b0ebf3; --override-gradient-color-3: #def6f9; perspective: 700px; perspective-origin: 50% 50%; width: 160px; height: 150px; background: linear-gradient(var(--override-gradient-color-1) 0%, var(--override-gradient-color-1) 64%, var(--override-gradient-color-2) 64%, var(--override-gradient-color-3) 100%); transition: 0.2s ease opacity, 0.2s ease filter; overflow: hidden; margin-bottom: 10px; } .-theme-with-dark-background .orientation-stage, :host-context(.-theme-with-dark-background) .orientation-stage { --override-gradient-color-1: rgb(1 21 30); --override-gradient-color-2: rgb(12 71 79); --override-gradient-color-3: rgb(6 30 33); } .orientation-stage.disabled { filter: grayscale(); opacity: 50%; } .orientation-element, .orientation-element::before, .orientation-element::after { position: absolute; box-sizing: border-box; transform-style: preserve-3d; background: no-repeat; background-size: cover; backface-visibility: hidden; } .orientation-box { width: 62px; height: 122px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: rotate3d(1, 0, 0, 90deg); } .orientation-layer { width: 100%; height: 100%; transform-style: preserve-3d; } .orientation-box.is-animating, .is-animating .orientation-layer { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .orientation-front, .orientation-back { width: 62px; height: 122px; border-radius: 8px; } .orientation-front { background-image: var(--image-file-accelerometer-front); } .orientation-back { transform: rotateY(180deg) translateZ(8px); background-image: var(--image-file-accelerometer-back); } .orientation-left, .orientation-right { width: 8px; height: 106px; top: 8px; background-position: center center; } .orientation-left { left: -8px; transform-origin: right center; transform: rotateY(-90deg); background-image: var(--image-file-accelerometer-left); } .orientation-right { right: -8px; transform-origin: left center; transform: rotateY(90deg); background-image: var(--image-file-accelerometer-right); } .orientation-left::before, .orientation-left::after, .orientation-right::before, .orientation-right::after { content: ""; width: 8px; height: 6px; } .orientation-left::before, .orientation-left::after { background-image: var(--image-file-accelerometer-left); } .orientation-right::before, .orientation-right::after { background-image: var(--image-file-accelerometer-right); } .orientation-left::before, .orientation-right::before { top: -6px; transform-origin: center bottom; transform: rotateX(26deg); background-position: center top; } .orientation-left::after, .orientation-right::after { bottom: -6px; transform-origin: center top; transform: rotateX(-25deg); background-position: center bottom; } .orientation-top, .orientation-bottom { width: 50px; height: 8px; left: 8px; background-position: center center; } .orientation-top { top: -8px; transform-origin: center bottom; transform: rotateX(90deg); background-image: var(--image-file-accelerometer-top); } .orientation-bottom { bottom: -8px; transform-origin: center top; transform: rotateX(-90deg); background-image: var(--image-file-accelerometer-bottom); } .orientation-top::before, .orientation-top::after, .orientation-bottom::before, .orientation-bottom::after { content: ""; width: 8px; height: 8px; } .orientation-top::before, .orientation-top::after { background-image: var(--image-file-accelerometer-top); } .orientation-bottom::before, .orientation-bottom::after { background-image: var(--image-file-accelerometer-bottom); } .orientation-top::before, .orientation-bottom::before { left: -6px; transform-origin: right center; transform: rotateY(-26deg); background-position: left center; } .orientation-top::after, .orientation-bottom::after { right: -6px; transform-origin: left center; transform: rotateY(26deg); background-position: right center; } .orientation-axis-input-container { margin-bottom: 10px; } .orientation-reset-button { min-width: 80px; } fieldset.device-orientation-override-section { margin: 0; display: flex; } .panel-section-separator { height: 2px; margin-bottom: 8px; background: var(--color-background-elevation-2); } button.text-button { margin: 4px 0 0 10px; } @media (forced-colors: active) { .sensors-view fieldset[disabled] { opacity: 100%; } } .chrome-select-label { margin-bottom: 16px; }