www/css/ext6-pve.css

   1 /* overwrite to use full black for enabled buttons */
   2 .x-btn-inner-default-toolbar-small {
   3     font: 300 12px/16px helvetica, arial, verdana, sans-serif;
   4     color: #000;
   5     padding: 0 5px;
   6     max-width: 100%;
   7 }
   8
   9 /* add missing class for context menu header */
  10 .x-menu-header {
  11     font: 400 13px/20px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
  12     color: #fff;
  13     padding: 4px;
  14     background-color: #3892d4;
  15 }
  16
  17 /* make the upper window end visible */
  18 .x-css-shadow {
  19     box-shadow: rgb(136,136,136) 0px -1px 15px !important;
  20 }
  21
  22 /* reduce tree space */
  23 .x-grid-cell-inner-treecolumn { /* vertical padding */
  24     padding: 4px 0px 3px 0px;
  25 }
  26
  27 /* horizontal distance between parent and child leaf */
  28 .x-tree-elbow-img {
  29     width: 14px;
  30 }
  31
  32 /* adjust horizontal position of menu icons */
  33 .x-menu-item-icon-default {
  34     top: 5px;
  35     left: 3px;
  36     font-size: 14px;
  37 }
  38
  39 /* this gives a better placement for the font-awesome icons */
  40 .x-btn-icon-el-default-toolbar-small {
  41     height: 14px;
  42 }
  43
  44 /* this icon looks weird in sizes not n*14px */
  45 .x-btn-icon-el-default-toolbar-small.fa-ellipsis-v {
  46     font-size: 14px;
  47 }
  48
  49 .x-btn-icon-el-default-small {
  50     height: 14px;
  51     font-size: 14px;
  52 }
  53
  54 /* icons for tree/snapshots/menus/etc.. */
  55
  56 /* overwrite folder icons of theme */
  57 .x-tree-icon-parent,
  58 .x-tree-icon-parent-expanded,
  59 .x-tree-icon-leaf {
  60     background: none;
  61     display: inline-block;
  62     font: normal normal normal 14px/1 FontAwesome;
  63     font-size: inherit;
  64     text-rendering: auto;
  65     -webkit-font-smoothing: antialiased;
  66     -moz-osx-font-smoothing: grayscale;
  67     font-size: 1.25em;
  68     line-height: 1.6em;
  69     color: #555;
  70     margin-right: 5px;
  71 }
  72
  73 .x-tree-icon-parent:not(.x-tree-icon-custom):before {
  74    content: "\f114";
  75 }
  76
  77 .x-tree-icon-parent-expanded:not(.x-tree-icon-custom):before {
  78     content: "\f115";
  79 }
  80
  81 /* loading in task list */
  82 .x-grid-row-loading {
  83     background: no-repeat center center;
  84     background-image:url(../ext6/theme-crisp/resources/images/loadmask/loading.gif);
  85 }
  86
  87 /* console icon in task list */
  88 .x-grid-row-console {
  89     background: no-repeat center center;
  90     background-image:url(../images/icon-display.png);
  91 }
  92
  93 /* for font-awesome colors */
  94 /* tree icons */
  95
  96 /* big symbols */
  97 .x-tree-icon-custom {
  98     font-size: 1.25em;
  99     line-height: 1.6em;
 100     color: #555;
 101     margin-right: 5px;
 102 }
 103
 104 /* grid icons (resources, etc) */
 105 .x-grid-icon-custom {
 106     font-size: 1.25em;
 107     color: #555;
 108     margin-right: 5px;
 109 }
 110
 111 /* the running vms are darker */
 112 .x-tree-icon-custom.running,
 113 .x-grid-icon-custom.running {
 114     color: #000;
 115 }
 116
 117 /* stopped and offline items are greyed out */
 118 .x-tree-icon-custom.stopped,
 119 .x-grid-icon-custom.stopped,
 120 .x-tree-icon-custom.offline,
 121 .x-grid-icon-custom.offline {
 122     color: #cfcfcf;
 123 }
 124
 125 /* the small icons */
 126 .x-tree-icon-custom:after,
 127 .x-grid-icon-custom:after {
 128     position: relative;
 129     left: -5px;
 130     top: 1px;
 131     font-size: 0.75em;
 132     text-shadow: -1px 0px 2px #fff;
 133     content: "\ ";
 134 }
 135
 136 /* the green check */
 137 .x-tree-icon-custom.online:after,
 138 .x-grid-icon-custom.online:after {
 139     content: "\f058";
 140     color: #21BF4B;
 141 }
 142
 143 /* the grey '?' */
 144 .x-tree-icon-custom.unknown:after,
 145 .x-grid-icon-custom.unknown:after {
 146     content: "\f059";
 147     color: #888;
 148 }
 149
 150 /* the play symbol */
 151 .x-tree-icon-custom.running:after,
 152 .x-grid-icon-custom.running:after {
 153     content: "\f04b";
 154     color: #21BF4B;
 155 }
 156
 157 /* the pause symbol */
 158 .x-tree-icon-custom.paused:after,
 159 .x-grid-icon-custom.paused:after {
 160     content: "\f04c";
 161     color: #CC8E00;
 162     font-size: 0.6em;
 163 }
 164
 165 /* the suspend symbol */
 166 .x-tree-icon-custom.suspended:after,
 167 .x-grid-icon-custom.suspended:after {
 168     content: "\f04c";
 169     color: #CC8E00;
 170     font-size: 0.6em;
 171 }
 172
 173 /* lock icons */
 174 .x-tree-icon-custom.locked:after,
 175 .x-grid-icon-custom.locked:after {
 176     content: "\f023";
 177     color: #000000;
 178 }
 179
 180 .x-tree-icon-custom.lock-backup:after,
 181 .x-grid-icon-custom.lock-backup:after {
 182     content: "\f0c7";
 183     color: #000000;
 184 }
 185
 186 .x-tree-icon-custom.lock-migrate:after,
 187 .x-grid-icon-custom.lock-migrate:after {
 188     content: "\f1d9";
 189     /* color: #21BF4B; */
 190     color: #000000;
 191     font-size: 0.75em;
 192 }
 193
 194
 195 .x-tree-icon-custom.lock-suspending:after,
 196 .x-grid-icon-custom.lock-suspending:after {
 197     content: "\f019";
 198     color: #CC8E00;
 199     font-size: 0.75em;
 200 }
 201
 202 .x-tree-icon-custom.lock-suspended:after,
 203 .x-grid-icon-custom.lock-suspended:after {
 204     content: "\f019";
 205     color: #000000;
 206     font-size: 0.75em;
 207 }
 208
 209 /* yellow ! triangle */
 210 .x-tree-icon-custom.pending:after,
 211 .x-grid-icon-custom.pending:after,
 212 .x-tree-icon-custom.io-error:after,
 213 .x-grid-icon-custom.io-error:after,
 214 .x-tree-icon-custom.internal-error:after,
 215 .x-grid-icon-custom.internal-error:after,
 216 .x-tree-icon-custom.guest-panicked:after,
 217 .x-grid-icon-custom.guest-panicked:after {
 218     content: "\f071";
 219     color: #FFCC00;
 220 }
 221
 222 /* the red x */
 223 .x-tree-icon-custom.error:after,
 224 .x-grid-icon-custom.error:after,
 225 .x-tree-icon-custom.offline:after,
 226 .x-grid-icon-custom.offline:after,
 227 .x-tree-icon-custom.ha-error:after,
 228 .x-grid-icon-custom.ha-error:after {
 229     content: "\f057";
 230     color: #CC1800;
 231 }
 232
 233 /*
 234  * using background-image doesn't work for treelist-items, so use content. See:
 235  * https://forum.sencha.com/forum/showthread.php?339656-extjs-6-treelist-custom-iconcls-can-not-working
 236  */
 237 .pve-itype-treelist-item-icon-cdrom {
 238     top: 50%;
 239     transform: translateY(-50%);
 240     content: url(../images/icon-cd.png);
 241 }
 242
 243 /* the lxc template */
 244 .x-tree-icon-custom.lxc:after,
 245 .x-grid-icon-custom.lxc:after {
 246     content: "\f1b2";
 247     background: #fff;
 248 }
 249
 250 .x-treelist-item-icon.lxc:after {
 251     content: "\f1b2";
 252     background: #fff;
 253     font-size: 0.75em;
 254     margin-left: -25%;
 255 }
 256
 257 /* the qemu template */
 258 .x-tree-icon-custom.qemu:after,
 259 .x-grid-icon-custom.qemu:after {
 260     content : "\f108";
 261     background: #fff;
 262 }
 263
 264 /* fixes background on mouseover and selected items */
 265 .x-treelist-item-over .lxc:after,
 266 .x-grid-item-over .qemu:after,
 267 .x-grid-item-over .lxc:after {
 268     background-color: #e2eff9;
 269     text-shadow: -1px 0px 2px #e2eff9;
 270 }
 271
 272 .x-treelist-item-selected .lxc:after,
 273 .x-grid-item-selected .qemu:after,
 274 .x-grid-item-selected .lxc:after {
 275     background-color: #c2ddf2;
 276     text-shadow: -1px 0px 2px #c2ddf2;
 277 }
 278
 279 .pve-itype-icon-virt-viewer,
 280 .pve-itype-icon-tigervnc,
 281 .pve-itype-icon-novnc,
 282 .pve-itype-icon-xtermjs,
 283 .pve-itype-icon-display,
 284 .pve-itype-icon-network,
 285 .pve-itype-icon-network-server,
 286 .pve-itype-icon-keyboard,
 287 .pve-itype-icon-cdrom,
 288 .pve-itype-icon-qemu,
 289 .pve-itype-icon-qemu-template,
 290 .pve-itype-icon-qemu-running,
 291 .pve-itype-icon-lxc,
 292 .pve-itype-icon-lxc-template,
 293 .pve-itype-icon-lxc-running,
 294 .pve-itype-icon-swap,
 295 .pve-itype-icon-node,
 296 .pve-itype-icon-node-running,
 297 .pve-itype-icon-storage,
 298 .pve-itype-icon-pool,
 299 .pve-itype-icon-itype,
 300 .pve-itype-icon-usb,
 301 .pve-itype-icon-serial,
 302 .pve-itype-icon-cloud,
 303 .pve-itype-icon-pci,
 304 .pve-itype-icon-cpu,
 305 .pve-itype-icon-memory,
 306 .pve-itype-icon-die {
 307     background-repeat: no-repeat;
 308     background-position:3px center;
 309     padding-left: 20px;
 310 }
 311
 312 /* fix alignment for VM hardware add menu */
 313 .pve-add-hw-menu .x-menu-item-icon:not(.fa) {
 314     left: 1px;
 315 }
 316
 317 .pve-itype-fa > .x-grid-cell-inner{
 318     padding-left: 3px;
 319 }
 320
 321 .pve-grid-fa {
 322     margin-right: 10px;
 323     font-size: 14px;
 324 }
 325
 326 .pve-itype-icon-qemu,
 327 .x-tree-node-computer,
 328 .x-grid-tree-node-expanded .x-tree-node-computer {
 329     background-image:url(../images/icon-display.png);
 330 }
 331
 332 .pve-itype-icon-lxc,
 333 .x-tree-node-lxc,
 334 .x-grid-tree-node-expanded .x-tree-node-lxc {
 335     background-image:url(../images/lxc-off.png);
 336 }
 337
 338 .pve-itype-icon-swap,
 339 .x-tree-node-lxc-swap,
 340 .x-grid-tree-node-expanded .x-tree-lxc-swap {
 341     background-image:url(../images/icon-swap.png);
 342 }
 343
 344 .pve-itype-icon-lxc-running,
 345 .x-tree-node-lxc-running,
 346 .x-grid-tree-node-expanded .x-tree-node-lxc-running {
 347     background-image:url(../images/lxc-on.png);
 348 }
 349
 350 .pve-itype-icon-storage,
 351 .x-tree-node-harddisk,
 352 .x-grid-tree-node-expanded .x-tree-node-harddisk {
 353     background-image:url(../images/icon-harddisk.png);
 354 }
 355
 356 .x-tree-node-snapshot,
 357 .x-grid-tree-node-expanded .x-tree-node-snapshot {
 358     background-image:url(../images/snapshot.png);
 359 }
 360
 361 .pve-itype-icon-itype {
 362     background-image:url(../ext6/theme-classic/resources/images/tree/folder.gif);
 363 }
 364
 365 .pve-itype-icon-network-server {
 366     background-image:url(../images/network-server.png);
 367 }
 368
 369 .pve-itype-icon-network {
 370     background-image:url(../images/icon-network.png);
 371 }
 372
 373 .pve-itype-icon-keyboard {
 374     background-image:url(../images/icon-keyboard.png);
 375 }
 376
 377 .pve-itype-icon-cdrom {
 378     background-size: 16px;
 379     background-image:url(../images/icon-cd-drive.svg);
 380 }
 381
 382 .pve-itype-icon-display {
 383     background-image:url(../images/icon-display.png);
 384 }
 385
 386 .pve-itype-icon-tigervnc {
 387     background-image:url(../images/tigervnc.png);
 388 }
 389
 390 .pve-itype-icon-novnc {
 391     background-image:url(../images/novnc.png);
 392 }
 393
 394 .pve-itype-icon-virt-viewer {
 395     background-image:url(../images/virt-viewer.png);
 396 }
 397
 398 .pve-itype-icon-xtermjs {
 399     background-image:url(../images/xtermjs.png);
 400 }
 401
 402 .pve-itype-icon-usb {
 403     background-image:url(../images/icon-usb.png);
 404 }
 405
 406 .pve-itype-icon-pci {
 407     background-size: 16px 16px;
 408     background-image:url(../images/icon-pci.svg);
 409 }
 410
 411 .pve-itype-icon-serial {
 412     background-size: 16px;
 413     background-image:url(../images/icon-serial.svg);
 414 }
 415
 416 .pve-itype-icon-cloud {
 417     background-size: 16px;
 418     background-image:url(../images/icon-cloud.svg);
 419 }
 420
 421 .pve-itype-icon-die {
 422     background-size: 16px;
 423     background-image:url(../images/icon-die.svg);
 424 }
 425
 426 .pve-itype-icon-cpu {
 427     background-size: 16px;
 428     background-image:url(../images/icon-cpu.svg);
 429 }
 430
 431
 432 .pve-itype-icon-memory {
 433     background-size: 16px;
 434     background-image:url(../images/icon-memory.svg);
 435 }
 436
 437 .pve-icon {
 438     height: 16px;
 439     background-position: bottom;
 440     vertical-align: bottom;
 441     padding: 0;
 442 }
 443
 444 /* displayfield minheight is wrong */
 445 .x-form-display-field-default {
 446     min-height: 20px;
 447 }
 448
 449 .x-button-reset:before {
 450     font-size: 16px;
 451 }
 452
 453 /* for resetcolumnsbutton */
 454 .x-button-reset:after{
 455     content: "\f0e7 ";
 456     position: relative;
 457     text-shadow: 0 0 2px #fff;
 458     left: -3px;
 459     top: 2px;
 460 }
 461
 462 .proxmox-inline-button .x-btn-inner {
 463     color: black;
 464 }
 465
 466 /* for info widget */
 467 div.left-aligned {
 468     float: left;
 469 }
 470
 471 div.right-aligned {
 472     float: right;
 473 }
 474
 475 .x-progress.critical .x-progress-bar{
 476     background-color: #FF8888;
 477 }
 478
 479 .x-progress.warning .x-progress-bar{
 480     background-color: #FFCC00;
 481 }
 482
 483 .x-treelist-pve-nav {
 484     background-color: #f5f5f5;
 485 }
 486
 487 .x-treelist-row {
 488     margin-top: 5px;
 489 }
 490
 491 .x-treelist-item-icon {
 492     color: #000;
 493     margin-left: 2px;
 494 }
 495
 496 .x-treelist-item-text {
 497     color: #000;
 498     padding-left: 5px;
 499     padding-right: 5px;
 500 }
 501
 502 .fa-ceph:before {
 503     width: 14px;
 504     height: 14px;
 505     position: absolute;
 506     left: 1px;
 507     top: 4px;
 508     background-image:url(../images/logo-ceph.png);
 509     background-size: 14px 14px;
 510     content: ' ';
 511 }
 512
 513 .x-fa-sdn-treelist:before {
 514     width: 14px;
 515     height: 14px;
 516     position: absolute;
 517     left: 1px;
 518     top: 4px;
 519 }
 520
 521 .fa-sdn:before {
 522     background-image:url(../images/icon-sdn.svg);
 523     background-size: 14px 14px;
 524     content: ' ';
 525 }
 526
 527 .fa-network-wired:before {
 528     background-image:url(../images/icon-fa-network-wired.svg);
 529     background-size: 14px 14px;
 530     content: ' ';
 531 }
 532
 533 .x-fa-treepanel:before {
 534     width: 16px;
 535     height: 24px;
 536     display: block;
 537     background-repeat: no-repeat;
 538     background-position: center;
 539 }
 540
 541 .x-tree-icon-none {
 542     display: none;
 543 }
 544
 545 .x-treelist-row-over > * > .x-treelist-item-icon,
 546 .x-treelist-row-over > * > .x-treelist-item-text{
 547     color: #000;
 548 }
 549
 550 /* for the ceph monitor widgets */
 551 div.monitor {
 552         text-align:left;
 553         border:#cfcfcf solid 1px;
 554         border-radius:2px;
 555         margin: 2px;
 556         padding: 5px 8px;
 557 }
 558
 559 /* for auto layout */
 560 div.inline-block {
 561     display: inline-block;
 562     vertical-align: top;
 563 }
 564
 565 /* ceph dashboard osd table styling */
 566 table.osds {
 567     border-collapse: collapse;
 568     margin: auto;
 569 }
 570
 571 table.osds td {
 572     padding: 4px;
 573     text-align: right;
 574     border-right: 1px solid #cfcfcf;
 575 }
 576
 577 table.osds td:last-of-type {
 578     border-right: 0;
 579 }
 580
 581 table.osds tr {
 582     border-bottom: 1px solid #cfcfcf;
 583 }
 584
 585 table.osds tr:last-of-type {
 586     border-bottom: 0;
 587 }
 588
 589 table.osds td:first-of-type {
 590     text-align: left;
 591 }
 592
 593 .pointer {
 594     cursor: pointer;
 595 }
 596
 597 .cursor-move {
 598     cursor: move;
 599 }
 600
 601 .x-grid-filters-filtered-column {
 602     font-style: italic;
 603     font-weight: bold;
 604 }
 605
 606 .x-grid-filters-filtered-column .x-column-header-text:after {
 607     font: normal normal normal 14px/1 FontAwesome;
 608     text-rendering: auto;
 609     -webkit-font-smoothing: antialiased;
 610     -moz-osx-font-smoothing: grayscale;
 611     content: " \f0b0 ";
 612     color: #555;
 613     float: right;
 614     padding-right: 1em;
 615 }
 616
 617 .proxmox-invalid-row {
 618     background-color: #f3d6d7;
 619 }
 620
 621 .pve-static-mask div.x-mask-msg-text {
 622     padding: 10px;
 623     background-image: none;
 624 }
 625
 626 .pve-toolbar-bg {
 627     background-color: #f5f5f5;
 628 }
 629
 630 .x-fa {
 631     display: inline-block;
 632     font: normal normal normal 14px/1 FontAwesome;
 633     text-rendering: auto;
 634     -webkit-font-smoothing: antialiased;
 635     -moz-osx-font-smoothing: grayscale;
 636 }
 637
 638 .usage-wrapper {
 639     margin-left: -7px;
 640     vertical-align: text-bottom;
 641     display: inline-block;
 642     width: 8px;
 643     height: 1.2em;
 644     border: 1px solid #555;
 645     border-radius: 1px;
 646     padding: 1px;
 647 }
 648
 649 .usage-negative {
 650     left: 0px;
 651     right:0px;
 652 }
 653
 654 .usage {
 655     left: 0px;
 656     right: 0px;
 657     background-color: #555;
 658 }
 659
 660 .install-mask {
 661     background-color: rgb(245, 245, 245);
 662     color: #000;
 663 }
 664
 665 .x-pveColorPicker-default-cell > .x-grid-cell-inner {
 666     padding-top: 0px;
 667     padding-bottom: 0px;
 668 }
 669
 670 .pve-edit-tag > i {
 671     cursor: pointer;
 672     font-size: 14px;
 673     line-height: 15px;
 674     height: 15px;
 675 }
 676
 677 .pve-edit-tag > i.handle {
 678     padding-right: 5px;
 679     cursor: grab;
 680 }
 681
 682 .hide-handles .pve-edit-tag > i.handle {
 683     display: none;
 684     padding-right: 0px;
 685 }
 686
 687 .pve-edit-tag > i.action {
 688     padding-left: 5px;
 689 }
 690
 691 .pve-edit-tag.normal > i {
 692     display: none;
 693 }
 694
 695 .pve-edit-tag.editable span {
 696     background-color: #ffffff;
 697     border: 1px solid #a8a8a8;
 698     color: #000;
 699     padding-left: 2px;
 700     padding-right: 2px;
 701     min-width: 2em;
 702     display: inline-block;
 703     line-height: 15px;
 704     height: 15px;
 705     vertical-align: top;
 706     box-sizing: content-box;
 707 }
 708
 709 .pve-tag-inline-button {
 710     cursor: pointer;
 711     padding-left: 2px;
 712 }
 713
 714 .x-grid-item .x-item-disabled {
 715     opacity: 0.3;
 716 }
 717
 718 .pmx-action-hidden:before {
 719     opacity: 0.0;
 720     cursor: default;
 721 }
 722
 723 .pve-ceph-warning-detail {
 724     overflow: auto;
 725     white-space: pre-wrap;
 726     margin: 0;
 727     padding-bottom: 10px;
 728     font-weight: normal;
 729 }
 730
 731 .pve-ceph-status-busy {
 732     color: #3892d4;
 733 }
 734
 735 .pmx-opacity-75 {
 736     opacity: 0.75;
 737 }
 738
 739 /* tag edit fields must be aligned manually in the fieldset */
 740 .proxmox-tag-fieldset.proxmox-tags-full .x-component.x-column {
 741     margin: 2px;
 742 }
 743
 744 /* we have to override some styles for the tag tooltips,
 745  * otherwise extjs styling interferes */
 746 .pmx-tag-tooltip {
 747     background-color: transparent;
 748 }
 749
 750 .pmx-tag-tooltip .proxmox-tags-full > span {
 751     margin: 0px;
 752 }