samples/consul-ui/css/style.css in consul-templaterb-1.2.1 vs samples/consul-ui/css/style.css in consul-templaterb-1.3.0

@@ -1,11 +1,11 @@
 .btn:focus, .btn:active, button {
    outline: none !important;
    box-shadow: none;
 }
 
-#service-wrapper, #instances-wrapper {
+#service-wrapper, #instances-wrapper, #keys-wrapper {
   overflow: scroll;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   border-style: solid;
   border-width: 1px 1px 1px 1px;
@@ -16,27 +16,39 @@
   max-width: 8em;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-#service-wrapper  .list-group-item:last-child, #instances-wrapper .list-group-item:last-child {
+#service-wrapper .list-group-item:last-child, #instances-wrapper .list-group-item:last-child,
+#keys-wrapper .list-group-item:last-child {
   border-bottom-width: 0px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
 }
 
-#service-wrapper  .list-group-item:first-child, #instances-wrapper .list-group-item:first-child {
+#service-wrapper .list-group-item:first-child, #instances-wrapper .list-group-item:first-child,
+#keys-wrapper .list-group-item:first-child {
   border-top-width: 0px;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
 }
 
-#service-wrapper  .list-group-item, #instances-wrapper .list-group-item {
+#service-wrapper .list-group-item, #instances-wrapper .list-group-item, #keys-wrapper .list-group-item {
   border-left: 0px;
   border-right: 0px;
 }
 
+#node-statuses span {
+  font-size: 1rem;
+  transition: background-color .16s linear;
+  cursor: pointer;
+}
+
+#node-statuses {
+  margin-top: 0.4rem;
+}
+
 h2 {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
 
@@ -72,6 +84,70 @@
 }
 
 .progress-deactivated {
   background-color: #a5a5a5 !important;
   color: #f1f1f1 !important;
+}
+
+.status-deactivated {
+  background-color: #a5a5a5 !important;
+  color: #f1f1f1 !important;
+}
+
+.service-status {
+  transition: background-color .16s linear;
+  font-size: 85%;
+  cursor: pointer;
+}
+
+#instance-statuses {
+  padding-top: 5px;
+  text-align: center;
+}
+
+.status-sidebar {
+  width: 5px !important;
+  min-height: 1px;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.instance-content {
+  width: 100%;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 12px;
+}
+
+#nodes #instances-list .list-group-item {
+  padding-left: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  display: flex;
+  flex-direction: row;
+}
+
+html, body {
+    height:100%;
+}
+
+.instance-content-header {
+  display: flex;
+}
+
+.instance-content-header h5 {
+  margin-right: 10px;
+}
+
+.meta-tags {
+  text-align: right;
+  flex: 2 0 0;
+}
+
+#data-wrapper {
+  overflow: scroll;
+}
+
+pre, code {
+  height: 100%;
+  margin-bottom: 0px;
 }