devtools/client/themes/toolbars.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* Toolbars */
   6 .devtools-toolbar,
   7 .devtools-sidebar-tabs tabs {
   8   appearance: none;
   9   padding: 0;
  10   border-width: 0;
  11   border-bottom-width: 1px;
  12   border-style: solid;
  13   /* Reserve 1px for the border */
  14   height: calc(var(--theme-toolbar-height) + 1px);
  15   /* Line-height based vertical centering technique used in panels
  16      which don't use Flexbox (mostly XUL panels). */
  17   line-height: var(--theme-toolbar-height);
  18   box-sizing: border-box;
  19 }
  20
  21 .devtools-toolbar {
  22   padding: 0 3px;
  23 }
  24
  25 /* <thead> nor <tr> support border, we have to style the <td> */
  26 .devtools-toolbar td {
  27   border-bottom: 1px solid var(--theme-splitter-color);
  28 }
  29
  30 .devtools-toolbar-bottom {
  31   border-top-width: 1px;
  32   border-bottom: none;
  33 }
  34
  35 /* Input toolbars (toolbars that have a full height text input) */
  36
  37 .devtools-input-toolbar {
  38   display: flex;
  39   /* @TODO: Remove the !important in bug 1535956 */
  40   background-color: var(--theme-body-background) !important;
  41   color: inherit;
  42 }
  43
  44 .devtools-input-toolbar > .devtools-searchbox:first-child {
  45   margin-inline-start: -3px; /* This needs to match .devtools-toolbar's padding */
  46 }
  47
  48 .devtools-input-toolbar .devtools-button {
  49   /* adjust outline offset so it's not clipped */
  50   --theme-outline-offset: -2px;
  51 }
  52
  53 /* Expected space around a separator:
  54  * -----------------------
  55  *            4
  56  * [button] 2 | 2 [button]
  57  *            4
  58  * -----------------------
  59  * We're using a 1px horizontal margin, since buttons already have their own
  60  * 1px horizontal margin, and margins don't collapse between flex items.
  61  * Some separators may be using a bigger, 6px horizontal margin.
  62  */
  63 .devtools-separator {
  64   border-inline-start: 1px solid var(--theme-toolbar-separator);
  65   height: calc(100% - 8px);
  66   margin: 4px 1px;
  67 }
  68
  69 /* In-tools sidebar */
  70 .devtools-sidebar-tabs {
  71   appearance: none;
  72   margin: 0;
  73   height: 100%;
  74 }
  75
  76 .devtools-sidebar-tabs > tabpanels {
  77   appearance: none;
  78   background: transparent;
  79   padding: 0;
  80   border: 0;
  81 }
  82
  83 .theme-light .devtools-sidebar-tabs > tabpanels {
  84   background: var(--theme-sidebar-background);
  85   color: var(--theme-body-color);
  86 }
  87
  88 .devtools-sidebar-tabs tabs {
  89   position: static;
  90   font: inherit;
  91   margin-bottom: 0;
  92   overflow: hidden;
  93 }
  94
  95 .devtools-sidebar-alltabs {
  96   appearance: none;
  97   height: 24px;
  98   line-height: 24px;
  99   padding: 0 4px;
 100   margin: 0;
 101   border-width: 0 0 1px 0;
 102   border-inline-start-width: 1px;
 103   border-style: solid;
 104 }
 105
 106 .devtools-sidebar-alltabs .toolbarbutton-icon {
 107   display: none;
 108 }
 109
 110 .devtools-sidebar-tabs tabs > .tabs-right,
 111 .devtools-sidebar-tabs tabs > .tabs-left {
 112   display: none;
 113 }
 114
 115 .devtools-sidebar-tabs tabs > tab {
 116   appearance: none;
 117   /* We want to match the height of a toolbar with a toolbarbutton
 118    * First, we need to replicated the padding of toolbar (4px),
 119    * then we need to take the border of the buttons into account (1px).
 120    */
 121   padding: 0 3px;
 122   margin: 0;
 123   min-width: 78px;
 124   text-align: center;
 125   background-color: transparent;
 126   color: inherit;
 127   flex: 1;
 128   border-width: 0;
 129   border-inline-start-width: 1px;
 130   border-style: solid;
 131   border-radius: 0;
 132   position: static;
 133   text-shadow: none;
 134 }
 135
 136 .devtools-sidebar-tabs tabs > tab {
 137   border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1;
 138 }
 139
 140 .devtools-sidebar-tabs tabs > tab[selected],
 141 .devtools-sidebar-tabs tabs > tab[selected] + tab {
 142   border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
 143 }
 144
 145 .devtools-sidebar-tabs tabs > tab:first-child {
 146   border-inline-start-width: 0;
 147 }
 148
 149 .devtools-sidebar-tabs tabs > tab:hover {
 150   background: rgba(0, 0, 0, 0.12);
 151 }
 152
 153 .devtools-sidebar-tabs tabs > tab:hover:active {
 154   background: rgba(0, 0, 0, 0.2);
 155 }
 156
 157 .devtools-sidebar-tabs tabs > tab[selected],
 158 .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
 159   color: var(--theme-selection-color);
 160   background: var(--theme-selection-background);
 161 }
 162
 163 .devtools-invisible-splitter {
 164   border-color: transparent;
 165   background-color: transparent;
 166 }
 167
 168 splitter.devtools-horizontal-splitter,
 169 .devtools-side-splitter {
 170   background-color: var(--theme-splitter-color);
 171 }
 172
 173 /* Dropdown Menu Button */
 174 .devtools-dropdown-button {
 175   background-image: url("chrome://devtools/skin/images/select-arrow.svg") !important;
 176   background-position: right center !important;
 177   background-repeat: no-repeat !important;
 178   text-overflow: ellipsis;
 179   overflow: hidden;
 180   padding-inline: 2px 10px !important;
 181   fill: var(--theme-icon-color);
 182   -moz-context-properties: fill;
 183 }
 184
 185 .devtools-dropdown-button:dir(rtl) {
 186   background-position-x: left !important;
 187 }
 188
 189 .devtools-dropdown-button:not(:hover) {
 190   background-color: transparent;
 191 }
 192
 193 /* Style for title holder inside the dropdown menu button */
 194 .devtools-dropdown-button .title {
 195   display: inline-block;
 196   width: 100%;
 197   overflow: hidden;
 198   padding-top: 0.15em;
 199   text-align: center;
 200   text-overflow: ellipsis;
 201   white-space: nowrap;
 202 }