Custom.css

/**********************************************/
/*
/* SO-Dark-Monokai
/* https://github.com/simonowendesign/SO-Dark-Monokai
/* Taken from the below and tweaked by Simon Owen (@simonowendesign)
/* 
/* IR_Dark_Monokai
/* Designed and developed by Andres Pagella (@mapagella)
/* http://www.andrespagella.com/customising-chrome-devtools
/*
/* Based on Ben Truyman's IR_Black
/* which is...
/* Based on Todd Werth's IR_Black:
/* http://blog.toddwerth.com/entries/2
/*
/* Inspired by Darcy Clarke's blog post:
/* http://darcyclarke.me/design/skin-your-chrome-inspector/
/*
/**********************************************/

#-webkit-web-inspector,
#-webkit-web-inspector .split-view-contents {
	background-color: #242424;
}

#-webkit-web-inspector * {
	border-color: #333 !important;
}

#-webkit-web-inspector #toolbar {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)) !important;
	border-top: 1px solid #444 !important;
	border-bottom: 1px solid #1A1A1A !important;
}

/* Make the top toolbar dark */
#-webkit-web-inspector.detached #toolbar {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)) !important;
	height: 42px !important;
	border-top: 1px solid #999 !important;
	border-bottom: 1px solid #000 !important;
}

#-webkit-web-inspector.detached.inactive #toolbar {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444)) !important;
}

#-webkit-web-inspector #main {
	top: 42px !important;
}

/* Disable the labels of the toolbar icons */
#-webkit-web-inspector .toolbar-label {
	display: none !important;
}

/* Make the status bar dark as well */
#-webkit-web-inspector .status-bar {
	background-image: -webkit-linear-gradient(#444, #222) !important;
}

#-webkit-web-inspector .status-bar button.status-bar-item {
	border-left: 1px solid #555 !important;
	border-right: 1px solid #222 !important;
}

#-webkit-web-inspector .status-bar button .glyph {
	background-color: rgba(255, 255, 255, 0.75) !important;
	margin: 0 1 !important;
}

#-webkit-web-inspector .status-bar button .glyph.shadow {
	margin: -2px -1px !important;
	background-color: rgba(0, 0, 0, 0.75) !important;
}

#-webkit-web-inspector .crumbs .crumb.selected.end, .crumbs .crumb {
	-webkit-border-image: none !important;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#222)) !important;
	border-width: 0 1px 0 2px !important;
	border-right: 1px solid rgba(0,0,0,1) !important;
	border-left: 1px solid rgba(255,255,255,0.2) !important;
	margin: 0 !important;
	padding-right: 7px !important;
	color: #BBB !important;
	text-shadow: none !important;
}

#-webkit-web-inspector .crumbs .crumb.selected.end, .crumbs .crumb.selected {
	-webkit-border-image: none !important;
	color: black !important;
	text-shadow: none !important;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(208, 179, 55)), to(rgb(238, 154, 4))) !important;
}

/* Panes */
#-webkit-web-inspector #main ol {
	background-color: #111 !important;
}

#-webkit-web-inspector .webkit-css-property,
#-webkit-web-inspector .value {
	background-color: #111 !important;
}

#-webkit-web-inspector div.pane.expanded {
	background-color: #111;
}

#-webkit-web-inspector .styles-section.read-only {
	background-color: #222 !important;
}

#-webkit-web-inspector .styles-section .header .subtitle {
	color: #666 !important;
}

#-webkit-web-inspector  .monospace,
#-webkit-web-inspector .source-code {
	color: #000 !important;
}

#-webkit-web-inspector .styles-section .properties > li .webkit-css-property {
	color: #72d9e7 !important;
	font-weight: normal;
}

#-webkit-web-inspector .styles-section .value {
	color: #a775ff !important;
}

#-webkit-web-inspector .sidebar-separator {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#666), color-stop(0.05, #666), color-stop(0.05, #333), to(#444)) !important;
	color: #CCC !important;
	text-shadow: none !important;
	border-top: 1px solid #333 !important;
	border-bottom: 1px solid #333 !important;
}

