OLD | NEW |
1 /* Copyright 2012 The Chromium Authors. All rights reserved. | 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 | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
5 html { | 5 html { |
6 background-attachment: fixed; | 6 background-attachment: fixed; |
7 background-color: $i18n{colorBackground}; | 7 background-color: ${colorBackground}; |
8 background-image: url(chrome://theme/IDR_THEME_NTP_BACKGROUND?$i18n{themeId}); | 8 background-image: url(chrome://theme/IDR_THEME_NTP_BACKGROUND?${themeId}); |
9 background-position: $i18n{backgroundBarDetached}; | 9 background-position: ${backgroundBarDetached}; |
10 background-repeat: $i18n{backgroundTiling}; | 10 background-repeat: ${backgroundTiling}; |
11 } | 11 } |
12 | 12 |
13 #attribution { | 13 #attribution { |
14 left: $i18n{leftAlignAttribution}; | 14 left: ${leftAlignAttribution}; |
15 right: $i18n{rightAlignAttribution}; | 15 right: ${rightAlignAttribution}; |
16 text-align: $i18n{textAlignAttribution}; | 16 text-align: ${textAlignAttribution}; |
17 display: $i18n{displayAttribution}; | 17 display: ${displayAttribution}; |
18 } | 18 } |
19 | 19 |
20 #attribution-img { | 20 #attribution-img { |
21 content: url(chrome://theme/IDR_THEME_NTP_ATTRIBUTION?$i18n{themeId}); | 21 content: url(chrome://theme/IDR_THEME_NTP_ATTRIBUTION?${themeId}); |
22 } | 22 } |
23 | 23 |
24 html[bookmarkbarattached='true'] { | 24 html[bookmarkbarattached='true'] { |
25 background-position: $i18n{backgroundBarAttached}; | 25 background-position: ${backgroundBarAttached}; |
26 } | 26 } |
27 | 27 |
28 body { | 28 body { |
29 color: $i18n{colorTextRgba}; | 29 color: ${colorTextRgba}; |
30 height: 100%; | 30 height: 100%; |
31 overflow: auto; | 31 overflow: auto; |
32 } | 32 } |
33 | 33 |
34 #attribution, | 34 #attribution, |
35 [is='action-link'] { | 35 [is='action-link'] { |
36 color: $i18n{colorTextLight}; | 36 color: ${colorTextLight}; |
37 } | 37 } |
38 | 38 |
39 [is='action-link']:active { | 39 [is='action-link']:active { |
40 color: $i18n{colorTextRgba}; | 40 color: ${colorTextRgba}; |
41 } | 41 } |
42 | 42 |
43 .page-switcher { | 43 .page-switcher { |
44 color: rgba($i18n{colorText}, 0.5); | 44 color: rgba(${colorText}, 0.5); |
45 } | 45 } |
46 | 46 |
47 .page-switcher:hover, | 47 .page-switcher:hover, |
48 .page-switcher:focus, | 48 .page-switcher:focus, |
49 .page-switcher.drag-target { | 49 .page-switcher.drag-target { |
50 background-color: rgba($i18n{colorText}, 0.06); | 50 background-color: rgba(${colorText}, 0.06); |
51 } | 51 } |
52 | 52 |
53 /* Only change the background to a gradient when a promo is showing. */ | 53 /* Only change the background to a gradient when a promo is showing. */ |
54 .showing-login-area #page-switcher-end:hover, | 54 .showing-login-area #page-switcher-end:hover, |
55 .showing-login-area #page-switcher-end:focus, | 55 .showing-login-area #page-switcher-end:focus, |
56 .showing-login-area #page-switcher-end.drag-target { | 56 .showing-login-area #page-switcher-end.drag-target { |
57 background: linear-gradient(top, | 57 background: linear-gradient(top, |
58 rgba($i18n{colorText}, 0) 0, | 58 rgba(${colorText}, 0) 0, |
59 rgba($i18n{colorText}, .01) 60px, | 59 rgba(${colorText}, .01) 60px, |
60 rgba($i18n{colorText}, .06) 183px); | 60 rgba(${colorText}, .06) 183px); |
61 } | 61 } |
62 | 62 |
63 .tile-page-scrollbar { | 63 .tile-page-scrollbar { |
64 background-color: $i18n{colorTextLight}; | 64 background-color: ${colorTextLight}; |
65 } | 65 } |
66 | 66 |
67 /* Footer *********************************************************************/ | 67 /* Footer *********************************************************************/ |
68 | 68 |
69 #footer-border { | 69 #footer-border { |
70 background: linear-gradient(left, | 70 background: linear-gradient(left, |
71 rgba($i18n{colorSectionBorder}, 0.2), | 71 rgba(${colorSectionBorder}, 0.2), |
72 rgba($i18n{colorSectionBorder}, 0.3) 20%, | 72 rgba(${colorSectionBorder}, 0.3) 20%, |
73 rgba($i18n{colorSectionBorder}, 0.3) 80%, | 73 rgba(${colorSectionBorder}, 0.3) 80%, |
74 rgba($i18n{colorSectionBorder}, 0.2)); | 74 rgba(${colorSectionBorder}, 0.2)); |
75 } | 75 } |
76 | 76 |
77 .dot input:focus { | 77 .dot input:focus { |
78 background-color: $i18n{colorBackground}; | 78 background-color: ${colorBackground}; |
79 } | 79 } |
80 | 80 |
81 .thumbnail-wrapper { | 81 .thumbnail-wrapper { |
82 /* This shows through at the (rounded) thumbnail's corners. */ | 82 /* This shows through at the (rounded) thumbnail's corners. */ |
83 background-color: $i18n{colorSectionBorder}; | 83 background-color: ${colorSectionBorder}; |
84 } | 84 } |
85 | 85 |
86 .filler .thumbnail { | 86 .filler .thumbnail { |
87 border-color: $i18n{colorBackground}; | 87 border-color: ${colorBackground}; |
88 } | 88 } |
OLD | NEW |