diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100755 index 9b0c38d..0000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,12 +0,0 @@ -# These are supported funding model platforms - -github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] -patreon: # orange_management -open_collective: # Replace with a single Open Collective username -ko_fi: # Replace with a single Ko-fi username -tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel -community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry -liberapay: # Replace with a single Liberapay username -issuehunt: # Replace with a single IssueHunt username -otechie: # Replace with a single Otechie username -custom: ['https://paypal.me/orangemgmt'] diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100755 index 1b14538..0000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,46 +0,0 @@ -# Contributor Covenant Code of Conduct - -## Our Pledge - -In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. - -## Our Standards - -Examples of behavior that contributes to creating a positive environment include: - -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members - -Examples of unacceptable behavior by participants include: - -* The use of sexualized language or imagery and unwelcome sexual attention or advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a professional setting - -## Our Responsibilities - -Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. - -Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. - -## Scope - -This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. - -## Enforcement - -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at spl1nes.com@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. - -Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. - -## Attribution - -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] - -[homepage]: http://contributor-covenant.org -[version]: http://contributor-covenant.org/version/1/4/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100755 index a460510..0000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,196 +0,0 @@ -## Development environment - -The setup and configuration of the development environment is in the hands of every developer themselves. However, it is recommended to follow the setup instructions in the [Developer-Guide](https://github.com/Karaka-Management/Developer-Guide/blob/develop/general/setup.md). - -## Code of conduct - -Every organization member and contributor to the organization must follow the [Code of Conduct](../Policies%20&%20Guidelines/Code%20of%20Conduct.md). - -## Becoming a contributor - -For public repositories you can immediately start by creating forks and pull requests. For private repositories which are necessary to setup the complete developer environment, feel free to request access. Please not that we may not immediately give you access to private repositories and instead will give you smaller tasks regarding public repositories. Please contact info@jingga.app for more details. (**R1**) - -For all contributions our [Contributor License Agreement "CLA"](https://github.com/Karaka-Management/Organization-Guide/blob/master/Processes/HR/Hiring/Individual%20Contributor%20License%20Agreement.md) comes into effect. (**R2**) - -## Code changes - -### Topics / Tasks / Todos - -Generally, the development philosophy is result orientated. This means that anyone can propose tasks, pick up existing tasks or right away implement their code changes. However, implementing code changes without consulting with a senior developer in advance has a much higher risk of code changes not getting admitted. The easiest way to discuss a code change idea in advance are the github [issues](https://github.com/Karaka-Management/Karaka/issues) or [discussions](https://github.com/Karaka-Management/Karaka/discussions). - -Developers are encouraged to pick open tasks with high priorities according to their own skill level. Senior developers may directly assign tasks to developers based on their importance. New developers may find it easier to start with a task that has a low priority as they often also have a lower difficulty. - -Open tasks can be found in the project overview: [Todos](https://github.com/orgs/Karaka-Management/projects/10) - -Tasks currently in development are prefixed in the priority column with an asterisk `*` and a name tag in the task description of the developer who is working on the task. - -The open tasks are reviewed once a month by a senior developer. The senior developer updates the project overview if necessary and requests feedback regarding development status of important tasks under development. During this process important tasks may also get directly assigned to developers. This review is performed on a judgmental bases of the senior basis. - -### Quality - -#### Code style - -Code changes must follow the [style guidelines](https://github.com/Karaka-Management/Developer-Guide/tree/develop/standards) (**R3**). Additionally, the automatic code style inspection tools must return no errors, failures or warnings. Developers should test their changes with inspection tools and configurations mentioned in the [inspection documentation](https://github.com/Karaka-Management/Developer-Guide/blob/develop/quality/inspections.md) in advance before submitting them for review. (**R4**) - -In rare cases errors, failures or warnings during the automatic inspection are acceptable. Reasons can be for example special cases which are difficult automatize or must be individually configured in the inspection settings. If this is the case for a code change and if inspection configuration changes are necessary are decided by the senior developer performing the code review. (**R5**) - -Automated checks which are run during the review process (**R4**): - -```sh -php ./vendor/bin/phpcs ./ --standard="Build/Config/phpcs.xml" -php ./vendor/bin/php-cs-fixer fix ./ --config=Build/Config/.php-cs-fixer.php --allow-risky=yes -php ./vendor/bin/phpcbf --standard=Build/Config/phpcs.xml ./ -php ./vendor/bin/rector process --dry-run --config Build/Config/rector.php ./ -npx eslint ./ -c ./Build/Config/.eslintrc.json -``` - -#### Tests - -Code changes must follow the inspection guidelines (i.e. code coverage) mentioned in the [inspection documentation](https://github.com/Karaka-Management/Developer-Guide/blob/develop/quality/inspections.md) (**R6**). Developers should test their changes with inspection tools and configurations mentioned in the [inspection documentation](https://github.com/Karaka-Management/Developer-Guide/blob/develop/quality/inspections.md) in advance before submitting them for review. (**R7**) - -In rare cases it might be not possible to follow the inspection guidelines. In such cases the senior developer performing the code review may decide if the code change still gets accepted. (**R8**) - -Automated tests which are run during the review process (**R7**): - -```sh -php ./vendor/bin/phpunit -c tests/PHPUnit/phpunit_default.xml -php ./vendor/bin/phpstan analyse --no-progress -l 9 -c Build/Config/phpstan.neon ./ -npx jasmine-node ./ -./cOMS/tests/test.sh -``` - -Additional inspections which are run but might be ignored during the review depending on the use case are mentioned in the [inspection documentation](https://github.com/Karaka-Management/Developer-Guide/blob/develop/quality/inspections.md) as other checks. (**R7**) - -#### Performance - -Developers should occasionaly check performance statistics. At this point no target metrics are defined. - -Since the primary application is a web based application a similar tool as the Google lighthouse tool can be used to inspect the application for best practicies which can significantly improve the application performance. The sitespeed.io tool shows potential performance improvements and slow pages. With the php trace and profiler enabled in the `php.ini` file the VM automatically generates profiling and trace reports for every web request. These can be found in the webgrind logs directory and inspected in webgrind and dropped into the trace visualizer for a flame chart visualization. With mysqldumpslow you can inspect slow sql queries which may need optimization. - -1. Automatic trace and benchmark generation with every web request in `/var/www/html/webgrind/Logs` -2. Webgrind view `http://vm_ip:82` -3. Trace visualization `http://vm_ip:81` - 1. Download the latest trace from `http://vm_ip:82/Logs` - 2. Drag and drop that downloaded `*.xt` file in the trace visualizer -4. `sitespeed.io ./Build/Helper/Scripts/sitespeedDemoUrls.txt -b chrome --outputFolder /var/www/html/sitespeed` -5. Slow query inspection. - -```sh -mysqldumpslow -t 10 /var/log/mysql/mysql-slow.log -mysqldumpslow -t 10 -s l /var/log/mysql/mysql-slow.log -``` - -#### Code review - -In addition to the automatic code review performed by the various inspection tools such as (phpcs, phpstan, phpunit, eslint and custom scripts) a senior developer must check the proposed code change before it is merged with the respective `develop` branch. Only upon the approval by the reviewer a code change requests gets merged as no other developers have permission in the software to make such code merges. - -In case a code change request is not approved the reviewer states the reason for the decision, this may include some tips and requests which will allow the contributor to make improvements so that the code change may get approved. - -If the code reviewer only finds minor issues with the proposed code change the reviewer may make small changes to the proposed code change and inform the contributor to speed up the implementation process. Code reviewers are encouraged to do this with new contributors to avoid long iteration processes and to not discourage new developers. However, communication is key and severe issues with code change requests or if the contributor already made multiple code change requests in the past the reviewer should not implement the improvements by himself and rather decline the code change requests with his reasoning. (**R5**+**R8**) - -#### Demo - -Some code changes may also require changes or extensions in the demo setup scripts. The demo setup script try to simulate a real world use case by generating and modifying mostly random data. This is also a good way to setup and “manually” test the code changes in a larger picture. The demo setup script can be found in the [demoSetup](https://github.com/Karaka-Management/demoSetup) repository. The demo setup script takes a long time due to the large amount of user input simulated data which is generated. Therefore it is recommended to run this only sporadically. (**R9**) - -```sh -sudo -u www-data php -dxdebug.remote_enable=1 -dxdebug.start_with_request=yes -dxdebug.mode=coverage,develop,debug demoSetup/setup.php -``` - -#### Documentation - -Occasionally new code or code changes also require new documentation or documentation changes. Developers should make sure that the new code is also reflected in the existing documentation ([Developer-Guide](), [User-Guide]() and/or module documentation) or if additional documentation is necessary. - -#### Improvements, features, bugs - -If a developer (or employee in general) has an idea for an improvement, feature or finds a potential bug it should be reported at https://github.com/Karaka-Management/Karaka/issues. A senior developer has to check these issues and decide how to proceed with them. The decision how to proceed with the issue must be explained by the senior developer as a response in the issue. Possible steps are: - -* Accept the issue and put the task into the [Todos](https://github.com/orgs/Karaka-Management/projects/10) -* Dismiss the issue with an explanation - -### Release flow - -In case SCSS/CSS or JS files got changed they must get re-built locally before comitting the code change: - -```sh -npx esbuild Web/Backend/js/backend.js --bundle --outfile=Install/Application/Backend/js/backend.min.js --minify -scss cssOMS/styles.scss > cssOMS/styles.css -``` - -For JS you may also use the shorthand command `npm run build`. - -Code changes must be performed in a new branch. A new branch can be created with: - -```sh -git checkout -b new-branch-name -``` - -The name of the branch can be chosen freely however it is recommended to follow the following branch naming conventions: - -* `feature-*` for feature implementations -* `hotfix-*` for security related fixes/improvements -* `bug-*` for bug fixes -* `security-*` for security related fixes/improvements -* `general-*` for general improvements (i.e. documentation, code style & performance improvements) - -```mermaid -%%{init: { 'gitGraph': {'mainBranchName': 'master'}} }%% - gitGraph - commit - branch hotfix-xxx - commit - checkout master - branch develop - checkout master - merge hotfix-xxx - checkout develop - branch bug-xxx - commit - commit - checkout hotfix-xxx - commit - checkout master - merge hotfix-xxx - checkout develop - merge bug-xxx - commit - checkout develop - branch feature-xxx - commit - commit - commit - checkout develop - merge feature-xxx - checkout master - merge develop - checkout develop - branch general-xxx - commit - checkout develop - merge general-xxx - branch security-xxx - commit - commit - checkout develop - merge security-xxx - checkout master - merge develop - -``` - -The senior developer who performs the code review merges the change request into the `develop` branch after their successful code review. Unsuccessful reviews lead to change requests by the original developer, other developers who can make the requested changes, changes by the senior developer who performed the review, or dismissal of the changed code. (**R10**) - -## Approved dependencies - -### Customer dependencies - -Developers may only rely on the dependencies defined in [Approved Customer Software]() when developing a solution. If new software should be added to this list or a different version is required developers should make a request with their team leader/head of department who forwards this requests if appropriate to the CTO and explain the reasoning for the different dependency needs. The CTO can decide if the dependency will be accepted. (**R11**) - -### Developer dependencies - -Developers may only rely on the dependencies defined in [IT Equipment & Software](). If new software should be added to this list or a different version is required developers should make a request with their team leader/head of department who forwards this requests if appropriate to the CTO and explain the reasoning for the different dependency needs. The CTO can decide if the dependency will be accepted. Changing the package managers such as `composer.json` or `package.json` is not allowed by anyone else than the CTO. (**R12**) - -## Other related documents - -* [Confidentiality Policy](../Policies%20&%20Guidelines/Confidentiality%20Policy.md) -* [Organization Activity Policy](../Policies%20&%20Guidelines/Organization%20Activity%20Policy.md) -* [Tutorials](./Development/Tutorials) \ No newline at end of file diff --git a/accordion.scss b/accordion.scss index cf446dc..667bc8c 100755 --- a/accordion.scss +++ b/accordion.scss @@ -6,15 +6,15 @@ display: none; &:checked + label { - background: var(--button-colored-background); - color: var(--text-on-background-color-2); + background: var(--btn-c-bg); + color: var(--txt-on-bg-c-2); + section { display: inherit; } &:hover { - background: var(--button-colored-background-hover); + background: var(--btn-c-bg-hover); } } @@ -32,11 +32,11 @@ cursor: pointer; color: #000; font-size: 1rem; - background: var(--box-border); + background: var(--bborder); &:hover { - color: var(--text-on-background-color-2); - background: var(--button-colored-background-hover); + color: var(--txt-on-bg-c-2); + background: var(--btn-c-bg-hover); } } @@ -55,9 +55,9 @@ width: 100%; display: flex; flex-direction: row; - border-bottom: 1px solid var(--box-border); + border-bottom: 1px solid var(--bborder); cursor: pointer; - color: var(--link-color); + color: var(--link-c); user-select: none; .expand { diff --git a/alert.scss b/alert.scss index 634ae65..ee2a84d 100755 --- a/alert.scss +++ b/alert.scss @@ -1,16 +1,51 @@ -.log-msg { - padding: 1rem; - margin: 1rem; -} - @each $tuple in 'ok' #aaffad #81e27d #459442, 'warning' #f8ffa8 #d6d949 #94972f, 'error' #ff7d79 #ee5649 #a5302a, 'info' #b6d2ff #85b0ee #4865a5 { - .log-msg-status-#{nth($tuple, 1)} { + .log-lvl-#{nth($tuple, 1)} { background: #{nth($tuple, 2)}; border: 1px solid #{nth($tuple, 3)}; color: #{nth($tuple, 4)}; } +} + +#dim { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #000; + opacity: 0.5; + z-index: 5; +} + +#app-message-container { + position: absolute; + margin: 0 auto; + right: 10px; + top: 85px; + padding: 0; + + .log-msg { + z-index: 11; + margin: 0 auto; + right: 0; + top: 0; + margin-bottom: 10px; + } +} + +.log-msg { + position: relative; + max-width: 250px; + padding: 1rem; + margin: 1rem; + + .close { + position: absolute; + top: 5px; + right: 5px; + } } \ No newline at end of file diff --git a/alignment.scss b/alignment.scss deleted file mode 100755 index bb4d91a..0000000 --- a/alignment.scss +++ /dev/null @@ -1,41 +0,0 @@ -.nobreak, .nowrap { - white-space: nowrap; -} - -.center { - margin: 0 auto; -} - -.centerText { - text-align: center; -} - -.rightText { - text-align: right; -} - -.floatLeft { - float: left; -} - -.floatRight { - float: right; -} - -.pAlignTable { - display: table; - width: 100%; -} - -.vCenterTable { - display: table-cell; - vertical-align: middle; -} - -.h-overflow { - overflow-x: auto; -} - -.overflowfix { - overflow: auto; -} diff --git a/animate.css b/animate.css new file mode 100644 index 0000000..eea551a --- /dev/null +++ b/animate.css @@ -0,0 +1,58 @@ +/*! + * animate.css -http://daneden.me/animate + * Version - 3.5.1 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2016 Daniel Eden + */.animated{animation-duration:0.5s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.hinge{animation-duration:2s}.animated.medium-duration{animation-duration:2s}.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut{animation-duration:0.75s}@keyframes bounce{from, + 20%, + 53%, + 80%, + to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0)}40%, + 43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0)}90%{transform:translate3d(0, -4px, 0)}}.bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{from, + 50%, + to{opacity:1}25%, + 75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{from{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scale3d(1, 1, 1)}}.pulse{animation-name:pulse}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.heartBeat{animation-name:heartBeat;animation-duration:calc(var(--animate-duration) * 1.3);animation-timing-function:ease-in-out}@keyframes rubberBand{from{transform:scale3d(1, 1, 1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}to{transform:scale3d(1, 1, 1)}}.rubberBand{animation-name:rubberBand}@keyframes shake{from, + to{transform:translate3d(0, 0, 0)}10%, + 30%, + 50%, + 70%, + 90%{transform:translate3d(-10px, 0, 0)}20%, + 40%, + 60%, + 80%{transform:translate3d(10px, 0, 0)}}.shake{animation-name:shake}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate3d(0, 0, 1, 15deg)}40%{transform:rotate3d(0, 0, 1, -10deg)}60%{transform:rotate3d(0, 0, 1, 5deg)}80%{transform:rotate3d(0, 0, 1, -5deg)}to{transform:rotate3d(0, 0, 1, 0deg)}}.swing{transform-origin:top center;animation-name:swing}@keyframes tada{from{transform:scale3d(1, 1, 1)}10%, + 20%{transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)}30%, + 50%, + 70%, + 90%{transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)}40%, + 60%, + 80%{transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)}to{transform:scale3d(1, 1, 1)}}.tada{animation-name:tada}@keyframes wobble{from{transform:none}15%{transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)}30%{transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)}45%{transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)}60%{transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)}75%{transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)}to{transform:none}}.wobble{animation-name:wobble}@keyframes jello{from, + 11.1%, + to{transform:none}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}.jello{animation-name:jello;transform-origin:center}@keyframes bounceIn{from, + 20%, + 40%, + 60%, + 80%, + to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scale3d(1, 1, 1)}}.bounceIn{animation-name:bounceIn}@keyframes bounceInDown{from, + 60%, + 75%, + 90%, + to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, -3000px, 0)}60%{opacity:1;transform:translate3d(0, 25px, 0)}75%{transform:translate3d(0, -10px, 0)}90%{transform:translate3d(0, 5px, 0)}to{transform:none}}.bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{from, + 60%, + 75%, + 90%, + to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(-3000px, 0, 0)}60%{opacity:1;transform:translate3d(25px, 0, 0)}75%{transform:translate3d(-10px, 0, 0)}90%{transform:translate3d(5px, 0, 0)}to{transform:none}}.bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{from, + 60%, + 75%, + 90%, + to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}from{opacity:0;transform:translate3d(3000px, 0, 0)}60%{opacity:1;transform:translate3d(-25px, 0, 0)}75%{transform:translate3d(10px, 0, 0)}90%{transform:translate3d(-5px, 0, 0)}to{transform:none}}.bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{from, + 60%, + 75%, + 90%, + to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}from{opacity:0;transform:translate3d(0, 3000px, 0)}60%{opacity:1;transform:translate3d(0, -20px, 0)}75%{transform:translate3d(0, 10px, 0)}90%{transform:translate3d(0, -5px, 0)}to{transform:translate3d(0, 0, 0)}}.bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%, + 55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}to{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}.bounceOut{animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0, 10px, 0)}40%, + 45%{opacity:1;transform:translate3d(0, -20px, 0)}to{opacity:0;transform:translate3d(0, 2000px, 0)}}.bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px, 0, 0)}to{opacity:0;transform:translate3d(-2000px, 0, 0)}}.bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px, 0, 0)}to{opacity:0;transform:translate3d(2000px, 0, 0)}}.bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0, -10px, 0)}40%, + 45%{opacity:1;transform:translate3d(0, 20px, 0)}to{opacity:0;transform:translate3d(0, -2000px, 0)}}.bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0, -100%, 0)}to{opacity:1;transform:none}}.fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{from{opacity:0;transform:translate3d(0, -2000px, 0)}to{opacity:1;transform:none}}.fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%, 0, 0)}to{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{from{opacity:0;transform:translate3d(-2000px, 0, 0)}to{opacity:1;transform:none}}.fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%, 0, 0)}to{opacity:1;transform:none}}.fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{from{opacity:0;transform:translate3d(2000px, 0, 0)}to{opacity:1;transform:none}}.fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0, 100%, 0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{from{opacity:0;transform:translate3d(0, 2000px, 0)}to{opacity:1;transform:none}}.fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{from{opacity:1}to{opacity:0;transform:translate3d(0, 100%, 0)}}.fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;transform:translate3d(0, 2000px, 0)}}.fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;transform:translate3d(-100%, 0, 0)}}.fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;transform:translate3d(-2000px, 0, 0)}}.fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{from{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0)}}.fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;transform:translate3d(2000px, 0, 0)}}.fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0, -100%, 0)}}.fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{from{opacity:1}to{opacity:0;transform:translate3d(0, -2000px, 0)}}.fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes flip{from{transform:perspective(400px) rotate3d(0, 1, 0, -360deg);animation-timing-function:ease-out}40%{transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(0.95, 0.95, 0.95);animation-timing-function:ease-in}to{transform:perspective(400px);animation-timing-function:ease-in}}.animated.flip{backface-visibility:visible;animation-name:flip}@keyframes flipInX{from{transform:perspective(400px) rotate3d(1, 0, 0, 90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(1, 0, 0, -20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(1, 0, 0, 10deg);opacity:1}80%{transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}to{transform:perspective(400px)}}.flipInX{backface-visibility:visible !important;animation-name:flipInX}@keyframes flipInY{from{transform:perspective(400px) rotate3d(0, 1, 0, 90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(0, 1, 0, -20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(0, 1, 0, 10deg);opacity:1}80%{transform:perspective(400px) rotate3d(0, 1, 0, -5deg)}to{transform:perspective(400px)}}.flipInY{backface-visibility:visible !important;animation-name:flipInY}@keyframes flipOutX{from{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(1, 0, 0, -20deg);opacity:1}to{transform:perspective(400px) rotate3d(1, 0, 0, 90deg);opacity:0}}.flipOutX{animation-name:flipOutX;backface-visibility:visible !important}@keyframes flipOutY{from{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(0, 1, 0, -15deg);opacity:1}to{transform:perspective(400px) rotate3d(0, 1, 0, 90deg);opacity:0}}.flipOutY{backface-visibility:visible !important;animation-name:flipOutY}@keyframes lightSpeedIn{from{transform:translate3d(100%, 0, 0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg);opacity:1}to{transform:none;opacity:1}}.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}@keyframes lightSpeedOut{from{opacity:1}to{transform:translate3d(100%, 0, 0) skewX(30deg);opacity:0}}.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}@keyframes rotateIn{from{transform-origin:center;transform:rotate3d(0, 0, 1, -200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}.rotateIn{animation-name:rotateIn}@keyframes rotateInDownLeft{from{transform-origin:left bottom;transform:rotate3d(0, 0, 1, -45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInDownLeft{animation-name:rotateInDownLeft}@keyframes rotateInDownRight{from{transform-origin:right bottom;transform:rotate3d(0, 0, 1, 45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInDownRight{animation-name:rotateInDownRight}@keyframes rotateInUpLeft{from{transform-origin:left bottom;transform:rotate3d(0, 0, 1, 45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInUpLeft{animation-name:rotateInUpLeft}@keyframes rotateInUpRight{from{transform-origin:right bottom;transform:rotate3d(0, 0, 1, -90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInUpRight{animation-name:rotateInUpRight}@keyframes rotateOut{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0, 0, 1, 200deg);opacity:0}}.rotateOut{animation-name:rotateOut}@keyframes rotateOutDownLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0, 0, 1, 45deg);opacity:0}}.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes rotateOutDownRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0, 0, 1, -45deg);opacity:0}}.rotateOutDownRight{animation-name:rotateOutDownRight}@keyframes rotateOutUpLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0, 0, 1, -45deg);opacity:0}}.rotateOutUpLeft{animation-name:rotateOutUpLeft}@keyframes rotateOutUpRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0, 0, 1, 90deg);opacity:0}}.rotateOutUpRight{animation-name:rotateOutUpRight}@keyframes hinge{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%, + 60%{transform:rotate3d(0, 0, 1, 80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%, + 80%{transform:rotate3d(0, 0, 1, 60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0, 700px, 0);opacity:0}}.hinge{animation-name:hinge}@keyframes rollIn{from{opacity:0;transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{from{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)}}.rollOut{animation-name:rollOut}@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}.zoomIn{animation-name:zoomIn}@keyframes zoomInDown{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}to{opacity:0}}.zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.zoomOutDown{animation-name:zoomOutDown}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px, 0, 0);transform-origin:left center}}.zoomOutLeft{animation-name:zoomOutLeft}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(2000px, 0, 0);transform-origin:right center}}.zoomOutRight{animation-name:zoomOutRight}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.zoomOutUp{animation-name:zoomOutUp}@keyframes slideInDown{from{transform:translate3d(0, -100%, 0);visibility:visible}to{transform:translate3d(0, 0, 0)}}.slideInDown{animation-name:slideInDown}@keyframes slideInLeft{from{transform:translate3d(-100%, 0, 0);visibility:visible}to{transform:translate3d(0, 0, 0)}}.slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{from{transform:translate3d(100%, 0, 0);visibility:visible}to{transform:translate3d(0, 0, 0)}}.slideInRight{animation-name:slideInRight}@keyframes slideInUp{from{transform:translate3d(0, 100%, 0);visibility:visible}to{transform:translate3d(0, 0, 0)}}.slideInUp{animation-name:slideInUp}@keyframes slideOutDown{from{transform:translate3d(0, 0, 0)}to{visibility:hidden;transform:translate3d(0, 100%, 0)}}.slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{from{transform:translate3d(0, 0, 0)}to{visibility:hidden;transform:translate3d(-100%, 0, 0)}}.slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{from{transform:translate3d(0, 0, 0)}to{visibility:hidden;transform:translate3d(100%, 0, 0)}}.slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{from{transform:translate3d(0, 0, 0)}to{visibility:hidden;transform:translate3d(0, -100%, 0)}}.slideOutUp{animation-name:slideOutUp}.greenFade{animation-name:greenFade}@keyframes greenFade{from{background:transparent}to{background:#81e27d}}.redFade{animation-name:redFade}@keyframes redFade{from{background:transparent}to{background:#ee5649}}.redCircleFade{animation-name:redCircleFade}@keyframes redCircleFade{0%{background:transparent}50%{background:#ee5649}100%{background:transparent}}.greenCircleFade,.greenCircleFade td{animation-name:greenCircleFade}@keyframes greenCircleFade{0%{background:transparent}50%{background:#81e27d}100%{background:transparent}} +/*# sourceMappingURL=animate.css.map */ diff --git a/animate.scss b/animate.scss index c2167d9..b9cb172 100755 --- a/animate.scss +++ b/animate.scss @@ -1,5 +1,3 @@ -@charset "UTF-8"; - /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 @@ -9,1639 +7,1691 @@ */ .animated { - animation-duration: 0.5s; - animation-fill-mode: both; + animation-duration: 0.5s; + animation-fill-mode: both; } .animated.infinite { - animation-iteration-count: infinite; + animation-iteration-count: infinite; } .animated.hinge { - animation-duration: 2s; + animation-duration: 2s; } .animated.medium-duration { - animation-duration: 2s; + animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { - animation-duration: .75s; + animation-duration: 0.75s; } @keyframes bounce { - from, 20%, 53%, 80%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - transform: translate3d(0,0,0); - } + from, + 20%, + 53%, + 80%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: translate3d(0, 0, 0); + } - 40%, 43% { - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - transform: translate3d(0, -30px, 0); - } + 40%, + 43% { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + transform: translate3d(0, -30px, 0); + } - 70% { - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - transform: translate3d(0, -15px, 0); - } + 70% { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + transform: translate3d(0, -15px, 0); + } - 90% { - transform: translate3d(0,-4px,0); - } + 90% { + transform: translate3d(0, -4px, 0); + } } .bounce { - animation-name: bounce; - transform-origin: center bottom; + animation-name: bounce; + transform-origin: center bottom; } @keyframes flash { - from, 50%, to { - opacity: 1; - } + from, + 50%, + to { + opacity: 1; + } - 25%, 75% { - opacity: 0; - } + 25%, + 75% { + opacity: 0; + } } .flash { - animation-name: flash; + animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes pulse { - from { - transform: scale3d(1, 1, 1); - } + from { + transform: scale3d(1, 1, 1); + } - 50% { - transform: scale3d(1.05, 1.05, 1.05); - } + 50% { + transform: scale3d(1.05, 1.05, 1.05); + } - to { - transform: scale3d(1, 1, 1); - } + to { + transform: scale3d(1, 1, 1); + } } .pulse { - animation-name: pulse; + animation-name: pulse; } @keyframes heartBeat { - 0% { - transform: scale(1); - } + 0% { + transform: scale(1); + } - 14% { - transform: scale(1.3); - } + 14% { + transform: scale(1.3); + } - 28% { - transform: scale(1); - } + 28% { + transform: scale(1); + } - 42% { - transform: scale(1.3); - } + 42% { + transform: scale(1.3); + } - 70% { - transform: scale(1); - } + 70% { + transform: scale(1); + } } .heartBeat { - animation-name: heartBeat; - animation-duration: calc(var(--animate-duration) * 1.3); - animation-timing-function: ease-in-out; + animation-name: heartBeat; + animation-duration: calc(var(--animate-duration) * 1.3); + animation-timing-function: ease-in-out; } @keyframes rubberBand { - from { - transform: scale3d(1, 1, 1); - } + from { + transform: scale3d(1, 1, 1); + } - 30% { - transform: scale3d(1.25, 0.75, 1); - } + 30% { + transform: scale3d(1.25, 0.75, 1); + } - 40% { - transform: scale3d(0.75, 1.25, 1); - } + 40% { + transform: scale3d(0.75, 1.25, 1); + } - 50% { - transform: scale3d(1.15, 0.85, 1); - } + 50% { + transform: scale3d(1.15, 0.85, 1); + } - 65% { - transform: scale3d(.95, 1.05, 1); - } + 65% { + transform: scale3d(0.95, 1.05, 1); + } - 75% { - transform: scale3d(1.05, .95, 1); - } + 75% { + transform: scale3d(1.05, 0.95, 1); + } - to { - transform: scale3d(1, 1, 1); - } + to { + transform: scale3d(1, 1, 1); + } } .rubberBand { - animation-name: rubberBand; + animation-name: rubberBand; } @keyframes shake { - from, to { - transform: translate3d(0, 0, 0); - } + from, + to { + transform: translate3d(0, 0, 0); + } - 10%, 30%, 50%, 70%, 90% { - transform: translate3d(-10px, 0, 0); - } + 10%, + 30%, + 50%, + 70%, + 90% { + transform: translate3d(-10px, 0, 0); + } - 20%, 40%, 60%, 80% { - transform: translate3d(10px, 0, 0); - } + 20%, + 40%, + 60%, + 80% { + transform: translate3d(10px, 0, 0); + } } .shake { - animation-name: shake; + animation-name: shake; } @keyframes headShake { - 0% { - transform: translateX(0); - } + 0% { + transform: translateX(0); + } - 6.5% { - transform: translateX(-6px) rotateY(-9deg); - } + 6.5% { + transform: translateX(-6px) rotateY(-9deg); + } - 18.5% { - transform: translateX(5px) rotateY(7deg); - } + 18.5% { + transform: translateX(5px) rotateY(7deg); + } - 31.5% { - transform: translateX(-3px) rotateY(-5deg); - } + 31.5% { + transform: translateX(-3px) rotateY(-5deg); + } - 43.5% { - transform: translateX(2px) rotateY(3deg); - } + 43.5% { + transform: translateX(2px) rotateY(3deg); + } - 50% { - transform: translateX(0); - } + 50% { + transform: translateX(0); + } } .headShake { - animation-timing-function: ease-in-out; - animation-name: headShake; + animation-timing-function: ease-in-out; + animation-name: headShake; } @keyframes swing { - 20% { - transform: rotate3d(0, 0, 1, 15deg); - } + 20% { + transform: rotate3d(0, 0, 1, 15deg); + } - 40% { - transform: rotate3d(0, 0, 1, -10deg); - } + 40% { + transform: rotate3d(0, 0, 1, -10deg); + } - 60% { - transform: rotate3d(0, 0, 1, 5deg); - } + 60% { + transform: rotate3d(0, 0, 1, 5deg); + } - 80% { - transform: rotate3d(0, 0, 1, -5deg); - } + 80% { + transform: rotate3d(0, 0, 1, -5deg); + } - to { - transform: rotate3d(0, 0, 1, 0deg); - } + to { + transform: rotate3d(0, 0, 1, 0deg); + } } .swing { - transform-origin: top center; - animation-name: swing; + transform-origin: top center; + animation-name: swing; } @keyframes tada { - from { - transform: scale3d(1, 1, 1); - } + from { + transform: scale3d(1, 1, 1); + } - 10%, 20% { - transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); - } + 10%, + 20% { + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + } - 30%, 50%, 70%, 90% { - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); - } + 30%, + 50%, + 70%, + 90% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } - 40%, 60%, 80% { - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); - } + 40%, + 60%, + 80% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } - to { - transform: scale3d(1, 1, 1); - } + to { + transform: scale3d(1, 1, 1); + } } .tada { - animation-name: tada; + animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes wobble { - from { - transform: none; - } + from { + transform: none; + } - 15% { - transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); - } + 15% { + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } - 30% { - transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); - } + 30% { + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } - 45% { - transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); - } + 45% { + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } - 60% { - transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); - } + 60% { + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } - 75% { - transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); - } + 75% { + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } - to { - transform: none; - } + to { + transform: none; + } } .wobble { - animation-name: wobble; + animation-name: wobble; } @keyframes jello { - from, 11.1%, to { - transform: none; - } + from, + 11.1%, + to { + transform: none; + } - 22.2% { - transform: skewX(-12.5deg) skewY(-12.5deg); - } + 22.2% { + transform: skewX(-12.5deg) skewY(-12.5deg); + } - 33.3% { - transform: skewX(6.25deg) skewY(6.25deg); - } + 33.3% { + transform: skewX(6.25deg) skewY(6.25deg); + } - 44.4% { - transform: skewX(-3.125deg) skewY(-3.125deg); - } + 44.4% { + transform: skewX(-3.125deg) skewY(-3.125deg); + } - 55.5% { - transform: skewX(1.5625deg) skewY(1.5625deg); - } + 55.5% { + transform: skewX(1.5625deg) skewY(1.5625deg); + } - 66.6% { - transform: skewX(-0.78125deg) skewY(-0.78125deg); - } + 66.6% { + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } - 77.7% { - transform: skewX(0.390625deg) skewY(0.390625deg); - } + 77.7% { + transform: skewX(0.390625deg) skewY(0.390625deg); + } - 88.8% { - transform: skewX(-0.1953125deg) skewY(-0.1953125deg); - } + 88.8% { + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + } } .jello { - animation-name: jello; - transform-origin: center; + animation-name: jello; + transform-origin: center; } @keyframes bounceIn { - from, 20%, 40%, 60%, 80%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } + from, + 20%, + 40%, + 60%, + 80%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } - 0% { - opacity: 0; - transform: scale3d(.3, .3, .3); - } + 0% { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); + } - 20% { - transform: scale3d(1.1, 1.1, 1.1); - } + 20% { + transform: scale3d(1.1, 1.1, 1.1); + } - 40% { - transform: scale3d(.9, .9, .9); - } + 40% { + transform: scale3d(0.9, 0.9, 0.9); + } - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); - } + 60% { + opacity: 1; + transform: scale3d(1.03, 1.03, 1.03); + } - 80% { - transform: scale3d(.97, .97, .97); - } + 80% { + transform: scale3d(0.97, 0.97, 0.97); + } - to { - opacity: 1; - transform: scale3d(1, 1, 1); - } + to { + opacity: 1; + transform: scale3d(1, 1, 1); + } } .bounceIn { - animation-name: bounceIn; + animation-name: bounceIn; } @keyframes bounceInDown { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } - 0% { - opacity: 0; - transform: translate3d(0, -3000px, 0); - } + 0% { + opacity: 0; + transform: translate3d(0, -3000px, 0); + } - 60% { - opacity: 1; - transform: translate3d(0, 25px, 0); - } + 60% { + opacity: 1; + transform: translate3d(0, 25px, 0); + } - 75% { - transform: translate3d(0, -10px, 0); - } + 75% { + transform: translate3d(0, -10px, 0); + } - 90% { - transform: translate3d(0, 5px, 0); - } + 90% { + transform: translate3d(0, 5px, 0); + } - to { - transform: none; - } + to { + transform: none; + } } .bounceInDown { - animation-name: bounceInDown; + animation-name: bounceInDown; } @keyframes bounceInLeft { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } - 0% { - opacity: 0; - transform: translate3d(-3000px, 0, 0); - } + 0% { + opacity: 0; + transform: translate3d(-3000px, 0, 0); + } - 60% { - opacity: 1; - transform: translate3d(25px, 0, 0); - } + 60% { + opacity: 1; + transform: translate3d(25px, 0, 0); + } - 75% { - transform: translate3d(-10px, 0, 0); - } + 75% { + transform: translate3d(-10px, 0, 0); + } - 90% { - transform: translate3d(5px, 0, 0); - } + 90% { + transform: translate3d(5px, 0, 0); + } - to { - transform: none; - } + to { + transform: none; + } } .bounceInLeft { - animation-name: bounceInLeft; + animation-name: bounceInLeft; } @keyframes bounceInRight { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } - from { - opacity: 0; - transform: translate3d(3000px, 0, 0); - } + from { + opacity: 0; + transform: translate3d(3000px, 0, 0); + } - 60% { - opacity: 1; - transform: translate3d(-25px, 0, 0); - } + 60% { + opacity: 1; + transform: translate3d(-25px, 0, 0); + } - 75% { - transform: translate3d(10px, 0, 0); - } + 75% { + transform: translate3d(10px, 0, 0); + } - 90% { - transform: translate3d(-5px, 0, 0); - } + 90% { + transform: translate3d(-5px, 0, 0); + } - to { - transform: none; - } + to { + transform: none; + } } .bounceInRight { - animation-name: bounceInRight; + animation-name: bounceInRight; } @keyframes bounceInUp { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } - from { - opacity: 0; - transform: translate3d(0, 3000px, 0); - } + from { + opacity: 0; + transform: translate3d(0, 3000px, 0); + } - 60% { - opacity: 1; - transform: translate3d(0, -20px, 0); - } + 60% { + opacity: 1; + transform: translate3d(0, -20px, 0); + } - 75% { - transform: translate3d(0, 10px, 0); - } + 75% { + transform: translate3d(0, 10px, 0); + } - 90% { - transform: translate3d(0, -5px, 0); - } + 90% { + transform: translate3d(0, -5px, 0); + } - to { - transform: translate3d(0, 0, 0); - } + to { + transform: translate3d(0, 0, 0); + } } .bounceInUp { - animation-name: bounceInUp; + animation-name: bounceInUp; } @keyframes bounceOut { - 20% { - transform: scale3d(.9, .9, .9); - } + 20% { + transform: scale3d(0.9, 0.9, 0.9); + } - 50%, 55% { - opacity: 1; - transform: scale3d(1.1, 1.1, 1.1); - } + 50%, + 55% { + opacity: 1; + transform: scale3d(1.1, 1.1, 1.1); + } - to { - opacity: 0; - transform: scale3d(.3, .3, .3); - } + to { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); + } } .bounceOut { - animation-name: bounceOut; + animation-name: bounceOut; } @keyframes bounceOutDown { - 20% { - transform: translate3d(0, 10px, 0); - } + 20% { + transform: translate3d(0, 10px, 0); + } - 40%, 45% { - opacity: 1; - transform: translate3d(0, -20px, 0); - } + 40%, + 45% { + opacity: 1; + transform: translate3d(0, -20px, 0); + } - to { - opacity: 0; - transform: translate3d(0, 2000px, 0); - } + to { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } } .bounceOutDown { - animation-name: bounceOutDown; + animation-name: bounceOutDown; } @keyframes bounceOutLeft { - 20% { - opacity: 1; - transform: translate3d(20px, 0, 0); - } + 20% { + opacity: 1; + transform: translate3d(20px, 0, 0); + } - to { - opacity: 0; - transform: translate3d(-2000px, 0, 0); - } + to { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } } .bounceOutLeft { - animation-name: bounceOutLeft; + animation-name: bounceOutLeft; } @keyframes bounceOutRight { - 20% { - opacity: 1; - transform: translate3d(-20px, 0, 0); - } + 20% { + opacity: 1; + transform: translate3d(-20px, 0, 0); + } - to { - opacity: 0; - transform: translate3d(2000px, 0, 0); - } + to { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } } .bounceOutRight { - animation-name: bounceOutRight; + animation-name: bounceOutRight; } @keyframes bounceOutUp { - 20% { - transform: translate3d(0, -10px, 0); - } + 20% { + transform: translate3d(0, -10px, 0); + } - 40%, 45% { - opacity: 1; - transform: translate3d(0, 20px, 0); - } + 40%, + 45% { + opacity: 1; + transform: translate3d(0, 20px, 0); + } - to { - opacity: 0; - transform: translate3d(0, -2000px, 0); - } + to { + opacity: 0; + transform: translate3d(0, -2000px, 0); + } } .bounceOutUp { - animation-name: bounceOutUp; + animation-name: bounceOutUp; } @keyframes fadeIn { - from { - opacity: 0; - } + from { + opacity: 0; + } - to { - opacity: 1; - } + to { + opacity: 1; + } } .fadeIn { - animation-name: fadeIn; + animation-name: fadeIn; } @keyframes fadeInDown { - from { - opacity: 0; - transform: translate3d(0, -100%, 0); - } + from { + opacity: 0; + transform: translate3d(0, -100%, 0); + } - to { - opacity: 1; - transform: none; - } + to { + opacity: 1; + transform: none; + } } .fadeInDown { - animation-name: fadeInDown; + animation-name: fadeInDown; } @keyframes fadeInDownBig { - from { - opacity: 0; - transform: translate3d(0, -2000px, 0); - } + from { + opacity: 0; + transform: translate3d(0, -2000px, 0); + } - to { - opacity: 1; - transform: none; - } + to { + opacity: 1; + transform: none; + } } .fadeInDownBig { - animation-name: fadeInDownBig; + animation-name: fadeInDownBig; } @keyframes fadeInLeft { - from { - opacity: 0; - transform: translate3d(-100%, 0, 0); - } + from { + opacity: 0; + transform: translate3d(-100%, 0, 0); + } - to { - opacity: 1; - transform: none; - } + to { + opacity: 1; + transform: none; + } } .fadeInLeft { - animation-name: fadeInLeft; + animation-name: fadeInLeft; } @keyframes fadeInLeftBig { - from { - opacity: 0; - transform: translate3d(-2000px, 0, 0); - } + from { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } - to { - opacity: 1; - transform: none; - } + to { + opacity: 1; + transform: none; + } } .fadeInLeftBig { - animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; } @keyframes fadeInRight { - from { - opacity: 0; - transform: translate3d(100%, 0, 0); - } + from { + opacity: 0; + transform: translate3d(100%, 0, 0); + } - to { - opacity: 1; - transform: none; - } + to { + opacity: 1; + transform: none; + } } .fadeInRight { - animation-name: fadeInRight; + animation-name: fadeInRight; } @keyframes fadeInRightBig { - from { - opacity: 0; - transform: translate3d(2000px, 0, 0); - } + from { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } - to { - opacity: 1; - transform: none; - } + to { + opacity: 1; + transform: none; + } } .fadeInRightBig { - animation-name: fadeInRightBig; + animation-name: fadeInRightBig; } @keyframes fadeInUp { - from { - opacity: 0; - transform: translate3d(0, 100%, 0); - } + from { + opacity: 0; + transform: translate3d(0, 100%, 0); + } - to { - opacity: 1; - transform: none; - } + to { + opacity: 1; + transform: none; + } } .fadeInUp { - animation-name: fadeInUp; + animation-name: fadeInUp; } @keyframes fadeInUpBig { - from { - opacity: 0; - transform: translate3d(0, 2000px, 0); - } + from { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } - to { - opacity: 1; - transform: none; - } + to { + opacity: 1; + transform: none; + } } .fadeInUpBig { - animation-name: fadeInUpBig; + animation-name: fadeInUpBig; } @keyframes fadeOut { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } .fadeOut { - animation-name: fadeOut; + animation-name: fadeOut; } @keyframes fadeOutDown { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate3d(0, 100%, 0); - } + to { + opacity: 0; + transform: translate3d(0, 100%, 0); + } } .fadeOutDown { - animation-name: fadeOutDown; + animation-name: fadeOutDown; } @keyframes fadeOutDownBig { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate3d(0, 2000px, 0); - } + to { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } } .fadeOutDownBig { - animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; } @keyframes fadeOutLeft { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate3d(-100%, 0, 0); - } + to { + opacity: 0; + transform: translate3d(-100%, 0, 0); + } } .fadeOutLeft { - animation-name: fadeOutLeft; + animation-name: fadeOutLeft; } @keyframes fadeOutLeftBig { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate3d(-2000px, 0, 0); - } + to { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } } .fadeOutLeftBig { - animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; } @keyframes fadeOutRight { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate3d(100%, 0, 0); - } + to { + opacity: 0; + transform: translate3d(100%, 0, 0); + } } .fadeOutRight { - animation-name: fadeOutRight; + animation-name: fadeOutRight; } @keyframes fadeOutRightBig { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate3d(2000px, 0, 0); - } + to { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } } .fadeOutRightBig { - animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; } @keyframes fadeOutUp { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate3d(0, -100%, 0); - } + to { + opacity: 0; + transform: translate3d(0, -100%, 0); + } } .fadeOutUp { - animation-name: fadeOutUp; + animation-name: fadeOutUp; } @keyframes fadeOutUpBig { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate3d(0, -2000px, 0); - } + to { + opacity: 0; + transform: translate3d(0, -2000px, 0); + } } .fadeOutUpBig { - animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; } @keyframes flip { - from { - transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - animation-timing-function: ease-out; - } + from { + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + animation-timing-function: ease-out; + } - 40% { - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); - animation-timing-function: ease-out; - } + 40% { + transform: perspective(400px) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg); + animation-timing-function: ease-out; + } - 50% { - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); - animation-timing-function: ease-in; - } + 50% { + transform: perspective(400px) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg); + animation-timing-function: ease-in; + } - 80% { - transform: perspective(400px) scale3d(.95, .95, .95); - animation-timing-function: ease-in; - } + 80% { + transform: perspective(400px) scale3d(0.95, 0.95, 0.95); + animation-timing-function: ease-in; + } - to { - transform: perspective(400px); - animation-timing-function: ease-in; - } + to { + transform: perspective(400px); + animation-timing-function: ease-in; + } } .animated.flip { - backface-visibility: visible; - animation-name: flip; + backface-visibility: visible; + animation-name: flip; } @keyframes flipInX { - from { - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - animation-timing-function: ease-in; - opacity: 0; - } + from { + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + animation-timing-function: ease-in; + opacity: 0; + } - 40% { - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - animation-timing-function: ease-in; - } + 40% { + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + animation-timing-function: ease-in; + } - 60% { - transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - opacity: 1; - } + 60% { + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; + } - 80% { - transform: perspective(400px) rotate3d(1, 0, 0, -5deg); - } + 80% { + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } - to { - transform: perspective(400px); - } + to { + transform: perspective(400px); + } } .flipInX { - backface-visibility: visible !important; - animation-name: flipInX; + backface-visibility: visible !important; + animation-name: flipInX; } @keyframes flipInY { - from { - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - animation-timing-function: ease-in; - opacity: 0; - } + from { + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + animation-timing-function: ease-in; + opacity: 0; + } - 40% { - transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - animation-timing-function: ease-in; - } + 40% { + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + animation-timing-function: ease-in; + } - 60% { - transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - opacity: 1; - } + 60% { + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; + } - 80% { - transform: perspective(400px) rotate3d(0, 1, 0, -5deg); - } + 80% { + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } - to { - transform: perspective(400px); - } + to { + transform: perspective(400px); + } } .flipInY { - backface-visibility: visible !important; - animation-name: flipInY; + backface-visibility: visible !important; + animation-name: flipInY; } @keyframes flipOutX { - from { - transform: perspective(400px); - } + from { + transform: perspective(400px); + } - 30% { - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - opacity: 1; - } + 30% { + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } - to { - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - opacity: 0; - } + to { + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } } .flipOutX { - animation-name: flipOutX; - backface-visibility: visible !important; + animation-name: flipOutX; + backface-visibility: visible !important; } @keyframes flipOutY { - from { - transform: perspective(400px); - } + from { + transform: perspective(400px); + } - 30% { - transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - opacity: 1; - } + 30% { + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; + } - to { - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - opacity: 0; - } + to { + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } } .flipOutY { - backface-visibility: visible !important; - animation-name: flipOutY; + backface-visibility: visible !important; + animation-name: flipOutY; } @keyframes lightSpeedIn { - from { - transform: translate3d(100%, 0, 0) skewX(-30deg); - opacity: 0; - } + from { + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } - 60% { - transform: skewX(20deg); - opacity: 1; - } + 60% { + transform: skewX(20deg); + opacity: 1; + } - 80% { - transform: skewX(-5deg); - opacity: 1; - } + 80% { + transform: skewX(-5deg); + opacity: 1; + } - to { - transform: none; - opacity: 1; - } + to { + transform: none; + opacity: 1; + } } .lightSpeedIn { - animation-name: lightSpeedIn; - animation-timing-function: ease-out; + animation-name: lightSpeedIn; + animation-timing-function: ease-out; } @keyframes lightSpeedOut { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - transform: translate3d(100%, 0, 0) skewX(30deg); - opacity: 0; - } + to { + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } } .lightSpeedOut { - animation-name: lightSpeedOut; - animation-timing-function: ease-in; + animation-name: lightSpeedOut; + animation-timing-function: ease-in; } @keyframes rotateIn { - from { - transform-origin: center; - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; - } + from { + transform-origin: center; + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } - to { - transform-origin: center; - transform: none; - opacity: 1; - } + to { + transform-origin: center; + transform: none; + opacity: 1; + } } .rotateIn { - animation-name: rotateIn; + animation-name: rotateIn; } @keyframes rotateInDownLeft { - from { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } + from { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } - to { - transform-origin: left bottom; - transform: none; - opacity: 1; - } + to { + transform-origin: left bottom; + transform: none; + opacity: 1; + } } .rotateInDownLeft { - animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; } @keyframes rotateInDownRight { - from { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } + from { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } - to { - transform-origin: right bottom; - transform: none; - opacity: 1; - } + to { + transform-origin: right bottom; + transform: none; + opacity: 1; + } } .rotateInDownRight { - animation-name: rotateInDownRight; + animation-name: rotateInDownRight; } @keyframes rotateInUpLeft { - from { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } + from { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } - to { - transform-origin: left bottom; - transform: none; - opacity: 1; - } + to { + transform-origin: left bottom; + transform: none; + opacity: 1; + } } .rotateInUpLeft { - animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; } @keyframes rotateInUpRight { - from { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; - } + from { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } - to { - transform-origin: right bottom; - transform: none; - opacity: 1; - } + to { + transform-origin: right bottom; + transform: none; + opacity: 1; + } } .rotateInUpRight { - animation-name: rotateInUpRight; + animation-name: rotateInUpRight; } @keyframes rotateOut { - from { - transform-origin: center; - opacity: 1; - } + from { + transform-origin: center; + opacity: 1; + } - to { - transform-origin: center; - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; - } + to { + transform-origin: center; + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } } .rotateOut { - animation-name: rotateOut; + animation-name: rotateOut; } @keyframes rotateOutDownLeft { - from { - transform-origin: left bottom; - opacity: 1; - } + from { + transform-origin: left bottom; + opacity: 1; + } - to { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } + to { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } } .rotateOutDownLeft { - animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; } @keyframes rotateOutDownRight { - from { - transform-origin: right bottom; - opacity: 1; - } + from { + transform-origin: right bottom; + opacity: 1; + } - to { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } + to { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } } .rotateOutDownRight { - animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; } @keyframes rotateOutUpLeft { - from { - transform-origin: left bottom; - opacity: 1; - } + from { + transform-origin: left bottom; + opacity: 1; + } - to { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } + to { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } } .rotateOutUpLeft { - animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; } @keyframes rotateOutUpRight { - from { - transform-origin: right bottom; - opacity: 1; - } + from { + transform-origin: right bottom; + opacity: 1; + } - to { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; - } + to { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } } .rotateOutUpRight { - animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; } @keyframes hinge { - 0% { - transform-origin: top left; - animation-timing-function: ease-in-out; - } + 0% { + transform-origin: top left; + animation-timing-function: ease-in-out; + } - 20%, 60% { - transform: rotate3d(0, 0, 1, 80deg); - transform-origin: top left; - animation-timing-function: ease-in-out; - } + 20%, + 60% { + transform: rotate3d(0, 0, 1, 80deg); + transform-origin: top left; + animation-timing-function: ease-in-out; + } - 40%, 80% { - transform: rotate3d(0, 0, 1, 60deg); - transform-origin: top left; - animation-timing-function: ease-in-out; - opacity: 1; - } + 40%, + 80% { + transform: rotate3d(0, 0, 1, 60deg); + transform-origin: top left; + animation-timing-function: ease-in-out; + opacity: 1; + } - to { - transform: translate3d(0, 700px, 0); - opacity: 0; - } + to { + transform: translate3d(0, 700px, 0); + opacity: 0; + } } .hinge { - animation-name: hinge; + animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollIn { - from { - opacity: 0; - transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); - } + from { + opacity: 0; + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } - to { - opacity: 1; - transform: none; - } + to { + opacity: 1; + transform: none; + } } .rollIn { - animation-name: rollIn; + animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @keyframes rollOut { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); - } + to { + opacity: 0; + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } } .rollOut { - animation-name: rollOut; + animation-name: rollOut; } @keyframes zoomIn { - from { - opacity: 0; - transform: scale3d(.3, .3, .3); - } + from { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); + } - 50% { - opacity: 1; - } + 50% { + opacity: 1; + } } .zoomIn { - animation-name: zoomIn; + animation-name: zoomIn; } @keyframes zoomInDown { - from { - opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } - 60% { - opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } } .zoomInDown { - animation-name: zoomInDown; + animation-name: zoomInDown; } @keyframes zoomInLeft { - from { - opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } - 60% { - opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } } .zoomInLeft { - animation-name: zoomInLeft; + animation-name: zoomInLeft; } @keyframes zoomInRight { - from { - opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } - 60% { - opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } } .zoomInRight { - animation-name: zoomInRight; + animation-name: zoomInRight; } @keyframes zoomInUp { - from { - opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } + from { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } - 60% { - opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } + 60% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } } .zoomInUp { - animation-name: zoomInUp; + animation-name: zoomInUp; } @keyframes zoomOut { - from { - opacity: 1; - } + from { + opacity: 1; + } - 50% { - opacity: 0; - transform: scale3d(.3, .3, .3); - } + 50% { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); + } - to { - opacity: 0; - } + to { + opacity: 0; + } } .zoomOut { - animation-name: zoomOut; + animation-name: zoomOut; } @keyframes zoomOutDown { - 40% { - opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } + 40% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } - to { - opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); - transform-origin: center bottom; - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } + to { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } } .zoomOutDown { - animation-name: zoomOutDown; + animation-name: zoomOutDown; } @keyframes zoomOutLeft { - 40% { - opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); - } + 40% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + } - to { - opacity: 0; - transform: scale(.1) translate3d(-2000px, 0, 0); - transform-origin: left center; - } + to { + opacity: 0; + transform: scale(0.1) translate3d(-2000px, 0, 0); + transform-origin: left center; + } } .zoomOutLeft { - animation-name: zoomOutLeft; + animation-name: zoomOutLeft; } @keyframes zoomOutRight { - 40% { - opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); - } + 40% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + } - to { - opacity: 0; - transform: scale(.1) translate3d(2000px, 0, 0); - transform-origin: right center; - } + to { + opacity: 0; + transform: scale(0.1) translate3d(2000px, 0, 0); + transform-origin: right center; + } } .zoomOutRight { - animation-name: zoomOutRight; + animation-name: zoomOutRight; } @keyframes zoomOutUp { - 40% { - opacity: 1; - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - } + 40% { + opacity: 1; + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } - to { - opacity: 0; - transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); - transform-origin: center bottom; - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - } + to { + opacity: 0; + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } } .zoomOutUp { - animation-name: zoomOutUp; + animation-name: zoomOutUp; } @keyframes slideInDown { - from { - transform: translate3d(0, -100%, 0); - visibility: visible; - } + from { + transform: translate3d(0, -100%, 0); + visibility: visible; + } - to { - transform: translate3d(0, 0, 0); - } + to { + transform: translate3d(0, 0, 0); + } } .slideInDown { - animation-name: slideInDown; + animation-name: slideInDown; } @keyframes slideInLeft { - from { - transform: translate3d(-100%, 0, 0); - visibility: visible; - } + from { + transform: translate3d(-100%, 0, 0); + visibility: visible; + } - to { - transform: translate3d(0, 0, 0); - } + to { + transform: translate3d(0, 0, 0); + } } .slideInLeft { - animation-name: slideInLeft; + animation-name: slideInLeft; } @keyframes slideInRight { - from { - transform: translate3d(100%, 0, 0); - visibility: visible; - } + from { + transform: translate3d(100%, 0, 0); + visibility: visible; + } - to { - transform: translate3d(0, 0, 0); - } + to { + transform: translate3d(0, 0, 0); + } } .slideInRight { - animation-name: slideInRight; + animation-name: slideInRight; } @keyframes slideInUp { - from { - transform: translate3d(0, 100%, 0); - visibility: visible; - } + from { + transform: translate3d(0, 100%, 0); + visibility: visible; + } - to { - transform: translate3d(0, 0, 0); - } + to { + transform: translate3d(0, 0, 0); + } } .slideInUp { - animation-name: slideInUp; + animation-name: slideInUp; } @keyframes slideOutDown { - from { - transform: translate3d(0, 0, 0); - } + from { + transform: translate3d(0, 0, 0); + } - to { - visibility: hidden; - transform: translate3d(0, 100%, 0); - } + to { + visibility: hidden; + transform: translate3d(0, 100%, 0); + } } .slideOutDown { - animation-name: slideOutDown; + animation-name: slideOutDown; } @keyframes slideOutLeft { - from { - transform: translate3d(0, 0, 0); - } + from { + transform: translate3d(0, 0, 0); + } - to { - visibility: hidden; - transform: translate3d(-100%, 0, 0); - } + to { + visibility: hidden; + transform: translate3d(-100%, 0, 0); + } } .slideOutLeft { - animation-name: slideOutLeft; + animation-name: slideOutLeft; } - @keyframes slideOutRight { - from { - transform: translate3d(0, 0, 0); - } + from { + transform: translate3d(0, 0, 0); + } - to { - visibility: hidden; - transform: translate3d(100%, 0, 0); - } + to { + visibility: hidden; + transform: translate3d(100%, 0, 0); + } } .slideOutRight { - animation-name: slideOutRight; + animation-name: slideOutRight; } @keyframes slideOutUp { - from { - transform: translate3d(0, 0, 0); - } + from { + transform: translate3d(0, 0, 0); + } - to { - visibility: hidden; - transform: translate3d(0, -100%, 0); - } + to { + visibility: hidden; + transform: translate3d(0, -100%, 0); + } } .slideOutUp { - animation-name: slideOutUp; + animation-name: slideOutUp; } // Own animations .greenFade { - animation-name: greenFade; + animation-name: greenFade; } @keyframes greenFade { - from { - background: transparent; - } + from { + background: transparent; + } - to { - background: #81e27d; - } + to { + background: #81e27d; + } } .redFade { - animation-name: redFade; + animation-name: redFade; } @keyframes redFade { - from { - background: transparent; - } + from { + background: transparent; + } - to { - background: #ee5649; - } + to { + background: #ee5649; + } } .redCircleFade { - animation-name: redCircleFade; + animation-name: redCircleFade; } @keyframes redCircleFade { - 0% { - background: transparent; - } + 0% { + background: transparent; + } - 50% { - background: #ee5649; - } + 50% { + background: #ee5649; + } - 100% { - background: transparent; - } + 100% { + background: transparent; + } } -.greenCircleFade, .greenCircleFade td { - animation-name: greenCircleFade; +.greenCircleFade, +.greenCircleFade td { + animation-name: greenCircleFade; } @keyframes greenCircleFade { - 0% { - background: transparent; - } + 0% { + background: transparent; + } - 50% { - background: #81e27d; - } + 50% { + background: #81e27d; + } - 100% { - background: transparent; - } + 100% { + background: transparent; + } } diff --git a/article.scss b/article.scss index dc2fe06..dafe4ad 100755 --- a/article.scss +++ b/article.scss @@ -53,57 +53,9 @@ article { font-size: 1rem; } - strong { - font-weight: 500; - } - - pre { - margin: 1rem 0 1rem 0; - border: 1px solid #ddd; - border-left: 3px solid #25acff; - background: #f4f4f4; - line-height: 1.2rem; - font-size: .8rem; - - code { - background: none; - color: #000; - } - } - - blockquote { - color: #fff; - background: #25acff; - border: 1px solid #0480ce; - padding: 1rem; - border-radius: 5px; - margin: 1.5rem; - - p:last-child { - margin-bottom: 0; - } - - code { - color: inherit; - background: inherit; - } - - a { - color: inherit; - } - } - - code { - font-family: var(--font-family); - font-size: 0.8rem; - color: #23222d; - background: #f4f4f4; - border-radius: 3px; - } - a { - color: var(--link-color); - border-bottom: 1px dotted var(--link-color); + color: var(--link-c); + border-bottom: 1px dotted var(--link-c); &:hover { border-bottom: none; @@ -153,23 +105,23 @@ article { table { border-collapse: collapse; - border: 1px solid var(--box-border); + border: 1px solid var(--bborder); margin: 0 auto; margin-bottom: 1rem; min-width: 90%; th, td { padding: 5px; - border: 1px solid var(--box-border); + border: 1px solid var(--bborder); } th { - background: var(--table-head-background); - color: var(--table-head-color); + background: var(--thead-bg); + color: var(--thead-c); } tr:nth-child(2n) td { - background: var(--table-row-background); + background: var(--trow-bg); } } } \ No newline at end of file diff --git a/blockquote.scss b/blockquote.scss deleted file mode 100755 index 31692b0..0000000 --- a/blockquote.scss +++ /dev/null @@ -1,13 +0,0 @@ -pre { - border: 1px solid var(--box-border); - background: #ccc; - padding: 1rem; - box-sizing: border-box; -} - -blockquote { - border: 1px solid var(--box-border); - background: #ccc; - padding: 1rem; - box-sizing: border-box; -} diff --git a/breadcrumb.scss b/breadcrumb.scss index c7531bf..f53f6a7 100755 --- a/breadcrumb.scss +++ b/breadcrumb.scss @@ -6,14 +6,12 @@ li { background: #fff; - border-left: 1px solid var(--box-border); - border-top: 1px solid var(--box-border); - border-bottom: 1px solid var(--box-border); + border-left: 1px solid var(--bborder); + border-top: 1px solid var(--bborder); + border-bottom: 1px solid var(--bborder); padding: 0 10px 0 20px; height: 2.5rem; position: relative; - display: block; - float: left; display: inline-flex; align-items: center; cursor: pointer; @@ -37,35 +35,35 @@ } &:before { - border-left-color: var(--box-border); + border-left-color: var(--bborder); margin-left: 1px; z-index: 1; } &.active:after, &:hover:after { - color: var(--text-on-background-color-2); + color: var(--txt-on-bg-c-2); } &.active:after { - border-left: 14px solid var(--button-colored-background); + border-left: 14px solid var(--btn-c-bg); } &:hover:after { - border-left: 14px solid var(--button-colored-background-hover); + border-left: 14px solid var(--btn-c-bg-hover); } } .active { cursor: default; - background: var(--button-colored-background); + background: var(--btn-c-bg); } .active, li:hover { - color: var(--text-on-background-color-2); + color: var(--txt-on-bg-c-2); } li:hover { - background: var(--button-colored-background-hover); + background: var(--btn-c-bg-hover); } } @@ -86,15 +84,15 @@ } &.active:not(:last-child):after, &:hover:not(:last-child):after { - color: var(--text-on-background-color-2); + color: var(--txt-on-bg-c-2); } &.active:not(:last-child):after { - border-left: 14px solid var(--button-colored-background); + border-left: 14px solid var(--btn-c-bg); } &:hover:not(:last-child):after { - border-left: 14px solid var(--button-colored-background-hover); + border-left: 14px solid var(--btn-c-bg-hover); } } diff --git a/button.scss b/button.scss index 7c9d21a..6f65378 100755 --- a/button.scss +++ b/button.scss @@ -1,19 +1,18 @@ -.btn, .link { +.btn, .link, [data-href] { cursor: pointer; - user-select: none; } button, input[type="submit"], input[type="reset"], input[type="button"], label.button, a.button { cursor: pointer; display: inline-flex; min-width: 70px; - background: var(--button-colored-background); - color: var(--text-on-background-color-2); + background: var(--btn-c-bg); + color: var(--txt-on-bg-c-2); padding: 0 1rem 0 1rem; flex-grow: 0; height: 30px; //border: none; - border: 1px solid var(--box-border); + border: 1px solid var(--bborder); box-shadow: none; justify-content: center; align-items: center; @@ -29,17 +28,8 @@ button, input[type="submit"], input[type="reset"], input[type="button"], label.b } &:hover { - background: var(--button-colored-background-hover); - color: var(--text-on-background-color-2); - } -} - -button.save, .button.save, input[type="submit"].save { - color: rgba(0, 0, 0, 0.75); - background: var(--button-colored-background); - - &:hover, &:focus { - background: var(--button-colored-background); + background: var(--btn-c-bg-hover); + color: var(--txt-on-bg-c-2); } } @@ -62,10 +52,10 @@ button.cancel, .button.cancel, input[type="submit"].cancel { button.close, .button.close, input[type="submit"].close, input[type="reset"].close { color: rgba(0, 0, 0, 0.75); - background: #fffc3e; + background: #ffde5b; &:hover, &:focus { - background: #fffd7b; + background: #ffe682; } } @@ -80,7 +70,7 @@ button.disabled, .button.disabled, input[type="submit"].disabled { } .link.default { - color: var(--button-colored-background); + color: var(--btn-c-bg); } .link.save { diff --git a/clean.scss b/clean.scss index 0510e6d..22051e7 100755 --- a/clean.scss +++ b/clean.scss @@ -32,8 +32,6 @@ input, select, textarea, .textarea, button { outline: none; } - -webkit-appearance: none; - -moz-appearance: none; appearance: none; border-radius: 0; } diff --git a/colors.scss b/colors.scss index 086be36..888e3c6 100644 --- a/colors.scss +++ b/colors.scss @@ -1,34 +1,34 @@ -.highlight-1 { - background: var(--color-red); +.hl-1 { + background: var(--color-red) !important; color: #fff; } -.highlight-2 { - background: var(--color-green); +.hl-2 { + background: var(--color-green) !important; color: #fff; } -.highlight-3 { - background: var(--color-blue); +.hl-3 { + background: var(--color-blue) !important; color: #fff; } -.highlight-4 { - background: var(--color-yellow); +.hl-4 { + background: var(--color-yellow) !important; color: #000; } -.highlight-5 { - background: var(--color-purple); +.hl-5 { + background: var(--color-purple) !important; color: #fff; } -.highlight-6 { - background: var(--color-pink); +.hl-6 { + background: var(--color-pink) !important; color: #fff; } -.highlight-7 { - background: var(--color-orange); +.hl-7 { + background: var(--color-orange) !important; color: #fff; } \ No newline at end of file diff --git a/cookie_consent.scss b/cookie_consent.scss index 6be10a6..2fb17cb 100644 --- a/cookie_consent.scss +++ b/cookie_consent.scss @@ -1,16 +1,16 @@ -#cookie_consent_checkbox { +#cookie_cc { display: none; - &:checked #cookieConsentForm { + &:checked #cookieCF { display: none; } - &:not(:checked) + #cookieConsentForm { + &:not(:checked) + #cookieCF { display: flex; } } -#cookieConsentForm { +#cookieCF { position: fixed; width: 100%; height: 100%; @@ -25,16 +25,16 @@ display: none; } - #cookieConsentForm_simple label, .button, input[type=submit], - #cookieConsentForm_cutomize label, .button, input[type=submit] + #cookieCF_simple label, .button, input[type=submit], + #cookieCF_c label, .button, input[type=submit] { margin: 0; } .secondary { background: none; - border: 2px solid var(--button-background); - color: var(--button-background) !important; + border: 2px solid var(--btn-bg); + color: var(--btn-bg) !important; } .consent_element { @@ -43,25 +43,25 @@ form { background : #fff; - border: 1px solid var(--box-border); + border: 1px solid var(--bborder); display: inline-block; padding: 1rem; border-radius: 3px; } } -#cookieConsentForm_defaultbuttons, -#cookieConsentForm_customizedbuttons { +#cookieCF_db, +#cookieCF_cb { display: flex; flex-direction: row; gap: 10px; margin-top: 1rem; } -#cookieConsentForm_simple + div, #cookieConsentForm_cutomize + div { +#cookieCF_simple + div, #cookieCF_c + div { display: none; } -#cookieConsentForm_simple:checked + div, #cookieConsentForm_cutomize:checked + div { +#cookieCF_simple:checked + div, #cookieCF_c:checked + div { display: block; } \ No newline at end of file diff --git a/default.scss b/default.scss index 0e4f5ca..d17d9d9 100755 --- a/default.scss +++ b/default.scss @@ -2,23 +2,73 @@ clear: both; } -pre { - font-family: var(--font-family); +p { + margin: 0 0 10px 0; + line-height: 1.4em; + + span { + margin: 0; + padding: 0; + } + + +p { + margin-top: 5px; + } +} + +blockquote { + color: #fff; + background: #25acff; + border: 1px solid rgba(0, 0, 0, 0.4); + padding: 1rem; + border-radius: 5px; + margin: 1.5rem; + + p:last-child { + margin-bottom: 0; + } + + code { + color: inherit; + background: inherit; + } + + a { + color: inherit; + } +} + +pre, code { + font-family: var(--ff); + font-size: .8rem; background: #f4f4f4; + color: #000; +} + +code { + border-radius: 3px; + padding: .2rem .4rem .2rem .4rem; +} + +pre { + margin: 1rem 0 1rem 0; + line-height: 1.2rem; border: 1px solid #ddd; padding: 1rem; overflow-x: auto; - counter-reset: line; width: 100%; box-sizing: border-box; - white-space:pre-wrap; + white-space: pre-wrap; + border-left: 3px solid #25acff; - span { + code { + padding: 0; + } + + > span { display: block; &:before { - counter-increment: line; - content: counter(line); display: inline-block; border-right: 1px solid #ddd; padding: 0 .5em; @@ -29,10 +79,15 @@ pre { } } +strong { + font-weight: 500; + font-weight: bold; +} + iframe { padding: 0; margin: 0; - border:none; + border: none; width: 100%; } @@ -48,6 +103,33 @@ iframe { outline: 0; } +.p, +.max, .min, .close, .cancel, .filter, .ok, .search, .abort, .sort { + cursor: pointer; +} + +.nobreak, .nowrap { + white-space: nowrap; +} + +.center { + margin: 0 auto; +} + +.pAlignTable { + display: table; + width: 100%; +} + +.vCenterTable { + display: table-cell; + vertical-align: middle; +} + +.overflowfix { + overflow: auto; +} + .rp { position: relative; } @@ -102,15 +184,6 @@ iframe { vertical-align: middle; } -.n-wrap { - white-space: nowrap; -} - -.p, -.max, .min, .close, .cancel, .filter, .ok, .search, .abort, .sort { - cursor: pointer; -} - .vC { display: table-cell; vertical-align: middle; @@ -123,4 +196,4 @@ iframe { .x-overflow { overflow-x: auto; -} \ No newline at end of file +} diff --git a/form.scss b/form.scss index 5358733..c55f15c 100755 --- a/form.scss +++ b/form.scss @@ -14,7 +14,7 @@ form { label { font-size: .9rem; - color: rgba(0, 0, 0, 80); + color: rgba(0, 0, 0, 1.0); } i+i { diff --git a/grid.scss b/grid.scss index 9e4ff8e..db684b1 100755 --- a/grid.scss +++ b/grid.scss @@ -257,7 +257,7 @@ // is >= sm @media only screen and (min-width: 48em) { .sm-hidden { - display: block; + display: revert; } .container { @@ -453,7 +453,7 @@ } .md-hidden { - display: block; + display: revert; } .container { @@ -639,7 +639,7 @@ // is >= lg @media only screen and (min-width: 75em) { .lg-hidden { - display: block; + display: revert; } .container { diff --git a/icon.scss b/icon.scss deleted file mode 100755 index f3ce6a1..0000000 --- a/icon.scss +++ /dev/null @@ -1,27 +0,0 @@ - - -.infoIcon { - width: var(--badge-size); - text-align: center; - vertical-align: middle; - position: relative; - cursor: pointer; - - span { - font-size: .55rem; - display: block; - position: absolute; - right: -.55rem; - top: -.45rem; - width: .9rem; - height: var(--badge-size); - line-height: var(--badge-size); - border-radius: 50%; - text-align: center; - padding: .15rem; - - color: var(--badge-color); - background: var(--badge-background); - } -} - diff --git a/image.scss b/image.scss index a3b1716..221d91d 100755 --- a/image.scss +++ b/image.scss @@ -1,16 +1,14 @@ - - img { &.frame-1 { padding: 1rem; background: #fff; - border: 1px solid var(--box-border); + border: 1px solid var(--bborder); box-sizing: border-box; width: 100%; } &.frame-2 { - border: 1px solid var(--box-border); + border: 1px solid var(--bborder); background: #fff; box-sizing: border-box; width: 100%; @@ -22,11 +20,11 @@ img { } &.bordered { - border: 1px solid var(--box-border);; + border: 1px solid var(--bborder);; } } -.image-comparison { +.img-comp { margin-left: 3rem; position: relative; display: inline-block; diff --git a/input.scss b/input.scss index 75c4d96..8f04ae5 100755 --- a/input.scss +++ b/input.scss @@ -1,26 +1,20 @@ input, select, textarea, .textarea, option { - font-family: var(--font-family); + font-family: var(--ff); font-weight: 300; } -input[type=checkbox] ~ .checked-visibility { - display: none; -} - -input[type=checkbox]:checked ~ .checked-visibility { - display: inline-block; -} - -input[type=checkbox] ~ .checked-visibility-alt { - display: inline-block; -} - +input[type=checkbox] ~ .checked-visibility, input[type=checkbox]:checked ~ .checked-visibility-alt { display: none; } +input[type=checkbox]:checked ~ .checked-visibility, +input[type=checkbox] ~ .checked-visibility-alt { + display: inline-block; +} + input, select, textarea, .textarea { - border: 1px solid var(--input-border); + border: 1px solid var(--iborder); &.undecorated { padding: 0; @@ -54,19 +48,19 @@ input[type="date"], input[type="number"], input[type="datetime-local"] { box-sizing: border-box; - color: var(--input-color); - background: var(--input-background); + color: var(--ipt-c); + background: var(--ipt-bg); width: 100%; //min-width: 70px; max-width: 100%; font-size: .9rem; - border: 1px solid var(--input-border); + border: 1px solid var(--iborder); transition: background 0.3s, border 0.3s; &:focus, .active, &:active { - border-color: var(--input-background-active); - border: 1px solid var(--input-border-active); - color: var(--input-color-active); + border-color: var(--ipt-bg-active); + border: 1px solid var(--iborder-active); + color: var(--ipt-c-active); } &:disabled, &:readonly { @@ -93,43 +87,43 @@ input[type="datetime-local"] { .inputWithIcon { position: relative; - .frontIcon, .endIcon { - color: var(--input-icon-color); + .frontIco, .endIco { + color: var(--ipt-ico-c); font-size: 1rem; position: absolute; padding: .5rem; font-weight: 200; } - .frontIcon { + .frontIco { left: 0; top: 0; } - .endIcon { + .endIco { right: 0; top: 0; } - .frontIcon + input[type="text"], .frontIcon + input[type="password"] { + .frontIco + input[type="text"], .frontIco + input[type="password"] { padding-left: 2.5rem; } input[type=text]:active, input[type=text]:focus, input[type=password]:active, input[type=password]:focus { - border: 1px solid var(--input-border-active); - color: var(--text-on-background-color); + border: 1px solid var(--iborder-active); + color: var(--txt-on-bg-c); } - input[type=text]:active~.frontIcon, input[type=text]:focus~.frontIcon, - input[type=password]:active~.frontIcon, input[type=password]:focus~.frontIcon, - input[type=text]:active~.endIcon, input[type=text]:focus~.endIcon, - input[type=password]:active~.endIcon, input[type=password]:focus~.endIcon { - color: var(--input-icon-color-active); + input[type=text]:active~.frontIco, input[type=text]:focus~.frontIco, + input[type=password]:active~.frontIco, input[type=password]:focus~.frontIco, + input[type=text]:active~.endIco, input[type=text]:focus~.endIco, + input[type=password]:active~.endIco, input[type=password]:focus~.endIco { + color: var(--ipt-ico-c-active); } - input[type=text]~.endIcon, input[type=text]~.endIcon, - input[type=password]~.endIcon, input[type=password]~.endIcon { + input[type=text]~.endIco, input[type=text]~.endIco, + input[type=password]~.endIco, input[type=password]~.endIco { cursor: pointer; } } @@ -138,14 +132,33 @@ input[type="datetime-local"] { display: inline-flex; flex-direction: row; - .textWrapper+input[type=submit], .textWrapper+input[type=button], .textWrapper+button { + .txtWrap+input[type=submit], .txtWrap+input[type=button], .txtWrap+button { margin: 0; padding: 0; flex: 0; box-shadow: none; } - .textWrapper { + .frontIco, .endIco { + color: var(--ipt-ico-c); + font-size: 1.1rem; + font-weight: 200; + position: absolute; + top: 0; + padding: .25rem .6rem .6rem .4rem; + } + + .frontIco { + left: 0; + font-size: 1.5rem; + } + + .endIco { + right: 0; + font-size: 1.5rem; + } + + .txtWrap { flex: 1; position: relative; @@ -153,45 +166,26 @@ input[type="datetime-local"] { padding-left: 2rem; } - .frontIcon, .endIcon { - color: var(--input-icon-color); - font-size: 1.1rem; - font-weight: 200; - position: absolute; - top: 0; - padding: .25rem .6rem .6rem .4rem; - } - - .frontIcon { - left: 0; - font-size: 1.5rem; - } - - .endIcon { - right: 0; - font-size: 1.5rem; - } - input[type=text]:active, input[type=text]:focus, input[type=password]:active, input[type=password]:focus { - border: 1px solid var(--input-border-active); + border: 1px solid var(--iborder-active); } - input[type=text]:active~.frontIcon, input[type=text]:focus~.frontIcon, - input[type=password]:active~.frontIcon, input[type=password]:focus~.frontIcon, - input[type=text]:active~.endIcon, input[type=text]:focus~.endIcon, - input[type=password]:active~.endIcon, input[type=password]:focus~.endIcon { - color: var(--input-icon-color-active); + input[type=text]:active~.frontIco, input[type=text]:focus~.frontIco, + input[type=password]:active~.frontIco, input[type=password]:focus~.frontIco, + input[type=text]:active~.endIco, input[type=text]:focus~.endIco, + input[type=password]:active~.endIco, input[type=password]:focus~.endIco { + color: var(--ipt-ico-c-active); } - input[type=text]~.endIcon, input[type=text]~.endIcon, - input[type=password]~.endIcon, input[type=password]~.endIcon { + input[type=text]~.endIco, input[type=text]~.endIco, + input[type=password]~.endIco, input[type=password]~.endIco { cursor: pointer; } } } -.advancedInput, .clickPopup { +.advIpt, .clickPopup { //position: relative; /* position: relative; uncomment! otherwise the drop down inside would not be able to overflow and add a scroll bar to the container which is not desired in this case! */ } @@ -201,7 +195,7 @@ input[type="datetime-local"] { display: none; } - label + input { + label + input, input[type="checkbox"] { display: none; } @@ -229,7 +223,6 @@ input[type="datetime-local"] { align-items: center; margin: .5rem 0 .5rem 0; white-space: nowrap; - } } @@ -242,8 +235,6 @@ input[type="datetime-local"] { } input[type="checkbox"] { - display: none; - &:checked + ul { .expand { transition: all .3s ease; @@ -315,17 +306,17 @@ option { } input[type="file"] { - border: 1px solid var(--input-border-active); + border: 1px solid var(--iborder-active); width: 100%; max-width: 100%; - color: var(--input-color); + color: var(--ipt-c); padding: 10px; box-sizing: border-box; } input::placeholder { font-family: 'FontAwesome', serif; - color: var(--input-icon-color); + color: var(--ipt-ico-c); opacity: 0.5; } @@ -371,7 +362,7 @@ label.radio, label.checkbox { cursor: pointer; &:checked ~ .checkmark { - background-color: var(--button-colored-background); + background-color: var(--btn-c-bg); } &:required ~ .checkmark, &:disabled ~ .checkmark, &:readonly ~ .checkmark { @@ -389,7 +380,7 @@ label.radio, label.checkbox { width: 15px; margin-right: 5px; background-color: #eee; - border: 1px solid var(--input-border-active); + border: 1px solid var(--iborder-active); &:after { content: ""; @@ -439,7 +430,7 @@ input[type="range"] { width: 100%; min-width: 150px; height: 5px; - background: var(--button-colored-background); + background: var(--btn-c-bg); cursor: pointer; } @@ -453,13 +444,13 @@ input[type="range"] { button { box-sizing: border-box; // display: inline-block; If I add this, icons in a button are no longer centered - background: var(--button-colored-background); + background: var(--btn-c-bg); height: 30px; font-size: 1rem; min-width: 40px; - border-left: solid 1px var(--input-border); - border-top: solid 1px var(--input-border); - border-bottom: solid 1px var(--input-border); + border-left: solid 1px var(--iborder); + border-top: solid 1px var(--iborder); + border-bottom: solid 1px var(--iborder); border-right: none; padding: 0; @@ -469,7 +460,7 @@ input[type="range"] { flex-shrink: 0; &:hover, &:focus { - background: var(--button-colored-background-hover); + background: var(--btn-c-bg-hover); } &.inactive { @@ -526,34 +517,6 @@ select.plain { user-select: none; } - .dropdown-closed { - display: flex; - height: 100%; - align-items: center; - - label { - display: none; - } - - input { - display: none; - - &:checked+label { - display: flex; - align-items: center; - } - } - } - - .dropdown-container { - display: none; - z-index: 2; - - label { - padding: .5rem; - } - } - & > input { display: none; @@ -573,4 +536,32 @@ select.plain { } } } +} + +.dropdown-closed { + display: flex; + height: 100%; + align-items: center; + + label { + display: none; + } + + input { + display: none; + + &:checked+label { + display: flex; + align-items: center; + } + } +} + +.dropdown-container { + display: none; + z-index: 2; + + label { + padding: .5rem; + } } \ No newline at end of file diff --git a/layout.scss b/layout.scss index 12e4b65..3edfc65 100755 --- a/layout.scss +++ b/layout.scss @@ -3,16 +3,17 @@ vertical-align: top; box-sizing: border-box; - .ipt-first { - width: 100%; + .ipt-start, .ipt-second, .ipt-first { display: table-cell; vertical-align: inherit; } + .ipt-first { + width: 100%; + } + .ipt-second { padding-left: .75rem; - display: table-cell; - vertical-align: inherit; } } @@ -95,6 +96,11 @@ div.sticky, section.sticky { .form-group, .flex-line { flex-direction: column; } + + .form-group .input-control+.input-control { + margin-top: 1rem; + margin-left: 0; + } } @each $tuple in diff --git a/link.scss b/link.scss index 68cc247..37ebcc2 100755 --- a/link.scss +++ b/link.scss @@ -2,13 +2,9 @@ font-weight: bold; } -[data-href] { - cursor: pointer; -} - .portlet-body a:not(.button), a.content, a .content { - color: var(--link-color); - border-bottom: 1px dotted var(--link-color); + color: var(--link-c); + border-bottom: 1px dotted var(--link-c); &:hover { border-bottom: 1px dotted transparent ; diff --git a/list.scss b/list.scss index 429e532..276e22e 100755 --- a/list.scss +++ b/list.scss @@ -1,62 +1,64 @@ -ul.boxed { - background: #fff; - padding: 5px; - border: 1px solid var(--box-border); +ul { + &.boxed { + background: #fff; + padding: 5px; + border: 1px solid var(--bborder); - li { - margin: 5px 0 5px 0; + li { + margin: 5px 0 5px 0; - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; + } - &:last-child { - margin-bottom: 0; - } - } -} - -ul.h-list li { - display: inline-block; - margin: 5px 10px 5px 10px; -} - -ul.foldable { - list-style-type: none; - margin: 0; - padding: 0; - - input[type="checkbox"] { - display: none; - } - - .caret { - cursor: pointer; - user-select: none; - - &::before { - content: "\25B6"; - color: black; - display: inline-block; - margin-right: 6px; + &:last-child { + margin-bottom: 0; + } } } - .nested { - display: none; + &.h-list li { + display: inline-block; + margin: 5px 10px 5px 10px; } - input[type="checkbox"]:checked { - &~.nested { - display: block; - } - - &~.caret::before { - transform: rotate(90deg); - } - } - - ul { + &.foldable { list-style-type: none; + margin: 0; + padding: 0; + + ul { + margin-left: 1rem; + } + + input[type="checkbox"], .nested { + display: none; + } + + .caret { + cursor: pointer; + user-select: none; + + &::before { + content: "\25B6"; + color: black; + display: inline-block; + margin-right: 6px; + } + } + + input[type="checkbox"]:checked { + &~.nested { + display: block; + } + + &~.caret::before { + transform: rotate(90deg); + } + } + + ul { + list-style-type: none; + } } -} +} \ No newline at end of file diff --git a/media.scss b/media.scss deleted file mode 100755 index e69de29..0000000 diff --git a/menu.scss b/menu.scss index f0b97d5..5fb75da 100755 --- a/menu.scss +++ b/menu.scss @@ -1,4 +1,4 @@ -.context-menu { +.ctx-menu { position: absolute; background: #fff; border: 1px solid #ccc; @@ -8,9 +8,9 @@ padding: .5rem; width: 100%; box-sizing: border-box; - } - label:hover { - background: var(--table-row-background-hover); + &:hover { + background: var(--trow-bg-hover); + } } } \ No newline at end of file diff --git a/nav.scss b/nav.scss index f1e3509..20b98c4 100755 --- a/nav.scss +++ b/nav.scss @@ -1,141 +1,3 @@ - - -body > nav { - width: 250px; - overflow-y: auto; - font-size: 0.8em; - background: var(--nav-category-background); - color: rgba(255, 255, 255, 0.8); - flex-shrink: 0; - display: flex; - flex-direction: column; - user-select: none; -} - -#nav-side-outer { - overflow-y: auto; - height: 100%; - user-select: none; - scrollbar-color: var(--button-colored-background) var(--nav-category-background); - scrollbar-width: thin; - - &::-webkit-scrollbar { - width: 7px; - } - - &::-webkit-scrollbar-thumb { - background: var(--button-colored-background); - } - - &::-webkit-scrollbar-track { - background: var(--nav-category-background); - } -} - -#nav-side-inner { - flex: 0; - display: flex; - flex-flow: column; - box-sizing: border-box; - border-top: 1px solid #4b5055; - - span { - flex-grow: 1; - } - - input { - display: none; - - &:checked + ul { - .expand { - transition: all .3s ease; - display: inherit; - transform: rotateZ(90deg); - } - - > li:nth-child(n+2) { - display: inherit; - } - } - } - - input + ul { - .expand { - transition: all .3s ease; - transform: rotateZ(0deg); - } - - > li:nth-child(n+2) { - display: none; - } - } - - label { - display: flex; - align-items: center; - padding: .3rem .5rem .3rem .5rem; - cursor: pointer; - } - - > li { - display: block; - - a { - display: block; - padding: .5rem .75rem .5rem .75rem; - border-left: 3px solid transparent; - - &:hover, &:focus { - background: var(--nav-sub-background-hover); - border-left: 3px solid var(--nav-sub-background-highlight); - } - } - - li { - &:not(:first-child) { - background: var(--nav-sub-background); - } - - a { - &:hover, &.active, &:focus { - background: var(--nav-category-background-hover); - } - } - } - - - li:first-child { - border-bottom: 1px solid #212628; - } - - li:first-child { - border-top: 1px solid #4b5055; - } - } - - > li:first-child { - li:first-child { - border-top: none; - } - } - - i { - flex-grow: 0; - - &+span { - margin-left: 5px; - } - } -} - -.nav-trigger { - position: absolute; - - &:checked + nav { - width: 0%; - } -} - .nav-top { user-select: none; margin-top: 1rem; @@ -144,7 +6,7 @@ body > nav { > li { > a { //box-shadow: 0 0 3px 1px rgba(90, 71, 114, 0.3); - border: 1px solid var(--box-border); + border: 1px solid var(--bborder); margin-right: .5rem; display: inline-block; padding: 10px 10px; @@ -160,7 +22,7 @@ body > nav { &:hover, &.active, &:focus { background: var(--nav-content-hover); - color: var(--text-on-background-color-2); + color: var(--txt-on-bg-c-2); > ul { display: block; @@ -195,27 +57,32 @@ body > nav { } } -#nav-trigger { +.nav-trigger { + position: absolute; display: none; + + &:checked + nav { + width: 0%; + } } -@media only screen and (max-width: 800px) { - #nav-trigger:not(:checked) + nav { +@media only screen and (max-width: 62em) { + .nav-trigger:not(:checked) + nav { width: 0%; } - #nav-trigger:checked + nav { + .nav-trigger:checked + nav { width: auto; min-width: 250px; } } -@media only screen and (max-width: 500px) { - #nav-trigger:checked + nav { - width: 100%; +@media only screen and (max-width: 48em) { + .nav-trigger:checked + nav { + width: 100% !important; } - #nav-trigger:checked ~ main { - display: none; + .nav-trigger:checked ~ main { + display: none !important; } } \ No newline at end of file diff --git a/pagination.scss b/pagination.scss index 6f229e9..940d373 100755 --- a/pagination.scss +++ b/pagination.scss @@ -1,16 +1,13 @@ - - .pagination { - li { + li, a { display: inline-block; + } - &+li { - margin-left: .5rem; - } + li+li { + margin-left: .5rem; } a { - display: inline-block; border-radius: 3px; background: #ccc; padding: 5px 10px 5px 10px; diff --git a/portlet.scss b/portlet.scss index 0e3063d..88ad8e9 100755 --- a/portlet.scss +++ b/portlet.scss @@ -1,104 +1,55 @@ .portlet { - border: 1px solid var(--box-border); + border: 1px solid var(--bborder); box-sizing: border-box; margin-top: 1rem; + background: #fff; +} - .portlet-head { - background: #fff; - border-bottom: 1px solid #ebedf2; - padding: .7rem 1rem .7rem 1rem; - font-weight: 300; - display: flex; +.portlet-head, .portlet-foot { + padding: .7rem 1rem .7rem 1rem; + display: flex; +} - &> span { - display: inline-flex; - align-items: center; +.hl-1, .hl-2, .hl-3, .hl-4, .hl-5, .hl-6, .hl-7 { + .portlet-body, .portlet-head { + border: 0; + } +} - > a { - display: inherit; - } - } +.portlet-head { + font-weight: 300; - form { - margin-left: 1rem; + > span { + display: inline-flex; + align-items: center; + + > a { + display: inherit; } } - .portlet-foot { - background: #fff; - border-top: 1px solid #ebedf2; - padding: .7rem 1rem .7rem 1rem; - box-sizing: border-box; - display: flex; - flex-wrap: wrap; - column-gap: .5rem; + form { + margin-left: 1rem; } +} - .portlet-body > h2 { - border-bottom: 1px solid #ebedf2; - } +.portlet-body { + padding: 1rem; +} - .portlet-separator { - border-bottom: 1px solid #ebedf2; - } +.portlet-body > h2, .portlet-separator, .portlet-head { + border-bottom: 1px solid #ebedf2; +} - &.highlight-1 { - .portlet-body, .portlet-head { - background: var(--color-red); - border: 0; - } - } - - &.highlight-2 { - .portlet-body, .portlet-head { - background: var(--color-green); - border: 0; - } - } - - &.highlight-3 { - .portlet-body, .portlet-head { - background: var(--color-blue); - border: 0; - } - } - - &.highlight-4 { - .portlet-body, .portlet-head { - background: var(--color-yellow); - border: 0; - } - } - - &.highlight-5 { - .portlet-body, .portlet-head { - background: var(--color-purple); - border: 0; - } - } - - &.highlight-6 { - .portlet-body, .portlet-head { - background: var(--color-pink); - border: 0; - } - } - - &.highlight-7 { - .portlet-body, .portlet-head { - background: var(--color-orange); - border: 0; - } - } +.portlet-foot { + border-top: 1px solid #ebedf2; + box-sizing: border-box; + flex-wrap: wrap; + column-gap: .5rem; } .plain-portlet { box-sizing: border-box; margin-top: 1rem; overflow-x: auto; -} - -.portlet-body { - background: #fff; - padding: 1rem; -} +} \ No newline at end of file diff --git a/print.css b/print.css new file mode 100644 index 0000000..d54553d --- /dev/null +++ b/print.css @@ -0,0 +1,2 @@ +body,main{background:none !important}body,#content,main{overflow:revert !important;height:auto}main>header,#nav-side-outer,body>nav,.nav-top{display:none !important}h1,h2,h3,h4,h5,ul{page-break-after:avoid}img{break-before:auto;break-after:auto;break-inside:avoid;display:block}code,ul,blockquote{break-inside:avoid}ul li{page-break-before:avoid;page-break-after:avoid}p{widows:4;orphans:3}.pH{display:none}.portlet{border:none !important}table,figure{page-break-inside:auto}.pagebreak{page-break-after:always;display:block} +/*# sourceMappingURL=print.css.map */ diff --git a/print.scss b/print.scss new file mode 100644 index 0000000..bde4827 --- /dev/null +++ b/print.scss @@ -0,0 +1,54 @@ +body, main { + background: none !important; +} + +body, #content, main { + overflow: revert !important; + height: auto; +} + +main > header, #nav-side-outer, body > nav, .nav-top { + display: none !important; +} + +h1, h2, h3, h4, h5, ul { + page-break-after: avoid; +} + +img { + break-before: auto; + break-after: auto; + break-inside: avoid; + display: block; +} + +code, ul, blockquote { + break-inside: avoid; +} + +ul li { + page-break-before: avoid; + page-break-after: avoid; +} + +p { + widows: 4; + orphans: 3; +} + +.pH { + display: none; +} + +.portlet { + border: none !important; +} + +table, figure { + page-break-inside: auto; +} + +.pagebreak { + page-break-after: always; + display: block; +} \ No newline at end of file diff --git a/progress.scss b/progress.scss index b6eb1d0..7fa1f8e 100755 --- a/progress.scss +++ b/progress.scss @@ -7,72 +7,63 @@ display: block; height: 100%; border-radius: 3px; - background-color: rgb(43,194,83); + background-color: #459442; background-image: linear-gradient( to left top, - color-stop(0, rgb(43,194,83)), - color-stop(1, rgb(84,240,84))); + color-stop(0, #459442), + color-stop(1, #81e27d)); position: relative; overflow: hidden; } &.orange > span { background-color: #f1a165; - background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); - background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a)); - background-image: -webkit-linear-gradient(#f1a165, #f36d0a); + background-image: linear-gradient(#f1a165, #f36d0a); } &.blue > span { - background-color: #96c2f1; - background-image: -moz-linear-gradient(top, #96c2f1, #4394f3); - background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #96c2f1),color-stop(1, #4394f3)); - background-image: -webkit-linear-gradient(#96c2f1, #4394f3); + background-color: #85b0ee; + background-image: linear-gradient(#85b0ee, #4865a5); } &.red > span { - background-color: #f0a3a3; - background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); - background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323)); - background-image: -webkit-linear-gradient(#f0a3a3, #f42323); + background-color: #ee5649; + background-image: linear-gradient(#ee5649, #a5302a); } -} -.meter > span:after, .animate > span > span { - content: ""; - position: absolute; - top: 0; left: 0; bottom: 0; right: 0; - background-image: - -webkit-gradient(linear, 0 0, 100% 100%, + > span:after, .animate > span > span { + content: ""; + position: absolute; + top: 0; left: 0; bottom: 0; right: 0; + background-image: + linear-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) - ); - background-image: - -moz-linear-gradient( - -45deg, - rgba(255, 255, 255, .2) 25%, - transparent 25%, - transparent 50%, - rgba(255, 255, 255, .2) 50%, - rgba(255, 255, 255, .2) 75%, - transparent 75%, - transparent - ); - z-index: 1; - -webkit-background-size: 50px 50px; - -moz-background-size: 50px 50px; - -webkit-animation: move 4s linear infinite; - overflow: hidden; + ); + background-image: + linear-gradient( + -45deg, + rgba(255, 255, 255, .2) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, .2) 50%, + rgba(255, 255, 255, .2) 75%, + transparent 75%, + transparent + ); + z-index: 1; + overflow: hidden; + } } .animate > span:after { display: none; } -@-webkit-keyframes move { +@keyframes move { 0% { background-position: 0 0; } @@ -82,101 +73,10 @@ } .noanimation > span > span, .noanimation > span:after { - -webkit-animation: none; + animation: none; } .nostripes > span > span, .nostripes > span:after { - -webkit-animation: none; + animation: none; background-image: none; } - -.timeline { - list-style: none; - margin: 0 0 30px 120px; - padding-left: 30px; - border-left: 3px solid #eaeaea; - - li { - margin: 0; - position: relative; - } - - p { - margin: 0 0 15px; - } -} - -.timeline-date { - margin-top: -18px; - top: 50%; - left: -150px; - font-size: 0.95em; - line-height: 20px; - position: absolute; - padding: 5px 10px 5px 10px; - border: 1px solid #ccc; -} - -.timeline-circle { - margin-top: -10px; - top: 50%; - left: -40px; - width: 10px; - height: 10px; - background: tomato; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; -} - -.timeline-circle-start { - margin-top: 0; - top: 0; - left: -45px; - width: 20px; - height: 20px; - background: #fff; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; -} - -.timeline-circle-end { - margin-top: 0; - top: 100%; - left: -45px; - width: 20px; - height: 20px; - background: #fff; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; -} - -.timeline-content { - padding: 50px 20px 0; - border-radius: 0.5em; - position: relative; -} - -.timeline-content p { - text-align: justify; -} - -.timeline label { - font-size: 1.3em; - position: absolute; - z-index: 90; - top: 20px; -} - -.timeline-radio { - display: none; -} - -.timeline-break { - display: none; -} diff --git a/section.scss b/section.scss index 16a6438..6b1594e 100755 --- a/section.scss +++ b/section.scss @@ -29,12 +29,6 @@ display: inline-block; } -section.box { - background: #fff; - //box-shadow: 0 0 3px 1px rgba(90, 71, 114, 0.3); - border: 1px solid var(--box-border); -} - section { header { > h1 { @@ -50,15 +44,14 @@ section { font-size: 1.2em; margin-bottom: 5px; } + + &.box { + background: #fff; + //box-shadow: 0 0 3px 1px rgba(90, 71, 114, 0.3); + border: 1px solid var(--bborder); + } } .pagebreak { display: none; } - -@media print { - .pagebreak { - page-break-after: always; - display: block; - } -} \ No newline at end of file diff --git a/slider.scss b/slider.scss index 99d6aeb..67ca634 100755 --- a/slider.scss +++ b/slider.scss @@ -19,7 +19,7 @@ 100% { left: -400%; } } -div.slider-1 { +.slider-1 { overflow: hidden; figure { diff --git a/spinner.scss b/spinner.scss index e5e960f..2ef2218 100755 --- a/spinner.scss +++ b/spinner.scss @@ -2,29 +2,20 @@ width: 40px; height: 40px; background-color: #333; - margin: 50px auto; - -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } -@-webkit-keyframes sk-rotateplane { - 0% { -webkit-transform: perspective(120px) } - 50% { -webkit-transform: perspective(120px) rotateY(180deg) } - 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } +@keyframes sk-rotateplane { + 0% { transform: perspective(120px); } + 50% { transform: perspective(120px) rotateY(180deg); } + 100% { transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } @keyframes sk-rotateplane { - 0% { - transform: perspective(120px) rotateX(0deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) - } 50% { - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) - } 100% { - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - } + 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } + 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } + 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } .spinner-2 { @@ -34,36 +25,28 @@ width: 18px; height: 18px; background-color: #333; - border-radius: 100%; + border-radius: 100%; display: inline-block; - -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .bounce1 { - -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .bounce2 { - -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } } -@-webkit-keyframes sk-bouncedelay { - 0%, 80%, 100% { -webkit-transform: scale(0) } - 40% { -webkit-transform: scale(1.0) } +@keyframes sk-bouncedelay { + 0%, 80%, 100% { transform: scale(0); } + 40% { transform: scale(1.0); } } @keyframes sk-bouncedelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); - } 40% { - -webkit-transform: scale(1.0); - transform: scale(1.0); - } + 0%, 80%, 100% { transform: scale(0); } + 40% { transform: scale(1.0); } } .spinner-3 { @@ -73,25 +56,22 @@ background-color: #333; border-radius: 100%; - -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; } -@-webkit-keyframes sk-scaleout { - 0% { -webkit-transform: scale(0) } +@keyframes sk-scaleout { + 0% { transform: scale(0) } 100% { - -webkit-transform: scale(1.0); + transform: scale(1.0); opacity: 0; } } @keyframes sk-scaleout { 0% { - -webkit-transform: scale(0); transform: scale(0); } 100% { - -webkit-transform: scale(1.0); - transform: scale(1.0); - opacity: 0; - } + transform: scale(1.0); + opacity: 0; + } } diff --git a/styles.css b/styles.css index 720a961..8cb64a5 100755 --- a/styles.css +++ b/styles.css @@ -1,4015 +1,2 @@ -html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label { - margin: 0; - padding: 0; } - -a, img, button { - outline: none; } - -a { - color: inherit; - text-decoration: none; } - -h1, h2, h3, h4, h5, h6 { - font-weight: 300; } - -ul { - list-style: none; } - -th { - font-weight: 300; } - -input, select, textarea, .textarea, button { - box-sizing: border-box; - box-shadow: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; } - input:focus, select:focus, textarea:focus, .textarea:focus, button:focus { - outline: none; } - -input[type=checkbox] { - margin-right: 5px; } - -button::-moz-focus-inner { - border: 0; } - -table { - border-collapse: separate; - border-spacing: 0; } - -i { - font-style: normal; } - -.clear { - clear: both; } - -pre { - font-family: var(--font-family); - background: #f4f4f4; - border: 1px solid #ddd; - padding: 1rem; - overflow-x: auto; - counter-reset: line; - width: 100%; - box-sizing: border-box; - white-space: pre-wrap; } - pre span { - display: block; } - pre span:before { - counter-increment: line; - content: counter(line); - display: inline-block; - border-right: 1px solid #ddd; - padding: 0 .5em; - margin-right: .5em; - color: #888; - width: 30px; } - -iframe { - padding: 0; - margin: 0; - border: none; - width: 100%; } - -.clean { - margin: 0; - padding: 0; - border: none; - outline: 0; - vertical-align: top; } - -.clean:focus { - outline: 0; } - -.rp { - position: relative; } - -.ap { - position: absolute; } - -.lf { - float: left; } - -.rf { - float: right; } - -.op { - margin: 0 auto; } - -.rT { - text-align: right; } - -.lT { - text-align: left; } - -.cT { - text-align: center; } - -.f-w { - width: 100%; - max-width: none; } - -.f-h { - height: 100%; - max-height: none; } - -.vT { - vertical-align: top; } - -.vB { - vertical-align: bottom; } - -.vM { - vertical-align: middle; } - -.n-wrap { - white-space: nowrap; } - -.p, -.max, .min, .close, .cancel, .filter, .ok, .search, .abort, .sort { - cursor: pointer; } - -.vC { - display: table-cell; - vertical-align: middle; - white-space: nowrap; } - -.vh { - display: none !important; } - -.x-overflow { - overflow-x: auto; } - -.nobreak, .nowrap { - white-space: nowrap; } - -.center { - margin: 0 auto; } - -.centerText { - text-align: center; } - -.rightText { - text-align: right; } - -.floatLeft { - float: left; } - -.floatRight { - float: right; } - -.pAlignTable { - display: table; - width: 100%; } - -.vCenterTable { - display: table-cell; - vertical-align: middle; } - -.h-overflow { - overflow-x: auto; } - -.overflowfix { - overflow: auto; } - -.hidden { - display: none !important; } - -/*! - * animate.css -http://daneden.me/animate - * Version - 3.5.1 - * Licensed under the MIT license - http://opensource.org/licenses/MIT - * - * Copyright (c) 2016 Daniel Eden - */ -.animated { - animation-duration: 0.5s; - animation-fill-mode: both; } - -.animated.infinite { - animation-iteration-count: infinite; } - -.animated.hinge { - animation-duration: 2s; } - -.animated.medium-duration { - animation-duration: 2s; } - -.animated.flipOutX, -.animated.flipOutY, -.animated.bounceIn, -.animated.bounceOut { - animation-duration: .75s; } - -@keyframes bounce { - from, 20%, 53%, 80%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transform: translate3d(0, 0, 0); } - 40%, 43% { - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transform: translate3d(0, -30px, 0); } - 70% { - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transform: translate3d(0, -15px, 0); } - 90% { - transform: translate3d(0, -4px, 0); } } -.bounce { - animation-name: bounce; - transform-origin: center bottom; } - -@keyframes flash { - from, 50%, to { - opacity: 1; } - 25%, 75% { - opacity: 0; } } -.flash { - animation-name: flash; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@keyframes pulse { - from { - transform: scale3d(1, 1, 1); } - 50% { - transform: scale3d(1.05, 1.05, 1.05); } - to { - transform: scale3d(1, 1, 1); } } -.pulse { - animation-name: pulse; } - -@keyframes heartBeat { - 0% { - transform: scale(1); } - 14% { - transform: scale(1.3); } - 28% { - transform: scale(1); } - 42% { - transform: scale(1.3); } - 70% { - transform: scale(1); } } -.heartBeat { - animation-name: heartBeat; - animation-duration: calc(var(--animate-duration) * 1.3); - animation-timing-function: ease-in-out; } - -@keyframes rubberBand { - from { - transform: scale3d(1, 1, 1); } - 30% { - transform: scale3d(1.25, 0.75, 1); } - 40% { - transform: scale3d(0.75, 1.25, 1); } - 50% { - transform: scale3d(1.15, 0.85, 1); } - 65% { - transform: scale3d(0.95, 1.05, 1); } - 75% { - transform: scale3d(1.05, 0.95, 1); } - to { - transform: scale3d(1, 1, 1); } } -.rubberBand { - animation-name: rubberBand; } - -@keyframes shake { - from, to { - transform: translate3d(0, 0, 0); } - 10%, 30%, 50%, 70%, 90% { - transform: translate3d(-10px, 0, 0); } - 20%, 40%, 60%, 80% { - transform: translate3d(10px, 0, 0); } } -.shake { - animation-name: shake; } - -@keyframes headShake { - 0% { - transform: translateX(0); } - 6.5% { - transform: translateX(-6px) rotateY(-9deg); } - 18.5% { - transform: translateX(5px) rotateY(7deg); } - 31.5% { - transform: translateX(-3px) rotateY(-5deg); } - 43.5% { - transform: translateX(2px) rotateY(3deg); } - 50% { - transform: translateX(0); } } -.headShake { - animation-timing-function: ease-in-out; - animation-name: headShake; } - -@keyframes swing { - 20% { - transform: rotate3d(0, 0, 1, 15deg); } - 40% { - transform: rotate3d(0, 0, 1, -10deg); } - 60% { - transform: rotate3d(0, 0, 1, 5deg); } - 80% { - transform: rotate3d(0, 0, 1, -5deg); } - to { - transform: rotate3d(0, 0, 1, 0deg); } } -.swing { - transform-origin: top center; - animation-name: swing; } - -@keyframes tada { - from { - transform: scale3d(1, 1, 1); } - 10%, 20% { - transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } - 30%, 50%, 70%, 90% { - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } - 40%, 60%, 80% { - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } - to { - transform: scale3d(1, 1, 1); } } -.tada { - animation-name: tada; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@keyframes wobble { - from { - transform: none; } - 15% { - transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } - 30% { - transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } - 45% { - transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } - 60% { - transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } - 75% { - transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } - to { - transform: none; } } -.wobble { - animation-name: wobble; } - -@keyframes jello { - from, 11.1%, to { - transform: none; } - 22.2% { - transform: skewX(-12.5deg) skewY(-12.5deg); } - 33.3% { - transform: skewX(6.25deg) skewY(6.25deg); } - 44.4% { - transform: skewX(-3.125deg) skewY(-3.125deg); } - 55.5% { - transform: skewX(1.5625deg) skewY(1.5625deg); } - 66.6% { - transform: skewX(-0.78125deg) skewY(-0.78125deg); } - 77.7% { - transform: skewX(0.390625deg) skewY(0.390625deg); } - 88.8% { - transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } -.jello { - animation-name: jello; - transform-origin: center; } - -@keyframes bounceIn { - from, 20%, 40%, 60%, 80%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); } - 20% { - transform: scale3d(1.1, 1.1, 1.1); } - 40% { - transform: scale3d(0.9, 0.9, 0.9); } - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); } - 80% { - transform: scale3d(0.97, 0.97, 0.97); } - to { - opacity: 1; - transform: scale3d(1, 1, 1); } } -.bounceIn { - animation-name: bounceIn; } - -@keyframes bounceInDown { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { - opacity: 0; - transform: translate3d(0, -3000px, 0); } - 60% { - opacity: 1; - transform: translate3d(0, 25px, 0); } - 75% { - transform: translate3d(0, -10px, 0); } - 90% { - transform: translate3d(0, 5px, 0); } - to { - transform: none; } } -.bounceInDown { - animation-name: bounceInDown; } - -@keyframes bounceInLeft { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { - opacity: 0; - transform: translate3d(-3000px, 0, 0); } - 60% { - opacity: 1; - transform: translate3d(25px, 0, 0); } - 75% { - transform: translate3d(-10px, 0, 0); } - 90% { - transform: translate3d(5px, 0, 0); } - to { - transform: none; } } -.bounceInLeft { - animation-name: bounceInLeft; } - -@keyframes bounceInRight { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - from { - opacity: 0; - transform: translate3d(3000px, 0, 0); } - 60% { - opacity: 1; - transform: translate3d(-25px, 0, 0); } - 75% { - transform: translate3d(10px, 0, 0); } - 90% { - transform: translate3d(-5px, 0, 0); } - to { - transform: none; } } -.bounceInRight { - animation-name: bounceInRight; } - -@keyframes bounceInUp { - from, 60%, 75%, 90%, to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - from { - opacity: 0; - transform: translate3d(0, 3000px, 0); } - 60% { - opacity: 1; - transform: translate3d(0, -20px, 0); } - 75% { - transform: translate3d(0, 10px, 0); } - 90% { - transform: translate3d(0, -5px, 0); } - to { - transform: translate3d(0, 0, 0); } } -.bounceInUp { - animation-name: bounceInUp; } - -@keyframes bounceOut { - 20% { - transform: scale3d(0.9, 0.9, 0.9); } - 50%, 55% { - opacity: 1; - transform: scale3d(1.1, 1.1, 1.1); } - to { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); } } -.bounceOut { - animation-name: bounceOut; } - -@keyframes bounceOutDown { - 20% { - transform: translate3d(0, 10px, 0); } - 40%, 45% { - opacity: 1; - transform: translate3d(0, -20px, 0); } - to { - opacity: 0; - transform: translate3d(0, 2000px, 0); } } -.bounceOutDown { - animation-name: bounceOutDown; } - -@keyframes bounceOutLeft { - 20% { - opacity: 1; - transform: translate3d(20px, 0, 0); } - to { - opacity: 0; - transform: translate3d(-2000px, 0, 0); } } -.bounceOutLeft { - animation-name: bounceOutLeft; } - -@keyframes bounceOutRight { - 20% { - opacity: 1; - transform: translate3d(-20px, 0, 0); } - to { - opacity: 0; - transform: translate3d(2000px, 0, 0); } } -.bounceOutRight { - animation-name: bounceOutRight; } - -@keyframes bounceOutUp { - 20% { - transform: translate3d(0, -10px, 0); } - 40%, 45% { - opacity: 1; - transform: translate3d(0, 20px, 0); } - to { - opacity: 0; - transform: translate3d(0, -2000px, 0); } } -.bounceOutUp { - animation-name: bounceOutUp; } - -@keyframes fadeIn { - from { - opacity: 0; } - to { - opacity: 1; } } -.fadeIn { - animation-name: fadeIn; } - -@keyframes fadeInDown { - from { - opacity: 0; - transform: translate3d(0, -100%, 0); } - to { - opacity: 1; - transform: none; } } -.fadeInDown { - animation-name: fadeInDown; } - -@keyframes fadeInDownBig { - from { - opacity: 0; - transform: translate3d(0, -2000px, 0); } - to { - opacity: 1; - transform: none; } } -.fadeInDownBig { - animation-name: fadeInDownBig; } - -@keyframes fadeInLeft { - from { - opacity: 0; - transform: translate3d(-100%, 0, 0); } - to { - opacity: 1; - transform: none; } } -.fadeInLeft { - animation-name: fadeInLeft; } - -@keyframes fadeInLeftBig { - from { - opacity: 0; - transform: translate3d(-2000px, 0, 0); } - to { - opacity: 1; - transform: none; } } -.fadeInLeftBig { - animation-name: fadeInLeftBig; } - -@keyframes fadeInRight { - from { - opacity: 0; - transform: translate3d(100%, 0, 0); } - to { - opacity: 1; - transform: none; } } -.fadeInRight { - animation-name: fadeInRight; } - -@keyframes fadeInRightBig { - from { - opacity: 0; - transform: translate3d(2000px, 0, 0); } - to { - opacity: 1; - transform: none; } } -.fadeInRightBig { - animation-name: fadeInRightBig; } - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translate3d(0, 100%, 0); } - to { - opacity: 1; - transform: none; } } -.fadeInUp { - animation-name: fadeInUp; } - -@keyframes fadeInUpBig { - from { - opacity: 0; - transform: translate3d(0, 2000px, 0); } - to { - opacity: 1; - transform: none; } } -.fadeInUpBig { - animation-name: fadeInUpBig; } - -@keyframes fadeOut { - from { - opacity: 1; } - to { - opacity: 0; } } -.fadeOut { - animation-name: fadeOut; } - -@keyframes fadeOutDown { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(0, 100%, 0); } } -.fadeOutDown { - animation-name: fadeOutDown; } - -@keyframes fadeOutDownBig { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(0, 2000px, 0); } } -.fadeOutDownBig { - animation-name: fadeOutDownBig; } - -@keyframes fadeOutLeft { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(-100%, 0, 0); } } -.fadeOutLeft { - animation-name: fadeOutLeft; } - -@keyframes fadeOutLeftBig { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(-2000px, 0, 0); } } -.fadeOutLeftBig { - animation-name: fadeOutLeftBig; } - -@keyframes fadeOutRight { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(100%, 0, 0); } } -.fadeOutRight { - animation-name: fadeOutRight; } - -@keyframes fadeOutRightBig { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(2000px, 0, 0); } } -.fadeOutRightBig { - animation-name: fadeOutRightBig; } - -@keyframes fadeOutUp { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(0, -100%, 0); } } -.fadeOutUp { - animation-name: fadeOutUp; } - -@keyframes fadeOutUpBig { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(0, -2000px, 0); } } -.fadeOutUpBig { - animation-name: fadeOutUpBig; } - -@keyframes flip { - from { - transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - animation-timing-function: ease-out; } - 40% { - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); - animation-timing-function: ease-out; } - 50% { - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); - animation-timing-function: ease-in; } - 80% { - transform: perspective(400px) scale3d(0.95, 0.95, 0.95); - animation-timing-function: ease-in; } - to { - transform: perspective(400px); - animation-timing-function: ease-in; } } -.animated.flip { - backface-visibility: visible; - animation-name: flip; } - -@keyframes flipInX { - from { - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - animation-timing-function: ease-in; - opacity: 0; } - 40% { - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - animation-timing-function: ease-in; } - 60% { - transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - opacity: 1; } - 80% { - transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } - to { - transform: perspective(400px); } } -.flipInX { - backface-visibility: visible !important; - animation-name: flipInX; } - -@keyframes flipInY { - from { - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - animation-timing-function: ease-in; - opacity: 0; } - 40% { - transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - animation-timing-function: ease-in; } - 60% { - transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - opacity: 1; } - 80% { - transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } - to { - transform: perspective(400px); } } -.flipInY { - backface-visibility: visible !important; - animation-name: flipInY; } - -@keyframes flipOutX { - from { - transform: perspective(400px); } - 30% { - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - opacity: 1; } - to { - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - opacity: 0; } } -.flipOutX { - animation-name: flipOutX; - backface-visibility: visible !important; } - -@keyframes flipOutY { - from { - transform: perspective(400px); } - 30% { - transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - opacity: 1; } - to { - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - opacity: 0; } } -.flipOutY { - backface-visibility: visible !important; - animation-name: flipOutY; } - -@keyframes lightSpeedIn { - from { - transform: translate3d(100%, 0, 0) skewX(-30deg); - opacity: 0; } - 60% { - transform: skewX(20deg); - opacity: 1; } - 80% { - transform: skewX(-5deg); - opacity: 1; } - to { - transform: none; - opacity: 1; } } -.lightSpeedIn { - animation-name: lightSpeedIn; - animation-timing-function: ease-out; } - -@keyframes lightSpeedOut { - from { - opacity: 1; } - to { - transform: translate3d(100%, 0, 0) skewX(30deg); - opacity: 0; } } -.lightSpeedOut { - animation-name: lightSpeedOut; - animation-timing-function: ease-in; } - -@keyframes rotateIn { - from { - transform-origin: center; - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; } - to { - transform-origin: center; - transform: none; - opacity: 1; } } -.rotateIn { - animation-name: rotateIn; } - -@keyframes rotateInDownLeft { - from { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } - to { - transform-origin: left bottom; - transform: none; - opacity: 1; } } -.rotateInDownLeft { - animation-name: rotateInDownLeft; } - -@keyframes rotateInDownRight { - from { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } - to { - transform-origin: right bottom; - transform: none; - opacity: 1; } } -.rotateInDownRight { - animation-name: rotateInDownRight; } - -@keyframes rotateInUpLeft { - from { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } - to { - transform-origin: left bottom; - transform: none; - opacity: 1; } } -.rotateInUpLeft { - animation-name: rotateInUpLeft; } - -@keyframes rotateInUpRight { - from { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; } - to { - transform-origin: right bottom; - transform: none; - opacity: 1; } } -.rotateInUpRight { - animation-name: rotateInUpRight; } - -@keyframes rotateOut { - from { - transform-origin: center; - opacity: 1; } - to { - transform-origin: center; - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; } } -.rotateOut { - animation-name: rotateOut; } - -@keyframes rotateOutDownLeft { - from { - transform-origin: left bottom; - opacity: 1; } - to { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } } -.rotateOutDownLeft { - animation-name: rotateOutDownLeft; } - -@keyframes rotateOutDownRight { - from { - transform-origin: right bottom; - opacity: 1; } - to { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } } -.rotateOutDownRight { - animation-name: rotateOutDownRight; } - -@keyframes rotateOutUpLeft { - from { - transform-origin: left bottom; - opacity: 1; } - to { - transform-origin: left bottom; - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } } -.rotateOutUpLeft { - animation-name: rotateOutUpLeft; } - -@keyframes rotateOutUpRight { - from { - transform-origin: right bottom; - opacity: 1; } - to { - transform-origin: right bottom; - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; } } -.rotateOutUpRight { - animation-name: rotateOutUpRight; } - -@keyframes hinge { - 0% { - transform-origin: top left; - animation-timing-function: ease-in-out; } - 20%, 60% { - transform: rotate3d(0, 0, 1, 80deg); - transform-origin: top left; - animation-timing-function: ease-in-out; } - 40%, 80% { - transform: rotate3d(0, 0, 1, 60deg); - transform-origin: top left; - animation-timing-function: ease-in-out; - opacity: 1; } - to { - transform: translate3d(0, 700px, 0); - opacity: 0; } } -.hinge { - animation-name: hinge; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@keyframes rollIn { - from { - opacity: 0; - transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } - to { - opacity: 1; - transform: none; } } -.rollIn { - animation-name: rollIn; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@keyframes rollOut { - from { - opacity: 1; } - to { - opacity: 0; - transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } -.rollOut { - animation-name: rollOut; } - -@keyframes zoomIn { - from { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); } - 50% { - opacity: 1; } } -.zoomIn { - animation-name: zoomIn; } - -@keyframes zoomInDown { - from { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 60% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } -.zoomInDown { - animation-name: zoomInDown; } - -@keyframes zoomInLeft { - from { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 60% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } -.zoomInLeft { - animation-name: zoomInLeft; } - -@keyframes zoomInRight { - from { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 60% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } -.zoomInRight { - animation-name: zoomInRight; } - -@keyframes zoomInUp { - from { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 60% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } -.zoomInUp { - animation-name: zoomInUp; } - -@keyframes zoomOut { - from { - opacity: 1; } - 50% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); } - to { - opacity: 0; } } -.zoomOut { - animation-name: zoomOut; } - -@keyframes zoomOutDown { - 40% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - to { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - transform-origin: center bottom; - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } -.zoomOutDown { - animation-name: zoomOutDown; } - -@keyframes zoomOutLeft { - 40% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } - to { - opacity: 0; - transform: scale(0.1) translate3d(-2000px, 0, 0); - transform-origin: left center; } } -.zoomOutLeft { - animation-name: zoomOutLeft; } - -@keyframes zoomOutRight { - 40% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } - to { - opacity: 0; - transform: scale(0.1) translate3d(2000px, 0, 0); - transform-origin: right center; } } -.zoomOutRight { - animation-name: zoomOutRight; } - -@keyframes zoomOutUp { - 40% { - opacity: 1; - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - to { - opacity: 0; - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - transform-origin: center bottom; - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } -.zoomOutUp { - animation-name: zoomOutUp; } - -@keyframes slideInDown { - from { - transform: translate3d(0, -100%, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } -.slideInDown { - animation-name: slideInDown; } - -@keyframes slideInLeft { - from { - transform: translate3d(-100%, 0, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } -.slideInLeft { - animation-name: slideInLeft; } - -@keyframes slideInRight { - from { - transform: translate3d(100%, 0, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } -.slideInRight { - animation-name: slideInRight; } - -@keyframes slideInUp { - from { - transform: translate3d(0, 100%, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } -.slideInUp { - animation-name: slideInUp; } - -@keyframes slideOutDown { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(0, 100%, 0); } } -.slideOutDown { - animation-name: slideOutDown; } - -@keyframes slideOutLeft { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(-100%, 0, 0); } } -.slideOutLeft { - animation-name: slideOutLeft; } - -@keyframes slideOutRight { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(100%, 0, 0); } } -.slideOutRight { - animation-name: slideOutRight; } - -@keyframes slideOutUp { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(0, -100%, 0); } } -.slideOutUp { - animation-name: slideOutUp; } - -.greenFade { - animation-name: greenFade; } - -@keyframes greenFade { - from { - background: transparent; } - to { - background: #81e27d; } } -.redFade { - animation-name: redFade; } - -@keyframes redFade { - from { - background: transparent; } - to { - background: #ee5649; } } -.redCircleFade { - animation-name: redCircleFade; } - -@keyframes redCircleFade { - 0% { - background: transparent; } - 50% { - background: #ee5649; } - 100% { - background: transparent; } } -.greenCircleFade, .greenCircleFade td { - animation-name: greenCircleFade; } - -@keyframes greenCircleFade { - 0% { - background: transparent; } - 50% { - background: #81e27d; } - 100% { - background: transparent; } } -.container-fluid, -.container { - box-sizing: border-box; } - -.row { - box-sizing: border-box; - display: flex; - flex: 0 1 auto; - flex-direction: row; - flex-wrap: wrap; } - -.col-simple { - flex-direction: column; } - -.row-simple { - flex-direction: row; } - -.col-simple, .row-simple { - display: flex; - flex: 1; - flex-grow: 1; } - .col-simple .row, .row-simple .row { - flex: 1 1 auto; - flex-direction: column; } - .col-simple .col-xs-12, .row-simple .col-xs-12 { - flex-basis: 0; } - -.fill-all { - flex: 1 1 auto; } - -.col { - box-sizing: border-box; - display: flex; - flex: 1 0 auto; - flex-direction: column; - flex-wrap: wrap; - margin-bottom: var(--gutter-compensation, -0.5rem); - margin-left: var(--gutter-compensation, -0.5rem); } - -.xs-col-table, -.md-col-table, -.lg-col-table { - display: none; } - -.xs-hidden, -.sm-hidden, -.md-hidden, -.lg-hidden { - display: none; } - -.col-xs-0 { - box-sizing: border-box; - flex-grow: 0; - padding-right: 1rem; } - -.plain-grid { - padding: 0 !important; } - -.row.reverse { - flex-direction: row-reverse; } - -.col.reverse { - flex-direction: column-reverse; } - -.col-xs, -.col-xs-1, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-10, -.col-xs-11, -.col-xs-12 { - box-sizing: border-box; - padding-right: 1rem; } - -.col-xs { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; } - -.col-xs-1 { - flex-basis: 8.333%; - max-width: 8.333%; } - -.col-xs-2 { - flex-basis: 16.667%; - max-width: 16.667%; } - -.col-xs-3 { - flex-basis: 25%; - max-width: 25%; } - -.col-xs-4 { - flex-basis: 33.333%; - max-width: 33.333%; } - -.col-xs-5 { - flex-basis: 41.667%; - max-width: 41.667%; } - -.col-xs-6 { - flex-basis: 50%; - max-width: 50%; } - -.col-xs-7 { - flex-basis: 58.333%; - max-width: 58.333%; } - -.col-xs-8 { - flex-basis: 66.667%; - max-width: 66.667%; } - -.col-xs-9 { - flex-basis: 75%; - max-width: 75%; } - -.col-xs-10 { - flex-basis: 83.333%; - max-width: 83.333%; } - -.col-xs-11 { - flex-basis: 91.667%; - max-width: 91.667%; } - -.col-xs-12 { - flex-basis: 100%; - max-width: 100%; } - -.col-xs-offset-1 { - margin-left: 8.333%; } - -.col-xs-offset-2 { - margin-left: 16.667%; } - -.col-xs-offset-3 { - margin-left: 25%; } - -.col-xs-offset-4 { - margin-left: 33.333%; } - -.col-xs-offset-5 { - margin-left: 41.667%; } - -.col-xs-offset-6 { - margin-left: 50%; } - -.col-xs-offset-7 { - margin-left: 58.333%; } - -.col-xs-offset-8 { - margin-left: 66.667%; } - -.col-xs-offset-9 { - margin-left: 75%; } - -.col-xs-offset-10 { - margin-left: 83.333%; } - -.col-xs-offset-11 { - margin-left: 91.667%; } - -.start-xs { - justify-content: flex-start; - text-align: start; } - -.center-xs { - justify-content: center; - text-align: center; } - -.right-xs { - margin-left: auto !important; } - -.end-xs { - justify-content: flex-end; - margin-left: auto; } - -.top-xs { - align-items: flex-start; } - -.middle-xs { - align-items: center; } - -.bottom-xs { - align-items: flex-end; } - -.around-xs { - justify-content: space-around; } - -.between-xs { - justify-content: space-between; } - -.first-xs { - order: -1; } - -.last-xs { - order: 1; } - -@media only screen and (min-width: 48em) { - .sm-hidden { - display: block; } - - .container { - width: 46rem; } - - .xs-col-table { - display: inherit; } - - .col-sm, - .col-sm-1, - .col-sm-2, - .col-sm-3, - .col-sm-4, - .col-sm-5, - .col-sm-6, - .col-sm-7, - .col-sm-8, - .col-sm-9, - .col-sm-10, - .col-sm-11, - .col-sm-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 1rem; } - - .col-sm { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; } - - .col-sm-1 { - flex-basis: 8.333%; - max-width: 8.333%; } - - .col-sm-2 { - flex-basis: 16.667%; - max-width: 16.667%; } - - .col-sm-3 { - flex-basis: 25%; - max-width: 25%; } - - .col-sm-4 { - flex-basis: 33.333%; - max-width: 33.333%; } - - .col-sm-5 { - flex-basis: 41.667%; - max-width: 41.667%; } - - .col-sm-6 { - flex-basis: 50%; - max-width: 50%; } - - .col-sm-7 { - flex-basis: 58.333%; - max-width: 58.333%; } - - .col-sm-8 { - flex-basis: 66.667%; - max-width: 66.667%; } - - .col-sm-9 { - flex-basis: 75%; - max-width: 75%; } - - .col-sm-10 { - flex-basis: 83.333%; - max-width: 83.333%; } - - .col-sm-11 { - flex-basis: 91.667%; - max-width: 91.667%; } - - .col-sm-12 { - flex-basis: 100%; - max-width: 100%; } - - .col-sm-offset-1 { - margin-left: 8.333%; } - - .col-sm-offset-2 { - margin-left: 16.667%; } - - .col-sm-offset-3 { - margin-left: 25%; } - - .col-sm-offset-4 { - margin-left: 33.333%; } - - .col-sm-offset-5 { - margin-left: 41.667%; } - - .col-sm-offset-6 { - margin-left: 50%; } - - .col-sm-offset-7 { - margin-left: 58.333%; } - - .col-sm-offset-8 { - margin-left: 66.667%; } - - .col-sm-offset-9 { - margin-left: 75%; } - - .col-sm-offset-10 { - margin-left: 83.333%; } - - .col-sm-offset-11 { - margin-left: 91.667%; } - - .start-sm { - justify-content: flex-start; - text-align: start; } - - .center-sm { - justify-content: center; - text-align: center; } - - .end-sm { - justify-content: flex-end; - text-align: end; } - - .top-sm { - align-items: flex-start; } - - .middle-sm { - align-items: center; } - - .bottom-sm { - align-items: flex-end; } - - .around-sm { - justify-content: space-around; } - - .between-sm { - justify-content: space-between; } - - .first-sm { - order: -1; } - - .last-sm { - order: 1; } } -@media only screen and (min-width: 62em) { - .col-simple .row { - flex-direction: row; } - .col-simple .col-xs-12 { - flex-basis: 100%; } - - .md-hidden { - display: block; } - - .container { - width: 61rem; } - - .md-col-table { - display: inherit; } - - .col-md, - .col-md-1, - .col-md-2, - .col-md-3, - .col-md-4, - .col-md-5, - .col-md-6, - .col-md-7, - .col-md-8, - .col-md-9, - .col-md-10, - .col-md-11, - .col-md-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 1rem; } - - .col-md { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; } - - .col-md-1 { - flex-basis: 8.333%; - max-width: 8.333%; } - - .col-md-2 { - flex-basis: 16.667%; - max-width: 16.667%; } - - .col-md-3 { - flex-basis: 25%; - max-width: 25%; } - - .col-md-4 { - flex-basis: 33.333%; - max-width: 33.333%; } - - .col-md-5 { - flex-basis: 41.667%; - max-width: 41.667%; } - - .col-md-6 { - flex-basis: 50%; - max-width: 50%; } - - .col-md-7 { - flex-basis: 58.333%; - max-width: 58.333%; } - - .col-md-8 { - flex-basis: 66.667%; - max-width: 66.667%; } - - .col-md-9 { - flex-basis: 75%; - max-width: 75%; } - - .col-md-10 { - flex-basis: 83.333%; - max-width: 83.333%; } - - .col-md-11 { - flex-basis: 91.667%; - max-width: 91.667%; } - - .col-md-12 { - flex-basis: 100%; - max-width: 100%; } - - .col-md-offset-1 { - margin-left: 8.333%; } - - .col-md-offset-2 { - margin-left: 16.667%; } - - .col-md-offset-3 { - margin-left: 25%; } - - .col-md-offset-4 { - margin-left: 33.333%; } - - .col-md-offset-5 { - margin-left: 41.667%; } - - .col-md-offset-6 { - margin-left: 50%; } - - .col-md-offset-7 { - margin-left: 58.333%; } - - .col-md-offset-8 { - margin-left: 66.667%; } - - .col-md-offset-9 { - margin-left: 75%; } - - .col-md-offset-10 { - margin-left: 83.333%; } - - .col-md-offset-11 { - margin-left: 91.667%; } - - .start-md { - justify-content: flex-start; - text-align: start; } - - .center-md { - justify-content: center; - text-align: center; } - - .end-md { - justify-content: flex-end; - text-align: end; } - - .top-md { - align-items: flex-start; } - - .middle-md { - align-items: center; } - - .bottom-md { - align-items: flex-end; } - - .around-md { - justify-content: space-around; } - - .between-md { - justify-content: space-between; } - - .first-md { - order: -1; } - - .last-md { - order: 1; } } -@media only screen and (min-width: 75em) { - .lg-hidden { - display: block; } - - .container { - width: 71rem; } - - .lg-col-table { - display: inherit; } - - .col-lg, - .col-lg-1, - .col-lg-2, - .col-lg-3, - .col-lg-4, - .col-lg-5, - .col-lg-6, - .col-lg-7, - .col-lg-8, - .col-lg-9, - .col-lg-10, - .col-lg-11, - .col-lg-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 1rem; } - - .col-lg { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; } - - .col-lg-1 { - flex-basis: 8.333%; - max-width: 8.333%; } - - .col-lg-2 { - flex-basis: 16.667%; - max-width: 16.667%; } - - .col-lg-3 { - flex-basis: 25%; - max-width: 25%; } - - .col-lg-4 { - flex-basis: 33.333%; - max-width: 33.333%; } - - .col-lg-5 { - flex-basis: 41.667%; - max-width: 41.667%; } - - .col-lg-6 { - flex-basis: 50%; - max-width: 50%; } - - .col-lg-7 { - flex-basis: 58.333%; - max-width: 58.333%; } - - .col-lg-8 { - flex-basis: 66.667%; - max-width: 66.667%; } - - .col-lg-9 { - flex-basis: 75%; - max-width: 75%; } - - .col-lg-10 { - flex-basis: 83.333%; - max-width: 83.333%; } - - .col-lg-11 { - flex-basis: 91.667%; - max-width: 91.667%; } - - .col-lg-12 { - flex-basis: 100%; - max-width: 100%; } - - .col-lg-offset-1 { - margin-left: 8.333%; } - - .col-lg-offset-2 { - margin-left: 16.667%; } - - .col-lg-offset-3 { - margin-left: 25%; } - - .col-lg-offset-4 { - margin-left: 33.333%; } - - .col-lg-offset-5 { - margin-left: 41.667%; } - - .col-lg-offset-6 { - margin-left: 50%; } - - .col-lg-offset-7 { - margin-left: 58.333%; } - - .col-lg-offset-8 { - margin-left: 66.667%; } - - .col-lg-offset-9 { - margin-left: 75%; } - - .col-lg-offset-10 { - margin-left: 83.333%; } - - .col-lg-offset-11 { - margin-left: 91.667%; } - - .start-lg { - justify-content: flex-start; - text-align: start; } - - .center-lg { - justify-content: center; - text-align: center; } - - .end-lg { - justify-content: flex-end; - text-align: end; } - - .top-lg { - align-items: flex-start; } - - .middle-lg { - align-items: center; } - - .bottom-lg { - align-items: flex-end; } - - .around-lg { - justify-content: space-around; } - - .between-lg { - justify-content: space-between; } - - .first-lg { - order: -1; } - - .last-lg { - order: 1; } } -.highlight-1 { - background: var(--color-red); - color: #fff; } - -.highlight-2 { - background: var(--color-green); - color: #fff; } - -.highlight-3 { - background: var(--color-blue); - color: #fff; } - -.highlight-4 { - background: var(--color-yellow); - color: #000; } - -.highlight-5 { - background: var(--color-purple); - color: #fff; } - -.highlight-6 { - background: var(--color-pink); - color: #fff; } - -.highlight-7 { - background: var(--color-orange); - color: #fff; } - -.portlet-body > article { - padding: 0; } - -article { - background: #fff; - padding: 10px; - margin: 0; - font-size: .9rem; - color: #000; - line-height: 2rem; - white-space: normal; } - article del, article ins, article mark { - padding: 3px; - text-decoration: none; } - article .tag { - margin: 0.1rem; } - article del { - background: #ff9e9e; } - article ins { - background: #b0f3b0; } - article mark { - background: #f9ffa1; } - article h1, article h2, article h3, article h4, article h5, article h6 { - font-weight: 300; } - article h1 { - font-size: 1.4rem; } - article h2 { - font-size: 1.3rem; } - article h3 { - font-size: 1.1rem; } - article h4, article h5, article h6 { - font-size: 1rem; } - article strong { - font-weight: 500; } - article pre { - margin: 1rem 0 1rem 0; - border: 1px solid #ddd; - border-left: 3px solid #25acff; - background: #f4f4f4; - line-height: 1.2rem; - font-size: .8rem; } - article pre code { - background: none; - color: #000; } - article blockquote { - color: #fff; - background: #25acff; - border: 1px solid #0480ce; - padding: 1rem; - border-radius: 5px; - margin: 1.5rem; } - article blockquote p:last-child { - margin-bottom: 0; } - article blockquote code { - color: inherit; - background: inherit; } - article blockquote a { - color: inherit; } - article code { - font-family: var(--font-family); - font-size: 0.8rem; - color: #23222d; - background: #f4f4f4; - border-radius: 3px; } - article a { - color: var(--link-color); - border-bottom: 1px dotted var(--link-color); } - article a:hover { - border-bottom: none; } - article p { - line-height: 1.5em; } - article ol, article ul { - list-style-position: outside; - margin: 0.5rem 0 0.5rem 3rem; - line-height: 1rem; } - article ul { - list-style: disc; } - article li { - margin: 0.3rem 0 0.3rem 0; - line-height: 1.5em; } - article img { - display: block; - margin: 0 auto; - max-width: 100%; - max-height: 100%; - display: inline-block; } - article img:focus { - margin-left: auto; - margin-right: auto; - left: 0; - right: 0; - text-align: center; - width: auto; - height: auto; } - article img[tabindex="0"] { - cursor: pointer; } - article table { - border-collapse: collapse; - border: 1px solid var(--box-border); - margin: 0 auto; - margin-bottom: 1rem; - min-width: 90%; } - article table th, article table td { - padding: 5px; - border: 1px solid var(--box-border); } - article table th { - background: var(--table-head-background); - color: var(--table-head-color); } - article table tr:nth-child(2n) td { - background: var(--table-row-background); } - -.ipt-wrap { - display: table; - vertical-align: top; - box-sizing: border-box; } - .ipt-wrap .ipt-first { - width: 100%; - display: table-cell; - vertical-align: inherit; } - .ipt-wrap .ipt-second { - padding-left: .75rem; - display: table-cell; - vertical-align: inherit; } - -.flex-line { - display: flex; - flex-direction: row; } - .flex-line + * { - margin-top: .75rem; } - .flex-line > div { - flex: 1; } - .flex-line > div:nth-child(n+2) { - padding-left: .75rem; } - .flex-line > div.fixed { - flex: 0; - flex-basis: auto; } - -div.sticky, section.sticky { - position: sticky; - top: 1rem; } - -.inline { - display: inline; } - -.form-group { - display: flex; - flex-direction: row; - flex-wrap: wrap; } - .form-group > *:not(label) { - flex: 0 1 auto; } - .form-group + * { - margin-top: .75rem; } - .form-group label { - font-size: .9rem; - flex: 0 0 100%; - display: inline-flex; - align-items: center; } - .form-group label > i { - margin-right: .5rem; } - .form-group span.checkbox + span.checkbox { - margin-left: 1.5rem; } - .form-group .input-control { - flex: 1; - display: flex; - flex-direction: row; - flex-wrap: wrap; } - .form-group .input-control + .input-control { - margin-left: 1rem; } - .form-group textarea, .form-group .contenteditable { - height: 8rem; } - -@media (max-width: 768px) { - .form-group, .flex-line { - flex-direction: column; } } -.wf-100 { - width: 100%; } - -.wf-80 { - width: 80%; } - -.wf-20 { - width: 20%; } - -.wf-66 { - width: 66.66%; } - -.wf-50 { - width: 50%; } - -.wf-33 { - width: 33.33%; } - -.wf-25 { - width: 25%; } - -.wf-75 { - width: 75%; } - -.spacer { - padding: 5px; } - -.resizable { - resize: both; - overflow: auto; } - -*[draggable] { - cursor: move; } - -.oms-drag-placeholder, .oms-drag-placeholder td { - border: 2px dashed rgba(0, 0, 0, 0.5) !important; } - -p { - margin: 0 0 10px 0; - line-height: 1.4em; } - p span { - margin: 0; - padding: 0; } - p + p { - margin-top: 5px; } - -.blurry-text { - text-shadow: 0 0 .9rem #000; - color: transparent; } - -.white-3d { - color: #fff; - font-weight: bold; - font-family: sans-serif; - text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15); } - -.rainbow { - background: linear-gradient(90deg, #ab6bff, #9ad5f9 15%, #575df0 35%, #ab6bff 50%, #9ad5f9 65%, #575df0 85%, #ab6bff); - background-size: 200% 100%; - animation: rainbow-gradient 3.5s linear infinite; - backface-visibility: hidden; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; } - -@keyframes rainbow-gradient { - 0% { - background-position: 0; } - 100% { - background-position: -100%; } - 0% { - background-position: 0; } - 100% { - background-position: -100%; } } -.tooltip { - cursor: pointer; - color: var(--box-highlight); - font-size: .9rem; } - .tooltip:hover, .tooltip:active, .tooltip:focus { - position: relative; } - .tooltip:hover:after, .tooltip:hover:before, .tooltip:active:after, .tooltip:active:before, .tooltip:focus:after, .tooltip:focus:before { - font-size: .9rem; - display: block; - position: absolute; - white-space: nowrap; - bottom: 100%; - margin-bottom: 5px; - padding: 7px; - border-radius: 3px; - background-color: #474747; - color: #fff; - content: attr(data-tooltip); - text-align: center; - transform: translate(-45%, 0); } - -.spinner-1 { - width: 40px; - height: 40px; - background-color: #333; - margin: 50px auto; - -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; - animation: sk-rotateplane 1.2s infinite ease-in-out; } - -@-webkit-keyframes sk-rotateplane { - 0% { - -webkit-transform: perspective(120px); } - 50% { - -webkit-transform: perspective(120px) rotateY(180deg); } - 100% { - -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } -@keyframes sk-rotateplane { - 0% { - transform: perspective(120px) rotateX(0deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } - 50% { - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } - 100% { - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } -.spinner-2 { - text-align: center; } - .spinner-2 > div { - width: 18px; - height: 18px; - background-color: #333; - border-radius: 100%; - display: inline-block; - -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; - animation: sk-bouncedelay 1.4s infinite ease-in-out both; } - .spinner-2 .bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; } - .spinner-2 .bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; } - -@-webkit-keyframes sk-bouncedelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); } - 40% { - -webkit-transform: scale(1); } } -@keyframes sk-bouncedelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } -.spinner-3 { - width: 40px; - height: 40px; - margin: 50px auto; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; - animation: sk-scaleout 1.0s infinite ease-in-out; } - -@-webkit-keyframes sk-scaleout { - 0% { - -webkit-transform: scale(0); } - 100% { - -webkit-transform: scale(1); - opacity: 0; } } -@keyframes sk-scaleout { - 0% { - -webkit-transform: scale(0); - transform: scale(0); } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 0; } } -canvas { - background: #fff; - user-select: none; } - canvas.chart { - width: 100%; } - -form li { - margin: 5px 0 5px 0; } -form td { - white-space: nowrap; - padding-bottom: 5px; } - form td textarea + i { - vertical-align: top; } -form label { - font-size: .9rem; - color: black; } -form i + i { - margin-left: 3px; } -form .layout td + td { - padding-left: 5px; } -form .list { - font-size: 1rem; } - form .list td { - white-space: nowrap; - padding: 3px 5px 3px 5px; } - -.infoIcon { - width: var(--badge-size); - text-align: center; - vertical-align: middle; - position: relative; - cursor: pointer; } - .infoIcon span { - font-size: .55rem; - display: block; - position: absolute; - right: -.55rem; - top: -.45rem; - width: .9rem; - height: var(--badge-size); - line-height: var(--badge-size); - border-radius: 50%; - text-align: center; - padding: .15rem; - color: var(--badge-color); - background: var(--badge-background); } - -img.frame-1 { - padding: 1rem; - background: #fff; - border: 1px solid var(--box-border); - box-sizing: border-box; - width: 100%; } -img.frame-2 { - border: 1px solid var(--box-border); - background: #fff; - box-sizing: border-box; - width: 100%; } -img.rounded { - border-radius: 50%; - background: #fff; } -img.bordered { - border: 1px solid var(--box-border); } - -.image-comparison { - margin-left: 3rem; - position: relative; - display: inline-block; - line-height: 0; - overflow: auto; } - .image-comparison img { - user-select: none; } - .image-comparison > div { - position: absolute; - width: 50%; - max-width: 100%; - overflow: hidden; - resize: horizontal; - border-right: 1px solid #000; } - .image-comparison > div:before { - content: ''; - display: block; - width: 13px; - height: 13px; - overflow: hidden; - position: absolute; - resize: horizontal; - right: 0; - bottom: 0; - background-clip: content-box; - background: linear-gradient(-45deg, red 50%, transparent 0); } - -.gallery { - max-width: 80%; - margin: 0 auto; - position: relative; } - .gallery input + .enlarged { - display: none; } - .gallery input:checked + .enlarged { - display: block; } - .gallery .enlarged { - position: absolute; - top: 0; - left: 0; } - .gallery .enlarged img { - max-width: 100%; - max-height: 100%; - object-fit: contain; } - .gallery input { - display: none; } - .gallery input + img { - display: none; } - .gallery input:checked + img { - display: block; - margin: 0 auto; - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; } - .gallery .thumbs img { - width: 100px; - height: 100px; - margin: .3rem; - border: 1px solid #ccc; } - .gallery label { - cursor: pointer; } - -.map-small .map, .olMapViewport { - width: 100%; - height: 100%; - min-height: 250px; - position: relative; } - .map-small .map .olControlAttribution, .olMapViewport .olControlAttribution { - position: absolute; - bottom: 0; - right: 0; - background: #fff; - padding: 2px; - font-size: .8rem; } - .map-small .map .olButton, .olMapViewport .olButton { - color: #fff; } - -input, select, textarea, .textarea, option { - font-family: var(--font-family); - font-weight: 300; } - -input[type=checkbox] ~ .checked-visibility { - display: none; } - -input[type=checkbox]:checked ~ .checked-visibility { - display: inline-block; } - -input[type=checkbox] ~ .checked-visibility-alt { - display: inline-block; } - -input[type=checkbox]:checked ~ .checked-visibility-alt { - display: none; } - -input, select, textarea, .textarea { - border: 1px solid var(--input-border); } - input.undecorated, select.undecorated, textarea.undecorated, .textarea.undecorated { - padding: 0; - border: none; - background: transparent; - resize: none; } - input:active.undecorated, input:focus.undecorated, select:active.undecorated, select:focus.undecorated, textarea:active.undecorated, textarea:focus.undecorated, .textarea:active.undecorated, .textarea:focus.undecorated { - appearance: none; - outline: none; - border-style: none; } - -progress { - height: 20px; - width: 100%; - min-width: 150px; } - -.textarea, -.tag-input, -textarea, -select, -input[type="password"], -input[type="text"], -input[type="datetime"], -input[type="email"], -input[type="date"], -input[type="number"], -input[type="datetime-local"] { - box-sizing: border-box; - color: var(--input-color); - background: var(--input-background); - width: 100%; - max-width: 100%; - font-size: .9rem; - border: 1px solid var(--input-border); - transition: background 0.3s, border 0.3s; } - .textarea:focus, .textarea .active, .textarea:active, - .tag-input:focus, - .tag-input .active, - .tag-input:active, - textarea:focus, - textarea .active, - textarea:active, - select:focus, - select .active, - select:active, - input[type="password"]:focus, - input[type="password"] .active, - input[type="password"]:active, - input[type="text"]:focus, - input[type="text"] .active, - input[type="text"]:active, - input[type="datetime"]:focus, - input[type="datetime"] .active, - input[type="datetime"]:active, - input[type="email"]:focus, - input[type="email"] .active, - input[type="email"]:active, - input[type="date"]:focus, - input[type="date"] .active, - input[type="date"]:active, - input[type="number"]:focus, - input[type="number"] .active, - input[type="number"]:active, - input[type="datetime-local"]:focus, - input[type="datetime-local"] .active, - input[type="datetime-local"]:active { - border-color: var(--input-background-active); - border: 1px solid var(--input-border-active); - color: var(--input-color-active); } - .textarea:disabled, .textarea:readonly, - .tag-input:disabled, - .tag-input:readonly, - textarea:disabled, - textarea:readonly, - select:disabled, - select:readonly, - input[type="password"]:disabled, - input[type="password"]:readonly, - input[type="text"]:disabled, - input[type="text"]:readonly, - input[type="datetime"]:disabled, - input[type="datetime"]:readonly, - input[type="email"]:disabled, - input[type="email"]:readonly, - input[type="date"]:disabled, - input[type="date"]:readonly, - input[type="number"]:disabled, - input[type="number"]:readonly, - input[type="datetime-local"]:disabled, - input[type="datetime-local"]:readonly { - cursor: not-allowed; - background: #efefef; } - -.textarea, -.tag-input, -textarea, -select:not([multiple]), -input[type="password"], -input[type="text"], -input[type="datetime"], -input[type="email"], -input[type="date"], -input[type="number"], -input[type="datetime-local"] { - height: 30px; - padding-left: .5rem; } - -.inputWithIcon { - position: relative; } - .inputWithIcon .frontIcon, .inputWithIcon .endIcon { - color: var(--input-icon-color); - font-size: 1rem; - position: absolute; - padding: .5rem; - font-weight: 200; } - .inputWithIcon .frontIcon { - left: 0; - top: 0; } - .inputWithIcon .endIcon { - right: 0; - top: 0; } - .inputWithIcon .frontIcon + input[type="text"], .inputWithIcon .frontIcon + input[type="password"] { - padding-left: 2.5rem; } - .inputWithIcon input[type=text]:active, .inputWithIcon input[type=text]:focus, - .inputWithIcon input[type=password]:active, .inputWithIcon input[type=password]:focus { - border: 1px solid var(--input-border-active); - color: var(--text-on-background-color); } - .inputWithIcon input[type=text]:active ~ .frontIcon, .inputWithIcon input[type=text]:focus ~ .frontIcon, - .inputWithIcon input[type=password]:active ~ .frontIcon, .inputWithIcon input[type=password]:focus ~ .frontIcon, - .inputWithIcon input[type=text]:active ~ .endIcon, .inputWithIcon input[type=text]:focus ~ .endIcon, - .inputWithIcon input[type=password]:active ~ .endIcon, .inputWithIcon input[type=password]:focus ~ .endIcon { - color: var(--input-icon-color-active); } - .inputWithIcon input[type=text] ~ .endIcon, .inputWithIcon input[type=text] ~ .endIcon, - .inputWithIcon input[type=password] ~ .endIcon, .inputWithIcon input[type=password] ~ .endIcon { - cursor: pointer; } - -.inputWrapper { - display: inline-flex; - flex-direction: row; } - .inputWrapper .textWrapper + input[type=submit], .inputWrapper .textWrapper + input[type=button], .inputWrapper .textWrapper + button { - margin: 0; - padding: 0; - flex: 0; - box-shadow: none; } - .inputWrapper .textWrapper { - flex: 1; - position: relative; } - .inputWrapper .textWrapper i + input { - padding-left: 2rem; } - .inputWrapper .textWrapper .frontIcon, .inputWrapper .textWrapper .endIcon { - color: var(--input-icon-color); - font-size: 1.1rem; - font-weight: 200; - position: absolute; - top: 0; - padding: .25rem .6rem .6rem .4rem; } - .inputWrapper .textWrapper .frontIcon { - left: 0; - font-size: 1.5rem; } - .inputWrapper .textWrapper .endIcon { - right: 0; - font-size: 1.5rem; } - .inputWrapper .textWrapper input[type=text]:active, .inputWrapper .textWrapper input[type=text]:focus, - .inputWrapper .textWrapper input[type=password]:active, .inputWrapper .textWrapper input[type=password]:focus { - border: 1px solid var(--input-border-active); } - .inputWrapper .textWrapper input[type=text]:active ~ .frontIcon, .inputWrapper .textWrapper input[type=text]:focus ~ .frontIcon, - .inputWrapper .textWrapper input[type=password]:active ~ .frontIcon, .inputWrapper .textWrapper input[type=password]:focus ~ .frontIcon, - .inputWrapper .textWrapper input[type=text]:active ~ .endIcon, .inputWrapper .textWrapper input[type=text]:focus ~ .endIcon, - .inputWrapper .textWrapper input[type=password]:active ~ .endIcon, .inputWrapper .textWrapper input[type=password]:focus ~ .endIcon { - color: var(--input-icon-color-active); } - .inputWrapper .textWrapper input[type=text] ~ .endIcon, .inputWrapper .textWrapper input[type=text] ~ .endIcon, - .inputWrapper .textWrapper input[type=password] ~ .endIcon, .inputWrapper .textWrapper input[type=password] ~ .endIcon { - cursor: pointer; } - -.advancedInput, .clickPopup { - /* position: relative; uncomment! otherwise the drop down inside would not be able to overflow and add a scroll bar to the container which is not desired in this case! */ } - -.clickPopup > input { - display: none; } -.clickPopup label + input { - display: none; } -.clickPopup .more-functions { - padding: 0 1rem 0 1rem; } -.clickPopup .popup { - box-sizing: border-box; - padding: .5rem 1rem .5rem 1rem; - background: #fff; - box-shadow: 0 0 3px 1px rgba(72, 71, 114, 0.3); - right: 0; } - .clickPopup .popup ul { - width: 100%; } - .clickPopup .popup > ul { - display: flex; - flex-direction: column; } - .clickPopup .popup > ul > li { - display: flex; - align-items: center; - margin: .5rem 0 .5rem 0; - white-space: nowrap; } - .clickPopup .popup .button { - margin-right: 1rem; } - .clickPopup .popup span { - flex-grow: 1; } - .clickPopup .popup input[type="checkbox"] { - display: none; } - .clickPopup .popup input[type="checkbox"]:checked + ul .expand { - transition: all .3s ease; - display: inherit; - transform: rotateZ(90deg); } - .clickPopup .popup input[type="checkbox"]:checked + ul > li:nth-child(n+2) { - display: inherit; } - .clickPopup .popup input + ul .expand { - font-size: .9rem; - transition: all .3s ease; - transform: rotateZ(0deg); } - .clickPopup .popup input + ul > li:nth-child(n+2) { - display: none; } - .clickPopup .popup label { - display: flex; - align-items: center; - cursor: pointer; } - .clickPopup .popup > li { - display: block; } - .clickPopup .popup > li a { - display: block; - /* - &:hover, &:focus { - } - */ } - .clickPopup .popup i { - flex-grow: 0; } - -input ~ .popup { - position: absolute; - /* All other options e.g. static, relative resize the container which is bad */ - display: none; - z-index: 3; } - -/* In the past we also used input:focus ~ .popup this is a problem because clicking on something e.g. close button will not close the popup since it is still focused. */ -input:checked ~ .popup, input ~ .popup.active { - display: inline-block; } - -select { - cursor: pointer; - padding: 0 7px 0 7px; - /* overwrites input padding: 7px. don't know why i have to do this! */ } - -option { - line-height: 1rem; } - -input[type="file"] { - border: 1px solid var(--input-border-active); - width: 100%; - max-width: 100%; - color: var(--input-color); - padding: 10px; - box-sizing: border-box; } - -input::placeholder { - font-family: 'FontAwesome', serif; - color: var(--input-icon-color); - opacity: 0.5; } - -textarea:invalid, input:invalid { - transition: all 0.5s !important; - border-color: #f00 !important; } - textarea:invalid ~ i.ok, input:invalid ~ i.ok { - display: none !important; } - textarea:invalid ~ i.error, input:invalid ~ i.error { - display: inline-block !important; } - -input:valid ~ i.ok { - display: inline-block !important; } -input:valid ~ i.error { - display: none !important; } - -textarea, .textarea { - overflow: auto; - resize: both; - box-sizing: border-box; - padding: .3rem .3rem .3rem .5rem; } - -label.radio, label.checkbox { - display: inline-flex; - align-items: center; - user-select: none; - cursor: pointer; } - label.radio input, label.checkbox input { - margin: 0; - opacity: 0; - cursor: pointer; } - label.radio input:checked ~ .checkmark, label.checkbox input:checked ~ .checkmark { - background-color: var(--button-colored-background); } - label.radio input:required ~ .checkmark, label.radio input:disabled ~ .checkmark, label.radio input:readonly ~ .checkmark, label.checkbox input:required ~ .checkmark, label.checkbox input:disabled ~ .checkmark, label.checkbox input:readonly ~ .checkmark { - background-color: #adadad; } - label.radio input:checked ~ .checkmark:after, label.checkbox input:checked ~ .checkmark:after { - display: block; } - label.radio .checkmark, label.checkbox .checkmark { - position: relative; - height: 15px; - width: 15px; - margin-right: 5px; - background-color: #eee; - border: 1px solid var(--input-border-active); } - label.radio .checkmark:after, label.checkbox .checkmark:after { - content: ""; - position: absolute; - display: none; } - label.radio:hover input ~ .checkmark, label.checkbox:hover input ~ .checkmark { - cursor: pointer; } - -label.radio .checkmark { - border-radius: 50%; } - label.radio .checkmark:after { - top: 5px; - left: 5px; - width: 5px; - height: 5px; - border-radius: 50%; - background: #fff; } -label.checkbox .checkmark:after { - top: 2px; - left: 4px; - width: 4px; - height: 6px; - border: solid white; - border-width: 0 3px 3px 0; - transform: rotate(45deg); } - -input[type="range"] { - border: none; - width: 100%; - min-width: 150px; - height: 5px; - background: var(--button-colored-background); - cursor: pointer; } - -.input { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: nowrap; } - .input button { - box-sizing: border-box; - background: var(--button-colored-background); - height: 30px; - font-size: 1rem; - min-width: 40px; - border-left: solid 1px var(--input-border); - border-top: solid 1px var(--input-border); - border-bottom: solid 1px var(--input-border); - border-right: none; - padding: 0; - position: relative; - vertical-align: middle; - flex-grow: 0; - flex-shrink: 0; } - .input button:hover, .input button:focus { - background: var(--button-colored-background-hover); } - .input button.inactive { - background: #ccc; - cursor: default; } - .input button.inactive:hover, .input button.inactive:focus { - background: #ccc; } - .input input { - box-sizing: border-box; - position: relative; - vertical-align: middle; - flex-grow: 1; - flex-shrink: 1; } - -select.plain { - width: auto; - margin: 0; - padding: 0; - border: none; - outline: none; - display: inline-block; - appearance: none; - cursor: pointer; - box-shadow: none; } - -.dropdown { - cursor: pointer; - display: inline-block; - width: 100%; - border: 1px solid #000; - position: relative; - box-shadow: none; - outline: 0; - margin: 0; - font-family: inherit; - font-size: .9rem; - user-select: none; } - .dropdown:hover { - background: #f00; } - .dropdown label { - cursor: pointer; - user-select: none; } - .dropdown .dropdown-closed { - display: flex; - height: 100%; - align-items: center; } - .dropdown .dropdown-closed label { - display: none; } - .dropdown .dropdown-closed input { - display: none; } - .dropdown .dropdown-closed input:checked + label { - display: flex; - align-items: center; } - .dropdown .dropdown-container { - display: none; - z-index: 2; } - .dropdown .dropdown-container label { - padding: .5rem; } - .dropdown > input { - display: none; } - .dropdown > input:checked + .dropdown-container { - display: block; - background: #fff; - border: 1px solid #000; - position: absolute; } - .dropdown > input:checked + .dropdown-container label { - display: flex; - align-items: center; } - .dropdown > input:checked + .dropdown-container label:hover { - background: #f00; } - -.ac-container { - text-align: left; - border: 1px solid #c9c9c9; } - .ac-container > input { - display: none; } - .ac-container > input:checked + label { - background: var(--button-colored-background); - color: var(--text-on-background-color-2); } - .ac-container > input:checked + label + section { - display: inherit; } - .ac-container > input:checked + label:hover { - background: var(--button-colored-background-hover); } - .ac-container > input + label + section { - display: none; } - .ac-container label { - display: block; - padding: 1rem 1rem; - position: relative; - z-index: 20; - margin-top: -1px; - cursor: pointer; - color: #000; - font-size: 1rem; - background: var(--box-border); } - .ac-container label:hover { - color: var(--text-on-background-color-2); - background: var(--button-colored-background-hover); } - .ac-container > section { - background: #fff; - overflow: hidden; - height: auto; - position: relative; - z-index: 10; - padding: 1rem; } - -.more-container > label { - width: 100%; - display: flex; - flex-direction: row; - border-bottom: 1px solid var(--box-border); - cursor: pointer; - color: var(--link-color); - user-select: none; } - .more-container > label .expand { - transition: all .3s ease; - transform: rotateZ(0deg); } - .more-container > label span { - flex-grow: 1; } - .more-container > label i { - flex-grow: 0; } -.more-container > input { - display: none; } -.more-container > input:checked + label { - border-bottom: none; - margin-bottom: 1rem; } - .more-container > input:checked + label .expand { - transition: all .3s ease; - transform: rotateZ(90deg); } -.more-container > input:checked ~ div { - display: block; } -.more-container > div { - display: none; } - -.log-msg { - padding: 1rem; - margin: 1rem; } - -.log-msg-status-ok { - background: #aaffad; - border: 1px solid #81e27d; - color: #459442; } - -.log-msg-status-warning { - background: #f8ffa8; - border: 1px solid #d6d949; - color: #94972f; } - -.log-msg-status-error { - background: #ff7d79; - border: 1px solid #ee5649; - color: #a5302a; } - -.log-msg-status-info { - background: #b6d2ff; - border: 1px solid #85b0ee; - color: #4865a5; } - -.slider { - overflow-x: auto; - white-space: nowrap; } - .slider ul { - display: inline; } - -@keyframes slidy { - 0% { - left: 0%; } - 20% { - left: 0%; } - 25% { - left: -100%; } - 45% { - left: -100%; } - 50% { - left: -200%; } - 70% { - left: -200%; } - 75% { - left: -300%; } - 95% { - left: -300%; } - 100% { - left: -400%; } } -div.slider-1 { - overflow: hidden; } - div.slider-1 figure { - position: relative; - width: 500%; - margin: 0; - left: 0; - text-align: left; - font-size: 0; - animation: 30s slidy infinite; } - div.slider-1 figure img { - width: 20%; - float: left; } - -.slider-2 { - width: 100%; - position: relative; - text-align: center; } - .slider-2 > img { - width: 100%; - position: absolute; - left: 0; - top: 0; - transition: all 0.5s; } - .slider-2 input { - display: none; } - .slider-2 input:checked + label { - border-color: #666; - opacity: 1; } - .slider-2 input:checked + label + img { - opacity: 1; - transform: scale(1); } - .slider-2 input ~ img { - opacity: 0; - transform: scale(0.9); } - .slider-2 label { - display: inline-block; - margin-top: calc(50% + 15px); - margin-left: 15px; - border: 3px solid #999; - cursor: pointer; - opacity: 0.6; } - .slider-2 label img { - display: block; } - -.slider-3 { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; } - .slider-3 .icon-cards { - position: relative; - width: 60vw; - height: 40vw; - max-width: 380px; - max-height: 250px; - margin: 0; - perspective: 1000px; } - .slider-3 .icon-cards-content { - position: absolute; - width: 100%; - height: 100%; - transform-style: preserve-3d; - transform: translateZ(-30vw) rotateY(0); - animation: carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards; } - .slider-3 .icon-cards-item { - position: absolute; - top: 0; - left: 0; - max-width: 380px; - max-height: 250px; } - .slider-3 .icon-cards-item:nth-child(1) { - transform: rotateY(0) translateZ(35vw); } - .slider-3 .icon-cards-item:nth-child(2) { - transform: rotateY(120deg) translateZ(35vw); } - .slider-3 .icon-cards-item:nth-child(3) { - transform: rotateY(240deg) translateZ(35vw); } - .slider-3 .icon-cards img { - width: 100%; } - -@keyframes carousel { - 0%, 17.5% { - transform: translateZ(-35vw) rotateY(0); } - 27.5%, 45% { - transform: translateZ(-35vw) rotateY(-120deg); } - 55%, 72.5% { - transform: translateZ(-35vw) rotateY(-240deg); } - 82.5%, 100% { - transform: translateZ(-35vw) rotateY(-360deg); } } -pre { - border: 1px solid var(--box-border); - background: #ccc; - padding: 1rem; - box-sizing: border-box; } - -blockquote { - border: 1px solid var(--box-border); - background: #ccc; - padding: 1rem; - box-sizing: border-box; } - -.crumbs-1, .crumbs-2 { - list-style: none; - overflow: hidden; - font-size: 1rem; - user-select: none; } - .crumbs-1 li, .crumbs-2 li { - background: #fff; - border-left: 1px solid var(--box-border); - border-top: 1px solid var(--box-border); - border-bottom: 1px solid var(--box-border); - padding: 0 10px 0 20px; - height: 2.5rem; - position: relative; - display: block; - float: left; - display: inline-flex; - align-items: center; - cursor: pointer; } - .crumbs-1 li:after, .crumbs-1 li:before, .crumbs-2 li:after, .crumbs-2 li:before { - content: " "; - display: block; - width: 0; - height: 0; - border-top: 20px solid transparent; - border-bottom: 20px solid transparent; - border-left: 14px solid #fff; - position: absolute; - top: 50%; - margin-top: -20px; - left: 100%; } - .crumbs-1 li:after, .crumbs-2 li:after { - z-index: 1; } - .crumbs-1 li:before, .crumbs-2 li:before { - border-left-color: var(--box-border); - margin-left: 1px; - z-index: 1; } - .crumbs-1 li.active:after, .crumbs-1 li:hover:after, .crumbs-2 li.active:after, .crumbs-2 li:hover:after { - color: var(--text-on-background-color-2); } - .crumbs-1 li.active:after, .crumbs-2 li.active:after { - border-left: 14px solid var(--button-colored-background); } - .crumbs-1 li:hover:after, .crumbs-2 li:hover:after { - border-left: 14px solid var(--button-colored-background-hover); } - .crumbs-1 .active, .crumbs-2 .active { - cursor: default; - background: var(--button-colored-background); } - .crumbs-1 .active, .crumbs-1 li:hover, .crumbs-2 .active, .crumbs-2 li:hover { - color: var(--text-on-background-color-2); } - .crumbs-1 li:hover, .crumbs-2 li:hover { - background: var(--button-colored-background-hover); } - -.crumbs-1 li:not(:last-child):after, .crumbs-1 li:before { - content: " "; - display: block; - width: 0; - height: 0; - border-top: 20px solid transparent; - border-bottom: 20px solid transparent; - border-left: 14px solid #fff; - position: absolute; - top: 50%; - margin-top: -20px; - left: 100%; } -.crumbs-1 li.active:not(:last-child):after, .crumbs-1 li:hover:not(:last-child):after { - color: var(--text-on-background-color-2); } -.crumbs-1 li.active:not(:last-child):after { - border-left: 14px solid var(--button-colored-background); } -.crumbs-1 li:hover:not(:last-child):after { - border-left: 14px solid var(--button-colored-background-hover); } -.crumbs-1 :last-child:before { - border: none; } - -.btn, .link { - cursor: pointer; - user-select: none; } - -button, input[type="submit"], input[type="reset"], input[type="button"], label.button, a.button { - cursor: pointer; - display: inline-flex; - min-width: 70px; - background: var(--button-colored-background); - color: var(--text-on-background-color-2); - padding: 0 1rem 0 1rem; - flex-grow: 0; - height: 30px; - border: 1px solid var(--box-border); - box-shadow: none; - justify-content: center; - align-items: center; - outline: 0; - font-family: inherit; - font-size: .9rem; - user-select: none; - font-weight: 100; - box-sizing: border-box; } - button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, label.button::-moz-focus-inner, a.button::-moz-focus-inner { - border: 0; } - button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, label.button:hover, a.button:hover { - background: var(--button-colored-background-hover); - color: var(--text-on-background-color-2); } - -button.save, .button.save, input[type="submit"].save { - color: rgba(0, 0, 0, 0.75); - background: var(--button-colored-background); } - button.save:hover, button.save:focus, .button.save:hover, .button.save:focus, input[type="submit"].save:hover, input[type="submit"].save:focus { - background: var(--button-colored-background); } - -button.save, .button.save, input[type="submit"].save { - color: rgba(0, 0, 0, 0.75); - background: #8fff79; } - button.save:hover, button.save:focus, .button.save:hover, .button.save:focus, input[type="submit"].save:hover, input[type="submit"].save:focus { - background: #a1ffa1; } - -button.cancel, .button.cancel, input[type="submit"].cancel { - background: #ee5649; } - button.cancel:hover, button.cancel:focus, .button.cancel:hover, .button.cancel:focus, input[type="submit"].cancel:hover, input[type="submit"].cancel:focus { - background: #ff7d79; } - -button.close, .button.close, input[type="submit"].close, input[type="reset"].close { - color: rgba(0, 0, 0, 0.75); - background: #fffc3e; } - button.close:hover, button.close:focus, .button.close:hover, .button.close:focus, input[type="submit"].close:hover, input[type="submit"].close:focus, input[type="reset"].close:hover, input[type="reset"].close:focus { - background: #fffd7b; } - -button.disabled, .button.disabled, input[type="submit"].disabled { - color: rgba(0, 0, 0, 0.5); - background: #e1e1e1; - cursor: not-allowed; } - button.disabled:hover, button.disabled:focus, .button.disabled:hover, .button.disabled:focus, input[type="submit"].disabled:hover, input[type="submit"].disabled:focus { - background: #e1e1e1; } - -.link.default { - color: var(--button-colored-background); } - -.link.save { - color: #8fff79; } - -.link.cancel { - color: #ee5649; } - -.link.close { - color: #fffc3e; } - -.link.disabled { - color: #e1e1e1; } - -i.favorite { - color: #ffd700; - text-shadow: 0 0 1px #000; } - -.unseen { - font-weight: bold; } - -[data-href] { - cursor: pointer; } - -.portlet-body a:not(.button), a.content, a .content { - color: var(--link-color); - border-bottom: 1px dotted var(--link-color); } - .portlet-body a:not(.button):hover, a.content:hover, a .content:hover { - border-bottom: 1px dotted transparent; } - -ul.boxed { - background: #fff; - padding: 5px; - border: 1px solid var(--box-border); } - ul.boxed li { - margin: 5px 0 5px 0; } - ul.boxed li:first-child { - margin-top: 0; } - ul.boxed li:last-child { - margin-bottom: 0; } - -ul.h-list li { - display: inline-block; - margin: 5px 10px 5px 10px; } - -ul.foldable { - list-style-type: none; - margin: 0; - padding: 0; } - ul.foldable input[type="checkbox"] { - display: none; } - ul.foldable .caret { - cursor: pointer; - user-select: none; } - ul.foldable .caret::before { - content: "\25B6"; - color: black; - display: inline-block; - margin-right: 6px; } - ul.foldable .nested { - display: none; } - ul.foldable input[type="checkbox"]:checked ~ .nested { - display: block; } - ul.foldable input[type="checkbox"]:checked ~ .caret::before { - transform: rotate(90deg); } - ul.foldable ul { - list-style-type: none; } - -body > nav { - width: 250px; - overflow-y: auto; - font-size: 0.8em; - background: var(--nav-category-background); - color: rgba(255, 255, 255, 0.8); - flex-shrink: 0; - display: flex; - flex-direction: column; - user-select: none; } - -#nav-side-outer { - overflow-y: auto; - height: 100%; - user-select: none; - scrollbar-color: var(--button-colored-background) var(--nav-category-background); - scrollbar-width: thin; } - #nav-side-outer::-webkit-scrollbar { - width: 7px; } - #nav-side-outer::-webkit-scrollbar-thumb { - background: var(--button-colored-background); } - #nav-side-outer::-webkit-scrollbar-track { - background: var(--nav-category-background); } - -#nav-side-inner { - flex: 0; - display: flex; - flex-flow: column; - box-sizing: border-box; - border-top: 1px solid #4b5055; } - #nav-side-inner span { - flex-grow: 1; } - #nav-side-inner input { - display: none; } - #nav-side-inner input:checked + ul .expand { - transition: all .3s ease; - display: inherit; - transform: rotateZ(90deg); } - #nav-side-inner input:checked + ul > li:nth-child(n+2) { - display: inherit; } - #nav-side-inner input + ul .expand { - transition: all .3s ease; - transform: rotateZ(0deg); } - #nav-side-inner input + ul > li:nth-child(n+2) { - display: none; } - #nav-side-inner label { - display: flex; - align-items: center; - padding: .3rem .5rem .3rem .5rem; - cursor: pointer; } - #nav-side-inner > li { - display: block; } - #nav-side-inner > li a { - display: block; - padding: .5rem .75rem .5rem .75rem; - border-left: 3px solid transparent; } - #nav-side-inner > li a:hover, #nav-side-inner > li a:focus { - background: var(--nav-sub-background-hover); - border-left: 3px solid var(--nav-sub-background-highlight); } - #nav-side-inner > li li:not(:first-child) { - background: var(--nav-sub-background); } - #nav-side-inner > li li a:hover, #nav-side-inner > li li a.active, #nav-side-inner > li li a:focus { - background: var(--nav-category-background-hover); } - #nav-side-inner > li li:first-child { - border-bottom: 1px solid #212628; } - #nav-side-inner > li li:first-child { - border-top: 1px solid #4b5055; } - #nav-side-inner > li:first-child li:first-child { - border-top: none; } - #nav-side-inner i { - flex-grow: 0; } - #nav-side-inner i + span { - margin-left: 5px; } - -.nav-trigger { - position: absolute; } - .nav-trigger:checked + nav { - width: 0%; } - -.nav-top { - user-select: none; - margin-top: 1rem; - display: block; } - .nav-top > li > a { - border: 1px solid var(--box-border); - margin-right: .5rem; - display: inline-block; - padding: 10px 10px; } - .nav-top li { - display: inline-block; } - .nav-top li a { - background: #fff; - position: relative; - cursor: pointer; } - .nav-top li a:hover, .nav-top li a.active, .nav-top li a:focus { - background: var(--nav-content-hover); - color: var(--text-on-background-color-2); } - .nav-top li a:hover > ul, .nav-top li a.active > ul, .nav-top li a:focus > ul { - display: block; - opacity: 1; - visibility: visible; } - .nav-top li a > ul { - padding: 0; - z-index: 5; - position: absolute; - top: 36px; - left: 0; - width: 150px; - display: none; - opacity: 0; - visibility: hidden; } - .nav-top li a > ul li { - display: block; - color: #000; - padding: 7px; } - .nav-top li a > ul li:hover, .nav-top li a > ul li:focus { - color: #252525; - background: var(--nav-content-hover); } - -#nav-trigger { - display: none; } - -@media only screen and (max-width: 800px) { - #nav-trigger:not(:checked) + nav { - width: 0%; } - - #nav-trigger:checked + nav { - width: auto; - min-width: 250px; } } -@media only screen and (max-width: 500px) { - #nav-trigger:checked + nav { - width: 100%; } - - #nav-trigger:checked ~ main { - display: none; } } -.pagination li { - display: inline-block; } - .pagination li + li { - margin-left: .5rem; } -.pagination a { - display: inline-block; - border-radius: 3px; - background: #ccc; - padding: 5px 10px 5px 10px; } -.pagination .active, .pagination a:hover, .pagination a:active { - color: #000; - background: #fff; } - -.meter { - height: 15px; - /* Can be anything */ - position: relative; - background: none !important; } - .meter > span { - display: block; - height: 100%; - border-radius: 3px; - background-color: #2bc253; - background-image: linear-gradient(to left top, color-stop(0, #2bc253), color-stop(1, #54f054)); - position: relative; - overflow: hidden; } - .meter.orange > span { - background-color: #f1a165; - background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a)); - background-image: -webkit-linear-gradient(#f1a165, #f36d0a); } - .meter.blue > span { - background-color: #96c2f1; - background-image: -moz-linear-gradient(top, #96c2f1, #4394f3); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96c2f1), color-stop(1, #4394f3)); - background-image: -webkit-linear-gradient(#96c2f1, #4394f3); } - .meter.red > span { - background-color: #f0a3a3; - background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323)); - background-image: -webkit-linear-gradient(#f0a3a3, #f42323); } - -.meter > span:after, .animate > span > span { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - z-index: 1; - -webkit-background-size: 50px 50px; - -moz-background-size: 50px 50px; - -webkit-animation: move 4s linear infinite; - overflow: hidden; } - -.animate > span:after { - display: none; } - -@-webkit-keyframes move { - 0% { - background-position: 0 0; } - 100% { - background-position: 50px 50px; } } -.noanimation > span > span, .noanimation > span:after { - -webkit-animation: none; } - -.nostripes > span > span, .nostripes > span:after { - -webkit-animation: none; - background-image: none; } - -.timeline { - list-style: none; - margin: 0 0 30px 120px; - padding-left: 30px; - border-left: 3px solid #eaeaea; } - .timeline li { - margin: 0; - position: relative; } - .timeline p { - margin: 0 0 15px; } - -.timeline-date { - margin-top: -18px; - top: 50%; - left: -150px; - font-size: 0.95em; - line-height: 20px; - position: absolute; - padding: 5px 10px 5px 10px; - border: 1px solid #ccc; } - -.timeline-circle { - margin-top: -10px; - top: 50%; - left: -40px; - width: 10px; - height: 10px; - background: tomato; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; } - -.timeline-circle-start { - margin-top: 0; - top: 0; - left: -45px; - width: 20px; - height: 20px; - background: #fff; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; } - -.timeline-circle-end { - margin-top: 0; - top: 100%; - left: -45px; - width: 20px; - height: 20px; - background: #fff; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; } - -.timeline-content { - padding: 50px 20px 0; - border-radius: 0.5em; - position: relative; } - -.timeline-content p { - text-align: justify; } - -.timeline label { - font-size: 1.3em; - position: absolute; - z-index: 90; - top: 20px; } - -.timeline-radio { - display: none; } - -.timeline-break { - display: none; } - -.emptyPage { - width: 80%; - font-size: 15rem; - margin: 0 auto; - margin-top: 3rem; - text-align: center; - border: 5px solid rgba(92, 2, 2, 0.1); } - .emptyPage:before { - font-family: 'Material Symbols Outlined', serif; - content: 'question_mark'; - color: rgba(0, 0, 0, 0.1); } - -.box { - box-sizing: border-box; - margin-top: 1rem; - overflow-x: auto; } - .box .inner { - box-sizing: border-box; - padding: 10px; } - -.box-container { - display: inline-block; } - -section.box { - background: #fff; - border: 1px solid var(--box-border); } - -section header > h1 { - margin: 10px 10px 0 10px; - padding-bottom: 5px; - font-size: 1.1em; - border-bottom: 1px solid #e1e1e1; } -section > h2 { - box-sizing: border-box; - font-size: 1.2em; - margin-bottom: 5px; } - -.pagebreak { - display: none; } - -@media print { - .pagebreak { - page-break-after: always; - display: block; } } -.tabview .tab-links { - color: #000; - padding: 5px 0 0 0; } - .tabview .tab-links label { - font-size: 0.9em; - user-select: none; - cursor: pointer; - border: 1px solid var(--button-colored-background); - white-space: nowrap; } - .tabview .tab-links label:hover, .tabview .tab-links label:focus { - color: var(--text-on-background-color-2); - background: var(--button-colored-background-hover); - border: 1px solid var(--button-colored-background-hover); - outline: none; } - .tabview .tab-links .active label:hover, .tabview .tab-links .active label:focus { - color: var(--text-on-background-color-2); - background: var(--button-colored-background-hover); - border: 1px solid var(--button-colored-background-hover); - outline: none; } - .tabview .tab-links .active label { - cursor: default; } - .tabview .tab-links li { - display: inline-block; } -.tabview .tab-content { - display: flex; - flex: 1; } - .tabview .tab-content > input { - display: none; } - .tabview .tab-content > input + div { - display: none; } - .tabview .tab-content > input:checked + div { - display: flex; - flex: 1; - flex-direction: column; } -.tabview .tab { - max-width: 100%; } -.tabview.right > .box { - order: 2; } - -.tab-1 .tab-links { - margin: 0 0 10px 1px; } - .tab-1 .tab-links label { - padding: 5px; - background: none; - overflow: auto; - background: #fff; } - .tab-1 .tab-links .active, .tab-1 .tab-links .active label { - color: var(--text-on-background-color-2); - background: var(--button-colored-background); } - .tab-1 .tab-links li { - margin: 0 5px 0 0; } -.tab-1 .tab { - max-width: 100%; } -.tab-1 .tab-content { - box-sizing: border-box; - border: 1px solid var(--button-colored-background); - background: #fff; - padding: 10px; } -.tab-1.left, .tab-1.right { - display: flex; } - .tab-1.left .tab-links, .tab-1.right .tab-links { - margin: 0; - border: none; } - .tab-1.left .tab-links li, .tab-1.right .tab-links li { - display: block; - margin-bottom: 20px; } - .tab-1.left .tab-links .active label, .tab-1.right .tab-links .active label { - border: 1px solid var(--box-border); } - .tab-1.left .tab-content, .tab-1.right .tab-content { - width: 100%; } - -.tab-2 { - display: flex; - flex: 1; - flex-direction: column; } - .tab-2 .tab { - max-width: 100%; } - .tab-2 .tab-links label { - padding: 5px 10px 5px 10px; } - .tab-2 .tab-links li { - margin: 0 5px 15px 0; } - .tab-2 .tab-links .active a, .tab-2 .tab-links .active label { - color: var(--text-on-background-color-2); - background: var(--button-colored-background); } - .tab-2.left, .tab-2.right { - flex-direction: row; } - .tab-2.left .tab-links, .tab-2.right .tab-links { - margin: 0; - border: none; } - .tab-2.left .tab-links li, .tab-2.right .tab-links li { - display: block; - margin-bottom: 20px; } - .tab-2.left .tab-links .active label, .tab-2.right .tab-links .active label { - border: 1px solid var(--box-border); } - .tab-2.left .tab-content, .tab-2.right .tab-content { - width: 100%; } - -.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action { - color: var(--button-colored-background); } - -table.fixed { - table-layout: fixed; } -table input[type=radio]:checked + i { - color: var(--button-colored-background); } -table input[type=checkbox]:checked + label i { - color: var(--button-colored-background); } -table .order-up, table .order-down { - cursor: pointer; } -table .sort-asc, table .sort-desc, table .filter { - padding: 0; - cursor: pointer; } -table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc { - display: none; } -table.default.sticky { - position: relative; } - table.default.sticky thead th, table.default.sticky thead td { - position: sticky; - top: 0; - z-index: 2; } - table.default.sticky thead th > *, table.default.sticky thead td > * { - vertical-align: middle; } -table.default { - width: 100%; - max-width: 100%; - font-size: 0.9em; - box-sizing: border-box; - overflow-x: auto; } - table.default caption { - font-size: 1.5rem; - font-weight: 400; - border-bottom: 1px solid var(--box-border); - background: var(--table-caption-background); - padding: .5rem; - text-align: left; - height: 2.5rem; } - table.default caption i { - font-size: .8rem; } - table.default td, table.default th { - padding: 3px 5px 3px 5px; - white-space: nowrap; } - table.default td:first-child, table.default th:first-child { - padding-left: 10px; } - table.default td:last-child, table.default th:last-child { - padding-right: 10px; } - table.default tbody td, table.default tbody th { - border-bottom: 1px solid #ebedf2; } - table.default tbody tr:last-child td, table.default tbody tr:last-child th { - border: none; } - table.default tbody tr:nth-of-type(2n) { - background: var(--table-row-background); } - table.default tbody tr:nth-of-type(2n+1) { - background: var(--table-row-background-alt); } - table.default tbody tr:hover td, table.default tbody tr:focus td { - background: var(--table-row-background-hover); } - table.default tbody tr:focus, table.default tbody tr:hover { - outline: none; - transform: scale(1); - box-shadow: 0 0 5px var(--box-border); } - table.default tbody tr, table.default tfoot tr { - height: 2.5rem; } - table.default tbody th, table.default tfoot th { - text-align: left; } - table.default tbody th[colspan]:not([colspan="1"]), table.default tfoot th[colspan]:not([colspan="1"]) { - text-align: center; } - table.default tbody a, table.default tfoot a { - display: inline-flex; - align-items: center; } - table.default tbody a i, table.default tfoot a i { - margin-right: .5rem; } - table.default thead { - background: var(--table-head-background); - color: var(--table-head-color); } - table.default thead tr { - height: 2.5rem; } - table.default thead td { - border-bottom: 1px solid #ebedf2; } - table.default thead input[type=radio] { - display: none; } - table.default thead input[type=radio]:checked + label { - color: var(--box-highlight); } - table.default .disabled { - color: #d8d8d8; } - table.default .empty { - text-align: center; - color: #d8d8d8; } -table.list th { - text-align: left; - padding: 2px 0 2px 0; } -table.list td { - padding: 2px 5px 2px 5px; } - -thead input[type=radio] { - padding: 0; - margin: 0; - display: none; } -thead i.fa { - color: #888; } -thead label, thead span { - display: inline-flex; - align-items: center; } - thead label > a, thead span > a { - display: inline-flex; - align-items: center; } - -.fixed-1 td:nth-child(1) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-2 td:nth-child(2) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-3 td:nth-child(3) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-4 td:nth-child(4) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-5 td:nth-child(5) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-6 td:nth-child(6) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-7 td:nth-child(7) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-8 td:nth-child(8) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-9 td:nth-child(9) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-10 td:nth-child(10) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -@media screen and (max-width: 600px) { - table.table { - display: table; - width: 100%; } - table.table thead { - display: none; } - table.table tbody tr { - height: auto; - display: block; - margin-bottom: .625em; } - table.table tbody td { - display: flex; - font-size: .8rem; - height: 2rem; - line-height: 2rem; - text-overflow: ellipsis; - overflow: hidden; - max-width: 100%; } - table.table tbody td:before { - content: attr(data-label); - margin-right: 10px; - font-weight: bold; } - table.table tfoot { - display: none; } } -span.tag { - cursor: pointer; - border-radius: 4px; - padding: 4px 6px 4px 6px; - font-size: .8rem; - color: var(--text-on-background-color-2); - background: var(--button-colored-background); - display: inline-flex; - align-items: center; - user-select: none; } - span.tag i { - color: var(--text-on-background-color-2); - margin-right: .5rem; } - -.tag.ok { - background: #aaffad; - border: 1px solid #81e27d; - color: #459442; } - -.tag.warning { - background: #f8ffa8; - border: 1px solid #d6d949; - color: #94972f; } - -.tag.error { - background: #ff7d79; - border: 1px solid #ee5649; - color: #a5302a; } - -.tag.info { - background: #b6d2ff; - border: 1px solid #85b0ee; - color: #4865a5; } - -/* It's supposed to look like a tree diagram */ -.tree, .tree ul, .tree li { - list-style: none; - padding: 0; - position: relative; } - -.tree { - display: table; - text-align: center; } - .tree .tree { - border-top: 1px solid #666; } - .tree .box { - margin: 0; - padding: 1rem; - border: 0; } - .tree ul { - width: 100%; - display: table; } - .tree ul:not(.tree) li:before { - border: 1px solid #666; } - .tree li { - display: table-cell; - padding: .5em 0; - vertical-align: top; } - .tree li:before { - content: ""; - left: 0; - position: absolute; - right: 0; - top: 0; } - .tree li:first-child:before { - left: 50%; } - .tree li:last-child:before { - right: 50%; } - .tree li > span { - text-align: left; - border: solid .1em #666; - display: inline-block; - margin: 0 .2em .5em; - position: relative; } - .tree ul:not(.tree):before, .tree span:before { - border: solid 1px #666; - content: ""; - height: .45em; - left: 50%; - position: absolute; } - .tree ul:before { - top: -.5rem; } - .tree span:before { - top: -.5rem; } - .tree > li:before, .tree > li:after, - .tree > li > span:before { - border: none; } - -.portlet { - border: 1px solid var(--box-border); - box-sizing: border-box; - margin-top: 1rem; } - .portlet .portlet-head { - background: #fff; - border-bottom: 1px solid #ebedf2; - padding: .7rem 1rem .7rem 1rem; - font-weight: 300; - display: flex; } - .portlet .portlet-head > span { - display: inline-flex; - align-items: center; } - .portlet .portlet-head > span > a { - display: inherit; } - .portlet .portlet-head form { - margin-left: 1rem; } - .portlet .portlet-foot { - background: #fff; - border-top: 1px solid #ebedf2; - padding: .7rem 1rem .7rem 1rem; - box-sizing: border-box; - display: flex; - flex-wrap: wrap; - column-gap: .5rem; } - .portlet .portlet-body > h2 { - border-bottom: 1px solid #ebedf2; } - .portlet .portlet-separator { - border-bottom: 1px solid #ebedf2; } - .portlet.highlight-1 .portlet-body, .portlet.highlight-1 .portlet-head { - background: var(--color-red); - border: 0; } - .portlet.highlight-2 .portlet-body, .portlet.highlight-2 .portlet-head { - background: var(--color-green); - border: 0; } - .portlet.highlight-3 .portlet-body, .portlet.highlight-3 .portlet-head { - background: var(--color-blue); - border: 0; } - .portlet.highlight-4 .portlet-body, .portlet.highlight-4 .portlet-head { - background: var(--color-yellow); - border: 0; } - .portlet.highlight-5 .portlet-body, .portlet.highlight-5 .portlet-head { - background: var(--color-purple); - border: 0; } - .portlet.highlight-6 .portlet-body, .portlet.highlight-6 .portlet-head { - background: var(--color-pink); - border: 0; } - .portlet.highlight-7 .portlet-body, .portlet.highlight-7 .portlet-head { - background: var(--color-orange); - border: 0; } - -.plain-portlet { - box-sizing: border-box; - margin-top: 1rem; - overflow-x: auto; } - -.portlet-body { - background: #fff; - padding: 1rem; } - -.context-menu { - position: absolute; - background: #fff; - border: 1px solid #ccc; - z-index: 1000; } - .context-menu label { - padding: .5rem; - width: 100%; - box-sizing: border-box; } - .context-menu label:hover { - background: var(--table-row-background-hover); } - -code[contenteditable], .contenteditable { - display: block; - outline: none; - white-space: pre-wrap; } - -#cookie_consent_checkbox { - display: none; } - #cookie_consent_checkbox:checked #cookieConsentForm { - display: none; } - #cookie_consent_checkbox:not(:checked) + #cookieConsentForm { - display: flex; } - -#cookieConsentForm { - position: fixed; - width: 100%; - height: 100%; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - background: rgba(0, 0, 0, 0.5); - font-weight: 100; } - #cookieConsentForm input[type=radio] { - display: none; } - #cookieConsentForm #cookieConsentForm_simple label, #cookieConsentForm .button, #cookieConsentForm input[type=submit], - #cookieConsentForm #cookieConsentForm_cutomize label, #cookieConsentForm .button, #cookieConsentForm input[type=submit] { - margin: 0; } - #cookieConsentForm .secondary { - background: none; - border: 2px solid var(--button-background); - color: var(--button-background) !important; } - #cookieConsentForm .consent_element { - margin-top: 1rem; } - #cookieConsentForm form { - background: #fff; - border: 1px solid var(--box-border); - display: inline-block; - padding: 1rem; - border-radius: 3px; } - -#cookieConsentForm_defaultbuttons, -#cookieConsentForm_customizedbuttons { - display: flex; - flex-direction: row; - gap: 10px; - margin-top: 1rem; } - -#cookieConsentForm_simple + div, #cookieConsentForm_cutomize + div { - display: none; } - -#cookieConsentForm_simple:checked + div, #cookieConsentForm_cutomize:checked + div { - display: block; } - -thead td label { - display: none; } - -.portlet-head .g-icon { - display: none; } +html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,nav,section,iframe,label{margin:0;padding:0}a,img,button{outline:none}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:300}ul{list-style:none}th{font-weight:300}input,select,textarea,.textarea,button{box-sizing:border-box;box-shadow:none;appearance:none;border-radius:0}input:focus,select:focus,textarea:focus,.textarea:focus,button:focus{outline:none}input[type=checkbox]{margin-right:5px}button::-moz-focus-inner{border:0}table{border-collapse:separate;border-spacing:0}i{font-style:normal}.clear{clear:both}p{margin:0 0 10px 0;line-height:1.4em}p span{margin:0;padding:0}p+p{margin-top:5px}blockquote{color:#fff;background:#25acff;border:1px solid rgba(0,0,0,0.4);padding:1rem;border-radius:5px;margin:1.5rem}blockquote p:last-child{margin-bottom:0}blockquote code{color:inherit;background:inherit}blockquote a{color:inherit}pre,code{font-family:var(--ff);font-size:.8rem;background:#f4f4f4;color:#000}code{border-radius:3px;padding:.2rem .4rem .2rem .4rem}pre{margin:1rem 0 1rem 0;line-height:1.2rem;border:1px solid #ddd;padding:1rem;overflow-x:auto;width:100%;box-sizing:border-box;white-space:pre-wrap;border-left:3px solid #25acff}pre code{padding:0}pre>span{display:block}pre>span:before{display:inline-block;border-right:1px solid #ddd;padding:0 .5em;margin-right:.5em;color:#888;width:30px}strong{font-weight:500;font-weight:bold}iframe{padding:0;margin:0;border:none;width:100%}.clean{margin:0;padding:0;border:none;outline:0;vertical-align:top}.clean:focus{outline:0}.p,.max,.min,.close,.cancel,.filter,.ok,.search,.abort,.sort{cursor:pointer}.nobreak,.nowrap{white-space:nowrap}.center{margin:0 auto}.pAlignTable{display:table;width:100%}.vCenterTable{display:table-cell;vertical-align:middle}.overflowfix{overflow:auto}.rp{position:relative}.ap{position:absolute}.lf{float:left}.rf{float:right}.op{margin:0 auto}.rT{text-align:right}.lT{text-align:left}.cT{text-align:center}.f-w{width:100%;max-width:none}.f-h{height:100%;max-height:none}.vT{vertical-align:top}.vB{vertical-align:bottom}.vM{vertical-align:middle}.vC{display:table-cell;vertical-align:middle;white-space:nowrap}.vh{display:none !important}.x-overflow{overflow-x:auto}.container-fluid,.container{box-sizing:border-box}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap}.col-simple{flex-direction:column}.row-simple{flex-direction:row}.col-simple,.row-simple{display:flex;flex:1;flex-grow:1}.col-simple .row,.row-simple .row{flex:1 1 auto;flex-direction:column}.col-simple .col-xs-12,.row-simple .col-xs-12{flex-basis:0}.fill-all{flex:1 1 auto}.col{box-sizing:border-box;display:flex;flex:1 0 auto;flex-direction:column;flex-wrap:wrap;margin-bottom:var(--gutter-compensation, -0.5rem);margin-left:var(--gutter-compensation, -0.5rem)}.xs-col-table,.md-col-table,.lg-col-table{display:none}.xs-hidden,.sm-hidden,.md-hidden,.lg-hidden{display:none}.col-xs-0{box-sizing:border-box;flex-grow:0;padding-right:1rem}.plain-grid{padding:0 !important}.row.reverse{flex-direction:row-reverse}.col.reverse{flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12{box-sizing:border-box;padding-right:1rem}.col-xs{flex-grow:1;flex-basis:0;max-width:100%}.col-xs-1{flex-basis:8.333%;max-width:8.333%}.col-xs-2{flex-basis:16.667%;max-width:16.667%}.col-xs-3{flex-basis:25%;max-width:25%}.col-xs-4{flex-basis:33.333%;max-width:33.333%}.col-xs-5{flex-basis:41.667%;max-width:41.667%}.col-xs-6{flex-basis:50%;max-width:50%}.col-xs-7{flex-basis:58.333%;max-width:58.333%}.col-xs-8{flex-basis:66.667%;max-width:66.667%}.col-xs-9{flex-basis:75%;max-width:75%}.col-xs-10{flex-basis:83.333%;max-width:83.333%}.col-xs-11{flex-basis:91.667%;max-width:91.667%}.col-xs-12{flex-basis:100%;max-width:100%}.col-xs-offset-1{margin-left:8.333%}.col-xs-offset-2{margin-left:16.667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.333%}.col-xs-offset-5{margin-left:41.667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.333%}.col-xs-offset-8{margin-left:66.667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.333%}.col-xs-offset-11{margin-left:91.667%}.start-xs{justify-content:flex-start;text-align:start}.center-xs{justify-content:center;text-align:center}.right-xs{margin-left:auto !important}.end-xs{justify-content:flex-end;margin-left:auto}.top-xs{align-items:flex-start}.middle-xs{align-items:center}.bottom-xs{align-items:flex-end}.around-xs{justify-content:space-around}.between-xs{justify-content:space-between}.first-xs{order:-1}.last-xs{order:1}@media only screen and (min-width: 48em){.sm-hidden{display:revert}.container{width:46rem}.xs-col-table{display:inherit}.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{box-sizing:border-box;flex:0 0 auto;padding-right:1rem}.col-sm{flex-grow:1;flex-basis:0;max-width:100%}.col-sm-1{flex-basis:8.333%;max-width:8.333%}.col-sm-2{flex-basis:16.667%;max-width:16.667%}.col-sm-3{flex-basis:25%;max-width:25%}.col-sm-4{flex-basis:33.333%;max-width:33.333%}.col-sm-5{flex-basis:41.667%;max-width:41.667%}.col-sm-6{flex-basis:50%;max-width:50%}.col-sm-7{flex-basis:58.333%;max-width:58.333%}.col-sm-8{flex-basis:66.667%;max-width:66.667%}.col-sm-9{flex-basis:75%;max-width:75%}.col-sm-10{flex-basis:83.333%;max-width:83.333%}.col-sm-11{flex-basis:91.667%;max-width:91.667%}.col-sm-12{flex-basis:100%;max-width:100%}.col-sm-offset-1{margin-left:8.333%}.col-sm-offset-2{margin-left:16.667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.333%}.col-sm-offset-5{margin-left:41.667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.333%}.col-sm-offset-8{margin-left:66.667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.333%}.col-sm-offset-11{margin-left:91.667%}.start-sm{justify-content:flex-start;text-align:start}.center-sm{justify-content:center;text-align:center}.end-sm{justify-content:flex-end;text-align:end}.top-sm{align-items:flex-start}.middle-sm{align-items:center}.bottom-sm{align-items:flex-end}.around-sm{justify-content:space-around}.between-sm{justify-content:space-between}.first-sm{order:-1}.last-sm{order:1}}@media only screen and (min-width: 62em){.col-simple .row{flex-direction:row}.col-simple .col-xs-12{flex-basis:100%}.md-hidden{display:revert}.container{width:61rem}.md-col-table{display:inherit}.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{box-sizing:border-box;flex:0 0 auto;padding-right:1rem}.col-md{flex-grow:1;flex-basis:0;max-width:100%}.col-md-1{flex-basis:8.333%;max-width:8.333%}.col-md-2{flex-basis:16.667%;max-width:16.667%}.col-md-3{flex-basis:25%;max-width:25%}.col-md-4{flex-basis:33.333%;max-width:33.333%}.col-md-5{flex-basis:41.667%;max-width:41.667%}.col-md-6{flex-basis:50%;max-width:50%}.col-md-7{flex-basis:58.333%;max-width:58.333%}.col-md-8{flex-basis:66.667%;max-width:66.667%}.col-md-9{flex-basis:75%;max-width:75%}.col-md-10{flex-basis:83.333%;max-width:83.333%}.col-md-11{flex-basis:91.667%;max-width:91.667%}.col-md-12{flex-basis:100%;max-width:100%}.col-md-offset-1{margin-left:8.333%}.col-md-offset-2{margin-left:16.667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.333%}.col-md-offset-5{margin-left:41.667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.333%}.col-md-offset-8{margin-left:66.667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.333%}.col-md-offset-11{margin-left:91.667%}.start-md{justify-content:flex-start;text-align:start}.center-md{justify-content:center;text-align:center}.end-md{justify-content:flex-end;text-align:end}.top-md{align-items:flex-start}.middle-md{align-items:center}.bottom-md{align-items:flex-end}.around-md{justify-content:space-around}.between-md{justify-content:space-between}.first-md{order:-1}.last-md{order:1}}@media only screen and (min-width: 75em){.lg-hidden{display:revert}.container{width:71rem}.lg-col-table{display:inherit}.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{box-sizing:border-box;flex:0 0 auto;padding-right:1rem}.col-lg{flex-grow:1;flex-basis:0;max-width:100%}.col-lg-1{flex-basis:8.333%;max-width:8.333%}.col-lg-2{flex-basis:16.667%;max-width:16.667%}.col-lg-3{flex-basis:25%;max-width:25%}.col-lg-4{flex-basis:33.333%;max-width:33.333%}.col-lg-5{flex-basis:41.667%;max-width:41.667%}.col-lg-6{flex-basis:50%;max-width:50%}.col-lg-7{flex-basis:58.333%;max-width:58.333%}.col-lg-8{flex-basis:66.667%;max-width:66.667%}.col-lg-9{flex-basis:75%;max-width:75%}.col-lg-10{flex-basis:83.333%;max-width:83.333%}.col-lg-11{flex-basis:91.667%;max-width:91.667%}.col-lg-12{flex-basis:100%;max-width:100%}.col-lg-offset-1{margin-left:8.333%}.col-lg-offset-2{margin-left:16.667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.333%}.col-lg-offset-5{margin-left:41.667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.333%}.col-lg-offset-8{margin-left:66.667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.333%}.col-lg-offset-11{margin-left:91.667%}.start-lg{justify-content:flex-start;text-align:start}.center-lg{justify-content:center;text-align:center}.end-lg{justify-content:flex-end;text-align:end}.top-lg{align-items:flex-start}.middle-lg{align-items:center}.bottom-lg{align-items:flex-end}.around-lg{justify-content:space-around}.between-lg{justify-content:space-between}.first-lg{order:-1}.last-lg{order:1}}.hl-1{background:var(--color-red) !important;color:#fff}.hl-2{background:var(--color-green) !important;color:#fff}.hl-3{background:var(--color-blue) !important;color:#fff}.hl-4{background:var(--color-yellow) !important;color:#000}.hl-5{background:var(--color-purple) !important;color:#fff}.hl-6{background:var(--color-pink) !important;color:#fff}.hl-7{background:var(--color-orange) !important;color:#fff}.portlet-body>article{padding:0}article{background:#fff;padding:10px;margin:0;font-size:.9rem;color:#000;line-height:2rem;white-space:normal}article del,article ins,article mark{padding:3px;text-decoration:none}article .tag{margin:0.1rem}article del{background:#ff9e9e}article ins{background:#b0f3b0}article mark{background:#f9ffa1}article h1,article h2,article h3,article h4,article h5,article h6{font-weight:300}article h1{font-size:1.4rem}article h2{font-size:1.3rem}article h3{font-size:1.1rem}article h4,article h5,article h6{font-size:1rem}article a{color:var(--link-c);border-bottom:1px dotted var(--link-c)}article a:hover{border-bottom:none}article p{line-height:1.5em}article ol,article ul{list-style-position:outside;margin:0.5rem 0 0.5rem 3rem;line-height:1rem}article ul{list-style:disc}article li{margin:0.3rem 0 0.3rem 0;line-height:1.5em}article img{display:block;margin:0 auto;max-width:100%;max-height:100%;display:inline-block}article img:focus{margin-left:auto;margin-right:auto;left:0;right:0;text-align:center;width:auto;height:auto}article img[tabindex="0"]{cursor:pointer}article table{border-collapse:collapse;border:1px solid var(--bborder);margin:0 auto;margin-bottom:1rem;min-width:90%}article table th,article table td{padding:5px;border:1px solid var(--bborder)}article table th{background:var(--thead-bg);color:var(--thead-c)}article table tr:nth-child(2n) td{background:var(--trow-bg)}.ipt-wrap{display:table;vertical-align:top;box-sizing:border-box}.ipt-wrap .ipt-start,.ipt-wrap .ipt-second,.ipt-wrap .ipt-first{display:table-cell;vertical-align:inherit}.ipt-wrap .ipt-first{width:100%}.ipt-wrap .ipt-second{padding-left:.75rem}.flex-line{display:flex;flex-direction:row}.flex-line+*{margin-top:.75rem}.flex-line>div{flex:1}.flex-line>div:nth-child(n+2){padding-left:.75rem}.flex-line>div.fixed{flex:0;flex-basis:auto}div.sticky,section.sticky{position:sticky;top:1rem}.inline{display:inline}.form-group{display:flex;flex-direction:row;flex-wrap:wrap}.form-group>*:not(label){flex:0 1 auto}.form-group+*{margin-top:.75rem}.form-group label{font-size:.9rem;flex:0 0 100%;display:inline-flex;align-items:center}.form-group label>i{margin-right:.5rem}.form-group span.checkbox+span.checkbox{margin-left:1.5rem}.form-group .input-control{flex:1;display:flex;flex-direction:row;flex-wrap:wrap}.form-group .input-control+.input-control{margin-left:1rem}.form-group textarea,.form-group .contenteditable{height:8rem}@media (max-width: 768px){.form-group,.flex-line{flex-direction:column}.form-group .input-control+.input-control{margin-top:1rem;margin-left:0}}.wf-100{width:100%}.wf-80{width:80%}.wf-20{width:20%}.wf-66{width:66.66%}.wf-50{width:50%}.wf-33{width:33.33%}.wf-25{width:25%}.wf-75{width:75%}.spacer{padding:5px}.resizable{resize:both;overflow:auto}*[draggable]{cursor:move}.oms-drag-placeholder,.oms-drag-placeholder td{border:2px dashed rgba(0,0,0,0.5) !important}.blurry-text{text-shadow:0 0 .9rem #000;color:transparent}.tooltip{cursor:pointer;color:var(--box-hl);font-size:.9rem}.tooltip:hover,.tooltip:active,.tooltip:focus{position:relative}.tooltip:hover:after,.tooltip:hover:before,.tooltip:active:after,.tooltip:active:before,.tooltip:focus:after,.tooltip:focus:before{font-size:.9rem;display:block;position:absolute;white-space:nowrap;bottom:100%;margin-bottom:5px;padding:7px;border-radius:3px;background-color:#474747;color:#fff;content:attr(data-tooltip);text-align:center;transform:translate(-45%, 0)}.spinner-1{width:40px;height:40px;background-color:#333;margin:50px auto;animation:sk-rotateplane 1.2s infinite ease-in-out}@keyframes sk-rotateplane{0%{transform:perspective(120px)}50%{transform:perspective(120px) rotateY(180deg)}100%{transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes sk-rotateplane{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.spinner-2{text-align:center}.spinner-2>div{width:18px;height:18px;background-color:#333;border-radius:100%;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner-2 .bounce1{animation-delay:-0.32s}.spinner-2 .bounce2{animation-delay:-0.16s}@keyframes sk-bouncedelay{0%, 80%, 100%{transform:scale(0)}40%{transform:scale(1)}}@keyframes sk-bouncedelay{0%, 80%, 100%{transform:scale(0)}40%{transform:scale(1)}}.spinner-3{width:40px;height:40px;margin:50px auto;background-color:#333;border-radius:100%;animation:sk-scaleout 1.0s infinite ease-in-out}@keyframes sk-scaleout{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}@keyframes sk-scaleout{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}canvas{background:#fff;user-select:none}canvas.chart{width:100%}form li{margin:5px 0 5px 0}form td{white-space:nowrap;padding-bottom:5px}form td textarea+i{vertical-align:top}form label{font-size:.9rem;color:#000}form i+i{margin-left:3px}form .layout td+td{padding-left:5px}form .list{font-size:1rem}form .list td{white-space:nowrap;padding:3px 5px 3px 5px}img.frame-1{padding:1rem;background:#fff;border:1px solid var(--bborder);box-sizing:border-box;width:100%}img.frame-2{border:1px solid var(--bborder);background:#fff;box-sizing:border-box;width:100%}img.rounded{border-radius:50%;background:#fff}img.bordered{border:1px solid var(--bborder)}.img-comp{margin-left:3rem;position:relative;display:inline-block;line-height:0;overflow:auto}.img-comp img{user-select:none}.img-comp>div{position:absolute;width:50%;max-width:100%;overflow:hidden;resize:horizontal;border-right:1px solid #000}.img-comp>div:before{content:'';display:block;width:13px;height:13px;overflow:hidden;position:absolute;resize:horizontal;right:0;bottom:0;background-clip:content-box;background:linear-gradient(-45deg, red 50%, transparent 0)}.gallery{max-width:80%;margin:0 auto;position:relative}.gallery input+.enlarged{display:none}.gallery input:checked+.enlarged{display:block}.gallery .enlarged{position:absolute;top:0;left:0}.gallery .enlarged img{max-width:100%;max-height:100%;object-fit:contain}.gallery input{display:none}.gallery input+img{display:none}.gallery input:checked+img{display:block;margin:0 auto;max-width:100%;max-height:100%;width:auto;height:auto}.gallery .thumbs img{width:100px;height:100px;margin:.3rem;border:1px solid #ccc}.gallery label{cursor:pointer}.map-small .map,.olMapViewport{width:100%;height:100%;min-height:250px;position:relative}.map-small .map .olControlAttribution,.olMapViewport .olControlAttribution{position:absolute;bottom:0;right:0;background:#fff;padding:2px;font-size:.8rem}.map-small .map .olButton,.olMapViewport .olButton{color:#fff}input,select,textarea,.textarea,option{font-family:var(--ff);font-weight:300}input[type=checkbox] ~ .checked-visibility,input[type=checkbox]:checked ~ .checked-visibility-alt{display:none}input[type=checkbox]:checked ~ .checked-visibility,input[type=checkbox] ~ .checked-visibility-alt{display:inline-block}input,select,textarea,.textarea{border:1px solid var(--iborder)}input.undecorated,select.undecorated,textarea.undecorated,.textarea.undecorated{padding:0;border:none;background:transparent;resize:none}input:active.undecorated,input:focus.undecorated,select:active.undecorated,select:focus.undecorated,textarea:active.undecorated,textarea:focus.undecorated,.textarea:active.undecorated,.textarea:focus.undecorated{appearance:none;outline:none;border-style:none}progress{height:20px;width:100%;min-width:150px}.textarea,.tag-input,textarea,select,input[type="password"],input[type="text"],input[type="datetime"],input[type="email"],input[type="date"],input[type="number"],input[type="datetime-local"]{box-sizing:border-box;color:var(--ipt-c);background:var(--ipt-bg);width:100%;max-width:100%;font-size:.9rem;border:1px solid var(--iborder);transition:background 0.3s, border 0.3s}.textarea:focus,.textarea .active,.textarea:active,.tag-input:focus,.tag-input .active,.tag-input:active,textarea:focus,textarea .active,textarea:active,select:focus,select .active,select:active,input[type="password"]:focus,input[type="password"] .active,input[type="password"]:active,input[type="text"]:focus,input[type="text"] .active,input[type="text"]:active,input[type="datetime"]:focus,input[type="datetime"] .active,input[type="datetime"]:active,input[type="email"]:focus,input[type="email"] .active,input[type="email"]:active,input[type="date"]:focus,input[type="date"] .active,input[type="date"]:active,input[type="number"]:focus,input[type="number"] .active,input[type="number"]:active,input[type="datetime-local"]:focus,input[type="datetime-local"] .active,input[type="datetime-local"]:active{border-color:var(--ipt-bg-active);border:1px solid var(--iborder-active);color:var(--ipt-c-active)}.textarea:disabled,.textarea:readonly,.tag-input:disabled,.tag-input:readonly,textarea:disabled,textarea:readonly,select:disabled,select:readonly,input[type="password"]:disabled,input[type="password"]:readonly,input[type="text"]:disabled,input[type="text"]:readonly,input[type="datetime"]:disabled,input[type="datetime"]:readonly,input[type="email"]:disabled,input[type="email"]:readonly,input[type="date"]:disabled,input[type="date"]:readonly,input[type="number"]:disabled,input[type="number"]:readonly,input[type="datetime-local"]:disabled,input[type="datetime-local"]:readonly{cursor:not-allowed;background:#efefef}.textarea,.tag-input,textarea,select:not([multiple]),input[type="password"],input[type="text"],input[type="datetime"],input[type="email"],input[type="date"],input[type="number"],input[type="datetime-local"]{height:30px;padding-left:.5rem}.inputWithIcon{position:relative}.inputWithIcon .frontIco,.inputWithIcon .endIco{color:var(--ipt-ico-c);font-size:1rem;position:absolute;padding:.5rem;font-weight:200}.inputWithIcon .frontIco{left:0;top:0}.inputWithIcon .endIco{right:0;top:0}.inputWithIcon .frontIco+input[type="text"],.inputWithIcon .frontIco+input[type="password"]{padding-left:2.5rem}.inputWithIcon input[type=text]:active,.inputWithIcon input[type=text]:focus,.inputWithIcon input[type=password]:active,.inputWithIcon input[type=password]:focus{border:1px solid var(--iborder-active);color:var(--txt-on-bg-c)}.inputWithIcon input[type=text]:active ~ .frontIco,.inputWithIcon input[type=text]:focus ~ .frontIco,.inputWithIcon input[type=password]:active ~ .frontIco,.inputWithIcon input[type=password]:focus ~ .frontIco,.inputWithIcon input[type=text]:active ~ .endIco,.inputWithIcon input[type=text]:focus ~ .endIco,.inputWithIcon input[type=password]:active ~ .endIco,.inputWithIcon input[type=password]:focus ~ .endIco{color:var(--ipt-ico-c-active)}.inputWithIcon input[type=text] ~ .endIco,.inputWithIcon input[type=text] ~ .endIco,.inputWithIcon input[type=password] ~ .endIco,.inputWithIcon input[type=password] ~ .endIco{cursor:pointer}.inputWrapper{display:inline-flex;flex-direction:row}.inputWrapper .txtWrap+input[type=submit],.inputWrapper .txtWrap+input[type=button],.inputWrapper .txtWrap+button{margin:0;padding:0;flex:0;box-shadow:none}.inputWrapper .frontIco,.inputWrapper .endIco{color:var(--ipt-ico-c);font-size:1.1rem;font-weight:200;position:absolute;top:0;padding:.25rem .6rem .6rem .4rem}.inputWrapper .frontIco{left:0;font-size:1.5rem}.inputWrapper .endIco{right:0;font-size:1.5rem}.inputWrapper .txtWrap{flex:1;position:relative}.inputWrapper .txtWrap i+input{padding-left:2rem}.inputWrapper .txtWrap input[type=text]:active,.inputWrapper .txtWrap input[type=text]:focus,.inputWrapper .txtWrap input[type=password]:active,.inputWrapper .txtWrap input[type=password]:focus{border:1px solid var(--iborder-active)}.inputWrapper .txtWrap input[type=text]:active ~ .frontIco,.inputWrapper .txtWrap input[type=text]:focus ~ .frontIco,.inputWrapper .txtWrap input[type=password]:active ~ .frontIco,.inputWrapper .txtWrap input[type=password]:focus ~ .frontIco,.inputWrapper .txtWrap input[type=text]:active ~ .endIco,.inputWrapper .txtWrap input[type=text]:focus ~ .endIco,.inputWrapper .txtWrap input[type=password]:active ~ .endIco,.inputWrapper .txtWrap input[type=password]:focus ~ .endIco{color:var(--ipt-ico-c-active)}.inputWrapper .txtWrap input[type=text] ~ .endIco,.inputWrapper .txtWrap input[type=text] ~ .endIco,.inputWrapper .txtWrap input[type=password] ~ .endIco,.inputWrapper .txtWrap input[type=password] ~ .endIco{cursor:pointer}.clickPopup>input{display:none}.clickPopup label+input,.clickPopup input[type="checkbox"]{display:none}.clickPopup .more-functions{padding:0 1rem 0 1rem}.clickPopup .popup{box-sizing:border-box;padding:.5rem 1rem .5rem 1rem;background:#fff;box-shadow:0 0 3px 1px rgba(72,71,114,0.3);right:0}.clickPopup .popup ul{width:100%}.clickPopup .popup>ul{display:flex;flex-direction:column}.clickPopup .popup>ul>li{display:flex;align-items:center;margin:.5rem 0 .5rem 0;white-space:nowrap}.clickPopup .popup .button{margin-right:1rem}.clickPopup .popup span{flex-grow:1}.clickPopup .popup input[type="checkbox"]:checked+ul .expand{transition:all .3s ease;display:inherit;transform:rotateZ(90deg)}.clickPopup .popup input[type="checkbox"]:checked+ul>li:nth-child(n+2){display:inherit}.clickPopup .popup input+ul .expand{font-size:.9rem;transition:all .3s ease;transform:rotateZ(0deg)}.clickPopup .popup input+ul>li:nth-child(n+2){display:none}.clickPopup .popup label{display:flex;align-items:center;cursor:pointer}.clickPopup .popup>li{display:block}.clickPopup .popup>li a{display:block}.clickPopup .popup i{flex-grow:0}input ~ .popup{position:absolute;display:none;z-index:3}input:checked ~ .popup,input ~ .popup.active{display:inline-block}select{cursor:pointer;padding:0 7px 0 7px}option{line-height:1rem}input[type="file"]{border:1px solid var(--iborder-active);width:100%;max-width:100%;color:var(--ipt-c);padding:10px;box-sizing:border-box}input::placeholder{font-family:'FontAwesome', serif;color:var(--ipt-ico-c);opacity:0.5}textarea:invalid,input:invalid{transition:all 0.5s !important;border-color:#f00 !important}textarea:invalid ~ i.ok,input:invalid ~ i.ok{display:none !important}textarea:invalid ~ i.error,input:invalid ~ i.error{display:inline-block !important}input:valid ~ i.ok{display:inline-block !important}input:valid ~ i.error{display:none !important}textarea,.textarea{overflow:auto;resize:both;box-sizing:border-box;padding:.3rem .3rem .3rem .5rem}label.radio,label.checkbox{display:inline-flex;align-items:center;user-select:none;cursor:pointer}label.radio input,label.checkbox input{margin:0;opacity:0;cursor:pointer}label.radio input:checked ~ .checkmark,label.checkbox input:checked ~ .checkmark{background-color:var(--btn-c-bg)}label.radio input:required ~ .checkmark,label.radio input:disabled ~ .checkmark,label.radio input:readonly ~ .checkmark,label.checkbox input:required ~ .checkmark,label.checkbox input:disabled ~ .checkmark,label.checkbox input:readonly ~ .checkmark{background-color:#adadad}label.radio input:checked ~ .checkmark:after,label.checkbox input:checked ~ .checkmark:after{display:block}label.radio .checkmark,label.checkbox .checkmark{position:relative;height:15px;width:15px;margin-right:5px;background-color:#eee;border:1px solid var(--iborder-active)}label.radio .checkmark:after,label.checkbox .checkmark:after{content:"";position:absolute;display:none}label.radio:hover input ~ .checkmark,label.checkbox:hover input ~ .checkmark{cursor:pointer}label.radio .checkmark{border-radius:50%}label.radio .checkmark:after{top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:#fff}label.checkbox .checkmark:after{top:2px;left:4px;width:4px;height:6px;border:solid white;border-width:0 3px 3px 0;transform:rotate(45deg)}input[type="range"]{border:none;width:100%;min-width:150px;height:5px;background:var(--btn-c-bg);cursor:pointer}.input{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap}.input button{box-sizing:border-box;background:var(--btn-c-bg);height:30px;font-size:1rem;min-width:40px;border-left:solid 1px var(--iborder);border-top:solid 1px var(--iborder);border-bottom:solid 1px var(--iborder);border-right:none;padding:0;position:relative;vertical-align:middle;flex-grow:0;flex-shrink:0}.input button:hover,.input button:focus{background:var(--btn-c-bg-hover)}.input button.inactive{background:#ccc;cursor:default}.input button.inactive:hover,.input button.inactive:focus{background:#ccc}.input input{box-sizing:border-box;position:relative;vertical-align:middle;flex-grow:1;flex-shrink:1}select.plain{width:auto;margin:0;padding:0;border:none;outline:none;display:inline-block;appearance:none;cursor:pointer;box-shadow:none}.dropdown{cursor:pointer;display:inline-block;width:100%;border:1px solid #000;position:relative;box-shadow:none;outline:0;margin:0;font-family:inherit;font-size:.9rem;user-select:none}.dropdown:hover{background:#f00}.dropdown label{cursor:pointer;user-select:none}.dropdown>input{display:none}.dropdown>input:checked+.dropdown-container{display:block;background:#fff;border:1px solid #000;position:absolute}.dropdown>input:checked+.dropdown-container label{display:flex;align-items:center}.dropdown>input:checked+.dropdown-container label:hover{background:#f00}.dropdown-closed{display:flex;height:100%;align-items:center}.dropdown-closed label{display:none}.dropdown-closed input{display:none}.dropdown-closed input:checked+label{display:flex;align-items:center}.dropdown-container{display:none;z-index:2}.dropdown-container label{padding:.5rem}.ac-container{text-align:left;border:1px solid #c9c9c9}.ac-container>input{display:none}.ac-container>input:checked+label{background:var(--btn-c-bg);color:var(--txt-on-bg-c-2)}.ac-container>input:checked+label+section{display:inherit}.ac-container>input:checked+label:hover{background:var(--btn-c-bg-hover)}.ac-container>input+label+section{display:none}.ac-container label{display:block;padding:1rem 1rem;position:relative;z-index:20;margin-top:-1px;cursor:pointer;color:#000;font-size:1rem;background:var(--bborder)}.ac-container label:hover{color:var(--txt-on-bg-c-2);background:var(--btn-c-bg-hover)}.ac-container>section{background:#fff;overflow:hidden;height:auto;position:relative;z-index:10;padding:1rem}.more-container>label{width:100%;display:flex;flex-direction:row;border-bottom:1px solid var(--bborder);cursor:pointer;color:var(--link-c);user-select:none}.more-container>label .expand{transition:all .3s ease;transform:rotateZ(0deg)}.more-container>label span{flex-grow:1}.more-container>label i{flex-grow:0}.more-container>input{display:none}.more-container>input:checked+label{border-bottom:none;margin-bottom:1rem}.more-container>input:checked+label .expand{transition:all .3s ease;transform:rotateZ(90deg)}.more-container>input:checked ~ div{display:block}.more-container>div{display:none}.log-lvl-ok{background:#aaffad;border:1px solid #81e27d;color:#459442}.log-lvl-warning{background:#f8ffa8;border:1px solid #d6d949;color:#94972f}.log-lvl-error{background:#ff7d79;border:1px solid #ee5649;color:#a5302a}.log-lvl-info{background:#b6d2ff;border:1px solid #85b0ee;color:#4865a5}#dim{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;z-index:5}#app-message-container{position:absolute;margin:0 auto;right:10px;top:85px;padding:0}#app-message-container .log-msg{z-index:11;margin:0 auto;right:0;top:0;margin-bottom:10px}.log-msg{position:relative;max-width:250px;padding:1rem;margin:1rem}.log-msg .close{position:absolute;top:5px;right:5px}.slider{overflow-x:auto;white-space:nowrap}.slider ul{display:inline}@keyframes slidy{0%{left:0%}20%{left:0%}25%{left:-100%}45%{left:-100%}50%{left:-200%}70%{left:-200%}75%{left:-300%}95%{left:-300%}100%{left:-400%}}.slider-1{overflow:hidden}.slider-1 figure{position:relative;width:500%;margin:0;left:0;text-align:left;font-size:0;animation:30s slidy infinite}.slider-1 figure img{width:20%;float:left}.slider-2{width:100%;position:relative;text-align:center}.slider-2>img{width:100%;position:absolute;left:0;top:0;transition:all 0.5s}.slider-2 input{display:none}.slider-2 input:checked+label{border-color:#666;opacity:1}.slider-2 input:checked+label+img{opacity:1;transform:scale(1)}.slider-2 input ~ img{opacity:0;transform:scale(0.9)}.slider-2 label{display:inline-block;margin-top:calc(50% + 15px);margin-left:15px;border:3px solid #999;cursor:pointer;opacity:0.6}.slider-2 label img{display:block}.slider-3{display:flex;align-items:center;justify-content:center;flex-direction:column}.slider-3 .icon-cards{position:relative;width:60vw;height:40vw;max-width:380px;max-height:250px;margin:0;perspective:1000px}.slider-3 .icon-cards-content{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transform:translateZ(-30vw) rotateY(0);animation:carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards}.slider-3 .icon-cards-item{position:absolute;top:0;left:0;max-width:380px;max-height:250px}.slider-3 .icon-cards-item:nth-child(1){transform:rotateY(0) translateZ(35vw)}.slider-3 .icon-cards-item:nth-child(2){transform:rotateY(120deg) translateZ(35vw)}.slider-3 .icon-cards-item:nth-child(3){transform:rotateY(240deg) translateZ(35vw)}.slider-3 .icon-cards img{width:100%}@keyframes carousel{0%, 17.5%{transform:translateZ(-35vw) rotateY(0)}27.5%, 45%{transform:translateZ(-35vw) rotateY(-120deg)}55%, 72.5%{transform:translateZ(-35vw) rotateY(-240deg)}82.5%, 100%{transform:translateZ(-35vw) rotateY(-360deg)}}.crumbs-1,.crumbs-2{list-style:none;overflow:hidden;font-size:1rem;user-select:none}.crumbs-1 li,.crumbs-2 li{background:#fff;border-left:1px solid var(--bborder);border-top:1px solid var(--bborder);border-bottom:1px solid var(--bborder);padding:0 10px 0 20px;height:2.5rem;position:relative;display:inline-flex;align-items:center;cursor:pointer}.crumbs-1 li:after,.crumbs-1 li:before,.crumbs-2 li:after,.crumbs-2 li:before{content:" ";display:block;width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:14px solid #fff;position:absolute;top:50%;margin-top:-20px;left:100%}.crumbs-1 li:after,.crumbs-2 li:after{z-index:1}.crumbs-1 li:before,.crumbs-2 li:before{border-left-color:var(--bborder);margin-left:1px;z-index:1}.crumbs-1 li.active:after,.crumbs-1 li:hover:after,.crumbs-2 li.active:after,.crumbs-2 li:hover:after{color:var(--txt-on-bg-c-2)}.crumbs-1 li.active:after,.crumbs-2 li.active:after{border-left:14px solid var(--btn-c-bg)}.crumbs-1 li:hover:after,.crumbs-2 li:hover:after{border-left:14px solid var(--btn-c-bg-hover)}.crumbs-1 .active,.crumbs-2 .active{cursor:default;background:var(--btn-c-bg)}.crumbs-1 .active,.crumbs-1 li:hover,.crumbs-2 .active,.crumbs-2 li:hover{color:var(--txt-on-bg-c-2)}.crumbs-1 li:hover,.crumbs-2 li:hover{background:var(--btn-c-bg-hover)}.crumbs-1 li:not(:last-child):after,.crumbs-1 li:before{content:" ";display:block;width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:14px solid #fff;position:absolute;top:50%;margin-top:-20px;left:100%}.crumbs-1 li.active:not(:last-child):after,.crumbs-1 li:hover:not(:last-child):after{color:var(--txt-on-bg-c-2)}.crumbs-1 li.active:not(:last-child):after{border-left:14px solid var(--btn-c-bg)}.crumbs-1 li:hover:not(:last-child):after{border-left:14px solid var(--btn-c-bg-hover)}.crumbs-1 :last-child:before{border:none}.btn,.link,[data-href]{cursor:pointer}button,input[type="submit"],input[type="reset"],input[type="button"],label.button,a.button{cursor:pointer;display:inline-flex;min-width:70px;background:var(--btn-c-bg);color:var(--txt-on-bg-c-2);padding:0 1rem 0 1rem;flex-grow:0;height:30px;border:1px solid var(--bborder);box-shadow:none;justify-content:center;align-items:center;outline:0;font-family:inherit;font-size:.9rem;user-select:none;font-weight:100;box-sizing:border-box}button::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,label.button::-moz-focus-inner,a.button::-moz-focus-inner{border:0}button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,label.button:hover,a.button:hover{background:var(--btn-c-bg-hover);color:var(--txt-on-bg-c-2)}button.save,.button.save,input[type="submit"].save{color:rgba(0,0,0,0.75);background:#8fff79}button.save:hover,button.save:focus,.button.save:hover,.button.save:focus,input[type="submit"].save:hover,input[type="submit"].save:focus{background:#a1ffa1}button.cancel,.button.cancel,input[type="submit"].cancel{background:#ee5649}button.cancel:hover,button.cancel:focus,.button.cancel:hover,.button.cancel:focus,input[type="submit"].cancel:hover,input[type="submit"].cancel:focus{background:#ff7d79}button.close,.button.close,input[type="submit"].close,input[type="reset"].close{color:rgba(0,0,0,0.75);background:#ffde5b}button.close:hover,button.close:focus,.button.close:hover,.button.close:focus,input[type="submit"].close:hover,input[type="submit"].close:focus,input[type="reset"].close:hover,input[type="reset"].close:focus{background:#ffe682}button.disabled,.button.disabled,input[type="submit"].disabled{color:rgba(0,0,0,0.5);background:#e1e1e1;cursor:not-allowed}button.disabled:hover,button.disabled:focus,.button.disabled:hover,.button.disabled:focus,input[type="submit"].disabled:hover,input[type="submit"].disabled:focus{background:#e1e1e1}.link.default{color:var(--btn-c-bg)}.link.save{color:#8fff79}.link.cancel{color:#ee5649}.link.close{color:#fffc3e}.link.disabled{color:#e1e1e1}i.favorite{color:#ffd700;text-shadow:0 0 1px #000}.unseen{font-weight:bold}.portlet-body a:not(.button),a.content,a .content{color:var(--link-c);border-bottom:1px dotted var(--link-c)}.portlet-body a:not(.button):hover,a.content:hover,a .content:hover{border-bottom:1px dotted transparent}ul.boxed{background:#fff;padding:5px;border:1px solid var(--bborder)}ul.boxed li{margin:5px 0 5px 0}ul.boxed li:first-child{margin-top:0}ul.boxed li:last-child{margin-bottom:0}ul.h-list li{display:inline-block;margin:5px 10px 5px 10px}ul.foldable{list-style-type:none;margin:0;padding:0}ul.foldable ul{margin-left:1rem}ul.foldable input[type="checkbox"],ul.foldable .nested{display:none}ul.foldable .caret{cursor:pointer;user-select:none}ul.foldable .caret::before{content:"\25B6";color:black;display:inline-block;margin-right:6px}ul.foldable input[type="checkbox"]:checked ~ .nested{display:block}ul.foldable input[type="checkbox"]:checked ~ .caret::before{transform:rotate(90deg)}ul.foldable ul{list-style-type:none}.nav-top{user-select:none;margin-top:1rem;display:block}.nav-top>li>a{border:1px solid var(--bborder);margin-right:.5rem;display:inline-block;padding:10px 10px}.nav-top li{display:inline-block}.nav-top li a{background:#fff;position:relative;cursor:pointer}.nav-top li a:hover,.nav-top li a.active,.nav-top li a:focus{background:var(--nav-content-hover);color:var(--txt-on-bg-c-2)}.nav-top li a:hover>ul,.nav-top li a.active>ul,.nav-top li a:focus>ul{display:block;opacity:1;visibility:visible}.nav-top li a>ul{padding:0;z-index:5;position:absolute;top:36px;left:0;width:150px;display:none;opacity:0;visibility:hidden}.nav-top li a>ul li{display:block;color:#000;padding:7px}.nav-top li a>ul li:hover,.nav-top li a>ul li:focus{color:#252525;background:var(--nav-content-hover)}.nav-trigger{position:absolute;display:none}.nav-trigger:checked+nav{width:0%}@media only screen and (max-width: 62em){.nav-trigger:not(:checked)+nav{width:0%}.nav-trigger:checked+nav{width:auto;min-width:250px}}@media only screen and (max-width: 48em){.nav-trigger:checked+nav{width:100% !important}.nav-trigger:checked ~ main{display:none !important}}.pagination li,.pagination a{display:inline-block}.pagination li+li{margin-left:.5rem}.pagination a{border-radius:3px;background:#ccc;padding:5px 10px 5px 10px}.pagination .active,.pagination a:hover,.pagination a:active{color:#000;background:#fff}.meter{height:15px;position:relative;background:none !important}.meter>span{display:block;height:100%;border-radius:3px;background-color:#459442;background-image:linear-gradient(to left top, color-stop(0, #459442), color-stop(1, #81e27d));position:relative;overflow:hidden}.meter.orange>span{background-color:#f1a165;background-image:linear-gradient(#f1a165, #f36d0a)}.meter.blue>span{background-color:#85b0ee;background-image:linear-gradient(#85b0ee, #4865a5)}.meter.red>span{background-color:#ee5649;background-image:linear-gradient(#ee5649, #a5302a)}.meter>span:after,.meter .animate>span>span{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background-image:linear-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255,255,255,0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.75, rgba(255,255,255,0.2)), color-stop(0.75, transparent), to(transparent));background-image:linear-gradient(-45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);z-index:1;overflow:hidden}.animate>span:after{display:none}@keyframes move{0%{background-position:0 0}100%{background-position:50px 50px}}.noanimation>span>span,.noanimation>span:after{animation:none}.nostripes>span>span,.nostripes>span:after{animation:none;background-image:none}.emptyPage{width:80%;font-size:15rem;margin:0 auto;margin-top:3rem;text-align:center;border:5px solid rgba(92,2,2,0.1)}.emptyPage:before{font-family:'Material Symbols Outlined', serif;content:'question_mark';color:rgba(0,0,0,0.1)}.box{box-sizing:border-box;margin-top:1rem;overflow-x:auto}.box .inner{box-sizing:border-box;padding:10px}.box-container{display:inline-block}section header>h1{margin:10px 10px 0 10px;padding-bottom:5px;font-size:1.1em;border-bottom:1px solid #e1e1e1}section>h2{box-sizing:border-box;font-size:1.2em;margin-bottom:5px}section.box{background:#fff;border:1px solid var(--bborder)}.pagebreak{display:none}.tabview.right>.box{order:2}.tab-links{color:#000;padding:5px 0 0 0}.tab-links label{font-size:0.9em;user-select:none;cursor:pointer;border:1px solid var(--btn-c-bg);white-space:nowrap}.tab-links label:hover,.tab-links label:focus{color:var(--txt-on-bg-c-2);background:var(--btn-c-bg-hover);border:1px solid var(--btn-c-bg-hover);outline:none}.tab-links .active label:hover,.tab-links .active label:focus{color:var(--txt-on-bg-c-2);background:var(--btn-c-bg-hover);border:1px solid var(--btn-c-bg-hover);outline:none}.tab-links .active label{cursor:default}.tab-links li{display:inline-block}.tab-content{display:flex;flex:1}.tab-content>input,.tab-content>input+div{display:none}.tab-content>input:checked+div{display:flex;flex:1;flex-direction:column}.tab{max-width:100%}.tab-1 .tab-links{margin:0 0 10px 1px}.tab-1 .tab-links label{padding:5px;background:none;overflow:auto;background:#fff}.tab-1 .tab-links .active,.tab-1 .tab-links .active label{color:var(--txt-on-bg-c-2);background:var(--btn-c-bg)}.tab-1 .tab-links li{margin:0 5px 0 0}.tab-1 .tab{max-width:100%}.tab-1 .tab-content{box-sizing:border-box;border:1px solid var(--btn-c-bg);background:#fff;padding:10px}.tab-1.left,.tab-1.right{display:flex}.tab-1.left .tab-links,.tab-1.right .tab-links{margin:0;border:none}.tab-1.left .tab-links li,.tab-1.right .tab-links li{display:block;margin-bottom:20px}.tab-1.left .tab-links .active label,.tab-1.right .tab-links .active label{border:1px solid var(--bborder)}.tab-1.left .tab-content,.tab-1.right .tab-content{width:100%}.tab-2{display:flex;flex:1;flex-direction:column}.tab-2 .tab{max-width:100%}.tab-2 .tab-links label{padding:5px 10px 5px 10px}.tab-2 .tab-links li{margin:0 5px 15px 0}.tab-2 .tab-links .active a,.tab-2 .tab-links .active label{color:var(--txt-on-bg-c-2);background:var(--btn-c-bg)}.tab-2.left,.tab-2.right{flex-direction:row}.tab-2.left .tab-links,.tab-2.right .tab-links{margin:0;border:none}.tab-2.left .tab-links li,.tab-2.right .tab-links li{display:block;margin-bottom:20px}.tab-2.left .tab-links .active label,.tab-2.right .tab-links .active label{border:1px solid var(--bborder)}.tab-2.left .tab-content,.tab-2.right .tab-content{width:100%}.order-up,.order-down,.remove-form,.update-form,.save-form,.form-action{color:var(--btn-c-bg)}thead input[type=radio]{padding:0;margin:0;display:none}thead label,thead span{display:inline-flex;align-items:center}thead label>a,thead span>a{display:inline-flex;align-items:center}table.fixed{table-layout:fixed}table input[type=radio]:checked+i,table input[type=checkbox]:checked+label i{color:var(--btn-c-bg)}table .order-up,table .order-down{cursor:pointer}table .sort-asc,table .sort-desc,table .filter{padding:0;cursor:pointer}table:not([id])>thead .sort-asc,table:not([id])>thead .sort-desc{display:none}table.default{width:100%;max-width:100%;font-size:0.9em;box-sizing:border-box}table.default .disabled,table.default .empty{color:#d8d8d8}table.default .empty{text-align:center}table.default caption{font-size:1.5rem;font-weight:400;border-bottom:1px solid var(--bborder);background:var(--tcaption-bg);padding:.5rem;text-align:left}table.default caption i{font-size:.8rem}table.default tr,table.default caption{height:2.5rem}table.default td,table.default th{padding:3px 5px 3px 5px;white-space:nowrap}table.default td:first-child,table.default th:first-child{padding-left:10px}table.default td:last-child,table.default th:last-child{padding-right:10px}table.default tbody th,table.default tfoot th{text-align:left}table.default tbody th[colspan]:not([colspan="1"]),table.default tfoot th[colspan]:not([colspan="1"]){text-align:center}table.default tbody a,table.default tfoot a{display:inline-flex;align-items:center}table.default tbody a i,table.default tfoot a i{margin-right:.5rem}table.default tbody td,table.default tbody th{border-bottom:1px solid #ebedf2}table.default tbody tr:last-child td,table.default tbody tr:last-child th{border:none}table.default tbody tr:nth-of-type(2n){background:var(--trow-bg)}table.default tbody tr:nth-of-type(2n+1){background:var(--trow-bg-alt)}table.default tbody tr:hover td,table.default tbody tr:focus td{background:var(--trow-bg-hover);color:#000}table.default tbody tr:focus,table.default tbody tr:hover{outline:none;transform:scale(1);box-shadow:0 0 5px var(--bborder);color:#000}table.default thead{background:var(--thead-bg);color:var(--thead-c)}table.default thead td{border-bottom:1px solid #ebedf2}table.default thead input[type=radio]{display:none}table.default thead input[type=radio]:checked+label{color:var(--box-hl)}table.sticky thead th,table.sticky thead td{position:sticky;top:0;z-index:2}table.sticky thead th>*,table.sticky thead td>*{vertical-align:middle}table.list th{text-align:left;padding:2px 0 2px 0}table.list td{padding:2px 5px 2px 5px}.fixed-1 td:nth-child(1){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fixed-2 td:nth-child(2){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fixed-3 td:nth-child(3){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fixed-4 td:nth-child(4){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fixed-5 td:nth-child(5){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fixed-6 td:nth-child(6){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fixed-7 td:nth-child(7){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fixed-8 td:nth-child(8){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fixed-9 td:nth-child(9){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fixed-10 td:nth-child(10){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media screen and (max-width: 600px){table.popupTable{display:table;width:100%}table.popupTable thead{display:none}table.popupTable tbody tr{height:auto;display:block;margin-bottom:.625em}table.popupTable tbody td{display:flex;font-size:.8rem;height:2rem;line-height:2rem;text-overflow:ellipsis;overflow:hidden;max-width:100%}table.popupTable tbody td:before{content:attr(data-label);margin-right:10px;font-weight:bold}table.popupTable tfoot{display:none}}span.tag{cursor:pointer;border-radius:4px;padding:4px 6px 4px 6px;font-size:.8rem;color:var(--txt-on-bg-c-2);background:var(--btn-c-bg);display:inline-flex;align-items:center;user-select:none}span.tag i{color:var(--txt-on-bg-c-2);margin-right:.5rem}.infoIcon{width:1rem;text-align:center;vertical-align:middle;position:relative;cursor:pointer}.infoIcon span{font-size:.55rem;display:block;position:absolute;right:-.55rem;top:-.35rem;width:1rem;height:.8rem;line-height:.8rem;border-radius:50%;text-align:center;padding:.1rem .15rem .15rem .15rem;color:var(--badge-c);background:var(--badge-bg)}.portlet{border:1px solid var(--bborder);box-sizing:border-box;margin-top:1rem;background:#fff}.portlet-head,.portlet-foot{padding:.7rem 1rem .7rem 1rem;display:flex}.hl-1 .portlet-body,.hl-1 .portlet-head,.hl-2 .portlet-body,.hl-2 .portlet-head,.hl-3 .portlet-body,.hl-3 .portlet-head,.hl-4 .portlet-body,.hl-4 .portlet-head,.hl-5 .portlet-body,.hl-5 .portlet-head,.hl-6 .portlet-body,.hl-6 .portlet-head,.hl-7 .portlet-body,.hl-7 .portlet-head{border:0}.portlet-head{font-weight:300}.portlet-head>span{display:inline-flex;align-items:center}.portlet-head>span>a{display:inherit}.portlet-head form{margin-left:1rem}.portlet-body{padding:1rem}.portlet-body>h2,.portlet-separator,.portlet-head{border-bottom:1px solid #ebedf2}.portlet-foot{border-top:1px solid #ebedf2;box-sizing:border-box;flex-wrap:wrap;column-gap:.5rem}.plain-portlet{box-sizing:border-box;margin-top:1rem;overflow-x:auto}.ctx-menu{position:absolute;background:#fff;border:1px solid #ccc;z-index:1000}.ctx-menu label{padding:.5rem;width:100%;box-sizing:border-box}.ctx-menu label:hover{background:var(--trow-bg-hover)}code[contenteditable],.contenteditable{display:block;outline:none;white-space:pre-wrap}#cookie_cc{display:none}#cookie_cc:checked #cookieCF{display:none}#cookie_cc:not(:checked)+#cookieCF{display:flex}#cookieCF{position:fixed;width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;background:rgba(0,0,0,0.5);font-weight:100}#cookieCF input[type=radio]{display:none}#cookieCF #cookieCF_simple label,#cookieCF .button,#cookieCF input[type=submit],#cookieCF #cookieCF_c label,#cookieCF .button,#cookieCF input[type=submit]{margin:0}#cookieCF .secondary{background:none;border:2px solid var(--btn-bg);color:var(--btn-bg) !important}#cookieCF .consent_element{margin-top:1rem}#cookieCF form{background:#fff;border:1px solid var(--bborder);display:inline-block;padding:1rem;border-radius:3px}#cookieCF_db,#cookieCF_cb{display:flex;flex-direction:row;gap:10px;margin-top:1rem}#cookieCF_simple+div,#cookieCF_c+div{display:none}#cookieCF_simple:checked+div,#cookieCF_c:checked+div{display:block}thead td label{display:none}.portlet-head .g-icon{display:none} +/*# sourceMappingURL=styles.css.map */ diff --git a/styles.scss b/styles.scss index a4d7526..bb58d62 100755 --- a/styles.scss +++ b/styles.scss @@ -1,6 +1,9 @@ -@import "clean", "default", "alignment", "visibility", "animate", "grid"; -@import "colors", "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "pagination", "progress", "section", "tab", "table", "tag", "tree"; -@import "media"; +@charset "UTF-8"; + +// @todo cleanup the vars file and implement more vars. +// Additionally, create a default vars file in the "framework" which is used if the app doesn't define var values. +@import "clean", "default", "grid"; +@import "colors", "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "image", "input", "accordion", "alert", "slider", "breadcrumb", "button", "link", "list", "nav", "pagination", "progress", "section", "tab", "table", "tag"; @import "portlet", "menu"; @import "editor", "cookie_consent"; @import "develop"; \ No newline at end of file diff --git a/tab.scss b/tab.scss index d4f46ee..15d1e44 100755 --- a/tab.scss +++ b/tab.scss @@ -1,69 +1,65 @@ .tabview { - .tab-links { - color: #000; - padding: 5px 0 0 0; - - label { - font-size: 0.9em; - user-select: none; - cursor: pointer; - border: 1px solid var(--button-colored-background); - white-space: nowrap; - - &:hover, &:focus { - color: var(--text-on-background-color-2); - background: var(--button-colored-background-hover); - border: 1px solid var(--button-colored-background-hover); - outline: none; - } - } - - .active label:hover, .active label:focus { - color: var(--text-on-background-color-2); - background: var(--button-colored-background-hover); - border: 1px solid var(--button-colored-background-hover); - outline: none; - } - - .active { - label { - cursor: default; - } - } - - li { - display: inline-block; - } - } - - .tab-content { - display: flex; - flex: 1; - - > input { - display: none; - } - - > input + div { - display: none; - } - - > input:checked + div { - display: flex; - flex: 1; - flex-direction: column; - } - } - - .tab { - max-width: 100%; - } - &.right > .box { order: 2; } } +.tab-links { + color: #000; + padding: 5px 0 0 0; + + label { + font-size: 0.9em; + user-select: none; + cursor: pointer; + border: 1px solid var(--btn-c-bg); + white-space: nowrap; + + &:hover, &:focus { + color: var(--txt-on-bg-c-2); + background: var(--btn-c-bg-hover); + border: 1px solid var(--btn-c-bg-hover); + outline: none; + } + } + + .active label:hover, .active label:focus { + color: var(--txt-on-bg-c-2); + background: var(--btn-c-bg-hover); + border: 1px solid var(--btn-c-bg-hover); + outline: none; + } + + .active { + label { + cursor: default; + } + } + + li { + display: inline-block; + } +} + +.tab-content { + display: flex; + flex: 1; + + > input, > input + div { + display: none; + } + + > input:checked + div { + display: flex; + flex: 1; + flex-direction: column; + } +} + +.tab { + max-width: 100%; +} + .tab-1 { .tab-links { margin: 0 0 10px 1px; @@ -76,8 +72,8 @@ } .active, .active label { - color: var(--text-on-background-color-2); - background: var(--button-colored-background); + color: var(--txt-on-bg-c-2); + background: var(--btn-c-bg); } li { @@ -91,9 +87,8 @@ .tab-content { box-sizing: border-box; - border: 1px solid var(--button-colored-background); + border: 1px solid var(--btn-c-bg); background: #fff; - padding: 10px; } @@ -110,7 +105,7 @@ } .active label { - border: 1px solid var(--box-border); + border: 1px solid var(--bborder); } } @@ -139,8 +134,8 @@ } .active a, .active label { - color: var(--text-on-background-color-2); - background: var(--button-colored-background) + color: var(--txt-on-bg-c-2); + background: var(--btn-c-bg) } } @@ -157,7 +152,7 @@ } .active label { - border: 1px solid var(--box-border); + border: 1px solid var(--bborder); } } diff --git a/table.scss b/table.scss index 78c5eff..5e2a842 100755 --- a/table.scss +++ b/table.scss @@ -1,5 +1,23 @@ .order-up, .order-down, .remove-form, .update-form, .save-form, .form-action { - color: var(--button-colored-background); + color: var(--btn-c-bg); +} + +thead { + input[type=radio] { + padding: 0; + margin: 0; + display: none; + } + + label, span { + display: inline-flex; + align-items: center; + + & > a { + display: inline-flex; + align-items: center; + } + } } table { @@ -7,12 +25,9 @@ table { table-layout: fixed; } - input[type=radio]:checked + i { - color: var(--button-colored-background); - } - + input[type=radio]:checked + i, input[type=checkbox]:checked + label i { - color: var(--button-colored-background); + color: var(--btn-c-bg); } .order-up, .order-down { @@ -28,35 +43,27 @@ table { display: none; } - &.default.sticky { - position: relative; - - thead { - th, td { - position: sticky; - top: 0; - z-index: 2; - - & > * { - vertical-align : middle; - } - } - } - } - &.default { //border-radius: 4px; width: 100%; max-width: 100%; font-size: 0.9em; box-sizing: border-box; - overflow-x: auto; + //overflow-x: auto; + + .disabled, .empty { + color: #d8d8d8; + } + + .empty { + text-align: center; + } caption { font-size: 1.5rem; font-weight: 400; - border-bottom: 1px solid var(--box-border); - background: var(--table-caption-background); + border-bottom: 1px solid var(--bborder); + background: var(--tcaption-bg); padding: .5rem; //border-top-left-radius: 4px; @@ -67,7 +74,9 @@ table { i { font-size: .8rem; } + } + tr, caption { height: 2.5rem; } @@ -84,41 +93,7 @@ table { } } - tbody { - td, th { - border-bottom: 1px solid #ebedf2; - } - - tr { - &:last-child td, &:last-child th { - border: none; - } - - &:nth-of-type(2n) { - background: var(--table-row-background); - } - - &:nth-of-type(2n+1) { - background: var(--table-row-background-alt); - } - - &:hover td, &:focus td { - background: var(--table-row-background-hover); - } - - &:focus, &:hover { - outline: none; - transform: scale(1); - box-shadow: 0 0 5px var(--box-border); - } - } - } - tbody, tfoot { - tr { - height: 2.5rem; - } - th { text-align: left; } @@ -137,13 +112,41 @@ table { } } - thead { - background: var(--table-head-background); - color: var(--table-head-color); + tbody { + td, th { + border-bottom: 1px solid #ebedf2; + } tr { - height: 2.5rem; + &:last-child td, &:last-child th { + border: none; + } + + &:nth-of-type(2n) { + background: var(--trow-bg); + } + + &:nth-of-type(2n+1) { + background: var(--trow-bg-alt); + } + + &:hover td, &:focus td { + background: var(--trow-bg-hover); + color: #000; + } + + &:focus, &:hover { + outline: none; + transform: scale(1); + box-shadow: 0 0 5px var(--bborder); + color: #000; + } } + } + + thead { + background: var(--thead-bg); + color: var(--thead-c); td { border-bottom: 1px solid #ebedf2; @@ -153,18 +156,21 @@ table { display: none; &:checked + label { - color: var(--box-highlight);; + color: var(--box-hl);; } } } + } - .disabled { - color: #d8d8d8; - } + &.sticky thead { + th, td { + position: sticky; + top: 0; + z-index: 2; - .empty { - text-align: center; - color: #d8d8d8; + & > * { + vertical-align : middle; + } } } @@ -180,28 +186,6 @@ table { } } -thead { - input[type=radio] { - padding: 0; - margin: 0; - display: none; - } - - i.fa { - color: #888; - } - - label, span { - display: inline-flex; - align-items: center; - - & > a { - display: inline-flex; - align-items: center; - } - } -} - @for $i from 1 through 10 { .fixed-#{$i} td:nth-child(#{$i}) { overflow: hidden; @@ -211,7 +195,7 @@ thead { } @media screen and (max-width: 600px) { - table.table { + table.popupTable { display: table; width: 100%; diff --git a/tag.scss b/tag.scss index 60bd2e7..ef3abe2 100755 --- a/tag.scss +++ b/tag.scss @@ -1,30 +1,40 @@ -span { - &.tag { - cursor: pointer; - border-radius: 4px; - padding: 4px 6px 4px 6px; - font-size: .8rem; - color: var(--text-on-background-color-2); - background: var(--button-colored-background); - display: inline-flex; - align-items: center; - user-select: none; +span.tag { + cursor: pointer; + border-radius: 4px; + padding: 4px 6px 4px 6px; + font-size: .8rem; + color: var(--txt-on-bg-c-2); + background: var(--btn-c-bg); + display: inline-flex; + align-items: center; + user-select: none; - i { - color: var(--text-on-background-color-2); - margin-right: .5rem; - } - } + i { + color: var(--txt-on-bg-c-2); + margin-right: .5rem; + } } -@each $tuple in - 'ok' #aaffad #81e27d #459442, - 'warning' #f8ffa8 #d6d949 #94972f, - 'error' #ff7d79 #ee5649 #a5302a, - 'info' #b6d2ff #85b0ee #4865a5 { - .tag.#{nth($tuple, 1)} { - background: #{nth($tuple, 2)}; - border: 1px solid #{nth($tuple, 3)}; - color: #{nth($tuple, 4)}; +.infoIcon { + width: 1rem; + text-align: center; + vertical-align: middle; + position: relative; + cursor: pointer; + + span { + font-size: .55rem; + display: block; + position: absolute; + right: -.55rem; + top: -.35rem; + width: 1rem; + height: .8rem; + line-height: .8rem; + border-radius: 50%; + text-align: center; + padding: .1rem .15rem .15rem .15rem; + color: var(--badge-c); + background: var(--badge-bg); } } \ No newline at end of file diff --git a/tests/app/alerts.php b/tests/app/alerts.php index 15600ce..0c9cf0e 100755 --- a/tests/app/alerts.php +++ b/tests/app/alerts.php @@ -1,9 +1,9 @@ -
checkThis is ok
-
notificationsThis is a info
-
warningThis is a warning
-
closeThis is an error
+
checkThis is ok
+
notificationsThis is a info
+
warningThis is a warning
+
closeThis is an error
-
+

