chrome/browser/resources/local_ntp/local_ntp_fast.css

   1 /* Copyright 2015 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 /* TODO: Need to discuss with NTP folks before we remove font-family from the
   6  * body tag. */
   7 body {
   8   background-attachment: fixed !important;
   9   background-color: white;
  10   cursor: default;
  11   font-family: arial, sans-serif;
  12   font-size: small;
  13   margin: 0;
  14   overflow-x: hidden;
  15 }
  16
  17 #ntp-contents {
  18   text-align: -webkit-center;
  19 }
  20
  21 .non-google-page #ntp-contents {
  22   position: absolute;
  23   top: calc(50% - 155px);
  24   width: 100%;
  25 }
  26
  27 body.hide-fakebox-logo #logo,
  28 body.hide-fakebox-logo #fakebox {
  29   visibility: hidden;
  30 }
  31
  32 body.fakebox-disable #fakebox {
  33   border-color: rgb(238, 238, 238);
  34   cursor: default;
  35 }
  36
  37 body.fakebox-disable #fakebox > input {
  38   cursor: default;
  39 }
  40
  41 #logo {
  42   background-image: url(images/google_logo.png@2x);
  43   background-repeat: no-repeat;
  44   background-size: 269px 95px;
  45   height: 95px;
  46   margin-bottom: 24px;
  47   margin-top: 157px;
  48   width: 269px;
  49 }
  50
  51 body.alternate-logo #logo {
  52   -webkit-mask-image: url(images/google_logo.png@2x);
  53   -webkit-mask-repeat: no-repeat;
  54   -webkit-mask-size: 100%;
  55   background: #eee;
  56 }
  57
  58 #fakebox {
  59   -webkit-transform: translate3d(0, 0, 0);
  60   -webkit-transition: -webkit-transform 100ms linear, border-color 100ms linear;
  61   background-color: #fff;
  62   border: 1px solid rgb(185, 185, 185);
  63   border-radius: 1px;
  64   border-top-color: rgb(160, 160, 160);
  65   box-sizing: border-box;
  66   cursor: text;
  67   font-size: 18px;
  68   height: 36px;
  69   line-height: 36px;
  70   max-width: 672px;
  71   position: relative;
  72   width: 300px;
  73 }
  74
  75 #fakebox:hover {
  76   border: 1px solid rgb(169, 169, 169);
  77   border-top-color: rgb(144, 144, 144);
  78 }
  79
  80 body.fakebox-focused #fakebox {
  81   border: 1px solid rgb(77, 144, 254);
  82 }
  83
  84 #fakebox > input {
  85   bottom: 0;
  86   box-sizing: border-box;
  87   left: 0;
  88   margin: 0;
  89   opacity: 0;
  90   padding-left: 8px;
  91   position: absolute;
  92   top: 0;
  93   width: 100%;
  94 }
  95
  96 html[dir=rtl] #fakebox > input {
  97   padding-left: 0;
  98   padding-right: 8px;
  99   right: 0;
 100 }
 101
 102 #fakebox-text {
 103   bottom: 0;
 104   color: #bbb;
 105   font-family: arial, sans-serif;
 106   font-size: 16px;
 107   left: 9px;
 108   margin-top: 1px;
 109   overflow: hidden;
 110   position: absolute;
 111   right: 9px;
 112   text-align: initial;
 113   text-overflow: ellipsis;
 114   top: 0;
 115   vertical-align: middle;
 116   visibility: inherit;
 117   white-space: nowrap;
 118 }
 119
 120 html[dir=rtl] #fakebox-text {
 121   left: auto;
 122   right: 9px;
 123 }
 124
 125 #cursor {
 126   background: #333;
 127   bottom: 5px;
 128   left: 9px;
 129   position: absolute;
 130   top: 5px;
 131   visibility: hidden;
 132   width: 1px;
 133 }
 134
 135 html[dir=rtl] #cursor {
 136   left: auto;
 137   right: 9px;
 138 }
 139
 140 @-webkit-keyframes blink {
 141   0% {
 142     opacity: 1;
 143   }
 144   61.55% {
 145     opacity: 0;
 146   }
 147 }
 148
 149 body.fakebox-drag-focused #fakebox-text,
 150 body.fakebox-focused #fakebox-text {
 151   visibility: hidden;
 152 }
 153
 154 body.fakebox-drag-focused #cursor {
 155   visibility: inherit;
 156 }
 157
 158 body.fakebox-focused #cursor {
 159   -webkit-animation: blink 1.3s step-end infinite;
 160   visibility: inherit;
 161 }
 162
 163 #most-visited {
 164   -webkit-user-select: none;
 165   margin-top: 64px;
 166   text-align: -webkit-center;
 167 }
 168
 169 /* Non-Google pages have no Fakebox, so don't need top margin. */
 170 .non-google-page #most-visited {
 171   margin-top: 0;
 172 }
 173
 174 #mv-notice-x {
 175   -webkit-mask-image: -webkit-image-set(
 176       url(chrome-search://local-ntp/images/close_3_mask.png) 1x,
 177       url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x);
 178   -webkit-mask-position: 3px 3px;
 179   -webkit-mask-repeat: no-repeat;
 180   -webkit-mask-size: 10px 10px;
 181   background-color: rgba(90,90,90,0.7);
 182   cursor: pointer;
 183   display: inline-block;
 184   height: 16px;
 185   margin-left: 20px;
 186   outline: none;
 187   vertical-align: middle;
 188   width: 16px;
 189 }
 190
 191 html[dir=rtl] #mv-notice-x {
 192   margin-left: 0;
 193   margin-right: 20px;
 194 }
 195
 196 #mv-notice-x:hover {
 197   background-color: rgba(90,90,90,1.0);
 198 }
 199
 200 #mv-notice-x:active {
 201   background-color: rgb(66,133,244);
 202 }
 203
 204 /* The notification shown when a tile is blacklisted. */
 205 #mv-notice {
 206   font-size: 12px;
 207   font-weight: bold;
 208   opacity: 1;
 209   padding: 10px 0;
 210 }
 211
 212 #mv-notice span {
 213   cursor: default;
 214   display: inline-block;
 215   height: 16px;
 216   line-height: 16px;
 217   vertical-align: top;
 218 }
 219
 220 /* Links in the notification. */
 221 #mv-notice-links span {
 222   -webkit-margin-start: 6px;
 223   color: rgb(17, 85, 204);
 224   cursor: pointer;
 225   outline: none;
 226   padding: 0 4px;
 227 }
 228
 229 #mv-notice-links span:hover,
 230 #mv-notice-links span:focus,
 231 #recent-tabs:hover {
 232   text-decoration: underline;
 233 }
 234
 235 .default-theme.dark #mv-msg {
 236   color: #fff;
 237 }
 238
 239 .default-theme.dark #mv-notice-links span {
 240   color: #fff;
 241 }
 242
 243 #mv-notice.mv-notice-delayed-hide {
 244   -webkit-transition-delay: 10s;
 245   -webkit-transition-property: opacity;
 246   opacity: 0;
 247 }
 248
 249 #mv-notice.mv-notice-hide {
 250   display: none;
 251 }
 252
 253 #attribution {
 254   -webkit-user-select: none;
 255   bottom: 0;
 256   color: #fff;
 257   cursor: default;
 258   display: inline-block;
 259   font-size: 13px;
 260   position: fixed;
 261   right: 8px;
 262   text-align: left;
 263   z-index: -1;
 264 }
 265
 266 html[dir=rtl] #attribution {
 267   text-align: right;
 268 }
 269
 270 #recent-tabs {
 271   background: #fff;
 272   border: 1px solid #c0c0c0;
 273   border-radius: 2px;
 274   bottom: 0;
 275   color: rgb(17, 85, 204);
 276   cursor: pointer;
 277   font-family: Arial;
 278   font-size: 14px;
 279   opacity: 0.9;
 280   padding: 3px;
 281   position: fixed;
 282   right: 8px;
 283 }
 284
 285 html[dir=rtl] #attribution,
 286 html[dir=rtl] #recent-tabs {
 287   left: 8px;
 288   right: auto;
 289 }
 290
 291 #mv-single {
 292   border: none;
 293   height: 100%;
 294   width: 100%;
 295 }