diff --git a/.github/ISSUE_TEMPLATE/showcase-proposal.md b/.github/ISSUE_TEMPLATE/showcase-proposal.md new file mode 100644 index 0000000..cb85456 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/showcase-proposal.md @@ -0,0 +1,39 @@ +--- +name: Showcase Proposal +about: Proposal to publish a new content into wiki's Showcase page. +title: Proposal of showcase project - PROJECT_NAME +labels: showcase +assignees: '' + +--- + +> Showcase proposal template +> Note: "*" fields are mandatory. + +> Project Name: The name of the project that will be used as title of the section of the showcase. + +Project Name *: + +> Project Description: The description of the project that will be used as a paragraph after the title of the showcase. + +Project Description *: + +> Project Author: The author of the project that will be informed after the project description. (Keep if blank to don't show the author) + +Project Author: + +> Project Links: Links to access the project showcase. These links will be shown after project description. + +Project Links: + +> Project Images: Images of the project (can be the images with legends, or the links to it). + +Project Images *: + +> Additional Information: Other relevant information. + +Additional Information: + +> Feedback: If you want to give a feedback to the project, or a suggestion, please, enjoy this field! + +Feedback: diff --git a/.github/ISSUE_TEMPLATE/showcase-removal.md b/.github/ISSUE_TEMPLATE/showcase-removal.md new file mode 100644 index 0000000..cc28be4 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/showcase-removal.md @@ -0,0 +1,19 @@ +--- +name: Showcase Removal +about: Remove a published content from wiki's Showcase page. +title: Removal of showcase project - PROJECT_NAME +labels: showcase +assignees: '' + +--- + +> Remove showcase project template +> "*" fields are mandatory. + +> Project Name: The name of the project to be removed from showcase page. + +Project Name *: + +> Reason: The reason for removal + +Reason *: diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a42a25..7219e6b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,24 @@ # TuiCss ChangeLog ### This is the change log of TuiCss. Here you can find the documentations of the feature of each released version +#### 2.1.1 + +Bugs +- Fixed memory leak due to setinterval for clocks: https://github.com/vinibiavatti1/TuiCss/pull/29 +- Imported media queries classes to tuicss.scss: https://github.com/vinibiavatti1/TuiCss/issues/30 + +Examples +- Created the mobile example + +#### 2.1.0 +- .disabled classes +- Fixed the default radius border of inputs +- Removed pointer events of checkbox and radio button +- Tabs and buttons example pages +- Remove padding of inputs +- .no-border util +- Forecast example + #### 2.0.0 - Jquery removed (Now use vanilla Javascript) - Chart example page diff --git a/README.md b/README.md index b4ccfe3..e31818b 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ Text-based user interface CSS library
-- Documentation -- +
+ -- Showcase --

