]> git.proxmox.com Git - proxmox-widget-toolkit.git/blob - src/css/ext6-pmx.css
css: add centered-flex-column class
[proxmox-widget-toolkit.git] / 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 /* some icons have to be color manually */
27 .black {
28 color: #000;
29 }
30
31 .normal {
32 color: #c2ddf2;
33 }
34
35 .faded {
36 color: #cfcfcf;
37 }
38
39 .good {
40 color: #21BF4B;
41 }
42
43 .warning {
44 color: #fc0;
45 }
46
47 .critical {
48 color: #FF6C59;
49 }
50
51 .info-blue {
52 color: #3892d4;
53 }
54
55 /* reduce chart legend space usage to something more sane */
56 .x-legend-item {
57 padding: 0.4em 0.8em 0.4em 1.8em;
58 }
59
60 .x-legend-item-marker {
61 left: 0.5em;
62 top: 0.6em;
63 }
64
65 /* for info widget */
66 div.left-aligned {
67 float: left;
68 }
69
70 div.right-aligned {
71 float: right;
72 }
73
74 .x-progress.critical .x-progress-bar{
75 background-color: #FF8888;
76 }
77
78 .x-progress.warning .x-progress-bar{
79 background-color: #FFCC00;
80 }
81
82 .x-treelist-item-icon {
83 color: #000;
84 font-size: 14px;
85 }
86
87 .x-btn-icon-el-default-toolbar-small {
88 font-size: 14px;
89 }
90 .x-btn-icon-el-default-small {
91 font-size: 14px;
92 }
93
94 .x-tab-icon-el-default {
95 color: #000;
96 font-size: 14px;
97 margin-top: 2px;
98 }
99
100 .pmx-icon {
101 height: 16px;
102 background-position: bottom;
103 vertical-align: bottom;
104 padding: 0;
105 }
106
107 .pmx-itype-icon-memory,
108 .pmx-itype-icon-processor,
109 .pmx-itype-icon /* NOTE: use this one instead of adding new specific ones! */
110 {
111 background-repeat: no-repeat;
112 background-position:3px center;
113 padding-left: 20px;
114 }
115
116 .pmx-itype-icon-memory {
117 background-image:url(../images/icon-ram.png);
118 }
119
120 .pmx-itype-icon-processor {
121 background-image:url(../images/icon-cpu.png);
122 }
123
124 .pmx-itype-icon-debian-swirl {
125 padding-left: 22px;
126 background-size: 16px 16px; /* Chrom* needs both as else it gets cut-off due do non 1:1 ratio */
127 background-image:url(../images/debian-swirl-openlogo.svg);
128 }
129 .pmx-itype-icon-proxmox-x {
130 padding-left: 22px;
131 background-size: 16px 16px; /* Not really required here, as here WxH is 1:1 but cannot hurt */
132 background-image:url(../images/proxmox-symbol-x.svg);
133 }
134
135 .pmx-itype-icon-openid-logo {
136 padding-left: 22px;
137 background-size: 16px 16px;
138 background-image:url(../images/openid-icon-100x100.png);
139 }
140
141 /* change font for config panel back to fontawesome */
142 .x-treelist-item-expanded > * > * > .x-treelist-item-expander::after,
143 .x-treelist-item-expander::after {
144 font: 16px/1 FontAwesome;
145 }
146
147 .x-treelist-pve-nav {
148 background-color: #f5f5f5;
149 }
150
151 /* fix padding for legend in header */
152 .x-legend-inner {
153 padding: 0;
154 }
155
156 .proxmox-apt-repos .x-grid-group-hd {
157 color: #000000;
158 background-color: #f5f5f5;
159 }
160 .proxmox-apt-repos .x-grid-group-title {
161 color: #333;
162 }
163
164 /* some general helper classes */
165 .centered-flex-column {
166 display: flex;
167 justify-content: center;
168 flex-direction: column;
169 width: 100%;
170 height: 100%;
171 }
172
173 /* rules for the markdown content, prefix with the .pmx-md class */
174 .pmx-md {
175 font-size: 1.0em;
176 line-height: 1.25em;
177 }
178 .pmx-md p {
179 margin-top: 0.75em;
180 margin-bottom: 0.75em;
181 }
182 .pmx-md :is(h1, h2, h3, h4, h5, h6) {
183 margin-top: 0.9em;
184 margin-bottom: 0.75em;
185 }
186 .pmx-md h1 { font-size: 175%; }
187 .pmx-md h2 { font-size: 150%; }
188 .pmx-md h3 { font-size: 125%; }
189 .pmx-md h4 { font-size: 110%; }
190 .pmx-md h5 { font-size: 100%; }
191 .pmx-md h6 { font-size: 100%; }
192
193 .pmx-md code {
194 white-space: pre;
195 background-color: #f5f5f5;
196 padding: 1px;
197 }
198 .pmx-md pre code {
199 display: inline-block;
200 padding: 5px;
201 border-left: 3px solid #e0e0e0;
202 }
203 .pmx-md strong {
204 font-weight: bold;
205 }
206 .pmx-md blockquote {
207 border-left: 1px solid #666666;
208 padding-left: 4px;
209 margin: 10px 2ch;
210 }
211 /* markdown tables */
212 .pmx-md table {
213 border-spacing: 0;
214 border-collapse: collapse;
215 }
216 .pmx-md td, .pmx-md th {
217 padding: 5px;
218 }
219 .pmx-md td[align="center"] {
220 text-align: center;
221 }
222 .pmx-md td[align="right"] {
223 text-align: right;
224 }
225 .pmx-md tbody td {
226 border-bottom: 1px solid #e0e0e0;
227 }
228 .pmx-md tbody tr:nth-of-type(even) {
229 background-color: #f5f5f5;
230 }
231 .pmx-md tbody tr:last-of-type td {
232 border-bottom: 1px solid #666666;
233 }
234 .pmx-md tbody tr:hover td {
235 background-color: #e0e0e0;
236 }
237 /* markdown tables end */
238
239 /* markdown content end */