collar-dev-server/public/css/dev-server.css

/**
 * message-view json formatter
 */
.json-formatter-row .json-formatter-string {
  white-space: normal !important;
}

#message-dialog-label-row > .label {
  margin:2px;
}

.toolbar-btn i {
  margin:0 !important;
}

.activated-btn > i {
  color: green !important;
}

.toolbar {
  position: fixed !important;
  top: 0;
  margin-top: 0 !important;
  margin-left: 30%;
  margin-right: 30%;
  width: 40%;
  height: 32px;
  /* background-color: #282828; */
}

#toolbar > div {
  /* background: #282828 !important; */
}

.toolbox {
  position: fixed !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  /*bottom: 50% !important;*/
  top: 200px;
  z-index: 999 !important;
}

.toolbox i {
  margin: 0 !important;
}

.left.sidebar {
  width: 200px !important;
}

.toolbox-ele {
  margin-bottom: 10px !important;
  margin-left: 10px !important;
  width: 180px !important;
  color: #999 !important;
}

.toolbox-ele label {
  color: #999 !important;
}

.toggle.button.checked {
  color : green !important;
}

/* RIGHT SIDEBAR: FILTER BOX */

.right.sidebar {
  width: 300px !important;
}

.filterbox {
  float: right;
  padding-left: 2px !important;
  padding-right: 2px !important;
  top: 200px;
  /*margin-bottom: 50% !important;*/
  z-index: 999 !important;
}

.filterbox i {
  margin: 0 !important;
}

.filterbox-ele {
  margin-bottom: 10px !important;
  margin-left: 10px !important;
  width: 280px !important;
  color: #999 !important;
}

.filterbox-ele label {
  color: #999 !important;
}

/*@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light.ttf');
}*/

body, div, canvas {
  font-family: 'Raleway', sans-serif !important;
}

div {
  word-wrap: break-word;
}

.container {
  padding-left: 1em;
  padding-right: 1em;
}

input {
  width : 70px;
}

/**
 * GRAPH
 */
#graph {
  /* bottom: 100px; */
  bottom: 0;
  display: block;
  top: 42px;
  position: fixed;
  width: 100%;
  /* background-color: #282828; */
}

#properties-view {
  position: fixed;
  top: 100px;
  right: 100px;
  width: 30%;

  /*background-color: rgba(0,0,0,0.1);*/
}

/*#properties-view-title {
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom-color: white;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}*/

#message-view {
  position: fixed;
  top: 100px;
  left: 50px;
  width: 30%;

  /*background-color: rgba(0,0,0,0.1);*/
}

/*#signal-view-title {
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom-color: white;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}*/


.table-view-cell {
  margin-top: 5px;
  margin-bottom: 5px;
}

.table-view-cell-name {
  font-weight: 300;
}

.table-view-cell-subname {
  font-style: italic;
}

.inner-view {
  margin: 10px;
  color : #FFF;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    /*padding: 12px 16px;*/
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.example-link {
  cursor : pointer;
}


/**
 * TIMELINE
 */
#timeline-toolbar {
  padding-bottom: 0px;
}
#timeline {
  position: fixed;
  width: 100%;
  height: 0;
  bottom: 0px;
  /* color: #458588; */
}
/*vis time line style*/
/* .vis-time-axis .vis-odd, */
/* .vis-time-axis .vis-even { */
/*  color: #458588; */
/*  background: #282828; */
/* } */

.button-xsmall {
  font-size: 70%;
}

.button-small {
  font-size: 85%;
}

.pure-button-active {
  color : blue;
}

.startTime {
  background-color: #F00;
}

.endTime {
  background-color: #00F;
}

/*ANA Colors (Army Navy Aero) - w3*/
.color-0 {
  border-color: #09568d !important;
  background-color: #09568d !important;
}

.color-1 {
  border-color: #172035 !important;
  background-color: #172035 !important;
}

.color-2 {
  border-color: #457725 !important;
  background-color: #457725 !important;
}

.color-3 {
  border-color: #686b69 !important;
  background-color: #686b69 !important;
}

.color-4 {
  border-color: #ffbb00 !important;
  background-color: #ffbb00 !important;
}

.color-5 {
  border-color: #f8a300 !important;
  background-color: #f8a300 !important;
}

.color-6 {
  border-color: #f0c282 !important;
  background-color: #f0c282 !important;
}

.color-7 {
  border-color: #901E1D !important;
  background-color: #901E1D !important;
}

.color-8 {
  border-color: #421814 !important;
  background-color: #421814 !important;
}

.color-9 {
  border-color: #a2a7ad !important;
  background-color: #a2a7ad !important;
}

