blob: 1d656b092e02c772dba10dd8c258c5d12807c282 [file] [log] [blame]
body {
background-color: black;
color: white;
font-family: Helvetica;
margin: 0px;
}
#topology.linking {
cursor: crosshair;
}
.nodrop {
cursor: not-allowed;
}
.status {
padding: 1em;
}
.status:last-child {
border-right: none;
}
.status .static {
color: #AAA;
padding: .25em;
}
.status .dynamic {
color: #FFF;
padding: .25em;
}
#status.top span {
font-size: 24px;
}
.button {
padding: 1em;
background-color: lightgray;
color: black;
border: 1px solid #AAA;
}
#arrow {
stroke: none;
fill: rgba(255, 255, 255, .35);
}
.header {
height: 50px;
}
#topology {
border-top: 1px solid #AAA;
}
.selectedFlow {
border-bottom: 1px solid #AAA;
}
.selectedFlow:hover {
background-color: #333;
}
.selectedFlow:last-child {
border-bottom: none;
}
#lastUpdated {
padding-bottom: 0px;
}
#controllers .header {
-webkit-box-pack: center;
border-bottom: 1px solid #AAA;
}
#right .header {
font-size: 12px;
padding-right: .25em;
-webkit-box-sizing: border-box;
}
#controllers, #selectedFlows {
border-top: 1px solid #AAA;
}
#selectedFlows {
border-bottom: 1px solid #AAA;
}
.selectedFlow {
height: 2em;
color: white;
background-color: black;
}
#flowChooser .selectedFlow {
background-color: rgba(255, 255, 255, .75);
color: black;
}
#flowChooser .flowId {
padding-left: 2em;
}
.selectedFlow.selected {
color: black;
background-color:#AAA;
}
.highlight circle {
stroke: rgba(255, 255, 255, .5);
stroke-width: 2px;
}
#linkVector {
fill: none;
stroke-width: 1px;
stroke: rgba(255, 255, 255, .75);
pointer-events: none;
}
path {
pointer-events: none;
}
path.flow {
fill: none;
stroke-width: 5px;
stroke: rgba(255, 255, 255, .35);
}
path.flow.highlight {
stroke-width: 6px;
stroke: rgba(255, 255, 255, .75);
}
#selectedFlowsHeader {
border-top: 1px solid #AAA;
}
path.iperfdata {
fill: none;
stroke-width: 2px;
stroke: rgba(255, 255, 255, .75);
}
#flowChooser {
pointer-events: none;
background-color: rgba(0, 0, 0, .25);
}
.flowId, .srcDPID, .dstDPID, .iperf, #deleteFlow, .deleteFlow {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
width: 3em;
}
.srcDPID, .dstDPID {
width: 12em;
}
.srcDPID, .dstDPID, .deleteFlow, #deleteFlow {
border-right: 1px solid #AAA;
}
.srcDPID {
border-left: 1px solid #AAA;
}
#controllers {
border-right: 1px solid #AAA;
}
.controller {
padding: .25em;
padding-left: 2.5em;
position: relative;
}
.black-eye {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 2.25em;
background-image: url('../assets/black-eye.svg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: .25em center;
}
.white-eye {
height: 100%;
width: 2.25em;
background-image: url('../assets/white-eye.svg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: .25em center;
}
.deleteFlow {
height: 100%;
background-image: url('../assets/delete.svg');
background-size: auto 150%;
background-repeat: no-repeat;
background-position: center;
}
#logo {
height: 50px;
}
.edge {
stroke: black;
stroke-width: 1.5px;
}
.nolabel text {
display: none;
}
text {
stroke: none;
fill: white;
font-size: 16px;
pointer-events: none;
}
path {
stroke: rgba(255, 255, 255, .25);
stroke-width: 1.5px;
}
.aggregation {
stroke: black;
stroke-width: 2px;
}
#traceButton {
visibility: hidden
}
.color1-selected .color1,
.color2-selected .color2,
.color3-selected .color3,
.color4-selected .color4,
.color5-selected .color5,
.color6-selected .color6,
.color7-selected .color7,
.color8-selected .color8,
.color9-selected .color9,
.color10-selected .color10,
.color11-selected .color11,
.color12-selected .color12 {
opacity: 1;
pointer-events: auto;
}
.colorInactive {
opacity: 1;
fill: #444;
background-color: #444;
color: #222;
}
.color1 {
opacity: .15;
pointer-events: none;
fill: #EC0033;
background-color: #EC0033;
}
.color2 {
opacity: .15;
fill: #FFBA00;
background-color: #FFBA00;
}
.color3 {
opacity: .2;
pointer-events: none;
fill: #3714B0;
background-color: #3714B0;
}
.color4 {
opacity: .2;
pointer-events: none;
fill: #B12C49;
background-color: #B12C49;
}
.color5 {
opacity: .2;
pointer-events: none;
fill: #402C84;
background-color: #402C84;
}
.color6 {
opacity: .2;
pointer-events: none;
fill: #990021;
background-color: #990021;
}
.color7 {
opacity: .2;
pointer-events: none;
fill: #990021;
background-color: #990021;
}
.color8 {
opacity: .2;
pointer-events: none;
fill: #A67900;
background-color: #A67900;
}
.color9 {
opacity: .2;
fill: #F53D65;
background-color: #F53D65;
}
.color10 {
opacity: .2;
pointer-events: none;
fill: #1F0772;
background-color: #1F0772;
}
.color11 {
opacity: .2;
pointer-events: none;
fill: #F56E8B;
background-color: #F56E8B;
}
.color12 {
opacity: .2;
pointer-events: none;
fill: #6949D7;
background-color: #6949D7;
}
@-webkit-keyframes pending {
from {
opacity: 1.0;
}
to {
opacity: 0.5;
}
}
.pending {
-webkit-animation-name: pending;
-webkit-animation-duration: .5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 70;
}