Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
User stylesheet to customize the WebKit Inspector (cleaning up and improving the styles panel). See http://bricss.net/post/9076968710/customize-the-webkit-inspector-chrome-dev-tools
.monospace {
font: 11px/1.3 Monaco !important;
}
/* slightly larger indentation of source code */
.outline-disclosure ol {
-webkit-padding-start: 18px !important;
}
/* margin underneath styles panel heading */
.pane.expanded:nth-child(2) > .title {
margin: 0 0 5px;
}
/* lighter and less cramped seperators in styles panel */
.styles-sidebar-separator {
background: -webkit-linear-gradient(#fff, #eee) !important;
border-top: 1px solid #e9e9e9 !important;
border-bottom: 1px solid #ccc !important;
padding: 3px 5px !important;
margin: 5px 0;
}
/* the element from which is inherited */
.styles-sidebar-separator .node-link {
text-decoration: none !important;
}
/* no more border between selectors */
.styles-section:not(.first-styles-section) {
border-top: 0 !important;
margin: 0 0 5px;
}
/* reference links to stylesheets */
.styles-section .header .subtitle a {
color: #00e !important;
text-decoration: none;
}
.styles-section .header .subtitle a:hover {
text-decoration: underline;
}
/* slightly larger indentation for properties */
.styles-section .properties {
padding-left: 20px !important;
}
/* put checkboxes on the left of properties */
.styles-section .properties .enabled-button {
position: absolute !important;
left: 7px;
margin: 2px 0 0 0 !important;
}
/* indent the closing curly brace */
.styles-section > div:last-of-type {
margin: 0 0 0 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment