Chromium Code Reviews Chromium Code Reviews
Issue 2252063002:
Adding client code for new desktop First Run Experience. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <html> | |
| 2 <head> | |
| 3 <title>$i18n{headerText}</title> | |
| 4 | |
| 5 <link rel="import" href="chrome://resources/html/polymer.html"> | |
| 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-bu tton.html"> | |
| 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.ht ml"> | |
| 8 | |
| 9 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> | |
| 10 | |
| 11 <script src="chrome://resources/js/cr.js"></script> | |
|
Moe
2016/08/23 21:15:31
nit: include cr.js and util.js once you need them.
| |
| 12 <script src="chrome://resources/js/load_time_data.js"></script> | |
| 13 <script src="chrome://resources/js/util.js"></script> | |
| 14 <script src="chrome://welcome/welcome.js"></script> | |
| 15 | |
| 16 <style is="custom-style"> | |
| 17 body { | |
| 18 align-items: center; | |
| 19 box-sizing: border-box; | |
| 20 color: var(--paper-grey-900); | |
| 21 display: flex; | |
| 22 flex-direction: column; | |
| 23 font-size: 100%; | |
| 24 justify-content: center; | |
| 25 min-height: 100vh; | |
| 26 overflow-y: hidden; | |
| 27 padding: 16px; | |
| 28 } | |
| 29 | |
| 30 @keyframes slideUpContent { | |
| 31 from { | |
| 32 transform: translateY(186px); | |
| 33 } | |
| 34 } | |
| 35 | |
| 36 @keyframes fadeIn { | |
| 37 from { | |
| 38 opacity: 0; | |
| 39 } | |
| 40 } | |
| 41 | |
| 42 @keyframes fadeOut { | |
| 43 to { | |
| 44 opacity: 0; | |
| 45 } | |
| 46 } | |
| 47 | |
| 48 | |
| 49 @keyframes fadeInAndSlideUp { | |
| 50 from { | |
| 51 opacity: 0; | |
| 52 transform: translateY(8px); | |
| 53 } | |
| 54 } | |
| 55 | |
| 56 @keyframes spin { | |
| 57 from { | |
| 58 transform: rotate(-1440deg); | |
| 59 } | |
| 60 } | |
| 61 | |
| 62 @keyframes fadeInAndSlideDownShadow { | |
| 63 from { | |
| 64 opacity: .6; | |
| 65 top: 8px; | |
| 66 } | |
| 67 } | |
| 68 | |
| 69 @keyframes scaleUp { | |
| 70 0% { | |
| 71 transform: scale(.8); | |
| 72 } | |
| 73 } | |
| 74 | |
| 75 .spacer { | |
| 76 flex: 1; | |
| 77 max-height: 96px; | |
| 78 } | |
| 79 | |
| 80 .content { | |
| 81 animation: slideUpContent 600ms 1.8s cubic-bezier(.4, .2, 0, 1) both; | |
| 82 display: flex; | |
| 83 flex: 1; | |
| 84 flex-direction: column; | |
| 85 justify-content: center; | |
| 86 max-width: 500px; | |
| 87 text-align: center; | |
| 88 } | |
| 89 | |
| 90 .heading { | |
| 91 animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both; | |
| 92 font-size: 2.125em; | |
| 93 margin-bottom: .25em; | |
| 94 margin-top: 1.5em; | |
| 95 } | |
| 96 | |
| 97 .subheading { | |
| 98 animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both; | |
| 99 color: var(--google-grey-500); | |
| 100 font-size: 1em; | |
| 101 margin-top: .25em; | |
| 102 } | |
| 103 | |
| 104 .logo { | |
| 105 animation: fadeIn 600ms both; | |
| 106 height: 96px; | |
| 107 margin: 0 auto; | |
| 108 position: relative; | |
| 109 width: 96px; | |
| 110 } | |
| 111 | |
| 112 .logo-icon { | |
| 113 animation: scaleUp 600ms 500ms cubic-bezier(.5, -.5, 0, 2.25) both; | |
| 114 background: white; | |
| 115 border-radius: 50%; | |
| 116 height: 96px; | |
| 117 width: 96px; | |
| 118 } | |
| 119 | |
| 120 .logo-bw, | |
| 121 .logo-color { | |
| 122 animation: fadeIn 600ms 500ms both, spin 2.4s cubic-bezier(.4, .2, 0, 1) b oth; | |
| 123 content: -webkit-image-set(url(logo.png) 1x, url(logo2x.png) 2x); | |
| 124 left: -5px; | |
| 125 position: absolute; | |
| 126 top: -5px; | |
| 127 width: 106px; | |
| 128 } | |
| 129 | |
| 130 .logo-bw { | |
| 131 -webkit-filter: grayscale(100%); | |
| 132 } | |
| 133 | |
| 134 .logo-color { | |
| 135 animation: fadeIn 300ms 700ms both, spin 2.4s cubic-bezier(.4, .2, 0, 1) b oth; | |
| 136 } | |
| 137 | |
| 138 .logo-shadow { | |
| 139 -webkit-filter: blur(16px); | |
| 140 animation: fadeInAndSlideDownShadow 300ms 600ms both; | |
| 141 background: rgba(0, 0, 0, .2); | |
| 142 border-radius: 50%; | |
| 143 height: 96px; | |
| 144 position: absolute; | |
| 145 top: 16px; | |
| 146 width: 96px; | |
| 147 z-index: -1; | |
| 148 } | |
| 149 | |
| 150 .signin { | |
| 151 animation: fadeInAndSlideUp 600ms 2s cubic-bezier(.4, .2, 0, 1) both; | |
| 152 margin-top: 3em; | |
| 153 text-align: left; | |
| 154 } | |
| 155 | |
| 156 .signin-description { | |
| 157 font-size: .875em; | |
| 158 line-height: 1.725em; | |
| 159 margin: 0 auto; | |
| 160 max-width: 344px; | |
| 161 } | |
| 162 | |
| 163 .signin-buttons { | |
| 164 align-items: center; | |
| 165 display: flex; | |
| 166 flex-direction: column; | |
| 167 margin-top: 2em; | |
| 168 } | |
| 169 | |
| 170 .action { | |
| 171 background: var(--google-blue-500); | |
| 172 color: white; | |
| 173 font-size: .75em; | |
| 174 font-weight: 500; | |
| 175 line-height: 2.5em; | |
| 176 padding: 0 1.25em; | |
| 177 } | |
| 178 | |
| 179 .link { | |
| 180 color: var(--google-blue-500); | |
| 181 display: inline-block; | |
| 182 font-size: .75em; | |
| 183 margin: 1.5em; | |
| 184 text-align: center; | |
| 185 text-decoration: none; | |
| 186 } | |
| 187 | |
| 188 .link:hover { | |
| 189 text-decoration: underline; | |
| 190 } | |
| 191 | |
| 192 .watermark { | |
| 193 -webkit-mask-image: url(chrome://welcome/watermark.svg); | |
| 194 -webkit-mask-repeat: no-repeat; | |
| 195 -webkit-mask-size: 100%; | |
| 196 background: var(--paper-grey-400); | |
| 197 height: 24px; | |
| 198 margin-top: 48px; | |
| 199 width: 74px; | |
| 200 } | |
| 201 </style> | |
| 202 </head> | |
| 203 <body> | |
| 204 <div class="spacer"></div> | |
| 205 <div class="content"> | |
| 206 <div class="logo"> | |
| 207 <div class="logo-icon"> | |
| 208 <img src="chrome://welcome/logo.png" class="logo-bw"> | |
| 209 <img src="chrome://welcome/logo.png" class="logo-color"> | |
| 210 </div> | |
| 211 <div class="logo-shadow"></div> | |
| 212 </div> | |
| 213 <p class="heading">$i18n{headerText}</p> | |
| 214 <p class="subheading">$i18n{subheaderText}</p> | |
| 215 <div class="signin"> | |
| 216 <p class="signin-description">$i18n{descriptionText}</p> | |
| 217 <div class="signin-buttons"> | |
| 218 <paper-button class="action">$i18n{acceptText}</paper-button> | |
| 219 <a href="#" class="link">$i18n{declineText}</a> | |
| 220 </div> | |
| 221 </div> | |
| 222 </div> | |
| 223 <div class="watermark"> | |
| 224 </body> | |
| 225 </html> | |
| OLD | NEW |