npm version badge @@ -18,18 +20,18 @@ ### About -TuiCss is a library focused to create web applications using an interface based on ASCII table, like the old MS-DOS applications. This kind of interface is very eligible because the ultra-contrast colors used and because the reduced effects used on the components in the view. The base of this project is Turbo Vision Framework, but some other frameworks were checked also to introduce some features to TuiCss, like [curses](https://en.wikipedia.org/wiki/Curses_(programming_library)), [ncurses](https://en.wikipedia.org/wiki/Ncurses), [Newt](https://en.wikipedia.org/wiki/Newt_(programming_library)), etc. Check the examples page in the wiki to stay on top of some creations, or check the getting started page to start use this library! +TuiCss is a library focused to create web applications using an interface based on ASCII table, like the old MS-DOS applications. This kind of interface is very legible because the ultra-contrast colors used and because the reduced effects used on the components in the view. The base of this project is Turbo Vision Framework, but some other frameworks were also checked to introduce some features to TuiCss, like [curses](https://en.wikipedia.org/wiki/Curses_(programming_library)), [ncurses](https://en.wikipedia.org/wiki/Ncurses), [Newt](https://en.wikipedia.org/wiki/Newt_(programming_library)), etc. Check the examples page in the wiki to stay on top of some creations, or check the getting started page to start using this library! ### Getting Started -To start to use the TuiCss in your project, you can just download the repository content and import the files that are in the dist folder with the html directives. On the other hand, you can install the package with NPM using the following command: +To start to use TuiCss in your project, you can just download the repository content and import the files that are in the dist folder with the html directives. Alternatively, you can install the package with NPM using the following command: ```bash $ npm install tuicss ``` -For more details, visit the [Getting Started Page](https://github.com/vinibiavatti1/TuiCss/wiki/Getting-Started) in the respoitory wiki. +For more details, visit the [Getting Started Page](https://github.com/vinibiavatti1/TuiCss/wiki/Getting-Started) in the repository wiki. ### Documentation -Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, components index, examples, styles, or to know how to contribute for this project. +Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, components index, examples, styles, or to know how to contribute to this project. diff --git a/dist/tuicss.css b/dist/tuicss.css index d895408..471da3f 100644 --- a/dist/tuicss.css +++ b/dist/tuicss.css @@ -49,6 +49,60 @@ hr { input, select, textarea { width: 200px; } +/* Font (Options: 'Lucida Console' or 'DOS') */ +/* Characters */ +/* Theme */ +/* Responsive */ +/* Scrool */ +/* Grid */ +@media only screen and (max-width: 600px) { + .hide-on-small-only, .hide-on-small-and-down { + display: none !important; } } + +@media only screen and (max-width: 992px) { + .hide-on-med-and-down { + display: none !important; } } + +@media only screen and (min-width: 601px) { + .hide-on-med-and-up { + display: none !important; } } + +@media only screen and (min-width: 600px) and (max-width: 992px) { + .hide-on-med-only { + display: none !important; } } + +@media only screen and (min-width: 993px) { + .hide-on-large-only { + display: none !important; } } + +@media only screen and (min-width: 1201px) { + .hide-on-extra-large-only { + display: none !important; } } + +@media only screen and (min-width: 1201px) { + .show-on-extra-large { + display: block !important; } } + +@media only screen and (min-width: 993px) { + .show-on-large { + display: block !important; } } + +@media only screen and (min-width: 600px) and (max-width: 992px) { + .show-on-medium { + display: block !important; } } + +@media only screen and (max-width: 600px) { + .show-on-small { + display: block !important; } } + +@media only screen and (min-width: 601px) { + .show-on-medium-and-up { + display: block !important; } } + +@media only screen and (max-width: 992px) { + .show-on-medium-and-down { + display: block !important; } } + /* Font (Options: 'Lucida Console' or 'DOS') */ /* Characters */ /* Theme */ @@ -587,6 +641,9 @@ input, select, textarea { .no-padding { padding: 0px !important; } +.no-border { + border: none !important; } + .content { padding: 12px; } @@ -603,6 +660,9 @@ input, select, textarea { .cursor-default { cursor: default !important; } +.disabled { + cursor: not-allowed !important; } + /* Components */ .tui-button { display: inline-block; @@ -614,11 +674,14 @@ input, select, textarea { cursor: pointer; text-align: center; box-shadow: 10px 10px black; + border-radius: 0px; user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } + .tui-button.disabled { + text-decoration: line-through; } .tui-button:active { background-color: #00a8a8 !important; @@ -648,13 +711,16 @@ input[type=button] { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } + .tui-checkbox.disabled { + color: #a8a8a8; } .tui-checkbox input { position: absolute; opacity: 0; cursor: pointer; top: 0px; - left: 0px; } + left: 0px; + pointer-events: none; } .tui-checkbox span { position: absolute; @@ -787,7 +853,10 @@ input[type=button] { color: white; outline: 0; border: none; - padding: 1px; } + border-radius: 0px; } + .tui-input.disabled { + background-color: #a8a8a8; + color: black; } .tui-input:focus { background-color: yellow !important; @@ -888,13 +957,16 @@ input[type=button] { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } + .tui-radio.disabled { + color: #a8a8a8; } .tui-radio input { position: absolute; opacity: 0; cursor: pointer; top: 0px; - left: 0px; } + left: 0px; + pointer-events: none; } .tui-radio span { position: absolute; @@ -1172,6 +1244,8 @@ input[type=button] { .tui-tab.active { background-color: #a8a8a8; color: #0000a8; } + .tui-tab.disabled { + text-decoration: line-through; } .tui-tab-content { display: none; } @@ -1182,6 +1256,9 @@ input[type=button] { padding: 0px; color: yellow; outline: none; } + .tui-textarea.disabled { + background-color: #a8a8a8; + color: black; } .tui-window { background-color: #0000a8; diff --git a/dist/tuicss.js b/dist/tuicss.js index 4950a08..34fe447 100644 --- a/dist/tuicss.js +++ b/dist/tuicss.js @@ -30,6 +30,12 @@ function tabsController() { for (const tab of tabs) { // Add click listeners to them. tab.addEventListener('click', function (e) { + + // Check if the clicked tab is disabled + if(e.target.classList.contains("disabled")) { + return; + } + // Remove the 'active' class from any and all tabs. for (const otherTab of tabs) { otherTab.classList.remove('active'); @@ -93,45 +99,44 @@ function datetimeController() { // Kick off our clock interval stuff. datetimeInterval(); - setInterval(datetimeInterval, 1000); + + // Synchronize time and set interval to control the clocks + setTimeout(() => { + setInterval(datetimeInterval, 1000); + }, 1000 - new Date().getMilliseconds()); function datetimeInterval() { for (const clock of clocks) { - // Set the interval. - const interval = setInterval(() => { - // Technically we should have already returned earlier in the code, but to be on the safe side. - if (clock === null) { - clearInterval(interval); - return; - } + if (clock === null) { + continue; + } - // Get the format we want to display in the element. - let format = clock.getAttribute('data-format'); + // Get the format we want to display in the element. + let format = clock.getAttribute('data-format'); - // parse out the date and time into constants. - const today = new Date(); - const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1); - const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1); - const year = today.getFullYear() + ''; - const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours(); - const hour12 = (parseInt(hour) + 24) % '12' || '12'; - const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes(); - const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds(); - const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM'; + // parse out the date and time into constants. + const today = new Date(); + const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1); + const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1); + const year = today.getFullYear() + ''; + const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours(); + const hour12 = (parseInt(hour) + 24) % '12' || '12'; + const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes(); + const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds(); + const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM'; - // Replace based on the format. - format = format.replace('M', month); - format = format.replace('d', day); - format = format.replace('y', year); - format = format.replace('H', hour); - format = format.replace('h', hour12); - format = format.replace('m', minute); - format = format.replace('s', second); - format = format.replace('a', ampm); + // Replace based on the format. + format = format.replace('M', month); + format = format.replace('d', day); + format = format.replace('y', year); + format = format.replace('H', hour); + format = format.replace('h', hour12); + format = format.replace('m', minute); + format = format.replace('s', second); + format = format.replace('a', ampm); - // Show it in the element. - clock.innerHTML = format; - }); + // Show it in the element. + clock.innerHTML = format; } } } diff --git a/dist/tuicss.min.css b/dist/tuicss.min.css index 9ace269..477f8f1 100644 --- a/dist/tuicss.min.css +++ b/dist/tuicss.min.css @@ -1 +1 @@ -@charset "UTF-8";@font-face{font-family:DOS;src:url("fonts/Perfect DOS VGA 437 Win.ttf")}html{font-family:"Lucida Console",monospace;font-size:18px;box-sizing:border-box}body{margin:0}*,:after,:before{font-family:inherit;font-size:inherit;box-sizing:inherit}ul{margin:0;padding:0;list-style-type:none}ul li{list-style-type:none}ul li a{display:block}a{color:inherit;text-decoration:none}span{margin:0}hr{border:none;border-bottom:2px solid #fff}input,select,textarea{width:200px}.primary{background-color:#0000a8}.primary-text{color:#0000a8}.primary-border{border-color:#0000a8}.primary-hover:hover{background-color:#0000a8}.primary-text-hover:hover{color:#0000a8}.primary-border-hover:hover{border-color:#0000a8}.secondary{background-color:#a8a8a8}.secondary-text{color:#a8a8a8}.secondary-border{border-color:#a8a8a8}.secondary-hover:hover{background-color:#a8a8a8}.secondary-text-hover:hover{color:#a8a8a8}.secondary-border-hover:hover{border-color:#a8a8a8}.success{background-color:#00a800}.success-text{color:#00a800}.success-border{border-color:#00a800}.success-hover:hover{background-color:#00a800}.success-text-hover:hover{color:#00a800}.success-border-hover:hover{border-color:#00a800}.danger{background-color:#a80000}.danger-text{color:#a80000}.danger-border{border-color:#a80000}.danger-hover:hover{background-color:#a80000}.danger-text-hover:hover{color:#a80000}.danger-border-hover:hover{border-color:#a80000}.warning{background-color:#a8a800}.warning-text{color:#a8a800}.warning-border{border-color:#a8a800}.warning-hover:hover{background-color:#a8a800}.warning-text-hover:hover{color:#a8a800}.warning-border-hover:hover{border-color:#a8a800}.info{background-color:#00a8a8}.info-text{color:#00a8a8}.info-border{border-color:#00a8a8}.info-hover:hover{background-color:#00a8a8}.info-text-hover:hover{color:#00a8a8}.info-border-hover:hover{border-color:#00a8a8}.black-168{background-color:#000!important}.blue-168{background-color:#0000a8!important}.green-168{background-color:#00a800!important}.cyan-168{background-color:#00a8a8!important}.red-168{background-color:#a80000!important}.purple-168{background-color:#a800a8!important}.yellow-168{background-color:#a8a800!important}.white-168{background-color:#a8a8a8!important}.orange-168{background-color:#a85600!important}.black-168-text{color:#000!important}.blue-168-text{color:#0000a8!important}.green-168-text{color:#00a800!important}.cyan-168-text{color:#00a8a8!important}.red-168-text{color:#a80000!important}.purple-168-text{color:#a800a8!important}.yellow-168-text{color:#a8a800!important}.white-168-text{color:#a8a8a8!important}.orange-168-text{color:#a85600!important}.black-168-border{border-color:#000!important}.blue-168-border{border-color:#0000a8!important}.green-168-border{border-color:#00a800!important}.cyan-168-border{border-color:#00a8a8!important}.red-168-border{border-color:#a80000!important}.purple-168-border{border-color:#a800a8!important}.yellow-168-border{border-color:#a8a800!important}.white-168-border{border-color:#a8a8a8!important}.orange-168-border{border-color:#a85600!important}.black-168-hover:hover{background-color:#000!important}.blue-168-hover:hover{background-color:#0000a8!important}.green-168-hover:hover{background-color:#00a800!important}.cyan-168-hover:hover{background-color:#00a8a8!important}.red-168-hover:hover{background-color:#a80000!important}.purple-168-hover:hover{background-color:#a800a8!important}.yellow-168-hover:hover{background-color:#a8a800!important}.white-168-hover:hover{background-color:#a8a8a8!important}.orange-168-hover:hover{background-color:#a85600!important}.black-168-text-hover:hover{color:#000!important}.blue-168-text-hover:hover{color:#0000a8!important}.green-168-text-hover:hover{color:#00a800!important}.cyan-168-text-hover:hover{color:#00a8a8!important}.red-168-text-hover:hover{color:#a80000!important}.purple-168-text-hover:hover{color:#a800a8!important}.yellow-168-text-hover:hover{color:#a8a800!important}.white-168-text-hover:hover{color:#a8a8a8!important}.orange-168-text-hover:hover{color:#a85600!important}.black-168-border-hover:hover{border-color:#000!important}.blue-168-border-hover:hover{border-color:#0000a8!important}.green-168-border-hover:hover{border-color:#00a800!important}.cyan-168-border-hover:hover{border-color:#00a8a8!important}.red-168-border-hover:hover{border-color:#a80000!important}.purple-168-border-hover:hover{border-color:#a800a8!important}.yellow-168-border-hover:hover{border-color:#a8a800!important}.white-168-border-hover:hover{border-color:#a8a8a8!important}.orange-168-border-hover:hover{border-color:#a85600!important}.black-255{background-color:#000!important}.blue-255{background-color:#00f!important}.green-255{background-color:#0f0!important}.cyan-255{background-color:#0ff!important}.red-255{background-color:red!important}.purple-255{background-color:#ff00ff!important}.yellow-255{background-color:#ff0!important}.white-255{background-color:#fff!important}.orange-255{background-color:#ffa800!important}.black-255-text{color:#000!important}.blue-255-text{color:#00f!important}.green-255-text{color:#0f0!important}.cyan-255-text{color:#0ff!important}.red-255-text{color:red!important}.purple-255-text{color:#ff00ff!important}.yellow-255-text{color:#ff0!important}.white-255-text{color:#fff!important}.orange-255-text{color:#ffa800!important}.black-255-border{border-color:#000!important}.blue-255-border{border-color:#00f!important}.green-255-border{border-color:#0f0!important}.cyan-255-border{border-color:#0ff!important}.red-255-border{border-color:red!important}.purple-255-border{border-color:#ff00ff!important}.yellow-255-border{border-color:#ff0!important}.white-255-border{border-color:#fff!important}.orange-255-border{border-color:#ffa800!important}.black-255-hover:hover{background-color:#000!important}.blue-255-hover:hover{background-color:#00f!important}.green-255-hover:hover{background-color:#0f0!important}.cyan-255-hover:hover{background-color:#0ff!important}.red-255-hover:hover{background-color:red!important}.purple-255-hover:hover{background-color:#ff00ff!important}.yellow-255-hover:hover{background-color:#ff0!important}.white-255-hover:hover{background-color:#fff!important}.orange-255-hover:hover{background-color:#ffa800!important}.black-255-text-hover:hover{color:#000!important}.blue-255-text-hover:hover{color:#00f!important}.green-255-text-hover:hover{color:#0f0!important}.cyan-255-text-hover:hover{color:#0ff!important}.red-255-text-hover:hover{color:red!important}.purple-255-text-hover:hover{color:#ff00ff!important}.yellow-255-text-hover:hover{color:#ff0!important}.white-255-text-hover:hover{color:#fff!important}.orange-255-text-hover:hover{color:#ffa800!important}.black-255-border-hover:hover{border-color:#000!important}.blue-255-border-hover:hover{border-color:#00f!important}.green-255-border-hover:hover{border-color:#0f0!important}.cyan-255-border-hover:hover{border-color:#0ff!important}.red-255-border-hover:hover{border-color:red!important}.purple-255-border-hover:hover{border-color:#ff00ff!important}.yellow-255-border-hover:hover{border-color:#ff0!important}.white-255-border-hover:hover{border-color:#fff!important}.orange-255-border-hover:hover{border-color:#ffa800!important}.black{background-color:#000!important}.black-text{color:#000!important}.black-border{border-color:#000!important}.black-hover:hover{background-color:#000!important}.black-text-hover:hover{color:#000!important}.black-border-hover:hover{border-color:#000!important}.white{background-color:#fff!important}.white-text{color:#fff!important}.white-border{border-color:#fff!important}.white-hover:hover{background-color:#fff!important}.white-text-hover:hover{color:#fff!important}.white-border-hover:hover{border-color:#fff!important}.left{float:left!important}.right{float:right!important}.center{text-align:center}.left-align{text-align:left}.right-align{text-align:right}.center-align{text-align:center}.full-width{width:100%!important}.full-height{height:100%!important}.inline{display:inline!important}.inline-block{display:inline-block!important}.block{display:block!important}.valign-top{vertical-align:top!important}.valign-middle{vertical-align:middle!important}.valign-bottom{vertical-align:bottom!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.static{position:static!important}.no-shadow{box-shadow:none!important}.no-padding{padding:0!important}.content{padding:12px}.disable-select{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.cursor-pointer{cursor:pointer!important}.cursor-default{cursor:default!important}.tui-button{display:inline-block;outline:0;padding:1px 10px;background-color:#00a800;color:#000;border:none;cursor:pointer;text-align:center;box-shadow:10px 10px #000;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-button:active{background-color:#00a8a8!important;color:#000!important;box-shadow:none!important}.tui-button:focus{color:#0ff!important}input[type=button]{width:initial}.tui-checkbox{display:block;position:relative;cursor:pointer;color:#fff;padding-left:30px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-checkbox input{position:absolute;opacity:0;cursor:pointer;top:0;left:0}.tui-checkbox span{position:absolute;width:10px;height:10px;cursor:pointer;top:0;left:0}.tui-checkbox input:checked~span::after{content:"[√]";color:#0ff}.tui-checkbox input:not(checked)~span::after{content:"[ ]"}.tui-divider{border-bottom:2px solid #fff;display:block}.tui-black-divider{border-bottom:2px solid #000;display:block}.tui-dropdown{position:relative;display:inline-block;cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-dropdown-content{display:none;position:absolute;background-color:#a8a8a8;min-width:200px;padding:6px;z-index:9}.tui-dropdown-content ul{border:2px #000 solid}.tui-dropdown-content ul li{display:block!important;margin:6px}.tui-dropdown-content ul li a:hover{background-color:#00a800}.tui-dropdown:hover>.tui-dropdown-content:first-of-type{display:block}.tui-fieldset{border:6px #fff double;padding:12px;background-color:inherit;margin-bottom:6px}.tui-fieldset.no-legend{margin-top:6px}.tui-input-fieldset{border-top:6px #fff double;border-bottom:6px #fff double;border-left:2px #fff solid;border-right:2px #fff solid;padding:5px;background-color:inherit}.tui-input-fieldset legend{color:#fff}.tui-input-fieldset:hover{border-color:#ff0}.tui-input-fieldset:hover legend{color:#ff0}.tui-fieldset-button{position:absolute;top:0;right:16px;color:#fff;background-color:inherit;z-index:2;border:none;cursor:pointer;outline:0;padding:2px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-fieldset-button.left{right:initial;left:16px!important}.tui-fieldset-button.bottom{bottom:0;top:initial}.tui-fieldset-text{position:absolute;bottom:0;left:16px;color:#fff;background-color:inherit;z-index:2;padding:2px}.tui-fieldset-text.right{left:initial;right:16px}.tui-fieldset-text.top{top:0;bottom:initial}.tui-fieldset-button::before{content:"["}.tui-fieldset-button::after{content:"]"}.tui-fieldset-button:active{color:#0ff!important}.tui-input{background-color:#000;color:#fff;outline:0;border:none;padding:1px}.tui-input:focus{background-color:#ff0!important;color:#000!important}.tui-nav{width:100%;background-color:#a8a8a8;padding:0 2px;z-index:9;display:block;position:fixed}.tui-nav ul li{display:inline-block;margin-left:10px;padding:1px 3px}.tui-nav ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-nav ul li:hover{background-color:#00a800}.tui-panel{background-color:#0000a8;display:inline-block;color:#fff;box-shadow:10px 10px #000}.tui-panel-content{padding:12px}.tui-panel-header{padding-top:2px;display:block;background:#fff;text-align:center}.tui-progress-bar{display:block;position:relative;height:20px;width:200px;background-color:#00a8a8;overflow:hidden}.tui-progress{position:absolute;left:0;background-color:#0ff;height:100%;display:inline-block}.tui-progress-bar .tui-indeterminate{position:absolute;left:0;background-color:#0ff;height:20px;width:20px;display:inline-block;animation:indeterminate 1s backwards;animation-iteration-count:infinite;animation-timing-function:linear}.tui-progress-label{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);z-index:1}@keyframes indeterminate{from{margin-left:-10%}to{margin-left:100%}}.tui-radio{display:block;position:relative;cursor:pointer;color:#fff;padding-left:30px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-radio input{position:absolute;opacity:0;cursor:pointer;top:0;left:0}.tui-radio span{position:absolute;width:10px;height:10px;cursor:pointer;top:0;left:0}.tui-radio input:checked~span:after{content:"(•)";color:#0ff!important}.tui-radio input:not(checked)~span:after{content:"( )"}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background-image:url(images/scroll-cyan.png);background-repeat:repeat}::-webkit-scrollbar-thumb{background-color:#00a8a8}::-webkit-scrollbar-thumb:hover{background-color:#00a8a8}.tui-scroll-blue ::-webkit-scrollbar-track{background-image:url(images/scroll-blue.png)}.tui-scroll-blue ::-webkit-scrollbar-thumb{background-color:#0000a8}.tui-scroll-blue ::-webkit-scrollbar-thumb:hover{background-color:#0000a8}.tui-scroll-green ::-webkit-scrollbar-track{background-image:url(images/scroll-green.png)}.tui-scroll-green ::-webkit-scrollbar-thumb{background-color:#00a800}.tui-scroll-green ::-webkit-scrollbar-thumb:hover{background-color:#00a800}.tui-scroll-cyan ::-webkit-scrollbar-track{background-image:url(images/scroll-cyan.png)}.tui-scroll-cyan ::-webkit-scrollbar-thumb{background-color:#00a8a8}.tui-scroll-cyan ::-webkit-scrollbar-thumb:hover{background-color:#00a8a8}.tui-scroll-red ::-webkit-scrollbar-track{background-image:url(images/scroll-red.png)}.tui-scroll-red ::-webkit-scrollbar-thumb{background-color:#a80000}.tui-scroll-red ::-webkit-scrollbar-thumb:hover{background-color:#a80000}.tui-scroll-purple ::-webkit-scrollbar-track{background-image:url(images/scroll-purple.png)}.tui-scroll-purple ::-webkit-scrollbar-thumb{background-color:#a800a8}.tui-scroll-purple ::-webkit-scrollbar-thumb:hover{background-color:#a800a8}.tui-scroll-yellow ::-webkit-scrollbar-track{background-image:url(images/scroll-yellow.png)}.tui-scroll-yellow ::-webkit-scrollbar-thumb{background-color:#a8a800}.tui-scroll-yellow ::-webkit-scrollbar-thumb:hover{background-color:#a8a800}.tui-scroll-white ::-webkit-scrollbar-track{background-image:url(images/scroll-white.png)}.tui-scroll-white ::-webkit-scrollbar-thumb{background-color:#a8a8a8}.tui-scroll-white ::-webkit-scrollbar-thumb:hover{background-color:#a8a8a8}.tui-sidenav{position:fixed;top:0;left:0;background-color:#00a8a8;min-width:200px;box-shadow:10px 10px #000!important;padding:6px;z-index:10;height:100%;z-index:8;display:none}.tui-sidenav.right{left:initial;right:0}.tui-sidenav.active{display:block!important}.tui-sidenav ul{margin-top:20px;border:2px #000 solid}.tui-sidenav ul li{display:block;margin:6px}.tui-sidenav ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-sidenav ul li:hover{background-color:#ff0}.tui-sidenav-button{cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-statusbar{width:100%;background-color:#a8a8a8;padding:0 1px;left:0;bottom:0;z-index:9;position:fixed}.tui-statusbar ul li{display:inline-block;margin-left:10px;padding:2px 3px}.tui-statusbar ul li:active{background-color:#0000a8;color:#fff}.tui-statusbar ul li a{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-statusbar-divider{border-right:2px #000 solid;display:inline;margin:0 3px}.tui-table{border:2px solid #a8a8a8;padding:5px;border-collapse:collapse}.tui-table.hovered-blue tbody tr:hover{background-color:#00f!important;color:#000}.tui-table.hovered-green tbody tr:hover{background-color:#0f0!important;color:#000}.tui-table.hovered-cyan tbody tr:hover{background-color:#0ff!important;color:#000}.tui-table.hovered-red tbody tr:hover{background-color:red!important;color:#fff}.tui-table.hovered-purple tbody tr:hover{background-color:#ff00ff!important;color:#fff}.tui-table.hovered-yellow tbody tr:hover{background-color:#ff0!important;color:#000}.tui-table.hovered-white tbody tr:hover{background-color:#fff!important;color:#000}.tui-table.hovered-orange tbody tr:hover{background-color:#ffa800!important;color:#000}.tui-table.hovered tbody tr:hover{background-color:#0ff!important;color:#000}.tui-table.striped-blue tbody tr:nth-child(even){background-color:#0000a8}.tui-table.striped-green tbody tr:nth-child(even){background-color:#00a800}.tui-table.striped-cyan tbody tr:nth-child(even){background-color:#00a8a8}.tui-table.striped-red tbody tr:nth-child(even){background-color:#a80000}.tui-table.striped-purple tbody tr:nth-child(even){background-color:#a800a8}.tui-table.striped-yellow tbody tr:nth-child(even){background-color:#a8a800}.tui-table.striped-white tbody tr:nth-child(even){background-color:#a8a8a8;color:#000}.tui-table.striped-orange tbody tr:nth-child(even){background-color:#a85600}.tui-table tbody{background-color:inherit;color:#fff}.tui-table tbody tr td{border-right:2px solid #a8a8a8;padding:0 2px}.tui-table thead{background-color:inherit;color:#ff0;text-align:center}.tui-table tfoot{background-color:inherit;color:#ff0;text-align:center}.tui-table-grid{border-collapse:collapse;width:100%}.tui-table-grid tbody tr td,.tui-table-grid tbody tr th,.tui-table-grid thead tr td,.tui-table-grid thead tr th{border:2px solid #000;padding:10px;vertical-align:top}.tui-tabs{background-color:#0000a8;width:100%;padding:0 10px 0 10px}.tui-tabs ul li{display:inline-block}.tui-tabs ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-tab{padding:2px 10px 0 10px;color:#a8a8a8;cursor:pointer}.tui-tab.active{background-color:#a8a8a8;color:#0000a8}.tui-tab-content{display:none}.tui-textarea{background-color:inherit;border:none;padding:0;color:#ff0;outline:0}.tui-window{background-color:#0000a8;padding:1px;display:inline-block;position:relative;box-shadow:10px 10px #000;color:#fff}.tui-screen-640-480{width:640px;height:480px}.tui-screen-800-600{width:800px;height:600px}.tui-screen-1024-768{width:1024px;height:768px}.tui-screen-1024-768,.tui-screen-640-480,.tui-screen-800-600{position:relative;overflow:hidden}.tui-screen-1024-768.bordered,.tui-screen-640-480.bordered,.tui-screen-800-600.bordered{border:2px solid #000}.tui-screen-1024-768.centered,.tui-screen-640-480.centered,.tui-screen-800-600.centered{margin:auto;margin-top:20px}.tui-datetime{padding:1px 0 1px 0;margin-right:10px;float:right}.tui-shortcut{float:right}.tui-shadow,.tui-shadow-1{box-shadow:10px 10px #000!important}.tui-shadow-2{box-shadow:15px 15px #000}.tui-shadow-3{box-shadow:20px 20px #000}.tui-shadow-4{box-shadow:25px 25px #000}.tui-shadow-5{box-shadow:30px 30px #000}.tui-shadow-left,.tui-shadow-left-1{box-shadow:-10px 10px #000!important}.tui-shadow-left-2{box-shadow:-15px 15px #000!important}.tui-shadow-left-3{box-shadow:-20px 20px #000!important}.tui-shadow-left-4{box-shadow:-25px 25px #000!important}.tui-shadow-left-5{box-shadow:-30px 30px #000!important}.tui-no-shadow{box-shadow:none!important}.tui-bg-blue-white{background-image:url(images/bg-blue-white.png);background-repeat:repeat}.tui-bg-blue-black{background-image:url(images/bg-blue-black.png);background-repeat:repeat}.tui-bg-green-white{background-image:url(images/bg-green-white.png);background-repeat:repeat}.tui-bg-green-black{background-image:url(images/bg-green-black.png);background-repeat:repeat}.tui-bg-cyan-white{background-image:url(images/bg-cyan-white.png);background-repeat:repeat}.tui-bg-cyan-black{background-image:url(images/bg-cyan-black.png);background-repeat:repeat}.tui-bg-red-white{background-image:url(images/bg-red-white.png);background-repeat:repeat}.tui-bg-red-black{background-image:url(images/bg-red-black.png);background-repeat:repeat}.tui-bg-purple-white{background-image:url(images/bg-purple-white.png);background-repeat:repeat}.tui-bg-purple-black{background-image:url(images/bg-purple-black.png);background-repeat:repeat}.tui-bg-yellow-white{background-image:url(images/bg-yellow-white.png);background-repeat:repeat}.tui-bg-yellow-black{background-image:url(images/bg-yellow-black.png);background-repeat:repeat}.tui-bg-orange-white{background-image:url(images/bg-orange-white.png);background-repeat:repeat}.tui-bg-orange-black{background-image:url(images/bg-orange-black.png);background-repeat:repeat}.tui-border-solid{border-style:solid!important;border-width:2px!important}.tui-border-dashed{border-style:dashed!important;border-width:2px!important}.tui-border-dotted{border-style:dotted!important;border-width:2px!important}.tui-border-double{border-style:double!important;border-width:6px!important}.container{margin:0 auto;max-width:1280px;width:90%}@media only screen and (min-width:601px){.container{width:85%}}@media only screen and (min-width:993px){.container{width:70%}}.col .row{margin-left:-.75rem;margin-right:-.75rem}.section{padding-top:1rem;padding-bottom:1rem}.section.no-pad{padding:0}.section.no-pad-bot{padding-bottom:0}.section.no-pad-top{padding-top:0}.row{margin-left:auto;margin-right:auto;margin-bottom:20px}.row:after{content:"";display:table;clear:both}.row .col{float:left;box-sizing:border-box;padding:0 .75rem;min-height:1px}.row .col[class*=pull-],.row .col[class*=push-]{position:relative}.row .col.s1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.s2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.s3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.s4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.s5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.s6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.s7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.s8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.s9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.s10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.s11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.s12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-s1{margin-left:8.33333%}.row .col.pull-s1{right:8.33333%}.row .col.push-s1{left:8.33333%}.row .col.offset-s2{margin-left:16.66667%}.row .col.pull-s2{right:16.66667%}.row .col.push-s2{left:16.66667%}.row .col.offset-s3{margin-left:25%}.row .col.pull-s3{right:25%}.row .col.push-s3{left:25%}.row .col.offset-s4{margin-left:33.33333%}.row .col.pull-s4{right:33.33333%}.row .col.push-s4{left:33.33333%}.row .col.offset-s5{margin-left:41.66667%}.row .col.pull-s5{right:41.66667%}.row .col.push-s5{left:41.66667%}.row .col.offset-s6{margin-left:50%}.row .col.pull-s6{right:50%}.row .col.push-s6{left:50%}.row .col.offset-s7{margin-left:58.33333%}.row .col.pull-s7{right:58.33333%}.row .col.push-s7{left:58.33333%}.row .col.offset-s8{margin-left:66.66667%}.row .col.pull-s8{right:66.66667%}.row .col.push-s8{left:66.66667%}.row .col.offset-s9{margin-left:75%}.row .col.pull-s9{right:75%}.row .col.push-s9{left:75%}.row .col.offset-s10{margin-left:83.33333%}.row .col.pull-s10{right:83.33333%}.row .col.push-s10{left:83.33333%}.row .col.offset-s11{margin-left:91.66667%}.row .col.pull-s11{right:91.66667%}.row .col.push-s11{left:91.66667%}.row .col.offset-s12{margin-left:100%}.row .col.pull-s12{right:100%}.row .col.push-s12{left:100%}@media only screen and (min-width:601px){.row .col.m1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.m2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.m3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.m4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.m5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.m6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.m7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.m8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.m9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.m10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.m11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.m12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-m1{margin-left:8.33333%}.row .col.pull-m1{right:8.33333%}.row .col.push-m1{left:8.33333%}.row .col.offset-m2{margin-left:16.66667%}.row .col.pull-m2{right:16.66667%}.row .col.push-m2{left:16.66667%}.row .col.offset-m3{margin-left:25%}.row .col.pull-m3{right:25%}.row .col.push-m3{left:25%}.row .col.offset-m4{margin-left:33.33333%}.row .col.pull-m4{right:33.33333%}.row .col.push-m4{left:33.33333%}.row .col.offset-m5{margin-left:41.66667%}.row .col.pull-m5{right:41.66667%}.row .col.push-m5{left:41.66667%}.row .col.offset-m6{margin-left:50%}.row .col.pull-m6{right:50%}.row .col.push-m6{left:50%}.row .col.offset-m7{margin-left:58.33333%}.row .col.pull-m7{right:58.33333%}.row .col.push-m7{left:58.33333%}.row .col.offset-m8{margin-left:66.66667%}.row .col.pull-m8{right:66.66667%}.row .col.push-m8{left:66.66667%}.row .col.offset-m9{margin-left:75%}.row .col.pull-m9{right:75%}.row .col.push-m9{left:75%}.row .col.offset-m10{margin-left:83.33333%}.row .col.pull-m10{right:83.33333%}.row .col.push-m10{left:83.33333%}.row .col.offset-m11{margin-left:91.66667%}.row .col.pull-m11{right:91.66667%}.row .col.push-m11{left:91.66667%}.row .col.offset-m12{margin-left:100%}.row .col.pull-m12{right:100%}.row .col.push-m12{left:100%}}@media only screen and (min-width:993px){.row .col.l1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.l2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.l3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.l4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.l5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.l6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.l7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.l8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.l9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.l10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.l11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.l12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-l1{margin-left:8.33333%}.row .col.pull-l1{right:8.33333%}.row .col.push-l1{left:8.33333%}.row .col.offset-l2{margin-left:16.66667%}.row .col.pull-l2{right:16.66667%}.row .col.push-l2{left:16.66667%}.row .col.offset-l3{margin-left:25%}.row .col.pull-l3{right:25%}.row .col.push-l3{left:25%}.row .col.offset-l4{margin-left:33.33333%}.row .col.pull-l4{right:33.33333%}.row .col.push-l4{left:33.33333%}.row .col.offset-l5{margin-left:41.66667%}.row .col.pull-l5{right:41.66667%}.row .col.push-l5{left:41.66667%}.row .col.offset-l6{margin-left:50%}.row .col.pull-l6{right:50%}.row .col.push-l6{left:50%}.row .col.offset-l7{margin-left:58.33333%}.row .col.pull-l7{right:58.33333%}.row .col.push-l7{left:58.33333%}.row .col.offset-l8{margin-left:66.66667%}.row .col.pull-l8{right:66.66667%}.row .col.push-l8{left:66.66667%}.row .col.offset-l9{margin-left:75%}.row .col.pull-l9{right:75%}.row .col.push-l9{left:75%}.row .col.offset-l10{margin-left:83.33333%}.row .col.pull-l10{right:83.33333%}.row .col.push-l10{left:83.33333%}.row .col.offset-l11{margin-left:91.66667%}.row .col.pull-l11{right:91.66667%}.row .col.push-l11{left:91.66667%}.row .col.offset-l12{margin-left:100%}.row .col.pull-l12{right:100%}.row .col.push-l12{left:100%}}@media only screen and (min-width:1201px){.row .col.xl1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.xl2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.xl3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.xl4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.xl5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.xl6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.xl7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.xl8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.xl9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.xl10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.xl11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.xl12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-xl1{margin-left:8.33333%}.row .col.pull-xl1{right:8.33333%}.row .col.push-xl1{left:8.33333%}.row .col.offset-xl2{margin-left:16.66667%}.row .col.pull-xl2{right:16.66667%}.row .col.push-xl2{left:16.66667%}.row .col.offset-xl3{margin-left:25%}.row .col.pull-xl3{right:25%}.row .col.push-xl3{left:25%}.row .col.offset-xl4{margin-left:33.33333%}.row .col.pull-xl4{right:33.33333%}.row .col.push-xl4{left:33.33333%}.row .col.offset-xl5{margin-left:41.66667%}.row .col.pull-xl5{right:41.66667%}.row .col.push-xl5{left:41.66667%}.row .col.offset-xl6{margin-left:50%}.row .col.pull-xl6{right:50%}.row .col.push-xl6{left:50%}.row .col.offset-xl7{margin-left:58.33333%}.row .col.pull-xl7{right:58.33333%}.row .col.push-xl7{left:58.33333%}.row .col.offset-xl8{margin-left:66.66667%}.row .col.pull-xl8{right:66.66667%}.row .col.push-xl8{left:66.66667%}.row .col.offset-xl9{margin-left:75%}.row .col.pull-xl9{right:75%}.row .col.push-xl9{left:75%}.row .col.offset-xl10{margin-left:83.33333%}.row .col.pull-xl10{right:83.33333%}.row .col.push-xl10{left:83.33333%}.row .col.offset-xl11{margin-left:91.66667%}.row .col.pull-xl11{right:91.66667%}.row .col.push-xl11{left:91.66667%}.row .col.offset-xl12{margin-left:100%}.row .col.pull-xl12{right:100%}.row .col.push-xl12{left:100%}}.tui-modal{position:absolute;left:0;right:0;top:100px;z-index:101;display:none}.tui-modal.active{display:block!important}.tui-overlap{position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;display:none}.tui-overlap.active{display:block!important}.tui-chart-vertical{position:relative;background-color:#000}.tui-chart-horizontal{position:relative;background-color:#000}.tui-chart-vertical .tui-chart-display{display:flex;position:absolute;top:0;left:50px;right:0;bottom:30px;align-items:flex-end;border-bottom:2px solid #fff;border-left:2px solid #fff}.tui-chart-vertical .tui-chart-display.no-x-axis{bottom:0}.tui-chart-vertical .tui-chart-display.no-y-axis{left:0}.tui-chart-horizontal .tui-chart-display{display:flex;position:absolute;flex-direction:column;top:0;left:50px;right:0;bottom:30px;align-items:stretch;border-bottom:2px solid #fff;border-left:2px solid #fff}.tui-chart-horizontal .tui-chart-display.no-x-axis{bottom:0}.tui-chart-horizontal .tui-chart-display.no-y-axis{left:0}.tui-chart-x-axis{display:flex;position:absolute;height:30px;left:50px;right:0;bottom:0;line-height:30px}.tui-chart-y-axis{display:flex;flex-direction:column;position:absolute;top:0;left:0;bottom:30px;width:50px}.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend{flex:0 1 100%;text-align:center}.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend{flex:1;text-align:right;padding-right:2px;display:flex;align-items:flex-start;justify-content:flex-end}.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend{flex:0 1 100%;text-align:right}.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend{flex:1;text-align:right;padding-right:2px;display:flex;align-items:center;justify-content:flex-end}.tui-chart-vertical .tui-chart-display .tui-chart-value{flex:0 1 100%;text-align:center;overflow:hidden}.tui-chart-horizontal .tui-chart-display .tui-chart-value{flex:1;text-align:right;display:flex;align-items:center;align-content:flex-start;justify-content:flex-end;overflow:hidden} \ No newline at end of file +@charset "UTF-8";@font-face{font-family:DOS;src:url("fonts/Perfect DOS VGA 437 Win.ttf")}html{font-family:"Lucida Console",monospace;font-size:18px;box-sizing:border-box}body{margin:0}*,:after,:before{font-family:inherit;font-size:inherit;box-sizing:inherit}ul{margin:0;padding:0;list-style-type:none}ul li{list-style-type:none}ul li a{display:block}a{color:inherit;text-decoration:none}span{margin:0}hr{border:none;border-bottom:2px solid #fff}input,select,textarea{width:200px}@media only screen and (max-width:600px){.hide-on-small-and-down,.hide-on-small-only{display:none!important}}@media only screen and (max-width:992px){.hide-on-med-and-down{display:none!important}}@media only screen and (min-width:601px){.hide-on-med-and-up{display:none!important}}@media only screen and (min-width:600px) and (max-width:992px){.hide-on-med-only{display:none!important}}@media only screen and (min-width:993px){.hide-on-large-only{display:none!important}}@media only screen and (min-width:1201px){.hide-on-extra-large-only{display:none!important}}@media only screen and (min-width:1201px){.show-on-extra-large{display:block!important}}@media only screen and (min-width:993px){.show-on-large{display:block!important}}@media only screen and (min-width:600px) and (max-width:992px){.show-on-medium{display:block!important}}@media only screen and (max-width:600px){.show-on-small{display:block!important}}@media only screen and (min-width:601px){.show-on-medium-and-up{display:block!important}}@media only screen and (max-width:992px){.show-on-medium-and-down{display:block!important}}.primary{background-color:#0000a8}.primary-text{color:#0000a8}.primary-border{border-color:#0000a8}.primary-hover:hover{background-color:#0000a8}.primary-text-hover:hover{color:#0000a8}.primary-border-hover:hover{border-color:#0000a8}.secondary{background-color:#a8a8a8}.secondary-text{color:#a8a8a8}.secondary-border{border-color:#a8a8a8}.secondary-hover:hover{background-color:#a8a8a8}.secondary-text-hover:hover{color:#a8a8a8}.secondary-border-hover:hover{border-color:#a8a8a8}.success{background-color:#00a800}.success-text{color:#00a800}.success-border{border-color:#00a800}.success-hover:hover{background-color:#00a800}.success-text-hover:hover{color:#00a800}.success-border-hover:hover{border-color:#00a800}.danger{background-color:#a80000}.danger-text{color:#a80000}.danger-border{border-color:#a80000}.danger-hover:hover{background-color:#a80000}.danger-text-hover:hover{color:#a80000}.danger-border-hover:hover{border-color:#a80000}.warning{background-color:#a8a800}.warning-text{color:#a8a800}.warning-border{border-color:#a8a800}.warning-hover:hover{background-color:#a8a800}.warning-text-hover:hover{color:#a8a800}.warning-border-hover:hover{border-color:#a8a800}.info{background-color:#00a8a8}.info-text{color:#00a8a8}.info-border{border-color:#00a8a8}.info-hover:hover{background-color:#00a8a8}.info-text-hover:hover{color:#00a8a8}.info-border-hover:hover{border-color:#00a8a8}.black-168{background-color:#000!important}.blue-168{background-color:#0000a8!important}.green-168{background-color:#00a800!important}.cyan-168{background-color:#00a8a8!important}.red-168{background-color:#a80000!important}.purple-168{background-color:#a800a8!important}.yellow-168{background-color:#a8a800!important}.white-168{background-color:#a8a8a8!important}.orange-168{background-color:#a85600!important}.black-168-text{color:#000!important}.blue-168-text{color:#0000a8!important}.green-168-text{color:#00a800!important}.cyan-168-text{color:#00a8a8!important}.red-168-text{color:#a80000!important}.purple-168-text{color:#a800a8!important}.yellow-168-text{color:#a8a800!important}.white-168-text{color:#a8a8a8!important}.orange-168-text{color:#a85600!important}.black-168-border{border-color:#000!important}.blue-168-border{border-color:#0000a8!important}.green-168-border{border-color:#00a800!important}.cyan-168-border{border-color:#00a8a8!important}.red-168-border{border-color:#a80000!important}.purple-168-border{border-color:#a800a8!important}.yellow-168-border{border-color:#a8a800!important}.white-168-border{border-color:#a8a8a8!important}.orange-168-border{border-color:#a85600!important}.black-168-hover:hover{background-color:#000!important}.blue-168-hover:hover{background-color:#0000a8!important}.green-168-hover:hover{background-color:#00a800!important}.cyan-168-hover:hover{background-color:#00a8a8!important}.red-168-hover:hover{background-color:#a80000!important}.purple-168-hover:hover{background-color:#a800a8!important}.yellow-168-hover:hover{background-color:#a8a800!important}.white-168-hover:hover{background-color:#a8a8a8!important}.orange-168-hover:hover{background-color:#a85600!important}.black-168-text-hover:hover{color:#000!important}.blue-168-text-hover:hover{color:#0000a8!important}.green-168-text-hover:hover{color:#00a800!important}.cyan-168-text-hover:hover{color:#00a8a8!important}.red-168-text-hover:hover{color:#a80000!important}.purple-168-text-hover:hover{color:#a800a8!important}.yellow-168-text-hover:hover{color:#a8a800!important}.white-168-text-hover:hover{color:#a8a8a8!important}.orange-168-text-hover:hover{color:#a85600!important}.black-168-border-hover:hover{border-color:#000!important}.blue-168-border-hover:hover{border-color:#0000a8!important}.green-168-border-hover:hover{border-color:#00a800!important}.cyan-168-border-hover:hover{border-color:#00a8a8!important}.red-168-border-hover:hover{border-color:#a80000!important}.purple-168-border-hover:hover{border-color:#a800a8!important}.yellow-168-border-hover:hover{border-color:#a8a800!important}.white-168-border-hover:hover{border-color:#a8a8a8!important}.orange-168-border-hover:hover{border-color:#a85600!important}.black-255{background-color:#000!important}.blue-255{background-color:#00f!important}.green-255{background-color:#0f0!important}.cyan-255{background-color:#0ff!important}.red-255{background-color:red!important}.purple-255{background-color:#ff00ff!important}.yellow-255{background-color:#ff0!important}.white-255{background-color:#fff!important}.orange-255{background-color:#ffa800!important}.black-255-text{color:#000!important}.blue-255-text{color:#00f!important}.green-255-text{color:#0f0!important}.cyan-255-text{color:#0ff!important}.red-255-text{color:red!important}.purple-255-text{color:#ff00ff!important}.yellow-255-text{color:#ff0!important}.white-255-text{color:#fff!important}.orange-255-text{color:#ffa800!important}.black-255-border{border-color:#000!important}.blue-255-border{border-color:#00f!important}.green-255-border{border-color:#0f0!important}.cyan-255-border{border-color:#0ff!important}.red-255-border{border-color:red!important}.purple-255-border{border-color:#ff00ff!important}.yellow-255-border{border-color:#ff0!important}.white-255-border{border-color:#fff!important}.orange-255-border{border-color:#ffa800!important}.black-255-hover:hover{background-color:#000!important}.blue-255-hover:hover{background-color:#00f!important}.green-255-hover:hover{background-color:#0f0!important}.cyan-255-hover:hover{background-color:#0ff!important}.red-255-hover:hover{background-color:red!important}.purple-255-hover:hover{background-color:#ff00ff!important}.yellow-255-hover:hover{background-color:#ff0!important}.white-255-hover:hover{background-color:#fff!important}.orange-255-hover:hover{background-color:#ffa800!important}.black-255-text-hover:hover{color:#000!important}.blue-255-text-hover:hover{color:#00f!important}.green-255-text-hover:hover{color:#0f0!important}.cyan-255-text-hover:hover{color:#0ff!important}.red-255-text-hover:hover{color:red!important}.purple-255-text-hover:hover{color:#ff00ff!important}.yellow-255-text-hover:hover{color:#ff0!important}.white-255-text-hover:hover{color:#fff!important}.orange-255-text-hover:hover{color:#ffa800!important}.black-255-border-hover:hover{border-color:#000!important}.blue-255-border-hover:hover{border-color:#00f!important}.green-255-border-hover:hover{border-color:#0f0!important}.cyan-255-border-hover:hover{border-color:#0ff!important}.red-255-border-hover:hover{border-color:red!important}.purple-255-border-hover:hover{border-color:#ff00ff!important}.yellow-255-border-hover:hover{border-color:#ff0!important}.white-255-border-hover:hover{border-color:#fff!important}.orange-255-border-hover:hover{border-color:#ffa800!important}.black{background-color:#000!important}.black-text{color:#000!important}.black-border{border-color:#000!important}.black-hover:hover{background-color:#000!important}.black-text-hover:hover{color:#000!important}.black-border-hover:hover{border-color:#000!important}.white{background-color:#fff!important}.white-text{color:#fff!important}.white-border{border-color:#fff!important}.white-hover:hover{background-color:#fff!important}.white-text-hover:hover{color:#fff!important}.white-border-hover:hover{border-color:#fff!important}.left{float:left!important}.right{float:right!important}.center{text-align:center}.left-align{text-align:left}.right-align{text-align:right}.center-align{text-align:center}.full-width{width:100%!important}.full-height{height:100%!important}.inline{display:inline!important}.inline-block{display:inline-block!important}.block{display:block!important}.valign-top{vertical-align:top!important}.valign-middle{vertical-align:middle!important}.valign-bottom{vertical-align:bottom!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.static{position:static!important}.no-shadow{box-shadow:none!important}.no-padding{padding:0!important}.no-border{border:none!important}.content{padding:12px}.disable-select{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.cursor-pointer{cursor:pointer!important}.cursor-default{cursor:default!important}.disabled{cursor:not-allowed!important}.tui-button{display:inline-block;outline:0;padding:1px 10px;background-color:#00a800;color:#000;border:none;cursor:pointer;text-align:center;box-shadow:10px 10px #000;border-radius:0;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-button.disabled{text-decoration:line-through}.tui-button:active{background-color:#00a8a8!important;color:#000!important;box-shadow:none!important}.tui-button:focus{color:#0ff!important}input[type=button]{width:initial}.tui-checkbox{display:block;position:relative;cursor:pointer;color:#fff;padding-left:30px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-checkbox.disabled{color:#a8a8a8}.tui-checkbox input{position:absolute;opacity:0;cursor:pointer;top:0;left:0;pointer-events:none}.tui-checkbox span{position:absolute;width:10px;height:10px;cursor:pointer;top:0;left:0}.tui-checkbox input:checked~span::after{content:"[√]";color:#0ff}.tui-checkbox input:not(checked)~span::after{content:"[ ]"}.tui-divider{border-bottom:2px solid #fff;display:block}.tui-black-divider{border-bottom:2px solid #000;display:block}.tui-dropdown{position:relative;display:inline-block;cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-dropdown-content{display:none;position:absolute;background-color:#a8a8a8;min-width:200px;padding:6px;z-index:9}.tui-dropdown-content ul{border:2px #000 solid}.tui-dropdown-content ul li{display:block!important;margin:6px}.tui-dropdown-content ul li a:hover{background-color:#00a800}.tui-dropdown:hover>.tui-dropdown-content:first-of-type{display:block}.tui-fieldset{border:6px #fff double;padding:12px;background-color:inherit;margin-bottom:6px}.tui-fieldset.no-legend{margin-top:6px}.tui-input-fieldset{border-top:6px #fff double;border-bottom:6px #fff double;border-left:2px #fff solid;border-right:2px #fff solid;padding:5px;background-color:inherit}.tui-input-fieldset legend{color:#fff}.tui-input-fieldset:hover{border-color:#ff0}.tui-input-fieldset:hover legend{color:#ff0}.tui-fieldset-button{position:absolute;top:0;right:16px;color:#fff;background-color:inherit;z-index:2;border:none;cursor:pointer;outline:0;padding:2px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-fieldset-button.left{right:initial;left:16px!important}.tui-fieldset-button.bottom{bottom:0;top:initial}.tui-fieldset-text{position:absolute;bottom:0;left:16px;color:#fff;background-color:inherit;z-index:2;padding:2px}.tui-fieldset-text.right{left:initial;right:16px}.tui-fieldset-text.top{top:0;bottom:initial}.tui-fieldset-button::before{content:"["}.tui-fieldset-button::after{content:"]"}.tui-fieldset-button:active{color:#0ff!important}.tui-input{background-color:#000;color:#fff;outline:0;border:none;border-radius:0}.tui-input.disabled{background-color:#a8a8a8;color:#000}.tui-input:focus{background-color:#ff0!important;color:#000!important}.tui-nav{width:100%;background-color:#a8a8a8;padding:0 2px;z-index:9;display:block;position:fixed}.tui-nav ul li{display:inline-block;margin-left:10px;padding:1px 3px}.tui-nav ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-nav ul li:hover{background-color:#00a800}.tui-panel{background-color:#0000a8;display:inline-block;color:#fff;box-shadow:10px 10px #000}.tui-panel-content{padding:12px}.tui-panel-header{padding-top:2px;display:block;background:#fff;text-align:center}.tui-progress-bar{display:block;position:relative;height:20px;width:200px;background-color:#00a8a8;overflow:hidden}.tui-progress{position:absolute;left:0;background-color:#0ff;height:100%;display:inline-block}.tui-progress-bar .tui-indeterminate{position:absolute;left:0;background-color:#0ff;height:20px;width:20px;display:inline-block;animation:indeterminate 1s backwards;animation-iteration-count:infinite;animation-timing-function:linear}.tui-progress-label{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);z-index:1}@keyframes indeterminate{from{margin-left:-10%}to{margin-left:100%}}.tui-radio{display:block;position:relative;cursor:pointer;color:#fff;padding-left:30px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-radio.disabled{color:#a8a8a8}.tui-radio input{position:absolute;opacity:0;cursor:pointer;top:0;left:0;pointer-events:none}.tui-radio span{position:absolute;width:10px;height:10px;cursor:pointer;top:0;left:0}.tui-radio input:checked~span:after{content:"(•)";color:#0ff!important}.tui-radio input:not(checked)~span:after{content:"( )"}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background-image:url(images/scroll-cyan.png);background-repeat:repeat}::-webkit-scrollbar-thumb{background-color:#00a8a8}::-webkit-scrollbar-thumb:hover{background-color:#00a8a8}.tui-scroll-blue ::-webkit-scrollbar-track{background-image:url(images/scroll-blue.png)}.tui-scroll-blue ::-webkit-scrollbar-thumb{background-color:#0000a8}.tui-scroll-blue ::-webkit-scrollbar-thumb:hover{background-color:#0000a8}.tui-scroll-green ::-webkit-scrollbar-track{background-image:url(images/scroll-green.png)}.tui-scroll-green ::-webkit-scrollbar-thumb{background-color:#00a800}.tui-scroll-green ::-webkit-scrollbar-thumb:hover{background-color:#00a800}.tui-scroll-cyan ::-webkit-scrollbar-track{background-image:url(images/scroll-cyan.png)}.tui-scroll-cyan ::-webkit-scrollbar-thumb{background-color:#00a8a8}.tui-scroll-cyan ::-webkit-scrollbar-thumb:hover{background-color:#00a8a8}.tui-scroll-red ::-webkit-scrollbar-track{background-image:url(images/scroll-red.png)}.tui-scroll-red ::-webkit-scrollbar-thumb{background-color:#a80000}.tui-scroll-red ::-webkit-scrollbar-thumb:hover{background-color:#a80000}.tui-scroll-purple ::-webkit-scrollbar-track{background-image:url(images/scroll-purple.png)}.tui-scroll-purple ::-webkit-scrollbar-thumb{background-color:#a800a8}.tui-scroll-purple ::-webkit-scrollbar-thumb:hover{background-color:#a800a8}.tui-scroll-yellow ::-webkit-scrollbar-track{background-image:url(images/scroll-yellow.png)}.tui-scroll-yellow ::-webkit-scrollbar-thumb{background-color:#a8a800}.tui-scroll-yellow ::-webkit-scrollbar-thumb:hover{background-color:#a8a800}.tui-scroll-white ::-webkit-scrollbar-track{background-image:url(images/scroll-white.png)}.tui-scroll-white ::-webkit-scrollbar-thumb{background-color:#a8a8a8}.tui-scroll-white ::-webkit-scrollbar-thumb:hover{background-color:#a8a8a8}.tui-sidenav{position:fixed;top:0;left:0;background-color:#00a8a8;min-width:200px;box-shadow:10px 10px #000!important;padding:6px;z-index:10;height:100%;z-index:8;display:none}.tui-sidenav.right{left:initial;right:0}.tui-sidenav.active{display:block!important}.tui-sidenav ul{margin-top:20px;border:2px #000 solid}.tui-sidenav ul li{display:block;margin:6px}.tui-sidenav ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-sidenav ul li:hover{background-color:#ff0}.tui-sidenav-button{cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-statusbar{width:100%;background-color:#a8a8a8;padding:0 1px;left:0;bottom:0;z-index:9;position:fixed}.tui-statusbar ul li{display:inline-block;margin-left:10px;padding:2px 3px}.tui-statusbar ul li:active{background-color:#0000a8;color:#fff}.tui-statusbar ul li a{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-statusbar-divider{border-right:2px #000 solid;display:inline;margin:0 3px}.tui-table{border:2px solid #a8a8a8;padding:5px;border-collapse:collapse}.tui-table.hovered-blue tbody tr:hover{background-color:#00f!important;color:#000}.tui-table.hovered-green tbody tr:hover{background-color:#0f0!important;color:#000}.tui-table.hovered-cyan tbody tr:hover{background-color:#0ff!important;color:#000}.tui-table.hovered-red tbody tr:hover{background-color:red!important;color:#fff}.tui-table.hovered-purple tbody tr:hover{background-color:#ff00ff!important;color:#fff}.tui-table.hovered-yellow tbody tr:hover{background-color:#ff0!important;color:#000}.tui-table.hovered-white tbody tr:hover{background-color:#fff!important;color:#000}.tui-table.hovered-orange tbody tr:hover{background-color:#ffa800!important;color:#000}.tui-table.hovered tbody tr:hover{background-color:#0ff!important;color:#000}.tui-table.striped-blue tbody tr:nth-child(even){background-color:#0000a8}.tui-table.striped-green tbody tr:nth-child(even){background-color:#00a800}.tui-table.striped-cyan tbody tr:nth-child(even){background-color:#00a8a8}.tui-table.striped-red tbody tr:nth-child(even){background-color:#a80000}.tui-table.striped-purple tbody tr:nth-child(even){background-color:#a800a8}.tui-table.striped-yellow tbody tr:nth-child(even){background-color:#a8a800}.tui-table.striped-white tbody tr:nth-child(even){background-color:#a8a8a8;color:#000}.tui-table.striped-orange tbody tr:nth-child(even){background-color:#a85600}.tui-table tbody{background-color:inherit;color:#fff}.tui-table tbody tr td{border-right:2px solid #a8a8a8;padding:0 2px}.tui-table thead{background-color:inherit;color:#ff0;text-align:center}.tui-table tfoot{background-color:inherit;color:#ff0;text-align:center}.tui-table-grid{border-collapse:collapse;width:100%}.tui-table-grid tbody tr td,.tui-table-grid tbody tr th,.tui-table-grid thead tr td,.tui-table-grid thead tr th{border:2px solid #000;padding:10px;vertical-align:top}.tui-tabs{background-color:#0000a8;width:100%;padding:0 10px 0 10px}.tui-tabs ul li{display:inline-block}.tui-tabs ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-tab{padding:2px 10px 0 10px;color:#a8a8a8;cursor:pointer}.tui-tab.active{background-color:#a8a8a8;color:#0000a8}.tui-tab.disabled{text-decoration:line-through}.tui-tab-content{display:none}.tui-textarea{background-color:inherit;border:none;padding:0;color:#ff0;outline:0}.tui-textarea.disabled{background-color:#a8a8a8;color:#000}.tui-window{background-color:#0000a8;padding:1px;display:inline-block;position:relative;box-shadow:10px 10px #000;color:#fff}.tui-screen-640-480{width:640px;height:480px}.tui-screen-800-600{width:800px;height:600px}.tui-screen-1024-768{width:1024px;height:768px}.tui-screen-1024-768,.tui-screen-640-480,.tui-screen-800-600{position:relative;overflow:hidden}.tui-screen-1024-768.bordered,.tui-screen-640-480.bordered,.tui-screen-800-600.bordered{border:2px solid #000}.tui-screen-1024-768.centered,.tui-screen-640-480.centered,.tui-screen-800-600.centered{margin:auto;margin-top:20px}.tui-datetime{padding:1px 0 1px 0;margin-right:10px;float:right}.tui-shortcut{float:right}.tui-shadow,.tui-shadow-1{box-shadow:10px 10px #000!important}.tui-shadow-2{box-shadow:15px 15px #000}.tui-shadow-3{box-shadow:20px 20px #000}.tui-shadow-4{box-shadow:25px 25px #000}.tui-shadow-5{box-shadow:30px 30px #000}.tui-shadow-left,.tui-shadow-left-1{box-shadow:-10px 10px #000!important}.tui-shadow-left-2{box-shadow:-15px 15px #000!important}.tui-shadow-left-3{box-shadow:-20px 20px #000!important}.tui-shadow-left-4{box-shadow:-25px 25px #000!important}.tui-shadow-left-5{box-shadow:-30px 30px #000!important}.tui-no-shadow{box-shadow:none!important}.tui-bg-blue-white{background-image:url(images/bg-blue-white.png);background-repeat:repeat}.tui-bg-blue-black{background-image:url(images/bg-blue-black.png);background-repeat:repeat}.tui-bg-green-white{background-image:url(images/bg-green-white.png);background-repeat:repeat}.tui-bg-green-black{background-image:url(images/bg-green-black.png);background-repeat:repeat}.tui-bg-cyan-white{background-image:url(images/bg-cyan-white.png);background-repeat:repeat}.tui-bg-cyan-black{background-image:url(images/bg-cyan-black.png);background-repeat:repeat}.tui-bg-red-white{background-image:url(images/bg-red-white.png);background-repeat:repeat}.tui-bg-red-black{background-image:url(images/bg-red-black.png);background-repeat:repeat}.tui-bg-purple-white{background-image:url(images/bg-purple-white.png);background-repeat:repeat}.tui-bg-purple-black{background-image:url(images/bg-purple-black.png);background-repeat:repeat}.tui-bg-yellow-white{background-image:url(images/bg-yellow-white.png);background-repeat:repeat}.tui-bg-yellow-black{background-image:url(images/bg-yellow-black.png);background-repeat:repeat}.tui-bg-orange-white{background-image:url(images/bg-orange-white.png);background-repeat:repeat}.tui-bg-orange-black{background-image:url(images/bg-orange-black.png);background-repeat:repeat}.tui-border-solid{border-style:solid!important;border-width:2px!important}.tui-border-dashed{border-style:dashed!important;border-width:2px!important}.tui-border-dotted{border-style:dotted!important;border-width:2px!important}.tui-border-double{border-style:double!important;border-width:6px!important}.container{margin:0 auto;max-width:1280px;width:90%}@media only screen and (min-width:601px){.container{width:85%}}@media only screen and (min-width:993px){.container{width:70%}}.col .row{margin-left:-.75rem;margin-right:-.75rem}.section{padding-top:1rem;padding-bottom:1rem}.section.no-pad{padding:0}.section.no-pad-bot{padding-bottom:0}.section.no-pad-top{padding-top:0}.row{margin-left:auto;margin-right:auto;margin-bottom:20px}.row:after{content:"";display:table;clear:both}.row .col{float:left;box-sizing:border-box;padding:0 .75rem;min-height:1px}.row .col[class*=pull-],.row .col[class*=push-]{position:relative}.row .col.s1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.s2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.s3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.s4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.s5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.s6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.s7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.s8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.s9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.s10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.s11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.s12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-s1{margin-left:8.33333%}.row .col.pull-s1{right:8.33333%}.row .col.push-s1{left:8.33333%}.row .col.offset-s2{margin-left:16.66667%}.row .col.pull-s2{right:16.66667%}.row .col.push-s2{left:16.66667%}.row .col.offset-s3{margin-left:25%}.row .col.pull-s3{right:25%}.row .col.push-s3{left:25%}.row .col.offset-s4{margin-left:33.33333%}.row .col.pull-s4{right:33.33333%}.row .col.push-s4{left:33.33333%}.row .col.offset-s5{margin-left:41.66667%}.row .col.pull-s5{right:41.66667%}.row .col.push-s5{left:41.66667%}.row .col.offset-s6{margin-left:50%}.row .col.pull-s6{right:50%}.row .col.push-s6{left:50%}.row .col.offset-s7{margin-left:58.33333%}.row .col.pull-s7{right:58.33333%}.row .col.push-s7{left:58.33333%}.row .col.offset-s8{margin-left:66.66667%}.row .col.pull-s8{right:66.66667%}.row .col.push-s8{left:66.66667%}.row .col.offset-s9{margin-left:75%}.row .col.pull-s9{right:75%}.row .col.push-s9{left:75%}.row .col.offset-s10{margin-left:83.33333%}.row .col.pull-s10{right:83.33333%}.row .col.push-s10{left:83.33333%}.row .col.offset-s11{margin-left:91.66667%}.row .col.pull-s11{right:91.66667%}.row .col.push-s11{left:91.66667%}.row .col.offset-s12{margin-left:100%}.row .col.pull-s12{right:100%}.row .col.push-s12{left:100%}@media only screen and (min-width:601px){.row .col.m1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.m2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.m3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.m4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.m5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.m6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.m7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.m8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.m9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.m10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.m11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.m12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-m1{margin-left:8.33333%}.row .col.pull-m1{right:8.33333%}.row .col.push-m1{left:8.33333%}.row .col.offset-m2{margin-left:16.66667%}.row .col.pull-m2{right:16.66667%}.row .col.push-m2{left:16.66667%}.row .col.offset-m3{margin-left:25%}.row .col.pull-m3{right:25%}.row .col.push-m3{left:25%}.row .col.offset-m4{margin-left:33.33333%}.row .col.pull-m4{right:33.33333%}.row .col.push-m4{left:33.33333%}.row .col.offset-m5{margin-left:41.66667%}.row .col.pull-m5{right:41.66667%}.row .col.push-m5{left:41.66667%}.row .col.offset-m6{margin-left:50%}.row .col.pull-m6{right:50%}.row .col.push-m6{left:50%}.row .col.offset-m7{margin-left:58.33333%}.row .col.pull-m7{right:58.33333%}.row .col.push-m7{left:58.33333%}.row .col.offset-m8{margin-left:66.66667%}.row .col.pull-m8{right:66.66667%}.row .col.push-m8{left:66.66667%}.row .col.offset-m9{margin-left:75%}.row .col.pull-m9{right:75%}.row .col.push-m9{left:75%}.row .col.offset-m10{margin-left:83.33333%}.row .col.pull-m10{right:83.33333%}.row .col.push-m10{left:83.33333%}.row .col.offset-m11{margin-left:91.66667%}.row .col.pull-m11{right:91.66667%}.row .col.push-m11{left:91.66667%}.row .col.offset-m12{margin-left:100%}.row .col.pull-m12{right:100%}.row .col.push-m12{left:100%}}@media only screen and (min-width:993px){.row .col.l1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.l2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.l3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.l4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.l5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.l6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.l7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.l8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.l9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.l10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.l11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.l12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-l1{margin-left:8.33333%}.row .col.pull-l1{right:8.33333%}.row .col.push-l1{left:8.33333%}.row .col.offset-l2{margin-left:16.66667%}.row .col.pull-l2{right:16.66667%}.row .col.push-l2{left:16.66667%}.row .col.offset-l3{margin-left:25%}.row .col.pull-l3{right:25%}.row .col.push-l3{left:25%}.row .col.offset-l4{margin-left:33.33333%}.row .col.pull-l4{right:33.33333%}.row .col.push-l4{left:33.33333%}.row .col.offset-l5{margin-left:41.66667%}.row .col.pull-l5{right:41.66667%}.row .col.push-l5{left:41.66667%}.row .col.offset-l6{margin-left:50%}.row .col.pull-l6{right:50%}.row .col.push-l6{left:50%}.row .col.offset-l7{margin-left:58.33333%}.row .col.pull-l7{right:58.33333%}.row .col.push-l7{left:58.33333%}.row .col.offset-l8{margin-left:66.66667%}.row .col.pull-l8{right:66.66667%}.row .col.push-l8{left:66.66667%}.row .col.offset-l9{margin-left:75%}.row .col.pull-l9{right:75%}.row .col.push-l9{left:75%}.row .col.offset-l10{margin-left:83.33333%}.row .col.pull-l10{right:83.33333%}.row .col.push-l10{left:83.33333%}.row .col.offset-l11{margin-left:91.66667%}.row .col.pull-l11{right:91.66667%}.row .col.push-l11{left:91.66667%}.row .col.offset-l12{margin-left:100%}.row .col.pull-l12{right:100%}.row .col.push-l12{left:100%}}@media only screen and (min-width:1201px){.row .col.xl1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.xl2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.xl3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.xl4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.xl5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.xl6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.xl7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.xl8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.xl9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.xl10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.xl11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.xl12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-xl1{margin-left:8.33333%}.row .col.pull-xl1{right:8.33333%}.row .col.push-xl1{left:8.33333%}.row .col.offset-xl2{margin-left:16.66667%}.row .col.pull-xl2{right:16.66667%}.row .col.push-xl2{left:16.66667%}.row .col.offset-xl3{margin-left:25%}.row .col.pull-xl3{right:25%}.row .col.push-xl3{left:25%}.row .col.offset-xl4{margin-left:33.33333%}.row .col.pull-xl4{right:33.33333%}.row .col.push-xl4{left:33.33333%}.row .col.offset-xl5{margin-left:41.66667%}.row .col.pull-xl5{right:41.66667%}.row .col.push-xl5{left:41.66667%}.row .col.offset-xl6{margin-left:50%}.row .col.pull-xl6{right:50%}.row .col.push-xl6{left:50%}.row .col.offset-xl7{margin-left:58.33333%}.row .col.pull-xl7{right:58.33333%}.row .col.push-xl7{left:58.33333%}.row .col.offset-xl8{margin-left:66.66667%}.row .col.pull-xl8{right:66.66667%}.row .col.push-xl8{left:66.66667%}.row .col.offset-xl9{margin-left:75%}.row .col.pull-xl9{right:75%}.row .col.push-xl9{left:75%}.row .col.offset-xl10{margin-left:83.33333%}.row .col.pull-xl10{right:83.33333%}.row .col.push-xl10{left:83.33333%}.row .col.offset-xl11{margin-left:91.66667%}.row .col.pull-xl11{right:91.66667%}.row .col.push-xl11{left:91.66667%}.row .col.offset-xl12{margin-left:100%}.row .col.pull-xl12{right:100%}.row .col.push-xl12{left:100%}}.tui-modal{position:absolute;left:0;right:0;top:100px;z-index:101;display:none}.tui-modal.active{display:block!important}.tui-overlap{position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;display:none}.tui-overlap.active{display:block!important}.tui-chart-vertical{position:relative;background-color:#000}.tui-chart-horizontal{position:relative;background-color:#000}.tui-chart-vertical .tui-chart-display{display:flex;position:absolute;top:0;left:50px;right:0;bottom:30px;align-items:flex-end;border-bottom:2px solid #fff;border-left:2px solid #fff}.tui-chart-vertical .tui-chart-display.no-x-axis{bottom:0}.tui-chart-vertical .tui-chart-display.no-y-axis{left:0}.tui-chart-horizontal .tui-chart-display{display:flex;position:absolute;flex-direction:column;top:0;left:50px;right:0;bottom:30px;align-items:stretch;border-bottom:2px solid #fff;border-left:2px solid #fff}.tui-chart-horizontal .tui-chart-display.no-x-axis{bottom:0}.tui-chart-horizontal .tui-chart-display.no-y-axis{left:0}.tui-chart-x-axis{display:flex;position:absolute;height:30px;left:50px;right:0;bottom:0;line-height:30px}.tui-chart-y-axis{display:flex;flex-direction:column;position:absolute;top:0;left:0;bottom:30px;width:50px}.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend{flex:0 1 100%;text-align:center}.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend{flex:1;text-align:right;padding-right:2px;display:flex;align-items:flex-start;justify-content:flex-end}.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend{flex:0 1 100%;text-align:right}.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend{flex:1;text-align:right;padding-right:2px;display:flex;align-items:center;justify-content:flex-end}.tui-chart-vertical .tui-chart-display .tui-chart-value{flex:0 1 100%;text-align:center;overflow:hidden}.tui-chart-horizontal .tui-chart-display .tui-chart-value{flex:1;text-align:right;display:flex;align-items:center;align-content:flex-start;justify-content:flex-end;overflow:hidden} \ No newline at end of file diff --git a/dist/tuicss.min.js b/dist/tuicss.min.js index b6cccd1..fc2d930 100644 --- a/dist/tuicss.min.js +++ b/dist/tuicss.min.js @@ -1 +1 @@ -function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){const t=setInterval(()=>{if(null===e)return void clearInterval(t);let o=e.getAttribute("data-format");const n=new Date,a=2===(n.getMonth()+"").length?n.getMonth()+1:"0"+(n.getMonth()+1),s=2===(n.getDay()+"").length?n.getDay()+1:"0"+(n.getDay()+1),c=n.getFullYear()+"",l=2===(n.getHours()+"").length?n.getHours():"0"+n.getHours(),i=(parseInt(l)+24)%"12"||"12",r=2===(n.getMinutes()+"").length?n.getMinutes():"0"+n.getMinutes(),d=2===(n.getSeconds()+"").length?n.getSeconds():"0"+n.getSeconds(),u=parseInt(l)>=12?"PM":"AM";o=(o=(o=(o=(o=(o=(o=(o=o.replace("M",a)).replace("d",s)).replace("y",c)).replace("H",l)).replace("h",i)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=o})}}t.length&&(e(),setInterval(e,1e3))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()}); \ No newline at end of file +function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){if(e.target.classList.contains("disabled"))return;for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){if(null===e)continue;let t=e.getAttribute("data-format");const o=new Date,n=2===(o.getMonth()+"").length?o.getMonth()+1:"0"+(o.getMonth()+1),a=2===(o.getDay()+"").length?o.getDay()+1:"0"+(o.getDay()+1),s=o.getFullYear()+"",c=2===(o.getHours()+"").length?o.getHours():"0"+o.getHours(),l=(parseInt(c)+24)%"12"||"12",i=2===(o.getMinutes()+"").length?o.getMinutes():"0"+o.getMinutes(),d=2===(o.getSeconds()+"").length?o.getSeconds():"0"+o.getSeconds(),r=parseInt(c)>=12?"PM":"AM";t=(t=(t=(t=(t=(t=(t=(t=t.replace("M",n)).replace("d",a)).replace("y",s)).replace("H",c)).replace("h",l)).replace("m",i)).replace("s",d)).replace("a",r),e.innerHTML=t}}t.length&&(e(),setTimeout(()=>{setInterval(e,1e3)},1e3-(new Date).getMilliseconds()))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()}); \ No newline at end of file diff --git a/examples/buttons.html b/examples/buttons.html new file mode 100644 index 0000000..cedc6cd --- /dev/null +++ b/examples/buttons.html @@ -0,0 +1,34 @@ + + + + + + Buttons Example + + + + + + +
+
+
+ Buttons +
+
+ Anchor
+
+
+
+
+
+
+ + + diff --git a/examples/chart.html b/examples/chart.html index afc1732..f659d87 100644 --- a/examples/chart.html +++ b/examples/chart.html @@ -13,7 +13,7 @@
- Chart + Vertical Chart
80%
@@ -49,7 +49,7 @@
- Horizontal Bar Chart + Horizontal Chart
80%
diff --git a/examples/forecast.html b/examples/forecast.html new file mode 100644 index 0000000..95928bd --- /dev/null +++ b/examples/forecast.html @@ -0,0 +1,172 @@ + + + + + + Forecast Example + + + + + + +
+
+ FORECAST 1.0 +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#LOCATIONTEMPERATURESTATUS
1Lisbon +  8.0 + [ +
+ +
+ ] + 		COLD
2Vancouver +  9.0 + [ +
+ +
+ ] + 		COLD
3Rio + 31.0 + [ +
+ +
+ ] + 		WARM
4Sydney + 22.0 + [ +
+ +
+ ] + 		WARM
5New York +  7.0 + [ +
+ +
+ ] + 		COLD
6London +  6.0 + [ +
+ +
+ ] + 		COLD
7Paris +  4.0 + [ +
+ +
+ ] + 		VERY COLD
8Casablanca + 17.0 + [ +
+ +
+ ] + 		NORMAL
9Reykjavik + -1.0 + [ +
+ +
+ ] + 		VERY COLD
+
+ HIGH: Rio 31.0
+ LESS: Reykjavik -1.0 +
+
+
+
+ + 9/201 records + +
+
+
+ FORECAST 1.0 +
+
+ + diff --git a/examples/input.html b/examples/input.html index f228bdc..721915c 100644 --- a/examples/input.html +++ b/examples/input.html @@ -1,5 +1,5 @@ - + @@ -8,7 +8,7 @@ @@ -18,6 +18,7 @@
Form Text.......:
+ Disabled...:
Number.....:
Password...:
Color......:
@@ -25,6 +26,11 @@ + + + + +
Date.......:
Time.......: @@ -39,8 +45,8 @@ -
@@ -55,14 +61,17 @@ -

