1/***************************************************************************** 2 * 3 * style.css - NagVis default theme stylesheet 4 * 5 * Copyright (c) 2004-2014 NagVis Project (Contact: info@nagvis.org) 6 * 7 * License: 8 * 9 * This program is free software; you can redistribute it and/or modify 10 * it under the terms of the GNU General Public License version 2 as 11 * published by the Free Software Foundation. 12 * 13 * This program is distributed in the hope that it will be useful, 14 * but WITHOUT ANY WARRANTY; without even the implied warranty of 15 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 16 * GNU General Public License for more details. 17 * 18 * You should have received a copy of the GNU General Public License 19 * along with this program; if not, write to the Free Software 20 * Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA. 21 * 22 *****************************************************************************/ 23 24body, table, th, td { 25 margin: 0; 26 padding: 0; 27 28 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 29 text-decoration: none; 30 31 color: black; 32 font-size: 9pt; 33} 34 35span {font-size: 9pt;} 36 37html,body{height:100%;} 38 39table {width:100%} 40div {margin:0;padding:0} 41img {border:0} 42 43/* Global DIVs */ 44.main {margin:0;padding:0;background-color:white;color:black} 45.header {position:fixed;top:0;left:0;padding:0;z-index:100;min-width:1000px;} 46.headerspacer {width:100%} 47div#map, div#overview, div#url { 48 position: absolute; 49 top: 0; 50 left: 0; 51 right: 0; 52 bottom: 0; 53 z-index:98 54} 55 56iframe#url { 57 width: 100%; 58 height: 100%; 59} 60 61/* Background images */ 62#backgroundImage { 63 position: absolute; 64 top: 0; 65 left: 0; 66 z-index: 0; 67} 68 69/* icons */ 70.icondiv { 71 position : absolute; 72 border : 0; 73 z-index : 1; 74} 75 76.icon { 77 cursor: pointer; 78} 79 80.dragger .icon { 81 cursor: move; 82} 83 84/* lines */ 85.line { 86 position : absolute; 87} 88 89.jsline div { 90 z-index: 10; 91} 92 93a.linelink { 94 color: #000000; 95} 96 97/* textbox (object on map) */ 98.box { 99 position: absolute; 100 z-index : 1; 101 border: 1px #000 solid; 102 padding: 0 2px; 103 /* tried to solve the off-screen text wrap. This fixes the problem but 104 * results no no linebreak at all: white-space:nowrap; */ 105} 106 107/* control styles */ 108div.control { 109 position: absolute; 110} 111 112div.control.togglemid { 113 cursor: pointer; 114} 115 116.dragger { 117 cursor: move; 118} 119 120/* new overview page */ 121 122div.infopage h2 { 123 margin: 20px 10px 0 10px; 124} 125 126div.infobox { 127 margin: 0 auto; 128 padding: 10px; 129 overflow: hidden; 130} 131 132div.infopage div.clear { 133 clear: left; 134} 135 136div.infobox div.mapobj { 137 float: left; 138 width: 200px; 139 height: 36px; 140 margin: 1px; 141 background-color: #fbfbfb; 142 border: 1px solid #e5e5e5; 143 overflow: hidden; 144} 145 146div.infobox div.mapobj h3, 147div.infobox table.rotation h3 { 148 color: #43B3CF; 149 margin-top: 2px; 150 margin-bottom: 2px; 151 margin-left: 2px; 152 font-weight: normal; 153 font-size: 1.0em; 154} 155 156div.infobox div.mapobj img.state { 157 margin: 2px; 158} 159 160div.infobox table.rotation { 161 width: 600px; 162 margin: 2px auto; 163 border-collapse:collapse; 164 background-color: #fbfbfb; 165} 166 167div.infobox table.rotation td.title { 168 width: 300px; 169} 170 171div.infobox table.rotation td { 172 padding: 4px; 173 border: 1px solid #e5e5e5; 174 vertical-align: top; 175} 176 177/* Style on info page */ 178div.infopage > table { 179 margin: auto; 180 margin-top: 20px; 181 margin-bottom: 25px; 182 183 width: 800px; 184 185 background-color: #fbfbfb; 186 border-collapse:collapse; 187} 188 189div.infopage > table td, div.infopage > table th { 190 border: 1px solid #e5e5e5; 191 padding: 4px; 192 193 color: #43B3CF; 194 vertical-align: top; 195} 196 197div.infopage > table th { 198 text-align: center; 199} 200 201div.infopage > table th.head { 202 font-size: 1.3em; 203} 204 205div.infopage > div.map.disabled h3 { 206 color: #a4a4a4; 207} 208 209div.infopage > div.map.error h3 { 210 color: #ff4f4f; 211} 212 213div.infopage a { 214 display: block; 215 width: 100%; 216 height: 100%; 217 color: #43b3cf; 218 text-decoration: none; 219} 220 221div.infopage a:hover { 222 color: #789D2B; 223 text-decoration: none; 224 opacity: .5; 225} 226 227/** 228 * 229 * Status message dialog 230 * 231 */ 232 233#statusMessage { 234 position: absolute; 235 display: none; 236 top: -1px; 237 left: 200px; 238 right: 200px; 239 z-index: 5000; 240 opacity: 0.85; 241 font-size: 1.5em; 242} 243 244#statusMessage div { 245 width: 400px; 246 margin: 0px auto; 247 height: 24px; 248 min-height: 24px; 249 padding: 8px 10px 8px 46px; 250} 251 252#statusMessage div.notice { 253 background: url('../../frontend/nagvis-js/images/internal/info.png') 6px 3px no-repeat; 254 background-color: #fbfbfb; 255 border: 1px solid #e5e5e5; 256} 257 258#statusMessage div.error, 259#statusMessage div.warning { 260 background: url('../../frontend/nagvis-js/images/internal/warning.png') 6px 3px no-repeat; 261 background-color: #EF9398; 262 border: 1px solid #DC5757; 263} 264 265#statusMessage div.loading { 266 background: url('../../frontend/nagvis-js/images/internal/loading.gif') 6px 3px no-repeat; 267 background-color: #fbfbfb; 268 border: 1px solid #e5e5e5; 269} 270 271/* 272 * popupWindow css 273 */ 274 275div#popupWindow { 276 position: absolute; 277 z-index: 2000; 278 279 font-weight: normal; 280 -moz-border-radius: 11px; 281 -khtml-border-radius: 11px; 282 -webkit-border-radius: 11px; 283 border-radius: 5px; 284 background: #fff; 285 border: 1px solid #e5e5e5; 286 -moz-box-shadow: rgba(200,200,200,1) 0 4px 18px; 287 -webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px; 288 -khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px; 289 box-shadow: rgba(200,200,200,1) 0 4px 18px; 290} 291 292div#popupWindow div.close { 293 width: 20px; 294 height: 20px; 295 float: right; 296 font-size: 13px; 297 border: 1px dotted #c0c0c0; 298 text-align: center; 299 margin-top: 8px; 300 margin-right: 8px; 301 cursor: pointer; 302 color: #555; 303} 304 305/* Content styling */ 306#popupWindowContent { 307 padding: 0 16px 16px 16px; 308 color: #43B3CF; 309} 310 311#popupWindowContent div.error { 312 background-color: #febabb; 313 border: 1px solid #d5091b; 314 color: #d5091b; 315 border-radius: 5px; 316 margin: 2px 0; 317 padding: 3px; 318 white-space: normal; 319} 320 321#popupWindowContent div.error code, 322#popupWindowContent div.error pre { 323 display: block; 324 overflow: scroll; 325 background-color: #fff; 326 color: #000; 327 margin: 2px; 328 padding: 2px; 329} 330 331#popupWindowContent div.error div.details { 332 margin-top: 5px; 333 text-align: left; 334 font-size: 0.8em; 335} 336 337#popupWindowContent table.mytable { 338 width: 100%; 339 padding: 0; 340 margin: 0; 341} 342 343#popupWindowContent table.mytable th, 344#popupWindowContent table.mytable td { 345 padding: 0; 346 margin: 0; 347 border: 0; 348 color: #43B3CF; 349} 350 351#popupWindowContent table.mytable td { 352 vertical-align: middle; 353} 354 355#popupWindowContent label span { 356 vertical-align: middle; 357} 358 359#popupWindowContent p { 360 margin-bottom: 12px; 361} 362 363/* title */ 364div.infopage h2, 365div#popupWindow h1, 366#popupWindowContent h2 { 367 text-align: left; 368 padding: 3px 10px 2px 2px; 369 line-height:20px; 370 font-weight:normal; 371 border-bottom: 1px solid #7EA434; 372 color: #43B3CF; 373} 374 375div#popupWindow h1 { 376 font-weight: normal; 377 margin: 5px; 378 padding: 5px 10px; 379 font-size: 1.5em; 380 381 cursor: move; 382 -webkit-touch-callout: none; 383 -webkit-user-select: none; 384 -khtml-user-select: none; 385 -moz-user-select: none; 386 -ms-user-select: none; 387 user-select: none; 388} 389 390#popupWindowContent h2 { 391 margin: 5px 0; 392} 393 394/* cat */ 395#popupWindowContent table.mytable th.cat {font-size: 1.2em;} 396 397/* Child rows */ 398#popupWindowContent table.mytable tr.child-row td.tdlabel {padding-left: 10px;} 399 400/* td labels */ 401#popupWindowContent table.mytable td.tdlabel {width: 140px;} 402#popupWindowContent table.mytable td.tdbox {width: 25px;} 403#popupWindowContent table.mytable td.tdfield { 404 overflow: hidden; 405 text-overflow: ellipsis; 406} 407#popupWindowContent input[type="radio"] { 408 vertical-align: middle; 409} 410#popupWindowContent table.mytable tr td.tdlabel input { 411 width: 140x; 412} 413#popupWindowContent table.mytable tr td.tdfield textarea, 414#popupWindowContent table.mytable tr td.tdfield select { 415 width: 99%; 416} 417#popupWindowContent table.mytable tr td.tdfield textarea { 418 height: 250px; 419} 420#popupWindowContent table.mytable tr td.tdfield input[type="checkbox"] { 421 width: auto; 422 margin-right:2px; 423} 424#popupWindowContent table.mytable tr td.tdfield span { 425 word-wrap: break-word; 426} 427#popupWindowContent table.mytable tr td.tdfield div.picker input { 428 width:140px; 429 margin-right:3px; 430} 431#popupWindowContent table.mytable tr td.tdfield div.picker img { 432 vertical-align: middle; 433} 434#popupWindowContent table.mytable tr td.tdfield input.err, 435#popupWindowContent table.mytable tr td.tdfield select.err { 436 border-color: #ff4f4f; 437} 438 439#popupWindowContent table.mytable tr td.tdfield div.err { 440 margin: 0; 441} 442 443#popupWindowContent .submit { 444 /*font-weight: bold; 445 color: #43b3cf; 446 vertical-align: middle;*/ 447 448 padding: 3px 10px; 449 background-color: #fbfbfb; 450 border: 1px solid #e5e5e5; 451 border-width: 1px; 452 border-style: solid; 453 -moz-border-radius: 5px; 454 -khtml-border-radius: 5px; 455 -webkit-border-radius: 5px; 456 border-radius: 5px; 457 cursor: pointer; 458 text-decoration: none; 459 460 margin: 2px auto; 461 display: block; 462} 463 464#popupWindowContent table.mytable tr td.err div { 465 padding: 3px; 466 margin: 0 0 0 20%; 467 width: 80%; 468 border: 1px solid #ff4f4f; 469 background-color: #ffdddd; 470 color: #000000; 471 -moz-border-radius: 5px; 472 -khtml-border-radius: 5px; 473 -webkit-border-radius: 5px; 474 border-radius: 5px; 475} 476 477#popupWindowContent div.success, 478#popupWindowContent div.err { 479 padding: 5px 8px; 480 margin: 10px; 481 border: 1px solid #00ff00; 482 background-color: #ddffdd; 483 color: #000000; 484 -moz-border-radius: 5px; 485 -khtml-border-radius: 5px; 486 -webkit-border-radius: 5px; 487 border-radius: 5px; 488} 489 490#popupWindowContent div.err { 491 border: 1px solid #ff4f4f; 492 background-color: #FFC9C9; 493 color: #000; 494} 495 496/* Popup window forms */ 497 498#popupWindowContent table.perms td.perm { 499 text-align: center; 500} 501 502#popupWindowContent a {color:#43B3CF;text-decoration:none;} 503#popupWindowContent a:hover {color:#779D2A;text-decoration:underline} 504 505#popupWindowContent input, select { 506 color: #555555; 507 background-color: #fbfbfb; 508 border: 1px solid #e5e5e5; 509} 510 511/* Header styling */ 512.header { 513 background-color: #fbfbfb; 514 border-bottom: 1px solid #ddd; 515 box-shadow: 0 3px 6px #ddd; 516 color: #43B3CF; 517 height: 31px; 518 width: 100%; 519} 520 521#headershow { 522 display: none; 523 width: 9px; 524 min-width: 9px; 525 height: 31px; 526 background-image: none; 527 background-color: #fbfbfb; 528 border: 1px solid #dddddd; 529 border-top: none; 530 border-bottom-right-radius: 4px; 531} 532 533.header ul.head { 534 margin: 0; 535 padding: 0; 536 height: 31px; 537 float:left; 538 list-style:none; 539} 540 541.header ul.right {float:right} 542 543.header ul.head li { 544 margin: 0; 545 padding: 0; 546 547 height: 100%; 548 549 float: left; 550} 551 552.header ul.head li.toggle a, 553#headershow a { 554 display: block; 555 margin-left: 2px; 556 height: 100%; 557 line-height: 32px; 558 text-decoration: none; 559 color: #43B3CF; 560} 561 562#headershow a { 563 margin-left: 0; 564} 565 566#sidetoggle { 567 position: absolute; 568 left: 50px; 569 top: 31px; 570 background-color: #fbfbfb; 571 border: 1px solid #dddddd; 572 border-top: none; 573 border-bottom-left-radius: 4px; 574 border-bottom-right-radius: 4px; 575 width: 100px; 576 height: 5px; 577 text-align: center; 578} 579 580#sidetoggle:hover { 581 cursor:pointer; 582 background-color: #ffffff; 583} 584 585#sidetoggle img { 586 width: 20px; 587 height: 3px; 588 margin-top: 1px; 589} 590 591.header ul.head li.logo { 592 padding-left: 5px; 593 padding-right: 5px; 594 margin-top: 2px; 595} 596 597.header ul.head li.logo img { 598 height: 25px; 599 width: 97px; 600} 601 602.header ul.head li.logo a, .header ul.head li.logo a:active { 603 margin: 0; 604 padding: 0; 605 width: 100%; 606 height: 100%; 607 608 display: block; 609 text-decoration: none; 610} 611 612.header ul li > span { 613 margin:0; 614 height:31px; 615 line-height:32px; 616 font-weight:normal; 617 padding: 0 8px; 618} 619 620#editIndicator span {width:89px;color:#ff4f4f} 621.dropdown span, .header div#refreshCounterHead { 622 display:block; 623 margin:0; 624 padding:0; 625 height:31px; 626 padding-left:8px; 627 padding-right:8px; 628 line-height: 32px; 629 width:auto; 630 font-weight:normal; 631 cursor:pointer; 632} 633.dropdown span:hover { 634 background-color: #ffffff; 635} 636.dropdown img {vertical-align:middle;margin-left:10px} 637.dropdown ul {margin:0;padding:0;list-style:none;width:205px;z-index:100;position:absolute;top:31px;display:none} 638.dropdown li {margin:0;padding:0} 639.dropdown li.current a{color:#000000} 640.dropdown li.lvl2 a{padding-left:10px;width:188px} 641.dropdown li.lvl3 a{padding-left:20px;width:178px} 642.dropdown li.lvl4 a{padding-left:30px;width:168px} 643.dropdown li.lvl5 a{padding-left:40px;width:158px} 644.dropdown li.lvl5 a{padding-left:50px;width:148px} 645.dropdown a, .dropdown a:active, .dropdown li.spacer, .dropdown dl.subdropdown dt { 646 display: block; 647 width: 193px; 648 background: #fbfbfb; 649 margin: 0; 650 color: #43B3CF; 651 text-decoration: none; 652 border-left: 1px solid #e5e5e5; 653 border-right: 1px solid #e5e5e5; 654 padding:5px; 655 z-index:100 656} 657.dropdown a:visited {color:#43B3CF;} 658.dropdown a.left, .dropdown a.left:active {float:left;width:152px;border-right:0} 659.dropdown a.right, .dropdown a.right:active {float:right;width:30px;border-left:1px solid #43B3CF} 660.dropdown a.error, .dropdown a.error:active, .dropdown a.error:visited {color:#ff4f4f} 661.dropdown a:hover { 662 background-color: #ffffff; 663 color: #789D2B; 664 text-decoration: none; 665} 666.dropdown a.submenu-link:after {float:right;content:">"} 667.dropdown li.spacer {width:203px} 668.dropdown li.spacer hr { 669 border: 0; 670 height: 1px; 671 width: 95%; 672 background-color: #e5e5e5; 673} 674.dropdown .underline {border-bottom:1px solid #e5e5e5} 675.subdropdown {position:relative;} 676.subdropdown .topline {border-top:1px solid #e5e5e5} 677.subdropdown .underline {border-bottom:1px solid #e5e5e5} 678 679.dropdown ul#views-ddcontent {max-height:690px;overflow-y:auto;overflow-x:hidden} 680 681/* Styling for the sidebar */ 682#sidebar { 683 position:absolute; 684 top:0; 685 left:0; 686 bottom:0; 687 width:200px; 688 z-index:99; 689 display:none; 690 background-color:#fbfbfb; 691 text-decoration:none; 692 padding-top:10px; 693 border-right:1px solid #e5e5e5; 694} 695#sidebar ul {margin:0;padding:0;display:block;list-style:none} 696#sidebar li {margin:0;padding:0;line-height:25px;} 697#sidebar li.spacerbottom {border-bottom:1px dotted #e5e5e5} 698#sidebar li.spacertop {border-top:1px dotted #e5e5e5} 699#sidebar li > div {width:200px;clear:both;} 700#sidebar li > div a {padding-left:20px;} 701 702#sidebar li.parent div {} 703#sidebar li.parent a.title {width:160px;} 704#sidebar li.parent a.open {width:20px;padding:0;text-align:center;float:right} 705#sidebar li.parent.lvl1 a.title{padding-left:30px;width:150px;background-position:10px 0;} 706#sidebar li.parent.lvl2 a.title{padding-left:40px;width:140px;background-position:20px 0;} 707#sidebar li.parent.lvl3 a.title{padding-left:50px;width:130px;background-position:30px 0;} 708#sidebar li.parent.lvl4 a.title{padding-left:60px;width:120px;background-position:40px 0;} 709#sidebar li.parent.lvl5 a.title{padding-left:70px;width:110px;background-position:50px 0;} 710#sidebar li.parent.lvl6 a.title{padding-left:80px;width:100px;background-position:60px 0;} 711 712#sidebar li a {display:block;width:180px;color:#43B3CF;text-decoration:none;} 713#sidebar li.lvl2 a{padding-left:30px;width:170px} 714#sidebar li.lvl3 a{padding-left:40px;width:160px} 715#sidebar li.lvl4 a{padding-left:50px;width:150px} 716#sidebar li.lvl5 a{padding-left:60px;width:140px} 717#sidebar li.lvl6 a{padding-left:70px;width:130px} 718#sidebar li.open > div a.title {background: url('../images/templates/default.folder_open.gif') no-repeat left #fbfbfb;} 719#sidebar li.closed > div a.title {background: url('../images/templates/default.folder_closed.gif') no-repeat left #fbfbfb;} 720#sidebar li.current > div {font-weight: bold;} 721#sidebar li > div a:hover, 722#sidebar li > div a.title:hover { 723 background-color: #ffffff; 724 color:#779D2A 725} 726#sidebar a.error, #sidebar a.error:active, #sidebar a.error:visited {color:#ff4f4f} 727 728div.statediv { 729 display: none; 730 float: left; 731 margin-top: 9px; 732 margin-left: 5px; 733 width: 5px; 734 height: 5px; 735 border: 1px solid #000; 736} 737 738div.statediv.sOK, div.statediv.sUP { 739 display: block; 740 background-color: #00FF00; 741} 742 743div.statediv.sWARNING { 744 display: block; 745 background-color: #FFFF00; 746} 747 748div.statediv.sCRITICAL, div.statediv.sDOWN, div.statediv.sUNREACHABLE { 749 display: block; 750 background-color: #ff0000; 751} 752 753div.statediv.sUNKNOWN { 754 display: block; 755 background-color: #FFCC66; 756} 757 758div.statediv.sERROR { 759 display: block; 760 background-color: #519EFF; 761} 762 763div.statediv.sPENDING, div.statediv.sUNCHECKED { 764 display: block; 765 background-color: #C0C0C0; 766} 767 768div.statediv.sACK:not(.sDOWNTIME) { 769 border-style: dotted; 770 clip-path: polygon(100% 0, 100% 100%, 50% 50%, 0 100%, 0 0); 771} 772div.statediv.sDOWNTIME:not(.sACK) { 773 border-style: dotted; 774 clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 50% 50%); 775} 776div.statediv.sACK.sDOWNTIME { 777 border-style: dotted; 778 clip-path: polygon(50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%, 0 0); 779} 780 781/* 782 * Frontend eventlog styling 783 */ 784 785#eventlog { 786 position: fixed; 787 bottom: 0px; 788 right: 20px; 789 z-index: 1000; 790 791 width: 400px; 792 height: 70px; 793 794 background-color: #d0d0d0; 795 border: 1px solid #000000; 796 border-bottom: 0; 797 798 opacity:0.4; 799 /*filter:alpha(opacity=40);*/ 800 801 padding: 2px; 802 font-size: 0.8em; 803} 804 805#eventlogControl { 806 position: fixed; 807 bottom: 75px; 808 right: 20px; 809 z-index: 1001; 810 811 width: 10px; 812 height: 10px; 813 814 background-color: #d0d0d0; 815 border: 1px solid #000000; 816 border-bottom: 0; 817 818 opacity:0.4; 819 /*filter:alpha(opacity=40);*/ 820 821 padding: 2px; 822 823 font-size: 0.8em; 824} 825 826/** 827 * The zoom bar 828 */ 829 830div#zoombar { 831 position: absolute; 832 width: 20px; 833 height: 145px; 834 z-index: 98; 835 left: 10px; 836 top: 40px; 837} 838 839div#zoombar a { 840 display: block; 841 width: 100%; 842 height: 20px; 843 844 background-color: #fbfbfb; 845 border: 1px solid #e5e5e5; 846 border-radius: 4px; 847 848 text-align: center; 849 vertical-align: middle; 850 line-height: 20px; 851 color: #43B3CF; 852 font-weight: bold; 853 cursor: pointer; 854} 855div#zoombar a.minus { 856 border-bottom: none; 857} 858div#zoombar a:hover { 859 background-color: #ffffff; 860 color: #779D2A; 861} 862div#zoombar div.drag { 863 position: relative; 864 height: 100px; 865 width: 100%; 866 background-image:url('../images/templates/default.zoombar_bg.gif') 867} 868div#zoombar div.drag div { 869 position: absolute; 870 left: 3px; 871 872 width: 14px; 873 height: 6px; 874 cursor: pointer; 875 876 background-color: #fbfbfb; 877 border: 1px solid #e5e5e5; 878} 879 880input[type=checkbox] { 881 position: relative; 882 vertical-align: middle; 883 bottom: 1px; 884} 885 886/* edit main config dialog navigation (tabbing) */ 887 888#popupWindowContent ul.nav { 889 list-style: none; 890 height: 21px; 891 margin: 0; 892 padding: 0; 893 border-bottom: 1px solid #e5e5e5; 894 margin-bottom: 10px; 895} 896 897#popupWindow ul.nav li { 898 float: left; 899} 900 901#popupWindow ul.nav li a { 902 display: block; 903 height: 20px; 904 padding: 0 5px; 905 margin: 0 1px; 906 line-height: 20px; 907 border: 1px solid #e5e5e5; 908 border-top-left-radius: 5px; 909 border-top-right-radius: 5px; 910} 911 912#popupWindow ul.nav li a:hover { 913 text-decoration: none; 914 color:#779D2A; 915 background-color: #fbfbfb; 916} 917 918#popupWindow ul.nav li.active a { 919 border-bottom: 1px solid #fff; 920 color: #000; 921} 922 923/* search dialog */ 924 925td#popupWindow div.simple_form input#highlightInput { 926 width: 200px; 927} 928 929td#popupWindow div.simple_form .submit { 930 display: inline-block; 931 margin: 2px 10px; 932} 933 934/* ack dialog */ 935 936td#popupWindow form#acknowledge input#comment { 937 width: 246px; 938 margin-left: 5px; 939} 940 941body.add, body.add .leaflet-container { 942 cursor: crosshair; 943} 944 945/* edit grid */ 946div#grid div { 947 position: absolute; 948 z-index: 9; 949} 950 951div#grid div.vertical { 952 position: absolute; 953 width: 1px; 954} 955 956div#grid div.horizontal { 957 position: absolute; 958 height: 1px; 959} 960 961/* worldmap specific */ 962 963/* required styles */ 964 965.leaflet-map-pane, 966.leaflet-tile, 967.leaflet-marker-icon, 968.leaflet-marker-shadow, 969.leaflet-tile-pane, 970.leaflet-tile-container, 971.leaflet-overlay-pane, 972.leaflet-shadow-pane, 973.leaflet-marker-pane, 974.leaflet-popup-pane, 975.leaflet-overlay-pane svg, 976.leaflet-zoom-box, 977.leaflet-image-layer, 978.leaflet-layer { 979 position: absolute; 980 left: 0; 981 top: 0; 982 } 983.leaflet-container { 984 overflow: hidden; 985 -ms-touch-action: none; 986 } 987.leaflet-tile, 988.leaflet-marker-icon, 989.leaflet-marker-shadow { 990 -webkit-user-select: none; 991 -moz-user-select: none; 992 user-select: none; 993 -webkit-user-drag: none; 994 } 995.leaflet-marker-icon, 996.leaflet-marker-shadow { 997 display: block; 998 } 999/* map is broken in FF if you have max-width: 100% on tiles */ 1000.leaflet-container img { 1001 max-width: none !important; 1002 } 1003/* stupid Android 2 doesn't understand "max-width: none" properly */ 1004.leaflet-container img.leaflet-image-layer { 1005 max-width: 15000px !important; 1006 } 1007.leaflet-tile { 1008 filter: inherit; 1009 visibility: hidden; 1010 } 1011.leaflet-tile-loaded { 1012 visibility: inherit; 1013 } 1014.leaflet-zoom-box { 1015 width: 0; 1016 height: 0; 1017 } 1018/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ 1019.leaflet-overlay-pane svg { 1020 -moz-user-select: none; 1021 } 1022 1023.leaflet-tile-pane { z-index: 2; } 1024.leaflet-objects-pane { z-index: 3; } 1025.leaflet-overlay-pane { z-index: 4; } 1026.leaflet-shadow-pane { z-index: 5; } 1027.leaflet-marker-pane { z-index: 6; } 1028.leaflet-popup-pane { z-index: 7; } 1029 1030.leaflet-vml-shape { 1031 width: 1px; 1032 height: 1px; 1033 } 1034.lvml { 1035 behavior: url(#default#VML); 1036 display: inline-block; 1037 position: absolute; 1038 } 1039 1040 1041/* control positioning */ 1042 1043.leaflet-control { 1044 position: relative; 1045 z-index: 7; 1046 pointer-events: auto; 1047 } 1048.leaflet-top, 1049.leaflet-bottom { 1050 position: absolute; 1051 z-index: 1000; 1052 pointer-events: none; 1053 } 1054.leaflet-top { 1055 top: 0; 1056 } 1057.leaflet-right { 1058 right: 0; 1059 } 1060.leaflet-bottom { 1061 bottom: 0; 1062 } 1063.leaflet-left { 1064 left: 0; 1065 } 1066.leaflet-control { 1067 float: left; 1068 clear: both; 1069 } 1070.leaflet-right .leaflet-control { 1071 float: right; 1072 } 1073.leaflet-top .leaflet-control { 1074 margin-top: 10px; 1075 } 1076.leaflet-bottom .leaflet-control { 1077 margin-bottom: 10px; 1078 } 1079.leaflet-left .leaflet-control { 1080 margin-left: 10px; 1081 } 1082.leaflet-right .leaflet-control { 1083 margin-right: 10px; 1084 } 1085 1086 1087/* zoom and fade animations */ 1088 1089.leaflet-fade-anim .leaflet-tile, 1090.leaflet-fade-anim .leaflet-popup { 1091 opacity: 0; 1092 -webkit-transition: opacity 0.2s linear; 1093 -moz-transition: opacity 0.2s linear; 1094 -o-transition: opacity 0.2s linear; 1095 transition: opacity 0.2s linear; 1096 } 1097.leaflet-fade-anim .leaflet-tile-loaded, 1098.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { 1099 opacity: 1; 1100 } 1101 1102.leaflet-zoom-anim .leaflet-zoom-animated { 1103 -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); 1104 -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); 1105 -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1); 1106 transition: transform 0.25s cubic-bezier(0,0,0.25,1); 1107 } 1108.leaflet-zoom-anim .leaflet-tile, 1109.leaflet-pan-anim .leaflet-tile, 1110.leaflet-touching .leaflet-zoom-animated { 1111 -webkit-transition: none; 1112 -moz-transition: none; 1113 -o-transition: none; 1114 transition: none; 1115 } 1116 1117.leaflet-zoom-anim .leaflet-zoom-hide { 1118 visibility: hidden; 1119 } 1120 1121 1122/* cursors */ 1123 1124.leaflet-clickable { 1125 cursor: pointer; 1126 } 1127.leaflet-container { 1128 cursor: -webkit-grab; 1129 cursor: -moz-grab; 1130 } 1131.leaflet-popup-pane, 1132.leaflet-control { 1133 cursor: auto; 1134 } 1135.leaflet-dragging .leaflet-container, 1136.leaflet-dragging .leaflet-clickable { 1137 cursor: move; 1138 cursor: -webkit-grabbing; 1139 cursor: -moz-grabbing; 1140 } 1141 1142 1143/* visual tweaks */ 1144 1145.leaflet-container { 1146 background: #ddd; 1147 outline: 0; 1148 } 1149.leaflet-container a { 1150 color: #0078A8; 1151 } 1152.leaflet-zoom-box { 1153 border: 2px dotted #38f; 1154 background: rgba(255,255,255,0.5); 1155 } 1156 1157 1158/* general typography */ 1159.leaflet-container { 1160 font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; 1161 } 1162 1163 1164/* general toolbar styles */ 1165 1166.leaflet-bar { 1167 box-shadow: 0 1px 5px rgba(0,0,0,0.65); 1168 border-radius: 4px; 1169 } 1170.leaflet-bar a, 1171.leaflet-bar a:hover { 1172 background-color: #fff; 1173 border-bottom: 1px solid #ccc; 1174 width: 26px; 1175 height: 26px; 1176 line-height: 26px; 1177 display: block; 1178 text-align: center; 1179 text-decoration: none; 1180 color: black; 1181 } 1182.leaflet-bar a, 1183.leaflet-control-layers-toggle { 1184 background-position: 50% 50%; 1185 background-repeat: no-repeat; 1186 display: block; 1187 } 1188.leaflet-bar a:hover { 1189 background-color: #f4f4f4; 1190 } 1191.leaflet-bar a:first-child { 1192 border-top-left-radius: 4px; 1193 border-top-right-radius: 4px; 1194 } 1195.leaflet-bar a:last-child { 1196 border-bottom-left-radius: 4px; 1197 border-bottom-right-radius: 4px; 1198 border-bottom: none; 1199 } 1200.leaflet-bar a.leaflet-disabled { 1201 cursor: default; 1202 background-color: #f4f4f4; 1203 color: #bbb; 1204 } 1205 1206.leaflet-touch .leaflet-bar a { 1207 width: 30px; 1208 height: 30px; 1209 line-height: 30px; 1210 } 1211 1212 1213/* zoom control */ 1214 1215.leaflet-control-zoom-in, 1216.leaflet-control-zoom-out { 1217 font: bold 18px 'Lucida Console', Monaco, monospace; 1218 text-indent: 1px; 1219 } 1220.leaflet-control-zoom-out { 1221 font-size: 20px; 1222 } 1223 1224.leaflet-touch .leaflet-control-zoom-in { 1225 font-size: 22px; 1226 } 1227.leaflet-touch .leaflet-control-zoom-out { 1228 font-size: 24px; 1229 } 1230 1231 1232/* layers control */ 1233 1234.leaflet-control-layers { 1235 box-shadow: 0 1px 5px rgba(0,0,0,0.4); 1236 background: #fff; 1237 border-radius: 5px; 1238 } 1239.leaflet-control-layers-toggle { 1240 background-image: url(../../frontend/nagvis-js/images/internal/leaflet/layers.png); 1241 width: 36px; 1242 height: 36px; 1243 } 1244.leaflet-retina .leaflet-control-layers-toggle { 1245 background-image: url(../../frontend/nagvis-js/images/internal/leaflet/layers-2x.png); 1246 background-size: 26px 26px; 1247 } 1248.leaflet-touch .leaflet-control-layers-toggle { 1249 width: 44px; 1250 height: 44px; 1251 } 1252.leaflet-control-layers .leaflet-control-layers-list, 1253.leaflet-control-layers-expanded .leaflet-control-layers-toggle { 1254 display: none; 1255 } 1256.leaflet-control-layers-expanded .leaflet-control-layers-list { 1257 display: block; 1258 position: relative; 1259 } 1260.leaflet-control-layers-expanded { 1261 padding: 6px 10px 6px 6px; 1262 color: #333; 1263 background: #fff; 1264 } 1265.leaflet-control-layers-selector { 1266 margin-top: 2px; 1267 position: relative; 1268 top: 1px; 1269 } 1270.leaflet-control-layers label { 1271 display: block; 1272 } 1273.leaflet-control-layers-separator { 1274 height: 0; 1275 border-top: 1px solid #ddd; 1276 margin: 5px -10px 5px -6px; 1277 } 1278 1279 1280/* attribution and scale controls */ 1281 1282.leaflet-container .leaflet-control-attribution { 1283 background: #fff; 1284 background: rgba(255, 255, 255, 0.7); 1285 margin: 0; 1286 } 1287.leaflet-control-attribution, 1288.leaflet-control-scale-line { 1289 padding: 0 5px; 1290 color: #333; 1291 } 1292.leaflet-control-attribution a { 1293 text-decoration: none; 1294 } 1295.leaflet-control-attribution a:hover { 1296 text-decoration: underline; 1297 } 1298.leaflet-container .leaflet-control-attribution, 1299.leaflet-container .leaflet-control-scale { 1300 font-size: 11px; 1301 } 1302.leaflet-left .leaflet-control-scale { 1303 margin-left: 5px; 1304 } 1305.leaflet-bottom .leaflet-control-scale { 1306 margin-bottom: 5px; 1307 } 1308.leaflet-control-scale-line { 1309 border: 2px solid #777; 1310 border-top: none; 1311 line-height: 1.1; 1312 padding: 2px 5px 1px; 1313 font-size: 11px; 1314 white-space: nowrap; 1315 overflow: hidden; 1316 -moz-box-sizing: content-box; 1317 box-sizing: content-box; 1318 1319 background: #fff; 1320 background: rgba(255, 255, 255, 0.5); 1321 } 1322.leaflet-control-scale-line:not(:first-child) { 1323 border-top: 2px solid #777; 1324 border-bottom: none; 1325 margin-top: -2px; 1326 } 1327.leaflet-control-scale-line:not(:first-child):not(:last-child) { 1328 border-bottom: 2px solid #777; 1329 } 1330 1331.leaflet-touch .leaflet-control-attribution, 1332.leaflet-touch .leaflet-control-layers, 1333.leaflet-touch .leaflet-bar { 1334 box-shadow: none; 1335 } 1336.leaflet-touch .leaflet-control-layers, 1337.leaflet-touch .leaflet-bar { 1338 border: 2px solid rgba(0,0,0,0.2); 1339 background-clip: padding-box; 1340 } 1341 1342 1343.leaflet-oldie .leaflet-control-zoom, 1344.leaflet-oldie .leaflet-control-layers { 1345 border: 1px solid #999; 1346 } 1347 1348 1349/* div icon */ 1350 1351.leaflet-div-icon { 1352 background: #fff; 1353 border: 1px solid #666; 1354 } 1355 1356/* disable focus effect (border), needed for worldmap, but ok for whole nagvis */ 1357input:focus, 1358select:focus, 1359textarea:focus, 1360button:focus, 1361a:focus, 1362div:focus { 1363 outline: none; 1364} 1365