Chromium Code Reviews Chromium Code Reviews
Issue 2804823002:
Revamp the Incognito NTP on Desktop (Closed)
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 /* Copyright 2017 The Chromium Authors. All rights reserved. | |
| 2 * Use of this source code is governed by a BSD-style license that can be | |
| 3 * found in the LICENSE file. */ | |
| 4 | |
| 5 /* TODO(msramek): This overrides the non-MD color #323232 which is set with | |
| 6 * the themes CSS at runtime. It can be removed once the MD Incognito NTP | |
| 7 * is fully launched and the non-MD markup is disused. */ | |
| 8 html { | |
| 9 background-color: #303030 !important; | |
|
Dan Beam
2017/04/11 00:31:12
i'm still confused as to why you need !important h
msramek
2017/04/11 19:04:27
Done. Sorry, not sure how I didn't think of that.
| |
| 10 } | |
| 11 | |
| 12 body { | |
| 13 -webkit-font-smoothing: antialiased; | |
| 14 margin: 0; | |
| 15 } | |
| 16 | |
| 17 /** Typography -------------------------------------------------------------- */ | |
| 18 | |
| 19 .content { | |
| 20 background-color: #303030; | |
| 21 color: rgb(70%, 70%, 70%); | |
|
Dan Beam
2017/04/11 00:31:12
note: an overwhelming majority of rgb() and rgba()
msramek
2017/04/11 19:04:26
Done.
| |
| 22 font-size: 14px; | |
|
Dan Beam
2017/04/11 00:31:12
can you make font-sizes in terms of scalable units
msramek
2017/04/11 19:04:26
Well, this might be a problem.
The default font s
msramek
2017/04/12 14:50:26
Update in Patchset #4: I talked to our UX designer
| |
| 23 line-height: 20px; | |
| 24 min-width: 240px; | |
| 25 } | |
| 26 | |
| 27 h1 { | |
| 28 font-size: 24px; | |
| 29 font-weight: 400; | |
| 30 line-height: 32px; | |
| 31 opacity: rgb(80%, 80%, 80%); | |
|
Dan Beam
2017/04/11 00:31:12
i don't think this is a valid opacity. did you me
msramek
2017/04/11 19:04:27
Done. It was supposed to be just color, actually.
| |
| 32 } | |
| 33 | |
| 34 em { | |
| 35 color: white; | |
| 36 font-style: normal; | |
| 37 } | |
| 38 | |
| 39 .learn-more-button { | |
| 40 color: rgb(123, 170, 247); | |
| 41 text-decoration: none; | |
| 42 } | |
| 43 | |
| 44 /* Small font on small screens. */ | |
| 45 @media (max-width: 240px), | |
| 46 (max-height: 320px) { | |
| 47 .content { | |
| 48 font-size: 12px; | |
| 49 line-height: 18px; | |
| 50 } | |
| 51 | |
| 52 h1 { | |
| 53 font-size: 20px; | |
| 54 line-height: 24px; | |
| 55 } | |
| 56 } | |
| 57 | |
| 58 /** Icon -------------------------------------------------------------------- */ | |
| 59 | |
| 60 .icon { | |
| 61 content: url(../../../../ui/webui/resources/images/incognito_splash.svg); | |
| 62 height: 120px; | |
| 63 width: 120px; | |
| 64 } | |
| 65 | |
| 66 /* Medium-sized icon on medium-sized screens. */ | |
| 67 @media (max-height: 480px), | |
| 68 (max-width: 720px) { | |
| 69 .icon { | |
| 70 height: 72px; | |
| 71 width: 72px; | |
| 72 } | |
| 73 } | |
| 74 | |
| 75 /* Very small icon on very small screens. */ | |
| 76 @media (max-width: 720px) { | |
| 77 @media (max-width: 240px), | |
| 78 (max-height: 480px) { | |
| 79 .icon { | |
| 80 height: 48px; | |
| 81 width: 48px; | |
| 82 } | |
| 83 } | |
| 84 } | |
| 85 | |
| 86 /** The "Learn more" link --------------------------------------------------- */ | |
| 87 | |
| 88 /* By default, we only show the inline "Learn more" link. */ | |
| 89 .content > .learn-more-button { | |
| 90 display: none; | |
| 91 } | |
| 92 | |
| 93 /* On narrow screens, we show the standalone "Learn more" link. */ | |
| 94 @media (max-width: 720px) { | |
| 95 #subtitle > .learn-more-button { | |
| 96 display: none; | |
| 97 } | |
| 98 | |
| 99 .content > .learn-more-button { | |
| 100 display: block; | |
| 101 } | |
| 102 } | |
| 103 | |
| 104 /** Layout ------------------------------------------------------------------ */ | |
| 105 | |
| 106 /* Align the content, icon, and title to to the center. */ | |
| 107 .content { | |
| 108 margin-left: auto; | |
| 109 margin-right: auto; | |
| 110 max-width: 600px; | |
| 111 } | |
| 112 | |
| 113 .icon { | |
| 114 margin-left: auto; | |
| 115 margin-right: auto; | |
| 116 } | |
| 117 | |
| 118 h1 { | |
| 119 text-align: center; | |
| 120 } | |
| 121 | |
| 122 /* Align the two columns of bulletpoints next to each other. */ | |
| 123 .bulletpoints { | |
| 124 float: left; | |
|
Dan Beam
2017/04/11 00:31:12
does this work in RTL?
msramek
2017/04/11 19:04:27
Done. Thanks for pointing this out!
I flipped the
| |
| 125 } | |
| 126 | |
| 127 .bulletpoints + .bulletpoints { | |
| 128 clear: right; | |
| 129 } | |
| 130 | |
| 131 .clearer { | |
| 132 clear: both; | |
| 133 } | |
| 134 | |
| 135 /* On narrow screens, align everything to the left. */ | |
| 136 @media (max-width: 720px) { | |
| 137 .content { | |
| 138 margin-left: 0; | |
| 139 max-width: 720px !important; /* must override the rule set by JS which | |
| 140 * is only valid for width > 720px cases. */ | |
| 141 text-align: start; | |
| 142 } | |
| 143 | |
| 144 .icon { | |
| 145 margin-left: 0; | |
| 146 } | |
| 147 | |
| 148 h1 { | |
| 149 text-align: start; | |
| 150 } | |
| 151 | |
| 152 .bulletpoints + .bulletpoints { | |
| 153 clear: both; | |
| 154 } | |
| 155 } | |
| 156 | |
| 157 /** Paddings and margins ---------------------------------------------------- */ | |
| 158 | |
| 159 .bulletpoints ul { | |
| 160 margin: 4px 0 0 0; | |
| 161 padding-left: 16px; | |
| 162 } | |
| 163 | |
| 164 /* Margins of floating elements don't collapse. The margin for bulletpoints | |
| 165 * will usually be provided by a neighboring element. */ | |
| 166 .bulletpoints { | |
| 167 margin: 0; | |
| 168 } | |
| 169 | |
| 170 .bulletpoints + .bulletpoints { | |
| 171 margin-left: 40px; | |
| 172 } | |
| 173 | |
| 174 /* Wide screens. */ | |
| 175 @media (min-width: 720px) { | |
| 176 .icon, | |
| 177 h1, | |
| 178 #subtitle, | |
| 179 .learn-more-button { | |
| 180 margin-bottom: 24px; | |
| 181 margin-top: 24px; | |
| 182 } | |
| 183 | |
| 184 .content { | |
| 185 margin-top: 40px; | |
| 186 min-width: 240px; | |
| 187 padding: 8px 48px 24px 48px; | |
| 188 } | |
| 189 | |
| 190 /* Snap the content box to the whole height on short screens. */ | |
| 191 @media (max-height: 480px) { | |
| 192 html, | |
| 193 body, | |
| 194 .content { | |
| 195 height: 100%; | |
| 196 } | |
| 197 | |
| 198 .content { | |
| 199 margin-bottom: 0; | |
| 200 margin-top: 0; | |
| 201 padding-bottom: 0; | |
| 202 padding-top: 0; | |
| 203 } | |
| 204 | |
| 205 .icon { | |
| 206 margin-top: 0; | |
| 207 padding-top: 32px; /* Define the top offset through the icon's padding, | |
| 208 * otherwise the screen height would be 100% + 32px */ | |
| 209 } | |
| 210 } | |
| 211 | |
| 212 /* Smaller vertical margins on very short screens. */ | |
| 213 @media (max-height: 320px) { | |
| 214 h1, | |
| 215 #subtitle, | |
| 216 .learn-more-button { | |
| 217 margin-bottom: 16px; | |
| 218 margin-top: 16px; | |
| 219 } | |
| 220 | |
| 221 .icon { | |
| 222 margin-bottom: 16px; | |
| 223 } | |
| 224 } | |
| 225 } | |
| 226 | |
| 227 /* Narrow screens */ | |
| 228 @media (max-width: 720px) { | |
| 229 .content { | |
| 230 padding: 72px 32px; | |
| 231 min-width: 176px; | |
| 232 } | |
| 233 | |
| 234 .icon, | |
| 235 h1, | |
| 236 #subtitle, | |
| 237 .learn-more-button { | |
| 238 margin-bottom: 24px; | |
| 239 margin-top: 24px; | |
| 240 } | |
| 241 | |
| 242 /* The two columns of bulletpoints are moved under each other. */ | |
| 243 .bulletpoints + .bulletpoints { | |
| 244 margin-left: 0; | |
| 245 margin-top: 24px; | |
| 246 } | |
| 247 | |
| 248 /* Smaller offsets on smaller screens. */ | |
| 249 @media (max-height: 600px) { | |
| 250 .content { | |
| 251 padding-top: 48px; | |
| 252 } | |
| 253 | |
| 254 .icon, | |
| 255 h1, | |
| 256 #subtitle, | |
| 257 .learn-more-button { | |
| 258 margin-bottom: 16px; | |
| 259 margin-top: 16px; | |
| 260 } | |
| 261 | |
| 262 .bulletpoints + .bulletpoints { | |
| 263 margin-top: 16px; | |
| 264 } | |
| 265 } | |
| 266 | |
| 267 /* Small top offset on very small screens. */ | |
| 268 @media (max-height: 480px) { | |
| 269 .content { | |
| 270 padding-top: 32px; | |
| 271 } | |
| 272 } | |
| 273 | |
| 274 /* Undo the first and last elements margins. */ | |
| 275 .icon { | |
| 276 margin-top: 0; | |
| 277 } | |
| 278 | |
| 279 .learn-more-button { | |
| 280 margin-bottom: 0; | |
| 281 } | |
| 282 } | |
| 283 | |
| 284 /* Very narrow screens. */ | |
| 285 @media (max-width: 240px) { | |
| 286 .content { | |
| 287 min-width: 192px; | |
| 288 padding-left: 24px; | |
| 289 padding-right: 24px; | |
| 290 } | |
| 291 } | |
| OLD | NEW |
