portal/static/unbound_reservation_static/css/node-network.css

   1 /* ---------------------------------------------------------------------------
   2    (c) Telef�nica I+D, 2013
   3    Author: Paulo Villegas
   4    ------------------------------------------------------------------------- */
   5
   6
   7 body {
   8     background-color: #f6f6f6;
   9 }
  10
  11 /* HREF links */
  12
  13 a {
  14     color: blue;
  15     text-decoration: none;
  16 }
  17
  18 a:hover {
  19     text-decoration: underline;
  20 }
  21
  22 a:visited {
  23     color: blue;
  24 }
  25
  26 /* .......................................................................*/
  27 /* Container Class */
  28 #plugin_container{
  29         width:99%;
  30         /*max-width:1000px;
  31         max-width:1170px;*/
  32
  33 }
  34
  35
  36 /* Container Class End ................................................... */
  37
  38
  39 #area51{
  40     display: table;
  41     background-color:black;
  42     color:white;
  43     width:500px;
  44     height:400px;
  45     clear:both;
  46     margin-left:auto;
  47     margin-right:auto;
  48     margin-top:100px;
  49     padding:10px 10px 10px 10px;
  50 }
  51
  52 /* ....................................................................... */
  53 /* SidePanel-Left*/
  54 .sidepanel-left{
  55         display:inline-block;
  56         min-width:851px;
  57     width:80%;
  58  /*    background-color:rgb(255,165,0);*/
  59     padding-left:20px;
  60     padding-right:20px;
  61     padding-top:10px;
  62     padding-bottom:20px;
  63 }
  64
  65 #testbed_bound_text, #unbound_text{
  66     background-color:white;
  67     text-align:justify;
  68     padding: 5px 7px 5px 7px;
  69     margin: 5px 5px 5px 5px;
  70 }
  71
  72 #node_num_Slider .tooltip, #node_num_Slider2 .tooltip{
  73         display:none;
  74 }
  75
  76 .control-label{
  77     display:inline-block;
  78     float:left;
  79     width:40%;
  80    <!-- margin-right:0px;-->
  81    margin-left:0px;
  82 }
  83
  84 .form-control{
  85     display:inline-block;
  86     margin-left:20px;
  87     width:20% !important;
  88    <!-- margin-right:16px;-->
  89 }
  90
  91 #node_numSliderVal, #node_numSliderVal2{
  92     display:inline-block;
  93     margin-left:20px;
  94 }
  95
  96 #node_num_Slider, #node_num_Slider2{
  97     display:inline-block;
  98     margin-top:6px;
  99     margin-right:28px;
 100     margin-left:-10px;
 101     width:100px !important;
 102     float:right;
 103 }
 104
 105 #unbound_req, #testbed_bound{
 106     width:325px;
 107     border: 1px solid lightgrey;
 108     background:lightgrey;
 109     color:black !important;
 110
 111 }
 112
 113 #b_ver .btn-group, #t_ver .btn-group{
 114     margin-left:50px;
 115     width:100px;
 116 }
 117
 118 #unbound_text
 119 {
 120         color:black !important;
 121 }
 122 /* SidePanel-Left End .......................................................... */
 123 /* Network Canvas */
 124
 125
 126 #netcanvas{
 127     display:inline-block;
 128     float:right;
 129     top:61px;
 130     width:100%;
 131     left:360px;
 132     /*right:0px;*/
 133     height:680px;
 134     /*min-width:700px;*/
 135     min-height:680px;
 136     overflow:auto;
 137     position:absolute;
 138   /*  z-index: -1;*/
 139
 140
 141 }
 142
 143 /* ....................................................................... */
 144 /* The top-right side panel and its title child */
 145
 146 div#sidepanel {
 147     position: absolute;
 148     pointer-events: none;
 149     top: 0px;
 150     right: 200px;
 151 }
 152
 153 div#title {
 154     margin: 4px 2px 6px 0px;
 155     border-width: 0px;
 156     padding: 0px;
 157     text-align: right;
 158     font-family: Verdana, Arial, Helvetica, sans-serif;
 159     font-size: 18px;
 160     line-height: 18px;
 161     color: #5D1D4D;
 162     font-weight: bold;
 163     pointer-events: none;
 164 }
 165
 166 div#title img {
 167     border-width: 0px;
 168     margin: 0px;
 169 }
 170
 171
 172 img#helpIcon {
 173     position: absolute;
 174     right: 6px;
 175     top: 100px;
 176     pointer-events: all;
 177     cursor: help;
 178 }
 179
 180
 181 /* ....................................................................... */
 182 /* On/off toggles for the help/info panels */
 183
 184 div.panel_off {
 185     visibility: hidden;
 186     pointer-events: none;
 187 }
 188
 189 div.panel_on {
 190     visibility: visible;
 191     pointer-events: all;
 192 }
 193
 194
 195 /* ....................................................................... */
 196 /* Help boxes */
 197
 198 div#help {
 199     margin: 6px;
 200     padding: 4px;
 201     background-color: #DEDFA3;
 202     position: absolute;
 203     width: 420px;
 204     right: 0px;
 205     z-index: 1001;
 206     border: 1px solid #989970;
 207
 208     font-family: Georgia, Times New Roman, Times, serif;
 209     font-size: 11pt;
 210
 211     -moz-transition: visibility 1.2s;
 212     -o-transition: visibility 1.2s;
 213     -webkit-transition: visibility 1.2s;
 214     transition: visibility 1.2s;
 215
 216     -webkit-border-radius: 10px;
 217     -moz-border-radius: 10px;
 218     border-radius: 10px;
 219
 220     -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
 221     -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
 222     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
 223 }
 224
 225 div#help ul {
 226     margin: 0.5em 0em 0.5em 0em;
 227     padding-left: 1.5em;
 228
 229 }
 230
 231 div#help li {
 232     margin: 0em;
 233     padding: 0px;
 234 }
 235
 236 div#faq {
 237     position: absolute;
 238     top: 6px;
 239     left: 6px;
 240     padding: 4px;
 241     width: 860px;
 242     height: 600px;
 243     overflow-y: auto;
 244     z-index: 1002;
 245     background: #E5E4D6;
 246
 247     font-size: 11pt;
 248
 249     border: solid 1px #aaa;
 250     border-radius: 8px;
 251     -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
 252     -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
 253     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
 254 }
 255
 256 div#faq dt {
 257     font-family: Verdana, Arial, Helvetica, sans-serif;
 258     font-size: 13pt;
 259     color: #5D1D4D;
 260     font-weight: bold;
 261     margin-top: .4em;
 262 }
 263
 264 div#faq dd {
 265     font-family: Georgia, Times New Roman, Times, serif;
 266     padding-left: 0px;
 267     margin-left: 0.7em;
 268 }
 269
 270 div#close_faq {
 271     position: fixed;
 272     margin-left: 820px;
 273     margin-top: 0px;
 274     padding: 0px;
 275 }
 276
 277
 278 /* ....................................................................... */
 279
 280 div#nocontent {
 281     visibility: hidden;
 282     pointer-events: none;
 283     position: absolute;
 284     width: 600px;
 285     height: 200px;
 286     top: 200px;
 287     left: 200px;
 288     background: #C3B091;
 289     border: solid 2px #a00;
 290     border-radius: 8px;
 291     font-family: Verdana, Arial, Helvetica, sans-serif;
 292     font-size: 20px;
 293     text-align: center;
 294     vertical-align: center;
 295     padding: 12px;
 296 }
 297
 298 div#nocontent h1 {
 299     margin: 1em;
 300     color: red;
 301     font-size: 24px;
 302     font-weight: bold;
 303 }
 304
 305 /* ....................................................................... */
 306 /* Node details panel */
 307
 308 div#nodeInfo {
 309     position: relative;
 310     right: 4px;
 311     cursor: text;
 312     width: 300px;
 313     z-index: 1000;
 314     background: #E5E4D6;
 315     border: solid 1px #aaa;
 316     border-radius: 8px;
 317     font-family: Verdana, Arial, Helvetica, sans-serif;
 318     font-size: 10px;
 319     padding: 4px;
 320     text-align: right;
 321     color:black;
 322 }
 323
 324 div#nodeInfo div#cover {
 325     text-align: left;
 326     height: 300px;
 327 }
 328
 329 div#nodeInfo div.t {
 330     font-size: 14px;
 331     font-weight: bold;
 332 }
 333
 334 div#nodeInfo img.cover {
 335     margin-bottom: 6px;
 336     position: absolute;
 337     right: 3px;
 338 }
 339
 340 div#nodeInfo img.action {
 341     cursor: pointer;
 342     position: absolute;
 343 }
 344
 345 div#nodeInfo div.f {
 346     border-top: 1px dotted #8E5981;
 347     margin-bottom: 3px;
 348     margin-top: 3px;
 349 }
 350
 351 div#nodeInfo span.d {
 352     font-weight: bold;
 353 }
 354
 355 div#nodeInfo span.c {
 356     font-style: italic;
 357 }
 358
 359 div#nodeInfo span.l {
 360     font-size: 11px;
 361     color: #24553E;
 362     font-variant: small-caps;
 363 }
 364
 365 /* ....................................................................... */
 366 /* SVG elements */
 367
 368 div#netcanvas svg {
 369     background-color: white;
 370     cursor: move;
 371 }
 372
 373 line.link {
 374     stroke: #B2D9D8;
 375 }
 376
 377 circle {
 378     cursor: crosshair;
 379     fill: #EBC763;
 380 }
 381
 382 circle.level1 {
 383     stroke: #f00;
 384 }
 385
 386 circle.level2 {
 387     fill-opacity: 0.8;
 388     stroke-opacity: 0.8;
 389     stroke: #777;
 390 }
 391
 392 circle.level3 {
 393     fill-opacity: 0.5;
 394     stroke-opacity: 0.5;
 395 }
 396
 397 circle.sibling {
 398     /*fill: blue;*/
 399     fill: #455EE8;
 400 }
 401
 402 circle.main {
 403     /*fill: red;*/
 404     fill: #732A9A;
 405     fill-opacity: 1.0;
 406 }
 407
 408 /* ....................................................................... */
 409 /* Graph labels */
 410
 411 g.gLabel {
 412     font: 10px sans-serif;
 413     font-weight: normal;
 414     visibility: hidden;
 415 }
 416
 417 g.on {
 418     visibility: visible;
 419 }
 420
 421 g.zoomed {
 422     font-family: Verdana, Arial, Helvetica, sans-serif;
 423     font-size: 10px;
 424     font-weight: normal;
 425     text-align: center;
 426     color: #000;
 427     border: none;
 428     z-index: 0;
 429 }
 430
 431 text {
 432     font: 10px sans-serif;
 433     font-weight: normal;
 434     stroke-opacity: 1.0;
 435 }
 436
 437 text.nlabel {
 438     /*stroke: #000000;*/
 439 }
 440
 441 text.nshadow {
 442     stroke: #fff;
 443     stroke-width: 3px;
 444     /*stroke-opacity: 0.5;*/
 445     /*visibility: hidden;*/
 446 }
 447
 448 text.main {
 449     font: 12px sans-serif;
 450     font-weight: bold;
 451 }
 452
 453
 454 /* ....................................................................... */
 455
 456 /* no longer used */
 457
 458 .nlabel_on {
 459     visibility: visible;
 460     font-size: 12px;
 461     opacity: 1.0;
 462     fill: #101000;
 463     stroke: #ffffff;
 464     font-weight: bold;
 465 }
 466
 467 .tooltip{
 468     position: absolute;
 469     width: 200px;
 470     height: 50px;
 471     padding: 8px;
 472     font: 15px Helvetica Neue;
 473     background: #FFF;
 474     border: solid 1px #aaa;
 475     border-radius: 8px;
 476     pointer-events: none;
 477     z-index:1000;
 478     text-align:center;
 479     background: rgba(222,223,163,0.8);
 480 }
 481
 482