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