LCARStrek/devtools/common.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 @import url("splitters.css");
   7
   8 /* LCARS-specific rules that should be limited to toolbox but there's no other place to put them */
   9 window {
  10   padding: 0;
  11 }
  12
  13 notification {
  14   margin-bottom: 3px;
  15 }
  16
  17 /* End LCARStrek toolbox rules */
  18
  19 :root {
  20   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  21   --proportional-font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  22   --monospace-font-family: "Liberation Mono", Consolas, "Courier New", monospace;
  23   --monospace-font-size: 12px;
  24 }
  25
  26 .devtools-monospace {
  27   font-family: var(--monospace-font-family);
  28   font-size: var(--monospace-font-size);
  29 }
  30
  31
  32 /* Autocomplete Popup */
  33
  34 .devtools-autocomplete-popup {
  35   border-radius: 3px;
  36   overflow-x: hidden;
  37   max-height: 20rem;
  38
  39   /* Devtools autocompletes display technical english keywords and should be displayed
  40      using LTR direction. */
  41   direction: ltr !important;
  42 }
  43
  44 /* Reset list styles. */
  45 .devtools-autocomplete-popup ul {
  46   list-style: none;
  47 }
  48
  49 .devtools-autocomplete-popup ul,
  50 .devtools-autocomplete-popup li {
  51   margin: 0;
  52 }
  53
  54 .devtools-autocomplete-listbox {
  55   background-color: transparent;
  56   border-width: 0px !important;
  57   margin: 0;
  58 }
  59
  60 .devtools-autocomplete-listbox .autocomplete-item {
  61   width: 100%;
  62   background-color: transparent;
  63   border-radius: 4px;
  64 }
  65
  66 .devtools-autocomplete-listbox .autocomplete-selected {
  67 /*  background-color: rgba(0,0,0,0.2); */
  68 }
  69
  70 .devtools-autocomplete-listbox .autocomplete-item > .initial-value,
  71 .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value {
  72   margin: 0;
  73   padding: 0;
  74   cursor: default;
  75 }
  76
  77 .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count {
  78   text-align: end;
  79 }
  80
  81 /* Rest of the dark and light theme */
  82
  83 .devtools-autocomplete-popup,
  84 .CodeMirror-hints,
  85 .CodeMirror-Tern-tooltip {
  86   border: 1px solid #9C9CFF;
  87   background-color: #000000;
  88 }
  89
  90 /* Autocomplete list clone used for accessibility. */
  91
  92 .devtools-autocomplete-list-aria-clone {
  93   /* Cannot use display:none or visibility:hidden : screen readers ignore the element. */
  94   position: fixed;
  95   overflow: hidden;
  96   margin: 0;
  97   width: 0;
  98   height: 0;
  99 }
 100
 101 .devtools-autocomplete-list-aria-clone li {
 102   /* Prevent screen readers from prefacing every item with 'bullet'. */
 103   list-style-type: none;
 104 }
 105
 106 /* links to source code, like displaying `myfile.js:45` */
 107
 108 .devtools-source-link {
 109   font-family: var(--monospace-font-family);
 110   color: var(--theme-text-blue);
 111   cursor: pointer;
 112   white-space: nowrap;
 113   display: flex;
 114   text-decoration: none;
 115   font-size: 11px;
 116   width: 12em; /* probably should be changed for each tool */
 117 }
 118
 119 .devtools-source-link:hover {
 120   text-decoration: underline;
 121 }
 122
 123 .devtools-source-link > .filename {
 124   text-overflow: ellipsis;
 125   text-align: end;
 126   overflow: hidden;
 127   margin: 2px 0px;
 128   cursor: pointer;
 129 }
 130
 131 .devtools-source-link > .line-number {
 132   flex: none;
 133   margin: 2px 0px;
 134   cursor: pointer;
 135 }
 136
 137 /* Keyboard focus highlight styles */
 138
 139 :-moz-focusring {
 140   outline: var(--theme-focus-outline);
 141   outline-offset: -1px;
 142 }
 143
 144 textbox[focused="true"] {
 145   border-color: var(--theme-focus-border-color-textbox);
 146 /*  box-shadow: var(--theme-focus-box-shadow-textbox);*/
 147   transition: all 0.2s ease-in-out
 148 }
 149
 150 textbox :-moz-focusring {
 151   box-shadow: none;
 152   outline: none;
 153 }
 154
 155 /* Form fields should already have box-shadow hightlight */
 156 select:-moz-focusring,
 157 input[type="radio"]:-moz-focusring,
 158 input[type="checkbox"]:-moz-focusring,
 159 checkbox:-moz-focusring {
 160   outline: none;
 161 }
 162
 163 /* Toolbar buttons */
 164
 165 .devtools-menulist,
 166 .devtools-toolbarbutton,
 167 .devtools-button {
 168 }
 169
 170 .devtools-menulist,
 171 .devtools-toolbarbutton {
 172 }
 173
 174 .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
 175 .devtools-button::before {
 176   width: 16px;
 177   height: 16px;
 178 /*  transition: opacity 0.05s ease-in-out;*/
 179 }
 180
 181 /* HTML buttons */
 182 .devtools-button {
 183   margin: 0;
 184   padding: 0;
 185   border: none;
 186   border-radius: 3px;
 187   min-width: 18px;
 188   height: 100%;
 189   margin-inline-start: 2px;
 190   background: var(--theme-toolbar-background);
 191   color: var(--theme-body-color);
 192   /* The icon is absolutely positioned in the button using ::before */
 193   position: relative;
 194 }
 195
 196 .devtools-button:not([disabled]):hover {
 197   background: var(--theme-hover-background);
 198   color: var(--theme-hover-color);
 199 }
 200
 201 .devtools-button:not([disabled]):hover:active {
 202   background: var(--theme-active-background);
 203   color: var(--theme-active-color);
 204 }
 205
 206 /* Menu type buttons and checked states */
 207 .devtools-button[checked],
 208 .devtools-button.checked {
 209   background: var(--theme-selection-background);
 210   color: var(--theme-selection-color);
 211 }
 212
 213 .devtools-button::before {
 214   content: "";
 215   display: block;
 216   position: absolute;
 217   left: 50%;
 218   top: 50%;
 219   margin: -8px 0 0 -8px;
 220 /*  background-size: cover;
 221   background-repeat: no-repeat;*/
 222 /*  transition: opacity 0.05s ease-in-out;*/
 223 }
 224
 225 .devtools-button:-moz-focusring {
 226   outline: none;
 227 }
 228
 229 /* Standalone buttons */
 230 .devtools-button[standalone],
 231 .devtools-button[data-standalone],
 232 .devtools-toolbarbutton[standalone],
 233 .devtools-toolbarbutton[data-standalone],
 234 .menu-filter-button {
 235   border: none;
 236 /*  min-height: 32px; */
 237   font: inherit;
 238   background-color: var(--theme-button-background);
 239   color: var(--theme-button-color);
 240   border-radius: 300px;
 241 }
 242
 243 .devtools-button[standalone]:hover,
 244 .devtools-button[data-standalone]:hover,
 245 .devtools-toolbarbutton[standalone]:hover,
 246 .devtools-toolbarbutton[data-standalone]:hover,
 247 .menu-filter-button:hover {
 248   background-color: var(--theme-hover-background);
 249   color: var(--theme-hover-color);
 250 }
 251
 252 .devtools-button[standalone]:hover:active,
 253 .devtools-button[data-standalone]:hover:active,
 254 .devtools-toolbarbutton[standalone]:hover:active,
 255 .devtools-toolbarbutton[data-standalone]:hover:active,
 256 .menu-filter-button:hover:active {
 257   background-color: var(--theme-active-background);
 258   color: var(--theme-active-color);
 259 }
 260
 261 .menu-filter-button.checked {
 262   background: var(--theme-selection-background);
 263   color: var(--theme-selection-color);
 264 }
 265
 266 .menu-filter-button + .menu-filter-button {
 267   margin-inline-start: 2px;
 268 }
 269
 270 .devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
 271 }
 272
 273 .devtools-toolbarbutton[label][standalone] {
 274 }
 275
 276 .devtools-menulist,
 277 .devtools-toolbarbutton,
 278 .devtools-button {
 279   min-height: 18px;
 280 }
 281
 282 /* Icon button styles */
 283 .devtools-toolbarbutton:not([label]),
 284 .devtools-toolbarbutton[text-as-image] {
 285   min-width: 16px;
 286 }
 287
 288 .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
 289   display: none;
 290 }
 291
 292 .devtools-toolbar .devtools-toolbarbutton {
 293   margin-inline-start: 2px;
 294 }
 295
 296 .devtools-toolbarbutton > .toolbarbutton-icon {
 297 }
 298
 299 /* Menu button styles (eg. web console filters) */
 300 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
 301 /*  -moz-box-orient: horizontal; */
 302 }
 303
 304 .devtools-toolbarbutton[type=menu-button] {
 305 }
 306
 307 .devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
 308 }
 309
 310 .devtools-menulist > .menulist-dropmarker {
 311 }
 312
 313 .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
 314 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
 315 }
 316
 317 /* Icon-only buttons */
 318 .devtools-button:empty::before,
 319 .devtools-toolbarbutton:not([label]):not([disabled]) > image {
 320 /*  opacity: 0.8;*/
 321 }
 322
 323 .devtools-button:hover:empty::before,
 324 .devtools-button.checked:empty::before,
 325 .devtools-button[checked]:empty::before,
 326 .devtools-button[open]:empty::before,
 327 .devtools-button.checked::before,
 328 .devtools-toolbarbutton:not([label]):hover > image,
 329 .devtools-toolbarbutton:not([label])[checked=true] > image,
 330 .devtools-toolbarbutton:not([label])[open=true] > image {
 331 /*  opacity: 1;*/
 332 }
 333
 334 .devtools-button:disabled,
 335 .devtools-button[disabled],
 336 .devtools-toolbarbutton[disabled] {
 337   pointer-events: none;
 338 /*  opacity: 0.5 !important;*/
 339 }
 340
 341 .devtools-button[standalone]::before,
 342 .devtools-button[data-standalone]::before,
 343 .devtools-button:not([disabled]):hover::before,
 344 .devtools-button:not([disabled]):hover:active::before,
 345 .devtools-button[checked]:empty::before,
 346 .devtools-button[open]:empty::before,
 347 .devtools-toolbarbutton[standalone] > image,
 348 .devtools-toolbarbutton[data-standalone] > image,
 349 .devtools-toolbarbutton:not([disabled]):hover > image,
 350 .devtools-toolbarbutton:not([disabled]):hover:active > image,
 351 .devtools-toolbarbutton[checked=true] > image,
 352 .devtools-toolbarbutton[open=true] > image {
 353   filter: var(--checked-icon-filter);
 354 }
 355
 356 .devtools-button[disabled]::before,
 357 .devtools-toolbarbutton[disabled] > image {
 358   filter: url(images/filters.svg#disabled-icon-state);
 359 }
 360
 361 /* Icon-and-text buttons */
 362 .devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
 363   margin-inline-start: .5em !important;
 364   font-weight: 600;
 365 }
 366
 367 /* Text-only buttons */
 368 .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
 369 .devtools-toolbarbutton[data-text-only],
 370 .devtools-button:not(:empty),
 371 #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
 372 /*  background-color: rgba(0, 0, 0, .2); / Splitter */
 373 }
 374
 375 /* Text-only button states */
 376 .devtools-button:not(:empty):not(:disabled):hover,
 377 #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
 378 .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover {
 379 /*  background: rgba(0, 0, 0, .3); / Splitters */
 380 }
 381
 382 .devtools-button:not(:empty):not(:disabled):hover:active,
 383 #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
 384 .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active {
 385 /*  background: rgba(0, 0, 0, .4); / Splitters */
 386 }
 387
 388 .devtools-toolbarbutton:not([disabled])[label][checked=true],
 389 .devtools-toolbarbutton:not([disabled])[label][open],
 390 .devtools-button:not(:empty)[checked=true],
 391 #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked=true] {
 392 /*  background: rgba(29, 79, 115, .7); / Select highlight blue /
 393   color: var(--theme-selection-color); */
 394 }
 395
 396 .devtools-menulist[open=true],
 397 .devtools-toolbarbutton[open=true],
 398 .devtools-toolbarbutton[open=true]:hover,
 399 .devtools-toolbarbutton[open=true]:hover:active,
 400 .devtools-toolbarbutton[checked=true],
 401 .devtools-toolbarbutton[checked=true]:hover,
 402 #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
 403 /*  background: rgba(29, 79, 115, .8); / Select highlight blue /
 404   color: var(--theme-selection-color); */
 405 }
 406
 407 :root {
 408   --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
 409 }
 410
 411 .devtools-button.devtools-clear-icon::before {
 412   background-image: var(--clear-icon-url);
 413 }
 414
 415 .devtools-button.devtools-filter-icon::before {
 416   background-image: var(--filter-image);
 417 }
 418
 419 .devtools-toolbarbutton.devtools-clear-icon {
 420   list-style-image: var(--clear-icon-url);
 421 }
 422
 423 .devtools-option-toolbarbutton {
 424   list-style-image: var(--tool-options-image);
 425 }
 426
 427 .devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
 428 }
 429
 430 .devtools-toolbarbutton-group + .devtools-toolbarbutton {
 431 }
 432
 433 .devtools-separator + .devtools-toolbarbutton {
 434 }
 435
 436 /*
 437  * Filter buttons
 438  * @TODO : Fix when https://bugzilla.mozilla.org/show_bug.cgi?id=1255116 lands
 439  */
 440
 441 .menu-filter-button {
 442 /*  -moz-appearance: none;
 443   background: rgba(128,128,128,0.1);
 444   border: none;
 445   border-radius: 2px;
 446   min-width: 0;
 447   padding: 0 5px;
 448   margin: 2px;
 449   color: var(--theme-body-color);*/
 450 }
 451
 452 .menu-filter-button:hover {
 453 /*  background: rgba(128,128,128,0.2);*/
 454 }
 455
 456 .menu-filter-button:hover:active {
 457 /*  background-color: var(--theme-selection-background-semitransparent);*/
 458 }
 459
 460 .menu-filter-button:not(:active).checked {
 461   background-color: var(--theme-selection-background);
 462   color: var(--theme-selection-color);
 463 }
 464
 465 /* Text input */
 466
 467 .devtools-textinput,
 468 .devtools-searchinput,
 469 .devtools-filterinput {
 470 /*  -moz-appearance: none;
 471   margin: 1 3px;
 472   border: 1px solid;
 473   border-radius: 2px;
 474   padding: 4px 6px;
 475   border-color: var(--theme-splitter-color);
 476   font: message-box;*/
 477   margin-top: 0;
 478   margin-bottom: 0;
 479 }
 480
 481 :root[platform="mac"] .devtools-searchinput,
 482 :root[platform="mac"] .devtools-textinput {
 483 /*  border-radius: 20px;*/
 484 }
 485
 486 .devtools-searchinput,
 487 .devtools-filterinput {
 488 /*  margin-top: 1px;
 489   margin-bottom: 1px;
 490   padding: 0;*/
 491   padding-inline-start: 22px;
 492   padding-inline-end: 4px;
 493   background-position: 8px center;
 494   background-size: 11px 11px;
 495   background-repeat: no-repeat;
 496   font-size: inherit;
 497 }
 498
 499 /*
 500  * @TODO : has-clear-btn class was added for bug 1296187 and we should remove it
 501  *  once we have a standardized search and filter input across the toolboxes.
 502  */
 503 .has-clear-btn > .devtools-searchinput,
 504 .has-clear-btn > .devtools-filterinput {
 505   padding-inline-end: 23px;
 506 }
 507
 508 .devtools-searchinput {
 509   background-image: var(--magnifying-glass-image);
 510 }
 511
 512 .devtools-filterinput {
 513   background-image: var(--filter-image);
 514 }
 515
 516 .devtools-searchinput:-moz-locale-dir(rtl),
 517 .devtools-searchinput:dir(rtl),
 518 .devtools-filterinput:-moz-locale-dir(rtl),
 519 .devtools-filterinput:dir(rtl) {
 520   background-position: calc(100% - 8px) center;
 521 }
 522
 523 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon,
 524 .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
 525   visibility: hidden;
 526 }
 527
 528 .devtools-searchinput .textbox-input::placeholder,
 529 .devtools-filterinput .textbox-input::placeholder {
 530   font-style: normal;
 531 }
 532
 533 .devtools-plaininput {
 534   border-color: transparent;
 535   background-color: transparent;
 536
 537   color: var(--theme-highlight-gray);
 538 }
 539
 540 /* Searchbox is a div container element for a search input element */
 541 .devtools-searchbox {
 542   display: flex;
 543   flex: 1;
 544   position: relative;
 545 }
 546
 547 button + .devtools-searchbox {
 548   margin-inline-start: 2px;
 549 }
 550
 551 /* The spacing is accomplished with a padding on the searchbox */
 552 .devtools-searchbox > .devtools-textinput,
 553 .devtools-searchbox > .devtools-searchinput {
 554 }
 555
 556 .devtools-textinput:focus,
 557 .devtools-searchinput:focus,
 558 .devtools-filterinput:focus {
 559   border-color: var(--theme-focus-border-color-textbox);
 560 /*  box-shadow: var(--theme-focus-box-shadow-textbox);*/
 561   transition: all 0.2s ease-in-out;
 562   outline: none;
 563 }
 564
 565 /* Don't add 'double spacing' for inputs that are at beginning / end
 566    of a toolbar (since the toolbar has it's own spacing). */
 567 .devtools-toolbar > .devtools-textinput:first-child,
 568 .devtools-toolbar > .devtools-searchinput:first-child,
 569 .devtools-toolbar > .devtools-filterinput:first-child {
 570 }
 571 .devtools-toolbar > .devtools-textinput:last-child,
 572 .devtools-toolbar > .devtools-searchinput:last-child,
 573 .devtools-toolbar > .devtools-filterinput:last-child {
 574 }
 575 .devtools-toolbar > .devtools-searchbox:first-child {
 576 }
 577 .devtools-toolbar > .devtools-searchbox:last-child {
 578 }
 579
 580 .devtools-rule-searchbox {
 581   -moz-box-flex: 1;
 582   width: 100%;
 583 /*  font: inherit;*/
 584 }
 585
 586 .devtools-rule-searchbox[filled] {
 587   background-color: var(--searchbox-background-color);
 588   border-color: var(--searchbox-border-color);
 589 }
 590
 591 .devtools-style-searchbox-no-match {
 592   background-color: var(--searchbox-no-match-background-color) !important;
 593   border-color: var(--searchbox-no-match-border-color) !important;
 594 }
 595
 596 .devtools-searchinput-clear {
 597   position: absolute;
 598   top: 3.5px;
 599   offset-inline-end: 7px;
 600   padding: 0;
 601   border: 0;
 602   width: 16px;
 603   height: 16px;
 604   background-position: 0 0;
 605   background-repeat: no-repeat;
 606   background-color: transparent;
 607 }
 608
 609 .devtools-searchinput-clear:dir(rtl) {
 610   right: unset;
 611   left: 7px;
 612 }
 613
 614 .devtools-searchinput-clear {
 615   background-image: url("chrome://devtools/skin/images/search-clear.svg");
 616 }
 617
 618 .devtools-style-searchbox-no-match + .devtools-searchinput-clear {
 619   background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important;
 620 }
 621
 622 .devtools-searchinput-clear:hover {
 623   background-position: -16px 0;
 624 }
 625
 626 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
 627 .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
 628   list-style-image: url("chrome://devtools/skin/images/search-clear.svg");
 629   -moz-image-region: rect(0, 16px, 16px, 0);
 630 }
 631
 632 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover,
 633 .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
 634   -moz-image-region: rect(0, 32px, 16px, 16px);
 635 }
 636
 637 /* Throbbers */
 638
 639 .devtools-throbber::before {
 640   content: "";
 641   display: inline-block;
 642   vertical-align: bottom;
 643   margin-inline-end: 0.5em;
 644   width: 1em;
 645   height: 1em;
 646   border: 2px solid currentColor;
 647   border-right-color: transparent;
 648   border-radius: 50%;
 649   animation: 1.1s linear throbber-spin infinite;
 650 }
 651
 652 @keyframes throbber-spin {
 653   from {
 654     transform: none;
 655   }
 656   to {
 657     transform: rotate(360deg);
 658   }
 659 }