| /* 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. */ |
| |
| body { |
| -webkit-font-smoothing: antialiased; |
| font-size: 100%; |
| margin: 0; |
| } |
| |
| /** Typography -------------------------------------------------------------- */ |
| |
| .content { |
| /* This is identical to the default background color. It's necessary to set it |
| for the case when a theme with a background image is installed. */ |
| background-color: #303030; |
| color: rgba(255, 255, 255, 0.7); |
| font-size: calc(100% - 2px); |
| line-height: calc(100% + 6px); |
| min-width: 240px; |
| } |
| |
| h1 { |
| color: rgba(255, 255, 255, 0.8); |
| 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 { |
| 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: 1.5rem; |
| } |
| |
| /* Wide screens. */ |
| @media (min-width: 720px) { |
| .icon, |
| h1, |
| #subtitle, |
| .learn-more-button { |
| margin-bottom: 1.5rem; |
| margin-top: 1.5rem; |
| } |
| |
| .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: 1.5rem; |
| margin-top: 1.5rem; |
| } |
| |
| /* The two columns of bulletpoints are moved under each other. */ |
| .bulletpoints + .bulletpoints { |
| -webkit-margin-start: 0; |
| margin-top: 1.5rem; |
| } |
| |
| /* Smaller offsets on smaller screens. */ |
| @media (max-height: 600px) { |
| .content { |
| padding-top: 48px; |
| } |
| |
| .icon, |
| h1, |
| #subtitle, |
| .learn-more-button { |
| margin-bottom: 1rem; |
| margin-top: 1rem; |
| } |
| |
| .bulletpoints + .bulletpoints { |
| margin-top: 1rem; |
| } |
| } |
| |
| /* 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; |
| } |
| } |