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