chrome/browser/resources/welcome/welcome.html - Issue 2252063002: Adding client code for new desktop First Run Experience.

Side by Side Diff: chrome/browser/resources/welcome/welcome.html

Issue 2252063002: Adding client code for new desktop First Run Experience. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Inlining CSS Created 4 years, 4 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

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>

	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 * {
	Moe 2016/08/22 20:40:52 override these only where needed. override these only where needed.
	18 font-weight: normal;

	19 margin: 0;

	20 padding: 0;

	21 }

	22

	23 body {

	24 align-items: center;

	25 box-sizing: border-box;

	26 color: var(--paper-grey-900);

	27 display: flex;

	28 flex-direction: column;

	29 font-size: 87.5%;
	Moe 2016/08/22 20:40:52 Is this intentionally different form the default 8 Is this intentionally different form the default 81.25% specified in text_defaults_md.css?
	30 justify-content: center;

	31 line-height: 171%;
	Moe 2016/08/22 20:40:52 Why do you need to fiddle with line-height so much Why do you need to fiddle with line-height so much? Can't we go with the default line-height and use margins etc for spacing between elements?
	32 min-height: 100vh;

	33 overflow-y: hidden;

	34 padding: 16px;

	35 }

	36

	37 a {
	Moe 2016/08/22 20:40:52 you probably want a google blue 500 or sth for thi you probably want a google blue 500 or sth for this. also make sure the hover, visited, and active states are covered too. tmartino 2016/08/23 18:49:06 Moved to the .link class below. Hover is covered; Show quoted text On 2016/08/22 at 20:40:52, moe wrote: > you probably want a google blue 500 or sth for this. also make sure the hover, visited, and active states are covered too. Moved to the .link class below. Hover is covered; active it's OK for it to be undecorated; visited is meaningless in this context.
	38 text-decoration: none;

	39 }

	40

	41

	42 @keyframes slideUpContent {

	43 from {

	44 transform: translateY(186px);

	45 }

	46 }

	47

	48 @keyframes fadeIn {

	49 from {

	50 opacity: 0;

	51 }

	52 }

	53

	54 @keyframes fadeOut {

	55 to {

	56 opacity: 0;

	57 }

	58 }

	59

	60

	61 @keyframes fadeInAndSlideUp {

	62 from {

	63 opacity: 0;

	64 transform: translateY(8px);

	65 }

	66 }

	67

	68 @keyframes spin {

	69 from {

	70 transform: rotate(-1440deg);

	71 }

	72 }

	73

	74 @keyframes fadeInAndSlideDownShadow {

	75 from {

	76 opacity: .6;

	77 top: 8px;

	78 }

	79 }

	80

	81 @keyframes scaleUp {

	82 0% {

	83 transform: scale(.8);

	84 }

	85 }

	86

	87 .spacer {

	88 flex: 1;

	89 max-height: 96px;

	90 }

	91

	92 .content {

	93 animation: slideUpContent 600ms 1.8s cubic-bezier(.4,.2,0,1) both;
	Moe 2016/08/22 20:40:52 space after commas. here and elsewhere. others wil space after commas. here and elsewhere. others will definitely bring this up. tmartino 2016/08/23 18:49:06 Sorry, I totally didn't notice the animations had Show quoted text On 2016/08/22 at 20:40:52, moe wrote: > space after commas. here and elsewhere. others will definitely bring this up. Sorry, I totally didn't notice the animations had this problem as well. Done.
	94 display: flex;

	95 flex: 1;

	96 flex-direction: column;

	97 justify-content: center;

	98 max-width: 500px;

	99 text-align: center;

	100 }

	101

	102 .heading {

	103 animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4,.2,0,1) both;

	104 font-size: 243%;
	Moe 2016/08/22 20:40:52 Can you try using em or rem for font size? I find Can you try using em or rem for font size? I find it easier to understand.
	105 letter-spacing: -.44px;
	Moe 2016/08/22 20:40:52 is letter spacing really needed here? is letter spacing really needed here?
	106 line-height: 118%;

	107 margin-bottom: 12px;

	108 margin-top: 56px;

	109 }

	110

	111 .subheading {

	112 animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4,.2,0,1) both;

	113 color: var(--google-grey-500);

	114 font-size: 114%;

	115 line-height: 150%;

	116 }

	117

	118 .logo {

	119 animation: fadeIn 600ms both;

	120 height: 96px;

	121 margin: 0 auto;

	122 position: relative;

	123 width: 96px;

	124 }

	125

	126 .logo-icon {

	127 animation: scaleUp 600ms 500ms cubic-bezier(.5,-.5,0,2.25) both;

	128 background: #fff;
	Moe 2016/08/22 20:40:52 white. white.
	129 border-radius: 50%;

	130 height: 96px;

	131 width: 96px;

	132 }

	133

	134 .logo-bw,

	135 .logo-color {

	136 animation: fadeIn 600ms 500ms both, spin 2.4s cubic-bezier(.4,.2,0,1) both ;

	137 left: -5px;

	138 position: absolute;

	139 top: -5px;

	140 width: 106px;

	141 }

	142

	143 .logo-bw {

	144 -webkit-filter: grayscale(100%);

	145 }

	146

	147 .logo-color {

	148 animation: fadeIn 300ms 700ms both, spin 2.4s cubic-bezier(.4,.2,0,1) both ;

	149 }

	150

	151 .logo-shadow {

	152 -webkit-filter: blur(16px);

	153 animation: fadeInAndSlideDownShadow 300ms 600ms both;

	154 background: rgba(0, 0, 0, .2);

	155 border-radius: 50%;

	156 height: 96px;

	157 position: absolute;

	158 top: 16px;

	159 width: 96px;

	160 z-index: -1;

	161 }

	162

	163 .signin {

	164 animation: fadeInAndSlideUp 600ms 2s cubic-bezier(.4,.2,0,1) both;

	165 margin-top: 48px;

	166 text-align: left;

	167 }

	168

	169 .signin-description {

	170 margin: 0 auto;

	171 max-width: 344px;

	172 }

	173

	174 .signin-buttons {

	175 align-items: center;

	176 display: flex;

	177 flex-direction: column;

	178 margin-top: 32px;

	179 }

	180

	181 .action {
	Moe 2016/08/22 20:40:52 what happens if the buttons get focus? what happens if the buttons get focus? tmartino 2016/08/23 18:49:06 The focus/active/hover behavior is all inherited f Show quoted text On 2016/08/22 at 20:40:52, moe wrote: > what happens if the buttons get focus? The focus/active/hover behavior is all inherited from the paper-button. Focus appears to bold the text, in this case. Moe 2016/08/23 21:15:31 just make sure with Alan/Chris that's the behavior Show quoted text On 2016/08/23 18:49:06, tmartino wrote: > On 2016/08/22 at 20:40:52, moe wrote: > > what happens if the buttons get focus? > > The focus/active/hover behavior is all inherited from the paper-button. Focus > appears to bold the text, in this case. just make sure with Alan/Chris that's the behavior they want. afaik, buttons should have a tint in focused state. look at md-settings/md-user-manager for examples.
	182 background: var(--google-blue-500);

	183 color: white;

	184 font-size: 86%;

	185 font-weight: 500;

	186 line-height: 250%;

	187 min-width: 32px;

	188 padding: 0 16px;

	189 }

	190

	191 .link {

	192 color: var(--google-blue-500);

	193 display: inline-block;

	194 font-size: 86%;
	Moe 2016/08/22 20:40:52 these font sizes seem so random. I think it is ok these font sizes seem so random. I think it is ok to deviate a little bit from the mocks if it means more sensible numbers throughout code. (talk to chris and alan first of course)
	195 line-height: 250%;

	196 margin: 8px;

	197 min-width: 56px;

	198 text-align: center;

	199 }

	200

	201 .link:hover {

	202 text-decoration: underline;

	203 }

	204

	205 .watermark {

	206 -webkit-mask-image: url(chrome://welcome/watermark.svg);

	207 -webkit-mask-repeat: no-repeat;

	208 -webkit-mask-size: 100%;

	209 background: var(--paper-grey-400);

	210 height: 24px;

	211 margin-top: 48px;

	212 width: 74px;

	213 }

	214 </style>

	215 </head>

	216 <body>

	217 <div class="spacer"></div>

	218 <div class="content">

	219 <div class="logo">

	220 <div class="logo-icon">

	221 <img src="chrome://welcome/logo.png" class="logo-bw">

	222 <img src="chrome://welcome/logo.png" class="logo-color">

	223 </div>

	224 <div class="logo-shadow"></div>

	225 </div>

	226 <p class="heading">$i18n{headerText}</p>

	227 <p class="subheading">$i18n{subheaderText}</p>

	228 <div class="signin">

	229 <p class="signin-description">$i18n{descriptionText}</p>

	230 <div class="signin-buttons">

	231 <paper-button class="action">$i18n{acceptText}</paper-button>

	232 <a href="#" class="link">$i18n{declineText}</a>

	233 </div>

	234 </div>

	235 </div>

	236 <div class="watermark">

	237 </body>

	238 </html>

OLD	NEW

« no previous file with comments | « chrome/browser/browser_resources.grd ('k') | chrome/browser/resources/welcome/welcome.js » ('j') | chrome/browser/ui/webui/welcome_ui.cc » ('J')