| 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 |