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     background: none;
  60     display: inline-block;
  61     font: normal normal normal 14px/1 FontAwesome;
  62     font-size: inherit;
  63     text-rendering: auto;
  64     -webkit-font-smoothing: antialiased;
  65     -moz-osx-font-smoothing: grayscale;
  66     font-size: 1.25em;
  67     line-height: 1.6em;
  68     color: #555;
  69     margin-right: 5px;
  70 }
  71
  72 .x-tree-icon-parent:not(.x-tree-icon-custom):before {
  73    content: "\f114";
  74 }
  75
  76 .x-tree-icon-parent-expanded:not(.x-tree-icon-custom):before {
  77     content: "\f115";
  78 }
  79
  80 /* loading in task list */
  81 .x-grid-row-loading {
  82     background: no-repeat center center;
  83     background-image:url(../ext6/theme-crisp/resources/images/loadmask/loading.gif);
  84 }
  85
  86 /* console icon in task list */
  87 .x-grid-row-console {
  88     background: no-repeat center center;
  89     background-image:url(../images/icon-display.png);
  90 }
  91
  92 /* for font-awesome colors */
  93 /* tree icons */
  94
  95 /* big symbols */
  96 .x-fa-tree,
  97 .x-fa-tree-running,
  98 .x-fa-tree-stopped,
  99 .x-fa-tree-paused,
 100 .x-fa-tree-online,
 101 .x-fa-tree-offline,
 102 .x-fa-tree-template-lxc,
 103 .x-fa-tree-template-qemu,
 104 .x-fa-tree-datacenter {
 105     font-size: 1.25em;
 106     line-height: 1.6em;
 107     color: #555;
 108     margin-right: 5px;
 109 }
 110
 111 /* grid icons (resources, etc) */
 112 .x-fa-grid,
 113 .x-fa-grid-running,
 114 .x-fa-grid-stopped,
 115 .x-fa-grid-paused,
 116 .x-fa-grid-online,
 117 .x-fa-grid-offline,
 118 .x-fa-grid-template-lxc,
 119 .x-fa-grid-template-qemu {
 120     font-size: 1.25em;
 121     color: #555;
 122     margin-right: 5px;
 123 }
 124
 125 /* the running vms are darker */
 126 .x-fa-tree-running,
 127 .x-fa-grid-running {
 128     color: #000;
 129 }
 130
 131 /* the small icons */
 132 .x-fa-tree-running:after,
 133 .x-fa-tree-stopped:after,
 134 .x-fa-tree-paused:after,
 135 .x-fa-tree-template-lxc:after,
 136 .x-fa-tree-template-qemu:after,
 137 .x-fa-tree-online:after,
 138 .x-fa-tree-offline:after,
 139 .x-fa-grid:after,
 140 .x-fa-grid-running:after,
 141 .x-fa-grid-stopped:after,
 142 .x-fa-grid-paused:after,
 143 .x-fa-grid-online:after,
 144 .x-fa-grid-offline:after,
 145 .x-fa-grid-template-lxc:after,
 146 .x-fa-grid-template-qemu:after {
 147     position: relative;
 148     left: -5px;
 149     top: 1px;
 150     font-size: 0.75em;
 151     text-shadow: -1px 0px 2px #fff;
 152     content: "\ ";
 153 }
 154
 155 .x-fa-tree-online:after,
 156 .x-fa-grid-online:after {
 157     content: "\f058";
 158     color: #21BF4B;
 159 }
 160
 161 .x-fa-tree-offline:after,
 162 .x-fa-grid-offline:after {
 163     content: "\f057";
 164     color: #CC1800;
 165 }
 166
 167 .x-fa-tree-running:after,
 168 .x-fa-grid-running:after {
 169     content: "\f04b";
 170     color: #21BF4B;
 171 }
 172
 173 .x-fa-tree-paused:after,
 174 .x-fa-grid-paused:after {
 175     content: "\f04c";
 176     color: #CC8E00;
 177     font-size: 0.6em;
 178 }
 179
 180 .x-fa-tree-stopped,
 181 .x-fa-grid-stopped,
 182 .x-fa-tree-offline,
 183 .x-fa-grid-offline {
 184     color: #cfcfcf;
 185 }
 186
 187 /*
 188 .x-fa-tree-stopped:after {
 189   content: "\f04d";
 190   color: #f5c5c5;
 191   font-size: 0.5em;
 192 }
 193 */
 194
 195 .x-fa-tree-template-lxc:after,
 196 .x-fa-grid-template-lxc:after {
 197     content: "\f1b2";
 198     background: #fff;
 199 }
 200
 201
 202 .x-fa-tree-template-qemu:after,
 203 .x-fa-grid-template-qemu:after {
 204     content : "\f108";
 205     background: #fff;
 206 }
 207
 208 .x-grid-item-over
 209 .x-fa-tree-template-qemu:after,
 210 .x-grid-item-over
 211 .x-fa-tree-template-lxc:after,
 212 .x-grid-item-over
 213 .x-fa-grid-template-qemu:after,
 214 .x-grid-item-over
 215 .x-fa-grid-template-lxc:after {
 216     background-color: #e2eff9;
 217     text-shadow: -1px 0px 2px #e2eff9;
 218 }
 219
 220 .x-grid-item-selected
 221 .x-fa-tree-template-qemu:after,
 222 .x-grid-item-selected
 223 .x-fa-tree-template-lxc:after,
 224 .x-grid-item-selected
 225 .x-fa-grid-template-qemu:after,
 226 .x-grid-item-selected
 227 .x-fa-grid-template-lxc:after {
 228     background-color: #c2ddf2;
 229     text-shadow: -1px 0px 2px #c2ddf2;
 230 }
 231
 232 .pve-itype-icon-virt-viewer,
 233 .pve-itype-icon-tigervnc,
 234 .pve-itype-icon-novnc,
 235 .pve-itype-icon-display,
 236 .pve-itype-icon-memory,
 237 .pve-itype-icon-processor,
 238 .pve-itype-icon-network,
 239 .pve-itype-icon-network-server,
 240 .pve-itype-icon-keyboard,
 241 .pve-itype-icon-cdrom,
 242 .pve-itype-icon-qemu,
 243 .pve-itype-icon-qemu-template,
 244 .pve-itype-icon-qemu-running,
 245 .pve-itype-icon-lxc,
 246 .pve-itype-icon-lxc-template,
 247 .pve-itype-icon-lxc-running,
 248 .pve-itype-icon-swap,
 249 .pve-itype-icon-node,
 250 .pve-itype-icon-node-running,
 251 .pve-itype-icon-storage,
 252 .pve-itype-icon-pool,
 253 .pve-itype-icon-itype,
 254 .pve-itype-icon-usb,
 255 .pve-itype-icon-pci
 256 {
 257     background-repeat: no-repeat;
 258     background-position:3px center;
 259     padding-left: 20px;
 260 }
 261
 262 .pve-itype-icon-qemu,
 263 .x-tree-node-computer,
 264 .x-grid-tree-node-expanded .x-tree-node-computer
 265 {
 266     background-image:url(../images/icon-display.png);
 267 }
 268
 269 .pve-itype-icon-lxc,
 270 .x-tree-node-lxc,
 271 .x-grid-tree-node-expanded .x-tree-node-lxc
 272 {
 273     background-image:url(../images/lxc-off.png);
 274 }
 275
 276 .pve-itype-icon-swap,
 277 .x-tree-node-lxc-swap,
 278 .x-grid-tree-node-expanded .x-tree-lxc-swap
 279 {
 280     background-image:url(../images/icon-swap.png);
 281 }
 282
 283 .pve-itype-icon-lxc-running,
 284 .x-tree-node-lxc-running,
 285 .x-grid-tree-node-expanded .x-tree-node-lxc-running
 286 {
 287     background-image:url(../images/lxc-on.png);
 288 }
 289
 290 .pve-itype-icon-storage,
 291 .x-tree-node-harddisk,
 292 .x-grid-tree-node-expanded .x-tree-node-harddisk
 293 {
 294     background-image:url(../images/icon-harddisk.png);
 295 }
 296
 297 .x-tree-node-snapshot,
 298 .x-grid-tree-node-expanded .x-tree-node-snapshot
 299 {
 300     background-image:url(../images/snapshot.png);
 301 }
 302
 303 .pve-itype-icon-itype
 304 {
 305     background-image:url(../ext6/theme-classic/resources/images/tree/folder.gif);
 306 }
 307
 308 .pve-itype-icon-network-server
 309 {
 310     background-image:url(../images/network-server.png);
 311 }
 312
 313 .pve-itype-icon-network
 314 {
 315     background-image:url(../images/icon-network.png);
 316 }
 317
 318 .pve-itype-icon-keyboard
 319 {
 320     background-image:url(../images/icon-keyboard.png);
 321 }
 322
 323 .pve-itype-icon-cdrom
 324 {
 325     background-image:url(../images/icon-cd.png);
 326 }
 327
 328 .pve-itype-icon-memory
 329 {
 330     background-image:url(../images/icon-ram.png);
 331 }
 332
 333 .pve-itype-icon-processor
 334 {
 335     background-image:url(../images/icon-cpu.png);
 336 }
 337
 338 .pve-itype-icon-display
 339 {
 340     background-image:url(../images/icon-display.png);
 341 }
 342
 343 .pve-itype-icon-tigervnc
 344 {
 345     background-image:url(../images/tigervnc.png);
 346 }
 347
 348 .pve-itype-icon-novnc
 349 {
 350     background-image:url(../images/novnc.png);
 351 }
 352
 353 .pve-itype-icon-virt-viewer
 354 {
 355     background-image:url(../images/virt-viewer.png);
 356 }
 357
 358 .pve-itype-icon-usb
 359 {
 360     background-image:url(../images/icon-usb.png);
 361 }
 362
 363 .pve-itype-icon-pci
 364 {
 365     background-image:url(../images/icon-pci.png);
 366 }
 367
 368 /* displayfield minheight is wrong */
 369 .x-form-display-field-default {
 370     min-height: 20px;
 371 }
 372
 373 .x-button-reset:before {
 374     font-size: 16px;
 375 }
 376
 377 /* for resetcolumnsbutton */
 378 .x-button-reset:after{
 379     content: "\f0e7 ";
 380     position: relative;
 381     text-shadow: 0 0 2px #fff;
 382     left: -3px;
 383     top: 2px;
 384 }
 385
 386 .pve-help-button .x-btn-inner {
 387     color: black;
 388 }
 389
 390 .pve-hint {
 391     background-color: LightYellow;
 392 }
 393
 394 /* for info widget */
 395 div.left-aligned {
 396     float: left;
 397 }
 398
 399 div.right-aligned {
 400     float: right;
 401 }
 402
 403 .x-progress.critical .x-progress-bar{
 404     background-color: #FF8888;
 405 }
 406
 407 .x-progress.warning .x-progress-bar{
 408     background-color: #FFCC00;
 409 }
 410
 411 .x-treelist-nav {
 412     background-color: #f5f5f5;
 413 }
 414
 415 .x-treelist-row {
 416     margin-top: 5px;
 417 }
 418
 419 .x-treelist-item-icon {
 420     color: #000;
 421     margin-left: 2px;
 422 }
 423
 424 .x-treelist-item-text {
 425     color: #000;
 426     padding-left: 5px;
 427     padding-right: 5px;
 428 }
 429
 430 .fa-ceph:before {
 431     width: 14px;
 432     height: 14px;
 433     position: absolute;
 434     left: 1px;
 435     top: 4px;
 436     background-image:url(../images/logo-ceph.png);
 437     background-size: 14px 14px;
 438     content: ' ';
 439 }
 440
 441 .x-treelist-row-over > * > .x-treelist-item-icon,
 442 .x-treelist-row-over > * > .x-treelist-item-text{
 443     color: #000;
 444 }
 445
 446 /* some icons have to be color manually */
 447 .black {
 448     color: #000;
 449 }
 450
 451 .normal {
 452     color: #c2ddf2;
 453 }
 454
 455 .faded {
 456     color: #cfcfcf;
 457 }
 458
 459 .good {
 460     color: #21BF4B;
 461 }
 462
 463 .warning {
 464     color: #fc0;
 465 }
 466
 467 .critical {
 468     color: #FF6C59;
 469 }
 470
 471 /* for the ceph monitor widgets */
 472 div.monitor {
 473         text-align:left;
 474         border:#cfcfcf solid 1px;
 475         border-radius:2px;
 476         margin: 2px;
 477         padding: 5px 8px;
 478 }
 479
 480 /* for auto layout */
 481 div.inline-block {
 482     display: inline-block;
 483     vertical-align: top;
 484 }
 485
 486 /* ceph dashboard osd table styling */
 487 table.osds {
 488     border-collapse: collapse;
 489     margin: auto;
 490 }
 491
 492 table.osds td {
 493     padding: 4px;
 494     text-align: right;
 495     border-right: 1px solid #cfcfcf;
 496 }
 497
 498 table.osds td:last-of-type {
 499     border-right: 0;
 500 }
 501
 502 table.osds tr {
 503     border-bottom: 1px solid #cfcfcf;
 504 }
 505
 506 table.osds tr:last-of-type {
 507     border-bottom: 0;
 508 }
 509
 510 table.osds td:first-of-type {
 511     text-align: left;
 512 }
 513
 514 .pointer {
 515     cursor: pointer;
 516 }
 517
 518 .x-grid-filters-filtered-column{
 519     font-style: italic;
 520     font-weight: bold;
 521 }
 522
 523 /* chrome 56 fix */
 524 .x-webkit .x-form-text {
 525     height: 100% !important;
 526 }
 527
 528 .x-webkit :not(.x-form-textarea-body) > .x-form-trigger-wrap {
 529     height: initial;
 530 }
 531
 532 .pve-invalid-row {
 533     background-color: #f3d6d7;
 534 }