Improve support for user stylesheets

Currently WebKit based browsers only support *global* user stylesheets. That means the rules you put in the stylesheet will be used for *all* websites you visit, and even more, for the browser's chrome itself. Until an equivalent @-moz-document rule is implemented, the only solution seems to be CSS class namespacing. By providing a `node-inspector` class on the `html` element, users can now tweak the UI of node-inspector without messing up the browser's chrome. For example, in order to increase the font size of code blocks, you'd put this in your user stylesheet: html.node-inspector body.platform-mac .monospace, html.node-inspector body.platform-mac .source-code { font-size: 13px !important; } See also: - http://code.google.com/p/chromium/issues/detail?id=2393 - https://bugs.webkit.org/show_bug.cgi?id=51172
node-inspector · Apr 23, 2011 · 791815a · 791815a
1 parent d0deaac
commit 791815a
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/front-end/index.html b/front-end/index.html
@@ -26,7 +26,7 @@
 THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 -->
 <!DOCTYPE html>
-<html>
+<html class="node-inspector">
 <head>
     <title>nodeJS Inspector</title>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">

diff --git a/front-end/inspector.html b/front-end/inspector.html
@@ -26,7 +26,7 @@
 THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 -->
 <!DOCTYPE html>
-<html>
+<html class="node-inspector">
 <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <link rel="stylesheet" type="text/css" href="audits.css">