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 red x */
 144 .x-tree-icon-custom.offline:after,
 145 .x-grid-icon-custom.offline:after,
 146 .x-tree-icon-custom.ha-error:after,
 147 .x-grid-icon-custom.ha-error:after {
 148     content: "\f057";
 149     color: #CC1800;
 150 }
 151
 152 /* yellow ! triangle */
 153 .x-tree-icon-custom.io-error:after,
 154 .x-grid-icon-custom.io-error:after,
 155 .x-tree-icon-custom.internal-error:after,
 156 .x-grid-icon-custom.internal-error:after,
 157 .x-tree-icon-custom.guest-panicked:after,
 158 .x-grid-icon-custom.guest-panicked:after {
 159     content: "\f071";
 160     color: #FFCC00;
 161 }
 162
 163 /* the grey '?' */
 164 .x-tree-icon-custom.unknown:after,
 165 .x-grid-icon-custom.unknown:after {
 166     content: "\f059";
 167     color: #888;
 168 }
 169
 170 /* the play symbol */
 171 .x-tree-icon-custom.running:after,
 172 .x-grid-icon-custom.running:after {
 173     content: "\f04b";
 174     color: #21BF4B;
 175 }
 176
 177 /* the pause symbol */
 178 .x-tree-icon-custom.paused:after,
 179 .x-grid-icon-custom.paused:after {
 180     content: "\f04c";
 181     color: #CC8E00;
 182     font-size: 0.6em;
 183 }
 184
 185 /* the suspend symbol */
 186 .x-tree-icon-custom.suspended:after,
 187 .x-grid-icon-custom.suspended:after {
 188     content: "\f04c";
 189     color: #CC8E00;
 190     font-size: 0.6em;
 191 }
 192
 193 /* the lxc template */
 194 .x-tree-icon-custom.lxc:after,
 195 .x-grid-icon-custom.lxc:after {
 196     content: "\f1b2";
 197     background: #fff;
 198 }
 199
 200 /* the qemu template */
 201 .x-tree-icon-custom.qemu:after,
 202 .x-grid-icon-custom.qemu:after {
 203     content : "\f108";
 204     background: #fff;
 205 }
 206
 207 /* fixes background on mouseover and selected items */
 208 .x-grid-item-over .qemu:after,
 209 .x-grid-item-over .lxc:after {
 210     background-color: #e2eff9;
 211     text-shadow: -1px 0px 2px #e2eff9;
 212 }
 213
 214 .x-grid-item-selected .qemu:after,
 215 .x-grid-item-selected .lxc:after {
 216     background-color: #c2ddf2;
 217     text-shadow: -1px 0px 2px #c2ddf2;
 218 }
 219
 220 .pve-itype-icon-virt-viewer,
 221 .pve-itype-icon-tigervnc,
 222 .pve-itype-icon-novnc,
 223 .pve-itype-icon-xtermjs,
 224 .pve-itype-icon-display,
 225 .pve-itype-icon-memory,
 226 .pve-itype-icon-processor,
 227 .pve-itype-icon-network,
 228 .pve-itype-icon-network-server,
 229 .pve-itype-icon-keyboard,
 230 .pve-itype-icon-cdrom,
 231 .pve-itype-icon-qemu,
 232 .pve-itype-icon-qemu-template,
 233 .pve-itype-icon-qemu-running,
 234 .pve-itype-icon-lxc,
 235 .pve-itype-icon-lxc-template,
 236 .pve-itype-icon-lxc-running,
 237 .pve-itype-icon-swap,
 238 .pve-itype-icon-node,
 239 .pve-itype-icon-node-running,
 240 .pve-itype-icon-storage,
 241 .pve-itype-icon-pool,
 242 .pve-itype-icon-itype,
 243 .pve-itype-icon-usb,
 244 .pve-itype-icon-serial,
 245 .pve-itype-icon-cloud,
 246 .pve-itype-icon-pci
 247 {
 248     background-repeat: no-repeat;
 249     background-position:3px center;
 250     padding-left: 20px;
 251 }
 252
 253 .pve-itype-icon-qemu,
 254 .x-tree-node-computer,
 255 .x-grid-tree-node-expanded .x-tree-node-computer
 256 {
 257     background-image:url(../images/icon-display.png);
 258 }
 259
 260 .pve-itype-icon-lxc,
 261 .x-tree-node-lxc,
 262 .x-grid-tree-node-expanded .x-tree-node-lxc
 263 {
 264     background-image:url(../images/lxc-off.png);
 265 }
 266
 267 .pve-itype-icon-swap,
 268 .x-tree-node-lxc-swap,
 269 .x-grid-tree-node-expanded .x-tree-lxc-swap
 270 {
 271     background-image:url(../images/icon-swap.png);
 272 }
 273
 274 .pve-itype-icon-lxc-running,
 275 .x-tree-node-lxc-running,
 276 .x-grid-tree-node-expanded .x-tree-node-lxc-running
 277 {
 278     background-image:url(../images/lxc-on.png);
 279 }
 280
 281 .pve-itype-icon-storage,
 282 .x-tree-node-harddisk,
 283 .x-grid-tree-node-expanded .x-tree-node-harddisk
 284 {
 285     background-image:url(../images/icon-harddisk.png);
 286 }
 287
 288 .x-tree-node-snapshot,
 289 .x-grid-tree-node-expanded .x-tree-node-snapshot
 290 {
 291     background-image:url(../images/snapshot.png);
 292 }
 293
 294 .pve-itype-icon-itype
 295 {
 296     background-image:url(../ext6/theme-classic/resources/images/tree/folder.gif);
 297 }
 298
 299 .pve-itype-icon-network-server
 300 {
 301     background-image:url(../images/network-server.png);
 302 }
 303
 304 .pve-itype-icon-network
 305 {
 306     background-image:url(../images/icon-network.png);
 307 }
 308
 309 .pve-itype-icon-keyboard
 310 {
 311     background-image:url(../images/icon-keyboard.png);
 312 }
 313
 314 .pve-itype-icon-cdrom
 315 {
 316     background-image:url(../images/icon-cd.png);
 317 }
 318
 319 .pve-itype-icon-memory
 320 {
 321     background-image:url(../images/icon-ram.png);
 322 }
 323
 324 .pve-itype-icon-processor
 325 {
 326     background-image:url(../images/icon-cpu.png);
 327 }
 328
 329 .pve-itype-icon-display
 330 {
 331     background-image:url(../images/icon-display.png);
 332 }
 333
 334 .pve-itype-icon-tigervnc
 335 {
 336     background-image:url(../images/tigervnc.png);
 337 }
 338
 339 .pve-itype-icon-novnc
 340 {
 341     background-image:url(../images/novnc.png);
 342 }
 343
 344 .pve-itype-icon-virt-viewer
 345 {
 346     background-image:url(../images/virt-viewer.png);
 347 }
 348
 349 .pve-itype-icon-xtermjs
 350 {
 351     background-image:url(../images/xtermjs.png);
 352 }
 353
 354 .pve-itype-icon-usb
 355 {
 356     background-image:url(../images/icon-usb.png);
 357 }
 358
 359 .pve-itype-icon-pci
 360 {
 361     background-image:url(../images/icon-pci.png);
 362 }
 363
 364 .pve-itype-icon-serial
 365 {
 366     background-size: 16px;
 367     background-image:url(../images/icon-serial.svg);
 368 }
 369
 370 .pve-itype-icon-cloud
 371 {
 372     background-size: 16px;
 373     background-image:url(../images/icon-cloud.svg);
 374 }
 375
 376 .pve-icon {
 377     height: 16px;
 378     background-position: bottom;
 379     vertical-align: bottom;
 380     padding: 0;
 381 }
 382
 383 /* displayfield minheight is wrong */
 384 .x-form-display-field-default {
 385     min-height: 20px;
 386 }
 387
 388 .x-button-reset:before {
 389     font-size: 16px;
 390 }
 391
 392 /* for resetcolumnsbutton */
 393 .x-button-reset:after{
 394     content: "\f0e7 ";
 395     position: relative;
 396     text-shadow: 0 0 2px #fff;
 397     left: -3px;
 398     top: 2px;
 399 }
 400
 401 .proxmox-inline-button .x-btn-inner {
 402     color: black;
 403 }
 404
 405 .pve-hint {
 406     background-color: LightYellow;
 407 }
 408
 409 /* for info widget */
 410 div.left-aligned {
 411     float: left;
 412 }
 413
 414 div.right-aligned {
 415     float: right;
 416 }
 417
 418 .x-progress.critical .x-progress-bar{
 419     background-color: #FF8888;
 420 }
 421
 422 .x-progress.warning .x-progress-bar{
 423     background-color: #FFCC00;
 424 }
 425
 426 .x-treelist-nav {
 427     background-color: #f5f5f5;
 428 }
 429
 430 .x-treelist-row {
 431     margin-top: 5px;
 432 }
 433
 434 .x-treelist-item-icon {
 435     color: #000;
 436     margin-left: 2px;
 437 }
 438
 439 .x-treelist-item-text {
 440     color: #000;
 441     padding-left: 5px;
 442     padding-right: 5px;
 443 }
 444
 445 .fa-ceph:before {
 446     width: 14px;
 447     height: 14px;
 448     position: absolute;
 449     left: 1px;
 450     top: 4px;
 451     background-image:url(../images/logo-ceph.png);
 452     background-size: 14px 14px;
 453     content: ' ';
 454 }
 455
 456 .x-treelist-row-over > * > .x-treelist-item-icon,
 457 .x-treelist-row-over > * > .x-treelist-item-text{
 458     color: #000;
 459 }
 460
 461 /* some icons have to be color manually */
 462 .black {
 463     color: #000;
 464 }
 465
 466 .normal {
 467     color: #c2ddf2;
 468 }
 469
 470 .faded {
 471     color: #cfcfcf;
 472 }
 473
 474 .good {
 475     color: #21BF4B;
 476 }
 477
 478 .warning {
 479     color: #fc0;
 480 }
 481
 482 .critical {
 483     color: #FF6C59;
 484 }
 485
 486 /* for the ceph monitor widgets */
 487 div.monitor {
 488         text-align:left;
 489         border:#cfcfcf solid 1px;
 490         border-radius:2px;
 491         margin: 2px;
 492         padding: 5px 8px;
 493 }
 494
 495 /* for auto layout */
 496 div.inline-block {
 497     display: inline-block;
 498     vertical-align: top;
 499 }
 500
 501 /* ceph dashboard osd table styling */
 502 table.osds {
 503     border-collapse: collapse;
 504     margin: auto;
 505 }
 506
 507 table.osds td {
 508     padding: 4px;
 509     text-align: right;
 510     border-right: 1px solid #cfcfcf;
 511 }
 512
 513 table.osds td:last-of-type {
 514     border-right: 0;
 515 }
 516
 517 table.osds tr {
 518     border-bottom: 1px solid #cfcfcf;
 519 }
 520
 521 table.osds tr:last-of-type {
 522     border-bottom: 0;
 523 }
 524
 525 table.osds td:first-of-type {
 526     text-align: left;
 527 }
 528
 529 .pointer {
 530     cursor: pointer;
 531 }
 532
 533 .x-grid-filters-filtered-column{
 534     font-style: italic;
 535     font-weight: bold;
 536 }
 537
 538 /* chrome 56 fix */
 539 .x-webkit .x-form-text {
 540     height: 100% !important;
 541 }
 542
 543 .x-webkit :not(.x-form-textarea-body) > .x-form-trigger-wrap {
 544     height: initial;
 545 }
 546
 547 .proxmox-invalid-row {
 548     background-color: #f3d6d7;
 549 }
 550
 551 .pve-static-mask div.x-mask-msg-text {
 552     padding: 10px;
 553     background-image: none;
 554 }
 555
 556 .x-fa {
 557     diplay: inline-block;
 558     font: normal normal normal 14px/1 FontAwesome;
 559     text-rendering: auto;
 560     -webkit-font-smoothing: antialiased;
 561     -moz-osx-font-smoothing: grayscale;
 562 }
 563
 564 .usage-wrapper {
 565     margin-left: -7px;
 566     vertical-align: text-bottom;
 567     display: inline-block;
 568     width: 8px;
 569     height: 1.2em;
 570     border: 1px solid #555;
 571     border-radius: 1px;
 572     padding: 1px;
 573 }
 574
 575 .usage-negative {
 576     left: 0px;
 577     right:0px;
 578 }
 579
 580 .usage {
 581     left: 0px;
 582     right: 0px;
 583     background-color: #555;
 584 }