Web components based app to view dart docs. Still has rough edges.

client/web/static/styles.css

 /* Reset */
 body, h1, h2, h3, h4, li, ol, p, pre, section, ul {
   margin: 0;
   padding: 0;
 }
 
 body {
   font-family: Georgia, serif;
   background: #e8e8e8;
   color: #333;
   background-image: url('body-bg.png');
   background-repeat: repeat;
   overflow: hidden;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
 }
 
 html {
   height: 100%;
   overflow: hidden;
 }
+
 h2 {
-  font: 400 28px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
+  font: 400 24px/38px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
       sans-serif;
 }
 
 h3 {
   font: 600 15px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
       sans-serif;
   color: #999;
 }
 
 h4 {
@@ skipping 18 matching lines @@
 
 h3 + p {
   /* Text immediately following a subheader should be snug with it. */
   margin-top: 0;
 }
 
 strong {
   font-weight: 700;
 }
 
 pre, code {

[Andrei Mouravski, 2012/12/19 17:04:44]

Please add:
padding: 0;

to fix: http://code.google.com/p/dart/issues/detail?id=4751

[Jacob, 2013/01/02 19:54:58]

Done.

   font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace;
   color: hsl(220, 20%, 30%);
   background: hsl(220, 20%, 95%);
   margin: 22px 0;
   padding: 0 4px;
   border-radius: 4px;
   overflow-x:auto;
   overflow-y:hidden;
 }
 
@@ skipping 155 matching lines @@
   position: absolute;
   top: 44px; /* TODO(jacobr): don't hard code this. */
   bottom: 0px;
   overflow-y: auto;
   overflow-x: auto;
   left: 308px; /* 14 x 22 */
   padding: 22px 22px;
   right: 0px;
 }
 
-}
-
 .nav h2 {
   font: 400 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
       sans-serif;
   margin: 0 -21px;
   padding: 11px 22px;
 }
 
 ul.icon {
   margin: 0 0 22px 0;
   padding: 0;
@@ skipping 18 matching lines @@
   width: 14px;
   height: 14px;
   margin: 5px 10px 0 2px;
   vertical-align: top;
 }
 
 .icon-class     { background: url('class.png');     }
 .icon-exception { background: url('exception.png'); }
 .icon-interface { background: url('interface.png'); }
 
