| |
| 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; |
| } |
| |
| #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: 24; |
| } |
| |