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: $2;  /* COLOR_NTP_BACKGROUND */
   8   background-image: url(chrome://theme/IDR_THEME_NTP_BACKGROUND?$1);
   9   background-position: $3;
  10   background-repeat: $5;
  11 }
  12
  13 #attribution-img {
  14   content: url(chrome://theme/IDR_THEME_NTP_ATTRIBUTION?$1);
  15 }
  16
  17 html[bookmarkbarattached='true'] {
  18   background-position: $4;
  19 }
  20
  21 body {
  22   color: $8;  /* COLOR_NTP_TEXT */
  23   height: 100%;
  24   overflow: auto;
  25 }
  26
  27 #attribution,
  28 [is='action-link'] {
  29   color: $21;  /* COLOR_NTP_TEXT_LIGHT */
  30 }
  31
  32 [is='action-link']:active {
  33   color: $8;  /* COLOR_NTP_TEXT */
  34 }
  35
  36 .page-switcher {
  37   color: rgba($23, 0.5);  /* COLOR_NTP_TEXT */
  38 }
  39
  40 .page-switcher:hover,
  41 .page-switcher:focus,
  42 .page-switcher.drag-target {
  43   background-color: rgba($23, 0.06);  /* COLOR_NTP_TEXT */
  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:
  51       -webkit-linear-gradient(top, rgba($23, 0) 0,
  52                                    rgba($23, .01) 60px,
  53                                    rgba($23, .06) 183px);  /* COLOR_NTP_TEXT */
  54 }
  55
  56 .tile-page-scrollbar {
  57   background-color: $21;  /* COLOR_NTP_TEXT_LIGHT */
  58 }
  59
  60 /* Footer *********************************************************************/
  61
  62 #footer-border {
  63   background: -webkit-linear-gradient(left,
  64       rgba($22, 0.2),  /* COLOR_NTP_SECTION_BORDER */
  65       rgba($22, 0.3) 20%,  /* COLOR_NTP_SECTION_BORDER */
  66       rgba($22, 0.3) 80%,  /* COLOR_NTP_SECTION_BORDER */
  67       rgba($22, 0.2));  /* COLOR_NTP_SECTION_BORDER */
  68 }
  69
  70 .dot input:focus {
  71   background-color: $2;  /* COLOR_NTP_BACKGROUND */
  72 }
  73
  74 .bare-minimum #footer {
  75   color: $8;  /* COLOR_NTP_TEXT */
  76 }
  77
  78 .bare-minimum .disclosure-triangle {
  79   background-color: $8;  /* COLOR_NTP_TEXT */
  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($23, 0.85);  /* COLOR_NTP_TEXT */
  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($23, 0.85);  /* COLOR_NTP_TEXT */
  91 }
  92
  93 /* Most Visited ***************************************************************/
  94
  95 .most-visited,
  96 .most-visited > .title {
  97   color: $8;  /* COLOR_NTP_TEXT */
  98 }
  99
 100 .most-visited:focus:not(.filler) .thumbnail-wrapper,
 101 .most-visited:hover:not(.filler) .thumbnail-wrapper {
 102   background-color: $6;  /* COLOR_NTP_HEADER */
 103 }
 104
 105 .thumbnail-wrapper {
 106   /* This shows through at the (rounded) thumbnail's corners. */
 107   background-color: $11;  /* COLOR_NTP_SECTION_BORDER */
 108 }
 109
 110 .filler .thumbnail {
 111   border-color: $2;  /* COLOR_NTP_BACKGROUND */
 112 }