]> git.proxmox.com Git - pve-manager.git/blame - www/css/ext6-pve.css
ceph: make all service name regexes the same
[pve-manager.git] / www / css / ext6-pve.css
CommitLineData
9a55d9a2
EK
1/* overwrite to use full black for enabled buttons */
2.x-btn-inner-default-toolbar-small {
3 font: 300 12px/16px helvetica, arial, verdana, sans-serif;
4 color: #000;
5 padding: 0 5px;
6 max-width: 100%;
7}
8
9/* add missing class for context menu header */
10.x-menu-header {
11 font: 400 13px/20px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
12 color: #fff;
13 padding: 4px;
14 background-color: #3892d4;
06076ea0
TL
15}
16
4dce6073
TL
17/* make the upper window end visible */
18.x-css-shadow {
19 box-shadow: rgb(136,136,136) 0px -1px 15px !important;
20}
21
06076ea0
TL
22/* reduce tree space */
23.x-grid-cell-inner-treecolumn { /* vertical padding */
131cd85a 24 padding: 4px 0px 3px 0px;
06076ea0
TL
25}
26
27/* horizontal distance between parent and child leaf */
28.x-tree-elbow-img {
29 width: 14px;
30}
131cd85a
DC
31
32/* adjust horizontal position of menu icons */
33.x-menu-item-icon-default {
d9fd02eb
DC
34 top: 5px;
35 left: 3px;
36 font-size: 14px;
37}
38
39/* this gives a better placement for the font-awesome icons */
40.x-btn-icon-el-default-toolbar-small {
41 height: 14px;
131cd85a
DC
42}
43
a991a203
DC
44/* this icon looks weird in sizes not n*14px */
45.x-btn-icon-el-default-toolbar-small.fa-ellipsis-v {
46 font-size: 14px;
47}
48
49.x-btn-icon-el-default-small {
50 height: 14px;
51 font-size: 14px;
52}
53
131cd85a 54/* icons for tree/snapshots/menus/etc.. */
a991a203
DC
55
56/* overwrite folder icons of theme */
57.x-tree-icon-parent,
2fa8270b
DC
58.x-tree-icon-parent-expanded,
59.x-tree-icon-leaf {
a991a203
DC
60 background: none;
61 display: inline-block;
62 font: normal normal normal 14px/1 FontAwesome;
63 font-size: inherit;
64 text-rendering: auto;
65 -webkit-font-smoothing: antialiased;
66 -moz-osx-font-smoothing: grayscale;
67 font-size: 1.25em;
68 line-height: 1.6em;
69 color: #555;
70 margin-right: 5px;
71}
72
73.x-tree-icon-parent:not(.x-tree-icon-custom):before {
74 content: "\f114";
75}
76
77.x-tree-icon-parent-expanded:not(.x-tree-icon-custom):before {
78 content: "\f115";
79}
80
81/* loading in task list */
131cd85a
DC
82.x-grid-row-loading {
83 background: no-repeat center center;
84 background-image:url(../ext6/theme-crisp/resources/images/loadmask/loading.gif);
85}
86
a991a203 87/* console icon in task list */
131cd85a
DC
88.x-grid-row-console {
89 background: no-repeat center center;
a991a203
DC
90 background-image:url(../images/icon-display.png);
91}
92
93/* for font-awesome colors */
94/* tree icons */
95
96/* big symbols */
2fa8270b 97.x-tree-icon-custom {
a991a203
DC
98 font-size: 1.25em;
99 line-height: 1.6em;
100 color: #555;
101 margin-right: 5px;
102}
103
104/* grid icons (resources, etc) */
2fa8270b 105.x-grid-icon-custom {
a991a203
DC
106 font-size: 1.25em;
107 color: #555;
108 margin-right: 5px;
109}
110
111/* the running vms are darker */
2fa8270b
DC
112.x-tree-icon-custom.running,
113.x-grid-icon-custom.running {
a991a203
DC
114 color: #000;
115}
116
2fa8270b
DC
117/* stopped and offline items are greyed out */
118.x-tree-icon-custom.stopped,
119.x-grid-icon-custom.stopped,
120.x-tree-icon-custom.offline,
121.x-grid-icon-custom.offline {
122 color: #cfcfcf;
123}
124
a991a203 125/* the small icons */
2fa8270b
DC
126.x-tree-icon-custom:after,
127.x-grid-icon-custom:after {
a991a203
DC
128 position: relative;
129 left: -5px;
130 top: 1px;
131 font-size: 0.75em;
132 text-shadow: -1px 0px 2px #fff;
133 content: "\ ";
134}
135
2fa8270b
DC
136/* the green check */
137.x-tree-icon-custom.online:after,
138.x-grid-icon-custom.online:after {
a991a203 139 content: "\f058";
6d453a84 140 color: #21BF4B;
a991a203
DC
141}
142
2fa8270b
DC
143/* the grey '?' */
144.x-tree-icon-custom.unknown:after,
145.x-grid-icon-custom.unknown:after {
146 content: "\f059";
147 color: #888;
148}
149
150/* the play symbol */
151.x-tree-icon-custom.running:after,
152.x-grid-icon-custom.running:after {
a991a203 153 content: "\f04b";
6d453a84 154 color: #21BF4B;
a991a203
DC
155}
156
2fa8270b
DC
157/* the pause symbol */
158.x-tree-icon-custom.paused:after,
159.x-grid-icon-custom.paused:after {
a991a203
DC
160 content: "\f04c";
161 color: #CC8E00;
162 font-size: 0.6em;
163}
164
77d23320
OB
165/* the suspend symbol */
166.x-tree-icon-custom.suspended:after,
167.x-grid-icon-custom.suspended:after {
168 content: "\f04c";
169 color: #CC8E00;
170 font-size: 0.6em;
171}
172
3cc3b67d
DC
173/* lock icons */
174.x-tree-icon-custom.locked:after,
175.x-grid-icon-custom.locked:after {
176 content: "\f023";
177 color: #000000;
178}
179
180.x-tree-icon-custom.lock-backup:after,
181.x-grid-icon-custom.lock-backup:after {
182 content: "\f0c7";
183 color: #000000;
184}
185
9ba642dd
TL
186.x-tree-icon-custom.lock-migrate:after,
187.x-grid-icon-custom.lock-migrate:after {
188 content: "\f1d9";
90f2d251 189 /* color: #21BF4B; */
9ba642dd
TL
190 color: #000000;
191 font-size: 0.75em;
192}
193
194
195.x-tree-icon-custom.lock-suspending:after,
196.x-grid-icon-custom.lock-suspending:after {
197 content: "\f019";
198 color: #CC8E00;
199 font-size: 0.75em;
200}
201
202.x-tree-icon-custom.lock-suspended:after,
203.x-grid-icon-custom.lock-suspended:after {
204 content: "\f019";
205 color: #000000;
206 font-size: 0.75em;
207}
208
3cc3b67d
DC
209/* yellow ! triangle */
210.x-tree-icon-custom.io-error:after,
211.x-grid-icon-custom.io-error:after,
212.x-tree-icon-custom.internal-error:after,
213.x-grid-icon-custom.internal-error:after,
214.x-tree-icon-custom.guest-panicked:after,
215.x-grid-icon-custom.guest-panicked:after {
216 content: "\f071";
217 color: #FFCC00;
218}
219
220/* the red x */
221.x-tree-icon-custom.offline:after,
222.x-grid-icon-custom.offline:after,
223.x-tree-icon-custom.ha-error:after,
224.x-grid-icon-custom.ha-error:after {
225 content: "\f057";
226 color: #CC1800;
227}
228
2fa8270b
DC
229/* the lxc template */
230.x-tree-icon-custom.lxc:after,
231.x-grid-icon-custom.lxc:after {
a991a203
DC
232 content: "\f1b2";
233 background: #fff;
234}
235
2fa8270b
DC
236/* the qemu template */
237.x-tree-icon-custom.qemu:after,
238.x-grid-icon-custom.qemu:after {
a991a203
DC
239 content : "\f108";
240 background: #fff;
241}
242
2fa8270b
DC
243/* fixes background on mouseover and selected items */
244.x-grid-item-over .qemu:after,
245.x-grid-item-over .lxc:after {
a991a203
DC
246 background-color: #e2eff9;
247 text-shadow: -1px 0px 2px #e2eff9;
248}
249
2fa8270b
DC
250.x-grid-item-selected .qemu:after,
251.x-grid-item-selected .lxc:after {
a991a203
DC
252 background-color: #c2ddf2;
253 text-shadow: -1px 0px 2px #c2ddf2;
131cd85a
DC
254}
255
256.pve-itype-icon-virt-viewer,
257.pve-itype-icon-tigervnc,
258.pve-itype-icon-novnc,
d0f7ae46 259.pve-itype-icon-xtermjs,
131cd85a
DC
260.pve-itype-icon-display,
261.pve-itype-icon-memory,
262.pve-itype-icon-processor,
263.pve-itype-icon-network,
264.pve-itype-icon-network-server,
265.pve-itype-icon-keyboard,
266.pve-itype-icon-cdrom,
267.pve-itype-icon-qemu,
268.pve-itype-icon-qemu-template,
269.pve-itype-icon-qemu-running,
270.pve-itype-icon-lxc,
271.pve-itype-icon-lxc-template,
272.pve-itype-icon-lxc-running,
273.pve-itype-icon-swap,
274.pve-itype-icon-node,
275.pve-itype-icon-node-running,
276.pve-itype-icon-storage,
277.pve-itype-icon-pool,
77c95181 278.pve-itype-icon-itype,
8eb6f213 279.pve-itype-icon-usb,
7235d619 280.pve-itype-icon-serial,
e9a7094d 281.pve-itype-icon-cloud,
8eb6f213 282.pve-itype-icon-pci
131cd85a
DC
283{
284 background-repeat: no-repeat;
285 background-position:3px center;
286 padding-left: 20px;
287}
288
6a040799
DC
289.pve-itype-fa > .x-grid-cell-inner{
290 padding-left: 3px;
291}
292
293.pve-grid-fa {
294 margin-right: 10px;
295}
296
131cd85a
DC
297.pve-itype-icon-qemu,
298.x-tree-node-computer,
299.x-grid-tree-node-expanded .x-tree-node-computer
300{
a991a203 301 background-image:url(../images/icon-display.png);
131cd85a
DC
302}
303
304.pve-itype-icon-lxc,
305.x-tree-node-lxc,
306.x-grid-tree-node-expanded .x-tree-node-lxc
307{
308 background-image:url(../images/lxc-off.png);
309}
310
131cd85a
DC
311.pve-itype-icon-swap,
312.x-tree-node-lxc-swap,
313.x-grid-tree-node-expanded .x-tree-lxc-swap
314{
a991a203 315 background-image:url(../images/icon-swap.png);
131cd85a
DC
316}
317
318.pve-itype-icon-lxc-running,
319.x-tree-node-lxc-running,
320.x-grid-tree-node-expanded .x-tree-node-lxc-running
321{
322 background-image:url(../images/lxc-on.png);
323}
324
131cd85a
DC
325.pve-itype-icon-storage,
326.x-tree-node-harddisk,
327.x-grid-tree-node-expanded .x-tree-node-harddisk
328{
a991a203 329 background-image:url(../images/icon-harddisk.png);
131cd85a
DC
330}
331
332.x-tree-node-snapshot,
333.x-grid-tree-node-expanded .x-tree-node-snapshot
334{
335 background-image:url(../images/snapshot.png);
336}
337
131cd85a
DC
338.pve-itype-icon-itype
339{
340 background-image:url(../ext6/theme-classic/resources/images/tree/folder.gif);
341}
342
343.pve-itype-icon-network-server
344{
345 background-image:url(../images/network-server.png);
346}
347
348.pve-itype-icon-network
349{
a991a203 350 background-image:url(../images/icon-network.png);
131cd85a
DC
351}
352
353.pve-itype-icon-keyboard
354{
a991a203 355 background-image:url(../images/icon-keyboard.png);
131cd85a
DC
356}
357
358.pve-itype-icon-cdrom
359{
a991a203 360 background-image:url(../images/icon-cd.png);
131cd85a
DC
361}
362
363.pve-itype-icon-memory
364{
a991a203 365 background-image:url(../images/icon-ram.png);
131cd85a
DC
366}
367
368.pve-itype-icon-processor
369{
a991a203 370 background-image:url(../images/icon-cpu.png);
131cd85a
DC
371}
372
373.pve-itype-icon-display
374{
a991a203 375 background-image:url(../images/icon-display.png);
131cd85a
DC
376}
377
378.pve-itype-icon-tigervnc
379{
380 background-image:url(../images/tigervnc.png);
381}
382
383.pve-itype-icon-novnc
384{
385 background-image:url(../images/novnc.png);
386}
387
388.pve-itype-icon-virt-viewer
389{
390 background-image:url(../images/virt-viewer.png);
391}
392
d0f7ae46
EK
393.pve-itype-icon-xtermjs
394{
395 background-image:url(../images/xtermjs.png);
396}
397
77c95181
DC
398.pve-itype-icon-usb
399{
400 background-image:url(../images/icon-usb.png);
401}
5ca0c804 402
8eb6f213
DC
403.pve-itype-icon-pci
404{
405 background-image:url(../images/icon-pci.png);
406}
407
7235d619
DC
408.pve-itype-icon-serial
409{
410 background-size: 16px;
411 background-image:url(../images/icon-serial.svg);
412}
413
e9a7094d
DC
414.pve-itype-icon-cloud
415{
416 background-size: 16px;
417 background-image:url(../images/icon-cloud.svg);
418}
419
3ff9bf5a
DC
420.pve-icon {
421 height: 16px;
422 background-position: bottom;
423 vertical-align: bottom;
424 padding: 0;
425}
426
5ca0c804
DC
427/* displayfield minheight is wrong */
428.x-form-display-field-default {
429 min-height: 20px;
430}
df6345f9
DC
431
432.x-button-reset:before {
433 font-size: 16px;
434}
435
436/* for resetcolumnsbutton */
437.x-button-reset:after{
438 content: "\f0e7 ";
439 position: relative;
440 text-shadow: 0 0 2px #fff;
441 left: -3px;
442 top: 2px;
443}
285403bf 444
672a6270 445.proxmox-inline-button .x-btn-inner {
285403bf
EK
446 color: black;
447}
23fd6c53
DC
448
449/* for info widget */
450div.left-aligned {
451 float: left;
452}
453
454div.right-aligned {
455 float: right;
456}
457
458.x-progress.critical .x-progress-bar{
459 background-color: #FF8888;
460}
461
462.x-progress.warning .x-progress-bar{
463 background-color: #FFCC00;
464}
9a4c279d
DC
465
466.x-treelist-nav {
467 background-color: #f5f5f5;
468}
469
470.x-treelist-row {
471 margin-top: 5px;
472}
473
474.x-treelist-item-icon {
475 color: #000;
476 margin-left: 2px;
477}
478
479.x-treelist-item-text {
480 color: #000;
481 padding-left: 5px;
482 padding-right: 5px;
483}
484
332581a8 485.fa-ceph:before {
cc183d88
DC
486 width: 14px;
487 height: 14px;
488 position: absolute;
489 left: 1px;
490 top: 4px;
491 background-image:url(../images/logo-ceph.png);
492 background-size: 14px 14px;
493 content: ' ';
332581a8
DC
494}
495
9a4c279d
DC
496.x-treelist-row-over > * > .x-treelist-item-icon,
497.x-treelist-row-over > * > .x-treelist-item-text{
498 color: #000;
499}
ce11a8af
DC
500
501/* some icons have to be color manually */
502.black {
503 color: #000;
504}
a3a29cc8
DC
505
506.normal {
507 color: #c2ddf2;
508}
509
510.faded {
511 color: #cfcfcf;
512}
513
514.good {
6d453a84 515 color: #21BF4B;
a3a29cc8
DC
516}
517
518.warning {
519 color: #fc0;
520}
521
522.critical {
6d453a84 523 color: #FF6C59;
a3a29cc8 524}
195c7c8c
DC
525
526/* for the ceph monitor widgets */
527div.monitor {
528 text-align:left;
529 border:#cfcfcf solid 1px;
530 border-radius:2px;
531 margin: 2px;
532 padding: 5px 8px;
533}
534
535/* for auto layout */
536div.inline-block {
537 display: inline-block;
538 vertical-align: top;
539}
540
541/* ceph dashboard osd table styling */
542table.osds {
543 border-collapse: collapse;
544 margin: auto;
545}
546
547table.osds td {
548 padding: 4px;
549 text-align: right;
550 border-right: 1px solid #cfcfcf;
551}
552
553table.osds td:last-of-type {
554 border-right: 0;
555}
556
557table.osds tr {
558 border-bottom: 1px solid #cfcfcf;
559}
560
561table.osds tr:last-of-type {
562 border-bottom: 0;
563}
564
565table.osds td:first-of-type {
566 text-align: left;
567}
568
c359b437
DC
569.pointer {
570 cursor: pointer;
571}
33739115
DC
572
573.x-grid-filters-filtered-column{
574 font-style: italic;
575 font-weight: bold;
576}
7553d760 577
3ab7e0ec 578.proxmox-invalid-row {
c0f75e23
DC
579 background-color: #f3d6d7;
580}
9058a478
DC
581
582.pve-static-mask div.x-mask-msg-text {
583 padding: 10px;
584 background-image: none;
585}
d0b1e570
DC
586
587.x-fa {
588 diplay: inline-block;
589 font: normal normal normal 14px/1 FontAwesome;
590 text-rendering: auto;
591 -webkit-font-smoothing: antialiased;
592 -moz-osx-font-smoothing: grayscale;
593}
a19652db
DC
594
595.usage-wrapper {
596 margin-left: -7px;
597 vertical-align: text-bottom;
598 display: inline-block;
599 width: 8px;
600 height: 1.2em;
601 border: 1px solid #555;
602 border-radius: 1px;
603 padding: 1px;
604}
605
606.usage-negative {
607 left: 0px;
608 right:0px;
609}
610
611.usage {
612 left: 0px;
613 right: 0px;
614 background-color: #555;
615}
4616a55b
TM
616
617.install-mask {
618 background-color: rgb(245, 245, 245);
619 color: #000;
9ba642dd 620}