From e82f4bc4cf6fc160edfe9d8ee3a3937dcfde843c Mon Sep 17 00:00:00 2001 From: Ahmed Zamil Date: Mon, 22 Feb 2021 11:39:50 +0300 Subject: [PATCH] initial commit --- .gitignore | 2 + LICENSE | 21 + README.md | 4 + css/default.css | 154 ++ css/desert.css | 155 ++ css/farm.css | 157 ++ css/ground.css | 154 ++ css/iui.css | 2840 ++++++++++++++++++++++++++++++++++ css/iui.default.css | 1826 ++++++++++++++++++++++ css/night.css | 157 ++ css/sea.css | 154 ++ css/sky.css | 201 +++ css/space.css | 157 ++ css/stone.css | 155 ++ css/volcano.css | 201 +++ img/add-hover.png | Bin 0 -> 749 bytes img/add.png | Bin 0 -> 725 bytes img/arrow - Copy.png | Bin 0 -> 3596 bytes img/arrow-down-hover.png | Bin 0 -> 750 bytes img/arrow-down.png | Bin 0 -> 959 bytes img/arrow-left-inactive.png | Bin 0 -> 977 bytes img/arrow-left.png | Bin 0 -> 770 bytes img/arrow-right-inactive.png | Bin 0 -> 991 bytes img/arrow-right.png | Bin 0 -> 757 bytes img/arrow-up-hover.png | Bin 0 -> 811 bytes img/down-arrow-circle-hi.png | Bin 0 -> 23525 bytes img/dropdown-arrow-down.png | Bin 0 -> 256 bytes img/dropdown-arrow-up.png | Bin 0 -> 313 bytes img/filter_16.png | Bin 0 -> 484 bytes img/icon.png | Bin 0 -> 5369 bytes img/minus-hover.png | Bin 0 -> 748 bytes img/minus.green.png | Bin 0 -> 891 bytes img/minus.png | Bin 0 -> 716 bytes img/plus-hover.png | Bin 0 -> 749 bytes img/plus.green.png | Bin 0 -> 938 bytes img/plus.png | Bin 0 -> 725 bytes img/remove-hover.png | Bin 0 -> 748 bytes img/remove.png | Bin 0 -> 716 bytes img/ripple.gif | Bin 0 -> 41176 bytes img/sort-down.png | Bin 0 -> 763 bytes img/sort-up.png | Bin 0 -> 697 bytes img/sort_16.png | Bin 0 -> 779 bytes img/sort_down_16.png | Bin 0 -> 741 bytes img/sort_up_16.png | Bin 0 -> 749 bytes mapkit/package-lock.json | 105 ++ package-lock.json | 27 + src/Core/App.js | 24 + src/Core/Binding.js | 351 +++++ src/Core/IUI.js | 310 ++++ src/Core/IUIElement.js | 313 ++++ src/Data/DataList.js | 14 + src/Data/Field.js | 62 + src/Data/Form.js | 82 + src/Data/Include.js | 68 + src/Data/Layout.js | 64 + src/Data/Repeat.js | 273 ++++ src/Data/TableRow.js | 15 + src/Router/Link.js | 70 + src/Router/Route.js | 159 ++ src/Router/Router.js | 334 ++++ src/Router/Target.js | 60 + src/UI/Background.js | 40 + src/UI/Button.js | 70 + src/UI/Check.js | 58 + src/UI/DateTimePicker.js | 314 ++++ src/UI/Dialog.js | 308 ++++ src/UI/DropDown.js | 196 +++ src/UI/Form.js | 101 ++ src/UI/Grid.js | 204 +++ src/UI/Input.js | 218 +++ src/UI/Login.js | 179 +++ src/UI/Menu.js | 196 +++ src/UI/Navbar.js | 164 ++ src/UI/Range.js | 188 +++ src/UI/RoutesList.js | 23 + src/UI/Select.js | 424 +++++ src/UI/SelectList.js | 119 ++ src/UI/Tab.js | 20 + src/UI/TabbedTarget.js | 207 +++ src/UI/Table.js | 1422 +++++++++++++++++ src/UI/Tabs.js | 207 +++ src/UI/Window.js | 314 ++++ src/iui.js | 62 + test/esiur.html | 127 ++ test/index.html | 322 ++++ test/index1.html | 293 ++++ test/rooms.html | 18 + 87 files changed, 14463 insertions(+) create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 css/default.css create mode 100644 css/desert.css create mode 100644 css/farm.css create mode 100644 css/ground.css create mode 100644 css/iui.css create mode 100644 css/iui.default.css create mode 100644 css/night.css create mode 100644 css/sea.css create mode 100644 css/sky.css create mode 100644 css/space.css create mode 100644 css/stone.css create mode 100644 css/volcano.css create mode 100644 img/add-hover.png create mode 100644 img/add.png create mode 100644 img/arrow - Copy.png create mode 100644 img/arrow-down-hover.png create mode 100644 img/arrow-down.png create mode 100644 img/arrow-left-inactive.png create mode 100644 img/arrow-left.png create mode 100644 img/arrow-right-inactive.png create mode 100644 img/arrow-right.png create mode 100644 img/arrow-up-hover.png create mode 100644 img/down-arrow-circle-hi.png create mode 100644 img/dropdown-arrow-down.png create mode 100644 img/dropdown-arrow-up.png create mode 100644 img/filter_16.png create mode 100644 img/icon.png create mode 100644 img/minus-hover.png create mode 100644 img/minus.green.png create mode 100644 img/minus.png create mode 100644 img/plus-hover.png create mode 100644 img/plus.green.png create mode 100644 img/plus.png create mode 100644 img/remove-hover.png create mode 100644 img/remove.png create mode 100644 img/ripple.gif create mode 100644 img/sort-down.png create mode 100644 img/sort-up.png create mode 100644 img/sort_16.png create mode 100644 img/sort_down_16.png create mode 100644 img/sort_up_16.png create mode 100644 mapkit/package-lock.json create mode 100644 package-lock.json create mode 100644 src/Core/App.js create mode 100644 src/Core/Binding.js create mode 100644 src/Core/IUI.js create mode 100644 src/Core/IUIElement.js create mode 100644 src/Data/DataList.js create mode 100644 src/Data/Field.js create mode 100644 src/Data/Form.js create mode 100644 src/Data/Include.js create mode 100644 src/Data/Layout.js create mode 100644 src/Data/Repeat.js create mode 100644 src/Data/TableRow.js create mode 100644 src/Router/Link.js create mode 100644 src/Router/Route.js create mode 100644 src/Router/Router.js create mode 100644 src/Router/Target.js create mode 100644 src/UI/Background.js create mode 100644 src/UI/Button.js create mode 100644 src/UI/Check.js create mode 100644 src/UI/DateTimePicker.js create mode 100644 src/UI/Dialog.js create mode 100644 src/UI/DropDown.js create mode 100644 src/UI/Form.js create mode 100644 src/UI/Grid.js create mode 100644 src/UI/Input.js create mode 100644 src/UI/Login.js create mode 100644 src/UI/Menu.js create mode 100644 src/UI/Navbar.js create mode 100644 src/UI/Range.js create mode 100644 src/UI/RoutesList.js create mode 100644 src/UI/Select.js create mode 100644 src/UI/SelectList.js create mode 100644 src/UI/Tab.js create mode 100644 src/UI/TabbedTarget.js create mode 100644 src/UI/Table.js create mode 100644 src/UI/Tabs.js create mode 100644 src/UI/Window.js create mode 100644 src/iui.js create mode 100644 test/esiur.html create mode 100644 test/index.html create mode 100644 test/index1.html create mode 100644 test/rooms.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..18566ec --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +.vscode \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..c840fc5 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020-2021 Esiur Foundation + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..7812b3a --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +# IUI +Interactive User Interface for Web + +# Usage \ No newline at end of file diff --git a/css/default.css b/css/default.css new file mode 100644 index 0000000..78d8134 --- /dev/null +++ b/css/default.css @@ -0,0 +1,154 @@ +:root { + --default-background-color: #ffffff; + --default-background-color-light: rgba(255, 255, 255, 0.86); + --default-text-color: #2f4d5e; + --default-link-color: #41b3e2; + --default-graph-color: #5ac9af; + --default-graph-color-light: rgba(90, 201, 175, 0.5); + --default-graph-color-dim: rgba(245, 227, 179, 0.5); + --default-path-color: #f2796b; + --default-point-color: #5ac9af; + --button-color: white; + --button-background-image: linear-gradient(to bottom, rgb(100, 209, 253), #41b3e2); + --button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + --button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + --button-border: 1px solid #215a96; + --button-background-image-hover: linear-gradient(to bottom, #f1796b, #f2796b); + --button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + --button-color-disabled: #7c7c7c; + --button-border-color-disabled: #b7b7b7; + --button-close-color: #aaa; + --button-close-color-hover: #000; + --window-background: #fff; + --window-border: 1px solid #BBBABA; + --dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --window-active-background: rgb(167, 227, 252); + --background-background: rgba(0, 0, 0, 0); + --background-visible-background: rgba(0, 0, 0, 0.6); + --window-title-color: #444; + --window-tools-close-background: linear-gradient(to bottom, #f1796b, #d66255); + --window-tools-close-border: 1px solid #f1786b; + --window-tools-close-background-hover: #f03242; + --dialog-loading-background: rgb(167, 227, 252); + --dialog-loading-content-border: 10px solid #fff; + --dialog-loading-content-border-top: 10px solid #ffe3e3; + --dialog-loading-content-border-right: 10px solid #f2796b; + --dialog-loading-content-border-bottom: 10px solid #f2786b; + --window-header-background: #e6e6e6; + --window-footer-border-top: #eee solid 1px; + --window-footer-background: linear-gradient(to bottom, white, #e1e2eb); + --panel-border: 1px solid #BBBABA; + --panel-title-color: #444; + --table-td-border-bottom: 1px solid #e0e0e0; + --table-td-border: 0; + --table-header-background: linear-gradient(to bottom, white, #e1e2eb); + --table-header-text-background-up: url(img/sort-up.png) no-repeat right; + --table-header-text-background-down: url(img/sort-down.png) no-repeat right; + --table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left; + --table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left; + --table-header-sort-background: url(img/sort_16.png) no-repeat; + --table-tree-background-image: url(img/plus.png); + --table-tree-background-image-hover: url(img/plus-hover.png); + --table-tree-background-image-expanded: url(img/minus.png); + --table-tree-background-image-expanded-hover: url(img/minus-hover.png); + --table-row-level-1-background: rgba(221, 221, 221, 0.5); + --table-row-level-2-background: rgba(121, 121, 121, 0.3); + --table-row-level-3-background: darkkhaki; + --table-row-background-hover: rgb(217, 243, 253); + --table-row-selected-background: rgb(167, 227, 252); + --table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset; + --table-header-wrap-border: 1px solid #c9c9c9; + --table-resizer-background: #dde2e3; + --button-flat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, rgb(246, 246, 246) 100%); + --button-flat-border: 1px solid rgba(220, 220, 220, 0.51); + --button-flat-color: #666666; + --button-flat-border-hover: #ffcbcb; + --button-flat-background-hover: rgb(167, 227, 252); + --colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid; + --colorpicker-button-checked-box-shadow: 0 .0 1em 1px #747373; + --colorpicker-button-hover-border-color: red; + --menu-li-hover-background: rgb(167, 227, 252); + --menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0; + --checkbutton-checked-background: rgb(245, 227, 179); + --checkbutton-checked-box-shdow: #ffffff 0 1px 10px 0 inset; + --tabs-content-border: 1px solid #dcdcdc; + --tabs-button-background: #e7e7e7; + --tabs-button-border: 1px solid #dcdcdc; + --tabs-button-color: #666666; + --tabs-button-hover-border: 1px #6ed5ff solid; + --tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255); + --tabs-button-checked-background: #fff; + --tabs-button-checked-color: #000000; + --dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png); + --dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png); + --listview-li-hover-background: #eee; + --menu-border: 1px solid #CCC; + --menu-background: #FFF; + --menu-color: #333; + --menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --textbox-color: black; + --textbox-background: white; + + --textbox-border: 2px solid #dadada; + --textbox-border-color-focus: #a7e3fc; + --textbox-box-shadow-focus: 0 0 10px #8bddff; + --resizer-horizontal-background: #dde2e3; + --resizer-vertical-background: #dde2e3; + --selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png); + --selectlist-label-background: #fff; + --selectlist-arrow-background-color: #fff; + --selectlist-arrow-border: 2px solid #dadada; + --selectlist-arrow-background-image: url(img/arrow-down.png); + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-background: rgba(255, 255, 255, 0.44); + --searchlist-menu-color: #333; + --lazylist-more-background-image: url(img/arrow-down-hover.png); + --button-arrow-background-color: #f3f3f3; + --button-arrow-background-border: 1px solid #dadada; + --button-arrow-background-color-hover: #f3f3f3; + --separator-background: #dedede; + --separator-box-shadow: inset 0 0 15px #ffffff; + --dropdown-visible-img-filter: drop-shadow(0px 0px 8px #45c8ff); + --dropdown-visible-badge: drop-shadow(1px 1px 5px #a7e3fc); + --range-background: rgba(0,0,0,0); + --range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + --range-track-background: rgba(192, 192, 192, 0.75); + --range-track-border: 0px solid rgba(26, 93, 157, 0.35); + --range-thumb-box-shadow: 2.2px 2.2px 8.6px rgb(167, 227, 252), 0px 0px 2.2px rgba(167, 227, 252, 0.83); + --range-thumb-border: 2px solid rgb(70, 183, 230); + --range-thumb-background: rgb(94, 204, 248); + --range-track-background-focus: rgba(210, 210, 210, 0.75); + --bar-arrow-left-background-image: url(img/arrow-left.png); + --bar-arrow-right-background-image: url(img/arrow-right.png); + --bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png); + --bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png); + --bar-item-background: rgba(235, 240, 242, 0.69); + --bar-item-border: 1px solid #dcdcdc; + --bar-item-color: #666666; + --bar-item-background-hover: rgba(255, 255, 255, 0.87); + --bar-item-checked-border-bottom: 3px solid #46b6e4; + --bar-item-checked-box-shadow: #cecbcb 0 1px 10px 0 inset; + --multiselect-add-background-image: url(img/add.png); + --multiselect-add-background-image-hover: url(img/add-hover.png); + --multiselect-list-li-border-bottom: 2px dotted #dadada; + --multiselect-list-remove-background-image: url(img/remove.png); + --multiselect-list-remove-background-image-hover: url(img/remove-hover.png); + --grid-window-over-border: #e13946 dotted 3px; + --grid-window-drag-border: #46b7e6 dotted 3px; + --datetimepicker-calendar-border-right: 3px solid pink; + --datetimepicker-clock-background: gainsboro; + --datetimepicker-different-month-color: #bebebe; + --datetimepicker-day-background-hover: #a7e3fc; + --datetimepicker-day-selected-background: #46b7e6; + --datetimepicker-day-selected-color: #fff; + --datetimepicker-day-today-border-bottom: 3px solid #f2796b; + --scrollbar-background: #ebebeb; + --scrollbar-track-border: 1px #dadada solid; + --scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset; + --scrollbar-thumb-background: #49bae8; + --scrollbar-thumb-border: 1px solid #dadada; + --scrollbar-thumb-background-hover: #2996c3; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-background-active: #48b9e7; + --scrollbar-thumb-border-active: 1px solid #dadada; +} \ No newline at end of file diff --git a/css/desert.css b/css/desert.css new file mode 100644 index 0000000..ec08f0f --- /dev/null +++ b/css/desert.css @@ -0,0 +1,155 @@ +:root +{ + --default-background-color: #fff6e5; + --default-background-color-light: rgba(255, 232, 197, 0.62); + --default-text-color: black; + --default-link-color: #795548; + --default-graph-color: #34ffc2; + --default-graph-color-light: rgba(255, 235, 59, 0.59); + --default-graph-color-dim: rgba(245, 227, 179, 0.5); + --default-path-color: #f2796b; + --default-point-color: #FFC107; + --button-color: white; + --button-background-image: linear-gradient(to bottom, #FF9800, #FF9800); + --button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + --button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + --button-border: 1px solid #795548; + --button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336); + --button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + --button-color-disabled: #7c7c7c; + --button-border-color-disabled: #b7b7b7; + --button-close-color: #aaa; + --button-close-color-hover: #000; + --window-background: #ffe1b3; + --window-border: 1px solid #6a6a6a; + --dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --window-active-background: #ffb03b; + --background-background: rgba(73, 60, 57, 0.74); + --background-visible-background: rgba(0, 0, 0, 0.6); + --window-title-color: #000; + --window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f); + --window-tools-close-border: 1px solid #911f28; + --window-tools-close-background-hover: #ff7d88; + --dialog-loading-background: rgb(255, 225, 179); + --dialog-loading-content-border: 10px solid #fff; + --dialog-loading-content-border-top: 10px solid #ffe1b4; + --dialog-loading-content-border-right: 10px solid #ffc570; + --dialog-loading-content-border-bottom: 10px solid #ffb03b; + --window-header-background: #dac19b; + --window-footer-border-top: 0; + --window-footer-background: linear-gradient(to bottom, #ffe1b3, #ffffff); + --panel-border: 1px solid #BBBABA; + --panel-title-color: #444; + --table-td-border-bottom: 1px solid #ffae37; + --table-td-border: 0; + --table-header-background: linear-gradient(to bottom, #ffca7c, #ffdead); + --table-header-text-background-up: url(img/sort-up.png) no-repeat right; + --table-header-text-background-down: url(img/sort-down.png) no-repeat right; + --table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left; + --table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left; + --table-header-sort-background: url(img/sort_16.png) no-repeat; + --table-tree-background-image: url(img/plus.png); + --table-tree-background-image-hover: url(img/plus-hover.png); + --table-tree-background-image-expanded: url(img/minus.png); + --table-tree-background-image-expanded-hover: url(img/minus-hover.png); + --table-row-level-1-background: rgba(221, 221, 221, 0.5); + --table-row-level-2-background: rgba(121, 121, 121, 0.3); + --table-row-level-3-background: darkkhaki; + --table-row-background-hover: rgb(255, 234, 201); + --table-row-selected-background: #ffb03b; + --table-row-selected-box-shadow: #ff7676 0 1px 10px 0 inset; + --table-header-wrap-border: 1px solid #f0d299; + --table-resizer-background: #cccccc; + --button-flat-background: linear-gradient(to bottom, rgb(255, 225, 179) 5%, rgb(255, 225, 179) 100%); + --button-flat-border: 1px solid rgb(255, 176, 59); + --button-flat-color: #000000; + --button-flat-border-hover: #ffb03b; + --button-flat-background-hover: rgb(255, 255, 255); + --button-flat-color-hover: black; + --colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid; + --colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373; + --colorpicker-button-hover-border-color: red; + --menu-li-hover-background: rgb(255, 176, 59); + --menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0; + --checkbutton-checked-background: rgb(255, 255, 255); + --checkbutton-checked-box-shdow: #ffa71f 0 1px 15px 0 inset; + --checkbutton-checked-color: black; + --tabs-content-border: 1px solid #ffb03b; + --tabs-button-background: linear-gradient(to bottom, rgb(255, 176, 59) 5%, rgb(255, 225, 179) 100%); + --tabs-button-border: 1px solid #ffb03b; + --tabs-button-color: #000000; + --tabs-button-hover-border: 1px #d9ecff solid; + --tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255); + --tabs-button-checked-background: linear-gradient(to bottom, rgb(255, 225, 179) 10%, #ffe1b3); + --tabs-button-checked-color: #000000; + --dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png); + --dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png); + --listview-li-hover-background: #ffe1b3; + --menu-border: 1px solid #ffe1b3; + --menu-background: #ffecd0; + --menu-color: #333; + --menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --textbox-color: black; + --textbox-background: #fff4e4; + --textbox-border: 2px solid #ffdaa2; + --textbox-border-color-focus: #e36872; + --textbox-box-shadow-focus: 0 0 10px #e34956; + --resizer-horizontal-background: #ffb03b; + --resizer-vertical-background: #ffb03b; + --selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png); + --selectlist-label-background: #fff4e4; + --selectlist-arrow-background-color: #fff; + --selectlist-arrow-border: 2px solid #ffdaa2; + --selectlist-arrow-background-image: url(img/arrow-down.png); + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-background: rgb(255, 225, 179); + --searchlist-menu-color: #333; + --lazylist-more-background-image: url(img/arrow-down-hover.png); + --button-arrow-background-color: #ffffff; + --button-arrow-background-border: 1px solid #0984ff; + --separator-background: #ffd38f; + --separator-box-shadow: inset 0 0 15px #ffd38f; + --dropdown-visible-img-filter: drop-shadow(0px 0px 8px #ffffff); + --dropdown-visible-badge: drop-shadow(1px 1px 5px #ffa1a1); + --range-background: rgba(0,0,0,0); + --range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + --range-track-background: rgba(255, 255, 255, 0.75); + --range-track-border: 0px solid rgba(26, 93, 157, 0.35); + --range-thumb-box-shadow: 2.2px 2.2px 8.6px rgb(202, 150, 71), 0px 0px 2.2px rgba(255, 255, 255, 0.78); + --range-thumb-border: 2px solid rgb(191, 134, 48); + --range-thumb-background: rgb(255, 152, 0); + --range-track-background-focus: rgba(210, 210, 210, 0.75); + --bar-arrow-left-background-image: url(img/arrow-left.png); + --bar-arrow-right-background-image: url(img/arrow-right.png); + --bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png); + --bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png); + --bar-item-background: rgba(235, 240, 242, 0.69); + --bar-item-border: 1px solid #dcdcdc; + --bar-item-color: #666666; + --bar-item-background-hover: rgba(255, 255, 255, 0.87); + --bar-item-checked-border-bottom: 3px solid #e03d4a; + --bar-item-checked-box-shadow: #6a6a6a 0 1px 10px 0 inset; + --multiselect-add-background-image: url(img/add.png); + --multiselect-add-background-image-hover: url(img/add-hover.png); + --multiselect-list-li-border-bottom: 2px dotted #dadada; + --multiselect-list-remove-background-image: url(img/remove.png); + --multiselect-list-remove-background-image-hover: url(img/remove-hover.png); + --grid-window-over-border: #e13946 dotted 3px; + --grid-window-drag-border: #75c6ff dotted 3px; + --datetimepicker-calendar-border-right: 3px solid pink; + --datetimepicker-clock-background: #ffdeac; + --datetimepicker-different-month-color: #bebebe; + --datetimepicker-day-background-hover: #ffe1b3; + --datetimepicker-day-selected-background: #ffb03b; + --datetimepicker-day-selected-color: #fff; + --datetimepicker-day-today-border-bottom: 3px solid #f65314; + --scrollbar-background: #ebebeb; + --scrollbar-track-border: 1px #dadada solid; + --scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset; + --scrollbar-thumb-background: #ababab; + --scrollbar-thumb-border: 1px solid #dadada; + --scrollbar-thumb-background-hover: #43be99; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-background-active: #5cc7a7; + --scrollbar-thumb-border-active: 1px solid #dadada; +} \ No newline at end of file diff --git a/css/farm.css b/css/farm.css new file mode 100644 index 0000000..2e52162 --- /dev/null +++ b/css/farm.css @@ -0,0 +1,157 @@ +:root { + --default-background-color: #ffffff; + --default-background-color-light: rgba(209, 209, 209, 0.5); + --default-text-color: black; + --default-link-color: #6dcfb8; + --default-graph-color: #5ac9af; + --default-graph-color-light: rgba(90, 201, 175, 0.5); + --default-graph-color-dim: rgba(245, 227, 179, 0.5); + --default-path-color: #f2796b; + --default-point-color: #5ac9af; + + --button-color: white; + --button-background-image: linear-gradient(to bottom, rgb(109, 207, 184), #00d6a4); + --button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + --button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + --button-border: 1px solid #215a96; + --button-background-image-hover: linear-gradient(to bottom, #f2796b, #f48a7e); + --button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + --button-color-disabled: #7c7c7c; + --button-border-color-disabled: #b7b7b7; + --button-close-color: #aaa; + --button-close-color-hover: #000; + --window-background: #fff; + --window-border: 1px solid #BBBABA; + --dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --window-active-background: rgb(176, 233, 220); + --background-background: rgba(0, 0, 0, 0); + --background-visible-background: rgba(0, 0, 0, 0.6); + --window-title-color: #444; + --window-tools-close-background: linear-gradient(to bottom, #e8616c, #f2796b); + --window-tools-close-border: 1px solid #7b8f9d; + --window-tools-close-background-hover: #f0a1a8; + --dialog-loading-background: rgb(185, 223, 255); + --dialog-loading-content-border: 10px solid #fff; + --dialog-loading-content-border-top: 10px solid #d2fff5; + --dialog-loading-content-border-right: 10px solid #60fad6; + --dialog-loading-content-border-bottom: 10px solid #13d5a7; + --window-header-background: #e6e6e6; + --window-footer-border-top: #eee solid 1px; + --window-footer-background: linear-gradient(to bottom, white, #e1e2eb); + --panel-border: 1px solid #BBBABA; + --panel-title-color: #444; + + --table-td-border-bottom: 1px solid #e0e0e0; + --table-td-border: 0; + + --table-header-background: linear-gradient(to bottom, white, #e1e2eb); + --table-header-text-background-up: url(img/sort-up.png) no-repeat right; + --table-header-text-background-down: url(img/sort-down.png) no-repeat right; + --table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left; + --table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left; + --table-header-sort-background: url(img/sort_16.png) no-repeat; + --table-tree-background-image: url(img/plus.png); + --table-tree-background-image-hover: url(img/plus-hover.png); + --table-tree-background-image-expanded: url(img/minus.png); + --table-tree-background-image-expanded-hover: url(img/minus-hover.png); + --table-row-level-1-background: rgba(221, 221, 221, 0.5); + --table-row-level-2-background: rgba(121, 121, 121, 0.3); + --table-row-level-3-background: darkkhaki; + --table-row-background-hover: #d0fef3; + --table-row-selected-background: rgb(180, 238, 224); + --table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset; + --table-header-wrap-border: 1px solid #c9c9c9; + --table-resizer-background: #dde2e3; + --button-flat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, rgb(246, 246, 246) 100%); + --button-flat-border: 1px solid rgba(220, 220, 220, 0.51); + --button-flat-color: #666666; + --button-flat-border-hover: #ffcbcb; + --button-flat-background-hover: rgb(170, 226, 213); + --colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid; + --colorpicker-button-checked-box-shadow: 0 .0 1em 1px #747373; + --colorpicker-button-hover-border-color: red; + --menu-li-hover-background: rgb(176, 233, 220); + --menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0; + --checkbutton-checked-background: rgb(182, 223, 213); + --checkbutton-checked-box-shdow: #ffffff 0 1px 10px 0 inset; + --tabs-content-border: 1px solid #dcdcdc; + --tabs-button-background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + --tabs-button-border: 1px solid #dcdcdc; + --tabs-button-color: #666666; + --tabs-button-hover-border: 1px red solid; + --tabs-button-checked-box-shadow: 0 2px rgb(109, 207, 184); + --tabs-button-checked-background: linear-gradient(to bottom, rgb(174, 233, 219) 10%, #c6f2e8); + --tabs-button-checked-color: #000000; + --dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png); + --dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png); + --listview-li-hover-background: #eee; + --menu-border: 1px solid #CCC; + --menu-background: #FFF; + --menu-color: #333; + --menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --textbox-color: black; + --textbox-background: white; + + --textbox-border: 2px solid #dadada; + --textbox-border-color-focus: #b4ebde; + --textbox-box-shadow-focus: 0 0 10px #b0e9dc; + --resizer-horizontal-background: #dde2e3; + --resizer-vertical-background: #dde2e3; + --selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png); + --selectlist-label-background: #fff; + --selectlist-arrow-background-color: #fff; + --selectlist-arrow-border: 2px solid #dadada; + --selectlist-arrow-background-image: url(img/arrow-down.png); + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-background: rgba(255, 255, 255, 0.44); + --searchlist-menu-color: #333; + --lazylist-more-background-image: url(img/arrow-down-hover.png); + --button-arrow-background-color: #f3f3f3; + --button-arrow-background-border: 1px solid #dadada; + --button-arrow-background-color-hover: #f3f3f3; + --separator-background: rgba(82, 82, 82, 0.38); + --separator-box-shadow: inset 0 0 15px #ffffff; + --dropdown-visible-img-filter: drop-shadow(0px 0px 8px #26ffcb); + --dropdown-visible-badge: drop-shadow(1px 1px 5px #42e8c1); + --range-background: rgba(0,0,0,0); + --range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + --range-track-background: rgba(192, 192, 192, 0.75); + --range-track-border: 0px solid rgba(26, 93, 157, 0.35); + --range-thumb-box-shadow: 2.2px 2.2px 8.6px rgb(159, 247, 227), 0px 0px 2.2px rgba(177, 255, 237, 0.78); + --range-thumb-border: 2px solid rgba(82, 209, 179, 0.73); + --range-thumb-background: rgb(88, 208, 180); + --range-track-background-focus: rgba(210, 210, 210, 0.75); + --bar-arrow-left-background-image: url(img/arrow-left.png); + --bar-arrow-right-background-image: url(img/arrow-right.png); + --bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png); + --bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png); + --bar-item-background: rgba(235, 240, 242, 0.69); + --bar-item-border: 1px solid #dcdcdc; + --bar-item-color: #666666; + --bar-item-background-hover: rgba(255, 255, 255, 0.87); + --bar-item-checked-border-bottom: 3px solid #5bd0b5; + --bar-item-checked-box-shadow: #cecbcb 0 1px 10px 0 inset; + --multiselect-add-background-image: url(img/add.png); + --multiselect-add-background-image-hover: url(img/add-hover.png); + --multiselect-list-li-border-bottom: 2px dotted #dadada; + --multiselect-list-remove-background-image: url(img/remove.png); + --multiselect-list-remove-background-image-hover: url(img/remove-hover.png); + --grid-window-over-border: #e13946 dotted 3px; + --grid-window-drag-border: #1cd4a9 dotted 3px; + --datetimepicker-calendar-border-right: 3px solid pink; + --datetimepicker-clock-background: gainsboro; + --datetimepicker-different-month-color: #bebebe; + --datetimepicker-day-background-hover: #b0e9dc; + --datetimepicker-day-selected-background: #0cd5a6; + --datetimepicker-day-selected-color: #fff; + --datetimepicker-day-today-border-bottom: 3px solid #f65314; + --scrollbar-background: #ebebeb; + --scrollbar-track-border: 1px #dadada solid; + --scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset; + --scrollbar-thumb-background: #60bfa8; + --scrollbar-thumb-border: 1px solid #dadada; + --scrollbar-thumb-background-hover: #019472; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-background-active: #b4eee0; + --scrollbar-thumb-border-active: 1px solid #dadada; +} \ No newline at end of file diff --git a/css/ground.css b/css/ground.css new file mode 100644 index 0000000..9f54336 --- /dev/null +++ b/css/ground.css @@ -0,0 +1,154 @@ +:root +{ + --default-background-color: #a99a97; + --default-background-color-light: rgba(104, 71, 70, 0.63); + --default-text-color: black; + --default-link-color: #730000; + --default-graph-color: #37abff; + --default-graph-color-light: rgba(98, 66, 64, 0.55); + --default-graph-color-dim: rgba(245, 227, 179, 0.5); + --default-path-color: #f2796b; + --default-point-color: #5ac9af; + --button-color: white; + --button-background-image: linear-gradient(to bottom, rgb(84, 184, 255), #33aaff); + --button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + --button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + --button-border: 1px solid #215a96; + --button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336); + --button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + --button-color-disabled: #7c7c7c; + --button-border-color-disabled: #b7b7b7; + --button-close-color: #aaa; + --button-close-color-hover: #000; + --window-background: #cdbeb9; + --window-border: 1px solid #BBBABA; + --dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --window-active-background: rgb(75, 57, 53); + --background-background: rgba(73, 60, 57, 0.74); + --background-visible-background: rgba(0, 0, 0, 0.6); + --window-title-color: #fff; + --window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f); + --window-tools-close-border: 1px solid #911f28; + --window-tools-close-background-hover: #ff7d88; + --dialog-loading-background: rgb(185, 223, 255); + --dialog-loading-content-border: 10px solid #fff; + --dialog-loading-content-border-top: 10px solid #ffe4da; + --dialog-loading-content-border-right: 10px solid #967f7a; + --dialog-loading-content-border-bottom: 10px solid #4b3935; + --window-header-background: #45403a; + --window-footer-border-top: 0; + --window-footer-background: linear-gradient(to bottom, #cdbeb9, #7d635d); + --panel-border: 1px solid #BBBABA; + --panel-title-color: #444; + --table-td-border-bottom: 1px solid #755e59; + --table-td-border: 1px solid #9b8985; + --table-header-background: linear-gradient(to bottom, white, #cdc2bf); + --table-header-text-background-up: url(img/sort-up.png) no-repeat right; + --table-header-text-background-down: url(img/sort-down.png) no-repeat right; + --table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left; + --table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left; + --table-header-sort-background: url(img/sort_16.png) no-repeat; + --table-tree-background-image: url(img/plus.png); + --table-tree-background-image-hover: url(img/plus-hover.png); + --table-tree-background-image-expanded: url(img/minus.png); + --table-tree-background-image-expanded-hover: url(img/minus-hover.png); + --table-row-level-1-background: rgba(221, 221, 221, 0.5); + --table-row-level-2-background: rgba(121, 121, 121, 0.3); + --table-row-level-3-background: darkkhaki; + --table-row-background-hover: rgb(205, 190, 185); + --table-row-selected-background: rgb(55, 171, 255); + --table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset; + --table-header-wrap-border: 1px solid #a56c5f; + --table-resizer-background: #dde2e3; + --button-flat-background: linear-gradient(to bottom, rgb(114, 91, 86) 5%, rgb(164, 140, 134) 100%); + --button-flat-border: 1px solid rgb(104, 82, 82); + --button-flat-color: #f2f2f2; + --button-flat-border-hover: #9c8c8c; + --button-flat-background-hover: rgb(241, 120, 107); + --colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid; + --colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373; + --colorpicker-button-hover-border-color: red; + --menu-li-hover-background: rgb(55, 171, 255); + --menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0; + --checkbutton-checked-background: rgb(56, 41, 38); + --checkbutton-checked-box-shdow: #815757 0 1px 10px 0 inset; + --checkbutton-checked-color: #fff; + --tabs-content-border: 1px solid #baa8a3; + --tabs-button-background: linear-gradient(to bottom, #4b3935 5%, #9a8780 100%); + --tabs-button-border: 1px solid #4b3935; + --tabs-button-color: #ffffff; + --tabs-button-hover-border: 1px #91726b solid; + --tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255); + --tabs-button-checked-background: linear-gradient(to bottom, rgb(75, 57, 53) 10%, #594642); + --tabs-button-checked-color: #ffffff; + --dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png); + --dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png); + --listview-li-hover-background: #c1bdbd; + --menu-border: 1px solid #CCC; + --menu-background: #FFF; + --menu-color: #333; + --menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --textbox-color: black; + --textbox-background: white; + --textbox-border: 2px solid #9f8781; + --textbox-border-color-focus: #37abff; + --textbox-box-shadow-focus: 0 0 10px #6faee0; + --resizer-horizontal-background: #5a413c; + --resizer-vertical-background: #5a413c; + --selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png); + --selectlist-label-background: #fff; + --selectlist-arrow-background-color: #fff; + --selectlist-arrow-border: 2px solid #9f8781; + --selectlist-arrow-background-image: url(img/arrow-down.png); + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-background: rgba(227, 224, 224, 0.44); + --searchlist-menu-color: #333; + --lazylist-more-background-image: url(img/arrow-down-hover.png); + --button-arrow-background-color: #f3f3f3; + --button-arrow-background-border: 1px solid #dadada; + --separator-background: rgba(82, 82, 82, 0.38); + --separator-box-shadow: inset 0 0 15px #ffffff; + --dropdown-visible-img-filter: drop-shadow(0px 0px 8px #3b8de2); + --dropdown-visible-badge: drop-shadow(1px 1px 5px #3b8de2); + --range-background: rgba(0,0,0,0); + --range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + --range-track-background: rgba(192, 192, 192, 0.75); + --range-track-border: 0px solid rgba(26, 93, 157, 0.35); + --range-thumb-box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78); + --range-thumb-border: 2px solid rgba(115, 163, 255, 0.51); + --range-thumb-background: rgba(101, 196, 255, 0.94); + --range-track-background-focus: rgba(210, 210, 210, 0.75); + --bar-arrow-left-background-image: url(img/arrow-left.png); + --bar-arrow-right-background-image: url(img/arrow-right.png); + --bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png); + --bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png); + --bar-item-background: rgba(235, 240, 242, 0.69); + --bar-item-border: 1px solid #dcdcdc; + --bar-item-color: #666666; + --bar-item-background-hover: rgba(255, 255, 255, 0.87); + --bar-item-checked-border-bottom: 3px solid #47abff; + --bar-item-checked-box-shadow: #cecbcb 0 1px 10px 0 inset; + --multiselect-add-background-image: url(img/add.png); + --multiselect-add-background-image-hover: url(img/add-hover.png); + --multiselect-list-li-border-bottom: 2px dotted #dadada; + --multiselect-list-remove-background-image: url(img/remove.png); + --multiselect-list-remove-background-image-hover: url(img/remove-hover.png); + --grid-window-over-border: #e13946 dotted 3px; + --grid-window-drag-border: #75c6ff dotted 3px; + --datetimepicker-calendar-border-right: 3px solid pink; + --datetimepicker-clock-background: gainsboro; + --datetimepicker-different-month-color: #bebebe; + --datetimepicker-day-background-hover: #b9dfff; + --datetimepicker-day-selected-background: #4ea3df; + --datetimepicker-day-selected-color: #fff; + --datetimepicker-day-today-border-bottom: 3px solid #f65314; + --scrollbar-background: #ebebeb; + --scrollbar-track-border: 1px #dadada solid; + --scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset; + --scrollbar-thumb-background: #4ea3df; + --scrollbar-thumb-border: 1px solid #dadada; + --scrollbar-thumb-background-hover: #59cfff; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-background-active: #59cfff; + --scrollbar-thumb-border-active: 1px solid #dadada; +} \ No newline at end of file diff --git a/css/iui.css b/css/iui.css new file mode 100644 index 0000000..a5e65e1 --- /dev/null +++ b/css/iui.css @@ -0,0 +1,2840 @@ +:root { + --search-white: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4goJEQEaWX1GfgAAAwBJREFUaN7tmU1IVUEUx//jN0pg3wuLQF2kZbkVxNyFRUUUhkGLoGWrijYVLdq0LmjVoqJMLM1qFy2soKIQtLDa1cKSNCkhIz9/LbrBYxhf7/lmrj55Z/XO3HvPub93Zs7MOVfKSU6CiMnkYWCzpN2SGiXVSqqQVBZd/ibpk6QBSb2SHhpjxpcMOZAPHAJekZ78Bm4BdUsBogHoJzOZA64CqxcDwADngJkU//m5FO4bAhrjhCgAbszzMtPAY+A4sA1YGz1TCFQAO4CLwPsk0AfjisTNeaZHO1Cdhq09wKDD1gywNzTIWYfjUaA5g0RxwTH1JoBtIRe2vSbeAZUebLcCkw7bxSFSrJ2dRnxAJPg45oj2Gd8gbY410Rwg6lcsP9+Bcp8O7M2uPdD0XQmMWb5O+jJeYxmeAqoCJpRTlr+BUIYfBc6M6xxJZUO6dvIcY/Zu+yDoqdWYEUnPreEmHyBbLL03hgPEE0uv9QFih3U4BpAhS9+YEQhgJJUkDE0aY8ZiAPlq6SsyAjHGYF0vAPJjACm09F8+ptaPhN/5ktbHAFJh6SM+QD5aemUMIFWZrksXSL+lt8QAYvt46WODOmJtToOBN8Q6y99PoMiH4VVR5ZYouwKCXLd8dfk0ftsy/gbICwCxHZi1fDX7dFDvqOLOe4YoBfosH30hQn7NUZMc8NgL6LDszwINIUDWAF8cXY+jHiLR4agOL4XMKE2O2hrg8kIquWhN9M3TGroDFIaEOTxPY24UOJFKxxDYGk3V2f807RYMY1KE2S+p3TpQ/pNZSc8kPY1OscOSiqNjR6X+Nrmr03inLkltxpjpUJGpBz4Qj9z1sikmgSmJmnbjGbxkH7AT6FlUmITux2ngbRqfFDqBlqjmEVDkE8Z4gNoU1dg1UWVXJmlS0pikz5JeSHptjJlwPFskqVPSviQuuqM1M6WlLClGpjv4NMvBLAzm3nKC6VnWMHlLDSTKTq2S7ie5rVxSgbJBkkSmFyhVNokDJvsgHDDZC2HBZDdETrJV/gAG6fzXmRYcGwAAAABJRU5ErkJggg==); + --search: url(data:image/png;base64,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IHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgIHhtbG5zOnBsdXM9Imh0dHA6Ly9ucy51c2VwbHVzLm9yZy9sZGYveG1wLzEuMC8iCiAgICB4bWxuczpHSU1QPSJodHRwOi8vd3d3LmdpbXAub3JnL3htcC8iCiAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDplMmQ0ZWUzNS1hOGRhLTQ0N2QtOThjYi04YTk3YjhkNDI2ZDkiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M2Y1MjdjMTUtZWZlMS00YzBjLWFiNjYtNWYxZjA3Y2RkZjA4IgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NGYyYzMxNmQtZDRlYS00OTMyLTg4NDctNjliMDI1NzgxOGE5IgogICBHSU1QOkFQST0iMi4wIgogICBHSU1QOlBsYXRmb3JtPSJXaW5kb3dzIgogICBHSU1QOlRpbWVTdGFtcD0iMTU5NDczNjQ1Nzg5NzcwMCIKICAgR0lNUDpWZXJzaW9uPSIyLjEwLjgiCiAgIGRjOkZvcm1hdD0iaW1hZ2UvcG5nIgogICB4bXA6Q3JlYXRvclRvb2w9IkdJTVAgMi4xMCI+CiAgIDxpcHRjRXh0OkxvY2F0aW9uQ3JlYXRlZD4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OkxvY2F0aW9uQ3JlYXRlZD4KICAgPGlwdGNFeHQ6TG9jYXRpb25TaG93bj4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OkxvY2F0aW9uU2hvd24+CiAgIDxpcHRjRXh0OkFydHdvcmtPck9iamVjdD4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OkFydHdvcmtPck9iamVjdD4KICAgPGlwdGNFeHQ6UmVnaXN0cnlJZD4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OlJlZ2lzdHJ5SWQ+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjFjNWU2Mjk5LWQyZjUtNDhhNy1iMTczLTI4YjJlZTQwN2EzYSIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChXaW5kb3dzKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMC0wNy0xNFQxNzoyMDo1NyIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgIDxwbHVzOkltYWdlU3VwcGxpZXI+CiAgICA8cmRmOlNlcS8+CiAgIDwvcGx1czpJbWFnZVN1cHBsaWVyPgogICA8cGx1czpJbWFnZUNyZWF0b3I+CiAgICA8cmRmOlNlcS8+CiAgIDwvcGx1czpJbWFnZUNyZWF0b3I+CiAgIDxwbHVzOkNvcHlyaWdodE93bmVyPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6Q29weXJpZ2h0T3duZXI+CiAgIDxwbHVzOkxpY2Vuc29yPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6TGljZW5zb3I+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz7JIG+QAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH5AcODhQ5aMsqQAAAA/VJREFUaN7tmVGIVVUUhr87d5wkCSbIQsYQ3IHONKMV9iCIROCCnEorm9QskPCtHqKBHrSUenB8jvBFCg1LonFyJKhF0dhEkwiihthDpwQTzdTqwcG5Ok4Pd40cNueO596zz/UK87+tfe7Ze39n7bX32uvCtKaViwpZXhaRhUA3sAzoANqAWfb4InAaOA4MAQdV9b+GARGRIrAGeAt4vIpXx4B+oE9Vf7mtICKyFNgJLM4w5gTwEfC2ql6qK4iIFIAtwFagmOLLt6To+yywVlV/DAHSlAKiGdgNvJcAcR34DnjDvHS/qs4E7gLmAk8AO4BfE7puA74VkTW5e8Q88QnwcsLy2Ae8q6q/pfTqM0CfbQpxjQPPq+pgniBbgPe95ovAi6o6VONGsQ3Y7I09CixV1RPBQSywh73ldAp4WlV/z7ht95inW7y+H1XVsVr6LE7x5QaBObHmv4Ens0IARFF00jl3Hng21jwbuBpF0XDIYO/xttgJoCcExKRUdZdt5XH1ikhrSJA3PXtfLTGRQpuByzG7FXgtCIiItHsn9jXgnTzSClX9B9juNb8ayiPdnj2kqlGO+d4e24IntUhE5oYAWebZgzlCoKoXgJ+85uUhQB72PVKHLPyQZ3eEAPHdeq4OIH969oOZQCwlmRlPAENmqFPoL8++JxOIqk54z5vtcMxbMzx7NMTS+tc7+R+oA0ibZ18IAfKHZ8+vA4jLGpdJIMc8+6k6gPhj/BwC5HvPXp0ngYh0eR65AhwOAfKVXVdv7ukisjJHll7P/kZVS5lBVPUyMOA194lIUw7eWAxs8Jo/CJn97rDUfVJdoRNHEbnbqinxORytNctuqpD/HLNkLq6tIvJCIIiCQTwWa74BvJ5HFaXX2wYLwF4R2RjAE58BL3mPPlTVkVr7LU5xHR11zh2xCsrk75qBVc65+5xzI1EUXa0hJg4AKxIen3HOfRlF0Y3gVRQbfL0ts2JCNWU7sPtW+ZiIdJqHX7nFKvgCWK+q14KD2ESeAz71Esp4XWoY+MGy2HOUC3RtlhV0Aw9VMad+YF21MIUqlsUjlItyC+pw0vebZ0qZYyQhZs4753bZYbnEvnotOgpstFR9YYXfdAAdFjPjQT3ieedeYJOt+c4Ur4zZlflj4GtVnRCRFuBzYFUIzxSyrgERmWd37Ha72c2yiV+iXHEfAY6o6pWEd9PA7LeYKeUKEuBDpIEZoPwXRClzjOSlKIrGnXP7gUVTxEw70OmcG6gUM7cdpEqYrkowBRpIKZfZAcp16FLDgmSBaWo0EJtcj022klot72tcj6TwzCFgpaqO3hEgFWASIRoexINprQRxx0hEWuxCNq1p1Vv/A2IAVPy1s7SqAAAAAElFTkSuQmCC); + --arrow-left: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAnM0AAJzNAeUm7xEAAAAGYktHRAD/AP8A/6C9p5MAAAAHdElNRQfgCxELGAmyd3/VAAADQUlEQVRIS+WWS0hbQRSGT4yJVSlYH/ERFBoQNKtQlC7cFnRZ0U0RXbhyYRGhmy5KhS66aKGUVsGFbrVFydIHFNzookrblXYTUm3E1ldFMZbGRP9/7uRyb26uQrd+cJiZM3PnPzNzZhK5eVxcXARgj2AfYT9gKW2sf4Cxr0oPd8Wjy7xgguewkdPTU1lZWZH19XVhnZSUlEg4HJa2tjYpLS0Vj8fzEu5nKNNqQA55hTC5H8X3vb29uzMzM3J0dKT8mESVWTBOleXl5dLZ2SmBQGAHzXuw3xhrdGocQplMJoBBP9fW1vxzc3Pi8/l0z9Wcn59Le3u7tLa2/kEzjDl+GT0GBbo0wYBvwD8/P+8qwpWUlZXZ+gsLC2VxcVFWV1fvoPkFY7xGj4FNCJ2vDw4OainCD90IBoMyMDAgg4OD4vdzlw28Xq8sLCzI7u5uLZovDK9B7ooe80zc4Erq6uqkp6dHtYuKiqSystI8K8IAo9EofU9hZjaaQnAOb21t+RGN9tjB2Ul1dbX09fWpyMnU1JQkEglHkhweHmaz84FyAOuKhpi+bufClfT39+uWIbK5uSkFBY5jViwvL7N4qBrAOiqAdNZVOzwTriTL9PS0xONx3XLCFTJocF85gFXo1tnZma4acO9ramqkt7dXRZ5Op9VKYrGY60qyJJNJFkHVALbR1kMljOzk5ETdEcLJU6nUtSL5sH7xl89KLjzU8fFxFQSFuYWNjY2OoHLhswS2VQNYhXbwhOiqHa5qcnLSnLy7u1uamppcxehvbm5m9bNyAKvQe3Zya/LBRBkbGzO3kW9bfX29qxgfWxBVDWAKYVveNDQ0pKqq3F98rmx0dFTdKcKLGwqFHGJ8nvTWfVIOkHuqb7u6usyJ8sHMnJiYUHWubn9/33ZhuSPcWvhGYObtd7zeiC6B357g0tLSldnFqI+Pj21BUbijo0NaWlriEAlptyKfEPduG2K+68RyoUgkEvmH6m0IsTRxCBEt9hUJEJydnVWJ4PY0cauYrdyuioqKHXwbQXCOBzOvUBZ89ArFEB5b38bGBp9/deN5JsXFxcLE4c85kojRv4P/ifrwf4HgMCwGS8Iy2ljnH5RhPexGIXIJGSaWmmxaX7YAAAAASUVORK5CYII=); + --arrow-left-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AwKEiMw9w+MlAAAAo9JREFUSMfllk1IVFEUx//njV/0EAqdARNf1iJ1aDHEDC0GWkUSbQwLstwYFiWEDLQJFA2DiIKIvhZJKy1zkbmKgpbzFjHggDEfi0pfY1PzRgviSYwz77RwHCbnfWlLD1x4957/vT/OeYdzL7DjjJk9zNzDzNPMvMDMa8WxwMwviz633TlkAxlh5lFN0yDLMh5lDv7jH3AnEQwGIYoiiOgWgGEiKjgGMXMNgISqqvv732qOIn96fBc8Hk8awGEAP4iILUG6rnuI6GskEqkZSzRuKc1DbSoCgcBPAF4i+m4JYuZv0Wi0aeTj7m390yIsDaClPI3CJsjd5eVlR5DZ3lZMn2mqWL+ZdCOTyTQBGCtfFzbprl5489sW8qqnBQBQW1tr6L/4bhXMfL28GoWyaEKKotQ4icTlcgEA+ibmTXWapgHAMaOIBmOxmC1kw/om5rGCelNtOBwGgC4jkOdJtt1048w5qfR9eXLOEgIAj9U2ADiyMa8q89XZRVIoFND/IoYV7HFahM1mxWBo+Xx+XSwItpGYWTnoj5moeyoFZgYRYba3FYEqxen5S0ag9IA7abqja3IRzOtdZejsUZysS1oSimd9MAI97OjosNzcNblYSuOl052W2mAwCAAzFSAiuidJ0ppdLrqnUtB1HQDw+vw+tFLWUCeKIgC8NyuG++Odom3iTz1XSkWywJWNd7xTBBGNElHGqqmmZFluvv1577aqa7g9C7/f/4WIDth1bzeAJVmWq7cKu3HoF3w+Xw5APRHlnFx8bgBzqqo2O734np2oR0NDQ5qZfYIgZLZ6ld8BMKgoSnU8Ht9oKyW70piA1+uFJEk5AA+I6Nr/PlBCzPyJmVeZWS+O1eIDJYQdaX8B9C4jTPMKEFEAAAAASUVORK5CYII=); + --arrow-right: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAnM0AAJzNAeUm7xEAAAAGYktHRAD/AP8A/6C9p5MAAAAHdElNRQfgCxELGAmyd3/VAAADT0lEQVRIS+WWPUhbURTHTxITqiJYNWlTrRJcqpMF6aCL0ElwCTqYVQdFW0qGDp1q6dChhSLdHRSHFsUOgh90cFEoSpspBqS2GGLV+AXFWI0mPf+Tm+S+vGeQrv7gcO859737v+fc+25CN5N0Oh1k+8WWYEspQ/8HW1A9VhSbai3hSd5x83Rra8sVDocpHo/T6ekp4lRWVkYej4eampqovr4+yc+N2my25/KiBZZCqVTKwy+FDg4OvFNTU7S3t0dOp1ONGkkmk+R2u6m7uxttjEMP+d14ZjSPSYhX6+LmTygUcs3Pz2eC14AXRx0dHdTW1obsagvF7KrViaytrblmZ2eVm8Fut1NlZaXyzGB8aWmJVlZWkPr3TDSPQYizecn74Jubm6OSkhIVJaqoqKBgMEiDg4NUXV2tomayYjxHLc/1VoWFnBAPeNhGsCf6fnCMampqcsL9/f1UWloqfSsgNj09je4zCSj0jB6fnJzQ8fGxcjNwrWlzc5MmJyfFx0TDw8OS5VXgdPJJdfIic0dfF/IvLy+rrhGIRaNRmpmZER/ZDQ0NyWmzAhVZX19H94kEGF3oEQYxqRWIRyIRQmmzfl9f35WZ4ZNgvOIwulAtSlcMTL6xsUHj4+Oyd/AHBgaovLxcPZEnkUiguSUOowtdC3wvKA1agDIiKwjrFFZGF4rhWikGJm9sbKRAIEAOh0P8iYkJ2tnZMU2sTuZfcRhd6Gtzc7NpZTo+n496e3uVR1LCWAy3jhl1UGSjgC70ub29XXWNYOUNDQ2SSZaxsTHa3t5WnhHcf1g0MyoBRhf6gk2tqqpSbgZkWFdXlxO5vLyUTHZ3d+WbsgK3Ot/o51zO9yqUF+JgnO2N3++ni4sLFc1s6v7+Pp2dnYmPDxeZFO6JTk9PD5oP4igMT/PqHdxEV1dXvYuLi7LhWXDSkPHR0dGVIlhgV1cXtbS0/OZn7qmwYHqDxe5yE2ax2wsLC4bLtRjYl87OTmptbT3nOe5zWXMHAVgJIXaH7Rt/3V5cO4eHhzJWmAn2D+DnA+Xik/aT3Qf83LkMaFjXgFFlfM3tC9wYuAfxc66+eCkjThb/0EmfJx9heyWD/wMLudkCbB/Z8AclqQz9T2wY86jHbwxE/wDpF3yaspbwwgAAAABJRU5ErkJggg==); + --arrow-right-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AwKEiQDB557RQAAAoJJREFUSMfllktIVGEUx/9nZpToEkR4J8aJm7XxQcI1sMW4DIpWVpseuopaZEW0iAgKFYWIgpCgoiI39sTIFhFGq2CEGKlZhI+gmq5YMFcxkCs+mvtv4c1svHPvnVr6wbf4OOd/fpzD4ZwPWJWH5BmSGZIzJG3nzpD8RPJMkBjiA7gK4JRhGKVDQ0O4OVH1l71FHUV1dTU0TVsA0CUiZ4sC2bYdFZH05ORk7MjL6UBZ392tQFXVcQB1ImL6gkiWAphOp9OlrR/WF1Xic1u/IZFILACI58NCLv4jg4ODRUMA4PLncgwMDJQAeJ9vC+Vl02qa5paOkbIVQXoPxPG8uSIQzDTNOMkrriCSUZJtR/utFeIKmUAkEgEAPDus+cKcGKcLZbTTsixXYYZl2Hv/66IgFMLTg5t8YYZhlCxv/eWgfclk0lN8u7cfABCJRNDXtNnTd3h4GABOuoF23DArPcUvZivR+ejNYruKeMKcWDE3UDxIZ6V+amjsyYAkRMSvjGu82tv3bMA0bNteKmOQsxw0HkQQkyl0N9ciHA7Dtm009mS83GfdQG9b1FHfTG411f3pngdGQd/jZSMAkHUD9TU0NHhCuptrl94+maCmpgYAutxArxVFKSj8Dcnlcr4QANA0bV5Erq0AiYgpIpfu7FrrKpybmwMA7H845gu5t2cdAFwvOL1JhgGMpVKpWOeo+k9Lsn3bD+i6/l1EygsOVRHJAdheX18/daHSLBpysWoCuq7Pk9SD7CMBsBHAu2w2Gzv2aqaYxfcFQJWIzAde5U4ZO0ietywLyWQS+SPqRPQjEokEFEWBiLSJSPv/fExUkodIPnY+KAvOzZB84tiiq+/L9gsvthlNbhFAMQAAAABJRU5ErkJggg==); + --arrow-up: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAnM0AAJzNAeUm7xEAAAAGYktHRAD/AP8A/6C9p5MAAAAHdElNRQfgCxELGAmyd3/VAAADKUlEQVRIS+WWy0tbURDGJ2pKfQR8JRgjQreugmA3LgvqNuCmFUQEEaUiglvRnYtCu/AvEIXYoLgR3HThRqEguNOAVKoQpFGoKIaamNjvm/vw3us11W79wXDPmfOYc2bmTCIvk7u7uynID0gOUjKF7Z+QKXNaWQLm1xds8gmfyZOTk+DBwYFks1nJ5XISCASkurpawuGwdHR0SHt7ex7zFqCf1oU++BqCgTA+e2dnZ7G1tTXBV4LBoDHooVAoSCQSkf7+fmlqajrF2nhFRUXWHLZ5YMg0ktnZ2QlubW0JFhkDT6Cvr0/i8ThvF8Lt+LXx22Xvf4yQjY0N2d3dfYVm2tDc49qJMaG7/mUE88yWm6qqKtnc3KSr32DOrKlWvLtNMibljNTW1ko0GjV7D2EsV1dXeZg5SMRU3xuCcorZxcA/RigUkrGxMRkaGpJYLGZqH3JxcSHX19dsvlMFcB79I1P4sexiKo+Pj6t7yMDAgLS0tEipVNK+F8SZn4R2gNNQlO/ED95keHhY3w/jUywW1b28GY1R54Tz9vf32XyrCuA09JqP0Qsf5ujoqC4mS0tLkkqltE14AD83mq6zB1xRtzazwAOUiYkJ210MciaTkaOjI1lZWVEdoRtbW1sfzUbiNPSHp7eor6+XkZEROwPX19fl8PBQD1NZWanGksmkjrE/ODgoDQ0N2ic1NTX8ZLQDnIayDLjF5eWllheecnl5WdLptOvGPMDx8bFt7ObmxnKXrmENBN9VAeyVGGR6f15cXLQzj0nQ3Nysp/e61YJZ19bWJufn55LPG1WHhujyurq6D1inJ7FvBMUXVmEWSIurq6uyRghvxrhZRkhjY6M+bPBNFcCVDGCBVdhJOSMWzjm3t7eSSCSom4fYr99lCAPTLPWswlzwXPi+ent7+bNxiu6MoTXw3oj+RaWP52mMyfBUeLCenh7p6ur6jW4nDl00Rgx8/QJjWupZhfl2WLuI00WEQSeMCd1l3qQT8gtzXY+qbACw0Sxkjmm7vb0trIVWCvOdMIW7u7s18Nh4HuoZ702eDAxFIO8hKQj/jBRMYfsrhGP3D/CFIPIXaROGVaBzO8QAAAAASUVORK5CYII=); + --arrow-up-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAnM0AAJzNAeUm7xEAAAAGYktHRAD/AP8A/6C9p5MAAAAHdElNRQfgDAoUNBtavY3wAAACm0lEQVRIS+WWTWgTURDHX75ETAJK0kitjfViJXgIhXjJURA8WW+2ehF6UFEk4NESi4KIoIeiBwVPDVXx8+Ch4KmQgBhIQDHxoMRADWaLeok0ien6n7eT7Sa7SZf02B8M82Y22f/OvMnbiO2JqqoJ2FfYX9g6G61LsAR/rC8O9pbgJnfgrpTLZU+hUBAPlHHtAnMhWBSRSESEw+EGwnmHw3FVu2LGUggCQ3A5RVFGZpZqWnITHp/wi0AgUMF3o06ns8ppHZMQi6xkMhnP7W/7tKRN5o78EdFolKrzozryOk72RnKDiBDJT7tFNpvdgWVRy2zQIUR7Qu0aRKTNjWJQ4B4Hca8kpyQdrcPFxsmFkofDLfH6zAGB9u2Fyf3SK4JIgqaLw568OL1fvDk7xlFvajU5RMdkAIytu0Qj3A96SrfbLdevpsPS9wL7TO6UDIBRaLj7d2KEW0GVi1arJTDCfSu7Xz1E7qgMgFFoJ3sT1C4SISZT38XM4me5JjZp4wj7zqmzglrUbtfNJ8vS/xJ+cT6Vk2vi5dQor3pjFFpjr0NPSy0iHj5fEh/+bexLRd0jzi18lGuXy9WrshX2HUJVOruMNJtNuScYefF2zbx/VFlbrF6vS9/m4tAXcu9lAPTfEY/33cvL65zRGHOsipIa5Mg+qcmg8Pl809jbRYr1ipC4x6dwB4OIEF6vl9w7GYDuYZinU3irPDq+ix78FkzhlOXp/SOfzw/TATkI18YVEYvFKliOQqilZS3GG0I46aON2cOrnLEPi/zGcsIoQpgqIiAmj3o6he2++KhdoVCIKpmA/YSQKi8wlkJtIJiEXacDMp1Om17lNMLxeFxuPO0JUrPdldgGQiHYFOwZjP6MNNlo/RRG1+itvK0Q4j/rNyX4wPuW3gAAAABJRU5ErkJggg==); + --arrow-up-mini: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAARCAYAAAC8XK78AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAGYktHRAD/AP8A/6C9p5MAAAAHdElNRQfgCxkXHCBEIVBGAAAAqUlEQVRIS9XVQQrCMBSE4Vp7/9voQhBBV25c2POIzg+NlDoYYl8qHfhATDNPG6XN2nMZ/CV7eQ54vVi2cpM0POE91qrnKtPhCWtVsxM3eIxrwsOt/fbNp7g29DjcmeewJyTjX3upWf+OVs7iikvQQVdx7uIKf0FXUQ7iiuagM5uNHMUVRKCbGTYs9OI2RmKG/RAncRtqYNY7ndQ48xxmdulWLPIQ+UzzeAHoCekenvc+XAAAAABJRU5ErkJggg==); + --arrow-down: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AsRCxgJsnd/1QAAA0xJREFUSMfllk1IY1cUgL+TP0seSrp4aW0wYkAwriwIhbhx0U3ARSUhKKhLNzKUWXQxuxlmO1AGiyCCiOCiJZBtInSZTQPF1duVGVKi4YX4Q4gpk+SdLhpf/UmiM9u5cBf3nnvPd8/PPffCZ9dU1VTVVVX9VVXfq2q719+r6m89WfgxPTIE4AVeq+qLZrNJsVjEsiyur68BMAyDeDzOwsIChmEgIi9F5NWTQaoqwFfAn7Ztj+dyOc7Pz/9bLHJ/LQChUIh0Oo1pmu+AGRH58BTQ14BVKpW+LBQK+Hy+J7m43W6TTCaZn5//oKoTHo/HHgjquevvUqk0fnx8jNfr/ah4djodlpaWmJubOxORb27LPPfWvrZte7xQKHw0BMDn85HP56nX6+Oq+qYvqJddL3K53B133cThkcy8M85mswDPBln0fbPZdAMPEAgEiEQiOI4zFBKLxRgdHXXnbNumXC4HVPV5P9APxWLRHfj9fra2ttjY2GBqamogZGJigkwmw+bmJh6Px91rWRbAj/1A31mW5aawYRiMjIwAsLq6yuTk5B3LVJWZmRnW1tYQEfx+P2NjY668VqsBhPuBIjeXEeDi4oLDw0O63a4Li8VidLtdVJXp6WmWl5cBcByHvb09Li8v3f2tVgvgi0FZ93/ei3B6esrR0ZE7t7KyQiwWIxKJkE6n3ZTe3t6mXq8PTZDboIphGA+AlUqF/f19d5zJZFhfX3eV7e7u3pz+TgsGgwD/9AP9MTs7++AkIkK1WuXg4ADHcfB6vYgIqsr+/j6NRqOvR8LhMMBZP1AukUj03eTxeKhWq64bO50OOzs7NwHvW47i8TjAL+5lviX/3TAMQqEQV1dXfRVUKhUODg5oNBo0m82Bd8s0TaLRaFtEfn5gkYjYIvIynU7TbrcHKjk7OxsKcRyHVCoF8HZgrRORV6Zpvksmk3Q6nYHZOAyyuLiIaZoVEfnpsWciADROTk4C+Xz+yQX1BpJIJNpARERqj76wjuOEReSkXq+PZ7NZbNvG7/cPDLxpmqRSKUzTrADf3ocMfcp71r0BnpXL5YBlWdRqNVqtFqpKMBgkHA4Tj8eJRqNt4O19d33KB+V57zNyrapOr1+r6l+3K/Tn1f4FgEGhNe9ExXsAAAAASUVORK5CYII=); + --arrow-down-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AwKFDQbWr2N8AAAAntJREFUSMfllktoE2EQx/+TmKSQSxW+6BqMwYuJKKQYERLwJOTgofWF1uYk6KEi0oOIYGlDPfZgQdRDwEt9FUFzErznYkByKAsRpHFrLG4TFEKC5LHjwU3IY7N52FsHFpbvG+a3/9mZbz5g1xkzC2aeZuY3zJxl5qr+ZJl5Td9z9YtDJgArgCVmvl8qlZBMJvFk+2ibz6zIIBwOw+l0gogWiSg2MIiZCcB+AJ9VVZVufCwPpDwecUIIsQHAR0SVQUAHAMipVGrvw4wYKs3zvjyCwWCFmQ9ZLBa1J0hP12YqlZKGhTQsdvw3AoHAFhEdbF23dPgtqao6MgQAFtbHUSgUJGZeNlSkV5c69eLbjlRrIuqtEJHDSNHZUqk0UlAv5bvWFEWxM/OcEWgqmUy2Oa9dlpCIerEPRVPQo2sn8faKu21NlmUAuGMEOt3ZJw7HP+XPoycMYefGMkhEvSAi2Gy2tr2neR8AuIxA7s5Ak6tZ1Ov1JkyiX829U3sU3LwUAQBomobJ1ayR2LFeVddlF15tNt+fzUw0lT24egYAUKvVcP6l0vc/toJyvZxavzY+fQzvZw43KhUXX383i//HCPTplusLzGCapsFqtYKIwMwwa4VZkQGALSPQu1AoZCq/kaJarYZ+/eb3+wHgsVHDupj55w42bJWI7F2KiEglosV4xPnfED3GSs+zjohiQoiNeV9+ZMi9Iz8ghMgR0d1+Y8IOoJhOp+0L6+NDQ0KhUBWAm4i2+05YTdNcRJQuFArS9Q/FYQZfDsBEJ8R0lOvqlgHcVhTFLsty41hpK2G/3w+Px1MFsNKZrlEuKHP6ZaTMzJr+lJn5a+sJvbvsLy0pJLT8OvazAAAAAElFTkSuQmCC); + --arrow-down-mini: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAARCAYAAAC8XK78AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AsZFxwgRCFQRgAAAI1JREFUSMfVlTsOgCAQBUfx/reRgsSYaEVDoecxWkiMhT+QxTjJtgywy6NgRfENE0AFGGDOXMa7N9qM8vboOgpgzCAfvYuzTTSC8uZKvscI9TyIIaF8iHkiJdAlkHd+rWj0C7lOFRguQu5SJpYCbIDcSqVr/UBeS+e3vTm5OOpkJlzuT01LTHsova//sgBbSukeQz9mngAAAABJRU5ErkJggg==); + --add: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AsWFBw4DWhmHwAAAmJJREFUSMfllj1r21AUhp/jL4q1uIPUumldulWZUggUnCVDl0CGgr30R4SSoeBsKVkyBEqgf6LF4FUOdPRSh+JJW9vgEgISzlIsmyjodKgJjiPFjpMtL1y4cA567vm45wrunVTVVNV3qvpFVY9UNRytI1X9OrJZ074j1wDSwI6qbvX7fVqtFq7rEgQBAIZhYNs2KysrGIaBiGyLyMeZQaoqwCPgh+d5xUajwenp6X9nkUlfAAqFAtVqFdM0fwMvReRsFtBjwG232w+bzSaZTGamFIdhyNraGsvLy2eq+iyVSnmJoFG6/rTb7eLBwQHpdPpG9Tw/P2d9fZ2lpaUTEXkybktN+O54nldsNpuJkFqtRq1Wi7VlMhkcx6HX6xVVdS8WNOqurUajMXO6klSv1wE2kiJ60+/3Lwp/G3meR7fbzanqZhzobavVupO7l81mcV0X4H0c6LXruldaeF75vg9wcZHHi7EQBMGlJkgqepJtd3f3Yj8YDAAeJHXdXY6uyx05tj82DOP5cDiMPeFkJHG2ceXzeYBhXETfFxcXr5xkXlmWBXASB2qUy+U7gYRhiG3bAJ/jQN8Mw6BQKNwaZJompVIpFJFPV0Ai4onIdrVaJQzDuSFRFFGpVAD2p03vX4eHhy8cx7nxKIqiiNXVVcrl8rGIPJ0GygF/O51OznGceSAhsCAi/tQXNooiS0Q6vV6vWK/X8TyPbDabWHjTNKlUKpimeQy8moRc+5SPotsDNrrdbs51XXzfZzAYoKrk83ksy8K2bUqlUgjsi8iH297yzdHPSKCq0WgFqvpzfELfL/0DbLwxYiWAqw4AAAAASUVORK5CYII=); + --add-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AwDESAUn2/KVQAAAnpJREFUSMflls9LFGEYxz8zs7Ouu4Uj1thmOQZBUUJ0MozQg7cuhnTxXwgpD4F6MsSLBCEECt27LV7sliDsqSWig4ZBPyZkEdN12dVddV7n3Q5usq4z7Lrrqb7w8s7L8zKf9/nxPjPwr0mptEG48iLQB/QDXUBb0ZQEEsAcsKBr6u+aQMKVGjABjKbyLrHlDHE7R3ZfAmCEVO5bEQZuN9ES1gDGdU19UTVIuFIBWoFPdtqJTsU3WdsWAKhlu2XhcDYjAcZ6TSxD/wnc1DXVqQZ0Cfgyv5Jtnk1s0RBQqsrBrijw5F4LD2+cd4Cr5aFUPMK1Or+Sjb75mCagni7h+wcFnnVfoO/6uTVdUy+X2spfNWGnnehsYssXEhu0iA1anraGgMJMIkUyK6LClS89QcXqGp2Kb1YdLj9NLm4ADPl51JfKu0eJr0d22mFpfS8oXDnsBeqPLWfO5HI26gpxOwfw1AvUFbdzJ0q4Vq1mBID5dx0osbVl9+WxIvBLup9t4O2vo+cdRwKE/KruzHQgj69LPUoaIdUqnuTECcs98bKVygipAHteHiUedESO2kq96mgOAqx5geYe3Wo6E8iuKNDdHgZ47QVaaAlrmJFA3SDL0OlsDQldU1+dABWb4PhYr8muqD1+sgAjPSbAdKXu/ePd1+1rMx9Sp25FsgCDdwwedzYldU29UgkUBLbff9sJziRStUAE0KZr6kbFL6xwpQl8TmZFdHJxAzvt0Kgrvom3DJ2RHhPL0JPA3XJIxX+GYqsfWlrfC8btHKsZwY4jOZCH96SjOUh3e5jO1pAApnVNfV5XFQlXDgtX2sKVeeFKWRx54crvpR36/9IfrEMFOunchkwAAAAASUVORK5CYII=); + --remove: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AsWFDMRXcbGHgAAAllJREFUSMfllr1LW1EYh583X5TcJR3ObVNpuvY6WRAKcXHoEnAoJEv/CCkOBd0UFwehCP0nWgJZE6FjlgYk092KkiLCvcSl5CZ4w3079CIxHxqjmz84cC/n5Tzn/TrnwJOTqhpV/aSq31X1TFXDeJyp6o94zr5rHbkFkAT2VXWn1+vRbDZxXZcgCACwLAvHcVhbW8OyLERkV0T25gapqgAvgBPP8/K1Wo3Ly8v/xiLjtgDkcjkqlQrGmFPgrYhczQN6CbitVut5o9EglUrNFeIwDCmVSqyurl6p6utEIuHNBMXh+tNqtfLHx8ckk8l75XM4HLKxscHKysqFiLwanUuM2e57npdvNBr3hgCkUinq9TrdbjevqodTQXF17dRqtbnDNUvVahVgc5ZHH3q93nXiHyLP8+h0OhlV3ZoG+thsNh+l99LpNK7rAnyeBnrvuu5ECS8q3/cBrht5NBlLQRBMFMH29vZcCx8cHNz47/f7AM9mVd1jHl03K3Lk+9yyrDeDweDWnc6rbDYLMJjm0a/l5eWJnSwq27YBLqaBasVi8VEgYRjiOA7At2mgn5ZlkcvlHgwyxlAoFEIR+ToBEhFPRHYrlQphGC4MiaKIcrkMcDTzrBORPWPMaalUYjgcLgRZX1/HGHMuIl/uuiYywN92u52p1+v3hhSLxRBYEhH/zhs2iiJbRNrdbjdfrVbxPI90Oj0z8cYYyuUyxphz4N045NarPPbuENjsdDoZ13XxfZ9+v4+qks1msW0bx3EoFAohcDQerkW6fCt+jASqGsUjUNXfoyf009I/KqIm8hdbRuUAAAAASUVORK5CYII=); + --remove-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAJzNAACczQHlJu8RAAAAB3RJTUUH4AwDESQlqt0PawAAAnlJREFUSMfllt9LU2EYxz87Z++cm+ER66xpOYOgKCG6MozQC++CMKQb/4QiyovAvDKkmwhCiBS6706EsLuEYFeNiC40DPpxQpaozbG5TXdez7suXDLnkc3Nq/rC4fDwvLyf9/nxPufAvyZPpQXSUSeAfmAA6Abai644EANmgDmha6s1gaSjdGAceJjIOUwvpIhaWdJ5BYDh17gaCTJ4sZnWgA4wJnTtUdUg6SgPEAI+Wkk7/CT6m+UNCYBWtloVdt5m0Mton0nEED+A80LX7GpAJ4HPs4vplqnYOg1eT1U12JQF7lxp5fq5YzZwujyVHpd0Lc0upsMvPyTxaocreH67wP2e4/SfbVoWutZW6ivfatxK2uGp2PqhIQANXg+TsQTxtAxLRz11jajYXau3X/9iJSPrauVQk+DFjTZb6FqDW0T9iZyzW/h6ZCVt5le2fNJRw26ggemF1JFczkbhIWplAe65gbqjVnZfC9eqpZQEMP/a3hJfezqv9jXB9FCkqo0HX/3cY2dsBeA/qOuOTNtqr10aUdzwa5HiSQ48abUy/BrAlltEsWudwd2xUq86W3wAy26gmZsXmo8EsikL9HQEAJ67geZaAzpm0Fs3KGIIukJ+KXTt2T5QcQiOjfaZbMra86cKMNJrAkxUmt7f33zZODP5PlH15C6FDF0yuNXVHBe6dqoSyAdsvP2a8U3GErVAJNAudG2t4hdWOsoEPsXTMvz43RpW0qZReA4sfMQQjPSaRAwRBy6XQyr+MxRH/d35lS1f1MqylJJkbMW22rknnS0+ejoCdIX8EpgQuvagri6SjhqWjrKko3LSUar45KSjvpVO6P9LfwDLUQFhNo3NowAAAABJRU5ErkJggg==); + --eye-dark: url('data:image/png;base64,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'); + --eye-light: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAALG3pUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHja7VlZliQpDvzXKfoIzio4Dut7fYM5fpuEb7FWVk1/dkZmeLgHCCEzGYKk8b+/J/2FHx+yJR84xRzjhh+ffbYFH9K2ftbVbF7f9cfvX+H+4TmdX1g8cri6dRvH3r7gebg68N7B1MfnxG23k3ZD+xeHQScjW3zY26XdkLPrudnvKe/9ir9NZ/9zrCbOxs/3nhGMHvDQWbLDGbfhXTpaJ3/GFb3Ke7DraXHeJbw7l97Hjs6PT8E7Pz3Fbiv7c/cYCtri3iA+xWh/bsL72GmE7h6Za+SHL3q5XHuO3Zw9zTnW7IqPiFSkfVLHVPQTGlaE0mm3iBfjL+Az6yvjlTDFhqB3oFnxamSysYj2NN50U8w0Q6/NNLjo7bCMq7UNGMiz5Nhm2xB+g/DjZaZll10nYGFdA2oOj+3pi9Fxs47XTMLI3aClNTBm0OPlRe8e/snrNDSnUNeYLZ2xgl9WCAg3BDl5RysAYuYe06Dx1RdtT+DswDogGDTMCRMsW10majAXt5zi7NAubJ72dDbcdwMIEcYOcMY4ILBF44KJZmNr2RjEMQEfcCNZ520FAiYE2w1NYONcBDjJytjow0bb2mDXY0gLgAguOgY02RWA5X0Af9gncKgEFzyFEGLgkEIOJbroY4gxchSNKuzYc+DIzIkzl+SSTyHFxCmlnEq22UHCQo6ZKaeccykYtMB0Qe+CFqVUW131NdRYuaaaa2mgT/MttNi4pZZb6ba7jvTvsTP11HMvwwxQafgRRhw80sijTHBtuulnmHHyTDPPcqK2o/qImnlC7jtqZkdNEPPaji/U8Jj5MGFEToJgBsSsN0CcBQEQ2gpmWzLeW0FOMNuyRVIEC9RMEHC6EcSAoB/GhmlO7C7kvuJGwf8WbvYTciTQ/RvIkUC3I/eK2xvUetEVxSlAkoUS081NCBsaFZvwCz3+8yv9vwb+M2Rztj4DSZfa4D5KhajzHDlPqOQA8JuJI5WSacY+Z4ksX6QZzNP9toUKghU++0vvxzu1RTCmfTG89D5tXfevtpYvj/d0OfcnvgUsbG7mXisN0N31kTYbXiNUc5rbmKm5Kb27myOB/ZyN3CJ1RocNPG2Jpi+9zRpl3O4cZAeJttneoelu9CrPfZN3LMLl9Qk0ipH3ntSGWkAKcck+jCGj5TmqzLqId0UquvfX4WeTGCDXkKsT8VBTMZSZh60j8RT3W02yinv1N8c6+JNRqqXPzc9k4QZEEbFAd9/caIh+QP4LJgGpn2vlODBkik7GCOpOOfrTHxiYmPc5NrDQriR9O88o4jO1J0vHoRNNg12twGPUmDbXckVXr8zp6CjXDF3G5DG1HuOPEsplK2G7YrDN+xQIeF0z6MuPYw5Dg/zJh+UCSJCdrZ7YQz+Bx0w6faANbZ4mcoIVLChpVrMSZvZcByi3opdxDzLGWVPj3ic0G15D8y2WqQSwrYsAHXTNYHRJPNTL6ZsaMBq7USVhGvrkuQg6MmWWnFHXoxD3Z91ee9HnbsX2GRfJV74HJDdi7t5SlYSrE9Ws8lxJjnALzXeS3+EblZtxY4Pl5BtmrT5JTQz4uWdeHuXoRlz5jNXLJDHdozB3pgDQZ0AP8c1nlZbYhJrK79oMrQFk++SqDqEDBJiqYl+sBzUu1l1uoGq3sP6cbXQ9QEZmpVyvd8rhZlFOGVf5zjh/pR0hPmCOvSxI8ugU1MbKnsOGZg9sRH/kDsK4WEmgjwQQ7HkIoCZttfcI9iuC+RbBIsxOReAvDZo9rZgKHQELFuUAyomp7tc9pC8iVB+Sj8w5kTP/ntPvlnz1zC4lTYVfO1ik85FsXHTQubSF1poJ37kAITn6KswrjaUr7Ui3g0kLa75hrQpyaAkovfTdomySbEImIOaBqXUeRp1DZYdxtiUCwT5lAxJB8uEQ7jMZDs2nB9GXPJg7jqf7t0Q4eXr3fjGVdvdfRfhBg3f9PlT4SYO/VCOSPgjqYtcV1MWuh6j23S9CWPM9hTBDPmxIBh6YwsYd035huthJUyVywfJNJn6lErSsCFJfxUJAPJL6DOWxjkgoqZxEPjLyYT3DUjqqW3Z8O3w+Y3dlJp3Bq4/Bq7fYpRdH9pS6aQPdXHlwRFwQV1SlhBunxig3ToXR9RkKQ7cF+hIZaNSXJfdtrOjJw1/E6iDHTZ73hKd58etTziJGSdelgQlhHwoVGFnEsawM1vwlPZ3ZU3jD5p53KmbGSl1jXkrZrcwEgOE2MQuFho2oVyscYSGKVGzYelVxA1Gsnl0GptCFUH2Q47Rgvl3ZBhnZSIo0a7CkYvyUZUqAA1s2EY8Ip5XBso6g8GceGfoJ4SkdkZJgJLMEpjFJ0QsQtZC7MmTPsnOdOzPkwyqKyj+q7AuU0xnNaCEKGmXE1mELHnQWtyu3DMdC7pzdcgwRTRD/KZ6pYwi7FXlso0o+SALqCHKsifY6gpy+ZdTNMso9XPQmfvC3mFMhZULYTvOKXn5Qx3SxjZTJkdda1XKPM0hwGRXX7NDlMZ3AaUbHVsPgC0QkYG1+Lm5oVTctf8rqHyU10oZS/FU1i7UMI2D0hpwaXdcMibR9oAEdPLjR4HOQBcgwvNb6In7Racyknpe1v4ZV6r5xSqkh9YDb3KKGxKTwadHIJitiMcRWdCo7qx86jViFX4uUrTGarXhBH8I5Hcm5DLCm8BItfNloW4r8NUpbbZ6HdYvxiELr2AFCUWaekr6hYBWRbN1RZaAXXdgWsFbIchZcWqcgXpKBzkGwENVqnRHhhI8Ve9pLO1Q5MEnRDigHt2mgLm6pbFA8irhTJXOFuUFjsIYlyfzxkPlh3jK/P2S+dyvTumbnXkQsgSJRKHS9FMqCDKc82UOeMH7HtuaDOGF/RzEgPPwI5SuSS6+d5tH7UpHe1op1bfEYfO6+6gSyq8IgsVzamxqYfqMI3ssniAzK0OcyiH63DnpPuJnpz4oYqWEedwn0823CWsf5tpbdlzLioxrVWlT+7fChGn06RnjemtH7vZnbjwU+Vw4SzQMYiSY9VA71ew30TS3pLpeilge0ZxQPXx5OKI4wii8riLTvMH5YvHyuXehd8bIXx2dReu04Lk7ci1LJdzppoT4UEd3jAGQdPejBg+i6JM7h+mvxSrfqdV9ow6JBWPKv7VajKEC4D9sL+ra/uMr494dP9y0s/eYeVmqW+G4bTT9NEHftTa7w33a+dG1OXvOy6r9/j8mIZZV/eN2wzEHzu5XKK0iJSS815nWQ9+aA4/EU774ZpPfHeDsJLolUgZRleygJLsWVUyhpTB8FdT8y+3IE+XCl9eHbrt9FUECWU7i4M7fYAgdwH9o6NMPmWLe3a8Nc8fUoetx5tpI2iFaYC5/iPjwf9Nxz2X807758dwxNcJwbVDEKTkp3K9TWdc02t9Y3LLAxaFFrMOcihXPFioyyMEblz2DRI0Z0ovw301r083OFXf6BJSPmNaJsRoxBChTWvVRLcoiYg4yUwAnZ90tsl2C1Uktcp5ealqggRl4HhtZI2gbP+3jbpiPqeBIleh0SQiGD6pAi9jropsNeoz6NqYcs57A6qJxKnMP+xjRJ5omdgEGWzLVI+inH6CN30QHUEWsnV91e5XTUp33Ji2qyXQehdJyEgt8VuQQ/sdtIXQ+Xth9L/wyIUX3L+1IhRnVG16VO7PhzKHxSCwEQ956HAxM0Rg7k6JacFFgYTxBAtQZNHBvateF64xJi/GG86JkXWKabhTOCQM2SDG5NCDLk8+fNJP16t/mz63+G/hVDyBspW/4Blkzm+eKb8nEAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQflAgURMCgwVNSNAAABKklEQVR42u2a2xLCIAxEu/z/P+OTM52OTsHmhpzzXEl2wSZBjwMAAAAAAABgOxQZrPfebxOS9BcGjIgdTtLRFFUVHWWGVhHuZYZWFG5phFYWbmGEMoW/E858YSpS/EhyUXGGDbDandmdiTJClXYjI76ygp/XH33OIw9FH/u7tX/5zBMTVEl8hgktqr7PrO2Vx6d1W8TwUqlxuubSqnZ215wsh6Dz2m33CxEMyLiFqTQ0tYhbl2W+AjuYcNXo1gk+LYUepfS2EapyEjziD7fClq5XmQWmhyGr4DNT3rdnPcUPGeBpQoXYqpJI9M5PGxCZVFScaQMqlUmrk5Z6X1ehdD6ut9lGPH3JuszYKzVL5h2XtxElfx32NmOZ/wdYGbLraA4AAAAAAABRvABXEOAt8b5LTgAAAABJRU5ErkJggg=='); + --eye-active: url('data:image/png;base64,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'); + --default-background-color: #ffffff; + --default-background-color-light: rgba(255, 255, 255, 0.86); + --default-text-color: #2f4d5e; + --default-link-color: #41b3e2; + --default-graph-color: #5ac9af; + --default-graph-color-light: rgba(90, 201, 175, 0.5); + --default-graph-color-dim: rgba(245, 227, 179, 0.5); + --default-path-color: #f2796b; + --default-point-color: #5ac9af; + --default-marker-color: rgba(245, 227, 179); + --button-color: #232323; + --button-color-hover: #ffffff; + --button-background: #0000000d; + --button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + --button-text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35); + --button-border: 1px solid #dadada; + --button-background-hover: #3fb4e5; + --button-background-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + --button-color-disabled: #7c7c7c; + --button-border-color-disabled: #b7b7b7; + --button-close-color: #aaa; + --button-close-color-hover: #000; + --window-background: #fff; + --window-border: 1px solid #BBBABA; + --dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --window-active-background: rgb(167, 227, 252); + --background-background: rgba(0, 0, 0, 0); + --background-visible-background: rgba(0, 0, 0, 0.6); + --window-caption-color: #444; + --window-tools-close-background: linear-gradient(to bottom, #f1796b, #d66255); + --window-tools-close-border: 1px solid #f1786b; + --window-tools-close-background-hover: #f03242; + --dialog-loading-background: rgb(167, 227, 252); + --dialog-loading-content-border: 10px solid #fff; + --dialog-loading-content-border-top: 10px solid #ffe3e3; + --dialog-loading-content-border-right: 10px solid #f2796b; + --dialog-loading-content-border-bottom: 10px solid #f2786b; + --window-header-background: #e6e6e6; + --window-footer-border-top: #eee solid 1px; + --window-footer-background: linear-gradient(to bottom, white, #e1e2eb); + --panel-border: 1px solid #BBBABA; + --panel-title-color: #444; + --table-td-border-bottom: 1px solid #e0e0e0; + --table-td-border: 0; + --table-header-background: linear-gradient(to bottom, white, #e1e2eb); + --table-header-text-background-up: var(--arrow-up) no-repeat right; + --table-header-text-background-down: var(--arrow-down) no-repeat right; + --table-header-text-background-up-rtl: var(--arrow-up) no-repeat left; + --table-header-text-background-down-rtl: var(--arrow-down) no-repeat left; + --table-header-sort-background: url(img/sort_16.png) no-repeat; + --table-tree-background-image: var(--add); + --table-tree-background-image-hover: var(--add-active); + --table-tree-background-image-expanded: var(--remove); + --table-tree-background-image-expanded-hover: var(--remove-active); + --table-tree-background-image-loading: url(img/ripple.gif); + --table-row-level-1-background: rgba(221, 221, 221, 0.5); + --table-row-level-2-background: rgba(121, 121, 121, 0.3); + --table-row-level-3-background: darkkhaki; + --table-row-background-hover: rgb(217, 243, 253); + --table-row-selected-background: rgb(167, 227, 252); + --table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset; + --table-border: 1px solid #c9c9c9; + --table-resizer-background: #dde2e3; + --button-flat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, rgb(246, 246, 246) 100%); + --button-flat-border: 1px solid rgba(220, 220, 220, 0.51); + --button-flat-color: #666666; + --button-flat-border-hover: #ffcbcb; + --button-flat-background-hover: rgb(167, 227, 252); + --button-flat-color-hover: 0; + --colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid; + --colorpicker-button-checked-box-shadow: 0 .0 1em 1px #747373; + --colorpicker-button-hover-border-color: red; + --menu-item-hover-background: rgb(167, 227, 252); + --menu-item-hover-box-shadow: #cecbcb 0 1px 1px 0; + --checkbutton-checked-color: #fff; + --checkbutton-checked-background: #3fb4e5; + --checkbutton-checked-box-shdow: #ffffff 0 1px 10px 0 inset; + --tabs-content-border: 1px solid #dcdcdc; + --tabs-button-background: #e7e7e7; + --tabs-button-border: 1px solid #dcdcdc; + --tabs-button-color: #666666; + --tabs-button-hover-border: 1px #6ed5ff solid; + --tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255); + --tabs-button-checked-background: #fff; + --tabs-button-checked-color: #000000; + --dropdown-arrow-up-background-image: var(--arrow-up); + --dropdown-arrow-down-background-image: var(--arrow-down); + --listview-li-hover-background: #eee; + --menu-border: 1px solid #CCC; + --menu-background: #FFF; + --menu-color: #333; + --menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --textbox-color: black; + --textbox-background: white; + --textbox-background-disabled: #e5e5e5; + --textbox-border: 1px solid #dadada; + --textbox-border-color-focus: #a7e3fc; + --textbox-border-color-invalid: #ff6762; + --textbox-box-shadow-invalid: 0 0 5px #ff6762; + --textbox-box-shadow-focus: 0 0 10px #8bddff; + --resizer-horizontal-background: #dde2e3; + --resizer-vertical-background: #dde2e3; + --selectlist-arrow-hover-background-image: var(--arrow-down-active); + --selectlist-label-background: #fff; + --selectlist-arrow-background-color: #fff; + --selectlist-arrow-border: 1px solid #dadada; + --selectlist-arrow-background-image: var(--arrow-down); + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-background: rgba(255, 255, 255, 0.44); + --searchlist-menu-color: #333; + --lazylist-more-background-image: var(--arrow-down-active); + --button-arrow-background-color: #f3f3f3; + --button-arrow-background-border: 1px solid #dadada; + --button-arrow-background-color-hover: #f3f3f3; + --separator-background: #dedede; + --separator-box-shadow: inset 0 0 15px #ffffff; + --dropdown-visible-img-filter: drop-shadow(0px 0px 8px #45c8ff); + --dropdown-visible-badge: drop-shadow(1px 1px 5px #a7e3fc); + --range-background: rgba(0,0,0,0); + --range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + --range-track-background: rgba(192, 192, 192, 0.75); + --range-track-border: 0px solid rgba(26, 93, 157, 0.35); + --range-thumb-box-shadow: 2.2px 2.2px 8.6px rgb(167, 227, 252), 0px 0px 2.2px rgba(167, 227, 252, 0.83); + --range-thumb-border: 2px solid rgb(70, 183, 230); + --range-thumb-background: rgb(94, 204, 248); + --range-track-background-focus: rgba(210, 210, 210, 0.75); + --bar-arrow-left-background-image: var(--arrow-left); + --bar-arrow-right-background-image: var(--arrow-right); + --bar-arrow-left-background-image-hover: var(--arrow-left-active); + --bar-arrow-right-background-image-hover: var(--arrow-right-active); + --bar-arrow-left-inactive-background-image: var(--arrow-left); + --bar-arrow-right-inactive-background-image: var(--arrow-right); + --bar-item-background: rgba(235, 240, 242, 0.69); + --bar-item-border: 1px solid #dcdcdc; + --bar-item-color: #666666; + --bar-item-background-hover: rgba(255, 255, 255, 0.87); + --bar-item-checked-border-bottom: 3px solid #46b6e4; + --bar-item-checked-box-shadow: #cecbcb 0 1px 10px 0 inset; + --multiselect-add-background-image: var(--add); + --multiselect-add-background-image-hover: var(--add-active); + --multiselect-list-li-border-bottom: 2px dotted #dadada; + --multiselect-list-remove-background-image: url(img/remove.png); + --multiselect-list-remove-background-image-hover: url(img/remove-hover.png); + --grid-window-over-border: #e13946 dotted 3px; + --grid-window-drag-border: #46b7e6 dotted 3px; + --datetimepicker-calendar-border-right: 3px solid pink; + --datetimepicker-clock-background: gainsboro; + --datetimepicker-different-month-color: #bebebe; + --datetimepicker-day-background-hover: #a7e3fc; + --datetimepicker-day-selected-background: #46b7e6; + --datetimepicker-day-selected-color: #fff; + --datetimepicker-day-today-border-bottom: 3px solid #f2796b; + --scrollbar-background: #ebebeb; + --scrollbar-track-border: 1px #dadada solid; + --scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset; + --scrollbar-thumb-background: #b5b5b5; + --scrollbar-thumb-border: 1px solid #dadada; + --scrollbar-thumb-background-hover: #62b7da; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-background-active: #48b9e7; + --scrollbar-thumb-border-active: 1px solid #dadada; +} + +.textbox-with-label { + padding: 15px 5px 5px 5px; + margin: 10px 0; + position: relative; + display: inline-block; + border-radius: 4px; + color: var(--textbox-color); + border: var(--textbox-border); + background: var(--textbox-background); +} + + .textbox-with-label > span { + padding: 10px; + pointer-events: none; + position: absolute; + top: 0; + transition: 0.4s; + transition-timing-function: ease; + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); + opacity: 0.5; + color: var(--default-link-color); + } + +html[dir="rtl"] .textbox-with-label > span { + right: 0; +} + +html[dir="ltr"] .textbox-with-label > span { + left: 0; +} + +.textbox-with-label:focus-within { + outline: none; + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); + background: var(--textbox-background-active); +} + +.textbox-with-label > input { + padding: 5px; + border: 0; + background: var(--textbox-background); + color: var(--textbox-color); +} + + .textbox-with-label > input:focus { + outline: none; + background: var(--textbox-background-active); + } + + .textbox-with-label > input:focus + span, + .textbox-with-label > input:not(:placeholder-shown) + span { + opacity: 1; + transform: scale(0.75) translateY(-40%) translateX(-20px); + } + +html[dir="rtl"] .textbox-with-label > input:focus + span, +html[dir="rtl"] .textbox-with-label > input:not(:placeholder-shown) + span { + opacity: 1; + transform: scale(0.75) translateY(-40%) translateX(20%); +} + +.range2 { + position: relative; +} + +.range2-thumb4 { + width: 10px; + background: var(--default-path-color); + height: 100%; + position: absolute; + z-index: 100; + top: 0; + pointer-events: none; + left: calc(var(--x) - 5px); + transition: left ease-out 0.2s; +} + +.range2-thumb { + width: 10px; + background: var(--default-graph-color-dim); + height: 100%; + position: absolute; + z-index: 100; + top: 0; + pointer-events: none; + width: var(--x); + transition: width ease-out 0.2s; + border-right: 2px solid var(--default-path-color); +} + +html[dir='rtl'] .range2-thumb { + border-right: none; + border-left: 2px solid var(--default-path-color); + width: calc(100% - var(--x)); +} + +.range2-preview { + /* height: 74px; */ + background: var(--default-background-color-light); + position: absolute; + z-index: 100; + top: 0; + pointer-events: none; + left: var(--x); + transition: left ease-out 0.2s; + border: 2px solid var(--default-path-color); + border-radius: 5%; + display: none; + text-align: center; + /* vertical-align: middle; */ + padding: 0; + transform: translateX(-50%) translateY(calc((-100%) - 7px)); +} + + .range2-preview:after { + content: ''; + position: absolute; + top: 100%; + left: 0; + right: 0; + margin: 0 auto; + width: 0; + height: 0; + border-top: solid 10px var(--default-path-color); + border-left: solid 10px transparent; + border-right: solid 10px transparent; + } + +.range2-preview-visible { + display: block; +} + +.range2-thumb-dragging { + background-color: var(--default-graph-color-light); + transition: none; +} + +.range2-chart { + width: 100%; + height: 100%; +} + +.button { + display: flex; + align-items: center; + padding: 0px 10px; + border: var(--button-border); + border-radius: 8px / 10px; + box-sizing: border-box; + text-decoration: none; + font-weight: 300; + color: var(--button-color); + text-shadow: var(--button-text-shadow); + text-align: center; + transition: all 0.2s; + background: var(--button-background); + cursor: pointer; + margin: 0 2px; + -webkit-appearance: none; + outline:0; + overflow: hidden; + position: relative; +} + + + + + .button:hover { + border-color: rgba(255,255,255,1); + background: var(--button-background-hover); + color: var(--button-color-hover); + } + + .button:disabled { + background: var(--button-background-disabled); + color: var(--button-color-disabled); + border-color: var(--button-border-color-disabled); + cursor: default; + } + + .button button-big { + font-size: 18px; + padding: 15px 20px; + min-width: 100px; + } + +.button-close { + color: var(--button-close-color); + font-size: 30px; + text-decoration: none; + position: absolute; + right: 5px; + top: 0; +} + + + .button-close:hover { + color: var(--button-close-color-hover); + } + + +.button-flat:disabled { + opacity: 0.65; + cursor: not-allowed; +} + +.button-flat img { + vertical-align: middle; +} + +.button-flat-mini { + user-select: none; + background-image: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + border: 1px solid #dcdcdc; + cursor: pointer; + color: #666666; + text-decoration: none; + font-size: 8px; + font-weight: normal; + text-align: center; + text-shadow: 0 2px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + padding: 5px 10px; + display: inline-block; + -webkit-font-smoothing: antialiased; +} + + .button-flat-mini:hover { + border: 1px red solid; + } + + .button-flat-mini:disabled { + opacity: 0.65; + cursor: not-allowed; + } + +.modal-dialog { + z-index: 10; + position: absolute; + background: #fefefe; + border: #333 solid 1px; +} + + +.window, .dialog { + flex-direction: column; + background: var(--window-background); + margin: 0; + border: var(--window-border); + z-index: 1000; + left: 30%; + top: 25%; + display: flex; + outline: none; +} + +.dialog { + display: none; + position: absolute; + box-shadow: var(--dialog-box-shadow); +} + +.dialog-visible { + display: flex; +} + +.window:focus-within, .dialog:focus-within { + z-index: 1001; +} + +.window:focus-within > .window-header, .dialog-active > .dialog-header { + background: var(--window-active-background); +} + +.background-visible ~ .wrap { + filter: blur(2px); +} + +.dialog-modal { + z-index: 1004; +} + +.background { + visibility: hidden; + position: fixed; + width: 100%; + height: 100%; + background: var(--background-background); + z-index: 1003; + top: 0; + transition: all .3s ease .15s; +} + +.background-visible { + visibility: visible; + background: var(--background-visible-background); + transition: all .3s ease .15s; +} + +html[dir='rtl'] .window-tools, html[dir='rtl'] .dialog-tools { + right: auto; + left: 5px; +} + +.window-tools, .dialog-tools { + position: absolute; + top: 5px; + right: 5px; +} + +.window-icon, .dialog-icon { + width: 22px; + margin-right: 6px; + background-image: var(--icon); + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + + +.window-caption, .dialog-caption { + max-width: calc(100% - 50px); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-left: 10px; + margin-right: 10px; + color: var(--window-caption-color); +} + +.window-subtitle, .dialog-subtitle +{ + border: 1px solid #c2c2c2; + font-size: 12px; + height: 40%; + margin: auto 0; + line-height: 101%; + padding: 2px; + border-radius: 3px; + background: wheat; +} + +.window-subtitle:empty, .dialog-subtitle:empty +{ + display: none; +} + +.window-tools-close, .dialog-tools-close { + float: left; + height: 16px; + line-height: 16px; + padding: 0 5px; + border: var(--window-tools-close-border); + border-radius: 5px; + background: var(--window-tools-close-background); + white-space: nowrap; +} + +.window-tools-close:hover, .dialog-tools-close:hover { + background: var(--window-tools-close-background-hover); +} + +.window-tools-max, .dialog-tools-max { + float: left; + width: 1.4em; + line-height: 1.4em; + text-align: center; + margin-left: .15em; + cursor: pointer; + background: #aaa; + border-radius: .2em; + font-family: Verdana; + opacity: .6; +} + +.window-body { + min-height: 20px; + min-width: 20px; + padding: 0px; + flex: 1; +} + +.dialog-body { + flex: 1; + min-width: 100px; + min-height: 100px; + /*width: calc(100% - 10px );*/ + padding: 5px; + overflow-y: auto; +} + +.dialog-loading { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 0; + background: var(--dialog-loading-background); + visibility: hidden; + text-align: center; + opacity: 0; + transition: all .3s ease .15s; +} + +.dialog-loading-content { + position: absolute; + top: calc(50% - 30px); + left: calc(50% - 30px); + border-radius: 50%; + border: var(--dialog-loading-content-border); + border-top: var(--dialog-loading-content-border-top); + border-right: var(--dialog-loading-content-border-right); + border-bottom: var(--dialog-loading-content-border-bottom); + width: 40px; + height: 40px; + animation: spin 1.2s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.dialog-loading-visible { + opacity: 1; + visibility: visible; + height: 100%; + transition: all .3s ease .15s; +} + +body { + height: 100%; + margin: 0; +} + +.window-header, .dialog-header { + position: relative; + line-height: 30px; + background: var(--window-header-background); + cursor: move; + user-select: none; + min-height: 30px; + display:flex; +} + + .window-header h2, .dialog-header h2 { + margin: 0px; + font-size: 20px; + } + + +html[dir='rtl'] .window-footer > button:first-of-type, html[dir='rtl'] .dialog-footer > button:first-of-type { + margin-right: auto; + margin-left: 0; +} + +.window-footer, .dialog-footer { + border-top: var(--window-footer-border-top); + background: var(--window-footer-background); + padding: 5px; + display: flex; +} + +.dialog-footer { + min-height: 30px; +} + + .window-footer > button:first-of-type, .dialog-footer > button:first-of-type { + margin-left: auto; + } + + .window-footer > *, .dialog-footer > * { + margin: 0 3px; + } + +/* End of Dialog */ + +/* Begin of Panel */ + +.panel { + margin: 0; + padding: 0; + /* border-radius: .35em; */ + border: var(--panel-border); +} + +html[dir='rtl'] .panel-tools { + right: auto; + left: 3px; +} + +.panel-tools { + position: absolute; + top: 3px; + right: 3px; +} + +.panel-icon { + float: left; + height: 16px; + width: 16px; + margin-left: 5px; + margin-top: 3px; + margin-right: 3px; + display: none; +} + + +.panel-title { + margin-left: 10px; + margin-right: 10px; + color: var(--panel-title-color); +} + +.panel-tools-close { + top: 50%; + right: -1em; + position: absolute; + height: 16px; + line-height: 15px; + padding: 0 5px; + background: #e23442; + border: 1px solid #911f28; + border-radius: 5px; + background-image: linear-gradient(to bottom, #e8616c, #dd202f); +} + + .panel-tools-close:hover { + background: #CFFF84; + } + +.panel-tools-closed { + position: absolute; + height: 16px; + line-height: 15px; + padding: 0 5px; + background: #e23442; + border: 1px solid #911f28; + border-radius: 5px; + background-image: linear-gradient(to bottom, #e8616c, #dd202f); + margin-left: 8px; +} + +.panel-tools-max { + float: left; + width: 16px; + line-height: 16px; + text-align: center; + margin-left: 2px; + cursor: pointer; + background: #aaa; + border-radius: 2px; + font-family: Verdana; + opacity: .6; +} + +.panel-body { + min-width: 100px; + min-height: 100px; + margin: 0; + /*padding:.2em 1em .6em 1em;*/ + height: 100%; + overflow: auto; + position: relative; +} + +.panel-header { + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + width: 100%; + line-height: 10px; + background: #e6e6e6; + border-radius: 3px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + user-select: none; +} + + .panel-header h2 { + margin: 0px; + font-size: 20px; + } + +html[dir='rtl'] .panel-footer { + text-align: left; +} + +.panel-footer { + padding: 5px 10px; + border-top: #eee solid 1px; + text-align: right; + position: absolute; + bottom: 0; + left: 0; + width: calc(100% - 15px); + background-image: linear-gradient(to bottom, white, #e1e2eb); +} + +/* End of Panel */ + +.table-body { + border-collapse: collapse; + border-spacing: 0; +} + + + .table-body > tbody > tr > td { + border: var(--table-td-border); + border-bottom: var(--table-td-border-bottom); + border-left: 0; + padding: 0 4px; + } + +.table-body > tbody > tr:first-child > td { + border-top: 0; +} + +.table-body > tbody > tr:last-child > td { + border-bottom: 0; +} + +.table-body > tbody > tr > td:last-child { + border-right: 0; +} + + +.table-select-box { + position: fixed; + background-color: var(--default-graph-color-light); + border-width: 2px; + border-color: var(--default-graph-color-dim); + border-style: dashed; + display: none; + z-index: 1000; + pointer-events: none; +} + +.table-select-box-visible { + display: block; +} + +.table-header { + /*color: var(--table-header-color); + background-image: var(--table-header-background); + position: relative; + overflow: hidden;*/ +} + + +.table-header td { + padding: 0; + border: 0; + position: sticky; + top: 0; + color: var(--table-header-color); + background-image: var(--table-header-background); +} + +.table-header-input { + width: calc(100% - 20px); +} + +.table-header-text { + padding: 2px 5px 2px 5px; + cursor: pointer; + align-items: center; + justify-content: center; + display: flex; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + flex-grow: 1; +} + + + .table-header-text[data-dir='normal'] { + background: none + } + + .table-header-text[data-dir='up'] { + background: var(--table-header-text-background-up); + background-size: contain; + } + + .table-header-text[data-dir='down'] { + background: var(--table-header-text-background-down); + background-size: contain; + } + +html[dir='rtl'] .table-header-text[data-dir='up'] { + background: var(--table-header-text-background-up-rtl); + background-size: contain; +} + +html[dir='rtl'] .table-header-text[data-dir='down'] { + background: var(--table-header-text-background-down-rtl); + background-size: contain; +} + + +.table-header-select { + padding: 2px 5px 2px 5px; + cursor: pointer; + width: calc(100% - 18px); +} + + .table-header-select[data-dir='normal'] { + background: url("img/sort_16.png") no-repeat right; + } + + .table-header-select[data-dir='up'] { + background: url("img/sort_up_16.png") no-repeat right; + } + + .table-header-select[data-dir='down'] { + background: url("img/sort_down_16.png") no-repeat right; + } + +.table-header-sort { + float: right; + width: 10px; + height: 12px; + background: var(--table-header-sort-background); +} + + +.table-filter-menu { + position: absolute; + border: 2px solid #ccc; + overflow-y: auto; + display: none; + background-color: #f9f9f9; + min-width: 10px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + padding: 5px; + z-index: 1; + /* max-height: 100px; */ + top: 16px; + right: 0; +} + + + +.table { + user-select: none; + cursor: default; + overflow: auto; + display: flex; + flex-direction: column; + position: relative; + border: var(--table-border); +} + + +.table-tree { + cursor: pointer; + width: 16px; + height: 16px; + display: inline-block; + vertical-align: middle; + background-image: var(--table-tree-background-image); + padding: 3px; + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); +} + + + .table-tree:hover { + background-image: var(--table-tree-background-image-hover); + } + + .table-tree[data-expand='1'] { + background-image: var(--table-tree-background-image-expanded); + } + + + .table-tree[data-expand='1']:hover { + background-image: var(--table-tree-background-image-expanded-hover); + } + + + .table-tree[data-expand='3'] { + background-image: var(--table-tree-background-image-loading); + } + + +.table-row { +} + + .table-row[data-level='0'] { + } + + .table-row[data-level='1'] { + /*background-image: linear-gradient(to top, rgba(153, 205, 254, 0.34), rgba(255, 255, 255, 0.42));*/ + background: var(--table-row-level-1-background); + } + + .table-row[data-level='1'] td:first-child { + padding-left: 32px; + } + + .table-row[data-level='1'] .table-tree { + margin-left: -22px; + } + + .table-row[data-level='2'] { + background: var(--table-row-level-2-background); + } + + .table-row[data-level='2'] td:first-child { + padding-left: 46px; + } + + .table-row[data-level='2'] .table-tree { + margin-left: -22px; + } + + .table-row[data-level='3'] { + background: var(--table-row-level-3-background); + } + + .table-row[data-level='3'] td:first-child { + padding-left: 46px; + } + + .table-row[data-level='3'] .table-tree { + margin-left: -22px; + } + + + + +html[dir='rtl'] .table-row[data-level='1'] td:first-child { + padding-right: 32px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='1'] .table-tree { + margin-right: -22px; + margin-left: 0; +} + + +html[dir='rtl'] .table-row[data-level='2'] td:first-child { + padding-right: 46px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='2'] .table-tree { + margin-right: -22px; + margin-left: 0; +} + + + +html[dir='rtl'] .table-row[data-level='3'] td:first-child { + padding-right: 46px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='3'] .table-tree { + margin-right: -22px; + margin-left: 0; +} + + + +.table-row-selected, .table-row-selected:hover, .table-row-selected[data-level='1'], .table-row-selected[data-level='2'] { + /*background-color: rgb(196, 196, 199);*/ + background: var(--table-row-selected-background); + box-shadow: var(--table-row-selected-box-shadow); +} + +.table-row-hidden { + display: none; +} + + +.table-header-menu { + position: relative; + background: red; + width: 10px; + height: 15px; + float: right; + background: url("img/filter_16.png") no-repeat; + background-position: 0em; + cursor: pointer; +} + + +.table-header-wrap { + width: 100%; + border-bottom: var(--table-border); + display: flex; + /*border-left: 0;*/ + line-height: 140%; +} + +/*html[dir="rtl"] .table-header-wrap { + border-left: var(--table-header-wrap-border); + border-right: 0; +}*/ + +/* +.table-body > table > thead > tr > td:first-child > .table-header-wrap +{ + border-left: 0; +} +*/ + + +.table-resizer { + min-width: 4px; + cursor: col-resize; + background: var(--table-resizer-background); + /*border-right: 3px blue solid;*/ +} + + + +/* Checkbutton + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:1px solid #dcdcdc; + + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-size: 12px; + font-weight: normal; + text-align: center; + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + + padding: 5px 10px; + + display:inline-block; + + + -webkit-font-smoothing: antialiased; + */ + +.button-flat, .check, .radiolist-button, .colorpicker-button, .dropdown { + -webkit-touch-callout: none; + user-select: none; + background: var(--button-flat-background); + /* background-color: #ffffff; */ + border: var(--button-flat-border); + cursor: pointer; + color: var(--button-flat-color); + text-decoration: none; + font-weight: normal; + font-size: 12px; + text-align: center; + /* box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); */ + padding: 3px 4px; + display: inline-block; + -webkit-font-smoothing: antialiased; + position: relative; + font-size: var(--button-flat-font-size); + font-weight: var(--button-flat-font-weight); +} + +.colorpicker-radiolist { + display: flex; + flex-wrap: wrap; +} + +.colorpicker-button { + flex-shrink: 0; + flex-grow: 1; + padding: 0; + width: 15px; + height: 15px; + background-image: none; + margin: 0 1px; +} + +.colorpicker-button-checked { + border: var(--colorpicker-button-checked-border); + box-shadow: var(--colorpicker-button-checked-box-shadow); + height: 10px; + width: 10px; +} + +.colorpicker-button-hover { + border-color: var(--colorpicker-button-hover-border-color); +} + + +.dialog-tools-close:before, .window-tools-close:before { + content: "x"; +} + +@media only screen and (max-width: 500px) { + .dialog { + bottom: 0; + right: 0; + top: 0; + left: 0; + } + + .dialog-header { + font-size: 20px; + line-height: 40px; + } + + .dialog-tools-close { + line-height: 25px; + height: 25px; + } +} + +.check[checked], .button[checked], .radiolist-button-checked { + background: var(--checkbutton-checked-background); + box-shadow: var(--checkbutton-checked-box-shdow); + color: var(--checkbutton-checked-color); + font-weight: var(--checkbutton-checked-font-weight); + font-size: var(--checkbutton-checked-font-size); + transition: all ease-in-out 0.3s; + /* + background-image: linear-gradient(to bottom, #67a7e9, #2580df); + color: white;*/ +} + + +/* Radio List */ + +.radiolist { + display: flex; +} + +.tabs-body { + position: relative; + transition: height.2s ease .2s; +} + +/* dirty hack, yet cool */ +.tabs[style*="height:"] > .tabs-body { + overflow-y: auto; +} + + +/* Tabs */ +.tabs-content { + background-color: var(--tabs-content-background-color); + padding: 5px; + border: var(--tabs-content-border); + box-sizing: border-box; + width: 100%; + overflow: auto; + border-top: 0; + position: absolute; + visibility: hidden; + opacity: 0; + transition: all .2s ease .2s; +} + +html[dir="ltr"] .tabs-content { + left: -100%; +} + +html[dir="rtl"] .tabs-content { + right: -100%; +} + +.tabs-content-active { + visibility: visible; + opacity: 1; + transition: all .2s ease .2s; +} + +html[dir="ltr"] .tabs-content-active { + left: 0; +} + +html[dir="rtl"] .tabs-content-active { + right: 0; +} + +.tabs-bar { + flex-shrink: 0; + overflow-x: auto; + overflow-y: hidden; + display: flex; + flex-wrap: nowrap; +} + +.tabs-bar-ext { + flex: 1; + background: 0; + border-bottom: var(--tabs-button-border); +} + +.tabs { + display: flex; + flex-direction: column; +} + +.tabs-button { + -webkit-touch-callout: none; + user-select: none; + background: var(--tabs-button-background); + border: var(--tabs-button-border); + display: inline-block; + cursor: pointer; + color: var(--tabs-button-color); + text-decoration: none; + font-weight: normal; + text-align: center; + border-radius: 5px 5px 0 0; + padding: 5px 15px; +} + + +.tabs-button[checked] { + box-shadow: var(--tabs-button-checked-box-shadow); + background: var(--tabs-button-checked-background); + color: var(--tabs-button-checked-color); + border-bottom: 0; +} + +/* Drop Down + + .dropdown +{ + display: flex; + } + +.dropdown-button:hover +{ + border: 0.1em red solid; +} + +.dropdown-button-visible img +{ + -webkit-filter: drop-shadow(0px 0px 8px #3b8de2); +} + +.dropdown-button { + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:.1em solid #dcdcdc; + + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-size: .8em; + font-weight: normal; + text-align: center; + text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0.1em 0.1em rgba(255, 255, 255, 0.1), 0 0.1em rgba(0, 0, 0, 0.12); + + padding: 0.6em 1.5em; + + display:inline-block; + + + -webkit-font-smoothing: antialiased; +} + +.dropdown .dropdown-menu { + background: rgba(255, 255, 255, 0.73); + border: solid .1em #a1a1a1; + top: 100%; + display: block; + left: -25px; + margin-top: .6em; + opacity: 0; + padding: 0.5em; + pointer-events: none; + position: absolute; + transform: translateY(10px); + transition: all .25s ease-out; + box-shadow: .1em .1em .2em rgba(0, 0, 0, 0.28); + z-index: 110; +} + +.dropdown .dropdown-menu-visible { + opacity: 1; + pointer-events: auto; + transform: translateY(0px); +} + + +.dropdown .dropdown-menu:after { + border-left: solid transparent .6em; + border-right: solid transparent .6em; + border-bottom: solid #3b8de2 .6em; + top: -.55em; + content: " "; + height: 0; + left: 50%; + position: absolute; + width: 0; +} + */ + +.dropdown-arrow-up { + background-image: var(--dropdown-arrow-up-background-image); +} + +.dropdown-arrow-down { + background-image: var(--dropdown-arrow-down-background-image); +} + +.dropdown-arrow { + height: 8px; + width: 12px; + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + position: absolute; + visibility: hidden; + opacity: 0; + transition: opacity .3s ease .15s; + z-index: 1002; +} + +.dropdown-arrow-visible { + visibility: visible; + opacity: 1; + transition: opacity .1s ease .15s; +} + +.listview { + overflow-y: auto; + overflow-x: hidden; + padding: 0; +} + + .listview ul { + list-style-type: none; + width: 100%; + padding: 0; + margin: 0; + } + + .listview li { + padding: 5px; + } + + .listview li:hover { + background: var(--listview-li-hover-background); + cursor: pointer; + } + + .listview li img { + float: left; + margin: 0 12px 0 0; + } + +/* Start of Menu */ + +.menu { + display: flex; + flex-direction: column; +} + +.menu, .tooltip { + --x: auto; + --y: auto; + visibility: hidden; + z-index: 1002; + position: absolute; + overflow: hidden; + border: var(--menu-border); + white-space: nowrap; + /* font-family: sans-serif; */ + background: var(--menu-background); + color: var(--menu-color); + /* border-radius: 5px; */ + margin: 0; + list-style: none; + padding: 2px; + user-select: none; + left: var(--x); + top: var(--y); + max-height: 100vh; + overflow-y: auto; +} + +.menu-visible, .tooltip-visible { + visibility: visible; +} + +.menu > * { + padding: 5px 1px; + cursor: pointer; +} + + + +.input-form .input, .input-form input[type='file'] { + width: calc(100% - 8px); +} + +.input-form .select-autocomplete, .input-form .multiselect, .input-form .select { + width: calc(100%); +} + +.input-form td:first-child { + white-space: nowrap; +} + +.select-textbox +{ + border: 0; + background: #f7f7f7; + padding: 2px 4px; + outline: none; +} + + + +/* Start of Resizer */ + +.resizer-horizontal { + -webkit-touch-callout: none; + user-select: none; + width: 5px; + cursor: col-resize; + background: var(--resizer-horizontal-background); + /*border-right: 3px blue solid;*/ +} + +.panel-horizontal { + display: flex; + width: 100%; +} + + .panel-horizontal > .panel { + /* display: block; */ + } + +.panel-vertical { + height: 100%; +} + + .panel-vertical > .panel { + display: block; + } + +.resizer-vertical { + -webkit-touch-callout: none; + user-select: none; + width: 100%; + height: 5px; + cursor: row-resize; + background: var(--resizer-vertical-background); + /*border-top: 3px blue solid;*/ + display: block; +} + + +/* Auto Complete */ + +.select, .multiselect-autocomplete, .select-autocomplete { + display: flex; + position: relative; + align-items: stretch; + cursor: pointer; +} + + +.select-autocomplete-wrap, .select-wrap, .dropdown-wrap, .multiselect-autocomplete-wrap { + position: absolute; + top: 0px; + width: 100%; +} + +.select-autocomplete-arrow:hover, .searchlist-arrow:hover, .select-arrow:hover, .multiselect-autocomplete-arrow:hover { + background-image: var(--selectlist-arrow-hover-background-image); + cursor: pointer; +} + +html[dir='rtl'] .select-label, html[dir='rtl'] .select-autocomplete-textbox, html[dir='rtl'] .multiselect-autocomplete-textbox { + /* border-right: var(--textbox-border); + border-left: 0; */ +} + +.select-autocomplete-textbox, .searchlist-textbox, .select-label, .multiselect-autocomplete-textbox { + color: var(--textbox-color); + background: var(--selectlist-label-background); + flex: 1; + /* border: var(--textbox-border); */ + /* border-right: 0; */ + user-select: none; + border-radius: 10px; + -webkit-appearance: none; + align-self: stretch; + margin: 0; + transition: var(--selectlist-transition); + min-height: 1.6em; + padding: 2px 5px; +} + +.select-counter +{ + text-align: center; + padding: 0px 10px; + background-color: #f1f1f1; + left: 0; + bottom: 0; + border-top-right-radius: 10px; + border-bottom-left-radius: 10px; + font-size: small; +} + +.select-menu-repeat +{ + background: var(--menu-background); + overflow-y: auto; + overflow-x: hidden; + max-height: 16em; +} + + +.select-autocomplete-textbox:focus, .searchlist-textbox:focus, .select-label:focus, .multiselect-autocomplete-textbox:focus { + outline: none; + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); + /*background: var(--selectlist-label-focus-background);*/ +} + +.select-invalid { + outline: none; + border-color: var(--textbox-border-color-invalid) !important; + box-shadow: var(--textbox-box-shadow-invalid) !important; +} + + +.select-autocomplete-textbox:focus + .select-autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .select:focus + .select-arrow, .multiselect-autocomplete-textbox:focus + .multiselect-autocomplete-arrow, .multiselect-autocomplete-textbox:focus ~ .multiselect-add { + outline: none; + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); +} + +.select-autocomplete-textbox-invalid + .select-autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .select:focus + .select-arrow, .multiselect-autocomplete-textbox:focus + .multiselect-autocomplete-arrow, .multiselect-autocomplete-textbox:focus ~ .multiselect-add { + outline: none; + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); +} + + +.select-autocomplete-header, .select-header, .multiselect-autocomplete-header, .searchlist-header { + width: 100%; + display: flex; +} + +.select-autocomplete-arrow, .select-arrow, .multiselect-autocomplete-arrow { + background-color: var(--selectlist-arrow-background-color); + width: 27px; + /* border: var(--selectlist-arrow-border); */ + /* margin-top: 0; */ + background-image: var(--selectlist-arrow-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + transition: var(--selectlist-transition); + border-radius: 10px; +} + + +.searchlist-arrow { + display: none; +} + +.searchlist-textbox { + border-right: 1px solid #dadada; + border-radius: 0; +} + +.searchlist-menu, .lazylist-menu { + border: var(--searchlist-menu-border); + /*white-space: nowrap; + font-family: sans-serif; */ + background: var(--searchlist-menu-background); + color: var(--searchlist-menu-color); + margin: 0; + padding: 1px; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + list-style: none; + user-select: none; +} + +.searchlist-wrap { + height: 100%; +} + +.searchlist { + display: flex; + flex-direction: column; +} + + +.lazylist { + height: 100%; +} + +.lazylist-more { + height: 22px; + background-color: var(--button-arrow-background-color); + background-image: var(--lazylist-more-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; + border: var(--button-arrow-background-border); + border-top: 0; +} + + + +.lazylist-menu { + height: calc(100% - 24px); +} + +.dropdown-menu-oversized { + overflow-y: auto; +} + +.select-autocomplete-menu, .select-menu, .dropdown-menu, .multiselect-autocomplete-menu { + display: flex; + flex-direction: column; + visibility: hidden; + z-index: 1002; + position: absolute; + border: var(--menu-border); + /*white-space: nowrap; + font-family: sans-serif; */ + color: var(--menu-color); + margin: 0; + padding: 1px; + opacity: 0; + transition: opacity .3s, visibility .15s; + user-select: none; + + border-radius: 10px; + + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); + + +} + +.dropdown-down > .dropdown-menu { + top: calc(100% + 10px); + left: 50%; + transform: translateX(-50%); +} + + +.dropdown-menu, .menu, .tooltip { + box-shadow: var(--menu-box-shadow); + cursor: default; + text-align: start; +} + + +.dropdown-visible.dropdown-up::after { + content: ''; + position: absolute; + top: -10px; + left: 0; + right: 0; + margin: 0 auto; + width: 0; + height: 0; + border-bottom: solid 10px var(--default-path-color); + border-left: solid 10px transparent; + border-right: solid 10px transparent; +} + + +.dropdown-up > .dropdown-menu { + top: 0; + left: 50%; + transform: translateY(calc(-100% - 10px)) translateX(-50%); +} + +.dropdown-visible.dropdown-down::after { + content: ''; + position: absolute; + top: calc(100% + 1px); + left: 0; + right: 0; + margin: 0 auto; + width: 0; + height: 0; + border-top: solid 10px var(--default-path-color); + border-left: solid 10px transparent; + border-right: solid 10px transparent; + z-index: 100; +} + + + + +.menu-modal, .select-menu-modal, .select-autocomplete-menu-modal, .multiselect-autocomplete-menu-modal { + z-index: 1004; +} + +.menu-modal, .select-menu-modal, .select-autocomplete-menu-modal, .multiselect-autocomplete-menu-modal { + border-top: 1px solid #333; +} + + .menu-modal > *, .select-menu-modal li, .select-autocomplete-menu-modal li, .multiselect-autocomplete-menu-modal li { + font-size: 1.4em; + line-height: 1.5em; + } + + +/* +html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .select-menu, html[dir='rtl'] .multiselect-autocomplete-menu +{ + left: auto; + right: 0px; +} +*/ + +/* mozilla is a bit special +_:-moz-tree-row(hover), .select-menu, autocomplete-menu +{ + left: auto; + right: 0px; +} + +_:-moz-tree-row(hover), html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .select-menu, html[dir='rtl'] .multiselect-autocomplete-menu +{ + right: auto; + left: 0px; +} +*/ + +.select-autocomplete-menu-visible, .select-menu-visible, .dropdown-menu-visible, .multiselect-autocomplete-menu-visible { + width: auto; + height: auto; + visibility: visible; + opacity: 1; +} + +.select-menu-repeat > div +{ + padding: 0 3px; + cursor: pointer; +} + +.select-menu-repeat > div:hover +{ + background: var(--menu-item-hover-background); + box-shadow: var(--menu-item-hover-box-shadow); + color: var(--menu-item-hover-color); +} + +/* Input */ + +.input { + display: block; + position: relative; +} + +.input > input +{ + width: 100%; +} + +.input > input, .select, .textbox { + outline: none; + color: var(--textbox-color); + border: var(--textbox-border); + background: var(--textbox-background); + border-radius: 8px / 10px; + -webkit-appearance: none; + transition: all 0.2s; + font-family: "default"; + font-size: 1em; +} + +.input > input +{ + padding: 2px 5px; +} + + .input > input:disabled { + background: var(--textbox-background-disabled); + } + + .input > input[type='checkbox'] { + width: 24px; + height: 24px; + transition-duration: 0.3s; + position: relative; + } + + + .input > input:checked::before { + content: '\2713'; + color: #4ebeec; + position: absolute; + left: 50%; + top: 50%; + transform: translateY(-50%) translateX(-50%); + font-weight: bold; + } + + .input > input:active, .textbox:active { + border: 1px solid #34495E; + } + +.input > input:focus, .textbox:focus { + border-color: var(--textbox-border-color-focus); + box-shadow: var(--textbox-box-shadow-focus); +} + +.input-invalid > input { + border-color: var(--textbox-border-color-invalid) !important; + box-shadow: var(--textbox-box-shadow-invalid) !important; +} + +.input-invalid:focus-within:after, .select-invalid:after { + content: attr(vmsg); + background-color: var(--textbox-border-color-invalid); + position: absolute; + transform: translateY(calc(-100% - 9px)) translateX(-50%); + text-align: center; + color: white; + font-weight: bold; + white-space: nowrap; + padding: 0 3px; + left: 50%; +} + +.input-invalid:focus-within:before, .select-invalid:before { + background-image: var(--arrow-down-mini); + background-repeat: no-repeat; + background-position: bottom; + content: ' '; + width: 29px; + height: 10px; + position: absolute; + top: -10px; + left: calc(50% - 5px); + filter: grayscale(42%); + background-size: cover; + filter: contrast(0.2); +} + + + +.separator { + min-width: 2px; + display: inline-block; + background: var(--separator-background); + box-shadow: var(--separator-box-shadow); + /* background-image: linear-gradient( to top, #ffffff, #9f9f9f); */ +} + +.button-flat > img, .check > img, .radiolist-button > img, .colorpicker-button > img, .dropdown > img { + transition: all 0.2s linear; + vertical-align: middle; +} + +.dropdown-visible > img { + -webkit-filter: var(--dropdown-visible-img-filter) +} + +.dropdown-visible .badge { + -webkit-filter: var(--dropdown-visible-badge); +} + +.range { + -webkit-appearance: none; + height: 15px; + margin-bottom: 0px; + background: var(--range-background); + z-index: 10; +} + + .range:focus { + outline: none; + } + + .range::-webkit-slider-runnable-track { + width: 100%; + height: 12.1px; + cursor: pointer; + box-shadow: var(--range-track-box-shadow); + background: var(--range-track-background); + border-radius: 0px; + border: var(--range-track-border); + } + + .range::-webkit-slider-thumb { + box-shadow: var(--range-thumb-box-shadow); + border: var(--range-thumb-border); + height: 18px; + width: 18px; + border-radius: 10px; + background: var(--range-thumb-background); + cursor: pointer; + -webkit-appearance: none; + margin-top: -3px; + } + + .range:focus::-webkit-slider-runnable-track { + background: var(--range-track-background-focus); + } + + .range::-moz-range-track { + width: 100%; + height: 12.1px; + cursor: pointer; + box-shadow: var(--range-track-box-shadow); + background: var(--range-track-background); + border-radius: 12.7px; + border: var(--range-track-border); + } + + .range::-moz-range-thumb { + box-shadow: var(--range-thumb-box-shadow); + border: var(--range-thumb-border); + height: 22px; + width: 23px; + border-radius: 28px; + background: var(--range-thumb-background); + cursor: pointer; + } + + .range::-ms-track { + width: 100%; + height: 12.1px; + cursor: pointer; + background: transparent; + border-color: transparent; + color: transparent; + } + + .range::-ms-fill-lower { + background: var(--range-track-background); + border: var(--range-track-border); + border-radius: 25.4px; + box-shadow: var(--range-track-box-shadow); + } + + .range::-ms-fill-upper { + background: var(--range-track-background); + border: var(--range-track-border); + border-radius: 25.4px; + box-shadow: var(--range-track-box-shadow); + } + + .range::-ms-thumb { + box-shadow: var(--range-thumb-box-shadow); + border: var(--range-thumb-border); + height: 10px; + width: 10px; + border-radius: 28px; + background: var(--range-thumb-background); + cursor: pointer; + } + + .range:focus::-ms-fill-lower { + background: var(--range-track-background-focus); + } + + .range:focus::-ms-fill-upper { + background: var(--range-track-background-focus); + } + + +.bar { + overflow: hidden; +} + +.bar, .datetimepicker-month, .datetimepicker-year { + display: flex; +} + +html[dir='rtl'] .bar, html[dir='rtl'] .datetimepicker-month, html[dir='rtl'] .datetimepicker-year { + flex-flow: row-reverse; +} + +.bar-slider { + width: 100%; + overflow-y: hidden; + overflow-x: scroll; + -webkit-overflow-scrolling: touch; +} + +.bar-slider-list { + list-style: none; + padding: 0; + display: inline-flex; + margin: 0; + height: 100%; +} + + +.bar-slider2 { + position: relative; + width: 100%; + overflow: visible; +} + +.bar-slider2-list { + list-style: none; + padding: 0; + display: flex; + margin: 0; + height: 100%; + position: absolute; + --left: 0; + left: var(--left); + transition: left 0.3s ease .3s; +} + + +.bar-arrow-left, .datetimepicker-previous { + min-width: 25px; + min-height: 25px; + background-color: var(--button-arrow-background-color); + background-image: var(--bar-arrow-left-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; + border: var(--button-arrow-background-border); + z-index: 11; +} + + .bar-arrow-left:hover, .datetimepicker-previous:hover { + background-image: var(--bar-arrow-left-background-image-hover); + } + +.bar-arrow-right, .datetimepicker-next { + min-width: 25px; + min-height: 25px; + background-color: var(--button-arrow-background-color); + background-image: var(--bar-arrow-right-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; + border: var(--button-arrow-background-border); + z-index: 11; +} + + .bar-arrow-right:hover, .datetimepicker-next:hover { + background-image: var(--bar-arrow-right-background-image-hover); + } + + .lazylist-more:hover, .bar-arrow-right:hover, .bar-arrow-left:hover, .datetimepicker-previous:hover, .datetimepicker-next:hover { + background-color: var(--button-arrow-background-color-hover); + } + +.bar-arrow-left-inactive { + background-image: var(--bar-arrow-left-inactive-background-image); +} + + +.bar-arrow-right-inactive { + background-image: var(--bar-arrow-right-inactive-background-image); +} + +.bar-item { + user-select: none; + background: var(--bar-item-background); + border: var(--bar-item-border); + cursor: pointer; + color: var(--bar-item-color); + font-weight: normal; + text-align: center; + padding: 2px 10px 2px 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + + .bar-item:hover { + /*background: var(--bar-item-background-hover);*/ + } + +.bar-item-checked { + border-bottom: var(--bar-item-checked-border-bottom); + padding-bottom: 0px; + box-shadow: var(--bar-item-checked-box-shadow); +} + +.multiselect { + display: flex; + flex-direction: column; +} + +.multiselect-wrap { + display: flex; +} + +.multiselect-autocomplete { + width: 100%; +} + +.multiselect-add, .select-autocomplete-add, .select-add { + background: var(--selectlist-label-background); + width: 27px; + border: var(--selectlist-arrow-border); + margin-top: 0; + border-left: 0; + background-image: var(--multiselect-add-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; +} + +html[dir='rtl'] .multiselect-add, html[dir='rtl'] .select-autocomplete-add, html[dir='rtl'] .select-add { + border-left: var(--selectlist-arrow-border); + border-right: 0; +} + +.multiselect-add:hover, .select-add:hover, .select-autocomplete-add:hover { + background-image: var(--multiselect-add-background-image-hover); +} + +.multiselect-list { + list-style: none; + padding: 0; + margin: 0; + border: var(--textbox-border); + border-top: 0; + overflow-y: auto; + overflow-x: hidden; + height: 100%; +} + + .multiselect-list li { + display: flex; + border-bottom: var(--multiselect-list-li-border-bottom); + } + +.multiselect-list-text { + padding-left: 3px; + width: 100%; +} + +.multiselect-list-remove { + margin-left: auto; + background: var(--selectlist-label-background); + width: 27px; + border-left: var(--multiselect-list-li-border-bottom); + margin-top: 0; + background-image: var(--multiselect-list-remove-background-image); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; +} + +html[dir='rtl'] .multiselect-list-remove { + border-right: var(--multiselect-list-li-border-bottom); + border-left: 0; +} + +.multiselect-list li:last-child { + border-bottom: 0; +} + +.multiselect-list-remove:hover { + background-image: var(--multiselect-list-remove-background-image-hover); +} + +.multiselect-list li:hover { + background: var(--menu-item-hover-background); + box-shadow: var(--menu-item-hover-box-shadow); +} + +.grid { + /* + width: 100%; + + height: 100%; + */ + display: grid; + margin: 0; + padding: 1px 2px; +} + +.grid-window-over { + /*border: var(--grid-window-over-border);*/ + border-style: dashed; + border-color:red; +} + +.grid-window-drag { + opacity: .8; + /*border: var(--grid-window-drag-border);*/ + border-style: dashed; + border-color:blue; +} + +.grid-window { + /*margin: 1px;*/ +} + + +.datetimepicker { + display: flex; +} + +.datetimepicker-calendar { + border-right: var(--datetimepicker-calendar-border-right); + display: flex; + flex-flow: column; + flex: 1; +} + +.datetimepicker-calendar-content { + display: flex; + flex: 1; +} + +.datetimepicker-clock { + overflow-y: scroll; + margin-bottom: 0px; + background: var(--datetimepicker-clock-background); +} + +.datetimepicker-different-month { + color: var(--datetimepicker-different-month-color); +} + +.datetimepicker-calendar-content > table { + width: 100%; + border-spacing: 0; +} + +.datetimepicker-tools { + display: flex; + background-color: var(--datetimepicker-clock-background); +} + +.datetimepicker-day, .datetimepicker-time { + cursor: pointer; + text-align: center; + padding: 3px; +} + + +.datetimepicker-day-selected { + background-color: var(--datetimepicker-day-selected-background); + color: var(--datetimepicker-day-selected-color); +} + +.datetimepicker-day-today { + border-bottom: 3px solid #f65314; + padding-bottom: 0; +} + +.datetimepicker-name { + flex: 1; + text-align: center; + align-self: center; + padding: 0 8px; +} + +.datetimepicker-month { + flex-grow: 1; + /*width: 60%;*/ +} + +.datetimepicker-year { + /*width: 40%;*/ +} + +.datetimepicker-time-selected { + background: var(--datetimepicker-day-selected-background); + color: var(--datetimepicker-day-selected-color); +} + +/* customize scrollbar css */ + +.bar-slider::-webkit-scrollbar { + width: 0px; + height: 0px; + background: rgba(235, 240, 242, 0.69); +} + +.bar-slider::-webkit-scrollbar-thumb { + background: 0; +} + +.toolbar { + background-image: linear-gradient(var(--default-background-color) 0%, var(--default-background-color-light) 100%); + color: var(--default-text-color); +} + +.datetimepicker-clock::-webkit-scrollbar, +.bar-slider-scrolling::-webkit-scrollbar, +.select-menu::-webkit-scrollbar, +.select-autocomplete-menu::-webkit-scrollbar, +.multiselect-autocomplete-menu::-webkit-scrollbar, +.listview::-webkit-scrollbar, +.table::-webkit-scrollbar, +.tabs-content::-webkit-scrollbar { + width: 8px; + background: var(--scrollbar-background); +} + + .datetimepicker-clock::-webkit-scrollbar:horizontal, + .bar-slider-scrolling::-webkit-scrollbar:horizontal, + .select-menu::-webkit-scrollbar:horizontal, + .select-autocomplete-menu::-webkit-scrollbar:horizontal, + .multiselect-autocomplete-menu::-webkit-scrollbar:horizontal, + .listview::-webkit-scrollbar:horizontal, + .table::-webkit-scrollbar:horizontal, + .tabs-content::-webkit-scrollbar:horizontal { + height: 8px; + } + +.datetimepicker-clock::-webkit-scrollbar-track, +.bar-slider-scrolling::-webkit-scrollbar-track, +.select-menu::-webkit-scrollbar-track, +.select-autocomplete-menu::-webkit-scrollbar-track, +.multiselect-autocomplete-menu::-webkit-scrollbar-track, +.listview::-webkit-scrollbar-track, +.table::-webkit-scrollbar-track, +.tabs-content::-webkit-scrollbar-track { + border: var(--scrollbar-track-border); + border-radius: 0px; + box-shadow: var(--scrollbar-track-box-shadow); +} + +.datetimepicker-clock::-webkit-scrollbar-thumb, +.bar-slider-scrolling::-webkit-scrollbar-thumb, +.select-menu::-webkit-scrollbar-thumb, +.select-autocomplete-menu::-webkit-scrollbar-thumb, +.multiselect-autocomplete-menu::-webkit-scrollbar-thumb, +.listview::-webkit-scrollbar-thumb, +.table::-webkit-scrollbar-thumb, +.tabs-content::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb-background); + border: var(--scrollbar-thumb-border); + border-radius: 0px; +} + + .datetimepicker-clock::-webkit-scrollbar-thumb:hover, + .bar-slider-scrolling::-webkit-scrollbar-thumb:hover, + .select-menu::-webkit-scrollbar-thumb:hover, + .select-autocomplete-menu::-webkit-scrollbar-thumb:hover, + .multiselect-autocomplete-menu::-webkit-scrollbar-thumb:hover, + .listview::-webkit-scrollbar-thumb:hover, + .table::-webkit-scrollbar-thumb:hover, + .tabs-content::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-background-hover); + border: var(--scrollbar-thumb-border-hover); + } + + .datetimepicker-clock::-webkit-scrollbar-thumb:active, + .bar-slider-scrolling::-webkit-scrollbar-thumb:active, + .select-menu::-webkit-scrollbar-thumb:active, + .select-autocomplete-menu::-webkit-scrollbar-thumb:active, + .multiselect-autocomplete-menu::-webkit-scrollbar-thumb:active, + .listview::-webkit-scrollbar-thumb:active, + .table::-webkit-scrollbar-thumb:active, + .tabs-content::-webkit-scrollbar-thumb:active { + background-color: var(--scrollbar-thumb-background-active); + border: var(--scrollbar-thumb-border-active); + } + + + +@media only screen and (min-width: 500px) { + .check-hover, .radiolist-button-hover, .dropdown:hover, .button-flat:hover { + border-color: var(--button-flat-border-hover); + background: var(--button-flat-background-hover); + color: var(--button-flat-color-hover); + } + + .table-row:hover { + background-color: var(--table-row-background-hover); + } + + .table-row-selected:hover { + /*background-color: rgb(196, 196, 199);*/ + background: var(--table-row-selected-background); + box-shadow: var(--table-row-selected-box-shadow); + } + + .menu > i-link:hover, .select-autocomplete-menu i-link:hover, .searchlist-menu i-link:hover, .select-menu i-link:hover, .multiselect-autocomplete-menu i-link:hover, .lazylist-menu i-link:hover { + background: var(--menu-item-hover-background); + box-shadow: var(--menu-item-hover-box-shadow); + color: var(--menu-item-hover-color); + } + + .tabs-button-hover { + border: var(--tabs-button-hover-border); + border-bottom-color: var(--tabs-content-background-color); + } + + .datetimepicker-day:hover, .datetimepicker-time:hover { + background-color: var(--datetimepicker-day-background-hover); + } + + .toolbar::-webkit-scrollbar { + width: 8px; + background: var(--scrollbar-background); + } + + .toolbar::-webkit-scrollbar:horizontal { + height: 8px; + } + + .toolbar::-webkit-scrollbar-track { + border: var(--scrollbar-track-border); + border-radius: 0px; + box-shadow: var(--scrollbar-track-box-shadow); + } + + .toolbar::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb-background); + border: var(--scrollbar-thumb-border); + border-radius: 0px; + } + + .toolbar::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-background-hover); + border: var(--scrollbar-thumb-border-hover); + } + + .toolbar::-webkit-scrollbar-thumb:active { + background-color: var(--scrollbar-thumb-background-active); + border: var(--scrollbar-thumb-border-active); + } +} + + + +.router, i-router +{ + position: relative; +} + +.route { + width: 100%; + position: absolute; + opacity: 1; + transition: all .1s ease-out; + overflow: auto; + height: calc(100% - 20px); + left: 10px; + top: 10px; + width: calc(100% - 20px); +} + +.route:not([selected]) { + /* display: none !important; */ + opacity: 0 !important; + visibility: hidden; + /* overflow: auto; */ + transform: scale(0.7); +} + + +.search-button:focus, .search-button:valid { + width: 200px; + border: 1px solid #fff; + outline: none; + cursor: default; + background-position-x: 2px; + background-color: rgba(208, 208, 208, 0.5); + padding: 0 10px 0 30px; + color: #232323; + border-radius: 10px; + border: none; +} + +.search-button { + width: 40px; + height: 30px; + background-image: var(--search); + background-repeat: no-repeat; + background-position: center; + background-size: 25px 25px; + transition: all 0.4s ease-in-out; + background-color: transparent; + border: none; + cursor: pointer; + font-size: 16px; + color: transparent; + margin-right: 10px; +} + +.ripple { + cursor: pointer; + color: white; + padding: 10px; + outline: none; + position: relative; + overflow: hidden; +} + + +.link +{ + position: relative; + overflow: hidden; + display: block; +} + +.button:after, .ripple:after, .link:after{ + content: ' '; + position: absolute; + left: var(--x); + top: var(--y); + transform: translateX(-50%) translateY(-50%); + background-color: #b5b5b5; + border-radius: 100%; + width: 0; + height: 0; + opacity: 1; + pointer-events: none; +} + +.button:after +{ + background-color: #b2d7f3a8; +} + +.link:after +{ + background-color: #d2d2d2cc; +} + + +.button-clicked:after, .ripple-clicked:after, .link-clicked:after +{ + transition: width .5s ease-out, height .5s ease-out, opacity .5s ease-out; + opacity: 0; + width: calc(var(--w) * 2);; + height: calc(var(--w) * 2); +} + +.button-clicked:active:after, .ripple-clicked:active:after, .link-clicked:active:after +{ + opacity: 0.5; +} + + + +.router::after, .target::after +{ + opacity: 0; + transition: all 1s; + content: ' '; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + visibility: hidden; + +} + +.router-loading::after, .target-loading::after +{ + transition: all 1s 1s; + opacity: 1; + visibility: visible; + background: #5454548a; + box-shadow: inset 0px 0px 40px 38px #3e3e3e9c; +} + + +.input-eye +{ + width: 40px; + background-color: #e4e4e4; + position: absolute; + left: 5px; + top: 50%; + height: 26px; + transform: translateY(-50%); + border-radius: 7px; + cursor: pointer; + background-image: var(--eye-dark); + background-size: 80%; + background-repeat: no-repeat; + background-position: center; +} + +.input-eye:hover +{ + background-image: var(--eye-active) ; +} + +.input-eye-active +{ + background-image: var(--eye-light) !important;; + background-color:#4ea3df; + +} + +.navbar { + display: flex; + flex-direction: column; + height: 100%; +} + +.navbar-search +{ + margin: 6px; + background-image: var(--search); + background-repeat: no-repeat; + background-size: 25px; + background-position: 2px 50%; + padding-left: 30px; +} + +.navbar-container +{ + overflow: auto; + visibility: hidden; +} + +.navbar-container > i-link > span > span +{ + color: black; + background-color: #fff3d4; + font-weight: bold; +} + +.navbar-container::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +.navbar-container::-webkit-scrollbar-button:hover { + background-color: black !important; +} + +.navbar-container::-webkit-scrollbar-thumb { + min-width: 20px; + min-height: 20px; + background-color: #71ad48; + border: 1px solid #cccccc; +} + +.navbar-container::-webkit-scrollbar-track { + background-color: #b5b5b5; +} + +.navbar-container::-webkit-scrollbar-thumb:hover { + background-color: #8bc364; +} + +.navbar-container::-webkit-scrollbar-thumb:active { + /*border: 1px dotted #b5b5b5;*/ +} + +.navbar-container::-webkit-scrollbar-track:hover { + /*background-color: gray;*/ +} + +.navbar-container:hover, .navbar-container > * { + visibility: visible; +} + +.navbar-container i-link +{ + transition: height ease 0.2s; +} + +.navbar-container i-link[data-level = '1'] { + padding-right: 20px; + font-size: 14px; +} + +.navbar-container i-link[data-level = '0'] { + background-color: #e5e5e5; + /*border: 1px solid #cacaca;*/ +} + +.navbar-container i-link[data-level = '2'] { + background-color: #d4d4d4; + padding-right: 40px; + font-size: 14px; + color: #454545; + font-weight: bold; +} + +.navbar-container i-link[hidden] { + /* display: none; */ + padding-top: 0; + padding-bottom: 0; + height: 0; + transition: height ease 0.2s; +} + + +.navbar-container i-link[selected] +{ + font-weight: bold; + background:#4ebeec; + color: white; +} + +.navbar-container i-check { + width: 42px; + background-image: var(--arrow-left); + background-position: 0px 48%; + background-repeat: no-repeat; + border-right: 4px solid #c3c3c3; + display: flex; + align-self: stretch; + background-color: #d6d6d6; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; +} + +.navbar-container i-check[checked='checked'] { + background-image: var(--arrow-down-active); +} diff --git a/css/iui.default.css b/css/iui.default.css new file mode 100644 index 0000000..e44ecc6 --- /dev/null +++ b/css/iui.default.css @@ -0,0 +1,1826 @@ + +#panelObjects +{ + position: absolute; + width: 15em; + height: 100%; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 0; +} + +.button{ + transition: color .1s ease; + cursor: pointer; + font-weight: normal; + text-align: center; + text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + border-radius: 1px; + color: white; + box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + + background: #3b8de2; + border: 1px solid #215a96; + + display:inline-block; + padding: 5px 10px; + background-image: linear-gradient(to bottom, rgb(84, 184, 255), #33aaff); +} + + +.button:hover{ + background: #46D82D; +} + +.button:disabled +{ + background-image: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + color: #7c7c7c; + border-color: #b7b7b7; + cursor: default; +} + +.button button-big{ + font-size: 18px; + padding: 15px 20px; + min-width: 100px; +} + +.button-close{ + color: #aaa; + font-size: 30px; + text-decoration: none; + position: absolute; right: 5px; top: 0; +} + + +.button-close:hover{ + color: #000; +} + + +.button-flat:hover +{ + border: 1px red solid; +} +.button-flat:disabled +{ + opacity: 0.65; + cursor: not-allowed; +} + +.button-flat img +{ + vertical-align: middle; +} + +.button-flat-mini { + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:1px solid #dcdcdc; + + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-size: 8px; + font-weight: normal; + text-align: center; + text-shadow: 0 2px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + + padding: 5px 10px; + + display:inline-block; + + -webkit-font-smoothing: antialiased; +} + +.button-flat-mini:hover +{ + border: 1px red solid; +} +.button-flat-mini:disabled +{ + opacity: 0.65; + cursor: not-allowed; +} + +.modal-dialog{ + z-index: 10; + position: absolute; + background: #fefefe; + border: #333 solid 1px; + /*border-radius: 5px; + .translate(0, -500%); + .transition-transform(~"0.3s ease-out");*/ +} + + +.window, .dialog +{ + flex-direction: column; + background: white; + margin: 0; + border: 1px solid #BBBABA; + z-index: 1000; + left: 30%; + top: 30%; + display: flex; +} + +.dialog +{ + display: none; + position: absolute; + box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); +} + +.dialog-visible +{ + display: flex; +} + +.window-active, .dialog-active +{ + z-index: 1001; +} + +.window-active > .window-header, .dialog-active > .dialog-header +{ + background: rgb(185, 223, 255); +} + +.dialog-modal-background-visible ~ .wrap +{ + filter: blur(2px); +} + +.dialog-modal +{ + z-index: 1002; +} + +.dialog-modal-background +{ + display: none; + position: fixed; + width: 100%; + height: 100%; + background-color:rgba(0, 0, 0, 0.64); + z-index: 1001; + top:0; + } + +.dialog-modal-background-visible +{ + display: flex; +} + +html[dir='rtl'] .window-tools, html[dir='rtl'] .dialog-tools +{ + right: auto; + left: 5px; +} + +.window-tools, .dialog-tools +{ + position: absolute; + top: 5px; + right: 5px; +} + +.window-icon, .dialog-icon +{ + float: left; + height: 16px; + width: 16px; + margin-left: 2px; + margin-top: 3px; + margin-right: 3px; + display: none; +} + + +.window-title, .dialog-title +{ + margin-left: 10px; + margin-right: 10px; + color: #444; +} + +.window-tools-close, .dialog-tools-close +{ + float: left; + height: 16px; + line-height: 16px; + padding: 0 5px; + background: #e23442; + border: 1px solid #911f28; + border-radius: 5px; + background-image: linear-gradient(to bottom, #e8616c, #dd202f); +} + +.window-tools-close:hover, .dialog-tools-close:hover +{ + background-color: #ff7d88; +} + +.window-tools-max, .dialog-tools-max +{ + float: left; + width: 1.4em; + line-height: 1.4em; + text-align: center; + margin-left: .15em; + cursor: pointer; + background: #aaa; + border-radius: .2em; + font-family: Verdana; + opacity: .6; +} + +.window-body +{ + min-height: 20px; + min-width: 20px; + padding: 0px; + height: 100%; +} + +.dialog-body +{ + min-width: 100px; + min-height: 100px; + width: calc(100% - 10px ); + padding: 5px; + position: relative; +} + +.dialog-loading +{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 0; + background-color: rgb(185, 223, 255); + visibility: hidden; + text-align: center; + opacity: 0; + transition: all .3s ease .15s; +} + +.dialog-loading-content +{ + position: absolute; + top: calc(50% - 30px); + left: calc(50% - 30px); + border: 10px solid rgb(255, 255, 255); + border-radius: 50%; + border-top: 10px solid #ffe3e3; + border-right: 10px solid #ffb4b4; + border-bottom: 10px solid #ff4d4d; + width: 40px; + height: 40px; + animation: spin 1.2s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.dialog-loading-visible +{ + opacity: 1; + visibility: visible; + height: 100%; + transition: all .3s ease .15s; +} + +body +{ + height: 100%; + margin: 0; +} + +.window-header, .dialog-header +{ + position: relative; + width: 100%; + line-height: 30px; + background: #e6e6e6; + border-radius: 3px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + cursor: move; + user-select: none; + min-height: 30px; +} + +.window-header h2, .dialog-header h2 +{ + margin: 0px; + font-size: 20px; +} + + +html[dir='rtl'] .window-footer > button:first-of-type, html[dir='rtl'] .dialog-footer > button:first-of-type +{ + margin-right: auto; + margin-left: 0; +} + +.window-footer, .dialog-footer +{ + border-top: #eee solid 1px; + background-image: linear-gradient(to bottom, white, #e1e2eb); + padding: 5px; + display: flex; +} + +.dialog-footer +{ + min-height: 30px; +} + +.window-footer > button:first-of-type, .dialog-footer > button:first-of-type +{ + margin-left: auto; +} + +.window-footer > *, .dialog-footer > * +{ + margin: 0 3px; +} + +/* End of Dialog */ + +/* Begin of Panel */ + +.panel +{ + margin: 0; + padding: 0; +/* border-radius: .35em; */ + border: 1px solid #BBBABA; +} + +html[dir='rtl'] .panel-tools +{ + right: auto; + left: 3px; +} + +.panel-tools +{ + position: absolute; + top: 3px; + right: 3px; +} + +.panel-icon +{ + float: left; + height: 16px; + width: 16px; + margin-left: 5px; + margin-top: 3px; + margin-right: 3px; + display: none; +} + + +.panel-title +{ + margin-left: 10px; + margin-right: 10px; + color: #444; +} + +.panel-tools-close +{ + top: 50%; + right: -1em; + position: absolute; + height: 16px; + line-height: 15px; + padding: 0 5px; + background: #e23442; + border: 1px solid #911f28; + border-radius: 5px; + background-image: linear-gradient(to bottom, #e8616c, #dd202f); +} + +.panel-tools-close:hover +{ + background: #CFFF84; +} + +.panel-tools-closed +{ + position: absolute; + height: 16px; + line-height: 15px; + padding: 0 5px; + background: #e23442; + border: 1px solid #911f28; + border-radius: 5px; + background-image: linear-gradient(to bottom, #e8616c, #dd202f); + margin-left: 8px; +} + +.panel-tools-max +{ + float: left; + width: 16px; + line-height: 16px; + text-align: center; + margin-left: 2px; + cursor: pointer; + background: #aaa; + border-radius: 2px; + font-family: Verdana; + opacity: .6; +} + +.panel-body +{ + min-width: 100px; + min-height: 100px; + margin: 0; + /*padding:.2em 1em .6em 1em;*/ + height: 100%; + overflow: auto; + position: relative; +} + +.panel-header +{ + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + width: 100%; + line-height: 10px; + background: #e6e6e6; + border-radius: 3px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} + +.panel-header h2 +{ + margin: 0px; + font-size: 20px; +} +html[dir='rtl'] .panel-footer +{ + text-align: left; +} + +.panel-footer +{ + padding: 5px 10px; + border-top: #eee solid 1px; + text-align: right; + position: absolute; + bottom: 0; + left: 0; + width: calc(100% - 15px); + background-image: linear-gradient(to bottom, white, #e1e2eb); +} + +/* End of Panel */ + +.table-body +{ + height: calc(100% - 25px); + /*width: 100%;*/ + overflow-y: auto; + overflow-x: auto; + +} + +.table-body > table +{ + border-spacing: 0; + border-collapse: collapse; + width:0; + table-layout: fixed; +} + +.table-body > table > thead td +{ + line-height: 0em;; + padding: 0; +} + +.table-body > table > tbody > tr > td { + border: 1px solid #c9c9c9; + border-left: 0; +} + +.table-body > table > tbody > tr:first-child > td { + border-top: 0; +} +.table-body > table > tbody > tr:last-child > td { + border-bottom: 0; +} + +.table-body > table > tbody > tr > td:last-child { + border-right: 0; +} + + + +.table-header +{ + background-image: linear-gradient(to bottom, white, #e1e2eb); + position: relative; + overflow: hidden; + height: 25px; +} + +.table-header > table +{ + border-spacing: 0; + border-collapse: collapse; + table-layout: fixed; + position: absolute; +} + +.table-header td +{ + padding:0; + border: 0; +} + +.table-header-input +{ + width: calc(100% - 20px); +} + +.table-header-text +{ + padding: 2px 5px 2px 5px; + cursor: pointer; + width: calc(100% ); + align-items: center; + justify-content: center; + display: flex; +} + +.table-header-text[data-dir='normal'] +{ + background: none /*url(img/"sort_16.png") no-repeat right;*/ +} +.table-header-text[data-dir='up'] +{ + background: url(img/"sort_up_16.png") no-repeat right; +} + +.table-header-text[data-dir='down'] +{ + background: url(img/"sort_down_16.png") no-repeat right; +} + +.table-header-select +{ + padding: 2px 5px 2px 5px; + cursor: pointer; + width: calc(100% - 18px); +} + +.table-header-select[data-dir='normal'] +{ + background: url(img/"sort_16.png") no-repeat right; +} +.table-header-select[data-dir='up'] +{ + background: url(img/"sort_up_16.png") no-repeat right; +} + +.table-header-select[data-dir='down'] +{ + background: url(img/"sort_down_16.png") no-repeat right; +} +.table-header-sort +{ + float: right; + width: 10px; + height: 12px; + background: url(img/"sort_16.png") no-repeat; +} + + +.table-filter-menu +{ + position: absolute; + border:2px solid #ccc; + overflow-y: auto; + display: none; + background-color: #f9f9f9; + min-width: 10px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + padding: 5px; + z-index: 1; + /* max-height: 100px; */ + top:16px; + right: 0; +} + + + +.table +{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + overflow: hidden; + + /*border: 1px solid #A2A2A2; padding-top: 1.8em; +*/ + position: relative; + + +} + + +.table-tree +{ + cursor: pointer; + width: 16px; + height: 16px; + display: inline-block; + vertical-align: middle; + background-image: url(img/"plus.png"); + padding: 3px; + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); +} + + +.table-tree:hover +{ + background-image: url(img/"plus-hover.png"); +} + +.table-tree[data-expand='1'] +{ + background-image: url(img/"minus.png"); +} + + +.table-tree[data-expand='1']:hover +{ + background-image: url(img/"minus-hover.png"); +} + + +.table-row +{ + +} + +.table-row[data-level='0'] +{ + +} + +.table-row[data-level='1'] +{ + /*background-image: linear-gradient(to top, rgba(153, 205, 254, 0.34), rgba(255, 255, 255, 0.42));*/ + background-color: rgba(121, 121, 121, 0.15); +} + +.table-row[data-level='1'] td:first-child +{ + padding-left: 32px; +} + +.table-row[data-level='1'] .table-tree +{ + margin-left: -22px; +} + +.table-row[data-level='2'] +{ + background-color: rgba(121, 121, 121, 0.3);; +} + +.table-row[data-level='2'] td:first-child +{ + padding-left: 46px; +} + +.table-row[data-level='2'] .table-tree +{ + margin-left: -22px; +} + +.table-row[data-level='3'] +{ + background-color: darkkhaki; +} + +.table-row[data-level='3'] td:first-child +{ + padding-left: 46px; +} + +.table-row[data-level='3'] .table-tree +{ + margin-left: -22px; +} + + + + +html[dir='rtl'] .table-row[data-level='1'] td:first-child +{ + padding-right: 32px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='1'] .table-tree +{ + margin-right: -22px; + margin-left: 0; +} + + +html[dir='rtl'] .table-row[data-level='2'] td:first-child +{ + padding-right: 46px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='2'] .table-tree +{ + margin-right: -22px; + margin-left: 0; +} + + + +html[dir='rtl'] .table-row[data-level='3'] td:first-child +{ + padding-right: 46px; + padding-left: 0; +} + +html[dir='rtl'] .table-row[data-level='3'] .table-tree +{ + margin-right: -22px; + margin-left : 0; +} + +.table-row:hover +{ + background-color: #DEF; +} + +.table-row-selected, .table-row-selected:hover, .table-row-selected[data-level='1'], .table-row-selected[data-level='2'] +{ + /*background-color: rgb(196, 196, 199);*/ + background: rgb(185, 223, 255); + box-shadow: #cecbcb 0 1px 10px 0 inset; +} + +.table-row-hidden +{ + display: none; +} + + + .table-header-menu +{ + position: relative; + background: red; + width: 10px; + height: 15px; + float: right; + background: url(img/"filter_16.png") no-repeat; + background-position: 0em; + cursor: pointer; +} + + +.table-header-wrap +{ + /* top: -5px; */ + z-index: 20; + /* position: absolute; */ + width: 100%; + border: 1px solid #c9c9c9; + height: 23px; + display: flex; + border-left: 0; + +} + +html[dir="rtl"] .table-header-wrap +{ + border-left: 1px solid #c9c9c9; + border-right: 0; +} + +/* +.table-body > table > thead > tr > td:first-child > .table-header-wrap +{ + border-left: 0; +} +*/ + + +.table-resizer +{ + min-width: 5px; + height: 100%; + cursor: col-resize; + background: #dde2e3; + z-index: 50; + /*border-right: 3px blue solid;*/ +} + + + +/* Checkbutton + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:1px solid #dcdcdc; + + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-size: 12px; + font-weight: normal; + text-align: center; + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + + padding: 5px 10px; + + display:inline-block; + + + -webkit-font-smoothing: antialiased; + */ + +.button-flat, .checkbutton, .radiolist-button, .colorpicker-button, .dropdown +{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, rgb(246, 246, 246) 100%); + /* background-color: #ffffff; */ + border: 1px solid rgba(220, 220, 220, 0.51); + cursor: pointer; + color: #666666; + text-decoration: none; + font-weight: normal; + text-align: center; + /* box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); */ + padding: 3px 4px; + display: inline-block; + -webkit-font-smoothing: antialiased; + position: relative; +} + +.colorpicker-radiolist +{ + flex-wrap: wrap; +} + +.colorpicker-button +{ + padding: 0; + width: 15px; + height: 15px; + background-image: none; + margin: 0 1px; +} + +.colorpicker-button-checked +{ + border: 3px rgb(255, 40, 40) solid; + box-shadow: 0 .0 1em 1px #747373; + height: 10px; + width: 10px; +} +.colorpicker-button-hover +{ + border-color: red; +} +.checkbutton-hover, .radiolist-button-hover, .dropdown:hover +{ + border: 1px red solid; +} + +.checkbutton-checked, .radiolist-button-checked +{ +background: rgb(185, 223, 255); + box-shadow: #cecbcb 0 1px 10px 0 inset; + /* + background-image: linear-gradient(to bottom, #67a7e9, #2580df); + color: white;*/ +} + + +/* Radio List */ + +.radiolist +{ + display: flex; +} + + /* Tabs */ +.tab-content +{ + padding: 5px; + border: 1px solid #dcdcdc; + display: none; +} + +.tab-content-active +{ + display: block; +} + +.tabs +{ + /*overflow: hidden;*/ +} + +.tab +{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:1px solid #dcdcdc; + display:inline-block; + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-weight: normal; + text-align: center; + border-bottom:0; + border-radius: 5px 5px 0 0; + padding: 5px 15px; +} + +.tab-hover +{ + border: 1px red solid; + border-bottom:0; +} + +.tab-checked +{ + box-shadow: 0 2px rgb(255, 255, 255); + background-image: linear-gradient(to bottom, rgba(173, 213, 255, 0.86) 70%, #ffffff); + color: #000000; +} + + /* Drop Down + + .dropdown +{ + display: flex; + } + +.dropdown-button:hover +{ + border: 0.1em red solid; +} + +.dropdown-button-visible img +{ + -webkit-filter: drop-shadow(0px 0px 8px #3b8de2); +} + +.dropdown-button { + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + + background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + background-color:#ffffff; + border:.1em solid #dcdcdc; + + cursor:pointer; + color:#666666; + text-decoration:none; + + + font-size: .8em; + font-weight: normal; + text-align: center; + text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0.1em 0.1em rgba(255, 255, 255, 0.1), 0 0.1em rgba(0, 0, 0, 0.12); + + padding: 0.6em 1.5em; + + display:inline-block; + + + -webkit-font-smoothing: antialiased; +} + +.dropdown .dropdown-menu { + background: rgba(255, 255, 255, 0.73); + border: solid .1em #a1a1a1; + top: 100%; + display: block; + left: -25px; + margin-top: .6em; + opacity: 0; + padding: 0.5em; + pointer-events: none; + position: absolute; + transform: translateY(10px); + transition: all .25s ease-out; + box-shadow: .1em .1em .2em rgba(0, 0, 0, 0.28); + z-index: 110; +} + +.dropdown .dropdown-menu-visible { + opacity: 1; + pointer-events: auto; + transform: translateY(0px); +} + + +.dropdown .dropdown-menu:after { + border-left: solid transparent .6em; + border-right: solid transparent .6em; + border-bottom: solid #3b8de2 .6em; + top: -.55em; + content: " "; + height: 0; + left: 50%; + position: absolute; + width: 0; +} + */ + + .dropdown-arrow + { + height: 8px; + width: 12px; + background-image: url(img/"arrow.png"); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + position: absolute; + visibility: hidden; + opacity: 0; + transition: all .3s ease .15s; + z-index: 1000; + } + + .dropdown-arrow-visible + { + visibility: visible; + opacity: 1; + transition: all .1s ease .15s; + } + +.listview +{ + overflow-y: auto; + overflow-x: hidden; + padding: 0; +} + +.listview ul { + list-style-type: none; + width: 100%; + padding: 0; + margin: 0; +} + +.listview li { + padding: 5px; + overflow: auto; +} + +.listview li:hover { + background: #eee; + cursor: pointer; +} + +.listview li img { + float: left; + margin: 0 12px 0 0; +} + +/* Start of Menu */ + +.menu, .tooltip { + display: none; + z-index: 1002; + position: absolute; + overflow: hidden; + border: 1px solid #CCC; + white-space: nowrap; + /* font-family: sans-serif; */ + background: #FFF; + color: #333; + /* border-radius: 5px; */ + margin: 0; + list-style: none; + padding: 2px; + line-height: 15px; +} + +.menu-visible, .tooltip-visible { + display: block; +} + +.menu li { + padding: 5px 1px; + cursor: pointer; +} + +.menu li:hover, .autocomplete-menu li:hover,.searchlist-menu li:hover, .selectlist-menu li:hover, .multiselect-autocomplete-menu li:hover +{ + background: rgb(185, 223, 255); + box-shadow: #cecbcb 0 1px 1px 0 ; +} + +/* Start of TextBox */ + +.textbox input[type="text"] { + padding: 10px; + border: solid 1px #dcdcdc; + transition: box-shadow 0.3s, border 0.3s; +} +.textbox input[type="text"]:focus, +.textbox input[type="text"].focus { + border: solid 1px #707070; + box-shadow: 0 0 5px 1px #969696; +} + +/* Start of Resizer */ + +.resizer-horizontal +{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + width: 5px; + cursor: col-resize; + background: #dde2e3; + /*border-right: 3px blue solid;*/ + + } + +.panel-horizontal +{ + display: flex; + width: 100%; +} + +.panel-horizontal > .panel +{ + display: block; +} + +.panel-vertical +{ + height: 100%; +} + +.panel-vertical > .panel +{ + display: block; +} + +.resizer-vertical +{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + width: 100%; + height: 5px; + cursor: row-resize; + background: #dde2e3; + /*border-top: 3px blue solid;*/ + + display: block; +} + + +/* Auto Complete */ + +.autocomplete, .selectlist, .multiselect-autocomplete +{ + display:flex; + position: relative; +} + +.autocomplete-wrap, .selectlist-wrap, .dropdown-wrap, .multiselect-autocomplete-wrap +{ + position: absolute; + top: 0px; + width: 100%; +} + +.autocomplete-arrow:hover, .searchlist-arrow:hover, .selectlist-arrow:hover, .multiselect-autocomplete-arrow:hover +{ + background-image: url(img/arrow-down-hover.png); + cursor: pointer; +} + +html[dir='rtl'] .selectlist-label, html[dir='rtl'] .autocomplete-textbox, html[dir='rtl'] .multiselect-autocomplete-textbox +{ + border-right: 2px solid #dadada; + border-left: 0; +} + +.autocomplete-textbox, .searchlist-textbox, .selectlist-label, .multiselect-autocomplete-textbox +{ + background-color: #fff; + width: 100%; + border: 2px solid #dadada; + padding: 2px; + border-right: 0; + font-size: 14px; + line-height: 150%; + user-select: none; + } + +.autocomplete-textbox:focus, .searchlist-textbox:focus, .selectlist-label:focus, .multiselect-autocomplete-textbox:focus +{ + outline: none; + border-color: #9ecaed; + box-shadow: 0 0 10px #9ecaed; +} + +.autocomplete-textbox:focus + .autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .selectlist:focus + .selectlist-arrow, .multiselect-autocomplete-textbox:focus + .multiselect-autocomplete-arrow, .multiselect-autocomplete-textbox:focus ~ .multiselect-add +{ + outline: none; + border-color: #9ecaed; + box-shadow: 0 0 10px #9ecaed; +} + +.autocomplete-header, .selectlist-header, .multiselect-autocomplete-header, .searchlist-header +{ + width: 100%; + display: flex; +} + +.autocomplete-arrow, .selectlist-arrow, .multiselect-autocomplete-arrow +{ + background-color: #fff; + width: 27px; + border: 2px solid #dadada; + margin-top: 0; + background-image: url(img/arrow-down.png); + + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); +} + +.searchlist-arrow +{ + display: none; +} + +.searchlist-textbox +{ + border-right: 2px solid #dadada; +} + +.searchlist-menu +{ + border: 1px solid #CCC; + /*white-space: nowrap; + font-family: sans-serif; */ + background: rgba(255, 255, 255, 0.44); + color: #333; + margin: 0; + padding: 1px; + height:100%; + + overflow-y: auto; + overflow-x: hidden; + list-style: none; + +} + +.searchlist-wrap +{ + height:100%; +} + +.searchlist +{ +} + +.autocomplete-menu, .selectlist-menu, .dropdown-menu, .multiselect-autocomplete-menu + { + visibility: hidden; + z-index: 1002; + position: absolute; + border: 1px solid #CCC; + /*white-space: nowrap; + font-family: sans-serif; */ + background: #FFF; + color: #333; + margin: 0; + padding: 1px; + opacity: 0; + transition: all .3s ease .15s; +} + +.dropdown-menu, .menu, .tooltip +{ + box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + cursor: default; + text-align: start; +} + +.autocomplete-menu, .selectlist-menu, .multiselect-autocomplete-menu +{ + max-height: 16em; + overflow-y: auto; + overflow-x: hidden; + max-height: 16em; + list-style: none; + left: 0px; +} + +html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .selectlist-menu, html[dir='rtl'] .multiselect-autocomplete-menu +{ + left: auto; + right: 0px; +} + +/* mozilla is a bit special */ +_:-moz-tree-row(hover), .selectlist-menu, autocomplete-menu +{ + left: auto; + right: 0px; +} + +_:-moz-tree-row(hover), html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .selectlist-menu, html[dir='rtl'] .multiselect-autocomplete-menu +{ + right: auto; + left: 0px; +} + +.autocomplete-menu-visible, .selectlist-menu-visible, .dropdown-menu-visible, .multiselect-autocomplete-menu-visible +{ + visibility: visible; + opacity: 1; + transition: all .1s ease .15s; +} + +.autocomplete-menu li, .searchlist-menu li, .selectlist-menu li, .multiselect-autocomplete-menu li +{ + padding: 1px 2px; + cursor: pointer; + display: flex; + align-items: center; +} + + +/* select list */ +.selectlist +{ + cursor: pointer; +} + +/* TextBox */ + +.textbox, .select +{ + border: 2px solid #dadada; + padding: 2px; +} + +.textbox:focus, .select:focus{ + outline: none; + border-color: #9ecaed; + box-shadow: 0 0 10px #9ecaed; +} + +.separator +{ +min-width: 5px; + display: inline-block; + background: rgba(82, 82, 82, 0.38); + box-shadow: inset 0 0 15px #ffffff; + /* background-image: linear-gradient( to top, #ffffff, #9f9f9f); */} + +.button-flat > img, .checkbutton > img, .radiolist-button > img, .colorpicker-button > img, .dropdown > img +{ + -webkit-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; + vertical-align: middle; +} + +.dropdown-visible > img +{ + -webkit-filter: drop-shadow(0px 0px 8px #3b8de2); +} + + .dropdown-visible .badge +{ + -webkit-filter: drop-shadow(1px 1px 5px #3b8de2); +} + + +.range { + -webkit-appearance: none; + width: 100%; + height: 25px; + margin-bottom: 0px; + width: calc(100% - 5px); + background-color: rgba(0,0,0,0); +} +.range:focus { + outline: none; +} +.range::-webkit-slider-runnable-track { + width: 100%; + height: 12.1px; + cursor: pointer; + box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + background: rgba(192, 192, 192, 0.75); + border-radius: 12.7px; + border: 0px solid rgba(26, 93, 157, 0.35); +} +.range::-webkit-slider-thumb { + box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78); + border: 4.4px solid rgba(115, 163, 255, 0.51); + height: 22px; + width: 23px; + border-radius: 28px; + background: rgba(101, 196, 255, 0.94); + cursor: pointer; + -webkit-appearance: none; + margin-top: -4.95px; +} +.range:focus::-webkit-slider-runnable-track { + background: rgba(210, 210, 210, 0.75); +} +.range::-moz-range-track { + width: 100%; + height: 12.1px; + cursor: pointer; + box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + background: rgba(192, 192, 192, 0.75); + border-radius: 12.7px; + border: 0px solid rgba(26, 93, 157, 0.35); +} +.range::-moz-range-thumb { + box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78); + border: 4.4px solid rgba(115, 163, 255, 0.51); + height: 22px; + width: 23px; + border-radius: 28px; + background: rgba(101, 196, 255, 0.94); + cursor: pointer; +} +.range::-ms-track { + width: 100%; + height: 12.1px; + cursor: pointer; + background: transparent; + border-color: transparent; + color: transparent; +} +.range::-ms-fill-lower { + background: rgba(174, 174, 174, 0.75); + border: 0px solid rgba(26, 93, 157, 0.35); + border-radius: 25.4px; + box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); +} +.range::-ms-fill-upper { + background: rgba(192, 192, 192, 0.75); + border: 0px solid rgba(26, 93, 157, 0.35); + border-radius: 25.4px; + box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); +} +.range::-ms-thumb { + box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78); + border: 4.4px solid rgba(115, 163, 255, 0.51); + height: 10px; + width: 10px; + border-radius: 28px; + background: rgba(101, 196, 255, 0.94); + cursor: pointer; +} +.range:focus::-ms-fill-lower { + background: rgba(192, 192, 192, 0.75); +} +.range:focus::-ms-fill-upper { + background: rgba(210, 210, 210, 0.75); +} + + + +.bar +{ + display: flex; +} + +.bar-slider +{ + width: 100%; + overflow: hidden; +} + +.bar-slider ul +{ + list-style: none; + padding: 0; + display: flex; + margin: 0; + height: 100%; +} + +.bar-slider ul li +{ + text-align: center; +} + +.bar-arrow-left +{ + width: 20px; + background-color: rgba(235, 240, 242, 0.69); + background-image: url(img/arrow-left.png); + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; + border: 1px solid #dadada; +} + +.bar-arrow-right +{ + width: 20px; + background-color: rgba(235, 240, 242, 0.69); + background-image: url(img/arrow-right.png); + + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + + cursor: pointer; + border: 1px solid #dadada; +} + +.bar-arrow-right:hover, .bar-arrow-left:hover +{ + background-color: #f3f3f3; +} + +.bar-arrow-left-inactive +{ + background-image: url(img/arrow-left-inactive.png); +} + + +.bar-arrow-right-inactive +{ + background-image: url(img/arrow-right-inactive.png); +} + +.bar-item +{ + user-select: none; + /* background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); */ + background-color: rgba(235, 240, 242, 0.69); + border: 1px solid #dcdcdc; + cursor: pointer; + color: #666666; + /* text-decoration: none; */ + /* font-size: 8px; */ + font-weight: normal; + text-align: center; + /* text-shadow: 0 2px rgba(0, 0, 0, 0.2); */ + /* box-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); */ + padding: 4px 10px; + /* display: inline-block; */ + /* -webkit-font-smoothing: antialiased; */ + /* border-radius: 2px; */ + + color: black; +} + +.bar-item:hover +{ + background-color: rgba(255, 255, 255, 0.87);; +} + +.bar-item-checked +{ + + border-bottom: 3px solid #47abff; + box-shadow: #cecbcb 0 1px 10px 0 inset; +} + +.multiselect{ + display: flex; + flex-direction: column; +} + +.multiselect-wrap +{ + display: flex; +} + +.multiselect-autocomplete +{ + width: 100%; +} + +.multiselect-add +{ + background-color: #fff; + width: 27px; + border: 2px solid #dadada; + margin-top: 0; + + border-left: 0; + background-image: url(img/add.png); + + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + + cursor: pointer; +} + +html[dir='rtl'] .multiselect-add +{ + border-left: 2px solid #dadada; + border-right: 0; +} + +.multiselect-add:hover +{ + background-image: url(img/add-hover.png); +} + +.multiselect-list +{ + list-style: none; + padding: 0; + margin: 0; + border: 2px solid #dadada; + border-top: 0; + + overflow-y: auto; + overflow-x: hidden; + + height: 100%; +} + +.multiselect-list li +{ + display: flex; + border-bottom: 2px dotted #dadada; +} + +.multiselect-list-text +{ + padding-left: 3px; + width: 100%; +} + +.multiselect-list-remove +{ + margin-left: auto; + + background-color: #fff; + width: 27px; + border-left: 2px dotted #dadada; + margin-top: 0; + + + background-image: url(img/remove.png); + + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% / 2) calc(100% / 2); + cursor: pointer; + +} + +html[dir='rtl'] .multiselect-list-remove +{ + border-right: 2px dotted #dadada; + border-left: 0; +} + +.multiselect-list li:last-child +{ + border-bottom: 0; +} + +.multiselect-list-remove:hover +{ + background-image: url(img/remove-hover.png); +} + +.multiselect-list li:hover +{ + background: rgb(185, 223, 255); + box-shadow: #cecbcb 0 1px 10px 0 ; +} + +.grid +{ + width: 100%; + height: 100%; +} + +.grid > ul +{ + display: grid; + margin: 0; + padding: 1px 2px; + overflow-y: scroll; + height: 100%; +} + +.grid-window-over +{ + border: #e13946 dotted 3px; +} + +.grid-window-drag +{ + opacity: .8; + border: #75c6ff dotted 3px; +} + +.grid > ul > li +{ + margin: 1px; +} \ No newline at end of file diff --git a/css/night.css b/css/night.css new file mode 100644 index 0000000..0266e73 --- /dev/null +++ b/css/night.css @@ -0,0 +1,157 @@ +:root +{ + --default-background-color: #5f616c; + --default-background-color-light: rgba(95,97,108, 0.8); + --default-text-color: white; + --default-link-color: #8ddcff; + --default-graph-color: #5ac9af; + --default-graph-color-light: rgba(255, 87, 34, 0.5); + --default-graph-color-dim: rgba(65, 179, 226, 0.5); + --default-path-color: #f2796b; + --default-point-color: #5ac9af; + --default-marker-color: rgba(255, 87, 34); + --button-color: white; + --button-background-image: linear-gradient(to bottom, rgb(84, 184, 255), #33aaff); + --button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + --button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + --button-border: 1px solid #215a96; + --button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336); + --button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + --button-color-disabled: #7c7c7c; + --button-border-color-disabled: #b7b7b7; + --button-close-color: #aaa; + --button-close-color-hover: #000; + --window-background: #babbc4; + --window-border: 1px solid #BBBABA; + --dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --window-active-background: #FF5722; + --background-background: rgba(0, 0, 0, 0); + --background-visible-background: rgba(0, 0, 0, 0.6); + --window-title-color: #fff; + --window-tools-close-background: linear-gradient(to bottom, #e8616c, #ff0000); + --window-tools-close-border: 1px solid #911f28; + --window-tools-close-background-hover: #ff7d88; + --dialog-loading-background: #babbc4; + --dialog-loading-content-border: 10px solid #fff; + --dialog-loading-content-border-top: 10px solid #ffe3e3; + --dialog-loading-content-border-right: 10px solid #ffb4b4; + --dialog-loading-content-border-bottom: 10px solid #ff4d4d; + --window-header-background: #e6e6e6; + --window-footer-border-top: #eee solid 1px; + --window-footer-background: linear-gradient(to bottom, #babbc4, #e1e2eb); + --panel-border: 1px solid #BBBABA; + --panel-title-color: #444; + --table-td-border-bottom: 1px solid #5d5d5d; + --table-td-border: 0; + --table-header-background: linear-gradient(to bottom, #ff5722, #fe7043); + --table-header-text-background-up: url(img/sort-up.png) no-repeat right; + --table-header-text-background-down: url(img/sort-down.png) no-repeat right; + --table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left; + --table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left; + --table-header-sort-background: url(img/sort_16.png) no-repeat; + --table-tree-background-image: url(img/plus.png); + --table-tree-background-image-hover: url(img/plus-hover.png); + --table-tree-background-image-expanded: url(img/minus.png); + --table-tree-background-image-expanded-hover: url(img/minus-hover.png); + --table-row-level-1-background: rgba(221, 221, 221, 0.5); + --table-row-level-2-background: rgba(121, 121, 121, 0.3); + --table-row-level-3-background: darkkhaki; + --table-row-background-hover: #6dceff; + --table-row-selected-background: rgb(0, 161, 241); + --table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset; + --table-header-wrap-border: 1px solid #c9c9c9; + --table-resizer-background: #ff8c68; + --button-flat-background: #5f616c; + --button-flat-border: 1px solid rgba(220, 220, 220, 0.51); + --button-flat-color: #ffffff; + --button-flat-border-hover: #a10808; + --button-flat-background-hover: rgb(139, 139, 139); + --button-flat-color-hover: black; + --colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid; + --colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373; + --colorpicker-button-hover-border-color: red; + --menu-li-hover-background: rgb(255, 87, 34); + --menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0; + --checkbutton-checked-background: rgb(72, 72, 72); + --checkbutton-checked-box-shdow: #ffffff 0 1px 10px 0 inset; + --checkbutton-checked-color: white; + --tabs-content-border: 1px solid #dcdcdc; + --tabs-button-background: linear-gradient(to bottom, #e1e2eb 5%, #babbc4 100%); + --tabs-button-border: 1px solid #dcdcdc; + --tabs-button-color: #080808; + --tabs-button-hover-border: 1px red solid; + --tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255); + --tabs-button-checked-background: #babbc4; + --tabs-button-checked-color: #fff; + --dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png); + --dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png); + --listview-li-hover-background: #eee; + --menu-border: 1px solid #787878; + --menu-background: #5f616c; + --menu-color: #fff; + --menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --textbox-color: white; + --textbox-background: #939393; + --textbox-border: 2px solid #5f616c; + --textbox-border-color-focus: #ff5722; + --textbox-box-shadow-focus: 0 0 10px #ff5722; + --resizer-horizontal-background: #5f616c; + --resizer-vertical-background: #5f616c; + --selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png); + --selectlist-label-background: #939393; + --selectlist-arrow-background-color: #5f616c; + --selectlist-arrow-border: 2px solid #5f616c; + --selectlist-arrow-background-image: url(img/arrow-down.png); + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-background: rgba(95, 97, 108, 0.7); + --searchlist-menu-color: #333; + --lazylist-more-background-image: url(img/arrow-down-hover.png); + --button-arrow-background-color: #72747c; + --button-arrow-background-border: 1px solid #717171; + --separator-background: #5f616c; + --separator-box-shadow: inset 0 0 15px #4b4b4b; + --dropdown-visible-img-filter: drop-shadow(0px 0px 8px #3b8de2); + --dropdown-visible-badge: drop-shadow(1px 1px 5px #3b8de2); + --range-background: rgba(0,0,0,0); + --range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + --range-track-background: rgba(192, 192, 192, 0.75); + --range-track-border: 0px solid rgba(26, 93, 157, 0.35); + --range-thumb-box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78); + --range-thumb-border: 2px solid rgba(115, 163, 255, 0.51); + --range-thumb-background: rgba(101, 196, 255, 0.94); + --range-track-background-focus: rgba(210, 210, 210, 0.75); + --bar-arrow-left-background-image: url(img/arrow-left.png); + --bar-arrow-right-background-image: url(img/arrow-right.png); + --bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png); + --bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png); + --bar-item-background: rgb(125, 127, 137); + --bar-item-border: 1px solid #686868; + --bar-item-color: #eee; + --bar-item-background-hover: rgb(186, 187, 196); + --bar-item-checked-border-bottom: 3px solid #ff5722; + --bar-item-checked-box-shadow: #ffffff 0 1px 10px 0 inset; + --multiselect-add-background-image: url(img/add.png); + --multiselect-add-background-image-hover: url(img/add-hover.png); + --multiselect-list-li-border-bottom: 2px dotted #dadada; + --multiselect-list-remove-background-image: url(img/remove.png); + --multiselect-list-remove-background-image-hover: url(img/remove-hover.png); + --grid-window-over-border: #e13946 dotted 3px; + --grid-window-drag-border: #75c6ff dotted 3px; + --datetimepicker-calendar-border-right: 3px solid pink; + --datetimepicker-clock-background: #71767a; + --datetimepicker-different-month-color: #bebebe; + --datetimepicker-day-background-hover: #b9dfff; + --datetimepicker-day-selected-background: #4ea3df; + --datetimepicker-day-selected-color: #fff; + --datetimepicker-day-today-border-bottom: 3px solid #f65314; + --scrollbar-background: #ebebeb; + --scrollbar-track-border: 1px #dadada solid; + --scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset; + --scrollbar-thumb-background: #4ea3df; + --scrollbar-thumb-border: 1px solid #dadada; + --scrollbar-thumb-background-hover: #59cfff; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-background-active: #59cfff; + --scrollbar-thumb-border-active: 1px solid #dadada; + --button-arrow-background-color-hover: #f3f3f3; +} \ No newline at end of file diff --git a/css/sea.css b/css/sea.css new file mode 100644 index 0000000..d0a8031 --- /dev/null +++ b/css/sea.css @@ -0,0 +1,154 @@ +:root { + --default-background-color: rgb(96, 104, 113); + --default-background-color-light: rgb(114, 121, 129); + --default-text-color: white; + --default-link-color: #5badff; + --default-graph-color: #37abff; + --default-graph-color-light: rgba(9, 132, 255, 0.47); + --default-graph-color-dim: rgba(245, 227, 179, 0.5); + --default-path-color: #f2796b; + --default-point-color: #4c7ab4; + --button-color: white; + --button-background-image: linear-gradient(to bottom, rgb(9, 132, 255), #0984ff); + --button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + --button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + --button-border: 1px solid #215a96; + --button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336); + --button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + --button-color-disabled: #7c7c7c; + --button-border-color-disabled: #b7b7b7; + --button-close-color: #aaa; + --button-close-color-hover: #000; + --window-background: #6a6a6a; + --window-border: 1px solid #6a6a6a; + --dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --window-active-background: #0984FF; + --background-background: rgba(73, 60, 57, 0.74); + --background-visible-background: rgba(0, 0, 0, 0.6); + --window-title-color: #fff; + --window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f); + --window-tools-close-border: 1px solid #911f28; + --window-tools-close-background-hover: #ff7d88; + --dialog-loading-background: rgb(185, 223, 255); + --dialog-loading-content-border: 10px solid #fff; + --dialog-loading-content-border-top: 10px solid #87c0f9; + --dialog-loading-content-border-right: 10px solid #5fa4e9; + --dialog-loading-content-border-bottom: 10px solid #0984FF; + --window-header-background: #9c9c9c; + --window-footer-border-top: 0; + --window-footer-background: linear-gradient(to bottom, #6a6a6a, #9e9e9e); + --panel-border: 1px solid #BBBABA; + --panel-title-color: #444; + --table-td-border-bottom: 1px solid #878c93; + --table-td-border: 0; + --table-header-background: linear-gradient(to bottom, #555a60, #6e757d); + --table-header-text-background-up: url(img/sort-up.png) no-repeat right; + --table-header-text-background-down: url(img/sort-down.png) no-repeat right; + --table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left; + --table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left; + --table-header-sort-background: url(img/sort_16.png) no-repeat; + --table-tree-background-image: url(img/plus.png); + --table-tree-background-image-hover: url(img/plus-hover.png); + --table-tree-background-image-expanded: url(img/minus.png); + --table-tree-background-image-expanded-hover: url(img/minus-hover.png); + --table-row-level-1-background: rgba(221, 221, 221, 0.5); + --table-row-level-2-background: rgba(121, 121, 121, 0.3); + --table-row-level-3-background: darkkhaki; + --table-row-background-hover: rgb(156, 156, 156); + --table-row-selected-background: rgb(9, 132, 255); + --table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset; + --table-header-wrap-border: 1px solid #0984ff; + --table-resizer-background: #cccccc; + --button-flat-background: linear-gradient(to bottom, rgb(9, 132, 255) 5%, rgb(9, 132, 255) 100%); + --button-flat-border: 1px solid rgb(60, 152, 244); + --button-flat-color: #f2f2f2; + --button-flat-border-hover: #838383; + --button-flat-background-hover: rgb(255, 255, 255); + --button-flat-color-hover: black; + --colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid; + --colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373; + --colorpicker-button-hover-border-color: red; + --menu-li-hover-background: rgb(55, 171, 255); + --menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0; + --checkbutton-checked-background: rgb(194, 194, 194); + --checkbutton-checked-box-shdow: #393939 0 1px 15px 0 inset; + --checkbutton-checked-color: black; + --tabs-content-border: 1px solid #0984ff; + --tabs-button-background: linear-gradient(to bottom, #0158af 5%, #6a6a6a 100%); + --tabs-button-border: 1px solid #0984ff; + --tabs-button-color: #ffffff; + --tabs-button-hover-border: 1px #d9ecff solid; + --tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255); + --tabs-button-checked-background: linear-gradient(to bottom, rgb(9, 132, 255) 10%, #0984ff); + --tabs-button-checked-color: #ffffff; + --dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png); + --dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png); + --listview-li-hover-background: #d2d2d2; + --menu-border: 1px solid #CCC; + --menu-background: #efefef; + --menu-color: #333; + --menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --textbox-color: black; + --textbox-background: white; + --textbox-border: 2px solid #0984ff; + --textbox-border-color-focus: #e36872; + --textbox-box-shadow-focus: 0 0 10px #e34956; + --resizer-horizontal-background: #0984ff; + --resizer-vertical-background: #0984ff; + --selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png); + --selectlist-label-background: #fff; + --selectlist-arrow-background-color: #fff; + --selectlist-arrow-border: 2px solid #0984ff; + --selectlist-arrow-background-image: url(img/arrow-down.png); + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-background: rgba(227, 224, 224, 0.44); + --searchlist-menu-color: #333; + --lazylist-more-background-image: url(img/arrow-down-hover.png); + --button-arrow-background-color: #ffffff; + --button-arrow-background-border: 1px solid #0984ff; + --separator-background: rgb(100, 178, 255); + --separator-box-shadow: inset 0 0 15px #41a0ff; + --dropdown-visible-img-filter: drop-shadow(0px 0px 8px #ffffff); + --dropdown-visible-badge: drop-shadow(1px 1px 5px #ffa1a1); + --range-background: rgba(0,0,0,0); + --range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + --range-track-background: rgba(192, 192, 192, 0.75); + --range-track-border: 0px solid rgba(26, 93, 157, 0.35); + --range-thumb-box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78); + --range-thumb-border: 2px solid rgba(115, 163, 255, 0.51); + --range-thumb-background: rgba(101, 196, 255, 0.94); + --range-track-background-focus: rgba(210, 210, 210, 0.75); + --bar-arrow-left-background-image: url(img/arrow-left.png); + --bar-arrow-right-background-image: url(img/arrow-right.png); + --bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png); + --bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png); + --bar-item-background: rgba(235, 240, 242, 0.69); + --bar-item-border: 1px solid #dcdcdc; + --bar-item-color: #666666; + --bar-item-background-hover: rgba(255, 255, 255, 0.87); + --bar-item-checked-border-bottom: 3px solid #e03d4a; + --bar-item-checked-box-shadow: #6a6a6a 0 1px 10px 0 inset; + --multiselect-add-background-image: url(img/add.png); + --multiselect-add-background-image-hover: url(img/add-hover.png); + --multiselect-list-li-border-bottom: 2px dotted #dadada; + --multiselect-list-remove-background-image: url(img/remove.png); + --multiselect-list-remove-background-image-hover: url(img/remove-hover.png); + --grid-window-over-border: #e13946 dotted 3px; + --grid-window-drag-border: #75c6ff dotted 3px; + --datetimepicker-calendar-border-right: 3px solid pink; + --datetimepicker-clock-background: gainsboro; + --datetimepicker-different-month-color: #bebebe; + --datetimepicker-day-background-hover: #b9dfff; + --datetimepicker-day-selected-background: #4ea3df; + --datetimepicker-day-selected-color: #fff; + --datetimepicker-day-today-border-bottom: 3px solid #f65314; + --scrollbar-background: #ebebeb; + --scrollbar-track-border: 1px #dadada solid; + --scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset; + --scrollbar-thumb-background: #ababab; + --scrollbar-thumb-border: 1px solid #dadada; + --scrollbar-thumb-background-hover: #53a9ff; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-background-active: #59cfff; + --scrollbar-thumb-border-active: 1px solid #dadada; +} \ No newline at end of file diff --git a/css/sky.css b/css/sky.css new file mode 100644 index 0000000..988c7e8 --- /dev/null +++ b/css/sky.css @@ -0,0 +1,201 @@ + +:root { +--default-background-color: #ffffff; + --default-background-color-light: rgba(209, 209, 209, 0.5); + --default-text-color: black; + --default-link-color: #0099d5; + --default-graph-color: #5ac9af; + --default-graph-color-light: rgba(90, 201, 175, 0.5); + --default-graph-color-dim: rgba(245, 227, 179, 0.5); + --default-path-color: #f2796b; + --default-point-color: #5ac9af; + + --button-color: white; + --button-background-image: linear-gradient(to bottom, rgb(84, 184, 255), #33aaff); + --button-box-shadow:inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + --button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + --button-border:1px solid #215a96; + --button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336); + --button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + --button-color-disabled: #7c7c7c; + --button-border-color-disabled: #b7b7b7; + --button-close-color: #aaa; + --button-close-color-hover: #000; + --window-background: #fff; + --window-border: 1px solid #BBBABA; + --dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --window-active-background: rgb(185, 223, 255); + --background-background:rgba(0, 0, 0, 0); + --background-visible-background: rgba(0, 0, 0, 0.6); + + --window-title-color: #444; + --window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f); + --window-tools-close-border:1px solid #911f28; + + --window-tools-close-background-hover: #ff7d88; + --dialog-loading-background:rgb(185, 223, 255); + + --dialog-loading-content-border: 10px solid #fff; + --dialog-loading-content-border-top: 10px solid #ffe3e3; + --dialog-loading-content-border-right: 10px solid #ffb4b4; + --dialog-loading-content-border-bottom: 10px solid #ff4d4d; + + --window-header-background: #e6e6e6; + --window-footer-border-top: #eee solid 1px; + --window-footer-background: linear-gradient(to bottom, white, #e1e2eb); + + --panel-border: 1px solid #BBBABA; + --panel-title-color: #444; + --table-td-border: 1px solid #c9c9c9; + + --table-header-background: linear-gradient(to bottom, white, #e1e2eb); + --table-header-text-background-up: url(img/"sort-up.png") no-repeat right; + --table-header-text-background-down:url(img/"sort-down.png") no-repeat right; + --table-header-text-background-up-rtl: url(img/"sort-up.png") no-repeat left; + --table-header-text-background-down-rtl:url(img/"sort-down.png") no-repeat left; + + --table-header-sort-background: url(img/"sort_16.png") no-repeat; + + --table-tree-background-image: url(img/"plus.png"); + --table-tree-background-image-hover: url(img/"plus-hover.png"); + + --table-tree-background-image-expanded: url(img/"minus.png"); + --table-tree-background-image-expanded-hover: url(img/"minus-hover.png"); + + --table-row-level-1-background: rgba(221, 221, 221, 0.5); + --table-row-level-2-background: rgba(121, 121, 121, 0.3); + --table-row-level-3-background: darkkhaki; + --table-row-background-hover: #DEF; + --table-row-selected-background: rgb(185, 223, 255); + --table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset; + + --table-header-wrap-border: 1px solid #c9c9c9; + --table-resizer-background: #dde2e3; + + --button-flat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, rgb(246, 246, 246) 100%); + --button-flat-border: 1px solid rgba(220, 220, 220, 0.51); + --button-flat-color: #666666; + --button-flat-border-hover:#ffcbcb; + --button-flat-background-hover: rgb(184, 218, 255); + + --colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid; + --colorpicker-button-checked-box-shadow: 0 .0 1em 1px #747373; + --colorpicker-button-hover-border-color: red; + + --menu-li-hover-background:rgb(185, 223, 255); + --menu-li-hover-box-shadow:#cecbcb 0 1px 1px 0; + + --checkbutton-checked-background:rgb(185, 223, 255); + --checkbutton-checked-box-shdow:#ffffff 0 1px 10px 0 inset; + + --tabs-content-border: 1px solid #dcdcdc; + + --tabs-button-background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + --tabs-button-border: 1px solid #dcdcdc; + --tabs-button-color: #666666; + + --tabs-button-hover-border:1px red solid; + --tabs-button-checked-box-shadow:0 2px rgb(255, 255, 255); + --tabs-button-checked-background:linear-gradient(to bottom, rgba(173, 213, 255, 0.86) 10%, #ffffff); + --tabs-button-checked-color:#000000; + + --dropdown-arrow-up-background-image: url(img/"dropdown-arrow-up.png"); + --dropdown-arrow-down-background-image: url(img/"dropdown-arrow-down.png"); + + --listview-li-hover-background: #eee; + --menu-border:1px solid #CCC; + --menu-background: #FFF; + --menu-color: #333; + --menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + + --textbox-color: black; + --textbox-background: white; + + --textbox-border:2px solid #dadada; + --textbox-border-color-focus: #9ecaed; + + --textbox-box-shadow-focus:0 0 10px #9ecaed; + + --resizer-horizontal-background:#dde2e3; + --resizer-vertical-background:#dde2e3; + + --selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png); + + --selectlist-label-background: #fff; + + --selectlist-arrow-background-color:#fff; + --selectlist-arrow-border: 2px solid #dadada; + --selectlist-arrow-background-image: url(img/arrow-down.png); + + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-background: rgba(255, 255, 255, 0.44); + --searchlist-menu-color: #333; + + --lazylist-more-background-image:url(img/arrow-down-hover.png); + + --button-arrow-background-color:#f3f3f3; + --button-arrow-background-border: 1px solid #dadada; + --button-arrow-background-color-hover:#f3f3f3;; + + + --separator-background: rgba(82, 82, 82, 0.38); + --separator-box-shadow: inset 0 0 15px #ffffff; + + --dropdown-visible-img-filter: drop-shadow(0px 0px 8px #3b8de2); + --dropdown-visible-badge: drop-shadow(1px 1px 5px #3b8de2); + + --range-background: rgba(0,0,0,0); + --range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + --range-track-background: rgba(192, 192, 192, 0.75); + --range-track-border: 0px solid rgba(26, 93, 157, 0.35); + --range-thumb-box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78); + --range-thumb-border: 2px solid rgba(115, 163, 255, 0.51); + --range-thumb-background: rgba(101, 196, 255, 0.94); + + --range-track-background-focus: rgba(210, 210, 210, 0.75); + + --bar-arrow-left-background-image: url(img/arrow-left.png); + --bar-arrow-right-background-image: url(img/arrow-right.png); + --bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png); + --bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png); + + --bar-item-background: rgba(235, 240, 242, 0.69); + --bar-item-border: 1px solid #dcdcdc; + --bar-item-color: #666666; + --bar-item-background-hover: rgba(255, 255, 255, 0.87); + + --bar-item-checked-border-bottom: 3px solid #47abff; + --bar-item-checked-box-shadow: #cecbcb 0 1px 10px 0 inset; + + --multiselect-add-background-image: url(img/add.png); + --multiselect-add-background-image-hover: url(img/add-hover.png); + --multiselect-list-li-border-bottom: 2px dotted #dadada; + + --multiselect-list-remove-background-image: url(img/remove.png); + --multiselect-list-remove-background-image-hover: url(img/remove-hover.png); + + + --grid-window-over-border: #e13946 dotted 3px; + --grid-window-drag-border: #75c6ff dotted 3px; + + --datetimepicker-calendar-border-right: 3px solid pink; + --datetimepicker-clock-background: gainsboro; + + --datetimepicker-different-month-color: #bebebe; + + --datetimepicker-day-background-hover: #b9dfff; + + --datetimepicker-day-selected-background: #4ea3df; + --datetimepicker-day-selected-color: #fff; + --datetimepicker-day-today-border-bottom: 3px solid #f65314; + + --scrollbar-background: #ebebeb; + --scrollbar-track-border:1px #dadada solid; + --scrollbar-track-box-shadow:0 0 6px #c8c8c8 inset; + --scrollbar-thumb-background:#4ea3df; + --scrollbar-thumb-border:1px solid #dadada; + --scrollbar-thumb-background-hover:#59cfff; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-background-active:#59cfff; + --scrollbar-thumb-border-active:1px solid #dadada; + } \ No newline at end of file diff --git a/css/space.css b/css/space.css new file mode 100644 index 0000000..5ab4cbf --- /dev/null +++ b/css/space.css @@ -0,0 +1,157 @@ +:root +{ +--background-background: rgba(79, 71, 103, 0.76); + --background-visible-background: rgba(59, 50, 84, 0.83); + --bar-arrow-left-background-image: url(img/arrow-left.png); + --bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png); + --bar-arrow-right-background-image: url(img/arrow-right.png); + --bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png); + --bar-item-background-hover: rgb(51, 43, 74); + --bar-item-background: rgb(102, 177, 215); + --bar-item-border: 1px solid #2fc3ba; + --bar-item-checked-border-bottom: 3px solid #8070ad; + --bar-item-checked-box-shadow: #211544 0 1px 10px 0 inset; + --bar-item-color: #666666; + --button-arrow-background-border: 1px solid rgba(46, 194, 186, 0); + --button-arrow-background-color-hover: #71c5db; + --button-arrow-background-color: rgba(255, 255, 255, 0); + --button-background-image-disabled: linear-gradient(to bottom, rgb(163, 163, 163), #bfbfbf); + --button-background-image-hover: linear-gradient(to bottom, #8070ad, #9988c9); + --button-background-image: linear-gradient(to bottom, #009688, #2bc3b9); + --button-border-color-disabled: #b7b7b7; + --button-border: 1px solid #215a96; + --button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + --button-close-color-hover: #000; + --button-close-color: #aaa; + --button-color-disabled: #7c7c7c; + --button-color: white; + --button-flat-background-hover: rgb(51, 43, 74); + --button-flat-background: linear-gradient(to bottom,#8070ad 5%, #8070ad 100%); + --button-flat-border-hover: #8070ad; + --button-flat-border: 1px solid rgba(220, 220, 220, 0.51); + --button-flat-color-hover: white; + --button-flat-color: #ffffff; + --button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + --checkbutton-checked-background: rgb(51, 43, 74); + --checkbutton-checked-box-shdow: #8070ad 0 1px 10px 0 inset; + --checkbutton-checked-color: #a9f6ff; + --colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid; + --colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373; + --colorpicker-button-hover-border-color: red; + --datetimepicker-calendar-border-right: 3px solid pink; + --datetimepicker-clock-background: #685992; + --datetimepicker-day-background-hover: #67b3d8; + --datetimepicker-day-selected-background: #27c2b7; + --datetimepicker-day-selected-color: #fff; + --datetimepicker-day-today-border-bottom: 3px solid #f65314; + --datetimepicker-different-month-color: #bebebe; + --default-background-color-light: rgba(103, 184, 229, 0.91); + --default-graph-color-dim: rgba(245, 227, 179, 0.5); + --default-graph-color-light: rgba(103, 58, 183, 0.72); + --default-graph-color: #673AB7; + --default-link-color: #5a2daa; + --default-path-color: #f2796b; + --default-point-color: #5ac9af; + --default-text-color: black; + --dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --dialog-loading-background: rgb(185, 223, 255); + --dialog-loading-content-border-bottom: 10px solid #13d5a7; + --dialog-loading-content-border-right: 10px solid #60fad6; + --dialog-loading-content-border-top: 10px solid #d2fff5; + --dialog-loading-content-border: 10px solid #fff; + --dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png); + --dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png); + --dropdown-visible-badge: drop-shadow(1px 1px 5px #42e8c1); + --dropdown-visible-img-filter: drop-shadow(0px 0px 8px #26ffcb); + --grid-window-drag-border: #1cd4a9 dotted 3px; + --grid-window-over-border: #e13946 dotted 3px; + --lazylist-more-background-image: url(img/arrow-down-hover.png); + --listview-li-hover-background: #eee; + --menu-background: #8070ad; + --menu-border: 1px solid #584b7b; + --menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --menu-color: #fff; + --menu-li-hover-background: rgb(51, 43, 74); + --menu-li-hover-box-shadow: #322c2c 0 1px 1px 0; + --multiselect-add-background-image-hover: url(img/add-hover.png); + --multiselect-add-background-image: url(img/add.png); + --multiselect-list-li-border-bottom: 2px dotted #dadada; + --multiselect-list-remove-background-image-hover: url(img/remove-hover.png); + --multiselect-list-remove-background-image: url(img/remove.png); + --panel-border: 1px solid #BBBABA; + --panel-title-color: #444; + --range-background: rgba(0,0,0,0); + --range-thumb-background: rgb(42, 194, 184); + --range-thumb-border: 2px solid rgba(82, 209, 179, 0.73); + --range-thumb-box-shadow: 2.2px 2.2px 8.6px rgb(159, 247, 227), 0px 0px 2.2px rgba(177, 255, 237, 0.78); + --range-track-background-focus: rgba(210, 210, 210, 0.75); + --range-track-background: rgba(192, 192, 192, 0.75); + --range-track-border: 0px solid rgba(26, 93, 157, 0.35); + --range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + --resizer-horizontal-background: #60b3d4; + --resizer-vertical-background: #60b3d4; + --scrollbar-background: #ebebeb; + --scrollbar-thumb-background-active: #8070ad; + --scrollbar-thumb-background-hover: #28a29b; + --scrollbar-thumb-background: #31c3bc; + --scrollbar-thumb-border-active: 1px solid #dadada; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-border: 1px solid #dadada; + --scrollbar-track-border: 1px #dadada solid; + --scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset; + --searchlist-menu-background: rgba(255, 255, 255, 0.11); + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-color: #333; + --selectlist-arrow-background-color: #fff; + --selectlist-arrow-background-image: url(img/arrow-down.png); + --selectlist-arrow-border: 2px solid #45c9c1; + --selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png); + --selectlist-label-background: #fff; + --separator-background: rgb(128, 112, 173); + --separator-box-shadow: inset 0 0 15px #695a93; + --table-header-background: linear-gradient(to bottom, #8070ad 60%, #2ac2b9); + --table-header-color: #fff; + --table-header-sort-background: url(img/sort_16.png) no-repeat; + --table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left; + --table-header-text-background-down: url(img/sort-down.png) no-repeat right; + --table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left; + --table-header-text-background-up: url(img/sort-up.png) no-repeat right; + --table-header-wrap-border: 1px solid #8070ad; + --table-resizer-background: #968ab7; + --table-row-background-hover: #8070ad; + --table-row-level-1-background: rgba(221, 221, 221, 0.5); + --table-row-level-2-background: rgba(121, 121, 121, 0.3); + --table-row-level-3-background: darkkhaki; + --table-row-selected-background: rgb(128, 112, 173); + --table-row-selected-box-shadow: #33bfbd 0 1px 10px 0 inset; + --table-td-border-bottom: 1px solid #2b9894; + --table-td-border: 0; + --table-tree-background-image-expanded-hover: url(img/minus-hover.png); + --table-tree-background-image-expanded: url(img/minus.png); + --table-tree-background-image-hover: url(img/plus-hover.png); + --table-tree-background-image: url(img/plus.png); + --tabs-button-background: linear-gradient(to bottom, #8070ad 5%, #8070ad 100%); + --tabs-button-border: 1px solid #85efe8; + --tabs-button-checked-background: linear-gradient(to bottom, rgb(139, 198, 231) 5%, #8bc6e7); + --tabs-button-checked-box-shadow: 0 2px rgb(109, 207, 184); + --tabs-button-checked-color: #000000; + --tabs-button-color: #ffffff; + --tabs-button-hover-border: 1px #8070ad solid; + --tabs-content-border: 1px solid #85efe8; + --textbox-background: white; + --textbox-border-color-focus: #8070ad; + --textbox-border: 2px solid #29c1b8; + --textbox-box-shadow-focus: 0 0 10px #8070ad; + --textbox-color: black; + --window-active-background: rgb(133, 239, 232); + --window-background: rgb(139, 198, 231); + --window-border: 1px solid #BBBABA; + --window-footer-background: linear-gradient(to bottom, #8bc6e7, #21c3b4); + --window-footer-border-top: #eee solid 1px; + --window-header-background: #8070ad; + --window-title-color: #444; + --window-tools-close-background-hover: #f0a1a8; + --window-tools-close-background: linear-gradient(to bottom, #e8616c, #f2796b); + --window-tools-close-border: 1px solid #7b8f9d; + --default-background-color: #21c3b4; +} \ No newline at end of file diff --git a/css/stone.css b/css/stone.css new file mode 100644 index 0000000..dbe53e6 --- /dev/null +++ b/css/stone.css @@ -0,0 +1,155 @@ +:root +{ +--default-background-color: #989898; + --default-background-color-light: rgba(183, 183, 183, 0.62); + --default-text-color: black; + --default-link-color: #ffffff; + --default-graph-color: #34ffc2; + --default-graph-color-light: rgba(163, 163, 163, 0.59); + --default-graph-color-dim: rgba(245, 227, 179, 0.5); + --default-path-color: #f2796b; + --default-point-color: #262626; + --button-color: white; + --button-background-image: linear-gradient(to bottom, #626262, #313131); + --button-box-shadow: inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + --button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + --button-border: 1px solid #757575; + --button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336); + --button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + --button-color-disabled: #7c7c7c; + --button-border-color-disabled: #b7b7b7; + --button-close-color: #aaa; + --button-close-color-hover: #000; + --window-background: #e0e0e0; + --window-border: 1px solid #bdbdbd; + --dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --window-active-background: #ffffff; + --background-background: rgba(73, 60, 57, 0.74); + --background-visible-background: rgba(0, 0, 0, 0.6); + --window-title-color: #000; + --window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f); + --window-tools-close-border: 1px solid #911f28; + --window-tools-close-background-hover: #ff7d88; + --dialog-loading-background: rgb(224, 224, 224); + --dialog-loading-content-border: 10px solid #fff; + --dialog-loading-content-border-top: 10px solid #c4c4c4; + --dialog-loading-content-border-right: 10px solid #8d8d8d; + --dialog-loading-content-border-bottom: 10px solid #5f5f5f; + --window-header-background: #c9c8c8; + --window-footer-border-top: 0; + --window-footer-background: linear-gradient(to bottom, #e0e0e0, #ffffff); + --panel-border: 1px solid #BBBABA; + --panel-title-color: #444; + --table-td-border-bottom: 1px solid #b3b3b3; + --table-td-border: 0; + --table-header-background: linear-gradient(to bottom, #ffffff, #cacaca); + --table-header-text-background-up: url(img/sort-up.png) no-repeat right; + --table-header-text-background-down: url(img/sort-down.png) no-repeat right; + --table-header-text-background-up-rtl: url(img/sort-up.png) no-repeat left; + --table-header-text-background-down-rtl: url(img/sort-down.png) no-repeat left; + --table-header-sort-background: url(img/sort_16.png) no-repeat; + --table-tree-background-image: url(img/plus.png); + --table-tree-background-image-hover: url(img/plus-hover.png); + --table-tree-background-image-expanded: url(img/minus.png); + --table-tree-background-image-expanded-hover: url(img/minus-hover.png); + --table-row-level-1-background: rgba(221, 221, 221, 0.5); + --table-row-level-2-background: rgba(121, 121, 121, 0.3); + --table-row-level-3-background: darkkhaki; + --table-row-background-hover: rgb(239, 239, 239); + --table-row-selected-background: #e7e7e7; + --table-row-selected-box-shadow: #ff7676 0 1px 10px 0 inset; + --table-header-wrap-border: 1px solid #b0b0b0; + --table-resizer-background: #cccccc; + --button-flat-background: linear-gradient(to bottom, rgb(177, 177, 177) 5%, rgb(255, 255, 255) 100%); + --button-flat-border: 1px solid rgb(180, 180, 180); + --button-flat-color: #000000; + --button-flat-border-hover: #cacaca; + --button-flat-background-hover: rgb(255, 255, 255); + --button-flat-color-hover: black; + --colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid; + --colorpicker-button-checked-box-shadow: 0 0 1em 1px #747373; + --colorpicker-button-hover-border-color: red; + --menu-li-hover-background: rgb(193, 193, 193); + --menu-li-hover-box-shadow: #cecbcb 0 1px 1px 0; + --checkbutton-checked-background: rgb(255, 255, 255); + --checkbutton-checked-box-shdow: #6a6a6a 0 1px 15px 0 inset; + --checkbutton-checked-color: black; + --tabs-content-border: 1px solid #ffffff; + --tabs-button-background: linear-gradient(to bottom, rgb(255, 255, 255) 5%, rgb(224, 224, 224) 100%); + --tabs-button-border: 1px solid #ffffff; + --tabs-button-color: #000000; + --tabs-button-hover-border: 1px #c7c7c7 solid; + --tabs-button-checked-box-shadow: 0 2px rgb(255, 255, 255); + --tabs-button-checked-background: linear-gradient(to bottom, rgb(224, 224, 224) 10%, #e0e0e0); + --tabs-button-checked-color: #000000; + --dropdown-arrow-up-background-image: url(img/dropdown-arrow-up.png); + --dropdown-arrow-down-background-image: url(img/dropdown-arrow-down.png); + --listview-li-hover-background: #dfdfdf; + --menu-border: 1px solid #a5a5a5; + --menu-background: #d4d4d4; + --menu-color: #333; + --menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.71); + --textbox-color: black; + --textbox-background: #fff; + --textbox-border: 2px solid #c9c8c8; + --textbox-border-color-focus: #e36872; + --textbox-box-shadow-focus: 0 0 10px #e34956; + --resizer-horizontal-background: #9d9d9d; + --resizer-vertical-background: #9d9d9d; + --selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png); + --selectlist-label-background: #fff; + --selectlist-arrow-background-color: #fff; + --selectlist-arrow-border: 2px solid #c9c8c8; + --selectlist-arrow-background-image: url(img/arrow-down.png); + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-background: rgb(255, 255, 255); + --searchlist-menu-color: #333; + --lazylist-more-background-image: url(img/arrow-down-hover.png); + --button-arrow-background-color: #cfcfcf; + --button-arrow-background-border: 1px solid #b5b5b5; + --separator-background: #ffffff; + --separator-box-shadow: inset 0 0 15px #ffffff; + --dropdown-visible-img-filter: drop-shadow(0px 0px 8px #ff6e6e); + --dropdown-visible-badge: drop-shadow(1px 1px 5px #ffa1a1); + --range-background: rgba(0,0,0,0); + --range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + --range-track-background: rgba(255, 255, 255, 0.75); + --range-track-border: 0px solid rgba(26, 93, 157, 0.35); + --range-thumb-box-shadow: 2.2px 2.2px 8.6px rgb(198, 198, 198), 0px 0px 2.2px rgba(255, 255, 255, 0.78); + --range-thumb-border: 2px solid rgb(115, 115, 115); + --range-thumb-background: rgb(212, 212, 212); + --range-track-background-focus: rgba(210, 210, 210, 0.75); + --bar-arrow-left-background-image: url(img/arrow-left.png); + --bar-arrow-right-background-image: url(img/arrow-right.png); + --bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png); + --bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png); + --bar-item-background: rgba(235, 240, 242, 0.69); + --bar-item-border: 1px solid #dcdcdc; + --bar-item-color: #666666; + --bar-item-background-hover: rgba(255, 255, 255, 0.87); + --bar-item-checked-border-bottom: 3px solid #e03d4a; + --bar-item-checked-box-shadow: #6a6a6a 0 1px 10px 0 inset; + --multiselect-add-background-image: url(img/add.png); + --multiselect-add-background-image-hover: url(img/add-hover.png); + --multiselect-list-li-border-bottom: 2px dotted #dadada; + --multiselect-list-remove-background-image: url(img/remove.png); + --multiselect-list-remove-background-image-hover: url(img/remove-hover.png); + --grid-window-over-border: #e13946 dotted 3px; + --grid-window-drag-border: #75c6ff dotted 3px; + --datetimepicker-calendar-border-right: 3px solid pink; + --datetimepicker-clock-background: #ffdeac; + --datetimepicker-different-month-color: #bebebe; + --datetimepicker-day-background-hover: #ffe1b3; + --datetimepicker-day-selected-background: #ffb03b; + --datetimepicker-day-selected-color: #fff; + --datetimepicker-day-today-border-bottom: 3px solid #f65314; + --scrollbar-background: #ebebeb; + --scrollbar-track-border: 1px #dadada solid; + --scrollbar-track-box-shadow: 0 0 6px #c8c8c8 inset; + --scrollbar-thumb-background: #ababab; + --scrollbar-thumb-border: 1px solid #dadada; + --scrollbar-thumb-background-hover: #43be99; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-background-active: #5cc7a7; + --scrollbar-thumb-border-active: 1px solid #dadada; +} \ No newline at end of file diff --git a/css/volcano.css b/css/volcano.css new file mode 100644 index 0000000..988c7e8 --- /dev/null +++ b/css/volcano.css @@ -0,0 +1,201 @@ + +:root { +--default-background-color: #ffffff; + --default-background-color-light: rgba(209, 209, 209, 0.5); + --default-text-color: black; + --default-link-color: #0099d5; + --default-graph-color: #5ac9af; + --default-graph-color-light: rgba(90, 201, 175, 0.5); + --default-graph-color-dim: rgba(245, 227, 179, 0.5); + --default-path-color: #f2796b; + --default-point-color: #5ac9af; + + --button-color: white; + --button-background-image: linear-gradient(to bottom, rgb(84, 184, 255), #33aaff); + --button-box-shadow:inset 0 0 0.1em 2px rgba(255, 255, 255, 0.1), 0 2px rgba(0, 0, 0, 0.12); + --button-text-shadow: 0 0.1em rgba(0, 0, 0, 0.2); + --button-border:1px solid #215a96; + --button-background-image-hover: linear-gradient(to bottom, #FF5722, #F44336); + --button-background-image-disabled: linear-gradient(to bottom, rgb(230, 230, 230), #bfbfbf); + --button-color-disabled: #7c7c7c; + --button-border-color-disabled: #b7b7b7; + --button-close-color: #aaa; + --button-close-color-hover: #000; + --window-background: #fff; + --window-border: 1px solid #BBBABA; + --dialog-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + --window-active-background: rgb(185, 223, 255); + --background-background:rgba(0, 0, 0, 0); + --background-visible-background: rgba(0, 0, 0, 0.6); + + --window-title-color: #444; + --window-tools-close-background: linear-gradient(to bottom, #e8616c, #dd202f); + --window-tools-close-border:1px solid #911f28; + + --window-tools-close-background-hover: #ff7d88; + --dialog-loading-background:rgb(185, 223, 255); + + --dialog-loading-content-border: 10px solid #fff; + --dialog-loading-content-border-top: 10px solid #ffe3e3; + --dialog-loading-content-border-right: 10px solid #ffb4b4; + --dialog-loading-content-border-bottom: 10px solid #ff4d4d; + + --window-header-background: #e6e6e6; + --window-footer-border-top: #eee solid 1px; + --window-footer-background: linear-gradient(to bottom, white, #e1e2eb); + + --panel-border: 1px solid #BBBABA; + --panel-title-color: #444; + --table-td-border: 1px solid #c9c9c9; + + --table-header-background: linear-gradient(to bottom, white, #e1e2eb); + --table-header-text-background-up: url(img/"sort-up.png") no-repeat right; + --table-header-text-background-down:url(img/"sort-down.png") no-repeat right; + --table-header-text-background-up-rtl: url(img/"sort-up.png") no-repeat left; + --table-header-text-background-down-rtl:url(img/"sort-down.png") no-repeat left; + + --table-header-sort-background: url(img/"sort_16.png") no-repeat; + + --table-tree-background-image: url(img/"plus.png"); + --table-tree-background-image-hover: url(img/"plus-hover.png"); + + --table-tree-background-image-expanded: url(img/"minus.png"); + --table-tree-background-image-expanded-hover: url(img/"minus-hover.png"); + + --table-row-level-1-background: rgba(221, 221, 221, 0.5); + --table-row-level-2-background: rgba(121, 121, 121, 0.3); + --table-row-level-3-background: darkkhaki; + --table-row-background-hover: #DEF; + --table-row-selected-background: rgb(185, 223, 255); + --table-row-selected-box-shadow: #cecbcb 0 1px 10px 0 inset; + + --table-header-wrap-border: 1px solid #c9c9c9; + --table-resizer-background: #dde2e3; + + --button-flat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, rgb(246, 246, 246) 100%); + --button-flat-border: 1px solid rgba(220, 220, 220, 0.51); + --button-flat-color: #666666; + --button-flat-border-hover:#ffcbcb; + --button-flat-background-hover: rgb(184, 218, 255); + + --colorpicker-button-checked-border: 3px rgb(255, 40, 40) solid; + --colorpicker-button-checked-box-shadow: 0 .0 1em 1px #747373; + --colorpicker-button-hover-border-color: red; + + --menu-li-hover-background:rgb(185, 223, 255); + --menu-li-hover-box-shadow:#cecbcb 0 1px 1px 0; + + --checkbutton-checked-background:rgb(185, 223, 255); + --checkbutton-checked-box-shdow:#ffffff 0 1px 10px 0 inset; + + --tabs-content-border: 1px solid #dcdcdc; + + --tabs-button-background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); + --tabs-button-border: 1px solid #dcdcdc; + --tabs-button-color: #666666; + + --tabs-button-hover-border:1px red solid; + --tabs-button-checked-box-shadow:0 2px rgb(255, 255, 255); + --tabs-button-checked-background:linear-gradient(to bottom, rgba(173, 213, 255, 0.86) 10%, #ffffff); + --tabs-button-checked-color:#000000; + + --dropdown-arrow-up-background-image: url(img/"dropdown-arrow-up.png"); + --dropdown-arrow-down-background-image: url(img/"dropdown-arrow-down.png"); + + --listview-li-hover-background: #eee; + --menu-border:1px solid #CCC; + --menu-background: #FFF; + --menu-color: #333; + --menu-box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); + + --textbox-color: black; + --textbox-background: white; + + --textbox-border:2px solid #dadada; + --textbox-border-color-focus: #9ecaed; + + --textbox-box-shadow-focus:0 0 10px #9ecaed; + + --resizer-horizontal-background:#dde2e3; + --resizer-vertical-background:#dde2e3; + + --selectlist-arrow-hover-background-image: url(img/arrow-down-hover.png); + + --selectlist-label-background: #fff; + + --selectlist-arrow-background-color:#fff; + --selectlist-arrow-border: 2px solid #dadada; + --selectlist-arrow-background-image: url(img/arrow-down.png); + + --searchlist-menu-border: 1px solid #CCC; + --searchlist-menu-background: rgba(255, 255, 255, 0.44); + --searchlist-menu-color: #333; + + --lazylist-more-background-image:url(img/arrow-down-hover.png); + + --button-arrow-background-color:#f3f3f3; + --button-arrow-background-border: 1px solid #dadada; + --button-arrow-background-color-hover:#f3f3f3;; + + + --separator-background: rgba(82, 82, 82, 0.38); + --separator-box-shadow: inset 0 0 15px #ffffff; + + --dropdown-visible-img-filter: drop-shadow(0px 0px 8px #3b8de2); + --dropdown-visible-badge: drop-shadow(1px 1px 5px #3b8de2); + + --range-background: rgba(0,0,0,0); + --range-track-box-shadow: 0px 0px 0px rgba(95, 153, 86, 0.7), 0px 0px 0px rgba(107, 167, 98, 0.7); + --range-track-background: rgba(192, 192, 192, 0.75); + --range-track-border: 0px solid rgba(26, 93, 157, 0.35); + --range-thumb-box-shadow: 2.2px 2.2px 8.6px rgba(139, 188, 255, 0.78), 0px 0px 2.2px rgba(164, 203, 255, 0.78); + --range-thumb-border: 2px solid rgba(115, 163, 255, 0.51); + --range-thumb-background: rgba(101, 196, 255, 0.94); + + --range-track-background-focus: rgba(210, 210, 210, 0.75); + + --bar-arrow-left-background-image: url(img/arrow-left.png); + --bar-arrow-right-background-image: url(img/arrow-right.png); + --bar-arrow-left-inactive-background-image: url(img/arrow-left-inactive.png); + --bar-arrow-right-inactive-background-image: url(img/arrow-right-inactive.png); + + --bar-item-background: rgba(235, 240, 242, 0.69); + --bar-item-border: 1px solid #dcdcdc; + --bar-item-color: #666666; + --bar-item-background-hover: rgba(255, 255, 255, 0.87); + + --bar-item-checked-border-bottom: 3px solid #47abff; + --bar-item-checked-box-shadow: #cecbcb 0 1px 10px 0 inset; + + --multiselect-add-background-image: url(img/add.png); + --multiselect-add-background-image-hover: url(img/add-hover.png); + --multiselect-list-li-border-bottom: 2px dotted #dadada; + + --multiselect-list-remove-background-image: url(img/remove.png); + --multiselect-list-remove-background-image-hover: url(img/remove-hover.png); + + + --grid-window-over-border: #e13946 dotted 3px; + --grid-window-drag-border: #75c6ff dotted 3px; + + --datetimepicker-calendar-border-right: 3px solid pink; + --datetimepicker-clock-background: gainsboro; + + --datetimepicker-different-month-color: #bebebe; + + --datetimepicker-day-background-hover: #b9dfff; + + --datetimepicker-day-selected-background: #4ea3df; + --datetimepicker-day-selected-color: #fff; + --datetimepicker-day-today-border-bottom: 3px solid #f65314; + + --scrollbar-background: #ebebeb; + --scrollbar-track-border:1px #dadada solid; + --scrollbar-track-box-shadow:0 0 6px #c8c8c8 inset; + --scrollbar-thumb-background:#4ea3df; + --scrollbar-thumb-border:1px solid #dadada; + --scrollbar-thumb-background-hover:#59cfff; + --scrollbar-thumb-border-hover: 1px solid #dadada; + --scrollbar-thumb-background-active:#59cfff; + --scrollbar-thumb-border-active:1px solid #dadada; + } \ No newline at end of file diff --git a/img/add-hover.png b/img/add-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..8ec8c8893b56f054d8d3886652001960fe2cc7c9 GIT binary patch literal 749 zcmV9mbTW+4gSRe*bn#yZDGz~qGQ^7nAp{ED zyDeVqmLTk@C8C3dK|dyB5z}?q)m?R7=iLr&vaU1iy6dUF@bb>f^D>|J`SCt8@UKa! zv_ZJ?BG3o)16@E{(Ub%dz#OokYwGWsK*E(8FaeCF@-DIE3~@V0c3%QugjDWZ5e9BI z(Gu1G#&u17Q8h@oQUO|lPj=dgPQ^D_+ZF(*WxHkJa5f_W#(GUGL;nff)HT(q26PGd zGQW~-o=t4g5KyYh!LBIq$ zxiwu=FPGZNUo~N;o#jOEW?jF&g617>I!i?2k_Jj)D^dLCrY?ht!4y( z`F9;Cv9)FQ<*_30OS+$J;O(!Y=N(4^g#4=R%yb}+uS-2j8X?sxp5(*{%RTY3mC6XI z0DE2@B_4D{j@nAS>SzuEta*Xv9^Gm>6UeS8(A^#ec60m3iSxSsZ!c f%I~Ee`v1}&tV0Dl>D-1)00000NkvXXu0mjf9C=KP literal 0 HcmV?d00001 diff --git a/img/add.png b/img/add.png new file mode 100644 index 0000000000000000000000000000000000000000..1c698b34c0cb609f3ce4c5bffba3aaab292d9c6d GIT binary patch literal 725 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 D_9!AE literal 0 HcmV?d00001 diff --git a/img/arrow-down-hover.png b/img/arrow-down-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..6963242576adf11b8ad1a67ecc475956e44bd3df GIT binary patch literal 750 zcmV_${fbIx++R7S_j6C=?`SUN%&u zSC=~V;@gf?Ya;5c5Rt=3(b-a|G*VD6<-67tMX@vUoDpa$nM}4huU(dqh|Kh8NF}1hc*ObN5Ix39&$Et* zVnT?Gd0&2H$h{*!AcV*f(cOMy!VaLAPN(e)>*GU1LZMI(VP)f7Jj0158Oo zK~zY`<(5rIV^p9!k1+X>BlKKrpT>2!*(D(M`ZbB_SxNOE)rd3xJz4lMJu(E~1zxM_i)OP)u~@{iEUvGw0Wb`Mcs$O+ z!UBe2AR;eCyL6wudz zRVtOfEEEd(e7+~SxZQ4(OeUG1pZ}n$6CRJp9ti5W>+e#jG=6-1jMwY^sCafd9hR1s zn46nB6OnIj%RKkizP4?9yih27Gz7rs^O4Wzsn_e{s`{ocsFz(Ya=F|cciqI{k<7d^ z&StX!&jwlaeY4qg0}l`g1c*c;IF2(E5{tzc9UXP&Y}=+>E(cWgc|Xt(#bVJN`2Bvi zwzk;V*kEdEY9M4{VuDO2!{+8D9*@V}Ygrb+kNrU3S(fFduwfXCjEn%Vy1L5bT8P?X;5E1--KVxHKuDn*O0fhU3A~%;2;Ns$f!^11mdi zmjQ4bhrPW$E-x?L{jF9D;EO?7_kZ4taC&;m(b17Rx3aQAEEXdYiI7gG-IU(m-lkr! z4^5EUpo(D_4}g_Qh5h|~cbv&&SYKavmF@2C-kknU3kHJ#|MUa>F*`f^;3OhKwOZxi z-~h*Q@Or(72&&5d{yvRHqpwH8;V{5iKTs}_Nc7$0@p!0KtF9Y6oen!YJ2wIETaM!K zIKVINWxgf<-7pM7p%7PBSA7*!Disb64rnwQG@H$Vcgr+QqS0tuM1Fo?k%-tL@-m%H z({8s1Dmgnl8wzn8hg2#B@OEIW6OmV@X}(J)lXN(eE!J=^#+niB-%hkL~4(|u#V$|MdYMjua9T5S!~Px#1ZP1_K>z@;j|==^1poj532;bRa{vIG%>V$L%>m^m?-2k100v@9M??Vs0RI60 zpuMM)00007bV*G`2jB}43m6HqcYoCY00TiuL_t(YOXZeJNLxV^hEI%%RVi2>@evdn z5Hzb$lrG#BbXn0&5nZ@)VG*I5E=q+ix@e)4R>6gCwMEI&2Nc}sqDtG9b`w%<#MW0u zF_y+e|9|e}a&K;~LbrZ!n3*$k=RY%ZW)iu1TwGiPV2@xQVLxCgZLEKQv9C%Gcg3U2 zykLUou#wZ#Q(0MAk@fX;VV#telt?%nmbSJwDJ?A(kH_;8?q?{|YCsNog)q4v#rM6v zy}L6rGjeovr2Lpfm02)OmF4B-(%IQ5fk0pf&3mxl7;AKD9735)CV)Xd*Vfkjb8~az z^Z9ho)tsN7OM82}w6?bXK{Jdwei=Om1-dlBfN#J*KR@p(!j+VjmD&0W3kzj&aZy%R zSMQ+t1!KHMkAY1Hov#lL4r(dF58Vg`gEBBMAcKR0;`eix4ZL2jEG#U@?(S|anlB8m zLGFqk^Gw{}O6uzBq^GAxwTp_1q_VQoJS)NgqtPgRPhn;@nnG|6Z*6V)5smiP!P!Z5 zb+z>M^{L3o)YOzD5(!6=93CEKv-5#+0PBi|n7(f3!j<&*_v@A+vbnh_1qF^{RxB?s zvv{Z)z&a{`bk5ldXmDRSfK}+$+1Z({8gTDxYHFmnw^v1; zPN&sMVzHR(O0p!ANftrX0JhQALnVytTL+IG;s(KE%p@&5S*Qz zRf*vCG;yn#t=z7Pii#b48$oc62Q#lw7JT#y#Sk7_-^RuUpMQ1Zc_zih#lpnl&pDEa z(Z7TLiTdz=f#5JK21~*++F0iwlwm#WMj>(u877vRY+7Ho00000NkvXXu0mjfrftQ$ literal 0 HcmV?d00001 diff --git a/img/arrow-left.png b/img/arrow-left.png new file mode 100644 index 0000000000000000000000000000000000000000..a327511d3ee581fb1ef4e634a5e496e206f536f6 GIT binary patch literal 770 zcmV+d1O5DoP)?)ogsQ6h``>DgB7b^(7d#$M8o*%yKZuAeLAtJci0Er15~&$WG;S%) zLv1Pofxu4yULyK#31a4N(P*@3G?}Wp!9${X}Y6pauLkyU1jL(QJkzxS`vz9eJ}z&?C9vQ+}t&}SW4ri)18*u zU@!;(GZi2rx+h7}nq4lsr&7>$9RTq9{64f&)=(#kA^^NMD~9{youX~xPd!&kMY6z^ zjd#3L1QCrAQO2sNres-ezWsUcwyJBmJqy3z|AmMS*mZ9=fF)U$tG5cfap)I(K3@(% zJrU)cTzqZ-bE>K~JH7axov24cLqnRGeS#olwtAJ{0Whd2N_9LQ-)Ji(yV96|*XxBO zNjU%yi0In?K2So;{E3-YnOQH6)#3vsgdJ&r0rV~-O!Ep5Q2+n{07*qoM6N<$g6i;2 A@c;k- literal 0 HcmV?d00001 diff --git a/img/arrow-right-inactive.png b/img/arrow-right-inactive.png new file mode 100644 index 0000000000000000000000000000000000000000..edf436f0481aa70f4b071a877c73e1f610dabb36 GIT binary patch literal 991 zcmV<510ei~P)Px#1ZP1_K>z@;j|==^1poj532;bRa{vIG%>V$L%>m^m?-2k100v@9M??Vs0RI60 zpuMM)00007bV*G`2jB}43m6HqcYoCY00U1+L_t(YOXZe5NLx`9$4?Rysv=l5X;ZBd zT&j}=>7a|yNpJ}|m{kWwTS|rwooeaOp@kyd9TbNa#SVfWbZ}89N}DMLq_!Ah)%XR) zSdAt<|C5{KzPx9UuKwU~?>YCq`@iSh`))!vlXN;AWc$UIU`r`O{|8%8JysN(YAxYO z-f{DEYir9D4u>fokJIVtDdJRCRz@C=hnkw2sJ^~F$c z4!l!SQ?$3YM^2|xjT%WNljL^0sk^%yZHz+?`Q3PCG>=J$SL@>DPbd^}&Ckzgg4ci- zM;#p<)YjI9>}m_e?5fp?tgWrNW@l%Wo560kQ)OkP^2}g-X=#a8R#uSu_e?a8L5Q8GjOeGb90j>Cnv?nM8m_wlI2z4 zbn;1c@*;CbUl;N(FE6XE5r{>jQJR^V5g*wN4Gqa@vjP=aUtdS}i3Av3=n)1nsTGJv zA`wDqvwmM+-<6r+lVH5!FuG7JN>>a_zOk`E3KC=FVGG9oJo>l9W-7mDFpDF!BQY;2@JAV3a>L;Q(}3EJ7&F-@#a=3j9bUFd6b zbF*n>IzFF|dV717M^eIA47ZLMbx>rZfG+g8y}ey^jbP;s4Goe>ma(xh+TPw)o)O%C zSTr*#0Y(@4f=#Wes#0zSWLQ^MmlL_Xyp&9KcX#ERvI4g{-{|LD&i5*m7vf-??Tz2> zr;CdV70qnw{{B9lot=q~4;Psf?ukxMPY;?8;wTJH^XeVkL|0c=y^D*Bvf){9(vb1d z(b1J6SYTII7qzss{N`uwsjy&rgT?N06K1j73kwT|%e5HTm(I>kYHe*j=Q-|kS#t*g zSP3C^hwU4G-CkTfhlhtUR+tI)58&qm<>Hg}lidgW+_?;BSl572Wqi%;3)~pE2k~>R zzIZ7kP8R>rNuMVlVS6Qm{{suT*#c}I+3*J?sSN#3Y#8&X$8QWo{{ZP1e44VB@WKE9 N002ovPDHLkV1kgmytV)U literal 0 HcmV?d00001 diff --git a/img/arrow-right.png b/img/arrow-right.png new file mode 100644 index 0000000000000000000000000000000000000000..6a8898e02fd16fac0417ee2981ce3847036311a7 GIT binary patch literal 757 zcmV2GbC;2&XD{>@=TBz;sdw};FMt)r9(qQxH(bvm%T+DMRj#GG)-Fo&?O>g zivroU9Tk!EN5QKvmUo0Cgf_`hrN70+>#x)1|E+))!Ucb6dY5kw`26 zi08vXF8(8fgM&pw0O0cHatsU%lmK|2ZwuvR(`uULmX49K6+wCr#PPhjA`r|p%{a*` zt{{?8l5I!(trg-5nLs2G0RTKZtog#67^e$mw9~RIS7C-_*n9u$q97E)(}SCQVTNIp zEN}hgpnb_?(o=l9w;uoyiA2!XwAs^lcz759PP&11+%PLW#V=+n(fR1jV!MiX!kkz! zH&8rCXQh5>Xza;=Bt*oojBC8w+xKk1G;G^mDr1nd95fz85R)l%H`gK@4#T!>H1=e? z+-KcDZ(Gz+-%M^b)&1$72S!2P<7FcNkaYv~H8eDMLb{u4m)<^^pr)n<0J_{juN6fp zDEtk{<#N6d0MImTUPP{~0EvhxBA4#$TI(vDo0|gw?0-1s3%R#v9ROS}IK4@R0gR nc0MQz&drc~;@G0A@5}ZJFSZ#?ZV^B+00000NkvXXu0mjfVpC7) literal 0 HcmV?d00001 diff --git a/img/arrow-up-hover.png b/img/arrow-up-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..87861f4d9b13ad03013e57915058c91e779e168e GIT binary patch literal 811 zcmV+`1JwM9P)Px#1ZP1_K>z@;j|==^1poj532;bRa{vIG%>V$L%>m^m?-2k100v@9M??Vs0RI60 zpuMM)00007bV*G`2jC0}6f_%Jy^Zhy00NsyL_t(YOXZeLXcJKo$6vlgOae;MNUe?a zVkLM8g?PzP5Ik9Lwt5kIP*Eh{(GrV-h@gj}2L(?JRq^xSq2Q^IfEY+XG4Y_pKn-S# zdWkfN>H43ylkFzENtg849}M$mHrfBqyvf^$?TM3f2=PK_Lkr# zci^s+%VkfYP!JE4aqR+gAy^cVNJNCg;ReEahr@AIyJE&t2m(WJIYm)MW|nGNauXh( z@QXkoP{DVjPN%cVX&sXgi>zca8PDx+`?RD@=8pUk(P)&a^P@WQI!^XRa)XEv$xpjQ zHk;jnWl_s)&>=*7LhTwvq|J?DP~aX1ajzt&Bpt28#m32nl83`B@%qdGf%ff%$^FtR zf=GgZ^dvw~XG zZr9Bx%hLZ6esMmPlWXGT)F`idV-#9ruR~8uEg~L1UlJewZR|@$-6PH|e3WaK%hjv0 z74{uMRXV$jG@DJiCm4D0cFnwhR9RcBUaw2v=Hk#7a_?mT^xqMW_ub3O>zvUTbF7Mz z8sx}6smY-5`FzvZ+eM1?ijcU+r*H>@h!9?{m)tuUfbL#*CHTPmmfipW002ovPDHLkV1m6pb%X!_ literal 0 HcmV?d00001 diff --git a/img/down-arrow-circle-hi.png b/img/down-arrow-circle-hi.png new file mode 100644 index 0000000000000000000000000000000000000000..20cf9984f5387a94b6f6c6864e19d662f3d39cdc GIT binary patch literal 23525 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

41POi&%)rPt94lA zj@!*1?m^xELlQ09_Xm+%+c$$|M(r8`yaT;)~Bn)l;W$o*M(%c-yLZfY*fGjqy+G~t^Q zE-$(M!WKpjeOTSKgl&n$Y4zHAJYAW0uUZq=>; literal 0 HcmV?d00001 diff --git a/img/dropdown-arrow-down.png b/img/dropdown-arrow-down.png new file mode 100644 index 0000000000000000000000000000000000000000..7274da2b99d332f55f41e39c5e1bd931bab527e0 GIT binary patch literal 256 zcmeAS@N?(olHy`uVBq!ia0vp^3P3E#!3HGv#H{-Rq}Y|gW!U_%O?XxI14-? ziy0WWg+Z8+Vb&Z8pdfpRr>`sf18zxi83h-`05_meucwP+h{y4(Q?2uQnZu3u`(ml~gaNPAIQioAHHvr=O^Vp3}P^wP{Q_4R^ejX8(1F x^M1a4ujNjQS1D>S@BDqeeX2F~uK&M@A=>MuoU?t}JfOoEJYD@<);T3K0RZXa~60+7Bet#3xhBt!>l+ul z3NDHPZa|@xo-U3d9^O~4I&vK{5NUZBRsH|=3nu}`@VuBCpF7U+_fD~rNQ&2z{o&wa z>@U6a?5$$SKdRN0d=+~mwiQh_v3Y2FZPjzF%MUrTLpKYXSM+2bI=uGpx3kN4n0>Lh zGxPZdb(P2Q)hi?a_l2E%)a8A_F}(2IBd&VK@IbytUC$O6&+e5uD(bRewxpTPmq%u9 zNo{`x)C;Av60TX#y<+iMCavscn9e7GpFW=}7+-L{l$-b6E(Yjm22WQ%mvv4FO#rN` Bb%p={ literal 0 HcmV?d00001 diff --git a/img/filter_16.png b/img/filter_16.png new file mode 100644 index 0000000000000000000000000000000000000000..77f1ed326ecd3a2ad44c0043760d7ac8d4e989b3 GIT binary patch literal 484 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 XSx6Ro!8`0K00000NkvXXu0mjf8W=5y literal 0 HcmV?d00001 diff --git a/img/minus-hover.png b/img/minus-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..7e80b43189e855e197ac514f69b9272c8a23313a GIT binary patch literal 748 zcmV#S)xgP zr3KPaCxCun0O$tVi>^2j17?6Zp=+x(fuy5!U>tau$T>_eq=;Hs(s>1d;n%nt2{L%G znbv>~FeY^EQPm*nC=U<FdcHU;t%V?iT#1KD#^Fr6`YCtD} z&$El^mZ{h}4PH-GHQ1B|?p$f*`nh8^aJoE|9+z}2%`T?HFFz#lYKJR$e!IZ^p5yeN zZCVz()>i5(-)h`S+Tp3#`k^5J4PFnEu>|q73`<8nb&aUlU8}cW|6(O0>uTjtliF-V$GXI{veAzfN`94wg616}i&@Oast>PC}I?4n-#nUqU_}v;-(xy>(4lI1c5RCMiL<|uJE|)_p{xcLu z{oVPMEnn2ivXqi!Y{j1BCpEP)hxP*jJ*9Epa71XPuC)d+M?(5#+Ij2FP*$T zo!>Mz`6s#g8LSG?8e2t6VsTrj81@)1TJ8G zas!QZal#QvL`$R)lmbDeB+1SGP3GDKa>Z%tBbtL}(~szR|K@7nmnaFT_`URYy~F>- z{!_b|E$5gk1;~nQ*OH150*r;5l?nX7p``dv*!LZUAWL)!1U}3b9lBh0mzT!`6&x;< z=e1LtP)eYbK#N5?9QY1=0=!6sumMjBu1@f~&WyRQI@hbcqXi!?1j|f>h?ayDSRs(Y z;T%+*pcDkm`%uu1P+4$%+nICn>pef5wXWexqTZvy6U0N3=|yP@he>#f zL`V|1g0=>aTLpUvK)leOCRd!h?~Qc&(s=PAR?JanmlCxJJk@}b7Kcx{TA*0DflrmG ze0*ld#>0)zAKCoxE5G{b(_KA}zW9wc1q!9?f`E=;q=)Z(D#0998ZKq8&+a+dx4I*> z=Ef&GzrWk%$NKJ1eK+*cV7~B&E0xDxsXXq=*%w07+ovS zymZBtEe~vesD1yk)V?kIo@}aXUR4dMm7(m=P;d8ppOfQOcmHPkw|#ks`3KS48=qf) Rs>A>Q002ovPDHLkV1jBCumS)8 literal 0 HcmV?d00001 diff --git a/img/minus.png b/img/minus.png new file mode 100644 index 0000000000000000000000000000000000000000..d95d587314470d44afd8152f18a434660d6ac7ee GIT binary patch literal 716 zcmV;-0yF)IP)kFX!bv=lwe8z>|}z8dd$Is^3-h zOjW~poT=)Mc+S3S9k~UN1ol;Rr`PMzY&LOSmmmlLuq+G5aadbh!?G+yWLHG?<_4*% z055#M~xUE*}d85%Fl}gPO;xG&; zl}fCxu3o9?>qH{q%>>2a`qOH)^2f)=B$LT|<#RY3vazwj%F4=xh`bt|ON`m>d!CnX zG#dAY0HjhW>h(I^Za1&0hf_gub?ww@wYkGJOVw%>U~`s7A9}ssb>bf)&-3VXIvG{n zng;sVY&IXI_tNP!uImDPo(6jFy6!{?FDl>n0j?W)G#N`l5KI)o_V)H%3m+UD-1zVJ z`vA{oRo!DAT{kOo@qM3uzmKYt&1SJ}8^>`d y6bd15G#;)+x_m2sj0CD0#UoJF-=in=)6zdGq9*beTSnyo00009mbTW+4gSRe*bn#yZDGz~qGQ^7nAp{ED zyDeVqmLTk@C8C3dK|dyB5z}?q)m?R7=iLr&vaU1iy6dUF@bb>f^D>|J`SCt8@UKa! zv_ZJ?BG3o)16@E{(Ub%dz#OokYwGWsK*E(8FaeCF@-DIE3~@V0c3%QugjDWZ5e9BI z(Gu1G#&u17Q8h@oQUO|lPj=dgPQ^D_+ZF(*WxHkJa5f_W#(GUGL;nff)HT(q26PGd zGQW~-o=t4g5KyYh!LBIq$ zxiwu=FPGZNUo~N;o#jOEW?jF&g617>I!i?2k_Jj)D^dLCrY?ht!4y( z`F9;Cv9)FQ<*_30OS+$J;O(!Y=N(4^g#4=R%yb}+uS-2j8X?sxp5(*{%RTY3mC6XI z0DE2@B_4D{j@nAS>SzuEta*Xv9^Gm>6UeS8(A^#ec60m3iSxSsZ!c f%I~Ee`v1}&tV0Dl>D-1)00000NkvXXu0mjf9C=KP literal 0 HcmV?d00001 diff --git a/img/plus.green.png b/img/plus.green.png new file mode 100644 index 0000000000000000000000000000000000000000..ce7c80fc279a4b404bd9b1712a1d4398b427c129 GIT binary patch literal 938 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 literal 0 HcmV?d00001 diff --git a/img/sort-down.png b/img/sort-down.png new file mode 100644 index 0000000000000000000000000000000000000000..6a88aca7a96795d4d4704f9f1b40d8aa9709ba8a GIT binary patch literal 763 zcmVPx#1ZP1_K>z@;j|==^1poj532;bRa{vIG%>V$L%>m^m?-2k100v@9M??Vs0RI60 zpuMM)00007bV*G`2jK%976>}xVH<4#00L`CL_t(YOXZc%OB+EH$EV50G=~s+NSj3~ zt)#^D){{_zhms}+Fa9H?c<7-wi`QO+{vVzs^w5h`1P|gV)Fd{QB2COC5NL|p(D$8r zyP5sv%6e-*@OW?DZuUF#X68lwbKGMe%Af1&Jh=+lI@vPWEEzZ_J0#m7`Nn1mF`Q0puQ$9Sw&=^I(5p z=A(E~E{j|)*QIcg1TR%~N{~>2T(i|`JveQ*Rq~cRE0sjCScJ%9Zz&V(C0wqfI3l2Z zaw59j?hJ*;Dl^3;L~Nm4aYSsem!r|hq)C6^l*B0=J;3R@XzcE)#2u-xtzA<2(mZsn zsDjfK2g5Kpnlcy+W@z#oJah@IW7#^DY85jRiG;VpZeG=DqPn`uBgK!iGq^W$KU(w5RX`ske#!x%3+&@U`bNI&WWw}r}kMHd$BNaC!B zo8Tt8@Ll0=Y|8-?)V;rTI-RFzka2jjuplhUI;V-xaY_;-gyoLVg}t333KqGdaF&Dy zDy#4b0p71;bm1?1dny?L|MB69Jok!#Kp`6vM5}*|28rIqZN&jc7^f?r&tnzaB=A-} ti3tgAkbNinMK)nWd`jkY=>G{J{sM|g`L>wjmaYH*002ovPDHLkV1kQjQB42< literal 0 HcmV?d00001 diff --git a/img/sort-up.png b/img/sort-up.png new file mode 100644 index 0000000000000000000000000000000000000000..a355df6a2170dbd920f6cf0181863d4dd8a71b95 GIT binary patch literal 697 zcmV;q0!ICbP)gwMhNWoR=)eG-{<+g!>yE(a$8CHRY`fH zq;%Zhjgs*Qd%6(MCju!c!@!Ac z+tE+C+*nbsCzFIip(?PV3voRXJ%h80~s#-7Rcc z)=0?XRI2U7SM_=w;E`AAo?cWcBVVa$S_kN-QlS8_VE zv$M0gVm?0=le zK~y-)jgv`ClR*^6|I@Gi*hEDZ7l?|~Lc!7oB@MWQO%r3RiF&}uA`P|%dhqVSqtS~o zdXQ>xsT65SRJ;`;qT&Xrgn)uV01=7C#IUse_VEA>pw;+K-kaoQe*gC-GXq4B#mPc< z4#d%F>~pjlUxaIsq>2Q$cL}7_q#w!BW*c?s`rY=Htha48;jbnuU;wD|8b%t2?6kgf zBenb1(3q%S{;x6@9oImnrE(U*1r6G z64grB@X=COtsR@|flOskP{gWNV->p&{ogu}y*afYA9+=PVTIcGztt@5UNIIVgZ_aE_B?fnAp!)oGd&wKRqxG(>&R~#}RD=iqtDUZ@uchJJV*p^uWTqu9f6`>mIGpu)?j0mqgqp;F zC9%j!D#AnmwJulXRB;&o>r<|Br9NtWe}+1qZlX3{GHvkNXr(Ld*}p#3A10@owzwPm zt@L`Il~&zL^#OomFdF}*A({XHus7|vSaW;(4FHHsCM3dE@(U_EJNmMK{JQ`E002ov JPDHLkV1n~oUqJu> literal 0 HcmV?d00001 diff --git a/img/sort_down_16.png b/img/sort_down_16.png new file mode 100644 index 0000000000000000000000000000000000000000..ba0c55826e41f8d23ee5c223f0d2836214cdac0d GIT binary patch literal 741 zcmVfB!q<)x;i_P7kH$G?_FhL4>{0q9SlnEegXzYz)Um`xY*vO<~Ik zdg@f*AO&qK(n@;?Q%El>=|zT73m=Vl?(4MBN^6Wh_%?_0`#79)Ace{!I)S68x>(VZ zx>!-i&sr*Jso)#8O;uLB{7r$suqd!-`MR1b1&^+U%t=EgzyP()!8d1K)=0Q*uGF;7 zmWHlz!-%FBwRFW=>{+4DVFBzucg3;i@&&m;CqsoJ5-l z2Va%1J>Y*k)P*Asf{^K*MwUL4?*5w;&R< z!z7ZU{ys8@X(dS}4T^m`c>3{v=h=#P>&qiL$`{46cj~HV2TSXhy&sNa+DQy6fnknw zGJ)ebIF?J&Gzj{(aH}VJ_x#@8jjDH#|A;;#=cKE^1q8tcYy=lUA&3YDVBz8w@Zj)G zY#wKS4R{xOU8HqRC z(klDPoQRI*4Ver_bhOI;-R|9J3t8L1wXn4`230zy(h-#gN`u@@Nc>crR@ql(M07kM z^Y=#$josC~IIl%|!Xh2{B6s{E9VH^2+eKa+6Spz19l)6Er4zqG@~+DB!y@hTL|Su2 z;vsP_=HK}z{Ab8e(}JjUSBX5S5~DG%6+oV4@Lv+i2H-=}isK*8EjtdVnvcs)`q&D?A)uX#*%8mItx^FSyV>p~V+o;6uHC(UKlZwB#$SaM}< zwOqFAAvr#n{RD0dq$gn{ZTQlKD5^MPGV@OBOV~eJa5_;UQnXzbSGALq3e&?7i$H7& zW~X3gGO@=Uh-=6y#|(!qpu%V5ZlX%|__vF)igx^q;PVK$84$O@@j)yNoQ%Y4j0QA} zh7sA-#~5f8@a>q0)RcxjfviI9#1kC}z<@}UpP0E~z&OOM$b|peU{Lk?B9FXF^6Qi@ zov0JR7?Cj0i7ygHl2{f3i4+zd%g2Y&-Vp$`?%dF!`qzsKONt6MjT2@%I)&qCj03{8 zv5bY(9xQA;_z0*RjJCp8UbP)a&Vf4qU~NZ!Vdl1R{hsOQB$n|ZwT-2{NMoZ&AzkGm zUC*1AP}BbY2D+1T;51f+c76|rrJ62FF^uy zH?orPo??w4Oo&q~>+BX)n=^Sku}r|A3FEd9ojj 0) + { + var els = document.querySelectorAll(selector); + } + else + { + var els = IUI.get(selector); + if (els != null) + + } +*/ + + if (typeof(this) == "undefined" || this == window) + { + var o = IUI.get(selector); + if (o) + return o; + else + { + var el; + + if (typeof Node === "object" ? o instanceof Node : ( + selector && typeof selector === "object" && typeof selector.nodeType === "number" && typeof selector.nodeName==="string") || selector === window) + { + el = selector; + } + else if (typeof selector === 'string' || selector instanceof String) + { + if (selector[0] == ".") + el = document.getElementsByClassName(selector.substr(1)); + else + el = document.getElementById(selector); + } + + if (el) + { + var rt = {}; + var makeFunc = function(module){ + return function(){ + if (el instanceof HTMLCollection) + { + let rt = []; + for(var i = 0; i < el.length; i++) + { + var args = [el[i]]; + for(var j = 0; j < arguments.length; j++) + args.push(arguments[j]); + rt.push(IUI.modules[module].init.apply(this, args)); + } + return rt; + } + else + { + var args = [el]; + for(var i = 0; i < arguments.length; i++) + args.push(arguments[i]); + return IUI.modules[module].init.apply(this, args); + } + } + }; + + for(var m in IUI.modules) + rt[m] = makeFunc(m); + + return rt; + } + } + } + + /* + IUI.registry.push(this); + + + if (selector) + { + if( Object.prototype.toString.call( selector ) === '[object Array]' ) + { + this.el = []; + selector.forEach(function(i){ + this.el.push(query(i)); + }); + } + else + this.el = query(selector); + + this.events = {}; + this.id = this.el.id; + } + */ +} +/* +Array.prototype.each = function(func) +{ + if (this instanceof Array) + { + for(var i = 0; i < this.length; i++) + if (func(this[i], i)) + break; + } + else + for(var i in this) + if(func(this[i], i)) + break; +} + + +Array.prototype.distinct = function(field) +{ + var rt = []; + + this.forEach(function(item) + { + if (rt.indexOf(item[field]) == -1) + rt.push(item[field]); + }); + + return rt; +} +/* +iui.prototype.ec = function(className, parent) +{ + if (parent) + return parent.getElementsByClassName(className); + else + return document.getElementsByClassName(className); +} + +iui.prototype.ne = function(tag) +{ + return document.createElement(tag); +} +*/ + + +/* +iui.prototype.destroy = function() +{ + IUI.registry.splice(IUI.registry.indexOf(this.el), 1); +}; + +iui.prototype.register = function(event) +{ + this.events[event] = []; + return this; +}; + +iui.prototype.emit = function(event) +{ + var args = Array.prototype.slice.call(arguments, 1); + if (this.events && this.events[event]) + for(var i = 0; i < this.events[event].length; i++) + this.events[event][i].apply(this, args); + + return this; +}; + +iui.prototype.on = function(event, fn) +{ + if (this.events && this.events[event]) + this.events[event].push(fn); + else if (document.attachEvent) + this.el.attachEvent('on' + event, fn) + else // if (document.addEventListener) + this.el.addEventListener(event, fn, !0); + + return this; +}; +*/ + +/* +window.addEventListener("load", function(){ + for(var m in IUI.modules) + { + var elements = document.getElementsByTagName(m); + + } +}); +*/ diff --git a/src/Core/IUIElement.js b/src/Core/IUIElement.js new file mode 100644 index 0000000..d617cff --- /dev/null +++ b/src/Core/IUIElement.js @@ -0,0 +1,313 @@ +import { IUI } from "./IUI.js"; +import { Binding, BindingType, AttributeBindingDestination } from "./Binding.js"; + +export default class IUIElement extends HTMLElement { + constructor(defaults) { + super(); + + this._events = []; + this._data = null; + + for (var i in defaults) + if (this[i] == undefined) + this[i] = defaults[i]; + + this._register("data"); + } + + static get moduleName(){ + return this.name.toLowerCase(); + } + + + get cssClass(){ + if (this.hasAttribute("css-class")) + return this.getAttribute("css-class"); + //else + // return this.constructor.moduleName; + } + + set cssClass(value) + { + this.classList.remove(this.cssClass); + this.setAttribute("css-class", value); + this.classList.add(value); + } + + async render() { + await this._renderElement(this, this._data); + } + + _getParentData() { + var p = this.parentElement; + do { + if (p.data !== undefined) + return p.data; + } while (p = p.parentElement); + + return undefined; + } + + async setData(value) { + //if (this.bindings === undefined) + // this.updateBindings(); + + + this._data = value; + this._emit("data", {data: value}); + await this._renderElement(this, value); + + //console.log("IUI: SetData", value, this.tagName); + } + + get data() { + return this._data; + } + + async revert(){ + //if (this.revertMap != null) + //{ + //if (data == undefined) + // await this.revertMap.render(this._getParentData()); + //else + // await this.revertMap.render(data); + // revert parents + + let e = this; + + do { + var p = e.parentElement; + + if (e.revertMap != null) + await e.revertMap.render(p?.data); + } while (e = p); + //} + } + + async update(data) { + if (data == undefined) { + // get parent data + if (this.dataMap != null) { + await this.dataMap.render(this._getParentData()); + } else + await this.setData(this.data); + } + else { + // apply specified data + if (this.dataMap != null) { + await this.dataMap.render(data); + } else + await this.setData(data); + } + } + + async _renderElement(element, data) { + if (!element.bindings) { + return; + } + + + //console.log("_renderElement " + element.getAttribute("ref"), element); + + //if (element.hasAttribute("debug")) + // debugger; + + // render attributes & text nodes + for (var i = 0; i < element.bindings.length; i++) + await element.bindings[i].render(data); + + // render children + for (var i = 0; i < element.children.length; i++) { + let e = element.children[i]; + if (e instanceof IUIElement) + // @TODO should check if the element depends on parent or not + if (e.dataMap != null) { + // if map function failed to call setData, we will render without it + if (!(await e.dataMap.render(data))) + await e.render(); + } + else + await e.setData(data); + else { + if (e.dataMap != null) + await e.dataMap.render(data); + else + e.data = data; + + //let data = e.mapData(data); + await this._renderElement(e, e.data); + } + } + } + + + // this meant to be inherited + modified() { + + } + + get data() { + return this._data; + } + + connectedCallback() { + + if (this.hasAttribute("css-class")) + this.classList.add(this.getAttribute("css-class")); + else + { + let className = this.constructor.moduleName; + + this.setAttribute("css-class", className); + this.classList.add(className); + } + } + + disconnectedCallback() { + // console.log("removed", this); + } + + adoptedCallback() { + + //console.log("adopted", this); + + } + + //appendChild(node) { + // // do some bindings + // super.appendChild(node); + //} + + created() { + + } + + create() { + //this.updateBindings(); + } + + destroy() { + + console.log("Destroy", this); + IUI.registry.splice(IUI.registry.indexOf(this), 1); + if (this.parentNode) + this.parentNode.removeChild(this); + } + + + + _make_bindings(element) { + + // ::Attribute + // : Field + // async:: Async Attribute + // async: Async Field + // @ Event + + let bindings = []; + + + //if (element.hasAttribute("debug")) + // debugger; + + // compile attributes + for (var i = 0; i < element.attributes.length; i++) { + + let b = Binding.create(element.attributes[i]); + + if (b != null) { + if (b.type == BindingType.HTMLElementDataAttribute || b.type == BindingType.IUIElementDataAttribute) + element.dataMap = b; + else if (b.type == BindingType.RevertAttribute) + element.revertMap = b; + else + bindings.push(b); + } + } + + // compile nodes + for (var i = 0; i < element.childNodes.length; i++) { + let e = element.childNodes[i]; + if (e instanceof IUIElement) { + // @TODO: check if the IUI element handles the binding + this._make_bindings(e); + } + else if (e instanceof HTMLElement) { + this._make_bindings(e); + } + else if (e instanceof Text) { + let b = Binding.create(e); + if (b != null) + bindings.push(b); + } + } + + element.bindings = bindings; + } + + + _emit(event, values) { + //var args = Array.prototype.slice.call(arguments, 1); + var e = new CustomEvent(event, values); + for (var i in values) { + if (e[i] === undefined) + e[i] = values[i]; + } + + try + { + return this.dispatchEvent(e); + } + catch(ex) + { + console.log(ex); + } + } + + updateBindings() { + this._make_bindings(this); + } + + _encapsulateEvent(code){ + return `try {\r\n ${code} \r\n}\r\n catch(ex) { console.log(ex.name + ":" + ex.message, this); }`; + } + + _register(event) { + this._events.push(event); + + if (this.hasAttribute("@" + event)) { + let handler = this.getAttribute("@" + event); + if (handler.match(/^[A-Za-z\$_]+(?:[\$_][A-Za-z0-9]+)*$/g) === null) { + try + { + let func = new Function("event", this._encapsulateEvent(this.getAttribute("@" + event))); + this.addEventListener(event, func); + } catch (ex) + { + console.log(ex); + } + } + else { + let func = this[handler]; + if (func instanceof Function) { + this.addEventListener(event, func, false); + } + else { + // might be added in the future + let func = new Function("event", `this["${handler}"](event)`); + this.addEventListener(event, func, false); + } + } + } + } + + off(event, fn) { + this.removeEventListener(event, fn); + return this; + } + + on(event, fn) { + this.addEventListener(event, fn, false); + return this; + } +} \ No newline at end of file diff --git a/src/Data/DataList.js b/src/Data/DataList.js new file mode 100644 index 0000000..265b1ea --- /dev/null +++ b/src/Data/DataList.js @@ -0,0 +1,14 @@ +import IUIElement from "../Core/IUIElement.js"; + +export default IUI.module(class DataList extends IUIElement +{ + constructor(properties) + { + super(properties); + } + + create() + { + this.style.display = "none"; + } +}); \ No newline at end of file diff --git a/src/Data/Field.js b/src/Data/Field.js new file mode 100644 index 0000000..d0c8097 --- /dev/null +++ b/src/Data/Field.js @@ -0,0 +1,62 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + + +export default IUI.module(class Field extends HTMLElement +{ + constructor() + { + super(); + } + + static get moduleName(){ + return this.name.toLowerCase(); + } + + create() + { + // if (this.formatter === undefined) { + // // load script + // for (var i = 0; i < this.children.length; i++) + // if (this.children[i] instanceof HTMLScriptElement) { + // //this.formatter = new Function this.children[i]. + // } + // } + + //this.style.display = "none"; + } + + get name() { + return this.getAttribute("name"); + } + + set name(value) { + this.setAttribute("name", value); + } + + serialize(tag) { + + let template = document.createElement("template"); + let node = document.createElement(tag ?? "div"); + let width = null, name = null, type = null; + + // copy attributes + for (var i = 0; i < this.attributes.length; i++) { + let attr = this.attributes[i]; + if (attr.name == "width") + width = attr.value; + else if (attr.name == "name") + name = attr.value; + else if (attr.name == "type") + type = attr.value; + else + node.setAttribute(attr.name, attr.value); + } + + // copy html + + node.innerHTML = this.innerHTML; + + return { node, width, name, type }; + } +}); \ No newline at end of file diff --git a/src/Data/Form.js b/src/Data/Form.js new file mode 100644 index 0000000..4e29e36 --- /dev/null +++ b/src/Data/Form.js @@ -0,0 +1,82 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Form extends IUIElement { + constructor() { + super(); + //this.form = {}; + } + + static _copy(val){ + if (typeof val === 'object' && val !== null) + { + let rt = {}; + for(var i in val) + if (val[i] instanceof Array) + // copy array + rt[i] = [...val[i]]; + else + rt[i] = val[i]; + + return rt; + } + else + return val; + } + + async create() { + //var elements = this.querySelectorAll("*[field]"); + //for (var i = 0; i < elements.length; i++) + // this.form[elements[i].getAttribute("field")] = elements[i]; + } + + async setData(value) { + this.original = value; + //var copy = {}; + //Object.assign(copy, value); + super.setData(Form._copy(this.original)); + //super.setData({ ...this.original }); + } + + + async reset() { + //super.setData({ ...this.original }); + super.setData(Form._copy(this.original)); + return this; + } + + // @TODO: Remove this when esiur adds suport to partially modified arrays with modified flag + static _areEqual(ar1, ar2) + { + if (!(ar1 instanceof Array) || !( ar2 instanceof Array)) + return false; + + if (ar1.length != ar2.length) + return false; + + for(var i = 0; i < ar1.length; i++) + if (ar1[i] != ar2[i]) + return false; + + return true; + } + + get diff() { + if (this.original == null) + return this._data; + + + var rt = {}; + for (var i in this._data) + if (this._data[i] != this.original[i]) + { + if (this._data[i] instanceof Array && Form._areEqual(this._data[i], this.original[i])) + continue; + else + rt[i] = this._data[i]; + } + + return rt; + } + +}); \ No newline at end of file diff --git a/src/Data/Include.js b/src/Data/Include.js new file mode 100644 index 0000000..8bb40da --- /dev/null +++ b/src/Data/Include.js @@ -0,0 +1,68 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Include extends IUIElement +{ + constructor() + { + super(); + this.refs = {}; + } + + async create() + { + //console.log("Create ...", this.getAttribute("src")); + + if (this.getAttribute("src") == "views/studio/realestate.html") + console.log("Create include"); + + if (this.hasAttribute("src")) { + + let src = this.getAttribute("src").replace(/^\/+|\/+$/g, ''); + let x = await fetch(src); + + if (x.status !== 200) + return; + + let t = await x.text(); + + this.innerHTML = t; + + let xeval = (code) => eval(code); + + // call create for the new elements + var newElements = this.querySelectorAll("*"); + for (var i = 0; i < newElements.length; i++) { + var el = newElements[i]; + + // set route for all elements + //newElements[i].route = this.route; + el.route = this.route; + el.view = this; + if (el.hasAttribute("ref")) { + this.refs[el.getAttribute("ref")] = el; + } + + if (el instanceof HTMLScriptElement) { + // this because HTML parser don't evaluate script tag + let func = new Function("//# sourceURL=iui://" + src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());// "return " + el.text + ";"); + + let rt = func.call(el.parentElement); + + //let rt = xeval.call(el.parentElement, "//# sourceURL=iui://" + src + Math.round(Math.random() * 10000) + "\r\n (" + el.text + ")"); + if (typeof (rt) === "object") { + for (var k in rt) + el.parentElement[k] = rt[k]; + } + } + } + } + + //this.updateBindings(); + } + + get src() + { + return this._src; + } +}); \ No newline at end of file diff --git a/src/Data/Layout.js b/src/Data/Layout.js new file mode 100644 index 0000000..09c5fb8 --- /dev/null +++ b/src/Data/Layout.js @@ -0,0 +1,64 @@ +import IUIElement from "../Core/IUIElement.js"; +import Field from './Field.js'; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Layout extends HTMLElement// IUIElement +{ + constructor() + { + super(); + } + + static get moduleName(){ + return this.name.toLowerCase(); + } + + //create() + //{ + // for (var i = 0; i < this.children.length; i++) + // if (this.children[i] instanceof Field) { + // this[this.children[i].name] = this.children[i]; + // this.fields.push(this.children[i]); + // } + + // this.style.display = "none"; + //} + + static getHTML(el, removeSelf = false) { + for (var i = 0; i < el.children.length; i++) + if (el.children[i] instanceof Layout) { + let layout = el.children[i]; + let rt = layout.innerHTML; + + if (removeSelf) + el.removeChild(layout); + return rt; + } + + return null; + } + + static get(el, tag, removeSelf = false, collection = false) { + + for (var i = 0; i < el.children.length; i++) + if (el.children[i] instanceof Layout) { + let layout = el.children[i]; + let rt = collection ? {} : []; + for (var j = 0; j < layout.children.length; j++) { + if (layout.children[j] instanceof Field) { + let fd = layout.children[j].serialize(tag); + if (collection) + rt[fd.name] = fd; + else + rt.push(fd); + } + } + + if (removeSelf) + layout.parentElement.removeChild(layout); + return rt; + } + + return null; + } +}); \ No newline at end of file diff --git a/src/Data/Repeat.js b/src/Data/Repeat.js new file mode 100644 index 0000000..982b0e5 --- /dev/null +++ b/src/Data/Repeat.js @@ -0,0 +1,273 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Repeat extends IUIElement +{ + constructor() + { + super({ _data: [] }); + this.list = []; + } + + _isDirectDecedent(x){ + while(x = x.parentElement) + if (x == this) + return true; + else if (x instanceof Repeat && x != this) + return false; + } + + create() + { + ////////////// + /// Create /// + ////////////// + + if (this._created) + debugger; + + this._created = true; + + // create template to speed avoid HTML parsing each time. + let repeatables = this.querySelectorAll("*[repeat]"); + + repeatables = Array.from(repeatables).filter(x=>this._isDirectDecedent(x)); + + if (repeatables.length > 0) + { + + this._repeatNode = repeatables[0].cloneNode(true); + this._container = repeatables[0].parentElement; + this._beforeNode = repeatables[0].nextSibling; + repeatables[0].parentElement.removeChild(repeatables[0]); + } + else + { + if (this.children.length > 0) + this._repeatNode = this.children[0].cloneNode(true); + else + this._repeatNode = document.createElement("div"); + + this.innerHTML = ""; + this._container = this; + } + + + var newElements = this.querySelectorAll("*"); + for (var i = 0; i < newElements.length; i++) + newElements[i].repeat = this; + + var self = this; + + /* + this._repeatModified = function(propertyName, value) + { + + var bindings = self._repeatBindings.get(this); + + // update view + for(var i = 0; i < bindings.length; i++) + { + if (bindings[i].props) + { + for(var j = 0; j < bindings[i].props.length; j++) + { + if (bindings[i].props[j] == propertyName) + { + bindings[i].node.data = bindings[i].func.apply(self, + [this, this, this, this, 0, 0]); + + break; + } + } + } + } + }; + */ + } + + + clear() + { + for (var i = 0; i < this.list.length; i++) + this._container.removeChild(this.list[i]); + this.list = []; + this._data = []; + } + + + get data() { + return super.data; + } + + get length() { + return this._data.length; + } + + _assign(node, index) { + + // update fields + + // this so we won't mess with i-include view + if (node.view == undefined) + node.view = this.view; + + node.rotue = this.route; + node.index = index; + + // update references + if (node.hasAttribute("ref")) + { + let ref = node.getAttribute("ref"); + // create new array + if (!(this.view.refs[ref] instanceof Array)) + this.view.refs[ref] = []; + this.view.refs[ref][index] = node; + } + + //Object.assign(node, customFields); + for (var i = 0; i < node.children.length; i++) + this._assign(node.children[i], index); + } + + async setData(value) + { + + + // this to avoid interruption by an event + if (this._busy) + { + console.log("Busy", this); + return false; + } + + //console.log("RPT: SetData", value); + this._busy = true; + + // var id = Math.random(); + + //console.log("SetData " + this.getAttribute("ref") + " " + id, value); + //console.trace(); + // clear + this.clear(); + + if (value instanceof Structure) + value = value.toPairs(); + else if (value == null || !(value instanceof Array || value instanceof Int32Array)) + value = []; + + + //debugger; + await super.setData(value); + + + for (let i = 0; i < value.length; i++) { + + ///console.log("ST1"); + //let content = this.template.content.cloneNode(true); + //let nodes = content.childNodes; + + let e = this._repeatNode.cloneNode(true); + + this.list.push(e); + + + //console.log("ST2"); + + + // Create node + if (e instanceof IUIElement) + await e.create(); + + // console.log("ST3"); + // Create children + //console.log("Create repeat " + i, this, e); + + await IUI.create(e); + + //console.log("Created repeat " + i, this, e); + + + //console.log("ST4"); + + this._make_bindings(e) + this._container.insertBefore(e, this._beforeNode); + + this._assign(e, i);// { view: this.view, route: this.route, index: i }); + + + //console.log("ST5"); + + if (e instanceof IUIElement) { + // @TODO should check if the element depends on parent or not + if (e.dataMap != null) { + // if map function failed to call setData, we will render without it + if (!(await e.dataMap.render(value[i]))) + await e.render(); + } + else{ + await e.setData(value[i]); + // console.log("ST6.1"); + } + } + else { + if (e.dataMap != null) + await e.dataMap.render(value[i]); + else + e.data = value[i]; + + // console.log("ST6.2", e); + await this._renderElement(e, e.data); + // console.log("ST6.3"); + } + + // if (node.dataMap != null) { + // await node.dataMap.render(value[i]); + // this._renderElement(node, node.data); + // } + // else { + + // node.data = value[i]; + // this._renderElement(node, node.data); + // } + + /* + + var newElements = content.querySelectorAll("*"); + + while (nodes.length > 0) { + let n = nodes[0]; + //n.index = i; + if (n instanceof HTMLElement) + n.setAttribute(":data", `d[${i}]`); + this._container.appendChild(n); + } + + // this has to be called after appending the child otherwise node will be HTMLElement and not IUIElement , bug maybe in webkit ? + for (var j = 0; j < newElements.length; j++) { + let el = newElements[j]; + + // set route for all elements + el.index = i; + el.view = this; + el.route = this.route; + //newElements[j].route = this.route; + if (el instanceof IUIElement) + el.create(); + } + */ + + } + + + //super._uiBindings = null; + //super.updateBindings(); + + this._emit("modified", { data: value, property: "data" }); + + // console.log("SetDataEnd " + this.getAttribute("ref") + " " + id); + + this._busy = false; + } + +}); \ No newline at end of file diff --git a/src/Data/TableRow.js b/src/Data/TableRow.js new file mode 100644 index 0000000..10748ea --- /dev/null +++ b/src/Data/TableRow.js @@ -0,0 +1,15 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + + +export default IUI.module(class TableRow extends IUIElement { + constructor() { + super(); + } + + create() { + //this.style.display = "none"; + this.style.display = "table-row"; + console.log("TR"); + } +}); \ No newline at end of file diff --git a/src/Router/Link.js b/src/Router/Link.js new file mode 100644 index 0000000..c6a7d5a --- /dev/null +++ b/src/Router/Link.js @@ -0,0 +1,70 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Link extends IUIElement +{ + constructor() + { + //debugger; + super({ cssClass: 'link' }); + + // super({ cssClass: 'link' }); + this._register("route"); + this.addEventListener("click", + (e) => { + + var r = this.getBoundingClientRect(); + this.style.setProperty("--x", (e.x - r.x) + "px"); + this.style.setProperty("--y", (e.y - r.y) + "px"); + + this.style.setProperty("--w", r.width + "px"); + this.style.setProperty("--h", r.height + "px"); + + this.classList.remove(this.cssClass + "-clicked"); + void this.offsetWidth; + this.classList.add(this.cssClass + "-clicked"); + + let url = this.getAttribute("href"); + + let ok = this._emit("route", { url, cancelable: true, query: this.query}); + if (!ok) + return; + + + //if (url == "#") + // url = router.current.link; + // return; + + let target = this.hasAttribute("target") ? document.getElementById(this.getAttribute("target")) : null; + + + if (url == ":back") { + window.router.back(); + return; + } + + + + if (this.query)// || this.hasAttribute(":data")) + window.router.navigate(url || router.current.url, this.query, target); + else if (url != null) + window.router.navigate(url, undefined, target); + } + ); + + //this._register("click"); + } + + get link() { + return this.getAttribute("href"); + } + + set link(value) { + this.setAttribute("href", value); + } + + create() + { + + } +}); \ No newline at end of file diff --git a/src/Router/Route.js b/src/Router/Route.js new file mode 100644 index 0000000..97a6b11 --- /dev/null +++ b/src/Router/Route.js @@ -0,0 +1,159 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; +import Router from "./Router.js"; + +export default IUI.module(class Route extends IUIElement { + + constructor() { + super(); + + this.routes = []; + this.refs = {}; + + this._register("show"); + this._register("hide"); + } + + async setData(value) { + if (this.hasAttribute("debug")) + debugger; + + return await super.setData(value); + } + + _updateLinks() { + for (var i = 0; i < this.children.length; i++) { + if (this.children[i] instanceof Route) { + this.routes.push(this.children[i]); + window.router.add(this.children[i], this); + i--; + } + } + } + + get link() { + var link = this.name; + var parent = this.parent; + while (parent != null) { + link = parent.name + "/" + link; + parent = parent.parent; + } + + return link; + } + + get name() { + return this.getAttribute("name"); + } + + get src() { + return this.getAttribute("src"); + } + + get dst() { + return this._dst || this.getAttribute("dst"); + } + + set dst(value){ + this._dst = value; + } + + get caption() { + return this.getAttribute("caption"); + } + + get private() { + return this.hasAttribute("private"); + } + + get icon() { + return this.getAttribute("icon"); + } + + _getParent() { + let e = null;//this.parentElement; + while (e = this.parentElement) { + if (e instanceof Route || e instanceof Router) + return e; + } + + return null; + } + + + async create() { + + //window.router.add(this); + this._updateLinks(); + + if (this.hasAttribute("src")) { + + let src = this.getAttribute("src").replace(/^\/+|\/+$/g, ''); + let x = await fetch(src); + if (x.status != 200) + return; + + let t = await x.text(); + + this.innerHTML = t; + + //let xeval = (code) => eval(code); + } + + // call create for the new elements + var newElements = this.querySelectorAll("*"); + for (var i = 0; i < newElements.length; i++) { + // set route for all elements + var el = newElements[i]; + // newElements[i].route = this; + el.view = this; + el.route = this; + + if (el.hasAttribute("ref")) { + this.refs[el.getAttribute("ref")] = el; + } + + if (el instanceof HTMLScriptElement) { + // this because HTML parsers don't evaluate script tag + // xeval.call(el.parentElement, "//# sourceURL=iui://" + src + "\r\n" + el.text); + + //let func = new Function("//# sourceURL=iui://" + + // src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim()); + + let func = new Function("//# sourceURL=iui://" + this.link + + "\r\n return " + el.text.trim()); + + let rt = func.call(el.parentElement); + + if (typeof (rt) === "object") { + for (var k in rt) + el.parentElement[k] = rt[k]; + } + } + } + } + + created() { + //this.updateBindings(); + } + + set(value) { + if (value == this.visible) + return; + + if (value) { + + this.setAttribute("selected", ""); + this._emit("show"); + } + else + { + this.removeAttribute("selected"); + this._emit("hide"); + } + } + + get visible() { return this.hasAttribute("selected"); } + set visible(value) { this.set(value); } + +}); diff --git a/src/Router/Router.js b/src/Router/Router.js new file mode 100644 index 0000000..6b02bdf --- /dev/null +++ b/src/Router/Router.js @@ -0,0 +1,334 @@ +import IUIElement from "../Core/IUIElement.js"; +import Route from "./Route.js" +import Target from "./Target.js"; +import { IUI } from "../Core/IUI.js"; + + +export default IUI.module(class Router extends Target +{ + + constructor() + { + super({routes: [], _states: new Map(), active: null, cssClass: "router"}); + + this._history = []; + + + //IUI._router = this; + + //Object.defineProperty(window, "router", { + // get() { + // if (!IUI._router.isConnected) + // IUI._router = document.getElementsByTagName("i-router")[0]; + // return IUI._router; + // } + //}); + + } + + _getRouteParent(route) { + let e = null; + + while (e = route.parentElement) { + if (e instanceof Route || e instanceof Router) + return e; + } + + return null; + } + + add(route, parent = null) { + if (parent == null) { + this.routes.push(route); + } + else { + route.parent = parent; + this.appendChild(route); + //parent.routes.push(route); + } + } + + _routeInPath(name, routes) + { + for (var i = 0; i < routes.length; i++) + if (routes[i].name == name) + return routes[i]; + return null; + } + + getRoute(url, data) { + let p = url.split("/"); + + let searchRoutes = this.routes; + + for (var i = 0; i < p.length; i++) { + var route = this._routeInPath(p[i], searchRoutes); + + if (route == null) + return [null, null]; + + if (i == p.length - 1) { + // return [destination state route (link, icon,..etc) , actual route to view] + if (route.dst == null) + return [route, route]; + else { + + let dst = route.dst instanceof Function ? route.dst(data) : route.dst; + let url = dst.replace(/^[/]*(.*?)[/]*$/g, '$1').trim(); + return [route, this.getRoute(url)[1]]; + } + } + + searchRoutes = route.routes; + } + + } + + back() { + //if (this._history.length > 1) { + // let last = this._history[this._history.length - 2]; + // this.navigate(last.url, last.data, last.target); + //} + + window.history.back(); + } + + _toQuery(o) { + let rt = []; + for (let i in o) + if (o[i] == undefined) + rt.push(i); + else + rt.push(i + "=" + encodeURI(o[i].toString().replace("&", "&&")));///encodeURIComponent(o[i])); + return rt.join("&"); + } + + _fromQuery(q) { + let kv = q.replace("&&", "\0").split('&'); + let rt = {}; + for (let i = 0; i < kv.length; i++) { + let d = kv[i].replace("\0", "&").split('=', 2); + let v = decodeURI(d[1] || ''); //decodeURIComponent(d[1] || ''); + if (v != null && v.trim() != '' && !isNaN(v)) + v = new Number(v); + rt[d[0]] = v; + } + return JSON.parse(JSON.stringify(rt)); + } + + async navigate(url, data, target, state) + { + let q = url.match(/^\/*(.*?)\?(.*)$|^\/*(.*)$/); + + //debugger; + + var path; + + // do we have a query string ? + if (q[2] !== undefined) { + path = q[1]; + data = this._fromQuery(q[2]); + url = path + "?" + q[2]; + } + // do we have data ? + else if (data !== undefined) { + path = q[3]; + url = path + "?" + this._toQuery(data); + } + else { + path = q[3]; + url = path; + } + + + let [stateRoute, viewRoute] = this.getRoute(path, data); + + if (stateRoute == null) + return; + + let ok = this._emit("navigate", { url, stateRoute, viewRoute, base: path, data, cancelable: true }); + + if (!ok) + return; + + // destination view not found + if (viewRoute == null) { + console.log(`Destination route not found ${stateRoute.dst}`); + viewRoute = stateRoute; + } + + + //let state = null; + + //if (data !== undefined) { + // for (let [k, v] of this._states) + // if (v == data) { + // state = k; + // break; + // } + + // if (state == null) { + // state = Math.random().toString(36).substr(2, 10); + // this._states.set(state, data); + // } + //} + + + if (!(target instanceof Target)) + target = this; + + + if (state == null) { + let id = Math.random().toString(36).substr(2, 10); + state = { id, url, data, target, stateRoute, viewRoute }; + this._states.set(id, state); + history.pushState(id, stateRoute.caption, this._hash ? "#" + url : "/" + url); + } + + this._history.push(state.id);// { url, data, target, stateRoute, viewRoute }); + + target.show(viewRoute, this.active); + viewRoute.set(true); + + + this.active = viewRoute; + + + //{ url: "/", data: null, target: null }; + this._emit("route", { route: stateRoute }); + + viewRoute.query = data || {}; + stateRoute.query = viewRoute.query; + + + target.setLoading(true); + + if (stateRoute.dataMap != null) { + // if map function failed to call setData, we will render without it + if (!(await stateRoute.dataMap.render(data || {}))) + await stateRoute.render(); + + if (viewRoute != stateRoute) + await viewRoute.setData(stateRoute.data); + } + else //if (data !== undefined) + await viewRoute.setData(data); + + target.setLoading(false); + + } + + hide() { + // do nothing, we're not here to hide. + } + + refresh() { + + let state = this.current; + this.navigate(state.url, state.data, state.target, state); + + //this.current.render(); + //this.current.data = this.current.data; + //if (updateAttributes) + // this.current.updateAttributes(true); + } + + show(route, active) { + super.show(route, active); + + + } + + get current() { + return this._states.get(history.state);//.viewRoute; + //return this._history[this._history.length - 1].viewRoute; + } + + get previous() { + + if (this._history.length > 2) + return this._states.get(this._history[this._history.length - 2]);//.viewRoute; + else + return null; + } + + create() { + + // save origin + this.origin = window.location.pathname + window.location.search; + } + + destroy() { + console.log("Destroyed", this); + } + + created() + { + + if (this.hasAttribute("type") && this.getAttribute("type").toLowerCase() == "hash") + this._hash = true; + + + /// find all children + for (var i = 0; i < this.children.length; i++) { + let e = this.children[i]; + if (e instanceof Route) { + this.add(e); + if (e.visible) + this.navigate(e.name); + } + } + + this._emit("created"); + + //console.log("Router created", this); + } + + connectedCallback() { + //console.log("New router", this); + + window.router = this; + + let self = this; + + window.addEventListener("popstate", function (event) { + + //console.log(event); + let stateId = event.state; + let path; + + if (self._hash) { + path = window.location.hash; + + if (path.length > 0) + path = path.substr(1); + } + else { + path = window.location.pathname; + } + + if (stateId != null) { + + if (stateId != self._history[self._history.length -1]) { + //this._lastStateId = stateId; + let state = self._states.get(stateId); + self.navigate(path, state.data, state.target, state); + } + else { + console.log("SAME"); + } + } + else { + this._lastState = null; + self.navigate(path, undefined, undefined, {}); + } + //alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); + console.log(document.location.hash, event.state); + }); + + this._register("navigate"); + this._register("route"); + this._register("created"); + } + +}); \ No newline at end of file diff --git a/src/Router/Target.js b/src/Router/Target.js new file mode 100644 index 0000000..b4c84a5 --- /dev/null +++ b/src/Router/Target.js @@ -0,0 +1,60 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; +import Route from "./Route.js"; + +export default IUI.module(class Target extends IUIElement { + constructor(properties) { + super(IUI.extend(properties, { cssClass: 'target' })); + + this._register("show"); + this._register("hide"); + + } + + setLoading(value) + { + if (value) + this.classList.add(this.cssClass + "-loading"); + else + this.classList.remove(this.cssClass + "-loading"); + } + + create() { + + } + + show(route, previous) { + + let previousTarget = previous?.target; + + route.target = this; + + for (var i = 0; i < this.children.length; i++) + if (this.children[i] instanceof Route && this.children[i] != route) { + this.children[i].set(false); + } + + //if (previous != null && previous != route && previous.target == this) { + // previous.set(false); + //} + //else + if (previousTarget != null && previousTarget != this) { + previousTarget.hide(this.active); + } + + + if (route.parentElement != this) + this.appendChild(route); + + this._emit("show", { route, previous}); + } + + hide(route) { + for (var i = 0; i < this.children.length; i++) + if (this.children[i] instanceof Route) { + this.children[i].set(false); + } + + this._emit("hide", { route }); + } +}); \ No newline at end of file diff --git a/src/UI/Background.js b/src/UI/Background.js new file mode 100644 index 0000000..48630d1 --- /dev/null +++ b/src/UI/Background.js @@ -0,0 +1,40 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Background extends IUIElement { + constructor() { + super({ cssClass: 'background' }); + + + this.classList.add(this.cssClass); + this._register("visible"); + + } + + + create() { + + } + + hide() { + return this.setVisible(false); + } + + show() { + return this.setVisible(true); + } + + setVisible(value) { + this.visible = value; + if (value) { + this.classList.add(this.cssClass + "-visible"); + } + else { + this.classList.remove(this.cssClass + "-visible"); + } + + this._emit("visible", value); + + return this; + } +}); \ No newline at end of file diff --git a/src/UI/Button.js b/src/UI/Button.js new file mode 100644 index 0000000..1fef3fb --- /dev/null +++ b/src/UI/Button.js @@ -0,0 +1,70 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Button extends IUIElement { + constructor() { + super({ cssClass: 'button' }); + + this.addEventListener("mousedown", (e)=>{ + + var r = this.getBoundingClientRect(); + this.style.setProperty("--x", (e.x - r.x) + "px"); + this.style.setProperty("--y", (e.y - r.y) + "px"); + + this.style.setProperty("--w", r.width + "px"); + this.style.setProperty("--h", r.height + "px"); + + this.classList.remove(this.cssClass + "-clicked"); + void this.offsetWidth; + this.classList.add(this.cssClass + "-clicked"); + + }, true); + + this._register("check"); + } + + get type() { + return this.getAttribute("type"); + } + + set type(value) + { + this.setAttribute("type", value); + } + + get checked() { + return this.hasAttribute("checked"); + } + + set checked(value) + { + if (value) + this.setAttribute("checked", ""); + else + this.removeAttribute("checked"); + } + + + get disabled() { + return this.getAttribute("disabled"); + } + + set disabled(value) { + this.setAttribute("disabled", value); + } + + + create() { + + if (this.type == "check") + { + this.addEventListener("click", ()=>{ + let checked = !this.checked; + this.checked = checked; + this._emit("check", {checked}); + }); + } + + //this.classList.add(this.cssClass); + } +}); \ No newline at end of file diff --git a/src/UI/Check.js b/src/UI/Check.js new file mode 100644 index 0000000..bccec3b --- /dev/null +++ b/src/UI/Check.js @@ -0,0 +1,58 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Check extends IUIElement { + constructor(properties) { + super(IUI.extend(properties, { cssClass: 'check' })); + + this._register("check"); + + this.on("click", () => { + this.checked = !this.checked; + }); + } + + get checked() { + return this.hasAttribute("checked"); + } + + set checked(value) { + this.check(value); + this._emit("check", { checked: value }); + } + + check(value) { + if (value) + this.setAttribute("checked", "checked"); + else + this.removeAttribute("checked"); + } + + create() { + this.field = this.getAttribute("field"); + } + + async setData(value) { + await super.setData(value); + if (value != null && this.field != null) + this.value = value[this.field]; + else if (this.field != null) + this.value = null; + } + + + modified(name, value) { + if (name == this.field) { + this.value = value; + } + } + + get value() { + return this.checked; + } + + set value(value) { + this.checked = value; + } + +}); \ No newline at end of file diff --git a/src/UI/DateTimePicker.js b/src/UI/DateTimePicker.js new file mode 100644 index 0000000..cbdc26b --- /dev/null +++ b/src/UI/DateTimePicker.js @@ -0,0 +1,314 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class DateTimePicker extends IUIElement { + + + constructor() { + super(); + } + + + + get layout() { + return this._layout; + } + + set layout(value) { + + if (value == this._layout) + return; + + this.innerHTML = ""; + + this._layout = value; + + this.calendar = document.createElement("div"); + this.calendar.className = this.cssClass + "-calendar"; + + + this.calendarContent = document.createElement("div"); + this.calendarContent.className = this.cssClass + "-calendar-content"; + + this.table = document.createElement("table"); + this.header = this.table.createTHead(); + this.body = this.table.createTBody(); + + this.calendarContent.appendChild(this.table); + + var tr = this.header.insertRow(); + + for (var i = 0; i < 7; i++) { + var td = tr.insertCell(); + td.innerHTML = this.layout.day.formatter((i + this.layout.weekStart) % 7); + td.className = this.cssClass + "-day"; + } + + this.tools = document.createElement("div"); + this.tools.className = this.cssClass + "-tools"; + + this.month = document.createElement("div"); + this.month.className = this.cssClass + "-month"; + this.monthName = document.createElement("div"); + this.monthName.className = this.cssClass + "-name"; + this.nextMonth = document.createElement("div"); + this.nextMonth.className = this.cssClass + "-next"; + this.previousMonth = document.createElement("div");; + this.previousMonth.className = this.cssClass + "-previous"; + + this.month.appendChild(this.previousMonth); + this.month.appendChild(this.monthName); + this.month.appendChild(this.nextMonth); + + this.year = document.createElement("div"); + this.year.className = this.cssClass + "-year"; + this.yearName = document.createElement("div"); + this.yearName.className = this.cssClass + "-name"; + this.nextYear = document.createElement("div"); + this.nextYear.className = this.cssClass + "-next"; + this.previousYear = document.createElement("div"); + this.previousYear.className = this.cssClass + "-previous"; + + this.year.appendChild(this.previousYear); + this.year.appendChild(this.yearName); + this.year.appendChild(this.nextYear); + + this.tools.appendChild(this.month); + this.tools.appendChild(this.year); + + let self = this; + + this.nextMonth.addEventListener("click", function () { + self._month = (self._month + 1) % 12; + self.render(); + }); + + this.previousMonth.addEventListener("click", function () { + self._month = (self._month + 11) % 12; + self.render(); + }); + + this.nextYear.addEventListener("click", function () { + self._year++; + self.render(); + }); + + this.previousYear.addEventListener("click", function () { + self._year--; + self.render(); + }); + + + for (let i = 0; i < 6; i++) { + tr = this.body.insertRow(); + + for (var j = 0; j < 7; j++) { + let td = tr.insertCell(tr); + td.className = this.cssClass + "-day"; + td.innerHTML = i + "x" + j; + td.addEventListener("click", function () { + self._day = parseInt(this.getAttribute("data-day")); + self._month = parseInt(this.getAttribute("data-month")); + self._year = parseInt(this.getAttribute("data-year")); + self._value.setDate(self._day); + self._value.setFullYear(self._year); + self._value.setMonth(self._month); + self.render(); + self._emit("select", { value: self._value }); + self._emit("modified", { value, property: "value" }); + }); + } + } + + this.calendar.appendChild(this.tools); + this.calendar.appendChild(this.calendarContent); + + /* + this.minutes = document.createElement("div"); + this.minutes.className = this.cssClass + "-clock"; + + for (var i = 1; i < 61; i++) { + var range = document.createElement("div"); + + range.className = this.cssClass + "-time"; + range.innerHTML = i; + this.minutes.appendChild(range); + + } + + this.hours = document.createElement("div"); + this.hours.className = this.cssClass + "-clock"; + + for (var i = 1; i < 25; i++) { + var range = document.createElement("div"); + + range.className = this.cssClass + "-time"; + range.innerHTML = i; + this.hours.appendChild(range); + + + } + */ + this.clock = document.createElement("div"); + this.clock.className = this.cssClass + "-clock"; + + for (let i = 0; i < 1440; i += this.layout.time.range) { + var range = document.createElement("div"); + range.className = this.cssClass + "-time"; + range.innerHTML = this.layout.time.formatter(i); + range.setAttribute("data-time", i); + this.clock.appendChild(range); + + range.addEventListener("click", function () { + var t = parseInt(this.getAttribute("data-time")); + var h = Math.floor(t / 60); + var m = Math.floor(t % 60); + self._value.setHours(h); + self._value.setMinutes(m); + self._emit("select", self._value); + self.render(); + }); + } + + //this.timeList = document.createElement("div"); + //this.timeList = + this.appendChild(this.calendar); + this.appendChild(this.clock); + // this.appendChild(this.minutes); +// this.appendChild(this.hours); + + this.value = new Date(); + } + + create() { + + var self = this; + + + this._register("select"); + + this.classList.add(this.cssClass); + + this.layout = { + day: { + formatter: function (index) { + return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][index]; + //return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][index]; + } + }, + month: { + formatter: function (index) { + return ["January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December"][index]; + } + }, + year: { + formatter: function (value) { + return value; + } + }, + time: { + formatter: function (value) { + var formatDigit = function (d) { return (d < 10) ? "0" + d : d; }; + var h = Math.floor(value / 60); + var m = Math.floor(value % 60); + return formatDigit(h) + ":" + formatDigit(m); + }, + range: 15 + }, + + weekStart: 5 + }; + } + + render() { + + var start = new Date(this._year, this._month, 1); + var offset = 1 - start.getDay() - (7 - this.layout.weekStart) % 7;//(this.weekStart > 3 ? (this.weekStart - 7) : this.weekStart); + + this.yearName.innerHTML = this.layout.year.formatter(this._year); + this.monthName.innerHTML = this.layout.month.formatter(this._month); + + var today = new Date(); + + for (var i = 0; i < 42; i++) { + var rowIndex = Math.floor(i / 7); + var cellIndex = i % 7; + + var td = this.body.rows[rowIndex].cells[cellIndex]; + + var d = new Date(this._year, this._month, offset + i); + + td.classList.remove(this.cssClass + "-different-month"); + + // gray it + if (d.getMonth() != this._month) + td.classList.add(this.cssClass + "-different-month"); + + if (d.getDate() == today.getDate() && d.getMonth() == today.getMonth() && d.getFullYear() == today.getFullYear()) + td.classList.add(this.cssClass + "-day-today"); + else + td.classList.remove(this.cssClass + "-day-today"); + + if (d.getDate() == this._value.getDate() + && d.getFullYear() == this._value.getFullYear() + && d.getMonth() == this._value.getMonth()) + td.classList.add(this.cssClass + "-day-selected"); + else + td.classList.remove(this.cssClass + "-day-selected"); + + + td.setAttribute("data-day", d.getDate()); + td.setAttribute("data-month", d.getMonth()); + td.setAttribute("data-year", d.getFullYear()); + + td.innerHTML = d.getDate(); + } + + + for (var i = 0; i < this.clock.children.length; i++) + this.clock.children[i].classList.remove(this.cssClass + "-time-selected"); + + var time = (this._value.getHours() * 60) + this._value.getMinutes(); + + if (time % this.layout.time.range == 0) + this.clock.children[time / this.layout.time.range].classList.add(this.cssClass + "-time-selected"); + } + + async setData(value) { + + await super.setData(value); + + + if (value != null && this.field != null) + this.value = this.data[this.field]; + + } + + get data() { + return super.data; + } + + modified(name, value) { + if (name == this.field) + this.value = value; + } + + set value(value) { + if (value && !isNaN(value.getTime())) { + this._value = value; + this._month = value.getMonth(); + this._year = value.getFullYear(); + this._day = value.getDate(); + this.render(); + this._emit("select", { value }); + this._emit("modified", { value, property: "value" }); + //this.modified("value", ); + //this.modified("modified", { value }); + } + } + + get value() { + return this._value; + } +}); \ No newline at end of file diff --git a/src/UI/Dialog.js b/src/UI/Dialog.js new file mode 100644 index 0000000..7e91afa --- /dev/null +++ b/src/UI/Dialog.js @@ -0,0 +1,308 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; +import IUIWindow from "./Window.js"; + +export default IUI.module(class IUIDialog extends IUIWindow +{ + static moduleName = "dialog"; + + constructor() + { + super({ + closeable: true, + resizeable: true, + draggable: false, + _dragging: false, + _expanding: false, + x: 0, + y: 0, + visible: false, + modal: false + } + ); + + var self = this; + + this._register("visible"); + this._register("resize"); + + this.on("close", function(){ + self.hide(); + }); + } + + create() + { + + super.create(); + var self = this; + + if (this.modal) + { + this.background = iui("iui_app_background"); + if (!this.background) + { + var bg = document.createElement("div"); + bg.id="iui_app_background"; + document.body.insertAdjacentElement("afterBegin", bg); + this.background = iui(bg).background(); + } + + + // this.modal.className = this.customClass + "-modal-background"; + + this.classList.add(this.customClass + "-modal"); + + } + + + this.loading = document.createElement("div"); + this.loading.className = this.customClass + "-loading"; + + if (this.loadingText) + this.loading.innerHTML = this.loadingText; + else + { + var lc = document.createElement("div"); + lc.className = this.customClass + "-loading-content"; + this.loading.appendChild(lc); + } + + this.body.appendChild(this.loading); + + + if (this.draggable) + { + this.addEventListener("mousedown", function(e){ + self._startDragging(e); + }); + } + else + { + this.header.addEventListener('mousedown', function (e) { + self._startDragging(e); + }); + } + + document.addEventListener('mouseup', function () { + self._stopDragging(); + self._stopExpanding(); + }); + + document.addEventListener('mousemove', function (e) { + if (self._dragging) + self._drag(e); + else if (self._expanding) + self._expand(e); + }); + + this.addEventListener("mousedown", function(e){ + if (self.style.cursor == "nwse-resize") + self._startExpanding(e); + }); + + this.addEventListener("mousemove", function(e) + { + if (self._dragging) + return; + + if (!self._expanding) + { + var x = (e.pageX || e.clientX + (document.documentElement.scrollLeft ? + document.documentElement.scrollLeft : + document.body.scrollLeft)) - self.offsetLeft; + var y = (e.pageY || e.clientY + (document.documentElement.scrollTop ? + document.documentElement.scrollTop : + document.body.scrollTop) ) - self.offsetTop; + + if (self.clientWidth - x < 5 && self.clientHeight - y < 5) + { + self.style.cursor = "nwse-resize"; + } + else + { + self.style.cursor = ""; + } + } + }); + + } + + _startDragging(e) + { + this._dragging = true; + + this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ? + document.documentElement.scrollLeft : + document.body.scrollLeft)) - this.offsetLeft; + this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ? + document.documentElement.scrollTop : + document.body.scrollTop) ) - this.offsetTop; + + //corssbrowser mouse pointer values + document.onselectstart = function() {return false}; + } + + _drag(e) + { + var x = e.pageX || e.clientX + (document.documentElement.scrollLeft ? + document.documentElement.scrollLeft : + document.body.scrollLeft); + var y = e.pageY || e.clientY + (document.documentElement.scrollTop ? + document.documentElement.scrollTop : + document.body.scrollTop); + this.style.top = (y - this._dragY ) + "px";// (y - self.y) + "px"; + this.style.left = (x -this._dragX ) + "px";//(x - self.x) + "px"; + this._emit("move", {left: this.offsetLeft, top: this.offsetTop}); + } + + _stopDragging() + { + this._dragging = false; + } + + _startExpanding(e) + { + document.onselectstart = function() {return false}; + this._expanding = true; + this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ? + document.documentElement.scrollLeft : + document.body.scrollLeft)) - this.offsetLeft; + this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ? + document.documentElement.scrollTop : + document.body.scrollTop) ) - this.offsetTop; + this._width = this.clientWidth; + this._height = this.clientHeight; + } + + _expand(e) + { + var x = (e.pageX || e.clientX + (document.documentElement.scrollLeft ? + document.documentElement.scrollLeft : + document.body.scrollLeft)) - this.offsetLeft; + var y = (e.pageY || e.clientY + (document.documentElement.scrollTop ? + document.documentElement.scrollTop : + document.body.scrollTop)) - this.offsetTop; + + + this.resize(this._width + x -this._dragX, this._height + y - this._dragY); + } + + _stopExpanding() + { + this._expanding = false; + this.style.cursor = ""; + this._width = this.clientWidth; + this._height = this.clientHeight; + document.onselectstart = function() {return true}; + } + + setLoading(visible) + { + if (this.footer) + for(var i = 0; i < this.footer.children.length; i++) + if (this.footer.children[i].nodeName == "BUTTON") + this.footer.children[i].disabled = visible; + + if (visible) + this.loading.classList.add(this.customClass + "-loading-visible"); + else + this.loading.classList.remove(this.customClass + "-loading-visible"); + + return this; + } + + center() + { + this._updateSize(); + return this.move(window.pageXOffset + (window.innerWidth / 2) - (this.offsetWidth / 2), + window.pageYOffset + (window.innerHeight / 2) - (this.offsetHeight / 2)); + } + + setVisible(visible) + { + + if (visible == this.visible) + return; + + this.visible = visible; + + if (visible) + { + this.classList.add(this.customClass + "-visible"); + + if (this.background) + { + this.background.setVisible(true); + + } + //else + if (!this._shown) + { + this._updateSize(); + this._shown = true; + } + + this.setFocus(true); + + this._updateSize(); + + } + else + { + this._updateSize(); + + this.classList.remove(this.customClass + "-visible"); + this.classList.remove(this.customClass + "-active"); + + if (this.background) + this.background.setVisible(false); + + //this.modal.classList.remove(this.customClass + "-modal-background-visible"); + + this.setFocus(false); + + var i = IUI._nav_list.indexOf(this); + if (i > -1) + IUI._nav_list.splice(i, 1); + + /* + IUI._nav_list.pop + if (IUI._previousWindow) + if (IUI._previousWindow.visible) + IUI._previousWindow.focus(); + else + window.location.hash = ""; + else + window.location.hash = ""; + */ + } + + this._emit("visible", {visible}); + + return this; + } + + hide() + { + this.setVisible(false); + return this; + } + + show() + { + this.setVisible(true); + return this; + } +}); + +document.addEventListener("keydown", function (e) { + if ( e.keyCode === 27 ) { // ESC + var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIDialog); }).filter(function(x){return x.focus;}); + for(var i = 0; i < dialogs.length; i++) + dialogs[i].hide(); + } +}) + + +//IUI.module("dialog", IUIDialog, function(el, modal, properties){ return new IUIDialog(el, modal, properties);}); \ No newline at end of file diff --git a/src/UI/DropDown.js b/src/UI/DropDown.js new file mode 100644 index 0000000..4c0e67e --- /dev/null +++ b/src/UI/DropDown.js @@ -0,0 +1,196 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class DropDown extends IUIElement { + constructor() { + super({"direction": "down" }); + + var self = this; + + this._register("visible"); + + this.visible = false; + + // this.classList.add(this.cssClass + "-" + this.direction); + + this.menu = this.getElementsByClassName(this.cssClass + "-menu")[0]; + + + //this.arrow = document.createElement("div"); + //this.arrow.className = this.customClass + "-arrow"; + + + //this.el.appendChild(this.arrow); + + if (this.getAttribute("fixed")) + { + this._fixed = true; + document.body.appendChild(this.menu); + } + + //this.el.appendChild(this.menu); + + this.addEventListener("click", function (e) { + var t = e.target + do { + if (t == self.menu) + return; + } while (t = t.parentElement) + + self.setVisible(!self.visible); + }); + + IUI._menus.push(this); + + /* + document.body.addEventListener("click", function(e) + { + if (!self.visible) + return; + + var x = e.target; + do { + if (x == self.menu || x == self.el) + return; + } while (x = x.parentNode) + + if (e.target.id == "iui_app_background") + return; + + self.setVisible(false); + });*/ + } + + set fixed(value) { + if (value) + document.body.appendChild(this.menu); + this._fixed = value; + } + + get fixed() { + return this._fixed; + } + + hide() { + return this.setVisible(false); + } + + show() { + return this.setVisible(true); + } + + getOffset() { + var el = this; + var _x = 0; + var _y = 0; + while (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { + _x += el.offsetLeft - el.scrollLeft; + _y += el.offsetTop - el.scrollTop; + el = el.offsetParent; + } + _x += window.pageXOffset; + _y += window.pageYOffset; + + return { top: _y, left: _x, width: this.clientWidth, height: this.clientHeight }; + } + + set data(value) { + // console.log("DD", value); + super.data = value; +// console.log("VV", this._uiBindings, this._dataBindings); + } + setVisible(visible) { + this.visible = visible; + + if (!this.fixed) { + if (visible) { + this.menu.classList.add(this.cssClass + "-menu-visible"); + this.classList.add(this.cssClass + "-visible"); + } + else { + this.menu.classList.remove(this.cssClass + "-menu-visible"); + this.classList.remove(this.cssClass + "-visible"); + } + } + else { + if (visible) { + var rect = this.getBoundingClientRect(); + + var menuWidth = this.menu.clientWidth; + var menuHeight = this.menu.clientHeight; + + if (menuWidth > document.body.clientWidth) { + menuWidth = (document.body.clientWidth - 10); + this.menu.style.width = menuWidth + "px"; + } + + + var startX = rect.left + (rect.width / 2 - menuWidth / 2); + + + if (this.direction == "up") { + // var menuTop = rect.top - this.arrow.clientHeight - this.menu.clientHeight; + var menuTop = rect.top - this.menu.clientHeight; + + if (menuTop < 0) { + menuTop = 5; + // this.menu.style.height = (rect.top - this.arrow.clientHeight ) + "px"; + this.menu.style.height = (rect.top) + "px"; + + this.menu.classList.add(this.cssClass + "-menu-oversized"); + } + else + this.menu.classList.remove(this.cssClass + "-menu-oversized"); + + + //this.arrow.classList.remove(this.customClass + "-arrow-down"); + //this.arrow.classList.add(this.customClass + "-arrow-up"); + //this.arrow.style.top = ( rect.top - this.arrow.clientHeight ) + "px"; + this.menu.style.top = (menuTop) + "px"; + } + else { + //var menuTop = rect.top + rect.height + this.arrow.clientHeight; + var menuTop = rect.top + rect.height; + + //this.arrow.classList.remove(this.customClass + "-arrow-up"); + //this.arrow.classList.add(this.customClass + "-arrow-down"); + //this.arrow.style.top = ( rect.top + rect.height ) + "px"; + + this.menu.style.top = menuTop + "px"; + + if (menuTop + menuHeight > document.body.clientHeight) { + this.menu.style.height = (document.body.clientHeight - menuTop) + "px"; + this.menu.classList.add(this.cssClass + "-menu-oversized"); + } + else { + this.menu.classList.remove(this.cssClass + "-menu-oversized"); + } + } + + if (startX < 0) + startX = 5; + else if (startX + menuWidth > document.body.clientWidth) + startX = document.body.clientWidth - menuWidth - 5; + + + //this.arrow.style.left = (rect.left + (rect.width/2 - this.arrow.clientWidth/2)) + "px"; + this.menu.style.left = startX + "px"; + + //this.arrow.classList.add(this.customClass + "-arrow-visible"); + this.menu.classList.add(this.cssClass + "-menu-visible"); + this.classList.add(this.cssClass + "-visible"); + + } + else { + //this.arrow.classList.remove(this.customClass + "-arrow-visible"); + this.menu.classList.remove(this.cssClass + "-menu-visible"); + this.classList.remove(this.cssClass + "-visible"); + } + } + + this._emit("visible", { visible}); + + return this; + + } +}); \ No newline at end of file diff --git a/src/UI/Form.js b/src/UI/Form.js new file mode 100644 index 0000000..af49cd1 --- /dev/null +++ b/src/UI/Form.js @@ -0,0 +1,101 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; +import Tabs from "./Tabs.js"; +import Tab from "./Tab.js"; + +export default IUI.module(class Form extends IUIElement { + constructor() { + super(); + } + + create() { + + this._container = document.createElement("div"); + this._container.className = "container"; + + this._actions = document.createElement("div"); + this._actions.className = "actions"; + + + this._save = document.createElement("button"); + this._save.className = "button"; + this._save.innerHTML = this.hasAttribute("save") ? this.getAttribute("save") : "Save"; + this._cancel = document.createElement("button"); + this._cancel.className = "button"; + this._cancel = this.hasAttribute("cancel") ? this.getAttribute("cancel") : "Cancel"; + + this._save.addEventListener("click", (x) => { + + }); + + this._cancel.addEventListener("click", (x) => { + window.router.back(); + }); + + + this._actions.appendChild(this._save); + this._actions.appendChild(this._cancel); + + this.appendChild(this._container); + this.appendChild(this._actions); + + } + + set layout(value) { + /* + + mode:tabs, + tabs: [ + {name: 'Tab Name'}, + {content: [ + {field: 'item', type: 'text|selectlist|check|autocomplete|form', layout: {}} + ]} + ] + */ + // render layout + if (value.mode == "tabs") { + for (var i = 0; i < this.layout.tabs.length; i++) { + // render tab + this.mode = "tabs"; + this._tabs = new Tabs(); + var tab = new Tab(); + this._tabs.add(tab); + for (var j = 0; j < this._tabs.length; j++) { + + } + this.layout.tasbs[i].content + } + } + } + + set data(value) { + var self = this; + + if (value == null) + this._input.value = ""; + else { + this._input.value = value[this._field]; + + if (value.on) + value.on("modified", (propertyName, value) => { + if (propertyName == self._field) + self._input.value = value[self._field]; + }); + } + //super.data = data; + } + + get layout() { + return this._input.value; + } + + set layout(value) { + // load layout + + for (var i = 0; i < value.length; i++) { + // [{tab: },{}] + } + + this._input.value = value; + } +}); \ No newline at end of file diff --git a/src/UI/Grid.js b/src/UI/Grid.js new file mode 100644 index 0000000..dd5f2e6 --- /dev/null +++ b/src/UI/Grid.js @@ -0,0 +1,204 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Grid extends IUIElement { + constructor() + { + super({index: "iid", + layout: {content: {field: "name", formatter: null}, + title: {field: "content", formatter: null}, + footer: {field: "footer", formatter: null}}}); + + this._register("add"); + this._register("layout"); + this._register("contextmenu"); + + this.windows = []; + } + + create() { + for (var i = 0; i < this.children.length; i++) + this.add(this.children[i]); + } + + setGridLayout(style) + { + this.style.grid = style; + this._emit("layout", style, this); + return this; + } + + add(win) { + let self = this; + + win.setAttribute("draggable", true); + win.addEventListener("dragstart", function (e) { + e.dataTransfer.effectAllowed = 'move'; + self._dragItem = this; + + this.classList.add(self.cssClass + '-window-drag'); + + }); + + win.addEventListener("dragover", function (e) { + if (self._dragItem) { + e.preventDefault(); + this.classList.add(self.cssClass + '-window-over'); + e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. + } + }); + + win.addEventListener("dragleave", function (e) { + + if (e.preventDefault) + e.preventDefault(); + + this.classList.remove(self.cssClass + "-window-over"); + }); + + win.addEventListener("dragend", function (e) { + this.classList.remove(self.cssClass + '-window-drag'); + self._dragItem = null; + }); + + win.addEventListener("drop", function (e) { + self._dragItem.classList.remove(self.cssClass + "-window-drag"); + e.currentTarget.classList.remove(self.cssClass + "-window-over"); + + for (var i = 0; i < self.children.length; i++) + if (self.children[i] == self._dragItem) { + self.insertBefore(self._dragItem, e.currentTarget.nextSibling); + break; + } + else if (self.children[i] == e.currentTarget) { + self.insertBefore(self._dragItem, e.currentTarget); + break; + } + + self._dragItem = null; + }); + + win.addEventListener("contextmenu", function (e) { + self.selected = win; + self._emit("contextmenu", { win }); + }); + + win.on("close", function () { + self.remove(win); + }); + } + + addOld(item) + { + + var self = this; + + var li = item;//document.createElement("li"); + //li.setAttribute("data-id", item[this.index]); + + li.setAttribute("draggable", true); + + li.addEventListener("dragstart", function(e){ + e.dataTransfer.effectAllowed = 'move'; + self._dragItem = this; + + this.classList.add(self.cssClass + '-window-drag'); + + }); + + li.addEventListener("dragover", function(e){ + if (self._dragItem) + { + e.preventDefault(); + this.classList.add(self.cssClass + '-window-over'); + e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. + } + }); + + li.addEventListener("dragleave", function(e){ + + if (e.preventDefault) + e.preventDefault(); + + this.classList.remove(self.cssClass + "-window-over"); + }); + + li.addEventListener("dragend", function(e){ + this.classList.remove(self.cssClass + '-window-drag'); + self._dragItem = null; + }); + + li.addEventListener("drop", function(e){ + self._dragItem.classList.remove(self.cssClass + "-window-drag"); + e.currentTarget.classList.remove(self.cssClass + "-window-over"); + + for(var i = 0; i < self.children.length; i++) + if (self.children[i] == self._dragItem) + { + self.insertBefore(self._dragItem, e.currentTarget.nextSibling); + break; + } + else if (self.children[i] == e.currentTarget) + { + self.insertBefore(self._dragItem, e.currentTarget); + break; + } + + self._dragItem = null; + }); + + li.addEventListener("contextmenu", function(e){ + self.selected = win; + self._emit("contextmenu", item, win, this, e); + }); + + var win = iui(li).window({draggable: false, title: this.layout.title.formatter ? this.layout.title.formatter(item[this.layout.title.field], item) : item[this.layout.title.field]}); + + var body = this.layout.content.formatter ? this.layout.content.formatter(item[this.layout.content.field], item, win, this) : item[this.layout.content.field]; + if (body instanceof HTMLElement) + win.body.appendChild(body); + else + win.body.innerHTML = body; + + var footer = this.layout.footer.formatter ? this.layout.footer.formatter(item[this.layout.footer.field], item, win, this) : item[this.layout.footer.field]; + if (footer != null) + { + var fe = document.createElement("div"); + fe.className = "window-footer"; + + if (footer instanceof HTMLElement) + fe.appendChild(footer); + else + fe.innerHTML = footer; + + win.appendChild(fe); + } + + win.on("close", function(){ + self.remove(win); + }); + + this.appendChild(li); + + win.control = item; + + this.windows.push(win); + + this._emit("add", item, win, this); + + return this; + //win._updateSize(); + } + + remove(win) + { + win.destroy(); + this.removeChild(win); + } + + clear() + { + while (this.children.length > 0) + this.removeChild(this.children[0]); + } +}); \ No newline at end of file diff --git a/src/UI/Input.js b/src/UI/Input.js new file mode 100644 index 0000000..a2d3e9d --- /dev/null +++ b/src/UI/Input.js @@ -0,0 +1,218 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Input extends IUIElement { + constructor() { + super({ formatter: (x) => x }); + this._register("input"); + this._register("change"); + } + + _checkValidity() { + if (this.validate != null) { + try { + let valid = this.validate.apply(this); + if (!valid) { + this.setAttribute("invalid", ""); + this.classList.add(this.cssClass + "-invalid"); + return false; + } + else { + this.removeAttribute("invalid"); + this.classList.remove(this.cssClass + "-invalid"); + return true; + } + } + catch (e) { + console.log("Validation Error", e); + return false; + } + } + + return true; + } + + create() { + + this.isAuto = this.hasAttribute("auto"); + this.field = this.getAttribute("field"); + + + if (this.field != null) + { + this.setAttribute(":data", `d['${this.field}']`) + this.setAttribute("async:revert", `d['${this.field}'] = await this.getData()`); + } + + this._input = document.createElement("input"); + let self = this; + + this._input.addEventListener("input", () => { + if (self._checkValidity() && self.isAuto) + this.revert(); + //self.data[self.field] = self.value; + }); + + this._input.addEventListener("change", () => { + self._emit("change", { value: self.value }); + }); + + this.type = this.hasAttribute("type") ? this.getAttribute("type").toLowerCase() : "text"; + + this.accept = this.getAttribute("accept"); + + this.appendChild(this._input); + + if (this.type == "password") + { + this._eye = document.createElement("div"); + this._eye.className = this.cssClass + "-eye"; + this._eye.addEventListener("mousedown", ()=>{ + self._input.type = "text"; + self._eye.classList.add(self.cssClass + "-eye-active"); + }); + this._eye.addEventListener("mouseup", ()=>{ + self._input.type = "password"; + self._eye.classList.remove(self.cssClass + "-eye-active"); + }); + + this.appendChild(this._eye); + + } + + } + + async updateAttributes(deep, parentData) { + await super.updateAttributes(deep, parentData); + //this._input.type = this.type; + //this._input.value = this.value; + } + + set type(value) { + this._input.type = value; + } + + get type() { + return this._input.type; + } + + set accept(value){ + this._input.accept = value; + } + + get accept() { + return this._input.accept; + } + + set disabled(value) { + if (value) + this.setAttribute("disabled", "disabled"); + else + this.removeAttribute("disabled"); + + this._input.disabled = value; + } + + get disabled() { + return this._input.disabled; + } + + set enabled(value) { + this.disabled = !value; + } + + get enabled() { + return !this._input.disabled; + } + + async setData(value) { + + await super.setData(value); + + if (this.type == "checkbox") + this._input.checked = value; + else if (this.type == "date") + this._input.value = value != null ? value.toISOString().slice(0, 10) : value; + else if (this.type == null || this.type == "text" || this.type == "search" || this.type == "password") + this._input.value = value == null ? '' : value; + else + this._input.value = value; + + if (this._checkValidity() && this.isAuto) + this.revert(); + + + /* + await super.setData(value); + if (value != null && this.field != null) + this.value = value[this.field]; + else if (this.field != null) + this.value = null; + */ + } + + + // modified(name, value) { + // if (name == this.field) { + // this.value = value; + // } + // } + + async getData(){ + if (this.type == "checkbox") + return this._input.checked; + else if (this.type == "date") + return new Date(this._input.value); + else if (this.type == "file") + return new Uint8Array(await this._input.files[0].arrayBuffer()); + else + return this._input.value; + } + + get data() + { + if (this.type == "checkbox") + return this._input.checked; + else if (this.type == "date") + return new Date(this._input.value); + else if (this.type == "file") + { + return new Promise((resolve)=>{ + this._input.files[0].arrayBuffer().then((x)=>{ + resolve(new Uint8Array(x)); + }); + }); + } + else + return this._input.value; + } + + /* + get data() { + if (this.type == "checkbox") + return this._input.checked; + else if (this.type == "date") + return new Date(this._input.value); + else if (this.type == "file") + { + + } + else + return this._input.value; + } +*/ + + // set value(value) { + + // if (this.type == "checkbox") + // this._input.checked = value; + // else if (this.type == "date") + // this._input.value = value != null ? value.toISOString().slice(0, 10) : value; + // else if (this.type == null || this.type == "text") + // this._input.value = value == null ? '' : value; + // else + // this._input.value = value; + + // this._checkValidity(); + // } +}); \ No newline at end of file diff --git a/src/UI/Login.js b/src/UI/Login.js new file mode 100644 index 0000000..01e066d --- /dev/null +++ b/src/UI/Login.js @@ -0,0 +1,179 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Login extends IUIElement +{ + constructor() + { + super(); + + + var template = `

+ +
+
+ + + + + + +
+ + + +
+ +
+
+ +
+
`; + + this.innerHTML = template; + + + + this._message = this.querySelector("div[name='message']"); + + this._usernameText = this.querySelector("span[name='spnUsername']"); + this._passwordText = this.querySelector("span[name='spnPassword']"); + this._rememberText = this.querySelector("label[name='labelRemember']"); + this._username = this.querySelector("input[name='txtUsername']"); + this._password = this.querySelector("input[name='txtPassword']"); + this._remember = this.querySelector("input[name='remember']"); + this._login = this.querySelector("button[name='login']"); + + var self = this; + + this._password.addEventListener("keydown", (e) => { if (e.keyCode == 13) self.login(); }); + + if (this.hasAttribute("message")) { + this._message.innerHTML = this.getAttribute("message"); + } + + if (this.hasAttribute("username")) { + this._usernameText.innerHTML = this.getAttribute("username"); + } + + if (this.hasAttribute("password")) { + this._passwordText.innerHTML = this.getAttribute("password"); + } + + if (this.hasAttribute("remember")) { + this._rememberText.innerHTML = this.getAttribute("remember"); + } + + if (this.hasAttribute("login")) { + this._login.innerHTML = this.getAttribute("login"); + } + + + let username = this.username;// window.localStorage.getItem("iui.login.username"); + let password = this.password;// window.localStorage.getItem("iui.login.password"); + if (username != "") { + this._username.value = username; + this._password.value = password; + this._remember.checked = true; + + } + + this._login.addEventListener("click", ()=>this.login()); + + + this._register("login"); + this._register("logout"); + + } + + login() { + let username = this._username.value; + let password = this._password.value; + + if (username == "" || password == "") + return; + + if (this._remember.checked) { + this.username = username; + this.password = password; + //window.localStorage.setItem("iui.login.username", username); + //window.localStorage.setItem("iui.login.password", password); + } + else { + window.localStorage.removeItem("iui.login.username"); + window.localStorage.removeItem("iui.login.password"); + } + + this._emit("login", { username, password }); + } + + get username() { + return window.localStorage.getItem("iui.login.username"); + } + + set username(value) { + return window.localStorage.setItem("iui.login.username", value); + } + + get password() { + return window.localStorage.getItem("iui.login.password"); + } + + set password(value) { + return window.localStorage.setItem("iui.login.password", value); + } + + get token() { + return window.localStorage.getItem("iui.login.token"); + } + + set token(value) { + return window.localStorage.setItem("iui.login.token", value); + } + + + get message() { + return this._message.innerHTML; + } + + set message(value) { + this._message.innerHTML = value; + } + + logout() { + window.localStorage.removeItem("iui.login.username"); + window.localStorage.removeItem("iui.login.password"); + window.localStorage.removeItem("iui.login.token"); + this._username.value = ""; + this._password.value = ""; + this._remember.checked = false; + + this._emit("logout"); + } + + created() + { + + //if (this.hasAttribute("auto")) { + + // let username = this.username;// window.localStorage.getItem("iui.login.username"); + // let password = this.password;// window.localStorage.getItem("iui.login.password"); + // if (this.username != "") { + // this._emit("login", { username, password }); + // } + //} + + } +}); \ No newline at end of file diff --git a/src/UI/Menu.js b/src/UI/Menu.js new file mode 100644 index 0000000..3480536 --- /dev/null +++ b/src/UI/Menu.js @@ -0,0 +1,196 @@ +import { IUI } from '../Core/IUI.js'; +import IUIElement from '../Core/IUIElement.js'; +import Background from './Background.js'; +import DropDown from './DropDown.js'; + +export default class Menu extends IUIElement { + constructor(props) { + super(IUI.extend(props, { + index: "iid", + layout: { field: "name", formatter: null }, + visible: false, + static: false, + "target-class": "selected" + })); + + this._register("visible"); + this._register("select"); + + IUI._menus.push(this); + } + + + + // clear() { + // this.innerHTML = ""; + // this._uiBindings = null; + // } + + hide() { + return this.setVisible(false); + } + + //show(x, y, element) { + // return this.setVisible(true, x, y, element); + //} + + show(event) { + event.preventDefault(); + + let el = event.currentTarget; + let x = event.pageX; + let y = event.pageY; + + this.setVisible(true, x, y, el); + } + + + async showModal(element) { + + + //super.data = this._getElementData(element); + + await super.setData(element.data); + + if (!this.background) { + this.background = document.getElementById("iui_app_background"); + + if (!this.background) { + this.background = new Background();// document.createElement("div"); + this.background.id = "iui_app_background"; + document.body.insertAdjacentElement("afterBegin", this.background); + } + } + + this.background.show(); + this.classList.add(this.cssClass + "-modal"); + this.classList.add(this.cssClass + "-visible"); + + var width = (window.innerWidth * 0.8); + this.style.width = width + "px"; + + this.style.top = (window.pageYOffset + window.innerHeight / 2 - this.offsetHeight / 2) + "px"; // (document.body.clientHeight / 2 - this.clientHeight / 2) + "px"; + this.style.left = (window.pageXOffset + window.innerWidth / 2 - this.offsetWidth / 2) + "px"; //(document.body.clientWidth / 2 - width / 2) + "px"; + + + this.visible = true; + this._emit("visible", { visible: true }); + + return this; + } + + async setVisible(visible, x, y, element) { + this.visible = visible; + + if (this.target) { + if (this["target-class"] != null && this["target-class"] != "") + this.target.classList.remove(this["target-class"]); + this.target = null; + } + + if (visible) { + + //if (element) + //let dt = super._getElementData(element); + if (element) { + //[super.data, this.target] = dt; + + await this.setData(element.data); + this.target = element; + + if (this["target-class"] != null && this["target-class"] != "") + this.target.classList.add(this["target-class"]); + + } + + this._pass = true; + + if (IUI.responsive && !this.static) + return this.showModal(); + + this.classList.remove(this.cssClass + "-modal"); + + var rect = this.getBoundingClientRect(); + + if (y != null) { + if (y + rect.height > document.documentElement.clientHeight) + this.style.top = (document.documentElement.clientHeight - rect.height) + "px"; + else + this.style.top = y + "px"; + } + + this.classList.add(this.cssClass + "-visible"); + + + if (x != null) { + + if (x + rect.width > document.body.scrollWidth) + this.style.left = (document.body.scrollWidth - rect.width) + "px"; + //else if (x < 0) + // this.style.left = "0px"; + else + this.style.left = x + "px"; + + } + + + } + else { + + this.classList.remove(this.cssClass + "-visible"); + + if (this.background) + this.background.hide(); + + //await super.setData({});// = {}; + + } + + this._emit("visible", { visible }); + + return this; + } +}; + +IUI.module(Menu); + +IUI.responsive = false; + +window.addEventListener("load", function () { + + var handler = function (e) { + if (e.target.id == "iui_app_background" && IUI.responsive) { + for (var i = 0; i < IUI._menus.length; i++) + if (IUI._menus[i] instanceof Menu) + IUI._menus[i].setVisible(false); + + e.preventDefault(); + return; + } + + for (var i = 0; i < IUI._menus.length; i++) { + if (IUI._menus[i].visible) { + var x = e.target; + var m = IUI._menus[i]; + if (m instanceof Menu) { + if (m._pass) { + m._pass = false; + continue; + } + else + if (m.visible) + if (!m.contains(e.target)) + m.setVisible(false); + } + else if (m instanceof DropDown) { + if (!(m.contains(e.target) || m.menu.contains(e.target))) + m.setVisible(false); + } + } + } + + }; + + document.body.addEventListener("click", handler); + document.body.addEventListener("touchstart", handler); +}); diff --git a/src/UI/Navbar.js b/src/UI/Navbar.js new file mode 100644 index 0000000..9a7c8e7 --- /dev/null +++ b/src/UI/Navbar.js @@ -0,0 +1,164 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; +import Link from "../Router/Link.js"; +import Check from "./Check.js"; + +export default IUI.module(class Navbar extends IUIElement +{ + constructor() + { + super(); + } + + search(text) { + for(var i = 0; i < this._container.children.length; i++) + { + let el = this._container.children[i]; + if (el.title.toLowerCase().includes(text)) + { + el.text.innerHTML = el.title.replace(new RegExp(text, 'gi'), (str) => `${str}`); + el.style.display = ""; + el.removeAttribute("hidden"); + + // make parents visible + let level = parseInt(el.getAttribute("data-level")); + + for(var j = i - 1; j >= 0; j--) + { + let previous = this._container.children[j]; + let pLevel = parseInt(previous.getAttribute("data-level")); + + if (pLevel < level) + { + previous.removeAttribute("hidden"); + previous.style.display = ""; + if (previous.expand) + previous.expand.checked = true; + level = pLevel; + } + } + } + else + { + el.style.display = "none"; + } + } + } + + + expand(link, value) { + let next = link;// = link.nextElementSibling; + let level = parseInt(link.getAttribute("data-level")); + + + // save + //window.localStorage.setItem("iui.navbar/" + link.link, value); + + if (link.expand && link.expand.checked != value) + link.expand.checked = value; + + while (next = next.nextElementSibling) { + if (parseInt(next.getAttribute("data-level")) > level){ + if (value) + next.removeAttribute("hidden"); + else + next.setAttribute("hidden", ""); + if (next.expand) + next.expand.checked = value; + } + else + break; + } + } + + build(){ + + this.innerHTML = ""; + let roots = router.routes.filter(x => x.parent == null); + let self = this; + this._search = document.createElement("input"); + this._search.type = "search"; + this._search.className = this.cssClass + "-search textbox"; + this._search.addEventListener("input", (x) => { + self.search(this._search.value); + }); + + this.appendChild(this._search); + + this._container = document.createElement("div"); + this._container.className = this.cssClass + "-container"; + + this.appendChild(this._container); + + var appendRoutes = (routes, level) => { + for (var i = 0; i < routes.length; i++) { + + if (routes[i].hasAttribute("private")) + continue; + + if (this.private instanceof Function) + { + try{ + // console.log("F"); + if (this.private(routes[i])) + { + // console.log("private", route[i]); + continue; + } + } catch(ex){ + console.log(ex); + debugger; + } + } + + let el = new Link();// document.createElement("i-link"); + el.setAttribute("data-level", level); + el.link = routes[i].link; + el.title = routes[i].caption; + if (routes[i].icon != null) + el.innerHTML = ""; + + el.text = document.createElement("span"); + el.text.innerHTML = el.title; + el.appendChild(el.text); + + this._container.appendChild(el); + + if (routes[i].routes.length > 0) { + // append plus + el.expand = new Check({cssClass: this.cssClass + "-check"});// document.createElement("i-check"); + el.expand.checked = true; + + + //plus.className = "expand";#f8f8f8 + el.expand.on("click", (e) => { + self.expand(el, el.expand.checked); + e.stopPropagation(); + }); + + el.appendChild(el.expand); + appendRoutes(routes[i].routes, level + 1); + } + + } + }; + + appendRoutes(roots, 0); + } + + created() { + if (!this.hasAttribute("manual")) + window.router.on("created", this.build); + + window.router.on("navigate", (e) => { + for(var i = 0; i < this?._container?.children?.length; i++) + { + var el = this._container.children[i]; + if (el.link == e.base) + el.setAttribute("selected", ""); + else + el.removeAttribute("selected"); + } + }); + } +}); \ No newline at end of file diff --git a/src/UI/Range.js b/src/UI/Range.js new file mode 100644 index 0000000..f0b886f --- /dev/null +++ b/src/UI/Range.js @@ -0,0 +1,188 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Range extends IUIElement { + constructor() { + super({ + getItem: function (index, data) { + var item = data[index]; + return item == null ? index : item; + }, + getIndex: function (x, width, data) { + if (x < 0) x = 0; + var p = x / width; + var index = Math.floor(p * data.length); + return index; + }, + getPreview: function (index, data, x, width, el) { + return null; + }, + getPosition: function (index, data, width) { + var itemSize = width / data.length; + return (index * itemSize) + (itemSize / 2); + }, + layout: { + render: function () { + return true; + }, + initialize: function () { + return true; + } + }, + data: [] + }); + + var self = this; + + + this._register("select"); + this._register("userSelect"); + + this.preview = document.createElement("div"); + this.preview.className = this.customClass + "-preview"; + + + if (this.layout) + this.layout.initialize.apply(this); + + + this.thumb = document.createElement("div"); + this.thumb.classList.add(this.customClass + "-thumb"); + + this.classList.add(this.customClass); + this.appendChild(this.preview); + this.appendChild(this.thumb); + + this.addEventListener("mousedown", function (e) { + self._startDragging(e.clientX, e.clientY); + }); + + this.addEventListener("mouseleave", function (e) { + self.preview.classList.remove(self.customClass + "-preview-visible"); + }); + + this.addEventListener("mouseenter", function (e) { + var rect = self.getBoundingClientRect(); + self._offset = { + top: rect.top + document.body.scrollTop, + left: rect.left + document.body.scrollLeft + }; + }); + + this.addEventListener("mousemove", function (e) { + + + self._drag(e.clientX, e.clientY); + + var x = e.clientX - self._offset.left; + var index = self.getIndex(x, self.offsetWidth, self.data); + var preview = self.getPreview.call(self, index, self.data, x, self.offsetWidth, self.preview); + + if (preview == null || preview == false) { + self.preview.classList.remove(self.customClass + "-preview-visible"); + return; + } + else if (preview instanceof HTMLElement) { + while (self.preview.children.length > 0) + self.preview.removeChild(self.preview.children[0]); + self.preview.appendChild(preview); + } + else if (preview != true) { + self.preview.innerHTML = preview; + } + + var index = self.getIndex((e.clientX - self._offset.left), self.offsetWidth, self.data); + var dx = self.getPosition(index, self.data, self.offsetWidth); + + self.preview.style.setProperty("--x", dx + "px"); + self.preview.classList.add(self.customClass + "-preview-visible"); + + }); + + document.addEventListener("mouseup", function (e) { + if (self._dragging) + self._endDragging(e.clientX, e.clientY); + }); + + this.addEventListener("touchstart", function (e) { + self._startDragging(e.targetTouches[0].clientX, e.targetTouches[0].clientY); + }); + + this.addEventListener("touchmove", function (e) { + self._drag(e.targetTouches[0].clientX, e.targetTouches[0].clientY); + }); + + this.addEventListener("touchend", function (e) { + self._endDragging(e.changedTouches[0].clientX, e.changedTouches[0].clientY); + }); + + this.setData(this.data); + } + + _startDragging(x, y) { + this._dragging = true; + + document.onselectstart = function () { return false }; + + var rect = this.getBoundingClientRect(); + var body = document.body.getBoundingClientRect(); + + this._offset = { + top: rect.top + body.top,// document.body.scrollTop, + left: rect.left + body.left, + }; + + var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data); + this.set(index, true, true); + } + + set(index, moveThumb = true, byUser = false) { + + var item = this.getItem(index, this.data); + + if (item != null) { + if (moveThumb) { + var dx = this.getPosition(index, this.data, this.offsetWidth); + this.thumb.style.setProperty("--x", dx + "px"); + } + + this._emit("select", { item, index }); + + if (byUser) + this._emit("userSelect", { item, index }); + + this.selected = item; + this.selectedIndex = index; + } + + return this; + } + + _drag(x, y) { + if (this._dragging) { + this.thumb.classList.add(this.customClass + "-thumb-dragging"); + var dx = (x - this._offset.left); + var index = this.getIndex(dx, this.offsetWidth, this.data); + this.thumb.style.setProperty("--x", dx + "px"); + this.set(index, false, true); + } + } + + _endDragging(x, y) { + document.onselectstart = function () { return true }; + this.thumb.classList.remove(this.customClass + "-thumb-dragging"); + var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data); + this.set(index, true, true); + this._dragging = false; + } + + clear() { + return this.setData([]); + } + + render() { + if (this.layout && this.layout.render) + this.layout.render.apply(this); + return this; + } +}); \ No newline at end of file diff --git a/src/UI/RoutesList.js b/src/UI/RoutesList.js new file mode 100644 index 0000000..6e0dc80 --- /dev/null +++ b/src/UI/RoutesList.js @@ -0,0 +1,23 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class RoutesList extends IUIElement { + + constructor(properties) { + super(properties, { class: 'routes-list' }); + } + + create() { + if (!window.router) + return; + + var table = document.createElement("i-table"); + + this.appendChild(table); + + for (var i = 0; i < window.router.routes.length; i++) { + // hell + table.add + } + } +}); \ No newline at end of file diff --git a/src/UI/Select.js b/src/UI/Select.js new file mode 100644 index 0000000..ed235a2 --- /dev/null +++ b/src/UI/Select.js @@ -0,0 +1,424 @@ +import { IUI, iui } from '../Core/IUI.js'; +import IUIElement from '../Core/IUIElement.js'; +import Menu from '../UI/Menu.js'; +import Layout from '../Data/Layout.js'; +import Repeat from '../Data/Repeat.js'; + +export default IUI.module(class Select extends IUIElement { + constructor() { + super({ + visible: false, + searchlist: false, + hasArrow: true, + //hasAdd: false, + updateTextBox: true, + query: (x) => null, + //_formatter: (x) => x, + _autocomplete: false, + cssClass: 'select' + }); + + this._register("select"); + this._register("input"); + this._register("add"); + } + + disconnectedCallback() { + //console.log("Select removed", this); + if (!this.searchlist && this.menu) + app.removeChild(this.menu); + + } + + connectedCallback(){ + super.connectedCallback(); + if (!this.searchlist && this.menu) + app.appendChild(this.menu); + } + get autocomplete() { + return this._autocomplete; + } + + // get formatter() { + // return this._formatter; + // } + + // set formatter(value) { + // this._formatter = value; + // } + + _checkValidity() { + + if (this.validate != null) { + try { + let valid = this.validate.apply(this); + if (!valid) { + this.setAttribute("invalid", ""); + this.classList.add(this.cssClass + "-invalid"); + return false; + } + else { + this.removeAttribute("invalid"); + this.classList.remove(this.cssClass + "-invalid"); + return true; + } + } + catch (ex) { + console.log("Validation Error", ex); + return false; + } + } + + return true; + } + + set hasAdd(value) { + if (value) + this.setAttribute("add", "add"); + else + this.removeAttribute("add"); + } + + get hasAdd() { + return this.hasAttribute("add"); + } + + async create() { + + this.isAuto = this.hasAttribute("auto"); + this.field = this.getAttribute("field"); + + + if (this.field != null) + { + this.setAttribute(":data", `d['${this.field}']`) + this.setAttribute(":revert", `d['${this.field}'] = this.data`); + } + + this._autocomplete = this.hasAttribute("autocomplete"); + //this.hasAdd = this.hasAttribute("add") || this.hasAdd; + + let self = this; + + //if (this._autocomplete) + // this.cssClass += "-autocomplete"; + + + + + this.repeat = new Repeat(); + this.repeat.cssClass = "select-menu-repeat"; + //this.repeat.innerHTML = this.innerHTML; + this.repeat.setAttribute(":data", "d[1]"); + + this.counter = document.createElement("div"); + this.counter.className = this.cssClass + "-counter"; + this.counter.innerHTML = "${d[0]}"; + + + this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" }); + + this.menu.on("click", async (e) => { + + if (e.target != self.textbox && e.target != self.counter && e.target !== self.menu) { + await self.setData(e.target.data); + + self._emit("input", { value: e.target.data }); + + self.hide(); + } + }).on("visible", x=> { if (!x.visible) self.hide()}); + + + if (this._autocomplete) { + this.textbox = document.createElement("input"); + this.textbox.type = "search"; + this.textbox.className = this.cssClass + "-textbox"; + + if (this.placeholder) + this.textbox.placeholder = this.placeholder; + + this.textbox.addEventListener("keyup", function (e) { + if (e.keyCode != 13) { + self._query(0, self.textbox.value); + } + }); + + this.textbox.addEventListener("search", function (e) { + // console.log(e); + }); + + this.menu.appendChild(this.textbox); + + } + + // get collection + let layout = Layout.get(this, "div", true, true); + + //debugger; + + + if (layout != null && layout.label != undefined && layout.menu != undefined) { + this.label = layout.label.node; + this.repeat.appendChild(layout.menu.node); + } + else if (layout != null && layout.null != null) + { + this.label = layout.null.node; + this.repeat.appendChild(layout.null.node.cloneNode(true)); + } + else + { + this.label = document.createElement("div"); + this.repeat.innerHTML = this.innerHTML; + } + + // clear everything else + //this.innerHTML = ""; + + this.label.className = this.cssClass + "-label"; + + this.appendChild(this.label); + + this.label.addEventListener("click", function (e) { + self.show(); + }); + + this.menu.appendChild(this.repeat); + this.menu.appendChild(this.counter); + + + if (this.hasArrow) { + this.arrow = document.createElement("div"); + this.arrow.className = this.cssClass + "-arrow"; + this.appendChild(this.arrow); + + + this.arrow.addEventListener("click", function (e) { + if (self.visible) + self.hide(); + else + self.show(); + }); + } + + if (this.hasAdd) { + this._add_button = document.createElement("div"); + this._add_button.className = this.cssClass + "-add"; + this.appendChild(this._add_button); + + this._add_button.addEventListener("click", function (e) { + self._emit("add", { value: self.data }) + }); + } + + + if (this.searchlist) + this.appendChild(this.menu); + else + { + app.appendChild(this.menu); + if (app.loaded) + { + ///console.log("Append", this.menu); + await this.menu.create(); + await IUI.create(this.menu); + this._make_bindings(this.menu); + } + } + + this.addEventListener("click", function (e) { + if (e.target == self.textbox) + self.show(); + }); + } + + get disabled() { + return this.hasAttribute("disabled"); + } + + set disabled(value) { + if (this._autocomplete) { + this.textbox.disabled = value; + } + + if (value) { + this.setAttribute("disabled", value); + } + else { + this.removeAttribute("disabled"); + } + + + } + /* + set(item) { + + if (this.autocomplete != undefined) { + if (item != null) + this.textbox.value = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field]; + else + this.textbox.value = ""; + } else { + if (item != null) + this.label.innerHTML = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field]; + else + this.label.innerHTML = ""; + } + + this.selected = item; + this._emit("select", item); + } + */ + + show() { + this.setVisible(true); + //this.textbox.focus(); + } + + hide() { + this.setVisible(false); + //this.textbox.focus(); + } + + clear() { + if (this.autocomplete !== undefined) + this.textbox.value = ""; + //else + // this.label.innerHTML = ""; + + //this.menu.clear(); + this.response.start = 0; + this.selected = null; + } + + async _query() { + + + if (this._autocomplete) + if (this.disabled) + return; + + let self = this; + let text = this._autocomplete ? this.textbox.value : null; + + var res = this.query(0, text) + if (res instanceof Promise) + res = await res; + + //.then(async (res) => { + if (res[1].length == 0) + await self.setData(null); + + await this.menu.setData(res); + + + // show results + //self.menu.clear(); + + + + // for (var i = 0; i < res.length; i++) { + // let nodes = this.template.content.cloneNode(true).childNodes; + + // while (nodes.length > 0) { + // let n = nodes[0]; + // if (n instanceof HTMLElement) + // n.setAttribute(":data", `d[${i}]`); + // self.menu.appendChild(n); + // } + + // } + + // self.menu.updateBindings(); + //self.menu.setData(res); + + + //}).catch(x => { + + //}); + } + + + async setData(value) { + + // this.label.innerHTML = ""; + + await super.setData(value); + + try { + //let text = this.formatter(value); + // this.label.innerHTML = text == null ? "" : text; + + this._emit("select", { value }); + } + catch (ex) { + //console.log(ex); + this._emit("select", { value }); + } + + //this._checkValidity(); + + + if (this._checkValidity() && this.isAuto) + this.revert(); + + } + + + setVisible(visible) { + + if (visible == this.visible) + return; + + //console.log("SLCT: SetVisible", visible); + + if (visible) { + this._query(0); + + // show menu + var rect = this.getBoundingClientRect(); + this.menu.style.width = (this.clientWidth - this._computeMenuOuterWidth()) + "px"; + this.menu.style.paddingTop = rect.height + "px"; + this.menu.setVisible(true, rect.left, rect.top);//, this.menu); + this.visible = true; + + this.classList.add(this.cssClass + "-visible"); + + if (this._autocomplete) + setTimeout(() => { + this.textbox.focus(); + }, 100); + + } + else { + this.visible = false; + this.classList.remove(this.cssClass + "-visible"); + + this.menu.hide(); + } + + //this.textbox.focus(); + + } + + _computeMenuOuterWidth() { + + return this.menu.offsetWidth - this.menu.clientWidth; + /* + var style = window.getComputedStyle(this.menu.el, null); + var paddingLeft = style.getPropertyValue('padding-left'); + var paddingRight = style.getPropertyValue('padding-right'); + var borderLeft = style.getPropertyValue('border-left'); + var borderRight = style.getPropertyValue('border-right'); + + paddingLeft = parseInt(paddingLeft.substr(0, paddingLeft.length - 2)); + paddingRight = parseInt(paddingRight.substr(0, paddingRight.length - 2)); + borderLeft = parseInt(borderLeft.substr(0, borderLeft.length - 2)); + borderRight = parseInt(borderRight.substr(0, borderRight.length - 2)); + + return paddingLeft + paddingRight + borderLeft + borderRight; + */ + } + +}); \ No newline at end of file diff --git a/src/UI/SelectList.js b/src/UI/SelectList.js new file mode 100644 index 0000000..afe863b --- /dev/null +++ b/src/UI/SelectList.js @@ -0,0 +1,119 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class SelectList extends IUIElement { + constructor() { + super({ + selected: null, + list: [], + query: (x) => null, + formatter: (x) => x["name"] + }); + + var self = this; + + this._register("select"); + this.classList.add(this.cssClass); + +// this.menu = iui(menu[0]).menu({ customClass: this.customClass + "-menu", layout: this.layout.menu }); + this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" }); + + this.menu.on("visible", function (v) { + if (v) + self.classList.add(self.cssClass + "-active"); + else + self.classList.remove(self.cssClass + "-active"); + }); + + this.menu.on("click", (e) => { + let [data, element] = self.menu._getElementData(e.target); + if (data != undefined) + self.data = data; + }); + + + document.body.appendChild(this.menu); + + this.label = document.createElement("div"); + this.label.className = this.cssClass + "-label"; + + + this.appendChild(this.label); + + this.label.addEventListener("click", function (e) { + self.show(); + }); + + this.arrow = document.createElement("div"); + this.arrow.className = this.customClass + "-arrow"; + + this.header = document.createElement("div"); + this.header.className = this.customClass + "-header"; + + this.header.appendChild(this.label); + this.header.appendChild(this.arrow); + + this.appendChild(this.header); + + this.arrow.addEventListener("click", function (e) { + self.show(); + }); + } + + clear() { + this.menu.clear(); + return this; + } + + add(item) { + this.menu.add(item); + return this; + } + + set(item) { + if (typeof item == "string" || typeof item == "number") { + for (var i = 0; i < this.menu.list.length; i++) { + if (this.menu.list[i][this.menu.index] == item) { + item = this.menu.list[i]; + break; + } + } + } + + // item is action + this.label.innerHTML = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field]; + this.selected = item; + + this._emit("select", item); + return this; + } + + show() { + return this.setVisible(true); + } + + hide() { + return this.setVisible(false); + } + + _computeMenuOuterWidth() { + return this.menu.offsetWidth - this.menu.clientWidth; + } + + setVisible(visible) { + if (visible) { + this.response.start = 0; + this._emit("query", null, this.response); + + // show menu + var rect = this.el.getBoundingClientRect(); + this.menu.el.style.width = (rect.width - this._computeMenuOuterWidth()) + "px"; + this.menu.setVisible(true, rect.left, rect.top + rect.height); + } + else { + this.menu.hide(); + } + + return this; + } +}); \ No newline at end of file diff --git a/src/UI/Tab.js b/src/UI/Tab.js new file mode 100644 index 0000000..08d750c --- /dev/null +++ b/src/UI/Tab.js @@ -0,0 +1,20 @@ +import { IUI } from "../Core/IUI.js"; +import IUIElement from "../Core/IUIElement.js"; + +export default IUI.module(class Tab extends IUIElement { + constructor(properties) { + super(properties); + } + + create() { + + } + + get title() { + return this.getAttribute("title"); + } + + get selected() { + return this.hasAttribute("selected");// == "1" || selected == "yes" || selected == "true"); + } +}); \ No newline at end of file diff --git a/src/UI/TabbedTarget.js b/src/UI/TabbedTarget.js new file mode 100644 index 0000000..33e01f2 --- /dev/null +++ b/src/UI/TabbedTarget.js @@ -0,0 +1,207 @@ + +import IUIElement from "../Core/IUIElement.js"; +import Tab from "./Tab.js"; +import { IUI } from "../Core/IUI.js"; +import Target from "../Router/Target.js"; + +export default IUI.module(class TabbedTarget extends Target { + + constructor() { + super({ + selected: null, + list: [], + _y: 0, + _x: 0, + auto: true, + }); + } + + + create() { + var self = this; + + this._register("select"); + + + this._bar = document.createElement("div"); + this._bar.classList.add(this.cssClass + "-bar"); + + this._ext = document.createElement("span"); + this._ext.className = this.cssClass + "-bar-ext"; + this._bar.appendChild(this._ext); + + + + //this.insertAdjacentElement("afterBegin", this._bar); + + this._body = document.createElement("div"); + this._body.className = this.cssClass + "-body"; + + this.appendChild(this._bar); + this.appendChild(this._body); + + + + var items = [];// this.getElementsByClassName("tab"); + + for (var i = 0; i < this.children.length; i++) + if (this.children[i] instanceof Tab) + items.push(this.children[i]); + + this._observer = new ResizeObserver(x => { + self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px"; + }); + + items.map(x => self.add(x)); + + + this.addEventListener("touchstart", function (e) { + + var x = e.target; + do { + if (x == self) + break; + var sy = window.getComputedStyle(x)["overflow-x"]; + if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto")) + return; + } while (x = x.parentElement) + + self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX; + self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY; + }, { passive: true }); + + this.addEventListener("touchmove", function (e) { + if (!self._x || !self._y) { + return; + } + + var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX; + var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY; + var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp; + var yDiff = self._y - yUp; + + + var index = self.list.indexOf(self.selected); + + if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/ + if (xDiff > 0) { + if (index < self.list.length - 1) { + self.select(self.list[index + 1]); + //self.selected.scrollIntoView(); + } + /* left swipe */ + } else { + + if (index > 0) + self.select(self.list[index - 1]); + + /* right swipe */ + } + } else { + if (yDiff > 0) { + /* up swipe */ + } else { + /* down swipe */ + } + } + /* reset values */ + self._x = null; + self._y = null; + + }, { passive: true }); + } + + created() { + //this._updateSize(); + } + + add(item) { + + var label = document.createElement("i-check"); + label.innerHTML = item.title; + + this._ext.insertAdjacentElement("beforebegin", label); + + label.className = this.cssClass + "-button"; + + item.classList.add(this.cssClass + "-content"); + label.content = item; + item.label = label; + + this._body.append(item); + + + //this._bar.appendChild(label); + //this._bar.insertAdjacentElement("afterBegin", label); + + this.list.push(item); + var self = this; + label.on("check", function (v) { + //if (v && !self._neglect) + self.select(item); + }); + + //this._updateSize(); + //this.updateBindings(); + + if (item.selected) + this.select(item); + + + return this; + } + + //_updateSize() { + // for (var i = 0; i < this._body.children.length; i++) { + // if (this._body.clientHeight < this._body.children[i].offsetHeight) { + // this._body.style.height = this._body.children[i].offsetHeight + "px"; + // } + // } + //} + + select(item) { + var tab; + if (item instanceof Tab) + tab = item; + else if (typeof o === 'string' || o instanceof String) + for (var i = 0; i < this.list.length; i++) + if (this.list[i].id == item) { + tab = item; + break; + } + else if (!isNaN(item)) + tab = this.list[i]; + + //this._neglect = true; + + var self = this; + + this.list.forEach(function (i) { + if (i == tab) + tab.label.check(true);// set(true, false); + else { + i.classList.remove(self.cssClass + "-content-active"); + i.label.check(false);// set(false, false); + } + }); + + + //this._neglect = false; + tab.classList.add(this.cssClass + "-content-active"); + + if (this.selected != null) + this._observer.unobserve(this.selected); + this.selected = tab; + this._observer.observe(this.selected); + + if (document.dir == "rtl") + this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth; + else + this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth; + + + this._emit("select", tab); + return this; + } + +}); \ No newline at end of file diff --git a/src/UI/Table.js b/src/UI/Table.js new file mode 100644 index 0000000..3d7d1c8 --- /dev/null +++ b/src/UI/Table.js @@ -0,0 +1,1422 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; +import Layout from "../Data/Layout.js"; + +export default IUI.module(class Table extends IUIElement { + constructor() + { + super({ + indexer: (x) => x.instance?.id ?? x.id, + parents_getter: (x) => x.instance?.attributes.item("parents"), + children_getter: (x) => x.instance?.attributes.item("children"), + parents_changed: (x, p) => false, + _long_press_x: 0, + _long_press_y: 0, + updateOnModification: true, + last_query: () => true + }); + + var self = this; + + this.list = []; + + this._register("click"); + this._register("rowdblclick"); + this._register("contextmenu"); + this._register("expand"); + this._register("enter"); + this._register("leave"); + this._register("touch"); + + + //window.addEventListener("resize", function(e){ + // self.updateSize(); + //}); + + this._resizing = false; + this._resizeX = 0; + } + + get layout() + { + return this._layout; + } + + set layout(value) + { + this._layout = value; + + if (!this._created) + return; + + var self = this; + + this.header.innerHTML = ""; + + let row = this.header.insertRow(); + + for (var i = 0; i < value.length; i++) { + let column = value[i]; + let cell = row.insertCell(); + + + var width; + if (column.width && column.width.substring(column.width.length-1) == "%") + width = ((parseInt(column.width.substring(0, column.width.length - 1)) / 100) * this.clientWidth) + "px"; + else + width = column.width; + + cell.style.width = width; + //cell.setAttribute("data-width", column.width); + + let hWrap = document.createElement("div"); + hWrap.className = this.cssClass + "-header-wrap"; + + let resizer = document.createElement("div"); + resizer.className = this.cssClass + "-resizer"; + + resizer.addEventListener("mousedown", function(e) + { + self.updateSize(); + //corssbrowser mouse pointer values + self._resizeX = e.pageX || e.clientX + (document.documentElement.scrollLeft ? + document.documentElement.scrollLeft : + document.body.scrollLeft); + + self._resizingColumnWidth = cell.clientWidth; + self._resizingTableWidth = self.table.clientWidth; + self._resizing = true; + self._resizingColumn = cell;// self.headers.indexOf(cell); + document.onselectstart = function() {return false}; + }); + + + if (column.type && column.type == "search") + { + let input = document.createElement("input"); + input.type = "search"; + input.className = this.cssClass + "-header-input"; + input.placeholder = column.name; + input.id = self.id + "_" + column.field; + + input.addEventListener("keyup", function() { + self.search(column, input.value); + }); + + hWrap.appendChild(input); + + } + else if (column.type && column.type == "select") + { + // filter out list + column.filter = []; + + let select = document.createElement("div"); + select.id = self.id + "_" + column.field; + select.className = self.cssClass + "-header-select"; + select.innerHTML = column.name; + select.setAttribute("data-dir", "normal"); + + var menu = document.createElement("div"); + menu.className = self.cssClass + "-header-menu"; + + select.addEventListener("click", function(e) + { + if (select.getAttribute("data-dir") == "down") + self.sort(column, true); + else + self.sort(column, false); + }); + + var tip = document.createElement("div"); + tip.className = self.cssClass + "-filter-menu"; + menu.appendChild(tip); + + menu.addEventListener("click", function(evt){ + if (evt.target != menu) + return; + + if (tip.style.display == "none") + { + var items = self.list.distinct(column.field); + tip.innerHTML = ""; + + var filters = []; + + for(var i = 0; i < items.length; i++) + { + var item = items[i]; + var fc = document.createElement("input"); + fc.type = "checkbox"; + fc.checked = column.filter.indexOf(item) > -1 ? false : true; + // add to filters list + filters.push({el: fc, text: item}); + // add to field.filter to be rendered by the grid + fc.addEventListener("click", function(){ + column.filter = []; + filters.forEach(function(filter) + { + if (!filter.checked) + column.filter.push(filter.text); + }); + + self._applyFilter(); + }); + + var fi = document.createElement("label"); + fi.className = self.cssClass + "-filter-menu-item"; + fi.innerHTML = column.formatter ? column.formatter(item, fi) : item; + tip.appendChild(fc); + tip.appendChild(fi); + tip.appendChild(document.createElement("br")); + } + + tip.style.display = "block"; + } + else + { + tip.style.display = "none"; + } + }); + + + hWrap.appendChild(select); + hWrap.appendChild(menu); + + } + else + { + let text = document.createElement("div"); + text.className = self.cssClass + "-header-text"; + text.innerHTML = column.name; + text.setAttribute("data-dir", "normal"); + + //var sort = ne("div"); + //sort.className = "grid-header-sort"; + + hWrap.appendChild(text); + //hWrap.appendChild(resizer); + //hWrap.appendChild(sort); + + text.addEventListener("click", function(e) + { + if (text.getAttribute("data-dir") == "down") + self.sort(column, true); + else + self.sort(column, false); + }); + } + + hWrap.appendChild(resizer); + cell.appendChild(hWrap); + } + } + + + create() { + let self = this; + + // get layout + this._layout = Layout.get(this, "td", true); + + this.table = document.createElement("table"); + this.table.className = this.cssClass + "-body"; + this.appendChild(this.table); + + this.body = this.table.createTBody(); + this.header = this.table.createTHead(); + this.header.className = this.cssClass + "-header"; + + this.body.addEventListener("mousedown", function(e){ + if (self.multiselect) + { + self._boxStartX = e.pageX; + self._boxStartY = e.pageY; + self._multiselecting = true; + self.selectBox.classList.add(self.cssClass + "-select-box-visible"); + } + }); + + this.selectBox = document.createElement("div"); + this.selectBox.className = this.cssClass + "-select-box"; + this.appendChild(this.selectBox); + + this.body.addEventListener("mousemove", function(e){ + + if (self._multiselecting || self._multideselecting) + { + self._boxEndX = e.pageX; + self._boxEndY = e.pageY; + + if (e.movementY > 0) + { + self._multiselecting = true; + self._multideselecting = false; + } + else if (e.movementY < 0) + { + self._multiselecting = false; + self._multideselecting = true; + } + + + if (self._boxEndX > self._boxStartX) + { + self.selectBox.style.left = self._boxStartX + "px"; + self.selectBox.style.width = (self._boxEndX - self._boxStartX) + "px"; + } + else + { + self.selectBox.style.left = self._boxEndX + "px"; + self.selectBox.style.width = (self._boxStartX - self._boxEndX) + "px"; + } + + if (self._boxEndY > self._boxStartY) + { + self.selectBox.style.top = self._boxStartY + "px"; + self.selectBox.style.height = (self._boxEndY - self._boxStartY) + "px"; + } + else + { + self.selectBox.style.top = self._boxEndY + "px"; + self.selectBox.style.height = (self._boxStartY - self._boxEndY) + "px"; + } + + // now lets look for all rows within this range + var rect = self.body.getBoundingClientRect(); + var offset = { + top: rect.top + document.body.scrollTop, + left: rect.left + document.body.scrollLeft + }; + + var by, sy; + + if (self._boxStartY > self._boxEndY) + { + by = self._boxStartY - offset.top; + sy = self._boxEndY - offset.top; + } + else + { + by = self._boxEndY - offset.top; + sy = self._boxStartY - offset.top; + } + + + var selected = []; + + for(var i = 0; i < self.body.rows.length; i++) + { + var top = self.body.rows[i].offsetTop; + var bottom = top + self.body.rows[i].offsetHeight; + + if ((top > sy || bottom > sy) && (top < by || bottom < by)) + { + selected.push(self.body.rows[i]); + self.body.rows[i].classList.add(self.cssClass + "-row-selected"); + } + else + { + self.body.rows[i].classList.remove(self.cssClass + "-row-selected"); + } + } + + for(var i = 0; i < selected.length; i++) + self._selectChildren(selected[i], true); + } + }); + + document.body.addEventListener("mouseup", function(e){ + + if (self._multiselecting || self._multideselecting) + { + self._multiselecting = false; + self._multideselecting = false; + self.selectBox.classList.remove(self.cssClass + "-select-box-visible"); + self.selectBox.style.width = "0px"; + self.selectBox.style.height = "0px"; + } + }); + + + document.addEventListener('mouseup', function () { + self._resizing = false; + document.onselectstart = function() {return true}; + + }); + + document.addEventListener('mousemove', function (e) { + if (self._resizing) { + var x = e.pageX || e.clientX + (document.documentElement.scrollLeft ? + document.documentElement.scrollLeft : + document.body.scrollLeft); + //var y = e.pageY || e.clientY + (document.documentElement.scrollTop ? + // document.documentElement.scrollTop : + // document.body.scrollTop); + + var col = self._resizingColumn; + + var tw,cw; + + if (document.dir == "rtl") + { + tw = (self._resizingTableWidth - (x - self._resizeX)); + cw = (self._resizingColumnWidth - (x - self._resizeX)); + } + else + { + tw = (self._resizingTableWidth + (x - self._resizeX)); + cw = (self._resizingColumnWidth + (x - self._resizeX)); + } + + + // must have limits + if (cw > 20) + { + /* + tw = 0; + for(var i = 0; i < self.headers.length; i++) + { + if (i != self.resizingColumn) + tw += self.headers[i].clientWidth; + //self.headers[self.resizingColumn]; + } + */ + //tw += cw; + self.header.style.width = tw + "px"; + self.table.style.width = tw + "px"; + + col.style.width = cw + "px"; + //dummy.style.width = cw + "px";// col.style.width; + + + } + } + }); + + // load data + //if (this.data) + // this.load(this.data); + + //this.updateSize(); + + this._created = true; + + if (this._layout) + this.layout = this._layout; + } + + + updateSize() + { + let totalWidth = 0; + + for (var i = 0; i < this.table.tHead.rows[0].cells.length; i++) + { + var header = this.table.tHead.rows[0].cells[i]; + var width = header.clientWidth + "px"; + + if (width == "0px") + { + width = this.headers[i].getAttribute("data-width"); + if (width.substring(width.length-1) == "%") + width = ((parseInt(width.substring(0, width.length - 1)) / 100) * this.clientWidth) + "px"; + } + + if (header.style.display != "none") + totalWidth+=parseInt(width.substr(0, width.length-2)); + + header.style.width = width; + } + + if (this.clientWidth > 0) + { + this.body.style.width = this.table.tHead.clientWidth + "px"; + this.table.tHead.style.width = this.table.tHead.clientWidth + "px"; + } + else + { + this.table.style.width = totalWidth + "px"; + } + } + + sort(column, desc) + { + + + if (this.tree) + return; + + //let column = this.layout[columnIndex]; + + if (column.sorter) + { + this.list.sort(column.sorter); + } + else + { + this.list.sort(function(a, b){ + if (typeof a[column.field] == "number" || a[column.field] instanceof Date) + return a[column.field] - b[column.field]; + else + return a[column.field].toString().localeCompare(b[column.field]); + + }); + } + + if (desc) + this.list.reverse(); + + for(var i = 0; i < this.list.length; i++) + { + var tr = this.getRows(this.indexer(this.list[i]))[0]; + this.body.insertAdjacentElement("beforeEnd", tr); + } + + for(var i = 0; i < this.layout.length; i++) + { + let th = this.table.tHead.rows[0].cells[i]; + let txt = th.getElementsByClassName(this.cssClass + "-header-text")[0]; + + if (column !== this.layout[i]) + txt.setAttribute("data-dir", "normal"); + else if (desc) + txt.setAttribute("data-dir", "up"); + else + txt.setAttribute("data-dir", "down"); + } + } + + + setRowVisible(row, visible) + { + var level = parseInt(row.getAttribute("data-level")); + + if (visible) + { + row.classList.remove(this.cssClass + "-row-hidden"); + row.classList.remove(this.cssClass + "-row-selected"); + + // make sure parent is visible + for(var i = row.rowIndex - 2; i >= 0; i--) + { + var lev = parseInt(this.body.rows[i].getAttribute("data-level")); + if (lev > level) + break; + else if (lev < level) + { + this.setRowVisible(this.body.rows[i], true); + break; + } + } + } + else + { + row.classList.add(this.cssClass + "-row-hidden"); + // make sure children are visible + for(var i = row.rowIndex; i < this.body.rows.length; i++) + { + var lev = parseInt(this.body.rows[i].getAttribute("data-level")); + if (lev <= level) + break; + this.body.rows[i].classList.add(this.cssClass + "-row-hidden"); + } + } + } + + expand(row, visible) + { + var button = row.getElementsByClassName(this.cssClass + "-tree")[0]; + button.setAttribute("data-expand", visible ? 1 : 0); + var level = parseInt(row.getAttribute("data-level")); + + for(var i = row.rowIndex; i < this.body.rows.length; i++) + { + var lev = parseInt(this.body.rows[i].getAttribute("data-level")); + if (lev <= level) + break; + + if (!visible) + { + button = this.body.rows[i].getElementsByClassName(this.cssClass + "-tree"); + if (button.length > 0) + button[0].setAttribute("data-expand", 0); + this.body.rows[i].classList.add(this.cssClass + "-row-hidden"); + } + else if (lev == level + 1) + this.body.rows[i].classList.remove(this.cssClass + "-row-hidden"); + } + + //this.updateSize(); + }; + + + filter(queryFunction) + { + if (queryFunction) + { + this.last_query = queryFunction; + + for(var i = 0; i < this.body.rows.length; i++) + { + var item = this.get(parseInt(this.body.rows[i].getAttribute("data-id"))); + var visible = queryFunction(item); + this.setRowVisible(this.body.rows[i], visible); + } + } + // restore default view + else + { + this.last_query = function(){return true}; + + // view all + for(var i = 0; i < this.body.rows.length; i++) + this.body.rows[i].classList.remove(this.cssClass + "-row-hidden"); + + // hide non-expanded + for(var i = 0; i < this.body.rows.length; i++) + { + var row = this.body.rows[i]; + var level = parseInt(row.getAttribute("data-level")); + var button = row.getElementsByClassName(this.cssClass + "-tree"); + if (button.length > 0) + { + // hide ? + if (button[0].getAttribute("data-expand") == '0') + { + for(i = i + 1; i < this.body.rows.length; i++) + { + var subRow = this.body.rows[i]; + var l = parseInt(subRow.getAttribute("data-level")); + if (l > level) + subRow.classList.add(this.cssClass + "-row-hidden"); + else + { + i--; + break; + } + } + } + } + } + } + } + + _selectChildren(row, value) + { + var level = parseInt(row.getAttribute("data-level")); + + for(var i = row.rowIndex; i < this.body.rows.length; i++) + { + var subRow = this.body.rows[i]; + var l = parseInt(subRow.getAttribute("data-level")); + if (l > level) + { + if (value) + subRow.classList.add(this.cssClass + "-row-selected"); + else + subRow.classList.remove(this.cssClass + "-row-selected"); + } + else + { + break; + } + } + } + + _select(row, item, multiple = false, context = false) + { + if (this.multiselect) + { + + var checked = row.classList.contains(this.cssClass + "-row-selected"); + + // implement Microsoft Windows Explorer behaivor + if (context) + { + multiple = checked || multiple; + checked = !checked; + } + + if (multiple) + { + var rows = this.getRows(this.indexer(item)); + + if (checked) + for(var i = 0; i < rows.length; i++) + { + rows[i].classList.remove(this.cssClass + "-row-selected"); + this._selectChildren(rows[i], false); + } + else + for(var i = 0; i < rows.length; i++) + { + rows[i].classList.add(this.cssClass + "-row-selected"); + this._selectChildren(rows[i], true); + } + } + else + { + for(var i = 0; i < this.body.rows.length; i++) + this.body.rows[i].classList.remove(this.cssClass + "-row-selected"); + + row.classList.add(this.cssClass + "-row-selected"); + this._selectChildren(row, true); + } + } + else + { + for(var i = 0; i < this.body.rows.length; i++) + if (this.body.rows[i] == row) + row.classList.add(this.cssClass + "-row-selected"); + else + this.body.rows[i].classList.remove(this.cssClass + "-row-selected"); + this._selected = item; + } + } + + get selected() + { + if (this.multiselect) + { + var rt = []; + for(var i = 0; i < this.body.rows.length; i++) + { + if (this.body.rows[i].classList.contains(this.cssClass + "-row-selected")) + { + var item = this.get(this.body.rows[i].getAttribute("data-id")); + if (rt.indexOf(item) < 0) + rt.push(item); + } + } + + return rt; + } + else + return this._selected; + } + + _applyFilter() + { + for(var i = 0; i < this.list.length; i++) + { + var item = this.list[i]; + el = document.getElementById(this.id + "_" + this.indexer(item), this.body); + + // visible by default + el.style.display = ""; + + for(var j = 0; j < this.layout.length; j++) + { + var column = this.layout[j]; + if (column.filter) + column.filter.forEach(function(filter) + { + if (item[column.field] == filter) + { + // hide this one + el.style.display = "none"; + } + }); + } + } + }; + + get(id) + { + for(var i = 0; i < this.list.length; i++) + if (this.indexer(this.list[i]) == id) + return this.list[i]; + } + + + setColumnVisible(index, visible) + { + var display = visible ? "table-cell" : "none"; + var columnWidth = this.headers[index].clientWidth; + + for(var i = 0; i < this.table.rows.length; i++) + this.table.rows[i].cells[index].style.display = display; + + this.headers[index].style.display = display; + + // shrink the table + if (display == "none") + { + //this.header.width = (this.header.clientWidth - columnWidth) + "px"; + } + + //this.updateSize(); + } + + containsAny(items) + { + if (items == null) + return false; + + for(var i = 0; i < items.length; i++) + { + if (this.list.indexOf(items[i]) > -1) + return true; + } + + return false; + } + + + _createTreeButton(row, dynamicLoading, item) + { + var self = this; + var button = document.createElement("div"); + button.className = this.cssClass + "-tree"; + + button.setAttribute("data-expand", dynamicLoading ? 2 : 0); + button.addEventListener("click", function(){ + + var eState = this.getAttribute("data-expand"); + + if (eState == '2') + { + var ev = { + button: button, + item: item, + row: row, + table: self, + success: function() + { + self.expand(this.button.parentNode.parentNode, 1); + }, + failure: function(errorMsg) + { + this.setAttribute("data-expand", 2); + } + }; + + this.setAttribute("data-expand", 3); + + // raise event + self._emit("expand", ev); + } + else if (eState == "0") + { + self.expand(this.parentNode.parentNode, true); + } + else if (eState == "1") + { + self.expand(this.parentNode.parentNode, false); + } + }); + + row.cells[0].insertAdjacentElement("afterbegin", button); + } + + add(item, dynamicLoading)//fast) + { + + this.list.push(item); + + var self = this; + var parents = this.parents_getter(item); + var newRow; + + if (this.containsAny(parents)) + { + for(var i = 0; i < parents.length; i++) + { + var parent = parents[i]; + var inListParents = this.getRows(this.indexer(parent)); + + for(var j = 0; j < inListParents.length; j++) + { + var parentRow = inListParents[j]; + // add expand button to parent + var treeButton = parentRow.getElementsByClassName(this.cssClass + "-tree", parentRow); + + if (treeButton.length == 0) + { + this._createTreeButton(parentRow); + newRow = this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, false, parentRow.rowIndex); + } + else + { + newRow = this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, treeButton[0].getAttribute("data-expand") == '1', parentRow.rowIndex); + } + } + + // perhaps parent row depends on children + this.update(parent); + } + } + else + { + newRow = this._addRow(item, 0, true); + } + + if (dynamicLoading) + this._createTreeButton(newRow, true, item); + + if (item.on) + if (this.updateOnModification) + item.on("modified", function(propertyName){ + //console.log("render", propertyName, item); + self.update(item, propertyName); + }); + + + //if (!fast) + + // self.layout.forEach(function(field){ + // if (field.type && field.type == "select") + //{ + // calculate distinct + //} + //}); + //this.updateSize(); + + return self; + } + + _findIndexes(propertyIndex) + { + var rt = []; + for(var i = 0; i < this.layout.length; i++) + { + if (this.layout[i].field == propertyIndex || this.layout[i].field == "_any") + rt.push(i); + } + return rt; + }; + + _addRow(item, level, visible, index) + { + var self = this; + // add item + var tr = self.body.insertRow(index); + tr.setAttribute("data-id", this.indexer(item)); + tr.setAttribute("data-level", level); + if (visible) + tr.className = this.cssClass + "-row"; + else + tr.className = this.cssClass + "-row " + this.cssClass + "-row-hidden"; + + + for(var i = 0; i < this.layout.length; i++) + { + let column = this.layout[i]; + + let cl = column.node.cloneNode(true);// tr.insertCell(); + + this._make_bindings(cl) + tr.appendChild(cl); + + if (cl.dataMap != null) + cl.dataMap.render(item).then(() => self._renderElement(cl, cl.data)); + else { + cl.data = item; + this._renderElement(cl, cl.data); + } + //if (column.formatter) + //{ + // var rt = column.formatter(item[column.field], item, cl); + // if (rt instanceof Element) + // { + // cl.appendChild(rt); + // } + // else + // cl.innerHTML=rt; + //} + //else + // cl.innerHTML=item[column.field]; + + cl.style.display = this.table.tHead.rows[0].cells[i].style.display; + + } + + tr.addEventListener("click", function(e) + { + self._select(tr, item, e.ctrlKey); + self._emit("click", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("dblclick", function(e) + { + self._select(tr, item, e.ctrlKey); + self._emit("rowdblclick", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("contextmenu", function(e) + { + self._select(tr, item, e.ctrlKey, true); + self._emit("contextmenu", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("mouseleave", function(e){ + //if (self._multideselecting) + // tr.classList.remove(self.cssClass + "-row-selected"); + + self._emit("leave", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("mouseenter", function(e){ + //if (self._multiselecting) + // tr.classList.add(self.cssClass + "-row-selected"); + //self._select(tr, item, true); + + self._emit("enter", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("touchstart", function(e){ + + self._tx = e.touches[0].clientX; + self._ty = e.touches[0].clientY; + + self._long_press_item = item; + self._long_press_x = e.touches[0].clientX; + self._long_press_y = e.touches[0].clientY; + if (self._long_press_timeout) + clearTimeout(self._long_press_timeout); + self._long_press_timeout = setTimeout(function(){ + if (self._long_press_item) + { + self._select(tr, self._long_press_item); + self._emit("contextmenu", { data: self._long_press_item, event: e, row: tr }); + self._long_press_timeout = null; + self._long_press_item = null; + } + }, 600); + }); + + this.addEventListener("touchmove", function(e){ + + if (Math.abs(e.touches[0].clientX - self._long_press_x) > 10 || Math.abs(e.touches[0].clientY - self._long_press_y) > 10) + { + self._long_press_item = null; + } + }); + + tr.addEventListener("touchend", function(e){ + + var tx = e.changedTouches[0].clientX; + var ty = e.changedTouches[0].clientY; + + if (Math.abs(tx - self._tx) < 10 && Math.abs(ty - self._ty) < 10 ) + { + self._select(tr, item); + self._emit("touch", { data: item, event: e , row: tr}); + } + + if (self._long_press_timeout) + clearTimeout(self._long_press_timeout); + else + e.preventDefault(); + + self._long_press_item = null; + self._long_press_timeout = null; + }); + + return tr; + }; + + get(id) + { + for(var i = 0; i < this.list.length; i++) + if (this.indexer(this.list[i]) == id) + return this.list[i]; + return null; + } + + getRows(id) + { + var rt = []; + for(var i = 0; i < this.body.rows.length; i++) + if (this.body.rows[i].getAttribute("data-id") == id) + rt.push(this.body.rows[i]); + return rt; + } + + toJSON(level) + { + //if (!level) + // level = 3; + + var headers = ["#"]; + var list = []; + + // make header + for(var i = 0; i < this.layout.length; i++) + if (!( this.layout[i].noPrint || this.layout[i].noExport) && this.headers[i].style.display !="none") + { + headers.push( this.layout[i].name); + } + + var index = 1; + + // build table + for(var i = 0; i < this.body.rows.length; i++) + { + var row = this.body.rows[i]; + var rowLevel = parseInt(row.getAttribute("data-level")); + + if (level) + { + if (rowLevel > level) + continue; + } + else if (row.classList.contains(this.cssClass + "-row-hidden")) + { + continue; + } + + var item = [rowLevel, index++]; + for(var j = 0; j < this.layout.length; j++) + if (!( this.layout[j].noPrint || this.layout[j].noExport) && this.headers[j].style.display !="none") + { + var text = ""; + for(var k = 0; k < row.cells[j].childNodes.length; k++) + if (row.cells[j].childNodes[k].nodeType == 3) + { + text = row.cells[j].childNodes[k].data; + break; + } + + item.push(text);//row.cells[j].innerHTML); + } + list.push(item); + } + + return {headers: headers, data: list}; + } + + toTable(level){ + // create table + var tbl = document.createElement("table"); + var header = tbl.createTHead(); + var body = tbl.createTBody(); + + var tr = header.insertRow(); + + // make header + for(var i = 0; i < this.layout.length; i++) + if (!this.layout[i].noPrint && this.headers[i].style.display !="none") + { + var th = tr.insertCell(); + th.innerHTML = this.layout[i].name; + } + + // build table + for(var i = 0; i < this.body.rows.length; i++) + { + var row = this.body.rows[i]; + if (level) + { + if (parseInt(row.getAttribute("data-level")) > level) + continue; + } + else if (row.classList.contains(this.cssClass + "-row-hidden")) + { + continue; + } + + tr = body.insertRow(); + tr.classList.add("level-" + (parseInt(row.getAttribute("data-level"))+1)); + + for(var j = 0; j < this.layout.length; j++) + if (!this.layout[j].noPrint && this.headers[j].style.display !="none") + { + var td = tr.insertCell(); + td.innerHTML = row.cells[j].innerHTML; + } + } + + return tbl; + }; + + _removeRow(row) + { + var level = parseInt(row.getAttribute("data-level")); + var nextIndex = row.rowIndex; // zero-indexed (dummy header included, so it's 1-indexed') + // remove all children + while(nextIndex < this.body.rows.length){ + var r = this.body.rows[nextIndex]; + var l = parseInt(r.getAttribute("data-level")); + if (l <= level) + break; + this.body.rows.deleteRow(nextIndex++); + } + + // get parent row + var parentRow = this._getParentRow(row); + // remove row itself + this.body.deleteRow(row.rowIndex-1); + // remove expand button from parent if it has no more children + if (parentRow) + { + // last item ? means has no children + if (parentRow.rowIndex == this.body.rows.length + || parseInt(this.body.rows[parentRow.rowIndex].getAttribute("data-level")) <= parseInt(parentRow.getAttribute("data-level"))) + { + // remove expand button + var button = parentRow.getElementsByClassName(this.cssClass + "-tree"); + if (button.length > 0) + button[0].parentNode.removeChild(button[0]); + } + + // render parent (in case formatter depends on children) + //var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); + //this._renderRow(parentRow, parent); + } + } + + _getById(id) + { + for(var i = 0; i < this.list.length; i++) + if (this.indexer(this.list[i]) == id) + return this.list[i]; + + return null;// this; + } + + remove(item) + { + if (typeof item == "string" || typeof item == "number") + item = this._getById(item); + + if (item == null) + return; + + var rows = this.getRows(this.indexer(item)); + // remove all occurrences + for(var i = 0; i < rows.length; i++) + this._removeRow(rows[i]); + + var i = this.list.indexOf(item); + this.list.splice(i, 1); + + return this; + } + + clear() + { + while(this.body.rows.length > 0) + this.body.deleteRow(0); + + this.list = []; + + return this; + } + + + //_renderRow(row, item, propertyName) + //{ + // if (propertyName) + // { + // var indexes = this._findIndexes(propertyName); + + // for(var i = 0; i < indexes.length; i++) + // { + // var expand = null; + // if (indexes[i] == 0) + // { + // expand = row.cells[0].getElementsByClassName(this.cssClass + "-tree"); + // expand = expand.length > 0 ? expand[0] : null; + // } + + // if (this.layout[indexes[i]].formatter) + // { + // var rt = this.layout[indexes[i]].formatter(item[propertyName], item, row.cells[indexes[i]]); + + // if (rt == null) + // { + // // do nothing + // expand = false; + // } + // else if (rt instanceof Element) + // { + // row.cells[indexes[i]].innerHTML = ""; + // row.cells[indexes[i]].appendChild(rt); + // } + // else + // row.cells[indexes[i]].innerHTML=rt; + // } + // else + // row.cells[indexes[i]].innerHTML=item[propertyName]; + + // if (expand) + // row.cells[0].insertAdjacentElement("afterbegin", expand); + // } + // } + // else + // { + // var expand = row.cells[0].getElementsByClassName(this.cssClass + "-tree"); + // expand = expand.length > 0 ? expand[0] : null; + + // for(var i = 0; i < this.layout.length; i++) + // { + // var column = this.layout[i]; + // if (column.formatter) + // { + // var rt = column.formatter(item[column.field], item, row.cells[i]); + // if (rt instanceof Element) + // { + // row.cells[i].innerHTML = ""; + // row.cells[i].appendChild(rt); + // } + // else + // row.cells[i].innerHTML=rt; + // } + // else + // row.cells[i].innerHTML=item[column.field]; + // } + + // if (expand) + // row.cells[0].insertAdjacentElement("afterbegin", expand); + // } + //} + + _getParentRow(row) + { + var level = parseInt(row.getAttribute("data-level")); + for(var i = row.rowIndex - 2; i >= 0; i--) + { + if (parseInt(this.body.rows[i].getAttribute("data-level")) < level) + return this.body.rows[i]; + } + } + + _renderItem(item, propertyName = null) + { + var rows = this.getRows(this.indexer(item)); + var removedRows = []; + + var self = this; + + var parentsChanged = this.parents_changed(item, propertyName); + + if (propertyName == null || parentsChanged) + { + var notModifiedParents = []; + + // remove from parents + var parents = this.parents_getter(item); + + for(var i = 0; i < rows.length; i++) + { + var row = rows[i]; + var level = parseInt(row.getAttribute("data-level")); + // get parent row + var parentRow = this._getParentRow(row); + if (parentRow) + { + // parent found + var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); + if (parents == null || parents.indexOf(parent) == -1) + { + // remove this node + this._removeRow(row); + removedRows.push(row); + } + else + notModifiedParents.push(parent); + } + } + + // add to new parents + if (parents != null) + { + for(var i = 0; i < parents.length; i++) + { + var parent = parents[i]; + if (notModifiedParents.indexOf(parent) == -1 && this.list.indexOf(parent) > -1) + { + // add new row + var inListParents = this.getRows(this.indexer(parent)); + + for(var j = 0; j < inListParents.length; j++) + { + var parentRow = inListParents[j]; + var treeButton = parentRow.getElementsByClassName(this.cssClass + "-tree", parentRow); + if (treeButton.length == 0) + { + this._createTreeButton(parentRow); + this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, false, parentRow.rowIndex); + } + else + { + this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, treeButton[0].getAttribute("data-expand") == '1', parentRow.rowIndex); + } + } + } + } + } + } + else + { + // render parent (in case formatter depends on children) + //for(var i = 0; i < rows.length; i++) + //{ + // var parentRow = this._getParentRow(rows[i]); + // if (parentRow) + // { + // var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); + // this._renderRow(parentRow, parent, propertyName); + // } + //} + } + + // render the non-removed rows. + //for(var i = 0; i < rows.length; i++) + // if (removedRows.indexOf(rows[i]) == -1) + // this._renderRow(rows[i], item, propertyName); + } + + update(item, propertyName) + { + if (item) + this._renderItem(item, propertyName); + else + { + for(var i = 0; i < this.list.length; i++) + this._renderItem(this.list[i]); + } + + return this; + } + + + + async setData(value) + { + await super.setData(value); + + this.clear(); + + if (this.tree) + { + var self = this; + var loadFunction = function(items, level) + { + for(var i = 0; i < items.length; i++) + { + var item = items[i]; + self.list.push(item); + + var row = self._addRow(item, level, level==0); + if (item.children && item.children.length > 0) + { + self._createTreeButton(row); + // load children + loadFunction(item.children, level+1); + } + } + } + + // recursively load items + loadFunction(value, 0); + } + else + { + for (var i = 0; i < value.length; i++) + this.add(value[i]); + } + } +}); \ No newline at end of file diff --git a/src/UI/Tabs.js b/src/UI/Tabs.js new file mode 100644 index 0000000..8df79d3 --- /dev/null +++ b/src/UI/Tabs.js @@ -0,0 +1,207 @@ + +import IUIElement from "../Core/IUIElement.js"; +import Tab from "./Tab.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class Tabs extends IUIElement { + + constructor() { + super({ + selected: null, + list: [], + _y: 0, + _x: 0, + auto: true, + }); + } + + + create() + { + var self = this; + + this._register("select"); + + + this._bar = document.createElement("div"); + this._bar.classList.add(this.cssClass + "-bar"); + + this._ext = document.createElement("span"); + this._ext.className = this.cssClass + "-bar-ext"; + this._bar.appendChild(this._ext); + + + + //this.insertAdjacentElement("afterBegin", this._bar); + + this._body = document.createElement("div"); + this._body.className = this.cssClass + "-body"; + + this.appendChild(this._bar); + this.appendChild(this._body); + + + + var items = [];// this.getElementsByClassName("tab"); + + for (var i = 0; i < this.children.length; i++) + if (this.children[i] instanceof Tab) + items.push(this.children[i]); + + this._observer = new ResizeObserver(x => { + self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px"; + }); + + items.map(x => self.add(x)); + + + this.addEventListener("touchstart", function (e) { + + var x = e.target; + do { + if (x == self) + break; + var sy = window.getComputedStyle(x)["overflow-x"]; + if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto")) + return; + } while (x = x.parentElement) + + self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX; + self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY; + }, { passive: true }); + + this.addEventListener("touchmove", function (e) { + if (!self._x || !self._y) { + return; + } + + var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX; + var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY; + var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp; + var yDiff = self._y - yUp; + + + var index = self.list.indexOf(self.selected); + + if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/ + if (xDiff > 0) { + if (index < self.list.length - 1) { + self.select(self.list[index + 1]); + //self.selected.scrollIntoView(); + } + /* left swipe */ + } else { + + if (index > 0) + self.select(self.list[index - 1]); + + /* right swipe */ + } + } else { + if (yDiff > 0) { + /* up swipe */ + } else { + /* down swipe */ + } + } + /* reset values */ + self._x = null; + self._y = null; + + }, { passive: true }); + } + + created() { + //this._updateSize(); + } + + add(item) { + + var label = document.createElement("i-check"); + label.innerHTML = item.title; + + this._ext.insertAdjacentElement("beforebegin", label); + + label.className = this.cssClass + "-button"; + + item.classList.add(this.cssClass + "-content"); + label.content = item; + item.label = label; + + this._body.append(item); + + + //this._bar.appendChild(label); + //this._bar.insertAdjacentElement("afterBegin", label); + + this.list.push(item); + var self = this; + label.on("check", function (v) { + //if (v && !self._neglect) + self.select(item); + }); + + //this._updateSize(); + //this.updateBindings(); + + if (item.selected) + this.select(item); + + + return this; + } + + //_updateSize() { + // for (var i = 0; i < this._body.children.length; i++) { + // if (this._body.clientHeight < this._body.children[i].offsetHeight) { + // this._body.style.height = this._body.children[i].offsetHeight + "px"; + // } + // } + //} + + select(item) { + var tab; + if (item instanceof Tab) + tab = item; + else if (typeof o === 'string' || o instanceof String) + for (var i = 0; i < this.list.length; i++) + if (this.list[i].id == item) { + tab = item; + break; + } + else if (!isNaN(item)) + tab = this.list[i]; + + //this._neglect = true; + + var self = this; + + this.list.forEach(function (i) { + if (i == tab) + tab.label.check(true);// set(true, false); + else { + i.classList.remove(self.cssClass + "-content-active"); + i.label.check(false);// set(false, false); + } + }); + + + //this._neglect = false; + tab.classList.add(this.cssClass + "-content-active"); + + if (this.selected != null) + this._observer.unobserve(this.selected); + this.selected = tab; + this._observer.observe(this.selected); + + if (document.dir == "rtl") + this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth; + else + this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth; + + + this._emit("select", tab); + return this; + } + +}); \ No newline at end of file diff --git a/src/UI/Window.js b/src/UI/Window.js new file mode 100644 index 0000000..116eac2 --- /dev/null +++ b/src/UI/Window.js @@ -0,0 +1,314 @@ +import IUIElement from "../Core/IUIElement.js"; +import { IUI } from "../Core/IUI.js"; + +export default IUI.module(class IUIWindow extends IUIElement { + constructor() { + super({ closeable: true, draggable: false, focus: false }); + + this._register("resize"); + this._register("move"); + this._register("close"); + + this._uid = "d:" + Math.random().toString(36).substring(2); + + } + + static moduleName = "window"; + + create() { + var self = this; + + this.tabIndex = 0; + + // create header + this._header = document.createElement("div"); + this._header.className = this.cssClass + "-header"; + + if (this.draggable) + this._header.setAttribute("draggable", true); + + var f = this.getElementsByClassName(this.cssClass + "-footer"); + this._footer = f.length > 0 ? f[0] : null; + + var b = this.getElementsByClassName(this.cssClass + "-body"); + //this.body = b.length > 0 ? b[0]: null; + + if (b.length == 0) { + this._body = document.createElement("div"); + this._body.className = this.cssClass + "-body"; + + while (this.children.length > (this._footer == null ? 0 : 1)) + this._body.appendChild(this.children[0]); + + this.insertAdjacentElement("afterBegin", this._body); + + //super.updateBindings(); + } + else + this._body = b[0]; + + if (this.icon) { + this._icon = document.createElement("div"); + this._icon.className = this.cssClass + "-icon"; + //this._icon.src = this.icon; + + + + this._icon.style.setProperty("--icon", `url('${this.icon}')`); + this._header.appendChild(this._icon); + } + + this._caption = document.createElement("div"); + this._caption.className = this.cssClass + "-caption"; + this._caption.innerHTML = this.caption; + + this._subtitle = document.createElement("div"); + this._subtitle.className = this.cssClass + "-subtitle"; + this._subtitle.innerHTML = this.subtitle; + + this._tools = document.createElement("div"); + this._tools.className = this.cssClass + "-tools"; + + this._header.appendChild(this._caption); + this._header.appendChild(this._subtitle); + this._header.appendChild(this._tools); + + if (this.closeable) { + this._close = document.createElement("div"); + this._close.className = this.cssClass + "-tools-close button"; + this._close.addEventListener("click", function () { + self._emit("close"); + }); + } + + //this.addEventListener("mousedown", function (e) { + // self.setFocus(true); + //}); + + this.insertAdjacentElement("afterBegin", this._header); + } + + setHeaderVisible(value) { + this._header.style.display = value ? "" : "none"; + //this._updateSize(); + } + + setCloseVisible(value) { + if (this.closeable) + this._close.style.display = value ? "" : "none"; + } + + get icon() { + return this.getAttribute("icon"); + } + /* + setFocus(v) { + this.focus = v; + + var self = this; + + if (v) { + this.classList.add(this.cssClass + "-active"); + + return; + var last = IUI._nav_list[IUI._nav_list.length - 1]; + + if (last && last != this) { + last.classList.remove(this.cssClass + "-active"); + last.focus = false; + } + + if (last != this) { + if (window.location.hash != "#" + this._uid) { + IUI._nav_ignore = true; + window.location.hash = this._uid; + //window.location.replace("#" + this._uid); + } + } + + var i = IUI._nav_list.indexOf(this); + if (i > -1) + IUI._nav_list.splice(i, 1); + + IUI._nav_list.push(this); + + } + else { + var last = IUI._nav_list[IUI._nav_list.length - 1]; + if (last == this) { + IUI._nav_list.pop(); + last = IUI._nav_list.pop(); + + IUI._nav_list.push(this); + + + if (last) { + last.classList.add(this.cssClass + "-active"); + last.focus = true; + IUI._nav_list.push(last); + if (window.location.hash != "#" + last._uid) { + IUI._nav_ignore = true; + window.location.hash = last._uid; + //window.location.replace("#" + last._uid); + } + } + else { + if (window.location.hash != "#") { + IUI._nav_ignore = true; + var x = window.scrollX; + var y = window.scrollY; + + window.location.hash = "#"; + + window.scrollTo(x, y); + //window.location.replace("#"); + + } + } + } + + this.classList.remove(this.cssClass + "-active"); + + } + + return this; + } + */ + + + show() { + //this.setFocus(true); + return this; + } + + move(x, y) { + this.style.left = x + "px"; + this.style.top = y + "px"; + this._emit("move", x, y); + return this; + } + + resize(width, height) { + this.style.width = width + "px"; + this.style.height = height + "px"; + + this._updateSize(); + + this._emit("resize", this.clientWidth, this.clientHeight); + + return this; + } + + _updateSize() { + if (IUI.responsive) + return; + + if (this._body) { + if (this.clientWidth < this._body.scrollWidth) + this.style.width = this._body.scrollWidth + 1 + "px"; + + if (this._footer) { + + if (this.clientWidth < this._footer.offsetWidth) + this.style.width = this._footer.offsetWidth + "px"; + + if (this.clientHeight < this._header.offsetHeight + this._body.scrollHeight + this._footer.offsetHeight) + this.style.height = (this._header.offsetHeight + this._body.scrollHeight + this._footer.offsetHeight) + "px"; + + } + else { + if (this.clientHeight < this._header.offsetHeight + this._body.scrollHeight) + this.style.height = (this._header.offsetHeight + this._body.scrollHeight + 1) + "px"; + + } + } + + // handle windows exceeding document size + if (this.clientHeight > document.body.clientHeight) { + this.style.height = document.body.clientHeight + "px"; + if (this._footer) + this._body.style.height = (this.clientHeight - this._footer.clientHeight - this._header.clientHeight) + "px"; + else + this._body.style.height = (this.clientHeight - this._header.clientHeight) + "px"; + } + + + if (this.clientWidth > document.body.clientWidth) + this.style.width = document.body.clientWidth + 1 + "px"; + + } + + + get caption() { + return this.getAttribute("caption"); + } + + set caption(value) { + this._caption.innerHTML = value; + this.setAttribute("caption", value); + } + + + get subtitle() { + return this.getAttribute("subtitle"); + } + + set subtitle(value) { + this._subtitle.innerHTML = value; + this.setAttribute("subtitle", value); + } + + +}); + +/* +IUI._nav_list = []; + +window.addEventListener("hashchange", function(e){ + + if (IUI._nav_ignore) + { + IUI._nav_ignore = false; + return; + } + + if (IUI.responsive) + { + var oldHash = e.oldURL.split("#"); + if (oldHash.length == 2) + { + var hash = oldHash[1]; + var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIWindow); }); + dialogs.forEach(function(dlg){ + if (dlg._uid == hash) + dlg.hide(); + }); + } + } + + var newHash = e.newURL.split("#"); + if (newHash.length == 2) + { + var hash = newHash[1]; + + if (hash == "") + { + var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIDialog); }); + dialogs.forEach(function(d){ + d.hide(); + }); + + IUI._nav_list = []; + + return; + } + + var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIWindow); }); + + dialogs.forEach(function(dlg){ + if (dlg._uid == hash) + dlg.setFocus(true); + }); + } +}); +*/ diff --git a/src/iui.js b/src/iui.js new file mode 100644 index 0000000..8cc855e --- /dev/null +++ b/src/iui.js @@ -0,0 +1,62 @@ +import {IUI, iui} from "./Core/IUI.js"; + +import "./Core/IUIElement.js"; +import './Core/App.js'; + +import './Router/Router.js'; +import './Router/Route.js'; +import './Router/Link.js'; +import './Router/Target.js'; + +import './Data/Repeat.js'; +import './Data/Include.js'; +import './Data/Form.js'; +import './UI/Login.js'; +import './UI/Window.js'; +import './UI/Dialog.js'; +import './UI/Input.js'; +import './UI/Tab.js'; +import './UI/Tabs.js'; + +import './UI/Table.js'; + +import './UI/Check.js'; +import './UI/Button.js'; +import './UI/Navbar.js'; + +import './UI/DateTimePicker.js'; + +import './Data/Layout.js'; +import './Data/Field.js'; + +import './UI/Background.js'; +import './UI/Menu.js'; +import './Data/TableRow.js'; + +import './UI/Select.js'; + +import './UI/DropDown.js'; +import './UI/Grid.js'; + + +window.addEventListener("beforeprint", (e)=>{ + let viewRoute = router.current.viewRoute; + viewRoute.style.height = "auto"; + router.style.height = viewRoute.clientHeight + "px"; +}); + +window.addEventListener("afterprint", (e)=>{ + let viewRoute = router.current.viewRoute; + viewRoute.style.height = ""; + router.style.height = ""; +}); + +window.addEventListener("load", async function () { + await IUI.create(document.body); + await IUI.created(document.body); + //if (window.app != null) { + // window.app._emit("load", { app: window.app }); + // } +}); + +window.iui = iui; \ No newline at end of file diff --git a/test/esiur.html b/test/esiur.html new file mode 100644 index 0000000..d40030e --- /dev/null +++ b/test/esiur.html @@ -0,0 +1,127 @@ + + + + + IUI 2.0 + + + + + + + + + +
+ +
+ Users + Add User + Rooms + Add Room +
+ + + + + + Hello + + + + Phone + PIN + + + + + + + + + + +
Showing: ${d.length}
+ + + + + + + + + + + + +
#${this.start + parseInt(index)}${d.Username}${d.Tel}${d.Email}${d.Online > 0 ? 'Online' : 'Offline'}${d.Permissions}${d.Picture}Edit (${d.Username})
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Username:${d.Username}
Tel:${d.Tel}
Email:${d.Email}
Online:${d.Online}
Permissions${d.Permissions}
Picture:${d.Picture}
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..84d3967 --- /dev/null +++ b/test/index.html @@ -0,0 +1,322 @@ + + + + + GO Command & Control 1.0 + + + + + +
+ + +
+ +
hi
+
hi
+
hi
+
hi
+
hi
+ + + Drop Down +
+Hi world +
+ + + + Drop Up +
+Hi world +
+ + + + +
+
+
+
+ + + + Hello + + +
+ +
+ +
+ + + Table + + + + + + + + + + + + + Autocomplete + + + + + + Select + + + + + + + +
  • First thing
    • +
  • Second thing
    • +
  • Third thing
    • +     +
    + +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • + +
    +
    +
    + +
    + + + + + + +
    + +
    +
    + +
    + + + + + +
    + + + + + + +
    Username:
    Password:
    + +
    +
    + Login + Cancel +
    +     + + + + Hello World + + + \ No newline at end of file diff --git a/test/index1.html b/test/index1.html new file mode 100644 index 0000000..4c01f67 --- /dev/null +++ b/test/index1.html @@ -0,0 +1,293 @@ + + + + + GO Command & Control 1.0 + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    +
    +
    hi
    +
    hi
    +
    hi
    +
    hi
    +
    hi
    +
    +
    + Hello +
    +Hi world +
    +
    + +
    + +
    +
    +
    +
    +
    + +
    + Hello +
    + +
    + +
    + +
    +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    + +
    +
    +
    +
    +
    +
    +
      +
    • Hi
      • +
    • Hi 2
      • +
    • Hi 3
      • +
    • Hi 4
      • +
    • Hi 5
      • +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    + + + + + +
    + +
    + + + + +
    Username:
    Password:
    +
    +
    + Login + Cancel +
    +
    + + + +
    Hello World
    + + + \ No newline at end of file diff --git a/test/rooms.html b/test/rooms.html new file mode 100644 index 0000000..e976db5 --- /dev/null +++ b/test/rooms.html @@ -0,0 +1,18 @@ + + + + + + + + + + + +
    ${this.start + parseInt(index)}${v.Username}${v.Tel}${v.Email}${v.Online}${v.Permissions}${v.Picture}
    +     + + +