add CSS file for PBS ExtJS6 basic ui
some fitting rules copied over from PVE's ext6-pve.css file. simply place it in the css subfolder where the proxmox-backup-gui.js file is hosted and add a "css/" alias for that directory, the formatter gets use the right content type with that. Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
parent
25cdd0e0a1
commit
2d694f8f1f
|
@ -47,6 +47,7 @@ async fn run() -> Result<(), Error> {
|
|||
config.add_alias("fontawesome", "/usr/share/fonts-font-awesome");
|
||||
config.add_alias("xtermjs", "/usr/share/pve-xtermjs");
|
||||
config.add_alias("widgettoolkit", "/usr/share/javascript/proxmox-widget-toolkit");
|
||||
config.add_alias("css", "/usr/share/javascript/proxmox-backup/css");
|
||||
|
||||
let rest_server = RestServer::new(config);
|
||||
|
||||
|
|
|
@ -337,6 +337,7 @@ fn get_index(username: Option<String>, token: Option<String>) -> Response<Body>
|
|||
<link rel="stylesheet" type="text/css" href="/extjs/theme-crisp/resources/theme-crisp-all.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/extjs/crisp/resources/charts-all.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/fontawesome/css/font-awesome.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/ext6-pbs.css" />
|
||||
<script type='text/javascript'> function gettext(buf) {{ return buf; }} </script>
|
||||
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
|
||||
<script type="text/javascript" src="/extjs/charts-debug.js"></script>
|
||||
|
|
|
@ -17,7 +17,7 @@ JSSRC= \
|
|||
Application.js \
|
||||
MainView.js
|
||||
|
||||
all: js/proxmox-backup-gui.js
|
||||
all: js/proxmox-backup-gui.js css/ext6-pbs.css
|
||||
|
||||
js:
|
||||
mkdir js
|
||||
|
@ -31,10 +31,12 @@ clean:
|
|||
find . -name '*~' -exec rm {} ';'
|
||||
rm -rf js
|
||||
|
||||
install: js/proxmox-backup-gui.js
|
||||
install: js/proxmox-backup-gui.js css/ext6-pbs.css
|
||||
install -dm755 $(DESTDIR)$(JSDIR)
|
||||
install -dm755 $(DESTDIR)$(JSDIR)/js
|
||||
install -m644 js/proxmox-backup-gui.js $(DESTDIR)$(JSDIR)/js/
|
||||
install -dm755 $(DESTDIR)$(JSDIR)/css
|
||||
install -m644 css/ext6-pbs.css $(DESTDIR)$(JSDIR)/css/
|
||||
install -dm755 $(DESTDIR)$(JSDIR)/images
|
||||
$(foreach i,$(IMAGES), \
|
||||
install -m644 $(i) $(DESTDIR)$(JSDIR)/images/ ;)
|
||||
|
|
|
@ -0,0 +1,74 @@
|
|||
/* overwrite to use full black for enabled buttons */
|
||||
.x-btn-inner-default-toolbar-small {
|
||||
font: 300 12px/16px helvetica, arial, verdana, sans-serif;
|
||||
color: #000;
|
||||
padding: 0 5px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* add missing class for context menu header */
|
||||
.x-menu-header {
|
||||
font: 400 13px/20px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
|
||||
color: #fff;
|
||||
padding: 4px;
|
||||
background-color: #3892d4;
|
||||
}
|
||||
|
||||
/* make the upper window end visible */
|
||||
.x-css-shadow {
|
||||
box-shadow: rgb(136,136,136) 0px -1px 15px !important;
|
||||
}
|
||||
|
||||
/* reduce tree space */
|
||||
.x-grid-cell-inner-treecolumn { /* vertical padding */
|
||||
padding: 4px 0px 3px 0px;
|
||||
}
|
||||
|
||||
/* horizontal distance between parent and child leaf */
|
||||
.x-tree-elbow-img {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
/* adjust horizontal position of menu icons */
|
||||
.x-menu-item-icon-default {
|
||||
top: 5px;
|
||||
left: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* this gives a better placement for the font-awesome icons */
|
||||
.x-btn-icon-el-default-toolbar-small {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* this icon looks weird in sizes not n*14px */
|
||||
.x-btn-icon-el-default-toolbar-small.fa-ellipsis-v {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.x-btn-icon-el-default-small {
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* displayfield minheight is wrong */
|
||||
.x-form-display-field-default {
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.x-button-reset:before {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* for resetcolumnsbutton */
|
||||
.x-button-reset:after{
|
||||
content: "\f0e7 ";
|
||||
position: relative;
|
||||
text-shadow: 0 0 2px #fff;
|
||||
left: -3px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.proxmox-inline-button .x-btn-inner {
|
||||
color: black;
|
||||
}
|
Loading…
Reference in New Issue