LCARStrek/devtools/toolbox.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 :root {
   7   --close-button-image: url(chrome://devtools/skin/images/close.svg);
   8   --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
   9   --dock-side-image: url(chrome://devtools/skin/images/dock-side.svg);
  10   --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg);
  11
  12   --command-paintflashing-image: url(images/command-paintflashing.svg);
  13   --command-screenshot-image: url(images/command-screenshot.svg);
  14   --command-responsive-image: url(images/command-responsivemode.svg);
  15   --command-scratchpad-image: url(images/command-scratchpad.svg);
  16   --command-pick-image: url(images/command-pick.svg);
  17   --command-frames-image: url(images/command-frames.svg);
  18   --command-splitconsole-image: url(images/command-console.svg);
  19   --command-noautohide-image: url(images/command-noautohide.svg);
  20   --command-rulers-image: url(images/command-rulers.svg);
  21   --command-measure-image: url(images/command-measure.svg);
  22 }
  23
  24 #toolbox-container {
  25  padding-top: 3px;
  26 }
  27
  28 /* Toolbox tabbar */
  29
  30 .devtools-tabbar {
  31 /*  -moz-appearance: none;
  32   min-height: 24px;
  33   border: 0px solid;
  34   border-bottom-width: 1px;
  35   padding: 0;
  36   background: var(--theme-tab-toolbar-background);
  37   border-bottom-color: var(--theme-splitter-color);*/
  38 }
  39
  40 #toolbox-tabs {
  41   margin: 0;
  42   padding-inline-start: 3px;
  43   margin-inline-start: 2px;
  44   background-color: #000000;
  45   color: #FFCF00;
  46 }
  47
  48 /* Set flex attribute to Toolbox buttons and Picker container so,
  49    they don't overlapp with the tab bar */
  50 #toolbox-buttons {
  51   display: flex;
  52 }
  53
  54 #toolbox-picker-container {
  55   display: flex;
  56 }
  57
  58 /* Toolbox tabs */
  59
  60 .devtools-tab {
  61 /*  -moz-appearance: none;
  62   -moz-binding: url("chrome://global/content/bindings/general.xml#control-item");
  63   -moz-box-align: center;*/
  64   min-width: 32px;
  65 /*  min-height: 24px;*/
  66   max-width: 100px;
  67   margin: 0;
  68   margin-inline-end: 3px;
  69   padding: 1px;
  70   padding-inline-start: 3px;
  71   border-radius: 8px 8px 0 0;
  72 /*  border-width: 0;
  73   border-inline-start-width: 1px;*/
  74   -moz-box-align: center;
  75   -moz-user-focus: normal;
  76   -moz-box-flex: 1;
  77
  78   color: var(--theme-button-color);
  79   background-color: var(--theme-button-background);
  80 }
  81
  82 .devtools-tab:hover,
  83 .devtools-tab:hover:active {
  84   background-color: var(--theme-hover-background);
  85   color: var(--theme-hover-color);
  86 }
  87
  88 .devtools-tab:not([selected])[highlighted] {
  89   background-color: var(--theme-highlight-pink);
  90 }
  91
  92 .devtools-tab > image {
  93   border: none;
  94   margin: 0;
  95 /*  margin-inline-start: 4px;
  96   opacity: 0.6;*/
  97   max-height: 16px;
  98   width: 16px; /* Prevents collapse during theme switching */
  99 }
 100
 101 .devtools-tab > label {
 102   white-space: nowrap;
 103 /*  margin: 0 4px;*/
 104 }
 105
 106 .devtools-tab:hover > image {
 107 /*  opacity: 0.8;*/
 108 }
 109
 110 .devtools-tab:active > image,
 111 .devtools-tab[selected] > image {
 112 /*  opacity: 1;*/
 113 }
 114
 115 .devtools-tab > spacer {
 116   max-width: 0;
 117   -moz-box-flex: 0;
 118 }
 119
 120 .devtools-tabbar .devtools-tab[selected] {
 121   color: var(--theme-selection-color);
 122   background-color: var(--theme-selection-background);
 123 }
 124
 125 #toolbox-tabs .devtools-tab[selected],
 126 #toolbox-tabs .devtools-tab[highlighted] {
 127 }
 128
 129 #toolbox-tabs .devtools-tab[selected]:last-child,
 130 #toolbox-tabs .devtools-tab[highlighted]:last-child {
 131 }
 132
 133 #toolbox-tabs .devtools-tab[selected] + .devtools-tab,
 134 #toolbox-tabs .devtools-tab[highlighted] + .devtools-tab {
 135 }
 136
 137 #toolbox-tabs .devtools-tab:first-child[selected] {
 138 }
 139
 140 #toolbox-tabs .devtools-tab:last-child {
 141 }
 142
 143 .devtools-tab:not([highlighted]) > .highlighted-icon,
 144 .devtools-tab[selected] > .highlighted-icon,
 145 .devtools-tab:not([selected])[highlighted] > .default-icon {
 146   visibility: collapse;
 147 }
 148
 149 /* The options tab is special - it doesn't have the same parent
 150    as the other tabs (toolbox-option-container vs toolbox-tabs) */
 151 #toolbox-option-container .devtools-tab:not([selected]) {
 152 /*  background-color: transparent;*/
 153 }
 154 #toolbox-option-container .devtools-tab {
 155 /*  border-color: transparent;
 156   border-width: 0;
 157   padding-inline-start: 1px;*/
 158 }
 159 #toolbox-tab-options > image {
 160 /*  margin: 0 8px;*/
 161   margin-inline-end: 3px;
 162 }
 163 #toolbox-tab-options {
 164   min-width: 20px;
 165 }
 166 #toolbox-option-container {
 167   background-color: #000000;
 168   padding-inline-start: 3px;
 169   margin-inline-end: 1px;
 170 }
 171
 172 /* Toolbox controls */
 173
 174 #toolbox-controls > button,
 175 #toolbox-dock-buttons > button {
 176   -moz-appearance: none;
 177   -moz-user-focus: normal;
 178   border: none;
 179 /*  margin: 0 4px;*/
 180   min-width: 18px;
 181   width: 18px;
 182 }
 183
 184 #toolbox-close::before {
 185   background-image: var(--close-button-image);
 186 }
 187
 188 #toolbox-dock-bottom::before {
 189   background-image: var(--dock-bottom-image);
 190 }
 191
 192 #toolbox-dock-side::before {
 193   background-image: var(--dock-side-image);
 194 }
 195
 196 #toolbox-dock-window::before {
 197   background-image: var(--dock-undock-image);
 198 }
 199
 200 #toolbox-dock-bottom-minimize {
 201   /* Bug 1177463 - The minimize button is currently hidden until we agree on
 202      the UI for it, and until bug 1173849 is fixed too. */
 203   display: none;
 204 }
 205
 206 #toolbox-dock-bottom-minimize::before {
 207   background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png");
 208 }
 209
 210 #toolbox-dock-bottom-minimize.minimized::before {
 211   background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png");
 212 }
 213
 214 .devtools-separator {
 215   margin: 0 2px;
 216   width: 2px;
 217 }
 218
 219 #toolbox-buttons:empty + .devtools-separator,
 220 .devtools-separator[invisible] {
 221   visibility: hidden;
 222 }
 223
 224 #toolbox-controls-separator {
 225   margin: 0;
 226 }
 227
 228 /* Command buttons */
 229
 230 .command-button {
 231   padding: 0;
 232   margin: 0;
 233   position: relative;
 234   -moz-user-focus: normal;
 235 }
 236
 237 .command-button::before {
 238 /*  opacity: 0.7;*/
 239 }
 240
 241 .command-button:hover {
 242 /*  background-color: var(--toolbar-tab-hover);*/
 243 }
 244
 245 .command-button:hover:active,
 246 .command-button[checked=true]:not(:hover) {
 247 /*  background-color: var(--toolbar-tab-hover-active)*/
 248 }
 249
 250 .command-button:hover::before {
 251 /*  opacity: 0.85;*/
 252 }
 253
 254 .command-button:hover:active::before,
 255 .command-button[checked=true]::before,
 256 .command-button[open=true]::before {
 257 /*  opacity: 1;*/
 258 }
 259
 260 #toolbox-close:hover::before,
 261 #toolbox-close:hover:active::before,
 262 .toolbox-dock-button:hover::before,
 263 .toolbox-dock-button:hover:active::before,
 264 .command-button:hover::before,
 265 .command-button:hover:active::before,
 266 .command-button[checked=true]::before,
 267 .command-button[open=true]::before {
 268   filter: var(--checked-icon-filter);
 269 }
 270
 271 /* Command button images */
 272
 273 #command-button-paintflashing::before {
 274   background-image: var(--command-paintflashing-image);
 275 }
 276
 277 #command-button-screenshot::before {
 278   background-image: var(--command-screenshot-image);
 279 }
 280
 281 #command-button-responsive::before {
 282   background-image: var(--command-responsive-image);
 283 }
 284
 285 #command-button-scratchpad::before {
 286   background-image: var(--command-scratchpad-image);
 287 }
 288
 289 #command-button-pick::before {
 290   background-image: var(--command-pick-image);
 291 }
 292
 293 #command-button-splitconsole::before {
 294   background-image: var(--command-splitconsole-image);
 295 }
 296
 297 #command-button-noautohide::before {
 298   background-image: var(--command-noautohide-image);
 299 }
 300
 301 #command-button-eyedropper::before {
 302   background-image: var(--command-eyedropper-image);
 303 }
 304
 305 #command-button-rulers::before {
 306   background-image: var(--command-rulers-image);
 307 }
 308
 309 #command-button-measure::before {
 310   background-image: var(--command-measure-image);
 311 }
 312
 313 #command-button-frames::before {
 314   background-image: var(--command-frames-image);
 315 }
 316
 317 #command-button-frames {
 318   background-image: url("chrome://devtools/skin/images/dropmarker.svg");
 319   background-repeat: no-repeat;
 320   background-position: right;
 321
 322   /* Override background-size from the command-button.
 323    The drop down arrow is smaller */
 324   background-size: 8px 4px !important;
 325   min-width: 32px;
 326 }
 327
 328 #command-button-frames:-moz-dir(rtl) {
 329   background-position: left;
 330 }
 331
 332 /* Toolbox panels */
 333
 334 .toolbox-panel {
 335   display: -moz-box;
 336   -moz-box-flex: 1;
 337   visibility: collapse;
 338 }
 339
 340 .toolbox-panel[selected] {
 341   visibility: visible;
 342 }
 343
 344 /**
 345  * When panels are collapsed or hidden, making sure that they are also
 346  * inaccessible by keyboard. This is not the case by default because the are
 347  * predominantly hidden using visibility: collapse; style or collapsed
 348  * attribute.
 349  */
 350 .toolbox-panel *,
 351 #toolbox-panel-webconsole[collapsed] * {
 352   -moz-user-focus: ignore;
 353 }
 354
 355 /**
 356  * Enrure that selected toolbox panel's contents are keyboard accessible as they
 357  * are explicitly made not to be when hidden (default).
 358  */
 359 .toolbox-panel[selected] * {
 360   -moz-user-focus: normal;
 361 }