Textarea
- + +
+ Disabled Textarea
+
Multiple

File
diff --git a/examples/mobile.html b/examples/mobile.html new file mode 100644 index 0000000..ccb914d --- /dev/null +++ b/examples/mobile.html @@ -0,0 +1,171 @@ + + + + + + + Mobile Example + + + + + + + + + + + + + +
+
+
+

InstaTui

+
+ The best old-school social network
+ (Try this in a mobile view) + (√ Mobile view) +
+
+
+
+
+
+ John Due says: +
+ + The winxp bg is amazing! +
+
+
+
+
+
+ Jane Due says: +
+ + Bought my first 2 PC games! +
+
+
+
+
+
+ Astronaut says: +
+ + One small step for man one giant leap for mankind +
+
+
+
+
+ + +
+ +
+ + + + + diff --git a/examples/resources/disks.png b/examples/resources/disks.png new file mode 100644 index 0000000..0a398ee Binary files /dev/null and b/examples/resources/disks.png differ diff --git a/examples/resources/step.png b/examples/resources/step.png new file mode 100644 index 0000000..26ea07f Binary files /dev/null and b/examples/resources/step.png differ diff --git a/examples/resources/winxp.png b/examples/resources/winxp.png new file mode 100644 index 0000000..ba656cd Binary files /dev/null and b/examples/resources/winxp.png differ diff --git a/examples/tabs.html b/examples/tabs.html new file mode 100644 index 0000000..94de6fc --- /dev/null +++ b/examples/tabs.html @@ -0,0 +1,40 @@ + + + + + + Tabs Example + + + + + +
+
+
+ +
+
+
+

