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