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 20html.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