├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── common ├── css │ ├── cp-icons.css │ ├── style-control_panel.css │ ├── style-source.css │ └── themes │ │ ├── acri │ │ └── theme.css │ │ ├── dark │ │ └── theme.css │ │ └── rachni │ │ └── theme.css └── js │ ├── hotkeys.js │ ├── jquery-ui.js │ ├── jquery.js │ └── jscolor.js ├── logos ├── logo_1.png ├── logo_2.png ├── logo_3.png └── logo_4.png └── lower thirds ├── browser-source.html ├── control-panel.html └── lower-thirds_hotkeys.lua /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - OBS version 29 | - Version [e.g. 22] 30 | 31 | **Additional context** 32 | Add any other context about the problem here. 33 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lower thirds/icon-test.html 2 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at . All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 noeal-dac 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animated-Lower-Thirds 2 | Animated Lower Thirds with dockable Control Panel - OBS Tool 3 | 4 | ## Description 5 | With this tool you can use a control panel to add and change your own lower thirds on the fly. Feel free to customize. Basic knowledge of HTML, Javascript and CSS is required. 6 | For communication between control panel and browser layer it use BroadcastChannel API. 7 | 8 | This project is based on [Lower thirds in HTML/CSS](https://obsproject.com/forum/resources/lower-thirds-in-html-css.928/), and [Animated lower thirds with control panel](https://obsproject.com/forum/resources/animated-lower-thirds-with-control-panel.922/). 9 | 10 | ![Lower Thirds Screenshot](https://obsproject.com/forum/attachments/screen-jpg.61515/) 11 | 12 | ### Features 13 | - Include dynamic content to streaming app with browser support (like OBS) 14 | - 4 differents Lower Thirds at same time 15 | - 10 slots for each Lower Third (Same configuration but with different title, description and logo) 16 | - 3 predefined styles 17 | - Highly customizable (colors, fonts, timing, automation, ...) 18 | 19 | ## Installation 20 | 1. Download the Zip file, unzip it. 21 | 2. See how to install and new features: https://youtu.be/tddMYWya7O0 22 | 23 | ### Requiriments 24 | Unfortunately, OBS doesn't support browser panels on MacOs. It only works on Windows, but can be used on Linux using the snap installation of OBS (More info [here](https://obsproject.com/forum/threads/installation-from-snap-26-1-2-35-gbb6b1e53f-with-most-of-the-plugins-and-features.137672/)) 25 | 26 | ## Usage 27 | See previus features: https://youtu.be/cQ0_1GwpwB0 28 | 29 | ## Support 30 | You can find all videotutorials on this [Youtube Channel](https://www.youtube.com/channel/UCUYiOIl-DHn8B1eRzUfDyyw) 31 | 32 | ## Translations 33 | 34 | [Portugues (Brasil)](https://github.com/eudanielhenrique/Animated-Lower-Thirds/tree/tradu%C3%A7%C3%A3o-pt-br)
35 | [Inglês](https://github.com/noeal-dac/Animated-Lower-Thirds) 36 | 37 | ## Contributing 38 | I am a designer and my scripting knowledge is few. I made this tool (Frankenststool) because I needed it and I want to share it. You are welcome to improve it. I am aware that many parts of the code can make any expert cry. I'm really sorry :P 39 | 40 | ## Donations 41 | If you like the extension and you want to support the development - please consider to donate by [Paypal](https://paypal.me/noealdac). Any donations are greatly appreciated. 42 | 43 | ## License 44 | The Animated Lower Thirds source code is made available under the [MIT license](https://github.com/noeal-dac/Animated-Lower-Thrids/blob/master/LICENSE). 45 | -------------------------------------------------------------------------------- /common/css/cp-icons.css: -------------------------------------------------------------------------------- 1 | /* :root { 2 | --main-color: #d2d2d2; 3 | } 4 | 5 | html, 6 | body { 7 | background-color: #3a393a; 8 | display: grid; 9 | height: 100vh; 10 | margin: 0; 11 | place-items: center center; 12 | } 13 | div { 14 | display: flex; 15 | } */ 16 | 17 | .icon{ 18 | -webkit-mask-repeat: no-repeat; 19 | -webkit-mask-position: center center; 20 | /* background-color: var(--main-color); */ 21 | background-color: #666666; 22 | width: 15px; 23 | height: 15px; 24 | /* margin: 4px; */ 25 | /* cursor: pointer; */ 26 | } 27 | .icon.small{ 28 | width: 13px; 29 | height: 13px; 30 | margin: 5px 2px; 31 | } 32 | 33 | .icon-aling-center{ 34 | -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M464 160H48c-9 0-16 7-16 16v32c0 9 7 16 16 16h416c9 0 16-7 16-16v-32C480 167 473 160 464 160zM464 416H48c-9 0-16 7-16 16v32c0 9 7 16 16 16h416c9 0 16-7 16-16v-32C480 423 473 416 464 416zM140 96h232C379 96 384 91 384 84c0 0 0 0 0 0V44c0-7-5-12-12-12H140c-7 0-12 5-12 12 0 0 0 0 0 0V84C128 91 133 96 140 96zM372 352c7 0 12-5 12-12 0 0 0 0 0 0V300c0-7-5-12-12-12H140c-7 0-12 5-12 12 0 0 0 0 0 0V340c0 7 5 12 12 12l0 0H372z"/%3E%3C/svg%3E'); 35 | } 36 | .icon-aling-left{ 37 | -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M45 352h262c7 0 13-6 13-13 0 0 0 0 0 0v-38c0-7-6-13-13-13 0 0 0 0 0 0H45c-7 0-13 6-13 13 0 0 0 0 0 0v38c0 7 6 13 13 13C45 352 45 352 45 352zM45 96h262c7 0 13-6 13-13 0 0 0 0 0 0V45c0-7-6-13-13-13 0 0 0 0 0 0H45C38 32 32 38 32 45c0 0 0 0 0 0v38C32 90 38 96 45 96 45 96 45 96 45 96zM464 160H48c-9 0-16 7-16 16v32c0 9 7 16 16 16h416c9 0 16-7 16-16v-32C480 167 473 160 464 160zM464 416H48c-9 0-16 7-16 16v32c0 9 7 16 16 16h416c9 0 16-7 16-16v-32C480 423 473 416 464 416z"/%3E%3C/svg%3E'); 38 | } 39 | .icon-aling-right{ 40 | -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M48 224h416c9 0 16-7 16-16v-32c0-9-7-16-16-16H48c-9 0-16 7-16 16v32C32 217 39 224 48 224zM464 416H48c-9 0-16 7-16 16v32c0 9 7 16 16 16h416c9 0 16-7 16-16v-32C480 423 473 416 464 416zM467 32H205c-7 0-13 6-13 13 0 0 0 0 0 0v38c0 7 6 13 13 13 0 0 0 0 0 0h262c7 0 13-6 13-13 0 0 0 0 0 0V45c0-7-6-13-13-13C467 32 467 32 467 32zM467 288H205c-7 0-13 6-13 13 0 0 0 0 0 0v38c0 7 6 13 13 13 0 0 0 0 0 0h262c7 0 13-6 13-13 0 0 0 0 0 0v-38c0-7-6-13-13-13C467 288 467 288 467 288z"/%3E%3C/svg%3E'); 41 | } 42 | .icon-angle-down{ 43 | -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M239 352l-136-136c-9-9-9-25 0-34l23-23c9-9 25-9 34 0l96 96 96-96c9-9 25-9 34 0L409 182c9 9 9 25 0 34l-136 136C264 362 248 362 239 352L239 352z"/%3E%3C/svg%3E'); 44 | } 45 | .icon-angle-up{ 46 | -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M273 160l136 136c9 9 9 25 0 34L386 352c-9 9-25 9-34 0L256 256 160 352c-9 9-25 9-34 0L103 330c-9-9-9-25 0-34l136-136C248 150 264 150 273 160z"/%3E%3C/svg%3E'); 47 | } 48 | .icon-bold{ 49 | -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M397 238c15-19 25-41 27-65C432 96 372 32 297 32H98c-9 0-16 7-16 16v48c0 9 7 16 16 16h32v288H98c-9 0-16 7-16 16v48c0 9 7 16 16 16H307c71 0 134-52 141-122C453 309 432 266 397 238zM210 112h88c27 0 48 21 48 48s-21 48-48 48h-88V112zM297 400h-88V288h88c31 0 56 25 56 56S328 400 297 400z"/%3E%3C/svg%3E'); 50 | } 51 | 52 | .icon-italic{ 53 | -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 401 512"%3E%3Cpath d="M 322 32 h -144 c -9 0 -16 7 -16 16 v 48 c 0 9 7 16 16 16 h 32 l -80 288 h -32 c -9 0 -16 7 -16 16 v 48 c 0 9 7 16 16 16 h 143 c 9 0 16 -7 16 -16 v -48 c 0 -9 -7 -16 -16 -16 h -32 l 80 -288 h 32 c 9 0 16 -7 16 -16 v -48 c 0 -9 -6 -16 -15 -16 z"/%3E%3C/svg%3E'); 54 | } 55 | 56 | .icon-corner{ 57 | /* -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M272 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C288 423 281 416 272 416z"/%3E%3Cpath d="M176 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C192 423 185 416 176 416z"/%3E%3Cpath d="M80 416H48c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C96 423 89 416 80 416z"/%3E%3Cpath d="M368 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C384 423 377 416 368 416z"/%3E%3Cpath d="M368 32h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16V48C384 39 377 32 368 32z"/%3E%3Cpath d="M464 224h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 231 473 224 464 224z"/%3E%3Cpath d="M464 320h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 327 473 320 464 320z"/%3E%3Cpath d="M80 320H48c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C96 327 89 320 80 320z"/%3E%3Cpath d="M464 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 423 473 416 464 416z"/%3E%3Cpath d="M464 128h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 135 473 128 464 128z"/%3E%3Cpath d="M464 32h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16V48C480 39 473 32 464 32z"/%3E%3Cpath d="M272 32h-80C104 32 32 104 32 192v80c0 9 7 16 16 16h32c9 0 16-7 16-16v-80h0c0-53 43-96 96-96v0H272c9 0 16-7 16-16V48C288 39 281 32 272 32z"/%3E%3C/svg%3E%0A'); */ 58 | -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M272 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C288 423 281 416 272 416z"/%3E%3Cpath d="M176 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C192 423 185 416 176 416z"/%3E%3Cpath d="M80 416H48c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C96 423 89 416 80 416z"/%3E%3Cpath d="M368 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C384 423 377 416 368 416z"/%3E%3Cpath d="M368 32h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16V48C384 39 377 32 368 32z"/%3E%3Cpath d="M464 224h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 231 473 224 464 224z"/%3E%3Cpath d="M464 320h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 327 473 320 464 320z"/%3E%3Cpath d="M80 320H48c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C96 327 89 320 80 320z"/%3E%3Cpath d="M464 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 423 473 416 464 416z"/%3E%3Cpath d="M464 128h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 135 473 128 464 128z"/%3E%3Cpath d="M464 32h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16V48C480 39 473 32 464 32z"/%3E%3Cpath d="M272 32h-16C132 32 32 132 32 256V272c0 9 7 16 16 16h32c9 0 16-7 16-16l0-16c0-88 72-159 159-159L272 96c9 0 16-7 16-16V48C288 39 281 32 272 32z"/%3E%3C/svg%3E%0A'); 59 | /* -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M272 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C288 423 281 416 272 416z"/%3E%3Cpath d="M176 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C192 423 185 416 176 416z"/%3E%3Cpath d="M80 416H48c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C96 423 89 416 80 416z"/%3E%3Cpath d="M368 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C384 423 377 416 368 416z"/%3E%3Cpath d="M464 224h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 231 473 224 464 224z"/%3E%3Cpath d="M464 320h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 327 473 320 464 320z"/%3E%3Cpath d="M464 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 423 473 416 464 416z"/%3E%3Cpath d="M464 128h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 135 473 128 464 128z"/%3E%3Cpath d="M464 32h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16V48C480 39 473 32 464 32z"/%3E%3Cpath d="M368 32h-51C160 32 32 160 32 317V368c0 9 7 16 16 16h32c9 0 16-7 16-16l0-51C96 195 195 96 317 96H368c9 0 16-7 16-16V48C384 39 377 32 368 32z"/%3E%3C/svg%3E%0A'); */ 60 | /* -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath d="M272 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C288 423 281 416 272 416z"/%3E%3Cpath d="M176 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C192 423 185 416 176 416z"/%3E%3Cpath d="M368 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C384 423 377 416 368 416z"/%3E%3Cpath d="M464 224h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 231 473 224 464 224z"/%3E%3Cpath d="M464 320h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 327 473 320 464 320z"/%3E%3Cpath d="M464 416h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 423 473 416 464 416z"/%3E%3Cpath d="M464 128h-32c-9 0-16 7-16 16v32c0 9 7 16 16 16h32c9 0 16-7 16-16v-32C480 135 473 128 464 128z"/%3E%3Cpath d="M464 32H317C160 32 32 160 32 317V464c0 9 7 16 16 16h32c9 0 16-7 16-16l0-147C96 195 195 96 317 96H464c9 0 16-7 16-16V48C480 39 473 32 464 32z"/%3E%3C/svg%3E'); */ 61 | } 62 | .icon-chevron-down{ 63 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M239 381L45 187c-9-9-9-25 0-34l23-23c9-9 25-9 34 0L256 285l155-154c9-9 25-9 34 0l23 23c9 9 9 25 0 34L273 381C264 391 248 391 239 381L239 381z'/%3E%3C/svg%3E"); 64 | } 65 | .icon-chevron-up{ 66 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M273 131l194 194c9 9 9 25 0 34l-23 23c-9 9-25 9-34 0L256 227 101 382c-9 9-25 9-34 0l-23-23c-9-9-9-25 0-34L239 131C248 121 264 121 273 131L273 131z'/%3E%3C/svg%3E"); 67 | } 68 | .icon-clock{ 69 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM256 456c-110 0-200-89-200-200S146 56 256 56s200 90 200 200S367 456 256 456zM318 352l-85-62c-3-2-5-6-5-10V116c0-7 5-12 12-12h32c7 0 12 5 12 12v142l67 49c5 4 7 11 3 17L335 349C331 354 323 356 318 352L318 352z'/%3E%3C/svg%3E"); */ 70 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M255 32C132 32 32 132 32 255c0 123 100 224 224 224 123 0 224-100 224-223C479 132 378 32 255 32zM255 435c-100 0-180-81-180-180 0-100 81-180 180-180 100 0 180 81 180 180C435 355 355 435 255 435zM311 341l-77-56c-3-2-4-5-4-9V129c0-6 5-11 11-11h29c6 0 11 5 11 11v128l60 44c5 4 6 10 2 15l-17 23C322 344 316 345 311 341L311 341z'/%3E%3C/svg%3E"); */ 71 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M255 32C132 32 32 132 32 255c0 123 100 224 224 224 123 0 224-100 224-223C479 132 378 32 255 32zM255 422C163 422 88 347 88 255c0-92 75-167 167-167 92 0 167 75 167 167C422 347 347 422 255 422zM233 293c-5-4-10-12-10-19l0-135c0-7 5-12 12-12h38c7 0 12 5 12 12v115l47 34c5 4 7 11 3 17l-23 31c-4 5-11 7-17 3L233 293z'/%3E%3C/svg%3E"); */ 72 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 39C141 39 49 131 49 246c0 115 93 208 208 208 115 0 208-93 208-207C464 131 371 39 256 39zM256 401c-86 0-155-69-155-155 0-86 69-155 155-155 86 0 155 69 155 155C411 332 342 401 256 401z'/%3E%3Cpath d='M236 281c-5-4-9-12-9-18V139c0-6 5-11 11-11h36c6 0 11 5 11 11v106l44 32c5 4 6 11 2 16l-21 29c-4 5-11 6-16 2L236 281z'/%3E%3C/svg%3E"); 73 | } 74 | .icon-clock.active{ 75 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM348 321L348 321l-20 25c-6 7-16 8-22 3 0 0 0 0 0 0l0 0 -67-50c-9-8-15-19-15-31V112c0-9 7-16 16-16h32c9 0 16 7 16 16v144l58 43c7 6 8 16 2 22C348 321 348 321 348 321z'/%3E%3C/svg%3E"); */ 76 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M255 32C132 32 32 132 32 255c0 123 100 224 224 224 123 0 224-100 224-223C479 132 378 32 255 32zM336 305l-23 31c-4 5-11 7-17 3l-63-46c-5-4-10-12-10-19l0-135c0-7 5-12 12-12h38c7 0 12 5 12 12v115l47 34C339 292 340 300 336 305z'/%3E%3C/svg%3E"); */ 77 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 39C141 39 49 131 49 246c0 115 93 208 208 208 115 0 208-93 208-207C464 131 371 39 256 39zM331 292l-21 29c-4 5-11 6-16 2L236 281c-5-4-9-12-9-18V139c0-6 5-11 11-11h36c6 0 11 5 11 11v106l44 32C334 281 335 288 331 292z'/%3E%3C/svg%3E"); 78 | } 79 | .icon-shadow{ 80 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M326 32H74C51 32 32 51 32 74v252c0 23 19 42 42 42h252c23 0 42-19 42-42V74C368 51 349 32 326 32zM324 316c0 4-3 8-8 8H84c-4 0-8-3-8-8V84c0-4 3-8 8-8h232c4 0 8 3 8 8V316zM400 335c0 36-30 66-66 66H163v40c0 22 18 40 40 40h237c22 0 40-18 40-40V203c0-22-18-40-40-40h-40V335z'/%3E%3C/svg%3E"); 81 | } 82 | .icon-settings{ 83 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M489 316l-43-25c4-23 4-47 0-71l43-25c5-3 7-9 6-14 -11-36-30-68-55-95 -4-4-10-5-15-2l-43 25c-18-16-39-28-61-35V24c0-6-4-11-9-12 -37-8-75-8-110 0 -6 1-9 6-9 12v50c-22 8-43 20-61 35L87 84c-5-3-11-2-15 2 -25 27-44 59-55 95 -2 5 1 11 6 14l43 25c-4 23-4 47 0 71l-43 25c-5 3-7 9-6 14 11 36 30 68 55 95 4 4 10 5 15 2l43-25c18 16 39 28 61 35v50c0 6 4 11 9 12 37 8 75 8 110 0 6-1 9-6 9-12v-50c22-8 43-20 61-35l43 25c5 3 11 2 15-2 25-27 44-59 55-95C496 325 494 319 489 316zM256 337c-44 0-81-36-81-81 0-44 36-81 81-81 44 0 81 36 81 81C337 300 300 337 256 337z'/%3E%3C/svg%3E"); 84 | } 85 | .icon-ellipsis-h{ 86 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M321 256c0 36-29 65-65 65S191 292 191 256c0-36 29-65 65-65S321 220 321 256zM415 191c-36 0-65 29-65 65 0 36 29 65 65 65C451 321 480 292 480 256 480 220 451 191 415 191zM97 191C61 191 32 220 32 256c0 36 29 65 65 65s65-29 65-65C162 220 133 191 97 191z'/%3E%3C/svg%3E"); */ 87 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M326 256c0 38-31 70-70 70S186 294 186 256c0-38 31-70 70-70S326 218 326 256zM426 186c-38 0-70 31-70 70 0 38 31 70 70 70 38 0 70-31 70-70C496 218 464 186 426 186zM86 186C48 186 17 218 17 256c0 38 31 70 70 70s70-31 70-70C156 218 124 186 86 186z'/%3E%3C/svg%3E"); 88 | } 89 | .icon-line-spacing{ 90 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M158 480h-16c-13 0-24-11-24-24V160h-48c-21 0-32-26-17-41l80-80c9-9 25-9 34 0l80 80C262 134 251 160 230 160h-48v296C182 469 171 480 158 480zM330 56v296h-48c-21 0-32 26-17 41l80 80c9 9 25 9 34 0l80-80C474 378 463 352 442 352h-48V56c0-13-11-24-24-24h-16C341 32 330 43 330 56z'/%3E%3C/svg%3E"); 91 | } 92 | .icon-size{ 93 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M245 315L152 408l33 31c15 15 4 41-17 41h-112C43 480 32 469 32 456V344c0-21 26-32 41-17L104 360l93-93c6-6 16-6 23 0l25 25C251 299 251 309 245 315zM267 197L360 104l-33-31C312 58 323 32 344 32h112C469 32 480 43 480 56v112c0 21-26 32-41 17L408 152l-93 93c-6 6-16 6-23 0l-25-25C261 213 261 203 267 197L267 197z'/%3E%3C/svg%3E"); 94 | } 95 | .icon-position{ 96 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 344v112c0 13-11 24-24 24 0 0 0 0 0 0H344c-21 0-32-26-17-41l36-36L256 296 149 403 185 439c15 15 4 41-17 41H56c-13 0-24-11-24-24 0 0 0 0 0 0V344c0-21 26-32 41-17l36 36L216 256 109 149 73 185C58 200 32 189 32 168V56c0-13 11-24 24-24 0 0 0 0 0 0h112c21 0 32 26 17 41l-36 36L256 216 363 109 327 73c-15-15-4-41 17-41h112c13 0 24 11 24 24 0 0 0 0 0 0v112c0 21-26 32-41 17l-36-36L296 256 403 363 439 327C454 312 480 323 480 344z'/%3E%3C/svg%3E"); 97 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 411l-79 79c-9 9-24 9-34 0 0 0 0 0 0 0l-79-79c-15-15-4-41 17-41l51 0v-86l-86 0 0 51c0 21-26 32-41 17L22 273c-9-9-9-24 0-34 0 0 0 0 0 0l79-79c15-15 41-4 41 17l0 51 86 0 0-86 -51 0c-21 0-32-26-17-41l79-79c9-9 24-9 34 0 0 0 0 0 0 0l79 79c15 15 4 41-17 41h-51v86l86 0 0-51c0-21 26-32 41-17l79 79c9 9 9 24 0 34 0 0 0 0 0 0l-79 79c-15 15-41 4-41-17l0-51 -86 0 0 86 51 0C357 370 367 396 352 411z'/%3E%3C/svg%3E"); */ 98 | } 99 | .icon-uppercase{ 100 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 432v32c0 9-7 16-16 16H368c-9 0-16-7-16-16v-32c0-9 7-16 16-16h20l-23-64H261v-58c0-8-1-15-2-22h76L288 143l-36 100c-7-17-17-31-31-42 -10-8-20-14-32-19L234 54c4-13 17-22 30-22h47c14 0 26 9 30 22L473 416H496C505 416 512 423 512 432zM186 480c4 0 33 0 46 0 4 0 7-5 6-8 -2-8-4-15-5-23 -2-10-2-21-2-33V294c0-31-10-54-30-70 -20-16-46-24-78-24 -33 0-60 8-81 25 -19 16-29 33-29 53 0 4 3 7 7 7s44 0 47 0c4 0 6-4 6-6 1-8 5-15 12-20 8-7 20-10 34-10 16 0 28 4 36 12 8 8 13 19 13 34 0 0 0 14 0 18s-3 7-6 7c-3 0-42 0-42 0 -38 0-68 7-89 22C11 355 0 376 0 402c0 26 8 46 23 61 15 15 37 22 66 22 17 0 33-4 47-13 14-9 25-20 34-33 1 7 1 13 3 20 1 5 2 9 4 14C177 478 181 480 186 480zM72 426c-7-6-10-15-10-25 0-12 5-23 15-31 10-9 24-13 42-13 0 0 38 0 43 0s6 3 6 6 0 34 0 34c-4 10-12 19-25 27 -12 8-27 12-42 12C89 436 79 433 72 426zM68 284'/%3E%3C/svg%3E"); */ 101 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 432v32c0 9-7 16-16 16H368c-9 0-16-7-16-16v-32c0-9 7-16 16-16h20l-23-64H261v-58c0-8-1-15-2-22h76L288 143l-36 100c-7-17-17-31-31-42 -10-8-20-14-32-19L234 54c4-13 17-22 30-22h47c14 0 26 9 30 22L473 416H496C505 416 512 423 512 432zM186 480c4 0 33 0 46 0 4 0 7-5 6-8 -2-8-4-15-5-23 -2-10-2-21-2-33V294c0-31-10-54-30-70 -20-16-46-24-78-24 -33 0-60 8-81 25 -19 16-29 33-29 53 0 4 3 7 7 7s44 0 47 0c4 0 6-4 6-6 1-8 5-15 12-20 8-7 20-10 34-10 16 0 28 4 36 12 8 8 13 19 13 34 0 0 0 14 0 18s-3 7-6 7c-3 0-42 0-42 0 -38 0-68 7-89 22C11 355 0 376 0 402c0 26 8 46 23 61 15 15 37 22 66 22 17 0 33-4 47-13 14-9 25-20 34-33 1 7 1 13 3 20 1 5 2 9 4 14C177 478 181 480 186 480zM72 426c-7-6-10-15-10-25 0-12 5-23 15-31 10-9 24-13 42-13 0 0 38 0 43 0s6 3 6 6 0 34 0 34c-4 10-12 19-25 27 -12 8-27 12-42 12C89 436 79 433 72 426zM68 284 119 177h-11c-10 0-17-8-17-17v-53H56c-15 0-23-19-12-29l57-57c7-7 18-7 24 0l57 57c11 11 3 29-12 29h-34v53C137 169 129 177 119 177z'/%3E%3C/svg%3E"); */ 102 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 432v32c0 9-7 16-16 16H368c-9 0-16-7-16-16v-32c0-9 7-16 16-16h20l-23-64H261v-58c0-8-1-15-2-22h76L288 143l-36 100c-7-17-17-31-31-42 -10-8-20-14-32-19L234 54c4-13 17-22 30-22h47c14 0 26 9 30 22L473 416H496C505 416 512 423 512 432zM238 472c-2-8-4-15-5-23 -2-10-2-21-2-33V294c0-31-10-54-30-70 -20-16-46-24-78-24 -33 0-60 8-81 25 -19 16-29 33-29 53 0 4 3 7 7 7s44 0 47 0c4 0 6-4 6-6 1-8 5-15 12-20 8-7 20-10 34-10 16 0 28 4 36 12 8 8 13 19 13 34 0 0 0 14 0 18s-3 7-6 7c-3 0-42 0-42 0 -38 0-68 7-89 22C11 355 0 376 0 402c0 26 8 46 23 61 15 15 37 22 66 22 17 0 33-4 47-13 14-9 25-20 34-33 1 7 1 13 3 20 1 5 2 9 4 14 1 4 5 6 10 6 4 0 33 0 46 0C236 480 239 475 238 472zM169 397c-4 10-12 19-25 27 -12 8-27 12-42 12 -13 0-23-3-29-9 -7-6-10-15-10-25 0-12 5-23 15-31 10-9 24-13 42-13 0 0 38 0 43 0s6 3 6 6S169 397 169 397zM113 179h-11c-10 0-17-8-17-17v-56H50c-15 0-23-19-12-29l57-57c7-7 18-7 24 0l57 57c11 11 3 29-12 29h-34v56C131 171 123 179 113 179z'/%3E%3C/svg%3E"); 103 | } 104 | .icon-fill-drip{ 105 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M435 309c0 0-53 77-53 107s24 53 53 53 53-24 53-53S435 309 435 309zM451 224L278 50c-5-5-12-8-19-8 -7 0-14 3-19 8l-68 68 -72-72c-5-5-14-5-19 0L63 65c-5 5-5 14 0 19l72 72 -79 79c-31 31-31 82 0 113l98 98c16 16 36 23 57 23 20 0 41-8 57-23L451 261C461 251 461 234 451 224zM354 283H87c1-3 3-7 6-10l11-11 68-68 49 49c10 10 27 10 38 0 10-10 10-27 0-38l-49-49 49-49 135 135L354 283 354 283z'/%3E%3C/svg%3E"); */ 106 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M441 312c0 0-56 81-56 112s25 56 56 56c31 0 56-25 56-56S441 312 441 312zM458 222L277 40C271 35 264 32 257 32c-7 0-14 3-20 8l-71 71L90 36c-5-5-14-5-20 0L51 56c-5 5-5 14 0 20l75 75 -83 83c-33 33-33 86 0 119l102 102c16 16 38 25 59 25 21 0 43-8 59-25l194-194C469 250 469 233 458 222zM357 284H76c1-3 3-7 6-10l11-11 71-71 51 51c11 11 29 11 40 0 11-11 11-29 0-40l-51-51 52-52 142 142L357 284 357 284z'/%3E%3C/svg%3E"); */ 107 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M454 316c0 0-58 84-58 116s26 58 58 58 58-26 58-58S454 316 454 316zM472 222l-187-188c-6-5-13-8-21-8 -7 0-14 3-21 8l-74 74L90 30c-5-5-14-5-21 0L50 50c-5 5-5 15 0 21l78 78 -86 86c-34 34-34 89 0 123l106 106C164 480 187 490 209 490s45-8 61-26l201-201C483 251 483 234 472 222zM367 287H76c1-3 3-7 6-10l11-11 74-74 53 53c11 11 30 11 41 0 11-11 11-30 0-41l-53-53 54-54L409 243 367 287 367 287z'/%3E%3C/svg%3E"); 108 | } 109 | .icon-font{ 110 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 416h-23L310 54c-4-13-17-22-30-22h-47c-14 0-26 9-30 22L71 416H48c-9 0-16 7-16 16v32c0 9 7 16 16 16h128c9 0 16-7 16-16v-32c0-9-7-16-16-16h-20l23-64h153l23 64H336c-9 0-16 7-16 16v32c0 9 7 16 16 16h128c9 0 16-7 16-16v-32C480 423 473 416 464 416zM209 272L256 143 303 272H209z'/%3E%3C/svg%3E"); 111 | } 112 | .icon-image{ 113 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 448H48c-27 0-48-21-48-48V112c0-27 21-48 48-48h416c27 0 48 21 48 48v288C512 427 491 448 464 448zM112 120c-31 0-56 25-56 56 0 31 25 56 56 56 31 0 56-25 56-56C168 145 143 120 112 120zM64 384h384V272l-88-88c-5-5-12-5-17 0L208 320l-56-56c-5-5-12-5-17 0L64 336V384z'/%3E%3C/svg%3E"); 114 | } 115 | .icon-lock{ 116 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M410 256H193v-90c0-35 28-63 62-64C290 102 319 130 319 165v14c0 12 9 21 21 21h28c12 0 21-9 21-21v-14c0-73-60-133-133-133C182 32 123 93 123 166V256h-21c-23 0-42 19-42 42v140c0 23 19 42 42 42h308c23 0 42-19 42-42V298C452 275 433 256 410 256z'/%3E%3C/svg%3E"); 117 | } 118 | input:checked + .icon-lock{ 119 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M410 228h-21v-63C389 92 329 32 256 32S123 92 123 165v63H102c-23 0-42 19-42 42v168c0 23 19 42 42 42h308c23 0 42-19 42-42V270C452 247 433 228 410 228zM319 228h-126v-63c0-35 28-63 63-63 35 0 63 28 63 63V228z'/%3E%3C/svg%3E"); 120 | } 121 | .icon-minus{ 122 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 208H64c-18 0-32 14-32 32v32c0 18 14 32 32 32h384c18 0 32-14 32-32v-32C480 222 466 208 448 208z'/%3E%3C/svg%3E"); 123 | } 124 | .icon-paint-brush{ 125 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M172 306c-37 2-72 17-91 68 -2 6-7 9-14 9 -10 0-42-26-52-32C16 428 51 496 136 496c71 0 120-41 120-112 0-3-1-6-1-9L172 306 172 306zM444 17c-14 0-27 6-38 15C215 203 195 207 195 257c0 13 3 25 8 36l60 50c7 2 14 3 21 3 58 0 92-42 197-240 7-13 13-28 13-43C495 36 470 17 444 17z'/%3E%3C/svg%3E"); */ 126 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M170 307c-38 2-73 17-92 69 -2 6-8 9-14 9 -11 0-43-26-52-33 0 78 36 147 122 147 72 0 122-42 122-114 0-3-1-6-1-9L170 307 170 307zM447 13c-14 0-28 6-38 16C214 202 194 206 194 257c0 13 3 25 8 37l61 51c7 2 14 3 21 3 59 0 93-43 201-244 7-14 13-28 13-44C498 32 474 13 447 13z'/%3E%3C/svg%3E"); 127 | } 128 | .icon-pen{ 129 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M283 86l100 100L166 404l-90 10c-12 1-22-9-21-21l10-90L283 86zM446 71L399 24c-15-15-39-15-53 0l-44 44 100 100 44-44C460 109 460 86 446 71zM463 431H47c-9 0-16 7-16 16v32c0 9 7 16 16 16h416c9 0 16-7 16-16v-32C479 438 472 431 463 431z'/%3E%3C/svg%3E"); 130 | } 131 | .icon-plus{ 132 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 208H304V64c0-18-14-32-32-32h-32c-18 0-32 14-32 32v144H64c-18 0-32 14-32 32v32c0 18 14 32 32 32h144v144c0 18 14 32 32 32h32c18 0 32-14 32-32V304h144c18 0 32-14 32-32v-32C480 222 466 208 448 208z'/%3E%3C/svg%3E"); 133 | } 134 | .icon-plus-square{ 135 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M432 32H80c-26 0-48 22-48 48v352c0 27 22 48 48 48h352c27 0 48-21 48-48V80C480 54 459 32 432 32zM400 284c0 7-5 12-12 12h-92v92c0 7-5 12-12 12h-56c-7 0-12-5-12-12v-92h-92c-7 0-12-5-12-12v-56c0-7 5-12 12-12h92v-92c0-7 5-12 12-12h56c7 0 12 5 12 12v92h92c7 0 12 5 12 12V284z'/%3E%3C/svg%3E"); 136 | } 137 | .icon-search{ 138 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M483 427l-91-91c-4-4-10-6-16-6h-15c25-32 40-73 40-117 0-105-85-190-190-190S21 107 21 212s85 190 190 190c44 0 85-15 117-40v15c0 6 2 11 6 16l91 91c9 9 23 9 31 0l26-26C491 449 491 435 483 427zM211 329c-65 0-117-52-117-117 0-65 52-117 117-117 65 0 117 52 117 117C328 277 276 329 211 329z'/%3E%3C/svg%3E"); 139 | } 140 | .icon-sync{ 141 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M358 144c-28-26-64-41-103-41 -69 0-129 48-146 114 -1 5-5 8-10 8H47c-7 0-12-6-11-13C56 109 146 32 255 32c60 0 114 23 154 62l32-32c14-14 37-4 37 15V197c0 12-10 22-22 22H336c-19 0-29-23-15-37L358 144zM54 290h120c19 0 29 23 15 37l-37 37c28 26 64 41 103 41 69 0 129-48 146-114 1-5 5-8 10-8h51c7 0 12 6 11 13C454 399 364 477 255 477c-60 0-114-23-154-62L69 447C56 460 33 451 33 432V311C33 300 42 290 54 290z'/%3E%3C/svg%3E"); */ 142 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 143c-26-24-60-38-96-38 -64 0-120 45-136 106 -1 5-5 7-9 7H62c-7 0-11-6-10-12C70 110 154 39 256 39c56 0 106 21 144 58l30-30c13-13 35-4 35 14v112c0 11-9 21-21 21H331c-18 0-27-21-14-35L352 143zM68 279h112c18 0 27 21 14 35l-35 35c26 24 60 38 96 38 64 0 120-45 136-106 1-5 5-7 9-7h48c7 0 11 6 10 12C441 381 357 454 256 454c-56 0-106-21-144-58l-30 30C70 438 49 429 49 412V299C49 288 57 279 68 279z'/%3E%3C/svg%3E"); 143 | } 144 | .icon-text-height{ 145 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M285 57h-256C21 57 15 63 15 71v85c0 8 6 14 14 14h28c8 0 14-6 14-14V128h50v270H86c-8 0-14 6-14 14v28c0 8 6 14 14 14h142c8 0 14-6 14-14v-28c0-8-6-14-14-14h-36V128h50v28c0 8 6 14 14 14h28c8 0 14-6 14-14V71C299 63 293 57 285 57zM483 356h-43V156h43c13 0 19-15 10-24L422 61c-6-6-15-6-20 0l-71 71c-8 8-4 24 10 24h43v199h-43c-13 0-19 15-10 24l71 71c6 6 15 6 20 0l71-71C501 372 497 356 483 356z'/%3E%3C/svg%3E"); */ 146 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M287 45H15c-8 0-15 7-15 15v91c0 8 7 15 15 15h30c8 0 15-7 15-15v-30h53v287H76c-8 0-15 7-15 15v30c0 8 7 15 15 15h151c8 0 15-7 15-15v-30c0-8-7-15-15-15h-38V120h53v30c0 8 7 15 15 15h30c8 0 15-7 15-15V60C302 51 295 45 287 45zM497 362H451V150h45c14 0 20-16 11-26l-75-75c-6-6-15-6-21 0l-75 75c-9 9-4 26 11 26h45v211h-45c-14 0-20 16-11 26l75 75c6 6 15 6 21 0l75-75C516 379 511 362 497 362z'/%3E%3C/svg%3E"); */ 147 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M287 45H15c-8 0-15 7-15 15v91c0 8 7 15 15 15h30c8 0 15-7 15-15v-30h53v287H76c-8 0-15 7-15 15v30c0 8 7 15 15 15h151c8 0 15-7 15-15v-30c0-8-7-15-15-15h-38V120h53v30c0 8 7 15 15 15h30c8 0 15-7 15-15V60C302 51 295 45 287 45zM497 375H451V137h45c14 0 20-16 11-26l-75-75c-6-6-15-6-21 0l-75 75c-9 9-4 26 11 26h45v237h-45c-14 0-20 16-11 26l75 75c6 6 15 6 21 0l75-75C516 392 511 375 497 375z'/%3E%3C/svg%3E"); 148 | } 149 | .icon-thickness{ 150 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' viewBox='0 0 512 512'%3E%3Cpath d='M48 132h416c9 0 16-7 16-16V76c0-9-7-16-16-16H48c-9 0-16 7-16 16v40C32 125 39 132 48 132zM48 285h416c9 0 16-7 16-16v-70c0-9-7-16-16-16H48c-9 0-16 7-16 16v70C32 278 39 285 48 285zM48 452h416c9 0 16-7 16-16v-97c0-9-7-16-16-16H48c-9 0-16 7-16 16v97C32 445 39 452 48 452z'/%3E%3C/svg%3E"); 151 | } 152 | .icon-trash{ 153 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M88 438c0 23 19 42 42 42l0 0h252c23 0 42-19 42-42l0 0V144H88V438zM326 214c0-8 6-14 14-14s14 6 14 14v196c0 8-6 14-14 14s-14-6-14-14V214zM242 214c0-8 6-14 14-14 8 0 14 6 14 14v196c0 8-6 14-14 14 -8 0-14-6-14-14V214zM158 214c0-8 6-14 14-14 8 0 14 6 14 14v196c0 8-6 14-14 14 -8 0-14-6-14-14V214zM438 60H333l-8-16c-4-7-11-12-19-12H206c-8 0-15 4-19 12L179 60H74c-8 0-14 6-14 14v28c0 8 6 14 14 14h364c8 0 14-6 14-14V74C452 66 446 60 438 60z'/%3E%3C/svg%3E"); 154 | } 155 | .icon-cross{ 156 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M323 256L423 156c12-12 12-32 0-44L401 89c-12-12-32-12-44 0L256 189 156 89c-12-12-32-12-44 0l-22 22c-12 12-12 32 0 44L189 256 89 356c-12 12-12 32 0 44l22 22c12 12 32 12 44 0L256 323 356 423c12 12 32 12 44 0l22-22c12-12 12-32 0-44L323 256z'/%3E%3C/svg%3E"); 157 | } 158 | .icon-oneshot{ 159 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 227h-28C439 141 371 73 285 60V32c0-6-5-11-11-11H238c-6 0-11 5-11 11v28C141 73 73 141 60 227H32c-6 0-11 5-11 11v37c0 6 5 11 11 11h28C73 371 141 439 227 452v28c0 6 5 11 11 11h37c6 0 11-5 11-11v-28C371 439 439 371 452 285h28c6 0 11-5 11-11v-37C491 232 486 227 480 227zM285 392v-37c0-6-5-11-11-11H238c-6 0-11 5-11 11v37c-53-11-95-53-107-107h37c6 0 11-5 11-11v-37c0-6-5-11-11-11h-37c11-53 53-95 107-107v37c0 6 5 11 11 11h37c6 0 11-5 11-11v-37c53 11 95 53 107 107H355c-6 0-11 5-11 11v37c0 6 5 11 11 11h37C381 339 339 381 285 392zM285 256c0 16-13 29-29 29 -16 0-29-13-29-29 0-16 13-29 29-29C272 227 285 240 285 256z'/%3E%3C/svg%3E"); */ 160 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' viewBox='0 0 512 512'%3E%3Cpath d='M480 227h-28C439 141 371 73 285 60V32c0-6-5-11-11-11H238c-6 0-11 5-11 11v28C141 73 73 141 60 227H32c-6 0-11 5-11 11v37c0 6 5 11 11 11h28C73 371 141 439 227 452v28c0 6 5 11 11 11h37c6 0 11-5 11-11v-28C371 439 439 371 452 285h28c6 0 11-5 11-11v-37C491 232 486 227 480 227zM355 285h37c-11 53-53 95-107 107 0 0-16 3-29 3 -14 0-29-3-29-3 -53-11-95-53-107-107h37c6 0 11-5 11-11v-37c0-6-5-11-11-11h-37c11-53 53-95 107-107 0 0 11-3 29-3s29 3 29 3c53 11 95 53 107 107H355c-6 0-11 5-11 11v37C344 280 349 285 355 285z'/%3E%3Cpath d='M291 371h-59V207l-33 0v-50l92-19V371z'/%3E%3C/svg%3E"); 161 | } 162 | .icon-autotrigger{ 163 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M449 198h-96L383 59C385 46 375 32 363 32H250c-10 0-19 8-20 19l-27 222c-2 14 7 25 20 25h99L283 470c-3 14 7 27 20 27 7 0 14-4 18-10l146-256C474 217 465 198 449 198zM178 352H99l-16 47H50l74-201h32l73 201h-34L178 352zM109 324h59l-29-86h-1L109 324z'/%3E%3C/svg%3E"); */ 164 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M449 198h-96L383 59C385 46 375 32 363 32H250c-10 0-19 8-20 19l-27 222c-2 14 7 25 20 25h99L283 470c-3 14 7 27 20 27 7 0 14-4 18-10l146-256C474 217 465 198 449 198zM69 180h106c7 0 12-5 12-12 0 0 0 0 0 0V146c0-7-5-12-12-12H69c-7 0-12 5-12 12 0 0 0 0 0 0V168C57 175 62 180 69 180zM255 405c7 0 12-5 12-12 0 0 0 0 0 0V371c0-7-5-12-12-12H114c-7 0-12 5-12 12 0 0 0 0 0 0V393c0 7 5 12 12 12l0 0H255zM164 293c7 0 12-5 12-12 0 0 0 0 0 0v-22c0-7-5-12-12-12H44c-7 0-12 5-12 12 0 0 0 0 0 0v22c0 7 5 12 12 12l0 0H164z'/%3E%3C/svg%3E"); 165 | } 166 | /* .icon-autotrigger{ 167 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M317 85H195c-95 0-171 77-171 171 0 95 77 171 171 171h122c95 0 171-77 171-171C488 161 412 85 317 85zM317 375H195c-66 0-119-54-119-119s54-119 119-119h122c66 0 119 54 119 119S383 375 317 375zM98 256c0-53 43-97 97-97 53 0 97 43 97 97 0 53-43 97-97 97C142 353 98 309 98 256z'/%3E%3C/svg%3E"); 168 | } */ 169 | .icon-from-file{ 170 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M434 98L350 14c-9-9-21-14-34-14H112c-26 0-48 22-48 48v175l48-48V48h160v104c0 13 11 24 24 24h104v288H112v-68l-48-48V464c0 27 22 48 48 48h288c27 0 48-21 48-48v-332C448 119 443 107 434 98zM320 128v-76l76 76H320z'/%3E%3Cpath d='M172 172l-84 84c0 0 0 0 0 0 0 0 0 0 0 0l-19 19c-2 2-3 5-4 8 0 0 0 0 0 0 0 0 0 0 0 0 -1 5 1 9 4 13 0 0 0 0 0 0l19 19c0 0 0 0 0 0l84 84c6 6 15 6 21 0 0 0 0 0 0 0l19-19c6-6 6-15 0-21l-46-46h128c8 0 15-7 15-15 0 0 0 0 0 0v-27c0-8-7-15-15-15H166l46-46c6-6 6-15 0-21 0 0 0 0 0 0l-19-19C187 166 177 166 172 172z'/%3E%3C/svg%3E"); */ 171 | /* -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M441 105L343 7c-5-4-11-7-17-7h-13v135h135v-13C448 116 445 110 441 105zM278 146V0H88C75 0 64 11 64 24v464c0 13 11 24 24 24h336c13 0 24-11 24-24V170H302C289 170 278 159 278 146zM360 324v16c0 9-7 16-16 16h-64v64c0 9-7 16-16 16h-16c-9 0-16-7-16-16v-64h-64c-9 0-16-19-16-28v-4c0-9 7-16 16-16h64v-64c0-9 7-16 16-16h16c9 0 16 7 16 16v64h64C353 308 360 315 360 324z'/%3E%3C/svg%3E"); */ 172 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 122v13H313V0h13c6 0 12 3 17 7l98 98C445 110 448 116 448 122zM302 170h146v318c0 13-11 24-24 24H88c-13 0-24-11-24-24V24C64 11 75 0 88 0h190v146C278 159 289 170 302 170zM330 319l-46 46V237c0-8-7-15-15-15 0 0 0 0 0 0h-27c-8 0-15 7-15 15v127l-46-46c-6-6-15-6-21 0 0 0 0 0 0 0l-19 19c-6 6-6 15 0 21l84 84c0 0 0 0 0 0 0 0 0 0 0 0l19 19c2 2 5 3 8 4 0 0 0 0 0 0 0 0 0 0 0 0 5 1 9-1 13-4 0 0 0 0 0 0l19-19c0 0 0 0 0 0l84-84c6-6 6-15 0-21 0 0 0 0 0 0l-19-19C345 313 336 313 330 319z'/%3E%3C/svg%3E"); 173 | } -------------------------------------------------------------------------------- /common/css/style-control_panel.css: -------------------------------------------------------------------------------- 1 | /********************************* 2 | ** Animated Lower Thirds v1.6 ** 3 | ** Author: NoeAL ** 4 | *********************************/ 5 | 6 | :root { 7 | --interface-size: 1; 8 | --obs-background: #3a393a; 9 | } 10 | 11 | 12 | *:focus {outline:none !important} 13 | 14 | /*OBS*/ 15 | body.browser-source.lower-thirds{ 16 | overflow:hidden; 17 | } 18 | 19 | .panel { 20 | background: var(--obs-background); 21 | color: var(--main-color); 22 | font:normal 12px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; 23 | max-width:100%; 24 | /*transform: scale(var(--interface-size)); 25 | transform-origin: top;*/ 26 | margin: 8px 3px 30px; 27 | user-select: none; 28 | overflow-x: hidden; 29 | } 30 | 31 | .static-panel-top { 32 | width: 330px; 33 | margin: 5px; 34 | display: flex; 35 | flex-direction: column; 36 | } 37 | 38 | .panel::-webkit-scrollbar, .panel textarea::-webkit-scrollbar { 39 | width: var(--obs-scrollbar-thickness); 40 | } 41 | .panel::-webkit-scrollbar-thumb, .panel textarea::-webkit-scrollbar-thumb { 42 | border-radius: var(--obs-scrollbar-radius); 43 | border: solid 0px var(--obs-background); 44 | background-color: var(--obs-scrollbar-color); 45 | margin: 3px 0; 46 | padding: 3px 0; 47 | } 48 | .panel::-webkit-scrollbar-button, .panel textarea::-webkit-scrollbar-button { 49 | height: 3px; 50 | display: inline-block; 51 | } 52 | /*::-webkit-scrollbar-track { 53 | background: rgba(0, 0, 0, 0.2); 54 | }*/ 55 | 56 | .panel-bottom { 57 | display: flex; 58 | flex-direction: row; 59 | flex-wrap: wrap; 60 | justify-content: space-between; 61 | } 62 | 63 | /*Main settings panel*/ 64 | #alt-main-config-content{ 65 | box-shadow: inset 0px 0px 5px 0px rgb(0 0 0 / 20%); 66 | border: var(--obs-panel-border); 67 | border-radius: var(--element-radius); 68 | padding: 5px; 69 | margin-bottom: 15px; 70 | transition: background 0.5s; 71 | } 72 | #alt-main-config-content.active { 73 | box-shadow: 0px 0px 2px 0px rgb(222, 240, 255), 74 | 0px 0px 12px 0px rgb(0,149,255); 75 | border-radius: 3px; 76 | } 77 | .main-title{ 78 | width: 275px; 79 | position: absolute; 80 | } 81 | .main-title.switch-left { 82 | margin-left: 30px; 83 | } 84 | .main-icon { 85 | float: left; 86 | box-sizing: border-box; 87 | width: 15px; 88 | height: 15px; 89 | line-height: 15px; 90 | font-size: 15px; 91 | margin: 0px 6px 0px 0px; 92 | } 93 | .main-icon.icon.icon-settings{ 94 | background-color: var(--main-color); 95 | } 96 | #alt-main-config-content i.fas { 97 | margin: 0px; 98 | } 99 | 100 | #global-configuration{ 101 | margin-bottom: -4px; 102 | } 103 | .active + #global-configuration{ 104 | margin-bottom: 0px; 105 | } 106 | #global-configuration #time-options, 107 | #global-configuration #theme-options, 108 | #global-configuration .logos-options, 109 | #global-configuration .default-options, 110 | #global-configuration .bottom-options { 111 | display: flex; 112 | } 113 | #global-configuration .logos-options, 114 | #global-configuration .default-options, 115 | #global-configuration .bottom-options { 116 | margin-bottom: 5px; 117 | } 118 | #global-configuration #theme-options #theme { 119 | width: 100%; 120 | text-transform: capitalize; 121 | } 122 | .settings-title{ 123 | margin: 0; 124 | padding: 2px 0; 125 | width: 24%; 126 | text-align: right; 127 | } 128 | .settings-inputs { 129 | width: 76%; 130 | margin-left: 2px; 131 | display: flex; 132 | justify-content: space-between; 133 | } 134 | .settings-inputs > input, 135 | .settings-inputs > select { 136 | margin-left: 4px!important; 137 | margin-bottom: 4px; 138 | } 139 | .alt-time-options > .settings-inputs input { 140 | margin: 0; 141 | } 142 | 143 | .default-options > div > label { 144 | float: left; 145 | height: 23px; 146 | padding: 3px; 147 | box-sizing: border-box; 148 | } 149 | .default-options > div> label > input { 150 | width: 12px; 151 | margin: 3px 5px 3px 0; 152 | float: left; 153 | height: 12px; 154 | } 155 | .default-options > .settings-inputs { 156 | flex-direction: column; 157 | } 158 | 159 | .accordion { 160 | cursor: pointer; 161 | border: none; 162 | text-align: left; 163 | outline: none; 164 | transition: 0.4s; 165 | position: relative; 166 | float: right; 167 | margin: 0px!important; 168 | } 169 | .accordion:after { 170 | content: ""; 171 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 208H304V64c0-18-14-32-32-32h-32c-18 0-32 14-32 32v144H64c-18 0-32 14-32 32v32c0 18 14 32 32 32h144v144c0 18 14 32 32 32h32c18 0 32-14 32-32V304h144c18 0 32-14 32-32v-32C480 222 466 208 448 208z'/%3E%3C/svg%3E"); 172 | font-weight: bold; 173 | font-size: 20px; 174 | line-height: 0px; 175 | margin: 1px 5px 2px; 176 | display: block; 177 | position: relative; 178 | background-color: var(--main-color); 179 | width: 12px; 180 | height: 12px; 181 | } 182 | .accordion.active:after { 183 | content: ""; 184 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 208H64c-18 0-32 14-32 32v32c0 18 14 32 32 32h384c18 0 32-14 32-32v-32C480 222 466 208 448 208z'/%3E%3C/svg%3E"); 185 | } 186 | .hidable { 187 | max-height: 0; 188 | margin-top: 20px; 189 | overflow: hidden; 190 | transition: max-height 0.2s ease-out; 191 | } 192 | #alt-1-config-content > .accordion > i.fas, 193 | #alt-2-config-content > .accordion > i.fas, 194 | #alt-3-config-content > .accordion > i.fas, 195 | #alt-4-config-content > .accordion > i.fas { 196 | height: 10px; 197 | overflow: hidden; 198 | } 199 | .alt-number-icon { 200 | float: left; 201 | border-radius: 3px; 202 | box-sizing: border-box; 203 | color: var(--main-color); 204 | width: 15px; 205 | height: 15px; 206 | line-height: 11px; 207 | font-size: 9px; 208 | font-weight: 900; 209 | margin: 5px 6px; 210 | text-align: center; 211 | border: 2px solid var(--main-color); 212 | } 213 | 214 | #add-new-font div { 215 | margin: 4px 3px 4px 5px; 216 | background-color: var(--main-color); 217 | cursor: pointer; 218 | } 219 | #add-new-font div:hover { 220 | background-color: #ffffff; 221 | } 222 | 223 | /*********************/ 224 | 225 | .more { 226 | cursor: pointer; 227 | width: 100%; 228 | height: 18px; 229 | line-height: 17px; 230 | text-align: right; 231 | } 232 | .more div { 233 | float: right; 234 | margin: 2px 0px 2px 1px; 235 | transition: transform 0.2s; 236 | background-color: var(--main-color); 237 | } 238 | .more.active div { 239 | transform: rotate(180deg); 240 | margin-top: 1px; 241 | } 242 | .more:before { 243 | content: 'Show more'; 244 | } 245 | .more.active:before { 246 | content: 'Show less'; 247 | } 248 | 249 | .hide-more { 250 | max-height: 0; 251 | overflow: hidden; 252 | transition: max-height 0.2s ease-out; 253 | } 254 | 255 | /*********************/ 256 | 257 | #alt-1-config-content, 258 | #alt-2-config-content, 259 | #alt-3-config-content, 260 | #alt-4-config-content { 261 | box-shadow: inset 0px 0px 5px 0px rgb(0 0 0 / 20%); 262 | border: var(--obs-panel-border); 263 | padding: 5px; 264 | margin-bottom: 15px; 265 | border-radius: 3px; 266 | transition: background 0.5s; 267 | } 268 | 269 | #alt-1-config-content.active, 270 | #alt-2-config-content.active, 271 | #alt-3-config-content.active, 272 | #alt-4-config-content.active { 273 | box-shadow: 0px 0px 2px 0px rgb(222, 240, 255), 274 | 0px 0px 12px 0px rgb(0,149,255); 275 | border-radius: 3px; 276 | } 277 | #alt-1-config-content.inactive, 278 | #alt-2-config-content.inactive, 279 | #alt-3-config-content.inactive, 280 | #alt-4-config-content.inactive { 281 | box-shadow: 0px 0px 2px 0px rgb(255,231,231), 282 | 0px 0px 12px 0px rgb(255,13,13); 283 | border-radius: 3px; 284 | } 285 | 286 | .panel-bottom > ul { 287 | margin: 0 0 0.35em; 288 | list-style: none; 289 | padding: 0; 290 | display: flex; 291 | } 292 | .panel-bottom > ul > li div { 293 | visibility: hidden; 294 | } 295 | .panel-bottom > ul > li { 296 | display: block; 297 | box-sizing: border-box; 298 | float: left; 299 | border: 1px solid var(--obs-field-background); 300 | background-color: var(--obs-field-background); 301 | cursor: pointer; 302 | width: 17px; 303 | height: 17px; 304 | border-radius: 3px; 305 | } 306 | .panel-bottom > ul > li + li { 307 | margin: 0 0 0 4px; 308 | } 309 | .panel-bottom > ul > li.stored { 310 | background: #666; 311 | border: 1px solid #666; 312 | } 313 | .panel-bottom > ul > li.active-slot { 314 | background: var(--main-color); 315 | border: 1px solid var(--main-color); 316 | } 317 | .panel-bottom > ul > li.custom-logo::before { 318 | content: ''; 319 | background-color: var(--main-color); 320 | width: 2px; 321 | height: 2px; 322 | display: block; 323 | position: absolute; 324 | margin: 13px 0px 0px 1px; 325 | border-radius: 50%; 326 | } 327 | .panel-bottom > ul > li.active-slot.custom-logo::before { 328 | background-color: var(--obs-field-background); 329 | } 330 | .panel-bottom > ul > li.next-to-load { 331 | animation: blinker-white 0.25s ease-in infinite; 332 | } 333 | 334 | @keyframes blinker-white { 335 | 0% { background-color: var(--main-color); border: 1px #666; } 336 | 50% { background-color: #666; border: 1px solid #666; } 337 | } 338 | 339 | #alt-1-name-color, #alt-1-info-color, 340 | #alt-2-name-color, #alt-2-info-color, 341 | #alt-3-name-color, #alt-3-info-color, 342 | #alt-4-name-color, #alt-4-info-color { 343 | width: 45px; 344 | height: 15px; 345 | border: none; 346 | border-radius: var(--element-radius); 347 | padding: 3px; 348 | float: right; 349 | font-size: 9px; 350 | transition: 0.1s; 351 | cursor: pointer; 352 | text-align: center; 353 | margin: 4px; 354 | } 355 | #alt-1-name-color.jscolor-active, #alt-1-info-color.jscolor-active, 356 | #alt-2-name-color.jscolor-active, #alt-2-info-color.jscolor-active, 357 | #alt-3-name-color.jscolor-active, #alt-3-info-color.jscolor-active, 358 | #alt-4-name-color.jscolor-active, #alt-4-info-color.jscolor-active { 359 | cursor: text; 360 | } 361 | .tool-tittle.disabled { 362 | opacity: 0.2; 363 | } 364 | .tool-tittle.disabled + .jscolor { 365 | opacity: 0.2; 366 | pointer-events: none; 367 | } 368 | 369 | #alt-1-style-color-1, #alt-1-style-color-2, #alt-1-style-color-3, #alt-1-style-color-4, 370 | #alt-2-style-color-1, #alt-2-style-color-2, #alt-2-style-color-3, #alt-2-style-color-4, 371 | #alt-3-style-color-1, #alt-3-style-color-2, #alt-3-style-color-3, #alt-3-style-color-4, 372 | #alt-4-style-color-1, #alt-4-style-color-2, #alt-4-style-color-3, #alt-4-style-color-4 { 373 | width: 45px; 374 | height: 15px; 375 | border: none; 376 | border-radius: var(--element-radius); 377 | padding: 3px; 378 | font-size: 9px; 379 | transition: 0.1s; 380 | cursor: pointer; 381 | text-align: center; 382 | margin: 4px 4px 4px 3px; 383 | } 384 | 385 | .clean { 386 | margin: 1px; 387 | cursor: pointer; 388 | display: flex; 389 | width: 9px; 390 | width: 15px; 391 | height: 15px; 392 | } 393 | .clean div { 394 | width: 13px; 395 | height: 13px; 396 | margin: 1px; 397 | } 398 | .panel-bottom > .clean > .icon { 399 | background-color: var(--main-color); 400 | } 401 | .panel-bottom > .clean > .icon:hover { 402 | background-color: #ffffff; 403 | } 404 | .panel-bottom > label.config-btn { 405 | width: 15px; 406 | height: 15px; 407 | margin: 1px; 408 | line-height: 0; 409 | } 410 | .panel-bottom > label > .icon-btn { 411 | margin: 0px; 412 | } 413 | .delete { 414 | animation: blinker-red 0.25s linear infinite; 415 | } 416 | 417 | @keyframes blinker-red { 418 | 0% { background-color: #1f1e1f; border: 1px solid var(--obs-field-background); } 419 | 50% { background-color: red; border: 1px solid var(--obs-field-background); } 420 | } 421 | 422 | .time-bar{ 423 | display: flex; 424 | flex-direction: column; 425 | margin: 0 1px 0 0; 426 | } 427 | .time-bar > div { 428 | float: left; 429 | font-size: 7px; 430 | padding: 1px 3px; 431 | line-height: 1em; 432 | width: 22px; 433 | height: 8px; 434 | background: var(--obs-field-background); 435 | border-radius: 3px; 436 | text-align: right; 437 | box-sizing: border-box; 438 | overflow: hidden; 439 | font-weight: 700; 440 | color: #666666; 441 | } 442 | .time-bar > div + div { 443 | margin: 1px 0 0 0; 444 | } 445 | .active > div > .time-bar > div, 446 | .inactive > div > .time-bar > div { 447 | color: #598cb4; 448 | } 449 | .active > div > .time-bar > div + div, 450 | .inactive > div > .time-bar > div + div { 451 | color: #b46161; 452 | } 453 | 454 | label#alt-1-custom-times::after, 455 | label#alt-2-custom-times::after, 456 | label#alt-3-custom-times::after, 457 | label#alt-4-custom-times::after { 458 | display: none; 459 | } 460 | 461 | label#alt-1-custom-times, 462 | label#alt-2-custom-times, 463 | label#alt-3-custom-times, 464 | label#alt-4-custom-times { 465 | width: 15px; 466 | height: 15px; 467 | display: flex; 468 | margin: 1px!important; 469 | } 470 | 471 | #alt-1-custom-times + .hidable, 472 | #alt-2-custom-times + .hidable, 473 | #alt-3-custom-times + .hidable, 474 | #alt-4-custom-times + .hidable { 475 | margin-top: 0px; 476 | } 477 | 478 | label#alt-1-custom-times i.fas, 479 | label#alt-2-custom-times i.fas, 480 | label#alt-3-custom-times i.fas, 481 | label#alt-4-custom-times i.fas { 482 | font-size: 12px; 483 | font-weight: 100; 484 | margin: 0; 485 | color: #666666; 486 | } 487 | label#alt-1-custom-times.active > .icon-btn, 488 | label#alt-2-custom-times.active > .icon-btn, 489 | label#alt-3-custom-times.active > .icon-btn, 490 | label#alt-4-custom-times.active > .icon-btn { 491 | background-color: var(--main-color); 492 | } 493 | label#alt-1-custom-times > .icon-btn.active, 494 | label#alt-2-custom-times > .icon-btn.active, 495 | label#alt-3-custom-times > .icon-btn.active, 496 | label#alt-4-custom-times > .icon-btn.active { 497 | background-color: var(--main-color); 498 | } 499 | 500 | 501 | /***********************/ 502 | /*The switch-the box around the slider*/ 503 | .panel label.switch { 504 | margin: 0px; 505 | top: 1px; 506 | } 507 | .switch { 508 | position: relative; 509 | width: 21px; 510 | height: 13px; 511 | float: right; 512 | } 513 | .switch.switch-left { 514 | float: left; 515 | } 516 | label i.fas { 517 | font-size: 15px; 518 | margin: 0 6px 0 2px; 519 | position: relative; 520 | } 521 | i.fas { 522 | -webkit-touch-callout: none; 523 | -webkit-user-select: none; 524 | -khtml-user-select: none; 525 | -moz-user-select: none; 526 | -ms-user-select: none; 527 | user-select: none; 528 | } 529 | .switch input { 530 | opacity: 0; 531 | width: 0; 532 | height: 0; 533 | margin: 0; 534 | } 535 | .slider { 536 | position: absolute; 537 | cursor: pointer; 538 | top: 0; 539 | left: 0; 540 | right: 0; 541 | bottom: 0; 542 | background-color: var(--obs-field-background); 543 | -webkit-transition: .4s; 544 | transition: .4s; 545 | } 546 | .slider:before { 547 | position: absolute; 548 | content: ""; 549 | height: 9px; 550 | width: 9px; 551 | left: 2px; 552 | bottom: 2px; 553 | background-color: var(--main-color); 554 | -webkit-transition: .4s; 555 | transition: .4s; 556 | } 557 | input:checked + .slider { 558 | background-color: var(--obs-switch-active-background); 559 | } 560 | /* input:focus + .slider { 561 | box-shadow: 0 0 1px var(--obs-switch-active-background); 562 | } */ 563 | input:checked + .slider:before { 564 | -webkit-transform: translateX(8px); 565 | -ms-transform: translateX(8px); 566 | transform: translateX(8px); 567 | background-color: #fff; 568 | } 569 | .slider.round { 570 | border-radius: 14px; 571 | } 572 | .slider.round:before { 573 | border-radius: 50%; 574 | } 575 | 576 | .panel label { 577 | display: inline-block; 578 | } 579 | 580 | .panel input { 581 | box-sizing: border-box; 582 | padding:.4em; 583 | margin:0 0 5px; 584 | border: var(--obs-field-border); 585 | display:block; 586 | width:100%; 587 | height: 23px; 588 | border-radius: var(--element-radius); 589 | background: var(--obs-field-background); 590 | color: #d2d2d2; 591 | font-size: 1em; 592 | } 593 | .panel input.disable{ 594 | color: #828282; 595 | background: #2f2f2f; 596 | } 597 | .panel textarea { 598 | box-sizing: border-box; 599 | padding:.4em; 600 | margin:0 0 5px; 601 | border: var(--obs-field-border); 602 | display:block; 603 | border-radius: var(--element-radius); 604 | background: var(--obs-field-background); 605 | color: #d2d2d2; 606 | font-size: 1em; 607 | resize: none; 608 | cursor: auto; 609 | } 610 | 611 | ::placeholder { 612 | color: #4a4a4a; 613 | } 614 | 615 | /***********************/ 616 | input#alt-1-name, input#alt-1-info, 617 | input#alt-2-name, input#alt-2-info, 618 | input#alt-3-name, input#alt-3-info, 619 | input#alt-4-name, input#alt-4-info { 620 | float: left; 621 | width: calc(100% - 111px); 622 | margin-right: 0px; 623 | border-radius: 2px 0 0 2px; 624 | border-right: 0; 625 | } 626 | #alt-1-name-appearance, #alt-1-info-appearance, 627 | #alt-2-name-appearance, #alt-2-info-appearance, 628 | #alt-3-name-appearance, #alt-3-info-appearance, 629 | #alt-4-name-appearance, #alt-4-info-appearance { 630 | float: right; 631 | background-color: var(--obs-field-background); 632 | border-radius: 0 var(--element-radius) var(--element-radius) 0; 633 | border: var(--obs-field-border); 634 | border-left: 0; 635 | box-sizing: border-box; 636 | height: 23px; 637 | width: 111px; 638 | } 639 | 640 | #alt-1-name-appearance > .config-btn > .icon-btn > i.fas, 641 | #alt-1-info-appearance > .config-btn > .icon-btn > i.fas, 642 | #alt-2-name-appearance > .config-btn > .icon-btn > i.fas, 643 | #alt-2-info-appearance > .config-btn > .icon-btn > i.fas, 644 | #alt-3-name-appearance > .config-btn > .icon-btn > i.fas, 645 | #alt-3-info-appearance > .config-btn > .icon-btn > i.fas, 646 | #alt-4-name-appearance > .config-btn > .icon-btn > i.fas, 647 | #alt-4-info-appearance > .config-btn > .icon-btn > i.fas { 648 | font-size: 13px; 649 | margin: 5px; 650 | } 651 | .textfields-container > div > label:first-child > span > i.fas { 652 | transform: translate(0.35em, 0em); 653 | } 654 | .fill-color-appearance, 655 | .border-color-appearance { 656 | background-color: var(--obs-field-background); 657 | border-radius: var(--element-radius); 658 | border: var(--obs-field-border); 659 | box-sizing: border-box; 660 | height: 23px; 661 | width: 155px; 662 | display: inline-flex; 663 | justify-content: flex-end; 664 | } 665 | .fill-color-appearance.disable, 666 | .border-color-appearance.disable { 667 | background-color: #2f2f2f; 668 | color: #828282; 669 | } 670 | .tool-tittle { 671 | line-height: 14px; 672 | font-size: 9px; 673 | text-transform: uppercase; 674 | font-weight: 600; 675 | margin: 4px 0px 4px 0px; 676 | cursor: default; 677 | } 678 | #alt-1-style-color-1 + .tool-tittle, 679 | #alt-2-style-color-1 + .tool-tittle, 680 | #alt-3-style-color-1 + .tool-tittle, 681 | #alt-4-style-color-1 + .tool-tittle { 682 | margin-left: 1px; 683 | } 684 | 685 | .panel button{ 686 | /* background: var(--obs-button-background); 687 | border: 1px solid var(--obs-button-border); */ 688 | /* color: var(--obs-button-color); */ 689 | padding:.75em; 690 | margin:0 0 1em; 691 | text-align:center; 692 | width:100%; 693 | } 694 | 695 | .panel button.onethird{ 696 | width:30%; 697 | float:left; 698 | margin-right:2%; 699 | font-size: 1em; 700 | } 701 | 702 | .panel button:hover{ 703 | background: var(--obs-button-hover-background); 704 | border-color: var(--obs-button-hover-border); 705 | } 706 | .panel button:active{ 707 | /* background: var(--obs-button-active-background); */ 708 | } 709 | 710 | .panel .radio-position{float: right;text-align:center} 711 | 712 | .panel .radio-position input{ 713 | width: 2em; 714 | height:2em; 715 | display:inline-block 716 | } 717 | 718 | .panel .radio-position input:checked{ 719 | background:red 720 | } 721 | 722 | .panel ul#predefined { 723 | list-style: none; 724 | padding: 0; 725 | } 726 | 727 | .panel ul#predefined li .name, ul#predefined li .function { 728 | display: inline-block; 729 | } 730 | 731 | .panel ul#predefined li { 732 | padding: .5em 1em; 733 | border: 1px solid #555; 734 | margin: 0 0 .25em; 735 | text-align: center; 736 | cursor: pointer; 737 | } 738 | 739 | .panel ul#predefined li .function:before{ content: "\00a0(";} 740 | .panel ul#predefined li .function:after{ content: ")";} 741 | 742 | 743 | 744 | input[type="number"] { 745 | -webkit-appearance: textfield; 746 | -moz-appearance: textfield; 747 | appearance: textfield; 748 | } 749 | input[type=number]::-webkit-inner-spin-button, 750 | input[type=number]::-webkit-outer-spin-button { 751 | -webkit-appearance: none; 752 | } 753 | 754 | .number-input { 755 | display: inline-flex; 756 | width: 40px; 757 | } 758 | .number-input + .input-no-icon { 759 | margin-left: 5px; 760 | } 761 | .number-input, 762 | .number-input * { 763 | box-sizing: border-box; 764 | } 765 | .number-input button { 766 | outline:none; 767 | -webkit-appearance: none; 768 | background-color: transparent; 769 | border: none; 770 | align-items: center; 771 | justify-content: center; 772 | height: 10px; 773 | width: 12px; 774 | padding: 5px 6px; 775 | cursor: pointer; 776 | margin: 0; 777 | bottom: -11px; 778 | border-radius: 3px; 779 | } 780 | .number-input button.down { 781 | order: 2; 782 | right: 13px; 783 | } 784 | .number-input button.up { 785 | order: 3; 786 | right: 25px; 787 | bottom: -2px; 788 | } 789 | .number-input button:hover { 790 | background-color: #2d2d2d; 791 | } 792 | .number-input button:hover:before, 793 | .number-input button:hover:after { 794 | background-color: var(--main-color); 795 | } 796 | .number-input button:before, 797 | .number-input button:after { 798 | display: inline-block; 799 | position: absolute; 800 | content: ''; 801 | width: 0.3rem; 802 | height: 2px; 803 | background-color: #666666; 804 | transform: translate(-75%, -50%) rotate(-45deg); 805 | } 806 | .number-input button.up:after { 807 | transform: translate(-25%, -50%) rotate(45deg); 808 | } 809 | .number-input button.down:before { 810 | transform: translate(-75%, -50%) rotate(45deg); 811 | } 812 | .number-input button.down:after { 813 | transform: translate(-25%, -50%) rotate(-45deg); 814 | } 815 | 816 | .number-input input[type=number] { 817 | order: 1; 818 | text-align: center; 819 | width: 40px; 820 | padding-right: 12px; 821 | } 822 | .number-input input[type="number"]:disabled { 823 | background: #2f2f2f; 824 | 825 | } 826 | .number-input input[type="number"]:disabled + button, 827 | .number-input input[type="number"]:disabled + button + button { 828 | background: #2f2f2f; 829 | pointer-events: none; 830 | } 831 | .number-input input[type="number"]:disabled + button + button + .input-icon { 832 | color: #666; 833 | } 834 | 835 | .input-icon { 836 | order: 0; 837 | display: inline-flex; 838 | background-color: var(--main-color)!important; 839 | margin: 4px; 840 | } 841 | .input-icon > .fas { 842 | font-size: 15px; 843 | margin: 4px; 844 | } 845 | 846 | /* CSS :invalid pseudo selector */ 847 | input:invalid { 848 | /* border: 1px solid; 849 | border-color: red; */ 850 | } 851 | 852 | label.config-btn { 853 | width: 23px; 854 | height: 23px; 855 | } 856 | label.config-btn.small { 857 | width: 17px; 858 | height: 23px; 859 | } 860 | .config-btn input { 861 | opacity: 0; 862 | width: 0; 863 | height: 0; 864 | margin: 0; 865 | padding: 0; 866 | position: absolute; /* Firefox fix */ 867 | } 868 | .icon-btn { 869 | color: #666666; 870 | cursor: pointer; 871 | margin: 4px; 872 | } 873 | .icon-btn:hover { 874 | background-color: #808080; 875 | } 876 | .icon-btn > .fas { 877 | font-size: 15px; 878 | margin: 4px; 879 | top: 0px; 880 | cursor: pointer; 881 | } 882 | .icon-btn p { 883 | display: table; 884 | font-size: 1.2em; 885 | font-weight: 600; 886 | position: relative; 887 | margin: 0px; 888 | padding: 0px; 889 | transform: translate(0.25em, -0.8em); 890 | line-height: 0; 891 | cursor: pointer; 892 | } 893 | input:checked + .icon-btn { 894 | background-color: var(--main-color); 895 | } 896 | input:checked + .icon-btn:hover { 897 | background-color: #ffffff; 898 | } 899 | input:disabled + .icon-btn { 900 | background-color: var(--obs-field-background); 901 | pointer-events: none; 902 | } 903 | 904 | 905 | .align-toggle { 906 | display: inline-flex; 907 | } 908 | .align-toggle input { 909 | position: absolute; 910 | opacity: 0; 911 | width: 0; 912 | display: inline-block; 913 | } 914 | .align-toggle input + label { 915 | margin: 0; 916 | width: 21px; 917 | float:left; 918 | color: #666666; 919 | cursor: pointer; 920 | } 921 | .align-toggle input + label > div { 922 | margin: 4px; 923 | } 924 | .align-toggle input + label > div:hover { 925 | background-color: #808080; 926 | } 927 | .align-toggle input:checked + label > div { 928 | background-color: var(--main-color); 929 | } 930 | .align-toggle input:checked + label > div:hover { 931 | background-color: #ffffff; 932 | } 933 | .align-toggle input:disabled + label > div { 934 | background-color: var(--obs-field-background); 935 | } 936 | .align-toggle input:disabled + label { 937 | /* pointer-events: none; */ 938 | cursor: default; 939 | } 940 | .lock-input{ 941 | position: relative; 942 | width: 0!important; 943 | left: -23px; 944 | } 945 | select { 946 | padding: 0.4em; 947 | font-size: 1em; 948 | border: var(--obs-field-border); 949 | border-radius: var(--element-radius); 950 | height: 23px; 951 | -webkit-appearance: none; 952 | -moz-appearance: none; 953 | appearance: none; 954 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23D2D2D2' d='M127 192h257c18 0 27 22 14 34L270 355c-8 8-20 8-28 0L113 226C101 214 110 192 127 192z'/%3E%3C/svg%3E"); 955 | background-repeat: no-repeat; 956 | background-size: 9px; 957 | background-position: right 5px center; 958 | cursor: pointer; 959 | background-color: var(--obs-field-background); 960 | color: #d2d2d2; 961 | } 962 | select#alt-1-font, 963 | select#alt-2-font, 964 | select#alt-3-font, 965 | select#alt-4-font { 966 | width: 155px; 967 | } 968 | 969 | .grid-container { 970 | display: grid; 971 | grid-template-columns: 1fr; 972 | gap: 5px; 973 | margin-bottom: 5px; 974 | } 975 | .grid-row, 976 | .alt-time-options { 977 | display: inline-flex; 978 | justify-content: space-between; 979 | height: 23px; 980 | } 981 | .grid-row > div { 982 | display: inline-flex; 983 | } 984 | .grid-container * { 985 | position: relative; 986 | } 987 | .font-config.group { 988 | min-width: 143px; 989 | } 990 | /********************************* 991 | ** PREVIEW ** 992 | *********************************/ 993 | 994 | #alt-preview { 995 | position: fixed; 996 | box-sizing: border-box; 997 | bottom: 0px; 998 | height: 211px; 999 | width: 330px; 1000 | padding: 5px; 1001 | margin: 5px 0px 5px; 1002 | border: none; 1003 | border: var(--obs-panel-border); 1004 | border-radius: 3px; 1005 | background: var(--obs-background); 1006 | box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 40%); 1007 | transition: bottom 0.5s; 1008 | } 1009 | 1010 | #alt-preview > label > .icon.icon-search { 1011 | background-color: var(--main-color); 1012 | } 1013 | 1014 | #alt-preview.active { 1015 | bottom: -190px; 1016 | } 1017 | #alt-preview.hide { 1018 | display: none; 1019 | } 1020 | 1021 | #toggle-preview { 1022 | position: absolute; 1023 | right: 10px; 1024 | top: 6px; 1025 | cursor: pointer; 1026 | } 1027 | #toggle-preview div{ 1028 | transition: transform 0.2s; 1029 | width: 13px; 1030 | height: 13px; 1031 | background-color: var(--main-color); 1032 | } 1033 | #toggle-preview.active div{ 1034 | transform: rotate(-180deg); 1035 | } 1036 | 1037 | .embed-container { 1038 | margin-top: 2px; 1039 | } 1040 | .embed-container iframe { 1041 | /*height: 203px; 1042 | width: 360px; 1043 | border-radius: var(--element-radius); 1044 | border: var(--obs-field-border); 1045 | background: var(--alt-preview-background); 1046 | box-shadow: inset 0px 0px 30px 10px rgb(0 0 0 / 20%);*/ 1047 | height: 179px; 1048 | width: 318px; 1049 | border-radius: var(--element-radius); 1050 | border: var(--obs-field-border); 1051 | background: var(--alt-preview-background); 1052 | box-shadow: inset 0px 0px 30px 10px rgb(0 0 0 / 20%); 1053 | } 1054 | 1055 | .config-btn.preview-btn { 1056 | float: right; 1057 | margin: 0px 3px; 1058 | width: 16px; 1059 | height: 16px; 1060 | } 1061 | .config-btn.preview-btn.hide { 1062 | display: none; 1063 | } 1064 | .config-btn.preview-btn > .icon-btn { 1065 | width: 14px; 1066 | height: 14px; 1067 | margin: 0px; 1068 | } 1069 | 1070 | /*********************************/ 1071 | 1072 | .sortees { 1073 | background: var(--obs-background); 1074 | } 1075 | 1076 | .ui-sortable-helper { 1077 | box-shadow: -4px 8px 7px rgb(0 0 0 / 40%); 1078 | transform: rotate(-3deg); 1079 | cursor: -webkit-grabbing; cursor: grabbing; 1080 | } 1081 | .ui-sortable-helper > div { 1082 | /* box-shadow: none!important; */ 1083 | } 1084 | 1085 | .ui-sortable-placeholder { 1086 | visibility: visible!important; 1087 | border: 2px dashed var(--obs-field-background-disable); 1088 | margin-bottom: 11px; 1089 | } 1090 | 1091 | .renameable { 1092 | display: inline-block; 1093 | min-width: 230px; 1094 | position: relative; 1095 | top: 4px; 1096 | } 1097 | .renameable input { 1098 | display: inline-block; 1099 | background: none; 1100 | margin: 0; 1101 | padding: 0; 1102 | height: 14px; 1103 | } 1104 | 1105 | i.alt-icon { 1106 | font-size: 15px; 1107 | margin: 0 6px 0 7px; 1108 | position: relative; 1109 | height: 10px; 1110 | overflow: hidden; 1111 | top: 5px; 1112 | } 1113 | 1114 | .drag-handle { 1115 | position: absolute; 1116 | transform: translate(-5px, -5px); 1117 | height: 25px; 1118 | width: 278px; 1119 | } 1120 | .drag-handle.switch-left { 1121 | margin-left: 30px; 1122 | width: 248px; 1123 | } 1124 | .drag-handle.switch-left > .renameable { 1125 | min-width: 220px; 1126 | } 1127 | 1128 | #fonts-options { 1129 | display: flex; 1130 | } 1131 | 1132 | #custom-font-list { 1133 | display: flex; 1134 | margin: 0 0 0 23%; 1135 | padding: 0; 1136 | } 1137 | 1138 | #custom-font-list > ul { 1139 | list-style: none; 1140 | display: flex; 1141 | flex-wrap: wrap; 1142 | width: 100%; 1143 | margin: 0; 1144 | padding: 0; 1145 | } 1146 | 1147 | #custom-font-list > ul > li { 1148 | display: flex; 1149 | box-sizing: border-box; 1150 | background: var(--obs-field-background); 1151 | border: var(--obs-field-border); 1152 | width: 100%; 1153 | height: 23px; 1154 | border-radius: 3px; 1155 | margin: 0 0 5px 8px; 1156 | } 1157 | 1158 | .font-url-added {display: none;} 1159 | 1160 | .font-name-added { 1161 | width: calc(100% - 23px); 1162 | padding: 2px 4px; 1163 | } 1164 | 1165 | .delete-font { 1166 | width: 15px; 1167 | height: 15px; 1168 | margin: 4px 4px 4px 4px; 1169 | padding: 0; 1170 | cursor: pointer; 1171 | } 1172 | 1173 | .delete-font div { 1174 | background-color: var(--main-color); 1175 | } 1176 | .delete-font div:hover { 1177 | background-color: #ffffff; 1178 | } 1179 | .slot-number { 1180 | visibility: visible!important; 1181 | color: var(--obs-field-background); 1182 | font-weight: 700; 1183 | width: 15px; 1184 | height: 15px; 1185 | margin: 0px; 1186 | padding: 0px; 1187 | font-size: 10px; 1188 | line-height: 15px; 1189 | box-sizing: border-box; 1190 | text-align: center; 1191 | } 1192 | .slot-number.hide{ 1193 | display: none; 1194 | } 1195 | .stored .slot-number { 1196 | color: var(--main-color); 1197 | } 1198 | .stored.active-slot .slot-number { 1199 | color: var(--obs-field-background); 1200 | } 1201 | 1202 | .panel-bottom > ul > li .tooltiptext { 1203 | visibility: hidden; 1204 | font-size: 11px; 1205 | max-width: 130px; 1206 | background-color: var(--obs-field-background); 1207 | color: var(--main-color); 1208 | text-align: center; 1209 | border-radius: 3px; 1210 | padding: 5px 8px; 1211 | position: absolute; 1212 | z-index: 1; 1213 | margin-top: 25px; 1214 | margin-left: -35px; 1215 | white-space: pre-line; 1216 | opacity: 0; 1217 | transition: opacity 1s; 1218 | box-shadow: 2px 2px 5px rgb(0 0 0 / 30%); 1219 | border: 1px solid #252525; 1220 | } 1221 | .tooltiptext > hr { 1222 | border: none; 1223 | border-top: 1px solid #333333; 1224 | margin: 7px 0 4px; 1225 | } 1226 | .tooltiptext > p { 1227 | margin: 0 0 2px 0; 1228 | color: #888888; 1229 | font-size: 0.8em; 1230 | } 1231 | 1232 | /*Settings Tooltips*/ 1233 | .ui-helper-hidden-accessible { 1234 | border: 0; 1235 | clip: rect(0 0 0 0); 1236 | height: 1px; 1237 | margin: -1px; 1238 | overflow: hidden; 1239 | padding: 0; 1240 | position: absolute; 1241 | width: 1px; 1242 | } 1243 | .ui-tooltip { 1244 | padding: 5px 8px; 1245 | max-width: 250px; 1246 | position: absolute; 1247 | z-index: 9999; 1248 | white-space: pre-line; 1249 | } 1250 | .ui-corner-all { 1251 | border-radius: 3px; 1252 | } 1253 | .ui-widget-content { 1254 | border: 1px solid #c5c5c5; 1255 | background: #ffffff; 1256 | color: var(--obs-field-background); 1257 | } 1258 | .ui-widget-shadow { 1259 | -webkit-box-shadow: 2px 2px 5px rgb(0 0 0 / 30%); 1260 | box-shadow: 2px 2px 5px rgb(0 0 0 / 30%); 1261 | } 1262 | 1263 | .panel-bottom > ul > li:hover .tooltiptext { 1264 | visibility: visible; 1265 | animation: tooltip-anim 0.2s; 1266 | animation-fill-mode: forwards; 1267 | animation-delay: 0.6s; 1268 | } 1269 | @keyframes tooltip-anim { 1270 | from {opacity: 0;} 1271 | to {opacity: 1;} 1272 | } 1273 | 1274 | /************/ 1275 | 1276 | .center.hide { 1277 | display: none; 1278 | } 1279 | 1280 | .select-image-bg, 1281 | .reset-all-bg, 1282 | .export-data-bg { 1283 | position: fixed; 1284 | top: 0; 1285 | left: 0; 1286 | bottom: 0; 1287 | right: 0; 1288 | background: rgba(0,0,0,.5); 1289 | z-index: 1; 1290 | } 1291 | .center { 1292 | height:100%; 1293 | width: 330px; 1294 | display:flex; 1295 | align-items:center; 1296 | justify-content:center; 1297 | position: fixed; 1298 | } 1299 | .form-input { 1300 | width: 240px; 1301 | padding: 15px; 1302 | background: var(--obs-background); 1303 | border: var(--obs-panel-border); 1304 | pointer-events: all; 1305 | border-radius: 3px; 1306 | box-shadow: 0px 0px 13px 2px rgb(0 0 0 / 70%); 1307 | z-index: 2; 1308 | } 1309 | .form-input input { 1310 | display:none; 1311 | } 1312 | .form-input label { 1313 | display: block; 1314 | width: 100%; 1315 | height: 30px; 1316 | line-height: 30px; 1317 | text-align: center; 1318 | background: var(--obs-button-background); 1319 | color: var(--main-color); 1320 | font-size: 12px; 1321 | text-transform: Uppercase; 1322 | font-weight: 600; 1323 | border-radius: 3px; 1324 | cursor: pointer; 1325 | } 1326 | .form-input h1 { 1327 | margin: 0 0 10px; 1328 | line-height: 23px; 1329 | font-size: 1.8em; 1330 | font-weight: 600; 1331 | } 1332 | .form-input p { 1333 | margin: 0 0 10px; 1334 | } 1335 | 1336 | .form-input img { 1337 | width:100%; 1338 | display:none; 1339 | margin:10px 0px; 1340 | } 1341 | 1342 | .file-btns, 1343 | .reset-btns, 1344 | .export-btns { 1345 | display: flex; 1346 | } 1347 | .btn-remove { 1348 | width: 34px; 1349 | height: 30px; 1350 | line-height: 26px; 1351 | text-align: center; 1352 | background: var(--obs-button-background); 1353 | color: var(--main-color); 1354 | font-size: 12px; 1355 | border-radius: 3px; 1356 | cursor: pointer; 1357 | margin-left: 4px; 1358 | } 1359 | .btn-remove > div { 1360 | margin: 7px; 1361 | } 1362 | .btn-ok, 1363 | .btn-ok-reset, 1364 | .btn-ok-export, 1365 | .btn-cancel, 1366 | .btn-settings { 1367 | display: block; 1368 | width: 50%; 1369 | height: 26px; 1370 | line-height: 26px; 1371 | text-align: center; 1372 | background: var(--obs-button-background); 1373 | color: var(--main-color); 1374 | font-size: 12px; 1375 | text-transform: Uppercase; 1376 | font-weight: 600; 1377 | border-radius: 3px; 1378 | cursor: pointer; 1379 | } 1380 | .btn-settings { 1381 | margin-left: 4px; 1382 | text-transform: capitalize; 1383 | } 1384 | .btn-cancel { 1385 | margin-left: 4px; 1386 | } 1387 | .btn-ok-export { 1388 | width: 100%; 1389 | } 1390 | #dataInput { 1391 | display: block; 1392 | width: 240px; 1393 | height: 100%; 1394 | margin-bottom: 15px; 1395 | } 1396 | 1397 | .import-file-btn input { 1398 | display: none; 1399 | } 1400 | .import-file-btn label { 1401 | display: block; 1402 | width: 76px; 1403 | height: 26px; 1404 | line-height: 26px; 1405 | text-align: center; 1406 | background: var(--obs-button-background); 1407 | color: var(--main-color); 1408 | font-size: 12px; 1409 | font-weight: 600; 1410 | border-radius: 3px; 1411 | cursor: pointer; 1412 | margin-left: 4px; 1413 | } 1414 | 1415 | .no-image { 1416 | height: 90px; 1417 | border: 2px dashed #555; 1418 | box-sizing: border-box; 1419 | margin: 10px 0px; 1420 | display: flex; 1421 | } 1422 | .no-image::before { 1423 | content: 'Default'; 1424 | margin: auto; 1425 | font-size: 20px; 1426 | font-weight: 700; 1427 | color: #555; 1428 | text-transform: uppercase; 1429 | } 1430 | 1431 | .first-edit-container { 1432 | display: flex; 1433 | } 1434 | .logo-container { 1435 | width: 96px; 1436 | height: 51px; 1437 | background: var(--obs-field-background); 1438 | border-radius: 3px; 1439 | margin-right: 4px; 1440 | overflow: hidden; 1441 | display: flex; 1442 | align-items: center; 1443 | border: var(--obs-field-border); 1444 | cursor: pointer; 1445 | } 1446 | .logo-container::after { 1447 | background-color: #00000070; 1448 | width: 100%; 1449 | height: 100%; 1450 | content: '···'; 1451 | display: flex; 1452 | margin-left: -100%; 1453 | justify-content: center; 1454 | align-items: center; 1455 | opacity: 0; 1456 | font-size: 22px; 1457 | font-weight: 900; 1458 | } 1459 | .logo-container:hover::after { 1460 | opacity: 1; 1461 | } 1462 | .logo-container.default { 1463 | width: 56px; 1464 | height: 56px; 1465 | margin: 0 0 0 4px; 1466 | border: var(--obs-field-border); 1467 | } 1468 | .logo-numbers { 1469 | display: inline-table; 1470 | position: relative; 1471 | top: 23px; 1472 | left: 6px; 1473 | width: 9px; 1474 | height: 8px; 1475 | background: #1f1e1fa6; 1476 | font-size: 7px; 1477 | box-sizing: border-box; 1478 | border-radius: 50%; 1479 | line-height: 9px; 1480 | text-align: center; 1481 | margin: 0 -5px; 1482 | } 1483 | .logo-container.hide { 1484 | display: none; 1485 | } 1486 | #alt-1-logo-default, 1487 | #alt-2-logo-default, 1488 | #alt-3-logo-default, 1489 | #alt-4-logo-default, 1490 | #alt-1-logo-preview, 1491 | #alt-2-logo-preview, 1492 | #alt-3-logo-preview, 1493 | #alt-4-logo-preview { 1494 | max-height: 100%; 1495 | max-width: 100%; 1496 | } 1497 | #alt-1-logo-default, 1498 | #alt-2-logo-default, 1499 | #alt-3-logo-default, 1500 | #alt-4-logo-default { 1501 | margin-left: 1px; 1502 | } 1503 | 1504 | .divider { 1505 | height: 1px; 1506 | background-color: var(--obs-scrollbar-color); 1507 | width: 100%; 1508 | margin: 5px 0 10px; 1509 | } 1510 | 1511 | 1512 | input.locked + .icon-btn { 1513 | pointer-events: none; 1514 | user-select: none; 1515 | background-color: var(--main-color); 1516 | } 1517 | 1518 | .tab { 1519 | display: flex; 1520 | justify-content: space-between; 1521 | margin-top: 5px; 1522 | border-bottom: 1px solid var(--obs-tabs-separator); 1523 | margin-bottom: 10px; 1524 | } 1525 | .tablinks { 1526 | cursor: pointer; 1527 | height: 26px; 1528 | padding: 0px!important; 1529 | margin: 0px!important; 1530 | border-radius: 3px 3px 0 0; 1531 | font: unset; 1532 | color: var(--main-color); 1533 | background: var(--obs-tab-background); 1534 | border: 1px solid var(--obs-tab-border); 1535 | border-bottom: none; 1536 | } 1537 | .tablinks:not(:last-child) { 1538 | margin-right: 2px!important; 1539 | } 1540 | .tablinks.active { 1541 | background: var(--obs-tab-active-background); 1542 | border-color: var(--obs-tab-active-border); 1543 | } -------------------------------------------------------------------------------- /common/css/style-source.css: -------------------------------------------------------------------------------- 1 | /********************************* 2 | ** Animated Lower Thirds v1.6 ** 3 | ** Author: NoeAL ** 4 | *********************************/ 5 | 6 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); 7 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 8 | @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap'); 9 | @import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap'); 10 | @import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap'); 11 | @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap'); 12 | @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap'); 13 | @import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap'); 14 | @import url('https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap'); 15 | @import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap'); 16 | @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap'); 17 | 18 | :root { 19 | --alt-1-animation-time: 4s; 20 | --alt-2-animation-time: 4s; 21 | --alt-3-animation-time: 4s; 22 | --alt-4-animation-time: 4s; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | line-height: 0; 28 | font-family: 'Open Sans', sans-serif; 29 | line-height: 1; 30 | position: absolute; 31 | width: 100%; 32 | height: 100%; 33 | overflow: hidden; 34 | /*background-color: #888888; //Tests background*/ 35 | } 36 | 37 | /********************************* 38 | ** PREVIEW ** 39 | *********************************/ 40 | 41 | .preview { 42 | width: 1920px; 43 | height: 1080px; 44 | transform: scale(0.1656); 45 | left: -252%; 46 | top: -252%; 47 | } 48 | 49 | /*******************************/ 50 | 51 | .lower-thirds { 52 | display: flex; 53 | justify-content: center; 54 | } 55 | 56 | /**************************** 57 | ** Style 1 Animation: Left ** 58 | ****************************/ 59 | @keyframes animation-left-logo { 60 | 0% { 61 | opacity: 0; 62 | right: -30%; 63 | } 64 | 55% { 65 | opacity: 0; 66 | right: -30%; 67 | } 68 | 100% { 69 | opacity: 1; 70 | right: 0; 71 | } 72 | } 73 | @keyframes animation-left-slash { 74 | 0% { 75 | opacity: 0; 76 | transform: translate3d(10em, 0, 0); 77 | } 78 | 23% { 79 | opacity: 0; 80 | transform: translate3d(10em, 0, 0); 81 | } 82 | 50% { 83 | opacity: 1; 84 | } 85 | 75% { 86 | transform: translate3d(0, 0, 0); 87 | } 88 | 100% { 89 | transform: translate3d(0, 0, 0); 90 | } 91 | } 92 | @keyframes animation-left-background { 93 | 0% { 94 | width: 0; 95 | padding-left: 0; 96 | padding-right: 0; 97 | border: 0 solid #00000000; 98 | } 99 | 30% { 100 | width: 0; 101 | padding-left: 0; 102 | padding-right: 0; 103 | border: 0 solid #00000000; 104 | } 105 | 100% { 106 | width: calc(100% + 2em); 107 | /* width: 100% */ 108 | } 109 | } 110 | @keyframes animation-left-text-1 { 111 | 0% { 112 | left: -102%; 113 | } 114 | 45% { 115 | left: -102%; 116 | } 117 | 100% { 118 | left: 0; 119 | } 120 | } 121 | @keyframes animation-left-text-2 { 122 | 0% { 123 | left: -102%; 124 | } 125 | 50% { 126 | left: -102%; 127 | } 128 | 100% { 129 | left: 0; 130 | } 131 | } 132 | 133 | /***************************** 134 | ** Style 1 Animation: Right ** 135 | *****************************/ 136 | @keyframes animation-right-logo { 137 | 0% { 138 | opacity: 0; 139 | left: -30%; 140 | } 141 | 55% { 142 | opacity: 0; 143 | left: -30%; 144 | } 145 | 100% { 146 | opacity: 1; 147 | left: 0; 148 | } 149 | } 150 | @keyframes animation-right-slash { 151 | 0% { 152 | opacity: 0; 153 | transform: translate3d(-6em, 0, 0); 154 | } 155 | 25% { 156 | opacity: 0; 157 | transform: translate3d(-6em, 0, 0); 158 | } 159 | 50% { 160 | opacity: 1; 161 | } 162 | 75% { 163 | transform: translate3d(0, 0, 0); 164 | } 165 | 100% { 166 | transform: translate3d(0, 0, 0); 167 | } 168 | } 169 | @keyframes animation-right-background { 170 | 0% { 171 | width: 0; 172 | padding-left: 0; 173 | padding-right: 0; 174 | border: 0 solid #00000000; 175 | } 176 | 30% { 177 | width: 0; 178 | padding-left: 0; 179 | padding-right: 0; 180 | border: 0 solid #00000000; 181 | } 182 | 100% { 183 | width: calc(100% + 2em); 184 | } 185 | } 186 | @keyframes animation-right-text-1 { 187 | 0% { 188 | right: -102%; 189 | } 190 | 45% { 191 | right: -102%; 192 | } 193 | 100% { 194 | right: 0; 195 | } 196 | } 197 | @keyframes animation-right-text-2 { 198 | 0% { 199 | right: -102%; 200 | } 201 | 50% { 202 | right: -102%; 203 | } 204 | 100% { 205 | right: 0; 206 | } 207 | } 208 | 209 | /****************************** 210 | ** Style 1 Animation: Cented ** 211 | ******************************/ 212 | @keyframes animation-center-logo { 213 | 0% { 214 | opacity: 0; 215 | right: -30%; 216 | } 217 | 55% { 218 | opacity: 0; 219 | right: -30%; 220 | } 221 | 100% { 222 | opacity: 1; 223 | right: 0; 224 | } 225 | } 226 | @keyframes animation-center-slash { 227 | 0% { 228 | opacity: 0; 229 | transform: translate3d(-6em, 0, 0); 230 | } 231 | 25% { 232 | opacity: 0; 233 | transform: translate3d(-6em, 0, 0); 234 | } 235 | 50% { 236 | opacity: 1; 237 | } 238 | 75% { 239 | transform: translate3d(0, 0, 0); 240 | } 241 | 100% { 242 | transform: translate3d(0, 0, 0); 243 | } 244 | } 245 | @keyframes animation-center-text-1 { 246 | 0% { 247 | left: -102%; 248 | } 249 | 50% { 250 | left: -102%; 251 | } 252 | 60% { 253 | } 254 | 100% { 255 | left: 0; 256 | } 257 | } 258 | @keyframes animation-center-text-2 { 259 | 0% { 260 | right: -102%; 261 | } 262 | 50% { 263 | right: -102%; 264 | } 265 | 60% { 266 | } 267 | 100% { 268 | right: 0; 269 | } 270 | } 271 | 272 | /***************************** 273 | ** Style 3 Animation: Left/Right ** 274 | *****************************/ 275 | @keyframes animation-style3-left-logo { 276 | 0% { 277 | transform: scale(0) rotateZ(90deg); 278 | } 279 | 40% { 280 | transform: scale(1) rotateZ(0deg); 281 | } 282 | 100% { 283 | transform: scale(1) rotateZ(0deg); 284 | } 285 | } 286 | @keyframes animation-style3-right-logo { 287 | 0% { 288 | transform: scale(0) rotateZ(-90deg); 289 | } 290 | 40% { 291 | transform: scale(1) rotateZ(0deg); 292 | } 293 | 100% { 294 | transform: scale(1) rotateZ(0deg); 295 | } 296 | } 297 | @keyframes animation-style3-background { 298 | 0% { 299 | width: 0; 300 | border: 0 solid #00000000; 301 | } 302 | 30% { 303 | border: 0 solid #00000000; 304 | } 305 | 40% { 306 | width: 0; 307 | } 308 | 100% { 309 | width: calc(100% - 1em); 310 | } 311 | } 312 | @keyframes animation-style3-text-1 { 313 | 0% { 314 | bottom: -110%; 315 | } 316 | 70% { 317 | bottom: -110%; 318 | } 319 | 100% { 320 | bottom: 0; 321 | } 322 | } 323 | @keyframes animation-style3-text-2 { 324 | 0% { 325 | top: -110%; 326 | } 327 | 70% { 328 | top: -110%; 329 | } 330 | 100% { 331 | top: 0; 332 | } 333 | } 334 | 335 | 336 | /*Logo animation*/ 337 | .animation-in > div:first-child img { 338 | animation: cubic-bezier(0.19, 0.76, 0.32, 1) 1 normal both; 339 | /*animation-duration: var(--animation-time);*/ 340 | } 341 | .animation-out > div:first-child img { 342 | animation: cubic-bezier(0.19, 0.76, 0.32, 1) 1 reverse both; 343 | /*animation-duration: var(--animation-time);*/ 344 | } 345 | #lower-third-1.animation-in > div:first-child img, 346 | #lower-third-1.animation-out > div:first-child img { 347 | animation-duration: var(--alt-1-animation-time); 348 | } 349 | #lower-third-2.animation-in > div:first-child img, 350 | #lower-third-2.animation-out > div:first-child img { 351 | animation-duration: var(--alt-2-animation-time); 352 | } 353 | #lower-third-3.animation-in > div:first-child img, 354 | #lower-third-3.animation-out > div:first-child img { 355 | animation-duration: var(--alt-3-animation-time); 356 | } 357 | #lower-third-4.animation-in > div:first-child img, 358 | #lower-third-4.animation-out > div:first-child img { 359 | animation-duration: var(--alt-4-animation-time); 360 | } 361 | /*left*/ 362 | .animation-in.style-1.left > div:first-child img, 363 | .animation-out.style-1.left > div:first-child img { 364 | animation-name: animation-left-logo; 365 | } 366 | /*right*/ 367 | .animation-in.style-1.right > div:first-child img, 368 | .animation-out.style-1.right > div:first-child img { 369 | animation-name: animation-right-logo; 370 | } 371 | /*center*/ 372 | /* .animation-in.center > div:first-child img, 373 | .animation-out.center > div:first-child img { 374 | animation-name: animation-center-logo; 375 | } */ 376 | 377 | /*Graph1 and graph2 animation*/ 378 | .animation-in > div:nth-child(1), 379 | .animation-in > div:nth-child(2), 380 | .animation-in > div:nth-child(4) { 381 | animation: cubic-bezier(0.19, 0.76, 0.32, 1) 1 normal both; 382 | } 383 | .animation-out > div:nth-child(1), 384 | .animation-out > div:nth-child(2), 385 | .animation-out > div:nth-child(4) { 386 | animation: cubic-bezier(0.19, 0.76, 0.32, 1) 1 reverse both; 387 | } 388 | #lower-third-1.animation-in > div:nth-child(1), #lower-third-1.animation-in > div:nth-child(2), #lower-third-1.animation-in > div:nth-child(4), 389 | #lower-third-1.animation-out > div:nth-child(1), #lower-third-1.animation-out > div:nth-child(2), #lower-third-1.animation-out > div:nth-child(4) { 390 | animation-duration: var(--alt-1-animation-time); 391 | } 392 | #lower-third-2.animation-in > div:nth-child(1), #lower-third-2.animation-in > div:nth-child(2), #lower-third-2.animation-in > div:nth-child(4), 393 | #lower-third-2.animation-out > div:nth-child(1), #lower-third-2.animation-out > div:nth-child(2), #lower-third-2.animation-out > div:nth-child(4) { 394 | animation-duration: var(--alt-2-animation-time); 395 | } 396 | #lower-third-3.animation-in > div:nth-child(1), #lower-third-3.animation-in > div:nth-child(2), #lower-third-3.animation-in > div:nth-child(4), 397 | #lower-third-3.animation-out > div:nth-child(1),#lower-third-3.animation-out > div:nth-child(2), #lower-third-3.animation-out > div:nth-child(4) { 398 | animation-duration: var(--alt-3-animation-time); 399 | } 400 | #lower-third-4.animation-in > div:nth-child(1), #lower-third-4.animation-in > div:nth-child(2), #lower-third-4.animation-in > div:nth-child(4), 401 | #lower-third-4.animation-out > div:nth-child(1), #lower-third-4.animation-out > div:nth-child(2), #lower-third-4.animation-out > div:nth-child(4) { 402 | animation-duration: var(--alt-4-animation-time); 403 | } 404 | /*left*/ 405 | .animation-in.style-1.left > div:nth-child(2), 406 | .animation-out.style-1.left > div:nth-child(2) { 407 | animation-name: animation-left-slash; 408 | } 409 | /*right*/ 410 | .animation-in.style-1.right > div:nth-child(2), 411 | .animation-out.style-1.right > div:nth-child(2) { 412 | animation-name: animation-right-slash; 413 | } 414 | /*center*/ 415 | /* .animation-in.center > div:nth-child(2), 416 | .animation-out.center > div:nth-child(2) { 417 | animation-name: animation-center-slash; 418 | } */ 419 | 420 | /*Graph2 animation*/ 421 | .animation-in.style-1.left > div:nth-child(4), 422 | .animation-out.style-1.left > div:nth-child(4) { 423 | animation-name: animation-left-background; 424 | } 425 | .animation-in.style-1.right > div:nth-child(4), 426 | .animation-out.style-1.right > div:nth-child(4) { 427 | animation-name: animation-right-background; 428 | } 429 | 430 | /*Texts animation*/ 431 | .animation-in > .text-content > div:first-child div, 432 | .animation-in > .text-content > div:nth-child(2) div { 433 | animation: cubic-bezier(0.19, 0.76, 0.32, 1) 1 normal both; 434 | } 435 | .animation-out > .text-content > div:first-child div, 436 | .animation-out > .text-content > div:nth-child(2) div { 437 | animation: cubic-bezier(0.19, 0.76, 0.32, 1) 1 reverse both; 438 | } 439 | #lower-third-1.animation-in > .text-content > div:first-child div, #lower-third-1.animation-in > .text-content > div:nth-child(2) div, 440 | #lower-third-1.animation-out > .text-content > div:first-child div, #lower-third-1.animation-out > .text-content > div:nth-child(2) div { 441 | animation-duration: var(--alt-1-animation-time); 442 | } 443 | #lower-third-2.animation-in > .text-content > div:first-child div, #lower-third-2.animation-in > .text-content > div:nth-child(2) div, 444 | #lower-third-2.animation-out > .text-content > div:first-child div, #lower-third-2.animation-out > .text-content > div:nth-child(2) div { 445 | animation-duration: var(--alt-2-animation-time); 446 | } 447 | #lower-third-3.animation-in > .text-content > div:first-child div, #lower-third-3.animation-in > .text-content > div:nth-child(2) div, 448 | #lower-third-3.animation-out > .text-content > div:first-child div, #lower-third-3.animation-out > .text-content > div:nth-child(2) div { 449 | animation-duration: var(--alt-3-animation-time); 450 | } 451 | #lower-third-4.animation-in > .text-content > div:first-child div, #lower-third-4.animation-in > .text-content > div:nth-child(2) div, 452 | #lower-third-4.animation-out > .text-content > div:first-child div, #lower-third-4.animation-out > .text-content > div:nth-child(2) div { 453 | animation-duration: var(--alt-4-animation-time); 454 | } 455 | /*left*/ 456 | .animation-in.left > .text-content > div:first-child div, 457 | .animation-out.left > .text-content > div:first-child div { 458 | animation-name: animation-left-text-1; 459 | } 460 | .animation-in.left > .text-content > div:nth-child(2) div, 461 | .animation-out.left > .text-content > div:nth-child(2) div { 462 | animation-name: animation-left-text-2; 463 | } 464 | /*right*/ 465 | .animation-in.right > .text-content > div:first-child div, 466 | .animation-out.right > .text-content > div:first-child div { 467 | animation-name: animation-right-text-1; 468 | } 469 | .animation-in.right .text-content > div:nth-child(2) div, 470 | .animation-out.right .text-content > div:nth-child(2) div { 471 | animation-name: animation-right-text-2; 472 | } 473 | /*center*/ 474 | .animation-in.center > .text-content > div:first-child div, 475 | .animation-out.center > .text-content > div:first-child div { 476 | animation-name: animation-center-text-1; 477 | } 478 | .animation-in.center .text-content > div:nth-child(2) div, 479 | .animation-out.center .text-content > div:nth-child(2) div { 480 | animation-name: animation-center-text-2; 481 | } 482 | 483 | .alt { 484 | display: flex; 485 | align-items: center; 486 | justify-content: center; 487 | position: absolute; 488 | transition: left 0.1s, bottom 0.1s, right 0.1s; 489 | } 490 | .alt > .text-content { 491 | order: 2; 492 | display: flex; 493 | flex-direction: column; 494 | } 495 | .alt > .text-content > .text-mask { 496 | overflow: hidden; 497 | transition: height 0.1s; 498 | } 499 | #lower-third-1.alt{ 500 | font-size: var(--alt-1-size); 501 | } 502 | #lower-third-2.alt{ 503 | font-size: var(--alt-2-size); 504 | } 505 | #lower-third-3.alt{ 506 | font-size: var(--alt-3-size); 507 | } 508 | #lower-third-4.alt{ 509 | font-size: var(--alt-4-size); 510 | } 511 | 512 | #lower-third-1.left{ 513 | left: var(--alt-1-margin-h); 514 | bottom: var(--alt-1-margin-v); 515 | } 516 | #lower-third-1.right{ 517 | flex-direction: row-reverse; 518 | right: var(--alt-1-margin-h); 519 | bottom: var(--alt-1-margin-v); 520 | } 521 | #lower-third-1.center{ 522 | bottom: var(--alt-1-margin-v); 523 | } 524 | 525 | #lower-third-2.left{ 526 | left: var(--alt-2-margin-h); 527 | bottom: var(--alt-2-margin-v); 528 | } 529 | #lower-third-2.right{ 530 | flex-direction: row-reverse; 531 | right: var(--alt-2-margin-h); 532 | bottom: var(--alt-2-margin-v); 533 | } 534 | #lower-third-2.center{ 535 | bottom: var(--alt-2-margin-v); 536 | } 537 | 538 | #lower-third-3.left{ 539 | left: var(--alt-3-margin-h); 540 | bottom: var(--alt-3-margin-v); 541 | } 542 | #lower-third-3.right{ 543 | flex-direction: row-reverse; 544 | right: var(--alt-3-margin-h); 545 | bottom: var(--alt-3-margin-v); 546 | } 547 | #lower-third-3.center{ 548 | bottom: var(--alt-3-margin-v); 549 | } 550 | 551 | #lower-third-4.left{ 552 | left: var(--alt-4-margin-h); 553 | bottom: var(--alt-4-margin-v); 554 | } 555 | #lower-third-4.right{ 556 | flex-direction: row-reverse; 557 | right: var(--alt-4-margin-h); 558 | bottom: var(--alt-4-margin-v); 559 | } 560 | #lower-third-4.center{ 561 | bottom: var(--alt-4-margin-v); 562 | } 563 | 564 | .hide-anim { 565 | display: none; 566 | } 567 | 568 | .right > .text-content > .text-mask { 569 | text-align: right; 570 | } 571 | .center > .text-content > .text-mask { 572 | text-align: center; 573 | } 574 | #lower-third-1 > div.text-content > div:first-child { 575 | height: calc(var(--alt-1-name-size) + 0.25em); 576 | margin-bottom: var(--alt-1-line-spacing); 577 | transition: margin 0.1s; 578 | } 579 | #lower-third-1 > div.text-content > div:nth-child(2) { 580 | height: calc(var(--alt-1-info-size) + 0.25em); 581 | } 582 | #lower-third-2 > div.text-content > div:first-child { 583 | height: calc(var(--alt-2-name-size) + 0.25em); 584 | margin-bottom: var(--alt-2-line-spacing); 585 | transition: margin 0.1s; 586 | } 587 | #lower-third-2 > div.text-content > div:nth-child(2) { 588 | height: calc(var(--alt-2-info-size) + 0.25em); 589 | } 590 | #lower-third-3 > div.text-content > div:first-child { 591 | height: calc(var(--alt-3-name-size) + 0.25em); 592 | margin-bottom: var(--alt-3-line-spacing); 593 | transition: margin 0.1s; 594 | } 595 | #lower-third-3 > div.text-content > div:nth-child(2) { 596 | height: calc(var(--alt-3-info-size) + 0.25em); 597 | } 598 | #lower-third-4 > div.text-content > div:first-child { 599 | height: calc(var(--alt-4-name-size) + 0.25em); 600 | margin-bottom: var(--alt-4-line-spacing); 601 | transition: margin 0.1s; 602 | } 603 | #lower-third-4 > div.text-content > div:nth-child(2) { 604 | height: calc(var(--alt-4-info-size) + 0.25em); 605 | } 606 | 607 | /*Name*/ 608 | .text-content > div:first-child div { 609 | position: relative; 610 | display: inline-flex; 611 | transition: font-size 0.1s; 612 | padding: 0 0.2rem; 613 | } 614 | #lower-third-1 > div.text-content > div:first-child div { 615 | font-family: var(--alt-1-font); 616 | font-size: var(--alt-1-name-size); 617 | font-style: var(--alt-1-name-style); 618 | font-weight: var(--alt-1-name-weight); 619 | text-transform: var(--alt-1-name-transform); 620 | color: var(--alt-1-name-color); 621 | text-shadow : var(--alt-1-shadows); 622 | } 623 | #lower-third-2 > div.text-content > div:first-child div { 624 | font-family: var(--alt-2-font); 625 | font-size: var(--alt-2-name-size); 626 | font-style: var(--alt-2-name-style); 627 | font-weight: var(--alt-2-name-weight); 628 | text-transform: var(--alt-2-name-transform); 629 | color: var(--alt-2-name-color); 630 | text-shadow : var(--alt-2-shadows); 631 | } 632 | #lower-third-3 > div.text-content > div:first-child div { 633 | font-family: var(--alt-3-font); 634 | font-size: var(--alt-3-name-size); 635 | font-style: var(--alt-3-name-style); 636 | font-weight: var(--alt-3-name-weight); 637 | text-transform: var(--alt-3-name-transform); 638 | color: var(--alt-3-name-color); 639 | text-shadow : var(--alt-3-shadows); 640 | } 641 | #lower-third-4 > div.text-content > div:first-child div { 642 | font-family: var(--alt-4-font); 643 | font-size: var(--alt-4-name-size); 644 | font-style: var(--alt-4-name-style); 645 | font-weight: var(--alt-4-name-weight); 646 | text-transform: var(--alt-4-name-transform); 647 | color: var(--alt-4-name-color); 648 | text-shadow : var(--alt-4-shadows); 649 | } 650 | 651 | /*Info*/ 652 | .text-content > div:nth-child(2) div { 653 | position: relative; 654 | display: inline-flex; 655 | transition: font-size 0.1s; 656 | padding: 0 0.2rem; 657 | } 658 | #lower-third-1 > div.text-content > div:nth-child(2) div { 659 | font-family: var(--alt-1-font); 660 | font-size: var(--alt-1-info-size); 661 | font-style: var(--alt-1-info-style); 662 | font-weight: var(--alt-1-info-weight); 663 | text-transform: var(--alt-1-info-transform); 664 | color: var(--alt-1-info-color); 665 | text-shadow : var(--alt-1-shadows); 666 | } 667 | #lower-third-2 > div.text-content > div:nth-child(2) div { 668 | font-family: var(--alt-2-font); 669 | font-size: var(--alt-2-info-size); 670 | font-style: var(--alt-2-info-style); 671 | font-weight: var(--alt-2-info-weight); 672 | text-transform: var(--alt-2-info-transform); 673 | color: var(--alt-2-info-color); 674 | text-shadow : var(--alt-2-shadows); 675 | } 676 | #lower-third-3 > div.text-content > div:nth-child(2) div { 677 | font-family: var(--alt-3-font); 678 | font-size: var(--alt-3-info-size); 679 | font-style: var(--alt-3-info-style); 680 | font-weight: var(--alt-3-info-weight); 681 | text-transform: var(--alt-3-info-transform); 682 | color: var(--alt-3-info-color); 683 | text-shadow : var(--alt-3-shadows); 684 | } 685 | #lower-third-4 > div.text-content > div:nth-child(2) div { 686 | font-family: var(--alt-4-font); 687 | font-size: var(--alt-4-info-size); 688 | font-style: var(--alt-4-info-style); 689 | font-weight: var(--alt-4-info-weight); 690 | text-transform: var(--alt-4-info-transform); 691 | color: var(--alt-4-info-color); 692 | text-shadow : var(--alt-4-shadows); 693 | } 694 | 695 | /*Logo*/ 696 | .logo{ 697 | order: 0; 698 | overflow: hidden; 699 | transition: margin 0.1s; 700 | min-width: fit-content; 701 | } 702 | #lower-third-1 > .logo img { 703 | max-height: var(--alt-1-logo-size); 704 | } 705 | #lower-third-2 > .logo img { 706 | max-height: var(--alt-2-logo-size); 707 | } 708 | #lower-third-3 > .logo img { 709 | max-height: var(--alt-3-logo-size); 710 | } 711 | #lower-third-4 > .logo img { 712 | max-height: var(--alt-4-logo-size); 713 | } 714 | .logo img { 715 | /* max-height: 3.5em; */ 716 | display: flex; 717 | position: relative; 718 | filter: blur(0); 719 | -webkit-filter: blur(0); 720 | transition: max-height 0.1s; 721 | } 722 | .no-logo > img { 723 | width: 0; 724 | height: 0; 725 | } 726 | .no-logo { 727 | /* opacity: 0; 728 | width: 0; */ 729 | margin: 0!important; 730 | } 731 | .left > .logo { 732 | margin-right: 0.8em; 733 | } 734 | .right > .logo { 735 | margin-left: 0.8em; 736 | } 737 | 738 | /***** 739 | *** Style 4 Animations *** 740 | ****/ 741 | 742 | @keyframes animation-style4-background { 743 | from { 744 | opacity: 0; 745 | } 746 | } 747 | 748 | @keyframes animation-style4-background-out { 749 | to { 750 | opacity: 0; 751 | } 752 | } 753 | 754 | @keyframes animation-style4-text-1 { 755 | 0% { 756 | bottom: -110%; 757 | } 758 | 70% { 759 | bottom: -110%; 760 | } 761 | 100% { 762 | bottom: 0; 763 | } 764 | } 765 | 766 | @keyframes animation-style4-text-2 { 767 | 0% { 768 | top: -110%; 769 | } 770 | 70% { 771 | top: -110%; 772 | } 773 | 100% { 774 | top: 0; 775 | } 776 | } 777 | 778 | /* Style 4 add animations */ 779 | 780 | /* Set cubic bezier for all elements */ 781 | 782 | .animation-in.style-4 > .text-content { 783 | animation-timing-function: cubic-bezier(1,-0.01,.45,1.01); 784 | } 785 | 786 | /* IN animations BACKGROUND */ 787 | 788 | #lower-third-1.animation-in.style-4 > .text-content { 789 | animation-name: animation-style4-background, animation-style4-text1; 790 | animation-duration: var(--alt-1-animation-time); 791 | } 792 | #lower-third-2.animation-in.style-4 > .text-content { 793 | animation-name: animation-style4-background; 794 | animation-duration: var(--alt-2-animation-time); 795 | } 796 | #lower-third-3.animation-in.style-4 > .text-content { 797 | animation-name: animation-style4-background; 798 | animation-duration: var(--alt-3-animation-time); 799 | } 800 | #lower-third-4.animation-in.style-4 > .text-content { 801 | animation-name: animation-style4-background; 802 | animation-duration: var(--alt-4-animation-time); 803 | } 804 | 805 | 806 | /* OUT animations BACKGROUND */ 807 | 808 | #lower-third-1.animation-out.style-4 > .text-content { 809 | animation-name: animation-style4-background-out; 810 | animation-fill-mode: forwards; 811 | animation-duration: var(--alt-1-animation-time); 812 | animation-delay: 250ms; 813 | } 814 | #lower-third-2.animation-out.style-4 > .text-content { 815 | animation-name: animation-style4-background-out; 816 | animation-fill-mode: forwards; 817 | animation-duration: var(--alt-2-animation-time); 818 | animation-delay: 250ms; 819 | } 820 | #lower-third-3.animation-out.style-4 > .text-content { 821 | animation-name: animation-style4-background-out; 822 | animation-fill-mode: forwards; 823 | animation-duration: var(--alt-3-animation-time); 824 | animation-delay: 250ms; 825 | } 826 | #lower-third-4.animation-out.style-4 > .text-content { 827 | animation-name: animation-style4-background-out; 828 | animation-fill-mode: forwards; 829 | animation-duration: var(--alt-3-animation-time); 830 | animation-delay: 250ms; 831 | } 832 | 833 | /* TEXT ANIMATIONS */ 834 | 835 | /* IN animations */ 836 | 837 | .animation-in.style-4 > .text-content > div:first-child div { 838 | animation-name: animation-style4-text-1; 839 | } 840 | .animation-in.style-4 > .text-content > div:nth-child(2) div { 841 | animation-name: animation-style4-text-2; 842 | animation-delay: 200ms; 843 | } 844 | 845 | /* OUT animations */ 846 | .animation-out.style-4 > .text-content > div:first-child div { 847 | animation-name: animation-style4-text-1; 848 | animation-delay: 200ms; 849 | } 850 | .animation-out.style-4 > .text-content > div:nth-child(2) div { 851 | animation-name: animation-style4-text-2; 852 | } 853 | 854 | 855 | /*****Style 1*****/ 856 | 857 | .style-1.left > .text-content{ 858 | margin-left: 1.2em; 859 | } 860 | .style-1.right > .text-content{ 861 | margin-right: 1.2em; 862 | } 863 | 864 | .style-1 > .graph-1 { 865 | order: 1; 866 | position: relative; 867 | min-width: 0.3em; 868 | /* width: 0.3em; */ 869 | height: 3.5em; 870 | } 871 | 872 | #lower-third-1.style-1 > .graph-1 { 873 | background: var(--alt-1-style-color-1); 874 | /* box-shadow : var(--alt-1-shadows); */ 875 | box-shadow : var(--alt-1-shadows-graph); 876 | } 877 | #lower-third-2.style-1 > .graph-1 { 878 | background: var(--alt-2-style-color-1); 879 | box-shadow : var(--alt-2-shadows-graph); 880 | } 881 | #lower-third-3.style-1 > .graph-1 { 882 | background: var(--alt-3-style-color-1); 883 | box-shadow : var(--alt-3-shadows-graph); 884 | } 885 | #lower-third-4.style-1 > .graph-1 { 886 | background: var(--alt-4-style-color-1); 887 | box-shadow : var(--alt-4-shadows-graph); 888 | } 889 | 890 | .style-1 > .graph-2 { 891 | order: 3; 892 | z-index: -1; 893 | position: absolute; 894 | width: 100%; 895 | height: calc(100% + 2em); 896 | margin: 0 -1em; 897 | padding: 0 1em; 898 | 899 | box-sizing: border-box; 900 | 901 | /* height: 100%; 902 | margin: -1em; 903 | padding: 1em; */ 904 | 905 | /*margin: -1em -5em; 906 | padding: 1em 400%; Full with background */ 907 | } 908 | 909 | #lower-third-1.style-1 > .graph-2 { 910 | background: var(--alt-1-style-color-2); 911 | opacity: var(--alt-1-background); 912 | border: solid var(--alt-1-border_thickness_amount); 913 | border-color: var(--alt-1-style-color-3); 914 | border-radius: calc(var(--alt-1-corners) * 1.1); 915 | box-shadow: var(--alt-1-shadows-graph); 916 | 917 | } 918 | #lower-third-2.style-1 > .graph-2 { 919 | background: var(--alt-2-style-color-2); 920 | opacity: var(--alt-2-background); 921 | border: solid var(--alt-2-border_thickness_amount); 922 | border-color: var(--alt-2-style-color-3); 923 | border-radius: calc(var(--alt-2-corners) * 1.1); 924 | box-shadow: var(--alt-2-shadows-graph); 925 | } 926 | #lower-third-3.style-1 > .graph-2 { 927 | background: var(--alt-3-style-color-2); 928 | opacity: var(--alt-3-background); 929 | border: solid var(--alt-3-border_thickness_amount); 930 | border-color: var(--alt-3-style-color-3); 931 | border-radius: calc(var(--alt-3-corners) * 1.1); 932 | box-shadow: var(--alt-3-shadows-graph); 933 | } 934 | #lower-third-4.style-1 > .graph-2 { 935 | background: var(--alt-4-style-color-2); 936 | opacity: var(--alt-4-background); 937 | border: solid var(--alt-4-border_thickness_amount); 938 | border-color: var(--alt-4-style-color-3); 939 | border-radius: calc(var(--alt-4-corners) * 1.1); 940 | box-shadow: var(--alt-4-shadows-graph); 941 | } 942 | 943 | .style-1.left > .graph-2 { 944 | left: 0; 945 | margin-right: -1.8em; 946 | padding-right: 1.8em; 947 | } 948 | .style-1.right > .graph-2 { 949 | right: 0; 950 | margin-left: -1.8em; 951 | padding-left: 1.8em; 952 | } 953 | 954 | 955 | /*****Style 2*****/ 956 | 957 | #lower-third-1.style-2 > div.text-content > div:first-child { 958 | height: calc(var(--alt-1-name-size) + 1.2rem); 959 | padding: 0 0.2rem 0 0; 960 | } 961 | #lower-third-2.style-2 > div.text-content > div:first-child { 962 | height: calc(var(--alt-2-name-size) + 1.2rem); 963 | padding: 0 0.2rem 0 0; 964 | } 965 | #lower-third-3.style-2 > div.text-content > div:first-child { 966 | height: calc(var(--alt-3-name-size) + 1.2rem); 967 | padding: 0 0.2rem 0 0; 968 | } 969 | #lower-third-4.style-2 > div.text-content > div:first-child { 970 | height: calc(var(--alt-4-name-size) + 1.2rem); 971 | padding: 0 0.2rem 0 0; 972 | } 973 | 974 | .style-2 > div.text-content > div:first-child div { 975 | padding: 0.5rem 1.3rem; 976 | } 977 | .style-2 > div.text-content > div:first-child div::after { 978 | content: ""; 979 | position: absolute; 980 | width: 100%; 981 | height: 100%; 982 | z-index: -1; 983 | top: 0; 984 | left: 0; 985 | } 986 | 987 | #lower-third-1.style-2 > div.text-content > div:first-child div::after { 988 | background: var(--alt-1-style-color-1); 989 | /* opacity: var(--alt-1-background); */ 990 | box-sizing: border-box; 991 | border: solid var(--alt-1-border_thickness_amount); 992 | border-color: var(--alt-1-style-color-3); 993 | border-radius: var(--alt-1-corners); 994 | box-shadow: var(--alt-1-shadows-graph); 995 | } 996 | #lower-third-2.style-2 > div.text-content > div:first-child div::after { 997 | background: var(--alt-2-style-color-1); 998 | /* opacity: var(--alt-2-background); */ 999 | box-sizing: border-box; 1000 | border: solid var(--alt-2-border_thickness_amount); 1001 | border-color: var(--alt-2-style-color-3); 1002 | border-radius: var(--alt-2-corners); 1003 | box-shadow: var(--alt-2-shadows-graph); 1004 | } 1005 | #lower-third-3.style-2 > div.text-content > div:first-child div::after { 1006 | background: var(--alt-3-style-color-1); 1007 | /* opacity: var(--alt-3-background); */ 1008 | box-sizing: border-box; 1009 | border: solid var(--alt-3-border_thickness_amount); 1010 | border-color: var(--alt-3-style-color-3); 1011 | border-radius: var(--alt-3-corners); 1012 | box-shadow: var(--alt-3-shadows-graph); 1013 | } 1014 | #lower-third-4.style-2 > div.text-content > div:first-child div::after { 1015 | background: var(--alt-4-style-color-1); 1016 | /* opacity: var(--alt-4-background); */ 1017 | box-sizing: border-box; 1018 | border: solid var(--alt-4-border_thickness_amount); 1019 | border-color: var(--alt-4-style-color-3); 1020 | border-radius: var(--alt-4-corners); 1021 | box-shadow: var(--alt-4-shadows-graph); 1022 | } 1023 | 1024 | #lower-third-1.style-2 > div.text-content > div:nth-child(2) { 1025 | height: calc(var(--alt-1-info-size) + 1.2rem); 1026 | padding: 0 0.2rem 0 0; 1027 | } 1028 | #lower-third-2.style-2 > div.text-content > div:nth-child(2) { 1029 | height: calc(var(--alt-2-info-size) + 1.2rem); 1030 | padding: 0 0.2rem 0 0; 1031 | } 1032 | #lower-third-3.style-2 > div.text-content > div:nth-child(2) { 1033 | height: calc(var(--alt-3-info-size) + 1.2rem); 1034 | padding: 0 0.2rem 0 0; 1035 | } 1036 | #lower-third-4.style-2 > div.text-content > div:nth-child(2) { 1037 | height: calc(var(--alt-4-info-size) + 1.2rem); 1038 | padding: 0 0.2rem 0 0; 1039 | } 1040 | 1041 | .style-2.center > div.text-content > div:nth-child(2) { 1042 | width: fit-content; 1043 | margin: 0 auto; 1044 | } 1045 | .style-2 > div.text-content > div:nth-child(2) div { 1046 | padding: 0.5rem 1.3rem; 1047 | } 1048 | .style-2 > div.text-content > div:nth-child(2) div::after { 1049 | content: ""; 1050 | position: absolute; 1051 | width: 100%; 1052 | height: 100%; 1053 | z-index: -1; 1054 | top: 0; 1055 | left: 0; 1056 | } 1057 | 1058 | #lower-third-1.style-2 > div.text-content > div:nth-child(2) div::after { 1059 | background: var(--alt-1-style-color-2); 1060 | /* opacity: var(--alt-1-background); */ 1061 | box-sizing: border-box; 1062 | border: solid var(--alt-1-border_thickness_amount); 1063 | border-color: var(--alt-1-style-color-4); 1064 | border-radius: var(--alt-1-corners); 1065 | box-shadow: var(--alt-1-shadows-graph); 1066 | } 1067 | #lower-third-2.style-2 > div.text-content > div:nth-child(2) div::after { 1068 | background: var(--alt-2-style-color-2); 1069 | /* opacity: var(--alt-2-background); */ 1070 | box-sizing: border-box; 1071 | border: solid var(--alt-2-border_thickness_amount); 1072 | border-color: var(--alt-2-style-color-4); 1073 | border-radius: var(--alt-2-corners); 1074 | box-shadow: var(--alt-2-shadows-graph); 1075 | } 1076 | #lower-third-3.style-2 > div.text-content > div:nth-child(2) div::after { 1077 | background: var(--alt-3-style-color-2); 1078 | /* opacity: var(--alt-3-background); */ 1079 | box-sizing: border-box; 1080 | border: solid var(--alt-3-border_thickness_amount); 1081 | border-color: var(--alt-3-style-color-4); 1082 | border-radius: var(--alt-3-corners); 1083 | box-shadow: var(--alt-3-shadows-graph); 1084 | } 1085 | #lower-third-4.style-2 > div.text-content > div:nth-child(2) div::after { 1086 | background: var(--alt-4-style-color-2); 1087 | /* opacity: var(--alt-4-background); */ 1088 | box-sizing: border-box; 1089 | border: solid var(--alt-4-border_thickness_amount); 1090 | border-color: var(--alt-4-style-color-4); 1091 | border-radius: var(--alt-4-corners); 1092 | box-shadow: var(--alt-4-shadows-graph); 1093 | } 1094 | 1095 | .style-2 > .graph-1, 1096 | .style-2 > .graph-2 { 1097 | display: none; 1098 | } 1099 | 1100 | 1101 | /*****Style 3*****/ 1102 | 1103 | .style-3 > .logo img{ 1104 | max-height: 4.5em; 1105 | max-width: 4.5em; 1106 | } 1107 | 1108 | .style-3 > .logo { 1109 | z-index: 1; 1110 | margin: 0; 1111 | } 1112 | .style-3 > .logo.no-logo { 1113 | min-width: 5.5em; 1114 | min-height: 5.5em; 1115 | } 1116 | 1117 | .style-3 > .graph-1 { 1118 | border-radius: 50%; 1119 | min-width: 5.5em; 1120 | min-height: 5.5em; 1121 | position: relative; 1122 | z-index: 0; 1123 | box-sizing: border-box; 1124 | } 1125 | .style-3.left > .graph-1 { 1126 | margin-left: -5em; 1127 | } 1128 | .style-3.left > .logo.no-logo + .graph-1 { 1129 | margin-left: -6em; 1130 | } 1131 | .style-3.right > .graph-1 { 1132 | margin-right: -5em; 1133 | } 1134 | .style-3.right > .logo.no-logo + .graph-1 { 1135 | margin-right: -6em; 1136 | } 1137 | 1138 | #lower-third-1.style-3 > .graph-1 { 1139 | background: var(--alt-1-style-color-1); 1140 | box-shadow: var(--alt-1-shadows-graph); 1141 | border: var(--alt-1-border_thickness_amount) solid var(--alt-1-style-color-3); 1142 | border-radius: calc(var(--alt-1-corners) * 1.1); 1143 | } 1144 | #lower-third-2.style-3 > .graph-1 { 1145 | background: var(--alt-2-style-color-1); 1146 | box-shadow: var(--alt-2-shadows-graph); 1147 | border: var(--alt-2-border_thickness_amount) solid var(--alt-2-style-color-3); 1148 | border-radius: calc(var(--alt-2-corners) * 1.1); 1149 | } 1150 | #lower-third-3.style-3 > .graph-1 { 1151 | background: var(--alt-3-style-color-1); 1152 | box-shadow: var(--alt-3-shadows-graph); 1153 | border: var(--alt-3-border_thickness_amount) solid var(--alt-3-style-color-3); 1154 | border-radius: calc(var(--alt-3-corners) * 1.1); 1155 | } 1156 | #lower-third-4.style-3 > .graph-1 { 1157 | background: var(--alt-4-style-color-1); 1158 | box-shadow: var(--alt-4-shadows-graph); 1159 | border: var(--alt-4-border_thickness_amount) solid var(--alt-4-style-color-3); 1160 | border-radius: calc(var(--alt-4-corners) * 1.1); 1161 | } 1162 | 1163 | .style-3 > .graph-2 { 1164 | order: 3; 1165 | z-index: -1; 1166 | position: absolute; 1167 | box-sizing: border-box; 1168 | } 1169 | .style-3 > .graph-2 { 1170 | height: calc(100% - 0.5em); 1171 | } 1172 | 1173 | #lower-third-1.style-3 > .graph-2 { 1174 | background: var(--alt-1-style-color-2); 1175 | box-shadow: var(--alt-1-shadows-graph); 1176 | opacity: var(--alt-1-background); 1177 | border: var(--alt-1-border_thickness_amount) solid var(--alt-1-style-color-4); 1178 | } 1179 | #lower-third-2.style-3 > .graph-2 { 1180 | background: var(--alt-2-style-color-2); 1181 | box-shadow: var(--alt-2-shadows-graph); 1182 | opacity: var(--alt-2-background); 1183 | border: var(--alt-2-border_thickness_amount) solid var(--alt-2-style-color-4); 1184 | } 1185 | #lower-third-3.style-3 > .graph-2 { 1186 | background: var(--alt-3-style-color-2); 1187 | box-shadow: var(--alt-3-shadows-graph); 1188 | opacity: var(--alt-3-background); 1189 | border: var(--alt-3-border_thickness_amount) solid var(--alt-3-style-color-4); 1190 | } 1191 | #lower-third-4.style-3 > .graph-2 { 1192 | background: var(--alt-4-style-color-2); 1193 | box-shadow: var(--alt-4-shadows-graph); 1194 | opacity: var(--alt-4-background); 1195 | border: var(--alt-4-border_thickness_amount) solid var(--alt-4-style-color-4); 1196 | } 1197 | 1198 | #lower-third-1.style-3.left > .graph-2 { 1199 | border-radius: 0 var(--alt-1-corners) var(--alt-1-corners) 0; 1200 | } 1201 | #lower-third-2.style-3.left > .graph-2 { 1202 | border-radius: 0 var(--alt-2-corners) var(--alt-2-corners) 0; 1203 | } 1204 | #lower-third-3.style-3.left > .graph-2 { 1205 | border-radius: 0 var(--alt-3-corners) var(--alt-3-corners) 0; 1206 | } 1207 | #lower-third-4.style-3.left > .graph-2 { 1208 | border-radius: 0 var(--alt-4-corners) var(--alt-4-corners) 0; 1209 | } 1210 | .style-3.left > .graph-2 { 1211 | left: 3.3em; 1212 | border-left: 0; 1213 | } 1214 | 1215 | #lower-third-1.style-3.right > .graph-2 { 1216 | border-radius: var(--alt-1-corners) 0 0 var(--alt-1-corners); 1217 | } 1218 | #lower-third-2.style-3.right > .graph-2 { 1219 | border-radius: var(--alt-2-corners) 0 0 var(--alt-2-corners); 1220 | } 1221 | #lower-third-3.style-3.right > .graph-2 { 1222 | border-radius: var(--alt-3-corners) 0 0 var(--alt-3-corners); 1223 | } 1224 | #lower-third-4.style-3.right > .graph-2 { 1225 | border-radius: var(--alt-4-corners) 0 0 var(--alt-4-corners); 1226 | } 1227 | .style-3.right > .graph-2 { 1228 | right: 3.3em; 1229 | border-right: 0; 1230 | } 1231 | 1232 | .style-3.left > .text-content { 1233 | /* margin-right: 0.5em; */ 1234 | /* margin: 1em 2.5em 1em 0; FOR MULTI LINES */ 1235 | left: 0.75em; 1236 | position: relative; 1237 | } 1238 | .style-3.right > .text-content { 1239 | /* margin-left: 0.5em; */ 1240 | /* margin: 1em 0 1em 2.5em; FOR MULTI LINES */ 1241 | right: 0.75em; 1242 | position: relative; 1243 | } 1244 | 1245 | /*****Style 4*****/ 1246 | 1247 | #lower-third-1.style-4 > div.text-content > div:first-child { 1248 | height: calc(var(--alt-1-name-size) + 1.2rem); 1249 | padding: 0 0.2rem 0 0; 1250 | } 1251 | #lower-third-2.style-4 > div.text-content > div:first-child { 1252 | height: calc(var(--alt-2-name-size) + 1.2rem); 1253 | padding: 0 0.2rem 0 0; 1254 | } 1255 | #lower-third-3.style-4 > div.text-content > div:first-child { 1256 | height: calc(var(--alt-3-name-size) + 1.2rem); 1257 | padding: 0 0.2rem 0 0; 1258 | } 1259 | #lower-third-4.style-4 > div.text-content > div:first-child { 1260 | height: calc(var(--alt-4-name-size) + 1.2rem); 1261 | padding: 0 0.2rem 0 0; 1262 | } 1263 | 1264 | .style-4 > div.text-content > div:first-child div { 1265 | padding: 0.5rem 1.3rem; 1266 | } 1267 | .style-4 > div.text-content > div:first-child div::after { 1268 | content: ""; 1269 | position: absolute; 1270 | width: 100%; 1271 | height: 100%; 1272 | top: 0; 1273 | left: 0; 1274 | } 1275 | 1276 | #lower-third-1.style-4 > div.text-content > div:first-child { 1277 | background: var(--alt-1-style-color-1); 1278 | /* opacity: var(--alt-1-background); */ 1279 | box-sizing: border-box; 1280 | border: solid var(--alt-1-border_thickness_amount); 1281 | border-color: var(--alt-1-style-color-3); 1282 | border-radius: var(--alt-1-corners); 1283 | box-shadow: var(--alt-1-shadows-graph); 1284 | } 1285 | #lower-third-2.style-4 > div.text-content > div:first-child { 1286 | background: var(--alt-2-style-color-1); 1287 | /* opacity: var(--alt-2-background); */ 1288 | box-sizing: border-box; 1289 | border: solid var(--alt-2-border_thickness_amount); 1290 | border-color: var(--alt-2-style-color-3); 1291 | border-radius: var(--alt-2-corners); 1292 | box-shadow: var(--alt-2-shadows-graph); 1293 | } 1294 | #lower-third-3.style-4 > div.text-content > div:first-child { 1295 | background: var(--alt-3-style-color-1); 1296 | /* opacity: var(--alt-3-background); */ 1297 | box-sizing: border-box; 1298 | border: solid var(--alt-3-border_thickness_amount); 1299 | border-color: var(--alt-3-style-color-3); 1300 | border-radius: var(--alt-3-corners); 1301 | box-shadow: var(--alt-3-shadows-graph); 1302 | } 1303 | #lower-third-4.style-4 > div.text-content > div:first-child { 1304 | background: var(--alt-4-style-color-1); 1305 | /* opacity: var(--alt-4-background); */ 1306 | box-sizing: border-box; 1307 | border: solid var(--alt-4-border_thickness_amount); 1308 | border-color: var(--alt-4-style-color-3); 1309 | border-radius: var(--alt-4-corners); 1310 | box-shadow: var(--alt-4-shadows-graph); 1311 | } 1312 | 1313 | #lower-third-1.style-4 > div.text-content > div:nth-child(2) { 1314 | height: calc(var(--alt-1-info-size) + 1.2rem); 1315 | padding: 0 0.2rem 0 0; 1316 | } 1317 | #lower-third-2.style-4 > div.text-content > div:nth-child(2) { 1318 | height: calc(var(--alt-2-info-size) + 1.2rem); 1319 | padding: 0 0.2rem 0 0; 1320 | } 1321 | #lower-third-3.style-4 > div.text-content > div:nth-child(2) { 1322 | height: calc(var(--alt-3-info-size) + 1.2rem); 1323 | padding: 0 0.2rem 0 0; 1324 | } 1325 | #lower-third-4.style-4 > div.text-content > div:nth-child(2) { 1326 | height: calc(var(--alt-4-info-size) + 1.2rem); 1327 | padding: 0 0.2rem 0 0; 1328 | } 1329 | .style-4 > div.text-content > div:nth-child(2) div { 1330 | padding: 0.5rem 1.3rem; 1331 | } 1332 | .style-4 > div.text-content > div:nth-child(2) div::after { 1333 | content: ""; 1334 | position: absolute; 1335 | width: 100%; 1336 | height: 100%; 1337 | top: 0; 1338 | left: 0; 1339 | } 1340 | 1341 | #lower-third-1.style-4 > div.text-content > div:nth-child(2) { 1342 | background: var(--alt-1-style-color-2); 1343 | /* opacity: var(--alt-1-background); */ 1344 | box-sizing: border-box; 1345 | border: solid var(--alt-1-border_thickness_amount); 1346 | border-color: var(--alt-1-style-color-4); 1347 | border-radius: var(--alt-1-corners); 1348 | box-shadow: var(--alt-1-shadows-graph); 1349 | } 1350 | #lower-third-2.style-4 > div.text-content > div:nth-child(2) { 1351 | background: var(--alt-2-style-color-2); 1352 | /* opacity: var(--alt-2-background); */ 1353 | box-sizing: border-box; 1354 | border: solid var(--alt-2-border_thickness_amount); 1355 | border-color: var(--alt-2-style-color-4); 1356 | border-radius: var(--alt-2-corners); 1357 | box-shadow: var(--alt-2-shadows-graph); 1358 | } 1359 | #lower-third-3.style-4 > div.text-content > div:nth-child(2) { 1360 | background: var(--alt-3-style-color-2); 1361 | /* opacity: var(--alt-3-background); */ 1362 | box-sizing: border-box; 1363 | border: solid var(--alt-3-border_thickness_amount); 1364 | border-color: var(--alt-3-style-color-4); 1365 | border-radius: var(--alt-3-corners); 1366 | box-shadow: var(--alt-3-shadows-graph); 1367 | } 1368 | #lower-third-4.style-4 > div.text-content > div:nth-child(2) { 1369 | background: var(--alt-4-style-color-2); 1370 | /* opacity: var(--alt-4-background); */ 1371 | box-sizing: border-box; 1372 | border: solid var(--alt-4-border_thickness_amount); 1373 | border-color: var(--alt-4-style-color-4); 1374 | border-radius: var(--alt-4-corners); 1375 | box-shadow: var(--alt-4-shadows-graph); 1376 | } 1377 | .style-4 > .graph-1, 1378 | .style-4 > .graph-2 { 1379 | display: none; 1380 | } 1381 | 1382 | 1383 | 1384 | /*Graph2 animation*/ 1385 | .animation-in.style-3.left > div:nth-child(4), 1386 | .animation-out.style-3.left > div:nth-child(4) { 1387 | animation-name: animation-style3-background; 1388 | } 1389 | .animation-in.style-3.right > div:nth-child(4), 1390 | .animation-out.style-3.right > div:nth-child(4) { 1391 | animation-name: animation-style3-background; 1392 | } 1393 | /*left*/ 1394 | .animation-in.style-3.left > div:nth-child(1), .animation-in.style-3.left > div:nth-child(2), 1395 | .animation-out.style-3.left > div:nth-child(1), .animation-out.style-3.left > div:nth-child(2) { 1396 | animation-name: animation-style3-left-logo; 1397 | } 1398 | /*right*/ 1399 | .animation-in.style-3.right > div:nth-child(1), .animation-in.style-3.right > div:nth-child(2), 1400 | .animation-out.style-3.right > div:nth-child(1), .animation-out.style-3.right > div:nth-child(2) { 1401 | animation-name: animation-style3-right-logo; 1402 | } 1403 | 1404 | /*left*/ 1405 | .animation-in.style-3.left > .text-content > div:first-child div, 1406 | .animation-out.style-3.left > .text-content > div:first-child div, 1407 | .animation-in.style-3.right > .text-content > div:first-child div, 1408 | .animation-out.style-3.right > .text-content > div:first-child div { 1409 | animation-name: animation-style3-text-1; 1410 | } 1411 | .animation-in.style-3.left > .text-content > div:nth-child(2) div, 1412 | .animation-out.style-3.left > .text-content > div:nth-child(2) div, 1413 | .animation-in.style-3.right > .text-content > div:nth-child(2) div, 1414 | .animation-out.style-3.right > .text-content > div:nth-child(2) div { 1415 | animation-name: animation-style3-text-2; 1416 | } 1417 | 1418 | /*********************************/ 1419 | 1420 | 1421 | /*Uncomment to avaible multiple lines*/ 1422 | /* .logo { 1423 | align-self: start; 1424 | } 1425 | .style-1 > .graph-1 { 1426 | align-self: start; 1427 | } 1428 | .alt > div.text-content > div:nth-child(2) div { 1429 | line-height: 1.25em; 1430 | } 1431 | .alt > div.text-content > div:nth-child(2) { 1432 | height: auto!important; 1433 | } 1434 | .alt.style-1.left > .text-content { 1435 | margin-right: 1em; 1436 | } 1437 | .alt.style-1.right > .text-content { 1438 | margin-left: 1em; 1439 | } */ 1440 | 1441 | 1442 | /*Uncomment to invert vertical position*/ 1443 | /* #lower-third-1 { 1444 | top: var(--alt-1-margin-v); 1445 | bottom: unset!important; 1446 | } 1447 | #lower-third-2 { 1448 | top: var(--alt-2-margin-v); 1449 | bottom: unset!important; 1450 | } 1451 | #lower-third-3 { 1452 | top: var(--alt-3-margin-v); 1453 | bottom: unset!important; 1454 | } 1455 | #lower-third-4 { 1456 | top: var(--alt-4-margin-v); 1457 | bottom: unset!important; 1458 | } */ 1459 | 1460 | /*FIX HEIGHT LINE ISSUES AND MULTIPLE LINES*/ 1461 | /* .alt > div.text-content > div:first-child, .alt > div.text-content > div:nth-child(2) {height: auto!important;} 1462 | .alt > div.text-content > div:first-child div, .alt > div.text-content > div:nth-child(2) div {line-height: 1.25em;} */ 1463 | 1464 | 1465 | /***Con esto no puedo quitar el fondo***/ 1466 | /* .style-3 > .logo { 1467 | border-radius: 50%; 1468 | min-width: 5.5em; 1469 | min-height: 5.5em; 1470 | margin: 0; 1471 | justify-content: center; 1472 | align-items: center; 1473 | display: flex; 1474 | } 1475 | #lower-third-1.style-3 > .logo { 1476 | background: var(--alt-1-style-color-1); 1477 | box-shadow: var(--alt-1-shadows); 1478 | opacity: var(--alt-1-background); 1479 | } */ 1480 | /*repetir */ 1481 | 1482 | /* .style-3 > .graph-1 { 1483 | display: none; 1484 | } */ 1485 | /******/ 1486 | 1487 | 1488 | /*Uncomment to full with background in the style 1*/ 1489 | /* .style-1.alt { 1490 | width: 105%; 1491 | } 1492 | .style-1.left { 1493 | justify-content: left; 1494 | } 1495 | .style-1.right { 1496 | justify-content: right; 1497 | } 1498 | .style-1 > .graph-2 { 1499 | margin-left: -4em; 1500 | margin-right: -4em; 1501 | } */ -------------------------------------------------------------------------------- /common/css/themes/acri/theme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-color: #fff; 3 | --element-radius: 0; 4 | --obs-background: #181819; 5 | --obs-button-background: #162458; 6 | --obs-button-border: #233166; 7 | --obs-button-hover-background: #233166; 8 | --obs-button-hover-border: #364683; 9 | --obs-button-active-background: #1f1e1f; 10 | --obs-switch-active-background: #244ee7; 11 | --obs-button-color: #fff; 12 | --obs-field-background: #08080b; 13 | --obs-field-background-disable: #28282a; 14 | --obs-field-border: none; 15 | --obs-panel-border: solid 1px #2f2f2f; 16 | --obs-scrollbar-color: #2f2f2f; 17 | --obs-scrollbar-thickness: 7px; 18 | --obs-scrollbar-radius: 0px; 19 | --obs-tab-background: #212121; 20 | --obs-tab-border: #333336; 21 | --obs-tab-active-background: #131a30; 22 | --obs-tab-active-border: #252a45; 23 | --obs-tabs-separator: #333336; 24 | --alt-preview-background: linear-gradient(135deg, #0b0b0c 0%, 25 | #0b0b0c 8%, 26 | #08080b 10%, 27 | #08080b 18%, 28 | #0b0b0c 20%, 29 | #0b0b0c 28%, 30 | #08080b 30%, 31 | #08080b 38%, 32 | #0b0b0c 40%, 33 | #0b0b0c 48%, 34 | #08080b 50%, 35 | #08080b 58%, 36 | #0b0b0c 60%, 37 | #0b0b0c 68%, 38 | #08080b 70%, 39 | #08080b 78%, 40 | #0b0b0c 80%, 41 | #0b0b0c 88%, 42 | #08080b 90%, 43 | #08080b 98%, 44 | #0b0b0c 100%); 45 | } -------------------------------------------------------------------------------- /common/css/themes/dark/theme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-color: #d2d2d2; 3 | --element-radius: 0.2em; 4 | --obs-background: #3a393a; 5 | --obs-button-background: #4c4c4c; 6 | --obs-button-border: none; 7 | --obs-button-hover-background: #7a797a; 8 | --obs-button-hover-border: none; 9 | --obs-button-active-background: #1f1e1f; 10 | --obs-switch-active-background: #2196F3; 11 | --obs-button-color: #fff; 12 | --obs-field-background: #1f1e1f; 13 | --obs-field-background-disable: #4c4c4c; 14 | --obs-field-border: none; 15 | --obs-panel-border: solid 1px #2f2f2f; 16 | --obs-scrollbar-color: #4c4c4c; 17 | --obs-scrollbar-thickness: 10px; 18 | --obs-scrollbar-radius: 16px; 19 | --obs-tab-background: #4c4c4c; 20 | --obs-tab-border: none; 21 | --obs-tab-active-background: #1f1e1f; 22 | --obs-tab-active-border: none; 23 | --obs-tabs-separator: #1f1e1f; 24 | 25 | --alt-preview-background: linear-gradient(135deg, rgba(31,30,31,1) 0%, 26 | rgba(31,30,31,1) 8%, 27 | rgba(29,28,29,1) 10%, 28 | rgba(29,28,29,1) 18%, 29 | rgba(31,30,31,1) 20%, 30 | rgba(31,30,31,1) 28%, 31 | rgba(29,28,29,1) 30%, 32 | rgba(29,28,29,1) 38%, 33 | rgba(31,30,31,1) 40%, 34 | rgba(31,30,31,1) 48%, 35 | rgba(29,28,29,1) 50%, 36 | rgba(29,28,29,1) 58%, 37 | rgba(31,30,31,1) 60%, 38 | rgba(31,30,31,1) 68%, 39 | rgba(29,28,29,1) 70%, 40 | rgba(29,28,29,1) 78%, 41 | rgba(31,30,31,1) 80%, 42 | rgba(31,30,31,1) 88%, 43 | rgba(29,28,29,1) 90%, 44 | rgba(29,28,29,1) 98%, 45 | rgba(31,30,31,1) 100%); 46 | } -------------------------------------------------------------------------------- /common/css/themes/rachni/theme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-color: #d2d2d2; 3 | --element-radius: 0.2em; 4 | --obs-background: #31363B; 5 | --obs-button-background: #00BCD4; 6 | --obs-button-border: #76797C; 7 | --obs-button-hover-background: #914C67; 8 | --obs-button-hover-border: #76797c; 9 | --obs-button-active-background: #1f1e1f; 10 | --obs-switch-active-background: #00BCD4; 11 | --obs-button-color: #fff; 12 | --obs-field-background: #232629; 13 | --obs-field-background-disable: #3f4448; 14 | --obs-field-border: solid 1px #76797c; 15 | --obs-panel-border: solid 1px #76797c; 16 | --obs-scrollbar-color: #76797c; 17 | --obs-scrollbar-thickness: 8px; 18 | --obs-scrollbar-radius: 14px; 19 | --obs-tab-background: #54575b; 20 | --obs-tab-border: #76797c; 21 | --obs-tab-active-background: #914c67; 22 | --obs-tab-active-border: #76797c; 23 | --obs-tabs-separator: #76797c; 24 | --alt-preview-background: linear-gradient(135deg, #25282c 0%, 25 | #25282c 8%, 26 | #232629 10%, 27 | #232629 18%, 28 | #25282c 20%, 29 | #25282c 28%, 30 | #232629 30%, 31 | #232629 38%, 32 | #25282c 40%, 33 | #25282c 48%, 34 | #232629 50%, 35 | #232629 58%, 36 | #25282c 60%, 37 | #25282c 68%, 38 | #232629 70%, 39 | #232629 78%, 40 | #25282c 80%, 41 | #25282c 88%, 42 | #232629 90%, 43 | #232629 98%, 44 | #25282c 100%); 45 | } 46 | 47 | /*Fixing border issues*/ 48 | select {background-position: right 4px center;} 49 | #alt-1-name-appearance, #alt-1-info-appearance, 50 | #alt-2-name-appearance, #alt-2-info-appearance, 51 | #alt-3-name-appearance, #alt-3-info-appearance, 52 | #alt-4-name-appearance, #alt-4-info-appearance { 53 | padding: 0 0 0 2px; 54 | } 55 | #alt-1-name-color, #alt-1-info-color, 56 | #alt-2-name-color, #alt-2-info-color, 57 | #alt-3-name-color, #alt-3-info-color, 58 | #alt-4-name-color, #alt-4-info-color { 59 | margin: 3px; 60 | } 61 | #alt-1-style-color-1, #alt-1-style-color-2, 62 | #alt-2-style-color-1, #alt-2-style-color-2, 63 | #alt-3-style-color-1, #alt-3-style-color-2, 64 | #alt-4-style-color-1, #alt-4-style-color-2 { 65 | margin: 3px; 66 | } -------------------------------------------------------------------------------- /common/js/hotkeys.js: -------------------------------------------------------------------------------- 1 | hotkeyMasterSwitch = 0; 2 | hotkeySwitch1 = 0; 3 | hotkeySwitch2 = 0; 4 | hotkeySwitch3 = 0; 5 | hotkeySwitch4 = 0; 6 | hotkeyAlt1Slot1 = 0; 7 | hotkeyAlt1Slot2 = 0; 8 | hotkeyAlt1Slot3 = 0; 9 | hotkeyAlt1Slot4 = 0; 10 | hotkeyAlt1Slot5 = 0; 11 | hotkeyAlt1Slot6 = 0; 12 | hotkeyAlt1Slot7 = 0; 13 | hotkeyAlt1Slot8 = 0; 14 | hotkeyAlt1Slot9 = 0; 15 | hotkeyAlt1Slot10 = 0; 16 | hotkeyAlt2Slot1 = 0; 17 | hotkeyAlt2Slot2 = 0; 18 | hotkeyAlt2Slot3 = 0; 19 | hotkeyAlt2Slot4 = 0; 20 | hotkeyAlt2Slot5 = 0; 21 | hotkeyAlt2Slot6 = 0; 22 | hotkeyAlt2Slot7 = 0; 23 | hotkeyAlt2Slot8 = 0; 24 | hotkeyAlt2Slot9 = 0; 25 | hotkeyAlt2Slot10 = 0; 26 | hotkeyAlt3Slot1 = 0; 27 | hotkeyAlt3Slot2 = 0; 28 | hotkeyAlt3Slot3 = 0; 29 | hotkeyAlt3Slot4 = 0; 30 | hotkeyAlt3Slot5 = 0; 31 | hotkeyAlt3Slot6 = 0; 32 | hotkeyAlt3Slot7 = 0; 33 | hotkeyAlt3Slot8 = 0; 34 | hotkeyAlt3Slot9 = 0; 35 | hotkeyAlt3Slot10 = 0; 36 | hotkeyAlt4Slot1 = 0; 37 | hotkeyAlt4Slot2 = 0; 38 | hotkeyAlt4Slot3 = 0; 39 | hotkeyAlt4Slot4 = 0; 40 | hotkeyAlt4Slot5 = 0; 41 | hotkeyAlt4Slot6 = 0; 42 | hotkeyAlt4Slot7 = 0; 43 | hotkeyAlt4Slot8 = 0; 44 | hotkeyAlt4Slot9 = 0; 45 | hotkeyAlt4Slot10 = 0; 46 | -------------------------------------------------------------------------------- /logos/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noeal-dac/Animated-Lower-Thirds/8bb3ff90e610ce2d8866fbf05b75c286b9a3d771/logos/logo_1.png -------------------------------------------------------------------------------- /logos/logo_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noeal-dac/Animated-Lower-Thirds/8bb3ff90e610ce2d8866fbf05b75c286b9a3d771/logos/logo_2.png -------------------------------------------------------------------------------- /logos/logo_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noeal-dac/Animated-Lower-Thirds/8bb3ff90e610ce2d8866fbf05b75c286b9a3d771/logos/logo_3.png -------------------------------------------------------------------------------- /logos/logo_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noeal-dac/Animated-Lower-Thirds/8bb3ff90e610ce2d8866fbf05b75c286b9a3d771/logos/logo_4.png -------------------------------------------------------------------------------- /lower thirds/browser-source.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Lower thirds Source 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 | 32 |
33 | 36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | 48 | 49 |
50 | 53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | 65 | 66 |
67 | 70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | 82 | 1040 | 1041 | 1042 | -------------------------------------------------------------------------------- /lower thirds/lower-thirds_hotkeys.lua: -------------------------------------------------------------------------------- 1 | --[[ 2 | OBS Studio Lua script : Control the switches of the lower thirds with hotkeys 3 | Author: NoeAL 4 | Version: 0.2 5 | Released: 2020-09-28 6 | --]] 7 | 8 | 9 | local obs = obslua 10 | local debug 11 | local hk = {} 12 | local hotkeyMasterSwitch = 0; 13 | local hotkeySwitch1 = 0; 14 | local hotkeySwitch2 = 0; 15 | local hotkeySwitch3 = 0; 16 | local hotkeySwitch4 = 0; 17 | local hotkeyAlt1Slot1 = 0; 18 | local hotkeyAlt1Slot2 = 0; 19 | local hotkeyAlt1Slot3 = 0; 20 | local hotkeyAlt1Slot4 = 0; 21 | local hotkeyAlt1Slot5 = 0; 22 | local hotkeyAlt1Slot6 = 0; 23 | local hotkeyAlt1Slot7 = 0; 24 | local hotkeyAlt1Slot8 = 0; 25 | local hotkeyAlt1Slot9 = 0; 26 | local hotkeyAlt1Slot10 = 0; 27 | local hotkeyAlt2Slot1 = 0; 28 | local hotkeyAlt2Slot2 = 0; 29 | local hotkeyAlt2Slot3 = 0; 30 | local hotkeyAlt2Slot4 = 0; 31 | local hotkeyAlt2Slot5 = 0; 32 | local hotkeyAlt2Slot6 = 0; 33 | local hotkeyAlt2Slot7 = 0; 34 | local hotkeyAlt2Slot8 = 0; 35 | local hotkeyAlt2Slot9 = 0; 36 | local hotkeyAlt2Slot10 = 0; 37 | local hotkeyAlt3Slot1 = 0; 38 | local hotkeyAlt3Slot2 = 0; 39 | local hotkeyAlt3Slot3 = 0; 40 | local hotkeyAlt3Slot4 = 0; 41 | local hotkeyAlt3Slot5 = 0; 42 | local hotkeyAlt3Slot6 = 0; 43 | local hotkeyAlt3Slot7 = 0; 44 | local hotkeyAlt3Slot8 = 0; 45 | local hotkeyAlt3Slot9 = 0; 46 | local hotkeyAlt3Slot10 = 0; 47 | local hotkeyAlt4Slot1 = 0; 48 | local hotkeyAlt4Slot2 = 0; 49 | local hotkeyAlt4Slot3 = 0; 50 | local hotkeyAlt4Slot4 = 0; 51 | local hotkeyAlt4Slot5 = 0; 52 | local hotkeyAlt4Slot6 = 0; 53 | local hotkeyAlt4Slot7 = 0; 54 | local hotkeyAlt4Slot8 = 0; 55 | local hotkeyAlt4Slot9 = 0; 56 | local hotkeyAlt4Slot10 = 0; 57 | 58 | 59 | -- if you are extending the script, you can add more hotkeys here 60 | -- then add actions in the 'onHotKey' function further below 61 | local hotkeys = { 62 | A_SWITCH_0_main = "Main Switch", 63 | A_SWITCH_1 = "Lower Third Switch #1", 64 | A_SWITCH_2 = "Lower Third Switch #2", 65 | A_SWITCH_3 = "Lower Third Switch #3", 66 | A_SWITCH_4 = "Lower Third Switch #4", 67 | LT1_SLT01 = "Load Slot #1 on LT#1", 68 | LT1_SLT02 = "Load Slot #2 on LT#1", 69 | LT1_SLT03 = "Load Slot #3 on LT#1", 70 | LT1_SLT04 = "Load Slot #4 on LT#1", 71 | LT1_SLT05 = "Load Slot #5 on LT#1", 72 | LT1_SLT06 = "Load Slot #6 on LT#1", 73 | LT1_SLT07 = "Load Slot #7 on LT#1", 74 | LT1_SLT08 = "Load Slot #8 on LT#1", 75 | LT1_SLT09 = "Load Slot #9 on LT#1", 76 | LT1_SLT10 = "Load Slot #10 on LT#1", 77 | LT2_SLT01 = "Load Slot #1 on LT#2", 78 | LT2_SLT02 = "Load Slot #2 on LT#2", 79 | LT2_SLT03 = "Load Slot #3 on LT#2", 80 | LT2_SLT04 = "Load Slot #4 on LT#2", 81 | LT2_SLT05 = "Load Slot #5 on LT#2", 82 | LT2_SLT06 = "Load Slot #6 on LT#2", 83 | LT2_SLT07 = "Load Slot #7 on LT#2", 84 | LT2_SLT08 = "Load Slot #8 on LT#2", 85 | LT2_SLT09 = "Load Slot #9 on LT#2", 86 | LT2_SLT10 = "Load Slot #10 on LT#2", 87 | LT3_SLT01 = "Load Slot #1 on LT#3", 88 | LT3_SLT02 = "Load Slot #2 on LT#3", 89 | LT3_SLT03 = "Load Slot #3 on LT#3", 90 | LT3_SLT04 = "Load Slot #4 on LT#3", 91 | LT3_SLT05 = "Load Slot #5 on LT#3", 92 | LT3_SLT06 = "Load Slot #6 on LT#3", 93 | LT3_SLT07 = "Load Slot #7 on LT#3", 94 | LT3_SLT08 = "Load Slot #8 on LT#3", 95 | LT3_SLT09 = "Load Slot #9 on LT#3", 96 | LT3_SLT10 = "Load Slot #10 on LT#3", 97 | LT4_SLT01 = "Load Slot #1 on LT#4", 98 | LT4_SLT02 = "Load Slot #2 on LT#4", 99 | LT4_SLT03 = "Load Slot #3 on LT#4", 100 | LT4_SLT04 = "Load Slot #4 on LT#4", 101 | LT4_SLT05 = "Load Slot #5 on LT#4", 102 | LT4_SLT06 = "Load Slot #6 on LT#4", 103 | LT4_SLT07 = "Load Slot #7 on LT#4", 104 | LT4_SLT08 = "Load Slot #8 on LT#4", 105 | LT4_SLT09 = "Load Slot #9 on LT#4", 106 | LT4_SLT10 = "Load Slot #10 on LT#4", 107 | 108 | } 109 | 110 | -- add any custom actions here 111 | local function onHotKey(action) 112 | --obs.timer_remove(rotate) 113 | if debug then obs.script_log(obs.LOG_INFO, string.format("Hotkey : %s", action)) end 114 | 115 | if action == "A_SWITCH_0_main" then 116 | if hotkeyMasterSwitch == 0 then 117 | hotkeyMasterSwitch = 1 118 | else 119 | hotkeyMasterSwitch = 0 120 | end 121 | update_hotkeys_js() 122 | elseif action == "A_SWITCH_1" then 123 | if hotkeySwitch1 == 0 then 124 | hotkeySwitch1 = 1 125 | else 126 | hotkeySwitch1 = 0 127 | end 128 | update_hotkeys_js() 129 | elseif action == "A_SWITCH_2" then 130 | if hotkeySwitch2 == 0 then 131 | hotkeySwitch2 = 1 132 | else 133 | hotkeySwitch2 = 0 134 | end 135 | update_hotkeys_js() 136 | elseif action == "A_SWITCH_3" then 137 | if hotkeySwitch3 == 0 then 138 | hotkeySwitch3 = 1 139 | else 140 | hotkeySwitch3 = 0 141 | end 142 | update_hotkeys_js() 143 | elseif action == "A_SWITCH_4" then 144 | if hotkeySwitch4 == 0 then 145 | hotkeySwitch4 = 1 146 | else 147 | hotkeySwitch4 = 0 148 | end 149 | update_hotkeys_js() 150 | elseif action == "LT1_SLT01" then 151 | if hotkeyAlt1Slot1 == 0 then 152 | hotkeyAlt1Slot1 = 1 153 | else 154 | hotkeyAlt1Slot1 = 0 155 | end 156 | update_hotkeys_js() 157 | elseif action == "LT1_SLT02" then 158 | if hotkeyAlt1Slot2 == 0 then 159 | hotkeyAlt1Slot2 = 1 160 | else 161 | hotkeyAlt1Slot2 = 0 162 | end 163 | update_hotkeys_js() 164 | elseif action == "LT1_SLT03" then 165 | if hotkeyAlt1Slot3 == 0 then 166 | hotkeyAlt1Slot3 = 1 167 | else 168 | hotkeyAlt1Slot3 = 0 169 | end 170 | update_hotkeys_js() 171 | elseif action == "LT1_SLT04" then 172 | if hotkeyAlt1Slot4 == 0 then 173 | hotkeyAlt1Slot4 = 1 174 | else 175 | hotkeyAlt1Slot4 = 0 176 | end 177 | update_hotkeys_js() 178 | elseif action == "LT1_SLT05" then 179 | if hotkeyAlt1Slot5 == 0 then 180 | hotkeyAlt1Slot5 = 1 181 | else 182 | hotkeyAlt1Slot5 = 0 183 | end 184 | update_hotkeys_js() 185 | elseif action == "LT1_SLT06" then 186 | if hotkeyAlt1Slot6 == 0 then 187 | hotkeyAlt1Slot6 = 1 188 | else 189 | hotkeyAlt1Slot6 = 0 190 | end 191 | update_hotkeys_js() 192 | elseif action == "LT1_SLT07" then 193 | if hotkeyAlt1Slot7 == 0 then 194 | hotkeyAlt1Slot7 = 1 195 | else 196 | hotkeyAlt1Slot7 = 0 197 | end 198 | update_hotkeys_js() 199 | elseif action == "LT1_SLT08" then 200 | if hotkeyAlt1Slot8 == 0 then 201 | hotkeyAlt1Slot8 = 1 202 | else 203 | hotkeyAlt1Slot8 = 0 204 | end 205 | update_hotkeys_js() 206 | elseif action == "LT1_SLT09" then 207 | if hotkeyAlt1Slot9 == 0 then 208 | hotkeyAlt1Slot9 = 1 209 | else 210 | hotkeyAlt1Slot9 = 0 211 | end 212 | update_hotkeys_js() 213 | elseif action == "LT1_SLT10" then 214 | if hotkeyAlt1Slot10 == 0 then 215 | hotkeyAlt1Slot10 = 1 216 | else 217 | hotkeyAlt1Slot10 = 0 218 | end 219 | update_hotkeys_js() 220 | elseif action == "LT2_SLT01" then 221 | if hotkeyAlt2Slot1 == 0 then 222 | hotkeyAlt2Slot1 = 1 223 | else 224 | hotkeyAlt2Slot1 = 0 225 | end 226 | update_hotkeys_js() 227 | elseif action == "LT2_SLT02" then 228 | if hotkeyAlt2Slot2 == 0 then 229 | hotkeyAlt2Slot2 = 1 230 | else 231 | hotkeyAlt2Slot2 = 0 232 | end 233 | update_hotkeys_js() 234 | elseif action == "LT2_SLT03" then 235 | if hotkeyAlt2Slot3 == 0 then 236 | hotkeyAlt2Slot3 = 1 237 | else 238 | hotkeyAlt2Slot3 = 0 239 | end 240 | update_hotkeys_js() 241 | elseif action == "LT2_SLT04" then 242 | if hotkeyAlt2Slot4 == 0 then 243 | hotkeyAlt2Slot4 = 1 244 | else 245 | hotkeyAlt2Slot4 = 0 246 | end 247 | update_hotkeys_js() 248 | elseif action == "LT2_SLT05" then 249 | if hotkeyAlt2Slot5 == 0 then 250 | hotkeyAlt2Slot5 = 1 251 | else 252 | hotkeyAlt2Slot5 = 0 253 | end 254 | update_hotkeys_js() 255 | elseif action == "LT2_SLT06" then 256 | if hotkeyAlt2Slot6 == 0 then 257 | hotkeyAlt2Slot6 = 1 258 | else 259 | hotkeyAlt2Slot6 = 0 260 | end 261 | update_hotkeys_js() 262 | elseif action == "LT2_SLT07" then 263 | if hotkeyAlt2Slot7 == 0 then 264 | hotkeyAlt2Slot7 = 1 265 | else 266 | hotkeyAlt2Slot7 = 0 267 | end 268 | update_hotkeys_js() 269 | elseif action == "LT2_SLT08" then 270 | if hotkeyAlt2Slot8 == 0 then 271 | hotkeyAlt2Slot8 = 1 272 | else 273 | hotkeyAlt2Slot8 = 0 274 | end 275 | update_hotkeys_js() 276 | elseif action == "LT2_SLT09" then 277 | if hotkeyAlt2Slot9 == 0 then 278 | hotkeyAlt2Slot9 = 1 279 | else 280 | hotkeyAlt2Slot9 = 0 281 | end 282 | update_hotkeys_js() 283 | elseif action == "LT2_SLT10" then 284 | if hotkeyAlt2Slot10 == 0 then 285 | hotkeyAlt2Slot10 = 1 286 | else 287 | hotkeyAlt2Slot10 = 0 288 | end 289 | update_hotkeys_js() 290 | elseif action == "LT3_SLT01" then 291 | if hotkeyAlt3Slot1 == 0 then 292 | hotkeyAlt3Slot1 = 1 293 | else 294 | hotkeyAlt3Slot1 = 0 295 | end 296 | update_hotkeys_js() 297 | elseif action == "LT3_SLT02" then 298 | if hotkeyAlt3Slot2 == 0 then 299 | hotkeyAlt3Slot2 = 1 300 | else 301 | hotkeyAlt3Slot2 = 0 302 | end 303 | update_hotkeys_js() 304 | elseif action == "LT3_SLT03" then 305 | if hotkeyAlt3Slot3 == 0 then 306 | hotkeyAlt3Slot3 = 1 307 | else 308 | hotkeyAlt3Slot3 = 0 309 | end 310 | update_hotkeys_js() 311 | elseif action == "LT3_SLT04" then 312 | if hotkeyAlt3Slot4 == 0 then 313 | hotkeyAlt3Slot4 = 1 314 | else 315 | hotkeyAlt3Slot4 = 0 316 | end 317 | update_hotkeys_js() 318 | elseif action == "LT3_SLT05" then 319 | if hotkeyAlt3Slot5 == 0 then 320 | hotkeyAlt3Slot5 = 1 321 | else 322 | hotkeyAlt3Slot5 = 0 323 | end 324 | update_hotkeys_js() 325 | elseif action == "LT3_SLT06" then 326 | if hotkeyAlt3Slot6 == 0 then 327 | hotkeyAlt3Slot6 = 1 328 | else 329 | hotkeyAlt3Slot6 = 0 330 | end 331 | update_hotkeys_js() 332 | elseif action == "LT3_SLT07" then 333 | if hotkeyAlt3Slot7 == 0 then 334 | hotkeyAlt3Slot7 = 1 335 | else 336 | hotkeyAlt3Slot7 = 0 337 | end 338 | update_hotkeys_js() 339 | elseif action == "LT3_SLT08" then 340 | if hotkeyAlt3Slot8 == 0 then 341 | hotkeyAlt3Slot8 = 1 342 | else 343 | hotkeyAlt3Slot8 = 0 344 | end 345 | update_hotkeys_js() 346 | elseif action == "LT3_SLT09" then 347 | if hotkeyAlt3Slot9 == 0 then 348 | hotkeyAlt3Slot9 = 1 349 | else 350 | hotkeyAlt3Slot9 = 0 351 | end 352 | update_hotkeys_js() 353 | elseif action == "LT3_SLT10" then 354 | if hotkeyAlt3Slot10 == 0 then 355 | hotkeyAlt3Slot10 = 1 356 | else 357 | hotkeyAlt3Slot10 = 0 358 | end 359 | update_hotkeys_js() 360 | elseif action == "LT4_SLT01" then 361 | if hotkeyAlt4Slot1 == 0 then 362 | hotkeyAlt4Slot1 = 1 363 | else 364 | hotkeyAlt4Slot1 = 0 365 | end 366 | update_hotkeys_js() 367 | elseif action == "LT4_SLT02" then 368 | if hotkeyAlt4Slot2 == 0 then 369 | hotkeyAlt4Slot2 = 1 370 | else 371 | hotkeyAlt4Slot2 = 0 372 | end 373 | update_hotkeys_js() 374 | elseif action == "LT4_SLT03" then 375 | if hotkeyAlt4Slot3 == 0 then 376 | hotkeyAlt4Slot3 = 1 377 | else 378 | hotkeyAlt4Slot3 = 0 379 | end 380 | update_hotkeys_js() 381 | elseif action == "LT4_SLT04" then 382 | if hotkeyAlt4Slot4 == 0 then 383 | hotkeyAlt4Slot4 = 1 384 | else 385 | hotkeyAlt4Slot4 = 0 386 | end 387 | update_hotkeys_js() 388 | elseif action == "LT4_SLT05" then 389 | if hotkeyAlt4Slot5 == 0 then 390 | hotkeyAlt4Slot5 = 1 391 | else 392 | hotkeyAlt4Slot5 = 0 393 | end 394 | update_hotkeys_js() 395 | elseif action == "LT4_SLT06" then 396 | if hotkeyAlt4Slot6 == 0 then 397 | hotkeyAlt4Slot6 = 1 398 | else 399 | hotkeyAlt4Slot6 = 0 400 | end 401 | update_hotkeys_js() 402 | elseif action == "LT4_SLT07" then 403 | if hotkeyAlt4Slot7 == 0 then 404 | hotkeyAlt4Slot7 = 1 405 | else 406 | hotkeyAlt4Slot7 = 0 407 | end 408 | update_hotkeys_js() 409 | elseif action == "LT4_SLT08" then 410 | if hotkeyAlt4Slot8 == 0 then 411 | hotkeyAlt4Slot8 = 1 412 | else 413 | hotkeyAlt4Slot8 = 0 414 | end 415 | update_hotkeys_js() 416 | elseif action == "LT4_SLT09" then 417 | if hotkeyAlt4Slot9 == 0 then 418 | hotkeyAlt4Slot9 = 1 419 | else 420 | hotkeyAlt4Slot9 = 0 421 | end 422 | update_hotkeys_js() 423 | elseif action == "LT4_SLT10" then 424 | if hotkeyAlt4Slot10 == 0 then 425 | hotkeyAlt4Slot10 = 1 426 | else 427 | hotkeyAlt4Slot10 = 0 428 | end 429 | update_hotkeys_js() 430 | end 431 | end 432 | 433 | 434 | -- write settings to js file 435 | function update_hotkeys_js() 436 | local output = assert(io.open(script_path() .. '../common/js/hotkeys.js', "w")) 437 | output:write('hotkeyMasterSwitch = '.. hotkeyMasterSwitch .. ';\n') 438 | output:write('hotkeySwitch1 = '.. hotkeySwitch1 .. ';\n') 439 | output:write('hotkeySwitch2 = '.. hotkeySwitch2 .. ';\n') 440 | output:write('hotkeySwitch3 = '.. hotkeySwitch3 .. ';\n') 441 | output:write('hotkeySwitch4 = '.. hotkeySwitch4 .. ';\n') 442 | output:write('hotkeyAlt1Slot1 = '.. hotkeyAlt1Slot1 .. ';\n') 443 | output:write('hotkeyAlt1Slot2 = '.. hotkeyAlt1Slot2 .. ';\n') 444 | output:write('hotkeyAlt1Slot3 = '.. hotkeyAlt1Slot3 .. ';\n') 445 | output:write('hotkeyAlt1Slot4 = '.. hotkeyAlt1Slot4 .. ';\n') 446 | output:write('hotkeyAlt1Slot5 = '.. hotkeyAlt1Slot5 .. ';\n') 447 | output:write('hotkeyAlt1Slot6 = '.. hotkeyAlt1Slot6 .. ';\n') 448 | output:write('hotkeyAlt1Slot7 = '.. hotkeyAlt1Slot7 .. ';\n') 449 | output:write('hotkeyAlt1Slot8 = '.. hotkeyAlt1Slot8 .. ';\n') 450 | output:write('hotkeyAlt1Slot9 = '.. hotkeyAlt1Slot9 .. ';\n') 451 | output:write('hotkeyAlt1Slot10 = '.. hotkeyAlt1Slot10 .. ';\n') 452 | output:write('hotkeyAlt2Slot1 = '.. hotkeyAlt2Slot1 .. ';\n') 453 | output:write('hotkeyAlt2Slot2 = '.. hotkeyAlt2Slot2 .. ';\n') 454 | output:write('hotkeyAlt2Slot3 = '.. hotkeyAlt2Slot3 .. ';\n') 455 | output:write('hotkeyAlt2Slot4 = '.. hotkeyAlt2Slot4 .. ';\n') 456 | output:write('hotkeyAlt2Slot5 = '.. hotkeyAlt2Slot5 .. ';\n') 457 | output:write('hotkeyAlt2Slot6 = '.. hotkeyAlt2Slot6 .. ';\n') 458 | output:write('hotkeyAlt2Slot7 = '.. hotkeyAlt2Slot7 .. ';\n') 459 | output:write('hotkeyAlt2Slot8 = '.. hotkeyAlt2Slot8 .. ';\n') 460 | output:write('hotkeyAlt2Slot9 = '.. hotkeyAlt2Slot9 .. ';\n') 461 | output:write('hotkeyAlt2Slot10 = '.. hotkeyAlt2Slot10 .. ';\n') 462 | output:write('hotkeyAlt3Slot1 = '.. hotkeyAlt3Slot1 .. ';\n') 463 | output:write('hotkeyAlt3Slot2 = '.. hotkeyAlt3Slot2 .. ';\n') 464 | output:write('hotkeyAlt3Slot3 = '.. hotkeyAlt3Slot3 .. ';\n') 465 | output:write('hotkeyAlt3Slot4 = '.. hotkeyAlt3Slot4 .. ';\n') 466 | output:write('hotkeyAlt3Slot5 = '.. hotkeyAlt3Slot5 .. ';\n') 467 | output:write('hotkeyAlt3Slot6 = '.. hotkeyAlt3Slot6 .. ';\n') 468 | output:write('hotkeyAlt3Slot7 = '.. hotkeyAlt3Slot7 .. ';\n') 469 | output:write('hotkeyAlt3Slot8 = '.. hotkeyAlt3Slot8 .. ';\n') 470 | output:write('hotkeyAlt3Slot9 = '.. hotkeyAlt3Slot9 .. ';\n') 471 | output:write('hotkeyAlt3Slot10 = '.. hotkeyAlt3Slot10 .. ';\n') 472 | output:write('hotkeyAlt4Slot1 = '.. hotkeyAlt4Slot1 .. ';\n') 473 | output:write('hotkeyAlt4Slot2 = '.. hotkeyAlt4Slot2 .. ';\n') 474 | output:write('hotkeyAlt4Slot3 = '.. hotkeyAlt4Slot3 .. ';\n') 475 | output:write('hotkeyAlt4Slot4 = '.. hotkeyAlt4Slot4 .. ';\n') 476 | output:write('hotkeyAlt4Slot5 = '.. hotkeyAlt4Slot5 .. ';\n') 477 | output:write('hotkeyAlt4Slot6 = '.. hotkeyAlt4Slot6 .. ';\n') 478 | output:write('hotkeyAlt4Slot7 = '.. hotkeyAlt4Slot7 .. ';\n') 479 | output:write('hotkeyAlt4Slot8 = '.. hotkeyAlt4Slot8 .. ';\n') 480 | output:write('hotkeyAlt4Slot9 = '.. hotkeyAlt4Slot9 .. ';\n') 481 | output:write('hotkeyAlt4Slot10 = '.. hotkeyAlt4Slot10 .. ';\n') 482 | output:close() 483 | end 484 | 485 | ---------------------------------------------------------- 486 | 487 | -- called on startup 488 | function script_load(settings) 489 | function pairsByKeys (t, f) 490 | local a = {} 491 | for n in pairs(t) do table.insert(a, n) end 492 | table.sort(a, f) 493 | local i = 0 494 | local iter = function () 495 | i = i + 1 496 | if a[i] == nil then return nil 497 | else return a[i], t[a[i]] 498 | end 499 | end 500 | return iter 501 | end 502 | 503 | for name, line in pairsByKeys(hotkeys) do 504 | hk[name] = obs.obs_hotkey_register_frontend(name, line, function(pressed) if pressed then onHotKey(name) end end) 505 | local hotkeyArray = obs.obs_data_get_array(settings, name) 506 | obs.obs_hotkey_load(hk[name], hotkeyArray) 507 | obs.obs_data_array_release(hotkeyArray) 508 | end 509 | update_hotkeys_js() 510 | end 511 | 512 | 513 | -- called on unload 514 | function script_unload() 515 | end 516 | 517 | 518 | -- called when settings changed 519 | function script_update(settings) 520 | debug = obs.obs_data_get_bool(settings, "debug") 521 | end 522 | 523 | 524 | -- return description shown to user 525 | function script_description() 526 | return "Control the switches of the lower thirds with hotkeys" 527 | end 528 | 529 | 530 | -- define properties that user can change 531 | function script_properties() 532 | local props = obs.obs_properties_create() 533 | obs.obs_properties_add_bool(props, "debug", "Debug") 534 | return props 535 | end 536 | 537 | 538 | -- set default values 539 | function script_defaults(settings) 540 | obs.obs_data_set_default_bool(settings, "debug", false) 541 | end 542 | 543 | 544 | -- save additional data not set by user 545 | function script_save(settings) 546 | for k, v in pairs(hotkeys) do 547 | local hotkeyArray = obs.obs_hotkey_save(hk[k]) 548 | obs.obs_data_set_array(settings, k, hotkeyArray) 549 | obs.obs_data_array_release(hotkeyArray) 550 | end 551 | end --------------------------------------------------------------------------------