--- a/www/jqwidgets/styles/jqx.base.css Sun Apr 11 10:53:20 2021 +0200
+++ b/www/jqwidgets/styles/jqx.base.css Mon Apr 12 16:03:38 2021 +0200
@@ -1,4 +1,39 @@
-/*Rounded Corners*/
+:root {
+ --jqx-grid-row-height: 36px;
+ --jqx-grid-column-height: 48px;
+ --jqx-grid-show-column-lines: 1;
+ --jqx-list-item-height: -1;
+ --jqx-grid-filter-menu-items-height: 30px;
+ --jqx-dropdown-animation: transform;
+ --jqx-datetimeinput-dropdown-height: 280px;
+ --jqx-datetimeinput-dropdown-width: 280px;
+ --jqx-calendar-header-height: 40px;
+ --jqx-calendar-title-height: 49px;
+ --jqx-icon-calendar: '\e829'; /* Code of calendar icon */
+ --jqx-icon-filter: '\f0b0'; /* Code of filter icon */
+ --jqx-icon-menu: '\f0c9'; /* Code of menu icon */
+ --jqx-icon-check: '\e908'; /* Code of check icon */
+ --jqx-icon-first-page: '\e900'; /* Code of first page icon */
+ --jqx-icon-arrow-down: '\e901'; /* Code of down arrow icon */
+ --jqx-icon-arrow-left: '\e902'; /* Code of left arrow icon */
+ --jqx-icon-arrow-right: '\e903'; /* Code of right arrow icon */
+ --jqx-icon-arrow-up: '\e904'; /* Code of up arrow icon */
+ --jqx-icon-arrow-down-filled: '\e812'; /* Code of filled down arrow icon */
+ --jqx-icon-arrow-left-filled: '\e816'; /* Code of filled left arrow icon */
+ --jqx-icon-arrow-right-filled: '\e81e'; /* Code of filled right arrow icon */
+ --jqx-icon-arrow-up-filled: '\e815'; /* Code of filled up arrow icon */
+ --jqx-icon-visibility: '\e90d'; /* Code of visibility icon */
+ --jqx-icon-visibility-off: '\e90e'; /* Code of visibility off icon */
+ --jqx-icon-last-page: '\e905'; /* Code of last page icon */
+ --jqx-icon-close: '\e80d'; /* Code of close icon */
+ --jqx-icon-search: '\e828'; /* Code of search icon */
+ --jqx-border-radius: 4px;
+ --jqx-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ --jqx-font-size: 14px;
+ --jqx-action-button-size: 25px;
+}
+
+/*Rounded Corners*/
/*top-left rounded Corners*/
.jqx-rc-tl {
-moz-border-radius-topleft: 3px;
@@ -159,7 +194,9 @@
margin: 0 0 0 0;
cursor: default;
}
-
+.jqx-button[aria-disabled="true"] {
+ pointer-events:none;
+}
button.jqx-button, input[type=button].jqx-button, input[type=submit].jqx-button {
box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
@@ -874,7 +911,7 @@
/*applied to the Grid when its loading the data.*/
.jqx-grid-load {
padding-right: 0px;
- background-image: url(images/loader.gif);
+ background-image: url(./images/loader.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 9999;
@@ -883,7 +920,7 @@
/*applied to a group's collapse button.*/
.jqx-grid-group-collapse {
padding-right: 0px;
- background-image: url(images/icon-right.png);
+ background-image: url(./images/icon-right.png);
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
@@ -891,7 +928,7 @@
.jqx-grid-group-collapse-rtl {
padding-right: 0px;
- background-image: url(images/icon-left.png);
+ background-image: url(./images/icon-left.png);
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
@@ -899,7 +936,7 @@
/*applied to a group's expand button.*/
.jqx-grid-group-expand, .jqx-grid-group-expand-rtl {
padding-right: 0px;
- background-image: url(images/icon-down.png);
+ background-image: url(./images/icon-down.png);
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
@@ -1099,15 +1136,15 @@
}
/*applied to a sub menu item when it has sub menu items. Displays right arrow icon.*/
.jqx-menu-item-arrow-right {
- background-image: url(images/icon-right.png);
+ background-image: url(./images/icon-right.png);
}
/*applied to a sub menu item when it has sub menu items. Displays down arrow icon.*/
.jqx-menu-item-arrow-down {
- background-image: url(images/icon-down.png);
+ background-image: url(./images/icon-down.png);
}
/*applied to a sub menu item when it has sub menu items. Displays up arrow icon.*/
.jqx-menu-item-arrow-up {
- background-image: url(images/icon-up.png);
+ background-image: url(./images/icon-up.png);
}
.jqx-menu-minimized {
@@ -1169,21 +1206,21 @@
padding-left: 5px;
width: 17px;
height: 15px;
- background-image: url(images/icon-left.png);
+ background-image: url(./images/icon-left.png);
background-position: 0 50%;
background-repeat: no-repeat;
}
/*applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays right arrow icon.*/
.jqx-menu-item-arrow-right-selected {
- background-image: url(images/icon-right.png);
+ background-image: url(./images/icon-right.png);
}
/*applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays down arrow icon.*/
.jqx-menu-item-arrow-down-selected {
- background-image: url(images/icon-down.png);
+ background-image: url(./images/icon-down.png);
}
/*applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays up arrow icon.*/
.jqx-menu-item-arrow-up-selected {
- background-image: url(images/icon-up.png);
+ background-image: url(./images/icon-up.png);
}
.jqx-menu-item-arrow-right-selected, .jqx-menu-item-arrow-up-selected, .jqx-menu-item-arrow-down-selected, .jqx-menu-item-arrow-top-right {
@@ -1196,15 +1233,15 @@
}
/*applied to a top-level menu item when it has sub menu items. Displays right arrow icon.*/
.jqx-menu-item-arrow-top-right {
- background-image: url(images/icon-right.png);
+ background-image: url(./images/icon-right.png);
}
/*applied to a sub menu item when it has sub menu items and its sub menu is opened. Displays left arrow icon.*/
.jqx-menu-item-arrow-left-selected {
- background-image: url(images/icon-left.png);
+ background-image: url(./images/icon-left.png);
}
/*applied to a top-level menu item when it has sub menu items. Displays left arrow icon.*/
.jqx-menu-item-arrow-top-left {
- background-image: url(images/icon-left.png);
+ background-image: url(./images/icon-left.png);
}
.jqx-menu-item-arrow-left-selected, .jqx-menu-item-arrow-top-left {
@@ -1405,14 +1442,14 @@
padding-right: 0px;
width: 17px;
height: 17px;
- background-image: url(images/icon-right.png);
+ background-image: url(./images/icon-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
}
.jqx-tree-item-arrow-collapse-rtl, .jqx-tree-item-arrow-collapse-hover-rtl {
- background-image: url(images/icon-left.png);
+ background-image: url(./images/icon-left.png);
}
/*applied to a tree item when it has sub items and is expanded. Displays an arrow icon next to the item.*/
@@ -1420,7 +1457,7 @@
padding-right: 0px;
width: 17px;
height: 17px;
- background-image: url(images/icon-down.png);
+ background-image: url(./images/icon-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
@@ -1457,7 +1494,7 @@
/*applied to the tab close button.*/
.jqx-tabs-close-button {
outline: none;
- background-image: url(images/close.png);
+ background-image: url(./images/close.png);
cursor: pointer;
margin: 0 0 0 0;
padding: 0 0 0 0;
@@ -1467,7 +1504,7 @@
/*applied to the tab close button when the tab is selected.*/
.jqx-tabs-close-button-selected {
outline: none;
- background-image: url(images/close.png);
+ background-image: url(./images/close.png);
cursor: pointer;
margin: 0 0 0 0;
padding: 0 0 0 0;
@@ -1475,7 +1512,7 @@
/*applied to the tab close button when the mouse is over the tab.*/
.jqx-tabs-close-button-hover {
outline: none;
- background-image: url(images/close.png);
+ background-image: url(./images/close.png);
cursor: pointer;
margin: 0 0 0 0;
padding: 0 0 0 0;
@@ -1734,7 +1771,7 @@
/*applied to the check box when it is checked. Displays a check icon.*/
.jqx-checkbox-check-checked {
float: left;
- background: transparent url(images/check_black.png) center center no-repeat;
+ background: transparent url(./images/check_black.png) center center no-repeat;
padding: 0px;
border: none;
outline: none;
@@ -1743,7 +1780,7 @@
/*applied to the check box when the widget is disabled. Displays a disabled check icon.*/
.jqx-checkbox-check-disabled {
float: left;
- background: transparent url(images/check_disabled.png) center center no-repeat;
+ background: transparent url(./images/check_disabled.png) center center no-repeat;
padding: 0px;
border: none;
outline: none;
@@ -1752,7 +1789,7 @@
/*applied to the check box when its state is indeterminate.*/
.jqx-checkbox-check-indeterminate {
float: left;
- background: transparent url(images/check_indeterminate_black.png) center center no-repeat;
+ background: transparent url(./images/check_indeterminate_black.png) center center no-repeat;
padding: 0px;
border: none;
outline: none;
@@ -1761,7 +1798,7 @@
/*applied to the check box when its state is indeterminate and it is disabled.*/
.jqx-checkbox-check-indeterminate-disabled {
float: left;
- background: transparent url(images/check_indeterminate_disabled.png) center center no-repeat;
+ background: transparent url(./images/check_indeterminate_disabled.png) center center no-repeat;
padding: 0px;
border: none;
outline: none;
@@ -1784,7 +1821,7 @@
.jqx-radiobutton-default {
cursor: pointer;
float: left;
- background: transparent url(images/roundbg_classic_normal.png) left center scroll repeat-x;
+ background: transparent url(./images/roundbg_classic_normal.png) left center scroll repeat-x;
padding: 0px;
border: 1px solid transparent;
outline: none;
@@ -1816,7 +1853,7 @@
/*applied to the radio button when it is checked.*/
.jqx-radiobutton-check-checked {
float: left;
- background: transparent url(images/roundbg_check_black.png) left top no-repeat;
+ background: transparent url(./images/roundbg_check_black.png) left top no-repeat;
padding: 0px;
border: 1px solid transparent;
outline: none;
@@ -1835,7 +1872,7 @@
/*applied to the radio button when it is in indeterminate state.*/
.jqx-radiobutton-check-indeterminate {
float: left;
- background: transparent url(images/roundbg_check_indeterminate.png) left top no-repeat;
+ background: transparent url(./images/roundbg_check_indeterminate.png) left top no-repeat;
padding: 0px;
border: none;
outline: none;
@@ -1875,7 +1912,7 @@
background-color: transparent;
background-repeat: no-repeat;
cursor: pointer;
- background-image: url(images/star.png);
+ background-image: url(./images/star.png);
overflow: hidden;
}
/*applied to the rating when it is hovered.*/
@@ -1884,7 +1921,7 @@
padding: 0px;
background-repeat: no-repeat;
cursor: pointer;
- background-image: url(images/star_hover.png);
+ background-image: url(./images/star_hover.png);
overflow: hidden;
}
/*applied to the rating when it is disabled.*/
@@ -1893,7 +1930,7 @@
padding: 0px;
background-repeat: no-repeat;
cursor: pointer;
- background-image: url(images/star_disabled.png);
+ background-image: url(./images/star_disabled.png);
overflow: hidden;
}
/*jqxCalendar Style*/
@@ -2650,13 +2687,13 @@
/*applied to the window’s close button*/
.jqx-window-close-button {
cursor: pointer;
- background-image: url(images/close.png);
+ background-image: url(./images/close.png);
background-repeat: no-repeat;
margin-top: 2px;
}
/*applied to the window's collapse button*/
.jqx-window-collapse-button {
- background-image: url(images/icon-up.png);
+ background-image: url(./images/icon-up.png);
cursor: pointer;
margin-top: 3px;
}
@@ -2664,7 +2701,7 @@
.jqx-window-collapse-button-collapsed {
margin-top: 3px;
cursor: pointer;
- background-image: url(images/icon-down.png);
+ background-image: url(./images/icon-down.png);
}
/*setting styles of the modal window’s background*/
.jqx-window-modal {
@@ -2880,7 +2917,7 @@
padding: 0px;
margin: 0px;
background-color: transparent;
- background-image: url(images/multi-arrow.gif);
+ background-image: url(./images/multi-arrow.gif);
}
.jqx-validator-error-label {
@@ -2904,7 +2941,10 @@
border-radius: 5px;
border: 1px solid #ccc;
}
-
+.jqx-switchbutton[aria-disabled="true"] {
+ opacity: 0.5;
+ pointer-events: none;
+}
.jqx-switchbutton-thumb {
display: inline-block;
cursor: pointer;
@@ -3051,25 +3091,25 @@
.jqx-icon-close {
cursor: pointer;
- background-image: url(images/close.png);
+ background-image: url(./images/close.png);
background-repeat: no-repeat;
background-position: center;
}
.jqx-icon-close-white {
- background-image: url(images/close_white.png);
+ background-image: url(./images/close_white.png);
}
.jqx-icon-close-hover {
cursor: pointer;
- background-image: url(images/close.png);
+ background-image: url(./images/close.png);
background-repeat: no-repeat;
background-position: center;
}
.jqx-icon-search {
cursor: pointer;
- background-image: url(images/search.png);
+ background-image: url(./images/search.png);
background-repeat: no-repeat;
background-position: center;
margin-top: 1px;
@@ -3079,7 +3119,7 @@
}
.jqx-icon-plus {
- background-image: url(images/plus.png);
+ background-image: url(./images/plus.png);
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
@@ -3088,7 +3128,7 @@
}
.jqx-icon-plus-alt, .jqx-icon-plus-alt-white {
- background-image: url(images/icon-plus.png);
+ background-image: url(./images/icon-plus.png);
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
@@ -3097,7 +3137,7 @@
}
.jqx-icon-plus-alt-white {
- background-image: url(images/icon-plus-white.png);
+ background-image: url(./images/icon-plus-white.png);
}
/* jqxScrollView */
.jqx-scrollview-button {
@@ -3964,7 +4004,9 @@
opacity: .55;
filter: Alpha(Opacity=45);
}
-
+.jqx-grid.jqx-fill-state-disabled {
+ pointer-events: none;
+}
.jqx-fill-state-normal td, .jqx-fill-state-hover td, .jqx-fill-state-pressed td, .jqx-fill-state-disabled td, .jqx-fill-state-focus td, .jqx-widget td, .jqx-widget-content td, .jqx-widget-header td {
box-sizing: border-box;
-moz-box-sizing: border-box;
@@ -4396,7 +4438,7 @@
}
.jqx-passwordinput-password-icon, .jqx-passwordinput-password-icon-rtl {
- background-image: url(images/icon-showpassword.png) !important;
+ background-image: url(./images/icon-showpassword.png) !important;
background-repeat: no-repeat !important;
width: 14px;
height: 9px;
@@ -5653,7 +5695,7 @@
border-top-width: 0;
border-style: solid;
visibility: hidden;
- z-index: 99999;
+ z-index: 1000;
}
.jqx-toolbar-tool-minimized {
@@ -7715,3 +7757,61 @@
opacity: 1;
}
}
+.jqx-grid-card-row {
+ display: grid;
+ grid-template-columns: 1fr;
+ height: 100%;
+ overflow: hidden;
+}
+
+.jqx-grid-card-cell {
+ padding: 15px;
+ overflow: auto;
+}
+
+.jqx-grid-card-cell table {
+ width: 100%;
+ height: 100%;
+ padding: 10px;
+ table-layout: fixed;
+ border: 1px solid #bbb;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border-radius: 4px;
+ box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+}
+
+.jqx-grid-card-cell{
+ position: relative;
+}
+
+.jqx-grid-card-cell .jqx-icon-edit {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ position: absolute;
+ right: 25px;
+ top: 25px;
+ background-size: 13px;
+ cursor: pointer;
+}
+
+.jqx-grid-card-cell input{
+ padding: 4px;
+
+}
+
+.jqx-grid-card-cell-label {
+ font-size: 12px;
+ text-transform: uppercase;
+ color: rgb(90,90,90);
+}
+.jqx-grid-card-cell td div {
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.jqx-card-edit-buttons {
+ display: flex;
+ margin-top: 30px;
+ justify-content: center;
+}
\ No newline at end of file