#-webkit-web-inspector .pane .monospace {
	border-top: #f00 !important;
}

#-webkit-web-inspector .pane > .title {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444)) !important;
	color: #111 !important;
	text-shadow: none !important;
	border-top: 1px solid #333 !important;
	border-bottom: 1px solid #333 !important;
}

#-webkit-web-inspector .split-view-sidebar-right {
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(90%,#333333), color-stop(100%,#252525)) !important;
}

#-webkit-web-inspector #error-warning-count {
	color: #CCC !important;
}

#-webkit-web-inspector #main-status-bar {
	border-top: 1px solid #333 !important;
}

#-webkit-web-inspector .monospace,
#-webkit-web-inspector .source-code {
	color: #CCC !important;
}

#-webkit-web-inspector .pane .monospace,
#-webkit-web-inspector .pane .source-code {
	color: #ccc !important;
}

#-webkit-web-inspector select.status-bar-item,
#-webkit-web-inspector select.status-bar-item:hover,
#-webkit-web-inspector .scope-bar li {
	color: #AAA !important;
	text-shadow: none !important;
}

#-webkit-web-inspector .scope-bar li.selected {
	color: white !important;
}

#-webkit-web-inspector select.status-bar-item,
#-webkit-web-inspector select.status-bar-item:hover {
	border-left: 1px solid #333 !important;
	border-right: 1px solid #AAA !important;
}

#-webkit-web-inspector .split-view-sidebar-right {
	border-left: 1px solid #3A3A3A !important;
	-webkit-box-shadow: none !important;
}

#-webkit-web-inspector .selector-matches {
	color: #a6e70a !important;
}

#-webkit-web-inspector .sidebar-tree,
#-webkit-web-inspector .resources.panel .base-storage-tree-element-title,
#-webkit-web-inspector .base-navigator-tree-element-title {
	color: #999 !important;
}

#-webkit-web-inspector .selected .sidebar-tree,
#-webkit-web-inspector .resources.panel .selected .base-storage-tree-element-title,
#-webkit-web-inspector .selected .base-navigator-tree-element-title {
	color: #fff !important;
}

#-webkit-web-inspector .name-column {
	color: #a6e70a !important;
}

#-webkit-web-inspector .method-column {
	color: #72d9e7 !important;
}

#-webkit-web-inspector .type-column {
	color: #a775ff !important;
}

#-webkit-web-inspector .network-log-grid.data-grid th,
#-webkit-web-inspector .network-log-grid.data-grid th.sort-descending,
#-webkit-web-inspector .network-log-grid.data-grid th.sort-ascending {
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(40, 40, 40)), to(rgb(0, 0, 0))) !important;
	color: #ccc;
}

#-webkit-web-inspector .network-log-grid.data-grid td.method-column,
#-webkit-web-inspector .network-log-grid.data-grid td.status-column,
#-webkit-web-inspector .network-log-grid.data-grid td.type-column,
#-webkit-web-inspector .network-log-grid.data-grid td.initiator-column,
#-webkit-web-inspector .network-log-grid.data-grid td.size-column,
#-webkit-web-inspector .network-log-grid.data-grid td.time-column {
	color: #ccc;
}

/**********************************************/
/* Console
/**********************************************/

/**********************************************/
/* Messages
/**********************************************/

#-webkit-web-inspector #console-messages {
	font-family: 'DroidSansMono', Menlo, monospace !important;
	background: #242424;
	color: #AAA !important;
}

#-webkit-web-inspector #console-messages a {
	color: #888 !important;
}

#-webkit-web-inspector #console-messages a:hover {
	color: #999 !important;
}

#-webkit-web-inspector #console-messages .console-message {
	color: #f1f1f1 !important;
}

#-webkit-web-inspector #console-messages .console-message, #-webkit-web-inspector .console-user-command {
	border-bottom: 1px solid #444 !important;
}

