Skip to content

Instantly share code, notes, and snippets.

@davidl
davidl / source-colors.less
Last active Dec 16, 2015
Use your devtools-theme colors for source views
View source-colors.less
// XML source viewer:
#webkit-xml-viewer-source-xml + .header,
#webkit-xml-viewer-source-xml + div + #tree {
background-color: @background !important;
color: @foreground !important;
}
#webkit-xml-viewer-source-xml + .header {
border-bottom: 1px solid @html-comment !important;
color: @html-comment !important;
@davidl
davidl / codemirror.less
Created Apr 5, 2013
Initial styles for CodeMirror in the Chrome DevTools
View codemirror.less
#-webkit-web-inspector .CodeMirror {
background-color: @background !important;
color: @foreground !important;
.CodeMirror-selected { background-color: @selection !important; }
.CodeMirror-gutters {
background-color: @current-line !important;
border-right: 1px solid @foreground !important;
}
@davidl
davidl / status-cats.less
Last active Dec 15, 2015
Generate CSS to add HTTP status cats to your Chrome Dev Tools Network panel
View status-cats.less
// Rules in this file will be imported (by LESS) into the Custom.less file
// see: http://lesscss.org/#-importing
// Mixin to generate URLs, e.g.: .catStatus('7162/6512768893_a821929823_m')
@catPath: 'http://farm8.staticflickr.com/';
.catStatus(@statusImg: '') {
background-image: e(%('url(%s%s.jpg)', @catPath, @statusImg)) !important;
}
#-webkit-web-inspector {
@davidl
davidl / status-rappers.less
Last active Dec 15, 2015
Generate CSS to add HTTP status rappers to your Chrome Dev Tools Network panel
View status-rappers.less
// Mixin to generate URLs, e.g.: .rapStatus('200')
@rapPath: 'http://www.httpstatusrappers.com/images/';
.rapStatus(@statusImg: '') {
background-image: e(%('url(%s%s.png)', @rapPath, @statusImg)) !important;
}
#-webkit-web-inspector {
.status-column {
overflow: visible !important;
@davidl
davidl / status-cats.css
Last active Dec 15, 2015
Add some HTTP status cats to your Chrome Dev Tools Network panel by adding these lines to your Custom.css file. Check out https://github.com/bentruyman/devtools-themes for more.
View status-cats.css
#-webkit-web-inspector .status-column {
overflow: visible !important;
}
#-webkit-web-inspector .status-column [title] {
overflow: visible !important;
position: relative !important;
}
#-webkit-web-inspector .status-column [title]::before {
border-color: transparent transparent #000 transparent !important;
border-style: solid !important;
@davidl
davidl / status-rappers.css
Last active Dec 15, 2015
Chrome DevTools Status Rappers - illustrate your Network panel
View status-rappers.css
#-webkit-web-inspector .status-column {
overflow: visible !important;
}
#-webkit-web-inspector .status-column [title] {
overflow: visible !important;
position: relative !important;
}
#-webkit-web-inspector .status-column [title]::before {
border-color: transparent transparent #000 transparent !important;
border-style: solid !important;
@davidl
davidl / dabblet.css
Created Nov 30, 2012
Demo for Prism.js pull request 61 re: empty CDATA sections
View dabblet.css
/* Demo for Prism.js pull request 61 re: empty CDATA sections */
@davidl
davidl / plist-colors.xslt
Created Aug 15, 2012
XSLT to transform a PLIST file to HTML with illustrated color information
View plist-colors.xslt
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes" indent="yes"/>
<!--
This file is intended to transform a ".plist" file into a HTML
document that highlights color information by illustrating it
and making the color values (hexadecimal and RGB/RGBa) easier to
select and copy.
@davidl
davidl / Custom.css
Last active Sep 30, 2015 — forked from Cottser/Custom.css
My Custom.css for Chrome Dev Tools. Built using https://github.com/bentruyman/devtools-themes (IR_Black) with personalizations.
View Custom.css
@-webkit-keyframes webkit-inspector-error{0%{color:#ff6c60} 50%{color:#f91300} 100%{color:#ff6c60}}@-webkit-keyframes webkit-inspector-fadeout{from{background-color:#c5c8c6} to{background-color:#1d1f21}}#-webkit-web-inspector{background-color:#1d1f21}#-webkit-web-inspector .monospace,#-webkit-web-inspector .source-code{font-family:'DroidSansMono',Menlo,monospace !important}
#-webkit-web-inspector ::selection{background:rgba(197,200,198,0.25) !important;opacity:1}
#-webkit-web-inspector #toolbar{background-image:-webkit-linear-gradient(#444, #333) !important;border-bottom:1px solid #444 !important;border-top:1px solid #000 !important}
#-webkit-web-inspector #toolbar .toolbar-label{color:#c5c8c6 !important}
#-webkit-web-inspector #toolbar .toggled-on .toolbar-label{color:#f9faf9 !important}
#-webkit-web-inspector #toolbar .toolbar-item.toggleable.toggled-on{background-image:-webkit-linear-gradient(#333, #444) !important}
#-webkit-web-inspector #search-results-matches{color:#f9faf9 !important;text-shadow:none !i
You can’t perform that action at this time.