Skip to content

GitLab

T
tangled
Commit 6bb63695 authored by Jialiu Lin's avatar Jialiu Lin Committed by Commit Bot
Browse files
Options

Refine the style of reset-password page 

Refine the style of chrome://reset-password page to make is as close
as chrome://interstitials/captiveportal

Added responsive layouts to adjust to different window sizes.

To test, run with flag --enable-features=ForceEnableResetPasswordWebUI
then navigate to chrome://reset-password

Bug: 848023
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I38d460ec56198176775643c75aa6e6571f1b269f
Reviewed-on: https://chromium-review.googlesource.com/1081665
Commit-Queue: Jialiu Lin <jialiul@chromium.org>
Reviewed-by: default avatarNathan Parker <nparker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#565485}
parent d9cc77dc
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 10 deletions
chrome/browser/resources/reset_password/reset_password.html
View file @ 6bb63695
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
<html dir="$i18n{textdirection}" lang="$i18n{language}"> <html dir="$i18n{textdirection}" lang="$i18n{language}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>$i18n{title}</title> <title>$i18n{title}</title>
<link rel="stylesheet" href="chrome://resources/css/md_colors.css"> <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> <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/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/icons.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/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.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/mojo_bindings.js"></script>
<script src="chrome://resources/js/util.js"></script> <script src="chrome://resources/js/util.js"></script>
...@@ -16,16 +16,38 @@ ...@@ -16,16 +16,38 @@
<script src="reset_password.js"></script> <script src="reset_password.js"></script>
<style> <style>
body { body {
background-color: var(--md-background-color); background-color: white;
color: var(--google-grey-700); color: var(--google-grey-700);
font-family: system-ui;
word-wrap: break-word; word-wrap: break-word;
} }
.primary-button { p {
font-size: 1rem;
}
button {
background: var(--google-blue-500); background: var(--google-blue-500);
border: 0;
border-radius: 2px;
box-sizing: border-box;
color: white; color: white;
margin: 51px auto 0; cursor: pointer;
padding: 4px 24px; float: right;
font-size: .875rem;
margin: 0;
padding: 10px 24px;
transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
}
button:active {
background: var(--google-blue-700);
outline: 0;
}
button:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
} }
.icon { .icon {
...@@ -35,7 +57,7 @@ ...@@ -35,7 +57,7 @@
} }
.heading { .heading {
color: var(--paper-grey-900); color: var(--paper-grey-800);
font-size: 1.6rem; font-size: 1.6rem;
font-weight: normal; font-weight: normal;
line-height: 1.25rem; line-height: 1.25rem;
...@@ -43,10 +65,55 @@ ...@@ -43,10 +65,55 @@
} }
.page-wrapper { .page-wrapper {
box-sizing: border-box;
line-height: 1.6rem; line-height: 1.6rem;
margin: 14vh auto 0; margin: 14vh auto 0;
max-width: 600px; max-width: 600px;
width: 100%; }
.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> </style>
</head> </head>
...@@ -55,9 +122,11 @@ ...@@ -55,9 +122,11 @@
<iron-icon class="icon" icon="cr:security"></iron-icon> <iron-icon class="icon" icon="cr:security"></iron-icon>
<div class="heading">$i18n{heading}</div> <div class="heading">$i18n{heading}</div>
<p>$i18n{primaryParagraph}</p> <p>$i18n{primaryParagraph}</p>
<paper-button id="reset-password-button" class="primary-button"> <div class="nav-wrapper">
$i18n{primaryButtonText} <button id="reset-password-button">
</paper-button> $i18n{primaryButtonText}
</button>
</div>
</div> </div>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment