lib/rack/queries/static/app.css in rack-queries-0.1.3 vs lib/rack/queries/static/app.css in rack-queries-0.2.0

@@ -36,11 +36,11 @@
 
 nav {
   background-color: #fff;
   border-left: #aaa solid 1px;
   box-sizing: border-box;
-  flex-basis: 25%;
+  flex-basis: 33%;
   padding-top: calc(2.8rem + 5px);
 }
 
 .query {
   appearance: none;
@@ -55,22 +55,37 @@
   margin: 0;
   padding: 1rem;
   position: relative;
   text-align: left;
   width: 100%;
-  word-break: break-all;
 }
 
+.query p {
+  color: #666;
+  font-size: .8em;
+  margin: .5em 0 0;
+}
+
 .query:hover {
   background-color: #eee;
 }
 
+.query:focus {
+  outline: 1px dotted #8b3333;
+  outline-offset: 1px;
+  z-index: 1
+}
+
 .query-active {
   background-color: #8b3333;
   color: #fff;
 }
 
+.query-active p {
+  color: #fff;
+}
+
 .query-active:before {
   border-bottom: 12px solid transparent;
   border-right: 12px solid #8b3333;
   border-top: 12px solid transparent;
   content: ' ';
@@ -92,19 +107,24 @@
   margin-left: 1rem;
   vertical-align: middle;
 }
 
 .run {
-  border: 0;
   border-radius: 4px;
   background: #8b3333;
   color: #fff;
   cursor: pointer;
   display: block;
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
   padding: .5rem 1rem;
+  transition: background .5s;
+}
+
+.run:focus {
+  outline: 1px dotted #8b3333;
+  outline-offset: 1px;
 }
 
 .run:disabled {
   cursor: not-allowed;
   opacity: .5;