| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| /* TODO(estade): handle overflow better? I tried overflow-x: hidden and |
| overflow-y: visible (for the new dot animation), but this makes a scroll |
| bar appear */ |
| #dot-list { |
| /* Expand to take up all available horizontal space. */ |
| -webkit-box-flex: 1; |
| /* Center child dots. */ |
| -webkit-box-pack: center; |
| display: -webkit-box; |
| height: 100%; |
| list-style-type: none; |
| margin: 0; |
| padding: 0; |
| } |
| |
| html.starting-up #dot-list { |
| display: none; |
| } |
| |
| .dot { |
| -webkit-box-flex: 1; |
| -webkit-margin-end: 10px; |
| -webkit-padding-start: 2px; |
| -webkit-transition: -webkit-margin-end 250ms, max-width 250ms, opacity 250ms; |
| box-sizing: border-box; |
| cursor: pointer; |
| /* max-width: Set in new_tab.js. See measureNavDots() */ |
| outline: none; |
| text-align: left; |
| } |
| |
| .dot:last-child { |
| -webkit-margin-end: 0; |
| } |
| |
| .dot:only-of-type { |
| cursor: default; |
| opacity: 0; |
| pointer-events: none; |
| } |
| |
| .dot.small { |
| -webkit-margin-end: 0; |
| max-width: 0; |
| } |
| |
| .dot .selection-bar { |
| -webkit-transition: border-color 200ms; |
| border-bottom: 5px solid; |
| border-color: rgba(0, 0, 0, 0.1); |
| height: 10px; |
| } |
| |
| .dot input { |
| -webkit-appearance: caret; |
| -webkit-margin-start: 2px; |
| -webkit-transition: color 200ms; |
| background-color: transparent; |
| cursor: inherit; |
| font: inherit; |
| height: auto; |
| margin-top: 2px; |
| padding: 1px 0; |
| width: 90%; |
| } |
| |
| .dot input:focus { |
| cursor: auto; |
| } |
| |
| /* Everything below here should be themed but we don't have appropriate colors |
| * yet. |
| */ |
| .dot input { |
| color: #b2b2b2; |
| } |
| |
| .dot:focus input, |
| .dot:hover input, |
| .dot.selected input { |
| color: #7f7f7f; |
| } |
| |
| .dot:focus .selection-bar, |
| .dot:hover .selection-bar, |
| .dot.drag-target .selection-bar { |
| border-color: #b2b2b2; |
| } |
| |
| .dot.selected .selection-bar { |
| border-color: #7f7f7f; |
| } |