The Tor Browser / file comparison
comparison: browser/themes/shared/devtools/widgets.inc.css
browser/themes/shared/devtools/widgets.inc.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:6a925c4559a4 |
|---|---|
| 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 /* Generic pane helpers */ | |
| 7 | |
| 8 .generic-toggled-side-pane { | |
| 9 -moz-margin-start: 0 !important; | |
| 10 /* Unfortunately, transitions don't work properly with locale-aware properties, | |
| 11 so both the left and right margins are set via js, while the start margin | |
| 12 is always overridden here. */ | |
| 13 } | |
| 14 | |
| 15 .generic-toggled-side-pane[animated] { | |
| 16 transition: margin 0.25s ease-in-out; | |
| 17 } | |
| 18 | |
| 19 /* Responsive container */ | |
| 20 | |
| 21 .devtools-responsive-container { | |
| 22 -moz-box-orient: horizontal; | |
| 23 } | |
| 24 | |
| 25 @media (max-width: 700px) { | |
| 26 .devtools-responsive-container { | |
| 27 -moz-box-orient: vertical; | |
| 28 } | |
| 29 | |
| 30 .devtools-responsive-container > .devtools-side-splitter { | |
| 31 border-width: 0; | |
| 32 border-top-width: 1px; | |
| 33 border-top-style: solid; | |
| 34 margin: 0; | |
| 35 min-height: 3px; | |
| 36 height: 3px; | |
| 37 margin-bottom: -3px; | |
| 38 /* In some edge case the cursor is not changed to n-resize */ | |
| 39 cursor: n-resize; | |
| 40 } | |
| 41 | |
| 42 .devtools-responsive-container > .devtools-sidebar-tabs { | |
| 43 min-height: 35vh; | |
| 44 max-height: 75vh; | |
| 45 } | |
| 46 } | |
| 47 | |
| 48 /* BreacrumbsWidget */ | |
| 49 | |
| 50 .breadcrumbs-widget-container { | |
| 51 -moz-margin-end: 3px; | |
| 52 max-height: 25px; /* Set max-height for proper sizing on linux */ | |
| 53 height: 25px; /* Set height to prevent starting small waiting for content */ | |
| 54 /* A fake 1px-shadow is included in the border-images of the | |
| 55 breadcrumbs-widget-items, to match toolbar-buttons style. | |
| 56 This negative margin compensates the extra row of pixels created | |
| 57 by the shadow.*/ | |
| 58 margin-bottom: -1px; | |
| 59 } | |
| 60 | |
| 61 .scrollbutton-up, | |
| 62 .scrollbutton-down { | |
| 63 -moz-appearance: none; | |
| 64 background: transparent; | |
| 65 box-shadow: none; | |
| 66 border: none; | |
| 67 list-style-image: none; | |
| 68 margin: 0; | |
| 69 padding: 0; | |
| 70 } | |
| 71 | |
| 72 .scrollbutton-up > .toolbarbutton-icon, | |
| 73 .scrollbutton-down > .toolbarbutton-icon { | |
| 74 -moz-appearance: none; | |
| 75 width: 7px; | |
| 76 height: 16px; | |
| 77 background-size: 14px 16px; | |
| 78 background-position: 0 center; | |
| 79 background-repeat: no-repeat; | |
| 80 background-image: url("breadcrumbs-scrollbutton.png"); | |
| 81 list-style-image: none; | |
| 82 margin: 0 8px; | |
| 83 padding: 0; | |
| 84 } | |
| 85 | |
| 86 @media (min-resolution: 2dppx) { | |
| 87 .scrollbutton-up > .toolbarbutton-icon, | |
| 88 .scrollbutton-down > .toolbarbutton-icon { | |
| 89 background-image: url("breadcrumbs-scrollbutton@2x.png"); | |
| 90 } | |
| 91 } | |
| 92 | |
| 93 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon, | |
| 94 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon { | |
| 95 background-position: -7px center; | |
| 96 } | |
| 97 | |
| 98 .scrollbutton-up[disabled] > .toolbarbutton-icon, | |
| 99 .scrollbutton-down[disabled] > .toolbarbutton-icon { | |
| 100 opacity: 0.5; | |
| 101 } | |
| 102 | |
| 103 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */ | |
| 104 .scrollbutton-up:-moz-locale-dir(ltr), | |
| 105 .scrollbutton-down:-moz-locale-dir(rtl) { | |
| 106 border-right: solid 1px rgba(255, 255, 255, .1); | |
| 107 border-left: solid 1px transparent; | |
| 108 box-shadow: 3px 0px 3px -3px #181d20; | |
| 109 } | |
| 110 | |
| 111 .scrollbutton-down:-moz-locale-dir(ltr), | |
| 112 .scrollbutton-up:-moz-locale-dir(rtl) { | |
| 113 border-right: solid 1px transparent; | |
| 114 border-left: solid 1px rgba(255, 255, 255, .1); | |
| 115 box-shadow: -3px 0px 3px -3px #181d20; | |
| 116 } | |
| 117 | |
| 118 .scrollbutton-up[disabled], | |
| 119 .scrollbutton-down[disabled] { | |
| 120 box-shadow: none; | |
| 121 border-color: transparent; | |
| 122 } | |
| 123 | |
| 124 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl), | |
| 125 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) { | |
| 126 transform: scaleX(-1); | |
| 127 } | |
| 128 | |
| 129 /* The breadcrumb separator elements are used as background images with | |
| 130 * -moz-element, so we position them offscreen since we don't care about | |
| 131 * seeing the original elements. | |
| 132 */ | |
| 133 .breadcrumb-separator-container { | |
| 134 position: fixed; | |
| 135 top: -1000px; | |
| 136 left: -1000px; | |
| 137 } | |
| 138 | |
| 139 #breadcrumb-separator-before, | |
| 140 #breadcrumb-separator-after, | |
| 141 #breadcrumb-separator-normal { | |
| 142 width: 12px; | |
| 143 height: 25px; | |
| 144 overflow: hidden; | |
| 145 } | |
| 146 | |
| 147 .theme-dark #breadcrumb-separator-before, | |
| 148 .theme-dark #breadcrumb-separator-after:after { | |
| 149 background: #1d4f73; /* Select Highlight Blue */ | |
| 150 } | |
| 151 | |
| 152 .theme-dark #breadcrumb-separator-after, | |
| 153 .theme-dark #breadcrumb-separator-before:after { | |
| 154 background: #343c45; /* Toolbars */ | |
| 155 } | |
| 156 | |
| 157 .theme-light #breadcrumb-separator-before, | |
| 158 .theme-light #breadcrumb-separator-after:after { | |
| 159 background: #4c9ed9; /* Select Highlight Blue */ | |
| 160 } | |
| 161 | |
| 162 .theme-light #breadcrumb-separator-after, | |
| 163 .theme-light #breadcrumb-separator-before:after { | |
| 164 background: #f0f1f2; /* Toolbars */ | |
| 165 } | |
| 166 | |
| 167 /* This chevron arrow cannot be replicated easily in CSS, so we are using | |
| 168 * a background image for it (still keeping it in a separate element so | |
| 169 * we can handle RTL support with a CSS transform). | |
| 170 */ | |
| 171 #breadcrumb-separator-normal { | |
| 172 background: url(breadcrumbs-divider@2x.png) no-repeat center right; | |
| 173 background-size: 12px 24px; | |
| 174 } | |
| 175 | |
| 176 /* Fake a triangle by rotating a rectangle inside the elements */ | |
| 177 #breadcrumb-separator-before:after, | |
| 178 #breadcrumb-separator-after:after { | |
| 179 content: ""; | |
| 180 display: block; | |
| 181 width: 25px; | |
| 182 height: 25px; | |
| 183 transform: translateX(-18px) rotate(45deg); | |
| 184 -moz-box-sizing: border-box; | |
| 185 } | |
| 186 | |
| 187 .breadcrumbs-widget-item { | |
| 188 background-color: transparent; | |
| 189 -moz-appearance: none; | |
| 190 min-height: 25px; | |
| 191 min-width: 65px; | |
| 192 margin: 0; | |
| 193 padding: 0 8px 0 20px; | |
| 194 border: none; | |
| 195 outline: none; | |
| 196 color: hsl(210,30%,85%); | |
| 197 } | |
| 198 | |
| 199 .breadcrumbs-widget-item:not([checked]) { | |
| 200 background: -moz-element(#breadcrumb-separator-normal) no-repeat center left; | |
| 201 } | |
| 202 | |
| 203 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item { | |
| 204 background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0; | |
| 205 } | |
| 206 | |
| 207 .breadcrumbs-widget-item[checked] { | |
| 208 background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0; | |
| 209 } | |
| 210 | |
| 211 .theme-dark .breadcrumbs-widget-item[checked] { | |
| 212 background-color: #1d4f73; /* Select Highlight Blue */ | |
| 213 } | |
| 214 | |
| 215 .theme-light .breadcrumbs-widget-item[checked] { | |
| 216 background-color: #4c9ed9; /* Select Highlight Blue */ | |
| 217 } | |
| 218 | |
| 219 .breadcrumbs-widget-item:first-child { | |
| 220 background-image: none; | |
| 221 } | |
| 222 | |
| 223 /* RTL support: move the images that were on the left to the right, | |
| 224 * and move images that were on the right to the left. | |
| 225 */ | |
| 226 .breadcrumbs-widget-item:-moz-locale-dir(rtl) { | |
| 227 padding: 0 20px 0 8px; | |
| 228 } | |
| 229 | |
| 230 .breadcrumbs-widget-item:-moz-locale-dir(rtl), | |
| 231 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) { | |
| 232 background-position: center right; | |
| 233 } | |
| 234 | |
| 235 #breadcrumb-separator-before:-moz-locale-dir(rtl), | |
| 236 #breadcrumb-separator-after:-moz-locale-dir(rtl), | |
| 237 #breadcrumb-separator-normal:-moz-locale-dir(rtl) { | |
| 238 transform: scaleX(-1); | |
| 239 } | |
| 240 | |
| 241 #breadcrumb-separator-before:-moz-locale-dir(rtl):after, | |
| 242 #breadcrumb-separator-after:-moz-locale-dir(rtl):after { | |
| 243 transform: translateX(-5px) rotate(45deg); | |
| 244 } | |
| 245 | |
| 246 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id, | |
| 247 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag, | |
| 248 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes, | |
| 249 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes { | |
| 250 color: #f5f7fa; /* Foreground (Text) - Light */ | |
| 251 } | |
| 252 | |
| 253 .theme-dark .breadcrumbs-widget-item { | |
| 254 color: #f5f7fa; /* Foreground (Text) - Light */ | |
| 255 } | |
| 256 | |
| 257 .theme-light .breadcrumbs-widget-item { | |
| 258 color: #18191a; /* Foreground (Text) - Dark */ | |
| 259 } | |
| 260 | |
| 261 .theme-dark .breadcrumbs-widget-item-id { | |
| 262 color: #b6babf; /* Foreground (Text) - Grey */ | |
| 263 } | |
| 264 | |
| 265 .theme-light .breadcrumbs-widget-item-id { | |
| 266 color: #585959; /* Foreground (Text) - Grey */ | |
| 267 } | |
| 268 | |
| 269 .theme-dark .breadcrumbs-widget-item-classes { | |
| 270 color: #a9bacb; /* Content (Text) - Light */ | |
| 271 } | |
| 272 | |
| 273 .theme-light .breadcrumbs-widget-item-classes { | |
| 274 color: #667380; /* Content (Text) - Dark Grey */ | |
| 275 } | |
| 276 | |
| 277 .theme-dark .breadcrumbs-widget-item-pseudo-classes { | |
| 278 color: #d99b28; /* Light Orange */ | |
| 279 } | |
| 280 | |
| 281 .theme-light .breadcrumbs-widget-item-pseudo-classes { | |
| 282 color: #d97e00; /* Light Orange */ | |
| 283 } | |
| 284 | |
| 285 .theme-dark .breadcrumbs-widget-item:not([checked]):hover label { | |
| 286 color: white; | |
| 287 } | |
| 288 | |
| 289 .theme-light .breadcrumbs-widget-item:not([checked]):hover label { | |
| 290 color: black; | |
| 291 } | |
| 292 | |
| 293 /* SimpleListWidget */ | |
| 294 | |
| 295 .simple-list-widget-container { | |
| 296 /* Hack: force hardware acceleration */ | |
| 297 transform: translateZ(1px); | |
| 298 } | |
| 299 | |
| 300 .theme-dark .simple-list-widget-item.selected { | |
| 301 background-color: #1d4f73; /* Select Highlight Blue */ | |
| 302 color: #f5f7fa; /* Light foreground text */ | |
| 303 } | |
| 304 | |
| 305 .theme-light .simple-list-widget-item.selected { | |
| 306 background-color: #4c9ed9; /* Select Highlight Blue */ | |
| 307 color: #f5f7fa; /* Light foreground text */ | |
| 308 } | |
| 309 | |
| 310 .theme-dark .simple-list-widget-item:not(.selected):hover { | |
| 311 background-color: rgba(255,255,255,.05); | |
| 312 } | |
| 313 | |
| 314 .theme-light .simple-list-widget-item:not(.selected):hover { | |
| 315 background-color: rgba(0,0,0,.05); | |
| 316 } | |
| 317 | |
| 318 .simple-list-widget-empty-text, | |
| 319 .simple-list-widget-perma-text { | |
| 320 padding: 4px 8px; | |
| 321 } | |
| 322 | |
| 323 .theme-dark .simple-list-widget-empty-text, | |
| 324 .theme-dark .simple-list-widget-perma-text { | |
| 325 color: #b6babf; /* Light foreground text */ | |
| 326 } | |
| 327 | |
| 328 .theme-light .simple-list-widget-empty-text, | |
| 329 .theme-light .simple-list-widget-perma-text { | |
| 330 color: #585959; /* Grey foreground text */ | |
| 331 } | |
| 332 | |
| 333 /* FastListWidget */ | |
| 334 | |
| 335 .fast-list-widget-container { | |
| 336 /* Hack: force hardware acceleration */ | |
| 337 transform: translateZ(1px); | |
| 338 } | |
| 339 | |
| 340 .fast-list-widget-empty-text { | |
| 341 padding: 4px 8px; | |
| 342 } | |
| 343 | |
| 344 .theme-dark .fast-list-widget-empty-text { | |
| 345 color: #b6babf; /* Light foreground text */ | |
| 346 } | |
| 347 | |
| 348 .theme-light .fast-list-widget-empty-text { | |
| 349 color: #585959; /* Grey foreground text */ | |
| 350 } | |
| 351 | |
| 352 /* SideMenuWidget */ | |
| 353 | |
| 354 %filter substitution | |
| 355 %define smw_marginDark #000 | |
| 356 %define smw_marginLight #aaa | |
| 357 %define smw_itemDarkTopBorder rgba(0,0,0,0.2) | |
| 358 %define smw_itemDarkBottomBorder rgba(128,128,128,0.15) | |
| 359 %define smw_itemLightTopBorder rgba(128,128,128,0.15) | |
| 360 %define smw_itemLightBottomBorder transparent | |
| 361 | |
| 362 .side-menu-widget-container { | |
| 363 /* Hack: force hardware acceleration */ | |
| 364 transform: translateZ(1px); | |
| 365 } | |
| 366 | |
| 367 /* SideMenuWidget container */ | |
| 368 | |
| 369 .theme-dark .side-menu-widget-container, | |
| 370 .theme-dark .side-menu-widget-empty-text { | |
| 371 background: url(background-noise-toolbar.png), #343c45; /* Toolbars */ | |
| 372 } | |
| 373 | |
| 374 .theme-dark .side-menu-widget-container:-moz-locale-dir(ltr), | |
| 375 .theme-dark .side-menu-widget-empty-text:-moz-locale-dir(ltr) { | |
| 376 box-shadow: inset -1px 0 0 @smw_marginDark@; | |
| 377 } | |
| 378 | |
| 379 .theme-dark .side-menu-widget-container:-moz-locale-dir(rtl), | |
| 380 .theme-dark .side-menu-widget-empty-text:-moz-locale-dir(rtl) { | |
| 381 box-shadow: inset 1px 0 0 @smw_marginDark@; | |
| 382 } | |
| 383 | |
| 384 .side-menu-widget-container:-moz-locale-dir(ltr), | |
| 385 .side-menu-widget-empty-text:-moz-locale-dir(ltr) { | |
| 386 box-shadow: inset -1px 0 0 @smw_marginLight@; | |
| 387 } | |
| 388 | |
| 389 .side-menu-widget-container:-moz-locale-dir(rtl), | |
| 390 .side-menu-widget-empty-text:-moz-locale-dir(rtl) { | |
| 391 box-shadow: inset 1px 0 0 @smw_marginLight@; | |
| 392 } | |
| 393 | |
| 394 .side-menu-widget-group { | |
| 395 /* To allow visibility of the dark margin shadow. */ | |
| 396 -moz-margin-end: 1px; | |
| 397 } | |
| 398 | |
| 399 .side-menu-widget-container[with-arrows=true] .side-menu-widget-item { | |
| 400 /* To compensate for the arrow image's dark margin. */ | |
| 401 -moz-margin-end: -1px; | |
| 402 } | |
| 403 | |
| 404 /* SideMenuWidget groups */ | |
| 405 | |
| 406 .side-menu-widget-group-title { | |
| 407 padding: 4px; | |
| 408 } | |
| 409 | |
| 410 .theme-dark .side-menu-widget-group-title { | |
| 411 background-color: #252c33; /* Tab toolbar */ | |
| 412 color: #a9bacb; /* Light content text */ | |
| 413 } | |
| 414 | |
| 415 .theme-light .side-menu-widget-group-title { | |
| 416 background-color: #ebeced; /* Tab toolbar */ | |
| 417 color: #667380; /* Dark grey content text */ | |
| 418 } | |
| 419 | |
| 420 /* SideMenuWidget items */ | |
| 421 | |
| 422 .side-menu-widget-item { | |
| 423 /* To compensate for the top and bottom borders */ | |
| 424 margin-top: -1px; | |
| 425 margin-bottom: -1px; | |
| 426 background-clip: padding-box; | |
| 427 } | |
| 428 | |
| 429 .theme-dark .side-menu-widget-item { | |
| 430 border-top: 1px solid @smw_itemDarkTopBorder@; | |
| 431 border-bottom: 1px solid @smw_itemDarkBottomBorder@; | |
| 432 color: #f5f7fa; /* Light foreground text */ | |
| 433 } | |
| 434 | |
| 435 .theme-dark .side-menu-widget-item:last-of-type { | |
| 436 box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@; | |
| 437 } | |
| 438 | |
| 439 .theme-light .side-menu-widget-item { | |
| 440 border-top: 1px solid @smw_itemLightTopBorder@; | |
| 441 border-bottom: 1px solid @smw_itemLightBottomBorder@; | |
| 442 color: #18191a; /* Dark foreground text */ | |
| 443 } | |
| 444 | |
| 445 .theme-light .side-menu-widget-item:last-of-type { | |
| 446 box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@; | |
| 447 } | |
| 448 | |
| 449 .theme-dark .side-menu-widget-item.selected { | |
| 450 background-color: #1d4f73; /* Select Highlight Blue */ | |
| 451 color: #f5f7fa; /* Light foreground text */ | |
| 452 } | |
| 453 | |
| 454 .theme-light .side-menu-widget-item.selected { | |
| 455 background-color: #4c9ed9; /* Select Highlight Blue */ | |
| 456 color: #f5f7fa; /* Light foreground text */ | |
| 457 } | |
| 458 | |
| 459 .side-menu-widget-item-arrow { | |
| 460 -moz-margin-start: -7px; | |
| 461 width: 7px; /* The image's width is 7 pixels */ | |
| 462 /* Cover the border of the side-menu-widget-item */ | |
| 463 margin-top: -1px; | |
| 464 margin-bottom: -1px; | |
| 465 } | |
| 466 | |
| 467 .side-menu-widget-item.selected > .side-menu-widget-item-arrow { | |
| 468 background-size: auto, 1px 100%; | |
| 469 background-repeat: no-repeat; | |
| 470 } | |
| 471 | |
| 472 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { | |
| 473 background-position: center right, top right; | |
| 474 } | |
| 475 | |
| 476 .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { | |
| 477 background-position: center left, top left; | |
| 478 } | |
| 479 | |
| 480 .theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { | |
| 481 background-image: url(itemArrow-dark-ltr.png), linear-gradient(to right, @smw_marginDark@, @smw_marginDark@); | |
| 482 } | |
| 483 | |
| 484 .theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { | |
| 485 background-image: url(itemArrow-dark-rtl.png), linear-gradient(to right, @smw_marginDark@, @smw_marginDark@); | |
| 486 } | |
| 487 | |
| 488 .theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { | |
| 489 background-image: url(itemArrow-ltr.svg), linear-gradient(to right, @smw_marginLight@, @smw_marginLight@); | |
| 490 } | |
| 491 | |
| 492 .theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { | |
| 493 background-image: url(itemArrow-rtl.svg), linear-gradient(to right, @smw_marginLight@, @smw_marginLight@); | |
| 494 } | |
| 495 | |
| 496 /* SideMenuWidget items contents */ | |
| 497 | |
| 498 .side-menu-widget-item-contents { | |
| 499 padding: 4px; | |
| 500 /* To avoid having content overlapping the arrow image. */ | |
| 501 -moz-padding-end: 8px; | |
| 502 } | |
| 503 | |
| 504 .side-menu-widget-item-other { | |
| 505 /* To avoid having content overlapping the arrow image. */ | |
| 506 -moz-padding-end: 8px; | |
| 507 /* To compensate for the .side-menu-widget-item-contents padding. */ | |
| 508 -moz-margin-start: -4px; | |
| 509 -moz-margin-end: -8px; | |
| 510 } | |
| 511 | |
| 512 .side-menu-widget-item-other:first-of-type { | |
| 513 margin-top: 4px; | |
| 514 } | |
| 515 | |
| 516 .side-menu-widget-item-other:last-of-type { | |
| 517 margin-bottom: -4px; | |
| 518 } | |
| 519 | |
| 520 .theme-dark .side-menu-widget-item-other { | |
| 521 background: url(background-noise-toolbar.png), rgba(0,0,0,.1); | |
| 522 } | |
| 523 | |
| 524 .theme-light .side-menu-widget-item-other { | |
| 525 background: url(background-noise-toolbar.png), rgba(128,128,128,.1); | |
| 526 } | |
| 527 | |
| 528 .theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other { | |
| 529 background-color: rgba(0,0,0,.2); /* Darken the selection by 20% */ | |
| 530 color: #f5f7fa; /* Light foreground text */ | |
| 531 } | |
| 532 | |
| 533 .theme-light .side-menu-widget-item.selected .side-menu-widget-item-other { | |
| 534 background-color: rgba(255,255,255,.8); /* Lighten the selection by 20% */ | |
| 535 color: #18191a; /* Dark foreground text */ | |
| 536 } | |
| 537 | |
| 538 .theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other.selected { | |
| 539 background-color: transparent; | |
| 540 color: #f5f7fa; /* Light foreground text */ | |
| 541 } | |
| 542 | |
| 543 .theme-light .side-menu-widget-item.selected .side-menu-widget-item-other.selected { | |
| 544 background-color: transparent; | |
| 545 color: #f5f7fa; /* Light foreground text */ | |
| 546 } | |
| 547 | |
| 548 /* SideMenuWidget checkboxes */ | |
| 549 | |
| 550 .side-menu-widget-group-checkbox { | |
| 551 margin: 0; | |
| 552 -moz-margin-end: 4px; | |
| 553 } | |
| 554 | |
| 555 .side-menu-widget-item-checkbox { | |
| 556 margin: 0; | |
| 557 -moz-margin-start: 4px; | |
| 558 } | |
| 559 | |
| 560 /* SideMenuWidget misc */ | |
| 561 | |
| 562 .side-menu-widget-empty-text { | |
| 563 padding: 4px 8px; | |
| 564 } | |
| 565 | |
| 566 .theme-dark .side-menu-widget-empty-text { | |
| 567 background: url(background-noise-toolbar.png), #343c45; /* Toolbars */ | |
| 568 color: #b6babf; /* Foreground (Text) - Grey */ | |
| 569 } | |
| 570 | |
| 571 .theme-light .side-menu-widget-empty-text { | |
| 572 background: #f7f7f7; /* Toolbars */ | |
| 573 color: #585959; /* Grey foreground text */ | |
| 574 } | |
| 575 | |
| 576 /* VariablesView */ | |
| 577 | |
| 578 .variables-view-container { | |
| 579 /* Hack: force hardware acceleration */ | |
| 580 transform: translateZ(1px); | |
| 581 } | |
| 582 | |
| 583 .variables-view-empty-notice { | |
| 584 padding: 2px; | |
| 585 } | |
| 586 | |
| 587 .theme-dark .variables-view-empty-notice { | |
| 588 color: #b6babf; /* Foreground (Text) - Grey */ | |
| 589 } | |
| 590 | |
| 591 .theme-light .variables-view-empty-notice { | |
| 592 color: #585959; /* Grey foreground text */ | |
| 593 } | |
| 594 | |
| 595 .theme-dark .variables-view-scope:focus > .title, | |
| 596 .theme-dark .variable-or-property:focus > .title { | |
| 597 background-color: #1d4f73; /* Selection colors */ | |
| 598 color: #f5f7fa; | |
| 599 } | |
| 600 | |
| 601 .theme-light .variables-view-scope:focus > .title, | |
| 602 .theme-light .variable-or-property:focus > .title { | |
| 603 background-color: #4c9ed9; /* Selection colors */ | |
| 604 color: #f5f7fa; | |
| 605 } | |
| 606 | |
| 607 .variables-view-scope > .title { | |
| 608 border-top-width: 1px; | |
| 609 border-top-style: solid; | |
| 610 margin-top: -1px; | |
| 611 } | |
| 612 | |
| 613 /* Generic variables traits */ | |
| 614 | |
| 615 .variables-view-variable:not(:last-child) { | |
| 616 border-bottom: 1px solid rgba(128, 128, 128, .15); | |
| 617 } | |
| 618 | |
| 619 .variables-view-variable > .title > .name { | |
| 620 font-weight: 600; | |
| 621 } | |
| 622 | |
| 623 /* Generic variables *and* properties traits */ | |
| 624 | |
| 625 .variable-or-property:focus > .title > label { | |
| 626 color: inherit !important; | |
| 627 } | |
| 628 | |
| 629 .variable-or-property > .title > .arrow { | |
| 630 -moz-margin-start: 3px; | |
| 631 } | |
| 632 | |
| 633 .variable-or-property:not([untitled]) > .variables-view-element-details { | |
| 634 -moz-margin-start: 7px; | |
| 635 } | |
| 636 | |
| 637 /* Traits applied when variables or properties are changed or overridden */ | |
| 638 | |
| 639 .variable-or-property:not([overridden]) { | |
| 640 transition: background 1s ease-in-out; | |
| 641 } | |
| 642 | |
| 643 .variable-or-property:not([overridden])[changed] { | |
| 644 transition-duration: .4s; | |
| 645 } | |
| 646 | |
| 647 .variable-or-property[overridden] { | |
| 648 background: rgba(128,128,128,0.05); | |
| 649 } | |
| 650 | |
| 651 .variable-or-property[overridden] .title > label { | |
| 652 /* Cross out the title for this variable and all child properties. */ | |
| 653 font-style: italic; | |
| 654 text-decoration: line-through; | |
| 655 border-bottom: none !important; | |
| 656 color: rgba(128,128,128,0.9); | |
| 657 opacity: 0.7; | |
| 658 } | |
| 659 | |
| 660 /* Traits applied when variables or properties are editable */ | |
| 661 | |
| 662 .variable-or-property[editable] > .title > .value { | |
| 663 cursor: text; | |
| 664 } | |
| 665 | |
| 666 .variable-or-property[overridden] .title > .value { | |
| 667 /* Disallow editing this variable and all child properties. */ | |
| 668 pointer-events: none; | |
| 669 } | |
| 670 | |
| 671 /* Custom configurable/enumerable/writable or frozen/sealed/extensible | |
| 672 * variables and properties */ | |
| 673 | |
| 674 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name { | |
| 675 opacity: 0.6; | |
| 676 } | |
| 677 | |
| 678 .variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name { | |
| 679 border-bottom: 1px dashed #99f; | |
| 680 } | |
| 681 | |
| 682 .variable-or-property[non-writable]:not([pseudo-item]) > .title > .name { | |
| 683 border-bottom: 1px dashed #f99; | |
| 684 } | |
| 685 | |
| 686 .variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name { | |
| 687 border-bottom: 1px dashed #8b0; | |
| 688 } | |
| 689 | |
| 690 .variable-or-property-non-writable-icon { | |
| 691 background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat; | |
| 692 width: 16px; | |
| 693 height: 16px; | |
| 694 } | |
| 695 | |
| 696 /*@media (min-resolution: 2dppx) { | |
| 697 .variable-or-property-non-writable-icon { | |
| 698 background-image: url("chrome://browser/skin/identity-icons-https@2x.png"); | |
| 699 background-size: 32px; | |
| 700 } | |
| 701 } | |
| 702 */ | |
| 703 .variable-or-property-frozen-label, | |
| 704 .variable-or-property-sealed-label, | |
| 705 .variable-or-property-non-extensible-label { | |
| 706 -moz-padding-end: 4px; | |
| 707 } | |
| 708 | |
| 709 .variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label, | |
| 710 .variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label, | |
| 711 .variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label { | |
| 712 color: #666; | |
| 713 } | |
| 714 | |
| 715 /* Aligned values */ | |
| 716 | |
| 717 .variables-view-container[aligned-values] .title > .separator { | |
| 718 -moz-box-flex: 1; | |
| 719 } | |
| 720 | |
| 721 .variables-view-container[aligned-values] .title > .value { | |
| 722 -moz-box-flex: 0; | |
| 723 width: 70vw; | |
| 724 } | |
| 725 | |
| 726 .variables-view-container[aligned-values] .title > .element-value-input { | |
| 727 width: calc(70vw - 10px); | |
| 728 } | |
| 729 | |
| 730 /* Actions first */ | |
| 731 | |
| 732 .variables-view-container[actions-first] .variables-view-delete, | |
| 733 .variables-view-container[actions-first] .variables-view-open-inspector, | |
| 734 .variables-view-container[actions-first] .variables-view-add-property { | |
| 735 -moz-box-ordinal-group: 0; | |
| 736 } | |
| 737 | |
| 738 .variables-view-container[actions-first] [invisible] { | |
| 739 visibility: hidden; | |
| 740 } | |
| 741 | |
| 742 /* Variables and properties tooltips */ | |
| 743 | |
| 744 .variable-or-property > tooltip > label { | |
| 745 margin: 0 2px 0 2px; | |
| 746 } | |
| 747 | |
| 748 .variable-or-property[non-enumerable] > tooltip > label.enumerable, | |
| 749 .variable-or-property[non-configurable] > tooltip > label.configurable, | |
| 750 .variable-or-property[non-writable] > tooltip > label.writable, | |
| 751 .variable-or-property[non-extensible] > tooltip > label.extensible { | |
| 752 color: #800; | |
| 753 text-decoration: line-through; | |
| 754 } | |
| 755 | |
| 756 .variable-or-property[overridden] > tooltip > label.overridden { | |
| 757 -moz-padding-start: 4px; | |
| 758 -moz-border-start: 1px dotted #000; | |
| 759 } | |
| 760 | |
| 761 .variable-or-property[safe-getter] > tooltip > label.WebIDL { | |
| 762 -moz-padding-start: 4px; | |
| 763 -moz-border-start: 1px dotted #000; | |
| 764 color: #080; | |
| 765 } | |
| 766 | |
| 767 /* Variables and properties editing */ | |
| 768 | |
| 769 .variables-view-delete { | |
| 770 list-style-image: url("chrome://browser/skin/devtools/vview-delete.png"); | |
| 771 -moz-image-region: rect(0,16px,16px,0); | |
| 772 } | |
| 773 | |
| 774 .variables-view-delete:hover { | |
| 775 -moz-image-region: rect(0,48px,16px,32px); | |
| 776 } | |
| 777 | |
| 778 .variables-view-delete:active { | |
| 779 -moz-image-region: rect(0,32px,16px,16px); | |
| 780 } | |
| 781 | |
| 782 .variable-or-property:focus .variables-view-delete { | |
| 783 -moz-image-region: rect(0,16px,16px,0); | |
| 784 } | |
| 785 | |
| 786 .variables-view-edit { | |
| 787 list-style-image: url("chrome://browser/skin/devtools/vview-edit.png"); | |
| 788 -moz-image-region: rect(0,16px,16px,0); | |
| 789 cursor: pointer; | |
| 790 padding-left: 2px; | |
| 791 } | |
| 792 | |
| 793 .variables-view-edit:hover { | |
| 794 -moz-image-region: rect(0,48px,16px,32px); | |
| 795 } | |
| 796 | |
| 797 .variables-view-edit:active { | |
| 798 -moz-image-region: rect(0,32px,16px,16px); | |
| 799 } | |
| 800 | |
| 801 .variable-or-property:focus .variables-view-edit { | |
| 802 -moz-image-region: rect(0,16px,16px,0); | |
| 803 } | |
| 804 | |
| 805 .variables-view-open-inspector { | |
| 806 list-style-image: url("chrome://browser/skin/devtools/vview-open-inspector.png"); | |
| 807 -moz-image-region: rect(0,16px,16px,0); | |
| 808 cursor: pointer; | |
| 809 } | |
| 810 | |
| 811 .variables-view-open-inspector:hover { | |
| 812 -moz-image-region: rect(0,48px,16px,32px); | |
| 813 } | |
| 814 | |
| 815 .variables-view-open-inspector:active { | |
| 816 -moz-image-region: rect(0,32px,16px,16px); | |
| 817 } | |
| 818 | |
| 819 .variable-or-property:focus .variables-view-open-inspector { | |
| 820 -moz-image-region: rect(0,16px,16px,0); | |
| 821 } | |
| 822 | |
| 823 .variables-view-throbber { | |
| 824 background: url("chrome://global/skin/icons/loading_16.png") center no-repeat; | |
| 825 width: 16px; | |
| 826 height: 16px; | |
| 827 } | |
| 828 | |
| 829 .element-value-input { | |
| 830 -moz-margin-start: -2px !important; | |
| 831 -moz-margin-end: 2px !important; | |
| 832 } | |
| 833 | |
| 834 .element-name-input { | |
| 835 -moz-margin-start: -2px !important; | |
| 836 -moz-margin-end: 2px !important; | |
| 837 font-weight: 600; | |
| 838 } | |
| 839 | |
| 840 .element-value-input, | |
| 841 .element-name-input { | |
| 842 border: 1px solid rgba(128, 128, 128, .5) !important; | |
| 843 border-radius: 0; | |
| 844 color: inherit; | |
| 845 } | |
| 846 | |
| 847 /* Variables and properties searching */ | |
| 848 | |
| 849 .variables-view-searchinput { | |
| 850 min-height: 24px; | |
| 851 } | |
| 852 | |
| 853 .variable-or-property[unmatched] { | |
| 854 border: none; | |
| 855 margin: 0; | |
| 856 } | |
| 857 | |
| 858 /* Expand/collapse arrow */ | |
| 859 | |
| 860 .arrow { | |
| 861 -moz-appearance: treetwisty; | |
| 862 width: 20px; | |
| 863 height: 20px; | |
| 864 } | |
| 865 | |
| 866 .arrow[open] { | |
| 867 -moz-appearance: treetwistyopen; | |
| 868 } | |
| 869 | |
| 870 .arrow[invisible] { | |
| 871 visibility: hidden; | |
| 872 } | |
| 873 | |
| 874 /* Charts */ | |
| 875 | |
| 876 .generic-chart-container { | |
| 877 /* Hack: force hardware acceleration */ | |
| 878 transform: translateZ(1px); | |
| 879 } | |
| 880 | |
| 881 .theme-dark .generic-chart-container { | |
| 882 color: #f5f7fa; /* Light foreground text */ | |
| 883 } | |
| 884 | |
| 885 .theme-light .generic-chart-container { | |
| 886 color: #585959; /* Grey foreground text */ | |
| 887 } | |
| 888 | |
| 889 .theme-dark .chart-colored-blob { | |
| 890 fill: #a9bacb; /* Light content text */ | |
| 891 background: #a9bacb; | |
| 892 } | |
| 893 | |
| 894 .theme-light .chart-colored-blob { | |
| 895 fill: #8fa1b2; /* Grey content text */ | |
| 896 background: #8fa1b2; | |
| 897 } | |
| 898 | |
| 899 /* Charts: Pie */ | |
| 900 | |
| 901 .pie-chart-slice { | |
| 902 stroke-width: 1px; | |
| 903 cursor: pointer; | |
| 904 } | |
| 905 | |
| 906 .theme-dark .pie-chart-slice { | |
| 907 stroke: rgba(0,0,0,0.2); | |
| 908 } | |
| 909 | |
| 910 .theme-light .pie-chart-slice { | |
| 911 stroke: rgba(255,255,255,0.8); | |
| 912 } | |
| 913 | |
| 914 .theme-dark .pie-chart-slice[largest] { | |
| 915 stroke-width: 2px; | |
| 916 stroke: #fff; | |
| 917 } | |
| 918 | |
| 919 .theme-light .pie-chart-slice[largest] { | |
| 920 stroke: #000; | |
| 921 } | |
| 922 | |
| 923 .pie-chart-label { | |
| 924 text-anchor: middle; | |
| 925 dominant-baseline: middle; | |
| 926 pointer-events: none; | |
| 927 } | |
| 928 | |
| 929 .theme-dark .pie-chart-label { | |
| 930 fill: #000; | |
| 931 } | |
| 932 | |
| 933 .theme-light .pie-chart-label { | |
| 934 fill: #fff; | |
| 935 } | |
| 936 | |
| 937 .pie-chart-container[slices="1"] > .pie-chart-slice { | |
| 938 stroke-width: 0px; | |
| 939 } | |
| 940 | |
| 941 .pie-chart-slice, | |
| 942 .pie-chart-label { | |
| 943 transition: all 0.1s ease-out; | |
| 944 } | |
| 945 | |
| 946 .pie-chart-slice:not(:hover):not([focused]), | |
| 947 .pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label { | |
| 948 transform: none !important; | |
| 949 } | |
| 950 | |
| 951 /* Charts: Table */ | |
| 952 | |
| 953 .table-chart-title { | |
| 954 padding-bottom: 10px; | |
| 955 font-size: 120%; | |
| 956 font-weight: 600; | |
| 957 } | |
| 958 | |
| 959 .table-chart-row { | |
| 960 margin-top: 1px; | |
| 961 cursor: pointer; | |
| 962 } | |
| 963 | |
| 964 .table-chart-grid:hover > .table-chart-row { | |
| 965 transition: opacity 0.1s ease-in-out; | |
| 966 } | |
| 967 | |
| 968 .table-chart-grid:not(:hover) > .table-chart-row { | |
| 969 transition: opacity 0.2s ease-in-out; | |
| 970 } | |
| 971 | |
| 972 .generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover), | |
| 973 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) { | |
| 974 opacity: 0.4; | |
| 975 } | |
| 976 | |
| 977 .table-chart-row-box { | |
| 978 width: 8px; | |
| 979 height: 1.5em; | |
| 980 -moz-margin-end: 10px; | |
| 981 } | |
| 982 | |
| 983 .table-chart-row-label { | |
| 984 width: 8em; | |
| 985 -moz-padding-end: 6px; | |
| 986 cursor: inherit; | |
| 987 } | |
| 988 | |
| 989 .table-chart-totals { | |
| 990 margin-top: 8px; | |
| 991 padding-top: 6px; | |
| 992 } | |
| 993 | |
| 994 .theme-dark .table-chart-totals { | |
| 995 border-top: 1px solid #b6babf; /* Grey foreground text */ | |
| 996 } | |
| 997 | |
| 998 .theme-light .table-chart-totals { | |
| 999 border-top: 1px solid #585959; /* Grey foreground text */ | |
| 1000 } | |
| 1001 | |
| 1002 .table-chart-summary-label { | |
| 1003 font-weight: 600; | |
| 1004 padding: 1px 0px; | |
| 1005 } | |
| 1006 | |
| 1007 .theme-dark .table-chart-summary-label { | |
| 1008 color: #f5f7fa; /* Light foreground text */ | |
| 1009 } | |
| 1010 | |
| 1011 .theme-light .table-chart-summary-label { | |
| 1012 color: #18191a; /* Dark foreground text */ | |
| 1013 } | |
| 1014 | |
| 1015 %include ../../shared/devtools/app-manager/manifest-editor.inc.css |
