mirror of
https://git.proxmox.com/git/pve-manager
synced 2025-08-03 23:46:58 +00:00
6a040799f4
we want to be able to use fontawesome icons directly instead of having to use extracted png in css classes this patch makes it possible to use 'iconCls' with the font-awesome icon name Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
597 lines
11 KiB
CSS
597 lines
11 KiB
CSS
/* overwrite to use full black for enabled buttons */
|
|
.x-btn-inner-default-toolbar-small {
|
|
font: 300 12px/16px helvetica, arial, verdana, sans-serif;
|
|
color: #000;
|
|
padding: 0 5px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* add missing class for context menu header */
|
|
.x-menu-header {
|
|
font: 400 13px/20px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
|
|
color: #fff;
|
|
padding: 4px;
|
|
background-color: #3892d4;
|
|
}
|
|
|
|
/* make the upper window end visible */
|
|
.x-css-shadow {
|
|
box-shadow: rgb(136,136,136) 0px -1px 15px !important;
|
|
}
|
|
|
|
/* reduce tree space */
|
|
.x-grid-cell-inner-treecolumn { /* vertical padding */
|
|
padding: 4px 0px 3px 0px;
|
|
}
|
|
|
|
/* horizontal distance between parent and child leaf */
|
|
.x-tree-elbow-img {
|
|
width: 14px;
|
|
}
|
|
|
|
/* adjust horizontal position of menu icons */
|
|
.x-menu-item-icon-default {
|
|
top: 5px;
|
|
left: 3px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* this gives a better placement for the font-awesome icons */
|
|
.x-btn-icon-el-default-toolbar-small {
|
|
height: 14px;
|
|
}
|
|
|
|
/* this icon looks weird in sizes not n*14px */
|
|
.x-btn-icon-el-default-toolbar-small.fa-ellipsis-v {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.x-btn-icon-el-default-small {
|
|
height: 14px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* icons for tree/snapshots/menus/etc.. */
|
|
|
|
/* overwrite folder icons of theme */
|
|
.x-tree-icon-parent,
|
|
.x-tree-icon-parent-expanded,
|
|
.x-tree-icon-leaf {
|
|
background: none;
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: inherit;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-size: 1.25em;
|
|
line-height: 1.6em;
|
|
color: #555;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.x-tree-icon-parent:not(.x-tree-icon-custom):before {
|
|
content: "\f114";
|
|
}
|
|
|
|
.x-tree-icon-parent-expanded:not(.x-tree-icon-custom):before {
|
|
content: "\f115";
|
|
}
|
|
|
|
/* loading in task list */
|
|
.x-grid-row-loading {
|
|
background: no-repeat center center;
|
|
background-image:url(../ext6/theme-crisp/resources/images/loadmask/loading.gif);
|
|
}
|
|
|
|
/* console icon in task list */
|
|
.x-grid-row-console {
|
|
background: no-repeat center center;
|
|
background-image:url(../images/icon-display.png);
|
|
}
|
|
|
|
/* for font-awesome colors */
|
|
/* tree icons */
|
|
|
|
/* big symbols */
|
|
.x-tree-icon-custom {
|
|
font-size: 1.25em;
|
|
line-height: 1.6em;
|
|
color: #555;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* grid icons (resources, etc) */
|
|
.x-grid-icon-custom {
|
|
font-size: 1.25em;
|
|
color: #555;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* the running vms are darker */
|
|
.x-tree-icon-custom.running,
|
|
.x-grid-icon-custom.running {
|
|
color: #000;
|
|
}
|
|
|
|
/* stopped and offline items are greyed out */
|
|
.x-tree-icon-custom.stopped,
|
|
.x-grid-icon-custom.stopped,
|
|
.x-tree-icon-custom.offline,
|
|
.x-grid-icon-custom.offline {
|
|
color: #cfcfcf;
|
|
}
|
|
|
|
/* the small icons */
|
|
.x-tree-icon-custom:after,
|
|
.x-grid-icon-custom:after {
|
|
position: relative;
|
|
left: -5px;
|
|
top: 1px;
|
|
font-size: 0.75em;
|
|
text-shadow: -1px 0px 2px #fff;
|
|
content: "\ ";
|
|
}
|
|
|
|
/* the green check */
|
|
.x-tree-icon-custom.online:after,
|
|
.x-grid-icon-custom.online:after {
|
|
content: "\f058";
|
|
color: #21BF4B;
|
|
}
|
|
|
|
/* the red x */
|
|
.x-tree-icon-custom.offline:after,
|
|
.x-grid-icon-custom.offline:after,
|
|
.x-tree-icon-custom.ha-error:after,
|
|
.x-grid-icon-custom.ha-error:after {
|
|
content: "\f057";
|
|
color: #CC1800;
|
|
}
|
|
|
|
/* yellow ! triangle */
|
|
.x-tree-icon-custom.io-error:after,
|
|
.x-grid-icon-custom.io-error:after,
|
|
.x-tree-icon-custom.internal-error:after,
|
|
.x-grid-icon-custom.internal-error:after,
|
|
.x-tree-icon-custom.guest-panicked:after,
|
|
.x-grid-icon-custom.guest-panicked:after {
|
|
content: "\f071";
|
|
color: #FFCC00;
|
|
}
|
|
|
|
/* the grey '?' */
|
|
.x-tree-icon-custom.unknown:after,
|
|
.x-grid-icon-custom.unknown:after {
|
|
content: "\f059";
|
|
color: #888;
|
|
}
|
|
|
|
/* the play symbol */
|
|
.x-tree-icon-custom.running:after,
|
|
.x-grid-icon-custom.running:after {
|
|
content: "\f04b";
|
|
color: #21BF4B;
|
|
}
|
|
|
|
/* the pause symbol */
|
|
.x-tree-icon-custom.paused:after,
|
|
.x-grid-icon-custom.paused:after {
|
|
content: "\f04c";
|
|
color: #CC8E00;
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
/* the suspend symbol */
|
|
.x-tree-icon-custom.suspended:after,
|
|
.x-grid-icon-custom.suspended:after {
|
|
content: "\f04c";
|
|
color: #CC8E00;
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
/* the lxc template */
|
|
.x-tree-icon-custom.lxc:after,
|
|
.x-grid-icon-custom.lxc:after {
|
|
content: "\f1b2";
|
|
background: #fff;
|
|
}
|
|
|
|
/* the qemu template */
|
|
.x-tree-icon-custom.qemu:after,
|
|
.x-grid-icon-custom.qemu:after {
|
|
content : "\f108";
|
|
background: #fff;
|
|
}
|
|
|
|
/* fixes background on mouseover and selected items */
|
|
.x-grid-item-over .qemu:after,
|
|
.x-grid-item-over .lxc:after {
|
|
background-color: #e2eff9;
|
|
text-shadow: -1px 0px 2px #e2eff9;
|
|
}
|
|
|
|
.x-grid-item-selected .qemu:after,
|
|
.x-grid-item-selected .lxc:after {
|
|
background-color: #c2ddf2;
|
|
text-shadow: -1px 0px 2px #c2ddf2;
|
|
}
|
|
|
|
.pve-itype-icon-virt-viewer,
|
|
.pve-itype-icon-tigervnc,
|
|
.pve-itype-icon-novnc,
|
|
.pve-itype-icon-xtermjs,
|
|
.pve-itype-icon-display,
|
|
.pve-itype-icon-memory,
|
|
.pve-itype-icon-processor,
|
|
.pve-itype-icon-network,
|
|
.pve-itype-icon-network-server,
|
|
.pve-itype-icon-keyboard,
|
|
.pve-itype-icon-cdrom,
|
|
.pve-itype-icon-qemu,
|
|
.pve-itype-icon-qemu-template,
|
|
.pve-itype-icon-qemu-running,
|
|
.pve-itype-icon-lxc,
|
|
.pve-itype-icon-lxc-template,
|
|
.pve-itype-icon-lxc-running,
|
|
.pve-itype-icon-swap,
|
|
.pve-itype-icon-node,
|
|
.pve-itype-icon-node-running,
|
|
.pve-itype-icon-storage,
|
|
.pve-itype-icon-pool,
|
|
.pve-itype-icon-itype,
|
|
.pve-itype-icon-usb,
|
|
.pve-itype-icon-serial,
|
|
.pve-itype-icon-cloud,
|
|
.pve-itype-icon-pci
|
|
{
|
|
background-repeat: no-repeat;
|
|
background-position:3px center;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.pve-itype-fa > .x-grid-cell-inner{
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.pve-grid-fa {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.pve-itype-icon-qemu,
|
|
.x-tree-node-computer,
|
|
.x-grid-tree-node-expanded .x-tree-node-computer
|
|
{
|
|
background-image:url(../images/icon-display.png);
|
|
}
|
|
|
|
.pve-itype-icon-lxc,
|
|
.x-tree-node-lxc,
|
|
.x-grid-tree-node-expanded .x-tree-node-lxc
|
|
{
|
|
background-image:url(../images/lxc-off.png);
|
|
}
|
|
|
|
.pve-itype-icon-swap,
|
|
.x-tree-node-lxc-swap,
|
|
.x-grid-tree-node-expanded .x-tree-lxc-swap
|
|
{
|
|
background-image:url(../images/icon-swap.png);
|
|
}
|
|
|
|
.pve-itype-icon-lxc-running,
|
|
.x-tree-node-lxc-running,
|
|
.x-grid-tree-node-expanded .x-tree-node-lxc-running
|
|
{
|
|
background-image:url(../images/lxc-on.png);
|
|
}
|
|
|
|
.pve-itype-icon-storage,
|
|
.x-tree-node-harddisk,
|
|
.x-grid-tree-node-expanded .x-tree-node-harddisk
|
|
{
|
|
background-image:url(../images/icon-harddisk.png);
|
|
}
|
|
|
|
.x-tree-node-snapshot,
|
|
.x-grid-tree-node-expanded .x-tree-node-snapshot
|
|
{
|
|
background-image:url(../images/snapshot.png);
|
|
}
|
|
|
|
.pve-itype-icon-itype
|
|
{
|
|
background-image:url(../ext6/theme-classic/resources/images/tree/folder.gif);
|
|
}
|
|
|
|
.pve-itype-icon-network-server
|
|
{
|
|
background-image:url(../images/network-server.png);
|
|
}
|
|
|
|
.pve-itype-icon-network
|
|
{
|
|
background-image:url(../images/icon-network.png);
|
|
}
|
|
|
|
.pve-itype-icon-keyboard
|
|
{
|
|
background-image:url(../images/icon-keyboard.png);
|
|
}
|
|
|
|
.pve-itype-icon-cdrom
|
|
{
|
|
background-image:url(../images/icon-cd.png);
|
|
}
|
|
|
|
.pve-itype-icon-memory
|
|
{
|
|
background-image:url(../images/icon-ram.png);
|
|
}
|
|
|
|
.pve-itype-icon-processor
|
|
{
|
|
background-image:url(../images/icon-cpu.png);
|
|
}
|
|
|
|
.pve-itype-icon-display
|
|
{
|
|
background-image:url(../images/icon-display.png);
|
|
}
|
|
|
|
.pve-itype-icon-tigervnc
|
|
{
|
|
background-image:url(../images/tigervnc.png);
|
|
}
|
|
|
|
.pve-itype-icon-novnc
|
|
{
|
|
background-image:url(../images/novnc.png);
|
|
}
|
|
|
|
.pve-itype-icon-virt-viewer
|
|
{
|
|
background-image:url(../images/virt-viewer.png);
|
|
}
|
|
|
|
.pve-itype-icon-xtermjs
|
|
{
|
|
background-image:url(../images/xtermjs.png);
|
|
}
|
|
|
|
.pve-itype-icon-usb
|
|
{
|
|
background-image:url(../images/icon-usb.png);
|
|
}
|
|
|
|
.pve-itype-icon-pci
|
|
{
|
|
background-image:url(../images/icon-pci.png);
|
|
}
|
|
|
|
.pve-itype-icon-serial
|
|
{
|
|
background-size: 16px;
|
|
background-image:url(../images/icon-serial.svg);
|
|
}
|
|
|
|
.pve-itype-icon-cloud
|
|
{
|
|
background-size: 16px;
|
|
background-image:url(../images/icon-cloud.svg);
|
|
}
|
|
|
|
.pve-icon {
|
|
height: 16px;
|
|
background-position: bottom;
|
|
vertical-align: bottom;
|
|
padding: 0;
|
|
}
|
|
|
|
/* displayfield minheight is wrong */
|
|
.x-form-display-field-default {
|
|
min-height: 20px;
|
|
}
|
|
|
|
.x-button-reset:before {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* for resetcolumnsbutton */
|
|
.x-button-reset:after{
|
|
content: "\f0e7 ";
|
|
position: relative;
|
|
text-shadow: 0 0 2px #fff;
|
|
left: -3px;
|
|
top: 2px;
|
|
}
|
|
|
|
.proxmox-inline-button .x-btn-inner {
|
|
color: black;
|
|
}
|
|
|
|
.pve-hint {
|
|
background-color: LightYellow;
|
|
}
|
|
|
|
/* for info widget */
|
|
div.left-aligned {
|
|
float: left;
|
|
}
|
|
|
|
div.right-aligned {
|
|
float: right;
|
|
}
|
|
|
|
.x-progress.critical .x-progress-bar{
|
|
background-color: #FF8888;
|
|
}
|
|
|
|
.x-progress.warning .x-progress-bar{
|
|
background-color: #FFCC00;
|
|
}
|
|
|
|
.x-treelist-nav {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.x-treelist-row {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.x-treelist-item-icon {
|
|
color: #000;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.x-treelist-item-text {
|
|
color: #000;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.fa-ceph:before {
|
|
width: 14px;
|
|
height: 14px;
|
|
position: absolute;
|
|
left: 1px;
|
|
top: 4px;
|
|
background-image:url(../images/logo-ceph.png);
|
|
background-size: 14px 14px;
|
|
content: ' ';
|
|
}
|
|
|
|
.x-treelist-row-over > * > .x-treelist-item-icon,
|
|
.x-treelist-row-over > * > .x-treelist-item-text{
|
|
color: #000;
|
|
}
|
|
|
|
/* some icons have to be color manually */
|
|
.black {
|
|
color: #000;
|
|
}
|
|
|
|
.normal {
|
|
color: #c2ddf2;
|
|
}
|
|
|
|
.faded {
|
|
color: #cfcfcf;
|
|
}
|
|
|
|
.good {
|
|
color: #21BF4B;
|
|
}
|
|
|
|
.warning {
|
|
color: #fc0;
|
|
}
|
|
|
|
.critical {
|
|
color: #FF6C59;
|
|
}
|
|
|
|
/* for the ceph monitor widgets */
|
|
div.monitor {
|
|
text-align:left;
|
|
border:#cfcfcf solid 1px;
|
|
border-radius:2px;
|
|
margin: 2px;
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
/* for auto layout */
|
|
div.inline-block {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* ceph dashboard osd table styling */
|
|
table.osds {
|
|
border-collapse: collapse;
|
|
margin: auto;
|
|
}
|
|
|
|
table.osds td {
|
|
padding: 4px;
|
|
text-align: right;
|
|
border-right: 1px solid #cfcfcf;
|
|
}
|
|
|
|
table.osds td:last-of-type {
|
|
border-right: 0;
|
|
}
|
|
|
|
table.osds tr {
|
|
border-bottom: 1px solid #cfcfcf;
|
|
}
|
|
|
|
table.osds tr:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
table.osds td:first-of-type {
|
|
text-align: left;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.x-grid-filters-filtered-column{
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* chrome 56 fix */
|
|
.x-webkit .x-form-text {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.x-webkit :not(.x-form-textarea-body) > .x-form-trigger-wrap {
|
|
height: initial;
|
|
}
|
|
|
|
.proxmox-invalid-row {
|
|
background-color: #f3d6d7;
|
|
}
|
|
|
|
.pve-static-mask div.x-mask-msg-text {
|
|
padding: 10px;
|
|
background-image: none;
|
|
}
|
|
|
|
.x-fa {
|
|
diplay: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.usage-wrapper {
|
|
margin-left: -7px;
|
|
vertical-align: text-bottom;
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 1.2em;
|
|
border: 1px solid #555;
|
|
border-radius: 1px;
|
|
padding: 1px;
|
|
}
|
|
|
|
.usage-negative {
|
|
left: 0px;
|
|
right:0px;
|
|
}
|
|
|
|
.usage {
|
|
left: 0px;
|
|
right: 0px;
|
|
background-color: #555;
|
|
}
|
|
|
|
.install-mask {
|
|
background-color: rgb(245, 245, 245);
|
|
color: #000;
|
|
} |