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