webapp.styles.main.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of willow-servers Show documentation
Willow operational servlets and servers
The newest version!
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(fonts/Lato-Regular.ttf);
}

*, *:after, *:before {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

html {
  overflow-y: scroll;
}

body {
  font-family: 'Lato', sans-serif;
  margin: 30px 50px;
  position: relative;
}

header {
  padding: 6px 0;
}

a {
  color: #000;
}

a:focus {
  outline: 3px solid #1976D2;
}

.mainchart {
  padding: 0;
}

.group {
  margin-bottom: 1em;
}

.axis {
  font-size: 10px;
  position: relative;
  pointer-events: none;
  z-index: 2;
}

.axis text {
  transition: fill-opacity 250ms linear;
  -webkit-transition: fill-opacity 250ms linear;
  -moz-transition: fill-opacity 250ms linear;
  -o-transition: fill-opacity 250ms linear;
}

.axis path {
  display: none;
}

.axis line {
  stroke: #DDD;
  shape-rendering: crispEdges;
}

.axis.top {
  background-image: linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -moz-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0)  100%);
  background-image: -webkit-gradient(top, #fff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0) 100%);
  top: 0;
  padding: 0 0 24px 0;
}

.axis.bottom {
  background-image: linear-gradient(bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -moz-linear-gradient(bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-gradient(bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
  bottom: 0;
  padding: 24px 0 0 0;
}

[data-module="horizon-graph"] + [data-module="horizon-graph"] .horizon {
  border-top: none;
}

.horizon {
  overflow: hidden;
  position: relative;
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}

.horizon+.horizon {
  border-top: none;
}

.horizon canvas {
  display: block;
  /* Disable unwanted selection */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
  user-select: none;
}

.horizon .title, .horizon .value {
  bottom: 0;
  line-height: 30px;
  margin: 0 6px;
  position: absolute;
  text-shadow: 0 0 4px #fff;
  white-space: nowrap;
}

.horizon .title {
  left: 0;
}

.horizon .value {
  right: 0;
}

.line {
  background: #888;
  z-index: 2;
  top: 50px !important;
}

.selection {
  background: #BAE4B3;
  opacity: .3;
  top: 50px;
  z-index: 1;
  position: absolute;
  display: none;
  height: 100%;
}

.details {
  display: none;
  padding: 50px;
  background-color: #FFF;
  z-index: 3;
  position: relative;
}

body, textarea, input, select {
  background: 0;
  border-radius: 0;
  color: inherit;
  font-size: 16px;
  margin: 0;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

.addon, .btn-sm, .nav, textarea, input, select {
  outline: 0;
  font-size: 14px;
}

.smooth {
  transition: all .2s;
}

.btn, .nav a {
  text-decoration: none;
}

.container {
  padding: 0 20px;
  width: auto;
}

@media (min-width: 1310px) {
  .container {
    padding: 0 20px;
    width: 100%;
  }
}

.btn, h2 {
  font-size: 2em;
}

h1 {
  font-size: 3em;
}

.btn {
  background: #999;
  border-radius: 6px;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin: 2px 0;
  padding: 12px 30px 14px;
}

.btn:hover {
  background: #888;
}

.btn:active, .btn:focus {
  background: #777;
}

.btn-a {
  background: #0ae;
}

.btn-a:hover {
  background: #09d;
}

.btn-a:active, .btn-a:focus {
  background: #08b;
}

.btn-b {
  background: #3c5;
}

.btn-b:hover {
  background: #2b4;
}

.btn-b:active, .btn-b:focus {
  background: #2a4;
}

.btn-c {
  background: #d33;
}

.btn-c:hover {
  background: #c22;
}

.btn-c:active, .btn-c:focus {
  background: #b22;
}

.btn-sm {
  border-radius: 4px;
  padding: 10px 14px 11px;
}

label>* {
  display: inline;
}

form>* {
  display: block;
  margin-bottom: 10px;
}

textarea, input, select {
  border: 1px solid #ccc;
  padding: 2px 4px;
}

textarea:focus, input:focus, select:focus {
  border-color: #1976D2;
}

textarea, input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 13em;
  outline: 0;
}

.flame-graph__wrapper {
  position: relative;
  overflow: hidden;
  height: 420px;
  padding: 20px;
  background: white;
}

.nv-graph__wrapper {
  position: relative;
  overflow: hidden;
  height: 200px;
  margin-top: 20px;
  background: white;
}

.nv-graph,
.nv-graph__wrapper.scalable:only-of-type,
.flame-graph__wrapper.scalable:only-of-type {
  width: 100%;
  height: 100%;
}

.nv-graph,
.nv-graph__wrapper.scalable:only-of-type {
  margin-left: -25px;
}

.nv-graph__wrapper.scalable:only-of-type {
  margin-top: 0;
}

.horizon-ruler {
  margin-bottom: -1px;
}

#time-range-selection {
  background-color: #DDD;
  display: none;
  height: 27px;
  margin-top: -27px;
}

.addon {
  box-shadow: 0 0 0 1px #ccc;
  padding: 8px 12px
}

.nav, .nav a:hover {
  background: #000;
  color: #fff;
}

.nav .current {
  color: #fff;
}

.nav {
  display: inline-block;
  padding: 11px 0 15px;
  width: 100%;
}

.nav a {
  color: #aaa;
  margin-right: 10px;
  position: relative;
  top: -1px;
}

.btn.btn-close {
  background: #000;
  float: right;
  font-size: 25px;
  margin: -54px 7px;
  display: none;
}

@media (max-width :500px) {
  .btn.btn-close {
    display: block;
  }
  .nav {
    overflow: hidden;
  }
  .pagename {
    margin-top: -11px;
  }
  .nav:active, .nav:focus {
    height: auto;
  }
  .nav div:before {
    background: #000;
    border-bottom: 10px double;
    border-top: 3px solid;
    content: '';
    float: right;
    height: 4px;
    position: relative;
    right: 3px;
    top: 14px;
    width: 20px;
  }
  .nav a {
    display: block;
    padding: .5em 0;
    width: 50%;
  }
  .nav .current {
    padding: 3px 0 2em;
    top: 14px;
  }
  select.navcenter {
    position: absolute;
    top: 12px;
    right: 100px;
  }
}

.table th, .table td {
  padding: .5em;
  text-align: left;
}

.table tbody>:nth-child(2n-1) {
  background: #ddd;
}

.ico {
  font: 33px Arial Unicode MS, Lucida Sans Unicode;
}

.row {
  margin: 1% 0;
  overflow: auto;
}

.col {
  float: left;
}

.table, .c12 {
  width: 100%;
}

.c11 {
  width: 91.66%;
}

.c10 {
  width: 83.33%;
}

.c9 {
  width: 75%;
}

.c8 {
  width: 66.66%;
}

.c7 {
  width: 58.33%;
}

.c6 {
  width: 50%;
}

.c5 {
  width: 41.66%;
}

.c4 {
  width: 33.33%;
}

.c3 {
  width: 25%;
}

.c2 {
  width: 16.66%;
}

.c1 {
  width: 8.33%;
}

@media (max-width :870px) {
  .row .col {
    width: 100%;
  }
}

.msg {
  background: #def;
  border-left: 5px solid #59d;
  padding: 1.5em;
}

.white {
  fill: white;
  color: white;
}

select.navcenter {
  margin: 0 0 0 20px;
  color: white;
  width: 4em;
  background: url('data:image/svg+xml;utf8,') no-repeat #000;
  background-position: 95% 50%;
  height: 20px;
  top: 12px
}

.horizon__icons,
.nv-graph__icons {
  position: absolute;
  height: 1.3em;
  display: inline-block;
  top: 0;
  width: 100%;
}

.horizon__icons {
  left: .2em;
}

.nv-graph__icons {
  left: 25px;
  height: 0;
}

.horizon__icons .icon {
  margin: 2px;
}

.nv-graph__icons .icon,
.horizon__icons .icon {
  opacity: 0;
}

.flame-graph__wrapper:hover .icon,
.nv-graph__wrapper:hover .icon,
.horizon:hover .icon {
  opacity: .5;
}

.flame-graph__icons .icon:hover,
.nv-graph__icons .icon:hover,
.horizon__icons .icon:hover {
  opacity: 1;
}

.icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  opacity: .5;
  transition: opacity 0.35s ease;
  cursor: pointer;
}

.icon:hover {
  opacity: 1;
}

.drag-handle {
  float: right;
  margin-right: 10px;
  display: none;
}

.radiator-controller .drag-handle {
  display: inline-block;
}

.nv-graph__icons .drag-handle {
  margin-right: 45px;
}

.host-link {
  position: absolute;
  top: 25px;
  left: .2em;
}

.nv-graph__icons .host-link {
  float: left;
  left: 0;
  margin-right: 12px;
  position: relative;
  top: 2px;
}

.host-link span:after {
  content: ": ";
}

.host-link small:before {
  content: ' ';
}

/* Dialog styling, dont' want to mix them with jquery-ui functional css */
.ui-widget-overlay {
  background: darkgray;
  opacity: .35;
}
.ui-dialog {
  background: white;
}
.ui-dialog-titlebar {
  background: black;
}
.ui-dialog-title {
  color: white;
}

#custom-radiator-list-dialog button {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}

.radiator-list {
  list-style-type: none;
  padding-left: 0;
}

.custom-radiator-selection-item {
  width: 100%;
  text-align: center;
}

.custom-radiator-selection-item:hover {
  background: black;
  color: white;
  cursor: pointer;
  cursor: hand;
}

.navright {
  float: right;
  position: relative;
  right: 57px;
  top: 0;
  margin: 5px;
}

.radiator-controller {
  height: calc(100% - 50px);
  width: 100%;
  display: inline-block;
}