src/css/ext6-pmx.css

   1 .pmx-clear-trigger {
   2     background-image: url(../images/pmx-clear-trigger.png);
   3 }
   4
   5 .pmx-hint {
   6     background-color: LightYellow;
   7 }
   8
   9 .x-mask-msg-text {
  10     text-align: center;
  11 }
  12
  13 .proxmox-disabled-row, .proxmox-disabled-row td {
  14     /*color: #a0a0a0;*/
  15     color: #666665;
  16 }
  17
  18 .proxmox-invalid-row {
  19     background-color: #f3d6d7;
  20 }
  21
  22 .proxmox-warning-row {
  23     background-color: #f5e5d8;
  24 }
  25
  26 .proxmox-good-row {
  27     background-color: #21BF4B;
  28 }
  29
  30 /* some icons have to be color manually */
  31 .black {
  32     color: #000;
  33 }
  34
  35 .normal {
  36     color: #c2ddf2;
  37 }
  38
  39 .faded {
  40     color: #cfcfcf;
  41 }
  42
  43 .good {
  44     color: #21BF4B;
  45 }
  46
  47 .warning {
  48     color: #fc0;
  49 }
  50
  51 .critical {
  52     color: #FF6C59;
  53 }
  54
  55 .info-blue {
  56     color: #3892d4;
  57 }
  58
  59 .pwt-eol-icon {
  60     position: relative;
  61     float: left;
  62     margin-right: 5px;
  63     font-size: 1.3em;
  64     color: #FF6C59;
  65 }
  66
  67 /* reduce chart legend space usage to something more sane */
  68 .x-legend-item {
  69         padding: 0.4em 0.8em 0.4em 1.8em;
  70 }
  71
  72 .x-legend-item-marker {
  73         left: 0.5em;
  74         top: 0.6em;
  75 }
  76
  77 /* for info widget */
  78 div.left-aligned {
  79     float: left;
  80 }
  81
  82 div.right-aligned {
  83     float: right;
  84 }
  85
  86 .x-progress.critical .x-progress-bar{
  87     background-color: #FF8888;
  88 }
  89
  90 .x-progress.warning .x-progress-bar{
  91     background-color: #FFCC00;
  92 }
  93
  94 .x-treelist-item-icon {
  95     color: #000;
  96     font-size: 14px;
  97 }
  98
  99 .x-btn-icon-el-default-toolbar-small {
 100     font-size: 14px;
 101 }
 102 .x-btn-icon-el-default-small {
 103     font-size: 14px;
 104 }
 105
 106 .x-tab-icon-el-default {
 107     color: #000;
 108     font-size: 14px;
 109     margin-top: 2px;
 110 }
 111
 112 .pmx-icon {
 113     height: 16px;
 114     background-position: bottom;
 115     vertical-align: bottom;
 116     padding: 0;
 117 }
 118
 119 .pmx-itype-icon-memory,
 120 .pmx-itype-icon-processor,
 121 .pmx-itype-icon /* NOTE: use this one instead of adding new specific ones! */
 122 {
 123     background-repeat: no-repeat;
 124     background-position:3px center;
 125     padding-left: 20px;
 126     background-size: 16px 16px; /* Chrom* needs both as else it gets cut-off due do non 1:1 ratio */
 127 }
 128
 129 .pmx-itype-icon-memory {
 130     background-image:url(../images/icon-ram.svg);
 131 }
 132
 133 .pmx-itype-icon-processor {
 134     background-image:url(../images/icon-cpu.svg);
 135 }
 136
 137 .pmx-itype-icon-debian-swirl {
 138     padding-left: 22px;
 139     background-size: 16px 16px; /* Chrom* needs both as else it gets cut-off due do non 1:1 ratio */
 140     background-image:url(../images/debian-swirl-openlogo.svg);
 141 }
 142 .pmx-itype-icon-proxmox-x {
 143     padding-left: 22px;
 144     background-size: 16px 16px; /* Not really required here, as here WxH is 1:1 but cannot hurt */
 145     background-image:url(../images/proxmox-symbol-x.svg);
 146 }
 147
 148 .pmx-itype-icon-openid-logo {
 149     padding-left: 22px;
 150     background-size: 16px 16px;
 151     background-image:url(../images/openid-icon-100x100.png);
 152 }
 153
 154 /* change font for config panel back to fontawesome */
 155 .x-treelist-item-expanded > * > * > .x-treelist-item-expander::after,
 156 .x-treelist-item-expander::after {
 157     font: 16px/1 FontAwesome;
 158 }
 159
 160 .x-treelist-pve-nav {
 161     background-color: #f5f5f5;
 162 }
 163
 164 /* fix padding for legend in header */
 165 .x-legend-inner {
 166     padding: 0;
 167 }
 168
 169 .proxmox-apt-repos .x-grid-group-hd {
 170     color: #000000;
 171     background-color: #f5f5f5;
 172 }
 173 .proxmox-apt-repos .x-grid-group-title {
 174     color: #333;
 175 }
 176
 177 /* some general helper classes */
 178 .centered-flex-column {
 179     display: flex;
 180     justify-content: center;
 181     flex-direction: column;
 182     width: 100%;
 183     height: 100%;
 184 }
 185
 186 /* Fix icon/text baseline */
 187 .x-tab-default {
 188     display: inline-flex;
 189     align-items: center;
 190     justify-content: center;
 191 }
 192 .x-tab-default > span {
 193     text-align: center;
 194     vertical-align: middle;
 195 }
 196 .x-tab-button {
 197     line-height: unset;
 198 }
 199 .x-tab-inner {
 200     display: unset;
 201     vertical-align: text-top;
 202 }
 203 .x-tab-wrap {
 204     display: unset;
 205 }
 206 .x-tab-default-top {
 207     padding: 2px 6px 2px 6px;
 208 }
 209
 210 /* rules for the markdown content, prefix with the .pmx-md class */
 211 .pmx-md {
 212     font-size: 1.0em;
 213     line-height: 1.25em;
 214 }
 215 .pmx-md p {
 216     margin-top: 0.75em;
 217     margin-bottom: 0.75em;
 218 }
 219 .pmx-md :is(h1, h2, h3, h4, h5, h6) {
 220     margin-top: 0.9em;
 221     margin-bottom: 0.75em;
 222 }
 223 .pmx-md h1 { font-size: 175%; }
 224 .pmx-md h2 { font-size: 150%; }
 225 .pmx-md h3 { font-size: 125%; }
 226 .pmx-md h4 { font-size: 110%; }
 227 .pmx-md h5 { font-size: 100%; }
 228 .pmx-md h6 { font-size: 100%; }
 229
 230 .pmx-md code {
 231     white-space: pre;
 232     background-color: #f5f5f5;
 233     padding: 1px;
 234 }
 235 .pmx-md pre code {
 236     display: inline-block;
 237     padding: 5px;
 238     border-left: 3px solid #e0e0e0;
 239 }
 240 .pmx-md strong {
 241     font-weight: bold;
 242 }
 243 .pmx-md blockquote {
 244     border-left: 1px solid #666666;
 245     padding-left: 4px;
 246     margin: 10px 2ch;
 247 }
 248 /* markdown tables */
 249 .pmx-md table {
 250     border-spacing: 0;
 251     border-collapse: collapse;
 252 }
 253 .pmx-md td, .pmx-md th {
 254     padding: 5px;
 255 }
 256 .pmx-md td[align="center"] {
 257     text-align: center;
 258 }
 259 .pmx-md td[align="right"] {
 260     text-align: right;
 261 }
 262 .pmx-md tbody td {
 263     border-bottom: 1px solid #e0e0e0;
 264 }
 265 .pmx-md tbody tr:nth-of-type(even) {
 266     background-color: #f5f5f5;
 267 }
 268 .pmx-md tbody tr:last-of-type td {
 269     border-bottom: 1px solid #666666;
 270 }
 271 .pmx-md tbody tr:hover td {
 272     background-color: #e0e0e0;
 273 }
 274 /* markdown tables end */
 275
 276 /* markdown content end */
 277
 278 /* action column fix start */
 279 .x-action-col-icon {
 280     margin: 0 1px;
 281     font-size: 14px;
 282 }
 283 .x-action-col-icon:before, .x-action-col-icon:after {
 284     font-size: 14px;
 285 }
 286 .x-action-col-icon:hover:before, .x-action-col-icon:hover:after {
 287     text-shadow: 1px 1px 1px #AAA;
 288     font-weight: 800;
 289 }
 290 .x-action-col-icon:before {
 291         color: #555;
 292     }
 293 /* action column fix end */