Offenders layout for DOM inserts

front/src/css/rule.css

@@ -82,17 +82,64 @@
   font-size: 3em;
   margin-bottom: 1em;
 }
+.offenders .eltButton {
+  display: inline-block;
+  position: relative;
+  background: #efe;
+  padding: 0 0.5em;
+  margin: 0.2em 0;
+  border-radius: 0.4em;
+  z-index: 1;
+}
+.offenders .eltButton.opens {
+  padding-right: 0.75em;
+}
+.offenders .eltButton.opens:after {
+  position: relative;
+  left: 0.5em;
+  content: '\25BC';
+  font-size: 0.8em;
+}
+.offenders .eltButton > div {
+  display: none;
+  position: absolute;
+  right: 0;
+  min-width: 100%;
+  background: inherit;
+  border-bottom-left-radius: 0.4em;
+  border-bottom-right-radius: 0.4em;
+  border-top: 1px solid #999;
+}
+.offenders .eltButton .domTree {
+  text-align: left;
+  white-space: nowrap;
+}
+.offenders .eltButton .domTree > div {
+  margin: 0.5em;
+}
+.offenders .eltButton .domTree > div div {
+  margin-left: 1em;
+}
+.offenders .eltButton:hover {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background: #ffe0cc;
+  z-index: 2;
+}
+.offenders .eltButton:hover > div {
+  display: block;
+}
 .offendersHtml {
   display: inline-block;
 }
-.offendersHtml .domTree div {
+.domTree div {
   text-align: left;
   margin-left: 1em;
 }
-.offendersHtml .domTree div span:only-child {
+.domTree div span:only-child {
   font-weight: bold;
 }
-.offendersHtml .domTree div span:only-child span {
+.domTree div span:only-child span {
   font-style: italic;
   font-weight: normal;
 }