src/proxmox-dark/scss/other/_icons.scss

   1 // these styling fix all kinds of icons in grid, treeview etc.
   2
   3 // most icons just use the color attribute..
   4 // Running containers and VMS
   5 .x-grid-icon-custom.running,
   6 .x-tree-icon-custom.running,
   7 // Icons in trees (e.g. Resource tree)
   8 .x-tree-icon-custom,
   9 // Icons in panels, e.g. Search tab
  10 .fa-database::before,
  11 // Icon for pools
  12 .fa-tags::before,
  13 // The template icon
  14 .fa-file-o::before,
  15 // Icon for cluster nodes
  16 .fa-building::before,
  17 // e.g. storage list when creating a guest
  18 .x-action-col-icon::before,
  19 .fa-shield::before,
  20 .fa-file-text-o::before,
  21 .fa-clock-o::before,
  22 // tab bar icons
  23 .x-tab-icon-el-default,
  24 .pve-icon-verify-lettering::after,
  25 // the small plane when migrating a vm
  26 .x-tree-icon-custom.lock-migrate::after,
  27 .x-grid-icon-custom.lock-migrate::after,
  28 // e.g. permission tree view in pve
  29 .x-tree-icon-leaf:not(.x-tree-icon-custom)::before,
  30 .x-tree-icon-parent:not(.x-tree-icon-custom)::before,
  31 .x-tree-icon-parent-expanded:not(.x-tree-icon-custom)::before,
  32 .x-grid-filters-filtered-column .x-column-header-text::after {
  33   color: $icon-color;
  34 }
  35
  36 // but some are implement as background SVGs or PNGs. invert them via
  37 // filters:
  38 .fa-ceph::before,
  39 .fa-sdn::before,
  40 .fa-network-wired::before,
  41 // Icon for "ISO Images" for storages
  42 .pve-itype-treelist-item-icon-cdrom,
  43 // Arrow to the right
  44 .fa-chevron-right::before,
  45 // icon indicating a currently open shell session in the task viewer
  46 .x-grid-row-console,
  47 // the "triangle" that appears when the sidebar becomes scrollable
  48 .x-box-scroller-toolbar-default.x-box-scroller,
  49 // the small triangles in the tree view next to nodes etc.
  50 .x-tree-elbow-img,
  51 // the computer icon in the resource pool add menu
  52 .pve-itype-icon-qemu,
  53 .x-tree-node-computer,
  54 .x-grid-tree-node-expanded .x-tree-node-computer,
  55 .pbs-icon-tape,
  56 .pbs-icon-tape-drive,
  57 .x-tree-icon-leaf:not(.x-tree-icon-custom),
  58 // default tree panel icons (api viewer, pbs backup panel)
  59 .x-tree-icon-parent:not(.x-tree-icon-custom),
  60 .x-tree-icon-parent-expanded:not(.x-tree-icon-custom) {
  61   filter: invert($icon-brightness);
  62 }
  63
  64 // the following icons need some additional fix-ups to work well in
  65 // grids (e.g. when hovered etc.)
  66 // Icon for the processor in VM hardware settings
  67 .pve-itype-icon-cpu,
  68 // Icon for memory in VM hardware settings
  69 .pve-itype-icon-cdrom,
  70 // Icon for memory in VM hardware settings
  71 .pve-itype-icon-memory,
  72 // the pcie device icon in the vm hardware section
  73 .pve-itype-icon-pci,
  74 // the serial device icon in the vm hardware section
  75 .pve-itype-icon-serial,
  76 // the rng icon in the vm hardware section
  77 .pve-itype-icon-die,
  78 // Processor icon for summary page
  79 .pmx-itype-icon-processor,
  80 // Memory icon on summary page
  81 .pmx-itype-icon-memory,
  82 // the mount point icon for containers
  83 .pve-itype-icon-storage,
  84 .x-tree-node-harddisk,
  85 .x-grid-tree-node-expanded .x-tree-node-harddisk {
  86   filter: invert($icon-brightness);
  87
  88   // the filter also applies to the text next to the icon
  89   .x-grid-cell-inner {
  90     color: black;
  91   }
  92
  93   .x-grid-cell-inner::before {
  94     // this is a somewhat hacky work-around for the focus borders on
  95     // these elements. since we use the invert filter to fix the icon
  96     // color we need to also invert the border color first too, not
  97     // just the text. add "!important" to properly override.
  98     border-color: invert($primary-color, $weight: 90%) !important;
  99   }
 100 }
 101
 102 // pbs show task log in longest task list column
 103 .x-action-col-icon.fa-chevron-right::before {
 104   filter: none;
 105 }
 106
 107 /* a bit of a hack, but otherwise the expanders and collapsers are barely visible */
 108 .x-tree-arrows .x-tree-expander {
 109     filter: brightness(200%);
 110 }
 111 .x-tree-arrows .x-tree-expander-over .x-tree-expander {
 112     filter: brightness(0);
 113 }
 114
 115 // checkboxes and radio buttons
 116 .x-form-checkbox-default,
 117 .x-form-radio-default,
 118 .x-column-header-checkbox .x-column-header-checkbox::after,
 119 .x-grid-checkcolumn::after,
 120 // checkboxes without the extra "blueish" active states
 121 .x-menu-item-checked .x-menu-item-icon-default.x-menu-item-checkbox,
 122 .x-menu-item-unchecked .x-menu-item-icon-default.x-menu-item-checkbox {
 123   filter: invert($icon-brightness) hue-rotate(180deg) brightness(125%);
 124 }
 125
 126 .x-tree-icon-custom,
 127 .x-grid-icon-custom {
 128   color: $icon-color;
 129
 130   &::after {
 131     color: $icon-color;
 132     text-shadow: -1px 0 1px $background-darker;
 133   }
 134
 135   // stopped containers and VMs
 136   &.stopped,
 137   // vms/cts that are offline
 138   &.offline,
 139   // question mark at the bottom right of e.g. unreachable storages
 140   &.unknown::after {
 141     color: $icon-color-alt;
 142   }
 143
 144   &.locked::after {
 145     color: $icon-color;
 146   }
 147
 148   &.lxc::after,
 149   &.qemu::after {
 150     background-color: $background-darker;
 151     color: $icon-color;
 152   }
 153 }
 154
 155 // icons for templates in the storages view
 156 .x-treelist-item-icon {
 157   &.lxc::after,
 158   &.qemu::after {
 159     background-color: $background-darker;
 160     color: $icon-color;
 161   }
 162 }
 163
 164 .x-grid-item .x-grid-icon-custom {
 165   &.lxc::after,
 166   &.qemu::after {
 167     background-color: $background-darker;
 168   }
 169 }
 170
 171 .x-grid-item-alt .x-grid-icon-custom {
 172   &.lxc::after,
 173   &.qemu::after {
 174     background-color: $background-darkest;
 175   }
 176 }
 177
 178 .x-treelist-item-selected {
 179   .lxc::after,
 180   .qemu::after {
 181     background-color: $primary-color;
 182     text-shadow: -1px 0 1px $primary-color;
 183   }
 184 }
 185
 186 .x-grid-item-over,
 187 // hovered items in treelists
 188 .x-treelist-item-over,
 189 // template icons when in selected menu item or table row
 190 .x-grid-item-selected,
 191 // vm/ct that is focused (e.g. by mouse-down)
 192 .x-keyboard-mode .x-grid-item-focused {
 193   .lxc::after,
 194   .qemu::after {
 195     background-color: $selection-background-color !important;
 196     text-shadow: -1px 0 1px $selection-background-color;
 197   }
 198 }
 199
 200 .x-action-col-icon:hover {
 201   &::before,
 202   &::after {
 203     text-shadow: -1px 0 1px $background-darker;
 204   }
 205 }
 206
 207 // The usage icons dynamically displaying how full a storage is
 208 .usage-wrapper {
 209   border: 1px solid $icon-color;
 210 }
 211
 212 .usage-negative {
 213   background-color: transparent;
 214 }
 215
 216 .usage {
 217   background-color: $icon-color;
 218 }