Index: chrome/browser/resources/ntp4/md_incognito_tab.css |
diff --git a/chrome/browser/resources/ntp4/md_incognito_tab.css b/chrome/browser/resources/ntp4/md_incognito_tab.css |
new file mode 100644 |
index 0000000000000000000000000000000000000000..fa24fc371358d0051a3ed511e98c8641b63c41be |
--- /dev/null |
+++ b/chrome/browser/resources/ntp4/md_incognito_tab.css |
@@ -0,0 +1,291 @@ |
+/* Copyright 2017 The Chromium Authors. All rights reserved. |
+ * Use of this source code is governed by a BSD-style license that can be |
+ * found in the LICENSE file. */ |
+ |
+/* TODO(msramek): This overrides the non-MD color #323232 which is set with |
+ * the themes CSS at runtime. It can be removed once the MD Incognito NTP |
+ * is fully launched and the non-MD markup is disused. */ |
+html { |
+ 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.
|
+} |
+ |
+body { |
+ -webkit-font-smoothing: antialiased; |
+ margin: 0; |
+} |
+ |
+/** Typography -------------------------------------------------------------- */ |
+ |
+.content { |
+ background-color: #303030; |
+ 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.
|
+ 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
|
+ line-height: 20px; |
+ min-width: 240px; |
+} |
+ |
+h1 { |
+ font-size: 24px; |
+ font-weight: 400; |
+ line-height: 32px; |
+ 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.
|
+} |
+ |
+em { |
+ color: white; |
+ font-style: normal; |
+} |
+ |
+.learn-more-button { |
+ color: rgb(123, 170, 247); |
+ text-decoration: none; |
+} |
+ |
+/* Small font on small screens. */ |
+@media (max-width: 240px), |
+ (max-height: 320px) { |
+ .content { |
+ font-size: 12px; |
+ line-height: 18px; |
+ } |
+ |
+ h1 { |
+ font-size: 20px; |
+ line-height: 24px; |
+ } |
+} |
+ |
+/** Icon -------------------------------------------------------------------- */ |
+ |
+.icon { |
+ content: url(../../../../ui/webui/resources/images/incognito_splash.svg); |
+ height: 120px; |
+ width: 120px; |
+} |
+ |
+/* Medium-sized icon on medium-sized screens. */ |
+@media (max-height: 480px), |
+ (max-width: 720px) { |
+ .icon { |
+ height: 72px; |
+ width: 72px; |
+ } |
+} |
+ |
+/* Very small icon on very small screens. */ |
+@media (max-width: 720px) { |
+ @media (max-width: 240px), |
+ (max-height: 480px) { |
+ .icon { |
+ height: 48px; |
+ width: 48px; |
+ } |
+ } |
+} |
+ |
+/** The "Learn more" link --------------------------------------------------- */ |
+ |
+/* By default, we only show the inline "Learn more" link. */ |
+.content > .learn-more-button { |
+ display: none; |
+} |
+ |
+/* On narrow screens, we show the standalone "Learn more" link. */ |
+@media (max-width: 720px) { |
+ #subtitle > .learn-more-button { |
+ display: none; |
+ } |
+ |
+ .content > .learn-more-button { |
+ display: block; |
+ } |
+} |
+ |
+/** Layout ------------------------------------------------------------------ */ |
+ |
+/* Align the content, icon, and title to to the center. */ |
+.content { |
+ margin-left: auto; |
+ margin-right: auto; |
+ max-width: 600px; |
+} |
+ |
+.icon { |
+ margin-left: auto; |
+ margin-right: auto; |
+} |
+ |
+h1 { |
+ text-align: center; |
+} |
+ |
+/* Align the two columns of bulletpoints next to each other. */ |
+.bulletpoints { |
+ 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
|
+} |
+ |
+.bulletpoints + .bulletpoints { |
+ clear: right; |
+} |
+ |
+.clearer { |
+ clear: both; |
+} |
+ |
+/* On narrow screens, align everything to the left. */ |
+@media (max-width: 720px) { |
+ .content { |
+ margin-left: 0; |
+ max-width: 720px !important; /* must override the rule set by JS which |
+ * is only valid for width > 720px cases. */ |
+ text-align: start; |
+ } |
+ |
+ .icon { |
+ margin-left: 0; |
+ } |
+ |
+ h1 { |
+ text-align: start; |
+ } |
+ |
+ .bulletpoints + .bulletpoints { |
+ clear: both; |
+ } |
+} |
+ |
+/** Paddings and margins ---------------------------------------------------- */ |
+ |
+.bulletpoints ul { |
+ margin: 4px 0 0 0; |
+ padding-left: 16px; |
+} |
+ |
+/* Margins of floating elements don't collapse. The margin for bulletpoints |
+ * will usually be provided by a neighboring element. */ |
+.bulletpoints { |
+ margin: 0; |
+} |
+ |
+.bulletpoints + .bulletpoints { |
+ margin-left: 40px; |
+} |
+ |
+/* Wide screens. */ |
+@media (min-width: 720px) { |
+ .icon, |
+ h1, |
+ #subtitle, |
+ .learn-more-button { |
+ margin-bottom: 24px; |
+ margin-top: 24px; |
+ } |
+ |
+ .content { |
+ margin-top: 40px; |
+ min-width: 240px; |
+ padding: 8px 48px 24px 48px; |
+ } |
+ |
+ /* Snap the content box to the whole height on short screens. */ |
+ @media (max-height: 480px) { |
+ html, |
+ body, |
+ .content { |
+ height: 100%; |
+ } |
+ |
+ .content { |
+ margin-bottom: 0; |
+ margin-top: 0; |
+ padding-bottom: 0; |
+ padding-top: 0; |
+ } |
+ |
+ .icon { |
+ margin-top: 0; |
+ padding-top: 32px; /* Define the top offset through the icon's padding, |
+ * otherwise the screen height would be 100% + 32px */ |
+ } |
+ } |
+ |
+ /* Smaller vertical margins on very short screens. */ |
+ @media (max-height: 320px) { |
+ h1, |
+ #subtitle, |
+ .learn-more-button { |
+ margin-bottom: 16px; |
+ margin-top: 16px; |
+ } |
+ |
+ .icon { |
+ margin-bottom: 16px; |
+ } |
+ } |
+} |
+ |
+/* Narrow screens */ |
+@media (max-width: 720px) { |
+ .content { |
+ padding: 72px 32px; |
+ min-width: 176px; |
+ } |
+ |
+ .icon, |
+ h1, |
+ #subtitle, |
+ .learn-more-button { |
+ margin-bottom: 24px; |
+ margin-top: 24px; |
+ } |
+ |
+ /* The two columns of bulletpoints are moved under each other. */ |
+ .bulletpoints + .bulletpoints { |
+ margin-left: 0; |
+ margin-top: 24px; |
+ } |
+ |
+ /* Smaller offsets on smaller screens. */ |
+ @media (max-height: 600px) { |
+ .content { |
+ padding-top: 48px; |
+ } |
+ |
+ .icon, |
+ h1, |
+ #subtitle, |
+ .learn-more-button { |
+ margin-bottom: 16px; |
+ margin-top: 16px; |
+ } |
+ |
+ .bulletpoints + .bulletpoints { |
+ margin-top: 16px; |
+ } |
+ } |
+ |
+ /* Small top offset on very small screens. */ |
+ @media (max-height: 480px) { |
+ .content { |
+ padding-top: 32px; |
+ } |
+ } |
+ |
+ /* Undo the first and last elements margins. */ |
+ .icon { |
+ margin-top: 0; |
+ } |
+ |
+ .learn-more-button { |
+ margin-bottom: 0; |
+ } |
+} |
+ |
+/* Very narrow screens. */ |
+@media (max-width: 240px) { |
+ .content { |
+ min-width: 192px; |
+ padding-left: 24px; |
+ padding-right: 24px; |
+ } |
+} |