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