.color-10 {
  border-color: #47484a !important;
  background-color: #47484a !important;
}

.color-11 {
  border-color: #1c1d22 !important;
  background-color: #1c1d22 !important;
}

.color-12 {
  border-color: #0b0b0d !important;
  background-color: #0b0b0d !important;
}

.color-13 {
  border-color: #122b3e !important;
  background-color: #122b3e !important;
}

.color-14 {
  border-color: #b0aaad !important;
  background-color: #b0aaad !important;
}

.color-15 {
  border-color: #5b5e6a !important;
  background-color: #5b5e6a !important;
}

.color-16 {
  border-color: #343236 !important;
  background-color: #343236 !important;
}

.color-17 {
  border-color: #363848 !important;
  background-color: #363848 !important;
}

.color-18 {
  border-color: #262f39 !important;
  background-color: #262f39 !important;
}

.color-19 {
  border-color: #373a42 !important;
  background-color: #373a42 !important;
}

.color-20 {
  border-color: #646e83 !important;
  background-color: #646e83 !important;
}

.color-21 {
  border-color: #7284b7 !important;
  background-color: #7284b7 !important;
}

.color-22 {
  border-color: #acac9a !important;
  background-color: #acac9a !important;
}

.color-23 {
  border-color: #65623c !important;
  background-color: #65623c !important;
}

.color-24 {
  border-color: #46554f !important;
  background-color: #46554f !important;
}

.color-25 {
  border-color: #4d4c30 !important;
  background-color: #4d4c30 !important;
}

.color-26 {
  border-color: #ffaa07 !important;
  background-color: #ffaa07 !important;
}

.color-27 {
  border-color: #a98652 !important;
  background-color: #a98652 !important;
}

.color-28 {
  border-color: #b19083 !important;
  background-color: #b19083 !important;
}

.color-29 {
  border-color: #705a43 !important;
  background-color: #705a43 !important;
}

.color-30 {
  border-color: #874840 !important;
  background-color: #874840 !important;
}

.color-31 {
  border-color: #a0333a !important;
  background-color: #a0333a !important;
}

.color-32 {
  border-color: #acaca4 !important;
  background-color: #acaca4 !important;
}

.color-33 {
  border-color: #7e7e87 !important;
  background-color: #7e7e87 !important;
}

.color-34 {
  border-color: #383839 !important;
  background-color: #383839 !important;
}

.color-35 {
  border-color: #002d30 !important;
  background-color: #002d30 !important;
}

.color-36 {
  border-color: #635d41 !important;
  background-color: #635d41 !important;
}

.color-37 {
  border-color: #4b4c50 !important;
  background-color: #4b4c50 !important;
}

.color-38 {
  border-color: #575c45 !important;
  background-color: #575c45 !important;
}

.color-39 {
  border-color: #987563 !important;
  background-color: #987563 !important;
}

.color-40 {
  border-color: #46554f !important;
  background-color: #46554f !important;
}



.highlight {
  border-color : #FF00FF !important;
  background-color : #FF00FF !important;
}

.vis-selected {
  border-color: #FF0000 !important;
  background-color: #FF0000 !important;
}


/**
 * tooltip
 */
.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover {
    color: #c00;
    text-decoration: none;
}

.tooltip:hover:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    content: attr(title);
    display: block;
    left: 1em;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}

.tooltip:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}


/*
 * context-menus
 */

#cy-context-menus-cxt-menu {
    display:none;
    z-index:1000;
    position:absolute;
    border:1px solid #A0A0A0;
    padding: 0;
    margin: 0;
}

.cy-context-menus-cxt-menuitem{
    display:block;
    z-index:1000;
    width:110px;
    padding: 3px 20px;
    position:relative;
    margin:0;
    background-color:#F2F2F2;
    font-weight:normal;
    font-size: 12px;
    white-space:nowrap;
    border: 0;
    text-align: left;
}

.cy-context-menus-cxt-menuitem:enabled {
    color: #000000;
}

.cy-context-menus-ctx-operation:focus{
  outline: none;
}

.cy-context-menus-cxt-menuitem:hover{
    color: #ffffff;
    text-decoration: none;
    background-color: #0B9BCD;
    background-image: none;
    cursor: pointer;
}

.cy-context-menus-cxt-menuitem[title]:before{
    content:attr(title);
}

.cy-context-menus-cxt-menuitem:not([title]):before{
    content:"\2630";
}

.cy-context-menus-divider {
  border-bottom:1px solid #A0A0A0;
}

/* message editor */
.CodeMirror {
  border: 1px solid #A0A0A0;
}