| <link rel="stylesheet" |
| href="chrome://resources/chromeos/colors/cros_colors.generated.css"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> |
| <link rel="stylesheet" href="chrome://resources/css/md_colors.css"> |
| <template> |
| <style include="cr-shared-style diagnostics-fonts"> |
| :host { |
| --diagnostics-box-shadow: var(--cr-card-shadow); |
| --diagnostics-box-shadow-elevation-2: var(--cr-elevation-2); |
| } |
| |
| html { |
| background-color: var(--cros-bg-color); |
| } |
| |
| .card-width { |
| width: 100%; |
| } |
| |
| .data-point-margin-end { |
| margin-right: 20px; |
| } |
| |
| .data-point-margin-start { |
| margin-left: 20px; |
| } |
| |
| 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; |
| padding-inline: var(--container-padding); |
| width: var(--content-container-width); |
| } |
| |
| .diagnostics-chip { |
| @apply --diagnostics-overview-font; |
| background-color: var(--google-grey-200); |
| border-radius: 16px; |
| height: 20px; |
| line-height: 20px; |
| padding: 0px 8px; |
| } |
| |
| .divider { |
| border-left: 1px solid var(--google-grey-200); |
| height: 32px; |
| padding-inline: 16px; |
| position: relative; |
| top: 24%; |
| } |
| |
| .divider-horizontal { |
| align-self: center; |
| border-left: 1px solid var(--google-grey-200); |
| height: 94px; |
| margin: 10px 0;; |
| } |
| |
| .grey-container { |
| background-color: rgba(var(--google-grey-200-rgb), .38); |
| border-radius: 4px; |
| padding: 8px 20px; |
| } |
| |
| .horizontal-data-point-container { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 12px; |
| } |
| |
| .link-text { |
| color: var(--google-blue-600); |
| cursor: pointer; |
| } |
| |
| @media (min-width:600px) { |
| :host { |
| --container-padding: 24px; |
| --content-container-width: 552px; |
| --chart-width: 452px; |
| --data-point-container-padding: 44px; |
| } |
| } |
| |
| @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; |
| --data-point-container-padding: 64px; |
| } |
| } |
| |
| @media (min-width:1280px) { |
| :host { |
| --container-padding: 160px; |
| --content-container-width: 680px; |
| --chart-width: 580px; |
| --data-point-container-padding: 64px; |
| } |
| } |
| |
| @media (min-width:1440px) { |
| :host { |
| --container-padding: 360px; |
| --content-container-width: 720px; |
| --chart-width: 620px; |
| --data-point-container-padding: 64px; |
| } |
| } |
| </style> |
| </template> |