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..ccad8be9fda94f16ba45391a94914de13bf07f6c |
--- /dev/null |
+++ b/chrome/browser/resources/ntp4/md_incognito_tab.css |
@@ -0,0 +1,303 @@ |
+/* 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 + .bulletpoints { |
msramek
2017/04/21 12:20:36
This was a typo - it was supposed to be the mirror
|
+ 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, |
+ html[dir=rtl] .bulletpoints + .bulletpoints { |
+ clear: both; |
+ } |
+} |
+ |
+/** Paddings and margins ---------------------------------------------------- */ |
+ |
+.bulletpoints ul { |
+ -webkit-padding-start: 16px; |
+ margin: 4px 0 0; |
+} |
+ |
+/* 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; |
+ } |
+ |
+ /* 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; |
+ } |
+} |