| <!doctype html> |
| <html dir="$i18n{textdirection}" lang="$i18n{language}"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width"> |
| <title>$i18n{title}</title> |
| <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> |
| <link rel="import" href="chrome://resources/html/polymer.html"> |
| <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| <script src="chrome://resources/js/mojo_bindings.js"></script> |
| <script src="chrome://resources/js/util.js"></script> |
| <script src="reset_password.mojom.js"></script> |
| <script src="reset_password.js"></script> |
| <style> |
| html { |
| font-size: 125%; |
| } |
| |
| body { |
| background-color: white; |
| color: var(--google-grey-700); |
| font-family: system-ui; |
| font-size: 75%; |
| word-wrap: break-word; |
| } |
| |
| p { |
| font-size: 1em; |
| line-height: 1.6em; |
| } |
| |
| button { |
| background: var(--google-blue-500); |
| border: 0; |
| border-radius: 2px; |
| box-sizing: border-box; |
| color: white; |
| cursor: pointer; |
| float: right; |
| font-size: .875em; |
| margin: 0; |
| padding: 10px 24px; |
| transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); |
| user-select: none; |
| } |
| |
| [dir='rtl'] button { |
| float: left; |
| } |
| |
| button:active { |
| background: var(--google-blue-700); |
| outline: 0; |
| } |
| |
| button:hover { |
| box-shadow: 0 1px 3px rgba(0, 0, 0, .50); |
| } |
| |
| .icon { |
| height: 72px; |
| margin: 0 0 40px -8px; |
| width: 72px; |
| } |
| |
| .heading { |
| color: var(--paper-grey-800); |
| font-size: 1.6em; |
| font-weight: normal; |
| line-height: 1.25em; |
| margin-bottom: 16px; |
| } |
| |
| .page-wrapper { |
| box-sizing: border-box; |
| line-height: 1.6em; |
| margin: 14vh auto 0; |
| max-width: 600px; |
| } |
| |
| .nav-wrapper { |
| margin-top: 51px; |
| } |
| |
| /* Responsive layouts when resizing to different sizes.*/ |
| @media (max-width: 700px) { |
| .page-wrapper { |
| padding: 0 10%; |
| } |
| } |
| |
| @media (max-width: 420px) { |
| .page-wrapper { |
| padding: 0 5%; |
| } |
| .nav-wrapper { |
| margin-top: 30px; |
| } |
| } |
| |
| @media (min-width: 421px) and (min-height: 500px) and (max-height: 560px) { |
| .page-wrapper { |
| margin-top: 10vh; |
| } |
| } |
| |
| @media (min-height: 400px) and (orientation:portrait) { |
| .page-wrapper { |
| margin-bottom: 145px; |
| } |
| } |
| |
| @media (min-height: 299px) { |
| .nav-wrapper { |
| padding-bottom: 16px; |
| } |
| } |
| |
| @media (min-height: 650px) and (max-width: 414px) and |
| (orientation: portrait) { |
| .page-wrapper { |
| margin-top: 10vh; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="page-wrapper"> |
| <iron-icon class="icon" icon="cr:security"></iron-icon> |
| <div class="heading">$i18n{heading}</div> |
| <p>$i18nRaw{primaryParagraph}</p> |
| <div class="nav-wrapper"> |
| <button id="reset-password-button"> |
| $i18n{primaryButtonText} |
| </button> |
| </div> |
| </div> |
| </body> |
| </html> |
