• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
20html.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