Improve UI on rule pages

front/src/css/rule.css

@@ -1,32 +1,33 @@
 .rule.board {
   text-align: center;
 }
-.rule h2 span {
-  font-size: 1.5em;
-}
-.rule .scoreDisplay {
+.rule .ruleTable {
   display: table;
   border-spacing: 1em;
-  margin: 0 auto;
+  width: 90%;
+  margin: 2em auto;
+  background: #f2f2f2;
+  border: 1px dashed #666;
+  border-radius: 0.5em;
 }
-.rule .scoreDisplay > div {
+.rule .ruleTable > div {
   display: table-cell;
   vertical-align: middle;
-  font-weight: bold;
-  font-size: 1.5em;
 }
-.rule .scoreDisplay > div.score {
+.rule .ruleTable .left {
+  width: 33%;
+  font-weight: bold;
+}
+.rule .ruleTable .right {
+  width: 67%;
+}
+.rule .score {
   font-size: 2.5em;
+  line-height: 2em;
   height: 2em;
   width: 2em;
   border-radius: 0.5em;
-}
-.rule h3 {
-  margin-top: 2.5em;
-}
-.rule .icon-warning {
-  font-size: 2em;
-  color: #FF1919;
+  margin: 0 auto 0.5em;
 }
 .rule .message {
   width: 80%;
@@ -35,19 +36,44 @@
 .rule .message p {
   margin: 0.5em;
 }
-.rule ul {
+.rule .message ul {
   list-style-type: none;
   padding-left: 0;
 }
-.rule li:before {
+.rule .message li:before {
   content: '\25e6';
   margin-right: 0.3em;
   font-size: 1.2em;
   position: relative;
   top: 0.1em;
 }
-.rule .offenders li {
-  font-size: 0.8em;
+.rule .warning {
+  width: 90%;
+  margin: -1em auto 2em;
+  background: #FEE;
+  border: 1px dashed #e74c3c;
+  color: #e74c3c;
+  border-radius: 0.5em;
+}
+.rule .offendersTable {
+  display: table;
+  border-spacing: 0 0.25em;
+  margin: 0 auto;
+  min-width: 10%;
+  max-width: 90%;
+}
+.rule .offendersTable > div {
+  display: table-row;
+}
+.rule .offendersTable > div > div {
+  display: table-cell;
+  background: #f2f2f2;
+  padding: 0 1em;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+.rule .offendersTable > div > div:hover {
+  background: #EBD8E2;
 }
 .rule .notFound {
   font-size: 1em;