chrome/browser/resources/ntp4/new_tab_theme.css

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