Revamp the Incognito NTP on Desktop

chrome/browser/resources/ntp4/md_incognito_tab.css

+/* 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. */
+
+html.md {
+  background-color: #303030;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  font-size: 100%;
+  margin: 0;
+}
+
+/** Typography -------------------------------------------------------------- */
+
+.content {
+  background-color: #303030;
+  color: rgb(179, 179, 179);
+  font-size: calc(100% - 2px);
+  line-height: calc(100% + 6px);
+  min-width: 240px;
+}
+
+h1 {
+  color: rgb(204, 204, 204);
+  font-size: calc(100% + 8px);
+  font-weight: 400;
+  line-height: calc(100% + 8px);
+}
+
+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: calc(100% - 4px);
+    line-height: calc(100% + 6px);
+  }
+
+  h1 {
+    font-size: calc(100% + 4px);
+    line-height: calc(100% + 4px);
+  }
+}
+
+/** 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;
+}
+
+html[dir=rtl] .bulletpoints {
+  float: right;
+}
+
+.bulletpoints + .bulletpoints {
+  clear: right;
+}
+
+html[dir=rtl] .bulletpoints {
+  clear: left;
+}
+
+.clearer {
+  clear: both;
+}
+
+/* On narrow screens, align everything to the left. */
+@media (max-width: 720px) {
+  .content {
+    -webkit-margin-start: 0;
+    max-width: 600px !important;  /* must override the rule set by JS which
+                                   * is only valid for width > 720px cases. */
+    text-align: start;
+  }
+
+  .icon {
+    -webkit-margin-start: 0;
+  }
+
+  h1 {
+    text-align: start;
+  }
+
+  .bulletpoints + .bulletpoints {
+    clear: both;
+  }
+}
+
+/** Paddings and margins ---------------------------------------------------- */
+
+.bulletpoints ul {
+  -webkit-padding-start: 16px;
+  margin: 4px 0 0 0;

[Dan Beam, 2017/04/20 18:27:51]

nit: the shorthand that makes it easy to see the left and right are the same
(and is shorter) is:

margin: 4px 0 0;

[msramek, 2017/04/21 12:20:36]

Done.

+}
+
+/* Margins of floating elements don't collapse. The margin for bulletpoints
+ * will usually be provided by a neighboring element. */
+.bulletpoints {
+  margin: 0;
+}
+
+.bulletpoints + .bulletpoints {
+  -webkit-margin-start: 40px;
+}
+
+.bulletpoints + .bulletpoints.tooWide {
+  -webkit-margin-start: 0;
+  margin-top: 24px;
+}
+
+/* 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;

[Dan Beam, 2017/04/20 18:27:51]

can this be

padding: 8px 48px 24px;

?

[msramek, 2017/04/21 12:20:36]

Done.

+  }
+
+  /* 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 {
+    -webkit-margin-start: 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;
+  }
+}