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