third_party/WebKit/Source/devtools/front_end/ui/tabbedPane.css

   1 /*
   2  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
   4  * Copyright (C) 2011 Google Inc. All rights reserved.
   5  *
   6  * Redistribution and use in source and binary forms, with or without
   7  * modification, are permitted provided that the following conditions are
   8  * met:
   9  *
  10  * 1. Redistributions of source code must retain the above copyright
  11  * notice, this list of conditions and the following disclaimer.
  12  *
  13  * 2. Redistributions in binary form must reproduce the above
  14  * copyright notice, this list of conditions and the following disclaimer
  15  * in the documentation and/or other materials provided with the
  16  * distribution.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY GOOGLE INC. AND ITS CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GOOGLE INC.
  22  * OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 .tabbed-pane {
  32     flex: auto;
  33     overflow: hidden;
  34 }
  35
  36 .tabbed-pane-content {
  37     position: relative;
  38     overflow: auto;
  39     flex: auto;
  40     display: flex;
  41     flex-direction: column;
  42 }
  43
  44 .tabbed-pane-content.has-no-tabs {
  45     background-color: lightgray;
  46 }
  47
  48 .tabbed-pane-placeholder {
  49     font-size: 14px;
  50     text-align: center;
  51     margin-top: 20px;
  52     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
  53 }
  54
  55 .tabbed-pane-header {
  56     display: flex;
  57     flex: 0 0 27px;
  58     border-bottom: 1px solid #ccc;
  59     overflow: hidden;
  60     width: 100%;
  61     background-color: #f3f3f3;
  62 }
  63
  64 .tabbed-pane-header-contents {
  65     flex: auto;
  66     pointer-events: none;
  67     margin-left: 5px;
  68     position: relative;
  69 }
  70
  71 .tabbed-pane-header-contents > * {
  72     pointer-events: initial;
  73 }
  74
  75 .tabbed-pane-header-tab-icon {
  76     margin-right: 2px;
  77 }
  78
  79 .tabbed-pane-header-tab {
  80     float: left;
  81     margin-top: 2px;
  82     padding: 2px 4px 2px 4px;
  83     height: 24px;
  84     border: 1px solid transparent;
  85     border-bottom: none;
  86     line-height: 15px;
  87     white-space: nowrap;
  88     cursor: default;
  89     display: flex;
  90     align-items: center;
  91     color: #5a5a5a;
  92 }
  93
  94 .tabbed-pane-header-tab:hover {
  95     color: #333;
  96 }
  97
  98 .tabbed-pane-header-tab-title {
  99     text-overflow: ellipsis;
 100     overflow: hidden;
 101 }
 102
 103 .tabbed-pane-header-tab.measuring {
 104     visibility: hidden;
 105 }
 106
 107 .tabbed-pane-header-tab.selected {
 108     border: 1px solid #ccc;
 109     border-bottom: none;
 110     color: #333;
 111 }
 112
 113 .tabbed-pane-header-tab.selected {
 114     background: white;
 115     border-top-color: #ccc;
 116 }
 117
 118 .tabbed-pane-header-tab.dragging {
 119     position: relative;
 120 }
 121
 122 .tabbed-pane-header-tab .tabbed-pane-close-button {
 123     display: inline-block;
 124     position: relative;
 125     top: 2px;
 126     left: 1px;
 127     margin-left: 2px;
 128     margin-top: -3px;
 129     visibility: hidden;
 130 }
 131
 132 .tabbed-pane-header-tab:hover .tabbed-pane-close-button,
 133 .tabbed-pane-header-tab.selected .tabbed-pane-close-button {
 134     visibility: visible;
 135 }
 136
 137 .tabbed-pane-header-tabs-drop-down-container {
 138     float: left;
 139     position: relative;
 140     vertical-align: bottom;
 141     line-height: 24px;
 142     opacity: 0.8;
 143     color: inherit;
 144     font-size: 133%;
 145     cursor: pointer;
 146 }
 147
 148 .tabbed-pane-header-tabs-drop-down-container > .glyph {
 149     height: 26px;
 150     background-color: hsla(0,0%,20%,1);
 151     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
 152     -webkit-mask-position: -68px -143px;
 153     -webkit-mask-size: 352px 168px;
 154     width: 24px;
 155 }
 156
 157 @media (-webkit-min-device-pixel-ratio: 1.5) {
 158 .tabbed-pane-header-tabs-drop-down-container {
 159     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 160 }
 161 } /* media */
 162
 163 .tabbed-pane-header-tabs-drop-down-container:hover {
 164     background-color: rgb(229, 229, 229);
 165 }
 166
 167 .tabbed-pane-header-tabs-drop-down-container.measuring {
 168     visibility: hidden;
 169 }
 170
 171 .tabbed-pane-header-tabs-drop-down-container:hover {
 172     opacity: 1.0;
 173 }
 174
 175 .tabbed-pane-header-tabs-drop-down-container:active {
 176     opacity: 0.8;
 177 }
 178
 179 /* Web page style */
 180
 181 .tabbed-pane-shadow.vertical-tab-layout {
 182     flex-direction: row !important;
 183 }
 184
 185 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header {
 186     background-color: transparent;
 187     border: none transparent !important;
 188     width: auto;
 189     flex: 0 0 auto;
 190     flex-direction: column;
 191     padding-top: 10px;
 192 }
 193
 194 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-content {
 195     padding: 10px 10px 10px 0;
 196     overflow-x: hidden;
 197 }
 198
 199 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-contents {
 200     margin: 0;
 201     flex: none;
 202 }
 203
 204 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tabs {
 205     display: flex;
 206     flex-direction: column;
 207     width: 120px;
 208 }
 209
 210 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab {
 211     background-color: transparent;
 212     border: none transparent;
 213     font-weight: normal;
 214     text-shadow: none;
 215     color: #777;
 216     height: 26px;
 217     padding-left: 10px;
 218     border-left: 6px solid transparent;
 219     margin: 0;
 220     display: flex;
 221     align-items: center;
 222 }
 223
 224 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab:not(.selected) {
 225     cursor: pointer !important;
 226 }
 227
 228 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab.selected {
 229     color: inherit;
 230     border: none transparent;
 231     border-left: 6px solid #666;
 232 }
 233
 234 .tabbed-pane-tab-slider {
 235     height: 2px;
 236     position: absolute;
 237     bottom: -1px;
 238     background-color: #3E82F7;
 239     left: 0;
 240     z-index: 50;
 241     transform-origin: 0 100%;
 242     transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
 243     visibility: hidden;
 244     border-top: 1px solid hsl(218, 82%, 78%);
 245 }
 246
 247 @media (-webkit-min-device-pixel-ratio: 1.5) {
 248     .tabbed-pane-tab-slider {
 249         border-top: none;
 250     }
 251 }
 252
 253 .tabbed-pane-tab-slider.enabled {
 254     visibility: visible;
 255 }
 256
 257 .tabbed-pane-header.tabbed-pane-no-header-background {
 258     background-color: transparent;
 259 }