/* * Copyright 2021 The Chromium Authors * Use of this source code is governed by a BSD-style license that can be * found in the LICENSE file. */ body { --arrow-width: 15px; --arrow-height: 8px; --shadow-up: 5px; --shadow-down: -5px; --shadow-direction: var(--shadow-up); --arrow-down: polygon(0 0, 100% 0, 50% 100%); --arrow-up: polygon(50% 0, 0 100%, 100% 100%); } .px { color: rgb(128 128 128); } #element-title { position: absolute; z-index: 10; } /* Material */ .tooltip-content { position: absolute; user-select: none; background-color: #fff; padding: 5px 8px; border: 1px solid #fff; border-radius: 3px; box-sizing: border-box; min-width: 100px; max-width: min(300px, 100% - 4px); z-index: 2; background-clip: padding-box; will-change: transform; text-rendering: optimizelegibility; pointer-events: none; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 35%)); } .tooltip-content::after { content: ''; background: #fff; width: var(--arrow-width); height: var(--arrow-height); clip-path: var(--arrow); position: absolute; top: var(--arrow-top); left: var(--arrow-left); visibility: var(--arrow-visibility); } .element-info-section { margin-top: 12px; margin-bottom: 6px; } .section-name { color: #333; font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; line-height: 12px; } .element-info { display: flex; flex-direction: column; } .element-info-header { display: flex; align-items: center; } .element-info-body { display: flex; flex-direction: column; padding-top: 2px; margin-top: 2px; } .element-info-row { display: flex; line-height: 19px; } .separator-container { display: flex; align-items: center; flex: auto; margin-left: 7px; } .separator { border-top: 1px solid #ddd; width: 100%; } .element-info-name { flex-shrink: 0; color: #666; } .element-info-gap { flex: auto; } .element-info-value-color { display: flex; color: rgb(48 57 66); margin-left: 10px; align-items: baseline; } .a11y-icon { width: 16px; height: 16px; background-repeat: no-repeat; display: inline-block; } .element-info-value-contrast { display: flex; align-items: center; text-align: right; color: rgb(48 57 66); margin-left: 10px; } .element-info-value-contrast .a11y-icon { margin-left: 8px; } .element-info-value-icon { display: flex; align-items: center; } .element-info-value-text { text-align: right; color: rgb(48 57 66); margin-left: 10px; align-items: baseline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .color-swatch { display: flex; margin-right: 2px; width: 10px; height: 10px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=='); line-height: 10px; } .color-swatch-inner { flex: auto; border: 1px solid rgb(128 128 128 / 60%); } .element-layout-type { margin-right: 10px; width: 16px; height: 16px; } .element-layout-type.grid { background-image: url('data:image/svg+xml,'); } .element-layout-type.flex { background-image: url('data:image/svg+xml,'); } .element-description { flex: 1 1; font-weight: bold; overflow-wrap: break-word; word-break: break-all; } .dimensions { color: var(--sys-color-outline); text-align: right; margin-left: 10px; } .material-node-width { margin-right: 2px; } .material-node-height { margin-left: 2px; } .material-tag-name { /* Keep this in sync with inspectorCommon.css (--override-dom-tag-name-color) */ color: rgb(136 18 128); } .material-class-name, .material-node-id { /* Keep this in sync with inspectorCommon.css (.webkit-html-attribute-value) */ color: rgb(26 26 166); } .contrast-text { width: 16px; height: 16px; text-align: center; line-height: 16px; margin-right: 8px; border: 1px solid rgb(0 0 0 / 10%); padding: 0 1px; } .a11y-icon-not-ok { background-image: url('data:image/svg+xml,'); } .a11y-icon-warning { background-image: url('data:image/svg+xml,'); } .a11y-icon-ok { background-image: url('data:image/svg+xml,'); } @media (forced-colors: active) { :root, body { background-color: transparent; forced-color-adjust: none; } .tooltip-content { border-color: Highlight; background-color: canvas; forced-color-adjust: none; } .tooltip-content::after { background-color: Highlight; } .color-swatch-inner, .contrast-text, .separator { border-color: Highlight; } .section-name { color: Highlight; } .dimensions, .element-info-name, .element-info-value-color, .element-info-value-contrast, .element-info-value-icon, .element-info-value-text, .material-tag-name, .material-class-name, .material-node-id { color: canvastext; } }