Home | History | Annotate | Download | only in ntp4 
      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 /* TODO(estade): handle overflow better? I tried overflow-x: hidden and
      6    overflow-y: visible (for the new dot animation), but this makes a scroll
      7    bar appear */
      8 #dot-list {
      9   /* Expand to take up all available horizontal space.  */
     10   -webkit-box-flex: 1;
     11   /* Center child dots. */
     12   -webkit-box-pack: center;
     13   display: -webkit-box;
     14   height: 100%;
     15   list-style-type: none;
     16   margin: 0;
     17   padding: 0;
     18 }
     19 
     20 html.starting-up #dot-list {
     21   display: none;
     22 }
     23 
     24 .dot {
     25   -webkit-box-flex: 1;
     26   -webkit-margin-end: 10px;
     27   -webkit-padding-start: 2px;
     28   -webkit-transition: -webkit-margin-end 250ms, max-width 250ms, opacity 250ms;
     29   box-sizing: border-box;
     30   cursor: pointer;
     31   /* max-width: Set in new_tab.js. See measureNavDots() */
     32   outline: none;
     33   text-align: left;
     34 }
     35 
     36 .dot:last-child {
     37   -webkit-margin-end: 0;
     38 }
     39 
     40 .dot:only-of-type {
     41   cursor: default;
     42   opacity: 0;
     43   pointer-events: none;
     44 }
     45 
     46 .dot.small {
     47   -webkit-margin-end: 0;
     48   max-width: 0;
     49 }
     50 
     51 .dot .selection-bar {
     52   -webkit-transition: border-color 200ms;
     53   border-bottom: 5px solid;
     54   border-color: rgba(0, 0, 0, 0.1);
     55   height: 10px;
     56 }
     57 
     58 .dot input {
     59   -webkit-appearance: caret;
     60   -webkit-margin-start: 2px;
     61   -webkit-transition: color 200ms;
     62   background-color: transparent;
     63   cursor: inherit;
     64   font: inherit;
     65   height: auto;
     66   margin-top: 2px;
     67   padding: 1px 0;
     68   width: 90%;
     69 }
     70 
     71 .dot input:focus {
     72   cursor: auto;
     73 }
     74 
     75 /* Everything below here should be themed but we don't have appropriate colors
     76  * yet.
     77  */
     78 .dot input {
     79   color: #b2b2b2;
     80 }
     81 
     82 .dot:focus input,
     83 .dot:hover input,
     84 .dot.selected input {
     85   color: #7f7f7f;
     86 }
     87 
     88 .dot:focus .selection-bar,
     89 .dot:hover .selection-bar,
     90 .dot.drag-target .selection-bar {
     91   border-color: #b2b2b2;
     92 }
     93 
     94 .dot.selected .selection-bar {
     95   border-color: #7f7f7f;
     96 }
     97