| <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-rgb: 232, 240, 254; /* #e8f0fe */ |
| --google-blue-50: rgb(var(--google-blue-50-rgb)); |
| --google-blue-100-rgb: 210, 227, 252; /* #d2e3fc */ |
| --google-blue-100: rgb(var(--google-blue-100-rgb)); |
| --google-blue-200-rgb: 174, 203, 250; /* #aecbfa */ |
| --google-blue-200: rgb(var(--google-blue-200-rgb)); |
| --google-blue-300-rgb: 138, 180, 248; /* #8ab4f8 */ |
| --google-blue-300: rgb(var(--google-blue-300-rgb)); |
| --google-blue-400-rgb: 102, 157, 246; /* #669df6 */ |
| --google-blue-400: rgb(var(--google-blue-400-rgb)); |
| --google-blue-500-rgb: 66, 133, 244; /* #4285f4 */ |
| --google-blue-500: rgb(var(--google-blue-500-rgb)); |
| --google-blue-600-rgb: 26, 115, 232; /* #1a73e8 */ |
| --google-blue-600: rgb(var(--google-blue-600-rgb)); |
| --google-blue-700-rgb: 25, 103, 210; /* #1966d2 */ |
| --google-blue-700: rgb(var(--google-blue-700-rgb)); |
| |
| --google-green-50-rgb: 230, 244, 234; /* #e6f4ea */ |
| --google-green-50: rgb(var(--google-green-50-rgb)); |
| --google-green-300-rgb: 129, 201, 149; /* #81c995 */ |
| --google-green-300: rgb(var(--google-green-300-rgb)); |
| --google-green-400-rgb: 91, 185, 116; /* #5bb974 */ |
| --google-green-400: rgb(var(--google-green-400-rgb)); |
| --google-green-500-rgb: 52, 168, 83; /* #34a853 */ |
| --google-green-500: rgb(var(--google-green-500-rgb)); |
| --google-green-600-rgb: 30, 142, 62; /* #1e8e3e */ |
| --google-green-600: rgb(var(--google-green-600-rgb)); |
| --google-green-700-rgb: 24, 128, 56; /* #188038 */ |
| --google-green-700: rgb(var(--google-green-700-rgb)); |
| |
| --google-grey-50-rgb: 248, 249, 250; /* #f8f9fa */ |
| --google-grey-50: rgb(var(--google-grey-50-rgb)); |
| --google-grey-100-rgb: 241, 243, 244; /* #f1f3f4 */ |
| --google-grey-100: rgb(var(--google-grey-100-rgb)); |
| --google-grey-200-rgb: 232, 234, 237; /* #e8eaed */ |
| --google-grey-200: rgb(var(--google-grey-200-rgb)); |
| --google-grey-300-rgb: 218, 220, 224; /* #dadce0 */ |
| --google-grey-300: rgb(var(--google-grey-300-rgb)); |
| --google-grey-400-rgb: 189, 193, 198; /* #bdc1c6 */ |
| --google-grey-400: rgb(var(--google-grey-400-rgb)); |
| --google-grey-500-rgb: 154, 160, 166; /* #9aa0a6 */ |
| --google-grey-500: rgb(var(--google-grey-500-rgb)); |
| --google-grey-600-rgb: 128, 134, 139; /* #80868b */ |
| --google-grey-600: rgb(var(--google-grey-600-rgb)); |
| --google-grey-700-rgb: 95, 99, 104; /* #5f6368 */ |
| --google-grey-700: rgb(var(--google-grey-700-rgb)); |
| --google-grey-800-rgb: 60, 64, 67; /* #3c4043 */ |
| --google-grey-800: rgb(var(--google-grey-800-rgb)); |
| --google-grey-900-rgb: 32, 33, 36; /* #202124 */ |
| --google-grey-900: rgb(var(--google-grey-900-rgb)); |
| /* --google-grey-900 + 4% white blended together. */ |
| --google-grey-900-white-4-percent: #292a2d; |
| |
| --google-red-300-rgb: 242, 139, 130; /* #f28b82 */ |
| --google-red-300: rgb(var(--google-red-300-rgb)); |
| --google-red-500-rgb: 234, 67, 53; /* #ea4335 */ |
| --google-red-500: rgb(var(--google-red-500-rgb)); |
| --google-red-600-rgb: 217, 48, 37; /* #d93025 */ |
| --google-red-600: rgb(var(--google-red-600-rgb)); |
| |
| --google-yellow-50-rgb: 254, 247, 224; /* #fef7e0 */ |
| --google-yellow-50: rgb(var(--google-yellow-50-rgb)); |
| --google-yellow-300-rgb: 253, 214, 51; /* #fdd633 */ |
| --google-yellow-300: rgb(var(--google-yellow-300-rgb)); |
| --google-yellow-400-rgb: 252, 201, 52; /* #fcc934 */ |
| --google-yellow-400: rgb(var(--google-yellow-400-rgb)); |
| --google-yellow-500-rgb: 251, 188, 4; /* #fbbc04 */ |
| --google-yellow-500: rgb(var(--google-yellow-500-rgb)); |
| |
| /* DO NOT USE. Temporarily here to prevent breakages. crbug.com/1062154. */ |
| --google-blue-refresh-100-rgb: var(--google-blue-100-rgb); |
| --google-blue-refresh-100: var(--google-blue-100); |
| --google-blue-refresh-300-rgb: var(--google-blue-300-rgb); |
| --google-blue-refresh-300: var(--google-blue-300); |
| --google-blue-refresh-400-rgb: var(--google-blue-400-rgb); |
| --google-blue-refresh-400: var(--google-blue-400); |
| --google-blue-refresh-500-rgb: var(--google-blue-500-rgb); |
| --google-blue-refresh-500: var(--google-blue-500); |
| --google-blue-refresh-700-rgb: var(--google-blue-700-rgb); |
| --google-blue-refresh-700: var(--google-blue-700); |
| --google-green-refresh-300-rgb: var(--google-green-300-rgb); |
| --google-green-refresh-300: var(--google-green-300); |
| --google-green-refresh-400-rgb: var(--google-green-400-rgb); |
| --google-green-refresh-400: var(--google-green-400); |
| --google-green-refresh-500-rgb: var(--google-green-500-rgb); |
| --google-green-refresh-500: var(--google-green-500); |
| --google-green-refresh-700-rgb: var(--google-green-700-rgb); |
| --google-green-refresh-700: var(--google-green-700); |
| --google-grey-refresh-100-rgb: var(--google-grey-100-rgb); |
| --google-grey-refresh-100: var(--google-grey-100); |
| --google-grey-refresh-300-rgb: var(--google-grey-300-rgb); |
| --google-grey-refresh-300: var(--google-grey-300); |
| --google-grey-refresh-500-rgb: var(--google-grey-500-rgb); |
| --google-grey-refresh-500: var(--google-grey-500); |
| --google-grey-refresh-700-rgb: var(--google-grey-700-rgb); |
| --google-grey-refresh-700: var(--google-grey-700); |
| --google-red-refresh-300-rgb: var(--google-red-300-rgb); |
| --google-red-refresh-300: var(--google-red-300); |
| --google-red-refresh-500-rgb: var(--google-red-500-rgb); |
| --google-red-refresh-500: var(--google-red-500); |
| --google-yellow-refresh-300-rgb: var(--google-yellow-300-rgb); |
| --google-yellow-refresh-300: var(--google-yellow-300); |
| --google-yellow-refresh-400-rgb: var(--google-yellow-400-rgb); |
| --google-yellow-refresh-400: var(--google-yellow-400); |
| --google-yellow-refresh-500-rgb: var(--google-yellow-500-rgb); |
| --google-yellow-refresh-500: var(--google-yellow-500); |
| |
| --cr-primary-text-color: var(--google-grey-900); |
| --cr-secondary-text-color: var(--google-grey-700); |
| |
| --cr-card-background-color: white; |
| --cr-card-shadow-color-rgb: var(--google-grey-800-rgb); |
| |
| --cr-elevation-1: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0, |
| rgba(var(--cr-card-shadow-color-rgb), .15) 0 1px 3px 1px; |
| --cr-elevation-2: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0, |
| rgba(var(--cr-card-shadow-color-rgb), .15) 0 2px 6px 2px; |
| --cr-elevation-3: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 3px 0, |
| rgba(var(--cr-card-shadow-color-rgb), .15) 0 4px 8px 3px; |
| --cr-elevation-4: rgba(var(--cr-card-shadow-color-rgb), .3) 0 2px 3px 0, |
| rgba(var(--cr-card-shadow-color-rgb), .15) 0 6px 10px 4px; |
| --cr-elevation-5: rgba(var(--cr-card-shadow-color-rgb), .3) 0 4px 4px 0, |
| rgba(var(--cr-card-shadow-color-rgb), .15) 0 8px 12px 6px; |
| |
| --cr-card-shadow: var(--cr-elevation-1); |
| |
| --cr-checked-color: var(--google-blue-600); |
| --cr-focused-item-color: var(--google-grey-300); |
| --cr-form-field-label-color: var(--google-grey-700); |
| --cr-hairline-rgb: 0, 0, 0; |
| --cr-iph-anchor-highlight-color: rgba(var(--google-blue-600-rgb), 0.1); |
| --cr-link-color: var(--google-blue-700); |
| --cr-menu-background-color: white; |
| --cr-menu-background-focus-color: var(--google-grey-400); |
| --cr-menu-shadow: 0 2px 6px var(--paper-grey-500); |
| --cr-separator-color: rgba(0, 0, 0, .06); |
| --cr-title-text-color: rgb(90, 90, 90); |
| --cr-toolbar-background-color: var(--google-blue-700); |
| |
| --cr-hover-background-color: rgba(var(--google-grey-900-rgb), .1); |
| --cr-active-background-color: rgba(var(--google-grey-900-rgb), .16); |
| --cr-focus-outline-color: rgba(var(--google-blue-600-rgb), .4); |
| } |
| |
| @media (prefers-color-scheme: light) { |
| html[enable-branding-update] { |
| --cr-toolbar-background-color: white; |
| } |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| html { |
| --cr-primary-text-color: var(--google-grey-200); |
| --cr-secondary-text-color: var(--google-grey-500); |
| |
| --cr-card-background-color: var(--google-grey-900-white-4-percent); |
| --cr-card-shadow-color-rgb: 0, 0, 0; |
| |
| --cr-checked-color: var(--google-blue-300); |
| --cr-focused-item-color: var(--google-grey-800); |
| --cr-form-field-label-color: var(--dark-secondary-color); |
| --cr-hairline-rgb: 255, 255, 255; |
| --cr-iph-anchor-highlight-color: rgba(var(--google-grey-100-rgb), 0.1); |
| --cr-link-color: var(--google-blue-300); |
| --cr-menu-background-color: var(--google-grey-900); |
| --cr-menu-background-focus-color: var(--google-grey-700); |
| --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 3px 6px 2px; |
| --cr-separator-color: rgba(255, 255, 255, .1); |
| --cr-title-text-color: var(--cr-primary-text-color); |
| --cr-toolbar-background-color: var(--google-grey-900-white-4-percent); |
| |
| --cr-hover-background-color: rgba(255, 255, 255, .1); |
| --cr-active-background-color: rgba(var(--google-grey-200-rgb), .16); |
| --cr-focus-outline-color: rgba(var(--google-blue-300-rgb), .4); |
| } |
| } |
| |
| /* 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-button-edge-spacing: 12px; |
| --cr-button-height: 32px; |
| |
| /* Spacing between policy (controlledBy) indicator and control. */ |
| --cr-controlled-by-spacing: 24px; |
| |
| /* Default max-width for input fields */ |
| --cr-default-input-max-width: 264px; |
| |
| /* 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-button-margin-start: 16px; |
| |
| /* Shift button so ripple overlaps the end of the row. */ |
| --cr-icon-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1); |
| |
| /* TODO (johntlee): 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-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-vertical-margin: 21px; |
| |
| --cr-centered-card-max-width: 680px; |
| --cr-centered-card-width-percentage: 0.96; |
| |
| --cr-hairline: 1px solid rgba(var(--cr-hairline-rgb), .14); |
| |
| --cr-separator-height: 1px; |
| --cr-separator-line: var(--cr-separator-height) solid |
| var(--cr-separator-color); |
| |
| --cr-toolbar-overlay-animation-duration: 150ms; |
| --cr-toolbar-height: 56px; |
| |
| --cr-container-shadow-height: 6px; |
| --cr-container-shadow-margin: calc(-1 * var(--cr-container-shadow-height)); |
| |
| --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; |
| } |
| |
| html[enable-branding-update] { |
| --cr-card-border-radius: 8px; |
| --cr-card-shadow: var(--cr-elevation-2); |
| } |
| </style> |
| </custom-style> |
