gray status

_sass/_chaospott.scss

@@ -22,11 +22,13 @@ body {
 .jumbotron {
   margin: 0;
   padding: 0;
+
   .post-title {
     font-size: 42px;
     font-weight: normal;
   }
-  &>hr {
+
+  & > hr {
     background-color: #333;
     height: 1px;
     border: 3px #333 solid;
@@ -47,7 +49,7 @@ body {
 }
 
 .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
-    max-height: 600px;
+  max-height: 600px;
 }
 
 ul.navbar-right {
@@ -75,6 +77,7 @@ ul.navbar-nav li a {
 
 a {
   color: $nav-link-color;
+
   &:visited {
     color: $nav-link-color;
   }
@@ -82,6 +85,7 @@ a {
 
 .row {
   padding: 75px 0;
+
   &-centered {
     text-align: center;
     margin: 0;
@@ -94,6 +98,7 @@ a {
   height: 300px;
   margin: 0 0 100px 0;
   padding: 0;
+
   img {
     position: relative;
     top: 30px;
@@ -108,7 +113,7 @@ a {
   margin-right: -4px;
 }
 
-ul.nav>li>a {
+ul.nav > li > a {
   color: $nav-link-color;
 }
 
@@ -117,18 +122,35 @@ ul.nav>li>a {
   margin: auto;
 }
 
-#status_open,
-#status_closed {
+.status {
   display: none;
   border: 0;
 }
 
-#status_open a {
+.status {
   color: #fff !important;
 }
 
-#status_closed a {
-  color: #fff !important;
+.unknown {
+  background-color: #808080;
+}
+
+.open {
+  background-color: #29A900;
+}
+
+.closed {
+  background-color: #D9534F;
+}
+
+.ifopen, .ifclosed, .ifunknown {
+  display: none !important;
+}
+
+.status.open .ifopen,
+.status.closed .ifclosed,
+.status.unknown .ifunknown {
+  display: unset !important;
 }
 
 #status_bar {
@@ -152,7 +174,7 @@ ul.nav>li>a {
   .navbar-brand {
     display: block;
   }
-  .navbar-collapse .nav>.divider-vertical {
+  .navbar-collapse .nav > .divider-vertical {
     display: none;
   }
 }