Content 1

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit incidunt ullam nemo ad id. Temporibus, impedit reiciendis quidem ea quasi fugiat! Illum unde eaque porro sint voluptates corporis reiciendis tempora? +
+
+

Content 2

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit incidunt ullam nemo ad id. +
+
+

Content 3

+ You could not see it! +
+
+
+
+ + + diff --git a/package-lock.json b/package-lock.json index 2f5ba52..fa81871 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "tuicss", - "version": "2.0.1", + "version": "2.1.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2876,9 +2876,9 @@ } }, "lodash": { - "version": "4.17.20", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", - "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, "loud-rejection": { @@ -4852,9 +4852,9 @@ "dev": true }, "y18n": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", - "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz", + "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==", "dev": true }, "yallist": { diff --git a/package.json b/package.json index 040f3de..0fb10dc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tuicss", - "version": "2.0.1", + "version": "2.1.1", "description": "TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style", "keywords": [ "tui", diff --git a/resources/TuiCss Form.png b/resources/TuiCss Form.png new file mode 100644 index 0000000..0ba033a Binary files /dev/null and b/resources/TuiCss Form.png differ diff --git a/resources/TuiCss Tabs.png b/resources/TuiCss Tabs.png new file mode 100644 index 0000000..9440260 Binary files /dev/null and b/resources/TuiCss Tabs.png differ diff --git a/resources/forecast.png b/resources/forecast.png new file mode 100644 index 0000000..9a560da Binary files /dev/null and b/resources/forecast.png differ diff --git a/resources/tuicss mobile.png b/resources/tuicss mobile.png new file mode 100644 index 0000000..404ca52 Binary files /dev/null and b/resources/tuicss mobile.png differ diff --git a/src/components/button.scss b/src/components/button.scss index b544675..bf99f77 100644 --- a/src/components/button.scss +++ b/src/components/button.scss @@ -10,7 +10,11 @@ cursor: pointer; text-align: center; box-shadow: 10px 10px black; + border-radius: 0px; @include disable-select; + &.disabled { + text-decoration: line-through; + } } .tui-button:active { background-color: rgb(0, 168, 168)!important; diff --git a/src/components/checkbox.scss b/src/components/checkbox.scss index c2a8d10..4cc37cf 100644 --- a/src/components/checkbox.scss +++ b/src/components/checkbox.scss @@ -8,6 +8,9 @@ color: white; padding-left: 30px; @include disable-select; + &.disabled { + color: rgb(168, 168, 168) + } } .tui-checkbox input { position: absolute; @@ -15,6 +18,7 @@ cursor: pointer; top: 0px; left: 0px; + pointer-events: none; } .tui-checkbox span { position: absolute; diff --git a/src/components/input.scss b/src/components/input.scss index 8d4602d..5fdc677 100644 --- a/src/components/input.scss +++ b/src/components/input.scss @@ -3,7 +3,11 @@ color: white; outline:0; border: none; - padding: 1px; + border-radius: 0px; + &.disabled { + background-color: rgb(168, 168, 168); + color: black; + } } .tui-input:focus { background-color: rgb(255, 255, 0)!important; diff --git a/src/components/radio.scss b/src/components/radio.scss index c5cff80..bb38646 100644 --- a/src/components/radio.scss +++ b/src/components/radio.scss @@ -8,6 +8,9 @@ color: white; padding-left: 30px; @include disable-select; + &.disabled { + color: rgb(168, 168, 168) + } } .tui-radio input { position: absolute; @@ -15,6 +18,7 @@ cursor: pointer; top: 0px; left: 0px; + pointer-events: none; } .tui-radio span { position: absolute; diff --git a/src/components/tabs.scss b/src/components/tabs.scss index d78b092..e83f085 100644 --- a/src/components/tabs.scss +++ b/src/components/tabs.scss @@ -20,6 +20,9 @@ background-color: rgb(168, 168, 168); color: rgb(0, 0, 168); } + &.disabled { + text-decoration: line-through; + } } .tui-tab-content { display: none; diff --git a/src/components/textarea.scss b/src/components/textarea.scss index fb336c8..3846548 100644 --- a/src/components/textarea.scss +++ b/src/components/textarea.scss @@ -4,4 +4,8 @@ padding: 0px; color: rgb(255, 255, 0); outline: none; + &.disabled { + background-color: rgb(168, 168, 168); + color: black; + } } \ No newline at end of file diff --git a/src/js/tuicss.js b/src/js/tuicss.js index 4950a08..34fe447 100644 --- a/src/js/tuicss.js +++ b/src/js/tuicss.js @@ -30,6 +30,12 @@ function tabsController() { for (const tab of tabs) { // Add click listeners to them. tab.addEventListener('click', function (e) { + + // Check if the clicked tab is disabled + if(e.target.classList.contains("disabled")) { + return; + } + // Remove the 'active' class from any and all tabs. for (const otherTab of tabs) { otherTab.classList.remove('active'); @@ -93,45 +99,44 @@ function datetimeController() { // Kick off our clock interval stuff. datetimeInterval(); - setInterval(datetimeInterval, 1000); + + // Synchronize time and set interval to control the clocks + setTimeout(() => { + setInterval(datetimeInterval, 1000); + }, 1000 - new Date().getMilliseconds()); function datetimeInterval() { for (const clock of clocks) { - // Set the interval. - const interval = setInterval(() => { - // Technically we should have already returned earlier in the code, but to be on the safe side. - if (clock === null) { - clearInterval(interval); - return; - } + if (clock === null) { + continue; + } - // Get the format we want to display in the element. - let format = clock.getAttribute('data-format'); + // Get the format we want to display in the element. + let format = clock.getAttribute('data-format'); - // parse out the date and time into constants. - const today = new Date(); - const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1); - const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1); - const year = today.getFullYear() + ''; - const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours(); - const hour12 = (parseInt(hour) + 24) % '12' || '12'; - const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes(); - const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds(); - const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM'; + // parse out the date and time into constants. + const today = new Date(); + const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1); + const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1); + const year = today.getFullYear() + ''; + const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours(); + const hour12 = (parseInt(hour) + 24) % '12' || '12'; + const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes(); + const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds(); + const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM'; - // Replace based on the format. - format = format.replace('M', month); - format = format.replace('d', day); - format = format.replace('y', year); - format = format.replace('H', hour); - format = format.replace('h', hour12); - format = format.replace('m', minute); - format = format.replace('s', second); - format = format.replace('a', ampm); + // Replace based on the format. + format = format.replace('M', month); + format = format.replace('d', day); + format = format.replace('y', year); + format = format.replace('H', hour); + format = format.replace('h', hour12); + format = format.replace('m', minute); + format = format.replace('s', second); + format = format.replace('a', ampm); - // Show it in the element. - clock.innerHTML = format; - }); + // Show it in the element. + clock.innerHTML = format; } } } diff --git a/src/styles/util.scss b/src/styles/util.scss index f87f7d0..31e67b7 100644 --- a/src/styles/util.scss +++ b/src/styles/util.scss @@ -65,6 +65,9 @@ .no-padding { padding: 0px!important; } +.no-border { + border: none!important; +} .content { padding: 12px; } @@ -77,4 +80,8 @@ } .cursor-default { cursor: default !important; +} + +.disabled { + cursor: not-allowed!important; } \ No newline at end of file diff --git a/src/tuicss.scss b/src/tuicss.scss index 0b33563..2d35230 100644 --- a/src/tuicss.scss +++ b/src/tuicss.scss @@ -1,5 +1,6 @@ /* Styles */ @import './styles/global.scss'; +@import './styles/media.scss'; @import './styles/color.scss'; @import './styles/util.scss';