devtools.css (16053B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 /* Responsive Mode */ 6 7 .browserContainer[responsivemode] { 8 background-color: #181411; 9 padding: 0 20px 20px 20px; 10 } 11 12 .browserStack[responsivemode] { 13 box-shadow: 0 0 7px black; 14 } 15 16 .devtools-responsiveui-toolbar { 17 -moz-appearance: none; 18 background: transparent; 19 /* text color is textColor from dark theme, since no theme is applied to 20 * the responsive toolbar. 21 */ 22 color: hsl(210,30%,85%); 23 margin: 10px 0; 24 padding: 0; 25 box-shadow: none; 26 border-bottom-width: 0; 27 } 28 29 .devtools-responsiveui-textinput { 30 -moz-appearance: none; 31 background: #000; 32 color: #bfbbb6; 33 border: 1px solid #111; 34 border-radius: 2px; 35 padding: 0 5px; 36 width: 200px; 37 margin: 0; 38 } 39 40 .devtools-responsiveui-textinput[attention] { 41 border-color: #38ace6; 42 background: rgba(56,172,230,0.4); 43 } 44 45 .devtools-responsiveui-menulist, 46 .devtools-responsiveui-toolbarbutton { 47 -moz-appearance: none; 48 -moz-box-align: center; 49 min-width: 32px; 50 min-height: 22px; 51 text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); 52 border: 1px solid hsla(210,8%,5%,.45); 53 border-radius: 0; 54 background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box; 55 box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15); 56 margin: 0 3px; 57 color: inherit; 58 } 59 60 .devtools-responsiveui-menulist .menulist-editable-box { 61 -moz-appearance: none; 62 background-color: transparent; 63 } 64 65 .devtools-responsiveui-menulist > .menulist-editable-box > .menulist-editable-input { 66 -moz-appearance: none; 67 color: hsl(210,30%,85%); 68 text-align: center; 69 } 70 71 .devtools-responsiveui-menulist > .menulist-editable-box > .menulist-editable-input::-moz-selection { 72 background: hsla(212,7%,57%,.35); 73 } 74 75 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon { 76 width: 16px; 77 height: 16px; 78 } 79 80 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button { 81 -moz-box-orient: horizontal; 82 } 83 84 .devtools-responsiveui-menulist:-moz-focusring, 85 .devtools-responsiveui-toolbarbutton:-moz-focusring { 86 outline: 1px dotted hsla(210,30%,85%,0.7); 87 outline-offset: -4px; 88 } 89 90 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text { 91 display: none; 92 } 93 94 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active { 95 border-color: hsla(210,8%,5%,.6); 96 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3)); 97 box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); 98 } 99 100 .devtools-responsiveui-menulist[open=true], 101 .devtools-responsiveui-toolbarbutton[open=true], 102 .devtools-responsiveui-toolbarbutton[checked=true] { 103 border-color: hsla(210,8%,5%,.6) !important; 104 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4)); 105 box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); 106 } 107 108 .devtools-responsiveui-toolbarbutton[checked=true] { 109 color: hsl(208,100%,60%); 110 } 111 112 .devtools-responsiveui-toolbarbutton[checked=true]:hover { 113 background-color: transparent !important; 114 } 115 116 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active { 117 background-color: hsla(210,8%,5%,.2) !important; 118 } 119 120 .devtools-responsiveui-menulist > .menulist-label-box { 121 text-align: center; 122 } 123 124 .devtools-responsiveui-menulist > .menulist-dropmarker { 125 -moz-appearance: none; 126 display: -moz-box; 127 background-color: transparent; 128 list-style-image: url("chrome://devtools/skin/images/dropmarker.svg"); 129 -moz-box-align: center; 130 border-width: 0; 131 min-width: 16px; 132 } 133 134 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { 135 -moz-appearance: none; 136 color: inherit; 137 border-width: 0; 138 border-inline-end: 1px solid hsla(210,8%,5%,.45); 139 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15); 140 } 141 142 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button { 143 box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15); 144 } 145 146 .devtools-responsiveui-toolbarbutton[type=menu-button] { 147 padding: 0 1px; 148 -moz-box-align: stretch; 149 } 150 151 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, 152 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { 153 -moz-appearance: none !important; 154 list-style-image: url("chrome://devtools/skin/images/dropmarker.svg"); 155 -moz-box-align: center; 156 padding: 0 3px; 157 } 158 159 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child, 160 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child { 161 margin-left: 0; 162 } 163 164 .devtools-responsiveui-close { 165 list-style-image: url("chrome://devtools/skin/images/close.svg"); 166 } 167 168 .devtools-responsiveui-close > image { 169 filter: invert(1); 170 } 171 172 .devtools-responsiveui-rotate { 173 list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png"); 174 } 175 176 @media (min-resolution: 1.1dppx) { 177 .devtools-responsiveui-rotate { 178 list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png"); 179 } 180 } 181 182 .devtools-responsiveui-touch { 183 list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch.png"); 184 -moz-image-region: rect(0px,16px,16px,0px); 185 } 186 187 .devtools-responsiveui-touch[checked] { 188 -moz-image-region: rect(0px,32px,16px,16px); 189 } 190 191 @media (min-resolution: 1.1dppx) { 192 .devtools-responsiveui-touch { 193 list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch@2x.png"); 194 -moz-image-region: rect(0px,32px,32px,0px); 195 } 196 197 .devtools-responsiveui-touch[checked] { 198 -moz-image-region: rect(0px,64px,32px,32px); 199 } 200 } 201 202 .devtools-responsiveui-screenshot { 203 list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot.png"); 204 } 205 206 @media (min-resolution: 1.1dppx) { 207 .devtools-responsiveui-screenshot { 208 list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot@2x.png"); 209 } 210 } 211 212 .devtools-responsiveui-resizebarV { 213 width: 7px; 214 height: 24px; 215 cursor: ew-resize; 216 transform: translate(12px, -12px); 217 background-size: cover; 218 background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer.png"); 219 } 220 221 .devtools-responsiveui-resizebarH { 222 width: 24px; 223 height: 7px; 224 cursor: ns-resize; 225 transform: translate(-12px, 12px); 226 background-size: cover; 227 background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer.png"); 228 } 229 230 .devtools-responsiveui-resizehandle { 231 width: 16px; 232 height: 16px; 233 cursor: se-resize; 234 transform: translate(12px, 12px); 235 background-size: cover; 236 background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer.png"); 237 } 238 239 /* FxOS custom mode with additional buttons and phone look'n feel */ 240 241 /* Hide devtools manual resizer */ 242 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle, 243 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH, 244 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV { 245 display: none; 246 } 247 248 /* Gives responsive mode a phone look'n feel */ 249 .browserStack[responsivemode].fxos-mode { 250 padding: 60px 15px 0; 251 252 border-radius: 25px / 20px; 253 border-bottom-left-radius: 0; 254 border-bottom-right-radius: 0; 255 border: 1px solid #FFFFFF; 256 border-bottom-width: 0; 257 258 background-color: #181411; 259 260 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset; 261 262 background-image: linear-gradient(to right, #111 11%, #333 56%); 263 min-width: 320px; 264 } 265 266 .devtools-responsiveui-hardware-buttons { 267 -moz-appearance: none; 268 padding: 20px; 269 270 border: 1px solid #FFFFFF; 271 border-bottom-left-radius: 25px; 272 border-bottom-right-radius: 25px; 273 border-top-width: 0; 274 275 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset; 276 277 background-image: linear-gradient(to right, #111 11%, #333 56%); 278 } 279 280 .devtools-responsiveui-home-button { 281 -moz-user-focus: ignore; 282 width: 40px; 283 height: 30px; 284 list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-home.png"); 285 } 286 287 .devtools-responsiveui-sleep-button { 288 -moz-user-focus: ignore; 289 -moz-appearance: none; 290 /* compensate browserStack top padding */ 291 margin-top: -67px; 292 margin-right: 10px; 293 294 min-width: 10px; 295 width: 50px; 296 height: 5px; 297 298 border: 1px solid #444; 299 border-top-right-radius: 12px; 300 border-top-left-radius: 12px; 301 border-bottom-color: transparent; 302 303 background-image: linear-gradient(to top, #111 11%, #333 56%); 304 } 305 306 .devtools-responsiveui-sleep-button:hover:active { 307 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%); 308 } 309 310 .devtools-responsiveui-volume-buttons { 311 margin-left: -29px; 312 } 313 314 .devtools-responsiveui-volume-up-button, 315 .devtools-responsiveui-volume-down-button { 316 -moz-user-focus: ignore; 317 -moz-appearance: none; 318 border: 1px solid red; 319 min-width: 8px; 320 height: 40px; 321 322 border: 1px solid #444; 323 border-right-color: transparent; 324 325 background-image: linear-gradient(to right, #111 11%, #333 56%); 326 } 327 328 .devtools-responsiveui-volume-up-button:hover:active, 329 .devtools-responsiveui-volume-down-button:hover:active { 330 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%); 331 } 332 333 .devtools-responsiveui-volume-up-button { 334 border-top-left-radius: 12px; 335 } 336 337 .devtools-responsiveui-volume-down-button { 338 border-bottom-left-radius: 12px; 339 } 340 341 @media (min-resolution: 1.1dppx) { 342 .devtools-responsiveui-resizebarV { 343 background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer@2x.png"); 344 } 345 346 .devtools-responsiveui-resizebarH { 347 background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer@2x.png"); 348 } 349 350 .devtools-responsiveui-resizehandle { 351 background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer@2x.png"); 352 } 353 } 354 355 /* Developer toolbar */ 356 357 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. 358 We are copy/pasting variables from light-theme and dark-theme, 359 since they aren't loaded in this context (within browser.css). */ 360 :root[devtoolstheme="light"] #developer-toolbar { 361 --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */ 362 --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */ 363 --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */ 364 --gcli-input-color: #393f4c; /* --theme-body-color */ 365 --gcli-border-color: #dde1e4; /* --theme-splitter-color */ 366 --selection-background: #4c9ed9; /* --theme-selection-background */ 367 --selection-color: #f5f7fa; /* --theme-selection-color */ 368 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */ 369 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */ 370 } 371 372 :root[devtoolstheme="dark"] #developer-toolbar { 373 --gcli-background-color: #272b35; /* --theme-toolbar-background */ 374 --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */ 375 --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */ 376 --gcli-input-color: #b6babf; /* --theme-body-color-alt */ 377 --gcli-border-color: #454d5d; /* --theme-splitter-color */ 378 --selection-background: #5675b9; /* --theme-selection-background */ 379 --selection-color: #f5f7fa; /* --theme-selection-color */ 380 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */ 381 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */ 382 } 383 384 #developer-toolbar { 385 -moz-appearance: none; 386 padding: 0; 387 min-height: 32px; 388 background-color: var(--gcli-background-color); 389 border-top: 1px solid var(--gcli-border-color); 390 } 391 392 #developer-toolbar > toolbarbutton { 393 -moz-appearance: none; 394 border: none; 395 background-color: transparent; 396 margin: 0; 397 padding: 0 10px; 398 width: 32px; 399 } 400 401 .developer-toolbar-button > image { 402 margin: auto 10px; 403 } 404 405 :root[devtoolstheme="light"] #developer-toolbar > .developer-toolbar-button:not([checked=true]) > image, 406 :root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before { 407 filter: invert(1); 408 } 409 410 .developer-toolbar-button > .toolbarbutton-icon { 411 width: 16px; 412 height: 16px; 413 } 414 415 #developer-toolbar-toolbox-button { 416 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png"); 417 -moz-image-region: rect(0px, 16px, 16px, 0px); 418 } 419 420 #developer-toolbar-toolbox-button > label { 421 display: none; 422 } 423 424 #developer-toolbar-toolbox-button:hover { 425 -moz-image-region: rect(0px, 32px, 16px, 16px); 426 } 427 428 #developer-toolbar-toolbox-button:hover:active { 429 -moz-image-region: rect(0px, 48px, 16px, 32px); 430 } 431 432 #developer-toolbar-toolbox-button[checked=true] { 433 -moz-image-region: rect(0px, 64px, 16px, 48px); 434 } 435 436 @media (min-resolution: 1.1dppx) { 437 #developer-toolbar-toolbox-button { 438 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png"); 439 -moz-image-region: rect(0px, 32px, 32px, 0px); 440 } 441 442 #developer-toolbar-toolbox-button:hover { 443 -moz-image-region: rect(0px, 64px, 32px, 32px); 444 } 445 446 #developer-toolbar-toolbox-button:hover:active { 447 -moz-image-region: rect(0px, 96px, 32px, 64px); 448 } 449 450 #developer-toolbar-toolbox-button[checked=true] { 451 -moz-image-region: rect(0px, 128px, 32px, 96px); 452 } 453 } 454 455 /* GCLI */ 456 457 html|*#gcli-tooltip-frame, 458 html|*#gcli-output-frame { 459 padding: 0; 460 border-width: 0; 461 background-color: transparent; 462 } 463 464 #gcli-output, 465 #gcli-tooltip { 466 border-width: 0; 467 background-color: transparent; 468 -moz-appearance: none; 469 } 470 471 .gclitoolbar-input-node, 472 .gclitoolbar-complete-node { 473 margin: 0; 474 -moz-box-align: center; 475 padding-top: 0; 476 padding-bottom: 0; 477 padding-right: 8px; 478 text-shadow: none; 479 box-shadow: none; 480 border-width: 0; 481 background-color: transparent; 482 border-radius: 0; 483 } 484 485 .gclitoolbar-input-node { 486 -moz-appearance: none; 487 color: var(--gcli-input-color); 488 background-color: var(--gcli-input-background); 489 background-repeat: no-repeat; 490 background-position: 4px center; 491 box-shadow: 1px 0 0 var(--gcli-border-color) inset, 492 -1px 0 0 var(--gcli-border-color) inset; 493 494 line-height: 32px; 495 outline-style: none; 496 padding: 0; 497 } 498 499 .gclitoolbar-input-node[focused="true"] { 500 background-color: var(--gcli-input-focused-background); 501 } 502 503 .gclitoolbar-input-node::before { 504 content: ""; 505 display: inline-block; 506 -moz-box-ordinal-group: 0; 507 width: 16px; 508 height: 16px; 509 margin: 0 2px; 510 background-image: var(--command-line-image); 511 } 512 513 .gclitoolbar-input-node[focused="true"]::before { 514 background-image: var(--command-line-image-focus); 515 } 516 517 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { 518 background-color: var(--selection-background); 519 color: var(--selection-color); 520 text-shadow: none; 521 } 522 523 .gclitoolbar-complete-node { 524 padding-left: 21px; 525 background-color: transparent; 526 color: transparent; 527 z-index: 100; 528 pointer-events: none; 529 } 530 531 .gcli-in-incomplete, 532 .gcli-in-error, 533 .gcli-in-ontab, 534 .gcli-in-todo, 535 .gcli-in-closebrace, 536 .gcli-in-param, 537 .gcli-in-valid { 538 margin: 0; 539 padding: 0; 540 } 541 542 .gcli-in-incomplete { 543 border-bottom: 2px dotted #999; 544 } 545 546 .gcli-in-error { 547 border-bottom: 2px dotted #F00; 548 } 549 550 .gcli-in-ontab { 551 color: hsl(210,0%,35%); 552 } 553 554 .gcli-in-todo { 555 color: hsl(210,50%,35%); 556 } 557 558 .gcli-in-closebrace { 559 color: hsl(0,0%,80%); 560 } 561 562 /* Error counter */ 563 564 #developer-toolbar-toolbox-button[error-count]:before { 565 color: #FDF3DE; 566 min-width: 16px; 567 text-shadow: none; 568 background-image: linear-gradient(#B4211B, #8A1915); 569 border-radius: 1px; 570 margin-inline-end: 5px; 571 }