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