proxmox-backup/www/css/ext6-pbs.css
Dominik Csapak 3e395378bc ui: rework DataStore content Panel
instead of having the files as a column, put the files into the tree
as a third level

with this, we can move the actions into an action column and remove
the top buttons (except reload)

clicking the download action now downloads directly, so we would
not need the download window anymore

clicking the browse action, opens the pxar browser like before,
but expands and selects (&focus) the selected pxar file

also changes the icon of 'signed' to the one to locked
but color codes them (singed => greyed out, encrypted => green),
similar to what browsers do/did for certificates

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
2020-07-27 12:47:51 +02:00

227 lines
4.0 KiB
CSS

/* 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 in task list */
.x-grid-row-loading {
background: no-repeat center center;
background-image:url(../extjs/theme-crisp/resources/images/loadmask/loading.gif);
}
/* 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;
}
/* for auto layout */
div.inline-block {
display: inline-block;
vertical-align: top;
}
.pointer {
cursor: pointer;
}
.x-grid-filters-filtered-column{
font-style: italic;
font-weight: bold;
}
/* mark disabled grid entries */
table:not(.x-grid-item-selected) tr.x-grid-row.disabled {
color: #cfcfcf;
}
/* fix action column icons */
.x-action-col-icon {
font-size: 13px;
height: 13px;
}
.x-grid-cell-inner-action-col {
padding: 6px 10px 5px;
}
.x-action-col-icon:before {
color: #555;
}
.x-treelist-item-icon {
color: #000;
}
.x-treelist-nav {
background-color: #f5f5f5;
border-right: 1px solid #cfcfcf;
}
.x-treelist-row-over > * > .x-treelist-item-icon,
.x-treelist-row-over > * > .x-treelist-item-text {
color: #000;
}
.x-treelist-row {
padding: 4px 10px 4px 6px;
}
/* chrome 56 fix */
.x-webkit .x-form-text {
height: 100% !important;
}
.x-webkit :not(.x-form-textarea-body) > .x-form-trigger-wrap {
height: initial;
}
tr.x-grid-row-summary td.x-grid-cell {
border-top: 1px solid black;
font-weight: bold;
}
p.logs {
white-space: nowrap;
font-family: monospace;
overflow: auto;
border: 1px solid #cfcfcf;
margin: 5px;
padding: 5px;
}
/* tree icons */
/* big symbols */
.x-tree-icon-custom {
font-size: 1.25em;
line-height: 1.6em;
color: #555;
margin-right: 5px;
}
.no-leaf-icons .x-tree-icon-leaf {
visibility: hidden;
width: 5px;
}
.pmx-has-badge .x-btn-inner {
padding: 0 0 0 5px;
min-width: 24px;
}
.pmx-button-badge {
display: inline-block;
font-weight: bold;
border-radius: 4px;
padding: 2px 3px;
min-width: 24px;
line-height: 1em;
}
.pmx-button-badge.active {
background-color: #464d4d;
}
.pmx-hidden {
cursor: default;
}
.x-action-col-icon.good:before {
color: #21BF4B;
}
.x-action-col-icon.warning:before {
color: #fc0;
}
.x-action-col-icon.critical:before {
color: #FF6C59;
}