src/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 .link-button,
  29 .link-span {
  30   color: $21;  /* COLOR_NTP_TEXT_LIGHT */
  31 }
  32
  33 .link-button:active {
  34   color: $8;  /* COLOR_NTP_TEXT */
  35 }
  36
  37 .page-switcher {
  38   color: rgba($23, 0.5);  /* COLOR_NTP_TEXT */
  39 }
  40
  41 .page-switcher:hover,
  42 .page-switcher:focus,
  43 .page-switcher.drag-target {
  44   background-color: rgba($23, 0.06);  /* COLOR_NTP_TEXT */
  45 }
  46
  47 /* Only change the background to a gradient when a promo is showing. */
  48 .showing-login-area #page-switcher-end:hover,
  49 .showing-login-area #page-switcher-end:focus,
  50 .showing-login-area #page-switcher-end.drag-target {
  51   background:
  52       -webkit-linear-gradient(top, rgba($23, 0) 0,
  53                                    rgba($23, .01) 60px,
  54                                    rgba($23, .06) 183px);  /* COLOR_NTP_TEXT */
  55 }
  56
  57 .tile-page-scrollbar {
  58   background-color: $21;  /* COLOR_NTP_TEXT_LIGHT */
  59 }
  60
  61 /* Footer *********************************************************************/
  62
  63 #footer-border {
  64   background: -webkit-linear-gradient(left,
  65       rgba($22, 0.2),  /* COLOR_NTP_SECTION_BORDER */
  66       rgba($22, 0.3) 20%,  /* COLOR_NTP_SECTION_BORDER */
  67       rgba($22, 0.3) 80%,  /* COLOR_NTP_SECTION_BORDER */
  68       rgba($22, 0.2));  /* COLOR_NTP_SECTION_BORDER */
  69 }
  70
  71 .dot input:focus {
  72   background-color: $2;  /* COLOR_NTP_BACKGROUND */
  73 }
  74
  75 .bare-minimum #footer {
  76   color: $8;  /* COLOR_NTP_TEXT */
  77 }
  78
  79 .bare-minimum .disclosure-triangle {
  80   background-color: $8;  /* COLOR_NTP_TEXT */
  81 }
  82
  83 .bare-minimum .footer-menu-button:hover,
  84 .bare-minimum .footer-menu-button[menu-shown],
  85 .bare-minimum #chrome-web-store-link:hover {
  86   color: rgba($23, 0.85);  /* COLOR_NTP_TEXT */
  87 }
  88
  89 .bare-minimum .footer-menu-button:hover .disclosure-triangle,
  90 .bare-minimum .footer-menu-button[menu-shown] .disclosure-triangle {
  91   background-color: rgba($23, 0.85);  /* COLOR_NTP_TEXT */
  92 }
  93
  94 /* Most Visited ***************************************************************/
  95
  96 .most-visited,
  97 .most-visited > .title {
  98   color: $8;  /* COLOR_NTP_TEXT */
  99 }
 100
 101 .most-visited:focus:not(.filler) .thumbnail-wrapper,
 102 .most-visited:hover:not(.filler) .thumbnail-wrapper {
 103   background-color: $6;  /* COLOR_NTP_HEADER */
 104 }
 105
 106 .thumbnail-wrapper {
 107   /* This shows through at the (rounded) thumbnail's corners. */
 108   background-color: $11;  /* COLOR_NTP_SECTION_BORDER */
 109 }
 110
 111 .filler .thumbnail {
 112   border-color: $2;  /* COLOR_NTP_BACKGROUND */
 113 }