| OLD | NEW |
| 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
| 4 | 4 |
| 5 tabbox { | 5 tabbox { |
| 6 -webkit-box-orient: vertical; | 6 -webkit-box-orient: vertical; |
| 7 display: -webkit-box; | 7 display: -webkit-box; |
| 8 } | 8 } |
| 9 | 9 |
| 10 tabs { | 10 tabs { |
| (...skipping 11 matching lines...) Expand all Loading... |
| 22 * (crbug.com/247772). */ | 22 * (crbug.com/247772). */ |
| 23 tabs.new-style-tabs { | 23 tabs.new-style-tabs { |
| 24 -webkit-padding-start: 9px; | 24 -webkit-padding-start: 9px; |
| 25 background: #fbfbfb; | 25 background: #fbfbfb; |
| 26 border-bottom: 1px solid #c8c8c8; | 26 border-bottom: 1px solid #c8c8c8; |
| 27 padding-top: 14px; | 27 padding-top: 14px; |
| 28 } | 28 } |
| 29 | 29 |
| 30 tabs > * { | 30 tabs > * { |
| 31 -webkit-margin-start: 5px; | 31 -webkit-margin-start: 5px; |
| 32 -webkit-transition: border-color 150ms, background-color 150ms; | |
| 33 background: rgba(160, 160, 160, .3); | 32 background: rgba(160, 160, 160, .3); |
| 34 border: 1px solid rgba(160, 160, 160, .3); | 33 border: 1px solid rgba(160, 160, 160, .3); |
| 35 border-bottom: 0; | 34 border-bottom: 0; |
| 36 border-top-left-radius: 3px; | 35 border-top-left-radius: 3px; |
| 37 border-top-right-radius: 3px; | 36 border-top-right-radius: 3px; |
| 38 cursor: default; | 37 cursor: default; |
| 39 display: block; | 38 display: block; |
| 40 min-width: 4em; | 39 min-width: 4em; |
| 41 padding: 2px 10px; | 40 padding: 2px 10px; |
| 42 text-align: center; | 41 text-align: center; |
| 42 transition: border-color 150ms, background-color 150ms; |
| 43 } | 43 } |
| 44 | 44 |
| 45 tabs.new-style-tabs > * { | 45 tabs.new-style-tabs > * { |
| 46 -webkit-margin-start: 0; | 46 -webkit-margin-start: 0; |
| 47 -webkit-transition: none; | |
| 48 background: #fbfbfb; | 47 background: #fbfbfb; |
| 49 border: 1px solid #fbfbfb; | 48 border: 1px solid #fbfbfb; |
| 50 border-bottom: 0; | 49 border-bottom: 0; |
| 51 border-radius: 0; | 50 border-radius: 0; |
| 52 min-width: 0; | 51 min-width: 0; |
| 53 padding: 4px 9px 4px 10px; | 52 padding: 4px 9px 4px 10px; |
| 53 transition: none; |
| 54 } | 54 } |
| 55 | 55 |
| 56 tabs > :not([selected]) { | 56 tabs > :not([selected]) { |
| 57 background: rgba(238, 238, 238, .3); | 57 background: rgba(238, 238, 238, .3); |
| 58 } | 58 } |
| 59 | 59 |
| 60 tabs.new-style-tabs > :not([selected]) { | 60 tabs.new-style-tabs > :not([selected]) { |
| 61 background: #fbfbfb; | 61 background: #fbfbfb; |
| 62 color: #646464; | 62 color: #646464; |
| 63 } | 63 } |
| 64 | 64 |
| 65 tabs > :not([selected]):hover { | 65 tabs > :not([selected]):hover { |
| 66 background: rgba(247, 247, 247, .3); | 66 background: rgba(247, 247, 247, .3); |
| 67 } | 67 } |
| 68 | 68 |
| 69 tabs.new-style-tabs > :not([selected]):hover { | 69 tabs.new-style-tabs > :not([selected]):hover { |
| 70 background: #fbfbfb; | 70 background: #fbfbfb; |
| 71 color: black; | 71 color: black; |
| 72 } | 72 } |
| 73 | 73 |
| 74 tabs > [selected] { | 74 tabs > [selected] { |
| 75 -webkit-transition: none; | |
| 76 background: white; | 75 background: white; |
| 77 border-color: rgb(160, 160, 160); | 76 border-color: rgb(160, 160, 160); |
| 78 margin-bottom: -1px; | 77 margin-bottom: -1px; |
| 79 position: relative; | 78 position: relative; |
| 79 transition: none; |
| 80 z-index: 0; | 80 z-index: 0; |
| 81 } | 81 } |
| 82 | 82 |
| 83 tabs.new-style-tabs > [selected] { | 83 tabs.new-style-tabs > [selected] { |
| 84 background: #fbfbfb; | 84 background: #fbfbfb; |
| 85 border-color: #c8c8c8; | 85 border-color: #c8c8c8; |
| 86 font-weight: bold; | 86 font-weight: bold; |
| 87 } | 87 } |
| 88 | 88 |
| 89 tabs:focus { | 89 tabs:focus { |
| (...skipping 20 matching lines...) Expand all Loading... |
| 110 } | 110 } |
| 111 | 111 |
| 112 tabpanels > * { | 112 tabpanels > * { |
| 113 -webkit-box-flex: 1; | 113 -webkit-box-flex: 1; |
| 114 display: none; | 114 display: none; |
| 115 } | 115 } |
| 116 | 116 |
| 117 tabpanels > [selected] { | 117 tabpanels > [selected] { |
| 118 display: block; | 118 display: block; |
| 119 } | 119 } |
| OLD | NEW |