#-webkit-web-inspector #console-messages .console-user-command > .console-message-text {
	color: #ffd2a7 !important;
}

#-webkit-web-inspector #console-messages .console-formatted-number {
	color: #ff73fd !important;
}

#-webkit-web-inspector #console-messages .console-formatted-string {
	color: #a8ff60 !important;
}

#-webkit-web-inspector #console-messages .console-formatted-object {
	color: #7c7c7c !important;
}

#-webkit-web-inspector #console-messages .console-formatted-function {
	color: #fff !important;
}

#-webkit-web-inspector #console-messages .console-formatted-regexp {
	color: #e9c062 !important;
}

#-webkit-web-inspector #console-messages .console-group-messages .section .header .title {
	color: #f1f1f1 !important;
}

#-webkit-web-inspector #console-messages .section .properties .name, .event-properties .name {
	color: #96cbfe !important;
}

#-webkit-web-inspector #console-messages .console-group-messages .section .header::before,
#-webkit-web-inspector #console-messages .properties-tree li.parent::before,
#-webkit-web-inspector .outline-disclosure li.parent::before {
	content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;
}

#-webkit-web-inspector #console-messages .console-group-messages .section.expanded .header::before,
#-webkit-web-inspector #console-messages .properties-tree li.parent.expanded::before,
#-webkit-web-inspector .outline-disclosure li.parent.expanded::before {
	content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important;
}

@-webkit-keyframes webkit-error-level {
0%   { color: #f22; !important }
50%  {
	color: #f00 !important;
	text-shadow: 0px 0px 5px rgba(255, 100, 100, 1);
}
100% { color: #f22; !important }
}

#-webkit-web-inspector #console-messages .console-error-level .console-message-text {
	color: #f66 !important;
	-webkit-animation-name: webkit-error-level;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-timing-function: ease-in-out;
}

#-webkit-web-inspector #console-messages .console-user-command::before {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTMzNzdGNUZDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTMzNzdGNjBDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzM3N0Y1REMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzM3N0Y1RUMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pia6udAAAAB5SURBVHjaYvz//z8DMYAFxli9ejWI6oByK5AVhYaGIhRCgQsQGwOxIFTxe5gEE5pCVyA+C8RpQLwbqgmrwvdQxauhis6AbMamEASUkEwCabyHTWE51BQlqBNMoDSKQhckX3dCFd3DCB4g2AP16VkoGwUwEhvgAAEGAAzQHBRSxqPRAAAAAElFTkSuQmCC) !important;
}

/**********************************************/
/* Prompt
/**********************************************/

#-webkit-web-inspector #console-prompt {
	color: #f1f1f1 !important;
}

#-webkit-web-inspector #console-prompt::before {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjRGNTc2MTZDMTA2MTFFMDgwRUZGQ0JCMjgzMzU0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjRGNTc2MTdDMTA2MTFFMDgwRUZGQ0JCMjgzMzU0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzM3N0Y2MUMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzM3N0Y2MkMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Plf0eOsAAAB4SURBVHjaYvz//z8DMYAFxph+BqyhA8qtQFaUacKIUAgFLkBsDMSCUMXvYRJMaApdgfgsEKcB8W6oJqwK30MVr4YqOgPEodgUgoASkkkgjfewKSyHmqIEdYIJlEZR6ILk606oonsYwQMEe6A+PQtlowBGYgMcIMAAF2wcFPVNZx8AAAAASUVORK5CYII=) !important;
	color: #fff !important;
}

/**********************************************/
/* Elements/Network
/**********************************************/

/**********************************************/
/* Layout
/**********************************************/
#-webkit-web-inspector #storage-views .script-view,
#-webkit-web-inspector #network-views .script-view,
#-webkit-web-inspector #script-resource-views .script-view {
	color: #ccc !important;
}

