guvnor/web/public/css/app/main.styl

A node process manager that isn't spanners all the way down

// app/layout.styl

@import '../_variables'
@import '../_mixins'

highlight = #03377C
background = #181818
border = #444

@import 'hosts.styl'
@import 'host.styl'
@import 'apps.styl'
@import 'app.styl'
@import 'processes.styl'
@import 'process.styl'
@import 'exceptions.styl'

body
  background: background

h1
  margin-top: 0

.navbar-header small
  padding-right: 31px

#page-wrapper
  padding: 0 15px 15px 15px

.modal-dialog .buttons
  text-align: right
  padding: 20px

.modal-body
  padding: 0

.modal-body fieldset
  padding: 20px
  overflow: auto
  max-height: calc('100vh - 200px')

.modal-body p
  margin: 20px

.modal-dialog hr
  margin: 0

.panel-primary
  border-color: highlight

.panel-primary > .panel-heading
  background-color: highlight
  border-color: highlight

.panel-heading button
  margin-top: -19px
  float: right
  margin-left: 5px

.panel-body p
  padding: 0
  margin: 0

.panel-body button
  margin-top: 15px

.panel-body table button
  margin-top: 0

.growl-animated
  max-width: 370px

.growl-animated h4
  margin-right: 20px

.table-panel .panel-body
  padding: 0

.table-panel .panel-body p
  padding: 15px
  margin: 0

.table-panel table
  margin: 0
  table-layout: fixed
  width: 100%

.table-panel table.table-hover tbody tr:hover
  cursor: pointer

.table-panel table td
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.table-panel table td small
  color: #999

.table-panel table tr th:first-child,
.table-panel table tr td:first-child
  padding-left: 15px;

.fa
  margin-right: 3px

.form-control
  color: #333

footer
  text-align: right
  color: #444
  padding: 10px 31px

footer small
  display: block

footer a, footer a:visited
  color: #666
  text-decoration: underline

footer a:hover, footer a:active
  color: #999

footer a.tableflip
  display: inline-block
  padding-left: 19px
  background-repeat: no-repeat
  background-image: url('/images/tableflip.png')
  background-size: 16px 16px
  margin-left: 2px

footer a.guvnor-web:hover
  color: highlight

footer a.tableflip:hover
  color: #3edab7
  background-image: url('/images/tableflip-colour.png')

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
  .navbar-brand
    background-image: url('/images/guvnor@2x.png')

  footer a.tableflip
    background-image: url('/images/tableflip@2x.png')

  footer a.tableflip:hover
    background-image: url('/images/tableflip@2x-colour.png')

input[type='checkbox']
  width: 25px

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

@-moz-keyframes blinker {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@keyframes blinker {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-moz-keyframes reloading {
  0% { background: fade(@reloadaction, 20%); }
  50% { background: fade(@reloadaction, 5%); }
  100% { background: fade(@reloadaction, 20%); }
}

@-webkit-keyframes reloading {
  0% { background: fade(@reloadaction, 20%); }
  50% { background: fade(@reloadaction, 5%); }
  100% { background: fade(@reloadaction, 20%); }
}

@keyframes reloading {
  0% { background: fade(@reloadaction, 20%); }
  50% { background: fade(@reloadaction, 5%); }
  100% { background: fade(@reloadaction, 20%); }
}

@-moz-keyframes erroring {
  0% { background: fade(@processerror, 20%); }
  50% { background: fade(@processerror, 5%); }
  100% { background: fade(@processerror, 20%); }
}

@-webkit-keyframes erroring {
  0% { background: fade(@processerror, 20%); }
  50% { background: fade(@processerror, 5%); }
  100% { background: fade(@processerror, 20%); }
}

@keyframes erroring {
  0% { background: fade(@processerror, 20%); }
  50% { background: fade(@processerror, 5%); }
  100% { background: fade(@processerror, 20%); }
}