Created
August 10, 2012 15:38
-
-
Save ideakitchn/3315105 to your computer and use it in GitHub Desktop.
Custom CSS for Chrome Developer tools with highlighted selected element
This file contains hidden or 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
/**********************************************/ | |
/* | |
/* Darker Skin by Darcy Clarke - 2011 | |
/* | |
/* For how to install, or more themes, check out: | |
/* http://darcyclarke.me/design/skin-your-chrome-inspector/ | |
/* | |
/* Color scheme is based on Joe Bergantine's Specials Board: | |
/* http://joebergantine.com/werkstatt/seestyle | |
/* | |
/* Sean Gerety | |
/* Added a selector to highlight the item that is being | |
/* inspected and it's child elements. | |
/**********************************************/ | |
/**********************************************/ | |
/* Layout | |
/**********************************************/ | |
#elements-content.source-code { | |
background: #242537 !important; | |
font-size: 12px !important; | |
} | |
#elements-content .highlight { | |
color: #d4d4d4; | |
} | |
#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 .selected { | |
background-color: #4c4d5d !important; | |
} | |
#elements-content .selected + ol { | |
background-color: #4c4d5d; | |
} | |
#elements-content .parent.selected { | |
} | |
#elements-content .parent.selected { | |
padding-top: 2px !important; | |
padding-bottom: 2px !important; | |
} | |
#elements-content .parent.expanded { | |
} | |
#elements-content .parent::before { | |
content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important; | |
position: relative; | |
z-index: 999; | |
} | |
#elements-content .parent.expanded::before { | |
content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important; | |
} | |
#elements-sidebar .styles-section .properties li.parent::before, | |
#elements-sidebar .section > .header::before, | |
#elements-sidebar .properties-tree li.parent::before, | |
#elements-sidebar .event-bars .event-bar .header::before { | |
content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important; | |
} | |
#elements-sidebar .styles-section .properties li.parent.expanded::before, | |
#elements-sidebar .section.expanded > .header::before, | |
#elements-sidebar .properties-tree li.parent.expanded::before, | |
#elements-sidebar .event-bars .event-bar.expanded .header::before { | |
content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important; | |
} | |
/**********************************************/ | |
/* HTML | |
/**********************************************/ | |
#elements-content .webkit-html-comment { | |
color: #8c8c8c !important; | |
} | |
#elements-content .webkit-html-doctype { | |
} | |
#elements-content .webkit-html-tag { | |
color: #ffc97c !important; | |
} | |
#elements-content .webkit-html-tag-name { | |
} | |
#elements-content .webkit-html-attribute { | |
} | |
#elements-content .webkit-html-attribute-name { | |
color: #d97640 !important; | |
} | |
#elements-content .webkit-html-attribute-value { | |
color: #abca7e !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: #c2c3c3 !important; | |
} | |
#elements-content .webkit-html-css-node { | |
color: #c2c3c3 !important; | |
} | |
#elements-content .webkit-html-js-node { | |
color: #c2c3c3 !important; | |
} | |
/**********************************************/ | |
/* CSS | |
/**********************************************/ | |
#elements-content .webkit-css-comment { | |
} | |
#elements-content .webkit-css-url { | |
} | |
#elements-content .webkit-css-color { | |
} | |
#elements-content .webkit-css-selector { | |
} | |
#elements-content .webkit-css-property { | |
} | |
#elements-content .webkit-css-number { | |
} | |
#elements-content .webkit-css-keyword { | |
} | |
#elements-content .webkit-css-string { | |
} | |
#elements-content .webkit-css-important { | |
} | |
/**********************************************/ | |
/* 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 { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment