| OLD | NEW |
| 1 /* Copyright 2015 The Chromium Authors. All rights reserved. | 1 /* Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. | 3 * found in the LICENSE file. |
| 4 */ | 4 */ |
| 5 | 5 |
| 6 :host { | 6 :host { |
| 7 height: 528px; | 7 display: flex; |
| 8 width: 448px; | 8 flex-direction: column; |
| 9 position: relative; |
| 9 } | 10 } |
| 10 | 11 |
| 11 .gaia-header { | 12 .gaia-header { |
| 12 background-color: rgb(66, 133, 244); | 13 background-color: var(--google-blue-500); |
| 13 color: rgb(255, 255, 255); | 14 color: white; |
| 14 height: 164px; | 15 height: 198px; |
| 15 } | 16 } |
| 16 | 17 |
| 17 .gaia-footer, | 18 :host(:not(.disabled)) .gaia-header { |
| 18 #progress-bar::shadow #progressContainer { | 19 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17); |
| 19 background-color: rgba(0, 0, 0, 0.02); | 20 /* z-index is needed to make shadow visible. */ |
| 21 z-index: 1; |
| 20 } | 22 } |
| 21 | 23 |
| 22 .gaia-footer { | 24 .gaia-footer { |
| 25 background-color: rgb(238, 238, 238); |
| 26 } |
| 27 |
| 28 .gaia-footer { |
| 23 position: relative; | 29 position: relative; |
| 24 } | 30 } |
| 25 | 31 |
| 26 .header-container { | 32 .header-container { |
| 27 padding: 34px 40px 16px; | 33 padding: 50px 40px 18px; |
| 28 } | 34 } |
| 29 | 35 |
| 30 .footer-container { | 36 .footer-container { |
| 31 padding: 24px 40px 34px; | 37 padding: 24px 40px 34px; |
| 32 } | 38 } |
| 33 | 39 |
| 34 ::content /deep/ div.gaia-body-text { | 40 ::content div.gaia-body-text { |
| 35 margin-bottom: 24px; | 41 margin-bottom: 24px; |
| 36 } | 42 } |
| 37 | 43 |
| 38 ::content /deep/ div.gaia-body-text p { | 44 ::content div.gaia-body-text p { |
| 39 color: rgba(0, 0, 0, 0.87); | 45 color: rgba(0, 0, 0, 0.87); |
| 40 font-size: 14px; | 46 font-size: 14px; |
| 41 line-height: 20px; | 47 line-height: 20px; |
| 42 margin: 0; | 48 margin: 0; |
| 43 } | 49 } |
| 44 | 50 |
| 45 ::content /deep/ p.email, | 51 ::content p.enterprise-info { |
| 46 ::content /deep/ p.enterprise-info { | 52 color: white; |
| 47 color: rgb(255, 255, 255); | |
| 48 font-size: 15px; | 53 font-size: 15px; |
| 49 margin: 8px 0 0 0; | 54 margin: 8px 0 0 0; |
| 50 } | 55 } |
| 51 | 56 |
| 52 ::content /deep/ h1.welcome-message { | 57 ::content h1.welcome-message { |
| 53 color: rgb(255, 255, 255); | 58 color: white; |
| 54 font-size: 20px; | 59 font-size: 20px; |
| 55 font-weight: normal; | 60 font-weight: normal; |
| 56 margin-bottom: 0; | 61 margin-bottom: 0; |
| 57 } | 62 } |
| 58 | 63 |
| 59 .overlay { | 64 .overlay { |
| 60 background-color: rgba(0, 0, 0, 0.5); | 65 background-color: rgba(0, 0, 0, 0.5); |
| 61 display: none; | 66 display: none; |
| 62 height: 100%; | 67 height: 100%; |
| 63 position: absolute; | 68 position: absolute; |
| 64 right: 0; | 69 right: 0; |
| 65 top: 0; | 70 top: 0; |
| 66 width: 100%; | 71 width: 100%; |
| 67 z-index: 11; | 72 z-index: 11; |
| 68 } | 73 } |
| 69 | 74 |
| 70 #progress-bar { | 75 paper-progress#progress-bar { |
| 76 --paper-progress-active-color: var(--google-yellow-500); |
| 77 --paper-progress-container-color: var(--google-yellow-100); |
| 78 bottom: 0; |
| 71 display: none; | 79 display: none; |
| 80 height: 3px; |
| 81 position: absolute; |
| 72 width: 100%; | 82 width: 100%; |
| 73 } | 83 } |
| 74 | 84 |
| 75 #progress-bar::shadow #activeProgress { | |
| 76 background-color: rgb(255, 184, 9); | |
| 77 } | |
| 78 | |
| 79 :host(.full-disabled) #full-overlay, | 85 :host(.full-disabled) #full-overlay, |
| 80 :host(.disabled) #bottom-overlay, | 86 :host(.disabled) #bottom-overlay, |
| 81 :host(.disabled) #progress-bar { | 87 :host(.disabled) #progress-bar { |
| 82 display: block; | 88 display: block; |
| 83 } | 89 } |
| OLD | NEW |