src/chrome/browser/resources/ntp4/footer_menu.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 .footer-menu-button {
   6   -webkit-appearance: none;
   7   -webkit-padding-end: 15px;
   8   -webkit-padding-start: 9px;
   9   -webkit-transition: opacity 200ms;
  10   -webkit-transition-delay: 100ms;
  11   background: none;
  12   border: 0;
  13   color: inherit;
  14   cursor: pointer;
  15   display: block;
  16   font: inherit;
  17   height: 100%;
  18   margin: 0;
  19   /* The padding increases the clickable area. */
  20   padding-bottom: 0;
  21   padding-top: 0;
  22   white-space: nowrap;
  23 }
  24
  25 .footer-menu-button:hover:not([menu-shown]) {
  26   color: #666;
  27 }
  28
  29 .footer-menu-button:hover:not([menu-shown]) .disclosure-triangle {
  30   background-color: #666;
  31 }
  32
  33 .footer-menu-button[menu-shown] {
  34   color: #555;
  35 }
  36
  37 .footer-menu-button[menu-shown] .disclosure-triangle {
  38   background-color: #555;
  39 }
  40
  41 .footer-menu {
  42   -webkit-margin-end: 10px;
  43   max-height: 400px;
  44   overflow: auto;
  45   padding: 6px 8px;
  46   /* Needs to be above #footer. */
  47   z-index: 10;
  48 }
  49
  50 .footer-menu,
  51 .footer-menu-context-menu {
  52   min-width: 150px;
  53 }
  54
  55 /* TODO(dubroy): Unify this with tile page scrollbar. */
  56 .footer-menu::-webkit-scrollbar-button {
  57   display: none;
  58 }
  59
  60 .footer-menu::-webkit-scrollbar {
  61   width: 8px;
  62 }
  63
  64 .footer-menu::-webkit-scrollbar-thumb {
  65   background-color: #D9D9D9;
  66   border: 2px solid white;
  67 }
  68
  69 .footer-menu-item {
  70   -webkit-margin-end: 8px;
  71   -webkit-margin-start: 0;
  72   -webkit-padding-end: 0;
  73   -webkit-padding-start: 22px;
  74   background: no-repeat 0 50%;
  75   background-color: transparent !important;
  76   background-size: 16px 16px;
  77   box-sizing: border-box;
  78   display: block;
  79   line-height: 1.5em;
  80   margin-bottom: 0.5em;
  81   margin-top: 0.5em;
  82   max-width: 450px;
  83   outline: none;
  84   overflow: hidden;
  85   text-overflow: ellipsis;
  86   white-space: nowrap;
  87 }
  88
  89 .footer-menu-item:not(:hover),
  90 .footer-menu-item:not(:focus) {
  91   text-decoration: none;
  92 }
  93
  94 .footer-menu-item:hover,
  95 .footer-menu-item:focus {
  96   text-decoration: underline;
  97 }
  98
  99 .footer-menu-item:first-of-type {
 100   margin-top: 0.25em;
 101 }
 102
 103 .footer-menu-item:last-of-type {
 104   margin-bottom: 0.25em;
 105 }
 106
 107 .footer-menu section {
 108   padding: 0;
 109 }
 110
 111 .footer-menu section h3 {
 112   color: black;
 113   font-size: 1em;
 114   font-weight: bold;
 115   margin-bottom: 0.5em;
 116 }
 117
 118 .footer-menu section:first-of-type h3 {
 119   margin-top: 0.25em;
 120 }
 121
 122 /* Used to add additional details to a section header */
 123 .footer-menu section h3 .details {
 124   color: rgb(151, 156, 160);
 125   font-style: italic;
 126   font-weight: normal;
 127 }
 128
 129 .footer-menu section h3 .details::before {
 130   content: '\2013';  /* En-dash character. */
 131   margin: 0 0.5em;
 132 }
 133
 134 html[dir='rtl'] .footer-menu-item {
 135   background: no-repeat 100% 50%;
 136 }
 137
 138 .recent-window {
 139   background-image: url('images/closed_window.png');
 140 }
 141
 142 /* TODO(estade): find a better color for active. */
 143 .footer-menu-item:active,
 144 .footer-menu-item:visited,
 145 .footer-menu-item:link {
 146   color: hsl(213, 90%, 24%) !important;
 147 }
 148
 149 .disclosure-triangle {
 150   -webkit-margin-start: 2px;
 151   -webkit-mask-image: url('images/disclosure_triangle_mask.png');
 152   background-color: #7F7F7F;
 153   display: inline-block;
 154   height: 9px;
 155   width: 9px;
 156 }
 157
 158 .footer-menu-context-menu {
 159   /* Needs to be above .footer-menu. */
 160   z-index: 11;
 161 }
 162
 163 .footer-menu hr {
 164   background-color: rgb(217, 217, 217);
 165   border: 0;
 166   height: 1px;
 167 }