A Pen by Averrin.

gpvml.markdown

gpvml

A Pen by Averrin on CodePen.

License.

index.html

<div class="content">
  <h2>Supervisor status
    <a class="uk-button btn-restart">Restart all</a>
  </h2>
  <ul class="services">
    <li>Techpriest  <span class="status status-running">RUNNING</span> </li>
    <li>API  <span class="status status-running">RUNNING</span> </li>
    <li>Celery Convert  <span class="status status-fatal">FATAL</span> </li>
    <li>Celery Periodic  <span class="status status-starting">STARTING</span> </li>
    <li>DVB Generator  <span class="status status-starting">STARTING</span> </li>
    <li>Radio Generator  <span class="status status-running">RUNNING</span> </li>
  </ul>

  <h2>Events
    <a class="uk-button btn-clear">Clear</a>
  </h2>
  <ul class="events">
    <li class="error"> <div class="marker"></div>
      API: Access denied
      <span class="timestamp">[ 11.09 15:38:44 ]</span>
    </li>
    <li class="info"> <div class="marker"></div>
      API: Message created
      <span class="timestamp">[ 11.09 15:38:44 ]</span>
    </li>
    <li class="warning"> <div class="marker"></div>
      API: STB list is empty
      <span class="timestamp">[ 11.09 15:38:44 ]</span>
    </li>
  </ul>
  <div class="logs">
    [ 
    <a href="#">api.log</a> | 
    <a href="#">generator.log</a> | 
    <a href="#">web.log</a> | 
    <a href="#">techpriest.log</a>
     ]
  </div>
</div>

style.css

::selection {
  background-color: #333;
  color: #eee;
}

body {
  background-color: #212121;
  color: #eee;
  padding: 6px;
}

.content{
  width: 600px;
  margin: 0 auto;
}

ul.services, ul.events{
  list-style-type: none;
  margin: 0;
  margin-left: -40px;
}
ul.services li {  
  height: 24px;
  background-color: #252525;
  color: #eee;
  padding-top: 4px;
  padding-left: 8px;
  padding-right: 16px;
  border: solid 1px #222;
  transition: background-color .7s, color .3s;
}
ul.services li .status {
  float: right;
  font-weight: bold;
}
ul.services li:hover,
ul.events li:hover{
  transition: background-color .7s, color .3s;
  background-color: #333333;
}
ul.services li:active,
ul.events li:active,
.uk-button:hover,
.uk-button:focus{
  transition: background-color .7s, color .3s;
  background-color: #4f3f4f;
  color: orange;
}

ul.services li .status.status-running {
  color: green;
}
ul.services li .status.status-fatal {
  color: darkred;
}
ul.services li .status.status-starting {
  color: orange;
}
ul.events li {  
  height: 24px;
  background-color: #252525;
  color: #eee;
  padding-top: 4px;
  /* padding-left: 8px; */
  padding-right: 16px;
  border: solid 1px #222;
  transition: background-color .7s, color .3s;
}
ul.events li .marker {
  float: left;
  height: 28px;
  width: 10px;
  margin: 0;
  margin-right: 8px;
  margin-top: -4px;
}

ul.events .error .marker{
  background-color: red;
}
ul.events .info .marker{
  background-color: lightblue;
}
ul.events .warning .marker{
  background-color: orange;
}

ul.events li .timestamp{
  color: #888;
  float: right;
  font-size: 9pt;
}

.uk-button {
  border-radius: 2px;
  background-color: #333333;
  color: #eee;
  transition: background-color .7s, color .3s;
}

.uk-button:active {
  border-radius: 2px;
  background-color: #3f333f;
  color: #eee;
  transition: background-color .7s, color .3s;
}

.logs {
  float: right;
  margin-top: 12px;
}