margin-right: 2px;
}
+/* Styling for draged network object */
+#networkListSortContainer {
+ display: none;
+}
+.networklist {
+ padding: 6px;
+ background: #eee;
+ border: 1px solid #ccc;
+ min-height: 2em;
+ width: auto !important;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.networklist li {
+ width: 226px;
+ list-style-type: none;
+ margin: 6px auto;
+ padding: 3px;
+ background: #fff;
+ border: 1px solid #aaa;
+ line-height: 18px;
+ border-radius: 3px;
+ cursor: move;
+ padding-left: 23px;
+ background: #ffffff url(/static/dashboard/img/drag.png) no-repeat 11px 50%;
+}
+.networklist li em {
+ font-size: 0.5em;
+ line-height: 1em;
+ color: #999;
+ font-style: normal;
+ margin-left: 0.8em;
+}
+.networklist li i {
+ margin-right: 5px;
+ vertical-align: middle;
+}
+.networklist li a.btn {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ font-size: 11px;
+ line-height: 12px;
+ padding: 2px 5px 3px;
+ margin-right: 1px;
+ width: 18px;
+ text-align: center;
+ right: 5px;
+ vertical-align: middle;
+ float: right;
+}
+.networklist li a.btn:before {
+ content: "+";
+}
+.networklist li.ui-sortable-helper {
+ background-color: #def;
+}
+.networklist li.ui-state-highlight {
+ border: 1px dotted #ccc;
+ background: #efefef;
+ height: 0.5em;
+}
+.networklist li:after {
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: " ";
+ clear: both;
+ height: 0;
+}
+#selected_network {
+ margin-bottom: 1.5em;
+ counter-reset: v1 0;
+ background: #edf9ff;
+ border: 1px solid #c0d9e4;
+}
+#selected_network li {
+ position: relative;
+}
+#selected_network li a.btn:before {
+ content: "-";
+}
+#selected_network li:before {
+ content: "nic:" counter(v1);
+ counter-increment: v1;
+ display: inline-block;
+ margin-right: 5px;
+ background: #666;
+ color: #fff;
+ font-size: 90%;
+ padding: 0px 4px;
+ vertical-align: middle;
+ border-radius: 2px;
+ position: absolute;
+ left: -2em;
+}
+#selected_network.dragging li:before {
+ content: "nic:";
+ background-color: rgba(102, 102, 102, 0.5);
+ padding-right: 10px;
+}
+#selected_network.dragging li.ui-state-highlight:before {
+ content: "";
+ background: transparent;
+}
+/* Styling for network topology */
+@-webkit-keyframes progress-bar-stripes {
+ from {
+ background-position: 20px 0;
+ }
+ to {
+ background-position: 0 0;
+ }
+}
+@-moz-keyframes progress-bar-stripes {
+ from {
+ background-position: 20px 0;
+ }
+ to {
+ background-position: 0 0;
+ }
+}
+@-ms-keyframes progress-bar-stripes {
+ from {
+ background-position: 20px 0;
+ }
+ to {
+ background-position: 0 0;
+ }
+}
+@-o-keyframes progress-bar-stripes {
+ from {
+ background-position: 0 0;
+ }
+ to {
+ background-position: 20px 0;
+ }
+}
+@keyframes progress-bar-stripes {
+ from {
+ background-position: 20px 0;
+ }
+ to {
+ background-position: 0 0;
+ }
+}
+#topologyCanvas {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+ height: 500px;
+ padding: 25px;
+ padding-left: 50px;
+ background: #efefef;
+}
+#topologyCanvas div.nodata {
+ font-size: 150%;
+ font-weight: bold;
+ text-align: center;
+ padding-top: 200px;
+ display: none;
+}
+div.networks {
+ height: 100%;
+}
+div.network {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+ float: left;
+ width: 270px;
+ height: 100%;
+ position: relative;
+}
+div.network .nicname {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 100%;
+ width: 17px;
+ border-radius: 17px;
+ z-index: 200;
+ color: #fff;
+ position: absolute;
+ left: -8px;
+ top: 0px;
+ cursor: pointer;
+}
+div.network .nicname:hover {
+ background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
+ background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
+ background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
+ background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
+ background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
+ background-size: 10px 10px;
+}
+div.network .nicname.nourl {
+ cursor: auto;
+}
+div.network .nicname.nourl:hover {
+ background-image: none;
+}
+div.network .nicname h3 {
+ font-size: 12px;
+ line-height: 1;
+ position: relative;
+ font-weight: normal;
+ top: 55%;
+ color: #fff;
+ left: -1px;
+ letter-spacing: 0.2em;
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ white-space: nowrap;
+ text-shadow: 0px 0px 5px #000;
+}
+div.network .nicname span.ip {
+ position: absolute;
+ bottom: -10px;
+ left: 20px;
+ color: #000;
+ display: block;
+ font-weight: normal;
+ font-size: 90%;
+ letter-spacing: 0.2em;
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ -webkit-transform-origin: 0% 0%;
+ -moz-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ -o-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ white-space: nowrap;
+ text-shadow: 0px 0px 2px #fff,0px 0px 2px #fff;
+}
+div.network .router,
+div.network .server,
+div.network .device {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+ cursor: pointer;
+ width: 90px;
+ border: 3px solid #444;
+ position: absolute;
+ top: 30px;
+ left: 90px;
+ color: #fff;
+ padding: 0 3px;
+ background: #666;
+ margin-bottom: 20px;
+ border-radius: 8px;
+}
+div.network .router:before,
+div.network .server:before,
+div.network .device:before {
+ content: "";
+ width: 20px;
+ height: 20px;
+ border: 2px solid #444;
+ line-height: 1.2;
+ position: absolute;
+ border-radius: 20px;
+ top: -10px;
+ left: -10px;
+ background: #ffffff url(/static/dashboard/img/router.png) no-repeat center center;
+ background-size: 16px 16px;
+}
+div.network .router:after,
+div.network .server:after,
+div.network .device:after {
+ content: "";
+ width: 100%;
+ line-height: 1.2;
+ position: absolute;
+ text-align: center;
+ border-radius: 0;
+ background: #444;
+ color: #fff;
+ font-size: 11px;
+ height: 1.5em;
+ bottom: 0px;
+ left: 0px;
+}
+div.network .router span.devicename,
+div.network .server span.devicename,
+div.network .device span.devicename {
+ position: absolute;
+ color: #fff;
+ bottom: 0px;
+ font-size: 12px;
+ line-height: 14px;
+ width: 100%;
+ text-align: center;
+ z-index: 300;
+ left: -2px;
+}
+div.network .router span.name,
+div.network .server span.name,
+div.network .device span.name {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
+ font-size: 12px;
+ position: relative;
+ z-index: 10;
+ text-align: center;
+ top: 4px;
+ padding: 0 3px;
+}
+div.network .router div.port,
+div.network .server div.port,
+div.network .device div.port {
+ text-align: right;
+ min-width: 90px;
+ height: 10px;
+ font: 0px/0px sans-serif;
+ position: absolute;
+ left: -91px;
+ top: 8px;
+ background-color: #37a9e3;
+ background-image: none;
+ -webkit-background-size: 20px 20px;
+ -moz-background-size: 20px 20px;
+ -o-background-size: 20px 20px;
+ background-size: 20px 20px;
+ z-index: 100;
+}
+div.network .router div.port span.ip,
+div.network .server div.port span.ip,
+div.network .device div.port span.ip {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+ color: #333;
+ font-size: 9px;
+ line-height: 1;
+ text-shadow: 0px -1px #ffffff;
+ position: relative;
+ top: -1em;
+ width: 90px;
+ display: inline-block;
+ padding-right: 8px;
+ padding-left: 8px;
+ word-wrap: break-word;
+ word-break: break-all;
+}
+div.network .router div.port.right,
+div.network .server div.port.right,
+div.network .device div.port.right {
+ left: auto;
+ right: -92px;
+ width: 92px;
+ text-align: left;
+}
+div.network .router:hover,
+div.network .server:hover,
+div.network .device:hover {
+ border-color: #222;
+}
+div.network .router:hover div.port,
+div.network .server:hover div.port,
+div.network .device:hover div.port {
+ cursor: pointer;
+ background-color: #2688c0;
+ -webkit-animation: progress-bar-stripes 1s linear infinite;
+ -moz-animation: progress-bar-stripes 1s linear infinite;
+ -ms-animation: progress-bar-stripes 1s linear infinite;
+ -o-animation: progress-bar-stripes 1s linear infinite;
+ animation: progress-bar-stripes 1s linear infinite;
+}
+div.network .router:hover div.port:hover,
+div.network .server:hover div.port:hover,
+div.network .device:hover div.port:hover {
+ -webkit-animation: progress-bar-stripes 0.3s linear infinite;
+ -moz-animation: progress-bar-stripes 0.3s linear infinite;
+ -ms-animation: progress-bar-stripes 0.3s linear infinite;
+ -o-animation: progress-bar-stripes 0.3s linear infinite;
+ animation: progress-bar-stripes 0.3s linear infinite;
+}
+div.network .router:hover div.port.nourl,
+div.network .server:hover div.port.nourl,
+div.network .device:hover div.port.nourl {
+ cursor: auto;
+ background-image: none;
+}
+div.network .router:hover div.port.nourl:hover,
+div.network .server:hover div.port.nourl:hover,
+div.network .device:hover div.port.nourl:hover {
+ background-image: none;
+}
+div.network .router:hover:after,
+div.network .server:hover:after,
+div.network .device:hover:after {
+ background-color: #222;
+ border-color: #222;
+}
+div.network .device {
+ border: none;
+ background: transparent;
+}
+div.network .server {
+ background: #fff;
+ color: #333;
+}
+div.network .server:before {
+ background: #ffffff url(/static/dashboard/img/server.png) no-repeat center center;
+ background-size: 14px 14px;
+}
+.launchButtons {
+ text-align: right;
+ margin: 10px 0px 15px 10px;
+}
+.launchButtons a.btn {
+ margin-left: 10px;
+}
+
+
/* Graham Bancroft graham.bancroft@canonical.com 03 October 2012 */
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,400italic");