-ul
-{
-list-style-type: none;
-padding: 0px;
-margin: 0px;
+.tree-list {
+  list-style-type: none;
+  padding: 0px;
+  margin: 0px;
 }
 
-li {
+.tree-list li {
   line-height: 26px;
   font: 600 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
       sans-serif;
   padding-left: 24px;
-  background-repeat: no-repeat;
   background-position: 0px 5px;
 }
 
-ul.libraries li
-{
-background-image: url(package_obj.gif);
+.kind {
+  background-repeat: no-repeat;
+  background-position-y: center;
+  padding-left: 24px;
+  background-size: 16px 16px;
 }
 
-li.kind-class, h2.kind-class::before, h3.kind-class::before
-{
-background-image: url(class_public.png);
+.kind-library {
+  background-image: url(package_obj.gif);
 }
 
-li.kind-typedef, h2.kind-typedef::before, h3.kind-typedef::before
-{
-background-image: url(functiontype_public.png);
+.kind-class {
+  background-image: url(class_public.png);
 }
 
-li.kind-typedef.private, h2.kind-typedef.private::before, h3.kind-typedef.private::before
-{
-background-image: url(functiontype_private.png);
+.kind-typedef {
+  background-image: url(functiontype_public.png);
 }
 
-li.kind-class.private, h2.kind-class.private::before, h3.kind-class.private::before
-{
-background-image: url(class_private.png);
+.kind-typedef.private {
+  background-image: url(functiontype_private.png);
 }
 
-
-li.kind-exception, h2.kind-exception::before, h3.kind-exception::before
-{
-background-image: url(exception.png);
+.kind-class.private {
+  background-image: url(class_private.png);
 }
 
-li.kind-method, h2.kind-method::before, h3.kind-method::before,
-li.kind-operator, h2.kind-operator::before, h3.kind-operator::before
-{
-background-image: url(method_public.png);
+.kind-exception {
+  background-image: url(exception.png);
 }
 
-li.kind-method.private, h2.kind-method.private::before, h3.kind-method.private::before
-{
+.kind-method, .kind-operator {
+  background-image: url(method_public.png);
+}
+
+.kind.getter, .kind.setter, .kind-constructor, .kind.static {
+  background-size: 16px 16px, 24px 16px;
+}
+
+.kind-method.static, .kind-operator.static {
+  background-image: url(method_public.png), url(static.png);
+}
+
+.kind-method.private {
 background-image: url(method_private.png);
 }
 
-li.kind-variable, h2.kind-variable::before, h3.kind-variable::before
-{
+.kind-variable {
   background-image: url(field_public.png);
 }
 
-li.kind-variable.private, h2.kind-variable.private::before, h3.kind-variable.private::before
-{
+.kind-variable.static {
+  background-image: url(field_public.png), url(static.png);
+}
+
+.kind-variable.private {
   background-image: url(field_private.png);
 }
 
-li.kind-property, h2.kind-property::before, h3.kind-property::before
-{
-  background-image: url(method_public.png);
+.kind-property.getter {
+  background-image: url(method_public.png), url(getter.png);
 }
 
-li.kind-property.private, h2.kind-property.private::before, h3.kind-property.private::before
-{
+.kind-property.setter {
+  background-image: url(method_public.png), url(setter.png);
+}
+
+.kind-property.private {
   background-image: url(method_private.png);
 }
 
-li.kind-constructor, h2.kind-constructor::before, h3.kind-constructor::before
-{
-  background-image: url(method_public.png);
+.kind-constructor {
+  background-image: url(method_public.png), url(constructor.png);
 }
 
-li.kind-constructor.private, h2.kind-constructor.private::before, h3.kind-constructor.private::before
-{
-  background-image: url(method_private.png);
+.kind-constructor.private {
+  background-image: url(method_private.png), url(constructor.png);
+}
+
+.kind-exception {
+  background-image: url(exception.png);
+}
+
+.child-subtree {
+  background-image: url(inherit.png);
+  background-position-y: top;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  padding-left: 16px;
 }
 
 /** List items displaying a single member */
 li.kind {
-  position: relative;
   white-space: nowrap;
   width: 100%;
   overflow: hidden;
-  text-overflow: ellipsis;}
-
-h2.kind::before, h3.kind::before
-{
-width: 16px;
-height: 24px;
-content: '';
-margin-right: 4px;
-top: -2px;
-display: inline-block;
-position: relative;
-background-repeat: no-repeat;
-background-position: bottom;
-}
-
-h3.kind::before {
-  height: 16px;
-  top: 4px;
-}
-
-h2.kind-constructor::before, h3.kind-constructor::before {
-  content: "c";
-  font-size: 8px;
-  width: 4px;
-  color: #4B7E32;
-  padding-left: 16px;
-  vertical-align: top;
-  position: relative;
-  top: -8px;
-  height: 28px;
-}
-
-li.kind-constructor::before, li.kind.static::before {
-  font-size: 8px;
-  padding-left: 13px;
-  vertical-align: top;
-  position: absolute;
-  top: -8px;
-  left: 0px;
-}
-
-li.kind-constructor::before {
-  content: "c";
-  color: #4B7E32;
-}
-
-li.kind.static::before {
-  content: "S";
-  color: #800;
+  text-overflow: ellipsis;
 }
 
 /** TODO(jacobr) use this arrow maybe for hierarchy... ↳ */
 
-
-li.kind.setter::before {
-  content: "↑";
-}
-
-li.kind.getter::before {
-  content: "↓";
-}
-
-li.kind.getter::before, li.kind.setter::before  {
-  font: 600 9px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
-      sans-serif;
-  padding-left: 13px;
-  color: #000;
-  vertical-align: bottom;
-  position: absolute;
-  padding-top: 11px;
-  left: 0px;
-}
 .subclasses, .references {
   font: 500 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
   padding-bottom: 12px;
 }
 
 .class-summary {
   font: 500 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
   float: right;
   min-width: 150px;
   max-width: 400px;
   border: 1px solid #DDD;
   background-color: #F8F8F8;
   padding: 6px 6px 6px 21px;
   margin-left: 15px;
 }
 
 .class-summary li {
   padding-left: 0px;
 }
 .class-summary h4 {
   margin-left: -15px;
 }
-li.kind-exception
-{
-background-image: url(exception.png);
-}
 
 .type-box {
   display: inline-block;
   font: 600 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
       sans-serif;
   background: #f4f4f4;
   padding: 0 6px 0 3px;
   border-radius: 4px;
 }
 
@@ skipping 166 matching lines @@
 .element-class {
   min-width: 80px;
   margin-left: 15px;
   display: inline-block;
   text-align: right;
 }
 
 .element-details {
   height: 50px;
   overflow: hidden;
+  background-position: 12px 5px;
+  padding-left: 36px;
   position: relative;
 }
 
 *:focus
 {
   outline: none;
 }
 
 .element-details summary::-webkit-details-marker {
   position: absolute;
   color: #DDD;
   top: 10px;
   left: 0px;
 }
 
-.element-details {
-  padding-left: 20px;
-}
 .element-details .element-documentation {
   opacity: .8;
 }
 
 .element-details[open] .element-documentation {
   opacity: 1;
 }
 .element-details[open] {
   background-color: #F0F0F0;
 }
@@ skipping 16 matching lines @@
 
 .element-details[open] {
   height: auto;
   overflow: auto;
 }
 
 .member-details .documentation, .member-details .extended-element-info  {
   margin-left: 99px;
 }
 
-.type-details .extended-element-info  {
-  margin-left: 20px;
-}
-
 .element-definition {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 .element-class, .element-definition {
   line-height: 26px;
   font: 500 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
       sans-serif;
 }
 
 .element-name {
   font-weight: 700;
 }
 
 .extended-element-info {
-    position: relative;
     font: 400 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande',
         sans-serif;
 }
 
 .extended-element-info summary::-webkit-details-marker {
   color: #DDD;
   top: 0px;
   left: -20px;
 }
 
@@ skipping 31 matching lines @@
 }
 
 p {
   border-left: solid 4px purple;
 }
 
 section {
   border-left: solid 4px gray;
 }
 */