chrome-devtools-frontend
Version:
Chrome DevTools UI
307 lines (256 loc) • 5.95 kB
CSS
/*
* 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 ; /* 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;
}