Created
August 17, 2011 17:11
-
-
Save paulredmond/1152045 to your computer and use it in GitHub Desktop.
Espresso syntax theme for Google Chrome Inspector
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/**********************************************/ | |
/* | |
/* Espresso-inspired theme for Google Chrome Inspector | |
/* | |
/* By: Paul Redmond http://github.com/paulredmond | |
/* | |
/* Inspired by Darcy Clarke's post - http://darcyclarke.me/design/skin-your-chrome-inspector/ | |
/* Darcy Clarke's "Darker Skin" theme - http://darcyclarke.me/dev/inspectorskin/Custom.css | |
/* | |
/**********************************************/ | |
/**********************************************/ | |
/* Layout | |
/**********************************************/ | |
#elements-content.source-code { | |
background: #fff !important; | |
font-size: 12px !important; | |
} | |
#elements-content .highlight { | |
color: blue; | |
} | |
#elements-content .selection { | |
} | |
#elements-content .selection.selected { | |
} | |
#elements-content .parent { | |
} | |
/*.outline-disclosure ol:focus li.parent.expanded.selected::before*/ | |
#elements-content .outline-disclosure li.parent::before, | |
#elements-content .outline-disclosure ol:focus li.parent.expanded.selected::before { | |
background: none !important; | |
content: '' !important; | |
} | |
#elements-content .parent.selected { | |
} | |
#elements-content .parent.selected { | |
padding-top: 2px !important; | |
padding-bottom: 2px !important; | |
} | |
#elements-content .parent.expanded { | |
} | |
/**********************************************/ | |
/* HTML | |
/**********************************************/ | |
#elements-content .webkit-html-comment { | |
color: #b2b2b2 !important; | |
} | |
#elements-content .webkit-html-doctype { | |
} | |
#elements-content .webkit-html-tag { | |
/* color: #ffc97c !important;*/ | |
color: #4F9FCF !important; | |
} | |
#elements-content .webkit-html-tag-name { | |
color: #2F6F9F !important; | |
background-color: rgb(244, 250, 255); | |
} | |
#elements-content .webkit-html-attribute { | |
} | |
#elements-content .webkit-html-attribute-name { | |
color: #4F9FCF !important; | |
} | |
#elements-content .webkit-html-attribute-value { | |
color: #d44950 !important; | |
} | |
#elements-content .webkit-html-external-link { | |
} | |
#elements-content .webkit-html-resource-link { | |
} | |
#elements-content .webkit-html-text-tag { | |
} | |
#elements-content .webkit-html-text-node { | |
color: #333 !important; | |
} | |
#elements-content .webkit-html-css-node { | |
color: #333 !important; | |
} | |
#elements-content .webkit-html-js-node { | |
color: #333 !important; | |
} | |
/**********************************************/ | |
/* CSS | |
/**********************************************/ | |
#elements-content .webkit-css-comment { | |
color: #b2b2b2 !important; | |
} | |
#elements-content .webkit-css-url { | |
} | |
#elements-content .webkit-css-color { | |
} | |
#elements-content .webkit-css-selector { | |
color: #2F6F9F !important; | |
} | |
#elements-content .webkit-css-property { | |
color: #db6336 !important; | |
} | |
#elements-content .webkit-css-number { | |
color: #8161c6 !important; | |
} | |
#elements-content .webkit-css-keyword { | |
color: #3a1d72 !important; | |
} | |
#elements-content .webkit-css-string { | |
color: #c37a2f !important; | |
} | |
#elements-content .webkit-css-important { | |
color: #6700b9 !important; | |
font-weight: bold; | |
} | |
/**********************************************/ | |
/* JavaScript | |
/**********************************************/ | |
#elements-content .webkit-javascript-comment { | |
} | |
#elements-content .webkit-javascript-keyword { | |
color: #d97640 !important; | |
} | |
#elements-content .webkit-javascript-ident { | |
color: #d97640 !important; | |
} | |
#elements-content .webkit-javascript-string { | |
} | |
#elements-content .webkit-javascript-number { | |
} | |
#elements-content .webkit-javascript-regexp { | |
} | |
/**********************************************/ | |
/* Black arrows all the time | |
/**********************************************/ | |
.audit-result-tree li.parent::before, | |
.console-group-messages .section .header::before, | |
.outline-disclosure li.parent::before, | |
.outline-disclosure ol:focus li.parent.selected::before, | |
.section .header::before, | |
.properties-tree li.parent::before, | |
.event-bars .event-bar .header::before, | |
.data-grid tr.parent td.disclosure::before, | |
.data-grid:focus tr.parent.selected td.disclosure::before, | |
.styles-section .properties li.parent::before | |
{ | |
font-family: 'Arial' !important; | |
color: #aaa !important; | |
content: url(chrome-devtools://devtools/Images/treeRightTriangleBlack.png) !important; | |
padding-right: 5px !important; | |
font-size: 9px !important; | |
} | |
.audit-result-tree li.parent.expanded::before, | |
.console-group-messages .section.expanded .header::before, | |
.outline-disclosure li.parent.expanded::before, | |
.outline-disclosure ol:focus li.parent.expanded.selected::before, | |
.section.expanded .header::before, | |
.properties-tree li.parent.expanded::before, | |
.event-bars .event-bar.expanded .header::before, | |
.data-grid th.sort-descending > div::after, | |
.data-grid tr.expanded td.disclosure::before, | |
.data-grid:focus tr.expanded.selected td.disclosure::before, | |
.styles-section .properties li.parent.expanded::before { | |
font-family: 'Arial' !important; | |
color: #aaa !important; | |
content: url(chrome-devtools://devtools/Images/treeDownTriangleBlack.png) !important; | |
padding-right: 5px !important; | |
font-size: 9px !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I don't know if it would help at all to use mine as a base, but it works (I think) in all of the tabs -- not just the elements tab. :)
https://gist.github.com/1150520