#-webkit-web-inspector #storage-views .script-view,
#-webkit-web-inspector #elements-content,
#-webkit-web-inspector #network-views .text-editor-contents,
#-webkit-web-inspector #script-resource-views .script-view {
	background: #242424 !important;
	font-size: 12px !important;
}

#-webkit-web-inspector #elements-content .highlight {
	color: #f1f1f1;
}

#-webkit-web-inspector #elements-content li.hovered:not(.selected) .selection {
	background: rgba(255, 255, 255, .2) !important;
}

#-webkit-web-inspector #elements-content .selection.selected {
	z-index: 0 !important;
}

#-webkit-web-inspector #elements-content ol:focus li.selected .selection {
	background: #444 !important;
}

#-webkit-web-inspector #elements-content .selected .highlight {
	position: relative;
	z-index: 2;
}

#-webkit-web-inspector #elements-content .selected {
	background-color: #333 !important;
}

#-webkit-web-inspector #elements-content .editing {
	background-color: #333 !important;
	color: #CCC !important;
}

#-webkit-web-inspector #elements-content .parent::before {
	content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;
	position: relative;
	z-index: 999;
}

#-webkit-web-inspector #elements-content .parent.expanded::before {
	content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important;
}

/**********************************************/
/* HTML
/**********************************************/
#-webkit-web-inspector .webkit-html-comment {
	color: rgb(117, 113, 96) !important;
}

#-webkit-web-inspector .webkit-html-tag {
	color: #e31473 !important;
}

#-webkit-web-inspector .webkit-html-attribute-name {
	color: rgb(153, 226, 85) !important;
}

#-webkit-web-inspector .webkit-html-attribute-value {
	color: rgb(230, 218, 131) !important;
}

#-webkit-web-inspector .webkit-html-text-node,
#-webkit-web-inspector .webkit-html-css-node {
	color: white !important;
}

#-webkit-web-inspector .webkit-html-js-node {
	color: white !important;
}

#-webkit-web-inspector .webkit-html-resource-link,
#-webkit-web-inspector .webkit-html-external-link {
	color: rgb(230, 218, 131) !important;
}

/**********************************************/
/* CSS
/**********************************************/

#-webkit-web-inspector .webkit-css-comment {
	color: rgb(117, 113, 92) !important;
}

#-webkit-web-inspector .webkit-css-selector {
	color: rgb(165, 226, 85) !important;
}

#-webkit-web-inspector .webkit-css-property {
	color: #72d9e7 !important;
}

#-webkit-web-inspector .webkit-css-keyword {
	color: rgb(182, 228, 246) !important;
}

#-webkit-web-inspector .webkit-css-number {
	color: rgb(175, 130, 243) !important;
}

#-webkit-web-inspector .webkit-css-important,
#-webkit-web-inspector .webkit-css-at-rule {
	color: #e31473 !important;
}

#-webkit-web-inspector .webkit-css-string {
	color: rgb(253, 150, 63) !important;
}

#-webkit-web-inspector .webkit-css-url {
	color: rgb(253, 150, 63) !important;
}

#-webkit-web-inspector .event-bars .event-bar .header .title {
	text-shadow: none !important;
	color: #ccc !important;
}

/**********************************************/
/* JavaScript
/**********************************************/

#-webkit-web-inspector .webkit-line-content,
#-webkit-web-inspector .webkit-javascript-ident {
	color: #fff !important;
}

#-webkit-web-inspector .webkit-javascript-keyword {
	color: rgb(98, 218, 236) !important;
}

#-webkit-web-inspector .webkit-javascript-comment {
	color: rgb(117, 113, 96) !important;
}

#-webkit-web-inspector .webkit-javascript-string {
	color: rgb(230, 218, 131) !important;
}

#-webkit-web-inspector .webkit-javascript-number {
	color: rgb(169, 130, 247) !important;
}

#-webkit-web-inspector .webkit-javascript-regexp {
	color: rgb(230, 218, 131) !important;
}

/* Set the console tab as the first item */
#-webkit-web-inspector #toolbar .toolbar-item.console {
	float: left;
}