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