| /* Copyright 2018 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. */ |
| |
| :host { |
| --card-box-height: 208px; |
| --card-box-width: 312px; |
| --card-rows: 3; |
| --card-spacing: 16px; /* Spacing between cards. */ |
| --dialog-height: 640px; |
| --highlight-card-box-width: 640px; |
| --subtitle-font-distance-to-baseline: 3px; |
| --subtitle-font-size: 13px; |
| --subtitle-line-height: 18px; |
| --title-font-distance-to-baseline: 7px; |
| --title-font-size: 28px; |
| --title-height: calc(84px + var(--title-font-distance-to-baseline)); |
| --subtitle-height: calc(var(--subtitle-line-height) |
| + var(--subtitle-font-distance-to-baseline) |
| + var(--subtitle-font-size)); |
| font-family: 'Google Sans', Roboto, sans-serif; |
| } |
| |
| #titleContainer { |
| height: var(--title-height); |
| } |
| |
| h1 { |
| color: var(--google-grey-900); |
| font-size: var(--title-font-size); |
| font-weight: normal; |
| margin: 0; |
| } |
| |
| /* Subtitle should have two lines of text. */ |
| #subTitleContainer { |
| color: var(--google-grey-900); |
| font-size: var(--subtitle-font-size); |
| height: var(--subtitle-height); |
| line-height: var(--subtitle-line-height); |
| padding-top: calc(32px - var(--title-font-distance-to-baseline) |
| - var(--subtitle-font-size)); |
| } |
| |
| #cardsWindow { |
| height: calc(var(--dialog-height) - var(--title-height) |
| - var(--subtitle-height)); |
| margin-top: calc(42px - var(--subtitle-font-distance-to-baseline)); |
| overflow: scroll; |
| padding: 0 10px; |
| width: var(--highlight-card-box-width); |
| } |
| |
| #cardsContainer { |
| align-content: space-between; |
| height: calc(var(--card-rows) * var(--card-box-height) |
| + var(--card-spacing) * (var(--card-rows) - 1)); |
| justify-content: space-between; |
| padding-bottom: 40px; |
| } |
| |
| #cardsContainer ::slotted(.card) { |
| height: fit-content; |
| margin: var(--card-margin); |
| } |