This is a Title

close
This is a message
\ No newline at end of file diff --git a/tests/app/article.php b/tests/app/article.php index a6d8553..e556560 100755 --- a/tests/app/article.php +++ b/tests/app/article.php @@ -21,8 +21,18 @@ Nulla facilisi. Nunc eu lobortis tellus.

This is a blockquote
+

Image

+

Enlarge (click)

+

+ + + + + +

+

Ordered List

  1. one
    2. diff --git a/tests/app/foldable.htm b/tests/app/foldable.htm deleted file mode 100755 index e5fd8cc..0000000 --- a/tests/app/foldable.htm +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/tests/app/forms_data_selection.php b/tests/app/forms_data_selection.php index 3435471..ed6ac07 100755 --- a/tests/app/forms_data_selection.php +++ b/tests/app/forms_data_selection.php @@ -243,7 +243,7 @@ ] } ]' formaction="">book -
    +
    book -
    +
    book -
    +
    book -
    +
    book -
    +
    book -
    +
    +
    +
    +
    +
    +
    + + + + +
    +
    + + + + +
    +
    +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/tests/app/globalTemplates.tpl.php b/tests/app/globalTemplates.tpl.php index 58488c6..763bc72 100755 --- a/tests/app/globalTemplates.tpl.php +++ b/tests/app/globalTemplates.tpl.php @@ -1,5 +1,5 @@ -