public
Last active

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

  • Download Gist
Custom.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
.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;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.