├── material-design-for-devtools.zip ├── material-design-for-devtools ├── devtools.html ├── images │ ├── icon16.png │ ├── icon48.png │ ├── icon96.png │ ├── icon128.png │ ├── marquee.png │ ├── preview1.png │ ├── preview2.png │ ├── preview3.png │ └── icon-large.png ├── devtools.js ├── manifest.json └── material-design-theme.css ├── LICENSE └── README.md /material-design-for-devtools.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FelipeMartinin/material-design-devtools/HEAD/material-design-for-devtools.zip -------------------------------------------------------------------------------- /material-design-for-devtools/devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /material-design-for-devtools/images/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FelipeMartinin/material-design-devtools/HEAD/material-design-for-devtools/images/icon16.png -------------------------------------------------------------------------------- /material-design-for-devtools/images/icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FelipeMartinin/material-design-devtools/HEAD/material-design-for-devtools/images/icon48.png -------------------------------------------------------------------------------- /material-design-for-devtools/images/icon96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FelipeMartinin/material-design-devtools/HEAD/material-design-for-devtools/images/icon96.png -------------------------------------------------------------------------------- /material-design-for-devtools/images/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FelipeMartinin/material-design-devtools/HEAD/material-design-for-devtools/images/icon128.png -------------------------------------------------------------------------------- /material-design-for-devtools/images/marquee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FelipeMartinin/material-design-devtools/HEAD/material-design-for-devtools/images/marquee.png -------------------------------------------------------------------------------- /material-design-for-devtools/images/preview1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FelipeMartinin/material-design-devtools/HEAD/material-design-for-devtools/images/preview1.png -------------------------------------------------------------------------------- /material-design-for-devtools/images/preview2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FelipeMartinin/material-design-devtools/HEAD/material-design-for-devtools/images/preview2.png -------------------------------------------------------------------------------- /material-design-for-devtools/images/preview3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FelipeMartinin/material-design-devtools/HEAD/material-design-for-devtools/images/preview3.png -------------------------------------------------------------------------------- /material-design-for-devtools/images/icon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FelipeMartinin/material-design-devtools/HEAD/material-design-for-devtools/images/icon-large.png -------------------------------------------------------------------------------- /material-design-for-devtools/devtools.js: -------------------------------------------------------------------------------- 1 | var x = new XMLHttpRequest(); 2 | x.open('GET', 'material-design-theme.css'); 3 | x.onload = function() { 4 | chrome.devtools.panels.applyStyleSheet(x.responseText); 5 | }; 6 | x.send(); -------------------------------------------------------------------------------- /material-design-for-devtools/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Material Design Theme for Chrome Devtools", 3 | "short_name": "Material Design Theme", 4 | "version": "0.1.2", 5 | "devtools_page": "devtools.html", 6 | "homepage_url": "https://github.com/FelipeMartinin/material-design-devtools", 7 | "manifest_version": 2, 8 | "icons": { 9 | "16": "images/icon16.png", 10 | "48": "images/icon48.png", 11 | "128": "images/icon128.png" 12 | } 13 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Mattia Astorino 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Material Design Theme for Chrome Devtools 2 | v0.1.0 3 | 4 | ![Material Design](https://github.com/FelipeMartinin/material-design-devtools/blob/master/material-design-for-devtools/images/marquee.png) 5 | 6 | > A Google Chrome Devtools Theme 7 | 8 | 9 | 10 | ## About 11 | 12 | ![Material Theme Screen](https://github.com/FelipeMartinin/material-design-devtools/blob/master/material-design-for-devtools/images/preview1.png) 13 | 14 | 15 | * Theme Name: Material Design for Devtools 16 | * Theme Author: Felipe Martinin 17 | * URL: felipemartinin.com 18 | * Twitter: @FelipeMartinin 19 | * Facebook: facebook.com/FelipeMartinin 20 | * Inspired by: http://equinusocio.github.io/material-theme/ 21 | 22 | 23 | 24 | This is a theme inspired by [Material Theme](https://github.com/equinusocio/material-theme) for sublime text, that brings the [Material Design](https://design.google.com/) visual language to your Chrome Devtools. This theme adds some features like smart highlights, besides making your Devtools interface more beautiful. 25 | 26 | 27 | 28 | ## Features 29 | ![Chrome Preview](https://github.com/FelipeMartinin/material-design-devtools/blob/master/material-design-for-devtools/images/preview2.png) 30 | 31 | 32 | ## Installation Guide 33 | 34 | 35 | Free to download and install via the [Chrome Webstore](https://chrome.google.com/webstore/detail/bhhaihcbledolbbigofbpegdbomoimfa/publish-accepted?hl=pt-BR) 36 | 37 | After installing and enabling in settings > extensions, you need to enable custom themes to make it work: 38 | - Navigate to `chrome://flags/` 39 | - Search by: `Developer Tools Experiments` and click on enable 40 | - Click on "Relaunch Now" button at the bottom and wait the browser relaunch 41 | - Now, open the devtools 42 | - Go to the settings (gear icon) > experiments 43 | - click `allow custom ui themes` 44 | - reload devtools for theme to fully apply 45 | 46 | 47 | ## Contribution 48 | 49 | 50 | This theme is also yours. So feel free to help us improve it. We are waiting for your pull request. 51 | 52 | 53 | Hope you enjoy! 54 | -------------------------------------------------------------------------------- /material-design-for-devtools/material-design-theme.css: -------------------------------------------------------------------------------- 1 | /***************************************************************************** 2 | 3 | Theme: Material Design Theme for Devtools; 4 | Version: 0.1.2; 5 | By: Felipe Martinin; 6 | Site: felipemartinin.com; 7 | By Felipe Martinin 8 | built on the chrome version 45.0.2454.101 9 | Updated on version: 53.0.2785.116 by: github.com/mliq 10 | 11 | 12 | Twitter: @FelipeMartinin 13 | Facebook: facebook/FelipemMartinin 14 | 15 | 16 | Project Repository: https://github.com/FelipeMartinin/material-design-devtools/ 17 | Project Page: http://felipemartinin.github.io/material-design-devtools/ 18 | 19 | ********************************************************************************/ 20 | 21 | #toolbar > .toolbar-item.toggleable.toggled-on { 22 | -webkit-transition: border-top 0.25s ease-out 0; 23 | } 24 | .tabbed-pane:not(.help-window-main) .tabbed-pane-header-tab.selected, 25 | .small .tabbed-pane:not(.help-window-main) .tabbed-pane-header-tab.selected { 26 | -webkit-transition: border-top 0.25s ease-out 0; 27 | } 28 | /*-- NETWORK PANES --*/ 29 | #network-views { 30 | -webkit-animation: bounceInRight 0.5s ease-in-out; 31 | } 32 | /*-- INACTIVE SELECTORS --*/ 33 | .styles-section .properties .overloaded, 34 | .styles-section .properties .inactive, 35 | .styles-section .properties .disabled, 36 | .styles-section .properties .not-parsed-ok { 37 | -webkit-transition: opacity 0.5s ease-in-out 0; 38 | } 39 | .styles-section .properties .enabled-button { 40 | -webkit-transition: visibility 0.5s ease-in-out; 41 | } 42 | /*-- HIGHLIGHT CHILDREN --*/ 43 | .panel.elements .parent + .children { 44 | -webkit-transition: 0.5s ease-in 0.25s; 45 | } 46 | .panel.elements .parent.selected.expanded + .children > :last-child *, 47 | .panel.elements .parent.hovered.expanded + .children > :last-child * { 48 | -webkit-transition: opacity 0.5s ease-in-out 0.25s; 49 | } 50 | /*-- POPOVERS --*/ 51 | .popover { 52 | -webkit-animation: growFadeIn 0.2s ease-in-out; 53 | } 54 | .popover.top-left-arrow { 55 | -webkit-transform-origin: 25% 0%; 56 | } 57 | .popover.top-right-arrow { 58 | -webkit-transform-origin: 75% 0%; 59 | } 60 | .popover.right-top-arrow { 61 | -webkit-transform-origin: 100% 10%; 62 | } 63 | .popover.right-bottom-arrow { 64 | -webkit-transform-origin: 100% 90%; 65 | } 66 | .popover.bottom-left-arrow { 67 | -webkit-transform-origin: 25% 100%; 68 | } 69 | .popover.bottom-right-arrow { 70 | -webkit-transform-origin: 75% 100%; 71 | } 72 | .popover.left-top-arrow { 73 | -webkit-transform-origin: 0% 10%; 74 | } 75 | .popover.left-bottom-arrow { 76 | -webkit-transform-origin: 0% 90%; 77 | } 78 | /* -- KEYFRAME DECLARATIONS -- */ 79 | @-webkit-keyframes match-animation { 80 | 0% { 81 | box-shadow: 0 0 0 #263238; 82 | background-color: #263238; 83 | color: #263238; 84 | } 85 | 50% { 86 | box-shadow: 0 0 25px #80cbc4; 87 | } 88 | 100% { 89 | box-shadow: 0 0 0 #80cbc4; 90 | background-color: #80cbc4; 91 | } 92 | } 93 | @-webkit-keyframes bounceInLeft { 94 | 0% { 95 | opacity: 0; 96 | -webkit-transform: translateX(-550px); 97 | } 98 | 60% { 99 | opacity: 1; 100 | -webkit-transform: translateX(30px); 101 | } 102 | 80% { 103 | -webkit-transform: translateX(-10px); 104 | } 105 | 100% { 106 | -webkit-transform: translateX(0); 107 | } 108 | } 109 | @-webkit-keyframes bounceInRight { 110 | 0% { 111 | opacity: 0; 112 | -webkit-transform: translateX(550px); 113 | } 114 | 60% { 115 | opacity: 1; 116 | -webkit-transform: translateX(-30px); 117 | } 118 | 80% { 119 | -webkit-transform: translateX(10px); 120 | } 121 | 100% { 122 | -webkit-transform: translateX(0); 123 | } 124 | } 125 | @-webkit-keyframes bounceInUp { 126 | 0% { 127 | opacity: 0; 128 | -webkit-transform: translateY(500px); 129 | } 130 | 60% { 131 | opacity: 1; 132 | -webkit-transform: translateY(-30px); 133 | } 134 | 80% { 135 | -webkit-transform: translateY(10px); 136 | } 137 | 100% { 138 | -webkit-transform: translateY(0); 139 | } 140 | } 141 | @-webkit-keyframes slideInLeftBig { 142 | 0% { 143 | -webkit-transform: translateX(-500px); 144 | } 145 | 100% { 146 | -webkit-transform: translateX(0); 147 | } 148 | } 149 | @-webkit-keyframes slideInRightBig { 150 | 0% { 151 | -webkit-transform: translateX(500px); 152 | } 153 | 100% { 154 | -webkit-transform: translateX(0); 155 | } 156 | } 157 | @-webkit-keyframes growFadeIn { 158 | 0% { 159 | opacity: 0; 160 | -webkit-transform: scale(0.3); 161 | } 162 | 100% { 163 | -webkit-transform: scale(1); 164 | } 165 | } 166 | .panel.visible { 167 | -webkit-transform: translatez(0); 168 | } 169 | /*-- HIGHLIGHT CHILDREN --*/ 170 | .panel.elements /deep/ .parent + .children { 171 | -webkit-transition: 0.5s ease-in 0.25s; 172 | } 173 | .panel.elements /deep/ .hovered.parent.expanded + .children > li:last-of-type .webkit-html-tag.close, 174 | .panel.elements /deep/ .selected.parent.expanded + .children > li:last-of-type .webkit-html-tag.close { 175 | -webkit-transition: opacity 0.5s ease-in-out 0.25s; 176 | } 177 | .panel.elements .parent.selected.expanded + .children, 178 | .panel.elements .parent.hovered.expanded + .children { 179 | border-bottom-left-radius: 5px; 180 | border-bottom-right-radius: 5px; 181 | padding-bottom: 5px !important; 182 | box-shadow: inset 0px 0px 3px 0px #a6f2f8 !important; 183 | border-bottom: 1px solid #2f3740 !important; 184 | } 185 | .panel.elements .parent.selected.expanded + .children > li .webkit-html-pseudo-element:first-child, 186 | .panel.elements .parent.hovered.expanded + .children > li .webkit-html-pseudo-element:first-child { 187 | color: #80cbc4 !important; 188 | } 189 | .panel.elements .parent.selected.expanded + .children > :last-child *, 190 | .panel.elements .parent.hovered.expanded + .children > :last-child * { 191 | opacity: .6; 192 | } 193 | .panel.elements /deep/ .parent.selected.expanded + .children, 194 | .panel.elements /deep/ .parent.hovered.expanded + .children { 195 | border-bottom-left-radius: 5px; 196 | border-bottom-right-radius: 5px; 197 | padding-bottom: 5px !important; 198 | box-shadow: inset 0px 0px 3px 0px #a6f2f8 !important; 199 | border-bottom: none !important; 200 | } 201 | .panel.elements /deep/ .parent.selected.expanded + .children > li .webkit-html-pseudo-element:first-child, 202 | .panel.elements /deep/ .parent.hovered.expanded + .children > li .webkit-html-pseudo-element:first-child { 203 | color: #80cbc4 !important; 204 | } 205 | .panel.elements /deep/ .parent.selected.expanded + .children > li:last-of-type .webkit-html-tag.close, 206 | .panel.elements /deep/ .parent.hovered.expanded + .children > li:last-of-type .webkit-html-tag.close { 207 | opacity: 0.5 !important; 208 | } 209 | /* Zero Dark Matrix by Maurice Cruz [@mauricecruz] */ 210 | /*************************************************************************/ 211 | /********************************************** 212 | /* Animations 213 | /* ------------------------------------------- 214 | /* If you are experiencing performance issues, 215 | /* remove the animations section below. 216 | /**********************************************/ 217 | .cm-breakpoint .CodeMirror-gutter-elt { 218 | color: #000 !important; 219 | font-weight: 700 !important; 220 | } 221 | .CodeMirror-cursor { 222 | border-left: 1px solid #cdd3de !important; 223 | } 224 | .cm-error { 225 | background: #9d1e15 !important; 226 | border-radius: 2px !important; 227 | color: #eee !important; 228 | } 229 | .CodeMirror-gutter-elt { 230 | color: #546e7a !important; 231 | } 232 | .CodeMirror-gutters { 233 | background: #263238 !important; 234 | border-right: 2px solid #2e3c43 !important; 235 | } 236 | .CodeMirror-selected, 237 | span.CodeMirror-selectedtext { 238 | background: #2e3c43 !important; 239 | } 240 | .CodeMirror-code .CodeMirror-matchingbracket { 241 | color: #80cbc4 !important; 242 | text-shadow: 0 0 3px #80cbc4 !important; 243 | border-bottom: none !important; 244 | font-weight: 800 !important; 245 | } 246 | .CodeMirror-code .CodeMirror-nonmatchingbracket { 247 | color: #db0404 !important; 248 | text-shadow: 0 0 3px #db0404 !important; 249 | border-bottom: none !important; 250 | font-weight: 800 !important; 251 | } 252 | .cm-search-highlight-start:before { 253 | border-color: #80cbc4 !important; 254 | } 255 | .cm-search-highlight-end:before { 256 | border-color: #80cbc4 !important; 257 | } 258 | .cm-search-highlight:before { 259 | border-color: #80cbc4 !important; 260 | padding: 2px !important; 261 | } 262 | .cm-line-with-selection .cm-column-with-selection.cm-search-highlight:before { 263 | background-color: #80cbc4 !important; 264 | border-radius: 2px !important; 265 | } 266 | span.cm-token-highlight { 267 | background-color: transparent !important; 268 | padding: 0px !important; 269 | } 270 | span.cm-token-highlight:before { 271 | border-color: #80cbc4 !important; 272 | } 273 | .cm-line-with-selection span.cm-column-with-selection { 274 | color: #000 !important; 275 | background-color: #80cbc4 !important; 276 | } 277 | .cm-whitespace:before { 278 | color: #2e3c43 !important; 279 | } 280 | .cm-tab:before { 281 | border-bottom: 1px solid #2e3c43 !important; 282 | } 283 | .cm-highlight { 284 | -webkit-animation: "fadeout-revised" 3s 0s !important; 285 | 286 | } 287 | .cm-highlight *:not(.CodeMirror-linenumber) { 288 | color: #e6e6e6 !important; 289 | } 290 | .cm-execution-line { 291 | background-color: #3e4c58 !important; 292 | outline: 1px solid #2e3c43 !important; 293 | } 294 | .CodeMirror-linenumber { 295 | border-right: none !important; 296 | } 297 | .cm-line-without-source-mapping { 298 | background-color: #263238 !important; 299 | } 300 | @-webkit-keyframes fadeout-revised { 301 | 0% { 302 | background-color: #3e4c58; 303 | 304 | } 305 | 50% { 306 | background-color: #3e4c58; 307 | 308 | } 309 | 100% { 310 | background-color: #263238; 311 | outline: 1px solid #263238; 312 | } 313 | } 314 | /************************************************ 315 | /* Elements Crumbs 316 | /************************************************/ 317 | #elements-crumbs { 318 | background: #263238 !important; 319 | border-top: 1px solid #2e3c43 !important; 320 | border-top: none !important; 321 | height: 19px !important; 322 | } 323 | #elements-crumbs .crumbs { 324 | text-shadow: none !important; 325 | color: #b1bdc4 !important; 326 | } 327 | #elements-crumbs .crumbs .crumb { 328 | -webkit-border-image: none !important; 329 | border-left: 1px solid #2e3c43 !important; 330 | border-right: 1px solid #282e35 !important; 331 | padding: 0 10px !important; 332 | margin: 0 !important; 333 | line-height: 18px !important; 334 | } 335 | #elements-crumbs .crumbs .crumb:hover { 336 | color: #f8f8f8 !important; 337 | background-color: #b1bdc4 !important; 338 | } 339 | #elements-crumbs .crumbs .crumb.selected { 340 | background-color: #3e4c58 !important; 341 | text-shadow: none !important; 342 | color: #f8f8f8 !important; 343 | cursor: default; 344 | } 345 | /*************************************************** 346 | /* Dialog Boxes 347 | /* ------------------------------------------- 348 | /* Search Functions/Selectors in File [Ctrl+Shift+O] 349 | /***************************************************/ 350 | .dialog { 351 | background: #282e35 !important; 352 | box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.6) !important; 353 | border: 1px solid #2e3c43 !important; 354 | } 355 | .dialog .fill { 356 | border: none !important; 357 | } 358 | .dialog .selected { 359 | background-color: #3e4c58 !important; 360 | box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.3) !important; 361 | color: #cdd3de !important; 362 | } 363 | .dialog input, 364 | .dialog input:focus { 365 | background-color: #263238 !important; 366 | border: none !important; 367 | color: #e6e6e6 !important; 368 | padding: 0 5px; 369 | } 370 | .filtered-item-list-dialog-item { 371 | background-color: #263238 !important; 372 | border-top: 1px solid #2e3c43 !important; 373 | border-bottom: 1px solid #2e3c43 !important; 374 | } 375 | .filtered-item-list-dialog-item .filtered-item-list-dialog-subtitle { 376 | color: #808080 !important; 377 | } 378 | .filtered-item-list-dialog-item:not(.selected):hover { 379 | background-color: #282e35 !important; 380 | box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.8) !important; 381 | } 382 | .filtered-item-list-dialog-item .filtered-item-list-dialog-title, 383 | .filtered-item-list-dialog-item span { 384 | color: #e6e6e6 !important; 385 | } 386 | .filtered-item-list-dialog-item .highlight { 387 | color: #80cbc4 !important; 388 | } 389 | .filtered-item-list-dialog > div.container { 390 | background-color: #263238 !important; 391 | } 392 | .text-button, 393 | [is="text-button"] { 394 | background: #263238 !important; 395 | color: #cdd3de !important; 396 | border: none !important; 397 | border-radius: 3px !important; 398 | cursor: pointer !important; 399 | box-shadow: none !important; 400 | text-shadow: none !important; 401 | } 402 | .text-button:disabled, 403 | [is="text-button"]:disabled { 404 | cursor: default !important; 405 | opacity: 0.3 !important; 406 | } 407 | .text-button:not(:disabled):active, 408 | [is="text-button"]:not(:disabled):active { 409 | box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important; 410 | } 411 | .chrome-select { 412 | background-color: #282e35 !important; 413 | border-color: #2e3c43 !important; 414 | color: #e6e6e6 !important; 415 | background-image: none !important; 416 | text-shadow: none !important; 417 | -webkit-appearance: menulist !important; 418 | box-shadow: none !important; 419 | } 420 | .chrome-select:disabled { 421 | opacity: .3 !important !important; 422 | } 423 | .chrome-select:focus { 424 | outline-color: none !important !important; 425 | } 426 | .search-drawer-header label.search-config-label, 427 | .drawer .settings-tab label, 428 | #drawer-footer td label { 429 | text-shadow: none !important; 430 | color: #b1bdc4 !important; 431 | } 432 | .overrides-view .tabbed-pane-header-tab { 433 | color: #b1bdc4 !important; 434 | } 435 | .overrides-view .tabbed-pane-content { 436 | color: #b1bdc4 !important; 437 | } 438 | .overrides-view .tabbed-pane-content :disabled { 439 | color: rgba(204, 204, 204, 0.3) !important; 440 | } 441 | .overrides-view input, 442 | .overrides-view select { 443 | background-color: #282e35 !important; 444 | border-color: #2e3c43 !important; 445 | color: #e6e6e6 !important; 446 | } 447 | .overrides-view input:disabled, 448 | .overrides-view select:disabled { 449 | opacity: .3 !important !important; 450 | } 451 | .overrides-view input:focus, 452 | .overrides-view select:focus { 453 | outline-color: none !important !important; 454 | } 455 | input[type="range"]::-webkit-slider-runnable-track { 456 | background: #263238 !important; 457 | border-top: 1px solid #2e3c43 !important; 458 | height: 5px !important; 459 | text-align: center !important; 460 | margin: 10px 0 !important; 461 | } 462 | input[type='range']::-webkit-slider-thumb { 463 | position: relative !important; 464 | top: -5px !important; 465 | } 466 | .revision-history-link { 467 | color: #80cbc4 !important; 468 | } 469 | .outline-disclosure.revision-history-drawer ol li { 470 | padding-top: 2px !important; 471 | line-height: 15px !important; 472 | } 473 | .revision-history-drawer > ol > .parent { 474 | background-color: #2a2a2a !important; 475 | color: #b1bdc4 !important; 476 | border-top: 1px solid #2e3c43 !important; 477 | border-bottom: 1px solid #151515 !important; 478 | margin: 0 !important; 479 | height: 22px !important; 480 | } 481 | .revision-history-drawer > ol > .parent + .children { 482 | margin-bottom: 10px !important; 483 | } 484 | .revision-history-drawer .revision-history-revision { 485 | color: #b1bdc4 !important; 486 | background-color: #263238 !important; 487 | border-top: 1px solid #363636 !important; 488 | border-bottom: 1px solid #1a1a1a !important; 489 | height: 22px !important; 490 | line-height: 20px !important; 491 | } 492 | .revision-history-drawer .webkit-line-number { 493 | background: #263238 !important; 494 | border-right: 1px solid #2e3c43 !important; 495 | padding: 1px 5px 1px 0 !important; 496 | display: inline-block; 497 | color: #546e7a !important; 498 | } 499 | .revision-history-drawer .source-code { 500 | margin: 5px 0 15px 10px !important; 501 | } 502 | .revision-history-drawer .source-code .revision-history-line-separator:nth-child(1) { 503 | background-color: #263238 !important; 504 | } 505 | .revision-history-drawer .revision-history-line-separator { 506 | margin-top: 4px !important; 507 | } 508 | .revision-history-drawer .revision-history-line-removed, 509 | .revision-history-drawer .revision-history-line-added { 510 | background-color: #263238 !important; 511 | } 512 | .revision-history-drawer .revision-history-line-removed span:last-child, 513 | .revision-history-drawer .revision-history-line-added span:last-child { 514 | margin-left: 2px; 515 | } 516 | .revision-history-drawer .revision-history-line-removed { 517 | color: #ff5a5a !important; 518 | } 519 | .revision-history-drawer .revision-history-line-added { 520 | color: #7eb17e !important; 521 | } 522 | .help-footnote { 523 | border-top: none !important; 524 | } 525 | .help-footnote a { 526 | color: #80cbc4; 527 | } 528 | button.overrides-swap { 529 | background: #263238 !important; 530 | color: #cdd3de !important; 531 | border: none !important; 532 | border-radius: 3px !important; 533 | cursor: pointer !important; 534 | box-shadow: none !important; 535 | text-shadow: none !important; 536 | } 537 | button.overrides-swap:disabled { 538 | cursor: default !important; 539 | opacity: 0.3 !important; 540 | } 541 | button.overrides-swap:not(:disabled):active { 542 | box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important; 543 | } 544 | .overrides-activate-device #tab-device .tabbed-pane-header-tab-title::after, 545 | .overrides-activate-media #tab-media .tabbed-pane-header-tab-title::after, 546 | .overrides-activate-network #tab-network .tabbed-pane-header-tab-title::after, 547 | .overrides-activate-sensors #tab-sensors .tabbed-pane-header-tab-title::after { 548 | color: #80cbc4 !important; 549 | } 550 | /**********************************************/ 551 | /* Find Module [ctrl+shift+F / cmd+shift+F] 552 | /**********************************************/ 553 | #search-results-pane-file-based .search-result, 554 | ::shadow #search-results-pane-file-based .search-result { 555 | background-color: #2a2a2a !important; 556 | color: #b1bdc4 !important; 557 | border-top: 1px solid #363636 !important; 558 | border-bottom: 1px solid #2e3c43 !important; 559 | line-height: 18px !important; 560 | margin: 0 !important; 561 | } 562 | #search-results-pane-file-based .show-more-matches, 563 | ::shadow #search-results-pane-file-based .show-more-matches { 564 | color: #80cbc4 !important; 565 | } 566 | #search-results-pane-file-based .parent:hover, 567 | ::shadow #search-results-pane-file-based .parent:hover { 568 | background-color: #282e35 !important; 569 | color: #d9d9d9 !important; 570 | } 571 | #search-results-pane-file-based .parent .search-result-file-name, 572 | ::shadow #search-results-pane-file-based .parent .search-result-file-name { 573 | color: #546e7a !important; 574 | } 575 | #search-results-pane-file-based .parent .search-result-matches-count, 576 | ::shadow #search-results-pane-file-based .parent .search-result-matches-count { 577 | color: #71f38f !important; 578 | } 579 | .toolbar-search button, 580 | ::shadow .search-action-button { 581 | background: #263238 !important; 582 | color: #cdd3de !important; 583 | border: none!important; 584 | border-radius: 3px !important; 585 | cursor: pointer !important; 586 | box-shadow: none !important; 587 | text-shadow: none !important; 588 | } 589 | .toolbar-search button:disabled { 590 | cursor: default !important; 591 | opacity: 0.3 !important; 592 | } 593 | .toolbar-search button:not(:disabled):active { 594 | box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important; 595 | } 596 | .toolbar-search-control, 597 | ::shadow .toolbar-search-control { 598 | background-color: #282e35 !important; 599 | border: 1px solid #2e3c43 !important; 600 | } 601 | .toolbar-search-control input, 602 | ::shadow .toolbar-search-control input { 603 | background-color: #282e35 !important; 604 | border-color: #2e3c43 !important; 605 | color: #e6e6e6 !important; 606 | border-color: none !important; 607 | } 608 | .toolbar-search-control input:disabled, 609 | ::shadow .toolbar-search-control input:disabled { 610 | opacity: .3 !important; 611 | } 612 | .toolbar-search-control input:focus, 613 | ::shadow .toolbar-search-control input:focus { 614 | outline-color: none !important; 615 | } 616 | .toolbar-search-control .toolbar-search-navigation-controls, 617 | ::shadow .toolbar-search-control .toolbar-search-navigation-controls { 618 | background: #263238 !important; 619 | } 620 | .toolbar-search-control .toolbar-search-navigation.toolbar-search-navigation-prev, 621 | .toolbar-search-control .toolbar-search-navigation.toolbar-search-navigation-next, 622 | ::shadow .toolbar-search-control .toolbar-search-navigation.toolbar-search-navigation-prev, 623 | ::shadow .toolbar-search-control .toolbar-search-navigation.toolbar-search-navigation-next { 624 | border: 1px solid #363636 !important; 625 | } 626 | ::shadow .search-replace.toolbar-replace-control { 627 | background-color: #282e35 !important; 628 | border-color: #2e3c43 !important; 629 | color: #e6e6e6 !important; 630 | } 631 | ::shadow .search-replace.toolbar-replace-control:disabled { 632 | opacity: .3 !important; 633 | } 634 | ::shadow .search-replace.toolbar-replace-control:focus { 635 | outline-color: none !important; 636 | } 637 | .search-drawer-header input[type="text"].search-config-search, 638 | ::shadow .search-config-search { 639 | background-color: #282e35 !important; 640 | color: #e6e6e6 !important; 641 | border: 1px solid #2e3c43 !important; 642 | } 643 | .search-drawer-header input[type="text"].search-config-search:focus, 644 | ::shadow .search-config-search:focus { 645 | outline-color: #80cbc4 !important; 646 | } 647 | #drawer-contents .search-match-line-number, 648 | ::shadow .search-match-line-number { 649 | background: #263238 !important; 650 | border-right: 1px solid #2e3c43 !important; 651 | padding: 1px 5px 1px 0 !important; 652 | display: inline-block; 653 | color: #546e7a !important; 654 | } 655 | #search-results-pane-file-based .search-match .highlighted-match, 656 | .highlighted-search-result, 657 | .webkit-highlighted-line.webkit-line-content, 658 | ::shadow #search-results-pane-file-based .search-match .highlighted-match { 659 | color: #000000 !important; 660 | border-radius: 2px !important; 661 | font-size: 1em !important; 662 | background-color: #80cbc4 !important; 663 | box-shadow: rgba(0, 0, 0, 0.498039) 3px 3px 4px 0px !important; 664 | } 665 | .search-match:hover { 666 | background-color: #282e35 !important; 667 | box-shadow: inset 0 1px 0 0 #282e35, inset 0 -1px 0 0 #282e35; 668 | } 669 | .status-bar, 670 | ::shadow .search-bar { 671 | background-color: #282e35 !important; 672 | border-top: none !important; 673 | border-bottom: none !important; 674 | } 675 | .search-results-matches { 676 | color: #b1bdc4 !important; 677 | } 678 | .search-match-content, 679 | ::shadow .search-match-content { 680 | color: #b1bdc4 !important; 681 | } 682 | .search-status-bar-summary, 683 | ::shadow .search-status-bar-summary { 684 | background: linear-gradient(#505050, #363636) !important; 685 | border-top: 1px solid #505050 !important; 686 | } 687 | .search-drawer-header input[type="checkbox"].search-config-checkbox { 688 | vertical-align: middle !important; 689 | } 690 | .sidebar-pane-filter-box { 691 | border-top: 1px solid #2e3c43 !important; 692 | } 693 | .sidebar-pane-filter-box.styles-filter-engaged { 694 | background-color: transparent !important; 695 | } 696 | .sidebar-pane-filter-box > input { 697 | color: #b1bdc4 !important; 698 | } 699 | .styles-section .properties li.filter-match, 700 | .styles-section .simple-selector.filter-match { 701 | background-color: #3e4c58 !important; 702 | box-shadow: 0 0 0 1px #2e3c43 !important; 703 | border-radius: 2px; 704 | } 705 | ::shadow ::shadow .regex-search-status-bar-item.status-bar-item.toggled-off .status-bar-button-text, 706 | ::shadow ::shadow .case-sensitive-search-status-bar-item.status-bar-item.toggled-off .status-bar-button-text { 707 | color: #b1bdc4 !important; 708 | } 709 | ::shadow ::shadow .regex-search-status-bar-item.status-bar-item.toggled-on .status-bar-button-text, 710 | ::shadow ::shadow .case-sensitive-search-status-bar-item.status-bar-item.toggled-on .status-bar-button-text { 711 | color: #80cbc4 !important; 712 | } 713 | ::shadow ::shadow .status-bar-item .status-bar-button-text { 714 | color: #b1bdc4 !important; 715 | } 716 | /********************************************** 717 | /* DevTool Chrome 718 | /**********************************************/ 719 | #console-messages, 720 | #console-view, 721 | #network-views .CodeMirror-lines, 722 | #script-view-fallback, 723 | .console-view-wrapper, 724 | .dialog .fill, 725 | .drawer .revision-history-drawer, 726 | .help-window-main, 727 | .panel .split-view-contents, 728 | .panel, 729 | .panel-enabler-view, 730 | .profiles-sidebar-tree-box, 731 | .resource-view .script-view, 732 | .sidebar-overlay, 733 | .split-view-vertical .sidebar-pane.composite .properties-tree, 734 | .styles-section.read-only, 735 | .tabbed-pane-content, 736 | .tabbed-pane-content.has-no-tabs .timeline-records-title, 737 | .timeline-records-list, 738 | #timeline-overview-sidebar { 739 | background-color: #263238 !important; 740 | z-index: 0; 741 | } 742 | .panel-enabler-view { 743 | color: #b1bdc4; 744 | } 745 | .panel .sidebar-tree-item.selected { 746 | background-color: #3e4c58 !important; 747 | color: #e6e6e6 !important; 748 | box-shadow: inset 0 1px 0 0 #2e3c43, inset 0 -1px 0 0 #2e3c43; 749 | } 750 | .panel .sidebar-tree-item:not(.selected):hover { 751 | background-color: #282e35 !important; 752 | color: #b1bdc4 !important; 753 | box-shadow: inset 0 1px 0 0 #282e35, inset 0 -1px 0 0 #282e35; 754 | } 755 | .panel .sidebar-tree-item .disclosure-button { 756 | background-color: #8c8c8c !important; 757 | } 758 | .panel .data-grid th { 759 | border: none !important; 760 | } 761 | .panel .status-bar { 762 | border-bottom: 1px solid #505050; 763 | } 764 | .panel .status-bar-text { 765 | color: #b1bdc4 !important; 766 | } 767 | body.dock-to-right.inactive:not(.undocked):not(.overlay-contents), 768 | body.dock-to-right:not(.undocked):not(.overlay-contents) { 769 | border-left: transparent !important; 770 | } 771 | .split-view.vbox > .split-view-sidebar.split-view-contents-second:not(.maximized) { 772 | border-top: none !important; 773 | } 774 | .tabbed-pane-content .settings-tab-text-button { 775 | background: #263238 !important; 776 | border-top: 1px solid #2e3c43 !important; 777 | color: #cdd3de !important; 778 | border-radius: 3px !important; 779 | cursor: pointer !important; 780 | box-shadow: none !important; 781 | text-shadow: none !important; 782 | } 783 | .tabbed-pane-content .settings-tab-text-button:disabled { 784 | cursor: default !important; 785 | opacity: 0.3 !important; 786 | } 787 | .tabbed-pane-content .settings-tab-text-button:not(:disabled):active { 788 | box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important; 789 | } 790 | .split-view.vbox > .split-view-resizer > .split-view-resizer-border, 791 | .split-view.hbox > .split-view-resizer > .split-view-resizer-border { 792 | border: none !important; 793 | } 794 | .sidebar { 795 | background: none !important; 796 | } 797 | .editing { 798 | background-color: #263238 !important; 799 | outline: 1px solid #80cbc4 !important; 800 | color: #b1bdc4 !important; 801 | } 802 | /**********************************************/ 803 | /* Navigation Arrows 804 | /**********************************************/ 805 | .styles-section.matched-styles .properties li.parent.expanded .expand-element, 806 | #console-messages .console-group-messages .section.expanded .header::before, 807 | #console-messages .properties-tree li.parent.expanded::before, 808 | .outline-disclosure li.parent.expanded::before, 809 | .properties-tree li.parent.expanded::before, 810 | .section.expanded > .header::before, 811 | .section .event-bar.expanded .header::before, 812 | .sidebar-pane .parent.expanded::before, 813 | .sidebar-pane-stack .sidebar-pane-title.expanded::before, 814 | .timeline-expandable-expanded .timeline-expandable-arrow, 815 | .styles-section.matched-styles .style-properties li.parent.expanded .expand-element { 816 | background-color: #8c8c8c !important; 817 | background-image: none !important; 818 | -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important; 819 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 820 | -webkit-mask-position: -4px -96px; 821 | -webkit-transform: rotate(90deg); 822 | } 823 | .sidebar-pane-stack .sidebar-pane-title.expanded::before { 824 | -webkit-transform: rotate(90deg) translateX(2px); 825 | } 826 | .styles-section.matched-styles .properties li.parent .expand-element, 827 | #console-messages .console-group-messages .section .header::before, 828 | #console-messages .properties-tree li.parent::before, 829 | .outline-disclosure li.parent::before, 830 | #search-results-pane-file-based .parent::before, 831 | .properties-tree li.parent::before, 832 | .section > .header::before, 833 | .section .event-bar .header::before, 834 | .sidebar-pane .parent::before, 835 | .sidebar-pane-stack .sidebar-pane-title::before, 836 | .timeline-expandable-collapsed .timeline-expandable-arrow, 837 | ::shadow #search-results-pane-file-based .parent::before, 838 | .styles-section.matched-styles .style-properties li.parent .expand-element { 839 | background-color: #8c8c8c !important; 840 | background-image: none !important; 841 | -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important; 842 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 843 | -webkit-mask-position: -4px -96px; 844 | -webkit-transform: rotate(0deg); 845 | } 846 | .data-grid th.sort-ascending > div::after { 847 | background-color: #8c8c8c !important; 848 | background-image: none !important; 849 | -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important; 850 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 851 | -webkit-mask-position: -4px -108px !important; 852 | } 853 | .data-grid th.sort-descending > div::after { 854 | background-color: #8c8c8c !important; 855 | background-image: none !important; 856 | -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important; 857 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 858 | -webkit-mask-position: -20px -96px !important; 859 | } 860 | #search-results-pane-file-based .parent.expanded::before, 861 | ::shadow #search-results-pane-file-based .parent.expanded::before { 862 | -webkit-mask-position: -20px -96px !important; 863 | } 864 | #search-results-pane-file-based .parent.expanded::before, 865 | ::shadow #search-results-pane-file-based .parent.expanded::before { 866 | -webkit-mask-position: -20px -93px !important; 867 | } 868 | #search-results-pane-file-based .parent::before, 869 | ::shadow #search-results-pane-file-based .parent::before { 870 | -webkit-mask-position: -4px -93px !important; 871 | } 872 | .panel.network . li.parent::before { 873 | top: 3px !important; 874 | } 875 | .sidebar-tabbed-pane .section > .header::before, 876 | .event-bars .event-bar .header::before { 877 | margin-top: 3px !important; 878 | } 879 | .status-bar-select-arrow { 880 | background-color: #8c8c8c !important; 881 | background-image: none !important; 882 | -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important; 883 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 884 | -webkit-mask-position: -20px -96px !important; 885 | } 886 | /**********************************************/ 887 | /* Console 888 | /**********************************************/ 889 | #console-messages { 890 | border-top: none !important; 891 | } 892 | .console-message { 893 | border-bottom: none !important; 894 | } 895 | .console-message-wrapper { 896 | margin: 1px 0; 897 | } 898 | .console-status-bar { 899 | background: #263238 !important; 900 | border-top: 1px solid #2e3c43 !important; 901 | border-bottom: none !important; 902 | } 903 | #console-prompt { 904 | color: #f1f1f1 !important; 905 | border-top: none !important; 906 | border-top: 1px solid #2e3c43 !important; 907 | border-bottom: 1px solid #2e3c43 !important; 908 | } 909 | .console-user-command { 910 | border-top: none !important; 911 | border-bottom: none !important; 912 | width: 100% !important; 913 | } 914 | #console-messages .console-user-command > .console-message-text { 915 | vertical-align: text-top !important; 916 | } 917 | .console-adjacent-user-command-result { 918 | background-color: #282e35 !important; 919 | border-top: 1px solid #2a2a2a !important; 920 | border-bottom: 1px solid #2e3c43 !important; 921 | } 922 | .console-message .children li, 923 | .console-user-command .children li { 924 | margin: 1px 0 !important; 925 | } 926 | #console-messages .console-user-command > .console-message-text { 927 | color: #b1bdc4 !important; 928 | } 929 | #console-messages .console-debug-level .console-message-text, 930 | #console-messages .console-debug-level .console-message-url { 931 | color: #fc844c !important; 932 | } 933 | #console-messages .console-debug-level .children div:hover * { 934 | color: #fc7333 !important; 935 | } 936 | #console-messages .console-debug-level .section > .header .title { 937 | color: #fc844c !important; 938 | } 939 | #console-messages .console-debug-level .bubble, 940 | #console-messages .console-debug-level .bubble-repeat-count { 941 | background-color: #fc844c !important; 942 | } 943 | #console-messages .console-log-level .console-message-text, 944 | #console-messages .console-log-level .console-message-url { 945 | color: #929ba2 !important; 946 | } 947 | #console-messages .console-log-level .children div:hover * { 948 | color: #359ccd !important; 949 | } 950 | #console-messages .console-log-level .section > .header .title { 951 | color: #929ba2 !important; 952 | } 953 | #console-messages .console-log-level .bubble, 954 | #console-messages .console-log-level .bubble-repeat-count { 955 | background-color: #929ba2 !important; 956 | } 957 | #console-messages .console-warning-level .console-message-text, 958 | #console-messages .console-warning-level .console-message-url { 959 | color: #ddbb00 !important; 960 | } 961 | #console-messages .console-warning-level .children div:hover * { 962 | color: #c4a500 !important; 963 | } 964 | #console-messages .console-warning-level .section > .header .title { 965 | color: #ddbb00 !important; 966 | } 967 | #console-messages .console-warning-level .bubble, 968 | #console-messages .console-warning-level .bubble-repeat-count { 969 | background-color: #ddbb00 !important; 970 | } 971 | #console-messages .console-error-level .console-message-text, 972 | #console-messages .console-error-level .console-message-url { 973 | color: #ff5a5a !important; 974 | } 975 | #console-messages .console-error-level .children div:hover * { 976 | color: #ff4141 !important; 977 | } 978 | #console-messages .console-error-level .section > .header .title { 979 | color: #ff5a5a !important; 980 | } 981 | #console-messages .console-error-level .bubble, 982 | #console-messages .console-error-level .bubble-repeat-count { 983 | background-color: #ff5a5a !important; 984 | } 985 | #console-messages .console-info-level .console-message-text, 986 | #console-messages .console-info-level .console-message-url { 987 | color: #80cbc4 !important; 988 | } 989 | #console-messages .console-info-level .children div:hover * { 990 | color: #915eff !important; 991 | } 992 | #console-messages .console-info-level .section > .header .title { 993 | color: #80cbc4 !important; 994 | } 995 | #console-messages .console-info-level .bubble, 996 | #console-messages .console-info-level .bubble-repeat-count { 997 | background-color: #80cbc4 !important; 998 | } 999 | #console-messages .outline-disclosure .stacktrace-entry:hover { 1000 | background-color: #252525 !important; 1001 | } 1002 | #console-messages a { 1003 | color: #546e7a !important; 1004 | } 1005 | #console-messages a:hover { 1006 | color: #959595 !important; 1007 | } 1008 | #console-messages .console-error-level::before { 1009 | top: 9px !important; 1010 | } 1011 | #console-messages .console-message { 1012 | color: #b1bdc4 !important; 1013 | } 1014 | .console-message .bubble { 1015 | text-shadow: 0 0 1px rgba(0, 0, 0, 0.8) !important; 1016 | } 1017 | .console-formatted-node:hover { 1018 | background: rgba(47, 47, 47, 0.5) !important; 1019 | } 1020 | .vbox.devices { 1021 | color: #b1bdc4 !important; 1022 | } 1023 | .vbox.devices a { 1024 | color: #80cbc4; 1025 | } 1026 | .console-message-wrapper { 1027 | border-bottom: none !important; 1028 | } 1029 | .console-error-level { 1030 | background-color: rgba(255, 90, 90, 0.05) !important; 1031 | border-top: 1px solid rgba(255, 90, 90, 0.05) !important; 1032 | border-bottom: 1px solid rgba(255, 90, 90, 0.05) !important; 1033 | } 1034 | .console-error-level + .console-error-level { 1035 | border-top: none !important; 1036 | } 1037 | .console-warning-level { 1038 | background-color: rgba(221, 187, 0, 0.05) !important; 1039 | border-top: 1px solid rgba(221, 187, 0, 0.05) !important; 1040 | border-bottom: 1px solid rgba(221, 187, 0, 0.05) !important; 1041 | } 1042 | .console-warning-level + .console-warning-level { 1043 | border-top: none !important; 1044 | } 1045 | .console-object-preview .name { 1046 | color: #77a8c6 !important; 1047 | } 1048 | .object-value-object, 1049 | .object-value-map, 1050 | .object-value-set, 1051 | .object-value-iterator, 1052 | .object-value-generator, 1053 | .object-value-node, 1054 | .object-value-array { 1055 | color: #546e7a !important; 1056 | } 1057 | .object-value-number, 1058 | .object-value-boolean { 1059 | color: #80cbc4 !important; 1060 | } 1061 | .object-value-function { 1062 | color: #fbe793 !important; 1063 | } 1064 | .object-value-function::before { 1065 | color: #b1bdc4 !important; 1066 | } 1067 | .object-value-string { 1068 | color: #fbe793 !important; 1069 | } 1070 | .object-value-null { 1071 | color: #546e7a !important; 1072 | } 1073 | .object-value-number { 1074 | color: #80cbc4 !important; 1075 | } 1076 | .object-value-calculate-value-button { 1077 | color: #546e7a !important; 1078 | } 1079 | .object-value-error { 1080 | color: #ff5a5a !important; 1081 | } 1082 | ::shadow .object-properties-section .name { 1083 | color: #77a8c6 !important; 1084 | } 1085 | ::shadow .object-properties-section .number { 1086 | color: #80cbc4 !important; 1087 | } 1088 | ::shadow .console-object-preview .name { 1089 | color: #77a8c6 !important; 1090 | } 1091 | ::shadow .object-value-object, 1092 | ::shadow .object-value-map, 1093 | ::shadow .object-value-set, 1094 | ::shadow .object-value-iterator, 1095 | ::shadow .object-value-generator, 1096 | ::shadow .object-value-node, 1097 | ::shadow .object-value-array { 1098 | color: #546e7a !important; 1099 | } 1100 | ::shadow .object-value-number, 1101 | ::shadow .object-value-boolean { 1102 | color: #80cbc4 !important; 1103 | } 1104 | ::shadow .object-value-function { 1105 | color: #fbe793 !important; 1106 | } 1107 | ::shadow .object-value-function::before { 1108 | color: #b1bdc4 !important; 1109 | } 1110 | ::shadow .object-value-string { 1111 | color: #fbe793 !important; 1112 | } 1113 | ::shadow .object-value-null { 1114 | color: #546e7a !important; 1115 | } 1116 | ::shadow .object-value-number { 1117 | color: #80cbc4 !important; 1118 | } 1119 | ::shadow .object-value-calculate-value-button { 1120 | color: #546e7a !important; 1121 | } 1122 | ::shadow .object-value-error { 1123 | color: #ff5a5a !important; 1124 | } 1125 | body /deep/ .link { 1126 | color: #c792ea !important; 1127 | } 1128 | /********************************************** 1129 | /* Element - Edit HTML 1130 | /**********************************************/ 1131 | .source-code .CodeMirror { 1132 | outline: none !important; 1133 | border: 1px solid #2e3c43 !important; 1134 | border-radius: 5px; 1135 | box-shadow: inset 0 0 15px 0 rgba(17, 17, 17, 0.6) !important; 1136 | margin: 10px 0; 1137 | padding: 10px 0 0 10px !important; 1138 | color: #b1bdc4 !important; 1139 | } 1140 | /********************************************** 1141 | /* Element Highlighter 1142 | /**********************************************/ 1143 | .panel.elements #elements-content .CodeMirror { 1144 | outline: none !important; 1145 | } 1146 | .panel.elements ::shadow .outline-disclosure ol:focus li.selected .selection, 1147 | .panel.console ::shadow .outline-disclosure ol:focus li.selected .selection, 1148 | .panel.elements ::shadow .elements-disclosure ol:focus li.selected .selection, 1149 | .panel.console ::shadow .elements-disclosure ol:focus li.selected .selection, 1150 | .panel.elements ::shadow .outline-disclosure li.selected .selection, 1151 | .panel.console ::shadow .outline-disclosure li.selected .selection, 1152 | .panel.elements ::shadow .elements-disclosure li.selected .selection, 1153 | .panel.console ::shadow .elements-disclosure li.selected .selection { 1154 | /* outline: 1px solid #2e3c43 !important; */ 1155 | background-color: #3e4c58 !important; 1156 | } 1157 | .panel.elements ::shadow .outline-disclosure li.hovered:not(.selected) .selection, 1158 | .panel.console ::shadow .outline-disclosure li.hovered:not(.selected) .selection, 1159 | .panel.elements ::shadow .elements-disclosure li.hovered:not(.selected) .selection, 1160 | .panel.console ::shadow .elements-disclosure li.hovered:not(.selected) .selection { 1161 | border-radius: 0 !important; 1162 | background-color: #282e35 !important; 1163 | border-top: 1px solid #282e35 !important; 1164 | border-bottom: 1px solid #282e35 !important; 1165 | } 1166 | .outline-disclosure li.in-clipboard .highlight { 1167 | outline: 1px dashed #546e7a !important; 1168 | } 1169 | /********************************************** 1170 | /* Element Highlighter 1171 | /**********************************************/ 1172 | .paint-profiler-overview, 1173 | .paint-profiler-canvas-container canvas, 1174 | .paint-profiler-view canvas { 1175 | background-color: #263238 !important; 1176 | } 1177 | .progress-banner { 1178 | background-color: rgba(111, 111, 111, 0.5) !important; 1179 | color: #b1bdc4 !important; 1180 | } 1181 | .layers.panel .outline-disclosure li { 1182 | margin-top: 2px !important; 1183 | } 1184 | .layers.panel .selection { 1185 | height: 18px !important; 1186 | } 1187 | .sidebar-tree li { 1188 | color: #b1bdc4 !important; 1189 | } 1190 | /********************************************** 1191 | /* Network Tab (uses _tables.less for list of nodes) 1192 | /**********************************************/ 1193 | #network-container { 1194 | border-top: none !important; 1195 | } 1196 | #network-container:not(.brief-mode) .network-log-grid.data-grid td.name-column:hover { 1197 | text-decoration: none !important; 1198 | } 1199 | .data-grid { 1200 | border: none !important; 1201 | } 1202 | .data-grid th.sort-ascending, 1203 | .data-grid th.sort-descending, 1204 | .data-grid th.sortable, 1205 | .data-grid .timeline-column { 1206 | border-right: 1px solid #2e3c43 !important; 1207 | } 1208 | .data-grid .network-timeline-grid .resources-divider-label { 1209 | color: #b1bdc4 !important; 1210 | } 1211 | .data-grid .network-timeline-grid .resources-divider { 1212 | border-right: 1px solid #2e3c43; 1213 | } 1214 | .highlighted-row { 1215 | -webkit-animation: "fadeout-revised" 2s 0s !important; 1216 | } 1217 | /*dropdownlist in network panel*/ 1218 | .timeline-column option { 1219 | color: #b1bdc4 !important; 1220 | background: #263238 !important; 1221 | } 1222 | .resource-view.image .title { 1223 | color: #b1bdc4 !important; 1224 | } 1225 | .resource-view.image .infoList dt { 1226 | color: #626262 !important; 1227 | margin-bottom: 5px !important; 1228 | } 1229 | .resource-view.image .infoList dd { 1230 | color: #b1bdc4 !important; 1231 | margin-bottom: 5px !important; 1232 | } 1233 | .request-headers-view .header-name { 1234 | color: #626262 !important; 1235 | } 1236 | .request-headers-view .header-value { 1237 | color: #b1bdc4 !important; 1238 | } 1239 | .request-headers-view .caution { 1240 | color: #ddbb00 !important; 1241 | } 1242 | /* Fallback Support */ 1243 | .resource-source-frame-fallback { 1244 | background-color: #282e35 !important; 1245 | color: #b1bdc4 !important; 1246 | } 1247 | /* Network Timing Pane */ 1248 | .resource-timing-view table { 1249 | background-color: #282e35 !important; 1250 | padding: 20px !important; 1251 | border-radius: 4px; 1252 | margin: 20px !important; 1253 | } 1254 | .resource-timing-view table td .network-timing-bar-title { 1255 | color: #b1bdc4 !important; 1256 | text-shadow: 0 1px 1px #2e3c43 !important; 1257 | } 1258 | .resource-timing-view .network-timing-table .footnote a, 1259 | .resource-timing-view .network-timing-table .network-timing-footer a { 1260 | color: #c792ea; 1261 | } 1262 | #network-views .request-headers-view .parent, 1263 | .network .request-headers-view .parent { 1264 | background-color: #282828 !important; 1265 | color: #b1bdc4 !important; 1266 | border-top: 1px solid #2e3c43 !important; 1267 | border-bottom: 1px solid #151515 !important; 1268 | line-height: 18px; 1269 | } 1270 | #network-views .script-view-fallback { 1271 | background-color: #263238 !important; 1272 | color: #b1bdc4 !important; 1273 | } 1274 | .request-headers-view .outline-disclosure .header-count, 1275 | .request-headers-view .outline-disclosure .header-toggle { 1276 | color: #80cbc4 !important; 1277 | margin-left: 4px !important; 1278 | } 1279 | .request-headers-view .outline-disclosure .header-toggle:hover { 1280 | text-shadow: 0 0 10px #80cbc4; 1281 | } 1282 | .network-cell-subtitle { 1283 | color: #bfbfbf !important; 1284 | } 1285 | .network-log-grid.data-grid th { 1286 | border-bottom: transparent !important; 1287 | } 1288 | .network.panel .panel-status-bar { 1289 | border-bottom: none !important; 1290 | } 1291 | .data-grid .network-error-row, 1292 | .data-grid .network-error-row > td, 1293 | .data-grid .network-error-row .network-cell-subtitle { 1294 | color: #ff5a5a !important; 1295 | } 1296 | /**********************************************/ 1297 | /* Elements/Network 1298 | /**********************************************/ 1299 | .panel:not(.timeline):not(.audits):not(.profiles):not(.cpu-profiler):not(.css-profiler):not(.heap-profiler):not(.canvas-profiler) table, 1300 | .network-graph-bar, 1301 | .network-graph-label, 1302 | .network-graph-bar-area { 1303 | color: #b1bdc4 !important; 1304 | } 1305 | .network-summary-bar { 1306 | background: #263238 !important; 1307 | border-top: 1px solid #2e3c43 !important; 1308 | border-top: none !important; 1309 | color: #b1bdc4 !important; 1310 | } 1311 | .network-log-grid.data-grid .bottom-filler-td { 1312 | background: none !important; 1313 | } 1314 | #network-views .resource-view.html { 1315 | background-color: #fff !important; 1316 | } 1317 | /********************************************** 1318 | /* Profilers 1319 | /**********************************************/ 1320 | #profile-views .data-grid td > div, 1321 | .profile-launcher-view label, 1322 | .retainers-view-header, 1323 | .profile-launcher-view-tree-item, 1324 | .sidebar-tree-section, 1325 | .resources-divider-label, 1326 | .panel:not(.timeline) .sidebar-tree-item, 1327 | .profile-entry-info, 1328 | ::shadow .flame-chart-entry-info { 1329 | color: #b1bdc4 !important; 1330 | } 1331 | .profile-entry-info, 1332 | ::shadow .flame-chart-entry-info { 1333 | text-shadow: 0 0 1px #263238; 1334 | background-color: rgba(34, 34, 34, 0.9) !important; 1335 | border-radius: 4px; 1336 | } 1337 | #profile-views .data-grid button { 1338 | color: #bfbfbf !important; 1339 | } 1340 | .heap-snapshot-view tr:not(.selected) td.object-column span.highlight { 1341 | background-color: #3e4c58 !important; 1342 | border-radius: 3px; 1343 | } 1344 | .profiles-status-bar { 1345 | background: #263238 !important; 1346 | border-top: 1px solid #2e3c43 !important; 1347 | box-shadow: none !important; 1348 | border-bottom: none !important; 1349 | } 1350 | .profiles-status-bar .status-bar { 1351 | background-color: transparent !important; 1352 | } 1353 | .profiles-status-bar .status-bar, 1354 | .retainers-view-header, 1355 | .heap-snapshot-view .class-view-toolbar { 1356 | border-top: none !important; 1357 | border-bottom: none !important; 1358 | } 1359 | input.status-bar-item { 1360 | background-color: #2e3c43; 1361 | color: #e6e6e6; 1362 | border: 1px solid #2e3c43; 1363 | } 1364 | input.status-bar-item:hover, 1365 | input.status-bar-item:focus { 1366 | border: 1px solid #2e3c43 !important; 1367 | } 1368 | .heap-snapshot-view .heap-snapshot-view-resizer { 1369 | background: #263238 !important; 1370 | border-top: 1px solid #2e3c43 !important; 1371 | box-shadow: none !important; 1372 | border-top: none !important; 1373 | border-bottom: none !important; 1374 | color: #b1bdc4; 1375 | } 1376 | #profile-views .data-container .object-column { 1377 | color: #b1bdc4; 1378 | } 1379 | #profile-views .data-container .object-column button { 1380 | background: #263238 !important; 1381 | color: #cdd3de !important; 1382 | border: none !important; 1383 | border-radius: 3px !important; 1384 | cursor: pointer !important; 1385 | box-shadow: none !important; 1386 | text-shadow: none !important; 1387 | } 1388 | #profile-views .data-container .object-column button:disabled { 1389 | cursor: default !important; 1390 | opacity: 0.3 !important; 1391 | } 1392 | #profile-views .data-container .object-column button:not(:disabled):active { 1393 | box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important; 1394 | } 1395 | .data-grid td, 1396 | .heap-snapshot-stats-name, 1397 | .heap-snapshot-stats-size { 1398 | color: #b1bdc4 !important; 1399 | } 1400 | /********************************************** 1401 | /* Resources Tab 1402 | /**********************************************/ 1403 | .resources-status-bar .status-bar { 1404 | background: #263238 !important; 1405 | border-top: 1px solid #2e3c43 !important; 1406 | box-shadow: none !important; 1407 | border-top: none !important; 1408 | } 1409 | /*-- WEB SQL --*/ 1410 | .database-query-prompt { 1411 | color: #b1bdc4 !important; 1412 | } 1413 | .database-user-query { 1414 | border-top: 1px solid #263238 !important; 1415 | border-bottom: 1px solid #080808 !important; 1416 | padding-bottom: 10px !important; 1417 | } 1418 | .database-user-query + span { 1419 | padding: 2px 0 !important; 1420 | border-top: 1px solid #263238 !important; 1421 | border-bottom: 1px solid #080808 !important; 1422 | background-color: #282e35 !important; 1423 | width: 100% !important; 1424 | } 1425 | .database-user-query .database-query-text { 1426 | color: #b1bdc4 !important; 1427 | width: 100% !important; 1428 | display: inline-block !important; 1429 | margin-bottom: 5px; 1430 | margin-top: 2px; 1431 | } 1432 | .database-user-query::before, 1433 | .database-query-result::before { 1434 | margin-top: -5px !important; 1435 | } 1436 | .database-user-query .error { 1437 | color: #ff5a5a !important; 1438 | } 1439 | .indexed-db-database-view .outline-disclosure .attribute-name { 1440 | color: #ffcb6b !important; 1441 | } 1442 | .indexed-db-database-view .outline-disclosure .attribute-value { 1443 | color: #c3e88d !important; 1444 | } 1445 | /************************************* 1446 | * Help/Settings Overlay 1447 | *************************************/ 1448 | .help-window-main { 1449 | color: #b1bdc4 !important; 1450 | /*************************************************** 1451 | /* Workspaces Dialog Box 1452 | ****************************************************/ 1453 | } 1454 | .help-window-main .settings-tab-container header { 1455 | border-bottom: 1px solid #6f6f6f !important; 1456 | } 1457 | .help-window-main .help-footnote { 1458 | border-top: 1px solid #6f6f6f !important; 1459 | } 1460 | .help-window-main label, 1461 | .help-window-main label:hover { 1462 | color: #b1bdc4 !important; 1463 | } 1464 | .help-window-main .tabbed-pane-header-tab.selected { 1465 | color: #80cbc4 !important; 1466 | } 1467 | .help-window-main .help-section-title { 1468 | color: #80cbc4 !important; 1469 | } 1470 | .help-window-main .help-block label, 1471 | .help-window-main .help-block td { 1472 | color: #b1bdc4 !important; 1473 | } 1474 | .help-window-main select, 1475 | .help-window-main input, 1476 | .help-window-main option { 1477 | background-color: #282e35 !important; 1478 | border-color: #2e3c43 !important; 1479 | color: #e6e6e6 !important; 1480 | } 1481 | .help-window-main select:disabled, 1482 | .help-window-main input:disabled, 1483 | .help-window-main option:disabled { 1484 | opacity: .3 !important; 1485 | } 1486 | .help-window-main select:focus, 1487 | .help-window-main input:focus, 1488 | .help-window-main option:focus { 1489 | outline-color: none !important; 1490 | } 1491 | .help-window-main fieldset:disabled label { 1492 | color: rgba(204, 204, 204, 0.3) !important; 1493 | } 1494 | .help-window-main select:disabled, 1495 | .help-window-main input:disabled, 1496 | .help-window-main .settings-tab-text-button:disabled { 1497 | background-image: none !important; 1498 | box-shadow: none !important; 1499 | text-shadow: none !important; 1500 | } 1501 | .help-window-main .help-key-cell .help-key { 1502 | color: #333333 !important; 1503 | } 1504 | .help-window-main .help-key-cell span { 1505 | color: #eeeeee !important; 1506 | } 1507 | .help-window-main .settings-list-container { 1508 | padding: 10px !important; 1509 | background-color: #263238 !important; 1510 | } 1511 | .help-window-main .settings-list { 1512 | border: 1px solid #454545 !important; 1513 | } 1514 | .help-window-main .settings-list-item { 1515 | background-color: #282e35 !important; 1516 | border-top: 1px solid #2e3c43 !important; 1517 | border-bottom: 1px solid #2e3c43 !important; 1518 | } 1519 | .help-window-main .settings-list-item.selected { 1520 | background-color: rgba(150, 255, 150, 0.2) !important; 1521 | } 1522 | .help-window-main .settings-list-item:nth-child(1) { 1523 | border-top: none !important; 1524 | } 1525 | .help-window-main .settings-list-item:last-child { 1526 | border-bottom: none !important; 1527 | } 1528 | .help-window-main .file-system-path-name { 1529 | color: #80cbc4 !important; 1530 | } 1531 | .file-system-path, 1532 | .list-column-text, 1533 | .settings-list-column-path { 1534 | color: #b1bdc4 !important; 1535 | } 1536 | .list-column-editor { 1537 | background-color: #282e35 !important; 1538 | border: 1px solid #2e3c43 !important; 1539 | color: #e6e6e6 !important; 1540 | } 1541 | .settings-dialog { 1542 | border: 1px solid #454545 !important; 1543 | background-color: #263238 !important; 1544 | border-radius: 4px !important; 1545 | } 1546 | .settings-dialog .dialog-contents label { 1547 | color: #b1bdc4; 1548 | } 1549 | .settings-dialog .dialog-contents .header { 1550 | color: #eeeeee !important; 1551 | } 1552 | .settings-dialog .dialog-contents .block-header { 1553 | color: #80cbc4 !important; 1554 | } 1555 | .settings-dialog .settings-list-container { 1556 | background-color: #444444 !important; 1557 | } 1558 | .settings-dialog .settings-list { 1559 | border-color: #444444 !important; 1560 | border-radius: 2px !important; 1561 | } 1562 | .settings-dialog .settings-list-item { 1563 | background-color: #444444 !important; 1564 | border-top: 1px solid #2e3c43 !important; 1565 | /* testsasdf */ 1566 | border-bottom: 1px solid #2e3c43 !important; 1567 | /* testsasdf */ 1568 | color: #333333 !important; 1569 | } 1570 | .settings-dialog .add-list-item { 1571 | border-bottom: none !important; 1572 | } 1573 | .settings-dialog .file-mappings-list .settings-list-item:first-child, 1574 | .settings-dialog .excluded-folders-section .settings-list-item:first-child { 1575 | border-top: none !important; 1576 | } 1577 | .swatch { 1578 | width: 12px !important; 1579 | height: 12px !important; 1580 | } 1581 | .blackbox-dialog .columns-header { 1582 | color: #80cbc4 !important; 1583 | } 1584 | /********************************************** 1585 | /* Sources Tab 1586 | /**********************************************/ 1587 | /*placeholder text when no file is open*/ 1588 | .tabbed-pane-placeholder, 1589 | ::shadow .tabbed-pane-placeholder { 1590 | text-shadow: 0 1px 0 #181818 !important; 1591 | color: #999999 !important; 1592 | } 1593 | /*-- Save Problem Overlay --*/ 1594 | .source-frame-unsaved-committed-changes { 1595 | background-color: #263238 !important; 1596 | } 1597 | .source-frame-debugger-script { 1598 | background-color: #263238 !important; 1599 | } 1600 | .sidebar-pane { 1601 | /* Breakpoints/Dom Breakpoints */ 1602 | /* Call Stack */ 1603 | } 1604 | .sidebar-pane .breakpoints-list-deactivated { 1605 | background-color: #282e35 !important; 1606 | opacity: 0.3 !important; 1607 | } 1608 | .sidebar-pane .breakpoint-list li { 1609 | color: #80cbc4 !important; 1610 | border-top: 1px solid #343434 !important; 1611 | border-bottom: 1px solid #101010 !important; 1612 | } 1613 | .sidebar-pane .breakpoint-list li:not(.breakpoint-hit):hover { 1614 | background-color: #282e35 !important; 1615 | border-top: 1px solid #343434 !important; 1616 | border-bottom: 1px solid #101010 !important; 1617 | } 1618 | .sidebar-pane .breakpoint-hit { 1619 | background: #3e4c58 !important; 1620 | border-top: 1px solid #2e3c43 !important; 1621 | border-bottom: 1px solid #2e3c43 !important; 1622 | color: #eee !important; 1623 | } 1624 | .sidebar-pane .placard .title, 1625 | .sidebar-pane .placard .subtitle, 1626 | .sidebar-pane ::shadow .list-item .title, 1627 | .sidebar-pane ::shadow .list-item .subtitle { 1628 | color: #b1bdc4 !important; 1629 | } 1630 | .sidebar-pane .placard:nth-of-type(2n), 1631 | .sidebar-pane ::shadow .list-item:nth-of-type(2n) { 1632 | background: #2a2a2a !important; 1633 | } 1634 | .sidebar-pane .placard.selected, 1635 | .sidebar-pane ::shadow .list-item.selected { 1636 | background: #3e4c58 !important; 1637 | color: #e6e6e6 !important; 1638 | border-top: 1px solid #2e3c43 !important; 1639 | border-bottom: 1px solid #2e3c43 !important; 1640 | } 1641 | .sidebar-pane .placard.selected .title, 1642 | .sidebar-pane .placard.selected .subtitle, 1643 | .sidebar-pane ::shadow .list-item.selected .title, 1644 | .sidebar-pane ::shadow .list-item.selected .subtitle { 1645 | color: #e6e6e6 !important; 1646 | } 1647 | .sidebar-pane .hidden-placards-message, 1648 | .sidebar-pane .callstack-info.status { 1649 | background-color: #2e3c43 !important; 1650 | color: #ddbb00; 1651 | } 1652 | .sidebar-pane .hidden-placards-message .node-link, 1653 | .sidebar-pane .callstack-info.status .node-link { 1654 | color: #80cbc4; 1655 | } 1656 | .sidebar-pane > .body .placard + .info, 1657 | .sidebar-pane > .body ::shadow .list-item + .info { 1658 | background: #263238 !important; 1659 | border-top: 0 !important; 1660 | color: #80cbc4 !important; 1661 | font-style: normal !important; 1662 | } 1663 | .breakpoints-deactivated .breakpoint-list { 1664 | background-color: #b1bdc4 !important; 1665 | opacity: .3 !important; 1666 | } 1667 | /*Pane Headers*/ 1668 | .sidebar-pane-title { 1669 | background: #263238 !important; 1670 | border-top: 1px solid #2e3c43 !important; 1671 | color: #b1bdc4; 1672 | border-top: none !important; 1673 | border-bottom: 1px solid #2e3c43 !important; 1674 | } 1675 | .sidebar-pane-stack > .sidebar-pane.visible:nth-last-of-type(1) { 1676 | border-bottom: none !important; 1677 | } 1678 | .sidebar-pane .children.expanded, 1679 | li.breakpoint-hit .breakpoint-hit-marker { 1680 | background-color: transparent !important; 1681 | } 1682 | .pane-title-button.add, 1683 | .sidebar-pane-toolbar > .pane-title-button.refresh { 1684 | /*background-image: none !important;*/ 1685 | -webkit-background-position: -24px 0 !important; 1686 | background-color: #b1bdc4 !important; 1687 | -webkit-mask-repeat: no-repeat !important; 1688 | } 1689 | .pane-title-button.add { 1690 | -webkit-mask-image: url(Images/paneAddButtons.png) !important; 1691 | } 1692 | .sidebar-pane-toolbar > .pane-title-button.refresh { 1693 | -webkit-mask-image: url(Images/paneRefreshButtons.png) !important; 1694 | } 1695 | .panel.elements .sidebar-pane .sidebar-pane-toolbar .pane-title-button.element-state, 1696 | .panel.elements .sidebar-pane .sidebar-pane-toolbar .pane-title-button.animations-controls, 1697 | .panel.elements .sidebar-pane .sidebar-pane-toolbar .pane-title-button.add { 1698 | background-color: #cdd3de !important; 1699 | } 1700 | .panel.elements .sidebar-pane .sidebar-pane-toolbar > .pane-title-button.element-state, 1701 | .panel.elements .sidebar-pane .sidebar-pane-toolbar > .pane-title-button.animations-controls, 1702 | .panel.elements .sidebar-pane .sidebar-pane-toolbar > .pane-title-button.add { 1703 | background-image: none !important; 1704 | } 1705 | .panel.elements .sidebar-pane-toolbar > select > option, 1706 | .panel.elements .sidebar-pane-toolbar > select > hr { 1707 | color: #b1bdc4 !important; 1708 | background-color: #263238 !important; 1709 | } 1710 | .panel.elements .sidebar-pane-toolbar > select.select-settings { 1711 | /*background-image: none !important; */ 1712 | -webkit-background-position: -24px 0 !important; 1713 | background-color: #b1bdc4 !important; 1714 | -webkit-mask-repeat: no-repeat !important; 1715 | -webkit-mask-image: url(Images/paneSettingsButtons.png) !important; 1716 | } 1717 | .panel.elements .sidebar-pane-toolbar .pane-title-button.element-state { 1718 | -webkit-mask-image: url(Images/paneElementStateButtons.png) !important; 1719 | } 1720 | .panel.elements .sidebar-pane-toolbar .pane-title-button.animations-controls { 1721 | -webkit-mask-image: url(Images/paneAnimationsButtons.png) !important; 1722 | } 1723 | .panel.elements .sidebar-pane-toolbar .pane-title-button.animations-controls { 1724 | background-color: #000000 !important; 1725 | } 1726 | .panel.elements .sidebar-pane-toolbar .pane-title-button.element-state, 1727 | .panel.elements .sidebar-pane-toolbar .pane-title-button.animations-controls, 1728 | .panel.elements .sidebar-pane-toolbar .pane-title-button.add { 1729 | background-color: #546e7a !important; 1730 | } 1731 | /* Highlight in Scripts */ 1732 | .webkit-highlighted-line.webkit-line-content { 1733 | border-radius: 2px; 1734 | } 1735 | .webkit-highlighted-line.webkit-line-content * { 1736 | color: #181818 !important; 1737 | } 1738 | /*exception icon state colors */ 1739 | .scripts-pause-on-exceptions-status-bar-item.toggled-all .glyph { 1740 | background-color: #dc0303 !important; 1741 | } 1742 | .scripts-pause-on-exceptions-status-bar-item.toggled-uncaught .glyph { 1743 | background-color: #d5bf00 !important; 1744 | } 1745 | .webkit-highlighted-line { 1746 | background-color: #80cbc4 !important; 1747 | } 1748 | .alternate-status-bar-buttons-bar .scripts-pause, 1749 | .alternate-status-bar-buttons-bar .scripts-long-resume, 1750 | .alternate-status-bar-buttons-bar .status-bar-item { 1751 | background-color: #282e35 !important; 1752 | border: 1px solid #263238 !important; 1753 | } 1754 | .alternate-status-bar-buttons-bar .status-bar-item.emulate-active { 1755 | background-color: #263238 !important; 1756 | border: 1px solid #2e3c43 !important; 1757 | } 1758 | .properties-tree li, 1759 | .outline-disclosure li::before, 1760 | .properties-tree li.parent { 1761 | background-color: inherit !important; 1762 | line-height: inherit !important; 1763 | } 1764 | .event-listener-breakpoints.properties-tree li { 1765 | height: auto !important; 1766 | padding-top: 0 !important; 1767 | } 1768 | .event-listener-breakpoints.properties-tree li:before { 1769 | -webkit-mask-position: -4px -93px !important; 1770 | } 1771 | .event-listener-breakpoints.properties-tree li .checkbox-elem { 1772 | top: 2px !important; 1773 | } 1774 | .event-listener-breakpoints.properties-tree li.parent .checkbox-elem { 1775 | top: 3px !important; 1776 | } 1777 | .source-frame-infobar { 1778 | color: #ddbb00; 1779 | border-bottom: 1px solid #2e3c43 !important; 1780 | background-color: #2e3c43 !important; 1781 | } 1782 | .source-frame-infobar-toggle-link { 1783 | color: #80cbc4 !important; 1784 | } 1785 | .sidebar-pane-button-new-rule { 1786 | background-color: #546e7a !important; 1787 | background-image: none; 1788 | -webkit-mask-image: url(Images/paneAddButtons.png) !important; 1789 | -webkit-mask-position: 0 0 !important; 1790 | } 1791 | .sidebar-pane-button-new-rule:hover { 1792 | -webkit-mask-position: -23px 0 !important; 1793 | } 1794 | .text-editor-value-decoration { 1795 | background-color: #282e35 !important; 1796 | color: #b1bdc4 !important; 1797 | padding: 0 5px; 1798 | border-radius: 2px !important; 1799 | box-shadow: 0 1px 0 0 #2e3c43 !important; 1800 | border-top: 1px solid #1c1c1c !important; 1801 | } 1802 | /********************************************** 1803 | /* Sources Panel Controls 1804 | /**********************************************/ 1805 | .scripts-status-bar { 1806 | background: #263238 !important; 1807 | border-top: 1px solid #2e3c43 !important; 1808 | overflow: none !important; 1809 | } 1810 | .scripts-debug-toolbar { 1811 | background: #263238 !important; 1812 | border-top: 1px solid #2e3c43 !important; 1813 | } 1814 | .help-indent-labels label { 1815 | color: #b1bdc4 !important; 1816 | } 1817 | .scripts-debug-toolbar-drawer { 1818 | background-color: transparent !important; 1819 | border-bottom: none !important; 1820 | color: #b1bdc4 !important; 1821 | } 1822 | .CodeMirror .webkit-html-message-bubble { 1823 | color: #111 !important; 1824 | border-radius: 2px !important; 1825 | padding: 2px !important; 1826 | } 1827 | .CodeMirror-linewidget .source-frame-breakpoint-condition { 1828 | border-radius: 4px !important; 1829 | background: #263238 !important; 1830 | border-top: 1px solid #2e3c43 !important; 1831 | } 1832 | .CodeMirror-linewidget .source-frame-breakpoint-condition input { 1833 | color: #b1bdc4 !important; 1834 | } 1835 | .CodeMirror-linewidget .source-frame-breakpoint-message { 1836 | color: #80cbc4 !important; 1837 | } 1838 | .CodeMirror-linewidget #source-frame-breakpoint-condition { 1839 | background-color: #263238 !important; 1840 | border: none !important; 1841 | height: 22px !important; 1842 | } 1843 | /********************************************** 1844 | /* Timeline Tab 1845 | /**********************************************/ 1846 | .timeline .panel-status-bar { 1847 | color: #b1bdc4 !important; 1848 | } 1849 | .timeline-category-statusbar-item, 1850 | .timeline-records-stats, 1851 | .record-title, 1852 | .timeline-aggregated-category { 1853 | text-shadow: none !important; 1854 | color: #b1bdc4 !important; 1855 | } 1856 | #timeline-graphs .timeline-graph-side.hovered, 1857 | .timeline-records-list .timeline-tree-item.hovered:not(.selected) { 1858 | background-color: #282e35 !important; 1859 | outline: 1px solid #282e35 !important; 1860 | } 1861 | #timeline-graphs .timeline-graph-side.selected, 1862 | .timeline-records-list .timeline-tree-item.selected { 1863 | background-color: #3e4c58 !important; 1864 | outline: 1px solid #2e3c43 !important; 1865 | } 1866 | .timeline-records-list .timeline-tree-item { 1867 | color: #b1bdc4 !important; 1868 | } 1869 | .timeline-records-list .timeline-tree-item .data.dimmed { 1870 | color: #b1bdc4 !important; 1871 | opacity: .7 !important; 1872 | } 1873 | /* Timeline */ 1874 | .sidebar-tree-section { 1875 | text-shadow: none !important; 1876 | } 1877 | .timeline-tree-item.selected .timeline-tree-item-expand-arrow, 1878 | .timeline-tree-item-expand-arrow { 1879 | background-color: #8c8c8c !important; 1880 | } 1881 | #counter-values-bar, 1882 | #memory-graphs-container .sidebar-tree-section, 1883 | .timeline-records-title, 1884 | .timeline-details-view-title { 1885 | background: #263238 !important; 1886 | border-top: 1px solid #2e3c43 !important; 1887 | color: #b1bdc4 !important; 1888 | text-shadow: none !important; 1889 | } 1890 | #counter-values-bar { 1891 | position: relative !important; 1892 | top: 1px !important; 1893 | border-bottom: none !important; 1894 | } 1895 | .timeline-aggregated-info-legend > div, 1896 | .memory-counter-sidebar-info { 1897 | color: #b1bdc4 !important; 1898 | } 1899 | .timeline-details-view-row-title { 1900 | color: #626262 !important; 1901 | } 1902 | .timeline-details-view-title { 1903 | border-bottom: none !important; 1904 | } 1905 | .timeline-details-view-row-value, 1906 | .timeline-details-view-row-stack-trace { 1907 | color: #b1bdc4 !important; 1908 | } 1909 | .timeline-details-view-row .timeline-details-view-row-stack-trace .webkit-html-resource-link { 1910 | color: #c792ea !important; 1911 | } 1912 | #timeline-overview-sidebar { 1913 | padding-right: 0 !important; 1914 | border-right: 1px solid #263238 !important; 1915 | } 1916 | #timeline-overview-sidebar .sidebar-tree-item:hover { 1917 | border-left: 6px solid #282e35 !important; 1918 | } 1919 | #timeline-overview-sidebar .sidebar-tree-item.selected { 1920 | border-left: 6px solid #2e3c43 !important; 1921 | } 1922 | #timeline-overview-sidebar .sidebar-tree-item.selected .icon { 1923 | background-color: #e6e6e6 !important; 1924 | } 1925 | #timeline-overview-sidebar .sidebar-tree-item.selected .title { 1926 | color: #e6e6e6 !important; 1927 | } 1928 | #timeline-overview-sidebar .icon { 1929 | background-color: #cdd3de !important; 1930 | } 1931 | #timeline-overview-sidebar .title { 1932 | color: #cdd3de !important; 1933 | } 1934 | .timeline-cpu-curtain-left, 1935 | .timeline-cpu-curtain-right { 1936 | background-color: #b1bdc4 !important; 1937 | opacity: 0.3 !important; 1938 | } 1939 | .timeline-expandable { 1940 | border-left: 1px solid #919#2e3c43598 !important; 1941 | } 1942 | .timeline-expandable-left { 1943 | border-top: 1px solid #b1bdc4 !important; 1944 | border-bottom: 1px solid #b1bdc4 !important; 1945 | } 1946 | .timeline-utilization-strip .timeline-graph-bar { 1947 | border-color: rgba(200, 200, 200, 0.3) !important; 1948 | background-color: rgba(200, 200, 200, 0.2) !important; 1949 | } 1950 | #timeline-overview-panel { 1951 | border-bottom: 1px solid #505050 !important; 1952 | } 1953 | .timeline .resources-event-divider.timeline-frame-divider, 1954 | .resources-divider { 1955 | background-color: #2a2a2a !important; 1956 | } 1957 | .panel:not(.network) .resources-dividers-label-bar { 1958 | background: transparent !important; 1959 | border-bottom: 1px solid #2e3c43 !important; 1960 | } 1961 | .panel #timeline-grid-header .resources-dividers-label-bar { 1962 | background: #263238 !important; 1963 | border-top: 1px solid #2e3c43 !important; 1964 | } 1965 | .overview-grid-dividers-background { 1966 | background-color: red !important; 1967 | } 1968 | #timeline-overview-container { 1969 | background-color: #263238 !important; 1970 | } 1971 | #timeline-overview-container canvas { 1972 | background-color: transparent !important; 1973 | } 1974 | .overview-grid-window-resizer { 1975 | box-shadow: none !important; 1976 | } 1977 | .overview-grid-window-rulers { 1978 | border-right: 1px solid #80cbc4; 1979 | border-left: 1px solid #80cbc4; 1980 | background: #80cbc4 !important; 1981 | opacity: 0.2 !important; 1982 | } 1983 | .timeline-frame-strip { 1984 | color: #b1bdc4 !important; 1985 | } 1986 | .overview-grid-dividers-background { 1987 | background-color: #282e35 !important; 1988 | } 1989 | .overview-grid-window { 1990 | background-color: #263238 !important; 1991 | } 1992 | #memory-counters-graph { 1993 | border-right: 1px solid #2a2a2a !important; 1994 | } 1995 | .timeline-frame-container { 1996 | background: none !important; 1997 | } 1998 | #timeline-overview-panel .split-view-sidebar > label { 1999 | color: #b1bdc4 !important; 2000 | } 2001 | .timeline-range-summary > div { 2002 | color: #b1bdc4 !important; 2003 | } 2004 | .pie-chart-foreground { 2005 | color: #b1bdc4; 2006 | } 2007 | .timeline-progress-pane { 2008 | background-color: rgba(111, 111, 111, 0.5) !important; 2009 | color: #b1bdc4 !important; 2010 | } 2011 | /* ========================================================================== 2012 | Popovers 2013 | ========================================================================== */ 2014 | .popover { 2015 | border-width: 0 !important; 2016 | background: #282e35 !important; 2017 | } 2018 | .popover .arrow { 2019 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAABMCAYAAACPiIzuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTNFODNCNTE0QTZFMjExQjY2OUE2RUJCODYzRjA1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3OEFCNDhBREQzODExMUU0QkVDQjlDQUEzQTE4RjNDRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3OEFCNDhBQ0QzODExMUU0QkVDQjlDQUEzQTE4RjNDRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBBNDY1MkRDMEZBRUUyMTFBM0E2ODlDQkE0ODFDNDcwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxM0U4M0I1MTRBNkUyMTFCNjY5QTZFQkI4NjNGMDVEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7FTUDgAAAgNJREFUeNrsmN9HQ2EYx7d2jBFjjImIERGxH0RXU5ddpMjoakSMiIhddtVVxBgxYsR0MVGilOh6N13F6Kp/YUQc6/vwHE7z7vx430eM8/K52Ox8zvue8z4/3sVHo1FMaszEBEcki2QTRrxYLE7vMvfBAGyayvZACyyAa1DRldFM2q7PKXADymFlNIMuSIx9nwa3YDGorMwXJCfcKAuewJyfbBnc8ZK8BoleWKyU5cEDyATcCXm+cXpcluOp50JurQK/lD+ydTCvuVcrzrWOrAdeNWUN8OWWfYMtDeEJOFe9AEf4HFB0BC68tgYJd8Cjj6jOYea7aUm46yGsj4WZbzipZmhzBmnrBPoPC+9ZTqKO19otn2dDwm0wC4ZSmXYY5EfxqHGJZFPXuHht2lKpNL3LXAIfoEnV3zIQrXCdzXINTerOrMCJ013RazqyVRZlTJ/ZGi8trZNpVaKU6dus+InCyJoB2qzAspbkpm1xOyAWASQ8lAynS24PxGKT2oMDyUC/4nbBlsoaHZ6hzb1I1TJMQSR85/bh01QWY1m482a/3///tD3gHkxE5pwlq1IFJeHaOyLVKcHxV5csdXRQOJasm2d8JhIrwqeMWEVv8NsWkfWc45+prMf/a9imsm5Y0SQZRUMtrEgl66gyaNBhKUTG4dQ2FTkz2wBvUilIRETjV4ABAJTlYyiTdWliAAAAAElFTkSuQmCC) !important; 2020 | } 2021 | .popover .content { 2022 | border-radius: 3px !important; 2023 | color: #b1bdc4 !important; 2024 | } 2025 | .popover .content .source-frame-popover-title { 2026 | color: #ff8b3e !important; 2027 | } 2028 | .popover .content .source-frame-popover-tree { 2029 | border-top: 1px solid #546e7a !important; 2030 | } 2031 | .popover .content .popover-details-title { 2032 | color: #ddbb00 !important; 2033 | } 2034 | .popover .content .popover-details-row-title { 2035 | color: #929ba2 !important; 2036 | } 2037 | .popover .content .network-timing-bar { 2038 | background-color: #80cbc4 !important; 2039 | border-left-color: #80cbc4 !important; 2040 | } 2041 | .popover .content .network-timing-bar-title { 2042 | color: #b1bdc4 !important; 2043 | text-shadow: 0 1px 1px #2e3c43; 2044 | } 2045 | .popover a.undefined { 2046 | color: #c792ea !important; 2047 | } 2048 | .webkit-line-content .text-editor-overlay-highlight { 2049 | background-color: #3e4c58 !important; 2050 | outline: 1px solid #2e3c43 !important; 2051 | } 2052 | .spectrum-container { 2053 | border: none !important; 2054 | background: #263238 !important; 2055 | border-radius: 3px !important; 2056 | padding: 7px 10px !important; 2057 | } 2058 | .spectrum-container .swatch { 2059 | margin-right: 3px !important; 2060 | } 2061 | .spectrum-range-container { 2062 | padding-bottom: 0 !important; 2063 | } 2064 | .spectrum-range-container input { 2065 | position: static !important; 2066 | } 2067 | .bezier-icon { 2068 | background-color: #80cbc4 !important; 2069 | } 2070 | .bezier-icon path { 2071 | stroke: #263238 !important; 2072 | } 2073 | ::shadow .bezier-preview-container { 2074 | background: #b1bdc4 !important; 2075 | } 2076 | ::shadow .bezier-preview-animation { 2077 | background-color: #80cbc4 !important; 2078 | } 2079 | ::shadow .bezier-curve circle.bezier-control-circle { 2080 | fill: #80cbc4 !important; 2081 | } 2082 | ::shadow .bezier-curve line.bezier-control-line { 2083 | stroke: #80cbc4 !important; 2084 | } 2085 | ::shadow .bezier-curve line.bezier-control-accent { 2086 | stroke: #b1bdc4 !important; 2087 | } 2088 | ::shadow .bezier-curve line.linear-line { 2089 | stroke: #282e35 !important; 2090 | } 2091 | ::shadow .bezier-curve path.bezier-path { 2092 | stroke: #000 !important; 2093 | } 2094 | /********************************************** 2095 | /* Readability 2096 | /* ------------------------------------------- 2097 | /* Adjust the line height for elements|sources 2098 | /* tab, find, and console. Adjust margin-top 2099 | /* to line up expand/collapse arrow in 2100 | /* elements panel 2101 | /**********************************************/ 2102 | .text-editor .inner-container .webkit-line-content, 2103 | .text-editor-lines .inner-container .webkit-line-number, 2104 | .styles-section .properties li, 2105 | .CodeMirror-lines, 2106 | #search-results-pane-file-based .search-match, 2107 | ::shadow #search-results-pane-file-based .search-match { 2108 | line-height: 14px !important; 2109 | } 2110 | .panel.elements .outline-disclosure li.parent::before { 2111 | margin-top: 1px; 2112 | } 2113 | /********************************************** 2114 | /* Screencast 2115 | /**********************************************/ 2116 | .screencast { 2117 | background-color: #263238 !important; 2118 | } 2119 | .screencast .screencast-viewport { 2120 | background-color: #2e3c43; 2121 | box-shadow: 0 0 2px 0 #80cbc4; 2122 | margin: auto !important; 2123 | } 2124 | .screencast .screencast-navigation button { 2125 | background-color: #80cbc4 !important; 2126 | -webkit-mask-image: -webkit-image-set(url(Images/navigationControls.png) 1x, url(Images/navigationControls_2x.png) 2x); 2127 | background-image: none !important; 2128 | border: none !important; 2129 | width: 21px !important; 2130 | height: 21px !important; 2131 | cursor: pointer !important; 2132 | } 2133 | .screencast .screencast-navigation button.back { 2134 | -webkit-mask-position: 0 2px; 2135 | } 2136 | .screencast .screencast-navigation button.forward { 2137 | -webkit-mask-position: -17px 2px; 2138 | } 2139 | .screencast .screencast-navigation button.reload { 2140 | -webkit-mask-position: -36px 2px; 2141 | } 2142 | .screencast .screencast-navigation button[disabled] { 2143 | background-color: #b1bdc4 !important; 2144 | opacity: 1 !important; 2145 | cursor: default !important; 2146 | } 2147 | .screencast .screencast-navigation .progress { 2148 | background-color: #80cbc4 !important; 2149 | } 2150 | .screencast .screencast-navigation input { 2151 | background: #282e35 !important; 2152 | color: #e6e6e6 !important; 2153 | border: 1px solid #2e3c43 !important; 2154 | } 2155 | /********************************************** 2156 | /* Scrollbars 2157 | /**********************************************/ 2158 | ::-webkit-scrollbar, 2159 | .CodeMirror-scrollbar-filler, 2160 | .CodeMirror-gutter-filler { 2161 | width: 6px !important; 2162 | height: 12px !important; 2163 | border-radius: 25px !important; 2164 | background-color: #37474f !important; 2165 | } 2166 | ::-webkit-scrollbar-track:horizontal, 2167 | .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:horizontal, 2168 | .custom-popup-vertical-scroll ::-webkit-scrollbar-track:horizontal, 2169 | .custom-popup-vertical-scroll .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:horizontal, 2170 | .custom-popup-horizontal-scroll .custom-popup-vertical-scroll ::-webkit-scrollbar-track:horizontal { 2171 | -webkit-box-shadow: none !important; 2172 | background: #263238 !important; 2173 | } 2174 | ::-webkit-scrollbar-track:vertical, 2175 | .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:vertical, 2176 | .custom-popup-vertical-scroll ::-webkit-scrollbar-track:vertical, 2177 | .custom-popup-vertical-scroll .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:vertical, 2178 | .custom-popup-horizontal-scroll .custom-popup-vertical-scroll ::-webkit-scrollbar-track:vertical { 2179 | -webkit-box-shadow: none !important; 2180 | background: #263238 !important; 2181 | } 2182 | ::-webkit-scrollbar-corner, 2183 | .CodeMirror-scrollbar-filler, 2184 | .CodeMirror-gutter-filler { 2185 | -webkit-box-shadow: inset 1px 5px 6px rgba(0, 0, 0, 0.3) !important; 2186 | } 2187 | ::-webkit-scrollbar-thumb { 2188 | border-radius: 0px !important; 2189 | background-color: #37474f !important; 2190 | border: none!important; 2191 | } 2192 | ::-webkit-scrollbar-thumb:horizontal { 2193 | -webkit-box-shadow: none !important; 2194 | } 2195 | ::-webkit-scrollbar-thumb:vertical { 2196 | -webkit-box-shadow: none !important; 2197 | } 2198 | /*Popover scrollbar overrides */ 2199 | .custom-popup-horizontal-scroll ::-webkit-scrollbar-track, 2200 | .custom-popup-vertical-scroll ::-webkit-scrollbar-track, 2201 | .custom-popup-vertical-scroll .custom-popup-horizontal-scroll ::-webkit-scrollbar-track, 2202 | .custom-popup-horizontal-scroll .custom-popup-vertical-scroll ::-webkit-scrollbar-track { 2203 | -webkit-box-shadow: none !important; 2204 | background-image: none !important; 2205 | } 2206 | .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb { 2207 | -webkit-border-image: none !important; 2208 | } 2209 | .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical { 2210 | -webkit-box-shadow: inset 4px 1px 8px 1px rgba(0, 0, 0, 0.3) !important; 2211 | } 2212 | .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal { 2213 | -webkit-box-shadow: inset 1px 5px 6px rgba(0, 0, 0, 0.3) !important; 2214 | } 2215 | .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:active, 2216 | .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:hover, 2217 | .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:decrement, 2218 | .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:increment, 2219 | .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:active, 2220 | .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:hover, 2221 | .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:decrement, 2222 | .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:increment { 2223 | -webkit-border-image: none !important; 2224 | } 2225 | .custom-popup-horizontal-scroll ::-webkit-scrollbar, 2226 | .custom-popup-vertical-scroll ::-webkit-scrollbar { 2227 | background: none !important; 2228 | } 2229 | /********************************************** 2230 | /* Elements/Sources Right Sidebar 2231 | /**********************************************/ 2232 | .styles-section { 2233 | padding: 4px 0 !important; 2234 | margin: 0 10px; 2235 | border-top: 1px solid #2e3c43 !important; 2236 | border-bottom: none !important; 2237 | } 2238 | .styles-section:first-child { 2239 | border-top: none !important; 2240 | } 2241 | .styles-section.read-only:not(.computed-style) { 2242 | background-color: #263238 !important; 2243 | margin: 0; 2244 | padding-left: 10px !important; 2245 | padding-right: 10px !important; 2246 | } 2247 | .styles-section .value { 2248 | color: #fbe793 !important; 2249 | font-weight: 600; 2250 | } 2251 | .styles-section .child-editing, 2252 | .styles-section .header .subtitle { 2253 | color: #999999 !important; 2254 | } 2255 | .styles-section .properties .overloaded, 2256 | .styles-section .properties .inactive, 2257 | .styles-section .properties .disabled, 2258 | .styles-section .properties .not-parsed-ok { 2259 | opacity: .5 !important; 2260 | } 2261 | .event-bars .event-bar .header .title { 2262 | text-shadow: none !important; 2263 | color: #b1bdc4 !important; 2264 | } 2265 | .sidebar-pane { 2266 | /*-- METRICS--*/ 2267 | } 2268 | .sidebar-pane .body, 2269 | .sidebar-pane .monospace { 2270 | color: #b1bdc4 !important; 2271 | } 2272 | .sidebar-pane .section.expanded > .header { 2273 | border-bottom: 1px solid #2e3c43 !important; 2274 | } 2275 | .sidebar-pane .section.expanded > .properties-tree { 2276 | background-color: #263238 !important; 2277 | } 2278 | .sidebar-pane .body .metrics { 2279 | color: #000 !important; 2280 | border-top: 1px solid #2e3c43 !important; 2281 | border-bottom: 1px solid #2e3c43 !important; 2282 | margin-top: 5px !important; 2283 | } 2284 | .sidebar-pane .body .metrics .position, 2285 | .sidebar-pane .body .metrics .margin:not([style^=background-color]), 2286 | .sidebar-pane .body .metrics .border:not([style^=background-color]), 2287 | .sidebar-pane .body .metrics .padding:not([style^=background-color]), 2288 | .sidebar-pane .body .metrics .margin:not([style^=background-color]), 2289 | .sidebar-pane .body .metrics .content:not([style^=background-color]) { 2290 | background-color: #546e7a !important; 2291 | } 2292 | .sidebar-pane .section:first-child { 2293 | border-top: none !important; 2294 | } 2295 | .styles-section.first-styles-section, 2296 | .sidebar-separator + .styles-section { 2297 | border-top: none !important; 2298 | } 2299 | .sidebar-separator { 2300 | background: #263238 !important; 2301 | border-top: 1px solid #2e3c43 !important; 2302 | color: #b1bdc4 !important; 2303 | text-shadow: none !important; 2304 | border-top: none !important; 2305 | border-bottom: none !important; 2306 | } 2307 | /*-- PSEUDO STATE DISPLAY --*/ 2308 | .styles-element-state-pane { 2309 | background: #313131 !important; 2310 | padding: 4px 0 !important; 2311 | border-bottom: 1px solid #2e3c43 !important; 2312 | } 2313 | .styles-element-state-pane.expanded { 2314 | margin-top: 0 !important; 2315 | } 2316 | .sidebar-pane-stack .event-category, 2317 | .sidebar-pane .section, 2318 | .events-pane > ol > li.parent { 2319 | border-top: 1px solid #343434 !important; 2320 | border-bottom: 1px solid #101010 !important; 2321 | margin-top: 0 !important; 2322 | } 2323 | /********************************************** 2324 | /* Resources & Sources Sidebar 2325 | /**********************************************/ 2326 | .panel:not(.elements):not(.console) { 2327 | /*-- currently selected element --*/ 2328 | } 2329 | .panel:not(.elements):not(.console) .base-storage-tree-element-title, 2330 | .panel:not(.elements):not(.console) .base-storage-tree-element-subtitle, 2331 | .panel:not(.elements):not(.console) .base-navigator-tree-element-title { 2332 | color: #b1bdc4 !important; 2333 | top: 0 !important; 2334 | } 2335 | .panel:not(.elements):not(.console) .selected .base-storage-tree-element-title, 2336 | .panel:not(.elements):not(.console) .selected .base-storage-tree-element-subtitle, 2337 | .panel:not(.elements):not(.console) .selected .base-navigator-tree-element-title { 2338 | color: #e6e6e6 !important; 2339 | text-shadow: none !important; 2340 | } 2341 | .panel:not(.elements):not(.console) .sidebar li { 2342 | color: #b1bdc4 !important; 2343 | } 2344 | .panel:not(.elements):not(.console) .outline-disclosure li.selected .selection { 2345 | background: #3e4c58 !important; 2346 | color: #e6e6e6 !important; 2347 | border-top: 1px solid #2e3c43 !important; 2348 | border-bottom: 1px solid #2e3c43 !important; 2349 | margin-top: -1px !important; 2350 | } 2351 | .panel:not(.elements):not(.console) .outline-disclosure li:hover:not(.selected) .selection, 2352 | .panel:not(.elements):not(.console) .outline-disclosure li.hovered:not(.selected) .selection { 2353 | display: block !important; 2354 | background: #282e35 !important; 2355 | border-top: 1px solid #282e35 !important; 2356 | border-bottom: 1px solid #282e35 !important; 2357 | margin-top: -1px !important; 2358 | height: 18px !important; 2359 | border-radius: 0 !important; 2360 | } 2361 | .panel:not(.elements):not(.console) .outline-disclosure ol:focus li.selected .selection { 2362 | background: #3e4c58 !important; 2363 | color: #e6e6e6 !important; 2364 | border-top: 1px solid #2e3c43 !important; 2365 | border-bottom: 1px solid #2e3c43 !important; 2366 | margin-top: -1px !important; 2367 | text-shadow: none !important; 2368 | } 2369 | .panel:not(.elements):not(.console) .sidebar-overlay { 2370 | border-right: 1px solid #2a2a2a !important; 2371 | box-shadow: #141414 5px 0px 22px 3px !important; 2372 | } 2373 | .sidebar li.selected .selection { 2374 | background-image: none !important; 2375 | border: none !important; 2376 | } 2377 | /************************************************ 2378 | /* Status bar 2379 | /************************************************/ 2380 | select.status-bar-item, 2381 | select.status-bar-item:hover, 2382 | ::shadow select.status-bar-item, 2383 | .toolbar::shadow select.toolbar-item, 2384 | .toolbar::shadow select.toolbar-item:hover, 2385 | ::shadow .toolbar::shadow select.toolbar-item { 2386 | color: #b1bdc4 !important; 2387 | text-shadow: none !important; 2388 | border-left: 1px solid #2e3c43 !important; 2389 | border-right: 1px solid #2e3c43 !important; 2390 | background: inherit !important; 2391 | border-top: none !important; 2392 | border-bottom: none !important; 2393 | } 2394 | select.status-bar-item option, 2395 | .toolbar::shadow select.toolbar-item option { 2396 | background-color: #263238 !important; 2397 | } 2398 | .status-bar-items { 2399 | border-left: none !important; 2400 | } 2401 | /*text color of status bar labels */ 2402 | .status-bar label[for=search-replace-trigger], 2403 | #bottom-status-bar-container .type, 2404 | #bottom-status-bar-container .timeline-records-stats, 2405 | .source-frame-cursor-position, 2406 | .search-status-bar-summary .search-message, 2407 | .search-results-status-bar-message, 2408 | ::shadow .search-status-bar-summary .search-message { 2409 | text-shadow: none !important; 2410 | color: #b1bdc4 !important; 2411 | } 2412 | /*-- GLYPHS --*/ 2413 | button.scripts-step-over .glyph .toggled-on .long-click-glyph, 2414 | button.scripts-step-into .glyph .toggled-on .long-click-glyph, 2415 | button.scripts-step-out .glyph .toggled-on .long-click-glyph, 2416 | .filters-toggle.toggled-active .glyph .toggled-on .long-click-glyph, 2417 | button.status-bar-item.toggled-on .glyph .toggled-on .long-click-glyph, 2418 | button.status-bar-item.toggled-on .glyph:not(.shadow) .toggled-on .long-click-glyph, 2419 | button.clear-status-bar-item:active .glyph .toggled-on .long-click-glyph, 2420 | button.garbage-collect-status-bar-item:active .glyph .toggled-on .long-click-glyph, 2421 | button.glue-async-status-bar-item:active .glyph .toggled-on .long-click-glyph, 2422 | .filters-toggle.toggled-shown .glyph .toggled-on .long-click-glyph, 2423 | ::shadow .toggled-on .long-click-glyph { 2424 | background-color: #80cbc4 !important; 2425 | } 2426 | button.scripts-step-over .glyph .long-click-glyph, 2427 | button.scripts-step-into .glyph .long-click-glyph, 2428 | button.scripts-step-out .glyph .long-click-glyph, 2429 | .filters-toggle.toggled-active .glyph .long-click-glyph, 2430 | button.status-bar-item.toggled-on .glyph .long-click-glyph, 2431 | button.status-bar-item.toggled-on .glyph:not(.shadow) .long-click-glyph, 2432 | button.clear-status-bar-item:active .glyph .long-click-glyph, 2433 | button.garbage-collect-status-bar-item:active .glyph .long-click-glyph, 2434 | button.glue-async-status-bar-item:active .glyph .long-click-glyph, 2435 | .filters-toggle.toggled-shown .glyph .long-click-glyph, 2436 | ::shadow .long-click-glyph { 2437 | background-color: #b1bdc4 !important; 2438 | } 2439 | .toolbar-background button.status-bar-item .glyph, 2440 | .toolbar-background button.status-bar-item .long-click-glyph { 2441 | background-color: #b1bdc4 !important; 2442 | } 2443 | #scripts-debugger-status { 2444 | color: #80cbc4 !important; 2445 | } 2446 | button.scripts-step-over:disabled .glyph, 2447 | button.scripts-step-into:disabled .glyph, 2448 | button.scripts-step-out:disabled .glyph { 2449 | background-color: #263238 !important; 2450 | } 2451 | .sources-status-bar, 2452 | .panel-status-bar, 2453 | .resources-status-bar .status-bar, 2454 | .overrides-footer, 2455 | .status-bar, 2456 | ::shadow .search-bar { 2457 | background: #263238 !important; 2458 | border-top: 1px solid #2e3c43 !important; 2459 | border-top: none!important; 2460 | color: #b1bdc4 !important; 2461 | } 2462 | .checkbox-filter-checkbox, 2463 | label.checkbox, 2464 | .checkbox-filter-checkbox-check, 2465 | .filter-checkbox-filter .type, 2466 | #text-filter-regex + label { 2467 | color: #b1bdc4 !important; 2468 | } 2469 | .checkbox-filter-checkbox { 2470 | background: #fff !important; 2471 | } 2472 | .filter-bitset-filter li { 2473 | padding: 2px 6px !important; 2474 | margin: auto 2px !important; 2475 | border-radius: 8px !important; 2476 | } 2477 | .status-bar-select-arrow { 2478 | position: relative !important; 2479 | right: 5px !important; 2480 | } 2481 | .event-listener-breakpoints .checkbox-elem { 2482 | top: 0 !important; 2483 | } 2484 | .save-device-button, 2485 | .remove-device-button { 2486 | background: #263238 !important; 2487 | color: #cdd3de !important; 2488 | border: none !important; 2489 | border-radius: 3px !important; 2490 | cursor: pointer !important; 2491 | box-shadow: none !important; 2492 | text-shadow: none !important; 2493 | } 2494 | .save-device-button:disabled, 2495 | .remove-device-button:disabled { 2496 | cursor: default !important; 2497 | opacity: 0.3 !important; 2498 | } 2499 | .save-device-button:not(:disabled):active, 2500 | .remove-device-button:not(:disabled):active { 2501 | box-shadow: inset 0 1px 1px 0 #151515, 0 1px 1px 0 #6f6f6f !important; 2502 | } 2503 | /********************************************** 2504 | /* Suggest Box 2505 | /**********************************************/ 2506 | .suggest-box { 2507 | color: #000 !important; 2508 | background-color: #263238 !important; 2509 | border: 2px rgba(0, 0, 0, 0.2) solid !important; 2510 | box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.1) !important; 2511 | } 2512 | .suggest-box-content-item.source-code:hover { 2513 | background-color: #282e35 !important; 2514 | border: 1px solid #b1bdc4 !important; 2515 | } 2516 | .suggest-box-content-item.source-code.selected { 2517 | background-color: #282e35 !important; 2518 | } 2519 | .suggest-box .source-code .prefix { 2520 | color: #80cbc4 !important; 2521 | } 2522 | .suggest-box .source-code .suffix { 2523 | color: #d9d9d9 !important; 2524 | } 2525 | .cm-js-atom { 2526 | color: #80cbc4 !important; 2527 | } 2528 | .cm-js-attribute { 2529 | color: #4e87bf !important; 2530 | } 2531 | .cm-js-builtin { 2532 | color: #8da6ce !important; 2533 | } 2534 | .cm-js-comment { 2535 | color: #546e7a !important; 2536 | font-style: italic; 2537 | } 2538 | .cm-js-def { 2539 | color: #c792ea !important; 2540 | font-weight: 600; 2541 | } 2542 | .cm-js-error { 2543 | background: #9D1E15 !important; 2544 | color: #f8f8f8 !important; 2545 | } 2546 | .cm-js-header { 2547 | color: #ff6400 !important; 2548 | } 2549 | .cm-js-hr { 2550 | color: #aeaeae !important; 2551 | } 2552 | .cm-js-keyword { 2553 | color: #c792ea !important; 2554 | font-style: italic; 2555 | } 2556 | .cm-js-link { 2557 | color: #8da6ce !important; 2558 | } 2559 | .cm-js-meta { 2560 | color: #d8fa3c !important; 2561 | } 2562 | .cm-js-number, 2563 | .section .properties .number, 2564 | .event-properties .number { 2565 | color: #80cbc4 !important; 2566 | } 2567 | .cm-js-operator { 2568 | color: #c3e88b !important; 2569 | } 2570 | .cm-js-property { 2571 | color: #76aeff !important; 2572 | } 2573 | .cm-js-string { 2574 | color: #c792ea !important; 2575 | } 2576 | .cm-js-string-2 { 2577 | color: #c792ea !important; 2578 | } 2579 | .cm-js-tag { 2580 | color: #929ba2 !important; 2581 | } 2582 | .cm-js-variable { 2583 | color: #80cbc4 !important; 2584 | } 2585 | .cm-js-variable-2 { 2586 | color: #ffcb6b !important; 2587 | } 2588 | .source-frame-eval-expression { 2589 | background-color: #3e4c58 !important; 2590 | border-color: #2e3c43 !important; 2591 | } 2592 | .cm-atom { 2593 | color: #80cbc4 !important; 2594 | } 2595 | .cm-comment { 2596 | color: #546e7a !important; 2597 | font-style: italic; 2598 | } 2599 | .cm-variable { 2600 | color: #b1bdc4 !important; 2601 | } 2602 | .cm-string { 2603 | color: #c792ea !important; 2604 | } 2605 | .cm-keyword { 2606 | color: #fbe793 !important; 2607 | font-style: italic; 2608 | } 2609 | .cm-number { 2610 | color: #80cbc4 !important; 2611 | } 2612 | .cm-operator { 2613 | color: #80cbc4 !important; 2614 | } 2615 | .cm-error { 2616 | background: #9D1E15 !important; 2617 | color: #f8f8f8 !important; 2618 | } 2619 | .cm-s-default .cm-property { 2620 | color: #b1bdc4 !important; 2621 | } 2622 | /*--CSS--*/ 2623 | .cm-css-atom { 2624 | color: #80cbc4 !important; 2625 | } 2626 | .cm-css-builtin { 2627 | color: #fad431 !important; 2628 | } 2629 | .cm-css-def { 2630 | color: #fad431 !important; 2631 | } 2632 | .cm-css-comment { 2633 | color: #546e7a !important; 2634 | font-style: italic; 2635 | } 2636 | .cm-css-meta { 2637 | color: #fbe793 !important; 2638 | } 2639 | .cm-css-number { 2640 | color: #fb516d !important; 2641 | } 2642 | .cm-css-operator { 2643 | color: #fad431 !important; 2644 | } 2645 | .cm-css-property { 2646 | color: #fad431 !important; 2647 | } 2648 | .cm-css-qualifier { 2649 | color: #fad431 !important; 2650 | } 2651 | .cm-css-string { 2652 | color: #c792ea !important; 2653 | } 2654 | .cm-css-string-2 { 2655 | color: #80cbc4 !important; 2656 | } 2657 | .cm-css-tag { 2658 | color: #fad431 !important; 2659 | } 2660 | .cm-css-variable { 2661 | color: #fad431 !important; 2662 | } 2663 | .cm-css-variable-2 { 2664 | color: #fad431 !important; 2665 | } 2666 | /*--HTML--*/ 2667 | .cm-xml-comment { 2668 | color: #6c6c6c !important; 2669 | font-style: italic !important; 2670 | } 2671 | .cm-xml-error { 2672 | color: #bf4c4c !important; 2673 | } 2674 | .cm-xml-string { 2675 | color: #fbe793 !important; 2676 | } 2677 | .cm-xml-tag { 2678 | color: #929ba2 !important; 2679 | } 2680 | .cm-xml-attribute { 2681 | color: #80cbc4 !important; 2682 | } 2683 | .cm-xml-link { 2684 | color: #c792ea !important; 2685 | } 2686 | ::shadow .webkit-html-fragment { 2687 | color: #ddbb00 !important; 2688 | } 2689 | .outline-disclosure ol li .highlight { 2690 | color: #ddbb00 !important; 2691 | } 2692 | /*--GLOBAL--*/ 2693 | .CodeMirror-code { 2694 | color: #b1bdc4; 2695 | } 2696 | /********************************************** 2697 | /* Code Highlighting [WEBKIT] 2698 | /**********************************************/ 2699 | /*-- HTML --*/ 2700 | .webkit-html-attribute-name { 2701 | color: #ffcb6b !important; 2702 | } 2703 | .webkit-html-attribute-value { 2704 | color: #c3e88d !important; 2705 | } 2706 | .webkit-html-comment { 2707 | color: #546e7a !important; 2708 | font-style: italic; 2709 | } 2710 | .webkit-html-resource-link, 2711 | .webkit-html-external-link { 2712 | color: #c792ea !important; 2713 | } 2714 | .webkit-html-tag, 2715 | .webkit-html-tag-name { 2716 | color: #ff5370 !important; 2717 | font-weight: 600 !important; 2718 | } 2719 | .webkit-html-text-node, 2720 | .webkit-html-css-node, 2721 | .webkit-html-js-node { 2722 | color: #cdd3de !important; 2723 | } 2724 | .webkit-html-pseudo-element { 2725 | color: #49a5d2 !important; 2726 | } 2727 | /*-- CSS --*/ 2728 | .selector-matches { 2729 | color: #fad431 !important; 2730 | } 2731 | .webkit-css-selector { 2732 | color: #fad431 !important; 2733 | } 2734 | .webkit-css-at-rule { 2735 | color: #fad431 !important; 2736 | } 2737 | .webkit-css-color { 2738 | color: #fad431 !important; 2739 | } 2740 | .webkit-css-comment { 2741 | color: #546e7a !important; 2742 | } 2743 | .webkit-css-important { 2744 | color: #e74c3c !important; 2745 | } 2746 | .webkit-css-keyword { 2747 | color: #80cbc4 !important; 2748 | } 2749 | .webkit-css-number { 2750 | color: #fb516d !important; 2751 | } 2752 | .webkit-css-property, 2753 | .styles-section .properties > li .webkit-css-property { 2754 | color: #ffeb95 !important; 2755 | font-weight: 400; 2756 | } 2757 | .webkit-css-string { 2758 | color: #c792ea !important; 2759 | } 2760 | .webkit-css-url { 2761 | color: #c792ea !important; 2762 | } 2763 | /*-- JAVASCRIPT --*/ 2764 | .section .properties .name, 2765 | .event-properties .name, 2766 | .console-formatted-object .name { 2767 | color: #77a8c6 !important; 2768 | } 2769 | .console-formatted-object, 2770 | .console-formatted-array { 2771 | color: #546e7a !important; 2772 | } 2773 | .console-formatted-function { 2774 | color: #fbe793 !important; 2775 | } 2776 | .console-formatted-number { 2777 | color: #80cbc4 !important; 2778 | } 2779 | .console-formatted-boolean { 2780 | color: #80cbc4 !important; 2781 | } 2782 | .console-object-preview { 2783 | color: #dddddd !important; 2784 | } 2785 | .console-formatted-regexp { 2786 | color: #ff54e8 !important; 2787 | } 2788 | .console-formatted-string { 2789 | color: #fbe793 !important; 2790 | } 2791 | .console-formatted-undefined { 2792 | color: #ad4e4e !important; 2793 | } 2794 | .json .title { 2795 | color: #b1bdc4 !important; 2796 | } 2797 | .json .separator { 2798 | color: #737373 !important; 2799 | } 2800 | .popover .parent + .children.expanded, 2801 | #console-messages .parent + .children.expanded, 2802 | .sidebar-pane .parent:not(.event-category) + .children.expanded { 2803 | border-left: 1px dashed rgba(204, 204, 204, 0.2) !important; 2804 | position: relative; 2805 | left: 4.4px; 2806 | } 2807 | .section .properties .dimmed { 2808 | opacity: 0.5 !important; 2809 | } 2810 | /**********************************************/ 2811 | /* Tables 2812 | /**********************************************/ 2813 | .data-grid { 2814 | border: 1px solid #151515 !important; 2815 | background-color: transparent !important; 2816 | background-image: none !important; 2817 | } 2818 | .data-grid th, 2819 | .data-grid .data { 2820 | background: none !important; 2821 | border-left: 1px solid #2e3c43 !important; 2822 | } 2823 | .data-grid .header { 2824 | background: #263238 !important; 2825 | border-top: 1px solid #2e3c43 !important; 2826 | } 2827 | .data-grid .header th { 2828 | color: #80cbc4 !important; 2829 | } 2830 | .data-grid .header .key-column, 2831 | .data-grid .header .value-column { 2832 | border: none !important; 2833 | } 2834 | .data-grid td { 2835 | border-left: 1px solid #282828 !important; 2836 | } 2837 | .data-grid .data-container a { 2838 | text-decoration: none; 2839 | color: #c792ea !important; 2840 | } 2841 | .data-grid .data-container tr:nth-child(odd) { 2842 | background-color: #263238 !important; 2843 | } 2844 | .data-grid .data-container tr:nth-child(even) { 2845 | background-color: #282e35 !important; 2846 | } 2847 | .data-grid .data-container tr:not(.selected):not(.filler):hover { 2848 | background-color: #282e35 !important; 2849 | outline: 1px solid #414141 !important; 2850 | } 2851 | .data-grid .data-container tr.selected { 2852 | background-color: #3e4c58 !important; 2853 | outline: 1px solid #2e3c43 !important; 2854 | } 2855 | .data-grid .data-container tr .editing * { 2856 | color: #FFF !important; 2857 | background-color: #263238 !important; 2858 | } 2859 | /***********************/ 2860 | /* Tabbed Panes 2861 | /***********************/ 2862 | .tabbed-pane:not(.help-window-main) .tabbed-pane-header { 2863 | background: #263238 !important; 2864 | border-top: 1px solid #2e3c43 !important; 2865 | 2866 | border-bottom: none; 2867 | } 2868 | .tabbed-pane:not(.help-window-main) .tabbed-pane-header .tabbed-pane-header-tab { 2869 | border-top: 2px solid #b1bdc4 !important; 2870 | border-left: none !important; 2871 | border-right: none !important; 2872 | padding: 2px 7px !important; 2873 | margin: 0 !important; 2874 | margin-top: 0 !important; 2875 | margin-bottom: 1px !important; 2876 | border-color: transparent !important; 2877 | } 2878 | .tabbed-pane:not(.help-window-main) .tabbed-pane-header .tabbed-pane-header-tab:hover { 2879 | color: #f8f8f8 !important; 2880 | } 2881 | .tabbed-pane:not(.help-window-main) .tabbed-pane-header .tabbed-pane-header-tab.selected { 2882 | background: none !important; 2883 | border-top: 2px solid #80cbc4 !important; 2884 | color: #f8f8f8 !important; 2885 | font-size: 1em; 2886 | } 2887 | .tabbed-pane:not(.help-window-main) .tabbed-pane-header .editor-container-unsaved-committed-changes-icon + .tabbed-pane-header-tab-title { 2888 | color: #ddbb00; 2889 | } 2890 | .tabbed-pane:not(.help-window-main) .tabbed-pane-header .tabbed-pane-header-contents { 2891 | color: #999999 !important; 2892 | } 2893 | .tabbed-pane:not(.help-window-main) .tabbed-pane-header .tabbed-pane-header-tab-title { 2894 | line-height: 16px !important; 2895 | } 2896 | .tabbed-pane:not(.help-window-main) .overrides-view .tabbed-pane-header-tab { 2897 | border-top: none !important; 2898 | margin-left: 6px !important; 2899 | } 2900 | .tabbed-pane:not(.help-window-main) .overrides-view .tabbed-pane-header-tab.selected { 2901 | border-top: none !important; 2902 | border-left: 6px solid #80cbc4 !important; 2903 | margin-left: 0 !important; 2904 | } 2905 | .tabbed-pane-content not(.overrides-view) .tabbed-pane-header { 2906 | flex: 0 0 25px !important; 2907 | } 2908 | .tabbed-pane-content not(.overrides-view) .tabbed-pane-header .tabbed-pane-header-tab { 2909 | height: 25px !important; 2910 | line-height: 18.75px !important; 2911 | cursor: pointer !important; 2912 | } 2913 | #drawer-contents .tabbed-pane-header, 2914 | .inactive #drawer-contents .tabbed-pane-header { 2915 | border-top: none !important; 2916 | border-bottom: #b1bdc4 !important; 2917 | } 2918 | .tabbed-pane-tab-slider, 2919 | ::shadow .tabbed-pane-tab-slider { 2920 | display: none !important; 2921 | } 2922 | body .toolbar-background, 2923 | body.undocked.platform-mac-mountain-lion.inactive .toolbar-background, 2924 | body.undocked.platform-mac-mountain-lion .toolbar-background, 2925 | body.platform-mac-mountain-lion.inactive .toolbar-background, 2926 | body.platform-mac-mountain-lion .toolbar-background, 2927 | body.undocked.platform-mac.inactive .toolbar-background, 2928 | body.undocked.platform-mac .toolbar-background, 2929 | body.inactive .toolbar-background, 2930 | body:not(.undocked) .toolbar-background { 2931 | background: #263238 !important; 2932 | border-top: 1px solid #2e3c43 !important; 2933 | border-bottom: none !important; 2934 | } 2935 | select.tabbed-pane-header-tabs-drop-down-select { 2936 | background-color: #263238 !important; 2937 | color: #b1bdc4 !important; 2938 | } 2939 | .toolbar .tabbed-pane-header .tabbed-pane-header-tab { 2940 | height: 34px !important; 2941 | line-height: 25.5px !important; 2942 | padding: 2px 4px !important; 2943 | cursor: pointer !important; 2944 | border-image: none !important; 2945 | } 2946 | .toolbar .tabbed-pane-header .tabbed-pane-header-tabs-drop-down { 2947 | line-height: 30.6px; 2948 | } 2949 | .toolbar .toolbar-controls-left, 2950 | .toolbar .toolbar-controls-right { 2951 | padding-top: 6px !important; 2952 | border-bottom: 1px solid #2e3c43 !important; 2953 | } 2954 | #network-views .network-item-view .tabbed-pane-header { 2955 | padding-top: 0 !important; 2956 | } 2957 | #network-views .network-item-view .tabbed-pane-header .tabbed-pane-header-tab { 2958 | height: 31px !important; 2959 | } 2960 | #network-views .network-item-view .tabbed-pane-header .tabbed-pane-header-tab-title { 2961 | line-height: 21px !important; 2962 | } 2963 | #network-views.small .network-item-view .tabbed-pane-header .tabbed-pane-header-tab-title { 2964 | line-height: 12px !important; 2965 | } 2966 | .tabbed-pane-header-tabs-drop-down { 2967 | color: #999 !important; 2968 | } 2969 | .split-view.hbox > .split-view-sidebar.split-view-contents-second:not(.maximized) { 2970 | border-left: 2px solid #2e3c43 !important; 2971 | } 2972 | .split-view.hbox > .split-view-sidebar.split-view-contents-first:not(.maximized) { 2973 | border-right: 2px solid #2e3c43 !important; 2974 | } 2975 | .tabbed-pane-header-tab { 2976 | width: auto !important; 2977 | } 2978 | .filter-bitset-filter li, 2979 | .filter-bitset-filter li.selected, 2980 | .filter-bitset-filter li:hover, 2981 | .filter-bitset-filter li:active { 2982 | text-shadow: 0 0 0 #b1bdc4 !important; 2983 | color: #b1bdc4 !important; 2984 | } 2985 | .filter-bitset-filter li:hover { 2986 | background: #2e3c43 !important; 2987 | } 2988 | .filter-bitset-filter li.selected { 2989 | color: #f2f2f2 !important; 2990 | background: #282e35 !important; 2991 | } 2992 | .filter-bitset-filter li.selected.error { 2993 | background: #ff5a5a !important; 2994 | } 2995 | .filter-bitset-filter li.selected.warning { 2996 | background: #ddbb00 !important; 2997 | } 2998 | .filter-bitset-filter li.selected.info { 2999 | background: #80cbc4 !important; 3000 | } 3001 | .filter-bitset-filter li.selected.log { 3002 | background: #929ba2 !important; 3003 | } 3004 | .filter-bitset-filter li.selected.debug { 3005 | background: #fc844c !important; 3006 | } 3007 | .network-filters-header, 3008 | .console-filters-header, 3009 | .timeline-filters-header { 3010 | background: #2e3c43; 3011 | } 3012 | /*separator between all | rest of options*/ 3013 | .filter-bitset-filter-divider { 3014 | background-color: #2e3c43 !important; 3015 | } 3016 | .status-bar-counter, 3017 | body .inspector-view-toolbar.status-bar::shadow .status-bar-item { 3018 | color: #b1bdc4 !important; 3019 | } 3020 | .status-bar-counter:hover { 3021 | border-bottom: none !important; 3022 | } 3023 | .tabbed-pane-header-tabs-drop-down > select.drop-down-menu option { 3024 | background-color: #263238 !important; 3025 | color: #b1bdc4 !important; 3026 | } 3027 | .overrides-splash-screen { 3028 | color: #b1bdc4 !important; 3029 | } 3030 | .overrides-splash-screen .glyph { 3031 | background-color: #b1bdc4 !important; 3032 | } 3033 | .tabbed-pane-header-tab.overrides-activate .tabbed-pane-header-tab-title::after { 3034 | color: #80cbc4 !important; 3035 | } 3036 | ::shadow .shadow-split-view.hbox.shadow-split-view-first-is-sidebar > .shadow-split-view-sidebar:not(.maximized) { 3037 | border-right: 2px solid #2e3c43 !important; 3038 | } 3039 | ::shadow .shadow-split-view.hbox > .shadow-split-view-sidebar:not(.maximized) { 3040 | border-left: 2px solid #2e3c43 !important; 3041 | } 3042 | ::shadow .shadow-split-view.vbox > .shadow-split-view-resizer > .shadow-split-view-resizer-border { 3043 | border-top: none !important; 3044 | } 3045 | ::shadow .status-bar-item > .glyph, 3046 | ::shadow .shadow-split-view button.sidebar-show-hide-button { 3047 | background-color: #b1bdc4 !important; 3048 | } 3049 | ::shadow .status-bar-item[disabled] { 3050 | opacity: 0.5 !important; 3051 | } 3052 | ::shadow button.status-bar-item.toggled-on .glyph, 3053 | ::shadow .filter-status-bar-item.toggled-shown .glyph, 3054 | ::shadow button.status-bar-item:not([disabled]):active .glyph { 3055 | background-color: #80cbc4 !important; 3056 | } 3057 | body /deep/ .cm-js-keyword { 3058 | color: #c792ea !important; 3059 | font-style: italic !important; 3060 | } 3061 | body /deep/ .cm-js-number { 3062 | color: #80cbc4 !important; 3063 | } 3064 | body /deep/ .cm-js-comment { 3065 | color: #546e7a !important; 3066 | } 3067 | body /deep/ .cm-js-string { 3068 | color: #c792ea !important; 3069 | } 3070 | body /deep/ .cm-js-string-2 { 3071 | color: #c792ea !important; 3072 | } 3073 | body /deep/ .cm-css-keyword { 3074 | color: #fbe793 !important; 3075 | } 3076 | body /deep/ .cm-css-number { 3077 | color: #fb516d !important; 3078 | } 3079 | body /deep/ .cm-css-comment { 3080 | color: #546e7a; 3081 | } 3082 | body /deep/ .cm-css-def { 3083 | color: #fbe793 !important; 3084 | } 3085 | body /deep/ .cm-css-meta { 3086 | color: #80cbc4 !important; 3087 | } 3088 | body /deep/ .cm-css-atom { 3089 | color: #fbe793 !important; 3090 | } 3091 | body /deep/ .cm-css-string { 3092 | color: #fbe793 !important; 3093 | } 3094 | body /deep/ .cm-css-string-2 { 3095 | color: #cdd3de !important; 3096 | } 3097 | body /deep/ .cm-css-link { 3098 | color: #c792ea !important; 3099 | } 3100 | body /deep/ .cm-css-variable { 3101 | color: #fbe793 !important; 3102 | } 3103 | body /deep/ .cm-css-variable-2 { 3104 | color: #fbe793 !important; 3105 | } 3106 | body /deep/ .cm-css-property { 3107 | color: #80cbc4 !important; 3108 | } 3109 | body /deep/ .webkit-css-property { 3110 | color: #80cbc4 !important; 3111 | } 3112 | body /deep/ .cm-xml-meta { 3113 | color: #d8fa3c !important; 3114 | } 3115 | body /deep/ .cm-xml-comment { 3116 | color: #546e7a !important; 3117 | } 3118 | body /deep/ .cm-xml-string { 3119 | color: #fbe793 !important; 3120 | } 3121 | body /deep/ .cm-xml-tag { 3122 | color: #929ba2 !important; 3123 | } 3124 | body /deep/ .cm-xml-attribute { 3125 | color: #80cbc4 !important; 3126 | } 3127 | body /deep/ .cm-xml-link { 3128 | color: #c792ea !important; 3129 | } 3130 | body /deep/ .webkit-html-comment { 3131 | color: #546e7a !important; 3132 | } 3133 | body /deep/ .webkit-html-tag { 3134 | color: #ff5370 !important; 3135 | } 3136 | body /deep/ .webkit-html-text-node { 3137 | unicode-bidi: -webkit-isolate !important; 3138 | } 3139 | body /deep/ .webkit-html-pseudo-element { 3140 | color: brown !important; 3141 | } 3142 | body /deep/ .webkit-html-entity-value { 3143 | color: pink !important; 3144 | unicode-bidi: -webkit-isolate !important; 3145 | } 3146 | body /deep/ .webkit-html-doctype { 3147 | color: #b1bdc4 !important; 3148 | } 3149 | body /deep/ .webkit-html-attribute-name { 3150 | color: #ffcb6b !important; 3151 | unicode-bidi: -webkit-isolate; 3152 | } 3153 | body /deep/ .webkit-html-attribute-value { 3154 | color: #c3e88d !important; 3155 | unicode-bidi: -webkit-isolate; 3156 | } 3157 | body /deep/ .webkit-html-external-link, 3158 | body /deep/ .webkit-html-resource-link { 3159 | color: #c792ea !important; 3160 | } 3161 | body /deep/ .webkit-html-resource-link { 3162 | cursor: pointer; 3163 | } 3164 | body /deep/ .webkit-html-external-link { 3165 | text-decoration: none; 3166 | } 3167 | body /deep/ .webkit-html-external-link:hover { 3168 | text-decoration: underline; 3169 | } 3170 | body /deep/ .shadow-root .webkit-html-fragment.shadow-root { 3171 | color: #ddbb00 !important; 3172 | } 3173 | body /deep/ .webkit-html-end-of-file { 3174 | color: #e74c3c; 3175 | font-weight: bold; 3176 | } 3177 | body ::shadow .editing { 3178 | background-color: #263238 !important; 3179 | outline: 1px solid #80cbc4 !important; 3180 | color: #b1bdc4 !important; 3181 | } 3182 | body ::shadow { 3183 | /*--CSS--*/ 3184 | /*--HTML--*/ 3185 | /*--GLOBAL--*/ 3186 | /********************************************** 3187 | /* Code Highlighting [WEBKIT] 3188 | /**********************************************/ 3189 | /*-- HTML --*/ 3190 | /*-- CSS --*/ 3191 | } 3192 | body ::shadow .cm-js-atom { 3193 | color: #80cbc4 !important; 3194 | } 3195 | body ::shadow .cm-js-attribute { 3196 | color: #4e87bf !important; 3197 | } 3198 | body ::shadow .cm-js-builtin { 3199 | color: #8da6ce !important; 3200 | } 3201 | body ::shadow .cm-js-comment { 3202 | color: #546e7a !important; 3203 | font-style: italic; 3204 | } 3205 | body ::shadow .cm-js-def { 3206 | color: #929ba2 !important; 3207 | } 3208 | body ::shadow .cm-js-error { 3209 | background: #9D1E15 !important; 3210 | color: #f8f8f8 !important; 3211 | } 3212 | body ::shadow .cm-js-header { 3213 | color: #ff6400 !important; 3214 | } 3215 | body ::shadow .cm-js-hr { 3216 | color: #aeaeae !important; 3217 | } 3218 | body ::shadow .cm-js-keyword { 3219 | color: #c792ea !important; 3220 | font-style: italic; 3221 | } 3222 | body ::shadow .cm-js-link { 3223 | color: #8da6ce !important; 3224 | } 3225 | body ::shadow .cm-js-meta { 3226 | color: #d8fa3c !important; 3227 | } 3228 | body ::shadow .cm-js-number { 3229 | color: #80cbc4 !important; 3230 | } 3231 | body ::shadow .cm-js-operator { 3232 | color: #80cbc4 !important; 3233 | } 3234 | body ::shadow .cm-js-property { 3235 | color: #80cbc4 !important; 3236 | } 3237 | body ::shadow .cm-js-string { 3238 | color: #c792ea !important; 3239 | } 3240 | body ::shadow .cm-js-string-2 { 3241 | color: #c792ea !important; 3242 | } 3243 | body ::shadow .cm-js-tag { 3244 | color: #929ba2 !important; 3245 | } 3246 | body ::shadow .cm-js-variable { 3247 | color: #80cbc4 !important; 3248 | } 3249 | body ::shadow .cm-js-variable-2 { 3250 | color: #80cbc48 !important; 3251 | } 3252 | body ::shadow .source-frame-eval-expression { 3253 | background-color: #3e4c58 !important; 3254 | border-color: #2e3c43 !important; 3255 | } 3256 | body ::shadow .cm-atom { 3257 | color: #80cbc4 !important; 3258 | } 3259 | body ::shadow .cm-comment { 3260 | color: #546e7a !important; 3261 | font-style: italic; 3262 | } 3263 | body ::shadow .cm-variable { 3264 | color: #b1bdc4 !important; 3265 | } 3266 | body ::shadow .cm-string { 3267 | color: #c792ea !important; 3268 | } 3269 | body ::shadow .cm-keyword { 3270 | color: #fbe793 !important; 3271 | font-style: italic; 3272 | } 3273 | body ::shadow .cm-number { 3274 | color: #80cbc4 !important; 3275 | } 3276 | body ::shadow .cm-operator { 3277 | color: #80cbc4 !important; 3278 | } 3279 | body ::shadow .cm-error { 3280 | background: #9D1E15 !important; 3281 | color: #f8f8f8 !important; 3282 | } 3283 | body ::shadow .cm-s-default .cm-property { 3284 | color: #b1bdc4 !important; 3285 | } 3286 | body ::shadow .cm-css-atom { 3287 | color: #b1bdc4 !important; 3288 | } 3289 | body ::shadow .cm-css-builtin { 3290 | color: #fbe793 !important; 3291 | } 3292 | body ::shadow .cm-css-def { 3293 | color: #fbe793 !important; 3294 | } 3295 | body ::shadow .cm-css-comment { 3296 | color: #546e7a !important; 3297 | font-style: italic; 3298 | } 3299 | body ::shadow .cm-css-meta { 3300 | color: #fad431 !important; 3301 | } 3302 | body ::shadow .cm-css-number { 3303 | color: #fb516d !important; 3304 | } 3305 | body ::shadow .cm-css-operator { 3306 | color: #fad431 !important; 3307 | } 3308 | body ::shadow .cm-css-property { 3309 | color: #fad431 !important; 3310 | } 3311 | body ::shadow .cm-css-qualifier { 3312 | color: #fbe793 !important; 3313 | } 3314 | body ::shadow .cm-css-string { 3315 | color: #c792ea !important; 3316 | } 3317 | body ::shadow .cm-css-string-2 { 3318 | color: #fbe793 !important; 3319 | } 3320 | body ::shadow .cm-css-tag { 3321 | color: #fbe793 !important; 3322 | } 3323 | body ::shadow .cm-css-variable { 3324 | color: #fbe793 !important; 3325 | } 3326 | body ::shadow .cm-css-variable-2 { 3327 | color: #fbe793 !important; 3328 | } 3329 | body ::shadow .cm-xml-comment { 3330 | color: #546e7a !important; 3331 | font-style: italic !important; 3332 | } 3333 | body ::shadow .cm-xml-error { 3334 | color: #bf4c4c !important; 3335 | } 3336 | body ::shadow .cm-xml-string { 3337 | color: #fbe793 !important; 3338 | } 3339 | body ::shadow .cm-xml-tag { 3340 | color: #929ba2 !important; 3341 | } 3342 | body ::shadow .cm-xml-attribute { 3343 | color: #80cbc4 !important; 3344 | } 3345 | body ::shadow .cm-xml-link { 3346 | color: #c792ea !important; 3347 | } 3348 | body ::shadow .shadow-root .webkit-html-fragment.shadow-root { 3349 | color: #ddbb00 !important; 3350 | } 3351 | body ::shadow .outline-disclosure ol li .highlight { 3352 | color: #ddbb00 !important; 3353 | } 3354 | body ::shadow .CodeMirror-code { 3355 | color: #b1bdc4; 3356 | } 3357 | body ::shadow .webkit-html-attribute-name { 3358 | color: #ffcb6b !important; 3359 | } 3360 | body ::shadow .webkit-html-attribute-value { 3361 | color: #c3e88d !important; 3362 | font-weight: 100; 3363 | } 3364 | body ::shadow .webkit-html-comment { 3365 | color: #546e7a !important; 3366 | font-style: italic; 3367 | } 3368 | body ::shadow .webkit-html-resource-link, 3369 | body ::shadow .webkit-html-external-link { 3370 | color: #c792ea !important; 3371 | } 3372 | body ::shadow .webkit-html-tag, 3373 | body ::shadow .webkit-html-tag-name { 3374 | color: #ff5370 !important; 3375 | font-weight: 600 !important; 3376 | } 3377 | body ::shadow .webkit-html-text-node, 3378 | body ::shadow .webkit-html-css-node, 3379 | body ::shadow .webkit-html-js-node { 3380 | color: #cdd3de !important; 3381 | } 3382 | body ::shadow .webkit-html-pseudo-element { 3383 | color: #49a5d2 !important; 3384 | } 3385 | body ::shadow .selector-matches { 3386 | color: #fbe793 !important; 3387 | } 3388 | body ::shadow .webkit-css-selector { 3389 | color: #fbe793 !important; 3390 | } 3391 | body ::shadow .webkit-css-at-rule { 3392 | color: #b094bb !important; 3393 | } 3394 | body ::shadow .webkit-css-color { 3395 | color: #fbe793 !important; 3396 | } 3397 | body ::shadow .webkit-css-comment { 3398 | color: #546e7a !important; 3399 | } 3400 | body ::shadow .webkit-css-important { 3401 | color: #e74c3c !important; 3402 | } 3403 | body ::shadow .webkit-css-keyword { 3404 | color: #fbe793 !important; 3405 | } 3406 | body ::shadow .webkit-css-number { 3407 | color: #fb516d !important; 3408 | } 3409 | body ::shadow .webkit-css-property, 3410 | body ::shadow .styles-section .properties > li .webkit-css-property { 3411 | color: #fad431 !important; 3412 | font-weight: 400; 3413 | } 3414 | body ::shadow .webkit-css-string { 3415 | color: #c792ea !important; 3416 | } 3417 | body ::shadow .webkit-css-url { 3418 | color: #c792ea !important; 3419 | } 3420 | body ::shadow .section .properties .name, 3421 | body ::shadow .event-properties .name, 3422 | body ::shadow .console-object-preview .name, 3423 | body ::shadow .console-formatted-object .name { 3424 | color: #77a8c6 !important; 3425 | } 3426 | body ::shadow .console-formatted-object, 3427 | body ::shadow .console-formatted-array { 3428 | color: #546e7a !important; 3429 | } 3430 | body ::shadow .console-formatted-function { 3431 | color: #fbe793 !important; 3432 | } 3433 | body ::shadow .console-formatted-number { 3434 | color: #80cbc4 !important; 3435 | } 3436 | body ::shadow .console-formatted-boolean { 3437 | color: #80cbc4 !important; 3438 | } 3439 | body ::shadow .console-object-preview { 3440 | color: #dddddd !important; 3441 | } 3442 | body ::shadow .console-formatted-regexp { 3443 | color: #ff54e8 !important; 3444 | } 3445 | body ::shadow .console-formatted-string { 3446 | color: #fbe793 !important; 3447 | } 3448 | body ::shadow .console-formatted-undefined { 3449 | color: #ad4e4e !important; 3450 | } 3451 | body ::shadow .json .title { 3452 | color: #b1bdc4 !important; 3453 | } 3454 | body ::shadow .json .separator { 3455 | color: #737373 !important; 3456 | } 3457 | body ::shadow .popover .parent + .children.expanded, 3458 | body ::shadow #console-messages .parent + .children.expanded, 3459 | body ::shadow .sidebar-pane .parent:not(.event-category) + .children.expanded { 3460 | border-left: 1px dashed rgba(204, 204, 204, 0.2) !important; 3461 | position: relative; 3462 | left: 4.4px; 3463 | } 3464 | body ::shadow .section .properties .dimmed { 3465 | opacity: 0.5 !important; 3466 | } 3467 | body ::shadow .cm-breakpoint .CodeMirror-gutter-elt { 3468 | color: #000 !important; 3469 | font-weight: 700 !important; 3470 | } 3471 | body ::shadow .CodeMirror-cursor { 3472 | border-left: 1px solid #cdd3de !important; 3473 | } 3474 | body ::shadow .cm-error { 3475 | background: #9d1e15 !important; 3476 | border-radius: 2px !important; 3477 | color: #eee !important; 3478 | } 3479 | body ::shadow .CodeMirror-gutter-elt { 3480 | color: #546e7a !important; 3481 | } 3482 | body ::shadow .CodeMirror-gutters { 3483 | background: #263238 !important; 3484 | border-right: 2px solid #2e3c43 !important; 3485 | } 3486 | body ::shadow .CodeMirror-selected, 3487 | body ::shadow span.CodeMirror-selectedtext { 3488 | background: #2e3c43 !important; 3489 | } 3490 | body ::shadow .CodeMirror-code .CodeMirror-matchingbracket { 3491 | color: #80cbc4 !important; 3492 | text-shadow: 0 0 3px #80cbc4 !important; 3493 | border-bottom: none !important; 3494 | font-weight: 800 !important; 3495 | } 3496 | body ::shadow .CodeMirror-code .CodeMirror-nonmatchingbracket { 3497 | color: #db0404 !important; 3498 | text-shadow: 0 0 3px #db0404 !important; 3499 | border-bottom: none !important; 3500 | font-weight: 800 !important; 3501 | } 3502 | body ::shadow .cm-search-highlight-start:before { 3503 | border-color: #80cbc4 !important; 3504 | } 3505 | body ::shadow .cm-search-highlight-end:before { 3506 | border-color: #80cbc4 !important; 3507 | } 3508 | body ::shadow .cm-search-highlight:before { 3509 | border-color: #80cbc4 !important; 3510 | padding: 2px !important; 3511 | } 3512 | body ::shadow .cm-line-with-selection .cm-column-with-selection.cm-search-highlight:before { 3513 | background-color: #80cbc4 !important; 3514 | border-radius: 2px !important; 3515 | } 3516 | body ::shadow span.cm-token-highlight { 3517 | background-color: transparent !important; 3518 | padding: 0px !important; 3519 | } 3520 | body ::shadow span.cm-token-highlight:before { 3521 | border-color: #80cbc4 !important; 3522 | } 3523 | body ::shadow .cm-line-with-selection span.cm-column-with-selection { 3524 | color: #000 !important; 3525 | background-color: #80cbc4 !important; 3526 | } 3527 | body ::shadow .cm-whitespace:before { 3528 | color: #2e3c43 !important; 3529 | } 3530 | body ::shadow .cm-tab:before { 3531 | border-bottom: 1px solid #2e3c43 !important; 3532 | } 3533 | body ::shadow .cm-highlight { 3534 | -webkit-animation: "fadeout-revised" 3s 0s !important; 3535 | 3536 | } 3537 | body ::shadow .cm-highlight *:not(.CodeMirror-linenumber) { 3538 | color: #e6e6e6 !important; 3539 | } 3540 | body ::shadow .cm-execution-line { 3541 | background-color: #3e4c58 !important; 3542 | outline: 1px solid #2e3c43 !important; 3543 | } 3544 | body ::shadow .CodeMirror-linenumber { 3545 | border-right: none !important; 3546 | } 3547 | body ::shadow .cm-line-without-source-mapping { 3548 | background-color: #252525 !important; 3549 | } 3550 | @-webkit-keyframes fadeout-revised { 3551 | 0% { 3552 | background-color: #3e4c58; 3553 | 3554 | } 3555 | 50% { 3556 | background-color: #3e4c58; 3557 | 3558 | } 3559 | 100% { 3560 | background-color: #263238; 3561 | outline: 1px solid #263238; 3562 | } 3563 | } 3564 | body ::shadow .editing { 3565 | background-color: #263238 !important; 3566 | outline: 1px solid #80cbc4 !important; 3567 | color: #b1bdc4 !important; 3568 | } 3569 | body ::shadow .CodeMirror { 3570 | outline: none !important; 3571 | border: 1px solid #2e3c43 !important; 3572 | border-radius: 5px; 3573 | box-shadow: inset 0 0 15px 0 rgba(17, 17, 17, 0.6) !important; 3574 | margin: 10px 0; 3575 | padding: 10px 0 0 10px !important; 3576 | color: #b1bdc4 !important; 3577 | } 3578 | body ::shadow ::-webkit-scrollbar, 3579 | body ::shadow .CodeMirror-scrollbar-filler, 3580 | body ::shadow .CodeMirror-gutter-filler { 3581 | width: 12px !important; 3582 | height: 12px !important; 3583 | background-color: #263238 !important; 3584 | } 3585 | body ::shadow ::-webkit-scrollbar-track:horizontal, 3586 | body ::shadow .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:horizontal, 3587 | body ::shadow .custom-popup-vertical-scroll ::-webkit-scrollbar-track:horizontal, 3588 | body ::shadow .custom-popup-vertical-scroll .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:horizontal, 3589 | body ::shadow .custom-popup-horizontal-scroll .custom-popup-vertical-scroll ::-webkit-scrollbar-track:horizontal { 3590 | -webkit-box-shadow: none !important; 3591 | background: #282e35 !important; 3592 | } 3593 | body ::shadow ::-webkit-scrollbar-track:vertical, 3594 | body ::shadow .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:vertical, 3595 | body ::shadow .custom-popup-vertical-scroll ::-webkit-scrollbar-track:vertical, 3596 | body ::shadow .custom-popup-vertical-scroll .custom-popup-horizontal-scroll ::-webkit-scrollbar-track:vertical, 3597 | body ::shadow .custom-popup-horizontal-scroll .custom-popup-vertical-scroll ::-webkit-scrollbar-track:vertical { 3598 | -webkit-box-shadow: none !important; 3599 | background: #282e35 !important; 3600 | } 3601 | body ::shadow ::-webkit-scrollbar-corner, 3602 | body ::shadow .CodeMirror-scrollbar-filler, 3603 | body ::shadow .CodeMirror-gutter-filler { 3604 | -webkit-box-shadow: none !important; 3605 | background: #282e35 !important; 3606 | } 3607 | body ::shadow ::-webkit-scrollbar-thumb { 3608 | border-radius: 0px !important; 3609 | background-color: #263238 !important; 3610 | border: none !important; 3611 | } 3612 | body ::shadow ::-webkit-scrollbar-thumb:horizontal { 3613 | -webkit-box-shadow: none !important; 3614 | } 3615 | body ::shadow ::-webkit-scrollbar-thumb:vertical { 3616 | -webkit-box-shadow: none !important; 3617 | } 3618 | body ::shadow .styles-section.matched-styles .properties li.parent.expanded .expand-element, 3619 | body ::shadow #console-messages .console-group-messages .section.expanded .header::before, 3620 | body ::shadow #console-messages .properties-tree li.parent.expanded::before, 3621 | body ::shadow .outline-disclosure li.parent.expanded::before, 3622 | body ::shadow .properties-tree li.parent.expanded::before, 3623 | body ::shadow .section.expanded > .header::before, 3624 | body ::shadow .section .event-bar.expanded .header::before, 3625 | body ::shadow .sidebar-pane .parent.expanded::before, 3626 | body ::shadow .sidebar-pane-stack .sidebar-pane-title.expanded::before, 3627 | body ::shadow .timeline-expandable-expanded .timeline-expandable-arrow { 3628 | background-color: #8c8c8c !important; 3629 | background-image: none !important; 3630 | -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important; 3631 | -webkit-mask-position: -4px -96px !important; 3632 | -webkit-mask-repeat: no-repeat !important; 3633 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 3634 | -webkit-transform: rotate(90deg); 3635 | } 3636 | body ::shadow .sidebar-pane-stack .sidebar-pane-title.expanded::before { 3637 | -webkit-transform: rotate(90deg) translateX(2px); 3638 | } 3639 | body ::shadow .styles-section.matched-styles .properties li.parent .expand-element, 3640 | body ::shadow #console-messages .console-group-messages .section .header::before, 3641 | body ::shadow #console-messages .properties-tree li.parent::before, 3642 | body ::shadow .outline-disclosure li.parent::before, 3643 | body ::shadow #search-results-pane-file-based .parent::before, 3644 | body ::shadow .properties-tree li.parent::before, 3645 | body ::shadow .section > .header::before, 3646 | body ::shadow .section .event-bar .header::before, 3647 | body ::shadow .sidebar-pane .parent::before, 3648 | body ::shadow .sidebar-pane-stack .sidebar-pane-title::before, 3649 | body ::shadow .timeline-expandable-collapsed .timeline-expandable-arrow, 3650 | body ::shadow ::shadow #search-results-pane-file-based .parent::before { 3651 | background-color: #8c8c8c !important; 3652 | background-image: none !important; 3653 | -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important; 3654 | -webkit-mask-position: -4px -96px !important; 3655 | -webkit-mask-repeat: no-repeat !important; 3656 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 3657 | -webkit-transform: rotate(0deg); 3658 | } 3659 | body ::shadow .data-grid th.sort-ascending > div::after { 3660 | background-color: #8c8c8c !important; 3661 | background-image: none !important; 3662 | -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important; 3663 | -webkit-mask-position: -4px -96px !important; 3664 | -webkit-mask-repeat: no-repeat !important; 3665 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 3666 | -webkit-mask-position: -4px -108px !important; 3667 | } 3668 | body ::shadow .data-grid th.sort-descending > div::after { 3669 | background-color: #8c8c8c !important; 3670 | background-image: none !important; 3671 | -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important; 3672 | -webkit-mask-position: -4px -96px !important; 3673 | -webkit-mask-repeat: no-repeat !important; 3674 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 3675 | -webkit-mask-position: -20px -96px !important; 3676 | } 3677 | body ::shadow #search-results-pane-file-based .parent.expanded::before, 3678 | body ::shadow ::shadow #search-results-pane-file-based .parent.expanded::before { 3679 | -webkit-mask-position: -20px -96px !important; 3680 | } 3681 | body ::shadow #search-results-pane-file-based .parent.expanded::before, 3682 | body ::shadow ::shadow #search-results-pane-file-based .parent.expanded::before { 3683 | -webkit-mask-position: -20px -93px !important; 3684 | } 3685 | body ::shadow #search-results-pane-file-based .parent::before, 3686 | body ::shadow ::shadow #search-results-pane-file-based .parent::before { 3687 | -webkit-mask-position: -4px -93px !important; 3688 | } 3689 | body ::shadow .panel.network .outline-disclosure li.parent::before { 3690 | top: 3px !important; 3691 | } 3692 | body ::shadow .sidebar-tabbed-pane .section > .header::before, 3693 | body ::shadow .event-bars .event-bar .header::before { 3694 | margin-top: 3px !important; 3695 | } 3696 | body ::shadow .status-bar-select-arrow { 3697 | background-color: #8c8c8c !important; 3698 | background-image: none !important; 3699 | -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important; 3700 | -webkit-mask-position: -4px -96px !important; 3701 | -webkit-mask-repeat: no-repeat !important; 3702 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 3703 | -webkit-mask-position: -20px -96px !important; 3704 | } 3705 | body /deep/ .highlighted-search-result { 3706 | color: #000000 !important; 3707 | border-radius: 2px !important; 3708 | font-size: 1em !important; 3709 | background-color: #80cbc4 !important; 3710 | box-shadow: rgba(0, 0, 0, 0.498039) 3px 3px 4px 0px !important; 3711 | } 3712 | .timeline-aggregated-category + span { 3713 | text-shadow: none !important; 3714 | color: #b1bdc4 !important; 3715 | } 3716 | .glyph { 3717 | background-color: rgba(140, 140, 140, 0.7) !important; 3718 | } 3719 | ::shadow .crumbs { 3720 | text-shadow: none !important; 3721 | color: #b1bdc4 !important; 3722 | } 3723 | ::shadow .crumbs .crumb { 3724 | -webkit-border-image: none !important; 3725 | border-left: 1px solid #2e3c43 !important; 3726 | border-right: 1px solid #282e35 !important; 3727 | padding: 0 10px !important; 3728 | margin: 0 !important; 3729 | line-height: 18px !important; 3730 | } 3731 | ::shadow .crumbs .crumb:hover { 3732 | color: #f8f8f8 !important; 3733 | background-color: #b1bdc4 !important; 3734 | } 3735 | ::shadow .crumbs .crumb.selected { 3736 | background-color: #3e4c58 !important; 3737 | text-shadow: none !important; 3738 | color: #f8f8f8 !important; 3739 | cursor: default; 3740 | } 3741 | .image-view .title { 3742 | color: #b1bdc4 !important; 3743 | } 3744 | .image-view .infoList dt { 3745 | color: #626262 !important; 3746 | margin-bottom: 5px !important; 3747 | } 3748 | .image-view .infoList dd { 3749 | color: #b1bdc4 !important; 3750 | margin-bottom: 5px !important; 3751 | } 3752 | .image-view dd > a.undefined { 3753 | color: #c792ea !important; 3754 | } 3755 | .timeline-details-view-body { 3756 | background-color: #263238 !important; 3757 | } 3758 | .timeline-details-view-row { 3759 | border-bottom: 1px solid #2e3c43 !important; 3760 | } 3761 | .timeline-details-view-row-value { 3762 | border-left: 1px solid #2e3c43 !important; 3763 | color: #b1bdc4 !important; 3764 | } 3765 | .timeline-details-view-row-title { 3766 | color: #626262 !important; 3767 | } 3768 | .timeline-aggregated-info-legend > div, 3769 | .memory-counter-sidebar-info { 3770 | color: #b1bdc4 !important; 3771 | } 3772 | ::shadow .flame-chart-selected-element { 3773 | border-color: #3e4c58 !important; 3774 | background-color: rgba(54, 76, 59, 0.6) !important; 3775 | } 3776 | .layer-tree.outline-disclosure li, 3777 | .profiler-log-view li { 3778 | color: #b1bdc4 !important; 3779 | } 3780 | .timeline-layers-view-properties table tr td:nth-child(1) { 3781 | color: #626262 !important; 3782 | } 3783 | .timeline-layers-view-properties table tr td:nth-child(2) { 3784 | color: #b1bdc4 !important; 3785 | } 3786 | .timeline-layers-view-properties td { 3787 | border: 1px solid #2e3c43 !important; 3788 | } 3789 | ::shadow .spectrum-display-value, 3790 | ::shadow .spectrum-range-container { 3791 | color: #b1bdc4 !important; 3792 | } 3793 | .toolbar > .status-bar { 3794 | background-color: transparent !important; 3795 | height: inherit !important; 3796 | padding-top: 6px !important; 3797 | border-bottom: 1px solid #2e3c43 !important; 3798 | box-shadow: inset 0 1px 0 #626262 !important; 3799 | } 3800 | .filter-bar.hbox { 3801 | padding: 2px 0; 3802 | } 3803 | ::shadow .toolbar-search-control { 3804 | background-color: #282e35 !important; 3805 | border-color: #2e3c43 !important; 3806 | color: #e6e6e6 !important; 3807 | } 3808 | ::shadow .toolbar-search-control:disabled, 3809 | ::shadow ::shadow .toolbar-search-control:disabled { 3810 | opacity: .3 !important; 3811 | } 3812 | ::shadow .toolbar-search-control:focus, 3813 | ::shadow ::shadow .toolbar-search-control:focus { 3814 | outline-color: none !important; 3815 | } 3816 | ::shadow #search-results-pane-file-based .search-match:hover, 3817 | ::shadow ::shadow #search-results-pane-file-based .search-match:hover { 3818 | box-shadow: inset 0 1px 0 #282e35, inset 0 -1px 0 #282e35 !important; 3819 | background-color: #2e3c43; 3820 | color: #b1bdc4; 3821 | } 3822 | html /deep/ .component-root { 3823 | color: #b1bdc4 !important; 3824 | } 3825 | .filter-input-field { 3826 | background-color: #282e35 !important; 3827 | border-color: #2e3c43 !important; 3828 | color: #e6e6e6 !important; 3829 | } 3830 | .filter-input-field:disabled { 3831 | opacity: .3 !important !important; 3832 | } 3833 | .filter-input-field:focus { 3834 | outline-color: none !important !important; 3835 | } 3836 | ::shadow select.status-bar-item, 3837 | ::shadow .toolbar::shadow select.toolbar-item { 3838 | margin-right: -15px !important; 3839 | } 3840 | ::shadow select.status-bar-item /deep/ option, 3841 | ::shadow .toolbar::shadow select.toolbar-item /deep/ option { 3842 | background-color: #263238 !important; 3843 | } 3844 | #glass-pane .status-bar.fill { 3845 | background-image: none !important; 3846 | background-color: transparent !important; 3847 | } 3848 | ::shadow .status-bar-shadow.floating { 3849 | background-color: #282e35 !important; 3850 | border: none !important; 3851 | } 3852 | ::shadow .status-bar-shadow.floating .status-bar-item { 3853 | border: 1px solid #263238 !important; 3854 | } 3855 | #memory-graphs-container > div:last-child { 3856 | background: #263238 !important; 3857 | } 3858 | .timeline-layers-view > div:last-child, 3859 | .timeline-layers-view-properties > div:last-child { 3860 | background-color: #263238 !important; 3861 | } 3862 | body.undocked.platform-mac.inactive .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header, 3863 | body.undocked.platform-mac .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header, 3864 | body.platform-mac.inactive .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header, 3865 | body.platform-mac .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header, 3866 | body .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header { 3867 | background: #263238 !important; 3868 | } 3869 | ::shadow .tabbed-pane-header { 3870 | background: #263238 !important; 3871 | } 3872 | ::shadow .tabbed-pane-header-contents { 3873 | 3874 | color: #999999 !important; 3875 | } 3876 | .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header { 3877 | flex: 0 0 34px !important; 3878 | } 3879 | .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header-tabs-drop-down-container { 3880 | padding-top: 6px !important; 3881 | } 3882 | .inspector-view-tabbed-pane.tabbed-pane::shadow .tabbed-pane-header-contents .tabbed-pane-header-tab { 3883 | height: 34px !important; 3884 | line-height: 25.5px !important; 3885 | } 3886 | ::shadow .tabbed-pane-header-tabs-drop-down-container { 3887 | color: #999999 !important; 3888 | } 3889 | .tabbed-pane::shadow .tabbed-pane-header { 3890 | 3891 | border-bottom: 1px solid #263238 !important; 3892 | border: none; 3893 | } 3894 | .tabbed-pane::shadow .tabbed-pane-header-tab { 3895 | border-color: transparent !important; 3896 | border-image: none !important; 3897 | border-left: none !important; 3898 | border-right: none !important; 3899 | border-top: 2px solid #b1bdc4 !important; 3900 | cursor: pointer !important; 3901 | margin: 0 !important; 3902 | margin-bottom: 1px !important; 3903 | margin-top: 0 !important; 3904 | padding: 2px 4px !important; 3905 | width: auto !important; 3906 | color: #b1bdc4 !important; 3907 | } 3908 | .tabbed-pane::shadow .tabbed-pane-header-tab:hover { 3909 | color: #f8f8f8 !important; 3910 | } 3911 | .tabbed-pane::shadow .tabbed-pane-header-tab.selected { 3912 | background: none !important; 3913 | border-top: 2px solid #80cbc4 !important; 3914 | color: #f8f8f8 !important; 3915 | font-size: 1em; 3916 | } 3917 | ::shadow .tabbed-pane-content { 3918 | background-color: #263238 !important; 3919 | } 3920 | ::shadow .search-drawer-header label.search-config-label { 3921 | color: #b1bdc4 !important; 3922 | } 3923 | .panel .status-bar::shadow .status-bar-shadow { 3924 | background: #263238 !important; 3925 | border-top: 1px solid #2e3c43 !important; 3926 | box-shadow: none !important; 3927 | border-bottom: none !important; 3928 | } 3929 | .tabbed-pane-header-before::shadow .status-bar-shadow, 3930 | .tabbed-pane-header-after::shadow .status-bar-shadow { 3931 | height: 34px !important; 3932 | } 3933 | ::shadow .shadow-split-view.vbox > .shadow-split-view-sidebar:not(.maximized) { 3934 | border-top: none !important; 3935 | } 3936 | .device-name { 3937 | color: #626262 !important; 3938 | } 3939 | .device-serial { 3940 | color: #b1bdc4 !important; 3941 | } 3942 | .overrides-splash-screen .status-bar { 3943 | background-color: #263238 !important; 3944 | background-image: none !important; 3945 | } 3946 | .overrides-view { 3947 | padding-top: 0 !important; 3948 | } 3949 | .overrides-view ::shadow .tabbed-pane-content { 3950 | padding: 10px; 3951 | } 3952 | .network-details-view-tall-header .network-item-view::shadow .tabbed-pane-header { 3953 | padding-top: 0 !important; 3954 | } 3955 | .network-details-view-tall-header .network-item-view::shadow .tabbed-pane-header-tab { 3956 | height: 31px !important; 3957 | padding-top: 5px !important; 3958 | } 3959 | .network .request-headers-view .parent { 3960 | margin-top: 1px !important; 3961 | } 3962 | ::shadow .suggest-box { 3963 | color: #000 !important; 3964 | background-color: #263238 !important; 3965 | border: 2px rgba(0, 0, 0, 0.2) solid !important; 3966 | box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.1) !important; 3967 | } 3968 | ::shadow .suggest-box-content-item.source-code:hover { 3969 | background-color: #282e35 !important; 3970 | border: 1px solid #b1bdc4 !important; 3971 | } 3972 | ::shadow .suggest-box-content-item.source-code.selected { 3973 | background-color: #282e35 !important; 3974 | } 3975 | ::shadow .suggest-box .source-code .prefix { 3976 | color: #80cbc4 !important; 3977 | } 3978 | ::shadow .suggest-box .source-code .suffix { 3979 | color: #d9d9d9 !important; 3980 | } 3981 | ::shadow .vertical-tab-layout .tabbed-pane-header-tab { 3982 | padding-left: 20px !important; 3983 | border-top: none !important; 3984 | color: #b1bdc4 !important; 3985 | } 3986 | ::shadow .vertical-tab-layout .tabbed-pane-header-tab.selected { 3987 | border-top: none !important; 3988 | border-left: 7px solid #80cbc4 !important; 3989 | padding-left: 13px !important; 3990 | } 3991 | .help-window-main ::shadow .tabbed-pane-header { 3992 | background-image: none !important; 3993 | box-shadow: none !important; 3994 | } 3995 | .help-window-main ::shadow .tabbed-pane-header-contents { 3996 | box-shadow: none !important; 3997 | } 3998 | ::shadow style + .text-prompt-editing { 3999 | background-color: #263238 !important; 4000 | outline: 1px solid #80cbc4 !important; 4001 | } 4002 | ::shadow .text-prompt-editing > ::content * { 4003 | color: #80cbc4 !important; 4004 | } 4005 | .callstack-info.status { 4006 | border-top: none !important; 4007 | } 4008 | #devices-tab-content .devices-list { 4009 | border: 1px solid #2e3c43 !important; 4010 | } 4011 | #devices-tab-content .devices-title { 4012 | color: #80cbc4 !important; 4013 | } 4014 | #devices-tab-content .devices-list-item { 4015 | color: #b1bdc4; 4016 | } 4017 | #devices-tab-content .devices-list-item:hover { 4018 | background: #282e35 !important; 4019 | border-top: 1px solid #282e35 !important; 4020 | border-bottom: 1px solid #282e35 !important; 4021 | } 4022 | #devices-tab-content .devices-list-item .devices-list-title { 4023 | opacity: 0.2 !important; 4024 | } 4025 | #devices-tab-content .devices-list-item.device-list-item-show .devices-list-title { 4026 | color: #b1bdc4 !important; 4027 | opacity: 1 !important; 4028 | } 4029 | #devices-tab-content .devices-edit-container { 4030 | background: #282e35 !important; 4031 | } 4032 | #devices-tab-content .devices-custom-separator { 4033 | border-top: 1px solid #151515 !important; 4034 | border-bottom: 1px solid #2e3c43 !important; 4035 | } 4036 | #devices-tab-content .devices-list-edit, 4037 | #devices-tab-content .devices-list-remove { 4038 | -webkit-mask-image: url(Images/toolbarButtonGlyphs.png) !important; 4039 | background-color: #80cbc4 !important; 4040 | background-image: none !important; 4041 | } 4042 | #devices-tab-content .devices-list-edit { 4043 | -webkit-mask-position: -224px -72px; 4044 | } 4045 | #devices-tab-content .devices-list-remove { 4046 | -webkit-mask-position: -128px -24px; 4047 | } 4048 | .events-pane > ol > li.parent { 4049 | margin: 0 !important; 4050 | padding-bottom: 2px !important; 4051 | } 4052 | .events-pane > ol > ol > li { 4053 | border-top: none !important; 4054 | } 4055 | .events-pane .sidebar-pane .section.expanded > .header, 4056 | .events-pane .children .section.event-bar { 4057 | border-bottom: none !important; 4058 | } 4059 | body .sidebar-pane .parent:not(.event-category) + .children.expanded { 4060 | border-left: none !important; 4061 | } 4062 | .hidden-callframes-message { 4063 | background: #2e3c43; 4064 | text-align: center; 4065 | } 4066 | .hidden-callframes-message .link { 4067 | color: #c792ea !important; 4068 | } 4069 | .styles-section-title .media-list.media-matches .media.editable-media, 4070 | .styles-section-title .media-list { 4071 | color: #8c8c8c !important; 4072 | } 4073 | .styles-section-title .media-list.media-matches .media.editable-media.media-matches .media.editable-media .media-text, 4074 | .styles-section-title .media-list.media-matches .media.editable-media .media-text { 4075 | color: #b1bdc4 !important; 4076 | } 4077 | .styles-section .header .title .media-list.media-matches .media.editable-media { 4078 | color: #b1bdc4 !important; 4079 | } 4080 | .watch-expressions { 4081 | margin-top: 0 !important; 4082 | } 4083 | .watch-expressions .name { 4084 | color: #77a8c6 !important; 4085 | } 4086 | .watch-expression .primitive-value:hover, 4087 | .watch-expression .section .header:hover { 4088 | background-color: #282e35 !important; 4089 | box-shadow: inset 0 1px 0 0 #282e35, inset 0 -1px 0 0 #282e35; 4090 | } 4091 | .error-message { 4092 | color: #ff5a5a !important; 4093 | } 4094 | .settings-experiment-hidden label { 4095 | background-color: #263238 !important; 4096 | } 4097 | .settings-experiment-hidden label .dt-checkbox-text { 4098 | color: #80cbc4 !important; 4099 | } 4100 | .event-listener-tree > li { 4101 | border-top: none !important; 4102 | } 4103 | .event-listener-tree .name { 4104 | color: #77a8c6 !important; 4105 | } 4106 | #network-overview-container { 4107 | border-bottom: none !important; 4108 | } 4109 | .network-overview-canvas-container { 4110 | background-color: #263238 !important; 4111 | } 4112 | /* ========================================================================== 4113 | Find 4114 | ========================================================================== */ 4115 | .styles-section .style-properties li.filter-match, 4116 | .styles-section .simple-selector.filter-match { 4117 | background-color: #3e4c58 !important; 4118 | box-shadow: 0 0 0 1px #2e3c43 !important; 4119 | border-radius: 2px; 4120 | } 4121 | /* ========================================================================== 4122 | Sources 4123 | ========================================================================== */ 4124 | .text-editor-value-decoration { 4125 | background-color: #282e35 !important; 4126 | color: #b1bdc4 !important; 4127 | padding: 0 5px; 4128 | border-radius: 2px !important; 4129 | box-shadow: 0 1px 0 0 #2e3c43 !important; 4130 | border-top: 1px solid #1c1c1c !important; 4131 | } 4132 | .source-frame-infobar::shadow .infobar-warning { 4133 | color: #ddbb00; 4134 | border-bottom: 1px solid #2e3c43 !important; 4135 | background-color: #2e3c43 !important; 4136 | } 4137 | .source-frame-infobar::shadow .source-frame-infobar-toggle-link { 4138 | color: #80cbc4 !important; 4139 | } 4140 | .cm-execution-line-tail { 4141 | background-color: #212e24 !important; 4142 | border-radius: 2px !important; 4143 | } 4144 | /* ========================================================================== 4145 | Popovers 4146 | ========================================================================== */ 4147 | .popover { 4148 | min-height: 0 !important; 4149 | } 4150 | /* ========================================================================== 4151 | Sources (watch) 4152 | ========================================================================== */ 4153 | .watch-expression-header:hover { 4154 | background-color: #282e35 !important; 4155 | } 4156 | /* ========================================================================== 4157 | Elements - Accessibility 4158 | ========================================================================== */ 4159 | div.ax-computed-name { 4160 | border-bottom: 1px solid #2e3c43 !important; 4161 | } 4162 | ::shadow .ax-name { 4163 | color: #77a8c6 !important; 4164 | } 4165 | ::shadow .ax-role { 4166 | color: #b1bdc4 !important; 4167 | } 4168 | /* ========================================================================== 4169 | Toolbar 4170 | ========================================================================== */ 4171 | body .inspector-view-toolbar.toolbar::shadow .toolbar-button-theme { 4172 | background-color: #b1bdc4 !important; 4173 | } 4174 | .inspector-view-toolbar-left, 4175 | .inspector-view-toolbar.tabbed-pane-header-after { 4176 | margin-top: 7px !important; 4177 | } 4178 | .console-view .toolbar, 4179 | .network .toolbar { 4180 | background: #263238 !important; 4181 | border-top: 1px solid #2e3c43 !important; 4182 | } 4183 | ::shadow .toolbar-item > .glyph, 4184 | ::shadow .toolbar-item > .glyph:active, 4185 | ::shadow .filter-toolbar-item.toggled-shown .glyph, 4186 | ::shadow button.toolbar-item.toggled-on .glyph { 4187 | background-color: #80cbc4 !important; 4188 | } 4189 | ::shadow .toolbar-item > .glyph, 4190 | ::shadow button.toolbar-item.toggled-off .glyph { 4191 | background-color: #b1bdc4 !important; 4192 | } 4193 | ::shadow .toolbar-counter-item { 4194 | color: #b1bdc4 !important; 4195 | } 4196 | /* ========================================================================== 4197 | Status Bars 4198 | ========================================================================== */ 4199 | #sources-panel-sources-view .sources-toolbar { 4200 | background: #263238 !important; 4201 | border-top: 1px solid #2e3c43 !important; 4202 | border-top: none !important; 4203 | color: #b1bdc4 !important; 4204 | } 4205 | .toolbar::shadow .toolbar-select-arrow { 4206 | position: relative !important; 4207 | right: 5px !important; 4208 | } 4209 | .resources-toolbar, 4210 | ::shadow .search-toolbar-summary { 4211 | background: #263238 !important; 4212 | border-top: 1px solid #2e3c43 !important; 4213 | color: #b1bdc4 !important; 4214 | border-top: none !important; 4215 | } 4216 | .profiles-toolbar { 4217 | background: #263238 !important; 4218 | border-top: 1px solid #2e3c43 !important; 4219 | color: #b1bdc4 !important; 4220 | border-bottom: none !important; 4221 | } 4222 | /* ========================================================================== 4223 | Toolbars 4224 | ========================================================================== */ 4225 | ::shadow .shadow-split-widget.hbox > .shadow-split-widget-sidebar:not(.maximized) { 4226 | border-left: 2px solid #2e3c43 !important; 4227 | } 4228 | ::shadow .shadow-split-widget.hbox.shadow-split-widget-first-is-sidebar > .shadow-split-widget-sidebar:not(.maximized) { 4229 | border-right: 2px solid #2e3c43 !important; 4230 | } 4231 | /* ========================================================================== 4232 | Elements Sidebar 4233 | ========================================================================== */ 4234 | .styles-animations-controls-pane.expanded { 4235 | border-bottom: 1px solid #2e3c43 !important; 4236 | background: #313131 !important; 4237 | } 4238 | .styles-animations-controls-pane > * { 4239 | margin: 3px 4px !important; 4240 | } 4241 | /* ========================================================================== 4242 | Toolbars 4243 | ========================================================================== */ 4244 | .dt-checkbox-text, 4245 | ::shadow .dt-checkbox-text, 4246 | ::content .dt-checkbox-text { 4247 | color: #b1bdc4 !important; 4248 | } 4249 | ::shadow .shadow-split-widget button.sidebar-show-hide-button { 4250 | background-color: #b1bdc4 !important; 4251 | } 4252 | /* ========================================================================== 4253 | Console 4254 | ========================================================================== */ 4255 | ::shadow .shadow-split-widget.vbox > .shadow-split-widget-sidebar:not(.maximized) { 4256 | border-top: none !important; 4257 | } 4258 | .overrides-view label, 4259 | .overrides-view fieldset > span, 4260 | #metrics-override-section span, 4261 | #metrics-override-section td, 4262 | #geolocation-override-section td { 4263 | color: #626262 !important; 4264 | } 4265 | ::shadow .object-properties-section-name, 4266 | .console-view-object-properties-section span { 4267 | color: #546e7a !important; 4268 | } 4269 | 4270 | 4271 | 4272 | /* 4273 | * Color Scheme 4274 | * 4275 | * 4276 | * background: #263238 4277 | * bars: #263238 4278 | * dark hightlight: #3e4c58 4279 | * light highlight: #80cbc4 4280 | * border: #2e3c43 4281 | * bardeep: #282e35 4282 | * normal color: #b1bdc4 4283 | * link: #C893EB 4284 | * attr: #ffcb6b 4285 | * value #c3e88d 4286 | * html #ff5370 4287 | * comment: #546e7a; 4288 | * white: #cdd3de; 4289 | * property: #76aeff 4290 | * very white: #f8f8f8; 4291 | 4292 | */ 4293 | 4294 | .tabbed-pane::shadow .tabbed-pane-header-tab { 4295 | background: #37474f !important; 4296 | background-color: #37474f !important; 4297 | } 4298 | .request-headers-view .outline-disclosure li.parent.expanded::before 4299 | .data-grid .header-container { 4300 | -webkit-mask-position: -4px -98px !important; 4301 | } 4302 | ::shadow > .toolbar-shadow .toolbar-button.hover .toolbar-glyph { 4303 | background-color: hsl(218, 81%, 59%) !important; 4304 | } 4305 | .filter-bar { 4306 | background-color: #37474f !important; 4307 | } 4308 | .request-headers-view .outline-disclosure li.parent.expanded::before { 4309 | -webkit-mask-position: -4px -98px !important; 4310 | } 4311 | ::shadow > .tree-outline-disclosure .tree-outline li.navigator-folder-tree-item .tree-element-title { 4312 | color: #b1bdc4 !important; 4313 | } 4314 | .scope-chain-sidebar-pane-section-title { 4315 | color: #546e7a !important; 4316 | } 4317 | ::shadow .odd-row { 4318 | background-color: #3e4c58 !important; 4319 | } 4320 | ::shadow .tree-element-title { 4321 | color: #f8f8f8 !important; 4322 | } 4323 | ::shadow .tree-outline li.selected .selection { 4324 | background-color: #546e7a !important; 4325 | } 4326 | ::shadow ol.tree-outline:focus li.selected .selection { 4327 | background-color: hsl(218, 81%, 59%) !important; 4328 | } 4329 | ::shadow .cm-line-without-source-mapping { 4330 | background-color: #263238 !important; 4331 | } 4332 | ::shadow .CodeMirror pre { 4333 | background-color: #263238 !important; 4334 | } 4335 | .network-status-pane { 4336 | background-color: #2e3c43 !important; 4337 | } 4338 | /* TODO is duplicated above? */ 4339 | .resources-dividers-label-bar { 4340 | background-color: #3e4c58 !important; 4341 | } 4342 | /* Fix for Network/Request Payload/first level of expansion */ 4343 | * { 4344 | color: #b1bdc4 !important; 4345 | } 4346 | span.being-edited { 4347 | color: #cdd3de !important; 4348 | } 4349 | --------------------------------------------------------------------------------