Skip to content

@paulredmond /Custom.css
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Espresso syntax theme for Google Chrome Inspector
/**********************************************/
/*
/* 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;
}
@bentruyman

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

@paulredmond
Owner

@bentruyman nice job, thanks for the tip!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.