/* Copyright 2022 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* #css_wrapper_metadata_start
* #type=style
* #import=chrome://resources/ash/common/navigation_shared_vars.css.js
* #import=chrome://resources/ash/common/cr_elements/cros_color_overrides.css.js
* #import=chrome://resources/ash/common/cr_elements/cr_shared_style.css.js
* #import=chrome://resources/ash/common/cr_elements/cr_shared_vars.css.js
* #include=cr-shared-style cros-color-overrides
* #css_wrapper_metadata_end */
:host {
--chart-system-line-color: var(--cros-color-warning);
--chart-system-gradient-color: var(--google-yellow-50);
--chart-user-line-color: var(--cros-color-prominent);
--chart-user-gradient-color: var(--google-blue-50);
--diagnostics-box-shadow: var(--cros-elevation-1-shadow);
--diagnostics-box-shadow-elevation-2: var(--cros-elevation-2-shadow);
--diagnostics-card-bg-color: var(--cros-bg-color);
--diagnostics-chip-bg-color: var(--cros-bg-color-dropped-elevation-2);
--diagnostics-google-sans-font-family: "Google Sans", sans-serif;
--diagnostics-roboto-font-family: Roboto, sans-serif;
--diagnostics-regular-font-weight: 400;
--diagnostics-medium-font-weight: 500;
}
:host-context(body.jelly-enabled) {
--chart-system-line-color: var(--cros-sys-tertiary);
--chart-system-gradient-color: var(--cros-sys-tertiary_container);
--chart-user-line-color: var(--cros-sys-primary);
--chart-user-gradient-color: var(--cros-sys-primary_container);
--diagnostics-box-shadow:
0 1px 2px var(--cros-shadow-color-key),
0 1px 3px var(--cros-shadow-color-ambient);
--diagnostics-box-shadow-elevation-2:
0 1px 2px var(--cros-shadow-color-key),
0 2px 6px var(--cros-shadow-color-ambient);
--diagnostics-card-bg-color: var(--cros-sys-app_base);
--diagnostics-chip-bg-color: var(--cros-sys-surface_variant);
}
:host-context(body.jelly-enabled) .diagnostics-chip {
color: var(--cros-sys-on_surface_variant);
}
:host-context(body.jelly-enabled) .grey-container {
background-color: var(--cros-sys-app_base_shaded);
}
:host-context(body.jelly-enabled) cr-button {
font: var(--cros-button-2-font);
}
:host-context(body.jelly-enabled) cr-button.action-button {
font: var(--cros-button-1-font);
}
:host-context(body.jelly-enabled) cr-dialog::part(dialog) {
border-radius: 20px;
}
hr {
border: 0;
border-top: 1px solid var(--cros-separator-color);
display: block;
height: 1px;
margin: 0;
padding: 0;
position: relative;
top: 2px;
}
/* Style overrides variables with CrOS colors to match classic button.
Action buttons are primary and regular buttons are secondary. Diagnostics
only uses secondary, thus action variables are not overridden. */
cr-button {
--border-color: var(--cros-button-stroke-color-secondary);
--disabled-bg: var(--cros-button-background-color-secondary-disabled);
--disabled-border-color: var(--cros-button-stroke-color-secondary-disabled);
--focus-shadow-color: var(--cros-focus-ring-color);
--ink-color: var(--cros-button-label-color-secondary);
--hover-bg-color: var(--cros-button-background-color-secondary-hover);
--hover-border-color: var(--cros-button-stroke-color-secondary-hover);
--text-color: var(--cros-button-label-color-secondary);
}
cr-toast {
--cr-toast-background: var(--cros-toast-background-color);
--cr-toast-text-color: var(--cros-toast-text-color);
}
.card-width {
width: 100%;
}
.data-point-margin-end {
margin-inline-end: 20px;
}
.data-point-margin-start {
margin-inline-start: 20px;
}
data-point[orientation=horizontal] {
margin: 9px 0;
}
data-point[orientation=horizontal]:first-of-type {
margin-top: 8px;
}
data-point[orientation=horizontal]:last-of-type {
margin-bottom: 8px;
}
paper-tooltip {
--paper-tooltip-min-width: auto;
line-height: 18px;
}
.data-point-container {
display: flex;
flex-direction: column;
width: 40%;
}
.diagnostics-cards-container {
align-items: center;
display: flex;
flex-direction: column;
width: var(--content-container-width);
}
.diagnostics-cards-container-nav {
align-items: center;
display: flex;
flex-direction: column;
max-width: var(--card-container-max-width);
width: var(--container-max-width-nav);
}
:host-context(body.jelly-enabled) .diagnostics-chip {
font: var(--cros-body-2-font);
}
.diagnostics-chip {
background-color: var(--diagnostics-chip-bg-color);
border-radius: 16px;
color: var(--cros-text-color-secondary);
font-family: var(--diagnostics-roboto-font-family);
font-size: 13px;
font-weight: var(--diagnostics-regular-font-weight);
height: 20px;
line-height: 20px;
padding: 0 8px;
}
.divider {
border-inline-start: 1px solid var(--cros-separator-color);
height: 32px;
padding-inline: 16px;
position: relative;
top: 24%;
}
.divider-horizontal {
align-self: center;
border-inline-start: 1px solid var(--cros-separator-color);
height: var(--divider-horizontal-height, 94px);
margin: 10px 20px;
}
.grey-container {
background-color: rgba(var(--cros-bg-color-dropped-elevation-2-rgb), .38);
border-radius: 4px;
padding: 8px 20px;
}
.horizontal-data-point-container {
display: grid;
grid-template-columns: 1fr 40px 1fr;
margin: 20px 0;
}
.horizontal-data-point-container .data-point-container {
width: max-content;
}
.link-text {
color: var(--cros-color-prominent);
cursor: pointer;
}
.spacing {
margin-bottom: 16px;
margin-top: 12px;
padding-inline: 20px;
}
:host-context(body.jelly-enabled) .diagnostics-caution-banner-font {
font: var(--cros-body-1-font);
}
.diagnostics-caution-banner-font {
color: var(--cros-text-color-primary);
font-family: var(--diagnostics-roboto-font-family);
font-size: 14px;
font-weight: var(--diagnostics-regular-font-weight);
}
@media (min-width:600px) {
:host {
--container-padding: 24px;
--content-container-width: 552px;
--chart-width: 452px;
--chart-width-nav: 452px;
--data-point-container-padding: 44px;
--card-container-max-width: 650px;
}
}
@media (min-width: 650px) {
:host {
--chart-width-nav: 502px;
}
}
@media (min-width:769px) {
:host {
--chart-width-nav: 420px;
}
}
@media (min-width: 789px) {
:host {
--chart-width-nav: 440px;
}
}
@media (min-width: 809px) {
:host {
--chart-width-nav: 460px;
}
}
@media (min-width: 829px) {
:host {
--chart-width-nav: 480px;
}
}
@media (min-width: 849px) {
:host {
--chart-width-nav: 500px;
}
}
@media (min-width: 869px) {
:host {
--chart-width-nav: 520px;
}
}
@media (min-width: 900px) {
:host {
--chart-width-nav: 540px;
}
}
@media (min-width: 925px) {
:host {
--chart-width-nav: 560px;
}
}
@media (min-width:768px) {
:host {
--container-padding: 64px;
--content-container-width: 640px;
--chart-width: 540px;
--data-point-container-padding: 64px;
}
}
@media (min-width:960px) {
:host {
--container-padding: 160px;
--content-container-width: 640px;
--chart-width: 540px;
--chart-width-nav: 540px;
--data-point-container-padding: 64px;
}
}
@media (min-width:1280px) {
:host {
--container-padding: 160px;
--content-container-width: 680px;
--chart-width: 580px;
--chart-width-nav: 620px;
--data-point-container-padding: 64px;
--card-container-max-width: 720px;
}
}
@media (min-width:1440px) {
:host {
--container-padding: 360px;
--content-container-width: 720px;
--chart-width: 620px;
--data-point-container-padding: 64px;
}
}
@media (prefers-color-scheme: dark) {
:host {
--chart-system-gradient-color: rgba(var(--google-yellow-300-rgb), 0.2);
--chart-user-gradient-color: rgba(var(--google-blue-300-rgb), 0.2);
--diagnostics-card-bg-color: var(--cros-bg-color-elevation-1);
--diagnostics-chip-bg-color: var(--cros-bg-color-elevation-3);
}
:host-context(body.jelly-enabled) {
--diagnostics-card-bg-color: var(--cros-sys-base_elevated);
--diagnostics-chip-bg-color: var(--cros-sys-base_elevated);
}
:host-context(body.jelly-enabled) .grey-container {
background-color: var(--cros-sys-app_base_shaded);
}
.grey-container {
background-color: var(--cros-bg-color-dropped-elevation-2);
}
}
Codebase Browser
chromium