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 .pwt-eol-icon {
 117     position: relative;
 118     float: left;
 119     margin-right: 5px;
 120     font-size: 1.3em;
 121     color: #FF6C59;
 122 }
 123
 124 /* reduce chart legend space usage to something more sane */
 125 .x-legend-item {
 126         padding: 0.4em 0.8em 0.4em 1.8em;
 127 }
 128
 129 .x-legend-item-marker {
 130         left: 0.5em;
 131         top: 0.6em;
 132 }
 133
 134 /* for info widget */
 135 div.left-aligned {
 136     float: left;
 137 }
 138
 139 div.right-aligned {
 140     float: right;
 141 }
 142
 143 .x-progress.critical .x-progress-bar{
 144     background-color: #FF8888;
 145 }
 146
 147 .x-progress.warning .x-progress-bar{
 148     background-color: #FFCC00;
 149 }
 150
 151 .x-treelist-item-icon {
 152     color: #000;
 153     font-size: 14px;
 154 }
 155
 156 .x-btn-icon-el-default-toolbar-small {
 157     font-size: 14px;
 158 }
 159 .x-btn-icon-el-default-small {
 160     font-size: 14px;
 161 }
 162
 163 .x-tab-icon-el-default {
 164     color: #000;
 165     font-size: 14px;
 166     margin-top: 2px;
 167 }
 168
 169 .pmx-icon {
 170     height: 16px;
 171     background-position: bottom;
 172     vertical-align: bottom;
 173     padding: 0;
 174 }
 175
 176 .pmx-itype-icon-memory,
 177 .pmx-itype-icon-processor,
 178 .pmx-itype-icon /* NOTE: use this one instead of adding new specific ones! */
 179 {
 180     background-repeat: no-repeat;
 181     background-position:3px center;
 182     padding-left: 20px;
 183     background-size: 16px 16px; /* Chrom* needs both as else it gets cut-off due do non 1:1 ratio */
 184 }
 185
 186 .pmx-itype-icon-memory {
 187     background-image:url(../images/icon-ram.svg);
 188 }
 189
 190 .pmx-itype-icon-processor {
 191     background-image:url(../images/icon-cpu.svg);
 192 }
 193
 194 .pmx-itype-icon-debian-swirl {
 195     padding-left: 22px;
 196     background-size: 16px 16px; /* Chrom* needs both as else it gets cut-off due do non 1:1 ratio */
 197     background-image:url(../images/debian-swirl-openlogo.svg);
 198 }
 199 .pmx-itype-icon-proxmox-x {
 200     padding-left: 22px;
 201     background-size: 16px 16px; /* Not really required here, as here WxH is 1:1 but cannot hurt */
 202     background-image:url(../images/proxmox-symbol-x.svg);
 203 }
 204
 205 .pmx-itype-icon-openid-logo {
 206     padding-left: 22px;
 207     background-size: 16px 16px;
 208     background-image:url(../images/openid-icon-100x100.png);
 209 }
 210
 211 /* change font for config panel back to fontawesome */
 212 .x-treelist-item-expanded > * > * > .x-treelist-item-expander::after,
 213 .x-treelist-item-expander::after {
 214     font: 16px/1 FontAwesome;
 215 }
 216
 217 .x-treelist-pve-nav {
 218     background-color: #f5f5f5;
 219 }
 220
 221 /* fix padding for legend in header */
 222 .x-legend-inner {
 223     padding: 0;
 224 }
 225
 226 .proxmox-apt-repos .x-grid-group-hd {
 227     color: #000000;
 228     background-color: #f5f5f5;
 229 }
 230 .proxmox-apt-repos .x-grid-group-title {
 231     color: #333;
 232 }
 233
 234 /* some general helper classes */
 235 .centered-flex-column {
 236     display: flex;
 237     justify-content: center;
 238     flex-direction: column;
 239     width: 100%;
 240     height: 100%;
 241 }
 242
 243 /* Fix icon/text baseline */
 244 .x-tab-default {
 245     display: inline-flex;
 246     align-items: center;
 247     justify-content: center;
 248 }
 249 .x-tab-default > span {
 250     text-align: center;
 251     vertical-align: middle;
 252 }
 253 .x-tab-button {
 254     line-height: unset;
 255 }
 256 .x-tab-inner {
 257     display: unset;
 258     vertical-align: text-top;
 259 }
 260 .x-tab-wrap {
 261     display: unset;
 262 }
 263 .x-tab-default-top {
 264     padding: 2px 6px 2px 6px;
 265 }
 266
 267 /* rules for the markdown content, prefix with the .pmx-md class */
 268 .pmx-md {
 269     font-size: 1.0em;
 270     line-height: 1.25em;
 271 }
 272 .pmx-md p {
 273     margin-top: 0.75em;
 274     margin-bottom: 0.75em;
 275 }
 276 .pmx-md :is(h1, h2, h3, h4, h5, h6) {
 277     margin-top: 0.9em;
 278     margin-bottom: 0.75em;
 279 }
 280 .pmx-md h1 { font-size: 175%; }
 281 .pmx-md h2 { font-size: 150%; }
 282 .pmx-md h3 { font-size: 125%; }
 283 .pmx-md h4 { font-size: 110%; }
 284 .pmx-md h5 { font-size: 100%; }
 285 .pmx-md h6 { font-size: 100%; }
 286
 287 .pmx-md code {
 288     white-space: pre;
 289     background-color: #f5f5f5;
 290     padding: 1px;
 291 }
 292 .pmx-md pre code {
 293     display: inline-block;
 294     padding: 5px;
 295     border-left: 3px solid #e0e0e0;
 296 }
 297 .pmx-md strong {
 298     font-weight: bold;
 299 }
 300 .pmx-md blockquote {
 301     border-left: 1px solid #666666;
 302     padding-left: 4px;
 303     margin: 10px 2ch;
 304 }
 305 /* markdown tables */
 306 .pmx-md table {
 307     border-spacing: 0;
 308     border-collapse: collapse;
 309 }
 310 .pmx-md td, .pmx-md th {
 311     padding: 5px;
 312 }
 313 .pmx-md td[align="center"] {
 314     text-align: center;
 315 }
 316 .pmx-md td[align="right"] {
 317     text-align: right;
 318 }
 319 .pmx-md tbody td {
 320     border-bottom: 1px solid #e0e0e0;
 321 }
 322 .pmx-md tbody tr:nth-of-type(even) {
 323     background-color: #f5f5f5;
 324 }
 325 .pmx-md tbody tr:last-of-type td {
 326     border-bottom: 1px solid #666666;
 327 }
 328 .pmx-md tbody tr:hover td {
 329     background-color: #e0e0e0;
 330 }
 331 /* markdown tables end */
 332
 333 /* markdown content end */
 334
 335 /* action column fix start */
 336 .x-action-col-icon {
 337     margin: 0 1px;
 338     font-size: 14px;
 339 }
 340 .x-action-col-icon:before, .x-action-col-icon:after {
 341     font-size: 14px;
 342 }
 343 .x-action-col-icon:hover:before, .x-action-col-icon:hover:after {
 344     text-shadow: 1px 1px 1px #AAA;
 345     font-weight: 800;
 346 }
 347 .x-action-col-icon:before {
 348     color: #555;
 349 }
 350 /* action column fix end */