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-flex;
     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-margin-end: 10px;
     26   -webkit-padding-start: 2px;
     27   -webkit-transition: -webkit-margin-end 250ms, max-width 250ms, opacity 250ms;
     28   box-sizing: border-box;
     29   cursor: pointer;
     30   /* max-width: Set in new_tab.js. See measureNavDots() */
     31   outline: none;
     32   text-align: left;
     33 }
     34 
     35 .dot:last-child {
     36   -webkit-margin-end: 0;
     37 }
     38 
     39 .dot:only-of-type {
     40   cursor: default;
     41   opacity: 0;
     42   pointer-events: none;
     43 }
     44 
     45 .dot.small {
     46   -webkit-margin-end: 0;
     47   max-width: 0;
     48 }
     49 
     50 .dot .selection-bar {
     51   -webkit-transition: border-color 200ms;
     52   border-bottom: 5px solid;
     53   border-color: rgba(0, 0, 0, 0.1);
     54   height: 10px;
     55 }
     56 
     57 .dot input {
     58   -webkit-appearance: caret;
     59   -webkit-margin-start: 2px;
     60   -webkit-transition: color 200ms;
     61   background-color: transparent;
     62   cursor: inherit;
     63   font: inherit;
     64   height: auto;
     65   margin-top: 2px;
     66   padding: 1px 0;
     67   width: 90%;
     68 }
     69 
     70 .dot input:focus {
     71   cursor: auto;
     72 }
     73 
     74 /* Everything below here should be themed but we don't have appropriate colors
     75  * yet.
     76  */
     77 .dot input {
     78   color: #b2b2b2;
     79 }
     80 
     81 .dot:focus input,
     82 .dot:hover input,
     83 .dot.selected input {
     84   color: #7f7f7f;
     85 }
     86 
     87 .dot:focus .selection-bar,
     88 .dot:hover .selection-bar,
     89 .dot.drag-target .selection-bar {
     90   border-color: #b2b2b2;
     91 }
     92 
     93 .dot.selected .selection-bar {
     94   border-color: #7f7f7f;
     95 }
     96