Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(5904)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/ntp4/md_incognito_tab.css

Issue 2804823002: Revamp the Incognito NTP on Desktop (Closed)
Patch Set: Created 3 years, 8 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 side-by-side diff with in-line comments
Download patch
« chrome/browser/about_flags.cc ('K') | « chrome/browser/flag_descriptions.cc ('k') | chrome/browser/resources/ntp4/md_incognito_tab.html » ('j') | chrome/browser/resources/ntp4/md_incognito_tab.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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;
+ }
+}
« chrome/browser/about_flags.cc ('K') | « chrome/browser/flag_descriptions.cc ('k') | chrome/browser/resources/ntp4/md_incognito_tab.html » ('j') | chrome/browser/resources/ntp4/md_incognito_tab.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698