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-capped-toolbar-background);
  37   border-bottom-color: var(--theme-splitter-color);*/
  38 }
  39 div.devtools-tabbar {
  40   border-bottom: 3px solid #000000;
  41   display: flex;
  42 }
  43
  44 .toolbox-tabs-wrapper {
  45   position: relative;
  46   display: flex;
  47   flex: 1;
  48 }
  49
  50 #toolbox-tabs,
  51 .toolbox-tabs {
  52   margin: 0;
  53   padding-inline-start: 3px;
  54   margin-inline-start: 2px;
  55   background-color: #000000;
  56   color: #FFCF00;
  57   display: flex;
  58   flex: 1;
  59 }
  60
  61 /* Set flex attribute to Toolbox buttons and Picker container so,
  62    they don't overlapp with the tab bar */
  63 #toolbox-buttons {
  64   display: flex;
  65 }
  66 hbox#toolbox-buttons {
  67   margin-inline-end: 2px;
  68 }
  69
  70 #toolbox-picker-container {
  71   display: flex;
  72 }
  73
  74 #toolbox-buttons-end {
  75   display: flex;
  76   margin-inline-end: 2px;
  77 }
  78
  79 #toolbox-picker-container {
  80   display: flex;
  81 }
  82
  83 #toolbox-buttons-start {
  84   border: solid 0 var(--theme-splitter-color);
  85 /*  border-inline-end-width: 1px;*/
  86   display: flex;
  87 }
  88
  89 /* Toolbox tabs */
  90
  91 .devtools-tab {
  92 /*  -moz-appearance: none;
  93   -moz-binding: url("chrome://global/content/bindings/general.xml#control-item");
  94   -moz-box-align: center;*/
  95   min-width: 32px;
  96 /*  min-height: 24px;*/
  97   max-width: 100px;
  98   margin: 0;
  99   margin-inline-end: 3px;
 100   padding: 1px;
 101   padding-inline-start: 3px;
 102   padding-inline-end: 3px;
 103   border-radius: 8px 8px 0 0;
 104   border-width: 0;
 105 /*  border-inline-start-width: 1px;*/
 106   -moz-box-align: center;
 107   -moz-user-focus: normal;
 108   -moz-box-flex: 1;
 109
 110   color: var(--theme-button-color);
 111   background-color: var(--theme-button-background);
 112
 113   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
 114   white-space: nowrap;
 115   overflow: hidden;
 116   text-overflow: ellipsis;
 117   flex: 1;
 118   align-content: flex-start;
 119   display: flex;
 120   align-items: center;
 121 }
 122
 123 .devtools-tab:hover,
 124 .devtools-tab:hover:active {
 125   background-color: var(--theme-hover-background);
 126   color: var(--theme-hover-color);
 127 }
 128
 129 .devtools-tab:not([selected])[highlighted],
 130 .devtools-tab:not(.selected).highlighted {
 131   background-color: var(--theme-highlight-pink);
 132 }
 133
 134 .devtools-tab > image {
 135   border: none;
 136   margin: 0;
 137 /*  margin-inline-start: 4px;
 138   opacity: 0.6;*/
 139   max-height: 16px;
 140   width: 16px; /* Prevents collapse during theme switching */
 141 }
 142
 143 .devtools-tab > img {
 144   border: none;
 145   margin: 0;
 146 /*  margin-inline-start: 10px;
 147   opacity: 0.6;*/
 148   max-height: 16px;
 149   width: 16px; /* Prevents collapse during theme switching */
 150   vertical-align: middle;
 151   margin-inline-end: 3px;
 152 }
 153
 154
 155 .devtools-tab > label {
 156   white-space: nowrap;
 157 /*  margin: 0 4px;*/
 158 }
 159
 160 .devtools-tab:hover > image {
 161 /*  opacity: 0.8;*/
 162 }
 163
 164 .devtools-tab:active > image,
 165 .devtools-tab[selected] > image {
 166 /*  opacity: 1;*/
 167 }
 168
 169 .devtools-tab > spacer {
 170   max-width: 0;
 171   -moz-box-flex: 0;
 172 }
 173
 174 .devtools-tabbar .devtools-tab[selected],
 175 .devtools-tabbar .devtools-tab.selected {
 176   color: var(--theme-selection-color);
 177   background-color: var(--theme-selection-background);
 178 }
 179
 180 #toolbox-tabs .devtools-tab[selected],
 181 #toolbox-tabs .devtools-tab[highlighted] {
 182 }
 183
 184 #toolbox-tabs .devtools-tab[selected]:last-child,
 185 #toolbox-tabs .devtools-tab[highlighted]:last-child {
 186 }
 187
 188 #toolbox-tabs .devtools-tab[selected] + .devtools-tab,
 189 #toolbox-tabs .devtools-tab[highlighted] + .devtools-tab {
 190 }
 191
 192 #toolbox-tabs .devtools-tab:first-child[selected] {
 193 }
 194
 195 #toolbox-tabs .devtools-tab:last-child {
 196 }
 197
 198 .devtools-tab:not([highlighted]) > .highlighted-icon,
 199 .devtools-tab[selected] > .highlighted-icon,
 200 .devtools-tab:not([selected])[highlighted] > .default-icon {
 201   visibility: collapse;
 202 }
 203 .devtools-tab:not(.highlighted) > .highlighted-icon,
 204 .devtools-tab.selected > .highlighted-icon,
 205 .devtools-tab:not(.selected).highlighted > .default-icon {
 206   display: none;
 207 }
 208
 209
 210 /* The options tab is special - it doesn't have the same parent
 211    as the other tabs (toolbox-option-container vs toolbox-tabs) */
 212 #toolbox-option-container .devtools-tab:not([selected]) {
 213 /*  background-color: transparent;*/
 214 }
 215 #toolbox-option-container .devtools-tab {
 216 /*  border-color: transparent;
 217   border-width: 0;
 218   padding-inline-start: 1px;*/
 219 }
 220 #toolbox-tab-options > image {
 221 /*  margin: 0 8px;*/
 222   margin-inline-end: 3px;
 223 }
 224 #toolbox-tab-options {
 225   min-width: 20px;
 226 }
 227 #toolbox-tab-options > img {
 228   margin-inline-end: 0;
 229 }
 230 #toolbox-option-container {
 231   background-color: #000000;
 232   padding-inline-start: 3px;
 233   margin-inline-end: 1px;
 234 }
 235
 236 /* Toolbox controls */
 237
 238 #toolbox-controls, #toolbox-dock-buttons {
 239   display: flex;
 240 }
 241
 242 #toolbox-controls {
 243   margin-inline-end: 2px;
 244 }
 245
 246 #toolbox-controls > button,
 247 #toolbox-dock-buttons > button {
 248   -moz-appearance: none;
 249   -moz-user-focus: normal;
 250   border: none;
 251 /*  margin: 0 4px;*/
 252   min-width: 18px;
 253   width: 18px;
 254 }
 255
 256 #toolbox-close::before {
 257   background-image: var(--close-button-image);
 258 }
 259
 260 #toolbox-dock-bottom::before {
 261   background-image: var(--dock-bottom-image);
 262 }
 263
 264 #toolbox-dock-side::before {
 265   background-image: var(--dock-side-image);
 266 }
 267
 268 #toolbox-dock-window::before {
 269   background-image: var(--dock-undock-image);
 270 }
 271
 272 #toolbox-dock-bottom-minimize {
 273   /* Bug 1177463 - The minimize button is currently hidden until we agree on
 274      the UI for it, and until bug 1173849 is fixed too. */
 275   display: none;
 276 }
 277
 278 #toolbox-dock-bottom-minimize::before {
 279   background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png");
 280 }
 281
 282 #toolbox-dock-bottom-minimize.minimized::before {
 283   background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png");
 284 }
 285
 286 .devtools-separator {
 287   margin: 0 2px;
 288   width: 2px;
 289 }
 290
 291 #toolbox-buttons:empty + .devtools-separator,
 292 .devtools-separator[invisible] {
 293   visibility: hidden;
 294 }
 295
 296 #toolbox-controls-separator {
 297   margin: 0;
 298   width: 0;
 299 }
 300
 301 /* Command buttons */
 302
 303 .command-button {
 304   padding: 0;
 305   margin: 0;
 306   position: relative;
 307   -moz-user-focus: normal;
 308 }
 309
 310 .command-button::before {
 311 /*  opacity: 0.7;*/
 312 }
 313
 314 .command-button:hover {
 315 /*  background-color: var(--toolbar-tab-hover);*/
 316 }
 317
 318 .command-button:hover:active,
 319 .command-button[checked=true]:not(:hover) {
 320 /*  background-color: var(--toolbar-tab-hover-active)*/
 321 }
 322
 323 .command-button:hover::before {
 324 /*  opacity: 0.85;*/
 325 }
 326
 327 .command-button:hover:active::before,
 328 .command-button[checked=true]::before,
 329 .command-button[open=true]::before {
 330 /*  opacity: 1;*/
 331 }
 332
 333 #toolbox-close:hover::before,
 334 #toolbox-close:hover:active::before,
 335 .toolbox-dock-button:hover::before,
 336 .toolbox-dock-button:hover:active::before,
 337 .command-button:hover::before,
 338 .command-button:hover:active::before,
 339 .command-button[checked=true]::before,
 340 .command-button[open=true]::before,
 341 .command-button.checked::before,
 342 .command-button.open::before {
 343   filter: var(--checked-icon-filter);
 344 }
 345
 346 /* Command button images */
 347
 348 #command-button-paintflashing::before {
 349   background-image: var(--command-paintflashing-image);
 350 }
 351
 352 #command-button-screenshot::before {
 353   background-image: var(--command-screenshot-image);
 354 }
 355
 356 #command-button-responsive::before {
 357   background-image: var(--command-responsive-image);
 358 }
 359
 360 #command-button-scratchpad::before {
 361   background-image: var(--command-scratchpad-image);
 362 }
 363
 364 #command-button-pick::before {
 365   background-image: var(--command-pick-image);
 366 }
 367
 368 #command-button-splitconsole::before {
 369   background-image: var(--command-splitconsole-image);
 370 }
 371
 372 #command-button-noautohide::before {
 373   background-image: var(--command-noautohide-image);
 374 }
 375
 376 #command-button-eyedropper::before {
 377   background-image: var(--command-eyedropper-image);
 378 }
 379
 380 #command-button-rulers::before {
 381   background-image: var(--command-rulers-image);
 382 }
 383
 384 #command-button-measure::before {
 385   background-image: var(--command-measure-image);
 386 }
 387
 388 #command-button-frames::before {
 389   background-image: var(--command-frames-image);
 390 }
 391
 392 #command-button-frames {
 393   background-image: url("chrome://devtools/skin/images/dropmarker.svg");
 394   background-repeat: no-repeat;
 395   background-position: right;
 396
 397   /* Override background-size from the command-button.
 398    The drop down arrow is smaller */
 399   background-size: 8px 4px !important;
 400   min-width: 32px;
 401 }
 402
 403 #command-button-frames:-moz-dir(rtl) {
 404   background-position: left;
 405 }
 406
 407 /* Toolbox panels */
 408
 409 .toolbox-panel {
 410   display: -moz-box;
 411   -moz-box-flex: 1;
 412   visibility: collapse;
 413 }
 414
 415 .toolbox-panel[selected] {
 416   visibility: visible;
 417 }
 418
 419 /**
 420  * When panels are collapsed or hidden, making sure that they are also
 421  * inaccessible by keyboard. This is not the case by default because the are
 422  * predominantly hidden using visibility: collapse; style or collapsed
 423  * attribute.
 424  */
 425 .toolbox-panel *,
 426 #toolbox-panel-webconsole[collapsed] * {
 427   -moz-user-focus: ignore;
 428 }
 429
 430 /**
 431  * Enrure that selected toolbox panel's contents are keyboard accessible as they
 432  * are explicitly made not to be when hidden (default).
 433  */
 434 .toolbox-panel[selected] * {
 435   -moz-user-focus: normal;
 436 }