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

   1 /*
   2  * Copyright (C) 2011 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  * 1. Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *
  11  * 2. Redistributions in binary form must reproduce the above
  12  * copyright notice, this list of conditions and the following disclaimer
  13  * in the documentation and/or other materials provided with the
  14  * distribution.
  15  *
  16  * THIS SOFTWARE IS PROVIDED BY GOOGLE INC. AND ITS CONTRIBUTORS
  17  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  18  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  19  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GOOGLE INC.
  20  * OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  21  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  22  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  23  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  24  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  25  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  26  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  27  */
  28
  29 :host {
  30     overflow: hidden;
  31 }
  32
  33 .shadow-split-widget {
  34     display: flex;
  35     overflow: hidden;
  36 }
  37
  38 .shadow-split-widget-contents {
  39     display: flex;
  40     position: relative;
  41     flex-direction: column;
  42 }
  43
  44 .shadow-split-widget-sidebar {
  45     flex: none;
  46 }
  47
  48 .shadow-split-widget-main, .shadow-split-widget-sidebar.maximized {
  49     flex: auto;
  50 }
  51
  52 .shadow-split-widget.hbox > .shadow-split-widget-resizer {
  53     position: absolute;
  54     top: 0;
  55     bottom: 0;
  56     width: 6px;
  57     z-index: 500;
  58 }
  59
  60 .shadow-split-widget.vbox > .shadow-split-widget-resizer {
  61     position: absolute;
  62     left: 0;
  63     right: 0;
  64     height: 6px;
  65     z-index: 500;
  66 }
  67
  68 .shadow-split-widget.hbox.shadow-split-widget-first-is-sidebar {
  69     flex-direction: row-reverse !important;
  70 }
  71
  72 .shadow-split-widget.vbox.shadow-split-widget-first-is-sidebar {
  73     flex-direction: column-reverse !important;
  74 }
  75
  76 .shadow-split-widget-resizer-border {
  77     pointer-events: none;
  78 }
  79
  80 .shadow-split-widget.vbox > .shadow-split-widget-sidebar:not(.maximized) {
  81     border: 0;
  82     border-top: 1px solid rgb(64%, 64%, 64%);
  83 }
  84
  85 .shadow-split-widget.vbox.shadow-split-widget-first-is-sidebar > .shadow-split-widget-sidebar:not(.maximized) {
  86     border: 0;
  87     border-bottom: 1px solid rgb(64%, 64%, 64%);
  88 }
  89
  90 .shadow-split-widget.hbox > .shadow-split-widget-sidebar:not(.maximized) {
  91     border: 0;
  92     border-left: 1px solid rgb(64%, 64%, 64%);
  93 }
  94
  95 .shadow-split-widget.hbox.shadow-split-widget-first-is-sidebar > .shadow-split-widget-sidebar:not(.maximized) {
  96     border: 0;
  97     border-right: 1px solid rgb(64%, 64%, 64%);
  98 }
  99
 100 .shadow-split-widget button.sidebar-show-hide-button {
 101     position: absolute;
 102     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
 103     -webkit-mask-size: 352px 168px;
 104     height: 16px;
 105     width: 16px;
 106     border: none;
 107     z-index: 20;
 108     background-color: #5a5a5a;
 109 }
 110
 111 .shadow-split-widget button.sidebar-show-hide-button:hover {
 112     background-color: #333;
 113 }
 114
 115 .shadow-split-widget button.sidebar-show-hide-button:active {
 116     background-color: #5a5a5a;
 117 }
 118
 119 .shadow-split-widget button.sidebar-show-hide-button:disabled {
 120     background-color: rgba(0, 0, 0, 0.35);
 121 }
 122
 123 @media (-webkit-min-device-pixel-ratio: 1.5) {
 124 .shadow-split-widget button.sidebar-show-hide-button {
 125     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 126 }
 127 } /* media */
 128
 129 .shadow-split-widget button.left-sidebar-show-hide-button,
 130 .shadow-split-widget button.top-sidebar-show-hide-button {
 131     top: 5px;
 132     left: 5px;
 133 }
 134
 135 :host-context(.material) .shadow-split-widget button.left-sidebar-show-hide-button,
 136 :host-context(.material) .shadow-split-widget button.top-sidebar-show-hide-button {
 137     top: 5px;
 138 }
 139
 140 .shadow-split-widget button.right-sidebar-show-hide-button {
 141     top: 5px;
 142     right:4px;
 143 }
 144
 145 :host-context(.material) .shadow-split-widget button.right-sidebar-show-hide-button {
 146     top: 5px;
 147     right: 5px;
 148 }
 149
 150 .shadow-split-widget button.bottom-sidebar-show-hide-button {
 151     bottom: 5px;
 152     right: 3px;
 153 }
 154
 155 .shadow-split-widget button.left-sidebar-show-hide-button.toggled-show {
 156     -webkit-mask-position: -168px -76px; /* |> */
 157 }
 158
 159 .shadow-split-widget button.left-sidebar-show-hide-button.toggled-hide {
 160     -webkit-mask-position: -199px -76px; /* |< */
 161 }
 162
 163 .shadow-split-widget button.right-sidebar-show-hide-button.toggled-show {
 164     -webkit-mask-position: -296px -76px; /* <| */
 165 }
 166
 167 .shadow-split-widget button.right-sidebar-show-hide-button.toggled-hide {
 168     -webkit-mask-position: -264px -76px; /* >| */
 169 }
 170
 171 .shadow-split-widget button.top-sidebar-show-hide-button.toggled-show {
 172     -webkit-mask-position: -168px -76px; /* |> */
 173     transform: rotate(90deg);
 174 }
 175
 176 .shadow-split-widget button.top-sidebar-show-hide-button.toggled-hide {
 177     -webkit-mask-position: -199px -76px; /* |< */
 178     transform: rotate(90deg);
 179 }
 180
 181 .shadow-split-widget button.bottom-sidebar-show-hide-button.toggled-show {
 182     -webkit-mask-position: -296px -76px; /* <| */
 183     transform: rotate(90deg);
 184 }
 185
 186 .shadow-split-widget button.bottom-sidebar-show-hide-button.toggled-hide {
 187     -webkit-mask-position: -264px -76px; /* >| */
 188     transform: rotate(90deg);
 189 }