| <link rel="import" href="../html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| |
| <!-- Common css variables for Material Design WebUI. --> |
| <custom-style> |
| <style is="custom-style"> |
| html { |
| --google-blue-50: #E8F0FE; |
| --google-blue-600-rgb: 26, 115, 232; |
| --google-blue-600: rgb(var(--google-blue-600-rgb)); |
| --google-blue-900-rgb: 13, 71, 161; |
| --google-grey-200: #E8EAED; |
| --google-grey-400: #BDC1C6; |
| --google-grey-600-rgb: 128, 134, 139; |
| --google-grey-600: rgb(var(--google-grey-600-rgb)); |
| |
| /* -refresh differentiate from polymer's color.html. */ |
| --google-green-refresh-700: #188038; |
| --google-grey-refresh-100: #F1F3F4; |
| --google-grey-refresh-300: #DADCE0; |
| --google-grey-refresh-700: #5F6368; |
| --google-grey-800-rgb: 60, 64, 67; |
| --google-grey-800: rgb(var(--google-grey-800-rgb)); |
| --google-grey-900: #202124; |
| --google-red-600: #D93025; |
| |
| --cr-primary-text-color: var(--google-grey-900); |
| --cr-secondary-text-color: var(--google-grey-refresh-700); |
| |
| --cr-card-background-color: white; |
| --cr-card-elevation: { |
| box-shadow: rgba(var(--google-grey-800-rgb), .3) 0 1px 2px 0, |
| rgba(var(--google-grey-800-rgb), .15) 0 1px 3px 1px; |
| } |
| |
| --cr-focused-item-color: var(--google-grey-300); |
| --cr-form-field-label-color: var(--google-grey-refresh-700); |
| --cr-link-color: var(--google-blue-700); |
| --cr-menu-background-color: white; |
| --cr-menu-background-focus-color: var(--google-grey-200); |
| --cr-menu-shadow: 0 2px 6px var(--paper-grey-500); |
| --cr-section-text-color: var(--google-grey-refresh-700); |
| --cr-separator-color: rgba(0, 0, 0, .06); |
| --cr-title-text-color: rgb(90, 90, 90); |
| --cr-toggle-color: var(--google-blue-500); |
| } |
| |
| html[dark] { |
| --dark-primary-color: rgba(255, 255, 255, .87); |
| --dark-secondary-color: rgba(255, 255, 255, .6); |
| |
| --cr-primary-text-color: var(--dark-primary-color); |
| --cr-secondary-text-color: var(--dark-secondary-color); |
| |
| --cr-card-background-color: var(--google-grey-900); |
| --cr-card-elevation: { |
| background-color: rgba(255, 255, 255, .04); |
| box-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0, |
| rgba(0, 0, 0, .15) 0 4px 8px 3px; |
| } |
| |
| /* TODO(dbeam): form-field-label, {section,title}-text, & toggle colors. */ |
| |
| --cr-form-field-label-color: var(--dark-secondary-color); |
| --cr-link-color: var(--google-blue-300); |
| --cr-menu-background-color: var(--google-grey-900); |
| --cr-menu-background-focus-color: rgba(var(--google-grey-800-rgb), .6); |
| --cr-menu-background-sheen: rgba(255, 255, 255, .06); /* Only dark mode. */ |
| --cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0, |
| rgba(0, 0, 0, .15) 0 2px 6px 2px; |
| --cr-separator-color: var(--google-grey-refresh-700); |
| } |
| |
| /* Don't use color values past this point. Instead, create a variable that's |
| * set for both light and dark modes and use a single variable below. */ |
| |
| html { |
| --cr-actionable: { |
| cursor: pointer; |
| } |
| |
| --cr-button-edge-spacing: 12px; |
| |
| /* Spacing between policy (controlledBy) indicator and control. */ |
| --cr-controlled-by-spacing: 24px; |
| |
| /* The inner icon is 20px in size. The button has 8px * 2 padding. */ |
| --cr-icon-ripple-size: 36px; |
| --cr-icon-ripple-padding: 8px; |
| |
| --cr-icon-size: 20px; |
| |
| --cr-icon-height-width: { |
| height: var(--cr-icon-size); |
| width: var(--cr-icon-size); |
| } |
| |
| --cr-icon-button-margin-start: 16px; |
| |
| --cr-icon-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1); |
| |
| /* Common properties for WebUI pages. */ |
| --cr-page-host: { |
| color: var(--cr-primary-text-color); |
| line-height: 154%; /* Apply 20px default line-height to all text. */ |
| overflow: hidden; /* Prevent double scroll bar bugs. */ |
| user-select: text; |
| } |
| |
| --cr-paper-icon-button-margin: { |
| /* Shift button so ripple overlaps the end of the row. */ |
| margin-inline-end: var(--cr-icon-ripple-margin); |
| margin-inline-start: var(--cr-icon-button-margin-start); |
| } |
| |
| --cr-primary-text: { |
| color: var(--cr-primary-text-color); |
| line-height: 154%; /* 20px. */ |
| } |
| |
| --cr-secondary-text: { |
| color: var(--cr-secondary-text-color); |
| font-weight: 400; |
| } |
| |
| /* TODO (scottchen): re-implement with paddings instead; */ |
| /* These are used for row items such as radio buttons, check boxes, list |
| * items etc. */ |
| --cr-section-min-height: 48px; |
| --cr-section-two-line-min-height: 64px; |
| --cr-section-three-line-min-height: 84px; |
| |
| --cr-section-padding: 20px; |
| --cr-section-vertical-padding: 12px; |
| --cr-section-indent-width: 40px; |
| --cr-section-indent-padding: calc( |
| var(--cr-section-padding) + var(--cr-section-indent-width)); |
| |
| --cr-section: { |
| align-items: center; |
| border-top: var(--cr-separator-line); |
| display: flex; |
| min-height: var(--cr-section-min-height); |
| padding: 0 var(--cr-section-padding); |
| } |
| |
| --cr-text-elide: { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| --cr-title-text: { |
| color: var(--cr-title-text-color); |
| font-size: 107.6923%; /* Go to 14px from 13px. */ |
| font-weight: 500; |
| } |
| |
| --cr-section-text: { |
| color: var(--cr-section-text-color); |
| font-size: 100%; /* Likely to be 13px. */ |
| font-weight: 500; |
| } |
| |
| --cr-tooltip: { |
| font-size: 92.31%; /* Effectively 12px if the host default is 13px. */ |
| font-weight: 500; |
| max-width: 330px; |
| min-width: 200px; |
| padding: 10px 8px; |
| } |
| |
| --cr-selectable-focus: { |
| background-color: var(--cr-focused-item-color); |
| outline: none; |
| } |
| --cr-separator-height: 1px; |
| --cr-separator-line: var(--cr-separator-height) solid |
| var(--cr-separator-color); |
| |
| --cr-toolbar-overlay-animation-duration: 150ms; |
| |
| --cr-container-shadow: { |
| box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, .4); |
| height: 6px; |
| left: 0; |
| margin-bottom: -6px; |
| opacity: 0; |
| pointer-events: none; |
| position: relative; |
| right: 0; |
| top: 0px; |
| transition: opacity 500ms; |
| z-index: 1; |
| } |
| |
| --cr-container-shadow-max-opacity: 1; |
| |
| /** MD Refresh Styles */ |
| --cr-card-border-radius: 4px; |
| --cr-disabled-opacity: .38; |
| --cr-form-field-bottom-spacing: 16px; |
| --cr-form-field-label-font-size: .625rem; |
| --cr-form-field-label-height: 1em; |
| --cr-form-field-label-line-height: 1em; |
| --cr-form-field-label: { |
| color: var(--cr-form-field-label-color); |
| display: block; |
| font-size: var(--cr-form-field-label-font-size); |
| font-weight: 500; |
| letter-spacing: .4px; |
| line-height: var(--cr-form-field-label-line-height); |
| margin-bottom: 8px; |
| } |
| } |
| </style> |
| </custom-style> |
