Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / chrome / browser / resources / ntp4 / new_tab_theme.css
blob64742909ab3866eeb3e1f3be48db41066c29388a
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
2 * Use of this source code is governed by a BSD-style license that can be
3 * found in the LICENSE file. */
5 html {
6 background-attachment: fixed;
7 background-color: ${colorBackground};
8 background-image: url(chrome://theme/IDR_THEME_NTP_BACKGROUND?${themeId});
9 background-position: ${backgroundBarDetached};
10 background-repeat: ${backgroundTiling};
13 #attribution {
14 left: ${leftAlignAttribution};
15 right: ${rightAlignAttribution};
16 text-align: ${textAlignAttribution};
17 display: ${displayAttribution};
20 #attribution-img {
21 content: url(chrome://theme/IDR_THEME_NTP_ATTRIBUTION?${themeId});
24 html[bookmarkbarattached='true'] {
25 background-position: ${backgroundBarAttached};
28 body {
29 color: ${colorTextRgba};
30 height: 100%;
31 overflow: auto;
34 #attribution,
35 [is='action-link'] {
36 color: ${colorTextLight};
39 [is='action-link']:active {
40 color: ${colorTextRgba};
43 .page-switcher {
44 color: rgba(${colorText}, 0.5);
47 .page-switcher:hover,
48 .page-switcher:focus,
49 .page-switcher.drag-target {
50 background-color: rgba(${colorText}, 0.06);
53 /* Only change the background to a gradient when a promo is showing. */
54 .showing-login-area #page-switcher-end:hover,
55 .showing-login-area #page-switcher-end:focus,
56 .showing-login-area #page-switcher-end.drag-target {
57 background: linear-gradient(top,
58 rgba(${colorText}, 0) 0,
59 rgba(${colorText}, .01) 60px,
60 rgba(${colorText}, .06) 183px);
63 .tile-page-scrollbar {
64 background-color: ${colorTextLight};
67 /* Footer *********************************************************************/
69 #footer-border {
70 background: linear-gradient(left,
71 rgba(${colorSectionBorder}, 0.2),
72 rgba(${colorSectionBorder}, 0.3) 20%,
73 rgba(${colorSectionBorder}, 0.3) 80%,
74 rgba(${colorSectionBorder}, 0.2));
77 .dot input:focus {
78 background-color: ${colorBackground};
81 .thumbnail-wrapper {
82 /* This shows through at the (rounded) thumbnail's corners. */
83 background-color: ${colorSectionBorder};
86 .filler .thumbnail {
87 border-color: ${colorBackground};