15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * found in the LICENSE file. */ 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* TODO(estade): handle overflow better? I tried overflow-x: hidden and 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) overflow-y: visible (for the new dot animation), but this makes a scroll 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bar appear */ 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#dot-list { 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Expand to take up all available horizontal space. */ 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-flex: 1; 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Center child dots. */ 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-pack: center; 135d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) display: -webkit-flex; 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 100%; 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) list-style-type: none; 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: 0; 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 0; 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html.starting-up #dot-list { 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: none; 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot { 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-margin-end: 10px; 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-start: 2px; 272a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) -webkit-transition: -webkit-margin-end 250ms, max-width 250ms, opacity 250ms; 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-sizing: border-box; 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) cursor: pointer; 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* max-width: Set in new_tab.js. See measureNavDots() */ 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) outline: none; 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-align: left; 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot:last-child { 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-margin-end: 0; 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 392a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles).dot:only-of-type { 40c2e0dbddbe15c98d52c4786dac06cb8952a8ae6dTorne (Richard Coles) cursor: default; 412a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) opacity: 0; 42c2e0dbddbe15c98d52c4786dac06cb8952a8ae6dTorne (Richard Coles) pointer-events: none; 432a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)} 442a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot.small { 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-margin-end: 0; 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) max-width: 0; 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot .selection-bar { 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: border-color 200ms; 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-bottom: 5px solid; 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: rgba(0, 0, 0, 0.1); 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 10px; 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot input { 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-appearance: caret; 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-margin-start: 2px; 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: color 200ms; 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: transparent; 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) cursor: inherit; 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) font: inherit; 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: auto; 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin-top: 2px; 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 1px 0; 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 90%; 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot input:focus { 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) cursor: auto; 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Everything below here should be themed but we don't have appropriate colors 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * yet. 765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot input { 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #b2b2b2; 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot:focus input, 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot:hover input, 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot.selected input { 845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #7f7f7f; 855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot:focus .selection-bar, 885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot:hover .selection-bar, 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot.drag-target .selection-bar { 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: #b2b2b2; 915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).dot.selected .selection-bar { 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: #7f7f7f; 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 96