rework css to better match gitiles

tools/md_browser/base.css

+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* Common styles and definitions. */
+
+@import "//fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,cyrillic-ext,greek-ext,cyrillic,greek,vietnamese,latin-ext";
+@import "//fonts.googleapis.com/css?family=Source+Code+Pro";
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+h1, h2, h3, h4, h5, h6 {
+  font-weight: normal;
+  margin: .25em 0 .5em;
+}
+h1 {
+  font-size: 2em;
+}
+h2 {
+  font-size: 1.5em;
+}
+h3 {
+  font-size: 1.3em;
+}
+h4, h5, h6 {
+  font-size: 14px;
+  font-style: italic;
+}
+ul, ol {
+  list-style: none;
+}
+
+/* Utility classes */
+
+.u-sha1 {
+  background-color: #f1f2f3;
+  color: #000;
+  font-size: 13px;
+}
+.u-pre {
+  font-size: 10pt;
+  font-weight: 500;
+  white-space: pre;
+}
+.u-lineNum {
+  border-right: 1px solid #f1f2f3;
+  color: #666;
+  display: inline-block;
+  min-width: 3em;
+  text-align: right;
+}
+.u-noSelect {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.u-monospace {
+  font-family: 'Source Code Pro', monospace;
+}
+
+/* Common.soy */
+
+.Site {
+  background: #fff;
+  color: #000;
+  display: -ms-flexbox;
+  display: flex;
+  font: 14px/1.54 'Open Sans', sans-serif;
+  min-height: 100vh;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.Site-header,
+.Site-footer {
+  background: #eee;
+  -ms-flex: none;
+  flex: none;
+}
+.Site-header--withNavbar {
+  background: #fff;
+}
+.Site-content {
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  padding: 20px;
+}
+.Container {
+  margin: 0 auto;
+  max-width: 980px;
+}
+.Container--fullWidth {
+  max-width: none;
+}
+.Header,
+.Footer {
+  -ms-flex-align: center;
+  align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 20px;
+}
+.Site-header--withNavbar .Header {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 10px 0;
+}
+.Header-title,
+.Header-image {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1;
+  flex: 1;
+}
+.Header-anchor {
+  color: #666;
+  font-size: 32px;
+  font-weight: 300;
+  text-decoration: none;
+}
+.Header-anchorLogo {
+  display: inline-block;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+.Header-nav {
+  background: #eee;
+  padding: 15px 0;
+}
+.Header-menu {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+.Header-menuItem {
+  color: #00e;
+  display: inline-block;
+  margin-left: 15px;
+}
+.Header-menuItem--noAction {
+  color: inherit;
+}
+.Breadcrumbs {
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+.Breadcrumbs-crumb {
+  color: #00e;
+}
+.Breadcrumbs-crumb:last-child {
+  color: #000;
+  font-weight: bold;
+}
+.Footer {
+  color: #666;
+}
+.Footer-poweredBy {
+  -ms-flex: 1;
+  flex: 1;
+}
+.Footer-formats,
+.Footer-links {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+.Footer-formatsItem {
+  display: inline-block;
+}
+.Footer-formatsItem:first-child {
+  margin-right: 20px;
+}
+.Footer-link {
+  display: inline-block;
+  margin-left: 10px;
+}
+.RepoList-item {
+  display: -ms-flexbox;
+  display: flex;
+  left: -10px;
+  padding: 5px 0 5px 10px;
+  position: relative;
+  white-space: nowrap;
+  width: calc(100% + 20px);
+}
+.RepoList-item:link,
+.RepoList-item:visited {
+  text-decoration: none;
+}
+.RepoList-item:hover {
+  background: #eee;
+}
+.RepoList-item--header {
+  font-weight: bold;
+  margin: 0;
+}
+.RepoList-item--header:hover {
+  background: #fff;
+}
+.RepoList-itemName,
+.RepoList-itemDescription {
+  display: inline-block;
+}
+.RepoList-itemName {
+  margin-right: 10px;
+  min-width: 25%;
+  text-decoration: underline;
+}
+.RepoList-item--header > .RepoList-itemName {
+  text-decoration: none;
+}
+.RepoList-itemDescription {
+  color: #000;
+  -ms-flex: 1;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* RepositoryIndex.soy */
+
+.RepoDescription {
+  margin: 10px 0;
+}
+.RepoMirroredFrom {
+  margin: 10px 0;
+  color: #666;
+}
+.CloneRepo {
+  background: #eee;
+  margin-bottom: 20px;
+  padding: 10px;
+}
+.CloneRepo-title {
+  margin-bottom: 2px;
+}
+.CloneRepo-command {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  display: block;
+  font-size: inherit;
+  padding: 10px;
+  width: 100%;
+}
+.RepoShortlog {
+  display: -ms-flexbox;
+  display: flex;
+}
+.RepoShortlog-refs {
+  -ms-flex: none !important;
+  flex: none !important;
+  width: 20%;
+}
+.RepoShortlog-refs > .RefList:first-child {
+  margin: 0;
+}
+.RepoShortlog-log {
+  -ms-flex: 1;
+  flex: 1;
+  width: 80%;
+}
+.RepoIndexDoc {
+  border-top: 1px solid #ddd;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+/* RefList.soy */
+
+.Refs {}
+.RefList {
+  margin: 15px 0;
+}
+.RefList-title {
+  margin: 0;
+}
+.RefList-items {}
+.RefList-item {
+  padding: 2px 0;
+}
+
+/* LogDetail.soy */
+
+.LogNav {
+  margin: 10px 0;
+  text-align: center;
+}
+.CommitLog {}
+.CommitLog-item {
+  padding: 2px 0;
+}
+.CommitLog-item--oneline:hover {
+  background: #eee;
+}
+.CommitLog-item--full {
+  margin-bottom: 20px;
+}
+.CommitLog-item--empty {
+  padding: 10px 0;
+  text-align: center;
+}
+.CommitLog-sha1 {
+  border-radius: 3px;
+  display: inline-block;
+  margin-right: 3px;
+  padding: 2px 4px;
+  text-align: center;
+}
+.CommitLog-time {
+  color: #666;
+}
+.CommitLog-branchLabel {
+  color: #dd4b39;
+}
+.CommitLog-tagLabel {
+  color: #093;
+}
+.CommitLog-rename {
+  font-size: 0.9em;
+  display: block;
+  padding-left: 5px;
+}
+
+/* ObjectDetail.soy */
+
+.Metadata {
+  margin-bottom: 15px;
+}
+.Metadata-title {
+  font-weight: bold;
+  padding-right: 10px;
+  text-align: right;
+}
+.MetadataMessage {
+  background-color: #fafafa;
+  border: 1px solid #ccc;
+  color: #000;
+  margin: 0;
+  padding: 12px;
+  white-space: pre-wrap;
+}
+.DiffTree {
+  margin: 10px 0 5px;
+}
+.DiffTree-action {
+  margin-left: .5em;
+}
+.DiffTree-action--add {
+  color: #060;
+}
+.DiffTree-action--delete {
+  color: #600;
+}
+.DiffTree-action--rename,
+.DiffTree-action--copy {
+  color: #006;
+}
+.DiffSummary {}
+.TreeDetail-sha1,
+.BlobSha1 {
+  margin: 10px 0;
+  padding: 5px 10px;
+}
+.FileList {
+  margin-left: 25px;
+}
+.FileList-item {
+  padding: 1px 0;
+  position: relative;
+}
+.FileList-item:hover {
+  background: #eee;
+}
+.FileList-item::before {
+  left: -22px;
+  position: absolute;
+  top: 4px;
+}
+.FileList-itemLink {
+  display: block;
+}
+/* Tree icons are taken from the public domain Tango icons:
+ * http://tango.freedesktop.org/Tango_Icon_Library
+ * Compressed with pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt */
+.FileList-item--gitTree::before {
+  /* places/folder.png */
+  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAb5JREFUOMulkr1KA0EQgGdvTwwnYmER0gQsrFKmSy+pLESw9Qm0F/ICNnba+h6iEOuAEWslKJKTOyJJvIT72d1xZuOFC0giOLA77O7Mt/PnNptN+I+49Xr9GhH3f3mb0v1ht9vtLAUYYw5ItkgDL3KyD8PhcLvdbl/WarXT3DjLMnAcR/f7/YfxeKwtgC5RKQVhGILWeg4hQ6hUKjWyucmhLFEUuWR3QYBWAZABQ9i5CCmXy16pVALP80BKaaG+70MQBLvzFMjRKKXh8j6FSYKF7ITdEWLa4/ktokN74wiqjSMpnVcbQZqmEJHz+ckeCPFjWKwULpyspAqhdXVXdcnZcPjsIgn+2BsVA8jVYuWlgJ3yBj0icgq2uoK+lg4t+ZvLomSKamSQ4AI5BcMADtMhyNoSgNIISUaFNtwlazcDcBc4gjjVwCWid2usCWroYEhnaqbzFJLUzAHIXRDChXCcQP8zhkSZ5eNLgHAUzwDcRu4CoIRn/wsGUQIIy4Vr9TH6SYFCNzw4nALn5627K4vIttOUOwfa5YnrDYzt/9OLv9I5l8kk5hZ3XLO20b7tbR7zHLy/BX8G0IeBEM7ZN1NGIaFUaKLgAAAAAElFTkSuQmCC);
+}
+.FileList-item--symlink::before {
+  /* actions/edit-redo.png */
+  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAABZUlEQVQ4y2NgIAL4zWL7D8TGDOQCqAEg7Ey2Aes+58AMcSSkmB2I3YB4HhCfh9kOMoCgIUAJMyDe2D+b58jKe553133M+r/uU/b/zV+L/y97n/i/+JIYbkOAAl5AfGLNTde/69+n/1/4MuD/gtsqKBhkALIh5S0M1jDN2kC8a+UNt/8b36f+X3JP5f/0u1pwjeuvS8E1g3DpZQm4ITAD5s09ZPBq49uE/0vvq4E1gPCJC5z/yy+IoGgG4a5HJqjeCJ3Pc2vjy+T/ux4Y/j99Rfz/7GtK/xfeUkbBN+8pY9cMAkFzuT5uepPy/+w1lf+TF3L/Q4p3OD5zRQ67Zlg873vk9n/mMlaQ5EcgLgZiA2R5nJphCjbfNP8LVeCBJyUa40xpO+5afQXS/8jKC0DJg+uPKx+bOJf1HDYXEJPW46JW8LcduKYzbdZMph4gn4ccQxSAOAuIo4FYdvsKFpYdK1iYCekDACq5JXDHGJhDAAAAAElFTkSuQmCC);
+}
+.FileList-item--regularFile::before {
+  /* mimetypes/text-x-generic.png */
+  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAtElEQVQ4ja2TSw7CIBRFu0r3wyIYsAMHDl1CC92IDqC0wAbQi4Fo5VOMJGcAyT33vQEDY+xCCPGdnIZ48NB7kPkSLMvipZQBpVQC70Br7Y0xZQGC4zj6aZoCnPMPhBBtwb41NoN1XesCBHPNhyfI7fziFu6HJti3IgS0vrcFuZ3Btm2JpmC/M5jnOdEU5JoRstYmigKES80x7JyrC+IE7+1xAoSrgp//AqX02vsbn5nz8K/zAP9CzjbgFoHjAAAAAElFTkSuQmCC);
+}
+.FileList-item--executableFile::before {
+  /* mimetypes/text-x-script.png */
+  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA7ADsAOwdIxY2AAAACXBIWXMAAAsTAAALEwEAmpwYAAABOklEQVQ4T5WTTYqDQBBGPdKcZnIJdy7EVRByBQPi0iwHAlGT0YBHcG82kkV2VnffoKar7FYzIQYLPtqffq+rEJ04jn/CMMSV+XZs0YO1RcyLoO/7MdAD9gAI8wiK+CyYA0IDFABhrmFBAHNYbwYTIxFyWN8KwAiEmIEaknqVUposCoBBGE8cIGUipUKp5IJAzOe2JxI0pG1b3Gw2+Hg8FjoQzy0rLVAavt0GuGkaXrfb7avAzs0CNcHtDD4ejwzTve/7X/9GGFqn2QmkDmzbBJ9OJ8yyDNM0Rdd1J8mzgDqQPDNJLFwUBZ7PZ7xcLizwPI9gfj+NYAX2k+kx7vc7byrLEquqwuv1ivv9HpMk4ec6Uwfvqus63lzXNeZ5zoIRpoqiKP/09wVBwNDhcOB1t9v9OmuLTnw62dQfVIHPYx/I/0kAAAAASUVORK5CYII=);
+}
+.FileList-item--gitlink::before {
+  /* emblems/emblem-symbolic-link.png */
+  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAABO0lEQVQ4T7WT3U6EMBCF92m99yGMZuODGL01eueyXqjvwc+WUlooUPkfZxq3sQEvJLHJSQvlfDOnDbub/dUFCrZof3t9uaPF1kFeBwjD8E+apukfAVEUQRzHkCQJJKfEznES43tUGP0OIOMheIGn50e4f7izCo4H4GkKDEXPBIviCIZh8AFkfv94g5Qx4Jw7AOn4Grh1iqATdrUAEJmxFLIsgzzPQSnpQc4SIkMIh7ZtfQCjys6soNQlVFW1AEgpQWQCjDE+gHIKIaxZo7mu69UOiqJwRXxAxnFDQllS5XUzSeO+kmoJoOzUni41NE1tM9JBTdMII85d14FpjI2lihUA9wCNA8zzDOM4WkBjvgFqrQO8ulzmNgLl/8SPyTT0WL3vLLBGsNZ6HUBV1tT3vROd/Fk/AZt/Z/J+AUN8ayghXmezAAAAAElFTkSuQmCC);
+}
+.FileContents {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin: 10px 0;
+}
+.FileContents-line {
+  border: none;
+}
+.FileContents-lineNum {
+  padding-right: 10px;
+  width: 1%;
+}
+/* Used to prevent copying the line number. */
+.FileContents-lineNum::before {
+  color: #aaa;
+  content: attr(data-line-number);
+  cursor: pointer;
+}
+.FileContents-lineContents {
+  line-height: 1.3em;
+  min-height: 1em;
+  padding-left: 10px;
+}
+.FileContents-lineContents:target {
+  background: #cfd8dc;
+}
+.InlineReadme {
+  border-top: 1px solid #ddd;
+  margin: 10px 0;
+  padding: 7px 0;
+}
+.InlineReadme-path {
+  color: #666;
+}
+
+/* BlameDetail.soy */
+
+.Blame {
+  border-collapse: collapse;
+  font-size: 8pt;
+  margin: 0 auto;
+}
+.Blame-region--bg1 {
+  background: #fff;
+}
+.Blame-region--bg2 {
+  background: #f1f2f3;
+}
+.Blame-sha1,
+.Blame-author,
+.Blame-time,
+.Blame-regionLink {
+  font-size: 8pt;
+  padding: 0 3px;
+  white-space: nowrap;
+}
+.Blame-regionLink {
+  text-align: right;
+}
+.Blame-lineNum .u-lineNum {
+  padding: 0 8px;
+  text-align: right;
+}
+.Blame-lineNum:hover {
+  text-decoration: underline;
+}
+.Blame-lineContent {
+  font-size: 9pt;
+  line-height: 1.3em;
+  padding: 0 8px;
+}
+
+/* DiffDetail.soy */
+
+.Diff {
+  margin: 10px 0;
+}
+.Diff-fileIndex {
+  color: #444;
+  font-weight: bold;
+}
+.Diff-unified {
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+  padding: 10px 0;
+}
+.Diff-hunk {
+  color: #00c;
+}
+.Diff-delete {
+  color: #c00;
+}
+.Diff-insert {
+  color: #080;
+}