From 31b03af0a23109d20f794d626530aecd0ce80e9e Mon Sep 17 00:00:00 2001 From: alicekb Date: Wed, 26 Jun 2024 15:43:59 -0400 Subject: [PATCH 1/3] CSC: Update Rolls page --- config/production/hugo.toml | 2 +- content/docs/components/InitRelay.md | 11 +- content/docs/components/roll.md | 67 ++++++++++-- hugo_stats.json | 9 ++ public/docs/components/index.xml | 2 +- public/docs/components/initrelay/index.html | 12 +-- public/docs/components/rolls/index.html | 113 +++++++++++++++++--- public/search-index.json | 2 +- 8 files changed, 180 insertions(+), 38 deletions(-) diff --git a/config/production/hugo.toml b/config/production/hugo.toml index 48a67cf..65cf4f4 100644 --- a/config/production/hugo.toml +++ b/config/production/hugo.toml @@ -1,2 +1,2 @@ # Overrides for production environment -baseurl = "https://roll20.github.io/beacon-docs/" +baseURL = "https://roll20.github.io/beacon-docs/" diff --git a/content/docs/components/InitRelay.md b/content/docs/components/InitRelay.md index f672fa7..eba445b 100644 --- a/content/docs/components/InitRelay.md +++ b/content/docs/components/InitRelay.md @@ -50,12 +50,8 @@ These components are crucial for handling actions, computations, macros, and rol href="/docs/components/handlers/" target="_blank" >}} - {{< /card-grid >}} - - - {{< card-grid >}} {{< link-card title="Computed" @@ -69,10 +65,9 @@ These components are crucial for handling actions, computations, macros, and rol href="/docs/components/handling-legacy-macro-attributes/" target="_blank" >}} - {{< /card-grid >}} - +{{< card-grid >}} {{< link-card title="Rolls" description="The Rolls component allows for advanced dice-rolling mechanics within the VTT. It supports both simple and complex rolls, providing flexibility in how roll results are displayed and computed." @@ -80,10 +75,10 @@ These components are crucial for handling actions, computations, macros, and rol target="_blank" >}} - {{< link-card title="Dispatch" description="The dispatch object provides methods for sending commands from the character sheet back to the host. Except when specified every method returns a promise." href="/docs/components/dispatch/" target="_blank" ->}} \ No newline at end of file +>}} +{{< /card-grid >}} \ No newline at end of file diff --git a/content/docs/components/roll.md b/content/docs/components/roll.md index 8a1cd16..b1772a9 100644 --- a/content/docs/components/roll.md +++ b/content/docs/components/roll.md @@ -15,32 +15,63 @@ seo: canonical: "" # custom canonical URL (optional) noindex: false # false (default) or true --- +The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the host. +[Vist the Roll20 help center to learn more about Roll20's Dice Rolling system](https://help.roll20.net/hc/en-us/articles/360037773133-Dice-Reference) -The VTT (Virtual Tabletop) has several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the VTT environment. +The most command way to trigger a dice roll is through the dispatch object returned from the `initRelay`, but it could also be called from [actions](/docs/components/actions): +```typescript +dispatch.roll({ + rolls: { [rollName: string]: string } // Ex. {attack: '1d20+4', damage: `3d6+2`} + messageId?: string +}): Promise<{messageId: string, results: RollResults }> +``` + +The `roll` method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings. + +`messageId` can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. +If `messageId` is omitted, the roll will be associated with a new chat message and a new `messageId` for that message will be returned with the roll results. +The method returns a promise that resolves with an object containing the `messageId` and the [RollResults](#rolls-results-format). The roll result is returned in the same format as in the non-beacon dice rolls computed roll system. + +{{< callout context="tip" >}} +The dispatch roll method and the actions roll section do not post to the chat, instead they will return a promise which will resolve to the roll results and the message id. +{{< /callout >}} + +## Posting A Roll to the Chat + +The roll method does not send or post any data to the chat on it's own. We instead have to use [dispatch's post](/docs/components/dispatch/#post) method to send our roll results along with any other content to the chat. + +```typescript +dispatch.post({ + characterId: '-O0KZhMTxLkn2HArFj8f', + content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`, + }) +``` + +## Additional Roll Posting Options ## data-rollname -The `data-rollname` attribute tells the VTT that this HTML element is displaying the result of a roll. +The `data-rollname` attribute tells the host that this HTML element is displaying the result of a roll. ```html ``` -The VTT will both add the Quantum Roll signature tooltip to the element and replace the contents of the element with the result from the roll. +The host will both add the Quantum Roll signature element and replace the contents of the element with the result from the roll. -This is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the VTT to display the result. +This is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the host to display the result. ## data-computed -Tagging an element with both a `data-rollname` and a `data-computed="true"` tells the VTT that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result. +Tagging an element with both a `data-rollname` and a `data-computed="true"` tells the host that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result. ```html 25 ``` -The VTT will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic. +The host will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic. -## Roll Buttons +### Roll Buttons Roll buttons are interactive elements that trigger sheet actions, such as damage rolls, when clicked. These buttons use the `data-sheet-action` attribute to specify the action to be executed. @@ -48,4 +79,24 @@ Roll buttons are interactive elements that trigger sheet actions, such as damage ``` -Additional arguments can be provided using the `data-args` attribute, and the character, `messageId`, and original rolls will be included automatically. \ No newline at end of file +Additional arguments can be provided using the `data-args` attribute, and the character, `messageId`, and original rolls will be included automatically. + +## Rolls Results Format +```typescript +type RollResults = { + [name: string]: { + expression: string //The original expression (i.e. 1d20+3d6) + rollName: string //The name of the roll + results: { //The results of the roll(s) + expression: string + dice?: number[] // + result: number //The final result of the roll + rolls?: { //Detailed results of each part of the roll (i.e. 3d6) + sides: number //The type of die for this part of the roll (i.e. 6) + dice: number //The number of dice (i.e. 3) + results: number[] //The result of each die (i.e. [4, 2, 5]) + }[] + } + } +} +``` \ No newline at end of file diff --git a/hugo_stats.json b/hugo_stats.json index eee4187..ec890b9 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -225,6 +225,11 @@ "ids": [ "TableOfContents", "addactionstohost", + "additional", + "additional-options-for-posting-messages", + "additional-options-when-posting-messages", + "additional-roll-html-options-when-posting-messages", + "additional-roll-posting-options", "addtotracker", "autolinktext", "background", @@ -276,6 +281,8 @@ "opendialogfromlink", "perform", "post", + "posting-a-roll-to-the-chat", + "posting-to-chat", "prerequisites", "quantum-roll", "query", @@ -285,6 +292,8 @@ "roll", "roll-buttons", "roll-template", + "rolls-results", + "rolls-results-format", "running-tests", "setcomputed", "setcontainersize", diff --git a/public/docs/components/index.xml b/public/docs/components/index.xml index 002be52..300f686 100644 --- a/public/docs/components/index.xml +++ b/public/docs/components/index.xml @@ -49,7 +49,7 @@ http://localhost:1313/docs/components/rolls/ Sun, 07 Jan 2024 16:12:37 +0200 http://localhost:1313/docs/components/rolls/ - The VTT (Virtual Tabletop) has several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the VTT environment. + The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed. Dispatch diff --git a/public/docs/components/initrelay/index.html b/public/docs/components/initrelay/index.html index b6c799c..e0a883c 100644 --- a/public/docs/components/initrelay/index.html +++ b/public/docs/components/initrelay/index.html @@ -482,7 +482,6 @@
- @@ -522,12 +521,12 @@
+ -
@@ -543,10 +542,9 @@
-
+ -
@@ -562,9 +560,11 @@
-
+ + +
diff --git a/public/docs/components/rolls/index.html b/public/docs/components/rolls/index.html index 5d3df3a..894068b 100644 --- a/public/docs/components/rolls/index.html +++ b/public/docs/components/rolls/index.html @@ -44,7 +44,7 @@ > - + @@ -52,7 +52,7 @@ - + @@ -402,9 +402,15 @@
Beacon SDK

On this page

 @@ -429,18 +435,72 @@

Rolls

-

The VTT (Virtual Tabletop) has several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the VTT environment.

+

The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the host. +Vist the Roll20 help center to learn more about Roll20’s Dice Rolling system

+

The most command way to trigger a dice roll is through the dispatch object returned from the initRelay, but it could also be called from actions:

+ + + +
+
+
+ +
+ 
dispatch.roll({
+  rolls: { [rollName: string]: string } // Ex. {attack: '1d20+4', damage: `3d6+2`}
+  messageId?: string
+}): Promise<{messageId: string, results: RollResults }>
+
+
+

The roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings.

+

messageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. +If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. +The method returns a promise that resolves with an object containing the messageId and the RollResults. The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.

+
+ +
+ +
+

The dispatch roll method and the actions roll section do not post to the chat, instead they will return a promise which will resolve to the roll results and the message id.

+ +
+
+
+ +

Posting A Roll to the Chat

+

The roll method does not send or post any data to the chat on it’s own. We instead have to use dispatch’s post method to send our roll results along with any other content to the chat.

+ + + +
+
+
+ +
+ 
dispatch.post({
+    characterId:  '-O0KZhMTxLkn2HArFj8f',
+    content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`,
+  })
+
+
+

Additional Roll Posting Options

data-rollname

-

The data-rollname attribute tells the VTT that this HTML element is displaying the result of a roll.

+

The data-rollname attribute tells the host that this HTML element is displaying the result of a roll.

@@ -452,10 +512,10 @@

data-rollname
<span data-rollname="attack"></span>
-

The VTT will both add the Quantum Roll signature tooltip to the element and replace the contents of the element with the result from the roll.

-

This is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the VTT to display the result.

+

The host will both add the Quantum Roll signature element and replace the contents of the element with the result from the roll.

+

This is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the host to display the result.

data-computed

-

Tagging an element with both a data-rollname and a data-computed="true" tells the VTT that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result.

+

Tagging an element with both a data-rollname and a data-computed="true" tells the host that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result.

@@ -467,8 +527,8 @@

data-computed
<span data-rollname="complex" data-computed="true">25</span>
-

The VTT will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic.

-

Roll Buttons

+

The host will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic.

+

Roll Buttons

Roll buttons are interactive elements that trigger sheet actions, such as damage rolls, when clicked. These buttons use the data-sheet-action attribute to specify the action to be executed.

@@ -482,6 +542,33 @@

Roll Buttons

Additional arguments can be provided using the data-args attribute, and the character, messageId, and original rolls will be included automatically.

+

Rolls Results Format

+ + + +
+
+
+ +
+ 
type RollResults = {
+  [name: string]: {
+    expression: string        //The original expression (i.e. 1d20+3d6)
+    rollName: string          //The name of the roll
+    results: {                //The results of the roll(s)
+      expression: string
+      dice?: number[]         //
+      result: number          //The final result of the roll
+      rolls?: {               //Detailed results of each part of the roll (i.e. 3d6)
+        sides: number         //The type of die for this part of the roll (i.e. 6)
+        dice: number          //The number of dice (i.e. 3)
+        results: number[]     //The result of each die (i.e. [4, 2, 5])
+      }[]
+    }
+  }
+}
+
+
diff --git a/public/search-index.json b/public/search-index.json index f7b8332..d3730f5 100644 --- a/public/search-index.json +++ b/public/search-index.json @@ -1 +1 @@ -[{"content":"Well-thought-through product announcements will help increase feature awareness and engage users with new functionality. Just like sharing your public roadmap, it\u0026rsquo;s also a great way to let potential customers see that you\u0026rsquo;re constantly improving.\nFurther reading Read How to announce product updates and features ","date":"2023-09-07","id":0,"permalink":"/blog/example-post/","summary":"You can use blog posts for announcing product updates and features.","tags":[],"title":"Example Post"},{"content":"","date":"2023-09-07","id":1,"permalink":"/blog/","summary":"","tags":[],"title":"Blog"},{"content":"","date":"2024-06-07","id":2,"permalink":"/docs/gettingstarted/","summary":"","tags":[],"title":"Getting Started"},{"content":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.\nWhether you\u0026rsquo;re a game master (GM), a developer, or a player, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated VTT experiences.\nWhat is the Beacon SDK? The Beacon SDK (software development kit) is a toolset used to create digital character sheets on Roll20 for Roll20 Tabletop and Roll20 Characters.\nWhether you\u0026rsquo;re an experience developer, or just starting out, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated character sheet experiences.\nThe Beacon SDK also introduces a new way to develop characters sheets for Roll20. Beacon SDK allows you to connect your local development environment to sandboxes in Roll20 Characters and Roll20 Tabletop, giving you real-time updates as you develop.\nKey Features Character Sheets: Design and implement a web app character sheet with dynamic attributes and real-time updates. Local Development: Work where you are most comfortable and get real-time updates in sandboxes in Roll20. Testing Sheets: Release a testing sheet and give others special access to it before you push it live for everyone. Roll Mechanics: Integrate complex roll formulas and display roll results directly within the Roll20 Tabletop and Roll20 Characters. Legacy Support: Convert and integrate legacy macros and roll templates with the new Beacon architecture. Customization: Define custom actions, computed attributes and handle specific roll templates tailored to your game\u0026rsquo;s needs. Components Overview The Beacon SDK is composed of several key components:\nActions: Define and manage custom actions that can be triggered within the VTT. Handlers: Event handlers that process and respond to various VTT events and messages. Computed Attributes: Define dynamically computed attributes based on other attributes. Macro Attributes: Convert and manage legacy macro attributes for compatibility with the Beacon SDK. Rolls: Implement advanced roll mechanics and display results dynamically within the VTT. For a comprehensive overview of these components, view the components section.\nGetting Started To get started with the Beacon SDK, you must initialize the relay, set up your character sheets, and define the necessary actions, handlers, and computed attributes.\nThis documentation provides detailed guides and example sheets to help you through each step of the process.\nBy leveraging the Beacon SDK, you can create rich, interactive, fully integrated VTT experiences that enhance gameplay and streamline game management.\nWhether adapting existing character sheets or building new ones from scratch, the Beacon SDK offers the tools and flexibility to bring your digital character sheet to life.\n","date":"2024-05-07","id":3,"permalink":"/docs/gettingstarted/introduction/","summary":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.","tags":[],"title":"Introduction"},{"content":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.\nTo get started quickly with a boilerplate, you can download and start editing the Quick Start Example Sheet which already has the Beacon SDK installed, along with several recommanded patterns implemented in a Vue.js project.\nPrerequisites Before you can install the Beacon SDK, you\u0026rsquo;ll need to have the following:\nA local web development environment with a code editor. Node.js installed on your machine. If you don\u0026rsquo;t have Node.js installed, use the following steps in the official Node.js documentation. A javascript project, we recommand Vue.js but you can choose whichever you are more comfortable with. These steps use npm but you are free to use any package manager and framework you prefer.\nThe following steps will guide you in installing the Beacon SDK in your application:\nStep 1: Add the package to your project You can find the latest version of the package on the NPM registry.\nIn your project\u0026rsquo;s directory, run the following:\nnpm i @roll20-official/beacon-sdk\rThis will install the Beacon SDK package to your project\u0026rsquo;s package.json file.\nStep 2: Use the Beacon package in your project The Beacon package exports various utilities you can use in your application. The main one that needs to be setup to enable the connection between Beacon SDK and Roll20 is initRelay.\nIdeally you would want to call this when your sheet is initalizing, and it is the function where you will define sheet actions, computed values, and how the sheet will response to or send character data changes. visit the initRelay page for a more detailed breakdown.\nAdd the following to your project:\nimport { initRelay } from \u0026#39;@roll20/beacon-sdk\u0026#39;; const dispatch = initRelay({ handlers: { onInit: ({ character } ) =\u0026gt; { console.log(\u0026#39;sheet character\u0026#39;, character) }, onChange: () =\u0026gt; {}, onSettingsChange: () =\u0026gt; {}, onSharedSettingsChange: () =\u0026gt; {}, onTranslationsRequest: () =\u0026gt; {}, onDragOver: () =\u0026gt; {} }, // Refer to our advanced example sheet on how to setup actions and computed properties. actions: {}, computed: {} })\rinitRelay returns a dispatch function that allows you to call methods or send changes from the sheet to Roll20. Check out the page on dispatch to learn more about the different methods.\nStep 3: Settings up the Roll20 tabletop sandbox On the Roll20 website visit the custom sheet sandbox and create a new sandbox, we\u0026rsquo;ll use this sandbox to develop our sheet but we must set it up to listen to our local project\u0026rsquo;s web server.\nAfter creating a new sandbox, we\u0026rsquo;ll be taken to the sandbox details page, here you will find a collapseable section called Sheet.json Editor, opening this we can add the settings we need to connect to our project:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 // or the port of your webserver }\rAfter adding these changes make sure to click Save Changes at the bottom of the page. After which you can click Launch Game on the page to go into the game and start testing your sheet.\n","date":"2024-04-07","id":4,"permalink":"/docs/gettingstarted/installing-beacon/","summary":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.","tags":[],"title":"Installing Beacon"},{"content":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.\nCharacter sheet: A digital or printed page used to track a character\u0026rsquo;s attributes, abilities, and other relevant information in a role-playing game.\nComputed Property: Properties that have both get and set methods, which can be dynamically calculated.\nConvertLegacyMacroAttributes: A function to handle mapping legacy macro attributes to the new Beacon Sheet format.\nDispatch: A set of functions enabling the sheet to send commands back to the VTT.\nGM (Game Master): The person who runs the game, controls the NPCs \u0026amp; the story, and provides challenges for the players.\nHandler: Methods that act as event handlers to process messages from the host.\nInitRelay: Function to initialize the SDK relay, setting up communication between the host and the character sheet.\nMacro: A script that automates repetitive tasks in the VTT.\nRoll Template: A predefined format for displaying the results of a dice roll.\nToken: A visual representation of a character or object on the virtual tabletop, with various properties like position, size, and attributes.\nVTT (Virtual Tabletop): An online platform that allows players to play tabletop role-playing games over the internet.\nValidationMessage: A message displayed when an input value does not meet specific criteria.\nQuantum Roll: A system that ensures the fairness and authenticity of dice rolls in the VTT by using cryptographic methods.\n","date":"2024-03-07","id":5,"permalink":"/docs/about/glossary/","summary":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.","tags":[],"title":"Glossary"},{"content":"\rQ: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level. There are a number of benefits to the Beacon SDK if you know how to build web applications. If you don\u0026rsquo;t know how to set up your own local environment, than the Beacon SDK might now be the first place you should start. Learn more about sheet development using the custom sheet.\nIf you have the skill to take advantage of the Beacon SDK, there are a number of improvements that will make it much easier to build characters sheets.\nFirst, the Beacon SDK allows you to develop locally and preview your changes automatically in the Roll20 Tabletop and Roll20 Character sandboxes. This means that you don\u0026rsquo;t have to keep uploading your HTML and CSS into the custom sheet to see your changes.\nNext, it allows you to develop your character sheet with all the power of JavaScript frameworks and modern web development libraries. In our example sheets, we use Vue.js, but you are free to use whatever you are most comfortable with. Also, you could use something like Cypress to create automated testing. That\u0026rsquo;s what we use in our Beacon sheets.\nLastly, the Beacon SDK makes it much easier for a web developer who knows JSON and Javascript to access character data and manage attributes on the character. If you\u0026rsquo;re familiar with the custom sheet, you no longer have to deal with sheet workers to get the data you need for a character. Also, the Beacon SDK introduces nested and computed attributes that make complex data models for your character sheet easier to create and maintain.\nQ: I\u0026rsquo;m not really a web developer, should I use Beacon or the custom sheet to make a my own character sheet?\rThat is up to you and your comfort level. If you\u0026rsquo;re looking to learn more about web development, building a character sheet with the Beacon SDK is a great way to level up your skills. What you learn during this process can be taken with you into any other web development project you work on in the future.\nIf setting up your own development environment is too intimidating for you, than it might be easier for you to start with the custom sheet and to go from there.\nQ: I\u0026rsquo;m interested in using Beacon, but I don\u0026rsquo;t know the basics of setting up a local environment. Where can I go to learn more about web development?\rYou can start learning how to build a local development environment by reading or watching the following tutorials. Note: these are not tutorials that we\u0026rsquo;ve produced, but we have found them helpful in getting started with web development.\nhttps://learn.microsoft.com/en-us/windows/dev-environment/javascript/vue-on-wsl https://www.youtube.com/watch?v=WPqXP_kLzpo Q: Now that Roll20 has acquired Demiplane, will you continue to support character sheets built on Beacon?\rThe recent acquisition of Demiplane brings exciting new opportunities for character sheets and compendiums on Roll20. At the same time, we are fully committed to supporting the Beacon SDK and character sheets that are built in our new advanced sheets ecosystem on Roll20. In fact, we believe that the Beacon SDK will be a key component of our future plans for Demiplane integration. In addition, our new D\u0026amp;D 2024 sheet is built on top of the Beacon SDK, and we will continue to utilize it to build first-class experiences on Roll20.\nIn short, you can rest assured that the Beacon SDK is an important tool in our toolbox moving forward.\nQ: What are actions in the context of Beacon?\rActions are methods executed in the chat log of Roll20 Tabletop or Roll20 Characters, often used for rolls triggered from macros or chat buttons. They are defined in the sheet\u0026rsquo;s configuration and can interact with character data. Q: How are computed properties used in Roll20?\rComputed properties are attributes which are accessible by users of your character sheet. They are usable in macros to create custom rolls or common actions for each character. Computed properties can represent derived values or complex calculations based on character data. Q: What is the dispatch function used for?\rThe dispatch function provides methods for sending commands from the character sheet back to Roll20, including updating character data, performing actions, and interacting with the interface. Q: What are roll buttons, and how do they work?\rRoll buttons are HTML elements with specific attributes that execute designated sheet actions when clicked. They can pass arguments to the action method and are commonly used for triggering rolls from the character sheet. Q: How are legacy attributes handled in Beacon?\rBeacon gives you the ability to transition your legacy attributes to new attributes you create in Beacon. This means that when a user updates their sheet to the new Beacon sheet, their legacy attribute can be mapped to Beacon attributes using the convertLegacyMacroAttributes function. Sheet developers can define how to handle legacy attribute values to ensure compatibility with existing macros. Q: What is the purpose of the query function?\rThe query function displays a SweetAlert2 prompt to users and returns the results along with any errors. It is commonly used for interactive prompts or confirmations within the VTT interface. Q: How are tokens managed in the VTT?\rTokens represent characters or objects on Roll20 Tabletop (VTT). Functions like getTokens, updateTokensByCharacter, and addToTracker are used to retrieve token information, update token data, and manage tokens in the turn tracker. Q: What is the role of the convertLegacyMacroAttributesArgs type?\rThe convertLegacyMacroAttributesArgs type defines the arguments used for handling legacy macro attributes. It includes the attribute name, character ID, and character data needed for mapping legacy attributes to the new sheet structure. ","date":"2024-01-07","id":6,"permalink":"/docs/about/faq/","summary":"Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level.","tags":[],"title":"FAQ"},{"content":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games. initRelay is the main method that initializes the Beacon SDK communication channel with the host (Either the Roll20 tabletop or in Roll20 Characters). It should be initialized as soon as the sheet loads, as its onInit handler will be the earliest we can get access to that character\u0026rsquo;s data.\ninitRelay({ handlers: { onInit, onChange, onSettingsChange, onSharedSettingsChange, onTranslationsRequest, onDragOver, onDropOver, }, actions: {}, computed: {}, convertLegacyMacroAttributes, handleLegacyRollTemplates }): Promise\u0026lt;Dispatch\u0026gt;\rThese components are crucial for handling actions, computations, macros, and rolls. This overview provides a high-level summary of each section, helping you understand their roles and how they integrate within the SDK.\nActions\rActions define specific operations that can be performed by characters within the VTT. These operations can range from simple tasks like rolling a dice to more complex interactions such as casting spells or activating abilities.\nHandlers\rHandlers are event listeners that manage communication between the VTT and the character sheet. They respond to various events, such as changes in character attributes or settings, and trigger appropriate actions or updates.\nComputed\rComputed properties are dynamic values derived from other character attributes. They allow for the creation of complex, calculated attributes that automatically update when their dependencies change.\nMacro Attributes\rMacro attributes handle the conversion of legacy macro attributes to the new format used in the Beacon SDK. This ensures compatibility with older character sheets and macros, allowing for a smooth transition to the new system.\nRolls\rThe Rolls component allows for advanced dice-rolling mechanics within the VTT. It supports both simple and complex rolls, providing flexibility in how roll results are displayed and computed.\nDispatch\rThe dispatch object provides methods for sending commands from the character sheet back to the host. Except when specified every method returns a promise.\n","date":"2024-06-07","id":7,"permalink":"/docs/components/initrelay/","summary":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games.","tags":[],"title":"InitRelay"},{"content":"Actions are a collection of methods that can be executed from the VTT. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions.\nactions: { [name: string]: { method: (props: { dispatch: Dispatch, character: Character, messageId?: string, rolls?: RollResults }, ...args: string[]): void | Promise\u0026lt;void\u0026gt; } }\rActions are passed into the initRelay function in an object, where the keys are the unique names of the actions, and the values are objects containing a method property (additional metadata fields may be added to this object in the future).\nThe method receives a props object containing the following properties:\ndispatch: A Dispatch object. character: The data of the character performing the action. Currently, the action will not receive the character’s bio or GM notes, regardless of whether the player has access to those fields. messageId (optional): A unique ID for an existing chat message. It\u0026rsquo;s included in actions triggered from chat buttons to provide context for the original roll. rolls (optional): Included when action is triggered from a chat button. Contains the roll results of the original roll. These functions can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these functions can be synchronous or asynchronous and do not return a value.\n","date":"2024-05-07","id":8,"permalink":"/docs/components/actions/","summary":"Actions are a collection of methods that can be executed from the VTT. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button.","tags":[],"title":"Actions"},{"content":"","date":"2024-04-07","id":9,"permalink":"/docs/components/","summary":"","tags":[],"title":"Components"},{"content":"Sheet authors define computed properties that are accessed by the host. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.\ncomputed: { [name: string]: { tokenBarValue?: boolean, description?: string, get: ( props: { character: Character }, ...args: string[] ) =\u0026gt; ComputedResult, set?: ( props: { character: Character, dispatch: Dispatch }, ...args: string[] ) =\u0026gt; void | Promise\u0026lt;void\u0026gt; } }\rComputed properties are passed into the initRelay function in an object where the keys are the names of the properties, and the value should be an object containing the following:\nget (required): It receives character data along with any number of string parameters and should return the computed value. tokenBarValue (optional): A boolean indicating whether this property should be available for use in token bars. description (optional): A text value indicating what this computed summary property represents. set (optional): This method receives character data and a dispatch, along with string arguments. This method does not need to return a value. Setting tokenBarValue to true will make the property available to use as a value for token bars. To work correctly, the get function must not rely on any additional arguments and must return either a simple value (a string or number) or an object: { current: number | string, max: number | string }\rIf the set function is omitted, the value will not be editable from the token itself. If defined, set methods will receive one string argument, which is whatever the user types into the input for modifying the bar. ","date":"2024-04-07","id":10,"permalink":"/docs/components/computed/","summary":"Sheet authors define computed properties that are accessed by the host. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.","tags":[],"title":"Computed"},{"content":"Handler functions allow the sheet to respond to messages from the host. The handlers argument requires the following methods:\nonInit The onInit function provides the initial set of data to the sheet.\nonInit(e: { character: Character, settings: { colorTheme: string, language: string, gm: boolean, owned: boolean, settingsSheet: boolean, headless: boolean, sandbox: boolean, campaignId: number, environment: string, currentUserId: string, singleSheet: boolean }, sharedSettings: {}, compendiumDropData: { pageName: string, categoryName: string, expansion: number } }, dispatch: Dispatch): void;\rThe event object contains the following:\ncharacter: The primary character for this sheet. settings: Campaign and character-specific settings. sharedSettings: Data shared between all characters in this campaign. compendiumDropData: Populated when the character sheet is created from a compendium entry such as a creature or NPC. This function may be called multiple times during development in the sheet sandbox as part of hot reloads.\nonChange onChange is called whenever a character’s data is changed on the host’s end. The event object contains a partial character with only the character’s ID and the changed data. This could be the character’s bio, GM notes, or attributes (only the changed attributes).\nonChange(e: { character: Partial\u0026lt;Character\u0026gt; }, dispatch: Dispatch): void;\ronSettingsChange onSettingsChange is called when either the VTT’s color theme is changed, or when the current player’s ownership of the primary character changes.\nonSettingsChange(e: { colorTheme: string, owned: boolean }, dispatch: Dispatch): void;\ronSharedSettingsChange onSharedSettingsChange is called when someone changes a shared setting in the VTT.\nonSharedSettingsChange({ settings: { [key: string]: any } }): void;\ronTranslationsRequest onTranslationsRequest is called before the relay is fully initialized and returns the translation JSON data corresponding to the two-letter language argument.\nonTranslationsRequest(language: string): { [key: string]: string };\ronDragOver (optional) onDragOver is called when a compendium item from the compendium tab is dragged over the iframe window containing the character sheet.\nCoordinates of the drag are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch. If the item is moved outside of the iframe, dragData and coordinates are null.\nonDragOver(e: { coordinates: { top: number, left: number }, dragData: { pageName: string, categoryName: string, expansionId: number } | null }, dispatch: Dispatch): void\ronDropOver (optional) onDropOver is called when a compendium item from the compendium tab is dropped over the iframe window containing the character sheet.\nCoordinates of the drop are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch.\nonDropOver(e: { coordinates: { top: number, left: number }, dropData: { pageName: string, categoryName: string, expansionId: number } }, dispatch: Dispatch): void\r","date":"2024-03-07","id":11,"permalink":"/docs/components/handlers/","summary":"Handler functions allow the sheet to respond to messages from the host. The handlers argument requires the following methods:\nonInit The onInit function provides the initial set of data to the sheet.","tags":[],"title":"Handlers"},{"content":"","date":"2024-02-07","id":12,"permalink":"/docs/about/","summary":"","tags":[],"title":"About"},{"content":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.\nThis scenario commonly arises when transitioning from an existing legacy sheet to a Beacon sheet. During such transitions, it\u0026rsquo;s possible that the attributes called from the legacy macro may not align with the structure of attributes in the Beacon Sheet.\nThe convertLegacyMacroAttributes function serves as a pivotal tool, empowering Sheet Developers to determine the mapping strategy for legacy attributes to the new Beacon Sheet.\nconvertLegacyMacroAttributes This function is defined during the initial SDK initialization process and is invoked by the host when it encounters a failure in locating an attribute\u0026rsquo;s value.\nconvertLegacyMacroAttributes: (messages: convertLegacyMacroAttributesArgs) =\u0026gt; {}: any\rAdvanced sheet macros typically first search through the defined computed properties before resorting to the convertLegacyMacroAttributes function.\nThe function\u0026rsquo;s purpose is to return a value that will be substituted in the macro. However, it grants Sheet Developers the autonomy to devise their preferred approach for handling legacy attribute values.\n","date":"2024-02-07","id":13,"permalink":"/docs/components/handling-legacy-macro-attributes/","summary":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.","tags":[],"title":"Handling Legacy Macro Attributes"},{"content":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development. Basic and advanced sheet examples. Improvements Detailed comments added to example files for better understanding. Support for complex roll templates and rich sheet actions. Bug Fixes N/A (initial release). Version 2.0.0 Release Date: 2023-03-17\nNew Features SCSS support for styling. Integration with Roll20 and VTT. Mock Relay for offline development. Improvements TypeScript integration for type checking and improved development experience. Unit testing with Vitest. End-to-End testing with Cypress. Bug Fixes N/A (initial release). ","date":"2024-01-07","id":14,"permalink":"/docs/about/changelog/","summary":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development.","tags":[],"title":"Changelog"},{"content":"The VTT (Virtual Tabletop) has several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the VTT environment.\ndata-rollname The data-rollname attribute tells the VTT that this HTML element is displaying the result of a roll.\n\u0026lt;span data-rollname=\u0026#34;attack\u0026#34;\u0026gt;\u0026lt;/span\u0026gt;\rThe VTT will both add the Quantum Roll signature tooltip to the element and replace the contents of the element with the result from the roll.\nThis is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the VTT to display the result.\ndata-computed Tagging an element with both a data-rollname and a data-computed=\u0026quot;true\u0026quot; tells the VTT that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result.\n\u0026lt;span data-rollname=\u0026#34;complex\u0026#34; data-computed=\u0026#34;true\u0026#34;\u0026gt;25\u0026lt;/span\u0026gt;\rThe VTT will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic.\nRoll Buttons Roll buttons are interactive elements that trigger sheet actions, such as damage rolls, when clicked. These buttons use the data-sheet-action attribute to specify the action to be executed.\n\u0026lt;button data-sheet-action=\u0026#34;damage\u0026#34; data-args=\u0026#34;arg1:arg2\u0026#34;\u0026gt;Click Me\u0026lt;/button\u0026gt;\rAdditional arguments can be provided using the data-args attribute, and the character, messageId, and original rolls will be included automatically.\n","date":"2024-01-07","id":15,"permalink":"/docs/components/rolls/","summary":"The VTT (Virtual Tabletop) has several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the VTT environment.","tags":[],"title":"Rolls"},{"content":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host. Except when specified every method below will return a promise.\nupdate dispatch.update({ options: { overwrite?: boolean } character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rThe update method sends character changes to the host (Roll20 Tabletop or Roll20 Characters) to be persisted. The partial character passed in here must contain the character\u0026rsquo;s id, and can contain any combination of the attributes, bio, and gmNotes properties. When updating a character’s attributes, only include those attributes that have changed.\nupdateCharacter dispatch.updateCharacter({ character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rLike the update method, updateCharacter sends character changes to the host page (Roll20 Tabletop or Roll20 Characters) to be persisted. However, this method takes a full set of character attributes as the character argument, and automatically computes the diff with existing character attributes, so that only changed attributes are sent to the data store.\nroll dispatch.roll({ rolls: { [rollName: string]: string } // Ex. {attack: \u0026#39;1d20+4\u0026#39;, damage: `3d6+2`} messageId?: string }): Promise\u0026lt;{messageId: string, results: RollResults }\u0026gt;\rThe roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings. messageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResult (see Types). The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.\npost dispatch.post({ characterId: string, messageId?: string, content: string, options?: { whisper?: \u0026#39;gm\u0026#39;, secret?: boolean, } }): Promise\u0026lt;string\u0026gt;\rpost posts a message to chat, either creating a new message or overwriting an existing one. It requires a character id and message content, a string containing either plain text or HTML to be posted. The method also accepts an options object. Currently, only whisper and secret are supported, the only valid value for whisper is gm, which will send the message as a whisper to the gm. The secret option is ignored unless whisper is also set, toggling to true will cause the message to not be visible to the controlling player. Like roll, messageId can be provided to update an existing chat message, but if omitted the method will generate a new messageId and post a new chat message. The method returns the messageId.\nquery dispatch.query(options: Swal2Options): { isConfirmed: boolean, isDenied: boolean, isDismissed: boolean, value?: string | number, dismiss?: \u0026#34;cancel\u0026#34; | \u0026#34;backdrop\u0026#34; | \u0026#34;close\u0026#34; | \u0026#34;esc\u0026#34; | \u0026#34;timer\u0026#34;, errors?: string[], }: Promise\u0026lt;{ results: { isConfirmed: boolean isDenied: boolean isDismissed: boolean value: string | number dismiss: string }, errors: [string] }\u0026gt;\rThe query method takes an options object and uses them to display a SweetAlert2 prompt to the user. It returns the results of the query as a SweetAlertResult, along with any errors encountered. The options work exactly as described in the documentation for SweetAlert2, however not all options are allowed. Here is a list of the allowed options:\ntitleText, text, iconColor, input, width, padding, background, position, grow, timer, timerProgressBar, showConfirmButton, showDenyButton, showCancelButton, ariaLabel, confirmButtonText, denyButtonText, cancelButtonText, confirmButtonAriaLabel, confirmButtonColor, cancelButtonAriaLabel, cancelButtonColor, denyButtonAriaLabel, denyButtonColor, reverseButtons, showCloseButton, closeButtonAriaLabel, returnInputValueOnDeny, imageUrl, imageWidth, imageHeight, imageAlt, inputLabel, inputPlaceholder, inputValue, inputOptions, inputPlaceholder, inputAutoTrim, inputAttributes, validationMessage, progressSteps, currentProgressStep, progressStepsDistance.\nPerform dispatch.perform({ characterId: string, action: string, args: string[], }): Promise\u0026lt;void\u0026gt;;\rperform executes the specified action on behalf of the character (designated by the character id), passing in args to the action method. This method can perform actions on behalf of any character, even a character that the sheet does not have data for.\ngetComputed dispatch.getComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rsee setComputed below\nsetComputed dispatch.setComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rgetComputed and setComputed are both nearly identical in how they are called, taking a character id and a property with the name of the computed property you wish to get or set, and an array of string args. Both methods return a promise that resolves with the computed value.\ncompendiumRequest dispatch.compendiumRequest({ query: string }): Promise\u0026lt;{ data: Object errors: Array\u0026lt;Error\u0026gt; extensions: Record\u0026lt;string, any\u0026gt; }\u0026gt;\rcompendiumRequest executes an AJAX request to the compendium service’s graphQL endpoint. It takes in a graphQL query string written according to the Compendium service’s schema. The query string does not need to include the ruleSystem shortName as this is set automatically according to the campaign override or sheet.json value in the Roll20 Tabletop.\ndebouncedCompendiumRequest dispatch.debouncedCompendiumRequest({ query: string }): Promise\u0026lt;{ data: Object }\u0026gt;\rLike compendiumRequest, except that calls to this method are automatically debounced (at 100ms) and grouped together into a single request to the compendium service. Note that this method will only return the requested data, it does not return errors or extensions.\ngetTokens dispatch.getTokens({ characterId: string }): Promise\u0026lt;{ selected: Token[], tokens: Token[] }\u0026gt;: Promise\u0026lt;{ selected: Token[] tokens: Token[] }\u0026gt;\rgetTokens requires a character id string and returns information about tokens on the user’s current page. The return value contains two arrays of tokens. The tokens array contains all tokens on the current page that represent the character whose id was provided to the method. The selected array contains any tokens that are currently selected, regardless of which character they represent. The returned token objects contain all of the token attributes available to the API, you can find documentation here and here.\naddToTracker dispatch.addToTracker({ tokenId?: string, custom?: { name: string img?: string } formula?: string value: string | number }): Promise\u0026lt;void\u0026gt;\raddToTracker adds or updates a single item in the turn tracker. Passing in a tokenId will add the specified token to the tracker, while passing in custom with a name and an optional image url (img) will add a custom item, not connected to any character or token. A round calculation string can be added via the optional formula parameter. value is the initiative number for the item.\naddActionsToHost dispatch.addActionsToHost({ sheetAction?: { characterId: string action: string args?: string[] } action?: string locations?: [\u0026#39;macroBar\u0026#39;] | [\u0026#39;tokenActionBar\u0026#39;] | [\u0026#39;macroBar\u0026#39;, \u0026#39;tokenActionBar\u0026#39;] actionId?: string name: string requestId?: string }): void\raddActionsToHost adds a specific action(macro) to an area of the Roll20 Tabletop UI; either the macrobar or the token action bar. Either sheetAction or action can be passed in but not both at the same time. The sheetAction arg should be passed in when an the action is to designated to a character. While the action arg should be passed in when the action is more generic.\ngetActions dispatch.getActions({ args: { characterId?: string } }): Promise\u0026lt;{ actions?: {} | { [id: string]: ActionFromHost } }\u0026gt;\rgetActions gets a specific character’s actions(macro).\nsetContainerSize dispatch.setContainerSize({ args: { width?: number height?: number } }): Promise\u0026lt;void\u0026gt;\rsetContainerSize updates the size of the container which holds the sheet shared settings. Returns a promise that can be awaited. This can be used in conjunction with something like the ResizeSensor event listener from npm: css-element-queries to automatically resize the container on the host.\nupdateTokensByCharacter dispatch.updateTokensByCharacter({ args: { characterId: string token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByCharacter updates a particular character’s default token as well as all existing tokens representing that character. Returns a promise that can be awaited.\nupdateTokensByIds dispatch.updateTokensByIds({ args: { tokenIds: array of ids as strings token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByIds updates a single or several tokens. Returns a promise that can be awaited.\nautoLinkText dispatch.autoLinkText({ args: { text: string } }): Promise\u0026lt;string\u0026gt;\rautoLinkText goes through the text to find handout names between square brackets and converts them into links with the handoutID. For example in a game with a handout named Dragon, passing in the text string of this is a [Dragon] to autoLinkText returns something similar to this is a \u0026lt;a href=\u0026quot;https://journal.roll20.net/8je02j0kd02k\u0026quot;\u0026gt;Dragon\u0026lt;/a\u0026gt;.\nopenDialogFromLink dispatch.openDialogFromLink({ args: { urlString: string } }): void\ropenDialogFromLink opens the supplied urlString through the Roll20 Tabletop.\nIf the url is for a handout, it will open the corresponding handout in the campaign. This will also check if the user opening the link has access to the handout. If the url is for a compendium, it will open a pop up to the compendium page, it will also check to ensure the user has access to view the page. If the url is for an external page, a confirmation pop up will display to warn the user that the link is for an external site and open a new tab in their main window if confirmed. ","date":"2023-09-07","id":16,"permalink":"/docs/components/dispatch/","summary":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host.","tags":[],"title":"Dispatch"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet\nUse the following steps to get started:\nInstall the Beacon SDK: Run the following command. npm i @roll20-official/beacon-sdk\rInstall dependencies: Install the dependencies for the project. npm install\rStart the Vite server: After installing the project\u0026rsquo;s dependencies, you\u0026rsquo;ll need to start the Vite server. There are two ways to do this: a. Offline Development: This method will run the Vite server with the default port and environment set to development.\nnpm run dev\rOnce this code executes successfully, you can access the Vite server at http://localhost:5173.\nThis method is useful when you do not have access to the Roll20 website or would like to work on parts of your project that do not depend on a connection to the VTT or Roll20 Characters, such as working on styling, mocking up the environment, building Vue components, testing functionality, etc.\nIn development mode, you cannot save or access existing character data or use the Beacon SDK functions that depend on VTT or Roll20 Characters functionality, such as dice rolling and token manipulation.\nb. Sandbox Development: This method will run the Vite server with the port set to 7620 and the environment set to staging mode.\nnpm run sandbox\rThis command will build the SCSS files and then run the Vite server. This will set the server up for connecting to a VTT custom sheet sandbox as well as through the sandbox in Roll20 Characters.\nTo test your changes in the VTT custom sheet sandbox, you will need to add the following to the sheet.json editor in the game settings:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 }\rUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\r","date":"2024-04-07","id":17,"permalink":"/docs/gettingstarted/quick-start-sheet-template/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet","tags":[],"title":"Quick Start Sheet Template"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet\nThis sheet uses the same steps listed in the . Immediately after implementing those three steps, you\u0026rsquo;ll add the following step:\nRun a CI check: This will run several checks to ensure your code is as optimal as possible, including formatting, linting, type checking, unit tests, and end-to-end tests. npm run ci-check\rYou can think of this command as a sanity check you can leverage when pushing a big release for your sheet!\nUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\rFor type checking with TypeScript, use the following command: npm run type-check\rFor running unit tests with Vitest, use the following command: npm run test:unit\rTo open up and develop local end-to-end tests with Cypress, use the following command: npm run test:e2e:open:local\rFor running local end-to-end tests with Cypress, use the following command: npm run test:e2e:local\rTo run CDN-hosted end-to-end tests with Cypress, use the following command: npm run test:e2e\r","date":"2024-03-07","id":18,"permalink":"/docs/gettingstarted/example-patterns-sheet/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet","tags":[],"title":"Example Patterns Sheet"},{"content":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:\nHow to Contribute Reporting Bugs If you find a bug, please report it by opening an issue in the GitHub repository. Provide as much detail as possible to help us understand and reproduce the issue.\nSuggesting Features We welcome suggestions for new features. Please open an issue in the GitHub repository with a detailed description of the feature you would like to see and why you think it would be useful.\nCode Contributions Fork the Repository: Create a personal fork of the project on GitHub.\nClone the Fork: Clone your fork to your local machine.\ngit clone Create a Branch: Create a new branch for your work.\ngit checkout -b feature-or-bugfix-description\rMake Changes: Make your changes to the codebase. Follow the existing code style and conventions.\nRun Tests: Ensure that all tests pass before submitting your changes.\nnpm run ci-check\rCommit Changes: Commit your changes with a descriptive commit message.\ngit commit -m \u0026#34;Description of your changes\u0026#34;\rPush Changes: Push your changes to your fork.\ngit push origin feature-or-bugfix-description\rCreate a Pull Request: Open a pull request from your fork to the main repository. Provide a detailed description of your changes and why they should be merged.\nRunning Tests Unit Tests: Run unit tests with Vitest.\nnpm run test:unit\rEnd-to-End Tests: Run End-to-End tests with Cypress.\nnpm run test:e2e\rCode Style Follow the existing code style and conventions.\nUse ESLint for linting.\nnpm run lint\rFormat code with Prettier.\nnpm run format\rCommunication GitHub Issues: Use GitHub issues for bug reports, feature requests, and questions. Pull Requests: Use GitHub pull requests to submit your code contributions. Thank you for contributing to the Beacon SDK project!\n","date":"2024-02-07","id":19,"permalink":"/docs/about/how-to-contribute/","summary":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:","tags":[],"title":"How to Contribute"},{"content":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform. This sheet includes all the necessary code, assets, and metadata packaged together to be easily shared, tested, and eventually deployed on Roll20.\nWhen you\u0026rsquo;re ready to test and share a sheet on Roll20, you\u0026rsquo;d want to do it in such a way that others who might need it won\u0026rsquo;t have to set it up with a local dev environment.\nThat\u0026rsquo;s what the steps below help you achieve. In this guide, you can make your sheet available in the Roll20 Tabletop and Characters.\nSteps to Release a Test Sheet The following steps will aid you while releasing your sheet:\nCreate a Build Command:\nYou must have a build command that will produce the minified production-ready code. You can find an example in our Quickstart Package JSON. The build command must be able to create these exact files:\nsheet.js sheet.css host.css (optional) Add a local folder that contains fonts and images used in the sheet (optional). Add a sheet.json file:\nAdd a sheet.json file to your sheet folder to ensure the metadata for your sheet is up-to-date. For this, you can also find an example in our Quickstart Package JSON.\nCreate a Pull Request in the Community Sheet Repo:\nIn the Community Sheet Repo, create a pull request that must include the submission checklist from our previous process.\nSubmission Checklist When submitting a new or updated sheet to Roll20, it\u0026rsquo;s essential to follow the guidelines to ensure a smooth review and approval process.\nBelow is a checklist to help you prepare your submission.\nRequired The following are the required submission checklist items:\nThe pull request title clearly contains the name of the sheet I am editing. The pull request title clearly states the type of change I am submitting (New Sheet/New Feature/Bugfix/etc.). The pull request makes changes to files in only one sub-folder. The pull request does not contain changes to any JSON files in the translations folder (translation.json is permitted). New Sheet Details You must include the following information in your sheet:\nThe name of this game is: \u0026lt; THE AETHYRBLOOD CHRONICLES \u0026gt;. The publisher of this game is: \u0026lt; HAPHAZARD PROJECTS \u0026gt; The name of this game system/family is: \u0026lt; DPS System ('dice pool scales') \u0026gt; You must also check out the following:\nI have followed the Character Sheets Standards when building this sheet. I have authorization from the game\u0026rsquo;s publisher to make this an official sheet on Roll20 with their name attached. This game is not traditionally published, but a copy of the game rules can be purchased/downloaded/found at The Aethyrblood Chronicles Core Rule Book In the pull request comments, make sure to list the email addresses of the Roll20 users you\u0026rsquo;d like to have access to the sheet.\nWe can always grant more people access to the sheet after it is released. However, you can inform us in our Official Community Sheet Development Channels on Discord.\nApproval and Access:\nAfter you create a pull request, our team will approve it and add your sheet to the sheet selection in Roll20 Tabletop and Characters. We will then give only your Roll20 user and any others you\u0026rsquo;ve listed in the pull request comments access to the sheet in Roll20. This sheet will then be available for you and others with access to test it.\nReleasing a Final Version After you have released a test version of your sheet, you can follow the same steps as releasing a test version to make your sheet available to everyone. This time, the pull request comments state that it is a final release version.\nOnce you have created the pull request, our team will review the sheet functionality, code, and metadata for consistency, best practices, and overall system security. We reserve the right to reject any sheet that does not meet our terms of use or conflicts with our partnerships.\n","date":"2024-02-07","id":20,"permalink":"/docs/gettingstarted/releasing-a-sheet/","summary":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform.","tags":[],"title":"Releasing a Sheet"},{"content":"Link to valuable, relevant resources.\n","date":"2024-02-27","id":21,"permalink":"/docs/resources/","summary":"Link to valuable, relevant resources.","tags":[],"title":"Resources"},{"content":"","date":"2023-09-07","id":22,"permalink":"/docs/","summary":"","tags":[],"title":"Docs"},{"content":"","date":"2023-09-07","id":23,"permalink":"/privacy/","summary":"","tags":[],"title":"Privacy Policy"},{"content":"","date":"2023-09-07","id":24,"permalink":"/","summary":"","tags":[],"title":"Welcome to Beacon SDK"},{"content":"","date":"0001-01-01","id":25,"permalink":"/categories/","summary":"","tags":[],"title":"Categories"},{"content":"","date":"0001-01-01","id":26,"permalink":"/contributors/","summary":"","tags":[],"title":"Contributors"},{"content":"","date":"0001-01-01","id":27,"permalink":"/tags/","summary":"","tags":[],"title":"Tags"}] \ No newline at end of file +[{"content":"Well-thought-through product announcements will help increase feature awareness and engage users with new functionality. Just like sharing your public roadmap, it\u0026rsquo;s also a great way to let potential customers see that you\u0026rsquo;re constantly improving.\nFurther reading Read How to announce product updates and features ","date":"2023-09-07","id":0,"permalink":"/blog/example-post/","summary":"You can use blog posts for announcing product updates and features.","tags":[],"title":"Example Post"},{"content":"","date":"2023-09-07","id":1,"permalink":"/blog/","summary":"","tags":[],"title":"Blog"},{"content":"","date":"2024-06-07","id":2,"permalink":"/docs/gettingstarted/","summary":"","tags":[],"title":"Getting Started"},{"content":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.\nWhether you\u0026rsquo;re a game master (GM), a developer, or a player, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated VTT experiences.\nWhat is the Beacon SDK? The Beacon SDK (software development kit) is a toolset used to create digital character sheets on Roll20 for Roll20 Tabletop and Roll20 Characters.\nWhether you\u0026rsquo;re an experience developer, or just starting out, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated character sheet experiences.\nThe Beacon SDK also introduces a new way to develop characters sheets for Roll20. Beacon SDK allows you to connect your local development environment to sandboxes in Roll20 Characters and Roll20 Tabletop, giving you real-time updates as you develop.\nKey Features Character Sheets: Design and implement a web app character sheet with dynamic attributes and real-time updates. Local Development: Work where you are most comfortable and get real-time updates in sandboxes in Roll20. Testing Sheets: Release a testing sheet and give others special access to it before you push it live for everyone. Roll Mechanics: Integrate complex roll formulas and display roll results directly within the Roll20 Tabletop and Roll20 Characters. Legacy Support: Convert and integrate legacy macros and roll templates with the new Beacon architecture. Customization: Define custom actions, computed attributes and handle specific roll templates tailored to your game\u0026rsquo;s needs. Components Overview The Beacon SDK is composed of several key components:\nActions: Define and manage custom actions that can be triggered within the VTT. Handlers: Event handlers that process and respond to various VTT events and messages. Computed Attributes: Define dynamically computed attributes based on other attributes. Macro Attributes: Convert and manage legacy macro attributes for compatibility with the Beacon SDK. Rolls: Implement advanced roll mechanics and display results dynamically within the VTT. For a comprehensive overview of these components, view the components section.\nGetting Started To get started with the Beacon SDK, you must initialize the relay, set up your character sheets, and define the necessary actions, handlers, and computed attributes.\nThis documentation provides detailed guides and example sheets to help you through each step of the process.\nBy leveraging the Beacon SDK, you can create rich, interactive, fully integrated VTT experiences that enhance gameplay and streamline game management.\nWhether adapting existing character sheets or building new ones from scratch, the Beacon SDK offers the tools and flexibility to bring your digital character sheet to life.\n","date":"2024-05-07","id":3,"permalink":"/docs/gettingstarted/introduction/","summary":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.","tags":[],"title":"Introduction"},{"content":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.\nTo get started quickly with a boilerplate, you can download and start editing the Quick Start Example Sheet which already has the Beacon SDK installed, along with several recommanded patterns implemented in a Vue.js project.\nPrerequisites Before you can install the Beacon SDK, you\u0026rsquo;ll need to have the following:\nA local web development environment with a code editor. Node.js installed on your machine. If you don\u0026rsquo;t have Node.js installed, use the following steps in the official Node.js documentation. A javascript project, we recommand Vue.js but you can choose whichever you are more comfortable with. These steps use npm but you are free to use any package manager and framework you prefer.\nThe following steps will guide you in installing the Beacon SDK in your application:\nStep 1: Add the package to your project You can find the latest version of the package on the NPM registry.\nIn your project\u0026rsquo;s directory, run the following:\nnpm i @roll20-official/beacon-sdk\rThis will install the Beacon SDK package to your project\u0026rsquo;s package.json file.\nStep 2: Use the Beacon package in your project The Beacon package exports various utilities you can use in your application. The main one that needs to be setup to enable the connection between Beacon SDK and Roll20 is initRelay.\nIdeally you would want to call this when your sheet is initalizing, and it is the function where you will define sheet actions, computed values, and how the sheet will response to or send character data changes. visit the initRelay page for a more detailed breakdown.\nAdd the following to your project:\nimport { initRelay } from \u0026#39;@roll20/beacon-sdk\u0026#39;; const dispatch = initRelay({ handlers: { onInit: ({ character } ) =\u0026gt; { console.log(\u0026#39;sheet character\u0026#39;, character) }, onChange: () =\u0026gt; {}, onSettingsChange: () =\u0026gt; {}, onSharedSettingsChange: () =\u0026gt; {}, onTranslationsRequest: () =\u0026gt; {}, onDragOver: () =\u0026gt; {} }, // Refer to our advanced example sheet on how to setup actions and computed properties. actions: {}, computed: {} })\rinitRelay returns a dispatch function that allows you to call methods or send changes from the sheet to Roll20. Check out the page on dispatch to learn more about the different methods.\nStep 3: Settings up the Roll20 tabletop sandbox On the Roll20 website visit the custom sheet sandbox and create a new sandbox, we\u0026rsquo;ll use this sandbox to develop our sheet but we must set it up to listen to our local project\u0026rsquo;s web server.\nAfter creating a new sandbox, we\u0026rsquo;ll be taken to the sandbox details page, here you will find a collapseable section called Sheet.json Editor, opening this we can add the settings we need to connect to our project:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 // or the port of your webserver }\rAfter adding these changes make sure to click Save Changes at the bottom of the page. After which you can click Launch Game on the page to go into the game and start testing your sheet.\n","date":"2024-04-07","id":4,"permalink":"/docs/gettingstarted/installing-beacon/","summary":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.","tags":[],"title":"Installing Beacon"},{"content":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.\nCharacter sheet: A digital or printed page used to track a character\u0026rsquo;s attributes, abilities, and other relevant information in a role-playing game.\nComputed Property: Properties that have both get and set methods, which can be dynamically calculated.\nConvertLegacyMacroAttributes: A function to handle mapping legacy macro attributes to the new Beacon Sheet format.\nDispatch: A set of functions enabling the sheet to send commands back to the VTT.\nGM (Game Master): The person who runs the game, controls the NPCs \u0026amp; the story, and provides challenges for the players.\nHandler: Methods that act as event handlers to process messages from the host.\nInitRelay: Function to initialize the SDK relay, setting up communication between the host and the character sheet.\nMacro: A script that automates repetitive tasks in the VTT.\nRoll Template: A predefined format for displaying the results of a dice roll.\nToken: A visual representation of a character or object on the virtual tabletop, with various properties like position, size, and attributes.\nVTT (Virtual Tabletop): An online platform that allows players to play tabletop role-playing games over the internet.\nValidationMessage: A message displayed when an input value does not meet specific criteria.\nQuantum Roll: A system that ensures the fairness and authenticity of dice rolls in the VTT by using cryptographic methods.\n","date":"2024-03-07","id":5,"permalink":"/docs/about/glossary/","summary":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.","tags":[],"title":"Glossary"},{"content":"\rQ: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level. There are a number of benefits to the Beacon SDK if you know how to build web applications. If you don\u0026rsquo;t know how to set up your own local environment, than the Beacon SDK might now be the first place you should start. Learn more about sheet development using the custom sheet.\nIf you have the skill to take advantage of the Beacon SDK, there are a number of improvements that will make it much easier to build characters sheets.\nFirst, the Beacon SDK allows you to develop locally and preview your changes automatically in the Roll20 Tabletop and Roll20 Character sandboxes. This means that you don\u0026rsquo;t have to keep uploading your HTML and CSS into the custom sheet to see your changes.\nNext, it allows you to develop your character sheet with all the power of JavaScript frameworks and modern web development libraries. In our example sheets, we use Vue.js, but you are free to use whatever you are most comfortable with. Also, you could use something like Cypress to create automated testing. That\u0026rsquo;s what we use in our Beacon sheets.\nLastly, the Beacon SDK makes it much easier for a web developer who knows JSON and Javascript to access character data and manage attributes on the character. If you\u0026rsquo;re familiar with the custom sheet, you no longer have to deal with sheet workers to get the data you need for a character. Also, the Beacon SDK introduces nested and computed attributes that make complex data models for your character sheet easier to create and maintain.\nQ: I\u0026rsquo;m not really a web developer, should I use Beacon or the custom sheet to make a my own character sheet?\rThat is up to you and your comfort level. If you\u0026rsquo;re looking to learn more about web development, building a character sheet with the Beacon SDK is a great way to level up your skills. What you learn during this process can be taken with you into any other web development project you work on in the future.\nIf setting up your own development environment is too intimidating for you, than it might be easier for you to start with the custom sheet and to go from there.\nQ: I\u0026rsquo;m interested in using Beacon, but I don\u0026rsquo;t know the basics of setting up a local environment. Where can I go to learn more about web development?\rYou can start learning how to build a local development environment by reading or watching the following tutorials. Note: these are not tutorials that we\u0026rsquo;ve produced, but we have found them helpful in getting started with web development.\nhttps://learn.microsoft.com/en-us/windows/dev-environment/javascript/vue-on-wsl https://www.youtube.com/watch?v=WPqXP_kLzpo Q: Now that Roll20 has acquired Demiplane, will you continue to support character sheets built on Beacon?\rThe recent acquisition of Demiplane brings exciting new opportunities for character sheets and compendiums on Roll20. At the same time, we are fully committed to supporting the Beacon SDK and character sheets that are built in our new advanced sheets ecosystem on Roll20. In fact, we believe that the Beacon SDK will be a key component of our future plans for Demiplane integration. In addition, our new D\u0026amp;D 2024 sheet is built on top of the Beacon SDK, and we will continue to utilize it to build first-class experiences on Roll20.\nIn short, you can rest assured that the Beacon SDK is an important tool in our toolbox moving forward.\nQ: What are actions in the context of Beacon?\rActions are methods executed in the chat log of Roll20 Tabletop or Roll20 Characters, often used for rolls triggered from macros or chat buttons. They are defined in the sheet\u0026rsquo;s configuration and can interact with character data. Q: How are computed properties used in Roll20?\rComputed properties are attributes which are accessible by users of your character sheet. They are usable in macros to create custom rolls or common actions for each character. Computed properties can represent derived values or complex calculations based on character data. Q: What is the dispatch function used for?\rThe dispatch function provides methods for sending commands from the character sheet back to Roll20, including updating character data, performing actions, and interacting with the interface. Q: What are roll buttons, and how do they work?\rRoll buttons are HTML elements with specific attributes that execute designated sheet actions when clicked. They can pass arguments to the action method and are commonly used for triggering rolls from the character sheet. Q: How are legacy attributes handled in Beacon?\rBeacon gives you the ability to transition your legacy attributes to new attributes you create in Beacon. This means that when a user updates their sheet to the new Beacon sheet, their legacy attribute can be mapped to Beacon attributes using the convertLegacyMacroAttributes function. Sheet developers can define how to handle legacy attribute values to ensure compatibility with existing macros. Q: What is the purpose of the query function?\rThe query function displays a SweetAlert2 prompt to users and returns the results along with any errors. It is commonly used for interactive prompts or confirmations within the VTT interface. Q: How are tokens managed in the VTT?\rTokens represent characters or objects on Roll20 Tabletop (VTT). Functions like getTokens, updateTokensByCharacter, and addToTracker are used to retrieve token information, update token data, and manage tokens in the turn tracker. Q: What is the role of the convertLegacyMacroAttributesArgs type?\rThe convertLegacyMacroAttributesArgs type defines the arguments used for handling legacy macro attributes. It includes the attribute name, character ID, and character data needed for mapping legacy attributes to the new sheet structure. ","date":"2024-01-07","id":6,"permalink":"/docs/about/faq/","summary":"Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level.","tags":[],"title":"FAQ"},{"content":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games. initRelay is the main method that initializes the Beacon SDK communication channel with the host (Either the Roll20 tabletop or in Roll20 Characters). It should be initialized as soon as the sheet loads, as its onInit handler will be the earliest we can get access to that character\u0026rsquo;s data.\ninitRelay({ handlers: { onInit, onChange, onSettingsChange, onSharedSettingsChange, onTranslationsRequest, onDragOver, onDropOver, }, actions: {}, computed: {}, convertLegacyMacroAttributes, handleLegacyRollTemplates }): Promise\u0026lt;Dispatch\u0026gt;\rThese components are crucial for handling actions, computations, macros, and rolls. This overview provides a high-level summary of each section, helping you understand their roles and how they integrate within the SDK.\nActions\rActions define specific operations that can be performed by characters within the VTT. These operations can range from simple tasks like rolling a dice to more complex interactions such as casting spells or activating abilities.\nHandlers\rHandlers are event listeners that manage communication between the VTT and the character sheet. They respond to various events, such as changes in character attributes or settings, and trigger appropriate actions or updates.\nComputed\rComputed properties are dynamic values derived from other character attributes. They allow for the creation of complex, calculated attributes that automatically update when their dependencies change.\nMacro Attributes\rMacro attributes handle the conversion of legacy macro attributes to the new format used in the Beacon SDK. This ensures compatibility with older character sheets and macros, allowing for a smooth transition to the new system.\nRolls\rThe Rolls component allows for advanced dice-rolling mechanics within the VTT. It supports both simple and complex rolls, providing flexibility in how roll results are displayed and computed.\nDispatch\rThe dispatch object provides methods for sending commands from the character sheet back to the host. Except when specified every method returns a promise.\n","date":"2024-06-07","id":7,"permalink":"/docs/components/initrelay/","summary":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games.","tags":[],"title":"InitRelay"},{"content":"Actions are a collection of methods that can be executed from the VTT. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions.\nactions: { [name: string]: { method: (props: { dispatch: Dispatch, character: Character, messageId?: string, rolls?: RollResults }, ...args: string[]): void | Promise\u0026lt;void\u0026gt; } }\rActions are passed into the initRelay function in an object, where the keys are the unique names of the actions, and the values are objects containing a method property (additional metadata fields may be added to this object in the future).\nThe method receives a props object containing the following properties:\ndispatch: A Dispatch object. character: The data of the character performing the action. Currently, the action will not receive the character’s bio or GM notes, regardless of whether the player has access to those fields. messageId (optional): A unique ID for an existing chat message. It\u0026rsquo;s included in actions triggered from chat buttons to provide context for the original roll. rolls (optional): Included when action is triggered from a chat button. Contains the roll results of the original roll. These functions can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these functions can be synchronous or asynchronous and do not return a value.\n","date":"2024-05-07","id":8,"permalink":"/docs/components/actions/","summary":"Actions are a collection of methods that can be executed from the VTT. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button.","tags":[],"title":"Actions"},{"content":"","date":"2024-04-07","id":9,"permalink":"/docs/components/","summary":"","tags":[],"title":"Components"},{"content":"Sheet authors define computed properties that are accessed by the host. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.\ncomputed: { [name: string]: { tokenBarValue?: boolean, description?: string, get: ( props: { character: Character }, ...args: string[] ) =\u0026gt; ComputedResult, set?: ( props: { character: Character, dispatch: Dispatch }, ...args: string[] ) =\u0026gt; void | Promise\u0026lt;void\u0026gt; } }\rComputed properties are passed into the initRelay function in an object where the keys are the names of the properties, and the value should be an object containing the following:\nget (required): It receives character data along with any number of string parameters and should return the computed value. tokenBarValue (optional): A boolean indicating whether this property should be available for use in token bars. description (optional): A text value indicating what this computed summary property represents. set (optional): This method receives character data and a dispatch, along with string arguments. This method does not need to return a value. Setting tokenBarValue to true will make the property available to use as a value for token bars. To work correctly, the get function must not rely on any additional arguments and must return either a simple value (a string or number) or an object: { current: number | string, max: number | string }\rIf the set function is omitted, the value will not be editable from the token itself. If defined, set methods will receive one string argument, which is whatever the user types into the input for modifying the bar. ","date":"2024-04-07","id":10,"permalink":"/docs/components/computed/","summary":"Sheet authors define computed properties that are accessed by the host. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.","tags":[],"title":"Computed"},{"content":"Handler functions allow the sheet to respond to messages from the host. The handlers argument requires the following methods:\nonInit The onInit function provides the initial set of data to the sheet.\nonInit(e: { character: Character, settings: { colorTheme: string, language: string, gm: boolean, owned: boolean, settingsSheet: boolean, headless: boolean, sandbox: boolean, campaignId: number, environment: string, currentUserId: string, singleSheet: boolean }, sharedSettings: {}, compendiumDropData: { pageName: string, categoryName: string, expansion: number } }, dispatch: Dispatch): void;\rThe event object contains the following:\ncharacter: The primary character for this sheet. settings: Campaign and character-specific settings. sharedSettings: Data shared between all characters in this campaign. compendiumDropData: Populated when the character sheet is created from a compendium entry such as a creature or NPC. This function may be called multiple times during development in the sheet sandbox as part of hot reloads.\nonChange onChange is called whenever a character’s data is changed on the host’s end. The event object contains a partial character with only the character’s ID and the changed data. This could be the character’s bio, GM notes, or attributes (only the changed attributes).\nonChange(e: { character: Partial\u0026lt;Character\u0026gt; }, dispatch: Dispatch): void;\ronSettingsChange onSettingsChange is called when either the VTT’s color theme is changed, or when the current player’s ownership of the primary character changes.\nonSettingsChange(e: { colorTheme: string, owned: boolean }, dispatch: Dispatch): void;\ronSharedSettingsChange onSharedSettingsChange is called when someone changes a shared setting in the VTT.\nonSharedSettingsChange({ settings: { [key: string]: any } }): void;\ronTranslationsRequest onTranslationsRequest is called before the relay is fully initialized and returns the translation JSON data corresponding to the two-letter language argument.\nonTranslationsRequest(language: string): { [key: string]: string };\ronDragOver (optional) onDragOver is called when a compendium item from the compendium tab is dragged over the iframe window containing the character sheet.\nCoordinates of the drag are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch. If the item is moved outside of the iframe, dragData and coordinates are null.\nonDragOver(e: { coordinates: { top: number, left: number }, dragData: { pageName: string, categoryName: string, expansionId: number } | null }, dispatch: Dispatch): void\ronDropOver (optional) onDropOver is called when a compendium item from the compendium tab is dropped over the iframe window containing the character sheet.\nCoordinates of the drop are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch.\nonDropOver(e: { coordinates: { top: number, left: number }, dropData: { pageName: string, categoryName: string, expansionId: number } }, dispatch: Dispatch): void\r","date":"2024-03-07","id":11,"permalink":"/docs/components/handlers/","summary":"Handler functions allow the sheet to respond to messages from the host. The handlers argument requires the following methods:\nonInit The onInit function provides the initial set of data to the sheet.","tags":[],"title":"Handlers"},{"content":"","date":"2024-02-07","id":12,"permalink":"/docs/about/","summary":"","tags":[],"title":"About"},{"content":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.\nThis scenario commonly arises when transitioning from an existing legacy sheet to a Beacon sheet. During such transitions, it\u0026rsquo;s possible that the attributes called from the legacy macro may not align with the structure of attributes in the Beacon Sheet.\nThe convertLegacyMacroAttributes function serves as a pivotal tool, empowering Sheet Developers to determine the mapping strategy for legacy attributes to the new Beacon Sheet.\nconvertLegacyMacroAttributes This function is defined during the initial SDK initialization process and is invoked by the host when it encounters a failure in locating an attribute\u0026rsquo;s value.\nconvertLegacyMacroAttributes: (messages: convertLegacyMacroAttributesArgs) =\u0026gt; {}: any\rAdvanced sheet macros typically first search through the defined computed properties before resorting to the convertLegacyMacroAttributes function.\nThe function\u0026rsquo;s purpose is to return a value that will be substituted in the macro. However, it grants Sheet Developers the autonomy to devise their preferred approach for handling legacy attribute values.\n","date":"2024-02-07","id":13,"permalink":"/docs/components/handling-legacy-macro-attributes/","summary":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.","tags":[],"title":"Handling Legacy Macro Attributes"},{"content":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development. Basic and advanced sheet examples. Improvements Detailed comments added to example files for better understanding. Support for complex roll templates and rich sheet actions. Bug Fixes N/A (initial release). Version 2.0.0 Release Date: 2023-03-17\nNew Features SCSS support for styling. Integration with Roll20 and VTT. Mock Relay for offline development. Improvements TypeScript integration for type checking and improved development experience. Unit testing with Vitest. End-to-End testing with Cypress. Bug Fixes N/A (initial release). ","date":"2024-01-07","id":14,"permalink":"/docs/about/changelog/","summary":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development.","tags":[],"title":"Changelog"},{"content":"The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the host. Vist the Roll20 help center to learn more about Roll20\u0026rsquo;s Dice Rolling system\nThe most command way to trigger a dice roll is through the dispatch object returned from the initRelay, but it could also be called from actions:\ndispatch.roll({ rolls: { [rollName: string]: string } // Ex. {attack: \u0026#39;1d20+4\u0026#39;, damage: `3d6+2`} messageId?: string }): Promise\u0026lt;{messageId: string, results: RollResults }\u0026gt;\rThe roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings.\nmessageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResults. The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.\nThe dispatch roll method and the actions roll section do not post to the chat, instead they will return a promise which will resolve to the roll results and the message id.\nPosting A Roll to the Chat The roll method does not send or post any data to the chat on it\u0026rsquo;s own. We instead have to use dispatch\u0026rsquo;s post method to send our roll results along with any other content to the chat.\ndispatch.post({ characterId: \u0026#39;-O0KZhMTxLkn2HArFj8f\u0026#39;, content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`, })\rAdditional Roll Posting Options data-rollname The data-rollname attribute tells the host that this HTML element is displaying the result of a roll.\n\u0026lt;span data-rollname=\u0026#34;attack\u0026#34;\u0026gt;\u0026lt;/span\u0026gt;\rThe host will both add the Quantum Roll signature element and replace the contents of the element with the result from the roll.\nThis is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the host to display the result.\ndata-computed Tagging an element with both a data-rollname and a data-computed=\u0026quot;true\u0026quot; tells the host that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result.\n\u0026lt;span data-rollname=\u0026#34;complex\u0026#34; data-computed=\u0026#34;true\u0026#34;\u0026gt;25\u0026lt;/span\u0026gt;\rThe host will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic.\nRoll Buttons Roll buttons are interactive elements that trigger sheet actions, such as damage rolls, when clicked. These buttons use the data-sheet-action attribute to specify the action to be executed.\n\u0026lt;button data-sheet-action=\u0026#34;damage\u0026#34; data-args=\u0026#34;arg1:arg2\u0026#34;\u0026gt;Click Me\u0026lt;/button\u0026gt;\rAdditional arguments can be provided using the data-args attribute, and the character, messageId, and original rolls will be included automatically.\nRolls Results Format type RollResults = { [name: string]: { expression: string //The original expression (i.e. 1d20+3d6) rollName: string //The name of the roll results: { //The results of the roll(s) expression: string dice?: number[] // result: number //The final result of the roll rolls?: { //Detailed results of each part of the roll (i.e. 3d6) sides: number //The type of die for this part of the roll (i.e. 6) dice: number //The number of dice (i.e. 3) results: number[] //The result of each die (i.e. [4, 2, 5]) }[] } } }\r","date":"2024-01-07","id":15,"permalink":"/docs/components/rolls/","summary":"The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed.","tags":[],"title":"Rolls"},{"content":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host. Except when specified every method below will return a promise.\nupdate dispatch.update({ options: { overwrite?: boolean } character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rThe update method sends character changes to the host (Roll20 Tabletop or Roll20 Characters) to be persisted. The partial character passed in here must contain the character\u0026rsquo;s id, and can contain any combination of the attributes, bio, and gmNotes properties. When updating a character’s attributes, only include those attributes that have changed.\nupdateCharacter dispatch.updateCharacter({ character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rLike the update method, updateCharacter sends character changes to the host page (Roll20 Tabletop or Roll20 Characters) to be persisted. However, this method takes a full set of character attributes as the character argument, and automatically computes the diff with existing character attributes, so that only changed attributes are sent to the data store.\nroll dispatch.roll({ rolls: { [rollName: string]: string } // Ex. {attack: \u0026#39;1d20+4\u0026#39;, damage: `3d6+2`} messageId?: string }): Promise\u0026lt;{messageId: string, results: RollResults }\u0026gt;\rThe roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings. messageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResult (see Types). The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.\npost dispatch.post({ characterId: string, messageId?: string, content: string, options?: { whisper?: \u0026#39;gm\u0026#39;, secret?: boolean, } }): Promise\u0026lt;string\u0026gt;\rpost posts a message to chat, either creating a new message or overwriting an existing one. It requires a character id and message content, a string containing either plain text or HTML to be posted. The method also accepts an options object. Currently, only whisper and secret are supported, the only valid value for whisper is gm, which will send the message as a whisper to the gm. The secret option is ignored unless whisper is also set, toggling to true will cause the message to not be visible to the controlling player. Like roll, messageId can be provided to update an existing chat message, but if omitted the method will generate a new messageId and post a new chat message. The method returns the messageId.\nquery dispatch.query(options: Swal2Options): { isConfirmed: boolean, isDenied: boolean, isDismissed: boolean, value?: string | number, dismiss?: \u0026#34;cancel\u0026#34; | \u0026#34;backdrop\u0026#34; | \u0026#34;close\u0026#34; | \u0026#34;esc\u0026#34; | \u0026#34;timer\u0026#34;, errors?: string[], }: Promise\u0026lt;{ results: { isConfirmed: boolean isDenied: boolean isDismissed: boolean value: string | number dismiss: string }, errors: [string] }\u0026gt;\rThe query method takes an options object and uses them to display a SweetAlert2 prompt to the user. It returns the results of the query as a SweetAlertResult, along with any errors encountered. The options work exactly as described in the documentation for SweetAlert2, however not all options are allowed. Here is a list of the allowed options:\ntitleText, text, iconColor, input, width, padding, background, position, grow, timer, timerProgressBar, showConfirmButton, showDenyButton, showCancelButton, ariaLabel, confirmButtonText, denyButtonText, cancelButtonText, confirmButtonAriaLabel, confirmButtonColor, cancelButtonAriaLabel, cancelButtonColor, denyButtonAriaLabel, denyButtonColor, reverseButtons, showCloseButton, closeButtonAriaLabel, returnInputValueOnDeny, imageUrl, imageWidth, imageHeight, imageAlt, inputLabel, inputPlaceholder, inputValue, inputOptions, inputPlaceholder, inputAutoTrim, inputAttributes, validationMessage, progressSteps, currentProgressStep, progressStepsDistance.\nPerform dispatch.perform({ characterId: string, action: string, args: string[], }): Promise\u0026lt;void\u0026gt;;\rperform executes the specified action on behalf of the character (designated by the character id), passing in args to the action method. This method can perform actions on behalf of any character, even a character that the sheet does not have data for.\ngetComputed dispatch.getComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rsee setComputed below\nsetComputed dispatch.setComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rgetComputed and setComputed are both nearly identical in how they are called, taking a character id and a property with the name of the computed property you wish to get or set, and an array of string args. Both methods return a promise that resolves with the computed value.\ncompendiumRequest dispatch.compendiumRequest({ query: string }): Promise\u0026lt;{ data: Object errors: Array\u0026lt;Error\u0026gt; extensions: Record\u0026lt;string, any\u0026gt; }\u0026gt;\rcompendiumRequest executes an AJAX request to the compendium service’s graphQL endpoint. It takes in a graphQL query string written according to the Compendium service’s schema. The query string does not need to include the ruleSystem shortName as this is set automatically according to the campaign override or sheet.json value in the Roll20 Tabletop.\ndebouncedCompendiumRequest dispatch.debouncedCompendiumRequest({ query: string }): Promise\u0026lt;{ data: Object }\u0026gt;\rLike compendiumRequest, except that calls to this method are automatically debounced (at 100ms) and grouped together into a single request to the compendium service. Note that this method will only return the requested data, it does not return errors or extensions.\ngetTokens dispatch.getTokens({ characterId: string }): Promise\u0026lt;{ selected: Token[], tokens: Token[] }\u0026gt;: Promise\u0026lt;{ selected: Token[] tokens: Token[] }\u0026gt;\rgetTokens requires a character id string and returns information about tokens on the user’s current page. The return value contains two arrays of tokens. The tokens array contains all tokens on the current page that represent the character whose id was provided to the method. The selected array contains any tokens that are currently selected, regardless of which character they represent. The returned token objects contain all of the token attributes available to the API, you can find documentation here and here.\naddToTracker dispatch.addToTracker({ tokenId?: string, custom?: { name: string img?: string } formula?: string value: string | number }): Promise\u0026lt;void\u0026gt;\raddToTracker adds or updates a single item in the turn tracker. Passing in a tokenId will add the specified token to the tracker, while passing in custom with a name and an optional image url (img) will add a custom item, not connected to any character or token. A round calculation string can be added via the optional formula parameter. value is the initiative number for the item.\naddActionsToHost dispatch.addActionsToHost({ sheetAction?: { characterId: string action: string args?: string[] } action?: string locations?: [\u0026#39;macroBar\u0026#39;] | [\u0026#39;tokenActionBar\u0026#39;] | [\u0026#39;macroBar\u0026#39;, \u0026#39;tokenActionBar\u0026#39;] actionId?: string name: string requestId?: string }): void\raddActionsToHost adds a specific action(macro) to an area of the Roll20 Tabletop UI; either the macrobar or the token action bar. Either sheetAction or action can be passed in but not both at the same time. The sheetAction arg should be passed in when an the action is to designated to a character. While the action arg should be passed in when the action is more generic.\ngetActions dispatch.getActions({ args: { characterId?: string } }): Promise\u0026lt;{ actions?: {} | { [id: string]: ActionFromHost } }\u0026gt;\rgetActions gets a specific character’s actions(macro).\nsetContainerSize dispatch.setContainerSize({ args: { width?: number height?: number } }): Promise\u0026lt;void\u0026gt;\rsetContainerSize updates the size of the container which holds the sheet shared settings. Returns a promise that can be awaited. This can be used in conjunction with something like the ResizeSensor event listener from npm: css-element-queries to automatically resize the container on the host.\nupdateTokensByCharacter dispatch.updateTokensByCharacter({ args: { characterId: string token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByCharacter updates a particular character’s default token as well as all existing tokens representing that character. Returns a promise that can be awaited.\nupdateTokensByIds dispatch.updateTokensByIds({ args: { tokenIds: array of ids as strings token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByIds updates a single or several tokens. Returns a promise that can be awaited.\nautoLinkText dispatch.autoLinkText({ args: { text: string } }): Promise\u0026lt;string\u0026gt;\rautoLinkText goes through the text to find handout names between square brackets and converts them into links with the handoutID. For example in a game with a handout named Dragon, passing in the text string of this is a [Dragon] to autoLinkText returns something similar to this is a \u0026lt;a href=\u0026quot;https://journal.roll20.net/8je02j0kd02k\u0026quot;\u0026gt;Dragon\u0026lt;/a\u0026gt;.\nopenDialogFromLink dispatch.openDialogFromLink({ args: { urlString: string } }): void\ropenDialogFromLink opens the supplied urlString through the Roll20 Tabletop.\nIf the url is for a handout, it will open the corresponding handout in the campaign. This will also check if the user opening the link has access to the handout. If the url is for a compendium, it will open a pop up to the compendium page, it will also check to ensure the user has access to view the page. If the url is for an external page, a confirmation pop up will display to warn the user that the link is for an external site and open a new tab in their main window if confirmed. ","date":"2023-09-07","id":16,"permalink":"/docs/components/dispatch/","summary":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host.","tags":[],"title":"Dispatch"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet\nUse the following steps to get started:\nInstall the Beacon SDK: Run the following command. npm i @roll20-official/beacon-sdk\rInstall dependencies: Install the dependencies for the project. npm install\rStart the Vite server: After installing the project\u0026rsquo;s dependencies, you\u0026rsquo;ll need to start the Vite server. There are two ways to do this: a. Offline Development: This method will run the Vite server with the default port and environment set to development.\nnpm run dev\rOnce this code executes successfully, you can access the Vite server at http://localhost:5173.\nThis method is useful when you do not have access to the Roll20 website or would like to work on parts of your project that do not depend on a connection to the VTT or Roll20 Characters, such as working on styling, mocking up the environment, building Vue components, testing functionality, etc.\nIn development mode, you cannot save or access existing character data or use the Beacon SDK functions that depend on VTT or Roll20 Characters functionality, such as dice rolling and token manipulation.\nb. Sandbox Development: This method will run the Vite server with the port set to 7620 and the environment set to staging mode.\nnpm run sandbox\rThis command will build the SCSS files and then run the Vite server. This will set the server up for connecting to a VTT custom sheet sandbox as well as through the sandbox in Roll20 Characters.\nTo test your changes in the VTT custom sheet sandbox, you will need to add the following to the sheet.json editor in the game settings:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 }\rUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\r","date":"2024-04-07","id":17,"permalink":"/docs/gettingstarted/quick-start-sheet-template/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet","tags":[],"title":"Quick Start Sheet Template"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet\nThis sheet uses the same steps listed in the . Immediately after implementing those three steps, you\u0026rsquo;ll add the following step:\nRun a CI check: This will run several checks to ensure your code is as optimal as possible, including formatting, linting, type checking, unit tests, and end-to-end tests. npm run ci-check\rYou can think of this command as a sanity check you can leverage when pushing a big release for your sheet!\nUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\rFor type checking with TypeScript, use the following command: npm run type-check\rFor running unit tests with Vitest, use the following command: npm run test:unit\rTo open up and develop local end-to-end tests with Cypress, use the following command: npm run test:e2e:open:local\rFor running local end-to-end tests with Cypress, use the following command: npm run test:e2e:local\rTo run CDN-hosted end-to-end tests with Cypress, use the following command: npm run test:e2e\r","date":"2024-03-07","id":18,"permalink":"/docs/gettingstarted/example-patterns-sheet/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet","tags":[],"title":"Example Patterns Sheet"},{"content":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:\nHow to Contribute Reporting Bugs If you find a bug, please report it by opening an issue in the GitHub repository. Provide as much detail as possible to help us understand and reproduce the issue.\nSuggesting Features We welcome suggestions for new features. Please open an issue in the GitHub repository with a detailed description of the feature you would like to see and why you think it would be useful.\nCode Contributions Fork the Repository: Create a personal fork of the project on GitHub.\nClone the Fork: Clone your fork to your local machine.\ngit clone Create a Branch: Create a new branch for your work.\ngit checkout -b feature-or-bugfix-description\rMake Changes: Make your changes to the codebase. Follow the existing code style and conventions.\nRun Tests: Ensure that all tests pass before submitting your changes.\nnpm run ci-check\rCommit Changes: Commit your changes with a descriptive commit message.\ngit commit -m \u0026#34;Description of your changes\u0026#34;\rPush Changes: Push your changes to your fork.\ngit push origin feature-or-bugfix-description\rCreate a Pull Request: Open a pull request from your fork to the main repository. Provide a detailed description of your changes and why they should be merged.\nRunning Tests Unit Tests: Run unit tests with Vitest.\nnpm run test:unit\rEnd-to-End Tests: Run End-to-End tests with Cypress.\nnpm run test:e2e\rCode Style Follow the existing code style and conventions.\nUse ESLint for linting.\nnpm run lint\rFormat code with Prettier.\nnpm run format\rCommunication GitHub Issues: Use GitHub issues for bug reports, feature requests, and questions. Pull Requests: Use GitHub pull requests to submit your code contributions. Thank you for contributing to the Beacon SDK project!\n","date":"2024-02-07","id":19,"permalink":"/docs/about/how-to-contribute/","summary":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:","tags":[],"title":"How to Contribute"},{"content":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform. This sheet includes all the necessary code, assets, and metadata packaged together to be easily shared, tested, and eventually deployed on Roll20.\nWhen you\u0026rsquo;re ready to test and share a sheet on Roll20, you\u0026rsquo;d want to do it in such a way that others who might need it won\u0026rsquo;t have to set it up with a local dev environment.\nThat\u0026rsquo;s what the steps below help you achieve. In this guide, you can make your sheet available in the Roll20 Tabletop and Characters.\nSteps to Release a Test Sheet The following steps will aid you while releasing your sheet:\nCreate a Build Command:\nYou must have a build command that will produce the minified production-ready code. You can find an example in our Quickstart Package JSON. The build command must be able to create these exact files:\nsheet.js sheet.css host.css (optional) Add a local folder that contains fonts and images used in the sheet (optional). Add a sheet.json file:\nAdd a sheet.json file to your sheet folder to ensure the metadata for your sheet is up-to-date. For this, you can also find an example in our Quickstart Package JSON.\nCreate a Pull Request in the Community Sheet Repo:\nIn the Community Sheet Repo, create a pull request that must include the submission checklist from our previous process.\nSubmission Checklist When submitting a new or updated sheet to Roll20, it\u0026rsquo;s essential to follow the guidelines to ensure a smooth review and approval process.\nBelow is a checklist to help you prepare your submission.\nRequired The following are the required submission checklist items:\nThe pull request title clearly contains the name of the sheet I am editing. The pull request title clearly states the type of change I am submitting (New Sheet/New Feature/Bugfix/etc.). The pull request makes changes to files in only one sub-folder. The pull request does not contain changes to any JSON files in the translations folder (translation.json is permitted). New Sheet Details You must include the following information in your sheet:\nThe name of this game is: \u0026lt; THE AETHYRBLOOD CHRONICLES \u0026gt;. The publisher of this game is: \u0026lt; HAPHAZARD PROJECTS \u0026gt; The name of this game system/family is: \u0026lt; DPS System ('dice pool scales') \u0026gt; You must also check out the following:\nI have followed the Character Sheets Standards when building this sheet. I have authorization from the game\u0026rsquo;s publisher to make this an official sheet on Roll20 with their name attached. This game is not traditionally published, but a copy of the game rules can be purchased/downloaded/found at The Aethyrblood Chronicles Core Rule Book In the pull request comments, make sure to list the email addresses of the Roll20 users you\u0026rsquo;d like to have access to the sheet.\nWe can always grant more people access to the sheet after it is released. However, you can inform us in our Official Community Sheet Development Channels on Discord.\nApproval and Access:\nAfter you create a pull request, our team will approve it and add your sheet to the sheet selection in Roll20 Tabletop and Characters. We will then give only your Roll20 user and any others you\u0026rsquo;ve listed in the pull request comments access to the sheet in Roll20. This sheet will then be available for you and others with access to test it.\nReleasing a Final Version After you have released a test version of your sheet, you can follow the same steps as releasing a test version to make your sheet available to everyone. This time, the pull request comments state that it is a final release version.\nOnce you have created the pull request, our team will review the sheet functionality, code, and metadata for consistency, best practices, and overall system security. We reserve the right to reject any sheet that does not meet our terms of use or conflicts with our partnerships.\n","date":"2024-02-07","id":20,"permalink":"/docs/gettingstarted/releasing-a-sheet/","summary":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform.","tags":[],"title":"Releasing a Sheet"},{"content":"Link to valuable, relevant resources.\n","date":"2024-02-27","id":21,"permalink":"/docs/resources/","summary":"Link to valuable, relevant resources.","tags":[],"title":"Resources"},{"content":"","date":"2023-09-07","id":22,"permalink":"/docs/","summary":"","tags":[],"title":"Docs"},{"content":"","date":"2023-09-07","id":23,"permalink":"/privacy/","summary":"","tags":[],"title":"Privacy Policy"},{"content":"","date":"2023-09-07","id":24,"permalink":"/","summary":"","tags":[],"title":"Welcome to Beacon SDK"},{"content":"","date":"0001-01-01","id":25,"permalink":"/categories/","summary":"","tags":[],"title":"Categories"},{"content":"","date":"0001-01-01","id":26,"permalink":"/contributors/","summary":"","tags":[],"title":"Contributors"},{"content":"","date":"0001-01-01","id":27,"permalink":"/tags/","summary":"","tags":[],"title":"Tags"}] \ No newline at end of file From a297719b305f138f67d7dd1859ff1208f6bb2b27 Mon Sep 17 00:00:00 2001 From: alicekb Date: Wed, 26 Jun 2024 16:34:51 -0400 Subject: [PATCH 2/3] CSC: Update Component pages --- content/docs/components/actions.md | 29 ++-- content/docs/components/computed.md | 47 +++--- content/docs/components/handlers.md | 138 ++++++++-------- content/docs/components/roll.md | 6 +- hugo_stats.json | 6 - public/docs/components/actions/index.html | 42 +++-- public/docs/components/computed/index.html | 47 +++--- public/docs/components/handlers/index.html | 180 +++++++++++---------- public/docs/components/index.xml | 6 +- public/docs/components/rolls/index.html | 6 +- public/index.xml | 6 +- public/search-index.json | 2 +- 12 files changed, 278 insertions(+), 237 deletions(-) diff --git a/content/docs/components/actions.md b/content/docs/components/actions.md index 7297370..635491b 100644 --- a/content/docs/components/actions.md +++ b/content/docs/components/actions.md @@ -16,28 +16,35 @@ seo: noindex: false # false (default) or true --- -Actions are a collection of methods that can be executed from the VTT. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions. +```typescript +initRelay({ + //...other methods + actions: {}, +}): Promise +``` + +Actions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions. -```javascript +```typescript actions: { - [name: string]: { + [name: string]: { method: (props: { - dispatch: Dispatch, - character: Character, - messageId?: string, - rolls?: RollResults - }, ...args: string[]): void | Promise - } + dispatch: Dispatch, + character: Character, + messageId?: string, + rolls?: RollResults + }, ...args: string[]): void | Promise + } } ``` Actions are passed into the `initRelay` function in an object, where the keys are the unique names of the actions, and the values are objects containing a `method` property (additional metadata fields may be added to this object in the future). -The `method` receives a `props` object containing the following properties: +The action's `method` receives a `props` object from the host containing the following properties: - `dispatch`: A `Dispatch` object. - `character`: The data of the character performing the action. Currently, the action will not receive the character’s bio or GM notes, regardless of whether the player has access to those fields. - `messageId` (optional): A unique ID for an existing chat message. It's included in actions triggered from chat buttons to provide context for the original roll. - `rolls` (optional): Included when action is triggered from a chat button. Contains the roll results of the original roll. -> These functions can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these functions can be synchronous or asynchronous and do not return a value. \ No newline at end of file +These methods can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these methods can be synchronous or asynchronous and do not return a value. \ No newline at end of file diff --git a/content/docs/components/computed.md b/content/docs/components/computed.md index 08219cb..b341559 100644 --- a/content/docs/components/computed.md +++ b/content/docs/components/computed.md @@ -16,28 +16,31 @@ seo: noindex: false # false (default) or true --- -Sheet authors define computed properties that are accessed by the host. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the `tokenBarValue` property is set to true. - -```javascript -computed: { - [name: string]: { - tokenBarValue?: boolean, - description?: string, - get: ( - props: { - character: Character - }, - ...args: string[] - ) => ComputedResult, - set?: ( - props: { - character: Character, - dispatch: Dispatch - }, - ...args: string[] - ) => void | Promise - } -} +Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the `tokenBarValue` property is set to true. + +```typescript +initRelay({ + //...other methods + computed: { + [name: string]: { + tokenBarValue?: boolean + description?: string + get: ( + props: { + character: Character + }, + ...args: string[] + ) => string | number | JSONValue + set?: ( + props: { + character: Character + dispatch: Dispatch + }, + ...args: string[] + ) => void | Promise + } + }, +}): Promise ``` Computed properties are passed into the `initRelay` function in an object where the keys are the names of the properties, and the value should be an object containing the following: diff --git a/content/docs/components/handlers.md b/content/docs/components/handlers.md index e05b4fb..765cdba 100644 --- a/content/docs/components/handlers.md +++ b/content/docs/components/handlers.md @@ -15,118 +15,126 @@ seo: canonical: "" # custom canonical URL (optional) noindex: false # false (default) or true --- +Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet. It is the main agrument that must be passed into `initRelay` or the sheet will never fully load. + +```typescript +initRelay({ + handlers: { + onInit, + onChange, + onSettingsChange, + onSharedSettingsChange, + onTranslationsRequest, + onDragOver, // optional + onDropOver, // optional + } + //...other methods +}): Promise +``` - -Handler functions allow the sheet to respond to messages from the host. The `handlers` argument requires the following methods: - -## `onInit` - -The `onInit` function provides the initial set of data to the sheet. - -```javascript -onInit(e: { - character: Character, - settings: { - colorTheme: string, - language: string, - gm: boolean, - owned: boolean, - settingsSheet: boolean, - headless: boolean, - sandbox: boolean, - campaignId: number, - environment: string, - currentUserId: string, - singleSheet: boolean - }, - sharedSettings: {}, - compendiumDropData: { - pageName: string, - categoryName: string, - expansion: number - } +## onInit + +The `onInit` method receives the initial data from the host. + +This will be the first time we have access to character data, sheet settings, as well as compendium data if this character is made as a result of a compendium drag and drop on the host. + +```typescript +onInit(event: { + character: Character, // Initial Data of the primary character for this sheet. + settings: { // Campaign and character specific settings + colorTheme: string, // 'dark' or 'light' + language: string, // two-letter language code, i.e. 'en' + gm: boolean, // whether or not the current player has gm permissions + owned: boolean, // whether or not the current player controls the primary character + settingsSheet: boolean, // whether or not this sheet is the settings sheet + headless: boolean, // whether or not it should be displayed, set by the host + sandbox: boolean, + campaignId: number, // The id of the current campaign + environment: string, // VTT, CHARACTERS, DISCORD + currentUserId: string, // user id of user opening the sheet + singleSheet: boolean + }, + sharedSettings: {}, // Data shared between all characters in this campaign + compendiumDropData: { // Populated when the character sheet is created from a compendium entry such as a creature or NPC. + pageName: string, + categoryName: string, + expansion: number, + }, }, dispatch: Dispatch): void; ``` -The event object contains the following: - -- `character`: The primary character for this sheet. -- `settings`: Campaign and character-specific settings. -- `sharedSettings`: Data shared between all characters in this campaign. -- `compendiumDropData`: Populated when the character sheet is created from a compendium entry such as a creature or NPC. - {{< callout context="note" >}} This function may be called multiple times during development in the sheet sandbox as part of hot reloads. {{< /callout >}} -## `onChange` +## onChange `onChange` is called whenever a character’s data is changed on the host’s end. The event object contains a partial character with only the character’s ID and the changed data. This could be the character’s bio, GM notes, or attributes (only the changed attributes). -```javascript +```typescript onChange(e: { - character: Partial + character: Partial }, dispatch: Dispatch): void; ``` -## `onSettingsChange` +## onSettingsChange -`onSettingsChange` is called when either the VTT’s color theme is changed, or when the current player’s ownership of the primary character changes. +`onSettingsChange` is called when either the host’s color theme is changed, or when the current player’s ownership of the primary character changes. -```javascript +```typescript onSettingsChange(e: { colorTheme: string, owned: boolean }, dispatch: Dispatch): void; ``` -## `onSharedSettingsChange` +## onSharedSettingsChange -`onSharedSettingsChange` is called when someone changes a shared setting in the VTT. +`onSharedSettingsChange` is called when someone changes a shared setting in the host. -```javascript +```typescript onSharedSettingsChange({ settings: { [key: string]: any } }): void; ``` -## `onTranslationsRequest` +## onTranslationsRequest `onTranslationsRequest` is called before the relay is fully initialized and returns the translation JSON data corresponding to the two-letter language argument. -```javascript +```typescript onTranslationsRequest(language: string): { [key: string]: string }; ``` -## `onDragOver` (optional) +## onDragOver (optional) `onDragOver` is called when a compendium item from the compendium tab is dragged over the iframe window containing the character sheet. Coordinates of the drag are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch. If the item is moved outside of the iframe, `dragData` and `coordinates` are null. -```javascript +```typescript onDragOver(e: { - coordinates: { top: number, left: number }, - dragData: { - pageName: string, - categoryName: string, - expansionId: number - } | null -}, dispatch: Dispatch): void + coordinates: { top: number, left: number }, + dragData: { + pageName: string + categoryName: string + expansionId: number + } | null, +}, dispatch: Dispatch) => void ``` -## `onDropOver` (optional) +## onDropOver (optional) `onDropOver` is called when a compendium item from the compendium tab is dropped over the iframe window containing the character sheet. Coordinates of the drop are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch. -```javascript +```typescript onDropOver(e: { - coordinates: { top: number, left: number }, - dropData: { - pageName: string, - categoryName: string, - expansionId: number - } -}, dispatch: Dispatch): void + coordinates: { top: number, left: number }, + dropData: { + pageName: string + categoryName: string + expansionId: number + } +}, dispatch: Dispatch) => void ``` \ No newline at end of file diff --git a/content/docs/components/roll.md b/content/docs/components/roll.md index b1772a9..756fb78 100644 --- a/content/docs/components/roll.md +++ b/content/docs/components/roll.md @@ -42,9 +42,9 @@ The roll method does not send or post any data to the chat on it's own. We inste ```typescript dispatch.post({ - characterId: '-O0KZhMTxLkn2HArFj8f', - content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`, - }) + characterId: '-O0KZhMTxLkn2HArFj8f', + content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`, +}) ``` ## Additional Roll Posting Options diff --git a/hugo_stats.json b/hugo_stats.json index ec890b9..49f0afb 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -225,10 +225,6 @@ "ids": [ "TableOfContents", "addactionstohost", - "additional", - "additional-options-for-posting-messages", - "additional-options-when-posting-messages", - "additional-roll-html-options-when-posting-messages", "additional-roll-posting-options", "addtotracker", "autolinktext", @@ -282,7 +278,6 @@ "perform", "post", "posting-a-roll-to-the-chat", - "posting-to-chat", "prerequisites", "quantum-roll", "query", @@ -292,7 +287,6 @@ "roll", "roll-buttons", "roll-template", - "rolls-results", "rolls-results-format", "running-tests", "setcomputed", diff --git a/public/docs/components/actions/index.html b/public/docs/components/actions/index.html index 0dfd7c8..215a772 100644 --- a/public/docs/components/actions/index.html +++ b/public/docs/components/actions/index.html @@ -44,7 +44,7 @@ > - + @@ -52,7 +52,7 @@ - + @@ -419,7 +419,21 @@

Actions

-

Actions are a collection of methods that can be executed from the VTT. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions.

+ + + +
+
+
+ +
+ 
initRelay({
+  //...other methods
+    actions: {},
+}): Promise<Dispatch>
+
+
+

Actions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions.

@@ -428,29 +442,27 @@

Actions

- 
actions: {
- [name: string]: {
+  
actions: {
+  [name: string]: {
     method: (props: {
- dispatch: Dispatch,
- character: Character,
- messageId?: string,
- rolls?: RollResults 
- }, ...args: string[]): void | Promise<void>
- }
+      dispatch: Dispatch,
+      character: Character,
+      messageId?: string,
+      rolls?: RollResults 
+    }, ...args: string[]): void | Promise<void>
+  }
 }

Actions are passed into the initRelay function in an object, where the keys are the unique names of the actions, and the values are objects containing a method property (additional metadata fields may be added to this object in the future).

-

The method receives a props object containing the following properties:

+

The action’s method receives a props object from the host containing the following properties:

  • dispatch: A Dispatch object.
  • character: The data of the character performing the action. Currently, the action will not receive the character’s bio or GM notes, regardless of whether the player has access to those fields.
  • messageId (optional): A unique ID for an existing chat message. It’s included in actions triggered from chat buttons to provide context for the original roll.
  • rolls (optional): Included when action is triggered from a chat button. Contains the roll results of the original roll.
-
-

These functions can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these functions can be synchronous or asynchronous and do not return a value.

-
+

These methods can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these methods can be synchronous or asynchronous and do not return a value.

diff --git a/public/docs/components/computed/index.html b/public/docs/components/computed/index.html index 83159e2..50dc972 100644 --- a/public/docs/components/computed/index.html +++ b/public/docs/components/computed/index.html @@ -44,7 +44,7 @@ > - + @@ -52,7 +52,7 @@ - + @@ -419,7 +419,7 @@

Computed

-

Sheet authors define computed properties that are accessed by the host. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.

+

Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.

@@ -428,25 +428,28 @@

Computed

- 
computed: {
- [name: string]: {
- tokenBarValue?: boolean,
- description?: string,
-    get: (
-      props: {
- character: Character
- },
-      ...args: string[]
- ) => ComputedResult,
- set?: (
-      props: {
- character: Character,
- dispatch: Dispatch
- },
-      ...args: string[]
- ) => void | Promise<void>
- }
-}
+ 
initRelay({
+  //...other methods
+  computed: {
+    [name: string]: {
+      tokenBarValue?: boolean
+      description?: string
+      get: (
+        props: {
+          character: Character
+        },
+        ...args: string[]
+      ) => string | number | JSONValue
+      set?: (
+        props: {
+          character: Character
+          dispatch: Dispatch
+        },
+        ...args: string[]
+      ) => void | Promise<void>
+    }
+  },
+}): Promise<Dispatch>

Computed properties are passed into the initRelay function in an object where the keys are the names of the properties, and the value should be an object containing the following:

diff --git a/public/docs/components/handlers/index.html b/public/docs/components/handlers/index.html index c8b946b..e8bf6c1 100644 --- a/public/docs/components/handlers/index.html +++ b/public/docs/components/handlers/index.html @@ -44,8 +44,7 @@ > - + @@ -53,8 +52,7 @@ - + @@ -404,13 +402,13 @@
Beacon SDK

On this page

@@ -435,22 +433,20 @@

Handlers

-

Handler functions allow the sheet to respond to messages from the host. The handlers argument requires the following methods:

-

onInit

-

The onInit function provides the initial set of data to the sheet.

+

Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet. It is the main agrument that must be passed into initRelay or the sheet will never fully load.

@@ -459,37 +455,55 @@

onInit - 
onInit(e: {
- character: Character,
- settings: {
- colorTheme: string,
- language: string,
- gm: boolean,
- owned: boolean,
- settingsSheet: boolean,
- headless: boolean,
- sandbox: boolean,
- campaignId: number,
- environment: string,
- currentUserId: string,
- singleSheet: boolean
- },
- sharedSettings: {},
- compendiumDropData: {
- pageName: string,
- categoryName: string,
- expansion: number
- }
-}, dispatch: Dispatch): void;
+ 
initRelay({
+    handlers: {
+        onInit,
+        onChange,
+        onSettingsChange,
+        onSharedSettingsChange,
+        onTranslationsRequest,
+        onDragOver, // optional
+        onDropOver, // optional
+    }
+    //...other methods
+}): Promise<Dispatch>
+ + +

onInit

+

The onInit method receives the initial data from the host.

+

This will be the first time we have access to character data, sheet settings, as well as compendium data if this character is made as a result of a compendium drag and drop on the host.

+ + + +
+
+
+ +
+ 
onInit(event: {
+  character: Character, // Initial Data of the primary character for this sheet.
+  settings: { // Campaign and character specific settings
+    colorTheme: string, // 'dark' or 'light'
+    language: string, // two-letter language code, i.e. 'en'
+    gm: boolean, // whether or not the current player has gm permissions
+    owned: boolean, // whether or not the current player controls the primary character
+    settingsSheet: boolean, // whether or not this sheet is the settings sheet
+    headless: boolean, // whether or not it should be displayed, set by the host
+    sandbox: boolean,
+    campaignId: number, // The id of the current campaign
+    environment: string, // VTT, CHARACTERS, DISCORD
+    currentUserId: string, // user id of user opening the sheet
+    singleSheet: boolean
+  },
+  sharedSettings: {}, // Data shared between all characters in this campaign
+  compendiumDropData: { //  Populated when the character sheet is created from a compendium entry such as a creature or NPC.
+    pageName: string,
+    categoryName: string,
+    expansion: number,
+  },
+}, dispatch: Dispatch): void;
-

The event object contains the following:

-
    -
  • character: The primary character for this sheet.
    • -
  • settings: Campaign and character-specific settings.
    • -
  • sharedSettings: Data shared between all characters in this campaign.
    • -
  • compendiumDropData: Populated when the character sheet is created from a compendium entry such as a creature or NPC.
    • -
@@ -501,7 +515,7 @@

onInit

-

onChange

+

onChange

onChange is called whenever a character’s data is changed on the host’s end. The event object contains a partial character with only the character’s ID and the changed data. This could be the character’s bio, GM notes, or attributes (only the changed attributes).

@@ -511,13 +525,13 @@

onChange - 
onChange(e: {
- character: Partial<Character>
-}, dispatch: Dispatch): void;
+ 
onChange(e: {
+  character: Partial<Character>
+}, dispatch: Dispatch): void;

-

onSettingsChange

-

onSettingsChange is called when either the VTT’s color theme is changed, or when the current player’s ownership of the primary character changes.

+

onSettingsChange

+

onSettingsChange is called when either the host’s color theme is changed, or when the current player’s ownership of the primary character changes.

@@ -526,14 +540,14 @@

onSettingsChange - 
onSettingsChange(e: {
- colorTheme: string,
- owned: boolean
-}, dispatch: Dispatch): void;
+ 
onSettingsChange(e: {
+ colorTheme: string,
+ owned: boolean
+}, dispatch: Dispatch): void;
-

onSharedSettingsChange

-

onSharedSettingsChange is called when someone changes a shared setting in the VTT.

+

onSharedSettingsChange

+

onSharedSettingsChange is called when someone changes a shared setting in the host.

@@ -542,10 +556,10 @@

onSharedSettingsChange - 
onSharedSettingsChange({ settings: { [key: string]: any } }): void;
+ 
onSharedSettingsChange({ settings: { [key: string]: any } }): void;
-

onTranslationsRequest

+

onTranslationsRequest

onTranslationsRequest is called before the relay is fully initialized and returns the translation JSON data corresponding to the two-letter language argument.

@@ -555,10 +569,10 @@

onTranslationsRequest - 
onTranslationsRequest(language: string): { [key: string]: string };
+ 
onTranslationsRequest(language: string): { [key: string]: string };
-

onDragOver (optional)

+

onDragOver (optional)

onDragOver is called when a compendium item from the compendium tab is dragged over the iframe window containing the character sheet.

Coordinates of the drag are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch. If the item is moved outside of the iframe, dragData and coordinates are null.

@@ -569,17 +583,17 @@

onDragOver (optional) - 
onDragOver(e: {
- coordinates: { top: number, left: number },
- dragData: { 
- pageName: string,
- categoryName: string,
- expansionId: number
- } | null
-}, dispatch: Dispatch): void
+ 
onDragOver(e: {
+  coordinates: { top: number, left: number },
+  dragData: { 
+    pageName: string
+    categoryName: string
+    expansionId: number
+  } | null,
+}, dispatch: Dispatch) => void
-

onDropOver (optional)

+

onDropOver (optional)

onDropOver is called when a compendium item from the compendium tab is dropped over the iframe window containing the character sheet.

Coordinates of the drop are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch.

@@ -590,14 +604,14 @@

onDropOver (optional) - 
onDropOver(e: {
- coordinates: { top: number, left: number },
- dropData: { 
- pageName: string,
- categoryName: string,
- expansionId: number
- }
-}, dispatch: Dispatch): void
+ 
onDropOver(e: {
+  coordinates: { top: number, left: number },
+  dropData: { 
+    pageName: string
+    categoryName: string
+    expansionId: number
+  }
+}, dispatch: Dispatch) => void
diff --git a/public/docs/components/index.xml b/public/docs/components/index.xml index 300f686..71f3c34 100644 --- a/public/docs/components/index.xml +++ b/public/docs/components/index.xml @@ -21,21 +21,21 @@ http://localhost:1313/docs/components/actions/ Tue, 07 May 2024 16:12:37 +0200 http://localhost:1313/docs/components/actions/ - Actions are a collection of methods that can be executed from the VTT. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. + initRelay({ //...other methods actions: {}, }): Promise&lt;Dispatch&gt; Actions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters. Computed http://localhost:1313/docs/components/computed/ Sun, 07 Apr 2024 16:12:37 +0200 http://localhost:1313/docs/components/computed/ - Sheet authors define computed properties that are accessed by the host. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true. + Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true. Handlers http://localhost:1313/docs/components/handlers/ Thu, 07 Mar 2024 16:12:37 +0200 http://localhost:1313/docs/components/handlers/ - Handler functions allow the sheet to respond to messages from the host. The handlers argument requires the following methods: onInit The onInit function provides the initial set of data to the sheet. + Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet. Handling Legacy Macro Attributes diff --git a/public/docs/components/rolls/index.html b/public/docs/components/rolls/index.html index 894068b..646a8af 100644 --- a/public/docs/components/rolls/index.html +++ b/public/docs/components/rolls/index.html @@ -493,9 +493,9 @@

Posting A Roll to the Chat 
dispatch.post({
-    characterId:  '-O0KZhMTxLkn2HArFj8f',
-    content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`,
-  })
+ characterId: '-O0KZhMTxLkn2HArFj8f', + content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`, +})

Additional Roll Posting Options

diff --git a/public/index.xml b/public/index.xml index b249f2b..efd8e5d 100644 --- a/public/index.xml +++ b/public/index.xml @@ -56,21 +56,21 @@ http://localhost:1313/docs/components/actions/ Tue, 07 May 2024 16:12:37 +0200 http://localhost:1313/docs/components/actions/ - Actions are a collection of methods that can be executed from the VTT. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. + initRelay({ //...other methods actions: {}, }): Promise&lt;Dispatch&gt; Actions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters. Computed http://localhost:1313/docs/components/computed/ Sun, 07 Apr 2024 16:12:37 +0200 http://localhost:1313/docs/components/computed/ - Sheet authors define computed properties that are accessed by the host. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true. + Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true. Handlers http://localhost:1313/docs/components/handlers/ Thu, 07 Mar 2024 16:12:37 +0200 http://localhost:1313/docs/components/handlers/ - Handler functions allow the sheet to respond to messages from the host. The handlers argument requires the following methods: onInit The onInit function provides the initial set of data to the sheet. + Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet. Handling Legacy Macro Attributes diff --git a/public/search-index.json b/public/search-index.json index d3730f5..2d72480 100644 --- a/public/search-index.json +++ b/public/search-index.json @@ -1 +1 @@ -[{"content":"Well-thought-through product announcements will help increase feature awareness and engage users with new functionality. Just like sharing your public roadmap, it\u0026rsquo;s also a great way to let potential customers see that you\u0026rsquo;re constantly improving.\nFurther reading Read How to announce product updates and features ","date":"2023-09-07","id":0,"permalink":"/blog/example-post/","summary":"You can use blog posts for announcing product updates and features.","tags":[],"title":"Example Post"},{"content":"","date":"2023-09-07","id":1,"permalink":"/blog/","summary":"","tags":[],"title":"Blog"},{"content":"","date":"2024-06-07","id":2,"permalink":"/docs/gettingstarted/","summary":"","tags":[],"title":"Getting Started"},{"content":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.\nWhether you\u0026rsquo;re a game master (GM), a developer, or a player, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated VTT experiences.\nWhat is the Beacon SDK? The Beacon SDK (software development kit) is a toolset used to create digital character sheets on Roll20 for Roll20 Tabletop and Roll20 Characters.\nWhether you\u0026rsquo;re an experience developer, or just starting out, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated character sheet experiences.\nThe Beacon SDK also introduces a new way to develop characters sheets for Roll20. Beacon SDK allows you to connect your local development environment to sandboxes in Roll20 Characters and Roll20 Tabletop, giving you real-time updates as you develop.\nKey Features Character Sheets: Design and implement a web app character sheet with dynamic attributes and real-time updates. Local Development: Work where you are most comfortable and get real-time updates in sandboxes in Roll20. Testing Sheets: Release a testing sheet and give others special access to it before you push it live for everyone. Roll Mechanics: Integrate complex roll formulas and display roll results directly within the Roll20 Tabletop and Roll20 Characters. Legacy Support: Convert and integrate legacy macros and roll templates with the new Beacon architecture. Customization: Define custom actions, computed attributes and handle specific roll templates tailored to your game\u0026rsquo;s needs. Components Overview The Beacon SDK is composed of several key components:\nActions: Define and manage custom actions that can be triggered within the VTT. Handlers: Event handlers that process and respond to various VTT events and messages. Computed Attributes: Define dynamically computed attributes based on other attributes. Macro Attributes: Convert and manage legacy macro attributes for compatibility with the Beacon SDK. Rolls: Implement advanced roll mechanics and display results dynamically within the VTT. For a comprehensive overview of these components, view the components section.\nGetting Started To get started with the Beacon SDK, you must initialize the relay, set up your character sheets, and define the necessary actions, handlers, and computed attributes.\nThis documentation provides detailed guides and example sheets to help you through each step of the process.\nBy leveraging the Beacon SDK, you can create rich, interactive, fully integrated VTT experiences that enhance gameplay and streamline game management.\nWhether adapting existing character sheets or building new ones from scratch, the Beacon SDK offers the tools and flexibility to bring your digital character sheet to life.\n","date":"2024-05-07","id":3,"permalink":"/docs/gettingstarted/introduction/","summary":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.","tags":[],"title":"Introduction"},{"content":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.\nTo get started quickly with a boilerplate, you can download and start editing the Quick Start Example Sheet which already has the Beacon SDK installed, along with several recommanded patterns implemented in a Vue.js project.\nPrerequisites Before you can install the Beacon SDK, you\u0026rsquo;ll need to have the following:\nA local web development environment with a code editor. Node.js installed on your machine. If you don\u0026rsquo;t have Node.js installed, use the following steps in the official Node.js documentation. A javascript project, we recommand Vue.js but you can choose whichever you are more comfortable with. These steps use npm but you are free to use any package manager and framework you prefer.\nThe following steps will guide you in installing the Beacon SDK in your application:\nStep 1: Add the package to your project You can find the latest version of the package on the NPM registry.\nIn your project\u0026rsquo;s directory, run the following:\nnpm i @roll20-official/beacon-sdk\rThis will install the Beacon SDK package to your project\u0026rsquo;s package.json file.\nStep 2: Use the Beacon package in your project The Beacon package exports various utilities you can use in your application. The main one that needs to be setup to enable the connection between Beacon SDK and Roll20 is initRelay.\nIdeally you would want to call this when your sheet is initalizing, and it is the function where you will define sheet actions, computed values, and how the sheet will response to or send character data changes. visit the initRelay page for a more detailed breakdown.\nAdd the following to your project:\nimport { initRelay } from \u0026#39;@roll20/beacon-sdk\u0026#39;; const dispatch = initRelay({ handlers: { onInit: ({ character } ) =\u0026gt; { console.log(\u0026#39;sheet character\u0026#39;, character) }, onChange: () =\u0026gt; {}, onSettingsChange: () =\u0026gt; {}, onSharedSettingsChange: () =\u0026gt; {}, onTranslationsRequest: () =\u0026gt; {}, onDragOver: () =\u0026gt; {} }, // Refer to our advanced example sheet on how to setup actions and computed properties. actions: {}, computed: {} })\rinitRelay returns a dispatch function that allows you to call methods or send changes from the sheet to Roll20. Check out the page on dispatch to learn more about the different methods.\nStep 3: Settings up the Roll20 tabletop sandbox On the Roll20 website visit the custom sheet sandbox and create a new sandbox, we\u0026rsquo;ll use this sandbox to develop our sheet but we must set it up to listen to our local project\u0026rsquo;s web server.\nAfter creating a new sandbox, we\u0026rsquo;ll be taken to the sandbox details page, here you will find a collapseable section called Sheet.json Editor, opening this we can add the settings we need to connect to our project:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 // or the port of your webserver }\rAfter adding these changes make sure to click Save Changes at the bottom of the page. After which you can click Launch Game on the page to go into the game and start testing your sheet.\n","date":"2024-04-07","id":4,"permalink":"/docs/gettingstarted/installing-beacon/","summary":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.","tags":[],"title":"Installing Beacon"},{"content":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.\nCharacter sheet: A digital or printed page used to track a character\u0026rsquo;s attributes, abilities, and other relevant information in a role-playing game.\nComputed Property: Properties that have both get and set methods, which can be dynamically calculated.\nConvertLegacyMacroAttributes: A function to handle mapping legacy macro attributes to the new Beacon Sheet format.\nDispatch: A set of functions enabling the sheet to send commands back to the VTT.\nGM (Game Master): The person who runs the game, controls the NPCs \u0026amp; the story, and provides challenges for the players.\nHandler: Methods that act as event handlers to process messages from the host.\nInitRelay: Function to initialize the SDK relay, setting up communication between the host and the character sheet.\nMacro: A script that automates repetitive tasks in the VTT.\nRoll Template: A predefined format for displaying the results of a dice roll.\nToken: A visual representation of a character or object on the virtual tabletop, with various properties like position, size, and attributes.\nVTT (Virtual Tabletop): An online platform that allows players to play tabletop role-playing games over the internet.\nValidationMessage: A message displayed when an input value does not meet specific criteria.\nQuantum Roll: A system that ensures the fairness and authenticity of dice rolls in the VTT by using cryptographic methods.\n","date":"2024-03-07","id":5,"permalink":"/docs/about/glossary/","summary":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.","tags":[],"title":"Glossary"},{"content":"\rQ: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level. There are a number of benefits to the Beacon SDK if you know how to build web applications. If you don\u0026rsquo;t know how to set up your own local environment, than the Beacon SDK might now be the first place you should start. Learn more about sheet development using the custom sheet.\nIf you have the skill to take advantage of the Beacon SDK, there are a number of improvements that will make it much easier to build characters sheets.\nFirst, the Beacon SDK allows you to develop locally and preview your changes automatically in the Roll20 Tabletop and Roll20 Character sandboxes. This means that you don\u0026rsquo;t have to keep uploading your HTML and CSS into the custom sheet to see your changes.\nNext, it allows you to develop your character sheet with all the power of JavaScript frameworks and modern web development libraries. In our example sheets, we use Vue.js, but you are free to use whatever you are most comfortable with. Also, you could use something like Cypress to create automated testing. That\u0026rsquo;s what we use in our Beacon sheets.\nLastly, the Beacon SDK makes it much easier for a web developer who knows JSON and Javascript to access character data and manage attributes on the character. If you\u0026rsquo;re familiar with the custom sheet, you no longer have to deal with sheet workers to get the data you need for a character. Also, the Beacon SDK introduces nested and computed attributes that make complex data models for your character sheet easier to create and maintain.\nQ: I\u0026rsquo;m not really a web developer, should I use Beacon or the custom sheet to make a my own character sheet?\rThat is up to you and your comfort level. If you\u0026rsquo;re looking to learn more about web development, building a character sheet with the Beacon SDK is a great way to level up your skills. What you learn during this process can be taken with you into any other web development project you work on in the future.\nIf setting up your own development environment is too intimidating for you, than it might be easier for you to start with the custom sheet and to go from there.\nQ: I\u0026rsquo;m interested in using Beacon, but I don\u0026rsquo;t know the basics of setting up a local environment. Where can I go to learn more about web development?\rYou can start learning how to build a local development environment by reading or watching the following tutorials. Note: these are not tutorials that we\u0026rsquo;ve produced, but we have found them helpful in getting started with web development.\nhttps://learn.microsoft.com/en-us/windows/dev-environment/javascript/vue-on-wsl https://www.youtube.com/watch?v=WPqXP_kLzpo Q: Now that Roll20 has acquired Demiplane, will you continue to support character sheets built on Beacon?\rThe recent acquisition of Demiplane brings exciting new opportunities for character sheets and compendiums on Roll20. At the same time, we are fully committed to supporting the Beacon SDK and character sheets that are built in our new advanced sheets ecosystem on Roll20. In fact, we believe that the Beacon SDK will be a key component of our future plans for Demiplane integration. In addition, our new D\u0026amp;D 2024 sheet is built on top of the Beacon SDK, and we will continue to utilize it to build first-class experiences on Roll20.\nIn short, you can rest assured that the Beacon SDK is an important tool in our toolbox moving forward.\nQ: What are actions in the context of Beacon?\rActions are methods executed in the chat log of Roll20 Tabletop or Roll20 Characters, often used for rolls triggered from macros or chat buttons. They are defined in the sheet\u0026rsquo;s configuration and can interact with character data. Q: How are computed properties used in Roll20?\rComputed properties are attributes which are accessible by users of your character sheet. They are usable in macros to create custom rolls or common actions for each character. Computed properties can represent derived values or complex calculations based on character data. Q: What is the dispatch function used for?\rThe dispatch function provides methods for sending commands from the character sheet back to Roll20, including updating character data, performing actions, and interacting with the interface. Q: What are roll buttons, and how do they work?\rRoll buttons are HTML elements with specific attributes that execute designated sheet actions when clicked. They can pass arguments to the action method and are commonly used for triggering rolls from the character sheet. Q: How are legacy attributes handled in Beacon?\rBeacon gives you the ability to transition your legacy attributes to new attributes you create in Beacon. This means that when a user updates their sheet to the new Beacon sheet, their legacy attribute can be mapped to Beacon attributes using the convertLegacyMacroAttributes function. Sheet developers can define how to handle legacy attribute values to ensure compatibility with existing macros. Q: What is the purpose of the query function?\rThe query function displays a SweetAlert2 prompt to users and returns the results along with any errors. It is commonly used for interactive prompts or confirmations within the VTT interface. Q: How are tokens managed in the VTT?\rTokens represent characters or objects on Roll20 Tabletop (VTT). Functions like getTokens, updateTokensByCharacter, and addToTracker are used to retrieve token information, update token data, and manage tokens in the turn tracker. Q: What is the role of the convertLegacyMacroAttributesArgs type?\rThe convertLegacyMacroAttributesArgs type defines the arguments used for handling legacy macro attributes. It includes the attribute name, character ID, and character data needed for mapping legacy attributes to the new sheet structure. ","date":"2024-01-07","id":6,"permalink":"/docs/about/faq/","summary":"Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level.","tags":[],"title":"FAQ"},{"content":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games. initRelay is the main method that initializes the Beacon SDK communication channel with the host (Either the Roll20 tabletop or in Roll20 Characters). It should be initialized as soon as the sheet loads, as its onInit handler will be the earliest we can get access to that character\u0026rsquo;s data.\ninitRelay({ handlers: { onInit, onChange, onSettingsChange, onSharedSettingsChange, onTranslationsRequest, onDragOver, onDropOver, }, actions: {}, computed: {}, convertLegacyMacroAttributes, handleLegacyRollTemplates }): Promise\u0026lt;Dispatch\u0026gt;\rThese components are crucial for handling actions, computations, macros, and rolls. This overview provides a high-level summary of each section, helping you understand their roles and how they integrate within the SDK.\nActions\rActions define specific operations that can be performed by characters within the VTT. These operations can range from simple tasks like rolling a dice to more complex interactions such as casting spells or activating abilities.\nHandlers\rHandlers are event listeners that manage communication between the VTT and the character sheet. They respond to various events, such as changes in character attributes or settings, and trigger appropriate actions or updates.\nComputed\rComputed properties are dynamic values derived from other character attributes. They allow for the creation of complex, calculated attributes that automatically update when their dependencies change.\nMacro Attributes\rMacro attributes handle the conversion of legacy macro attributes to the new format used in the Beacon SDK. This ensures compatibility with older character sheets and macros, allowing for a smooth transition to the new system.\nRolls\rThe Rolls component allows for advanced dice-rolling mechanics within the VTT. It supports both simple and complex rolls, providing flexibility in how roll results are displayed and computed.\nDispatch\rThe dispatch object provides methods for sending commands from the character sheet back to the host. Except when specified every method returns a promise.\n","date":"2024-06-07","id":7,"permalink":"/docs/components/initrelay/","summary":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games.","tags":[],"title":"InitRelay"},{"content":"Actions are a collection of methods that can be executed from the VTT. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions.\nactions: { [name: string]: { method: (props: { dispatch: Dispatch, character: Character, messageId?: string, rolls?: RollResults }, ...args: string[]): void | Promise\u0026lt;void\u0026gt; } }\rActions are passed into the initRelay function in an object, where the keys are the unique names of the actions, and the values are objects containing a method property (additional metadata fields may be added to this object in the future).\nThe method receives a props object containing the following properties:\ndispatch: A Dispatch object. character: The data of the character performing the action. Currently, the action will not receive the character’s bio or GM notes, regardless of whether the player has access to those fields. messageId (optional): A unique ID for an existing chat message. It\u0026rsquo;s included in actions triggered from chat buttons to provide context for the original roll. rolls (optional): Included when action is triggered from a chat button. Contains the roll results of the original roll. These functions can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these functions can be synchronous or asynchronous and do not return a value.\n","date":"2024-05-07","id":8,"permalink":"/docs/components/actions/","summary":"Actions are a collection of methods that can be executed from the VTT. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button.","tags":[],"title":"Actions"},{"content":"","date":"2024-04-07","id":9,"permalink":"/docs/components/","summary":"","tags":[],"title":"Components"},{"content":"Sheet authors define computed properties that are accessed by the host. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.\ncomputed: { [name: string]: { tokenBarValue?: boolean, description?: string, get: ( props: { character: Character }, ...args: string[] ) =\u0026gt; ComputedResult, set?: ( props: { character: Character, dispatch: Dispatch }, ...args: string[] ) =\u0026gt; void | Promise\u0026lt;void\u0026gt; } }\rComputed properties are passed into the initRelay function in an object where the keys are the names of the properties, and the value should be an object containing the following:\nget (required): It receives character data along with any number of string parameters and should return the computed value. tokenBarValue (optional): A boolean indicating whether this property should be available for use in token bars. description (optional): A text value indicating what this computed summary property represents. set (optional): This method receives character data and a dispatch, along with string arguments. This method does not need to return a value. Setting tokenBarValue to true will make the property available to use as a value for token bars. To work correctly, the get function must not rely on any additional arguments and must return either a simple value (a string or number) or an object: { current: number | string, max: number | string }\rIf the set function is omitted, the value will not be editable from the token itself. If defined, set methods will receive one string argument, which is whatever the user types into the input for modifying the bar. ","date":"2024-04-07","id":10,"permalink":"/docs/components/computed/","summary":"Sheet authors define computed properties that are accessed by the host. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.","tags":[],"title":"Computed"},{"content":"Handler functions allow the sheet to respond to messages from the host. The handlers argument requires the following methods:\nonInit The onInit function provides the initial set of data to the sheet.\nonInit(e: { character: Character, settings: { colorTheme: string, language: string, gm: boolean, owned: boolean, settingsSheet: boolean, headless: boolean, sandbox: boolean, campaignId: number, environment: string, currentUserId: string, singleSheet: boolean }, sharedSettings: {}, compendiumDropData: { pageName: string, categoryName: string, expansion: number } }, dispatch: Dispatch): void;\rThe event object contains the following:\ncharacter: The primary character for this sheet. settings: Campaign and character-specific settings. sharedSettings: Data shared between all characters in this campaign. compendiumDropData: Populated when the character sheet is created from a compendium entry such as a creature or NPC. This function may be called multiple times during development in the sheet sandbox as part of hot reloads.\nonChange onChange is called whenever a character’s data is changed on the host’s end. The event object contains a partial character with only the character’s ID and the changed data. This could be the character’s bio, GM notes, or attributes (only the changed attributes).\nonChange(e: { character: Partial\u0026lt;Character\u0026gt; }, dispatch: Dispatch): void;\ronSettingsChange onSettingsChange is called when either the VTT’s color theme is changed, or when the current player’s ownership of the primary character changes.\nonSettingsChange(e: { colorTheme: string, owned: boolean }, dispatch: Dispatch): void;\ronSharedSettingsChange onSharedSettingsChange is called when someone changes a shared setting in the VTT.\nonSharedSettingsChange({ settings: { [key: string]: any } }): void;\ronTranslationsRequest onTranslationsRequest is called before the relay is fully initialized and returns the translation JSON data corresponding to the two-letter language argument.\nonTranslationsRequest(language: string): { [key: string]: string };\ronDragOver (optional) onDragOver is called when a compendium item from the compendium tab is dragged over the iframe window containing the character sheet.\nCoordinates of the drag are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch. If the item is moved outside of the iframe, dragData and coordinates are null.\nonDragOver(e: { coordinates: { top: number, left: number }, dragData: { pageName: string, categoryName: string, expansionId: number } | null }, dispatch: Dispatch): void\ronDropOver (optional) onDropOver is called when a compendium item from the compendium tab is dropped over the iframe window containing the character sheet.\nCoordinates of the drop are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch.\nonDropOver(e: { coordinates: { top: number, left: number }, dropData: { pageName: string, categoryName: string, expansionId: number } }, dispatch: Dispatch): void\r","date":"2024-03-07","id":11,"permalink":"/docs/components/handlers/","summary":"Handler functions allow the sheet to respond to messages from the host. The handlers argument requires the following methods:\nonInit The onInit function provides the initial set of data to the sheet.","tags":[],"title":"Handlers"},{"content":"","date":"2024-02-07","id":12,"permalink":"/docs/about/","summary":"","tags":[],"title":"About"},{"content":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.\nThis scenario commonly arises when transitioning from an existing legacy sheet to a Beacon sheet. During such transitions, it\u0026rsquo;s possible that the attributes called from the legacy macro may not align with the structure of attributes in the Beacon Sheet.\nThe convertLegacyMacroAttributes function serves as a pivotal tool, empowering Sheet Developers to determine the mapping strategy for legacy attributes to the new Beacon Sheet.\nconvertLegacyMacroAttributes This function is defined during the initial SDK initialization process and is invoked by the host when it encounters a failure in locating an attribute\u0026rsquo;s value.\nconvertLegacyMacroAttributes: (messages: convertLegacyMacroAttributesArgs) =\u0026gt; {}: any\rAdvanced sheet macros typically first search through the defined computed properties before resorting to the convertLegacyMacroAttributes function.\nThe function\u0026rsquo;s purpose is to return a value that will be substituted in the macro. However, it grants Sheet Developers the autonomy to devise their preferred approach for handling legacy attribute values.\n","date":"2024-02-07","id":13,"permalink":"/docs/components/handling-legacy-macro-attributes/","summary":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.","tags":[],"title":"Handling Legacy Macro Attributes"},{"content":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development. Basic and advanced sheet examples. Improvements Detailed comments added to example files for better understanding. Support for complex roll templates and rich sheet actions. Bug Fixes N/A (initial release). Version 2.0.0 Release Date: 2023-03-17\nNew Features SCSS support for styling. Integration with Roll20 and VTT. Mock Relay for offline development. Improvements TypeScript integration for type checking and improved development experience. Unit testing with Vitest. End-to-End testing with Cypress. Bug Fixes N/A (initial release). ","date":"2024-01-07","id":14,"permalink":"/docs/about/changelog/","summary":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development.","tags":[],"title":"Changelog"},{"content":"The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the host. Vist the Roll20 help center to learn more about Roll20\u0026rsquo;s Dice Rolling system\nThe most command way to trigger a dice roll is through the dispatch object returned from the initRelay, but it could also be called from actions:\ndispatch.roll({ rolls: { [rollName: string]: string } // Ex. {attack: \u0026#39;1d20+4\u0026#39;, damage: `3d6+2`} messageId?: string }): Promise\u0026lt;{messageId: string, results: RollResults }\u0026gt;\rThe roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings.\nmessageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResults. The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.\nThe dispatch roll method and the actions roll section do not post to the chat, instead they will return a promise which will resolve to the roll results and the message id.\nPosting A Roll to the Chat The roll method does not send or post any data to the chat on it\u0026rsquo;s own. We instead have to use dispatch\u0026rsquo;s post method to send our roll results along with any other content to the chat.\ndispatch.post({ characterId: \u0026#39;-O0KZhMTxLkn2HArFj8f\u0026#39;, content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`, })\rAdditional Roll Posting Options data-rollname The data-rollname attribute tells the host that this HTML element is displaying the result of a roll.\n\u0026lt;span data-rollname=\u0026#34;attack\u0026#34;\u0026gt;\u0026lt;/span\u0026gt;\rThe host will both add the Quantum Roll signature element and replace the contents of the element with the result from the roll.\nThis is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the host to display the result.\ndata-computed Tagging an element with both a data-rollname and a data-computed=\u0026quot;true\u0026quot; tells the host that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result.\n\u0026lt;span data-rollname=\u0026#34;complex\u0026#34; data-computed=\u0026#34;true\u0026#34;\u0026gt;25\u0026lt;/span\u0026gt;\rThe host will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic.\nRoll Buttons Roll buttons are interactive elements that trigger sheet actions, such as damage rolls, when clicked. These buttons use the data-sheet-action attribute to specify the action to be executed.\n\u0026lt;button data-sheet-action=\u0026#34;damage\u0026#34; data-args=\u0026#34;arg1:arg2\u0026#34;\u0026gt;Click Me\u0026lt;/button\u0026gt;\rAdditional arguments can be provided using the data-args attribute, and the character, messageId, and original rolls will be included automatically.\nRolls Results Format type RollResults = { [name: string]: { expression: string //The original expression (i.e. 1d20+3d6) rollName: string //The name of the roll results: { //The results of the roll(s) expression: string dice?: number[] // result: number //The final result of the roll rolls?: { //Detailed results of each part of the roll (i.e. 3d6) sides: number //The type of die for this part of the roll (i.e. 6) dice: number //The number of dice (i.e. 3) results: number[] //The result of each die (i.e. [4, 2, 5]) }[] } } }\r","date":"2024-01-07","id":15,"permalink":"/docs/components/rolls/","summary":"The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed.","tags":[],"title":"Rolls"},{"content":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host. Except when specified every method below will return a promise.\nupdate dispatch.update({ options: { overwrite?: boolean } character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rThe update method sends character changes to the host (Roll20 Tabletop or Roll20 Characters) to be persisted. The partial character passed in here must contain the character\u0026rsquo;s id, and can contain any combination of the attributes, bio, and gmNotes properties. When updating a character’s attributes, only include those attributes that have changed.\nupdateCharacter dispatch.updateCharacter({ character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rLike the update method, updateCharacter sends character changes to the host page (Roll20 Tabletop or Roll20 Characters) to be persisted. However, this method takes a full set of character attributes as the character argument, and automatically computes the diff with existing character attributes, so that only changed attributes are sent to the data store.\nroll dispatch.roll({ rolls: { [rollName: string]: string } // Ex. {attack: \u0026#39;1d20+4\u0026#39;, damage: `3d6+2`} messageId?: string }): Promise\u0026lt;{messageId: string, results: RollResults }\u0026gt;\rThe roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings. messageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResult (see Types). The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.\npost dispatch.post({ characterId: string, messageId?: string, content: string, options?: { whisper?: \u0026#39;gm\u0026#39;, secret?: boolean, } }): Promise\u0026lt;string\u0026gt;\rpost posts a message to chat, either creating a new message or overwriting an existing one. It requires a character id and message content, a string containing either plain text or HTML to be posted. The method also accepts an options object. Currently, only whisper and secret are supported, the only valid value for whisper is gm, which will send the message as a whisper to the gm. The secret option is ignored unless whisper is also set, toggling to true will cause the message to not be visible to the controlling player. Like roll, messageId can be provided to update an existing chat message, but if omitted the method will generate a new messageId and post a new chat message. The method returns the messageId.\nquery dispatch.query(options: Swal2Options): { isConfirmed: boolean, isDenied: boolean, isDismissed: boolean, value?: string | number, dismiss?: \u0026#34;cancel\u0026#34; | \u0026#34;backdrop\u0026#34; | \u0026#34;close\u0026#34; | \u0026#34;esc\u0026#34; | \u0026#34;timer\u0026#34;, errors?: string[], }: Promise\u0026lt;{ results: { isConfirmed: boolean isDenied: boolean isDismissed: boolean value: string | number dismiss: string }, errors: [string] }\u0026gt;\rThe query method takes an options object and uses them to display a SweetAlert2 prompt to the user. It returns the results of the query as a SweetAlertResult, along with any errors encountered. The options work exactly as described in the documentation for SweetAlert2, however not all options are allowed. Here is a list of the allowed options:\ntitleText, text, iconColor, input, width, padding, background, position, grow, timer, timerProgressBar, showConfirmButton, showDenyButton, showCancelButton, ariaLabel, confirmButtonText, denyButtonText, cancelButtonText, confirmButtonAriaLabel, confirmButtonColor, cancelButtonAriaLabel, cancelButtonColor, denyButtonAriaLabel, denyButtonColor, reverseButtons, showCloseButton, closeButtonAriaLabel, returnInputValueOnDeny, imageUrl, imageWidth, imageHeight, imageAlt, inputLabel, inputPlaceholder, inputValue, inputOptions, inputPlaceholder, inputAutoTrim, inputAttributes, validationMessage, progressSteps, currentProgressStep, progressStepsDistance.\nPerform dispatch.perform({ characterId: string, action: string, args: string[], }): Promise\u0026lt;void\u0026gt;;\rperform executes the specified action on behalf of the character (designated by the character id), passing in args to the action method. This method can perform actions on behalf of any character, even a character that the sheet does not have data for.\ngetComputed dispatch.getComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rsee setComputed below\nsetComputed dispatch.setComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rgetComputed and setComputed are both nearly identical in how they are called, taking a character id and a property with the name of the computed property you wish to get or set, and an array of string args. Both methods return a promise that resolves with the computed value.\ncompendiumRequest dispatch.compendiumRequest({ query: string }): Promise\u0026lt;{ data: Object errors: Array\u0026lt;Error\u0026gt; extensions: Record\u0026lt;string, any\u0026gt; }\u0026gt;\rcompendiumRequest executes an AJAX request to the compendium service’s graphQL endpoint. It takes in a graphQL query string written according to the Compendium service’s schema. The query string does not need to include the ruleSystem shortName as this is set automatically according to the campaign override or sheet.json value in the Roll20 Tabletop.\ndebouncedCompendiumRequest dispatch.debouncedCompendiumRequest({ query: string }): Promise\u0026lt;{ data: Object }\u0026gt;\rLike compendiumRequest, except that calls to this method are automatically debounced (at 100ms) and grouped together into a single request to the compendium service. Note that this method will only return the requested data, it does not return errors or extensions.\ngetTokens dispatch.getTokens({ characterId: string }): Promise\u0026lt;{ selected: Token[], tokens: Token[] }\u0026gt;: Promise\u0026lt;{ selected: Token[] tokens: Token[] }\u0026gt;\rgetTokens requires a character id string and returns information about tokens on the user’s current page. The return value contains two arrays of tokens. The tokens array contains all tokens on the current page that represent the character whose id was provided to the method. The selected array contains any tokens that are currently selected, regardless of which character they represent. The returned token objects contain all of the token attributes available to the API, you can find documentation here and here.\naddToTracker dispatch.addToTracker({ tokenId?: string, custom?: { name: string img?: string } formula?: string value: string | number }): Promise\u0026lt;void\u0026gt;\raddToTracker adds or updates a single item in the turn tracker. Passing in a tokenId will add the specified token to the tracker, while passing in custom with a name and an optional image url (img) will add a custom item, not connected to any character or token. A round calculation string can be added via the optional formula parameter. value is the initiative number for the item.\naddActionsToHost dispatch.addActionsToHost({ sheetAction?: { characterId: string action: string args?: string[] } action?: string locations?: [\u0026#39;macroBar\u0026#39;] | [\u0026#39;tokenActionBar\u0026#39;] | [\u0026#39;macroBar\u0026#39;, \u0026#39;tokenActionBar\u0026#39;] actionId?: string name: string requestId?: string }): void\raddActionsToHost adds a specific action(macro) to an area of the Roll20 Tabletop UI; either the macrobar or the token action bar. Either sheetAction or action can be passed in but not both at the same time. The sheetAction arg should be passed in when an the action is to designated to a character. While the action arg should be passed in when the action is more generic.\ngetActions dispatch.getActions({ args: { characterId?: string } }): Promise\u0026lt;{ actions?: {} | { [id: string]: ActionFromHost } }\u0026gt;\rgetActions gets a specific character’s actions(macro).\nsetContainerSize dispatch.setContainerSize({ args: { width?: number height?: number } }): Promise\u0026lt;void\u0026gt;\rsetContainerSize updates the size of the container which holds the sheet shared settings. Returns a promise that can be awaited. This can be used in conjunction with something like the ResizeSensor event listener from npm: css-element-queries to automatically resize the container on the host.\nupdateTokensByCharacter dispatch.updateTokensByCharacter({ args: { characterId: string token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByCharacter updates a particular character’s default token as well as all existing tokens representing that character. Returns a promise that can be awaited.\nupdateTokensByIds dispatch.updateTokensByIds({ args: { tokenIds: array of ids as strings token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByIds updates a single or several tokens. Returns a promise that can be awaited.\nautoLinkText dispatch.autoLinkText({ args: { text: string } }): Promise\u0026lt;string\u0026gt;\rautoLinkText goes through the text to find handout names between square brackets and converts them into links with the handoutID. For example in a game with a handout named Dragon, passing in the text string of this is a [Dragon] to autoLinkText returns something similar to this is a \u0026lt;a href=\u0026quot;https://journal.roll20.net/8je02j0kd02k\u0026quot;\u0026gt;Dragon\u0026lt;/a\u0026gt;.\nopenDialogFromLink dispatch.openDialogFromLink({ args: { urlString: string } }): void\ropenDialogFromLink opens the supplied urlString through the Roll20 Tabletop.\nIf the url is for a handout, it will open the corresponding handout in the campaign. This will also check if the user opening the link has access to the handout. If the url is for a compendium, it will open a pop up to the compendium page, it will also check to ensure the user has access to view the page. If the url is for an external page, a confirmation pop up will display to warn the user that the link is for an external site and open a new tab in their main window if confirmed. ","date":"2023-09-07","id":16,"permalink":"/docs/components/dispatch/","summary":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host.","tags":[],"title":"Dispatch"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet\nUse the following steps to get started:\nInstall the Beacon SDK: Run the following command. npm i @roll20-official/beacon-sdk\rInstall dependencies: Install the dependencies for the project. npm install\rStart the Vite server: After installing the project\u0026rsquo;s dependencies, you\u0026rsquo;ll need to start the Vite server. There are two ways to do this: a. Offline Development: This method will run the Vite server with the default port and environment set to development.\nnpm run dev\rOnce this code executes successfully, you can access the Vite server at http://localhost:5173.\nThis method is useful when you do not have access to the Roll20 website or would like to work on parts of your project that do not depend on a connection to the VTT or Roll20 Characters, such as working on styling, mocking up the environment, building Vue components, testing functionality, etc.\nIn development mode, you cannot save or access existing character data or use the Beacon SDK functions that depend on VTT or Roll20 Characters functionality, such as dice rolling and token manipulation.\nb. Sandbox Development: This method will run the Vite server with the port set to 7620 and the environment set to staging mode.\nnpm run sandbox\rThis command will build the SCSS files and then run the Vite server. This will set the server up for connecting to a VTT custom sheet sandbox as well as through the sandbox in Roll20 Characters.\nTo test your changes in the VTT custom sheet sandbox, you will need to add the following to the sheet.json editor in the game settings:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 }\rUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\r","date":"2024-04-07","id":17,"permalink":"/docs/gettingstarted/quick-start-sheet-template/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet","tags":[],"title":"Quick Start Sheet Template"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet\nThis sheet uses the same steps listed in the . Immediately after implementing those three steps, you\u0026rsquo;ll add the following step:\nRun a CI check: This will run several checks to ensure your code is as optimal as possible, including formatting, linting, type checking, unit tests, and end-to-end tests. npm run ci-check\rYou can think of this command as a sanity check you can leverage when pushing a big release for your sheet!\nUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\rFor type checking with TypeScript, use the following command: npm run type-check\rFor running unit tests with Vitest, use the following command: npm run test:unit\rTo open up and develop local end-to-end tests with Cypress, use the following command: npm run test:e2e:open:local\rFor running local end-to-end tests with Cypress, use the following command: npm run test:e2e:local\rTo run CDN-hosted end-to-end tests with Cypress, use the following command: npm run test:e2e\r","date":"2024-03-07","id":18,"permalink":"/docs/gettingstarted/example-patterns-sheet/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet","tags":[],"title":"Example Patterns Sheet"},{"content":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:\nHow to Contribute Reporting Bugs If you find a bug, please report it by opening an issue in the GitHub repository. Provide as much detail as possible to help us understand and reproduce the issue.\nSuggesting Features We welcome suggestions for new features. Please open an issue in the GitHub repository with a detailed description of the feature you would like to see and why you think it would be useful.\nCode Contributions Fork the Repository: Create a personal fork of the project on GitHub.\nClone the Fork: Clone your fork to your local machine.\ngit clone Create a Branch: Create a new branch for your work.\ngit checkout -b feature-or-bugfix-description\rMake Changes: Make your changes to the codebase. Follow the existing code style and conventions.\nRun Tests: Ensure that all tests pass before submitting your changes.\nnpm run ci-check\rCommit Changes: Commit your changes with a descriptive commit message.\ngit commit -m \u0026#34;Description of your changes\u0026#34;\rPush Changes: Push your changes to your fork.\ngit push origin feature-or-bugfix-description\rCreate a Pull Request: Open a pull request from your fork to the main repository. Provide a detailed description of your changes and why they should be merged.\nRunning Tests Unit Tests: Run unit tests with Vitest.\nnpm run test:unit\rEnd-to-End Tests: Run End-to-End tests with Cypress.\nnpm run test:e2e\rCode Style Follow the existing code style and conventions.\nUse ESLint for linting.\nnpm run lint\rFormat code with Prettier.\nnpm run format\rCommunication GitHub Issues: Use GitHub issues for bug reports, feature requests, and questions. Pull Requests: Use GitHub pull requests to submit your code contributions. Thank you for contributing to the Beacon SDK project!\n","date":"2024-02-07","id":19,"permalink":"/docs/about/how-to-contribute/","summary":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:","tags":[],"title":"How to Contribute"},{"content":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform. This sheet includes all the necessary code, assets, and metadata packaged together to be easily shared, tested, and eventually deployed on Roll20.\nWhen you\u0026rsquo;re ready to test and share a sheet on Roll20, you\u0026rsquo;d want to do it in such a way that others who might need it won\u0026rsquo;t have to set it up with a local dev environment.\nThat\u0026rsquo;s what the steps below help you achieve. In this guide, you can make your sheet available in the Roll20 Tabletop and Characters.\nSteps to Release a Test Sheet The following steps will aid you while releasing your sheet:\nCreate a Build Command:\nYou must have a build command that will produce the minified production-ready code. You can find an example in our Quickstart Package JSON. The build command must be able to create these exact files:\nsheet.js sheet.css host.css (optional) Add a local folder that contains fonts and images used in the sheet (optional). Add a sheet.json file:\nAdd a sheet.json file to your sheet folder to ensure the metadata for your sheet is up-to-date. For this, you can also find an example in our Quickstart Package JSON.\nCreate a Pull Request in the Community Sheet Repo:\nIn the Community Sheet Repo, create a pull request that must include the submission checklist from our previous process.\nSubmission Checklist When submitting a new or updated sheet to Roll20, it\u0026rsquo;s essential to follow the guidelines to ensure a smooth review and approval process.\nBelow is a checklist to help you prepare your submission.\nRequired The following are the required submission checklist items:\nThe pull request title clearly contains the name of the sheet I am editing. The pull request title clearly states the type of change I am submitting (New Sheet/New Feature/Bugfix/etc.). The pull request makes changes to files in only one sub-folder. The pull request does not contain changes to any JSON files in the translations folder (translation.json is permitted). New Sheet Details You must include the following information in your sheet:\nThe name of this game is: \u0026lt; THE AETHYRBLOOD CHRONICLES \u0026gt;. The publisher of this game is: \u0026lt; HAPHAZARD PROJECTS \u0026gt; The name of this game system/family is: \u0026lt; DPS System ('dice pool scales') \u0026gt; You must also check out the following:\nI have followed the Character Sheets Standards when building this sheet. I have authorization from the game\u0026rsquo;s publisher to make this an official sheet on Roll20 with their name attached. This game is not traditionally published, but a copy of the game rules can be purchased/downloaded/found at The Aethyrblood Chronicles Core Rule Book In the pull request comments, make sure to list the email addresses of the Roll20 users you\u0026rsquo;d like to have access to the sheet.\nWe can always grant more people access to the sheet after it is released. However, you can inform us in our Official Community Sheet Development Channels on Discord.\nApproval and Access:\nAfter you create a pull request, our team will approve it and add your sheet to the sheet selection in Roll20 Tabletop and Characters. We will then give only your Roll20 user and any others you\u0026rsquo;ve listed in the pull request comments access to the sheet in Roll20. This sheet will then be available for you and others with access to test it.\nReleasing a Final Version After you have released a test version of your sheet, you can follow the same steps as releasing a test version to make your sheet available to everyone. This time, the pull request comments state that it is a final release version.\nOnce you have created the pull request, our team will review the sheet functionality, code, and metadata for consistency, best practices, and overall system security. We reserve the right to reject any sheet that does not meet our terms of use or conflicts with our partnerships.\n","date":"2024-02-07","id":20,"permalink":"/docs/gettingstarted/releasing-a-sheet/","summary":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform.","tags":[],"title":"Releasing a Sheet"},{"content":"Link to valuable, relevant resources.\n","date":"2024-02-27","id":21,"permalink":"/docs/resources/","summary":"Link to valuable, relevant resources.","tags":[],"title":"Resources"},{"content":"","date":"2023-09-07","id":22,"permalink":"/docs/","summary":"","tags":[],"title":"Docs"},{"content":"","date":"2023-09-07","id":23,"permalink":"/privacy/","summary":"","tags":[],"title":"Privacy Policy"},{"content":"","date":"2023-09-07","id":24,"permalink":"/","summary":"","tags":[],"title":"Welcome to Beacon SDK"},{"content":"","date":"0001-01-01","id":25,"permalink":"/categories/","summary":"","tags":[],"title":"Categories"},{"content":"","date":"0001-01-01","id":26,"permalink":"/contributors/","summary":"","tags":[],"title":"Contributors"},{"content":"","date":"0001-01-01","id":27,"permalink":"/tags/","summary":"","tags":[],"title":"Tags"}] \ No newline at end of file +[{"content":"Well-thought-through product announcements will help increase feature awareness and engage users with new functionality. Just like sharing your public roadmap, it\u0026rsquo;s also a great way to let potential customers see that you\u0026rsquo;re constantly improving.\nFurther reading Read How to announce product updates and features ","date":"2023-09-07","id":0,"permalink":"/blog/example-post/","summary":"You can use blog posts for announcing product updates and features.","tags":[],"title":"Example Post"},{"content":"","date":"2023-09-07","id":1,"permalink":"/blog/","summary":"","tags":[],"title":"Blog"},{"content":"","date":"2024-06-07","id":2,"permalink":"/docs/gettingstarted/","summary":"","tags":[],"title":"Getting Started"},{"content":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.\nWhether you\u0026rsquo;re a game master (GM), a developer, or a player, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated VTT experiences.\nWhat is the Beacon SDK? The Beacon SDK (software development kit) is a toolset used to create digital character sheets on Roll20 for Roll20 Tabletop and Roll20 Characters.\nWhether you\u0026rsquo;re an experience developer, or just starting out, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated character sheet experiences.\nThe Beacon SDK also introduces a new way to develop characters sheets for Roll20. Beacon SDK allows you to connect your local development environment to sandboxes in Roll20 Characters and Roll20 Tabletop, giving you real-time updates as you develop.\nKey Features Character Sheets: Design and implement a web app character sheet with dynamic attributes and real-time updates. Local Development: Work where you are most comfortable and get real-time updates in sandboxes in Roll20. Testing Sheets: Release a testing sheet and give others special access to it before you push it live for everyone. Roll Mechanics: Integrate complex roll formulas and display roll results directly within the Roll20 Tabletop and Roll20 Characters. Legacy Support: Convert and integrate legacy macros and roll templates with the new Beacon architecture. Customization: Define custom actions, computed attributes and handle specific roll templates tailored to your game\u0026rsquo;s needs. Components Overview The Beacon SDK is composed of several key components:\nActions: Define and manage custom actions that can be triggered within the VTT. Handlers: Event handlers that process and respond to various VTT events and messages. Computed Attributes: Define dynamically computed attributes based on other attributes. Macro Attributes: Convert and manage legacy macro attributes for compatibility with the Beacon SDK. Rolls: Implement advanced roll mechanics and display results dynamically within the VTT. For a comprehensive overview of these components, view the components section.\nGetting Started To get started with the Beacon SDK, you must initialize the relay, set up your character sheets, and define the necessary actions, handlers, and computed attributes.\nThis documentation provides detailed guides and example sheets to help you through each step of the process.\nBy leveraging the Beacon SDK, you can create rich, interactive, fully integrated VTT experiences that enhance gameplay and streamline game management.\nWhether adapting existing character sheets or building new ones from scratch, the Beacon SDK offers the tools and flexibility to bring your digital character sheet to life.\n","date":"2024-05-07","id":3,"permalink":"/docs/gettingstarted/introduction/","summary":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.","tags":[],"title":"Introduction"},{"content":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.\nTo get started quickly with a boilerplate, you can download and start editing the Quick Start Example Sheet which already has the Beacon SDK installed, along with several recommanded patterns implemented in a Vue.js project.\nPrerequisites Before you can install the Beacon SDK, you\u0026rsquo;ll need to have the following:\nA local web development environment with a code editor. Node.js installed on your machine. If you don\u0026rsquo;t have Node.js installed, use the following steps in the official Node.js documentation. A javascript project, we recommand Vue.js but you can choose whichever you are more comfortable with. These steps use npm but you are free to use any package manager and framework you prefer.\nThe following steps will guide you in installing the Beacon SDK in your application:\nStep 1: Add the package to your project You can find the latest version of the package on the NPM registry.\nIn your project\u0026rsquo;s directory, run the following:\nnpm i @roll20-official/beacon-sdk\rThis will install the Beacon SDK package to your project\u0026rsquo;s package.json file.\nStep 2: Use the Beacon package in your project The Beacon package exports various utilities you can use in your application. The main one that needs to be setup to enable the connection between Beacon SDK and Roll20 is initRelay.\nIdeally you would want to call this when your sheet is initalizing, and it is the function where you will define sheet actions, computed values, and how the sheet will response to or send character data changes. visit the initRelay page for a more detailed breakdown.\nAdd the following to your project:\nimport { initRelay } from \u0026#39;@roll20/beacon-sdk\u0026#39;; const dispatch = initRelay({ handlers: { onInit: ({ character } ) =\u0026gt; { console.log(\u0026#39;sheet character\u0026#39;, character) }, onChange: () =\u0026gt; {}, onSettingsChange: () =\u0026gt; {}, onSharedSettingsChange: () =\u0026gt; {}, onTranslationsRequest: () =\u0026gt; {}, onDragOver: () =\u0026gt; {} }, // Refer to our advanced example sheet on how to setup actions and computed properties. actions: {}, computed: {} })\rinitRelay returns a dispatch function that allows you to call methods or send changes from the sheet to Roll20. Check out the page on dispatch to learn more about the different methods.\nStep 3: Settings up the Roll20 tabletop sandbox On the Roll20 website visit the custom sheet sandbox and create a new sandbox, we\u0026rsquo;ll use this sandbox to develop our sheet but we must set it up to listen to our local project\u0026rsquo;s web server.\nAfter creating a new sandbox, we\u0026rsquo;ll be taken to the sandbox details page, here you will find a collapseable section called Sheet.json Editor, opening this we can add the settings we need to connect to our project:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 // or the port of your webserver }\rAfter adding these changes make sure to click Save Changes at the bottom of the page. After which you can click Launch Game on the page to go into the game and start testing your sheet.\n","date":"2024-04-07","id":4,"permalink":"/docs/gettingstarted/installing-beacon/","summary":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.","tags":[],"title":"Installing Beacon"},{"content":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.\nCharacter sheet: A digital or printed page used to track a character\u0026rsquo;s attributes, abilities, and other relevant information in a role-playing game.\nComputed Property: Properties that have both get and set methods, which can be dynamically calculated.\nConvertLegacyMacroAttributes: A function to handle mapping legacy macro attributes to the new Beacon Sheet format.\nDispatch: A set of functions enabling the sheet to send commands back to the VTT.\nGM (Game Master): The person who runs the game, controls the NPCs \u0026amp; the story, and provides challenges for the players.\nHandler: Methods that act as event handlers to process messages from the host.\nInitRelay: Function to initialize the SDK relay, setting up communication between the host and the character sheet.\nMacro: A script that automates repetitive tasks in the VTT.\nRoll Template: A predefined format for displaying the results of a dice roll.\nToken: A visual representation of a character or object on the virtual tabletop, with various properties like position, size, and attributes.\nVTT (Virtual Tabletop): An online platform that allows players to play tabletop role-playing games over the internet.\nValidationMessage: A message displayed when an input value does not meet specific criteria.\nQuantum Roll: A system that ensures the fairness and authenticity of dice rolls in the VTT by using cryptographic methods.\n","date":"2024-03-07","id":5,"permalink":"/docs/about/glossary/","summary":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.","tags":[],"title":"Glossary"},{"content":"\rQ: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level. There are a number of benefits to the Beacon SDK if you know how to build web applications. If you don\u0026rsquo;t know how to set up your own local environment, than the Beacon SDK might now be the first place you should start. Learn more about sheet development using the custom sheet.\nIf you have the skill to take advantage of the Beacon SDK, there are a number of improvements that will make it much easier to build characters sheets.\nFirst, the Beacon SDK allows you to develop locally and preview your changes automatically in the Roll20 Tabletop and Roll20 Character sandboxes. This means that you don\u0026rsquo;t have to keep uploading your HTML and CSS into the custom sheet to see your changes.\nNext, it allows you to develop your character sheet with all the power of JavaScript frameworks and modern web development libraries. In our example sheets, we use Vue.js, but you are free to use whatever you are most comfortable with. Also, you could use something like Cypress to create automated testing. That\u0026rsquo;s what we use in our Beacon sheets.\nLastly, the Beacon SDK makes it much easier for a web developer who knows JSON and Javascript to access character data and manage attributes on the character. If you\u0026rsquo;re familiar with the custom sheet, you no longer have to deal with sheet workers to get the data you need for a character. Also, the Beacon SDK introduces nested and computed attributes that make complex data models for your character sheet easier to create and maintain.\nQ: I\u0026rsquo;m not really a web developer, should I use Beacon or the custom sheet to make a my own character sheet?\rThat is up to you and your comfort level. If you\u0026rsquo;re looking to learn more about web development, building a character sheet with the Beacon SDK is a great way to level up your skills. What you learn during this process can be taken with you into any other web development project you work on in the future.\nIf setting up your own development environment is too intimidating for you, than it might be easier for you to start with the custom sheet and to go from there.\nQ: I\u0026rsquo;m interested in using Beacon, but I don\u0026rsquo;t know the basics of setting up a local environment. Where can I go to learn more about web development?\rYou can start learning how to build a local development environment by reading or watching the following tutorials. Note: these are not tutorials that we\u0026rsquo;ve produced, but we have found them helpful in getting started with web development.\nhttps://learn.microsoft.com/en-us/windows/dev-environment/javascript/vue-on-wsl https://www.youtube.com/watch?v=WPqXP_kLzpo Q: Now that Roll20 has acquired Demiplane, will you continue to support character sheets built on Beacon?\rThe recent acquisition of Demiplane brings exciting new opportunities for character sheets and compendiums on Roll20. At the same time, we are fully committed to supporting the Beacon SDK and character sheets that are built in our new advanced sheets ecosystem on Roll20. In fact, we believe that the Beacon SDK will be a key component of our future plans for Demiplane integration. In addition, our new D\u0026amp;D 2024 sheet is built on top of the Beacon SDK, and we will continue to utilize it to build first-class experiences on Roll20.\nIn short, you can rest assured that the Beacon SDK is an important tool in our toolbox moving forward.\nQ: What are actions in the context of Beacon?\rActions are methods executed in the chat log of Roll20 Tabletop or Roll20 Characters, often used for rolls triggered from macros or chat buttons. They are defined in the sheet\u0026rsquo;s configuration and can interact with character data. Q: How are computed properties used in Roll20?\rComputed properties are attributes which are accessible by users of your character sheet. They are usable in macros to create custom rolls or common actions for each character. Computed properties can represent derived values or complex calculations based on character data. Q: What is the dispatch function used for?\rThe dispatch function provides methods for sending commands from the character sheet back to Roll20, including updating character data, performing actions, and interacting with the interface. Q: What are roll buttons, and how do they work?\rRoll buttons are HTML elements with specific attributes that execute designated sheet actions when clicked. They can pass arguments to the action method and are commonly used for triggering rolls from the character sheet. Q: How are legacy attributes handled in Beacon?\rBeacon gives you the ability to transition your legacy attributes to new attributes you create in Beacon. This means that when a user updates their sheet to the new Beacon sheet, their legacy attribute can be mapped to Beacon attributes using the convertLegacyMacroAttributes function. Sheet developers can define how to handle legacy attribute values to ensure compatibility with existing macros. Q: What is the purpose of the query function?\rThe query function displays a SweetAlert2 prompt to users and returns the results along with any errors. It is commonly used for interactive prompts or confirmations within the VTT interface. Q: How are tokens managed in the VTT?\rTokens represent characters or objects on Roll20 Tabletop (VTT). Functions like getTokens, updateTokensByCharacter, and addToTracker are used to retrieve token information, update token data, and manage tokens in the turn tracker. Q: What is the role of the convertLegacyMacroAttributesArgs type?\rThe convertLegacyMacroAttributesArgs type defines the arguments used for handling legacy macro attributes. It includes the attribute name, character ID, and character data needed for mapping legacy attributes to the new sheet structure. ","date":"2024-01-07","id":6,"permalink":"/docs/about/faq/","summary":"Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level.","tags":[],"title":"FAQ"},{"content":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games. initRelay is the main method that initializes the Beacon SDK communication channel with the host (Either the Roll20 tabletop or in Roll20 Characters). It should be initialized as soon as the sheet loads, as its onInit handler will be the earliest we can get access to that character\u0026rsquo;s data.\ninitRelay({ handlers: { onInit, onChange, onSettingsChange, onSharedSettingsChange, onTranslationsRequest, onDragOver, onDropOver, }, actions: {}, computed: {}, convertLegacyMacroAttributes, handleLegacyRollTemplates }): Promise\u0026lt;Dispatch\u0026gt;\rThese components are crucial for handling actions, computations, macros, and rolls. This overview provides a high-level summary of each section, helping you understand their roles and how they integrate within the SDK.\nActions\rActions define specific operations that can be performed by characters within the VTT. These operations can range from simple tasks like rolling a dice to more complex interactions such as casting spells or activating abilities.\nHandlers\rHandlers are event listeners that manage communication between the VTT and the character sheet. They respond to various events, such as changes in character attributes or settings, and trigger appropriate actions or updates.\nComputed\rComputed properties are dynamic values derived from other character attributes. They allow for the creation of complex, calculated attributes that automatically update when their dependencies change.\nMacro Attributes\rMacro attributes handle the conversion of legacy macro attributes to the new format used in the Beacon SDK. This ensures compatibility with older character sheets and macros, allowing for a smooth transition to the new system.\nRolls\rThe Rolls component allows for advanced dice-rolling mechanics within the VTT. It supports both simple and complex rolls, providing flexibility in how roll results are displayed and computed.\nDispatch\rThe dispatch object provides methods for sending commands from the character sheet back to the host. Except when specified every method returns a promise.\n","date":"2024-06-07","id":7,"permalink":"/docs/components/initrelay/","summary":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games.","tags":[],"title":"InitRelay"},{"content":"\rinitRelay({ //...other methods actions: {}, }): Promise\u0026lt;Dispatch\u0026gt;\rActions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions.\nactions: { [name: string]: { method: (props: { dispatch: Dispatch, character: Character, messageId?: string, rolls?: RollResults }, ...args: string[]): void | Promise\u0026lt;void\u0026gt; } }\rActions are passed into the initRelay function in an object, where the keys are the unique names of the actions, and the values are objects containing a method property (additional metadata fields may be added to this object in the future).\nThe action\u0026rsquo;s method receives a props object from the host containing the following properties:\ndispatch: A Dispatch object. character: The data of the character performing the action. Currently, the action will not receive the character’s bio or GM notes, regardless of whether the player has access to those fields. messageId (optional): A unique ID for an existing chat message. It\u0026rsquo;s included in actions triggered from chat buttons to provide context for the original roll. rolls (optional): Included when action is triggered from a chat button. Contains the roll results of the original roll. These methods can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these methods can be synchronous or asynchronous and do not return a value.\n","date":"2024-05-07","id":8,"permalink":"/docs/components/actions/","summary":"initRelay({ //...other methods actions: {}, }): Promise\u0026lt;Dispatch\u0026gt;\rActions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters.","tags":[],"title":"Actions"},{"content":"","date":"2024-04-07","id":9,"permalink":"/docs/components/","summary":"","tags":[],"title":"Components"},{"content":"Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.\ninitRelay({ //...other methods computed: { [name: string]: { tokenBarValue?: boolean description?: string get: ( props: { character: Character }, ...args: string[] ) =\u0026gt; string | number | JSONValue set?: ( props: { character: Character dispatch: Dispatch }, ...args: string[] ) =\u0026gt; void | Promise\u0026lt;void\u0026gt; } }, }): Promise\u0026lt;Dispatch\u0026gt;\rComputed properties are passed into the initRelay function in an object where the keys are the names of the properties, and the value should be an object containing the following:\nget (required): It receives character data along with any number of string parameters and should return the computed value. tokenBarValue (optional): A boolean indicating whether this property should be available for use in token bars. description (optional): A text value indicating what this computed summary property represents. set (optional): This method receives character data and a dispatch, along with string arguments. This method does not need to return a value. Setting tokenBarValue to true will make the property available to use as a value for token bars. To work correctly, the get function must not rely on any additional arguments and must return either a simple value (a string or number) or an object: { current: number | string, max: number | string }\rIf the set function is omitted, the value will not be editable from the token itself. If defined, set methods will receive one string argument, which is whatever the user types into the input for modifying the bar. ","date":"2024-04-07","id":10,"permalink":"/docs/components/computed/","summary":"Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.","tags":[],"title":"Computed"},{"content":"Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet. It is the main agrument that must be passed into initRelay or the sheet will never fully load.\ninitRelay({ handlers: { onInit, onChange, onSettingsChange, onSharedSettingsChange, onTranslationsRequest, onDragOver, // optional onDropOver, // optional } //...other methods }): Promise\u0026lt;Dispatch\u0026gt;\ronInit The onInit method receives the initial data from the host.\nThis will be the first time we have access to character data, sheet settings, as well as compendium data if this character is made as a result of a compendium drag and drop on the host.\nonInit(event: { character: Character, // Initial Data of the primary character for this sheet. settings: { // Campaign and character specific settings colorTheme: string, // \u0026#39;dark\u0026#39; or \u0026#39;light\u0026#39; language: string, // two-letter language code, i.e. \u0026#39;en\u0026#39; gm: boolean, // whether or not the current player has gm permissions owned: boolean, // whether or not the current player controls the primary character settingsSheet: boolean, // whether or not this sheet is the settings sheet headless: boolean, // whether or not it should be displayed, set by the host sandbox: boolean, campaignId: number, // The id of the current campaign environment: string, // VTT, CHARACTERS, DISCORD currentUserId: string, // user id of user opening the sheet singleSheet: boolean }, sharedSettings: {}, // Data shared between all characters in this campaign compendiumDropData: { // Populated when the character sheet is created from a compendium entry such as a creature or NPC. pageName: string, categoryName: string, expansion: number, }, }, dispatch: Dispatch): void;\rThis function may be called multiple times during development in the sheet sandbox as part of hot reloads.\nonChange onChange is called whenever a character’s data is changed on the host’s end. The event object contains a partial character with only the character’s ID and the changed data. This could be the character’s bio, GM notes, or attributes (only the changed attributes).\nonChange(e: { character: Partial\u0026lt;Character\u0026gt; }, dispatch: Dispatch): void;\ronSettingsChange onSettingsChange is called when either the host’s color theme is changed, or when the current player’s ownership of the primary character changes.\nonSettingsChange(e: { colorTheme: string, owned: boolean }, dispatch: Dispatch): void;\ronSharedSettingsChange onSharedSettingsChange is called when someone changes a shared setting in the host.\nonSharedSettingsChange({ settings: { [key: string]: any } }): void;\ronTranslationsRequest onTranslationsRequest is called before the relay is fully initialized and returns the translation JSON data corresponding to the two-letter language argument.\nonTranslationsRequest(language: string): { [key: string]: string };\ronDragOver (optional) onDragOver is called when a compendium item from the compendium tab is dragged over the iframe window containing the character sheet.\nCoordinates of the drag are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch. If the item is moved outside of the iframe, dragData and coordinates are null.\nonDragOver(e: { coordinates: { top: number, left: number }, dragData: { pageName: string categoryName: string expansionId: number } | null, }, dispatch: Dispatch) =\u0026gt; void\ronDropOver (optional) onDropOver is called when a compendium item from the compendium tab is dropped over the iframe window containing the character sheet.\nCoordinates of the drop are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch.\nonDropOver(e: { coordinates: { top: number, left: number }, dropData: { pageName: string categoryName: string expansionId: number } }, dispatch: Dispatch) =\u0026gt; void\r","date":"2024-03-07","id":11,"permalink":"/docs/components/handlers/","summary":"Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet.","tags":[],"title":"Handlers"},{"content":"","date":"2024-02-07","id":12,"permalink":"/docs/about/","summary":"","tags":[],"title":"About"},{"content":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.\nThis scenario commonly arises when transitioning from an existing legacy sheet to a Beacon sheet. During such transitions, it\u0026rsquo;s possible that the attributes called from the legacy macro may not align with the structure of attributes in the Beacon Sheet.\nThe convertLegacyMacroAttributes function serves as a pivotal tool, empowering Sheet Developers to determine the mapping strategy for legacy attributes to the new Beacon Sheet.\nconvertLegacyMacroAttributes This function is defined during the initial SDK initialization process and is invoked by the host when it encounters a failure in locating an attribute\u0026rsquo;s value.\nconvertLegacyMacroAttributes: (messages: convertLegacyMacroAttributesArgs) =\u0026gt; {}: any\rAdvanced sheet macros typically first search through the defined computed properties before resorting to the convertLegacyMacroAttributes function.\nThe function\u0026rsquo;s purpose is to return a value that will be substituted in the macro. However, it grants Sheet Developers the autonomy to devise their preferred approach for handling legacy attribute values.\n","date":"2024-02-07","id":13,"permalink":"/docs/components/handling-legacy-macro-attributes/","summary":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.","tags":[],"title":"Handling Legacy Macro Attributes"},{"content":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development. Basic and advanced sheet examples. Improvements Detailed comments added to example files for better understanding. Support for complex roll templates and rich sheet actions. Bug Fixes N/A (initial release). Version 2.0.0 Release Date: 2023-03-17\nNew Features SCSS support for styling. Integration with Roll20 and VTT. Mock Relay for offline development. Improvements TypeScript integration for type checking and improved development experience. Unit testing with Vitest. End-to-End testing with Cypress. Bug Fixes N/A (initial release). ","date":"2024-01-07","id":14,"permalink":"/docs/about/changelog/","summary":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development.","tags":[],"title":"Changelog"},{"content":"The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the host. Vist the Roll20 help center to learn more about Roll20\u0026rsquo;s Dice Rolling system\nThe most command way to trigger a dice roll is through the dispatch object returned from the initRelay, but it could also be called from actions:\ndispatch.roll({ rolls: { [rollName: string]: string } // Ex. {attack: \u0026#39;1d20+4\u0026#39;, damage: `3d6+2`} messageId?: string }): Promise\u0026lt;{messageId: string, results: RollResults }\u0026gt;\rThe roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings.\nmessageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResults. The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.\nThe dispatch roll method and the actions roll section do not post to the chat, instead they will return a promise which will resolve to the roll results and the message id.\nPosting A Roll to the Chat The roll method does not send or post any data to the chat on it\u0026rsquo;s own. We instead have to use dispatch\u0026rsquo;s post method to send our roll results along with any other content to the chat.\ndispatch.post({ characterId: \u0026#39;-O0KZhMTxLkn2HArFj8f\u0026#39;, content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`, })\rAdditional Roll Posting Options data-rollname The data-rollname attribute tells the host that this HTML element is displaying the result of a roll.\n\u0026lt;span data-rollname=\u0026#34;attack\u0026#34;\u0026gt;\u0026lt;/span\u0026gt;\rThe host will both add the Quantum Roll signature element and replace the contents of the element with the result from the roll.\nThis is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the host to display the result.\ndata-computed Tagging an element with both a data-rollname and a data-computed=\u0026quot;true\u0026quot; tells the host that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result.\n\u0026lt;span data-rollname=\u0026#34;complex\u0026#34; data-computed=\u0026#34;true\u0026#34;\u0026gt;25\u0026lt;/span\u0026gt;\rThe host will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic.\nRoll Buttons Roll buttons are interactive elements that trigger sheet actions, such as damage rolls, when clicked. These buttons use the data-sheet-action attribute to specify the action to be executed.\n\u0026lt;button data-sheet-action=\u0026#34;damage\u0026#34; data-args=\u0026#34;arg1:arg2\u0026#34;\u0026gt;Click Me\u0026lt;/button\u0026gt;\rAdditional arguments can be provided using the data-args attribute, and the character, messageId, and original rolls will be included automatically.\nRolls Results Format type RollResults = { [name: string]: { expression: string //The original expression (i.e. 1d20+3d6) rollName: string //The name of the roll results: { //The results of the roll(s) expression: string dice?: number[] // result: number //The final result of the roll rolls?: { //Detailed results of each part of the roll (i.e. 3d6) sides: number //The type of die for this part of the roll (i.e. 6) dice: number //The number of dice (i.e. 3) results: number[] //The result of each die (i.e. [4, 2, 5]) }[] } } }\r","date":"2024-01-07","id":15,"permalink":"/docs/components/rolls/","summary":"The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed.","tags":[],"title":"Rolls"},{"content":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host. Except when specified every method below will return a promise.\nupdate dispatch.update({ options: { overwrite?: boolean } character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rThe update method sends character changes to the host (Roll20 Tabletop or Roll20 Characters) to be persisted. The partial character passed in here must contain the character\u0026rsquo;s id, and can contain any combination of the attributes, bio, and gmNotes properties. When updating a character’s attributes, only include those attributes that have changed.\nupdateCharacter dispatch.updateCharacter({ character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rLike the update method, updateCharacter sends character changes to the host page (Roll20 Tabletop or Roll20 Characters) to be persisted. However, this method takes a full set of character attributes as the character argument, and automatically computes the diff with existing character attributes, so that only changed attributes are sent to the data store.\nroll dispatch.roll({ rolls: { [rollName: string]: string } // Ex. {attack: \u0026#39;1d20+4\u0026#39;, damage: `3d6+2`} messageId?: string }): Promise\u0026lt;{messageId: string, results: RollResults }\u0026gt;\rThe roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings. messageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResult (see Types). The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.\npost dispatch.post({ characterId: string, messageId?: string, content: string, options?: { whisper?: \u0026#39;gm\u0026#39;, secret?: boolean, } }): Promise\u0026lt;string\u0026gt;\rpost posts a message to chat, either creating a new message or overwriting an existing one. It requires a character id and message content, a string containing either plain text or HTML to be posted. The method also accepts an options object. Currently, only whisper and secret are supported, the only valid value for whisper is gm, which will send the message as a whisper to the gm. The secret option is ignored unless whisper is also set, toggling to true will cause the message to not be visible to the controlling player. Like roll, messageId can be provided to update an existing chat message, but if omitted the method will generate a new messageId and post a new chat message. The method returns the messageId.\nquery dispatch.query(options: Swal2Options): { isConfirmed: boolean, isDenied: boolean, isDismissed: boolean, value?: string | number, dismiss?: \u0026#34;cancel\u0026#34; | \u0026#34;backdrop\u0026#34; | \u0026#34;close\u0026#34; | \u0026#34;esc\u0026#34; | \u0026#34;timer\u0026#34;, errors?: string[], }: Promise\u0026lt;{ results: { isConfirmed: boolean isDenied: boolean isDismissed: boolean value: string | number dismiss: string }, errors: [string] }\u0026gt;\rThe query method takes an options object and uses them to display a SweetAlert2 prompt to the user. It returns the results of the query as a SweetAlertResult, along with any errors encountered. The options work exactly as described in the documentation for SweetAlert2, however not all options are allowed. Here is a list of the allowed options:\ntitleText, text, iconColor, input, width, padding, background, position, grow, timer, timerProgressBar, showConfirmButton, showDenyButton, showCancelButton, ariaLabel, confirmButtonText, denyButtonText, cancelButtonText, confirmButtonAriaLabel, confirmButtonColor, cancelButtonAriaLabel, cancelButtonColor, denyButtonAriaLabel, denyButtonColor, reverseButtons, showCloseButton, closeButtonAriaLabel, returnInputValueOnDeny, imageUrl, imageWidth, imageHeight, imageAlt, inputLabel, inputPlaceholder, inputValue, inputOptions, inputPlaceholder, inputAutoTrim, inputAttributes, validationMessage, progressSteps, currentProgressStep, progressStepsDistance.\nPerform dispatch.perform({ characterId: string, action: string, args: string[], }): Promise\u0026lt;void\u0026gt;;\rperform executes the specified action on behalf of the character (designated by the character id), passing in args to the action method. This method can perform actions on behalf of any character, even a character that the sheet does not have data for.\ngetComputed dispatch.getComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rsee setComputed below\nsetComputed dispatch.setComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rgetComputed and setComputed are both nearly identical in how they are called, taking a character id and a property with the name of the computed property you wish to get or set, and an array of string args. Both methods return a promise that resolves with the computed value.\ncompendiumRequest dispatch.compendiumRequest({ query: string }): Promise\u0026lt;{ data: Object errors: Array\u0026lt;Error\u0026gt; extensions: Record\u0026lt;string, any\u0026gt; }\u0026gt;\rcompendiumRequest executes an AJAX request to the compendium service’s graphQL endpoint. It takes in a graphQL query string written according to the Compendium service’s schema. The query string does not need to include the ruleSystem shortName as this is set automatically according to the campaign override or sheet.json value in the Roll20 Tabletop.\ndebouncedCompendiumRequest dispatch.debouncedCompendiumRequest({ query: string }): Promise\u0026lt;{ data: Object }\u0026gt;\rLike compendiumRequest, except that calls to this method are automatically debounced (at 100ms) and grouped together into a single request to the compendium service. Note that this method will only return the requested data, it does not return errors or extensions.\ngetTokens dispatch.getTokens({ characterId: string }): Promise\u0026lt;{ selected: Token[], tokens: Token[] }\u0026gt;: Promise\u0026lt;{ selected: Token[] tokens: Token[] }\u0026gt;\rgetTokens requires a character id string and returns information about tokens on the user’s current page. The return value contains two arrays of tokens. The tokens array contains all tokens on the current page that represent the character whose id was provided to the method. The selected array contains any tokens that are currently selected, regardless of which character they represent. The returned token objects contain all of the token attributes available to the API, you can find documentation here and here.\naddToTracker dispatch.addToTracker({ tokenId?: string, custom?: { name: string img?: string } formula?: string value: string | number }): Promise\u0026lt;void\u0026gt;\raddToTracker adds or updates a single item in the turn tracker. Passing in a tokenId will add the specified token to the tracker, while passing in custom with a name and an optional image url (img) will add a custom item, not connected to any character or token. A round calculation string can be added via the optional formula parameter. value is the initiative number for the item.\naddActionsToHost dispatch.addActionsToHost({ sheetAction?: { characterId: string action: string args?: string[] } action?: string locations?: [\u0026#39;macroBar\u0026#39;] | [\u0026#39;tokenActionBar\u0026#39;] | [\u0026#39;macroBar\u0026#39;, \u0026#39;tokenActionBar\u0026#39;] actionId?: string name: string requestId?: string }): void\raddActionsToHost adds a specific action(macro) to an area of the Roll20 Tabletop UI; either the macrobar or the token action bar. Either sheetAction or action can be passed in but not both at the same time. The sheetAction arg should be passed in when an the action is to designated to a character. While the action arg should be passed in when the action is more generic.\ngetActions dispatch.getActions({ args: { characterId?: string } }): Promise\u0026lt;{ actions?: {} | { [id: string]: ActionFromHost } }\u0026gt;\rgetActions gets a specific character’s actions(macro).\nsetContainerSize dispatch.setContainerSize({ args: { width?: number height?: number } }): Promise\u0026lt;void\u0026gt;\rsetContainerSize updates the size of the container which holds the sheet shared settings. Returns a promise that can be awaited. This can be used in conjunction with something like the ResizeSensor event listener from npm: css-element-queries to automatically resize the container on the host.\nupdateTokensByCharacter dispatch.updateTokensByCharacter({ args: { characterId: string token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByCharacter updates a particular character’s default token as well as all existing tokens representing that character. Returns a promise that can be awaited.\nupdateTokensByIds dispatch.updateTokensByIds({ args: { tokenIds: array of ids as strings token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByIds updates a single or several tokens. Returns a promise that can be awaited.\nautoLinkText dispatch.autoLinkText({ args: { text: string } }): Promise\u0026lt;string\u0026gt;\rautoLinkText goes through the text to find handout names between square brackets and converts them into links with the handoutID. For example in a game with a handout named Dragon, passing in the text string of this is a [Dragon] to autoLinkText returns something similar to this is a \u0026lt;a href=\u0026quot;https://journal.roll20.net/8je02j0kd02k\u0026quot;\u0026gt;Dragon\u0026lt;/a\u0026gt;.\nopenDialogFromLink dispatch.openDialogFromLink({ args: { urlString: string } }): void\ropenDialogFromLink opens the supplied urlString through the Roll20 Tabletop.\nIf the url is for a handout, it will open the corresponding handout in the campaign. This will also check if the user opening the link has access to the handout. If the url is for a compendium, it will open a pop up to the compendium page, it will also check to ensure the user has access to view the page. If the url is for an external page, a confirmation pop up will display to warn the user that the link is for an external site and open a new tab in their main window if confirmed. ","date":"2023-09-07","id":16,"permalink":"/docs/components/dispatch/","summary":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host.","tags":[],"title":"Dispatch"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet\nUse the following steps to get started:\nInstall the Beacon SDK: Run the following command. npm i @roll20-official/beacon-sdk\rInstall dependencies: Install the dependencies for the project. npm install\rStart the Vite server: After installing the project\u0026rsquo;s dependencies, you\u0026rsquo;ll need to start the Vite server. There are two ways to do this: a. Offline Development: This method will run the Vite server with the default port and environment set to development.\nnpm run dev\rOnce this code executes successfully, you can access the Vite server at http://localhost:5173.\nThis method is useful when you do not have access to the Roll20 website or would like to work on parts of your project that do not depend on a connection to the VTT or Roll20 Characters, such as working on styling, mocking up the environment, building Vue components, testing functionality, etc.\nIn development mode, you cannot save or access existing character data or use the Beacon SDK functions that depend on VTT or Roll20 Characters functionality, such as dice rolling and token manipulation.\nb. Sandbox Development: This method will run the Vite server with the port set to 7620 and the environment set to staging mode.\nnpm run sandbox\rThis command will build the SCSS files and then run the Vite server. This will set the server up for connecting to a VTT custom sheet sandbox as well as through the sandbox in Roll20 Characters.\nTo test your changes in the VTT custom sheet sandbox, you will need to add the following to the sheet.json editor in the game settings:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 }\rUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\r","date":"2024-04-07","id":17,"permalink":"/docs/gettingstarted/quick-start-sheet-template/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet","tags":[],"title":"Quick Start Sheet Template"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet\nThis sheet uses the same steps listed in the . Immediately after implementing those three steps, you\u0026rsquo;ll add the following step:\nRun a CI check: This will run several checks to ensure your code is as optimal as possible, including formatting, linting, type checking, unit tests, and end-to-end tests. npm run ci-check\rYou can think of this command as a sanity check you can leverage when pushing a big release for your sheet!\nUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\rFor type checking with TypeScript, use the following command: npm run type-check\rFor running unit tests with Vitest, use the following command: npm run test:unit\rTo open up and develop local end-to-end tests with Cypress, use the following command: npm run test:e2e:open:local\rFor running local end-to-end tests with Cypress, use the following command: npm run test:e2e:local\rTo run CDN-hosted end-to-end tests with Cypress, use the following command: npm run test:e2e\r","date":"2024-03-07","id":18,"permalink":"/docs/gettingstarted/example-patterns-sheet/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet","tags":[],"title":"Example Patterns Sheet"},{"content":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:\nHow to Contribute Reporting Bugs If you find a bug, please report it by opening an issue in the GitHub repository. Provide as much detail as possible to help us understand and reproduce the issue.\nSuggesting Features We welcome suggestions for new features. Please open an issue in the GitHub repository with a detailed description of the feature you would like to see and why you think it would be useful.\nCode Contributions Fork the Repository: Create a personal fork of the project on GitHub.\nClone the Fork: Clone your fork to your local machine.\ngit clone Create a Branch: Create a new branch for your work.\ngit checkout -b feature-or-bugfix-description\rMake Changes: Make your changes to the codebase. Follow the existing code style and conventions.\nRun Tests: Ensure that all tests pass before submitting your changes.\nnpm run ci-check\rCommit Changes: Commit your changes with a descriptive commit message.\ngit commit -m \u0026#34;Description of your changes\u0026#34;\rPush Changes: Push your changes to your fork.\ngit push origin feature-or-bugfix-description\rCreate a Pull Request: Open a pull request from your fork to the main repository. Provide a detailed description of your changes and why they should be merged.\nRunning Tests Unit Tests: Run unit tests with Vitest.\nnpm run test:unit\rEnd-to-End Tests: Run End-to-End tests with Cypress.\nnpm run test:e2e\rCode Style Follow the existing code style and conventions.\nUse ESLint for linting.\nnpm run lint\rFormat code with Prettier.\nnpm run format\rCommunication GitHub Issues: Use GitHub issues for bug reports, feature requests, and questions. Pull Requests: Use GitHub pull requests to submit your code contributions. Thank you for contributing to the Beacon SDK project!\n","date":"2024-02-07","id":19,"permalink":"/docs/about/how-to-contribute/","summary":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:","tags":[],"title":"How to Contribute"},{"content":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform. This sheet includes all the necessary code, assets, and metadata packaged together to be easily shared, tested, and eventually deployed on Roll20.\nWhen you\u0026rsquo;re ready to test and share a sheet on Roll20, you\u0026rsquo;d want to do it in such a way that others who might need it won\u0026rsquo;t have to set it up with a local dev environment.\nThat\u0026rsquo;s what the steps below help you achieve. In this guide, you can make your sheet available in the Roll20 Tabletop and Characters.\nSteps to Release a Test Sheet The following steps will aid you while releasing your sheet:\nCreate a Build Command:\nYou must have a build command that will produce the minified production-ready code. You can find an example in our Quickstart Package JSON. The build command must be able to create these exact files:\nsheet.js sheet.css host.css (optional) Add a local folder that contains fonts and images used in the sheet (optional). Add a sheet.json file:\nAdd a sheet.json file to your sheet folder to ensure the metadata for your sheet is up-to-date. For this, you can also find an example in our Quickstart Package JSON.\nCreate a Pull Request in the Community Sheet Repo:\nIn the Community Sheet Repo, create a pull request that must include the submission checklist from our previous process.\nSubmission Checklist When submitting a new or updated sheet to Roll20, it\u0026rsquo;s essential to follow the guidelines to ensure a smooth review and approval process.\nBelow is a checklist to help you prepare your submission.\nRequired The following are the required submission checklist items:\nThe pull request title clearly contains the name of the sheet I am editing. The pull request title clearly states the type of change I am submitting (New Sheet/New Feature/Bugfix/etc.). The pull request makes changes to files in only one sub-folder. The pull request does not contain changes to any JSON files in the translations folder (translation.json is permitted). New Sheet Details You must include the following information in your sheet:\nThe name of this game is: \u0026lt; THE AETHYRBLOOD CHRONICLES \u0026gt;. The publisher of this game is: \u0026lt; HAPHAZARD PROJECTS \u0026gt; The name of this game system/family is: \u0026lt; DPS System ('dice pool scales') \u0026gt; You must also check out the following:\nI have followed the Character Sheets Standards when building this sheet. I have authorization from the game\u0026rsquo;s publisher to make this an official sheet on Roll20 with their name attached. This game is not traditionally published, but a copy of the game rules can be purchased/downloaded/found at The Aethyrblood Chronicles Core Rule Book In the pull request comments, make sure to list the email addresses of the Roll20 users you\u0026rsquo;d like to have access to the sheet.\nWe can always grant more people access to the sheet after it is released. However, you can inform us in our Official Community Sheet Development Channels on Discord.\nApproval and Access:\nAfter you create a pull request, our team will approve it and add your sheet to the sheet selection in Roll20 Tabletop and Characters. We will then give only your Roll20 user and any others you\u0026rsquo;ve listed in the pull request comments access to the sheet in Roll20. This sheet will then be available for you and others with access to test it.\nReleasing a Final Version After you have released a test version of your sheet, you can follow the same steps as releasing a test version to make your sheet available to everyone. This time, the pull request comments state that it is a final release version.\nOnce you have created the pull request, our team will review the sheet functionality, code, and metadata for consistency, best practices, and overall system security. We reserve the right to reject any sheet that does not meet our terms of use or conflicts with our partnerships.\n","date":"2024-02-07","id":20,"permalink":"/docs/gettingstarted/releasing-a-sheet/","summary":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform.","tags":[],"title":"Releasing a Sheet"},{"content":"Link to valuable, relevant resources.\n","date":"2024-02-27","id":21,"permalink":"/docs/resources/","summary":"Link to valuable, relevant resources.","tags":[],"title":"Resources"},{"content":"","date":"2023-09-07","id":22,"permalink":"/docs/","summary":"","tags":[],"title":"Docs"},{"content":"","date":"2023-09-07","id":23,"permalink":"/privacy/","summary":"","tags":[],"title":"Privacy Policy"},{"content":"","date":"2023-09-07","id":24,"permalink":"/","summary":"","tags":[],"title":"Welcome to Beacon SDK"},{"content":"","date":"0001-01-01","id":25,"permalink":"/categories/","summary":"","tags":[],"title":"Categories"},{"content":"","date":"0001-01-01","id":26,"permalink":"/contributors/","summary":"","tags":[],"title":"Contributors"},{"content":"","date":"0001-01-01","id":27,"permalink":"/tags/","summary":"","tags":[],"title":"Tags"}] \ No newline at end of file From cb8174dd3feb42a695acdc78b7c953cbc030ee95 Mon Sep 17 00:00:00 2001 From: alicekb Date: Wed, 26 Jun 2024 16:35:20 -0400 Subject: [PATCH 3/3] Build changes --- hugo_stats.json | 1 - public/404.html | 210 +- public/blog/example-post/index.html | 270 +- public/blog/index.html | 231 +- public/blog/index.xml | 21 +- public/blog/page/1/index.html | 12 +- public/blog/sitemap.xml | 11 +- public/categories/index.html | 212 +- public/categories/index.xml | 13 +- public/categories/page/1/index.html | 12 +- public/contributors/index.html | 212 +- public/contributors/index.xml | 13 +- public/contributors/page/1/index.html | 12 +- public/docs/about/changelog/index.html | 591 +- public/docs/about/faq/index.html | 560 +- public/docs/about/glossary/index.html | 588 +- .../docs/about/how-to-contribute/index.html | 703 +- public/docs/about/index.html | 403 +- public/docs/about/index.xml | 44 +- public/docs/about/sitemap.xml | 32 +- public/docs/components/actions/index.html | 567 +- public/docs/components/computed/index.html | 599 +- public/docs/components/dispatch/index.html | 1008 +- public/docs/components/handlers/index.html | 757 +- .../index.html | 544 +- public/docs/components/index.html | 421 +- public/docs/components/index.xml | 63 +- public/docs/components/initrelay/index.html | 670 +- public/docs/components/rolls/index.html | 683 +- public/docs/components/sitemap.xml | 53 +- .../example-patterns-sheet/index.html | 671 +- public/docs/gettingstarted/index.html | 409 +- public/docs/gettingstarted/index.xml | 51 +- .../installing-beacon/index.html | 654 +- .../gettingstarted/introduction/index.html | 545 +- .../quick-start-sheet-template/index.html | 668 +- .../releasing-a-sheet/index.html | 608 +- public/docs/gettingstarted/sitemap.xml | 39 +- public/docs/index.html | 474 +- public/docs/index.xml | 21 +- public/docs/resources/index.html | 487 +- public/docs/sitemap.xml | 128 +- public/index.html | 259 +- public/index.xml | 85 +- ...ab4598db045a20dc59bbe57890e0b7bc072c78.css | 1 + public/manifest.webmanifest | 2 +- public/privacy/index.html | 217 +- public/robots.txt | 2 +- public/search-index.json | 2 +- public/sitemap.xml | 143 +- public/tags/index.html | 212 +- public/tags/index.xml | 13 +- public/tags/page/1/index.html | 12 +- ...s_901a6e181e810c5c7347a10d84f037ab.content | 14464 ---------------- ...scss_901a6e181e810c5c7347a10d84f037ab.json | 1 - ...s_cdf9d7c9eb97e4550ded64a8776dd9e8.content | 2 +- ...scss_cdf9d7c9eb97e4550ded64a8776dd9e8.json | 2 +- 57 files changed, 376 insertions(+), 29312 deletions(-) create mode 100644 public/main.f93298bbfac28aad707e0176e283a289a6f111a0a8be8dc661d9c822e77de2ce0347e2155b3a776a5cc75d62eaab4598db045a20dc59bbe57890e0b7bc072c78.css delete mode 100644 resources/_gen/assets/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.content delete mode 100644 resources/_gen/assets/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.json diff --git a/hugo_stats.json b/hugo_stats.json index 49f0afb..04646aa 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -5,7 +5,6 @@ "article", "aside", "base", - "blockquote", "body", "button", "code", diff --git a/public/404.html b/public/404.html index 4d756ce..d3bc4f0 100644 --- a/public/404.html +++ b/public/404.html @@ -1,207 +1,3 @@ - - - - - - - - - - - - - - - -404 Page not found | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
-
-

Page not found :(

-

The page you are looking for doesn't exist or has been moved.

-
-
-
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +404 Page not found | Beacon SDK +
Beacon SDK +Get started

Page not found :(

The page you are looking for doesn't exist or has been moved.

\ No newline at end of file diff --git a/public/blog/example-post/index.html b/public/blog/example-post/index.html index 135caa1..df1491d 100644 --- a/public/blog/example-post/index.html +++ b/public/blog/example-post/index.html @@ -1,267 +1,3 @@ - - - - - - - - - - - - - - - -Example Post | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
-
-
-

Example Post

-

- September 7, 2023 - - - - 1 minute -

- -
-
-
-

You can use blog posts for announcing product updates and features.

Well-thought-through product announcements will help increase feature awareness and engage users with new functionality. Just like sharing your public roadmap, it’s also a great way to let potential customers see that you’re constantly improving.

-

Further reading

- - -
-
-
- - -
-
- - - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Example Post | Beacon SDK +
Beacon SDK +Get started

Example Post

September 7, 20231 minute

You can use blog posts for announcing product updates and features.

Well-thought-through product announcements will help increase feature awareness and engage users with new functionality. Just like sharing your public roadmap, it’s also a great way to let potential customers see that you’re constantly improving.

Further reading

\ No newline at end of file diff --git a/public/blog/index.html b/public/blog/index.html index 7ee3c8b..b35f1f9 100644 --- a/public/blog/index.html +++ b/public/blog/index.html @@ -1,228 +1,3 @@ - - - - - - - - - - - - - - - -Blog | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
-

Blog

-
-
-
-
-
-
-
-

Example Post

-

You can use blog posts for announcing product updates and features.

-

- September 7, 2023 - - - - 1 minute -

-
-
-
-
-
-
-
- -
-
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Blog | Beacon SDK +
Beacon SDK +Get started

Blog

Example Post

You can use blog posts for announcing product updates and features.

September 7, 20231 minute

\ No newline at end of file diff --git a/public/blog/index.xml b/public/blog/index.xml index 1794be8..a889a9d 100644 --- a/public/blog/index.xml +++ b/public/blog/index.xml @@ -1,20 +1 @@ - - - - Blog on Beacon SDK - http://localhost:1313/blog/ - Recent content in Blog on Beacon SDK - Hugo - en - Copyright (c) 2020-2024 Beacon SDK - Thu, 07 Sep 2023 16:27:22 +0200 - - - Example Post - http://localhost:1313/blog/example-post/ - Thu, 07 Sep 2023 16:27:22 +0200 - http://localhost:1313/blog/example-post/ - You can use blog posts for announcing product updates and features. - - - +Blog on Beacon SDKhttps://roll20.github.io/beacon-docs/blog/Recent content in Blog on Beacon SDKHugoenCopyright (c) 2020-2024 Beacon SDKThu, 07 Sep 2023 16:27:22 +0200Example Posthttps://roll20.github.io/beacon-docs/blog/example-post/Thu, 07 Sep 2023 16:27:22 +0200https://roll20.github.io/beacon-docs/blog/example-post/You can use blog posts for announcing product updates and features. \ No newline at end of file diff --git a/public/blog/page/1/index.html b/public/blog/page/1/index.html index a541f84..654bed8 100644 --- a/public/blog/page/1/index.html +++ b/public/blog/page/1/index.html @@ -1,10 +1,2 @@ - - - - http://localhost:1313/blog/ - - - - - - +https://roll20.github.io/beacon-docs/blog/ + \ No newline at end of file diff --git a/public/blog/sitemap.xml b/public/blog/sitemap.xml index 50c3827..7395bbe 100644 --- a/public/blog/sitemap.xml +++ b/public/blog/sitemap.xml @@ -1,10 +1 @@ - - - - http://localhost:1313/blog/example-post/ - 2023-09-07T16:27:22+02:00 - monthly - 0.5 - - \ No newline at end of file +https://roll20.github.io/beacon-docs/blog/example-post/2023-09-07T16:27:22+02:00monthly0.5 \ No newline at end of file diff --git a/public/categories/index.html b/public/categories/index.html index 1e9da91..7bf3327 100644 --- a/public/categories/index.html +++ b/public/categories/index.html @@ -1,209 +1,3 @@ - - - - - - - - - - - - - - - -Categories | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
-

Categories

-
-
- -
- -
-
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Categories | Beacon SDK +
Beacon SDK +Get started

Categories

\ No newline at end of file diff --git a/public/categories/index.xml b/public/categories/index.xml index 40d6ca1..dbbcc36 100644 --- a/public/categories/index.xml +++ b/public/categories/index.xml @@ -1,12 +1 @@ - - - - Categories on Beacon SDK - http://localhost:1313/categories/ - Recent content in Categories on Beacon SDK - Hugo - en - Copyright (c) 2020-2024 Beacon SDK - - - +Categories on Beacon SDKhttps://roll20.github.io/beacon-docs/categories/Recent content in Categories on Beacon SDKHugoenCopyright (c) 2020-2024 Beacon SDK \ No newline at end of file diff --git a/public/categories/page/1/index.html b/public/categories/page/1/index.html index b7ea490..58a1503 100644 --- a/public/categories/page/1/index.html +++ b/public/categories/page/1/index.html @@ -1,10 +1,2 @@ - - - - http://localhost:1313/categories/ - - - - - - +https://roll20.github.io/beacon-docs/categories/ + \ No newline at end of file diff --git a/public/contributors/index.html b/public/contributors/index.html index ac23e28..f514ed9 100644 --- a/public/contributors/index.html +++ b/public/contributors/index.html @@ -1,209 +1,3 @@ - - - - - - - - - - - - - - - -Contributors | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
-

Contributors

-
-
- -
- -
-
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Contributors | Beacon SDK +
Beacon SDK +Get started

Contributors

\ No newline at end of file diff --git a/public/contributors/index.xml b/public/contributors/index.xml index 5fd85a9..8f80347 100644 --- a/public/contributors/index.xml +++ b/public/contributors/index.xml @@ -1,12 +1 @@ - - - - Contributors on Beacon SDK - http://localhost:1313/contributors/ - Recent content in Contributors on Beacon SDK - Hugo - en - Copyright (c) 2020-2024 Beacon SDK - - - +Contributors on Beacon SDKhttps://roll20.github.io/beacon-docs/contributors/Recent content in Contributors on Beacon SDKHugoenCopyright (c) 2020-2024 Beacon SDK \ No newline at end of file diff --git a/public/contributors/page/1/index.html b/public/contributors/page/1/index.html index b02b9c6..38c6ae1 100644 --- a/public/contributors/page/1/index.html +++ b/public/contributors/page/1/index.html @@ -1,10 +1,2 @@ - - - - http://localhost:1313/contributors/ - - - - - - +https://roll20.github.io/beacon-docs/contributors/ + \ No newline at end of file diff --git a/public/docs/about/changelog/index.html b/public/docs/about/changelog/index.html index 33551bf..132a804 100644 --- a/public/docs/about/changelog/index.html +++ b/public/docs/about/changelog/index.html @@ -1,586 +1,5 @@ - - - - - - - - - - - - - - - -Changelog | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Changelog

- - -

Release Date: 2022-03-17

-

New Features

-
    -
  • Initial release of the Beacon SDK.
    • -
  • Support for Vue.js framework.
    • -
  • Setup with Vite for rapid development.
    • -
  • Basic and advanced sheet examples.
    • -
-

Improvements

-
    -
  • Detailed comments added to example files for better understanding.
    • -
  • Support for complex roll templates and rich sheet actions.
    • -
-

Bug Fixes

-
    -
  • N/A (initial release).
    • -
-

Version 2.0.0

-

Release Date: 2023-03-17

-

New Features

-
    -
  • SCSS support for styling.
    • -
  • Integration with Roll20 and VTT.
    • -
  • Mock Relay for offline development.
    • -
-

Improvements

-
    -
  • TypeScript integration for type checking and improved development experience.
    • -
  • Unit testing with Vitest.
    • -
  • End-to-End testing with Cypress.
    • -
-

Bug Fixes

-
    -
  • N/A (initial release).
    • -
- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Handling Legacy Macro Attributes -
-
-
-
-
-
-
-
Next
- Rolls -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Changelog | Beacon SDK +
Beacon SDK +Get started

Changelog

Release Date: 2022-03-17

New Features

  • Initial release of the Beacon SDK.
  • Support for Vue.js framework.
  • Setup with Vite for rapid development.
  • Basic and advanced sheet examples.

Improvements

  • Detailed comments added to example files for better understanding.
  • Support for complex roll templates and rich sheet actions.

Bug Fixes

  • N/A (initial release).

Version 2.0.0

Release Date: 2023-03-17

New Features

  • SCSS support for styling.
  • Integration with Roll20 and VTT.
  • Mock Relay for offline development.

Improvements

  • TypeScript integration for type checking and improved development experience.
  • Unit testing with Vitest.
  • End-to-End testing with Cypress.

Bug Fixes

  • N/A (initial release).
Prev
Handling Legacy Macro Attributes
Next
Rolls
\ No newline at end of file diff --git a/public/docs/about/faq/index.html b/public/docs/about/faq/index.html index e6dac37..a8ac2f4 100644 --- a/public/docs/about/faq/index.html +++ b/public/docs/about/faq/index.html @@ -1,557 +1,3 @@ - - - - - - - - - - - - - - - -FAQ | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

FAQ

- - -
- Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)? -

It depends on your web development skill level. There are a number of benefits to the Beacon SDK if you know how to build web applications. If you don’t know how to set up your own local environment, than the Beacon SDK might now be the first place you should start. Learn more about sheet development using the custom sheet.

-

If you have the skill to take advantage of the Beacon SDK, there are a number of improvements that will make it much easier to build characters sheets.

-

First, the Beacon SDK allows you to develop locally and preview your changes automatically in the Roll20 Tabletop and Roll20 Character sandboxes. This means that you don’t have to keep uploading your HTML and CSS into the custom sheet to see your changes.

-

Next, it allows you to develop your character sheet with all the power of JavaScript frameworks and modern web development libraries. In our example sheets, we use Vue.js, but you are free to use whatever you are most comfortable with. Also, you could use something like Cypress to create automated testing. That’s what we use in our Beacon sheets.

-

Lastly, the Beacon SDK makes it much easier for a web developer who knows JSON and Javascript to access character data and manage attributes on the character. If you’re familiar with the custom sheet, you no longer have to deal with sheet workers to get the data you need for a character. Also, the Beacon SDK introduces nested and computed attributes that make complex data models for your character sheet easier to create and maintain.

-
-
- Q: I’m not really a web developer, should I use Beacon or the custom sheet to make a my own character sheet? -

That is up to you and your comfort level. If you’re looking to learn more about web development, building a character sheet with the Beacon SDK is a great way to level up your skills. What you learn during this process can be taken with you into any other web development project you work on in the future.

-

If setting up your own development environment is too intimidating for you, than it might be easier for you to start with the custom sheet and to go from there.

-
-
- Q: I’m interested in using Beacon, but I don’t know the basics of setting up a local environment. Where can I go to learn more about web development? -

You can start learning how to build a local development environment by reading or watching the following tutorials. Note: these are not tutorials that we’ve produced, but we have found them helpful in getting started with web development.

-
-
- Q: Now that Roll20 has acquired Demiplane, will you continue to support character sheets built on Beacon? -

The recent acquisition of Demiplane brings exciting new opportunities for character sheets and compendiums on Roll20. At the same time, we are fully committed to supporting the Beacon SDK and character sheets that are built in our new advanced sheets ecosystem on Roll20. In fact, we believe that the Beacon SDK will be a key component of our future plans for Demiplane integration. In addition, our new D&D 2024 sheet is built on top of the Beacon SDK, and we will continue to utilize it to build first-class experiences on Roll20.

-

In short, you can rest assured that the Beacon SDK is an important tool in our toolbox moving forward.

-
-
- Q: What are actions in the context of Beacon? - Actions are methods executed in the chat log of Roll20 Tabletop or Roll20 Characters, often used for rolls triggered from macros or chat buttons. They are defined in the sheet’s configuration and can interact with character data.
-
- Q: How are computed properties used in Roll20? - Computed properties are attributes which are accessible by users of your character sheet. They are usable in macros to create custom rolls or common actions for each character. Computed properties can represent derived values or complex calculations based on character data.
-
- Q: What is the dispatch function used for? - The dispatch function provides methods for sending commands from the character sheet back to Roll20, including updating character data, performing actions, and interacting with the interface.
-
- Q: What are roll buttons, and how do they work? - Roll buttons are HTML elements with specific attributes that execute designated sheet actions when clicked. They can pass arguments to the action method and are commonly used for triggering rolls from the character sheet.
-
- Q: How are legacy attributes handled in Beacon? - Beacon gives you the ability to transition your legacy attributes to new attributes you create in Beacon. This means that when a user updates their sheet to the new Beacon sheet, their legacy attribute can be mapped to Beacon attributes using the convertLegacyMacroAttributes function. Sheet developers can define how to handle legacy attribute values to ensure compatibility with existing macros.
-
- Q: What is the purpose of the query function? - The query function displays a SweetAlert2 prompt to users and returns the results along with any errors. It is commonly used for interactive prompts or confirmations within the VTT interface.
-
- Q: How are tokens managed in the VTT? - Tokens represent characters or objects on Roll20 Tabletop (VTT). Functions like getTokens, updateTokensByCharacter, and addToTracker are used to retrieve token information, update token data, and manage tokens in the turn tracker.
-
- Q: What is the role of the convertLegacyMacroAttributesArgs type? - The convertLegacyMacroAttributesArgs type defines the arguments used for handling legacy macro attributes. It includes the attribute name, character ID, and character data needed for mapping legacy attributes to the new sheet structure.
- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Glossary -
-
-
-
-
-
-
-
Next
- InitRelay -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +FAQ | Beacon SDK +
Beacon SDK +Get started

FAQ

Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)?

It depends on your web development skill level. There are a number of benefits to the Beacon SDK if you know how to build web applications. If you don’t know how to set up your own local environment, than the Beacon SDK might now be the first place you should start. Learn more about sheet development using the custom sheet.

If you have the skill to take advantage of the Beacon SDK, there are a number of improvements that will make it much easier to build characters sheets.

First, the Beacon SDK allows you to develop locally and preview your changes automatically in the Roll20 Tabletop and Roll20 Character sandboxes. This means that you don’t have to keep uploading your HTML and CSS into the custom sheet to see your changes.

Next, it allows you to develop your character sheet with all the power of JavaScript frameworks and modern web development libraries. In our example sheets, we use Vue.js, but you are free to use whatever you are most comfortable with. Also, you could use something like Cypress to create automated testing. That’s what we use in our Beacon sheets.

Lastly, the Beacon SDK makes it much easier for a web developer who knows JSON and Javascript to access character data and manage attributes on the character. If you’re familiar with the custom sheet, you no longer have to deal with sheet workers to get the data you need for a character. Also, the Beacon SDK introduces nested and computed attributes that make complex data models for your character sheet easier to create and maintain.

Q: I’m not really a web developer, should I use Beacon or the custom sheet to make a my own character sheet?

That is up to you and your comfort level. If you’re looking to learn more about web development, building a character sheet with the Beacon SDK is a great way to level up your skills. What you learn during this process can be taken with you into any other web development project you work on in the future.

If setting up your own development environment is too intimidating for you, than it might be easier for you to start with the custom sheet and to go from there.

Q: I’m interested in using Beacon, but I don’t know the basics of setting up a local environment. Where can I go to learn more about web development?

You can start learning how to build a local development environment by reading or watching the following tutorials. Note: these are not tutorials that we’ve produced, but we have found them helpful in getting started with web development.

Q: Now that Roll20 has acquired Demiplane, will you continue to support character sheets built on Beacon?

The recent acquisition of Demiplane brings exciting new opportunities for character sheets and compendiums on Roll20. At the same time, we are fully committed to supporting the Beacon SDK and character sheets that are built in our new advanced sheets ecosystem on Roll20. In fact, we believe that the Beacon SDK will be a key component of our future plans for Demiplane integration. In addition, our new D&D 2024 sheet is built on top of the Beacon SDK, and we will continue to utilize it to build first-class experiences on Roll20.

In short, you can rest assured that the Beacon SDK is an important tool in our toolbox moving forward.

Q: What are actions in the context of Beacon?Actions are methods executed in the chat log of Roll20 Tabletop or Roll20 Characters, often used for rolls triggered from macros or chat buttons. They are defined in the sheet’s configuration and can interact with character data.
Q: How are computed properties used in Roll20?Computed properties are attributes which are accessible by users of your character sheet. They are usable in macros to create custom rolls or common actions for each character. Computed properties can represent derived values or complex calculations based on character data.
Q: What is the dispatch function used for?The dispatch function provides methods for sending commands from the character sheet back to Roll20, including updating character data, performing actions, and interacting with the interface.
Q: What are roll buttons, and how do they work?Roll buttons are HTML elements with specific attributes that execute designated sheet actions when clicked. They can pass arguments to the action method and are commonly used for triggering rolls from the character sheet.
Q: How are legacy attributes handled in Beacon?Beacon gives you the ability to transition your legacy attributes to new attributes you create in Beacon. This means that when a user updates their sheet to the new Beacon sheet, their legacy attribute can be mapped to Beacon attributes using the convertLegacyMacroAttributes function. Sheet developers can define how to handle legacy attribute values to ensure compatibility with existing macros.
Q: What is the purpose of the query function?The query function displays a SweetAlert2 prompt to users and returns the results along with any errors. It is commonly used for interactive prompts or confirmations within the VTT interface.
Q: How are tokens managed in the VTT?Tokens represent characters or objects on Roll20 Tabletop (VTT). Functions like getTokens, updateTokensByCharacter, and addToTracker are used to retrieve token information, update token data, and manage tokens in the turn tracker.
Q: What is the role of the convertLegacyMacroAttributesArgs type?The convertLegacyMacroAttributesArgs type defines the arguments used for handling legacy macro attributes. It includes the attribute name, character ID, and character data needed for mapping legacy attributes to the new sheet structure.
Prev
Glossary
Next
InitRelay
\ No newline at end of file diff --git a/public/docs/about/glossary/index.html b/public/docs/about/glossary/index.html index 9fe7f0e..fda2320 100644 --- a/public/docs/about/glossary/index.html +++ b/public/docs/about/glossary/index.html @@ -1,583 +1,5 @@ - - - - - - - - - - - - - - - -Glossary | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Glossary

- - -

Background:

-

The background color of the alert box.

-

Character:

-

An entity in the game with attributes, bio, GM notes, and a token representation.

-

Character sheet:

-

A digital or printed page used to track a character’s attributes, abilities, and other relevant information in a role-playing game.

-

Computed Property:

-

Properties that have both get and set methods, which can be dynamically calculated.

-

ConvertLegacyMacroAttributes:

-

A function to handle mapping legacy macro attributes to the new Beacon Sheet format.

-

Dispatch:

-

A set of functions enabling the sheet to send commands back to the VTT.

-

GM (Game Master):

-

The person who runs the game, controls the NPCs & the story, and provides challenges for the players.

-

Handler:

-

Methods that act as event handlers to process messages from the host.

-

InitRelay:

-

Function to initialize the SDK relay, setting up communication between the host and the character sheet.

-

Macro:

-

A script that automates repetitive tasks in the VTT.

-

Roll Template:

-

A predefined format for displaying the results of a dice roll.

-

Token:

-

A visual representation of a character or object on the virtual tabletop, with various properties like position, size, and attributes.

-

VTT (Virtual Tabletop):

-

An online platform that allows players to play tabletop role-playing games over the internet.

-

ValidationMessage:

-

A message displayed when an input value does not meet specific criteria.

-

Quantum Roll:

-

A system that ensures the fairness and authenticity of dice rolls in the VTT by using cryptographic methods.

- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Installing Beacon -
-
-
-
-
-
-
-
Next
- FAQ -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Glossary | Beacon SDK +
Beacon SDK +Get started

Glossary

Background:

The background color of the alert box.

Character:

An entity in the game with attributes, bio, GM notes, and a token representation.

Character sheet:

A digital or printed page used to track a character’s attributes, abilities, and other relevant information in a role-playing game.

Computed Property:

Properties that have both get and set methods, which can be dynamically calculated.

ConvertLegacyMacroAttributes:

A function to handle mapping legacy macro attributes to the new Beacon Sheet format.

Dispatch:

A set of functions enabling the sheet to send commands back to the VTT.

GM (Game Master):

The person who runs the game, controls the NPCs & the story, and provides challenges for the players.

Handler:

Methods that act as event handlers to process messages from the host.

InitRelay:

Function to initialize the SDK relay, setting up communication between the host and the character sheet.

Macro:

A script that automates repetitive tasks in the VTT.

Roll Template:

A predefined format for displaying the results of a dice roll.

Token:

A visual representation of a character or object on the virtual tabletop, with various properties like position, size, and attributes.

VTT (Virtual Tabletop):

An online platform that allows players to play tabletop role-playing games over the internet.

ValidationMessage:

A message displayed when an input value does not meet specific criteria.

Quantum Roll:

A system that ensures the fairness and authenticity of dice rolls in the VTT by using cryptographic methods.

Prev
Installing Beacon
Next
FAQ
\ No newline at end of file diff --git a/public/docs/about/how-to-contribute/index.html b/public/docs/about/how-to-contribute/index.html index 2416d65..c15ff63 100644 --- a/public/docs/about/how-to-contribute/index.html +++ b/public/docs/about/how-to-contribute/index.html @@ -1,700 +1,3 @@ - - - - - - - - - - - - - - - -How to Contribute | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

How to Contribute

- - -

We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:

-

How to Contribute

-

Reporting Bugs

-

If you find a bug, please report it by opening an issue in the GitHub repository. Provide as much detail as possible to help us understand and reproduce the issue.

-

Suggesting Features

-

We welcome suggestions for new features. Please open an issue in the GitHub repository with a detailed description of the feature you would like to see and why you think it would be useful.

-

Code Contributions

-
    -
  1. -

    Fork the Repository: Create a personal fork of the project on GitHub.

    -
    2. -
  2. -

    Clone the Fork: Clone your fork to your local machine.

    - - - -
    -
    -
    - -
    - 
    git clone
    -
    -
    -
    3. -
  3. -

    Create a Branch: Create a new branch for your work.

    - - - -
    -
    -
    - -
    - 
    git checkout -b feature-or-bugfix-description
    -
    -
    -
    4. -
  4. -

    Make Changes: Make your changes to the codebase. Follow the existing code style and conventions.

    -
    5. -
  5. -

    Run Tests: Ensure that all tests pass before submitting your changes.

    - - - -
    -
    -
    - -
    - 
    npm run ci-check
    -
    -
    -
    6. -
  6. -

    Commit Changes: Commit your changes with a descriptive commit message.

    - - - -
    -
    -
    - -
    - 
    git commit -m "Description of your changes"
    -
    -
    -
    7. -
  7. -

    Push Changes: Push your changes to your fork.

    - - - -
    -
    -
    - -
    - 
    git push origin feature-or-bugfix-description
    -
    -
    -
    8. -
  8. -

    Create a Pull Request: Open a pull request from your fork to the main repository. Provide a detailed description of your changes and why they should be merged.

    -
    9. -
-

Running Tests

-
    -
  • -

    Unit Tests: Run unit tests with Vitest.

    - - - -
    -
    -
    - -
    - 
    npm run test:unit
    -
    -
    -
    • -
  • -

    End-to-End Tests: Run End-to-End tests with Cypress.

    - - - -
    -
    -
    - -
    - 
    npm run test:e2e
    -
    -
    -
    • -
-

Code Style

-
    -
  • -

    Follow the existing code style and conventions.

    -
    • -
  • -

    Use ESLint for linting.

    - - - -
    -
    -
    - -
    - 
    npm run lint
    -
    -
    -
    • -
  • -

    Format code with Prettier.

    - - - -
    -
    -
    - -
    - 
    npm run format
    -
    -
    -
    • -
-

Communication

-
    -
  • GitHub Issues: Use GitHub issues for bug reports, feature requests, and questions.
    • -
  • Pull Requests: Use GitHub pull requests to submit your code contributions.
    • -
-

Thank you for contributing to the Beacon SDK project!

- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Example Patterns Sheet -
-
-
-
-
-
-
-
Next
- Releasing a Sheet -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +How to Contribute | Beacon SDK +
Beacon SDK +Get started

How to Contribute

We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:

How to Contribute

Reporting Bugs

If you find a bug, please report it by opening an issue in the GitHub repository. Provide as much detail as possible to help us understand and reproduce the issue.

Suggesting Features

We welcome suggestions for new features. Please open an issue in the GitHub repository with a detailed description of the feature you would like to see and why you think it would be useful.

Code Contributions

  1. Fork the Repository: Create a personal fork of the project on GitHub.

  2. Clone the Fork: Clone your fork to your local machine.

    git clone

  3. Create a Branch: Create a new branch for your work.

    git checkout -b feature-or-bugfix-description

  4. Make Changes: Make your changes to the codebase. Follow the existing code style and conventions.

  5. Run Tests: Ensure that all tests pass before submitting your changes.

    npm run ci-check

  6. Commit Changes: Commit your changes with a descriptive commit message.

    git commit -m "Description of your changes"

  7. Push Changes: Push your changes to your fork.

    git push origin feature-or-bugfix-description

  8. Create a Pull Request: Open a pull request from your fork to the main repository. Provide a detailed description of your changes and why they should be merged.

Running Tests

  • Unit Tests: Run unit tests with Vitest.

    npm run test:unit

  • End-to-End Tests: Run End-to-End tests with Cypress.

    npm run test:e2e

Code Style

  • Follow the existing code style and conventions.

  • Use ESLint for linting.

    npm run lint

  • Format code with Prettier.

    npm run format

Communication

  • GitHub Issues: Use GitHub issues for bug reports, feature requests, and questions.
  • Pull Requests: Use GitHub pull requests to submit your code contributions.

Thank you for contributing to the Beacon SDK project!

Prev
Example Patterns Sheet
Next
Releasing a Sheet
\ No newline at end of file diff --git a/public/docs/about/index.html b/public/docs/about/index.html index 78a2c49..f8aa7f8 100644 --- a/public/docs/about/index.html +++ b/public/docs/about/index.html @@ -1,400 +1,3 @@ - - - - - - - - - - - - - - - -About | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- -
-
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +About | Beacon SDK +
Beacon SDK +Get started
\ No newline at end of file diff --git a/public/docs/about/index.xml b/public/docs/about/index.xml index c14ab05..1a118ad 100644 --- a/public/docs/about/index.xml +++ b/public/docs/about/index.xml @@ -1,41 +1,3 @@ - - - - About on Beacon SDK - http://localhost:1313/docs/about/ - Recent content in About on Beacon SDK - Hugo - en - Copyright (c) 2020-2024 Beacon SDK - Sat, 07 Sep 2024 16:13:18 +0200 - - - Glossary - http://localhost:1313/docs/about/glossary/ - Thu, 07 Mar 2024 16:04:48 +0200 - http://localhost:1313/docs/about/glossary/ - Background: The background color of the alert box. Character: An entity in the game with attributes, bio, GM notes, and a token representation. - - - FAQ - http://localhost:1313/docs/about/faq/ - Sun, 07 Jan 2024 16:04:48 +0200 - http://localhost:1313/docs/about/faq/ - Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)? It depends on your web development skill level. - - - Changelog - http://localhost:1313/docs/about/changelog/ - Sun, 07 Jan 2024 16:12:37 +0200 - http://localhost:1313/docs/about/changelog/ - Release Date: 2022-03-17 New Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development. - - - How to Contribute - http://localhost:1313/docs/about/how-to-contribute/ - Wed, 07 Feb 2024 16:13:18 +0200 - http://localhost:1313/docs/about/how-to-contribute/ - We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started: - - - +About on Beacon SDKhttps://roll20.github.io/beacon-docs/docs/about/Recent content in About on Beacon SDKHugoenCopyright (c) 2020-2024 Beacon SDKSat, 07 Sep 2024 16:13:18 +0200Glossaryhttps://roll20.github.io/beacon-docs/docs/about/glossary/Thu, 07 Mar 2024 16:04:48 +0200https://roll20.github.io/beacon-docs/docs/about/glossary/Background: The background color of the alert box. +Character: An entity in the game with attributes, bio, GM notes, and a token representation.FAQhttps://roll20.github.io/beacon-docs/docs/about/faq/Sun, 07 Jan 2024 16:04:48 +0200https://roll20.github.io/beacon-docs/docs/about/faq/Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)? It depends on your web development skill level.Changeloghttps://roll20.github.io/beacon-docs/docs/about/changelog/Sun, 07 Jan 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/about/changelog/Release Date: 2022-03-17 +New Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development.How to Contributehttps://roll20.github.io/beacon-docs/docs/about/how-to-contribute/Wed, 07 Feb 2024 16:13:18 +0200https://roll20.github.io/beacon-docs/docs/about/how-to-contribute/We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started: \ No newline at end of file diff --git a/public/docs/about/sitemap.xml b/public/docs/about/sitemap.xml index 769f328..2cc6348 100644 --- a/public/docs/about/sitemap.xml +++ b/public/docs/about/sitemap.xml @@ -1,31 +1 @@ - - - - http://localhost:1313/docs/about/glossary/ - 2024-02-07T16:04:48+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/about/faq/ - 2024-02-07T16:04:48+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/about/changelog/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/about/how-to-contribute/ - 2024-09-07T16:13:18+02:00 - monthly - 0.5 - - \ No newline at end of file +https://roll20.github.io/beacon-docs/docs/about/glossary/2024-02-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/faq/2024-02-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/changelog/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/how-to-contribute/2024-09-07T16:13:18+02:00monthly0.5 \ No newline at end of file diff --git a/public/docs/components/actions/index.html b/public/docs/components/actions/index.html index 215a772..6279f1f 100644 --- a/public/docs/components/actions/index.html +++ b/public/docs/components/actions/index.html @@ -1,552 +1,15 @@ - - - - - - - - - - - - - - - -Actions | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Actions

- - - - - -
-
-
- -
- 
initRelay({
-  //...other methods
-    actions: {},
-}): Promise<Dispatch>
-
-
-

Actions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions.

- - - -
-
-
- -
- 
actions: {
-  [name: string]: {
-    method: (props: {
-      dispatch: Dispatch,
-      character: Character,
-      messageId?: string,
-      rolls?: RollResults 
-    }, ...args: string[]): void | Promise<void>
-  }
-}
-
-
-

Actions are passed into the initRelay function in an object, where the keys are the unique names of the actions, and the values are objects containing a method property (additional metadata fields may be added to this object in the future).

-

The action’s method receives a props object from the host containing the following properties:

-
    -
  • dispatch: A Dispatch object.
    • -
  • character: The data of the character performing the action. Currently, the action will not receive the character’s bio or GM notes, regardless of whether the player has access to those fields.
    • -
  • messageId (optional): A unique ID for an existing chat message. It’s included in actions triggered from chat buttons to provide context for the original roll.
    • -
  • rolls (optional): Included when action is triggered from a chat button. Contains the roll results of the original roll.
    • -
-

These methods can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these methods can be synchronous or asynchronous and do not return a value.

- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- InitRelay -
-
-
-
-
-
-
-
Next
- Computed -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Actions | Beacon SDK +
Beacon SDK +Get started

Actions

initRelay({
+  //...other methods
+    actions: {},
+}): Promise<Dispatch>

Actions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions.

actions: {
+  [name: string]: {
+    method: (props: {
+      dispatch: Dispatch,
+      character: Character,
+      messageId?: string,
+      rolls?: RollResults 
+    }, ...args: string[]): void | Promise<void>
+  }
+}

Actions are passed into the initRelay function in an object, where the keys are the unique names of the actions, and the values are objects containing a method property (additional metadata fields may be added to this object in the future).

The action’s method receives a props object from the host containing the following properties:

  • dispatch: A Dispatch object.
  • character: The data of the character performing the action. Currently, the action will not receive the character’s bio or GM notes, regardless of whether the player has access to those fields.
  • messageId (optional): A unique ID for an existing chat message. It’s included in actions triggered from chat buttons to provide context for the original roll.
  • rolls (optional): Included when action is triggered from a chat button. Contains the roll results of the original roll.

These methods can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these methods can be synchronous or asynchronous and do not return a value.

Prev
InitRelay
Next
Computed
\ No newline at end of file diff --git a/public/docs/components/computed/index.html b/public/docs/components/computed/index.html index 50dc972..d21932e 100644 --- a/public/docs/components/computed/index.html +++ b/public/docs/components/computed/index.html @@ -1,575 +1,24 @@ - - - - - - - - - - - - - - - -Computed | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Computed

- - -

Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.

- - - -
-
-
- -
- 
initRelay({
-  //...other methods
-  computed: {
-    [name: string]: {
-      tokenBarValue?: boolean
-      description?: string
-      get: (
-        props: {
-          character: Character
-        },
-        ...args: string[]
-      ) => string | number | JSONValue
-      set?: (
-        props: {
-          character: Character
-          dispatch: Dispatch
-        },
-        ...args: string[]
-      ) => void | Promise<void>
-    }
-  },
-}): Promise<Dispatch>
-
-
-

Computed properties are passed into the initRelay function in an object where the keys are the names of the properties, and the value should be an object containing the following:

-
    -
  • get (required): It receives character data along with any number of string parameters and should return the computed value.
    • -
  • tokenBarValue (optional): A boolean indicating whether this property should be available for use in token bars.
    • -
  • description (optional): A text value indicating what this computed summary property represents.
    • -
  • set (optional): This method receives character data and a dispatch, along with string arguments. This method does not need to return a value.
    • -
-
- -
- -
-
    -
  • Setting tokenBarValue to true will make the property available to use as a value for token bars. To work correctly, the get function must not rely on any additional arguments and must return either a simple value (a string or number) or an object:
    • -
- - - -
-
-
- -
- 
 { current: number | string, max: number | string }
-
-
-
    -
  • If the set function is omitted, the value will not be editable from the token itself. If defined, set methods will receive one string argument, which is whatever the user types into the input for modifying the bar.
    • -
- -
-
-
- - -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Actions -
-
-
-
-
-
-
-
Next
- Handlers -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Computed | Beacon SDK +
Beacon SDK +Get started

Computed

Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.

initRelay({
+  //...other methods
+  computed: {
+    [name: string]: {
+      tokenBarValue?: boolean
+      description?: string
+      get: (
+        props: {
+          character: Character
+        },
+        ...args: string[]
+      ) => string | number | JSONValue
+      set?: (
+        props: {
+          character: Character
+          dispatch: Dispatch
+        },
+        ...args: string[]
+      ) => void | Promise<void>
+    }
+  },
+}): Promise<Dispatch>

Computed properties are passed into the initRelay function in an object where the keys are the names of the properties, and the value should be an object containing the following:

  • get (required): It receives character data along with any number of string parameters and should return the computed value.
  • tokenBarValue (optional): A boolean indicating whether this property should be available for use in token bars.
  • description (optional): A text value indicating what this computed summary property represents.
  • set (optional): This method receives character data and a dispatch, along with string arguments. This method does not need to return a value.
  • Setting tokenBarValue to true will make the property available to use as a value for token bars. To work correctly, the get function must not rely on any additional arguments and must return either a simple value (a string or number) or an object:
 { current: number | string, max: number | string }
  • If the set function is omitted, the value will not be editable from the token itself. If defined, set methods will receive one string argument, which is whatever the user types into the input for modifying the bar.
Prev
Actions
Next
Handlers
\ No newline at end of file diff --git a/public/docs/components/dispatch/index.html b/public/docs/components/dispatch/index.html index aa3a146..75ec3a3 100644 --- a/public/docs/components/dispatch/index.html +++ b/public/docs/components/dispatch/index.html @@ -1,895 +1,113 @@ - - - - - - - - - - - - - - - -Dispatch | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Dispatch

- - -

The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host. Except when specified every method below will return a promise.

-

update

- - - -
-
-
- -
- 
dispatch.update({
-  options: { overwrite?: boolean }
-  character: Partial<Character>
-}): Promise<void>
-
-
-

The update method sends character changes to the host (Roll20 Tabletop or Roll20 Characters) to be persisted. The partial character passed in here must contain the character’s id, and can contain any combination of the attributes, bio, and gmNotes properties. When updating a character’s attributes, only include those attributes that have changed.

-

updateCharacter

- - - -
-
-
- -
- 
dispatch.updateCharacter({
-  character: Partial<Character>
-}): Promise<void>
-
-
-

Like the update method, updateCharacter sends character changes to the host page (Roll20 Tabletop or Roll20 Characters) to be persisted. However, this method takes a full set of character attributes as the character argument, and automatically computes the diff with existing character attributes, so that only changed attributes are sent to the data store.

-

roll

- - - -
-
-
- -
- 
dispatch.roll({
-  rolls: { [rollName: string]: string } // Ex. {attack: '1d20+4', damage: `3d6+2`}
-  messageId?: string
-}): Promise<{messageId: string, results: RollResults }>
-
-
-

The roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings. messageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResult (see Types). The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.

-

post

- - - -
-
-
- -
- 
dispatch.post({
-  characterId: string,
-  messageId?: string,
-  content: string,
-  options?: {
-    whisper?: 'gm',
-    secret?: boolean,
-  }
-}): Promise<string>
-
-
-

post posts a message to chat, either creating a new message or overwriting an existing one. It requires a character id and message content, a string containing either plain text or HTML to be posted. The method also accepts an options object. Currently, only whisper and secret are supported, the only valid value for whisper is gm, which will send the message as a whisper to the gm. The secret option is ignored unless whisper is also set, toggling to true will cause the message to not be visible to the controlling player. Like roll, messageId can be provided to update an existing chat message, but if omitted the method will generate a new messageId and post a new chat message. The method returns the messageId.

-

query

- - - -
-
-
- -
- 
dispatch.query(options: Swal2Options): {
-  isConfirmed: boolean,
-  isDenied: boolean,
-  isDismissed: boolean,
-  value?: string | number,
-  dismiss?: "cancel" | "backdrop" | "close" | "esc" | "timer",
-  errors?: string[],
-}: Promise<{
-  results: {
-    isConfirmed: boolean
-    isDenied: boolean
-    isDismissed: boolean
-    value: string | number
-    dismiss: string
-  },
-  errors: [string]
-}>
-
-
-

The query method takes an options object and uses them to display a SweetAlert2 prompt to the user. It returns the results of the query as a SweetAlertResult, along with any errors encountered. The options work exactly as described in the documentation for SweetAlert2, however not all options are allowed. Here is a list of the allowed options:

-

titleText, text, iconColor, input, width, padding, background, position, grow, timer, timerProgressBar, showConfirmButton, showDenyButton, showCancelButton, ariaLabel, confirmButtonText, denyButtonText, cancelButtonText, confirmButtonAriaLabel, confirmButtonColor, cancelButtonAriaLabel, cancelButtonColor, denyButtonAriaLabel, denyButtonColor, reverseButtons, showCloseButton, closeButtonAriaLabel, returnInputValueOnDeny, imageUrl, imageWidth, imageHeight, imageAlt, inputLabel, inputPlaceholder, inputValue, inputOptions, inputPlaceholder, inputAutoTrim, inputAttributes, validationMessage, progressSteps, currentProgressStep, progressStepsDistance.

-

Perform

- - - -
-
-
- -
- 
dispatch.perform({
-  characterId: string,
-  action: string,
-  args: string[],
-}): Promise<void>;
-
-
-

perform executes the specified action on behalf of the character (designated by the character id), passing in args to the action method. This method can perform actions on behalf of any character, even a character that the sheet does not have data for.

-

getComputed

- - - -
-
-
- -
- 
dispatch.getComputed({
-  characterId: string,
-  property: string,
-  args: string[]
-}): Promise<string | number | object>
-
-
-

see setComputed below

-

setComputed

- - - -
-
-
- -
- 
dispatch.setComputed({
-  characterId: string,
-  property: string,
-  args: string[]
-}): Promise<string | number | object>
-
-
-

getComputed and setComputed are both nearly identical in how they are called, taking a character id and a property with the name of the computed property you wish to get or set, and an array of string args. Both methods return a promise that resolves with the computed value.

-

compendiumRequest

- - - -
-
-
- -
- 
dispatch.compendiumRequest({ 
-  query: string
-}): Promise<{
-  data: Object
-  errors: Array<Error>
-  extensions: Record<string, any>
-}>
-
-
-

compendiumRequest executes an AJAX request to the compendium service’s graphQL endpoint. It takes in a graphQL query string written according to the Compendium service’s schema. The query string does not need to include the ruleSystem shortName as this is set automatically according to the campaign override or sheet.json value in the Roll20 Tabletop.

-

debouncedCompendiumRequest

- - - -
-
-
- -
- 
dispatch.debouncedCompendiumRequest({ 
-  query: string
-}): Promise<{
-  data: Object
-}>
-
-
-

Like compendiumRequest, except that calls to this method are automatically debounced (at 100ms) and grouped together into a single request to the compendium service. Note that this method will only return the requested data, it does not return errors or extensions.

-

getTokens

- - - -
-
-
- -
- 
dispatch.getTokens({
-  characterId: string
-}): Promise<{
-  selected: Token[],
-  tokens: Token[]
-}>: Promise<{
-  selected: Token[]
-  tokens: Token[]
-}>
-
-
-

getTokens requires a character id string and returns information about tokens on the user’s current page. The return value contains two arrays of tokens. The tokens array contains all tokens on the current page that represent the character whose id was provided to the method. The selected array contains any tokens that are currently selected, regardless of which character they represent. The returned token objects contain all of the token attributes available to the API, you can find documentation here and here.

-

addToTracker

- - - -
-
-
- -
- 
dispatch.addToTracker({
-  tokenId?: string,
-  custom?: {
-    name: string
-    img?: string
-  }
-  formula?: string
-  value: string | number
-}): Promise<void>
-
-
-

addToTracker adds or updates a single item in the turn tracker. Passing in a tokenId will add the specified token to the tracker, while passing in custom with a name and an optional image url (img) will add a custom item, not connected to any character or token. A round calculation string can be added via the optional formula parameter. value is the initiative number for the item.

-

addActionsToHost

- - - -
-
-
- -
- 
dispatch.addActionsToHost({
-  sheetAction?: {
-    characterId: string
-    action: string
-    args?: string[]
-  }
-  action?: string
-  locations?: ['macroBar'] | ['tokenActionBar'] | ['macroBar', 'tokenActionBar']
-  actionId?: string
-  name: string
-  requestId?: string
-}): void
-
-
-

addActionsToHost adds a specific action(macro) to an area of the Roll20 Tabletop UI; either the macrobar or the token action bar. Either sheetAction or action can be passed in but not both at the same time. The sheetAction arg should be passed in when an the action is to designated to a character. While the action arg should be passed in when the action is more generic.

-

getActions

- - - -
-
-
- -
- 
dispatch.getActions({
-  args: {
-     characterId?: string
-  }
-}): Promise<{
-  actions?: {} | { [id: string]: ActionFromHost }
-}>
-
-
-

getActions gets a specific character’s actions(macro).

-

setContainerSize

- - - -
-
-
- -
- 
dispatch.setContainerSize({
-  args: { 
-    width?: number
-    height?: number 
-  }
-}): Promise<void>
-
-
-

setContainerSize updates the size of the container which holds the sheet shared settings. Returns a promise that can be awaited. This can be used in conjunction with something like the ResizeSensor event listener from npm: css-element-queries to automatically resize the container on the host.

-

updateTokensByCharacter

- - - -
-
-
- -
- 
dispatch.updateTokensByCharacter({
-  args: { 
-    characterId: string
-    token: Partial<Token>
-  }
-}): Promise<void>
-
-
-

updateTokensByCharacter updates a particular character’s default token as well as all existing tokens representing that character. Returns a promise that can be awaited.

-

updateTokensByIds

- - - -
-
-
- -
- 
dispatch.updateTokensByIds({
-  args: { 
-      tokenIds: array of ids as strings
-      token: Partial<Token>
-  }
-}): Promise<void>
-
-
-

updateTokensByIds updates a single or several tokens. Returns a promise that can be awaited.

-

autoLinkText

- - - -
-
-
- -
- 
dispatch.autoLinkText({
-  args: { 
-      text: string
-  }
-}): Promise<string>
-
-
-

autoLinkText goes through the text to find handout names between square brackets and converts them into links with the handoutID. For example in a game with a handout named Dragon, passing in the text string of this is a [Dragon] to autoLinkText returns something similar to this is a <a href="https://journal.roll20.net/8je02j0kd02k">Dragon</a>.

- - - - -
-
-
- -
- 
dispatch.openDialogFromLink({
-  args: { 
-      urlString: string
-  }
-}): void
-
-
-

openDialogFromLink opens the supplied urlString through the Roll20 Tabletop.

-
    -
  • If the url is for a handout, it will open the corresponding handout in the campaign. This will also check if the user opening the link has access to the handout.
    • -
  • If the url is for a compendium, it will open a pop up to the compendium page, it will also check to ensure the user has access to view the page.
    • -
  • If the url is for an external page, a confirmation pop up will display to warn the user that the link is for an external site and open a new tab in their main window if confirmed.
    • -
- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Rolls -
-
-
-
-
-
-
-
Next
- Quick Start Sheet Template -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Dispatch | Beacon SDK +
Beacon SDK +Get started

Dispatch

The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host. Except when specified every method below will return a promise.

update

dispatch.update({
+  options: { overwrite?: boolean }
+  character: Partial<Character>
+}): Promise<void>

The update method sends character changes to the host (Roll20 Tabletop or Roll20 Characters) to be persisted. The partial character passed in here must contain the character’s id, and can contain any combination of the attributes, bio, and gmNotes properties. When updating a character’s attributes, only include those attributes that have changed.

updateCharacter

dispatch.updateCharacter({
+  character: Partial<Character>
+}): Promise<void>

Like the update method, updateCharacter sends character changes to the host page (Roll20 Tabletop or Roll20 Characters) to be persisted. However, this method takes a full set of character attributes as the character argument, and automatically computes the diff with existing character attributes, so that only changed attributes are sent to the data store.

roll

dispatch.roll({
+  rolls: { [rollName: string]: string } // Ex. {attack: '1d20+4', damage: `3d6+2`}
+  messageId?: string
+}): Promise<{messageId: string, results: RollResults }>

The roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings. messageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResult (see Types). The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.

post

dispatch.post({
+  characterId: string,
+  messageId?: string,
+  content: string,
+  options?: {
+    whisper?: 'gm',
+    secret?: boolean,
+  }
+}): Promise<string>

post posts a message to chat, either creating a new message or overwriting an existing one. It requires a character id and message content, a string containing either plain text or HTML to be posted. The method also accepts an options object. Currently, only whisper and secret are supported, the only valid value for whisper is gm, which will send the message as a whisper to the gm. The secret option is ignored unless whisper is also set, toggling to true will cause the message to not be visible to the controlling player. Like roll, messageId can be provided to update an existing chat message, but if omitted the method will generate a new messageId and post a new chat message. The method returns the messageId.

query

dispatch.query(options: Swal2Options): {
+  isConfirmed: boolean,
+  isDenied: boolean,
+  isDismissed: boolean,
+  value?: string | number,
+  dismiss?: "cancel" | "backdrop" | "close" | "esc" | "timer",
+  errors?: string[],
+}: Promise<{
+  results: {
+    isConfirmed: boolean
+    isDenied: boolean
+    isDismissed: boolean
+    value: string | number
+    dismiss: string
+  },
+  errors: [string]
+}>

The query method takes an options object and uses them to display a SweetAlert2 prompt to the user. It returns the results of the query as a SweetAlertResult, along with any errors encountered. The options work exactly as described in the documentation for SweetAlert2, however not all options are allowed. Here is a list of the allowed options:

titleText, text, iconColor, input, width, padding, background, position, grow, timer, timerProgressBar, showConfirmButton, showDenyButton, showCancelButton, ariaLabel, confirmButtonText, denyButtonText, cancelButtonText, confirmButtonAriaLabel, confirmButtonColor, cancelButtonAriaLabel, cancelButtonColor, denyButtonAriaLabel, denyButtonColor, reverseButtons, showCloseButton, closeButtonAriaLabel, returnInputValueOnDeny, imageUrl, imageWidth, imageHeight, imageAlt, inputLabel, inputPlaceholder, inputValue, inputOptions, inputPlaceholder, inputAutoTrim, inputAttributes, validationMessage, progressSteps, currentProgressStep, progressStepsDistance.

Perform

dispatch.perform({
+  characterId: string,
+  action: string,
+  args: string[],
+}): Promise<void>;

perform executes the specified action on behalf of the character (designated by the character id), passing in args to the action method. This method can perform actions on behalf of any character, even a character that the sheet does not have data for.

getComputed

dispatch.getComputed({
+  characterId: string,
+  property: string,
+  args: string[]
+}): Promise<string | number | object>

see setComputed below

setComputed

dispatch.setComputed({
+  characterId: string,
+  property: string,
+  args: string[]
+}): Promise<string | number | object>

getComputed and setComputed are both nearly identical in how they are called, taking a character id and a property with the name of the computed property you wish to get or set, and an array of string args. Both methods return a promise that resolves with the computed value.

compendiumRequest

dispatch.compendiumRequest({ 
+  query: string
+}): Promise<{
+  data: Object
+  errors: Array<Error>
+  extensions: Record<string, any>
+}>

compendiumRequest executes an AJAX request to the compendium service’s graphQL endpoint. It takes in a graphQL query string written according to the Compendium service’s schema. The query string does not need to include the ruleSystem shortName as this is set automatically according to the campaign override or sheet.json value in the Roll20 Tabletop.

debouncedCompendiumRequest

dispatch.debouncedCompendiumRequest({ 
+  query: string
+}): Promise<{
+  data: Object
+}>

Like compendiumRequest, except that calls to this method are automatically debounced (at 100ms) and grouped together into a single request to the compendium service. Note that this method will only return the requested data, it does not return errors or extensions.

getTokens

dispatch.getTokens({
+  characterId: string
+}): Promise<{
+  selected: Token[],
+  tokens: Token[]
+}>: Promise<{
+  selected: Token[]
+  tokens: Token[]
+}>

getTokens requires a character id string and returns information about tokens on the user’s current page. The return value contains two arrays of tokens. The tokens array contains all tokens on the current page that represent the character whose id was provided to the method. The selected array contains any tokens that are currently selected, regardless of which character they represent. The returned token objects contain all of the token attributes available to the API, you can find documentation here and here.

addToTracker

dispatch.addToTracker({
+  tokenId?: string,
+  custom?: {
+    name: string
+    img?: string
+  }
+  formula?: string
+  value: string | number
+}): Promise<void>

addToTracker adds or updates a single item in the turn tracker. Passing in a tokenId will add the specified token to the tracker, while passing in custom with a name and an optional image url (img) will add a custom item, not connected to any character or token. A round calculation string can be added via the optional formula parameter. value is the initiative number for the item.

addActionsToHost

dispatch.addActionsToHost({
+  sheetAction?: {
+    characterId: string
+    action: string
+    args?: string[]
+  }
+  action?: string
+  locations?: ['macroBar'] | ['tokenActionBar'] | ['macroBar', 'tokenActionBar']
+  actionId?: string
+  name: string
+  requestId?: string
+}): void

addActionsToHost adds a specific action(macro) to an area of the Roll20 Tabletop UI; either the macrobar or the token action bar. Either sheetAction or action can be passed in but not both at the same time. The sheetAction arg should be passed in when an the action is to designated to a character. While the action arg should be passed in when the action is more generic.

getActions

dispatch.getActions({
+  args: {
+     characterId?: string
+  }
+}): Promise<{
+  actions?: {} | { [id: string]: ActionFromHost }
+}>

getActions gets a specific character’s actions(macro).

setContainerSize

dispatch.setContainerSize({
+  args: { 
+    width?: number
+    height?: number 
+  }
+}): Promise<void>

setContainerSize updates the size of the container which holds the sheet shared settings. Returns a promise that can be awaited. This can be used in conjunction with something like the ResizeSensor event listener from npm: css-element-queries to automatically resize the container on the host.

updateTokensByCharacter

dispatch.updateTokensByCharacter({
+  args: { 
+    characterId: string
+    token: Partial<Token>
+  }
+}): Promise<void>

updateTokensByCharacter updates a particular character’s default token as well as all existing tokens representing that character. Returns a promise that can be awaited.

updateTokensByIds

dispatch.updateTokensByIds({
+  args: { 
+      tokenIds: array of ids as strings
+      token: Partial<Token>
+  }
+}): Promise<void>

updateTokensByIds updates a single or several tokens. Returns a promise that can be awaited.

autoLinkText

dispatch.autoLinkText({
+  args: { 
+      text: string
+  }
+}): Promise<string>

autoLinkText goes through the text to find handout names between square brackets and converts them into links with the handoutID. For example in a game with a handout named Dragon, passing in the text string of this is a [Dragon] to autoLinkText returns something similar to this is a <a href="https://journal.roll20.net/8je02j0kd02k">Dragon</a>.

dispatch.openDialogFromLink({
+  args: { 
+      urlString: string
+  }
+}): void

openDialogFromLink opens the supplied urlString through the Roll20 Tabletop.

  • If the url is for a handout, it will open the corresponding handout in the campaign. This will also check if the user opening the link has access to the handout.
  • If the url is for a compendium, it will open a pop up to the compendium page, it will also check to ensure the user has access to view the page.
  • If the url is for an external page, a confirmation pop up will display to warn the user that the link is for an external site and open a new tab in their main window if confirmed.
Prev
Rolls
Next
Quick Start Sheet Template
\ No newline at end of file diff --git a/public/docs/components/handlers/index.html b/public/docs/components/handlers/index.html index e8bf6c1..cff4d73 100644 --- a/public/docs/components/handlers/index.html +++ b/public/docs/components/handlers/index.html @@ -1,703 +1,54 @@ - - - - - - - - - - - - - - - -Handlers | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Handlers

- - -

Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet. It is the main agrument that must be passed into initRelay or the sheet will never fully load.

- - - -
-
-
- -
- 
initRelay({
-    handlers: {
-        onInit,
-        onChange,
-        onSettingsChange,
-        onSharedSettingsChange,
-        onTranslationsRequest,
-        onDragOver, // optional
-        onDropOver, // optional
-    }
-    //...other methods
-}): Promise<Dispatch>
-
-
-

onInit

-

The onInit method receives the initial data from the host.

-

This will be the first time we have access to character data, sheet settings, as well as compendium data if this character is made as a result of a compendium drag and drop on the host.

- - - -
-
-
- -
- 
onInit(event: {
-  character: Character, // Initial Data of the primary character for this sheet.
-  settings: { // Campaign and character specific settings
-    colorTheme: string, // 'dark' or 'light'
-    language: string, // two-letter language code, i.e. 'en'
-    gm: boolean, // whether or not the current player has gm permissions
-    owned: boolean, // whether or not the current player controls the primary character
-    settingsSheet: boolean, // whether or not this sheet is the settings sheet
-    headless: boolean, // whether or not it should be displayed, set by the host
-    sandbox: boolean,
-    campaignId: number, // The id of the current campaign
-    environment: string, // VTT, CHARACTERS, DISCORD
-    currentUserId: string, // user id of user opening the sheet
-    singleSheet: boolean
-  },
-  sharedSettings: {}, // Data shared between all characters in this campaign
-  compendiumDropData: { //  Populated when the character sheet is created from a compendium entry such as a creature or NPC.
-    pageName: string,
-    categoryName: string,
-    expansion: number,
-  },
-}, dispatch: Dispatch): void;
-
-
-
- -
- -
-

This function may be called multiple times during development in the sheet sandbox as part of hot reloads.

- -
-
-
- -

onChange

-

onChange is called whenever a character’s data is changed on the host’s end. The event object contains a partial character with only the character’s ID and the changed data. This could be the character’s bio, GM notes, or attributes (only the changed attributes).

- - - -
-
-
- -
- 
onChange(e: {
-  character: Partial<Character>
-}, dispatch: Dispatch): void;
-
-
-

onSettingsChange

-

onSettingsChange is called when either the host’s color theme is changed, or when the current player’s ownership of the primary character changes.

- - - -
-
-
- -
- 
onSettingsChange(e: {
- colorTheme: string,
- owned: boolean
-}, dispatch: Dispatch): void;
-
-
-

onSharedSettingsChange

-

onSharedSettingsChange is called when someone changes a shared setting in the host.

- - - -
-
-
- -
- 
onSharedSettingsChange({ settings: { [key: string]: any } }): void;
-
-
-

onTranslationsRequest

-

onTranslationsRequest is called before the relay is fully initialized and returns the translation JSON data corresponding to the two-letter language argument.

- - - -
-
-
- -
- 
onTranslationsRequest(language: string): { [key: string]: string };
-
-
-

onDragOver (optional)

-

onDragOver is called when a compendium item from the compendium tab is dragged over the iframe window containing the character sheet.

-

Coordinates of the drag are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch. If the item is moved outside of the iframe, dragData and coordinates are null.

- - - -
-
-
- -
- 
onDragOver(e: {
-  coordinates: { top: number, left: number },
-  dragData: { 
-    pageName: string
-    categoryName: string
-    expansionId: number
-  } | null,
-}, dispatch: Dispatch) => void
-
-
-

onDropOver (optional)

-

onDropOver is called when a compendium item from the compendium tab is dropped over the iframe window containing the character sheet.

-

Coordinates of the drop are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch.

- - - -
-
-
- -
- 
onDropOver(e: {
-  coordinates: { top: number, left: number },
-  dropData: { 
-    pageName: string
-    categoryName: string
-    expansionId: number
-  }
-}, dispatch: Dispatch) => void
-
-
- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Computed -
-
-
-
-
-
-
-
Next
- Handling Legacy Macro Attributes -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Handlers | Beacon SDK +
Beacon SDK +Get started

Handlers

Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet. It is the main agrument that must be passed into initRelay or the sheet will never fully load.

initRelay({
+    handlers: {
+        onInit,
+        onChange,
+        onSettingsChange,
+        onSharedSettingsChange,
+        onTranslationsRequest,
+        onDragOver, // optional
+        onDropOver, // optional
+    }
+    //...other methods
+}): Promise<Dispatch>

onInit

The onInit method receives the initial data from the host.

This will be the first time we have access to character data, sheet settings, as well as compendium data if this character is made as a result of a compendium drag and drop on the host.

onInit(event: {
+  character: Character, // Initial Data of the primary character for this sheet.
+  settings: { // Campaign and character specific settings
+    colorTheme: string, // 'dark' or 'light'
+    language: string, // two-letter language code, i.e. 'en'
+    gm: boolean, // whether or not the current player has gm permissions
+    owned: boolean, // whether or not the current player controls the primary character
+    settingsSheet: boolean, // whether or not this sheet is the settings sheet
+    headless: boolean, // whether or not it should be displayed, set by the host
+    sandbox: boolean,
+    campaignId: number, // The id of the current campaign
+    environment: string, // VTT, CHARACTERS, DISCORD
+    currentUserId: string, // user id of user opening the sheet
+    singleSheet: boolean
+  },
+  sharedSettings: {}, // Data shared between all characters in this campaign
+  compendiumDropData: { //  Populated when the character sheet is created from a compendium entry such as a creature or NPC.
+    pageName: string,
+    categoryName: string,
+    expansion: number,
+  },
+}, dispatch: Dispatch): void;

This function may be called multiple times during development in the sheet sandbox as part of hot reloads.

onChange

onChange is called whenever a character’s data is changed on the host’s end. The event object contains a partial character with only the character’s ID and the changed data. This could be the character’s bio, GM notes, or attributes (only the changed attributes).

onChange(e: {
+  character: Partial<Character>
+}, dispatch: Dispatch): void;

onSettingsChange

onSettingsChange is called when either the host’s color theme is changed, or when the current player’s ownership of the primary character changes.

onSettingsChange(e: {
+ colorTheme: string,
+ owned: boolean
+}, dispatch: Dispatch): void;

onSharedSettingsChange

onSharedSettingsChange is called when someone changes a shared setting in the host.

onSharedSettingsChange({ settings: { [key: string]: any } }): void;

onTranslationsRequest

onTranslationsRequest is called before the relay is fully initialized and returns the translation JSON data corresponding to the two-letter language argument.

onTranslationsRequest(language: string): { [key: string]: string };

onDragOver (optional)

onDragOver is called when a compendium item from the compendium tab is dragged over the iframe window containing the character sheet.

Coordinates of the drag are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch. If the item is moved outside of the iframe, dragData and coordinates are null.

onDragOver(e: {
+  coordinates: { top: number, left: number },
+  dragData: { 
+    pageName: string
+    categoryName: string
+    expansionId: number
+  } | null,
+}, dispatch: Dispatch) => void

onDropOver (optional)

onDropOver is called when a compendium item from the compendium tab is dropped over the iframe window containing the character sheet.

Coordinates of the drop are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch.

onDropOver(e: {
+  coordinates: { top: number, left: number },
+  dropData: { 
+    pageName: string
+    categoryName: string
+    expansionId: number
+  }
+}, dispatch: Dispatch) => void
Prev
Computed
Next
Handling Legacy Macro Attributes
\ No newline at end of file diff --git a/public/docs/components/handling-legacy-macro-attributes/index.html b/public/docs/components/handling-legacy-macro-attributes/index.html index 196a296..de763ea 100644 --- a/public/docs/components/handling-legacy-macro-attributes/index.html +++ b/public/docs/components/handling-legacy-macro-attributes/index.html @@ -1,541 +1,3 @@ - - - - - - - - - - - - - - - -Handling Legacy Macro Attributes | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Handling Legacy Macro Attributes

- - -

When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.

-

This scenario commonly arises when transitioning from an existing legacy sheet to a Beacon sheet. During such transitions, it’s possible that the attributes called from the legacy macro may not align with the structure of attributes in the Beacon Sheet.

-

The convertLegacyMacroAttributes function serves as a pivotal tool, empowering Sheet Developers to determine the mapping strategy for legacy attributes to the new Beacon Sheet.

-

convertLegacyMacroAttributes

-

This function is defined during the initial SDK initialization process and is invoked by the host when it encounters a failure in locating an attribute’s value.

- - - -
-
-
- -
- 
convertLegacyMacroAttributes: (messages: convertLegacyMacroAttributesArgs) => {}: any
-
-
-

Advanced sheet macros typically first search through the defined computed properties before resorting to the convertLegacyMacroAttributes function.

-

The function’s purpose is to return a value that will be substituted in the macro. However, it grants Sheet Developers the autonomy to devise their preferred approach for handling legacy attribute values.

- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Handlers -
-
-
-
-
-
-
-
Next
- Changelog -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Handling Legacy Macro Attributes | Beacon SDK +
Beacon SDK +Get started

Handling Legacy Macro Attributes

When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.

This scenario commonly arises when transitioning from an existing legacy sheet to a Beacon sheet. During such transitions, it’s possible that the attributes called from the legacy macro may not align with the structure of attributes in the Beacon Sheet.

The convertLegacyMacroAttributes function serves as a pivotal tool, empowering Sheet Developers to determine the mapping strategy for legacy attributes to the new Beacon Sheet.

convertLegacyMacroAttributes

This function is defined during the initial SDK initialization process and is invoked by the host when it encounters a failure in locating an attribute’s value.

convertLegacyMacroAttributes: (messages: convertLegacyMacroAttributesArgs) => {}: any

Advanced sheet macros typically first search through the defined computed properties before resorting to the convertLegacyMacroAttributes function.

The function’s purpose is to return a value that will be substituted in the macro. However, it grants Sheet Developers the autonomy to devise their preferred approach for handling legacy attribute values.

Prev
Handlers
Next
Changelog
\ No newline at end of file diff --git a/public/docs/components/index.html b/public/docs/components/index.html index 02124ba..528cccf 100644 --- a/public/docs/components/index.html +++ b/public/docs/components/index.html @@ -1,418 +1,3 @@ - - - - - - - - - - - - - - - -Components | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- -
-
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Components | Beacon SDK +
Beacon SDK +Get started
\ No newline at end of file diff --git a/public/docs/components/index.xml b/public/docs/components/index.xml index 71f3c34..7f6741f 100644 --- a/public/docs/components/index.xml +++ b/public/docs/components/index.xml @@ -1,62 +1 @@ - - - - Components on Beacon SDK - http://localhost:1313/docs/components/ - Recent content in Components on Beacon SDK - Hugo - en - Copyright (c) 2020-2024 Beacon SDK - Thu, 07 Sep 2023 16:12:37 +0200 - - - InitRelay - http://localhost:1313/docs/components/initrelay/ - Fri, 07 Jun 2024 16:12:37 +0200 - http://localhost:1313/docs/components/initrelay/ - The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games. - - - Actions - http://localhost:1313/docs/components/actions/ - Tue, 07 May 2024 16:12:37 +0200 - http://localhost:1313/docs/components/actions/ - initRelay({ //...other methods actions: {}, }): Promise&lt;Dispatch&gt; Actions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters. - - - Computed - http://localhost:1313/docs/components/computed/ - Sun, 07 Apr 2024 16:12:37 +0200 - http://localhost:1313/docs/components/computed/ - Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true. - - - Handlers - http://localhost:1313/docs/components/handlers/ - Thu, 07 Mar 2024 16:12:37 +0200 - http://localhost:1313/docs/components/handlers/ - Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet. - - - Handling Legacy Macro Attributes - http://localhost:1313/docs/components/handling-legacy-macro-attributes/ - Wed, 07 Feb 2024 16:12:37 +0200 - http://localhost:1313/docs/components/handling-legacy-macro-attributes/ - When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet. - - - Rolls - http://localhost:1313/docs/components/rolls/ - Sun, 07 Jan 2024 16:12:37 +0200 - http://localhost:1313/docs/components/rolls/ - The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed. - - - Dispatch - http://localhost:1313/docs/components/dispatch/ - Mon, 01 Jan 0001 00:00:00 +0000 - http://localhost:1313/docs/components/dispatch/ - The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host. - - - +Components on Beacon SDKhttps://roll20.github.io/beacon-docs/docs/components/Recent content in Components on Beacon SDKHugoenCopyright (c) 2020-2024 Beacon SDKThu, 07 Sep 2023 16:12:37 +0200InitRelayhttps://roll20.github.io/beacon-docs/docs/components/initrelay/Fri, 07 Jun 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/components/initrelay/The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games.Actionshttps://roll20.github.io/beacon-docs/docs/components/actions/Tue, 07 May 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/components/actions/initRelay({ //...other methods actions: {}, }): Promise&lt;Dispatch&gt; Actions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters.Computedhttps://roll20.github.io/beacon-docs/docs/components/computed/Sun, 07 Apr 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/components/computed/Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.Handlershttps://roll20.github.io/beacon-docs/docs/components/handlers/Thu, 07 Mar 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/components/handlers/Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet.Handling Legacy Macro Attributeshttps://roll20.github.io/beacon-docs/docs/components/handling-legacy-macro-attributes/Wed, 07 Feb 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/components/handling-legacy-macro-attributes/When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.Rollshttps://roll20.github.io/beacon-docs/docs/components/rolls/Sun, 07 Jan 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/components/rolls/The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed.Dispatchhttps://roll20.github.io/beacon-docs/docs/components/dispatch/Mon, 01 Jan 0001 00:00:00 +0000https://roll20.github.io/beacon-docs/docs/components/dispatch/The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host. \ No newline at end of file diff --git a/public/docs/components/initrelay/index.html b/public/docs/components/initrelay/index.html index e0a883c..12ab836 100644 --- a/public/docs/components/initrelay/index.html +++ b/public/docs/components/initrelay/index.html @@ -1,653 +1,17 @@ - - - - - - - - - - - - - - - -InitRelay | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

InitRelay

- - -

The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games. initRelay is the main method that initializes the Beacon SDK communication channel with the host (Either the Roll20 tabletop or in Roll20 Characters). It should be initialized as soon as the sheet loads, as its onInit handler will be the earliest we can get access to that character’s data.

- - - -
-
-
- -
- 
initRelay({
-    handlers: {
-        onInit,
-        onChange,
-        onSettingsChange,
-        onSharedSettingsChange,
-        onTranslationsRequest,
-        onDragOver,
-        onDropOver,
-    },
-    actions: {},
-    computed: {},
-    convertLegacyMacroAttributes,
-    handleLegacyRollTemplates
-}): Promise<Dispatch>
-
-
-

These components are crucial for handling actions, computations, macros, and rolls. This overview provides a high-level summary of each section, helping you understand their roles and how they integrate within the SDK.

-
- - -
-
-
-
Actions
-

Actions define specific operations that can be performed by characters within the VTT. These operations can range from simple tasks like rolling a dice to more complex interactions such as casting spells or activating abilities.

-
-
- - - - - - -
-
-
- -
-
-
-
Handlers
-

Handlers are event listeners that manage communication between the VTT and the character sheet. They respond to various events, such as changes in character attributes or settings, and trigger appropriate actions or updates.

-
-
- - - - - - -
-
-
- -
- -
- - -
-
-
-
Computed
-

Computed properties are dynamic values derived from other character attributes. They allow for the creation of complex, calculated attributes that automatically update when their dependencies change.

-
-
- - - - - - -
-
-
- -
-
-
-
Macro Attributes
-

Macro attributes handle the conversion of legacy macro attributes to the new format used in the Beacon SDK. This ensures compatibility with older character sheets and macros, allowing for a smooth transition to the new system.

-
-
- - - - - - -
-
-
- -
- -
- - -
-
-
-
Rolls
-

The Rolls component allows for advanced dice-rolling mechanics within the VTT. It supports both simple and complex rolls, providing flexibility in how roll results are displayed and computed.

-
-
- - - - - - -
-
-
- - -
-
-
-
Dispatch
-

The dispatch object provides methods for sending commands from the character sheet back to the host. Except when specified every method returns a promise.

-
-
- - - - - - -
-
-
- -
- - -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- FAQ -
-
-
-
-
-
-
-
Next
- Actions -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +InitRelay | Beacon SDK +
Beacon SDK +Get started

InitRelay

The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games. initRelay is the main method that initializes the Beacon SDK communication channel with the host (Either the Roll20 tabletop or in Roll20 Characters). It should be initialized as soon as the sheet loads, as its onInit handler will be the earliest we can get access to that character’s data.

initRelay({
+    handlers: {
+        onInit,
+        onChange,
+        onSettingsChange,
+        onSharedSettingsChange,
+        onTranslationsRequest,
+        onDragOver,
+        onDropOver,
+    },
+    actions: {},
+    computed: {},
+    convertLegacyMacroAttributes,
+    handleLegacyRollTemplates
+}): Promise<Dispatch>

These components are crucial for handling actions, computations, macros, and rolls. This overview provides a high-level summary of each section, helping you understand their roles and how they integrate within the SDK.

Actions

Actions define specific operations that can be performed by characters within the VTT. These operations can range from simple tasks like rolling a dice to more complex interactions such as casting spells or activating abilities.

Handlers

Handlers are event listeners that manage communication between the VTT and the character sheet. They respond to various events, such as changes in character attributes or settings, and trigger appropriate actions or updates.

Computed

Computed properties are dynamic values derived from other character attributes. They allow for the creation of complex, calculated attributes that automatically update when their dependencies change.

Macro Attributes

Macro attributes handle the conversion of legacy macro attributes to the new format used in the Beacon SDK. This ensures compatibility with older character sheets and macros, allowing for a smooth transition to the new system.

Rolls

The Rolls component allows for advanced dice-rolling mechanics within the VTT. It supports both simple and complex rolls, providing flexibility in how roll results are displayed and computed.

Dispatch

The dispatch object provides methods for sending commands from the character sheet back to the host. Except when specified every method returns a promise.

Prev
FAQ
Next
Actions
\ No newline at end of file diff --git a/public/docs/components/rolls/index.html b/public/docs/components/rolls/index.html index 646a8af..1924ea2 100644 --- a/public/docs/components/rolls/index.html +++ b/public/docs/components/rolls/index.html @@ -1,658 +1,27 @@ - - - - - - - - - - - - - - - -Rolls | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Rolls

- - -

The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the host. -Vist the Roll20 help center to learn more about Roll20’s Dice Rolling system

-

The most command way to trigger a dice roll is through the dispatch object returned from the initRelay, but it could also be called from actions:

- - - -
-
-
- -
- 
dispatch.roll({
-  rolls: { [rollName: string]: string } // Ex. {attack: '1d20+4', damage: `3d6+2`}
-  messageId?: string
-}): Promise<{messageId: string, results: RollResults }>
-
-
-

The roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings.

-

messageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. +Rolls | Beacon SDK +

Beacon SDK +Get started

Rolls

The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the host. +Vist the Roll20 help center to learn more about Roll20’s Dice Rolling system

The most command way to trigger a dice roll is through the dispatch object returned from the initRelay, but it could also be called from actions:

dispatch.roll({
+  rolls: { [rollName: string]: string } // Ex. {attack: '1d20+4', damage: `3d6+2`}
+  messageId?: string
+}): Promise<{messageId: string, results: RollResults }>

The roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings.

messageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. -The method returns a promise that resolves with an object containing the messageId and the RollResults. The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.

-
- -
- -
-

The dispatch roll method and the actions roll section do not post to the chat, instead they will return a promise which will resolve to the roll results and the message id.

- -
-
-
- -

Posting A Roll to the Chat

-

The roll method does not send or post any data to the chat on it’s own. We instead have to use dispatch’s post method to send our roll results along with any other content to the chat.

- - - -
-
-
- -
- 
dispatch.post({
-  characterId:  '-O0KZhMTxLkn2HArFj8f',
-  content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`,
-})
-
-
-

Additional Roll Posting Options

-

data-rollname

-

The data-rollname attribute tells the host that this HTML element is displaying the result of a roll.

- - - -
-
-
- -
- 
<span data-rollname="attack"></span>
-
-
-

The host will both add the Quantum Roll signature element and replace the contents of the element with the result from the roll.

-

This is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the host to display the result.

-

data-computed

-

Tagging an element with both a data-rollname and a data-computed="true" tells the host that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result.

- - - -
-
-
- -
- 
<span data-rollname="complex" data-computed="true">25</span>
-
-
-

The host will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic.

-

Roll Buttons

-

Roll buttons are interactive elements that trigger sheet actions, such as damage rolls, when clicked. These buttons use the data-sheet-action attribute to specify the action to be executed.

- - - -
-
-
- -
- 
<button data-sheet-action="damage" data-args="arg1:arg2">Click Me</button>
-
-
-

Additional arguments can be provided using the data-args attribute, and the character, messageId, and original rolls will be included automatically.

-

Rolls Results Format

- - - -
-
-
- -
- 
type RollResults = {
-  [name: string]: {
-    expression: string        //The original expression (i.e. 1d20+3d6)
-    rollName: string          //The name of the roll
-    results: {                //The results of the roll(s)
-      expression: string
-      dice?: number[]         //
-      result: number          //The final result of the roll
-      rolls?: {               //Detailed results of each part of the roll (i.e. 3d6)
-        sides: number         //The type of die for this part of the roll (i.e. 6)
-        dice: number          //The number of dice (i.e. 3)
-        results: number[]     //The result of each die (i.e. [4, 2, 5])
-      }[]
-    }
-  }
-}
-
-
- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Changelog -
-
-
-
-
-
-
-
Next
- Dispatch -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +The method returns a promise that resolves with an object containing the messageId and the RollResults. The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.

The dispatch roll method and the actions roll section do not post to the chat, instead they will return a promise which will resolve to the roll results and the message id.

Posting A Roll to the Chat

The roll method does not send or post any data to the chat on it’s own. We instead have to use dispatch’s post method to send our roll results along with any other content to the chat.

dispatch.post({
+  characterId:  '-O0KZhMTxLkn2HArFj8f',
+  content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`,
+})

Additional Roll Posting Options

data-rollname

The data-rollname attribute tells the host that this HTML element is displaying the result of a roll.

<span data-rollname="attack"></span>

The host will both add the Quantum Roll signature element and replace the contents of the element with the result from the roll.

This is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the host to display the result.

data-computed

Tagging an element with both a data-rollname and a data-computed="true" tells the host that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result.

<span data-rollname="complex" data-computed="true">25</span>

The host will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic.

Roll Buttons

Roll buttons are interactive elements that trigger sheet actions, such as damage rolls, when clicked. These buttons use the data-sheet-action attribute to specify the action to be executed.

<button data-sheet-action="damage" data-args="arg1:arg2">Click Me</button>

Additional arguments can be provided using the data-args attribute, and the character, messageId, and original rolls will be included automatically.

Rolls Results Format

type RollResults = {
+  [name: string]: {
+    expression: string        //The original expression (i.e. 1d20+3d6)
+    rollName: string          //The name of the roll
+    results: {                //The results of the roll(s)
+      expression: string
+      dice?: number[]         //
+      result: number          //The final result of the roll
+      rolls?: {               //Detailed results of each part of the roll (i.e. 3d6)
+        sides: number         //The type of die for this part of the roll (i.e. 6)
+        dice: number          //The number of dice (i.e. 3)
+        results: number[]     //The result of each die (i.e. [4, 2, 5])
+      }[]
+    }
+  }
+}
Prev
Changelog
Next
Dispatch
\ No newline at end of file diff --git a/public/docs/components/sitemap.xml b/public/docs/components/sitemap.xml index a15d805..85e63a9 100644 --- a/public/docs/components/sitemap.xml +++ b/public/docs/components/sitemap.xml @@ -1,52 +1 @@ - - - - http://localhost:1313/docs/components/initrelay/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/components/actions/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/components/computed/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/components/handlers/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/components/handling-legacy-macro-attributes/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/components/rolls/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/components/dispatch/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - \ No newline at end of file +https://roll20.github.io/beacon-docs/docs/components/initrelay/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/actions/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/computed/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/handlers/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/handling-legacy-macro-attributes/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/rolls/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/dispatch/2023-09-07T16:12:37+02:00monthly0.5 \ No newline at end of file diff --git a/public/docs/gettingstarted/example-patterns-sheet/index.html b/public/docs/gettingstarted/example-patterns-sheet/index.html index c8035dc..6876121 100644 --- a/public/docs/gettingstarted/example-patterns-sheet/index.html +++ b/public/docs/gettingstarted/example-patterns-sheet/index.html @@ -1,668 +1,3 @@ - - - - - - - - - - - - - - - -Example Patterns Sheet | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Example Patterns Sheet

- - -

Prerequisites

-

To set this sheet up properly, make sure that you have the following:

-
    -
  • Vue framework & Routing
    • -
  • Multiple Data Stores
    • -
  • Complex Roll Templates
    • -
  • Rich Sheet Actions
    • -
  • TypeScript
    • -
  • Vite
    • -
  • SCSS
    • -
  • Ability to run Unit & End-to-End Tests
    • -
-

Figure 1: Advanced sheet

-

This sheet uses the same steps listed in the . Immediately after implementing those three steps, you’ll add the following step:

-
    -
  • Run a CI check: This will run several checks to ensure your code is as optimal as possible, including formatting, linting, type checking, unit tests, and end-to-end tests.
    • -
- - - -
-
-
- -
- 
npm run ci-check
-
-
-

You can think of this command as a sanity check you can leverage when pushing a big release for your sheet!

-

Useful Commands

-

The following set of commands can come in handy when working with this sheet:

-
    -
  • For Hot reloading and building CSS files, use the following command:
    • -
- - - -
-
-
- -
- 
npm run watch-scss
-
-
-
    -
  • For linting, use the following command:
    • -
- - - -
-
-
- -
- 
npm run lint
-
-
-
    -
  • For formatting with Prettier, use the following command:
    • -
- - - -
-
-
- -
- 
npm run format
-
-
-
    -
  • For type checking with TypeScript, use the following command:
    • -
- - - -
-
-
- -
- 
npm run type-check
-
-
-
    -
  • For running unit tests with Vitest, use the following command:
    • -
- - - -
-
-
- -
- 
npm run test:unit
-
-
-
    -
  • To open up and develop local end-to-end tests with Cypress, use the following command:
    • -
- - - -
-
-
- -
- 
npm run test:e2e:open:local
-
-
-
    -
  • For running local end-to-end tests with Cypress, use the following command:
    • -
- - - -
-
-
- -
- 
npm run test:e2e:local
-
-
-
    -
  • To run CDN-hosted end-to-end tests with Cypress, use the following command:
    • -
- - - -
-
-
- -
- 
npm run test:e2e
-
-
- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Quick Start Sheet Template -
-
-
-
-
-
-
-
Next
- How to Contribute -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Example Patterns Sheet | Beacon SDK +
Beacon SDK +Get started

Example Patterns Sheet

Prerequisites

To set this sheet up properly, make sure that you have the following:

  • Vue framework & Routing
  • Multiple Data Stores
  • Complex Roll Templates
  • Rich Sheet Actions
  • TypeScript
  • Vite
  • SCSS
  • Ability to run Unit & End-to-End Tests

Figure 1: Advanced sheet

This sheet uses the same steps listed in the . Immediately after implementing those three steps, you’ll add the following step:

  • Run a CI check: This will run several checks to ensure your code is as optimal as possible, including formatting, linting, type checking, unit tests, and end-to-end tests.
npm run ci-check

You can think of this command as a sanity check you can leverage when pushing a big release for your sheet!

Useful Commands

The following set of commands can come in handy when working with this sheet:

  • For Hot reloading and building CSS files, use the following command:
npm run watch-scss
  • For linting, use the following command:
npm run lint
  • For formatting with Prettier, use the following command:
npm run format
  • For type checking with TypeScript, use the following command:
npm run type-check
  • For running unit tests with Vitest, use the following command:
npm run test:unit
  • To open up and develop local end-to-end tests with Cypress, use the following command:
npm run test:e2e:open:local
  • For running local end-to-end tests with Cypress, use the following command:
npm run test:e2e:local
  • To run CDN-hosted end-to-end tests with Cypress, use the following command:
npm run test:e2e
Prev
Quick Start Sheet Template
Next
How to Contribute
\ No newline at end of file diff --git a/public/docs/gettingstarted/index.html b/public/docs/gettingstarted/index.html index b9f510e..91b93c2 100644 --- a/public/docs/gettingstarted/index.html +++ b/public/docs/gettingstarted/index.html @@ -1,406 +1,3 @@ - - - - - - - - - - - - - - - -Getting Started | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- -
-
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Getting Started | Beacon SDK +
Beacon SDK +Get started
\ No newline at end of file diff --git a/public/docs/gettingstarted/index.xml b/public/docs/gettingstarted/index.xml index 77613be..d787962 100644 --- a/public/docs/gettingstarted/index.xml +++ b/public/docs/gettingstarted/index.xml @@ -1,48 +1,3 @@ - - - - Getting Started on Beacon SDK - http://localhost:1313/docs/gettingstarted/ - Recent content in Getting Started on Beacon SDK - Hugo - en - Copyright (c) 2020-2024 Beacon SDK - Sat, 07 Sep 2024 16:13:18 +0200 - - - Introduction - http://localhost:1313/docs/gettingstarted/introduction/ - Tue, 07 May 2024 16:04:48 +0200 - http://localhost:1313/docs/gettingstarted/introduction/ - The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements. - - - Installing Beacon - http://localhost:1313/docs/gettingstarted/installing-beacon/ - Sun, 07 Apr 2024 16:04:48 +0200 - http://localhost:1313/docs/gettingstarted/installing-beacon/ - This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to. - - - Quick Start Sheet Template - http://localhost:1313/docs/gettingstarted/quick-start-sheet-template/ - Sun, 07 Apr 2024 16:13:18 +0200 - http://localhost:1313/docs/gettingstarted/quick-start-sheet-template/ - Prerequisites To set this sheet up properly, make sure that you have the following tools installed: Vue.js Vite SCSS Figure 1: Quickstart sheet - - - Example Patterns Sheet - http://localhost:1313/docs/gettingstarted/example-patterns-sheet/ - Thu, 07 Mar 2024 16:13:18 +0200 - http://localhost:1313/docs/gettingstarted/example-patterns-sheet/ - Prerequisites To set this sheet up properly, make sure that you have the following: Vue framework &amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit &amp; End-to-End Tests Figure 1: Advanced sheet - - - Releasing a Sheet - http://localhost:1313/docs/gettingstarted/releasing-a-sheet/ - Wed, 07 Feb 2024 16:13:18 +0200 - http://localhost:1313/docs/gettingstarted/releasing-a-sheet/ - A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform. - - - +Getting Started on Beacon SDKhttps://roll20.github.io/beacon-docs/docs/gettingstarted/Recent content in Getting Started on Beacon SDKHugoenCopyright (c) 2020-2024 Beacon SDKSat, 07 Sep 2024 16:13:18 +0200Introductionhttps://roll20.github.io/beacon-docs/docs/gettingstarted/introduction/Tue, 07 May 2024 16:04:48 +0200https://roll20.github.io/beacon-docs/docs/gettingstarted/introduction/The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.Installing Beaconhttps://roll20.github.io/beacon-docs/docs/gettingstarted/installing-beacon/Sun, 07 Apr 2024 16:04:48 +0200https://roll20.github.io/beacon-docs/docs/gettingstarted/installing-beacon/This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.Quick Start Sheet Templatehttps://roll20.github.io/beacon-docs/docs/gettingstarted/quick-start-sheet-template/Sun, 07 Apr 2024 16:13:18 +0200https://roll20.github.io/beacon-docs/docs/gettingstarted/quick-start-sheet-template/Prerequisites To set this sheet up properly, make sure that you have the following tools installed: +Vue.js Vite SCSS Figure 1: Quickstart sheetExample Patterns Sheethttps://roll20.github.io/beacon-docs/docs/gettingstarted/example-patterns-sheet/Thu, 07 Mar 2024 16:13:18 +0200https://roll20.github.io/beacon-docs/docs/gettingstarted/example-patterns-sheet/Prerequisites To set this sheet up properly, make sure that you have the following: +Vue framework &amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit &amp; End-to-End Tests Figure 1: Advanced sheetReleasing a Sheethttps://roll20.github.io/beacon-docs/docs/gettingstarted/releasing-a-sheet/Wed, 07 Feb 2024 16:13:18 +0200https://roll20.github.io/beacon-docs/docs/gettingstarted/releasing-a-sheet/A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform. \ No newline at end of file diff --git a/public/docs/gettingstarted/installing-beacon/index.html b/public/docs/gettingstarted/installing-beacon/index.html index d8ee691..acc46fb 100644 --- a/public/docs/gettingstarted/installing-beacon/index.html +++ b/public/docs/gettingstarted/installing-beacon/index.html @@ -1,634 +1,20 @@ - - - - - - - - - - - - - - - -Installing Beacon | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Installing Beacon

- - -

This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.

-
- -
- -
-

To get started quickly with a boilerplate, you can download and start editing the Quick Start Example Sheet which already has the Beacon SDK installed, along with several recommanded patterns implemented in a Vue.js project.

- -
-
-
- -

Prerequisites

-

Before you can install the Beacon SDK, you’ll need to have the following:

-
    -
  • A local web development environment with a code editor.
    • -
  • Node.js installed on your machine. If you don’t have Node.js installed, use the following steps in the official Node.js documentation.
    • -
  • A javascript project, we recommand Vue.js but you can choose whichever you are more comfortable with.
    • -
-
- -
- -
-

These steps use npm but you are free to use any package manager and framework you prefer.

- -
-
-
- -

The following steps will guide you in installing the Beacon SDK in your application:

-

Step 1: Add the package to your project

-

You can find the latest version of the package on the NPM registry.

-

In your project’s directory, run the following:

- - - -
-
-
- -
- 
  npm i @roll20-official/beacon-sdk
-
-
-

This will install the Beacon SDK package to your project’s package.json file.

-

Step 2: Use the Beacon package in your project

-

The Beacon package exports various utilities you can use in your application. The main one that needs to be setup to enable the connection between Beacon SDK and Roll20 is initRelay.

-

Ideally you would want to call this when your sheet is initalizing, and it is the function where you will define sheet actions, computed values, and how the sheet will response to or send character data changes. visit the initRelay page for a more detailed breakdown.

-

Add the following to your project:

- - - -
-
-
- -
- 
import { initRelay } from '@roll20/beacon-sdk';
-
-const dispatch = initRelay({
-    handlers: {
-        onInit: ({ character } ) => { console.log('sheet character', character) },
-        onChange: () => {},
-        onSettingsChange: () => {},
-        onSharedSettingsChange: () => {},
-        onTranslationsRequest: () => {},
-        onDragOver: () => {}
-    },
-    // Refer to our advanced example sheet on how to setup actions and computed properties.
-    actions: {},
-    computed: {}
-})
-
-
-

initRelay returns a dispatch function that allows you to call methods or send changes from the sheet to Roll20. Check out the page on dispatch to learn more about the different methods.

-

Step 3: Settings up the Roll20 tabletop sandbox

-

On the Roll20 website visit the custom sheet sandbox and create a new sandbox, we’ll use this sandbox to develop our sheet but we must set it up to listen to our local project’s web server.

-

After creating a new sandbox, we’ll be taken to the sandbox details page, here you will find a collapseable section called Sheet.json Editor, opening this we can add the settings we need to connect to our project:

- - - -
-
-
- -
- 
{
-	"advanced": true,
-	"advancedPort": 7620 // or the port of your webserver
-}
-
-
-

After adding these changes make sure to click Save Changes at the bottom of the page. After which you can click Launch Game on the page to go into the game and start testing your sheet.

-

- -Character sheet and dev tools open showing character data results

- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Introduction -
-
-
-
-
-
-
-
Next
- Glossary -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Installing Beacon | Beacon SDK +
Beacon SDK +Get started

Installing Beacon

This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.

To get started quickly with a boilerplate, you can download and start editing the Quick Start Example Sheet which already has the Beacon SDK installed, along with several recommanded patterns implemented in a Vue.js project.

Prerequisites

Before you can install the Beacon SDK, you’ll need to have the following:

  • A local web development environment with a code editor.
  • Node.js installed on your machine. If you don’t have Node.js installed, use the following steps in the official Node.js documentation.
  • A javascript project, we recommand Vue.js but you can choose whichever you are more comfortable with.

These steps use npm but you are free to use any package manager and framework you prefer.

The following steps will guide you in installing the Beacon SDK in your application:

Step 1: Add the package to your project

You can find the latest version of the package on the NPM registry.

In your project’s directory, run the following:

  npm i @roll20-official/beacon-sdk

This will install the Beacon SDK package to your project’s package.json file.

Step 2: Use the Beacon package in your project

The Beacon package exports various utilities you can use in your application. The main one that needs to be setup to enable the connection between Beacon SDK and Roll20 is initRelay.

Ideally you would want to call this when your sheet is initalizing, and it is the function where you will define sheet actions, computed values, and how the sheet will response to or send character data changes. visit the initRelay page for a more detailed breakdown.

Add the following to your project:

import { initRelay } from '@roll20/beacon-sdk';
+
+const dispatch = initRelay({
+    handlers: {
+        onInit: ({ character } ) => { console.log('sheet character', character) },
+        onChange: () => {},
+        onSettingsChange: () => {},
+        onSharedSettingsChange: () => {},
+        onTranslationsRequest: () => {},
+        onDragOver: () => {}
+    },
+    // Refer to our advanced example sheet on how to setup actions and computed properties.
+    actions: {},
+    computed: {}
+})

initRelay returns a dispatch function that allows you to call methods or send changes from the sheet to Roll20. Check out the page on dispatch to learn more about the different methods.

Step 3: Settings up the Roll20 tabletop sandbox

On the Roll20 website visit the custom sheet sandbox and create a new sandbox, we’ll use this sandbox to develop our sheet but we must set it up to listen to our local project’s web server.

After creating a new sandbox, we’ll be taken to the sandbox details page, here you will find a collapseable section called Sheet.json Editor, opening this we can add the settings we need to connect to our project:

{
+	"advanced": true,
+	"advancedPort": 7620 // or the port of your webserver
+}

After adding these changes make sure to click Save Changes at the bottom of the page. After which you can click Launch Game on the page to go into the game and start testing your sheet.

Character sheet and dev tools open showing character data results

Prev
Introduction
Next
Glossary
\ No newline at end of file diff --git a/public/docs/gettingstarted/introduction/index.html b/public/docs/gettingstarted/introduction/index.html index 7d68c3a..91159cc 100644 --- a/public/docs/gettingstarted/introduction/index.html +++ b/public/docs/gettingstarted/introduction/index.html @@ -1,542 +1,3 @@ - - - - - - - - - - - - - - - -Introduction | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Introduction

- - -

The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.

-

Whether you’re a game master (GM), a developer, or a player, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated VTT experiences.

-

What is the Beacon SDK?

-

The Beacon SDK (software development kit) is a toolset used to create digital character sheets on Roll20 for Roll20 Tabletop and Roll20 Characters.

-

Whether you’re an experience developer, or just starting out, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated character sheet experiences.

-

The Beacon SDK also introduces a new way to develop characters sheets for Roll20. Beacon SDK allows you to connect your local development environment to sandboxes in Roll20 Characters and Roll20 Tabletop, giving you real-time updates as you develop.

-

Key Features

-
    -
  • Character Sheets: Design and implement a web app character sheet with dynamic attributes and real-time updates.
    • -
  • Local Development: Work where you are most comfortable and get real-time updates in sandboxes in Roll20.
    • -
  • Testing Sheets: Release a testing sheet and give others special access to it before you push it live for everyone.
    • -
  • Roll Mechanics: Integrate complex roll formulas and display roll results directly within the Roll20 Tabletop and Roll20 Characters.
    • -
  • Legacy Support: Convert and integrate legacy macros and roll templates with the new Beacon architecture.
    • -
  • Customization: Define custom actions, computed attributes and handle specific roll templates tailored to your game’s needs.
    • -
-

Components Overview

-

The Beacon SDK is composed of several key components:

-
    -
  • Actions: Define and manage custom actions that can be triggered within the VTT.
    • -
  • Handlers: Event handlers that process and respond to various VTT events and messages.
    • -
  • Computed Attributes: Define dynamically computed attributes based on other attributes.
    • -
  • Macro Attributes: Convert and manage legacy macro attributes for compatibility with the Beacon SDK.
    • -
  • Rolls: Implement advanced roll mechanics and display results dynamically within the VTT.
    • -
-

For a comprehensive overview of these components, view the components section.

-

Getting Started

-

To get started with the Beacon SDK, you must initialize the relay, set up your character sheets, and define the necessary actions, handlers, and computed attributes.

-

This documentation provides detailed guides and example sheets to help you through each step of the process.

-

By leveraging the Beacon SDK, you can create rich, interactive, fully integrated VTT experiences that enhance gameplay and streamline game management.

-

Whether adapting existing character sheets or building new ones from scratch, the Beacon SDK offers the tools and flexibility to bring your digital character sheet to life.

- -
- -
-
- -
-
-
-
Next
- Installing Beacon -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Introduction | Beacon SDK +
Beacon SDK +Get started

Introduction

The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.

Whether you’re a game master (GM), a developer, or a player, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated VTT experiences.

What is the Beacon SDK?

The Beacon SDK (software development kit) is a toolset used to create digital character sheets on Roll20 for Roll20 Tabletop and Roll20 Characters.

Whether you’re an experience developer, or just starting out, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated character sheet experiences.

The Beacon SDK also introduces a new way to develop characters sheets for Roll20. Beacon SDK allows you to connect your local development environment to sandboxes in Roll20 Characters and Roll20 Tabletop, giving you real-time updates as you develop.

Key Features

  • Character Sheets: Design and implement a web app character sheet with dynamic attributes and real-time updates.
  • Local Development: Work where you are most comfortable and get real-time updates in sandboxes in Roll20.
  • Testing Sheets: Release a testing sheet and give others special access to it before you push it live for everyone.
  • Roll Mechanics: Integrate complex roll formulas and display roll results directly within the Roll20 Tabletop and Roll20 Characters.
  • Legacy Support: Convert and integrate legacy macros and roll templates with the new Beacon architecture.
  • Customization: Define custom actions, computed attributes and handle specific roll templates tailored to your game’s needs.

Components Overview

The Beacon SDK is composed of several key components:

  • Actions: Define and manage custom actions that can be triggered within the VTT.
  • Handlers: Event handlers that process and respond to various VTT events and messages.
  • Computed Attributes: Define dynamically computed attributes based on other attributes.
  • Macro Attributes: Convert and manage legacy macro attributes for compatibility with the Beacon SDK.
  • Rolls: Implement advanced roll mechanics and display results dynamically within the VTT.

For a comprehensive overview of these components, view the components section.

Getting Started

To get started with the Beacon SDK, you must initialize the relay, set up your character sheets, and define the necessary actions, handlers, and computed attributes.

This documentation provides detailed guides and example sheets to help you through each step of the process.

By leveraging the Beacon SDK, you can create rich, interactive, fully integrated VTT experiences that enhance gameplay and streamline game management.

Whether adapting existing character sheets or building new ones from scratch, the Beacon SDK offers the tools and flexibility to bring your digital character sheet to life.

Next
Installing Beacon
\ No newline at end of file diff --git a/public/docs/gettingstarted/quick-start-sheet-template/index.html b/public/docs/gettingstarted/quick-start-sheet-template/index.html index 082c8ed..b641af0 100644 --- a/public/docs/gettingstarted/quick-start-sheet-template/index.html +++ b/public/docs/gettingstarted/quick-start-sheet-template/index.html @@ -1,662 +1,6 @@ - - - - - - - - - - - - - - - -Quick Start Sheet Template | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Quick Start Sheet Template

- - -

Prerequisites

-

To set this sheet up properly, make sure that you have the following tools installed:

-
    -
  • Vue.js
    • -
  • Vite
    • -
  • SCSS
    • -
-

Figure 1: Quickstart sheet

-

Use the following steps to get started:

-
    -
  1. Install the Beacon SDK: Run the following command.
    2. -
- - - -
-
-
- -
- 
npm i @roll20-official/beacon-sdk
-
-
-
    -
  1. Install dependencies: Install the dependencies for the project.
    2. -
- - - -
-
-
- -
- 
npm install
-
-
-
    -
  1. Start the Vite server: After installing the project’s dependencies, you’ll need to start the Vite server. There are two ways to do this:
    2. -
-

a. Offline Development: This method will run the Vite server with the default port and environment set to development.

- - - -
-
-
- -
- 
npm run dev
-
-
-

Once this code executes successfully, you can access the Vite server at http://localhost:5173.

-

This method is useful when you do not have access to the Roll20 website or would like to work on parts of your project that do not depend on a connection to the VTT or Roll20 Characters, such as working on styling, mocking up the environment, building Vue components, testing functionality, etc.

-
- -
- -
-

In development mode, you cannot save or access existing character data or use the Beacon SDK functions that depend on VTT or Roll20 Characters functionality, such as dice rolling and token manipulation.

- -
-
-
- -

b. Sandbox Development: This method will run the Vite server with the port set to 7620 and the environment set to staging mode.

- - - -
-
-
- -
- 
npm run sandbox
-
-
-

This command will build the SCSS files and then run the Vite server. This will set the server up for connecting to a VTT custom sheet sandbox as well as through the sandbox in Roll20 Characters.

-

To test your changes in the VTT custom sheet sandbox, you will need to add the following to the sheet.json editor in the game settings:

- - - -
-
-
- -
- 
{
-       "advanced": true,
-       "advancedPort": 7620
-}
-
-
-

Useful Commands

-

The following set of commands can come in handy when working with this sheet:

-
    -
  • For Hot reloading and building CSS files, use the following command:
    • -
- - - -
-
-
- -
- 
npm run watch-scss
-
-
-
    -
  • For linting, use the following command:
    • -
- - - -
-
-
- -
- 
npm run lint
-
-
-
    -
  • For formatting with Prettier, use the following command:
    • -
- - - -
-
-
- -
- 
npm run format
-
-
- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Dispatch -
-
-
-
-
-
-
-
Next
- Example Patterns Sheet -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Quick Start Sheet Template | Beacon SDK +
Beacon SDK +Get started

Quick Start Sheet Template

Prerequisites

To set this sheet up properly, make sure that you have the following tools installed:

  • Vue.js
  • Vite
  • SCSS

Figure 1: Quickstart sheet

Use the following steps to get started:

  1. Install the Beacon SDK: Run the following command.
npm i @roll20-official/beacon-sdk
  1. Install dependencies: Install the dependencies for the project.
npm install
  1. Start the Vite server: After installing the project’s dependencies, you’ll need to start the Vite server. There are two ways to do this:

a. Offline Development: This method will run the Vite server with the default port and environment set to development.

npm run dev

Once this code executes successfully, you can access the Vite server at http://localhost:5173.

This method is useful when you do not have access to the Roll20 website or would like to work on parts of your project that do not depend on a connection to the VTT or Roll20 Characters, such as working on styling, mocking up the environment, building Vue components, testing functionality, etc.

In development mode, you cannot save or access existing character data or use the Beacon SDK functions that depend on VTT or Roll20 Characters functionality, such as dice rolling and token manipulation.

b. Sandbox Development: This method will run the Vite server with the port set to 7620 and the environment set to staging mode.

npm run sandbox

This command will build the SCSS files and then run the Vite server. This will set the server up for connecting to a VTT custom sheet sandbox as well as through the sandbox in Roll20 Characters.

To test your changes in the VTT custom sheet sandbox, you will need to add the following to the sheet.json editor in the game settings:

{
+       "advanced": true,
+       "advancedPort": 7620
+}

Useful Commands

The following set of commands can come in handy when working with this sheet:

  • For Hot reloading and building CSS files, use the following command:
npm run watch-scss
  • For linting, use the following command:
npm run lint
  • For formatting with Prettier, use the following command:
npm run format
Prev
Dispatch
Next
Example Patterns Sheet
\ No newline at end of file diff --git a/public/docs/gettingstarted/releasing-a-sheet/index.html b/public/docs/gettingstarted/releasing-a-sheet/index.html index 84118a4..9707d43 100644 --- a/public/docs/gettingstarted/releasing-a-sheet/index.html +++ b/public/docs/gettingstarted/releasing-a-sheet/index.html @@ -1,605 +1,3 @@ - - - - - - - - - - - - - - - -Releasing a Sheet | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Releasing a Sheet

- - -

A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform. This sheet includes all the necessary code, assets, and metadata packaged together to be easily shared, tested, and eventually deployed on Roll20.

-

When you’re ready to test and share a sheet on Roll20, you’d want to do it in such a way that others who might need it won’t have to set it up with a local dev environment.

-

That’s what the steps below help you achieve. In this guide, you can make your sheet available in the Roll20 Tabletop and Characters.

-

Steps to Release a Test Sheet

-

The following steps will aid you while releasing your sheet:

-
    -
  1. -

    Create a Build Command:

    -

    You must have a build command that will produce the minified production-ready code. You can find an example in our Quickstart Package JSON. The build command must be able to create these exact files:

    -
      -
    • sheet.js
      • -
    • sheet.css
      • -
    • host.css (optional)
      • -
    • Add a local folder that contains fonts and images used in the sheet (optional).
      • -
    -
    2. -
  2. -

    Add a sheet.json file:

    -

    Add a sheet.json file to your sheet folder to ensure the metadata for your sheet is up-to-date. For this, you can also find an example in our Quickstart Package JSON.

    -
    3. -
  3. -

    Create a Pull Request in the Community Sheet Repo:

    -

    In the Community Sheet Repo, create a pull request that must include the submission checklist from our previous process.

    -
    4. -
-
- -
- -
-

Submission Checklist

-

When submitting a new or updated sheet to Roll20, it’s essential to follow the guidelines to ensure a smooth review and approval process.

-

Below is a checklist to help you prepare your submission.

-

Required

-

The following are the required submission checklist items:

-
    -
  • The pull request title clearly contains the name of the sheet I am editing.
    • -
  • The pull request title clearly states the type of change I am submitting (New Sheet/New Feature/Bugfix/etc.).
    • -
  • The pull request makes changes to files in only one sub-folder.
    • -
  • The pull request does not contain changes to any JSON files in the translations folder (translation.json is permitted).
    • -
-

New Sheet Details

-

You must include the following information in your sheet:

-
    -
  • The name of this game is: < THE AETHYRBLOOD CHRONICLES >.
    • -
  • The publisher of this game is: < HAPHAZARD PROJECTS >
    • -
  • The name of this game system/family is: < DPS System ('dice pool scales') >
    • -
-

You must also check out the following:

-
    -
  • I have followed the Character Sheets Standards when building this sheet.
    • -
  • I have authorization from the game’s publisher to make this an official sheet on Roll20 with their name attached.
    • -
  • This game is not traditionally published, but a copy of the game rules can be purchased/downloaded/found at The Aethyrblood Chronicles Core Rule Book
    • -
- -
-
-
- -

In the pull request comments, make sure to list the email addresses of the Roll20 users you’d like to have access to the sheet.

-
- -
- -
-

We can always grant more people access to the sheet after it is released. However, you can inform us in our Official Community Sheet Development Channels on Discord.

- -
-
-
- -
    -
  1. -

    Approval and Access:

    -

    After you create a pull request, our team will approve it and add your sheet to the sheet selection in Roll20 Tabletop and Characters. We will then give only your Roll20 user and any others you’ve listed in the pull request comments access to the sheet in Roll20. This sheet will then be available for you and others with access to test it.

    -
    2. -
-

Releasing a Final Version

-

After you have released a test version of your sheet, you can follow the same steps as releasing a test version to make your sheet available to everyone. This time, the pull request comments state that it is a final release version.

-

Once you have created the pull request, our team will review the sheet functionality, code, and metadata for consistency, best practices, and overall system security. We reserve the right to reject any sheet that does not meet our terms of use or conflicts with our partnerships.

- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- How to Contribute -
-
-
-
-
-
-
-
Next
- Resources -
-
- - - - - - -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Releasing a Sheet | Beacon SDK +
Beacon SDK +Get started

Releasing a Sheet

A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform. This sheet includes all the necessary code, assets, and metadata packaged together to be easily shared, tested, and eventually deployed on Roll20.

When you’re ready to test and share a sheet on Roll20, you’d want to do it in such a way that others who might need it won’t have to set it up with a local dev environment.

That’s what the steps below help you achieve. In this guide, you can make your sheet available in the Roll20 Tabletop and Characters.

Steps to Release a Test Sheet

The following steps will aid you while releasing your sheet:

  1. Create a Build Command:

    You must have a build command that will produce the minified production-ready code. You can find an example in our Quickstart Package JSON. The build command must be able to create these exact files:

    • sheet.js
    • sheet.css
    • host.css (optional)
    • Add a local folder that contains fonts and images used in the sheet (optional).

  2. Add a sheet.json file:

    Add a sheet.json file to your sheet folder to ensure the metadata for your sheet is up-to-date. For this, you can also find an example in our Quickstart Package JSON.

  3. Create a Pull Request in the Community Sheet Repo:

    In the Community Sheet Repo, create a pull request that must include the submission checklist from our previous process.

Submission Checklist

When submitting a new or updated sheet to Roll20, it’s essential to follow the guidelines to ensure a smooth review and approval process.

Below is a checklist to help you prepare your submission.

Required

The following are the required submission checklist items:

  • The pull request title clearly contains the name of the sheet I am editing.
  • The pull request title clearly states the type of change I am submitting (New Sheet/New Feature/Bugfix/etc.).
  • The pull request makes changes to files in only one sub-folder.
  • The pull request does not contain changes to any JSON files in the translations folder (translation.json is permitted).

New Sheet Details

You must include the following information in your sheet:

  • The name of this game is: < THE AETHYRBLOOD CHRONICLES >.
  • The publisher of this game is: < HAPHAZARD PROJECTS >
  • The name of this game system/family is: < DPS System ('dice pool scales') >

You must also check out the following:

  • I have followed the Character Sheets Standards when building this sheet.
  • I have authorization from the game’s publisher to make this an official sheet on Roll20 with their name attached.
  • This game is not traditionally published, but a copy of the game rules can be purchased/downloaded/found at The Aethyrblood Chronicles Core Rule Book

In the pull request comments, make sure to list the email addresses of the Roll20 users you’d like to have access to the sheet.

We can always grant more people access to the sheet after it is released. However, you can inform us in our Official Community Sheet Development Channels on Discord.

  1. Approval and Access:

    After you create a pull request, our team will approve it and add your sheet to the sheet selection in Roll20 Tabletop and Characters. We will then give only your Roll20 user and any others you’ve listed in the pull request comments access to the sheet in Roll20. This sheet will then be available for you and others with access to test it.

Releasing a Final Version

After you have released a test version of your sheet, you can follow the same steps as releasing a test version to make your sheet available to everyone. This time, the pull request comments state that it is a final release version.

Once you have created the pull request, our team will review the sheet functionality, code, and metadata for consistency, best practices, and overall system security. We reserve the right to reject any sheet that does not meet our terms of use or conflicts with our partnerships.

Prev
How to Contribute
Next
Resources
\ No newline at end of file diff --git a/public/docs/gettingstarted/sitemap.xml b/public/docs/gettingstarted/sitemap.xml index 14aabac..8b0050a 100644 --- a/public/docs/gettingstarted/sitemap.xml +++ b/public/docs/gettingstarted/sitemap.xml @@ -1,38 +1 @@ - - - - http://localhost:1313/docs/gettingstarted/introduction/ - 2024-01-07T16:04:48+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/gettingstarted/installing-beacon/ - 2024-02-07T16:04:48+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/gettingstarted/quick-start-sheet-template/ - 2024-05-07T16:13:18+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/gettingstarted/example-patterns-sheet/ - 2024-09-07T16:13:18+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/gettingstarted/releasing-a-sheet/ - 2024-09-07T16:13:18+02:00 - monthly - 0.5 - - \ No newline at end of file +https://roll20.github.io/beacon-docs/docs/gettingstarted/introduction/2024-01-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/installing-beacon/2024-02-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/quick-start-sheet-template/2024-05-07T16:13:18+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/example-patterns-sheet/2024-09-07T16:13:18+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/releasing-a-sheet/2024-09-07T16:13:18+02:00monthly0.5 \ No newline at end of file diff --git a/public/docs/index.html b/public/docs/index.html index 17d19d6..efed94a 100644 --- a/public/docs/index.html +++ b/public/docs/index.html @@ -1,471 +1,3 @@ - - - - - - - - - - - - - - - -Docs | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
-
-

Docs

- -
- - - -
-
- Actions → -
-
- - - -
-
- Changelog → -
-
- - - -
-
- Computed → -
-
- - - -
-
- Dispatch → -
-
- - - -
-
- Example Patterns Sheet → -
-
- - - -
-
- FAQ → -
-
- - - -
-
- Glossary → -
-
- - - -
-
- Handlers → -
-
- - - -
-
- Handling Legacy Macro Attributes → -
-
- - - -
-
- How to Contribute → -
-
- - - -
-
- InitRelay → -
-
- - - -
-
- Installing Beacon → -
-
- - - -
-
- Introduction → -
-
- - - -
-
- Quick Start Sheet Template → -
-
- - - -
-
- Releasing a Sheet → -
-
- - - -
-
- Resources → -
-
- - - -
-
- Rolls → -
-
- - -
-
-
-
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Docs | Beacon SDK +
Beacon SDK +Get started
\ No newline at end of file diff --git a/public/docs/index.xml b/public/docs/index.xml index 53afa47..1a8c518 100644 --- a/public/docs/index.xml +++ b/public/docs/index.xml @@ -1,20 +1 @@ - - - - Docs on Beacon SDK - http://localhost:1313/docs/ - Recent content in Docs on Beacon SDK - Hugo - en - Copyright (c) 2020-2024 Beacon SDK - Tue, 27 Feb 2024 09:30:56 +0100 - - - Resources - http://localhost:1313/docs/resources/ - Tue, 27 Feb 2024 09:30:56 +0100 - http://localhost:1313/docs/resources/ - Link to valuable, relevant resources. - - - +Docs on Beacon SDKhttps://roll20.github.io/beacon-docs/docs/Recent content in Docs on Beacon SDKHugoenCopyright (c) 2020-2024 Beacon SDKTue, 27 Feb 2024 09:30:56 +0100Resourceshttps://roll20.github.io/beacon-docs/docs/resources/Tue, 27 Feb 2024 09:30:56 +0100https://roll20.github.io/beacon-docs/docs/resources/Link to valuable, relevant resources. \ No newline at end of file diff --git a/public/docs/resources/index.html b/public/docs/resources/index.html index 5ab3bf9..d310bf3 100644 --- a/public/docs/resources/index.html +++ b/public/docs/resources/index.html @@ -1,484 +1,3 @@ - - - - - - - - - - - - - - - -Resources | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - -
-
-
Docs
- -
-
- -
-
- - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
- - - - - - - -
- - -
- - - -

Resources

- - -

Link to valuable, relevant resources.

- -
- -
-
- -
-
-
- - - - - - -
-
-
Prev
- Releasing a Sheet -
-
-
-
- - -
- -
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Resources | Beacon SDK +
Beacon SDK +Get started

Resources

Link to valuable, relevant resources.

Prev
Releasing a Sheet
\ No newline at end of file diff --git a/public/docs/sitemap.xml b/public/docs/sitemap.xml index 68f8ff3..b3bd694 100644 --- a/public/docs/sitemap.xml +++ b/public/docs/sitemap.xml @@ -1,127 +1 @@ - - - - http://localhost:1313/docs/gettingstarted/ - 2023-09-07T16:06:50+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/components/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/about/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - - http://localhost:1313/docs/resources/ - 2024-02-27T09:30:56+01:00 - monthly - 0.5 - - - http://localhost:1313/docs/gettingstarted/introduction/ - 2024-01-07T16:04:48+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/gettingstarted/installing-beacon/ - 2024-02-07T16:04:48+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/gettingstarted/quick-start-sheet-template/ - 2024-05-07T16:13:18+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/gettingstarted/example-patterns-sheet/ - 2024-09-07T16:13:18+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/gettingstarted/releasing-a-sheet/ - 2024-09-07T16:13:18+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/components/initrelay/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/components/actions/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/components/computed/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/components/handlers/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/components/handling-legacy-macro-attributes/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/components/rolls/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/components/dispatch/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/about/glossary/ - 2024-02-07T16:04:48+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/about/faq/ - 2024-02-07T16:04:48+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/about/changelog/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - - http://localhost:1313/docs/about/how-to-contribute/ - 2024-09-07T16:13:18+02:00 - monthly - 0.5 - - \ No newline at end of file +https://roll20.github.io/beacon-docs/docs/gettingstarted/2023-09-07T16:06:50+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/resources/2024-02-27T09:30:56+01:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/introduction/2024-01-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/installing-beacon/2024-02-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/quick-start-sheet-template/2024-05-07T16:13:18+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/example-patterns-sheet/2024-09-07T16:13:18+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/releasing-a-sheet/2024-09-07T16:13:18+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/initrelay/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/actions/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/computed/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/handlers/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/handling-legacy-macro-attributes/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/rolls/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/dispatch/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/glossary/2024-02-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/faq/2024-02-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/changelog/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/how-to-contribute/2024-09-07T16:13:18+02:00monthly0.5 \ No newline at end of file diff --git a/public/index.html b/public/index.html index b6e59cf..f059d8a 100644 --- a/public/index.html +++ b/public/index.html @@ -1,256 +1,3 @@ - - - - - - - - - - - - - - - - -Welcome to Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
-
-

Welcome to Beacon SDK

-
-
-

Congrats on setting up a new Doks project!

- -
-
-
- - -
-
- -
-
-
- -
-
-
-
-

Update content

-

Edit content/_index.md to see this page change.

-
-
-

Add new content

-

Add Markdown files to content to create new pages.

-
-
-

Configure your site

-

Edit your config in config/_default/hyas/doks.toml.

-
-
-

Read the docs

-

Learn more in the Docs.

-
-
-
-
- - - - - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Welcome to Beacon SDK +
Beacon SDK +Get started

Welcome to Beacon SDK

Congrats on setting up a new Doks project!

Update content

Edit content/_index.md to see this page change.

Add new content

Add Markdown files to content to create new pages.

Configure your site

Edit your config in config/_default/hyas/doks.toml.

Read the docs

Learn more in the Docs.

\ No newline at end of file diff --git a/public/index.xml b/public/index.xml index efd8e5d..a3b3b4d 100644 --- a/public/index.xml +++ b/public/index.xml @@ -1,83 +1,2 @@ - - - - Welcome to Beacon SDK on Beacon SDK - http://localhost:1313/ - Recent content in Welcome to Beacon SDK on Beacon SDK - Hugo - en - Copyright (c) 2020-2024 Beacon SDK - Wed, 07 Feb 2024 16:04:48 +0200 - - - Example Post - http://localhost:1313/blog/example-post/ - Thu, 07 Sep 2023 16:27:22 +0200 - http://localhost:1313/blog/example-post/ - You can use blog posts for announcing product updates and features. - - - Introduction - http://localhost:1313/docs/gettingstarted/introduction/ - Tue, 07 May 2024 16:04:48 +0200 - http://localhost:1313/docs/gettingstarted/introduction/ - The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements. - - - Installing Beacon - http://localhost:1313/docs/gettingstarted/installing-beacon/ - Sun, 07 Apr 2024 16:04:48 +0200 - http://localhost:1313/docs/gettingstarted/installing-beacon/ - This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to. - - - Glossary - http://localhost:1313/docs/about/glossary/ - Thu, 07 Mar 2024 16:04:48 +0200 - http://localhost:1313/docs/about/glossary/ - Background: The background color of the alert box. Character: An entity in the game with attributes, bio, GM notes, and a token representation. - - - FAQ - http://localhost:1313/docs/about/faq/ - Sun, 07 Jan 2024 16:04:48 +0200 - http://localhost:1313/docs/about/faq/ - Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)? It depends on your web development skill level. - - - InitRelay - http://localhost:1313/docs/components/initrelay/ - Fri, 07 Jun 2024 16:12:37 +0200 - http://localhost:1313/docs/components/initrelay/ - The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games. - - - Actions - http://localhost:1313/docs/components/actions/ - Tue, 07 May 2024 16:12:37 +0200 - http://localhost:1313/docs/components/actions/ - initRelay({ //...other methods actions: {}, }): Promise&lt;Dispatch&gt; Actions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters. - - - Computed - http://localhost:1313/docs/components/computed/ - Sun, 07 Apr 2024 16:12:37 +0200 - http://localhost:1313/docs/components/computed/ - Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true. - - - Handlers - http://localhost:1313/docs/components/handlers/ - Thu, 07 Mar 2024 16:12:37 +0200 - http://localhost:1313/docs/components/handlers/ - Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet. - - - Handling Legacy Macro Attributes - http://localhost:1313/docs/components/handling-legacy-macro-attributes/ - Wed, 07 Feb 2024 16:12:37 +0200 - http://localhost:1313/docs/components/handling-legacy-macro-attributes/ - When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet. - - - +Welcome to Beacon SDK on Beacon SDKhttps://roll20.github.io/beacon-docs/Recent content in Welcome to Beacon SDK on Beacon SDKHugoenCopyright (c) 2020-2024 Beacon SDKWed, 07 Feb 2024 16:04:48 +0200Example Posthttps://roll20.github.io/beacon-docs/blog/example-post/Thu, 07 Sep 2023 16:27:22 +0200https://roll20.github.io/beacon-docs/blog/example-post/You can use blog posts for announcing product updates and features.Introductionhttps://roll20.github.io/beacon-docs/docs/gettingstarted/introduction/Tue, 07 May 2024 16:04:48 +0200https://roll20.github.io/beacon-docs/docs/gettingstarted/introduction/The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.Installing Beaconhttps://roll20.github.io/beacon-docs/docs/gettingstarted/installing-beacon/Sun, 07 Apr 2024 16:04:48 +0200https://roll20.github.io/beacon-docs/docs/gettingstarted/installing-beacon/This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.Glossaryhttps://roll20.github.io/beacon-docs/docs/about/glossary/Thu, 07 Mar 2024 16:04:48 +0200https://roll20.github.io/beacon-docs/docs/about/glossary/Background: The background color of the alert box. +Character: An entity in the game with attributes, bio, GM notes, and a token representation.FAQhttps://roll20.github.io/beacon-docs/docs/about/faq/Sun, 07 Jan 2024 16:04:48 +0200https://roll20.github.io/beacon-docs/docs/about/faq/Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)? It depends on your web development skill level.InitRelayhttps://roll20.github.io/beacon-docs/docs/components/initrelay/Fri, 07 Jun 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/components/initrelay/The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games.Actionshttps://roll20.github.io/beacon-docs/docs/components/actions/Tue, 07 May 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/components/actions/initRelay({ //...other methods actions: {}, }): Promise&lt;Dispatch&gt; Actions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters.Computedhttps://roll20.github.io/beacon-docs/docs/components/computed/Sun, 07 Apr 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/components/computed/Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.Handlershttps://roll20.github.io/beacon-docs/docs/components/handlers/Thu, 07 Mar 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/components/handlers/Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet.Handling Legacy Macro Attributeshttps://roll20.github.io/beacon-docs/docs/components/handling-legacy-macro-attributes/Wed, 07 Feb 2024 16:12:37 +0200https://roll20.github.io/beacon-docs/docs/components/handling-legacy-macro-attributes/When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet. \ No newline at end of file diff --git a/public/main.f93298bbfac28aad707e0176e283a289a6f111a0a8be8dc661d9c822e77de2ce0347e2155b3a776a5cc75d62eaab4598db045a20dc59bbe57890e0b7bc072c78.css b/public/main.f93298bbfac28aad707e0176e283a289a6f111a0a8be8dc661d9c822e77de2ce0347e2155b3a776a5cc75d62eaab4598db045a20dc59bbe57890e0b7bc072c78.css new file mode 100644 index 0000000..c005d16 --- /dev/null +++ b/public/main.f93298bbfac28aad707e0176e283a289a6f111a0a8be8dc661d9c822e77de2ce0347e2155b3a776a5cc75d62eaab4598db045a20dc59bbe57890e0b7bc072c78.css @@ -0,0 +1 @@ +:root[data-bs-theme="light"],[data-bs-theme="light"] ::backdrop{--sl-color-white: hsl(224, 10%, 10%);--sl-color-gray-1: hsl(224, 14%, 16%);--sl-color-gray-2: hsl(224, 10%, 23%);--sl-color-gray-3: hsl(224, 7%, 36%);--sl-color-gray-4: hsl(224, 6%, 56%);--sl-color-gray-5: hsl(224, 6%, 77%);--sl-color-gray-6: hsl(224, 20%, 94%);--sl-color-gray-7: hsl(224, 19%, 97%);--sl-color-black: hsl(0, 0%, 100%)}:root,::backdrop{--sl-color-white: hsl(0, 0%, 100%);--sl-color-gray-1: hsl(224, 20%, 94%);--sl-color-gray-2: hsl(224, 6%, 77%);--sl-color-gray-3: hsl(224, 6%, 56%);--sl-color-gray-4: hsl(224, 7%, 36%);--sl-color-gray-5: hsl(224, 10%, 23%);--sl-color-gray-6: hsl(224, 14%, 16%);--sl-color-black: hsl(224, 10%, 10%);--sl-hue-orange: 41;--sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%);--sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%);--sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%);--sl-hue-green: 101;--sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%);--sl-color-green: hsl(var(--sl-hue-green), 82%, 63%);--sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%);--sl-hue-blue: 234;--sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%);--sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%);--sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%);--sl-hue-purple: 281;--sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%);--sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%);--sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%);--sl-hue-red: 339;--sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%);--sl-color-red: hsl(var(--sl-hue-red), 82%, 63%);--sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%);--sl-color-accent-low: hsl(224, 54%, 20%);--sl-color-accent: hsl(224, 100%, 60%);--sl-color-accent-high: hsl(224, 100%, 85%);--sl-color-text: var(--sl-color-gray-2);--sl-color-text-accent: var(--sl-color-accent-high);--sl-color-text-invert: var(--sl-color-accent-low);--sl-color-bg: var(--sl-color-black);--sl-color-bg-nav: var(--sl-color-gray-6);--sl-color-bg-sidebar: var(--sl-color-gray-6);--sl-color-bg-inline-code: var(--sl-color-gray-5);--sl-color-hairline-light: var(--sl-color-gray-5);--sl-color-hairline: var(--sl-color-gray-6);--sl-color-hairline-shade: var(--sl-color-black);--sl-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66);--sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), 0px 2px 1px hsla(0, 0%, 0%, 0.24);--sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08), 0px 5px 2px hsla(0, 0%, 0%, 0.08), 0px 3px 2px hsla(0, 0%, 0%, 0.12), 0px 1px 1px hsla(0, 0%, 0%, 0.15);--sl-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(0, 0%, 0%, 0.1), 0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(0, 0%, 0%, 0.75), 0px 4px 2px hsla(0, 0%, 0%, 0.25);--sl-text-xs: 0.8125rem;--sl-text-sm: 0.875rem;--sl-text-base: 1rem;--sl-text-lg: 1.125rem;--sl-text-xl: 1.25rem;--sl-text-2xl: 1.5rem;--sl-text-3xl: 1.8125rem;--sl-text-4xl: 2.1875rem;--sl-text-5xl: 2.625rem;--sl-text-6xl: 4rem;--sl-text-body: var(--sl-text-base);--sl-text-body-sm: var(--sl-text-xs);--sl-text-code: var(--sl-text-sm);--sl-text-code-sm: var(--sl-text-xs);--sl-text-h1: var(--sl-text-4xl);--sl-text-h2: var(--sl-text-3xl);--sl-text-h3: var(--sl-text-2xl);--sl-text-h4: var(--sl-text-xl);--sl-text-h5: var(--sl-text-lg);--sl-line-height: 1.8;--sl-line-height-headings: 1.2;--sl-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--__sl-font: var(--sl-font, ""), var(--sl-font-system);--__sl-font-mono: var(--sl-font-mono, ""), var(--sl-font-system-mono);--sl-nav-height: 3.5rem;--sl-nav-pad-x: 1rem;--sl-nav-pad-y: 0.75rem;--sl-mobile-toc-height: 3rem;--sl-sidebar-width: 18.75rem;--sl-sidebar-pad-x: 1rem;--sl-content-width: 45rem;--sl-content-pad-x: 1rem;--sl-menu-button-size: 2rem;--sl-nav-gap: var(--sl-content-pad-x);--sl-outline-offset-inside: -0.1875rem;--sl-z-index-toc: 4;--sl-z-index-menu: 5;--sl-z-index-navbar: 10;--sl-z-index-skiplink: 20}:root{--purple-hsl: 255, 60%, 60%;--overlay-blurple: hsla(var(--purple-hsl), 0.2)}:root{--ec-brdRad: 0px;--ec-brdWd: 1px;--ec-brdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-codeFontFml: var(--__sl-font-mono);--ec-codeFontSize: var(--sl-text-code);--ec-codeFontWg: 400;--ec-codeLineHt: var(--sl-line-height);--ec-codePadBlk: 0.75rem;--ec-codePadInl: 1rem;--ec-codeBg: #011627;--ec-codeFg: #d6deeb;--ec-codeSelBg: #1d3b53;--ec-uiFontFml: var(--__sl-font);--ec-uiFontSize: 0.9rem;--ec-uiFontWg: 400;--ec-uiLineHt: 1.65;--ec-uiPadBlk: 0.25rem;--ec-uiPadInl: 1rem;--ec-uiSelBg: #234d708c;--ec-uiSelFg: #ffffff;--ec-focusBrd: #122d42;--ec-sbThumbCol: #ffffff17;--ec-sbThumbHoverCol: #ffffff49;--ec-tm-lineMarkerAccentMarg: 0rem;--ec-tm-lineMarkerAccentWd: 0.15rem;--ec-tm-lineDiffIndMargLeft: 0.25rem;--ec-tm-inlMarkerBrdWd: 1.5px;--ec-tm-inlMarkerBrdRad: 0.2rem;--ec-tm-inlMarkerPad: 0.15rem;--ec-tm-insDiffIndContent: "+";--ec-tm-delDiffIndContent: "-";--ec-tm-markBg: #ffffff17;--ec-tm-markBrdCol: #ffffff40;--ec-tm-insBg: #1e571599;--ec-tm-insBrdCol: #487f3bd0;--ec-tm-insDiffIndCol: #79b169d0;--ec-tm-delBg: #862d2799;--ec-tm-delBrdCol: #b4554bd0;--ec-tm-delDiffIndCol: #ed8779d0;--ec-frm-shdCol: #011627;--ec-frm-frameBoxShdCssVal: none;--ec-frm-edActTabBg: var(--sl-color-gray-6);--ec-frm-edActTabFg: var(--sl-color-text);--ec-frm-edActTabBrdCol: transparent;--ec-frm-edActTabIndHt: 1px;--ec-frm-edActTabIndTopCol: var(--sl-color-accent-high);--ec-frm-edActTabIndBtmCol: transparent;--ec-frm-edTabsMargInlStart: 0;--ec-frm-edTabsMargBlkStart: 0;--ec-frm-edTabBrdRad: 0px;--ec-frm-edTabBarBg: var(--sl-color-black);--ec-frm-edTabBarBrdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edTabBarBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edBg: var(--sl-color-gray-6);--ec-frm-trmTtbDotsFg: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmTtbDotsOpa: 0.75;--ec-frm-trmTtbBg: var(--sl-color-black);--ec-frm-trmTtbFg: var(--sl-color-text);--ec-frm-trmTtbBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmBg: var(--sl-color-gray-6);--ec-frm-inlBtnFg: var(--sl-color-text);--ec-frm-inlBtnBg: var(--sl-color-text);--ec-frm-inlBtnBgIdleOpa: 0;--ec-frm-inlBtnBgHoverOrFocusOpa: 0.2;--ec-frm-inlBtnBgActOpa: 0.3;--ec-frm-inlBtnBrd: var(--sl-color-text);--ec-frm-inlBtnBrdOpa: 0.4;--ec-frm-tooltipSuccessBg: #158744;--ec-frm-tooltipSuccessFg: white}:root,[data-bs-theme="light"]{--bs-blue: #3347ff;--bs-indigo: #6610f2;--bs-purple: #bd53ee;--bs-pink: #d63384;--bs-red: #ee5389;--bs-orange: #fd7e14;--bs-yellow: #eebd53;--bs-green: #84ee53;--bs-teal: #20c997;--bs-cyan: #0dcaf0;--bs-black: #000;--bs-white: #fff;--bs-gray: #6c757d;--bs-gray-dark: #343a40;--bs-gray-100: #f8f9fa;--bs-gray-200: #e9ecef;--bs-gray-300: #dee2e6;--bs-gray-400: #ced4da;--bs-gray-500: #adb5bd;--bs-gray-600: #6c757d;--bs-gray-700: #495057;--bs-gray-800: #343a40;--bs-gray-900: #212529;--bs-primary: #5d2f86;--bs-secondary: #6c757d;--bs-success: #84ee53;--bs-info: #3347ff;--bs-warning: #eebd53;--bs-danger: #ee5389;--bs-light: #f8f9fa;--bs-dark: #212529;--bs-primary-rgb: 93,47,134;--bs-secondary-rgb: 108,117,125;--bs-success-rgb: 132.2821,238.017,83.283;--bs-info-rgb: 51,71.4,255;--bs-warning-rgb: 238.017,189.0179,83.283;--bs-danger-rgb: 238.017,83.283,137.4399;--bs-light-rgb: 248,249,250;--bs-dark-rgb: 33,37,41;--bs-primary-text-emphasis: #251336;--bs-secondary-text-emphasis: #2b2f32;--bs-success-text-emphasis: #355f21;--bs-info-text-emphasis: #141d66;--bs-warning-text-emphasis: #5f4c21;--bs-danger-text-emphasis: #5f2137;--bs-light-text-emphasis: #495057;--bs-dark-text-emphasis: #495057;--bs-primary-bg-subtle: #dfd5e7;--bs-secondary-bg-subtle: #e2e3e5;--bs-success-bg-subtle: #e6fcdd;--bs-info-bg-subtle: #d6daff;--bs-warning-bg-subtle: #fcf2dd;--bs-danger-bg-subtle: #fcdde7;--bs-light-bg-subtle: #fcfcfd;--bs-dark-bg-subtle: #ced4da;--bs-primary-border-subtle: #beaccf;--bs-secondary-border-subtle: #c4c8cb;--bs-success-border-subtle: #cef8ba;--bs-info-border-subtle: #adb6ff;--bs-warning-border-subtle: #f8e5ba;--bs-danger-border-subtle: #f8bad0;--bs-light-border-subtle: #e9ecef;--bs-dark-border-subtle: #adb5bd;--bs-white-rgb: 255,255,255;--bs-black-rgb: 0,0,0;--bs-font-sans-serif: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0));--bs-body-font-family: var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight: 400;--bs-body-line-height: 1.5;--bs-body-color: #1d2d35;--bs-body-color-rgb: 29,45,53;--bs-body-bg: #fff;--bs-body-bg-rgb: 255,255,255;--bs-emphasis-color: #000;--bs-emphasis-color-rgb: 0,0,0;--bs-secondary-color: rgba(29,45,53,0.75);--bs-secondary-color-rgb: 29,45,53;--bs-secondary-bg: #e9ecef;--bs-secondary-bg-rgb: 233,236,239;--bs-tertiary-color: rgba(29,45,53,0.5);--bs-tertiary-color-rgb: 29,45,53;--bs-tertiary-bg: #f8f9fa;--bs-tertiary-bg-rgb: 248,249,250;--bs-heading-color: inherit;--bs-link-color: #5d2f86;--bs-link-color-rgb: 93,47,134;--bs-link-decoration: none;--bs-link-hover-color: #4a266b;--bs-link-hover-color-rgb: 74,38,107;--bs-link-hover-decoration: underline;--bs-code-color: #d63384;--bs-highlight-color: #1d2d35;--bs-highlight-bg: #fcf2dd;--bs-border-width: 1px;--bs-border-style: solid;--bs-border-color: #dee2e6;--bs-border-color-translucent: rgba(0,0,0,0.175);--bs-border-radius: .375rem;--bs-border-radius-sm: .25rem;--bs-border-radius-lg: .5rem;--bs-border-radius-xl: 1rem;--bs-border-radius-xxl: 2rem;--bs-border-radius-2xl: var(--bs-border-radius-xxl);--bs-border-radius-pill: 50rem;--bs-box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.075);--bs-box-shadow-lg: 0 1rem 3rem rgba(0,0,0,0.175);--bs-box-shadow-inset: inset 0 1px 2px rgba(0,0,0,0.075);--bs-focus-ring-width: .25rem;--bs-focus-ring-opacity: .25;--bs-focus-ring-color: rgba(93,47,134,0.25);--bs-form-valid-color: #84ee53;--bs-form-valid-border-color: #84ee53;--bs-form-invalid-color: #ee5389;--bs-form-invalid-border-color: #ee5389}[data-bs-theme="dark"]{color-scheme:dark;--bs-body-color: #c1c3c8;--bs-body-color-rgb: 192.831,194.7078,199.869;--bs-body-bg: #17181c;--bs-body-bg-rgb: 22.95,24.31,28.05;--bs-emphasis-color: #fff;--bs-emphasis-color-rgb: 255,255,255;--bs-secondary-color: rgba(193,195,200,0.75);--bs-secondary-color-rgb: 192.831,194.7078,199.869;--bs-secondary-bg: #343a40;--bs-secondary-bg-rgb: 52,58,64;--bs-tertiary-color: rgba(193,195,200,0.5);--bs-tertiary-color-rgb: 192.831,194.7078,199.869;--bs-tertiary-bg: #2b3035;--bs-tertiary-bg-rgb: 43,48,53;--bs-primary-text-emphasis: #9e82b6;--bs-secondary-text-emphasis: #a7acb1;--bs-success-text-emphasis: #b5f598;--bs-info-text-emphasis: #8591ff;--bs-warning-text-emphasis: #f5d798;--bs-danger-text-emphasis: #f598b8;--bs-light-text-emphasis: #f8f9fa;--bs-dark-text-emphasis: #dee2e6;--bs-primary-bg-subtle: #13091b;--bs-secondary-bg-subtle: #161719;--bs-success-bg-subtle: #1a3011;--bs-info-bg-subtle: #0a0e33;--bs-warning-bg-subtle: #302611;--bs-danger-bg-subtle: #30111b;--bs-light-bg-subtle: #23262f;--bs-dark-bg-subtle: #1a1d20;--bs-primary-border-subtle: #381c50;--bs-secondary-border-subtle: #41464b;--bs-success-border-subtle: #4f8f32;--bs-info-border-subtle: #1f2b99;--bs-warning-border-subtle: #8f7132;--bs-danger-border-subtle: #8f3252;--bs-light-border-subtle: #353841;--bs-dark-border-subtle: #343a40;--bs-heading-color: #fff;--bs-link-color: #b3c7ff;--bs-link-hover-color: #c2d2ff;--bs-link-color-rgb: 178.5,198.9,255;--bs-link-hover-color-rgb: 194,210,255;--bs-code-color: #e685b5;--bs-highlight-color: #c1c3c8;--bs-highlight-bg: #5f4c21;--bs-border-color: #495057;--bs-border-color-translucent: rgba(255,255,255,0.15);--bs-form-valid-color: #b5f598;--bs-form-valid-border-color: #b5f598;--bs-form-invalid-color: #f598b8;--bs-form-invalid-border-color: #f598b8}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}h5,.h5,h4,.h4,h3,.h3,h2,.h2,h1,.h1{margin-top:0;margin-bottom:.5rem;font-weight:700;line-height:1.2;color:var(--bs-heading-color)}h1,.h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width: 1200px){h1,.h1{font-size:2.5rem}}h2,.h2{font-size:calc(1.325rem + .9vw)}@media (min-width: 1200px){h2,.h2{font-size:2rem}}h3,.h3{font-size:calc(1.3rem + .6vw)}@media (min-width: 1200px){h3,.h3{font-size:1.75rem}}h4,.h4{font-size:calc(1.275rem + .3vw)}@media (min-width: 1200px){h4,.h4{font-size:1.5rem}}h5,.h5{font-size:1.25rem}p{margin-top:0;margin-bottom:1rem}ol,ul{padding-left:2rem}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}strong{font-weight:bolder}small,.small{font-size:.875em}mark,.mark{padding:.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}a{color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));text-decoration:none}a:hover{--bs-link-color-rgb: var(--bs-link-hover-color-rgb);text-decoration:underline}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}pre,code,kbd,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}button{border-radius:0}button:focus:not(:focus-visible){outline:0}input,button{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button{text-transform:none}[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator{display:none !important}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button:not(:disabled),[type="button"]:not(:disabled),[type="reset"]:not(:disabled),[type="submit"]:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit;-webkit-appearance:button}summary{display:list-item;cursor:pointer}[hidden]{display:none !important}.lead{font-size:1.25rem;font-weight:400}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.img-fluid{max-width:100%;height:auto}.figure{display:inline-block}.container,.container-fluid,.container-lg{--bs-gutter-x: 3rem;--bs-gutter-y: 0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width: 576px){.container{max-width:540px}}@media (min-width: 768px){.container{max-width:720px}}@media (min-width: 992px){.container-lg,.container{max-width:960px}}@media (min-width: 1200px){.container-lg,.container{max-width:1240px}}@media (min-width: 1400px){.container-lg,.container{max-width:1320px}}:root{--bs-breakpoint-xs: 0;--bs-breakpoint-sm: 576px;--bs-breakpoint-md: 768px;--bs-breakpoint-lg: 992px;--bs-breakpoint-xl: 1200px;--bs-breakpoint-xxl: 1400px}.row{--bs-gutter-x: 3rem;--bs-gutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}@media (min-width: 768px){.col-md-12{flex:0 0 auto;width:75%}}@media (min-width: 992px){.col-lg-5{flex:0 0 auto;width:31.25%}.col-lg-8{flex:0 0 auto;width:50%}.col-lg-9{flex:0 0 auto;width:56.25%}.col-lg-10{flex:0 0 auto;width:62.5%}.col-lg-11{flex:0 0 auto;width:68.75%}.col-lg-12{flex:0 0 auto;width:75%}}@media (min-width: 1200px){.col-xl-3{flex:0 0 auto;width:18.75%}.col-xl-4{flex:0 0 auto;width:25%}.col-xl-8{flex:0 0 auto;width:50%}.col-xl-9{flex:0 0 auto;width:56.25%}}.sticky-top{position:sticky;top:0;z-index:1020}.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption){position:absolute !important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}li input[type="checkbox"]{--bs-form-check-bg: var(--bs-body-bg);flex-shrink:0;width:1em;height:1em;margin-top:.25em;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-form-check-bg);background-image:var(--bs-form-check-bg-image);background-repeat:no-repeat;background-position:center;background-size:contain;border:var(--bs-border-width) solid var(--bs-border-color);-webkit-print-color-adjust:exact;print-color-adjust:exact}li input[type="checkbox"]{border-radius:.25em}li input[type="radio"][type="checkbox"]{border-radius:50%}li input[type="checkbox"]:active{filter:brightness(90%)}li input[type="checkbox"]:focus{border-color:#ae97c3;outline:0;box-shadow:0 0 0 .25rem rgba(93,47,134,0.25)}li input[type="checkbox"]:checked{background-color:#5d2f86;border-color:#5d2f86}li input:checked[type="checkbox"]{--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}li input[type="checkbox"]:checked[type="radio"]{--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}li input[type="checkbox"]:indeterminate{background-color:#5d2f86;border-color:#5d2f86;--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}li input[type="checkbox"]:disabled{pointer-events:none;filter:none;opacity:.5}.btn{--bs-btn-padding-x: .75rem;--bs-btn-padding-y: .375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight: 400;--bs-btn-line-height: 1.5;--bs-btn-color: var(--bs-body-color);--bs-btn-bg: transparent;--bs-btn-border-width: var(--bs-border-width);--bs-btn-border-color: transparent;--bs-btn-border-radius: var(--bs-border-radius);--bs-btn-hover-border-color: transparent;--bs-btn-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);--bs-btn-disabled-opacity: .65;--bs-btn-focus-box-shadow: 0 0 0 0 rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);text-decoration:none;background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}:not(.btn-check)+.btn:active,.btn:first-child:active,.btn.active,.btn.show{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}:not(.btn-check)+.btn:active:focus-visible,.btn:first-child:active:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn:disabled,.btn.disabled{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color: #fff;--bs-btn-bg: #5d2f86;--bs-btn-border-color: #5d2f86;--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #4f2872;--bs-btn-hover-border-color: #4a266b;--bs-btn-focus-shadow-rgb: 117,78,152;--bs-btn-active-color: #fff;--bs-btn-active-bg: #4a266b;--bs-btn-active-border-color: #462365;--bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);--bs-btn-disabled-color: #fff;--bs-btn-disabled-bg: #5d2f86;--bs-btn-disabled-border-color: #5d2f86}.btn-link{--bs-btn-font-weight: 400;--bs-btn-color: var(--bs-link-color);--bs-btn-bg: transparent;--bs-btn-border-color: transparent;--bs-btn-hover-color: var(--bs-link-hover-color);--bs-btn-hover-border-color: transparent;--bs-btn-active-color: var(--bs-link-hover-color);--bs-btn-active-border-color: transparent;--bs-btn-disabled-color: #6c757d;--bs-btn-disabled-border-color: transparent;--bs-btn-box-shadow: 0 0 0 #000;--bs-btn-focus-shadow-rgb: 117,78,152;text-decoration:none}.btn-link:hover,.btn-link:focus-visible{text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.nav{--bs-nav-link-padding-x: 1rem;--bs-nav-link-padding-y: .5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color: var(--bs-link-color);--bs-nav-link-hover-color: var(--bs-link-hover-color);--bs-nav-link-disabled-color: var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);background:none;border:0;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.nav-link{transition:none}}.nav-link:hover,.nav-link:focus{color:var(--bs-nav-link-hover-color);text-decoration:none}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(93,47,134,0.25)}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.navbar{--bs-navbar-padding-x: 0;--bs-navbar-padding-y: .5rem;--bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y: .3125rem;--bs-navbar-brand-margin-end: 1rem;--bs-navbar-brand-font-size: 1.25rem;--bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x: .5rem;--bs-navbar-toggler-padding-y: .25rem;--bs-navbar-toggler-padding-x: .75rem;--bs-navbar-toggler-font-size: 1.25rem;--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2829,45,53,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius: var(--bs-border-radius);--bs-navbar-toggler-focus-width: 0;--bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);white-space:nowrap}.navbar-brand:hover,.navbar-brand:focus{color:var(--bs-navbar-brand-hover-color);text-decoration:none}.navbar-nav{--bs-nav-link-padding-x: 0;--bs-nav-link-padding-y: .5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color: var(--bs-navbar-color);--bs-nav-link-hover-color: var(--bs-navbar-hover-color);--bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}@media (min-width: 992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto !important;height:auto !important;visibility:visible !important;background-color:transparent !important;border:0 !important;transform:none !important;transition:none}.navbar-expand-lg .offcanvas .offcanvas-header{display:none}.navbar-expand-lg .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}.navbar[data-bs-theme="dark"]{--bs-navbar-color: #c1c3c8;--bs-navbar-hover-color: #b3c7ff;--bs-navbar-disabled-color: rgba(255,255,255,0.25);--bs-navbar-active-color: #b3c7ff;--bs-navbar-brand-color: #b3c7ff;--bs-navbar-brand-hover-color: #b3c7ff;--bs-navbar-toggler-border-color: rgba(255,255,255,0.1);--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c1c3c8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.card{--bs-card-spacer-y: 1rem;--bs-card-spacer-x: 1rem;--bs-card-title-spacer-y: .5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width: var(--bs-border-width);--bs-card-border-color: #e9ecef;--bs-card-border-radius: var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y: .5rem;--bs-card-cap-padding-x: 1rem;--bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg: var(--bs-body-bg);--bs-card-img-overlay-padding: 1rem;--bs-card-group-margin: 1.5rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}.card-text:last-child{margin-bottom:0}.breadcrumb{--bs-breadcrumb-padding-x: 0;--bs-breadcrumb-padding-y: 0;--bs-breadcrumb-margin-bottom: 1rem;--bs-breadcrumb-bg: ;--bs-breadcrumb-border-radius: ;--bs-breadcrumb-divider-color: var(--bs-secondary-color);--bs-breadcrumb-item-padding-x: .5rem;--bs-breadcrumb-item-active-color: var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */}.breadcrumb-item.active{color:var(--bs-breadcrumb-item-active-color)}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);text-decoration:none;background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.page-link.active,.active>.page-link{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.page-link.disabled,.disabled>.page-link{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(var(--bs-border-width) * -1)}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.alert-link{font-weight:700;color:var(--bs-alert-link-color)}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.modal-backdrop{--bs-backdrop-zindex: 1050;--bs-backdrop-bg: #000;--bs-backdrop-opacity: .5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}@keyframes spinner-border{to{transform:rotate(360deg) /* rtl:ignore */}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.offcanvas{--bs-offcanvas-zindex: 1045;--bs-offcanvas-width: 332px;--bs-offcanvas-height: 30vh;--bs-offcanvas-padding-x: 1rem;--bs-offcanvas-padding-y: 1rem;--bs-offcanvas-color: var(--bs-body-color);--bs-offcanvas-bg: var(--bs-body-bg);--bs-offcanvas-border-width: var(--bs-border-width);--bs-offcanvas-border-color: var(--bs-border-color-translucent);--bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);--bs-offcanvas-transition: transform .3s ease-in-out;--bs-offcanvas-title-line-height: 1.5}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}@media (prefers-reduced-motion: reduce){.offcanvas{transition:none}}.offcanvas.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas.showing,.offcanvas.show:not(.hiding){transform:none}.offcanvas.showing,.offcanvas.hiding,.offcanvas.show{visibility:visible}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.show{opacity:.5}.offcanvas-header{display:flex;align-items:center;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)}.offcanvas-title{margin-bottom:0;line-height:var(--bs-offcanvas-title-line-height)}.offcanvas-body{flex-grow:1;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);overflow-y:auto}@keyframes placeholder-glow{50%{opacity:.2}}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-none{display:none !important}.position-relative{position:relative !important}.w-100{width:100% !important}.h-auto{height:auto !important}.flex-row{flex-direction:row !important}.flex-column{flex-direction:column !important}.flex-grow-1{flex-grow:1 !important}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.justify-content-between{justify-content:space-between !important}.order-3{order:3 !important}.m-2{margin:.5rem !important}.mx-2{margin-right:.5rem !important;margin-left:.5rem !important}.mx-auto{margin-right:auto !important;margin-left:auto !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.my-3{margin-top:1rem !important;margin-bottom:1rem !important}.mt-1{margin-top:.25rem !important}.mt-2{margin-top:.5rem !important}.mt-4{margin-top:1.5rem !important}.me-2{margin-right:.5rem !important}.me-auto{margin-right:auto !important}.mb-4{margin-bottom:1.5rem !important}.ms-2{margin-left:.5rem !important}.ms-3{margin-left:1rem !important}.ms-auto{margin-left:auto !important}.mt-n3{margin-top:-1rem !important}.p-0{padding:0 !important}.p-2{padding:.5rem !important}.px-4{padding-right:1.5rem !important;padding-left:1.5rem !important}.pt-4{padding-top:1.5rem !important}.pe-4{padding-right:1.5rem !important}.pb-2{padding-bottom:.5rem !important}.pb-3{padding-bottom:1rem !important}.pb-4{padding-bottom:1.5rem !important}.ps-3{padding-left:1rem !important}.text-start{text-align:left !important}.text-end{text-align:right !important}.text-center{text-align:center !important}.text-decoration-none{text-decoration:none !important}.text-nowrap{white-space:nowrap !important}.text-body{--bs-text-opacity: 1;color:rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important}.text-muted{--bs-text-opacity: 1;color:var(--bs-secondary-color) !important}.text-body-secondary{--bs-text-opacity: 1;color:var(--bs-secondary-color) !important}.text-reset{--bs-text-opacity: 1;color:inherit !important}.rounded-circle{border-radius:50% !important}.rounded-pill{border-radius:var(--bs-border-radius-pill) !important}@media (min-width: 576px){.flex-sm-row{flex-direction:row !important}}@media (min-width: 768px){.flex-md-row{flex-direction:row !important}}@media (min-width: 992px){.d-lg-block{display:block !important}.d-lg-none{display:none !important}.flex-lg-row{flex-direction:row !important}.order-lg-3{order:3 !important}.order-lg-4{order:4 !important}.me-lg-1{margin-right:.25rem !important}.me-lg-3{margin-right:1rem !important}.ms-lg-2{margin-left:.5rem !important}.text-lg-start{text-align:left !important}.text-lg-end{text-align:right !important}}@media (min-width: 1200px){.d-xl-block{display:block !important}.d-xl-none{display:none !important}.flex-xl-nowrap{flex-wrap:nowrap !important}}@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;src:local("Jost Regular Regular"),local("Jost-Regular"),local("Jost* Book"),local("Jost-Book"),url("fonts/vendor/jost/jost-v4-latin-regular.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-regular.woff") format("woff")}@font-face{font-family:Jost;font-style:normal;font-weight:500;font-display:swap;src:local("Jost Regular Medium"),local("JostRoman-Medium"),local("Jost* Medium"),local("Jost-Medium"),url("fonts/vendor/jost/jost-v4-latin-500.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-500.woff") format("woff")}@font-face{font-family:Jost;font-style:normal;font-weight:700;font-display:swap;src:local("Jost Regular Bold"),local("JostRoman-Bold"),local("Jost* Bold"),local("Jost-Bold"),url("fonts/vendor/jost/jost-v4-latin-700.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-700.woff") format("woff")}@font-face{font-family:Jost;font-style:italic;font-weight:400;font-display:swap;src:local("Jost Italic Italic"),local("Jost-Italic"),local("Jost* BookItalic"),local("Jost-BookItalic"),url("fonts/vendor/jost/jost-v4-latin-italic.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-italic.woff") format("woff")}@font-face{font-family:Jost;font-style:italic;font-weight:500;font-display:swap;src:local("Jost Italic Medium Italic"),local("JostItalic-Medium"),local("Jost* Medium Italic"),local("Jost-MediumItalic"),url("fonts/vendor/jost/jost-v4-latin-500italic.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-500italic.woff") format("woff")}@font-face{font-family:Jost;font-style:italic;font-weight:700;font-display:swap;src:local("Jost Italic Bold Italic"),local("JostItalic-Bold"),local("Jost* Bold Italic"),local("Jost-BoldItalic"),url("fonts/vendor/jost/jost-v4-latin-700italic.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-700italic.woff") format("woff")}html[data-bs-theme="dark"] .icon-tabler-sun{display:block}html[data-bs-theme="dark"] .icon-tabler-moon{display:none}html[data-bs-theme="light"] .icon-tabler-sun{display:none}html[data-bs-theme="light"] .icon-tabler-moon{display:block}.privacy .content,.contributors .content,.blog .content,.error404 .content,.docs.list .content,.categories.list .content,.tags.list .content,.list.section .content{padding-top:1rem;padding-bottom:3rem}.content img{max-width:100%}h5,.h5,h4,.h4,h3,.h3,h2,.h2,h1,.h1{margin-top:2rem;margin-bottom:1rem}@media (min-width: 768px){body{font-size:1.125rem}h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{margin-bottom:1.125rem}}.home h1,.home .h1{font-size:calc(1.875rem + 1.5vw);margin-top:-1rem}a:hover,a:focus{text-decoration:underline}a.btn:hover,a.btn:focus{text-decoration:none}.section{padding-top:5rem;padding-bottom:5rem}body.section{padding-top:0;padding-bottom:0}.section-md{padding-top:3rem;padding-bottom:3rem}.docs-sidebar{order:2}@media (min-width: 992px){.docs-sidebar{order:0;border-right:1px solid #e9ecef}@supports (position: sticky){.docs-sidebar{position:sticky;top:4.25rem;z-index:1000;height:calc(100vh - 4.25rem)}}}@media (min-width: 1200px){.docs-sidebar{flex:0 1 320px}}.docs-links{padding-bottom:5rem}@media (min-width: 992px){@supports (position: sticky){.docs-links{max-height:calc(100vh - 4rem);overflow-y:scroll}}}@media (min-width: 992px){.docs-links{display:block;width:auto;margin-right:-1.5rem;padding-bottom:4rem}}.docs-toc{order:2}@supports (position: sticky){.docs-toc{position:sticky;top:4.25rem;height:calc(100vh - 4.25rem);overflow-y:auto}}.docs-content{padding-bottom:3rem;order:1}.navbar a:hover,.navbar a:focus{text-decoration:none}#TableOfContents ul,#toc ul{padding-left:0;list-style:none}#toc a.active{color:#5d2f86;font-weight:500}.section-features{padding-top:2rem}.bg-dots{background-image:radial-gradient(#dee2e6 15%, transparent 15%);background-position:0 0;background-size:1rem 1rem;-webkit-mask:linear-gradient(to top, #fff, transparent);mask:linear-gradient(to top, #fff, transparent);width:100%;height:11rem;margin-top:-10rem;z-index:-1}.modal-backdrop{background-color:#fff}.modal-backdrop.show{opacity:0.7}@media (min-width: 768px){.modal-backdrop.show{opacity:0}}li input[type="checkbox"]{margin:0.25rem;border:1px solid #ced4da}li input[type="checkbox"]:disabled{pointer-events:none;filter:none;opacity:1}li input[type="checkbox"]:checked{background-color:#5d2f86;border-color:#5d2f86}[data-bs-theme="dark"] li input[type="checkbox"]{border:1px solid #6c757d}[data-bs-theme="dark"] li input[type="checkbox"]:checked{background-color:#b3c7ff;border-color:#b3c7ff;--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231d2d35' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}.card-nav{-moz-column-gap:1rem;column-gap:1rem}.card-nav .card{margin:0.5rem 0}.card-nav .card:hover{border:1px solid #d9d9d9;background-color:var(--sl-color-gray-7)}[data-bs-theme="dark"] .card-nav .card{border:1px solid #353841}[data-bs-theme="dark"] .card-nav .card:hover{border:1px solid #888c96;background-color:var(--sl-color-gray-6)}.highlight>.chroma{border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}.bg{background-color:var(--sl-color-gray-7)}.chroma{background-color:var(--sl-color-gray-7)}.chroma .err{color:inherit}.chroma .lnlinks{outline:none;text-decoration:none;color:inherit}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}.chroma .hl{background-color:#0000001a}.chroma .hl{border-inline-start:0.15rem solid #00000055;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}.chroma .hl .ln{margin-left:-0.15rem}.chroma .lnt{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma .ln{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma .line{display:flex}.chroma .k{color:#000000;font-weight:bold}.chroma .kc{color:#000000;font-weight:bold}.chroma .kd{color:#000000;font-weight:bold}.chroma .kn{color:#000000;font-weight:bold}.chroma .kp{color:#000000;font-weight:bold}.chroma .kr{color:#000000;font-weight:bold}.chroma .kt{color:#445588;font-weight:bold}.chroma .na{color:#008080}.chroma .nb{color:#0086b3}.chroma .bp{color:#999999}.chroma .nc{color:#445588;font-weight:bold}.chroma .no{color:#008080}.chroma .nd{color:#3c5d5d;font-weight:bold}.chroma .ni{color:#800080}.chroma .ne{color:#990000;font-weight:bold}.chroma .nf{color:#990000;font-weight:bold}.chroma .nl{color:#990000;font-weight:bold}.chroma .nn{color:#555555}.chroma .nt{color:#000080}.chroma .nv{color:#008080}.chroma .vc{color:#008080}.chroma .vg{color:#008080}.chroma .vi{color:#008080}.chroma .s{color:#dd1144}.chroma .sa{color:#dd1144}.chroma .sb{color:#dd1144}.chroma .sc{color:#dd1144}.chroma .dl{color:#dd1144}.chroma .sd{color:#dd1144}.chroma .s2{color:#dd1144}.chroma .se{color:#dd1144}.chroma .sh{color:#dd1144}.chroma .si{color:#dd1144}.chroma .sx{color:#dd1144}.chroma .sr{color:#009926}.chroma .s1{color:#dd1144}.chroma .ss{color:#990073}.chroma .m{color:#009999}.chroma .mb{color:#009999}.chroma .mf{color:#009999}.chroma .mh{color:#009999}.chroma .mi{color:#009999}.chroma .il{color:#009999}.chroma .mo{color:#009999}.chroma .o{color:#000000;font-weight:bold}.chroma .ow{color:#000000;font-weight:bold}.chroma .c{color:#999988;font-style:italic}.chroma .ch{color:#999988;font-style:italic}.chroma .cm{color:#999988;font-style:italic}.chroma .c1{color:#999988;font-style:italic}.chroma .cs{color:#999999;font-weight:bold;font-style:italic}.chroma .cp{color:#999999;font-weight:bold;font-style:italic}.chroma .cpf{color:#999999;font-weight:bold;font-style:italic}.chroma .gd{color:#000000;background-color:#ffdddd}.chroma .ge{color:inherit;font-style:italic}.chroma .gr{color:#aa0000}.chroma .gh{color:#999999}.chroma .gi{color:#000000;background-color:#ddffdd}.chroma .go{color:#888888}.chroma .gp{color:#555555}.chroma .gs{font-weight:bold}.chroma .gu{color:#aaaaaa}.chroma .gt{color:#aa0000}.chroma .gl{text-decoration:underline}.chroma .w{color:#bbbbbb}[data-bs-theme="dark"] .highlight>.chroma{border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}[data-bs-theme="dark"] .bg{color:#c9d1d9;background-color:var(--sl-color-gray-6)}[data-bs-theme="dark"] .chroma{color:#c9d1d9;background-color:var(--sl-color-gray-6)}[data-bs-theme="dark"] .chroma .err{color:inherit}[data-bs-theme="dark"] .chroma .lnlinks{outline:none;text-decoration:none;color:inherit}[data-bs-theme="dark"] .chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}[data-bs-theme="dark"] .chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}[data-bs-theme="dark"] .chroma .hl{background-color:#ffffff17}[data-bs-theme="dark"] .chroma .hl{border-inline-start:0.15rem solid #ffffff40;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}[data-bs-theme="dark"] .chroma .hl .ln{margin-left:-0.15rem}[data-bs-theme="dark"] .chroma .lnt{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#64686c}[data-bs-theme="dark"] .chroma .ln{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681}[data-bs-theme="dark"] .chroma .line{display:flex}[data-bs-theme="dark"] .chroma .k{color:#ff7b72}[data-bs-theme="dark"] .chroma .kc{color:#79c0ff}[data-bs-theme="dark"] .chroma .kd{color:#ff7b72}[data-bs-theme="dark"] .chroma .kn{color:#ff7b72}[data-bs-theme="dark"] .chroma .kp{color:#79c0ff}[data-bs-theme="dark"] .chroma .kr{color:#ff7b72}[data-bs-theme="dark"] .chroma .kt{color:#ff7b72}[data-bs-theme="dark"] .chroma .na{color:#d2a8ff}[data-bs-theme="dark"] .chroma .nc{color:#f0883e;font-weight:bold}[data-bs-theme="dark"] .chroma .no{color:#79c0ff;font-weight:bold}[data-bs-theme="dark"] .chroma .nd{color:#d2a8ff;font-weight:bold}[data-bs-theme="dark"] .chroma .ni{color:#ffa657}[data-bs-theme="dark"] .chroma .ne{color:#f0883e;font-weight:bold}[data-bs-theme="dark"] .chroma .nf{color:#d2a8ff;font-weight:bold}[data-bs-theme="dark"] .chroma .nl{color:#79c0ff;font-weight:bold}[data-bs-theme="dark"] .chroma .nn{color:#ff7b72}[data-bs-theme="dark"] .chroma .py{color:#79c0ff}[data-bs-theme="dark"] .chroma .nt{color:#7ee787}[data-bs-theme="dark"] .chroma .nv{color:#79c0ff}[data-bs-theme="dark"] .chroma .l{color:#a5d6ff}[data-bs-theme="dark"] .chroma .ld{color:#79c0ff}[data-bs-theme="dark"] .chroma .s{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sa{color:#79c0ff}[data-bs-theme="dark"] .chroma .sb{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sc{color:#a5d6ff}[data-bs-theme="dark"] .chroma .dl{color:#79c0ff}[data-bs-theme="dark"] .chroma .sd{color:#a5d6ff}[data-bs-theme="dark"] .chroma .s2{color:#a5d6ff}[data-bs-theme="dark"] .chroma .se{color:#79c0ff}[data-bs-theme="dark"] .chroma .sh{color:#79c0ff}[data-bs-theme="dark"] .chroma .si{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sx{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sr{color:#79c0ff}[data-bs-theme="dark"] .chroma .s1{color:#a5d6ff}[data-bs-theme="dark"] .chroma .ss{color:#a5d6ff}[data-bs-theme="dark"] .chroma .m{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mb{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mf{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mh{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mi{color:#a5d6ff}[data-bs-theme="dark"] .chroma .il{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mo{color:#a5d6ff}[data-bs-theme="dark"] .chroma .o{color:inherit;font-weight:bold}[data-bs-theme="dark"] .chroma .ow{color:#ff7b72;font-weight:bold}[data-bs-theme="dark"] .chroma .c{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .ch{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .cm{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .c1{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .cs{color:#8b949e;font-weight:bold;font-style:italic}[data-bs-theme="dark"] .chroma .cp{color:#8b949e;font-weight:bold;font-style:italic}[data-bs-theme="dark"] .chroma .cpf{color:#8b949e;font-weight:bold;font-style:italic}[data-bs-theme="dark"] .chroma .gd{color:#ffa198;background-color:#490202}[data-bs-theme="dark"] .chroma .ge{font-style:italic}[data-bs-theme="dark"] .chroma .gr{color:#ffa198}[data-bs-theme="dark"] .chroma .gh{color:#79c0ff;font-weight:bold}[data-bs-theme="dark"] .chroma .gi{color:#56d364;background-color:#0f5323}[data-bs-theme="dark"] .chroma .go{color:#8b949e}[data-bs-theme="dark"] .chroma .gp{color:#8b949e}[data-bs-theme="dark"] .chroma .gs{font-weight:bold}[data-bs-theme="dark"] .chroma .gu{color:#79c0ff}[data-bs-theme="dark"] .chroma .gt{color:#ff7b72}[data-bs-theme="dark"] .chroma .gl{text-decoration:underline}[data-bs-theme="dark"] .chroma .w{color:#6e7681}[data-bs-theme="dark"] h1,[data-bs-theme="dark"] .h1,[data-bs-theme="dark"] h2,[data-bs-theme="dark"] .h2,[data-bs-theme="dark"] h3,[data-bs-theme="dark"] .h3,[data-bs-theme="dark"] h4,[data-bs-theme="dark"] .h4{color:#fff}[data-bs-theme="dark"] body{background:#17181c;color:#c1c3c8}[data-bs-theme="dark"] a{color:#b3c7ff}[data-bs-theme="dark"] .callout a{color:inherit}[data-bs-theme="dark"] .btn-primary{--bs-btn-color: #000;--bs-btn-bg: #b3c7ff;--bs-btn-border-color: #b3c7ff;--bs-btn-hover-color: #000;--bs-btn-hover-bg: #becfff;--bs-btn-hover-border-color: #bacdff;--bs-btn-focus-shadow-rgb: 152,169,217;--bs-btn-active-color: #000;--bs-btn-active-bg: #c2d2ff;--bs-btn-active-border-color: #bacdff;--bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);--bs-btn-disabled-color: #000;--bs-btn-disabled-bg: #b3c7ff;--bs-btn-disabled-border-color: #b3c7ff;color:#17181c}[data-bs-theme="dark"] .navbar{background-color:rgba(23,24,28,0.95);border-bottom:1px solid #23262f}[data-bs-theme="dark"] body.home .navbar{border-bottom:0}[data-bs-theme="dark"] .offcanvas-header{border-bottom:1px solid #343a40}[data-bs-theme="dark"] .offcanvas .nav-link{color:#c1c3c8}[data-bs-theme="dark"] .offcanvas .nav-link:hover,[data-bs-theme="dark"] .offcanvas .nav-link:focus{color:#b3c7ff}[data-bs-theme="dark"] .offcanvas .nav-link.active{color:#b3c7ff}[data-bs-theme="dark"] .page-links a{color:#c1c3c8}[data-bs-theme="dark"] .page-links a:hover{text-decoration:none;color:#b3c7ff}[data-bs-theme="dark"] .navbar .btn-link{color:#c1c3c8}[data-bs-theme="dark"] .content .btn-link{color:#b3c7ff}[data-bs-theme="dark"] .content .btn-link:hover{color:#b3c7ff}[data-bs-theme="dark"] .navbar .btn-link:hover{color:#b3c7ff}[data-bs-theme="dark"] .navbar .btn-link:active{color:#b3c7ff}@media (min-width: 992px){[data-bs-theme="dark"] .docs-sidebar{order:0;border-right:1px solid #23262f}}[data-bs-theme="dark"] .footer{border-top:1px solid #23262f}[data-bs-theme="dark"] .docs-links,[data-bs-theme="dark"] .docs-toc{scrollbar-width:thin;scrollbar-color:#17181c #17181c}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar{width:5px}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar-track,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-track{background:#17181c}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar-thumb,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-thumb{background:#17181c}[data-bs-theme="dark"] .docs-links:hover,[data-bs-theme="dark"] .docs-toc:hover{scrollbar-width:thin;scrollbar-color:#23262f #17181c}[data-bs-theme="dark"] .docs-links:hover::-webkit-scrollbar-thumb,[data-bs-theme="dark"] .docs-toc:hover::-webkit-scrollbar-thumb{background:#23262f}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar-thumb:hover,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-thumb:hover{background:#23262f}[data-bs-theme="dark"] .docs-links h3:not(:first-child),[data-bs-theme="dark"] .docs-links .h3:not(:first-child){border-top:1px solid #23262f}[data-bs-theme="dark"] .page-links li:not(:first-child){border-top:1px dashed #23262f}[data-bs-theme="dark"] .card{background:#17181c;border:1px solid #23262f}[data-bs-theme="dark"] .bg-dots{background-image:radial-gradient(#414349 15%, transparent 15%)}[data-bs-theme="dark"] .text-muted{color:#adafb6 !important}[data-bs-theme="dark"] .offcanvas{background-color:#17181c}[data-bs-theme="dark"] .page-link{color:#b3c7ff;background-color:transparent;border:var(--bs-border-width) solid #23262f}[data-bs-theme="dark"] .page-link:hover{color:#17181c;background-color:#c1c3c8;border-color:#c1c3c8}[data-bs-theme="dark"] .page-link:focus{color:#17181c;background-color:#c1c3c8}[data-bs-theme="dark"] .page-item.active .page-link{color:#17181c;background-color:#b3c7ff;border-color:#b3c7ff}[data-bs-theme="dark"] .page-item.disabled .page-link{color:var(--bs-secondary-color);background-color:#23262f;border-color:#23262f}[data-bs-theme="dark"] details{border:1px solid #23262f}[data-bs-theme="dark"] summary:hover{background:#23262f}[data-bs-theme="dark"] details[open]>summary{border-bottom:1px solid #23262f}[data-bs-theme="dark"] details summary::after{content:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e")}[data-bs-theme="dark"] #toc a.active{color:#b3c7ff}.navbar .btn-link{color:rgba(var(--bs-emphasis-color-rgb), 0.65);padding:0.4375rem 0}.btn-link:focus{outline:0;box-shadow:none}@media (min-width: 992px){.navbar .btn-link{padding:0.5625em 0.25rem 0.5rem 0.125rem}}.navbar .btn-link:hover{color:rgba(var(--bs-emphasis-color-rgb), 0.8)}.navbar .btn-link:active{color:rgba(var(--bs-emphasis-color-rgb), 1)}.clipboard{position:relative;float:right}.btn-clipboard{transition:opacity 0.25s ease-in-out;opacity:0;position:absolute;right:0.5rem;top:0.5rem;line-height:1;padding:0.3125rem 0.3125rem 0.1875rem;background-color:transparent;border-color:transparent}@media (max-width: 767.98px){.btn-clipboard{position:absolute;right:-0.5rem;top:0.5rem}}.btn-clipboard::after{width:22px;height:22px;display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background-color:#495057}.btn-clipboard:hover{border-color:transparent}.btn-clipboard:hover::after{width:22px;height:22px;display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background-color:#212529}.btn-clipboard:focus,.btn-clipboard:active{border-color:transparent !important}.btn-clipboard:focus::after,.btn-clipboard:active::after{width:22px;height:22px;display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background-color:#212529}[data-bs-theme="dark"] .btn-clipboard{background-color:transparent;border-color:transparent}[data-bs-theme="dark"] .btn-clipboard::after{background-color:#ced4da}[data-bs-theme="dark"] .btn-clipboard:hover{border-color:transparent}[data-bs-theme="dark"] .btn-clipboard:hover::after{background-color:#e9ecef}[data-bs-theme="dark"] .btn-clipboard:focus,[data-bs-theme="dark"] .btn-clipboard:active{border-color:transparent}[data-bs-theme="dark"] .btn-clipboard:focus::after,[data-bs-theme="dark"] .btn-clipboard:active::after{background-color:#e9ecef}.highlight{position:relative}@media (min-width: 768px){.highlight:hover .btn-clipboard{opacity:1}}#toTop{opacity:0;transition:opacity 0.3s ease-in-out}.callout{--bs-link-color-rgb: var(--callout-link);--bs-code-color: var(--callout-code-color);color:var(--callout-color, inherit);background-color:var(--callout-bg, var(--bs-gray-100));border-left:0.25rem solid var(--callout-border, var(--bs-gray-300));border-radius:0}.callout a{text-decoration:underline}.callout .highlight{background-color:rgba(0,0,0,0.05)}.callout-content{min-width:0}.callout.callout-note{border-color:var(--sl-color-blue);background-color:var(--sl-color-blue-high)}.callout.callout-note .callout-body a{color:var(--sl-color-blue-low)}.callout.callout-note .callout-body,.callout.callout-note .callout-body a:hover,.callout.callout-note .callout-body a:active{color:var(--sl-color-white)}.callout.callout-tip{border-color:var(--sl-color-purple);background-color:var(--sl-color-purple-high)}.callout.callout-tip .callout-body a{color:var(--sl-color-purple-low)}.callout.callout-tip .callout-body,.callout.callout-tip .callout-body a:hover,.callout.callout-tip .callout-body a:active{color:var(--sl-color-white)}[data-bs-theme="dark"] .callout{color:var(--sl-color-gray-1)}[data-bs-theme="dark"] .callout.callout-note{border-color:var(--sl-color-blue);background-color:var(--sl-color-blue-low)}[data-bs-theme="dark"] .callout.callout-note .callout-body a{color:var(--sl-color-blue-high)}[data-bs-theme="dark"] .callout.callout-note .callout-body,[data-bs-theme="dark"] .callout.callout-note .callout-body a:hover,[data-bs-theme="dark"] .callout.callout-note .callout-body a:active{color:var(--sl-color-white)}[data-bs-theme="dark"] .callout.callout-note code:not(:where(.not-content *)){color:var(--ec-codeFg)}[data-bs-theme="dark"] .callout.callout-tip{border-color:var(--sl-color-purple);background-color:var(--sl-color-purple-low)}[data-bs-theme="dark"] .callout.callout-tip .callout-body a{color:var(--sl-color-purple-high)}[data-bs-theme="dark"] .callout.callout-tip .callout-body,[data-bs-theme="dark"] .callout.callout-tip .callout-body a:hover,[data-bs-theme="dark"] .callout.callout-tip .callout-body a:active{color:var(--sl-color-white)}[data-bs-theme="dark"] .callout.callout-tip code:not(:where(.not-content *)){color:var(--ec-codeFg)}.expressive-code{font-family:var(--ec-uiFontFml);font-size:var(--ec-uiFontSize);line-height:var(--ec-uiLineHt);-moz-text-size-adjust:none;text-size-adjust:none;-webkit-text-size-adjust:none;margin:1.5rem 0}.expressive-code *:not(path){all:revert;box-sizing:border-box}.expressive-code pre{display:flex;margin:0;padding:0;border:var(--ec-brdWd) solid var(--ec-brdCol);border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));background:var(--ec-codeBg)}.expressive-code pre:focus-visible{outline:3px solid var(--ec-focusBrd);outline-offset:-3px}.expressive-code pre>code{all:unset;display:block;flex:1 0 100%;padding:var(--ec-codePadBlk) 0;color:var(--ec-codeFg);font-family:var(--ec-codeFontFml);font-size:var(--ec-codeFontSize);line-height:var(--ec-codeLineHt)}.expressive-code pre{overflow-x:auto}.expressive-code pre::-webkit-scrollbar,.expressive-code pre::-webkit-scrollbar-track{background-color:inherit;border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));border-top-left-radius:0;border-top-right-radius:0}.expressive-code pre::-webkit-scrollbar-thumb{background-color:var(--ec-sbThumbCol);border:4px solid transparent;background-clip:content-box;border-radius:10px}.expressive-code pre::-webkit-scrollbar-thumb:hover{background-color:var(--ec-sbThumbHoverCol)}.expressive-code .ec-line{padding-inline:var(--ec-codePadInl);padding-inline-end:calc(2rem + var(--ec-codePadInl));direction:ltr;unicode-bidi:isolate}.expressive-code .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.expressive-code .ec-line.mark{--tmLineBgCol: var(--ec-tm-markBg);--tmLineBrdCol: var(--ec-tm-markBrdCol)}.expressive-code .ec-line.ins{--tmLineBgCol: var(--ec-tm-insBg);--tmLineBrdCol: var(--ec-tm-insBrdCol)}.expressive-code .ec-line.ins::before{content:var(--ec-tm-insDiffIndContent);color:var(--ec-tm-insDiffIndCol)}.expressive-code .ec-line.del{--tmLineBgCol: var(--ec-tm-delBg);--tmLineBrdCol: var(--ec-tm-delBrdCol)}.expressive-code .ec-line.del::before{content:var(--ec-tm-delDiffIndContent);color:var(--ec-tm-delDiffIndCol)}.expressive-code .ec-line.mark,.expressive-code .ec-line.ins,.expressive-code .ec-line.del{position:relative;background:var(--tmLineBgCol);min-width:calc(100% - var(--ec-tm-lineMarkerAccentMarg));margin-inline-start:var(--ec-tm-lineMarkerAccentMarg);border-inline-start:var(--ec-tm-lineMarkerAccentWd) solid var(--tmLineBrdCol);padding-inline-start:calc(var(--ec-codePadInl) - var(--ec-tm-lineMarkerAccentMarg) - var(--ec-tm-lineMarkerAccentWd)) !important}.expressive-code .ec-line.mark::before,.expressive-code .ec-line.ins::before,.expressive-code .ec-line.del::before{position:absolute;left:var(--ec-tm-lineDiffIndMargLeft)}.expressive-code .ec-line mark,.expressive-code .ec-line .mark{--tmInlineBgCol: var(--ec-tm-markBg);--tmInlineBrdCol: var(--ec-tm-markBrdCol)}.expressive-code .ec-line ins{--tmInlineBgCol: var(--ec-tm-insBg);--tmInlineBrdCol: var(--ec-tm-insBrdCol)}.expressive-code .ec-line del{--tmInlineBgCol: var(--ec-tm-delBg);--tmInlineBrdCol: var(--ec-tm-delBrdCol)}.expressive-code .ec-line mark,.expressive-code .ec-line .mark,.expressive-code .ec-line ins,.expressive-code .ec-line del{all:unset;display:inline-block;position:relative;--tmBrdL: var(--ec-tm-inlMarkerBrdWd);--tmBrdR: var(--ec-tm-inlMarkerBrdWd);--tmRadL: var(--ec-tm-inlMarkerBrdRad);--tmRadR: var(--ec-tm-inlMarkerBrdRad);margin-inline:0.025rem;padding-inline:var(--ec-tm-inlMarkerPad);border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);background:var(--tmInlineBgCol);background-clip:padding-box}.expressive-code .ec-line mark.open-start,.expressive-code .ec-line .open-start.mark,.expressive-code .ec-line ins.open-start,.expressive-code .ec-line del.open-start{margin-inline-start:0;padding-inline-start:0;--tmBrdL: 0px;--tmRadL: 0}.expressive-code .ec-line mark.open-end,.expressive-code .ec-line .open-end.mark,.expressive-code .ec-line ins.open-end,.expressive-code .ec-line del.open-end{margin-inline-end:0;padding-inline-end:0;--tmBrdR: 0px;--tmRadR: 0}.expressive-code .ec-line mark::before,.expressive-code .ec-line .mark::before,.expressive-code .ec-line ins::before,.expressive-code .ec-line del::before{content:"";position:absolute;pointer-events:none;display:inline-block;inset:0;border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);border:var(--ec-tm-inlMarkerBrdWd) solid var(--tmInlineBrdCol);border-inline-width:var(--tmBrdL) var(--tmBrdR)}.expressive-code .frame{all:unset;position:relative;display:block;--header-border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd));--tab-border-radius: calc(var(--ec-frm-edTabBrdRad) + var(--ec-brdWd));--button-spacing: 0.4rem;--code-background: var(--ec-frm-edBg);border-radius:var(--header-border-radius);box-shadow:var(--ec-frm-frameBoxShdCssVal)}.expressive-code .frame .header{display:none;z-index:1;position:relative;border-radius:var(--header-border-radius) var(--header-border-radius) 0 0}.expressive-code .frame.has-title pre,.expressive-code .frame.has-title code,.expressive-code .frame.is-terminal pre,.expressive-code .frame.is-terminal code{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.expressive-code .frame .title:empty:before{content:"\a0"}.expressive-code .frame.has-title:not(.is-terminal){--button-spacing: calc(1.9rem + 2 * (var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)))}.expressive-code .frame.has-title:not(.is-terminal) .title{position:relative;color:var(--ec-frm-edActTabFg);background:var(--ec-frm-edActTabBg);background-clip:padding-box;margin-block-start:var(--ec-frm-edTabsMargBlkStart);padding:calc(var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)) var(--ec-uiPadInl);border:var(--ec-brdWd) solid var(--ec-frm-edActTabBrdCol);border-radius:var(--tab-border-radius) var(--tab-border-radius) 0 0;border-bottom:none;overflow:hidden}.expressive-code .frame.has-title:not(.is-terminal) .title::after{content:"";position:absolute;pointer-events:none;inset:0;border-top:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndTopCol);border-bottom:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndBtmCol)}.expressive-code .frame.has-title:not(.is-terminal) .header{display:flex;background:linear-gradient(to top, var(--ec-frm-edTabBarBrdBtmCol) var(--ec-brdWd), transparent var(--ec-brdWd)),linear-gradient(var(--ec-frm-edTabBarBg), var(--ec-frm-edTabBarBg));background-repeat:no-repeat;padding-inline-start:var(--ec-frm-edTabsMargInlStart)}.expressive-code .frame.has-title:not(.is-terminal) .header::before{content:"";position:absolute;pointer-events:none;inset:0;border:var(--ec-brdWd) solid var(--ec-frm-edTabBarBrdCol);border-radius:inherit;border-bottom:none}.expressive-code .frame.is-terminal{--button-spacing: calc(1.9rem + var(--ec-brdWd) + 2 * var(--ec-uiPadBlk));--code-background: var(--ec-frm-trmBg)}.expressive-code .frame.is-terminal .header{display:flex;align-items:center;justify-content:center;padding-block:var(--ec-uiPadBlk);padding-block-end:calc(var(--ec-uiPadBlk) + var(--ec-brdWd));position:relative;font-weight:500;letter-spacing:0.025ch;color:var(--ec-frm-trmTtbFg);background:var(--ec-frm-trmTtbBg);border:var(--ec-brdWd) solid var(--ec-brdCol);border-bottom:none}.expressive-code .frame.is-terminal .header::before{content:"";position:absolute;pointer-events:none;left:var(--ec-uiPadInl);width:2.1rem;height:0.56rem;line-height:0;background-color:var(--ec-frm-trmTtbDotsFg);opacity:var(--ec-frm-trmTtbDotsOpa);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");mask-repeat:no-repeat}.expressive-code .frame.is-terminal .header::after{content:"";position:absolute;pointer-events:none;inset:0;border-bottom:var(--ec-brdWd) solid var(--ec-frm-trmTtbBrdBtmCol)}.expressive-code .frame pre{background:var(--code-background)}.expressive-code .copy{display:flex;gap:0.25rem;flex-direction:row;position:absolute;inset-block-start:calc(var(--ec-brdWd) + var(--button-spacing));inset-inline-end:calc(var(--ec-brdWd) + var(--ec-uiPadInl) / 2);direction:ltr;unicode-bidi:isolate}.expressive-code .copy button{position:relative;align-self:flex-end;margin:0;padding:0;border:none;border-radius:0.2rem;z-index:1;cursor:pointer;transition-property:opacity, background, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);width:2.5rem;height:2.5rem;background:var(--code-background);opacity:0.75}.expressive-code .copy button div{position:absolute;inset:0;border-radius:inherit;background:var(--ec-frm-inlBtnBg);opacity:var(--ec-frm-inlBtnBgIdleOpa);transition-property:inherit;transition-duration:inherit;transition-timing-function:inherit}.expressive-code .copy button::before{content:"";position:absolute;pointer-events:none;inset:0;border-radius:inherit;border:var(--ec-brdWd) solid var(--ec-frm-inlBtnBrd);opacity:var(--ec-frm-inlBtnBrdOpa)}.expressive-code .copy button::after{content:"";position:absolute;pointer-events:none;inset:0;background-color:var(--ec-frm-inlBtnFg);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");mask-repeat:no-repeat;margin:0.475rem;line-height:0}.expressive-code .copy button:focus::after,.expressive-code .copy button:active::after{display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;margin:0.2375rem}.expressive-code .copy button:hover,.expressive-code .copy button:focus:focus-visible{opacity:1}.expressive-code .copy button:hover div,.expressive-code .copy button:focus:focus-visible div{opacity:var(--ec-frm-inlBtnBgHoverOrFocusOpa)}.expressive-code .copy button:active{opacity:1}.expressive-code .copy button:active div{opacity:var(--ec-frm-inlBtnBgActOpa)}.expressive-code .copy .feedback{--tooltip-arrow-size: 0.35rem;--tooltip-bg: var(--ec-frm-tooltipSuccessBg);color:var(--ec-frm-tooltipSuccessFg);pointer-events:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;position:relative;align-self:center;background-color:var(--tooltip-bg);z-index:99;padding:0.125rem 0.75rem;border-radius:0.2rem;margin-inline-end:var(--tooltip-arrow-size);opacity:0;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:ease-in-out;transform:translate3d(0, 0.25rem, 0)}.expressive-code .copy .feedback::after{content:"";position:absolute;pointer-events:none;top:calc(50% - var(--tooltip-arrow-size));inset-inline-end:calc(-2 * (var(--tooltip-arrow-size) - 0.5px));border:var(--tooltip-arrow-size) solid transparent;border-inline-start-color:var(--tooltip-bg)}.expressive-code .copy .feedback.show{opacity:1;transform:translate3d(0, 0, 0)}@media (hover: hover){.expressive-code .copy button{opacity:0;width:2rem;height:2rem}.expressive-code .frame:hover .copy button:not(:hover),.expressive-code .frame:focus-within :focus-visible~.copy button:not(:hover),.expressive-code .frame .copy .feedback.show~button:not(:hover){opacity:0.75}}:root{--ec-brdRad: 0px;--ec-brdWd: 1px;--ec-brdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-codeFontFml: var(--__sl-font-mono);--ec-codeFontSize: var(--sl-text-code);--ec-codeFontWg: 400;--ec-codeLineHt: var(--sl-line-height);--ec-codePadBlk: 0;--ec-codePadInl: 1rem;--ec-codeBg: #011627;--ec-codeFg: #d6deeb;--ec-codeSelBg: #1d3b53;--ec-uiFontFml: var(--__sl-font);--ec-uiFontSize: 0.9rem;--ec-uiFontWg: 400;--ec-uiLineHt: 1.65;--ec-uiPadBlk: 0.25rem;--ec-uiPadInl: 1rem;--ec-uiSelBg: #234d708c;--ec-uiSelFg: #ffffff;--ec-focusBrd: #122d42;--ec-sbThumbCol: #ffffff17;--ec-sbThumbHoverCol: #ffffff49;--ec-tm-lineMarkerAccentMarg: 0rem;--ec-tm-lineMarkerAccentWd: 0.15rem;--ec-tm-lineDiffIndMargLeft: 0.25rem;--ec-tm-inlMarkerBrdWd: 1.5px;--ec-tm-inlMarkerBrdRad: 0.2rem;--ec-tm-inlMarkerPad: 0.15rem;--ec-tm-insDiffIndContent: "+";--ec-tm-delDiffIndContent: "-";--ec-tm-markBg: #ffffff17;--ec-tm-markBrdCol: #ffffff40;--ec-tm-insBg: #1e571599;--ec-tm-insBrdCol: #487f3bd0;--ec-tm-insDiffIndCol: #79b169d0;--ec-tm-delBg: #862d2799;--ec-tm-delBrdCol: #b4554bd0;--ec-tm-delDiffIndCol: #ed8779d0;--ec-frm-shdCol: #011627;--ec-frm-frameBoxShdCssVal: none;--ec-frm-edActTabBg: var(--sl-color-gray-6);--ec-frm-edActTabFg: var(--sl-color-text);--ec-frm-edActTabBrdCol: transparent;--ec-frm-edActTabIndHt: 1px;--ec-frm-edActTabIndTopCol: var(--sl-color-accent-high);--ec-frm-edActTabIndBtmCol: transparent;--ec-frm-edTabsMargInlStart: 0;--ec-frm-edTabsMargBlkStart: 0;--ec-frm-edTabBrdRad: 0px;--ec-frm-edTabBarBg: var(--sl-color-black);--ec-frm-edTabBarBrdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edTabBarBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edBg: var(--sl-color-gray-6);--ec-frm-trmTtbDotsFg: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmTtbDotsOpa: 0.75;--ec-frm-trmTtbBg: var(--sl-color-black);--ec-frm-trmTtbFg: var(--sl-color-text);--ec-frm-trmTtbBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmBg: var(--sl-color-gray-6);--ec-frm-inlBtnFg: var(--sl-color-text);--ec-frm-inlBtnBg: var(--sl-color-text);--ec-frm-inlBtnBgIdleOpa: 0;--ec-frm-inlBtnBgHoverOrFocusOpa: 0.2;--ec-frm-inlBtnBgActOpa: 0.3;--ec-frm-inlBtnBrd: var(--sl-color-text);--ec-frm-inlBtnBrdOpa: 0.4;--ec-frm-tooltipSuccessBg: #158744;--ec-frm-tooltipSuccessFg: white}.expressive-code .ec-line span[style^="--"]:not([class]){color:var(0, inherit);font-style:var(0fs, inherit);font-weight:var(0fw, inherit);-webkit-text-decoration:var(0td, inherit);text-decoration:var(0td, inherit)}@media (prefers-color-scheme: light){:root:not([data-bs-theme="dark"]){--ec-codeBg: #fbfbfb;--ec-codeFg: #403f53;--ec-codeSelBg: #e0e0e0;--ec-uiSelBg: #d3e8f8;--ec-uiSelFg: #403f53;--ec-focusBrd: #93a1a1;--ec-sbThumbCol: #0000001a;--ec-sbThumbHoverCol: #0000005c;--ec-tm-markBg: #0000001a;--ec-tm-markBrdCol: #00000055;--ec-tm-insBg: #8ec77d99;--ec-tm-insDiffIndCol: #336a28d0;--ec-tm-delBg: #ff9c8e99;--ec-tm-delDiffIndCol: #9d4138d0;--ec-frm-shdCol: #d9d9d9;--ec-frm-edActTabBg: var(--sl-color-gray-7);--ec-frm-edActTabIndTopCol: #5d2f86;--ec-frm-edTabBarBg: var(--sl-color-gray-6);--ec-frm-edBg: var(--sl-color-gray-7);--ec-frm-trmTtbBg: var(--sl-color-gray-6);--ec-frm-trmBg: var(--sl-color-gray-7);--ec-frm-tooltipSuccessBg: #078662}:root:not([data-bs-theme="dark"]) .expressive-code .ec-line span[style^="--"]:not([class]){color:var(1, inherit);font-style:var(1fs, inherit);font-weight:var(1fw, inherit);-webkit-text-decoration:var(1td, inherit);text-decoration:var(1td, inherit)}}:root[data-bs-theme="light"] .expressive-code,.expressive-code[data-bs-theme="light"]{--ec-codeBg: #fbfbfb;--ec-codeFg: #403f53;--ec-codeSelBg: #e0e0e0;--ec-uiSelBg: #d3e8f8;--ec-uiSelFg: #403f53;--ec-focusBrd: #93a1a1;--ec-sbThumbCol: #0000001a;--ec-sbThumbHoverCol: #0000005c;--ec-tm-markBg: #0000001a;--ec-tm-markBrdCol: #00000055;--ec-tm-insBg: #8ec77d99;--ec-tm-insDiffIndCol: #336a28d0;--ec-tm-delBg: #ff9c8e99;--ec-tm-delDiffIndCol: #9d4138d0;--ec-frm-shdCol: #d9d9d9;--ec-frm-edActTabBg: var(--sl-color-gray-7);--ec-frm-edActTabIndTopCol: #5d2f86;--ec-frm-edTabBarBg: var(--sl-color-gray-6);--ec-frm-edBg: var(--sl-color-gray-7);--ec-frm-trmTtbBg: var(--sl-color-gray-6);--ec-frm-trmBg: var(--sl-color-gray-7);--ec-frm-tooltipSuccessBg: #078662}:root[data-bs-theme="light"] .expressive-code .ec-line span[style^="--"]:not([class]),.expressive-code[data-bs-theme="light"] .ec-line span[style^="--"]:not([class]){color:var(1, inherit);font-style:var(1fs, inherit);font-weight:var(1fw, inherit);-webkit-text-decoration:var(1td, inherit);text-decoration:var(1td, inherit)}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.875rem}code:not(:where(.not-content *)){background-color:var(--sl-color-gray-6);margin-block:-0.125rem;padding:0.125rem 0.375rem;color:inherit}[data-bs-theme="dark"] code:not(:where(.not-content *)){background-color:var(--sl-color-gray-5)}.math-block{display:block;margin:2rem 0;overflow-x:auto}.math-inline{display:inline}[data-bs-theme="dark"] .math-inline img,[data-bs-theme="dark"] .math-block img{filter:invert(1)}img.diagram{height:auto;width:100%;margin:1rem 0 2rem}img.diagram-kroki-mermaid{background:#fff}.highlight>pre{padding:0.875rem 1rem}.highlight div{padding:0}.highlight>.chroma{overflow-x:auto;border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}.chroma .ln{padding:0 0.5rem 0 0}.chroma .hl{border-inline-start:0.15rem solid #0005;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}.chroma .hl .ln{margin-left:-0.15rem}.highlight .chroma .lntable .lnt,.highlight .chroma .lntable .hl{display:flex}.chroma .lntd:first-child{padding:0}.chroma .lntd:first-child .lnt{padding-left:1rem}.chroma .lntd:nth-child(2){padding:0}.highlight .chroma .lntable .lntd+.lntd{width:100%}[data-bs-theme="dark"] .chroma .ln{padding:0 0.5em 0 0}.chroma .lntd pre{padding:1rem 0;margin-bottom:0}.highlight>.chroma::-webkit-scrollbar,.highlight>.chroma::-webkit-scrollbar-track{background-color:inherit;border-radius:1px;border-top-left-radius:0;border-top-right-radius:0}.highlight>.chroma::-webkit-scrollbar-thumb{background-color:#dddee0;border:4px solid transparent;background-clip:content-box;border-radius:10px}.highlight>.chroma::-webkit-scrollbar-thumb:hover{background-color:#9d9e9f}[data-bs-theme="dark"] .highlight>.chroma::-webkit-scrollbar-thumb{background-color:#ffffff17}[data-bs-theme="dark"] .highlight>.chroma::-webkit-scrollbar-thumb:hover{background-color:#ffffff49}[data-bs-theme="dark"] .highlight>.chroma{border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}[data-bs-theme="dark"] .chroma .hl{border-inline-start:0.15rem solid #ffffff40;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}[data-bs-theme="dark"] .chroma .hl .ln{margin-left:-0.15rem}details{display:block;position:relative;border:1px solid #e9ecef;border-radius:0.25rem;padding:0.5rem 1rem 0;margin:0.5rem 0}summary{list-style:none;display:inline-block;width:calc(100% + 2rem);margin:-0.5rem -1rem 0;padding:0.5rem 1rem}summary::-webkit-details-marker{display:none}summary:hover{background:#f8f9fa}details summary::after{display:inline-block;content:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");transition:transform 0.35s ease;transform-origin:center center;position:absolute;right:1rem}details[open]>summary::after{transform:rotate(90deg)}details[open]{padding:0.5rem 1rem}details[open]>summary{border-bottom:1px solid #dee2e6;margin-bottom:0.5rem}details h2,details .h2,details h3,details .h3,details h4,details .h4{margin:1rem 0 0.5rem}details p:last-child{margin-bottom:0}details ul,details ol{margin-bottom:0}details pre{margin:0 0 1rem}img{max-width:100%;height:auto}img[data-sizes="auto"]{display:block}img{font-size:0}figcaption{font-size:1rem;margin-top:0.5rem;font-style:italic}.blur-up{filter:blur(5px);transition:filter 400ms}.blur-up.lazyloaded{filter:unset}.section-nav{padding-top:2rem}.section-nav details{border:0;padding:0;margin:0.5rem 0}.section-nav details[open]{padding:0}.section-nav summary{width:100%;padding:0;margin:0;font-weight:700}.section-nav summary:hover{background:none}.section-nav details[open]>summary{border-bottom:0;margin-bottom:0}.section-nav ul.list-nested details{padding-left:1rem;margin-top:0.5rem}.section-nav ul.list-nested li{margin:0}.section-nav a{display:block;margin:0.5rem 0;color:#1d2d35;font-size:1rem;text-decoration:none}.section-nav a:hover,.section-nav a:active{color:#5d2f86}.section-nav li.active a{color:#5d2f86;font-weight:500}.section-nav ul.list-nested li a{padding-left:1rem}.section-nav ul.list-nested{border-left:1px solid #e9ecef}[data-bs-theme="dark"] .section-nav ul.list-nested{border-left:1px solid #23262f}[data-bs-theme="dark"] .section-nav a{color:#c1c3c8}[data-bs-theme="dark"] .section-nav a:hover,[data-bs-theme="dark"] .section-nav a:active{color:var(--sl-color-text-accent)}[data-bs-theme="dark"] .section-nav li.active a{color:var(--sl-color-text-accent);font-weight:500}[data-bs-theme="dark"] .section-nav summary{color:#fff}.footer{border-top:1px solid #e9ecef;padding-top:1.125rem;padding-bottom:1.125rem}.footer ul{margin-bottom:0}.footer li{font-size:.875rem;margin-bottom:0}.footer .list-inline-item:not(:last-child){margin-right:1rem}@media (max-width: 991.98px){.footer .col-lg-8{margin-top:0.25rem;margin-bottom:0.25rem}}@media (min-width: 768px){.footer li{font-size:1rem}}.fixed-bottom-right{position:fixed;right:0;bottom:0;z-index:1000}.navbar-brand{font-weight:700}.navbar-brand svg{margin-right:0.25rem}[data-bs-theme="dark"] .navbar-brand{color:inherit}.navbar{z-index:1000;background-color:rgba(255,255,255,0.95);border-bottom:1px solid #e9ecef}@media (min-width: 992px){.navbar{z-index:1025}}@media (min-width: 768px){.navbar-brand{font-size:1.375rem}}.nav-item{margin-left:0}@media (max-width: 991.98px){.navbar-nav .nav-link{font-weight:400}}@media (min-width: 768px){.nav-item{margin-left:0.5rem}}@media (max-width: 575.98px){.navbar .offcanvas.offcanvas-start,.navbar .offcanvas.offcanvas-end{width:80vw}}.offcanvas-header{border-bottom:1px solid #dee2e6;padding-top:1.0625rem;padding-bottom:0.8125rem}h5.offcanvas-title,.offcanvas-title.h5{margin:0;color:inherit}.offcanvas .nav-link{color:#1d2d35}.offcanvas .nav-link:hover,.offcanvas .nav-link:focus{color:#5d2f86}.offcanvas .nav-link.active{color:#5d2f86}.home .navbar{border-bottom:0}@media (min-width: 992px){.navbar-brand{margin-right:0.75rem !important}}.social-link{padding-right:0.375rem;padding-left:0.375rem}@media (max-width: 991.98px){#buttonColorMode{margin:0.5rem 0}#socialMenu{margin:0.5rem 0 0.5rem -0.25rem}.navbar-nav{margin-top:1rem}.nav-item .nav-link{font-weight:400;font-size:1.125rem}}.modal-backdrop,.offcanvas-backdrop{visibility:hidden;background:rgba(23,24,28,0.5);opacity:0}[data-bs-theme="dark"] .modal-backdrop,[data-bs-theme="dark"] .offcanvas-backdrop{visibility:hidden;background:rgba(23,24,28,0.5);opacity:0}.modal-backdrop.show,.offcanvas-backdrop.show{visibility:visible;opacity:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.showing,.hiding{transition:none;display:none}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg{padding-right:0.75rem}.docs-content>h2[id]::before,.docs-content>[id].h2::before,.docs-content>h3[id]::before,.docs-content>[id].h3::before,.docs-content>h4[id]::before,.docs-content>[id].h4::before{display:block;height:6rem;margin-top:-6rem;content:""}.docs-content ul,.docs-content ol{margin-bottom:1rem}.anchor{visibility:hidden;margin-left:0.375rem}h1:hover a,.h1:hover a,h2:hover a,.h2:hover a,h3:hover a,.h3:hover a,h4:hover a,.h4:hover a{visibility:visible;text-decoration:none}.card-list{margin-top:2.25rem}.page-footer-meta{margin-top:2rem;margin-bottom:2rem}p.meta{margin-top:0.5rem;font-size:1rem}.breadcrumb{margin-top:2.25rem;font-size:1rem}.toc-mobile{margin-top:2rem;margin-bottom:2rem}.page-link:hover{text-decoration:none}ul li{margin:0.25rem 0}.page-nav .card .icon-tabler-arrow-left{margin-right:0.75rem}.page-nav .card .icon-tabler-arrow-right{margin-left:0.75rem}.page-nav .card:hover{border:1px solid #d9d9d9}[data-bs-theme="dark"] .page-nav .card{border:1px solid #353841}[data-bs-theme="dark"] .page-nav .card:hover{border:1px solid #888c96}.home .card,.contributors.list .card,.blog.list .card,.blog.single .card,.categories.list .card,.tags.list .card{margin-top:2rem;margin-bottom:2rem;transition:transform 0.3s}.home .content .card:hover,.contributors.list .content .card:hover,.blog.list .content .card:hover,.blog.single .content .card:hover,.categories.list .content .card:hover,.tags.list .content .card:hover{transform:scale(1.025)}.home .content .card-body,.contributors.list .content .card-body,.blog.list .content .card-body,.blog.single .content .card-body,.categories.list .content .card-body,.tags.list .content .card-body{padding:0 2rem 1rem}.blog-header{text-align:center;margin-bottom:2rem}.page-item:first-child,.page-item:last-child,.page-item.disabled{display:none}.page-item a{margin-left:0.5rem;margin-right:0.5rem;padding-left:0.875rem;padding-right:0.875rem}span.reading-time{margin-left:2rem}span.reading-time svg{margin-right:0.3rem;vertical-align:-0.4rem}.docs-links,.docs-toc{scrollbar-width:thin;scrollbar-color:#fff #fff}.docs-links::-webkit-scrollbar,.docs-toc::-webkit-scrollbar{width:5px}.docs-links::-webkit-scrollbar-track,.docs-toc::-webkit-scrollbar-track{background:#fff}.docs-links::-webkit-scrollbar-thumb,.docs-toc::-webkit-scrollbar-thumb{background:#fff}.docs-links:hover,.docs-toc:hover{scrollbar-width:thin;scrollbar-color:#e9ecef #fff}.docs-links:hover::-webkit-scrollbar-thumb,.docs-toc:hover::-webkit-scrollbar-thumb{background:#e9ecef}.docs-links::-webkit-scrollbar-thumb:hover,.docs-toc::-webkit-scrollbar-thumb:hover{background:#e9ecef}.docs-links h3,.docs-links .h3,.page-links h3,.page-links .h3{font-size:1.125rem;margin:1.25rem 0 0.5rem;padding:1.5rem 0 0}@media (min-width: 992px){.docs-links h3,.docs-links .h3,.page-links h3,.page-links .h3{margin:1.125rem 1.5rem 0.75rem 0;padding:1.375rem 0 0}}.docs-links h3:not(:first-child),.docs-links .h3:not(:first-child){border-top:1px solid #e9ecef}.page-links li{margin-top:0.375rem;padding-top:0.375rem}.page-links li ul li{border-top:none;padding-left:1rem;margin-top:0.125rem;padding-top:0.125rem}.page-links li:not(:first-child){border-top:1px dashed #e9ecef}.page-links a{color:#1d2d35;display:block;padding:0.125rem 0;font-size:.9375rem;text-decoration:none}.page-links a:hover,.page-links a.active{text-decoration:none;color:#5d2f86}.nav-link.active{font-weight:500} diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest index 0b07fa2..5fcdbbe 100644 --- a/public/manifest.webmanifest +++ b/public/manifest.webmanifest @@ -18,5 +18,5 @@ "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone", - "start_url": "/" + "start_url": "/beacon-docs/" } diff --git a/public/privacy/index.html b/public/privacy/index.html index 2bb6fdb..1259af3 100644 --- a/public/privacy/index.html +++ b/public/privacy/index.html @@ -1,214 +1,3 @@ - - - - - - - - - - - - - - - -Privacy Policy | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
-
-
-

Privacy Policy

-

Last updated on September 7, 2023

-
-
- -
-
-
- - -
-
- - - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Privacy Policy | Beacon SDK +
Beacon SDK +Get started

Privacy Policy

Last updated on September 7, 2023

\ No newline at end of file diff --git a/public/robots.txt b/public/robots.txt index 723f408..2019fb3 100644 --- a/public/robots.txt +++ b/public/robots.txt @@ -1,3 +1,3 @@ User-agent: * Disallow: /admin/ -Sitemap: http://localhost:1313/sitemap.xml +Sitemap: https://roll20.github.io/sitemap.xml diff --git a/public/search-index.json b/public/search-index.json index 2d72480..cec0b55 100644 --- a/public/search-index.json +++ b/public/search-index.json @@ -1 +1 @@ -[{"content":"Well-thought-through product announcements will help increase feature awareness and engage users with new functionality. Just like sharing your public roadmap, it\u0026rsquo;s also a great way to let potential customers see that you\u0026rsquo;re constantly improving.\nFurther reading Read How to announce product updates and features ","date":"2023-09-07","id":0,"permalink":"/blog/example-post/","summary":"You can use blog posts for announcing product updates and features.","tags":[],"title":"Example Post"},{"content":"","date":"2023-09-07","id":1,"permalink":"/blog/","summary":"","tags":[],"title":"Blog"},{"content":"","date":"2024-06-07","id":2,"permalink":"/docs/gettingstarted/","summary":"","tags":[],"title":"Getting Started"},{"content":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.\nWhether you\u0026rsquo;re a game master (GM), a developer, or a player, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated VTT experiences.\nWhat is the Beacon SDK? The Beacon SDK (software development kit) is a toolset used to create digital character sheets on Roll20 for Roll20 Tabletop and Roll20 Characters.\nWhether you\u0026rsquo;re an experience developer, or just starting out, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated character sheet experiences.\nThe Beacon SDK also introduces a new way to develop characters sheets for Roll20. Beacon SDK allows you to connect your local development environment to sandboxes in Roll20 Characters and Roll20 Tabletop, giving you real-time updates as you develop.\nKey Features Character Sheets: Design and implement a web app character sheet with dynamic attributes and real-time updates. Local Development: Work where you are most comfortable and get real-time updates in sandboxes in Roll20. Testing Sheets: Release a testing sheet and give others special access to it before you push it live for everyone. Roll Mechanics: Integrate complex roll formulas and display roll results directly within the Roll20 Tabletop and Roll20 Characters. Legacy Support: Convert and integrate legacy macros and roll templates with the new Beacon architecture. Customization: Define custom actions, computed attributes and handle specific roll templates tailored to your game\u0026rsquo;s needs. Components Overview The Beacon SDK is composed of several key components:\nActions: Define and manage custom actions that can be triggered within the VTT. Handlers: Event handlers that process and respond to various VTT events and messages. Computed Attributes: Define dynamically computed attributes based on other attributes. Macro Attributes: Convert and manage legacy macro attributes for compatibility with the Beacon SDK. Rolls: Implement advanced roll mechanics and display results dynamically within the VTT. For a comprehensive overview of these components, view the components section.\nGetting Started To get started with the Beacon SDK, you must initialize the relay, set up your character sheets, and define the necessary actions, handlers, and computed attributes.\nThis documentation provides detailed guides and example sheets to help you through each step of the process.\nBy leveraging the Beacon SDK, you can create rich, interactive, fully integrated VTT experiences that enhance gameplay and streamline game management.\nWhether adapting existing character sheets or building new ones from scratch, the Beacon SDK offers the tools and flexibility to bring your digital character sheet to life.\n","date":"2024-05-07","id":3,"permalink":"/docs/gettingstarted/introduction/","summary":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.","tags":[],"title":"Introduction"},{"content":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.\nTo get started quickly with a boilerplate, you can download and start editing the Quick Start Example Sheet which already has the Beacon SDK installed, along with several recommanded patterns implemented in a Vue.js project.\nPrerequisites Before you can install the Beacon SDK, you\u0026rsquo;ll need to have the following:\nA local web development environment with a code editor. Node.js installed on your machine. If you don\u0026rsquo;t have Node.js installed, use the following steps in the official Node.js documentation. A javascript project, we recommand Vue.js but you can choose whichever you are more comfortable with. These steps use npm but you are free to use any package manager and framework you prefer.\nThe following steps will guide you in installing the Beacon SDK in your application:\nStep 1: Add the package to your project You can find the latest version of the package on the NPM registry.\nIn your project\u0026rsquo;s directory, run the following:\nnpm i @roll20-official/beacon-sdk\rThis will install the Beacon SDK package to your project\u0026rsquo;s package.json file.\nStep 2: Use the Beacon package in your project The Beacon package exports various utilities you can use in your application. The main one that needs to be setup to enable the connection between Beacon SDK and Roll20 is initRelay.\nIdeally you would want to call this when your sheet is initalizing, and it is the function where you will define sheet actions, computed values, and how the sheet will response to or send character data changes. visit the initRelay page for a more detailed breakdown.\nAdd the following to your project:\nimport { initRelay } from \u0026#39;@roll20/beacon-sdk\u0026#39;; const dispatch = initRelay({ handlers: { onInit: ({ character } ) =\u0026gt; { console.log(\u0026#39;sheet character\u0026#39;, character) }, onChange: () =\u0026gt; {}, onSettingsChange: () =\u0026gt; {}, onSharedSettingsChange: () =\u0026gt; {}, onTranslationsRequest: () =\u0026gt; {}, onDragOver: () =\u0026gt; {} }, // Refer to our advanced example sheet on how to setup actions and computed properties. actions: {}, computed: {} })\rinitRelay returns a dispatch function that allows you to call methods or send changes from the sheet to Roll20. Check out the page on dispatch to learn more about the different methods.\nStep 3: Settings up the Roll20 tabletop sandbox On the Roll20 website visit the custom sheet sandbox and create a new sandbox, we\u0026rsquo;ll use this sandbox to develop our sheet but we must set it up to listen to our local project\u0026rsquo;s web server.\nAfter creating a new sandbox, we\u0026rsquo;ll be taken to the sandbox details page, here you will find a collapseable section called Sheet.json Editor, opening this we can add the settings we need to connect to our project:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 // or the port of your webserver }\rAfter adding these changes make sure to click Save Changes at the bottom of the page. After which you can click Launch Game on the page to go into the game and start testing your sheet.\n","date":"2024-04-07","id":4,"permalink":"/docs/gettingstarted/installing-beacon/","summary":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.","tags":[],"title":"Installing Beacon"},{"content":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.\nCharacter sheet: A digital or printed page used to track a character\u0026rsquo;s attributes, abilities, and other relevant information in a role-playing game.\nComputed Property: Properties that have both get and set methods, which can be dynamically calculated.\nConvertLegacyMacroAttributes: A function to handle mapping legacy macro attributes to the new Beacon Sheet format.\nDispatch: A set of functions enabling the sheet to send commands back to the VTT.\nGM (Game Master): The person who runs the game, controls the NPCs \u0026amp; the story, and provides challenges for the players.\nHandler: Methods that act as event handlers to process messages from the host.\nInitRelay: Function to initialize the SDK relay, setting up communication between the host and the character sheet.\nMacro: A script that automates repetitive tasks in the VTT.\nRoll Template: A predefined format for displaying the results of a dice roll.\nToken: A visual representation of a character or object on the virtual tabletop, with various properties like position, size, and attributes.\nVTT (Virtual Tabletop): An online platform that allows players to play tabletop role-playing games over the internet.\nValidationMessage: A message displayed when an input value does not meet specific criteria.\nQuantum Roll: A system that ensures the fairness and authenticity of dice rolls in the VTT by using cryptographic methods.\n","date":"2024-03-07","id":5,"permalink":"/docs/about/glossary/","summary":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.","tags":[],"title":"Glossary"},{"content":"\rQ: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level. There are a number of benefits to the Beacon SDK if you know how to build web applications. If you don\u0026rsquo;t know how to set up your own local environment, than the Beacon SDK might now be the first place you should start. Learn more about sheet development using the custom sheet.\nIf you have the skill to take advantage of the Beacon SDK, there are a number of improvements that will make it much easier to build characters sheets.\nFirst, the Beacon SDK allows you to develop locally and preview your changes automatically in the Roll20 Tabletop and Roll20 Character sandboxes. This means that you don\u0026rsquo;t have to keep uploading your HTML and CSS into the custom sheet to see your changes.\nNext, it allows you to develop your character sheet with all the power of JavaScript frameworks and modern web development libraries. In our example sheets, we use Vue.js, but you are free to use whatever you are most comfortable with. Also, you could use something like Cypress to create automated testing. That\u0026rsquo;s what we use in our Beacon sheets.\nLastly, the Beacon SDK makes it much easier for a web developer who knows JSON and Javascript to access character data and manage attributes on the character. If you\u0026rsquo;re familiar with the custom sheet, you no longer have to deal with sheet workers to get the data you need for a character. Also, the Beacon SDK introduces nested and computed attributes that make complex data models for your character sheet easier to create and maintain.\nQ: I\u0026rsquo;m not really a web developer, should I use Beacon or the custom sheet to make a my own character sheet?\rThat is up to you and your comfort level. If you\u0026rsquo;re looking to learn more about web development, building a character sheet with the Beacon SDK is a great way to level up your skills. What you learn during this process can be taken with you into any other web development project you work on in the future.\nIf setting up your own development environment is too intimidating for you, than it might be easier for you to start with the custom sheet and to go from there.\nQ: I\u0026rsquo;m interested in using Beacon, but I don\u0026rsquo;t know the basics of setting up a local environment. Where can I go to learn more about web development?\rYou can start learning how to build a local development environment by reading or watching the following tutorials. Note: these are not tutorials that we\u0026rsquo;ve produced, but we have found them helpful in getting started with web development.\nhttps://learn.microsoft.com/en-us/windows/dev-environment/javascript/vue-on-wsl https://www.youtube.com/watch?v=WPqXP_kLzpo Q: Now that Roll20 has acquired Demiplane, will you continue to support character sheets built on Beacon?\rThe recent acquisition of Demiplane brings exciting new opportunities for character sheets and compendiums on Roll20. At the same time, we are fully committed to supporting the Beacon SDK and character sheets that are built in our new advanced sheets ecosystem on Roll20. In fact, we believe that the Beacon SDK will be a key component of our future plans for Demiplane integration. In addition, our new D\u0026amp;D 2024 sheet is built on top of the Beacon SDK, and we will continue to utilize it to build first-class experiences on Roll20.\nIn short, you can rest assured that the Beacon SDK is an important tool in our toolbox moving forward.\nQ: What are actions in the context of Beacon?\rActions are methods executed in the chat log of Roll20 Tabletop or Roll20 Characters, often used for rolls triggered from macros or chat buttons. They are defined in the sheet\u0026rsquo;s configuration and can interact with character data. Q: How are computed properties used in Roll20?\rComputed properties are attributes which are accessible by users of your character sheet. They are usable in macros to create custom rolls or common actions for each character. Computed properties can represent derived values or complex calculations based on character data. Q: What is the dispatch function used for?\rThe dispatch function provides methods for sending commands from the character sheet back to Roll20, including updating character data, performing actions, and interacting with the interface. Q: What are roll buttons, and how do they work?\rRoll buttons are HTML elements with specific attributes that execute designated sheet actions when clicked. They can pass arguments to the action method and are commonly used for triggering rolls from the character sheet. Q: How are legacy attributes handled in Beacon?\rBeacon gives you the ability to transition your legacy attributes to new attributes you create in Beacon. This means that when a user updates their sheet to the new Beacon sheet, their legacy attribute can be mapped to Beacon attributes using the convertLegacyMacroAttributes function. Sheet developers can define how to handle legacy attribute values to ensure compatibility with existing macros. Q: What is the purpose of the query function?\rThe query function displays a SweetAlert2 prompt to users and returns the results along with any errors. It is commonly used for interactive prompts or confirmations within the VTT interface. Q: How are tokens managed in the VTT?\rTokens represent characters or objects on Roll20 Tabletop (VTT). Functions like getTokens, updateTokensByCharacter, and addToTracker are used to retrieve token information, update token data, and manage tokens in the turn tracker. Q: What is the role of the convertLegacyMacroAttributesArgs type?\rThe convertLegacyMacroAttributesArgs type defines the arguments used for handling legacy macro attributes. It includes the attribute name, character ID, and character data needed for mapping legacy attributes to the new sheet structure. ","date":"2024-01-07","id":6,"permalink":"/docs/about/faq/","summary":"Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level.","tags":[],"title":"FAQ"},{"content":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games. initRelay is the main method that initializes the Beacon SDK communication channel with the host (Either the Roll20 tabletop or in Roll20 Characters). It should be initialized as soon as the sheet loads, as its onInit handler will be the earliest we can get access to that character\u0026rsquo;s data.\ninitRelay({ handlers: { onInit, onChange, onSettingsChange, onSharedSettingsChange, onTranslationsRequest, onDragOver, onDropOver, }, actions: {}, computed: {}, convertLegacyMacroAttributes, handleLegacyRollTemplates }): Promise\u0026lt;Dispatch\u0026gt;\rThese components are crucial for handling actions, computations, macros, and rolls. This overview provides a high-level summary of each section, helping you understand their roles and how they integrate within the SDK.\nActions\rActions define specific operations that can be performed by characters within the VTT. These operations can range from simple tasks like rolling a dice to more complex interactions such as casting spells or activating abilities.\nHandlers\rHandlers are event listeners that manage communication between the VTT and the character sheet. They respond to various events, such as changes in character attributes or settings, and trigger appropriate actions or updates.\nComputed\rComputed properties are dynamic values derived from other character attributes. They allow for the creation of complex, calculated attributes that automatically update when their dependencies change.\nMacro Attributes\rMacro attributes handle the conversion of legacy macro attributes to the new format used in the Beacon SDK. This ensures compatibility with older character sheets and macros, allowing for a smooth transition to the new system.\nRolls\rThe Rolls component allows for advanced dice-rolling mechanics within the VTT. It supports both simple and complex rolls, providing flexibility in how roll results are displayed and computed.\nDispatch\rThe dispatch object provides methods for sending commands from the character sheet back to the host. Except when specified every method returns a promise.\n","date":"2024-06-07","id":7,"permalink":"/docs/components/initrelay/","summary":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games.","tags":[],"title":"InitRelay"},{"content":"\rinitRelay({ //...other methods actions: {}, }): Promise\u0026lt;Dispatch\u0026gt;\rActions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions.\nactions: { [name: string]: { method: (props: { dispatch: Dispatch, character: Character, messageId?: string, rolls?: RollResults }, ...args: string[]): void | Promise\u0026lt;void\u0026gt; } }\rActions are passed into the initRelay function in an object, where the keys are the unique names of the actions, and the values are objects containing a method property (additional metadata fields may be added to this object in the future).\nThe action\u0026rsquo;s method receives a props object from the host containing the following properties:\ndispatch: A Dispatch object. character: The data of the character performing the action. Currently, the action will not receive the character’s bio or GM notes, regardless of whether the player has access to those fields. messageId (optional): A unique ID for an existing chat message. It\u0026rsquo;s included in actions triggered from chat buttons to provide context for the original roll. rolls (optional): Included when action is triggered from a chat button. Contains the roll results of the original roll. These methods can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these methods can be synchronous or asynchronous and do not return a value.\n","date":"2024-05-07","id":8,"permalink":"/docs/components/actions/","summary":"initRelay({ //...other methods actions: {}, }): Promise\u0026lt;Dispatch\u0026gt;\rActions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters.","tags":[],"title":"Actions"},{"content":"","date":"2024-04-07","id":9,"permalink":"/docs/components/","summary":"","tags":[],"title":"Components"},{"content":"Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.\ninitRelay({ //...other methods computed: { [name: string]: { tokenBarValue?: boolean description?: string get: ( props: { character: Character }, ...args: string[] ) =\u0026gt; string | number | JSONValue set?: ( props: { character: Character dispatch: Dispatch }, ...args: string[] ) =\u0026gt; void | Promise\u0026lt;void\u0026gt; } }, }): Promise\u0026lt;Dispatch\u0026gt;\rComputed properties are passed into the initRelay function in an object where the keys are the names of the properties, and the value should be an object containing the following:\nget (required): It receives character data along with any number of string parameters and should return the computed value. tokenBarValue (optional): A boolean indicating whether this property should be available for use in token bars. description (optional): A text value indicating what this computed summary property represents. set (optional): This method receives character data and a dispatch, along with string arguments. This method does not need to return a value. Setting tokenBarValue to true will make the property available to use as a value for token bars. To work correctly, the get function must not rely on any additional arguments and must return either a simple value (a string or number) or an object: { current: number | string, max: number | string }\rIf the set function is omitted, the value will not be editable from the token itself. If defined, set methods will receive one string argument, which is whatever the user types into the input for modifying the bar. ","date":"2024-04-07","id":10,"permalink":"/docs/components/computed/","summary":"Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.","tags":[],"title":"Computed"},{"content":"Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet. It is the main agrument that must be passed into initRelay or the sheet will never fully load.\ninitRelay({ handlers: { onInit, onChange, onSettingsChange, onSharedSettingsChange, onTranslationsRequest, onDragOver, // optional onDropOver, // optional } //...other methods }): Promise\u0026lt;Dispatch\u0026gt;\ronInit The onInit method receives the initial data from the host.\nThis will be the first time we have access to character data, sheet settings, as well as compendium data if this character is made as a result of a compendium drag and drop on the host.\nonInit(event: { character: Character, // Initial Data of the primary character for this sheet. settings: { // Campaign and character specific settings colorTheme: string, // \u0026#39;dark\u0026#39; or \u0026#39;light\u0026#39; language: string, // two-letter language code, i.e. \u0026#39;en\u0026#39; gm: boolean, // whether or not the current player has gm permissions owned: boolean, // whether or not the current player controls the primary character settingsSheet: boolean, // whether or not this sheet is the settings sheet headless: boolean, // whether or not it should be displayed, set by the host sandbox: boolean, campaignId: number, // The id of the current campaign environment: string, // VTT, CHARACTERS, DISCORD currentUserId: string, // user id of user opening the sheet singleSheet: boolean }, sharedSettings: {}, // Data shared between all characters in this campaign compendiumDropData: { // Populated when the character sheet is created from a compendium entry such as a creature or NPC. pageName: string, categoryName: string, expansion: number, }, }, dispatch: Dispatch): void;\rThis function may be called multiple times during development in the sheet sandbox as part of hot reloads.\nonChange onChange is called whenever a character’s data is changed on the host’s end. The event object contains a partial character with only the character’s ID and the changed data. This could be the character’s bio, GM notes, or attributes (only the changed attributes).\nonChange(e: { character: Partial\u0026lt;Character\u0026gt; }, dispatch: Dispatch): void;\ronSettingsChange onSettingsChange is called when either the host’s color theme is changed, or when the current player’s ownership of the primary character changes.\nonSettingsChange(e: { colorTheme: string, owned: boolean }, dispatch: Dispatch): void;\ronSharedSettingsChange onSharedSettingsChange is called when someone changes a shared setting in the host.\nonSharedSettingsChange({ settings: { [key: string]: any } }): void;\ronTranslationsRequest onTranslationsRequest is called before the relay is fully initialized and returns the translation JSON data corresponding to the two-letter language argument.\nonTranslationsRequest(language: string): { [key: string]: string };\ronDragOver (optional) onDragOver is called when a compendium item from the compendium tab is dragged over the iframe window containing the character sheet.\nCoordinates of the drag are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch. If the item is moved outside of the iframe, dragData and coordinates are null.\nonDragOver(e: { coordinates: { top: number, left: number }, dragData: { pageName: string categoryName: string expansionId: number } | null, }, dispatch: Dispatch) =\u0026gt; void\ronDropOver (optional) onDropOver is called when a compendium item from the compendium tab is dropped over the iframe window containing the character sheet.\nCoordinates of the drop are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch.\nonDropOver(e: { coordinates: { top: number, left: number }, dropData: { pageName: string categoryName: string expansionId: number } }, dispatch: Dispatch) =\u0026gt; void\r","date":"2024-03-07","id":11,"permalink":"/docs/components/handlers/","summary":"Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet.","tags":[],"title":"Handlers"},{"content":"","date":"2024-02-07","id":12,"permalink":"/docs/about/","summary":"","tags":[],"title":"About"},{"content":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.\nThis scenario commonly arises when transitioning from an existing legacy sheet to a Beacon sheet. During such transitions, it\u0026rsquo;s possible that the attributes called from the legacy macro may not align with the structure of attributes in the Beacon Sheet.\nThe convertLegacyMacroAttributes function serves as a pivotal tool, empowering Sheet Developers to determine the mapping strategy for legacy attributes to the new Beacon Sheet.\nconvertLegacyMacroAttributes This function is defined during the initial SDK initialization process and is invoked by the host when it encounters a failure in locating an attribute\u0026rsquo;s value.\nconvertLegacyMacroAttributes: (messages: convertLegacyMacroAttributesArgs) =\u0026gt; {}: any\rAdvanced sheet macros typically first search through the defined computed properties before resorting to the convertLegacyMacroAttributes function.\nThe function\u0026rsquo;s purpose is to return a value that will be substituted in the macro. However, it grants Sheet Developers the autonomy to devise their preferred approach for handling legacy attribute values.\n","date":"2024-02-07","id":13,"permalink":"/docs/components/handling-legacy-macro-attributes/","summary":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.","tags":[],"title":"Handling Legacy Macro Attributes"},{"content":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development. Basic and advanced sheet examples. Improvements Detailed comments added to example files for better understanding. Support for complex roll templates and rich sheet actions. Bug Fixes N/A (initial release). Version 2.0.0 Release Date: 2023-03-17\nNew Features SCSS support for styling. Integration with Roll20 and VTT. Mock Relay for offline development. Improvements TypeScript integration for type checking and improved development experience. Unit testing with Vitest. End-to-End testing with Cypress. Bug Fixes N/A (initial release). ","date":"2024-01-07","id":14,"permalink":"/docs/about/changelog/","summary":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development.","tags":[],"title":"Changelog"},{"content":"The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the host. Vist the Roll20 help center to learn more about Roll20\u0026rsquo;s Dice Rolling system\nThe most command way to trigger a dice roll is through the dispatch object returned from the initRelay, but it could also be called from actions:\ndispatch.roll({ rolls: { [rollName: string]: string } // Ex. {attack: \u0026#39;1d20+4\u0026#39;, damage: `3d6+2`} messageId?: string }): Promise\u0026lt;{messageId: string, results: RollResults }\u0026gt;\rThe roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings.\nmessageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResults. The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.\nThe dispatch roll method and the actions roll section do not post to the chat, instead they will return a promise which will resolve to the roll results and the message id.\nPosting A Roll to the Chat The roll method does not send or post any data to the chat on it\u0026rsquo;s own. We instead have to use dispatch\u0026rsquo;s post method to send our roll results along with any other content to the chat.\ndispatch.post({ characterId: \u0026#39;-O0KZhMTxLkn2HArFj8f\u0026#39;, content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`, })\rAdditional Roll Posting Options data-rollname The data-rollname attribute tells the host that this HTML element is displaying the result of a roll.\n\u0026lt;span data-rollname=\u0026#34;attack\u0026#34;\u0026gt;\u0026lt;/span\u0026gt;\rThe host will both add the Quantum Roll signature element and replace the contents of the element with the result from the roll.\nThis is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the host to display the result.\ndata-computed Tagging an element with both a data-rollname and a data-computed=\u0026quot;true\u0026quot; tells the host that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result.\n\u0026lt;span data-rollname=\u0026#34;complex\u0026#34; data-computed=\u0026#34;true\u0026#34;\u0026gt;25\u0026lt;/span\u0026gt;\rThe host will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic.\nRoll Buttons Roll buttons are interactive elements that trigger sheet actions, such as damage rolls, when clicked. These buttons use the data-sheet-action attribute to specify the action to be executed.\n\u0026lt;button data-sheet-action=\u0026#34;damage\u0026#34; data-args=\u0026#34;arg1:arg2\u0026#34;\u0026gt;Click Me\u0026lt;/button\u0026gt;\rAdditional arguments can be provided using the data-args attribute, and the character, messageId, and original rolls will be included automatically.\nRolls Results Format type RollResults = { [name: string]: { expression: string //The original expression (i.e. 1d20+3d6) rollName: string //The name of the roll results: { //The results of the roll(s) expression: string dice?: number[] // result: number //The final result of the roll rolls?: { //Detailed results of each part of the roll (i.e. 3d6) sides: number //The type of die for this part of the roll (i.e. 6) dice: number //The number of dice (i.e. 3) results: number[] //The result of each die (i.e. [4, 2, 5]) }[] } } }\r","date":"2024-01-07","id":15,"permalink":"/docs/components/rolls/","summary":"The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed.","tags":[],"title":"Rolls"},{"content":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host. Except when specified every method below will return a promise.\nupdate dispatch.update({ options: { overwrite?: boolean } character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rThe update method sends character changes to the host (Roll20 Tabletop or Roll20 Characters) to be persisted. The partial character passed in here must contain the character\u0026rsquo;s id, and can contain any combination of the attributes, bio, and gmNotes properties. When updating a character’s attributes, only include those attributes that have changed.\nupdateCharacter dispatch.updateCharacter({ character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rLike the update method, updateCharacter sends character changes to the host page (Roll20 Tabletop or Roll20 Characters) to be persisted. However, this method takes a full set of character attributes as the character argument, and automatically computes the diff with existing character attributes, so that only changed attributes are sent to the data store.\nroll dispatch.roll({ rolls: { [rollName: string]: string } // Ex. {attack: \u0026#39;1d20+4\u0026#39;, damage: `3d6+2`} messageId?: string }): Promise\u0026lt;{messageId: string, results: RollResults }\u0026gt;\rThe roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings. messageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResult (see Types). The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.\npost dispatch.post({ characterId: string, messageId?: string, content: string, options?: { whisper?: \u0026#39;gm\u0026#39;, secret?: boolean, } }): Promise\u0026lt;string\u0026gt;\rpost posts a message to chat, either creating a new message or overwriting an existing one. It requires a character id and message content, a string containing either plain text or HTML to be posted. The method also accepts an options object. Currently, only whisper and secret are supported, the only valid value for whisper is gm, which will send the message as a whisper to the gm. The secret option is ignored unless whisper is also set, toggling to true will cause the message to not be visible to the controlling player. Like roll, messageId can be provided to update an existing chat message, but if omitted the method will generate a new messageId and post a new chat message. The method returns the messageId.\nquery dispatch.query(options: Swal2Options): { isConfirmed: boolean, isDenied: boolean, isDismissed: boolean, value?: string | number, dismiss?: \u0026#34;cancel\u0026#34; | \u0026#34;backdrop\u0026#34; | \u0026#34;close\u0026#34; | \u0026#34;esc\u0026#34; | \u0026#34;timer\u0026#34;, errors?: string[], }: Promise\u0026lt;{ results: { isConfirmed: boolean isDenied: boolean isDismissed: boolean value: string | number dismiss: string }, errors: [string] }\u0026gt;\rThe query method takes an options object and uses them to display a SweetAlert2 prompt to the user. It returns the results of the query as a SweetAlertResult, along with any errors encountered. The options work exactly as described in the documentation for SweetAlert2, however not all options are allowed. Here is a list of the allowed options:\ntitleText, text, iconColor, input, width, padding, background, position, grow, timer, timerProgressBar, showConfirmButton, showDenyButton, showCancelButton, ariaLabel, confirmButtonText, denyButtonText, cancelButtonText, confirmButtonAriaLabel, confirmButtonColor, cancelButtonAriaLabel, cancelButtonColor, denyButtonAriaLabel, denyButtonColor, reverseButtons, showCloseButton, closeButtonAriaLabel, returnInputValueOnDeny, imageUrl, imageWidth, imageHeight, imageAlt, inputLabel, inputPlaceholder, inputValue, inputOptions, inputPlaceholder, inputAutoTrim, inputAttributes, validationMessage, progressSteps, currentProgressStep, progressStepsDistance.\nPerform dispatch.perform({ characterId: string, action: string, args: string[], }): Promise\u0026lt;void\u0026gt;;\rperform executes the specified action on behalf of the character (designated by the character id), passing in args to the action method. This method can perform actions on behalf of any character, even a character that the sheet does not have data for.\ngetComputed dispatch.getComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rsee setComputed below\nsetComputed dispatch.setComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rgetComputed and setComputed are both nearly identical in how they are called, taking a character id and a property with the name of the computed property you wish to get or set, and an array of string args. Both methods return a promise that resolves with the computed value.\ncompendiumRequest dispatch.compendiumRequest({ query: string }): Promise\u0026lt;{ data: Object errors: Array\u0026lt;Error\u0026gt; extensions: Record\u0026lt;string, any\u0026gt; }\u0026gt;\rcompendiumRequest executes an AJAX request to the compendium service’s graphQL endpoint. It takes in a graphQL query string written according to the Compendium service’s schema. The query string does not need to include the ruleSystem shortName as this is set automatically according to the campaign override or sheet.json value in the Roll20 Tabletop.\ndebouncedCompendiumRequest dispatch.debouncedCompendiumRequest({ query: string }): Promise\u0026lt;{ data: Object }\u0026gt;\rLike compendiumRequest, except that calls to this method are automatically debounced (at 100ms) and grouped together into a single request to the compendium service. Note that this method will only return the requested data, it does not return errors or extensions.\ngetTokens dispatch.getTokens({ characterId: string }): Promise\u0026lt;{ selected: Token[], tokens: Token[] }\u0026gt;: Promise\u0026lt;{ selected: Token[] tokens: Token[] }\u0026gt;\rgetTokens requires a character id string and returns information about tokens on the user’s current page. The return value contains two arrays of tokens. The tokens array contains all tokens on the current page that represent the character whose id was provided to the method. The selected array contains any tokens that are currently selected, regardless of which character they represent. The returned token objects contain all of the token attributes available to the API, you can find documentation here and here.\naddToTracker dispatch.addToTracker({ tokenId?: string, custom?: { name: string img?: string } formula?: string value: string | number }): Promise\u0026lt;void\u0026gt;\raddToTracker adds or updates a single item in the turn tracker. Passing in a tokenId will add the specified token to the tracker, while passing in custom with a name and an optional image url (img) will add a custom item, not connected to any character or token. A round calculation string can be added via the optional formula parameter. value is the initiative number for the item.\naddActionsToHost dispatch.addActionsToHost({ sheetAction?: { characterId: string action: string args?: string[] } action?: string locations?: [\u0026#39;macroBar\u0026#39;] | [\u0026#39;tokenActionBar\u0026#39;] | [\u0026#39;macroBar\u0026#39;, \u0026#39;tokenActionBar\u0026#39;] actionId?: string name: string requestId?: string }): void\raddActionsToHost adds a specific action(macro) to an area of the Roll20 Tabletop UI; either the macrobar or the token action bar. Either sheetAction or action can be passed in but not both at the same time. The sheetAction arg should be passed in when an the action is to designated to a character. While the action arg should be passed in when the action is more generic.\ngetActions dispatch.getActions({ args: { characterId?: string } }): Promise\u0026lt;{ actions?: {} | { [id: string]: ActionFromHost } }\u0026gt;\rgetActions gets a specific character’s actions(macro).\nsetContainerSize dispatch.setContainerSize({ args: { width?: number height?: number } }): Promise\u0026lt;void\u0026gt;\rsetContainerSize updates the size of the container which holds the sheet shared settings. Returns a promise that can be awaited. This can be used in conjunction with something like the ResizeSensor event listener from npm: css-element-queries to automatically resize the container on the host.\nupdateTokensByCharacter dispatch.updateTokensByCharacter({ args: { characterId: string token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByCharacter updates a particular character’s default token as well as all existing tokens representing that character. Returns a promise that can be awaited.\nupdateTokensByIds dispatch.updateTokensByIds({ args: { tokenIds: array of ids as strings token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByIds updates a single or several tokens. Returns a promise that can be awaited.\nautoLinkText dispatch.autoLinkText({ args: { text: string } }): Promise\u0026lt;string\u0026gt;\rautoLinkText goes through the text to find handout names between square brackets and converts them into links with the handoutID. For example in a game with a handout named Dragon, passing in the text string of this is a [Dragon] to autoLinkText returns something similar to this is a \u0026lt;a href=\u0026quot;https://journal.roll20.net/8je02j0kd02k\u0026quot;\u0026gt;Dragon\u0026lt;/a\u0026gt;.\nopenDialogFromLink dispatch.openDialogFromLink({ args: { urlString: string } }): void\ropenDialogFromLink opens the supplied urlString through the Roll20 Tabletop.\nIf the url is for a handout, it will open the corresponding handout in the campaign. This will also check if the user opening the link has access to the handout. If the url is for a compendium, it will open a pop up to the compendium page, it will also check to ensure the user has access to view the page. If the url is for an external page, a confirmation pop up will display to warn the user that the link is for an external site and open a new tab in their main window if confirmed. ","date":"2023-09-07","id":16,"permalink":"/docs/components/dispatch/","summary":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host.","tags":[],"title":"Dispatch"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet\nUse the following steps to get started:\nInstall the Beacon SDK: Run the following command. npm i @roll20-official/beacon-sdk\rInstall dependencies: Install the dependencies for the project. npm install\rStart the Vite server: After installing the project\u0026rsquo;s dependencies, you\u0026rsquo;ll need to start the Vite server. There are two ways to do this: a. Offline Development: This method will run the Vite server with the default port and environment set to development.\nnpm run dev\rOnce this code executes successfully, you can access the Vite server at http://localhost:5173.\nThis method is useful when you do not have access to the Roll20 website or would like to work on parts of your project that do not depend on a connection to the VTT or Roll20 Characters, such as working on styling, mocking up the environment, building Vue components, testing functionality, etc.\nIn development mode, you cannot save or access existing character data or use the Beacon SDK functions that depend on VTT or Roll20 Characters functionality, such as dice rolling and token manipulation.\nb. Sandbox Development: This method will run the Vite server with the port set to 7620 and the environment set to staging mode.\nnpm run sandbox\rThis command will build the SCSS files and then run the Vite server. This will set the server up for connecting to a VTT custom sheet sandbox as well as through the sandbox in Roll20 Characters.\nTo test your changes in the VTT custom sheet sandbox, you will need to add the following to the sheet.json editor in the game settings:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 }\rUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\r","date":"2024-04-07","id":17,"permalink":"/docs/gettingstarted/quick-start-sheet-template/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet","tags":[],"title":"Quick Start Sheet Template"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet\nThis sheet uses the same steps listed in the . Immediately after implementing those three steps, you\u0026rsquo;ll add the following step:\nRun a CI check: This will run several checks to ensure your code is as optimal as possible, including formatting, linting, type checking, unit tests, and end-to-end tests. npm run ci-check\rYou can think of this command as a sanity check you can leverage when pushing a big release for your sheet!\nUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\rFor type checking with TypeScript, use the following command: npm run type-check\rFor running unit tests with Vitest, use the following command: npm run test:unit\rTo open up and develop local end-to-end tests with Cypress, use the following command: npm run test:e2e:open:local\rFor running local end-to-end tests with Cypress, use the following command: npm run test:e2e:local\rTo run CDN-hosted end-to-end tests with Cypress, use the following command: npm run test:e2e\r","date":"2024-03-07","id":18,"permalink":"/docs/gettingstarted/example-patterns-sheet/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet","tags":[],"title":"Example Patterns Sheet"},{"content":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:\nHow to Contribute Reporting Bugs If you find a bug, please report it by opening an issue in the GitHub repository. Provide as much detail as possible to help us understand and reproduce the issue.\nSuggesting Features We welcome suggestions for new features. Please open an issue in the GitHub repository with a detailed description of the feature you would like to see and why you think it would be useful.\nCode Contributions Fork the Repository: Create a personal fork of the project on GitHub.\nClone the Fork: Clone your fork to your local machine.\ngit clone Create a Branch: Create a new branch for your work.\ngit checkout -b feature-or-bugfix-description\rMake Changes: Make your changes to the codebase. Follow the existing code style and conventions.\nRun Tests: Ensure that all tests pass before submitting your changes.\nnpm run ci-check\rCommit Changes: Commit your changes with a descriptive commit message.\ngit commit -m \u0026#34;Description of your changes\u0026#34;\rPush Changes: Push your changes to your fork.\ngit push origin feature-or-bugfix-description\rCreate a Pull Request: Open a pull request from your fork to the main repository. Provide a detailed description of your changes and why they should be merged.\nRunning Tests Unit Tests: Run unit tests with Vitest.\nnpm run test:unit\rEnd-to-End Tests: Run End-to-End tests with Cypress.\nnpm run test:e2e\rCode Style Follow the existing code style and conventions.\nUse ESLint for linting.\nnpm run lint\rFormat code with Prettier.\nnpm run format\rCommunication GitHub Issues: Use GitHub issues for bug reports, feature requests, and questions. Pull Requests: Use GitHub pull requests to submit your code contributions. Thank you for contributing to the Beacon SDK project!\n","date":"2024-02-07","id":19,"permalink":"/docs/about/how-to-contribute/","summary":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:","tags":[],"title":"How to Contribute"},{"content":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform. This sheet includes all the necessary code, assets, and metadata packaged together to be easily shared, tested, and eventually deployed on Roll20.\nWhen you\u0026rsquo;re ready to test and share a sheet on Roll20, you\u0026rsquo;d want to do it in such a way that others who might need it won\u0026rsquo;t have to set it up with a local dev environment.\nThat\u0026rsquo;s what the steps below help you achieve. In this guide, you can make your sheet available in the Roll20 Tabletop and Characters.\nSteps to Release a Test Sheet The following steps will aid you while releasing your sheet:\nCreate a Build Command:\nYou must have a build command that will produce the minified production-ready code. You can find an example in our Quickstart Package JSON. The build command must be able to create these exact files:\nsheet.js sheet.css host.css (optional) Add a local folder that contains fonts and images used in the sheet (optional). Add a sheet.json file:\nAdd a sheet.json file to your sheet folder to ensure the metadata for your sheet is up-to-date. For this, you can also find an example in our Quickstart Package JSON.\nCreate a Pull Request in the Community Sheet Repo:\nIn the Community Sheet Repo, create a pull request that must include the submission checklist from our previous process.\nSubmission Checklist When submitting a new or updated sheet to Roll20, it\u0026rsquo;s essential to follow the guidelines to ensure a smooth review and approval process.\nBelow is a checklist to help you prepare your submission.\nRequired The following are the required submission checklist items:\nThe pull request title clearly contains the name of the sheet I am editing. The pull request title clearly states the type of change I am submitting (New Sheet/New Feature/Bugfix/etc.). The pull request makes changes to files in only one sub-folder. The pull request does not contain changes to any JSON files in the translations folder (translation.json is permitted). New Sheet Details You must include the following information in your sheet:\nThe name of this game is: \u0026lt; THE AETHYRBLOOD CHRONICLES \u0026gt;. The publisher of this game is: \u0026lt; HAPHAZARD PROJECTS \u0026gt; The name of this game system/family is: \u0026lt; DPS System ('dice pool scales') \u0026gt; You must also check out the following:\nI have followed the Character Sheets Standards when building this sheet. I have authorization from the game\u0026rsquo;s publisher to make this an official sheet on Roll20 with their name attached. This game is not traditionally published, but a copy of the game rules can be purchased/downloaded/found at The Aethyrblood Chronicles Core Rule Book In the pull request comments, make sure to list the email addresses of the Roll20 users you\u0026rsquo;d like to have access to the sheet.\nWe can always grant more people access to the sheet after it is released. However, you can inform us in our Official Community Sheet Development Channels on Discord.\nApproval and Access:\nAfter you create a pull request, our team will approve it and add your sheet to the sheet selection in Roll20 Tabletop and Characters. We will then give only your Roll20 user and any others you\u0026rsquo;ve listed in the pull request comments access to the sheet in Roll20. This sheet will then be available for you and others with access to test it.\nReleasing a Final Version After you have released a test version of your sheet, you can follow the same steps as releasing a test version to make your sheet available to everyone. This time, the pull request comments state that it is a final release version.\nOnce you have created the pull request, our team will review the sheet functionality, code, and metadata for consistency, best practices, and overall system security. We reserve the right to reject any sheet that does not meet our terms of use or conflicts with our partnerships.\n","date":"2024-02-07","id":20,"permalink":"/docs/gettingstarted/releasing-a-sheet/","summary":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform.","tags":[],"title":"Releasing a Sheet"},{"content":"Link to valuable, relevant resources.\n","date":"2024-02-27","id":21,"permalink":"/docs/resources/","summary":"Link to valuable, relevant resources.","tags":[],"title":"Resources"},{"content":"","date":"2023-09-07","id":22,"permalink":"/docs/","summary":"","tags":[],"title":"Docs"},{"content":"","date":"2023-09-07","id":23,"permalink":"/privacy/","summary":"","tags":[],"title":"Privacy Policy"},{"content":"","date":"2023-09-07","id":24,"permalink":"/","summary":"","tags":[],"title":"Welcome to Beacon SDK"},{"content":"","date":"0001-01-01","id":25,"permalink":"/categories/","summary":"","tags":[],"title":"Categories"},{"content":"","date":"0001-01-01","id":26,"permalink":"/contributors/","summary":"","tags":[],"title":"Contributors"},{"content":"","date":"0001-01-01","id":27,"permalink":"/tags/","summary":"","tags":[],"title":"Tags"}] \ No newline at end of file +[{"content":"Well-thought-through product announcements will help increase feature awareness and engage users with new functionality. Just like sharing your public roadmap, it\u0026rsquo;s also a great way to let potential customers see that you\u0026rsquo;re constantly improving.\nFurther reading Read How to announce product updates and features ","date":"2023-09-07","id":0,"permalink":"/beacon-docs/blog/example-post/","summary":"You can use blog posts for announcing product updates and features.","tags":[],"title":"Example Post"},{"content":"","date":"2023-09-07","id":1,"permalink":"/beacon-docs/blog/","summary":"","tags":[],"title":"Blog"},{"content":"","date":"2024-06-07","id":2,"permalink":"/beacon-docs/docs/gettingstarted/","summary":"","tags":[],"title":"Getting Started"},{"content":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.\nWhether you\u0026rsquo;re a game master (GM), a developer, or a player, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated VTT experiences.\nWhat is the Beacon SDK? The Beacon SDK (software development kit) is a toolset used to create digital character sheets on Roll20 for Roll20 Tabletop and Roll20 Characters.\nWhether you\u0026rsquo;re an experience developer, or just starting out, the Beacon SDK provides a framework to create dynamic, responsive, and fully integrated character sheet experiences.\nThe Beacon SDK also introduces a new way to develop characters sheets for Roll20. Beacon SDK allows you to connect your local development environment to sandboxes in Roll20 Characters and Roll20 Tabletop, giving you real-time updates as you develop.\nKey Features Character Sheets: Design and implement a web app character sheet with dynamic attributes and real-time updates. Local Development: Work where you are most comfortable and get real-time updates in sandboxes in Roll20. Testing Sheets: Release a testing sheet and give others special access to it before you push it live for everyone. Roll Mechanics: Integrate complex roll formulas and display roll results directly within the Roll20 Tabletop and Roll20 Characters. Legacy Support: Convert and integrate legacy macros and roll templates with the new Beacon architecture. Customization: Define custom actions, computed attributes and handle specific roll templates tailored to your game\u0026rsquo;s needs. Components Overview The Beacon SDK is composed of several key components:\nActions: Define and manage custom actions that can be triggered within the VTT. Handlers: Event handlers that process and respond to various VTT events and messages. Computed Attributes: Define dynamically computed attributes based on other attributes. Macro Attributes: Convert and manage legacy macro attributes for compatibility with the Beacon SDK. Rolls: Implement advanced roll mechanics and display results dynamically within the VTT. For a comprehensive overview of these components, view the components section.\nGetting Started To get started with the Beacon SDK, you must initialize the relay, set up your character sheets, and define the necessary actions, handlers, and computed attributes.\nThis documentation provides detailed guides and example sheets to help you through each step of the process.\nBy leveraging the Beacon SDK, you can create rich, interactive, fully integrated VTT experiences that enhance gameplay and streamline game management.\nWhether adapting existing character sheets or building new ones from scratch, the Beacon SDK offers the tools and flexibility to bring your digital character sheet to life.\n","date":"2024-05-07","id":3,"permalink":"/beacon-docs/docs/gettingstarted/introduction/","summary":"The Beacon SDK is a toolset designed to enhance and streamline the development of virtual tabletop (VTT) character sheets and other interactive elements.","tags":[],"title":"Introduction"},{"content":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.\nTo get started quickly with a boilerplate, you can download and start editing the Quick Start Example Sheet which already has the Beacon SDK installed, along with several recommanded patterns implemented in a Vue.js project.\nPrerequisites Before you can install the Beacon SDK, you\u0026rsquo;ll need to have the following:\nA local web development environment with a code editor. Node.js installed on your machine. If you don\u0026rsquo;t have Node.js installed, use the following steps in the official Node.js documentation. A javascript project, we recommand Vue.js but you can choose whichever you are more comfortable with. These steps use npm but you are free to use any package manager and framework you prefer.\nThe following steps will guide you in installing the Beacon SDK in your application:\nStep 1: Add the package to your project You can find the latest version of the package on the NPM registry.\nIn your project\u0026rsquo;s directory, run the following:\nnpm i @roll20-official/beacon-sdk\rThis will install the Beacon SDK package to your project\u0026rsquo;s package.json file.\nStep 2: Use the Beacon package in your project The Beacon package exports various utilities you can use in your application. The main one that needs to be setup to enable the connection between Beacon SDK and Roll20 is initRelay.\nIdeally you would want to call this when your sheet is initalizing, and it is the function where you will define sheet actions, computed values, and how the sheet will response to or send character data changes. visit the initRelay page for a more detailed breakdown.\nAdd the following to your project:\nimport { initRelay } from \u0026#39;@roll20/beacon-sdk\u0026#39;; const dispatch = initRelay({ handlers: { onInit: ({ character } ) =\u0026gt; { console.log(\u0026#39;sheet character\u0026#39;, character) }, onChange: () =\u0026gt; {}, onSettingsChange: () =\u0026gt; {}, onSharedSettingsChange: () =\u0026gt; {}, onTranslationsRequest: () =\u0026gt; {}, onDragOver: () =\u0026gt; {} }, // Refer to our advanced example sheet on how to setup actions and computed properties. actions: {}, computed: {} })\rinitRelay returns a dispatch function that allows you to call methods or send changes from the sheet to Roll20. Check out the page on dispatch to learn more about the different methods.\nStep 3: Settings up the Roll20 tabletop sandbox On the Roll20 website visit the custom sheet sandbox and create a new sandbox, we\u0026rsquo;ll use this sandbox to develop our sheet but we must set it up to listen to our local project\u0026rsquo;s web server.\nAfter creating a new sandbox, we\u0026rsquo;ll be taken to the sandbox details page, here you will find a collapseable section called Sheet.json Editor, opening this we can add the settings we need to connect to our project:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 // or the port of your webserver }\rAfter adding these changes make sure to click Save Changes at the bottom of the page. After which you can click Launch Game on the page to go into the game and start testing your sheet.\n","date":"2024-04-07","id":4,"permalink":"/beacon-docs/docs/gettingstarted/installing-beacon/","summary":"This installation guide is designed for sheet developers with experience in web development, that want to start creating a character sheet from scratch or already have an existing project they wish to add Beacon to.","tags":[],"title":"Installing Beacon"},{"content":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.\nCharacter sheet: A digital or printed page used to track a character\u0026rsquo;s attributes, abilities, and other relevant information in a role-playing game.\nComputed Property: Properties that have both get and set methods, which can be dynamically calculated.\nConvertLegacyMacroAttributes: A function to handle mapping legacy macro attributes to the new Beacon Sheet format.\nDispatch: A set of functions enabling the sheet to send commands back to the VTT.\nGM (Game Master): The person who runs the game, controls the NPCs \u0026amp; the story, and provides challenges for the players.\nHandler: Methods that act as event handlers to process messages from the host.\nInitRelay: Function to initialize the SDK relay, setting up communication between the host and the character sheet.\nMacro: A script that automates repetitive tasks in the VTT.\nRoll Template: A predefined format for displaying the results of a dice roll.\nToken: A visual representation of a character or object on the virtual tabletop, with various properties like position, size, and attributes.\nVTT (Virtual Tabletop): An online platform that allows players to play tabletop role-playing games over the internet.\nValidationMessage: A message displayed when an input value does not meet specific criteria.\nQuantum Roll: A system that ensures the fairness and authenticity of dice rolls in the VTT by using cryptographic methods.\n","date":"2024-03-07","id":5,"permalink":"/beacon-docs/docs/about/glossary/","summary":"Background: The background color of the alert box.\nCharacter: An entity in the game with attributes, bio, GM notes, and a token representation.","tags":[],"title":"Glossary"},{"content":"\rQ: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level. There are a number of benefits to the Beacon SDK if you know how to build web applications. If you don\u0026rsquo;t know how to set up your own local environment, than the Beacon SDK might now be the first place you should start. Learn more about sheet development using the custom sheet.\nIf you have the skill to take advantage of the Beacon SDK, there are a number of improvements that will make it much easier to build characters sheets.\nFirst, the Beacon SDK allows you to develop locally and preview your changes automatically in the Roll20 Tabletop and Roll20 Character sandboxes. This means that you don\u0026rsquo;t have to keep uploading your HTML and CSS into the custom sheet to see your changes.\nNext, it allows you to develop your character sheet with all the power of JavaScript frameworks and modern web development libraries. In our example sheets, we use Vue.js, but you are free to use whatever you are most comfortable with. Also, you could use something like Cypress to create automated testing. That\u0026rsquo;s what we use in our Beacon sheets.\nLastly, the Beacon SDK makes it much easier for a web developer who knows JSON and Javascript to access character data and manage attributes on the character. If you\u0026rsquo;re familiar with the custom sheet, you no longer have to deal with sheet workers to get the data you need for a character. Also, the Beacon SDK introduces nested and computed attributes that make complex data models for your character sheet easier to create and maintain.\nQ: I\u0026rsquo;m not really a web developer, should I use Beacon or the custom sheet to make a my own character sheet?\rThat is up to you and your comfort level. If you\u0026rsquo;re looking to learn more about web development, building a character sheet with the Beacon SDK is a great way to level up your skills. What you learn during this process can be taken with you into any other web development project you work on in the future.\nIf setting up your own development environment is too intimidating for you, than it might be easier for you to start with the custom sheet and to go from there.\nQ: I\u0026rsquo;m interested in using Beacon, but I don\u0026rsquo;t know the basics of setting up a local environment. Where can I go to learn more about web development?\rYou can start learning how to build a local development environment by reading or watching the following tutorials. Note: these are not tutorials that we\u0026rsquo;ve produced, but we have found them helpful in getting started with web development.\nhttps://learn.microsoft.com/en-us/windows/dev-environment/javascript/vue-on-wsl https://www.youtube.com/watch?v=WPqXP_kLzpo Q: Now that Roll20 has acquired Demiplane, will you continue to support character sheets built on Beacon?\rThe recent acquisition of Demiplane brings exciting new opportunities for character sheets and compendiums on Roll20. At the same time, we are fully committed to supporting the Beacon SDK and character sheets that are built in our new advanced sheets ecosystem on Roll20. In fact, we believe that the Beacon SDK will be a key component of our future plans for Demiplane integration. In addition, our new D\u0026amp;D 2024 sheet is built on top of the Beacon SDK, and we will continue to utilize it to build first-class experiences on Roll20.\nIn short, you can rest assured that the Beacon SDK is an important tool in our toolbox moving forward.\nQ: What are actions in the context of Beacon?\rActions are methods executed in the chat log of Roll20 Tabletop or Roll20 Characters, often used for rolls triggered from macros or chat buttons. They are defined in the sheet\u0026rsquo;s configuration and can interact with character data. Q: How are computed properties used in Roll20?\rComputed properties are attributes which are accessible by users of your character sheet. They are usable in macros to create custom rolls or common actions for each character. Computed properties can represent derived values or complex calculations based on character data. Q: What is the dispatch function used for?\rThe dispatch function provides methods for sending commands from the character sheet back to Roll20, including updating character data, performing actions, and interacting with the interface. Q: What are roll buttons, and how do they work?\rRoll buttons are HTML elements with specific attributes that execute designated sheet actions when clicked. They can pass arguments to the action method and are commonly used for triggering rolls from the character sheet. Q: How are legacy attributes handled in Beacon?\rBeacon gives you the ability to transition your legacy attributes to new attributes you create in Beacon. This means that when a user updates their sheet to the new Beacon sheet, their legacy attribute can be mapped to Beacon attributes using the convertLegacyMacroAttributes function. Sheet developers can define how to handle legacy attribute values to ensure compatibility with existing macros. Q: What is the purpose of the query function?\rThe query function displays a SweetAlert2 prompt to users and returns the results along with any errors. It is commonly used for interactive prompts or confirmations within the VTT interface. Q: How are tokens managed in the VTT?\rTokens represent characters or objects on Roll20 Tabletop (VTT). Functions like getTokens, updateTokensByCharacter, and addToTracker are used to retrieve token information, update token data, and manage tokens in the turn tracker. Q: What is the role of the convertLegacyMacroAttributesArgs type?\rThe convertLegacyMacroAttributesArgs type defines the arguments used for handling legacy macro attributes. It includes the attribute name, character ID, and character data needed for mapping legacy attributes to the new sheet structure. ","date":"2024-01-07","id":6,"permalink":"/beacon-docs/docs/about/faq/","summary":"Q: How is Beacon better than the old way of building sheets (known as Custom Sheets)?\rIt depends on your web development skill level.","tags":[],"title":"FAQ"},{"content":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games. initRelay is the main method that initializes the Beacon SDK communication channel with the host (Either the Roll20 tabletop or in Roll20 Characters). It should be initialized as soon as the sheet loads, as its onInit handler will be the earliest we can get access to that character\u0026rsquo;s data.\ninitRelay({ handlers: { onInit, onChange, onSettingsChange, onSharedSettingsChange, onTranslationsRequest, onDragOver, onDropOver, }, actions: {}, computed: {}, convertLegacyMacroAttributes, handleLegacyRollTemplates }): Promise\u0026lt;Dispatch\u0026gt;\rThese components are crucial for handling actions, computations, macros, and rolls. This overview provides a high-level summary of each section, helping you understand their roles and how they integrate within the SDK.\nActions\rActions define specific operations that can be performed by characters within the VTT. These operations can range from simple tasks like rolling a dice to more complex interactions such as casting spells or activating abilities.\nHandlers\rHandlers are event listeners that manage communication between the VTT and the character sheet. They respond to various events, such as changes in character attributes or settings, and trigger appropriate actions or updates.\nComputed\rComputed properties are dynamic values derived from other character attributes. They allow for the creation of complex, calculated attributes that automatically update when their dependencies change.\nMacro Attributes\rMacro attributes handle the conversion of legacy macro attributes to the new format used in the Beacon SDK. This ensures compatibility with older character sheets and macros, allowing for a smooth transition to the new system.\nRolls\rThe Rolls component allows for advanced dice-rolling mechanics within the VTT. It supports both simple and complex rolls, providing flexibility in how roll results are displayed and computed.\nDispatch\rThe dispatch object provides methods for sending commands from the character sheet back to the host. Except when specified every method returns a promise.\n","date":"2024-06-07","id":7,"permalink":"/beacon-docs/docs/components/initrelay/","summary":"The Beacon SDK is composed of various methods and components that allow developers to create dynamic and interactive character sheets for virtual tabletop (VTT) games.","tags":[],"title":"InitRelay"},{"content":"\rinitRelay({ //...other methods actions: {}, }): Promise\u0026lt;Dispatch\u0026gt;\rActions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters. These actions are used for any rolls that may need to be triggered outside of the sheet itself, such as from a macro or a chat button. Generally, most or all of a sheet’s rolls should be defined as actions.\nactions: { [name: string]: { method: (props: { dispatch: Dispatch, character: Character, messageId?: string, rolls?: RollResults }, ...args: string[]): void | Promise\u0026lt;void\u0026gt; } }\rActions are passed into the initRelay function in an object, where the keys are the unique names of the actions, and the values are objects containing a method property (additional metadata fields may be added to this object in the future).\nThe action\u0026rsquo;s method receives a props object from the host containing the following properties:\ndispatch: A Dispatch object. character: The data of the character performing the action. Currently, the action will not receive the character’s bio or GM notes, regardless of whether the player has access to those fields. messageId (optional): A unique ID for an existing chat message. It\u0026rsquo;s included in actions triggered from chat buttons to provide context for the original roll. rolls (optional): Included when action is triggered from a chat button. Contains the roll results of the original roll. These methods can also receive an unlimited number of additional arguments. This is because these actions can be triggered by plain text via a macro. However, all additional arguments must be strings. Additionally, these methods can be synchronous or asynchronous and do not return a value.\n","date":"2024-05-07","id":8,"permalink":"/beacon-docs/docs/components/actions/","summary":"initRelay({ //...other methods actions: {}, }): Promise\u0026lt;Dispatch\u0026gt;\rActions are a collection of methods that can be executed from the Roll20 Tabletop or Roll20 Characters.","tags":[],"title":"Actions"},{"content":"","date":"2024-04-07","id":9,"permalink":"/beacon-docs/docs/components/","summary":"","tags":[],"title":"Components"},{"content":"Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.\ninitRelay({ //...other methods computed: { [name: string]: { tokenBarValue?: boolean description?: string get: ( props: { character: Character }, ...args: string[] ) =\u0026gt; string | number | JSONValue set?: ( props: { character: Character dispatch: Dispatch }, ...args: string[] ) =\u0026gt; void | Promise\u0026lt;void\u0026gt; } }, }): Promise\u0026lt;Dispatch\u0026gt;\rComputed properties are passed into the initRelay function in an object where the keys are the names of the properties, and the value should be an object containing the following:\nget (required): It receives character data along with any number of string parameters and should return the computed value. tokenBarValue (optional): A boolean indicating whether this property should be available for use in token bars. description (optional): A text value indicating what this computed summary property represents. set (optional): This method receives character data and a dispatch, along with string arguments. This method does not need to return a value. Setting tokenBarValue to true will make the property available to use as a value for token bars. To work correctly, the get function must not rely on any additional arguments and must return either a simple value (a string or number) or an object: { current: number | string, max: number | string }\rIf the set function is omitted, the value will not be editable from the token itself. If defined, set methods will receive one string argument, which is whatever the user types into the input for modifying the bar. ","date":"2024-04-07","id":10,"permalink":"/beacon-docs/docs/components/computed/","summary":"Sheet authors define computed properties that are accessed by the Roll20 Tabletop or Roll20 Characters. These computed properties can be used as attributes in macros and are available to assign as values to token bars - if the tokenBarValue property is set to true.","tags":[],"title":"Computed"},{"content":"Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet. It is the main agrument that must be passed into initRelay or the sheet will never fully load.\ninitRelay({ handlers: { onInit, onChange, onSettingsChange, onSharedSettingsChange, onTranslationsRequest, onDragOver, // optional onDropOver, // optional } //...other methods }): Promise\u0026lt;Dispatch\u0026gt;\ronInit The onInit method receives the initial data from the host.\nThis will be the first time we have access to character data, sheet settings, as well as compendium data if this character is made as a result of a compendium drag and drop on the host.\nonInit(event: { character: Character, // Initial Data of the primary character for this sheet. settings: { // Campaign and character specific settings colorTheme: string, // \u0026#39;dark\u0026#39; or \u0026#39;light\u0026#39; language: string, // two-letter language code, i.e. \u0026#39;en\u0026#39; gm: boolean, // whether or not the current player has gm permissions owned: boolean, // whether or not the current player controls the primary character settingsSheet: boolean, // whether or not this sheet is the settings sheet headless: boolean, // whether or not it should be displayed, set by the host sandbox: boolean, campaignId: number, // The id of the current campaign environment: string, // VTT, CHARACTERS, DISCORD currentUserId: string, // user id of user opening the sheet singleSheet: boolean }, sharedSettings: {}, // Data shared between all characters in this campaign compendiumDropData: { // Populated when the character sheet is created from a compendium entry such as a creature or NPC. pageName: string, categoryName: string, expansion: number, }, }, dispatch: Dispatch): void;\rThis function may be called multiple times during development in the sheet sandbox as part of hot reloads.\nonChange onChange is called whenever a character’s data is changed on the host’s end. The event object contains a partial character with only the character’s ID and the changed data. This could be the character’s bio, GM notes, or attributes (only the changed attributes).\nonChange(e: { character: Partial\u0026lt;Character\u0026gt; }, dispatch: Dispatch): void;\ronSettingsChange onSettingsChange is called when either the host’s color theme is changed, or when the current player’s ownership of the primary character changes.\nonSettingsChange(e: { colorTheme: string, owned: boolean }, dispatch: Dispatch): void;\ronSharedSettingsChange onSharedSettingsChange is called when someone changes a shared setting in the host.\nonSharedSettingsChange({ settings: { [key: string]: any } }): void;\ronTranslationsRequest onTranslationsRequest is called before the relay is fully initialized and returns the translation JSON data corresponding to the two-letter language argument.\nonTranslationsRequest(language: string): { [key: string]: string };\ronDragOver (optional) onDragOver is called when a compendium item from the compendium tab is dragged over the iframe window containing the character sheet.\nCoordinates of the drag are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch. If the item is moved outside of the iframe, dragData and coordinates are null.\nonDragOver(e: { coordinates: { top: number, left: number }, dragData: { pageName: string categoryName: string expansionId: number } | null, }, dispatch: Dispatch) =\u0026gt; void\ronDropOver (optional) onDropOver is called when a compendium item from the compendium tab is dropped over the iframe window containing the character sheet.\nCoordinates of the drop are provided via top and left values, and basic compendium data is passed so that a subsequent compendium request can be made via the provided dispatch.\nonDropOver(e: { coordinates: { top: number, left: number }, dropData: { pageName: string categoryName: string expansionId: number } }, dispatch: Dispatch) =\u0026gt; void\r","date":"2024-03-07","id":11,"permalink":"/beacon-docs/docs/components/handlers/","summary":"Handler methods allow the sheet to respond to data passed from the Roll20 Tabletop or Roll20 Characters (both refered to as host throughout this page) to the sheet.","tags":[],"title":"Handlers"},{"content":"","date":"2024-02-07","id":12,"permalink":"/beacon-docs/docs/about/","summary":"","tags":[],"title":"About"},{"content":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.\nThis scenario commonly arises when transitioning from an existing legacy sheet to a Beacon sheet. During such transitions, it\u0026rsquo;s possible that the attributes called from the legacy macro may not align with the structure of attributes in the Beacon Sheet.\nThe convertLegacyMacroAttributes function serves as a pivotal tool, empowering Sheet Developers to determine the mapping strategy for legacy attributes to the new Beacon Sheet.\nconvertLegacyMacroAttributes This function is defined during the initial SDK initialization process and is invoked by the host when it encounters a failure in locating an attribute\u0026rsquo;s value.\nconvertLegacyMacroAttributes: (messages: convertLegacyMacroAttributesArgs) =\u0026gt; {}: any\rAdvanced sheet macros typically first search through the defined computed properties before resorting to the convertLegacyMacroAttributes function.\nThe function\u0026rsquo;s purpose is to return a value that will be substituted in the macro. However, it grants Sheet Developers the autonomy to devise their preferred approach for handling legacy attribute values.\n","date":"2024-02-07","id":13,"permalink":"/beacon-docs/docs/components/handling-legacy-macro-attributes/","summary":"When utilizing Macros within the VTT, there are instances where a legacy macro might need to be employed for a Beacon sheet.","tags":[],"title":"Handling Legacy Macro Attributes"},{"content":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development. Basic and advanced sheet examples. Improvements Detailed comments added to example files for better understanding. Support for complex roll templates and rich sheet actions. Bug Fixes N/A (initial release). Version 2.0.0 Release Date: 2023-03-17\nNew Features SCSS support for styling. Integration with Roll20 and VTT. Mock Relay for offline development. Improvements TypeScript integration for type checking and improved development experience. Unit testing with Vitest. End-to-End testing with Cypress. Bug Fixes N/A (initial release). ","date":"2024-01-07","id":14,"permalink":"/beacon-docs/docs/about/changelog/","summary":"Release Date: 2022-03-17\nNew Features Initial release of the Beacon SDK. Support for Vue.js framework. Setup with Vite for rapid development.","tags":[],"title":"Changelog"},{"content":"The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed. These features include attributes and elements that allow for dynamic roll results and interactivity within the host. Vist the Roll20 help center to learn more about Roll20\u0026rsquo;s Dice Rolling system\nThe most command way to trigger a dice roll is through the dispatch object returned from the initRelay, but it could also be called from actions:\ndispatch.roll({ rolls: { [rollName: string]: string } // Ex. {attack: \u0026#39;1d20+4\u0026#39;, damage: `3d6+2`} messageId?: string }): Promise\u0026lt;{messageId: string, results: RollResults }\u0026gt;\rThe roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings.\nmessageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResults. The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.\nThe dispatch roll method and the actions roll section do not post to the chat, instead they will return a promise which will resolve to the roll results and the message id.\nPosting A Roll to the Chat The roll method does not send or post any data to the chat on it\u0026rsquo;s own. We instead have to use dispatch\u0026rsquo;s post method to send our roll results along with any other content to the chat.\ndispatch.post({ characterId: \u0026#39;-O0KZhMTxLkn2HArFj8f\u0026#39;, content: `I rolled a ${diceRoll.results.attack.results.result} to hit and did ${diceRoll.results.damage.results.result} damage!`, })\rAdditional Roll Posting Options data-rollname The data-rollname attribute tells the host that this HTML element is displaying the result of a roll.\n\u0026lt;span data-rollname=\u0026#34;attack\u0026#34;\u0026gt;\u0026lt;/span\u0026gt;\rThe host will both add the Quantum Roll signature element and replace the contents of the element with the result from the roll.\nThis is the preferred method for displaying roll results wherever possible, that is, sending the whole roll formula to the roll server and allowing the host to display the result.\ndata-computed Tagging an element with both a data-rollname and a data-computed=\u0026quot;true\u0026quot; tells the host that this element is associated with a roll, but the results of that roll were computed by the author, as opposed to the roll server computing the result.\n\u0026lt;span data-rollname=\u0026#34;complex\u0026#34; data-computed=\u0026#34;true\u0026#34;\u0026gt;25\u0026lt;/span\u0026gt;\rThe host will add the Quantum Roll signature tooltip, but the content of the element will not be modified. Generally, this should only be used when the roll server does not support a particular dice mechanic.\nRoll Buttons Roll buttons are interactive elements that trigger sheet actions, such as damage rolls, when clicked. These buttons use the data-sheet-action attribute to specify the action to be executed.\n\u0026lt;button data-sheet-action=\u0026#34;damage\u0026#34; data-args=\u0026#34;arg1:arg2\u0026#34;\u0026gt;Click Me\u0026lt;/button\u0026gt;\rAdditional arguments can be provided using the data-args attribute, and the character, messageId, and original rolls will be included automatically.\nRolls Results Format type RollResults = { [name: string]: { expression: string //The original expression (i.e. 1d20+3d6) rollName: string //The name of the roll results: { //The results of the roll(s) expression: string dice?: number[] // result: number //The final result of the roll rolls?: { //Detailed results of each part of the roll (i.e. 3d6) sides: number //The type of die for this part of the roll (i.e. 6) dice: number //The number of dice (i.e. 3) results: number[] //The result of each die (i.e. [4, 2, 5]) }[] } } }\r","date":"2024-01-07","id":15,"permalink":"/beacon-docs/docs/components/rolls/","summary":"The Roll20 Tabletop and Roll20 Characters (both refered to as host throughout the rest of this page) have several new features that enhance the way rolls are handled and displayed.","tags":[],"title":"Rolls"},{"content":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host. Except when specified every method below will return a promise.\nupdate dispatch.update({ options: { overwrite?: boolean } character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rThe update method sends character changes to the host (Roll20 Tabletop or Roll20 Characters) to be persisted. The partial character passed in here must contain the character\u0026rsquo;s id, and can contain any combination of the attributes, bio, and gmNotes properties. When updating a character’s attributes, only include those attributes that have changed.\nupdateCharacter dispatch.updateCharacter({ character: Partial\u0026lt;Character\u0026gt; }): Promise\u0026lt;void\u0026gt;\rLike the update method, updateCharacter sends character changes to the host page (Roll20 Tabletop or Roll20 Characters) to be persisted. However, this method takes a full set of character attributes as the character argument, and automatically computes the diff with existing character attributes, so that only changed attributes are sent to the data store.\nroll dispatch.roll({ rolls: { [rollName: string]: string } // Ex. {attack: \u0026#39;1d20+4\u0026#39;, damage: `3d6+2`} messageId?: string }): Promise\u0026lt;{messageId: string, results: RollResults }\u0026gt;\rThe roll method takes one or more rolls in the form of an object, where the keys are unique roll names and the values are roll strings. messageId can be provided to attach the roll to an existing chat message, either overriding it or appending to it in the chat log. If messageId is omitted, the roll will be associated with a new chat message and a new messageId for that message will be returned with the roll results. The method returns a promise that resolves with an object containing the messageId and the RollResult (see Types). The roll result is returned in the same format as in the non-beacon dice rolls computed roll system.\npost dispatch.post({ characterId: string, messageId?: string, content: string, options?: { whisper?: \u0026#39;gm\u0026#39;, secret?: boolean, } }): Promise\u0026lt;string\u0026gt;\rpost posts a message to chat, either creating a new message or overwriting an existing one. It requires a character id and message content, a string containing either plain text or HTML to be posted. The method also accepts an options object. Currently, only whisper and secret are supported, the only valid value for whisper is gm, which will send the message as a whisper to the gm. The secret option is ignored unless whisper is also set, toggling to true will cause the message to not be visible to the controlling player. Like roll, messageId can be provided to update an existing chat message, but if omitted the method will generate a new messageId and post a new chat message. The method returns the messageId.\nquery dispatch.query(options: Swal2Options): { isConfirmed: boolean, isDenied: boolean, isDismissed: boolean, value?: string | number, dismiss?: \u0026#34;cancel\u0026#34; | \u0026#34;backdrop\u0026#34; | \u0026#34;close\u0026#34; | \u0026#34;esc\u0026#34; | \u0026#34;timer\u0026#34;, errors?: string[], }: Promise\u0026lt;{ results: { isConfirmed: boolean isDenied: boolean isDismissed: boolean value: string | number dismiss: string }, errors: [string] }\u0026gt;\rThe query method takes an options object and uses them to display a SweetAlert2 prompt to the user. It returns the results of the query as a SweetAlertResult, along with any errors encountered. The options work exactly as described in the documentation for SweetAlert2, however not all options are allowed. Here is a list of the allowed options:\ntitleText, text, iconColor, input, width, padding, background, position, grow, timer, timerProgressBar, showConfirmButton, showDenyButton, showCancelButton, ariaLabel, confirmButtonText, denyButtonText, cancelButtonText, confirmButtonAriaLabel, confirmButtonColor, cancelButtonAriaLabel, cancelButtonColor, denyButtonAriaLabel, denyButtonColor, reverseButtons, showCloseButton, closeButtonAriaLabel, returnInputValueOnDeny, imageUrl, imageWidth, imageHeight, imageAlt, inputLabel, inputPlaceholder, inputValue, inputOptions, inputPlaceholder, inputAutoTrim, inputAttributes, validationMessage, progressSteps, currentProgressStep, progressStepsDistance.\nPerform dispatch.perform({ characterId: string, action: string, args: string[], }): Promise\u0026lt;void\u0026gt;;\rperform executes the specified action on behalf of the character (designated by the character id), passing in args to the action method. This method can perform actions on behalf of any character, even a character that the sheet does not have data for.\ngetComputed dispatch.getComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rsee setComputed below\nsetComputed dispatch.setComputed({ characterId: string, property: string, args: string[] }): Promise\u0026lt;string | number | object\u0026gt;\rgetComputed and setComputed are both nearly identical in how they are called, taking a character id and a property with the name of the computed property you wish to get or set, and an array of string args. Both methods return a promise that resolves with the computed value.\ncompendiumRequest dispatch.compendiumRequest({ query: string }): Promise\u0026lt;{ data: Object errors: Array\u0026lt;Error\u0026gt; extensions: Record\u0026lt;string, any\u0026gt; }\u0026gt;\rcompendiumRequest executes an AJAX request to the compendium service’s graphQL endpoint. It takes in a graphQL query string written according to the Compendium service’s schema. The query string does not need to include the ruleSystem shortName as this is set automatically according to the campaign override or sheet.json value in the Roll20 Tabletop.\ndebouncedCompendiumRequest dispatch.debouncedCompendiumRequest({ query: string }): Promise\u0026lt;{ data: Object }\u0026gt;\rLike compendiumRequest, except that calls to this method are automatically debounced (at 100ms) and grouped together into a single request to the compendium service. Note that this method will only return the requested data, it does not return errors or extensions.\ngetTokens dispatch.getTokens({ characterId: string }): Promise\u0026lt;{ selected: Token[], tokens: Token[] }\u0026gt;: Promise\u0026lt;{ selected: Token[] tokens: Token[] }\u0026gt;\rgetTokens requires a character id string and returns information about tokens on the user’s current page. The return value contains two arrays of tokens. The tokens array contains all tokens on the current page that represent the character whose id was provided to the method. The selected array contains any tokens that are currently selected, regardless of which character they represent. The returned token objects contain all of the token attributes available to the API, you can find documentation here and here.\naddToTracker dispatch.addToTracker({ tokenId?: string, custom?: { name: string img?: string } formula?: string value: string | number }): Promise\u0026lt;void\u0026gt;\raddToTracker adds or updates a single item in the turn tracker. Passing in a tokenId will add the specified token to the tracker, while passing in custom with a name and an optional image url (img) will add a custom item, not connected to any character or token. A round calculation string can be added via the optional formula parameter. value is the initiative number for the item.\naddActionsToHost dispatch.addActionsToHost({ sheetAction?: { characterId: string action: string args?: string[] } action?: string locations?: [\u0026#39;macroBar\u0026#39;] | [\u0026#39;tokenActionBar\u0026#39;] | [\u0026#39;macroBar\u0026#39;, \u0026#39;tokenActionBar\u0026#39;] actionId?: string name: string requestId?: string }): void\raddActionsToHost adds a specific action(macro) to an area of the Roll20 Tabletop UI; either the macrobar or the token action bar. Either sheetAction or action can be passed in but not both at the same time. The sheetAction arg should be passed in when an the action is to designated to a character. While the action arg should be passed in when the action is more generic.\ngetActions dispatch.getActions({ args: { characterId?: string } }): Promise\u0026lt;{ actions?: {} | { [id: string]: ActionFromHost } }\u0026gt;\rgetActions gets a specific character’s actions(macro).\nsetContainerSize dispatch.setContainerSize({ args: { width?: number height?: number } }): Promise\u0026lt;void\u0026gt;\rsetContainerSize updates the size of the container which holds the sheet shared settings. Returns a promise that can be awaited. This can be used in conjunction with something like the ResizeSensor event listener from npm: css-element-queries to automatically resize the container on the host.\nupdateTokensByCharacter dispatch.updateTokensByCharacter({ args: { characterId: string token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByCharacter updates a particular character’s default token as well as all existing tokens representing that character. Returns a promise that can be awaited.\nupdateTokensByIds dispatch.updateTokensByIds({ args: { tokenIds: array of ids as strings token: Partial\u0026lt;Token\u0026gt; } }): Promise\u0026lt;void\u0026gt;\rupdateTokensByIds updates a single or several tokens. Returns a promise that can be awaited.\nautoLinkText dispatch.autoLinkText({ args: { text: string } }): Promise\u0026lt;string\u0026gt;\rautoLinkText goes through the text to find handout names between square brackets and converts them into links with the handoutID. For example in a game with a handout named Dragon, passing in the text string of this is a [Dragon] to autoLinkText returns something similar to this is a \u0026lt;a href=\u0026quot;https://journal.roll20.net/8je02j0kd02k\u0026quot;\u0026gt;Dragon\u0026lt;/a\u0026gt;.\nopenDialogFromLink dispatch.openDialogFromLink({ args: { urlString: string } }): void\ropenDialogFromLink opens the supplied urlString through the Roll20 Tabletop.\nIf the url is for a handout, it will open the corresponding handout in the campaign. This will also check if the user opening the link has access to the handout. If the url is for a compendium, it will open a pop up to the compendium page, it will also check to ensure the user has access to view the page. If the url is for an external page, a confirmation pop up will display to warn the user that the link is for an external site and open a new tab in their main window if confirmed. ","date":"2023-09-07","id":16,"permalink":"/beacon-docs/docs/components/dispatch/","summary":"The dispatch is returned by the initRelay and provides methods for sending commands from the character sheet back to the host.","tags":[],"title":"Dispatch"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet\nUse the following steps to get started:\nInstall the Beacon SDK: Run the following command. npm i @roll20-official/beacon-sdk\rInstall dependencies: Install the dependencies for the project. npm install\rStart the Vite server: After installing the project\u0026rsquo;s dependencies, you\u0026rsquo;ll need to start the Vite server. There are two ways to do this: a. Offline Development: This method will run the Vite server with the default port and environment set to development.\nnpm run dev\rOnce this code executes successfully, you can access the Vite server at http://localhost:5173.\nThis method is useful when you do not have access to the Roll20 website or would like to work on parts of your project that do not depend on a connection to the VTT or Roll20 Characters, such as working on styling, mocking up the environment, building Vue components, testing functionality, etc.\nIn development mode, you cannot save or access existing character data or use the Beacon SDK functions that depend on VTT or Roll20 Characters functionality, such as dice rolling and token manipulation.\nb. Sandbox Development: This method will run the Vite server with the port set to 7620 and the environment set to staging mode.\nnpm run sandbox\rThis command will build the SCSS files and then run the Vite server. This will set the server up for connecting to a VTT custom sheet sandbox as well as through the sandbox in Roll20 Characters.\nTo test your changes in the VTT custom sheet sandbox, you will need to add the following to the sheet.json editor in the game settings:\n{ \u0026#34;advanced\u0026#34;: true, \u0026#34;advancedPort\u0026#34;: 7620 }\rUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\r","date":"2024-04-07","id":17,"permalink":"/beacon-docs/docs/gettingstarted/quick-start-sheet-template/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following tools installed:\nVue.js Vite SCSS Figure 1: Quickstart sheet","tags":[],"title":"Quick Start Sheet Template"},{"content":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet\nThis sheet uses the same steps listed in the . Immediately after implementing those three steps, you\u0026rsquo;ll add the following step:\nRun a CI check: This will run several checks to ensure your code is as optimal as possible, including formatting, linting, type checking, unit tests, and end-to-end tests. npm run ci-check\rYou can think of this command as a sanity check you can leverage when pushing a big release for your sheet!\nUseful Commands The following set of commands can come in handy when working with this sheet:\nFor Hot reloading and building CSS files, use the following command: npm run watch-scss\rFor linting, use the following command: npm run lint\rFor formatting with Prettier, use the following command: npm run format\rFor type checking with TypeScript, use the following command: npm run type-check\rFor running unit tests with Vitest, use the following command: npm run test:unit\rTo open up and develop local end-to-end tests with Cypress, use the following command: npm run test:e2e:open:local\rFor running local end-to-end tests with Cypress, use the following command: npm run test:e2e:local\rTo run CDN-hosted end-to-end tests with Cypress, use the following command: npm run test:e2e\r","date":"2024-03-07","id":18,"permalink":"/beacon-docs/docs/gettingstarted/example-patterns-sheet/","summary":"Prerequisites To set this sheet up properly, make sure that you have the following:\nVue framework \u0026amp; Routing Multiple Data Stores Complex Roll Templates Rich Sheet Actions TypeScript Vite SCSS Ability to run Unit \u0026amp; End-to-End Tests Figure 1: Advanced sheet","tags":[],"title":"Example Patterns Sheet"},{"content":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:\nHow to Contribute Reporting Bugs If you find a bug, please report it by opening an issue in the GitHub repository. Provide as much detail as possible to help us understand and reproduce the issue.\nSuggesting Features We welcome suggestions for new features. Please open an issue in the GitHub repository with a detailed description of the feature you would like to see and why you think it would be useful.\nCode Contributions Fork the Repository: Create a personal fork of the project on GitHub.\nClone the Fork: Clone your fork to your local machine.\ngit clone Create a Branch: Create a new branch for your work.\ngit checkout -b feature-or-bugfix-description\rMake Changes: Make your changes to the codebase. Follow the existing code style and conventions.\nRun Tests: Ensure that all tests pass before submitting your changes.\nnpm run ci-check\rCommit Changes: Commit your changes with a descriptive commit message.\ngit commit -m \u0026#34;Description of your changes\u0026#34;\rPush Changes: Push your changes to your fork.\ngit push origin feature-or-bugfix-description\rCreate a Pull Request: Open a pull request from your fork to the main repository. Provide a detailed description of your changes and why they should be merged.\nRunning Tests Unit Tests: Run unit tests with Vitest.\nnpm run test:unit\rEnd-to-End Tests: Run End-to-End tests with Cypress.\nnpm run test:e2e\rCode Style Follow the existing code style and conventions.\nUse ESLint for linting.\nnpm run lint\rFormat code with Prettier.\nnpm run format\rCommunication GitHub Issues: Use GitHub issues for bug reports, feature requests, and questions. Pull Requests: Use GitHub pull requests to submit your code contributions. Thank you for contributing to the Beacon SDK project!\n","date":"2024-02-07","id":19,"permalink":"/beacon-docs/docs/about/how-to-contribute/","summary":"We appreciate your interest in contributing to the Beacon SDK project. Here are some guidelines to help you get started:","tags":[],"title":"How to Contribute"},{"content":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform. This sheet includes all the necessary code, assets, and metadata packaged together to be easily shared, tested, and eventually deployed on Roll20.\nWhen you\u0026rsquo;re ready to test and share a sheet on Roll20, you\u0026rsquo;d want to do it in such a way that others who might need it won\u0026rsquo;t have to set it up with a local dev environment.\nThat\u0026rsquo;s what the steps below help you achieve. In this guide, you can make your sheet available in the Roll20 Tabletop and Characters.\nSteps to Release a Test Sheet The following steps will aid you while releasing your sheet:\nCreate a Build Command:\nYou must have a build command that will produce the minified production-ready code. You can find an example in our Quickstart Package JSON. The build command must be able to create these exact files:\nsheet.js sheet.css host.css (optional) Add a local folder that contains fonts and images used in the sheet (optional). Add a sheet.json file:\nAdd a sheet.json file to your sheet folder to ensure the metadata for your sheet is up-to-date. For this, you can also find an example in our Quickstart Package JSON.\nCreate a Pull Request in the Community Sheet Repo:\nIn the Community Sheet Repo, create a pull request that must include the submission checklist from our previous process.\nSubmission Checklist When submitting a new or updated sheet to Roll20, it\u0026rsquo;s essential to follow the guidelines to ensure a smooth review and approval process.\nBelow is a checklist to help you prepare your submission.\nRequired The following are the required submission checklist items:\nThe pull request title clearly contains the name of the sheet I am editing. The pull request title clearly states the type of change I am submitting (New Sheet/New Feature/Bugfix/etc.). The pull request makes changes to files in only one sub-folder. The pull request does not contain changes to any JSON files in the translations folder (translation.json is permitted). New Sheet Details You must include the following information in your sheet:\nThe name of this game is: \u0026lt; THE AETHYRBLOOD CHRONICLES \u0026gt;. The publisher of this game is: \u0026lt; HAPHAZARD PROJECTS \u0026gt; The name of this game system/family is: \u0026lt; DPS System ('dice pool scales') \u0026gt; You must also check out the following:\nI have followed the Character Sheets Standards when building this sheet. I have authorization from the game\u0026rsquo;s publisher to make this an official sheet on Roll20 with their name attached. This game is not traditionally published, but a copy of the game rules can be purchased/downloaded/found at The Aethyrblood Chronicles Core Rule Book In the pull request comments, make sure to list the email addresses of the Roll20 users you\u0026rsquo;d like to have access to the sheet.\nWe can always grant more people access to the sheet after it is released. However, you can inform us in our Official Community Sheet Development Channels on Discord.\nApproval and Access:\nAfter you create a pull request, our team will approve it and add your sheet to the sheet selection in Roll20 Tabletop and Characters. We will then give only your Roll20 user and any others you\u0026rsquo;ve listed in the pull request comments access to the sheet in Roll20. This sheet will then be available for you and others with access to test it.\nReleasing a Final Version After you have released a test version of your sheet, you can follow the same steps as releasing a test version to make your sheet available to everyone. This time, the pull request comments state that it is a final release version.\nOnce you have created the pull request, our team will review the sheet functionality, code, and metadata for consistency, best practices, and overall system security. We reserve the right to reject any sheet that does not meet our terms of use or conflicts with our partnerships.\n","date":"2024-02-07","id":20,"permalink":"/beacon-docs/docs/gettingstarted/releasing-a-sheet/","summary":"A release sheet is a finalized version of a character sheet or other content designed for use on the Roll20 platform.","tags":[],"title":"Releasing a Sheet"},{"content":"Link to valuable, relevant resources.\n","date":"2024-02-27","id":21,"permalink":"/beacon-docs/docs/resources/","summary":"Link to valuable, relevant resources.","tags":[],"title":"Resources"},{"content":"","date":"2023-09-07","id":22,"permalink":"/beacon-docs/docs/","summary":"","tags":[],"title":"Docs"},{"content":"","date":"2023-09-07","id":23,"permalink":"/beacon-docs/privacy/","summary":"","tags":[],"title":"Privacy Policy"},{"content":"","date":"2023-09-07","id":24,"permalink":"/beacon-docs/","summary":"","tags":[],"title":"Welcome to Beacon SDK"},{"content":"","date":"0001-01-01","id":25,"permalink":"/beacon-docs/categories/","summary":"","tags":[],"title":"Categories"},{"content":"","date":"0001-01-01","id":26,"permalink":"/beacon-docs/contributors/","summary":"","tags":[],"title":"Contributors"},{"content":"","date":"0001-01-01","id":27,"permalink":"/beacon-docs/tags/","summary":"","tags":[],"title":"Tags"}] \ No newline at end of file diff --git a/public/sitemap.xml b/public/sitemap.xml index b999129..f6485f8 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -1,142 +1 @@ - - - - http://localhost:1313/blog/example-post/ - 2023-09-07T16:27:22+02:00 - monthly - 0.5 - - http://localhost:1313/blog/ - 2023-09-07T16:21:44+02:00 - monthly - 0.5 - - http://localhost:1313/docs/gettingstarted/ - 2023-09-07T16:06:50+02:00 - monthly - 0.5 - - http://localhost:1313/docs/gettingstarted/introduction/ - 2024-01-07T16:04:48+02:00 - monthly - 0.5 - - http://localhost:1313/docs/gettingstarted/installing-beacon/ - 2024-02-07T16:04:48+02:00 - monthly - 0.5 - - http://localhost:1313/docs/about/glossary/ - 2024-02-07T16:04:48+02:00 - monthly - 0.5 - - http://localhost:1313/docs/about/faq/ - 2024-02-07T16:04:48+02:00 - monthly - 0.5 - - http://localhost:1313/docs/components/initrelay/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - http://localhost:1313/docs/components/actions/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - http://localhost:1313/docs/components/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - http://localhost:1313/docs/components/computed/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - http://localhost:1313/docs/components/handlers/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - http://localhost:1313/docs/about/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - http://localhost:1313/docs/components/handling-legacy-macro-attributes/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - http://localhost:1313/docs/about/changelog/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - http://localhost:1313/docs/components/rolls/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - http://localhost:1313/docs/components/dispatch/ - 2023-09-07T16:12:37+02:00 - monthly - 0.5 - - http://localhost:1313/docs/gettingstarted/quick-start-sheet-template/ - 2024-05-07T16:13:18+02:00 - monthly - 0.5 - - http://localhost:1313/docs/gettingstarted/example-patterns-sheet/ - 2024-09-07T16:13:18+02:00 - monthly - 0.5 - - http://localhost:1313/docs/about/how-to-contribute/ - 2024-09-07T16:13:18+02:00 - monthly - 0.5 - - http://localhost:1313/docs/gettingstarted/releasing-a-sheet/ - 2024-09-07T16:13:18+02:00 - monthly - 0.5 - - http://localhost:1313/docs/resources/ - 2024-02-27T09:30:56+01:00 - monthly - 0.5 - - http://localhost:1313/docs/ - 2023-09-07T16:12:03+02:00 - monthly - 0.5 - - http://localhost:1313/privacy/ - 2023-09-07T17:19:07+02:00 - monthly - 0.5 - - http://localhost:1313/ - 2023-09-07T16:33:54+02:00 - monthly - 0.5 - - http://localhost:1313/categories/ - monthly - 0.5 - - http://localhost:1313/contributors/ - monthly - 0.5 - - http://localhost:1313/tags/ - monthly - 0.5 - - +https://roll20.github.io/beacon-docs/blog/example-post/2023-09-07T16:27:22+02:00monthly0.5https://roll20.github.io/beacon-docs/blog/2023-09-07T16:21:44+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/2023-09-07T16:06:50+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/introduction/2024-01-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/installing-beacon/2024-02-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/glossary/2024-02-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/faq/2024-02-07T16:04:48+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/initrelay/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/actions/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/computed/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/handlers/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/handling-legacy-macro-attributes/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/changelog/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/rolls/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/components/dispatch/2023-09-07T16:12:37+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/quick-start-sheet-template/2024-05-07T16:13:18+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/example-patterns-sheet/2024-09-07T16:13:18+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/about/how-to-contribute/2024-09-07T16:13:18+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/gettingstarted/releasing-a-sheet/2024-09-07T16:13:18+02:00monthly0.5https://roll20.github.io/beacon-docs/docs/resources/2024-02-27T09:30:56+01:00monthly0.5https://roll20.github.io/beacon-docs/docs/2023-09-07T16:12:03+02:00monthly0.5https://roll20.github.io/beacon-docs/privacy/2023-09-07T17:19:07+02:00monthly0.5https://roll20.github.io/beacon-docs/2023-09-07T16:33:54+02:00monthly0.5https://roll20.github.io/beacon-docs/categories/monthly0.5https://roll20.github.io/beacon-docs/contributors/monthly0.5https://roll20.github.io/beacon-docs/tags/monthly0.5 \ No newline at end of file diff --git a/public/tags/index.html b/public/tags/index.html index 115ac54..292928b 100644 --- a/public/tags/index.html +++ b/public/tags/index.html @@ -1,209 +1,3 @@ - - - - - - - - - - - - - - - -Tags | Beacon SDK - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Beacon SDK - - - - - - - - -
-
-
Beacon SDK
- -
- -
- - - - - - - - - - - - Get started -
-
- - - Get started -
-
-
- - -
-
- - -
-
-

Tags

-
-
- -
- -
-
- - -
-
- - - - - - - - - - - - - -
- -
- - - - \ No newline at end of file +Tags | Beacon SDK +
Beacon SDK +Get started

Tags

\ No newline at end of file diff --git a/public/tags/index.xml b/public/tags/index.xml index dd41531..2cc228f 100644 --- a/public/tags/index.xml +++ b/public/tags/index.xml @@ -1,12 +1 @@ - - - - Tags on Beacon SDK - http://localhost:1313/tags/ - Recent content in Tags on Beacon SDK - Hugo - en - Copyright (c) 2020-2024 Beacon SDK - - - +Tags on Beacon SDKhttps://roll20.github.io/beacon-docs/tags/Recent content in Tags on Beacon SDKHugoenCopyright (c) 2020-2024 Beacon SDK \ No newline at end of file diff --git a/public/tags/page/1/index.html b/public/tags/page/1/index.html index 09165a4..05bcc00 100644 --- a/public/tags/page/1/index.html +++ b/public/tags/page/1/index.html @@ -1,10 +1,2 @@ - - - - http://localhost:1313/tags/ - - - - - - +https://roll20.github.io/beacon-docs/tags/ + \ No newline at end of file diff --git a/resources/_gen/assets/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.content b/resources/_gen/assets/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.content deleted file mode 100644 index 2349b29..0000000 --- a/resources/_gen/assets/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.content +++ /dev/null @@ -1,14464 +0,0 @@ -@charset "UTF-8"; -/* Bluish cyan */ -/* Gray */ -/* Yellow */ -/* Khaki */ -/* Purple */ -/* Vermilion */ -:root[data-bs-theme="light"], -[data-bs-theme="light"] ::backdrop { - --sl-color-white: hsl(224, 10%, 10%); - --sl-color-gray-1: hsl(224, 14%, 16%); - --sl-color-gray-2: hsl(224, 10%, 23%); - --sl-color-gray-3: hsl(224, 7%, 36%); - --sl-color-gray-4: hsl(224, 6%, 56%); - --sl-color-gray-5: hsl(224, 6%, 77%); - --sl-color-gray-6: hsl(224, 20%, 94%); - --sl-color-gray-7: hsl(224, 19%, 97%); - --sl-color-black: hsl(0, 0%, 100%); } - -:root, -::backdrop { - --sl-color-white: hsl(0, 0%, 100%); - --sl-color-gray-1: hsl(224, 20%, 94%); - --sl-color-gray-2: hsl(224, 6%, 77%); - --sl-color-gray-3: hsl(224, 6%, 56%); - --sl-color-gray-4: hsl(224, 7%, 36%); - --sl-color-gray-5: hsl(224, 10%, 23%); - --sl-color-gray-6: hsl(224, 14%, 16%); - --sl-color-black: hsl(224, 10%, 10%); - --sl-hue-orange: 41; - --sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%); - --sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%); - --sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%); - --sl-hue-green: 101; - --sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%); - --sl-color-green: hsl(var(--sl-hue-green), 82%, 63%); - --sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%); - --sl-hue-blue: 234; - --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%); - --sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%); - --sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%); - --sl-hue-purple: 281; - --sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%); - --sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%); - --sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%); - --sl-hue-red: 339; - --sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%); - --sl-color-red: hsl(var(--sl-hue-red), 82%, 63%); - --sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%); - --sl-color-accent-low: hsl(224, 54%, 20%); - --sl-color-accent: hsl(224, 100%, 60%); - --sl-color-accent-high: hsl(224, 100%, 85%); - --sl-color-text: var(--sl-color-gray-2); - --sl-color-text-accent: var(--sl-color-accent-high); - --sl-color-text-invert: var(--sl-color-accent-low); - --sl-color-bg: var(--sl-color-black); - --sl-color-bg-nav: var(--sl-color-gray-6); - --sl-color-bg-sidebar: var(--sl-color-gray-6); - --sl-color-bg-inline-code: var(--sl-color-gray-5); - --sl-color-hairline-light: var(--sl-color-gray-5); - --sl-color-hairline: var(--sl-color-gray-6); - --sl-color-hairline-shade: var(--sl-color-black); - --sl-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66); - --sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), 0px 2px 1px hsla(0, 0%, 0%, 0.24); - --sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08), 0px 5px 2px hsla(0, 0%, 0%, 0.08), 0px 3px 2px hsla(0, 0%, 0%, 0.12), 0px 1px 1px hsla(0, 0%, 0%, 0.15); - --sl-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(0, 0%, 0%, 0.1), 0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(0, 0%, 0%, 0.75), 0px 4px 2px hsla(0, 0%, 0%, 0.25); - --sl-text-xs: 0.8125rem; - --sl-text-sm: 0.875rem; - --sl-text-base: 1rem; - --sl-text-lg: 1.125rem; - --sl-text-xl: 1.25rem; - --sl-text-2xl: 1.5rem; - --sl-text-3xl: 1.8125rem; - --sl-text-4xl: 2.1875rem; - --sl-text-5xl: 2.625rem; - --sl-text-6xl: 4rem; - --sl-text-body: var(--sl-text-base); - --sl-text-body-sm: var(--sl-text-xs); - --sl-text-code: var(--sl-text-sm); - --sl-text-code-sm: var(--sl-text-xs); - --sl-text-h1: var(--sl-text-4xl); - --sl-text-h2: var(--sl-text-3xl); - --sl-text-h3: var(--sl-text-2xl); - --sl-text-h4: var(--sl-text-xl); - --sl-text-h5: var(--sl-text-lg); - --sl-line-height: 1.8; - --sl-line-height-headings: 1.2; - --sl-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --__sl-font: var(--sl-font, ""), var(--sl-font-system); - --__sl-font-mono: var(--sl-font-mono, ""), var(--sl-font-system-mono); - --sl-nav-height: 3.5rem; - --sl-nav-pad-x: 1rem; - --sl-nav-pad-y: 0.75rem; - --sl-mobile-toc-height: 3rem; - --sl-sidebar-width: 18.75rem; - --sl-sidebar-pad-x: 1rem; - --sl-content-width: 45rem; - --sl-content-pad-x: 1rem; - --sl-menu-button-size: 2rem; - --sl-nav-gap: var(--sl-content-pad-x); - --sl-outline-offset-inside: -0.1875rem; - --sl-z-index-toc: 4; - --sl-z-index-menu: 5; - --sl-z-index-navbar: 10; - --sl-z-index-skiplink: 20; } - -:root { - --purple-hsl: 255, 60%, 60%; - --overlay-blurple: hsla(var(--purple-hsl), 0.2); } - -:root { - --ec-brdRad: 0px; - --ec-brdWd: 1px; - --ec-brdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); - --ec-codeFontFml: var(--__sl-font-mono); - --ec-codeFontSize: var(--sl-text-code); - --ec-codeFontWg: 400; - --ec-codeLineHt: var(--sl-line-height); - --ec-codePadBlk: 0.75rem; - --ec-codePadInl: 1rem; - --ec-codeBg: #011627; - --ec-codeFg: #d6deeb; - --ec-codeSelBg: #1d3b53; - --ec-uiFontFml: var(--__sl-font); - --ec-uiFontSize: 0.9rem; - --ec-uiFontWg: 400; - --ec-uiLineHt: 1.65; - --ec-uiPadBlk: 0.25rem; - --ec-uiPadInl: 1rem; - --ec-uiSelBg: #234d708c; - --ec-uiSelFg: #ffffff; - --ec-focusBrd: #122d42; - --ec-sbThumbCol: #ffffff17; - --ec-sbThumbHoverCol: #ffffff49; - --ec-tm-lineMarkerAccentMarg: 0rem; - --ec-tm-lineMarkerAccentWd: 0.15rem; - --ec-tm-lineDiffIndMargLeft: 0.25rem; - --ec-tm-inlMarkerBrdWd: 1.5px; - --ec-tm-inlMarkerBrdRad: 0.2rem; - --ec-tm-inlMarkerPad: 0.15rem; - --ec-tm-insDiffIndContent: "+"; - --ec-tm-delDiffIndContent: "-"; - --ec-tm-markBg: #ffffff17; - --ec-tm-markBrdCol: #ffffff40; - --ec-tm-insBg: #1e571599; - --ec-tm-insBrdCol: #487f3bd0; - --ec-tm-insDiffIndCol: #79b169d0; - --ec-tm-delBg: #862d2799; - --ec-tm-delBrdCol: #b4554bd0; - --ec-tm-delDiffIndCol: #ed8779d0; - --ec-frm-shdCol: #011627; - --ec-frm-frameBoxShdCssVal: none; - --ec-frm-edActTabBg: var(--sl-color-gray-6); - --ec-frm-edActTabFg: var(--sl-color-text); - --ec-frm-edActTabBrdCol: transparent; - --ec-frm-edActTabIndHt: 1px; - --ec-frm-edActTabIndTopCol: var(--sl-color-accent-high); - --ec-frm-edActTabIndBtmCol: transparent; - --ec-frm-edTabsMargInlStart: 0; - --ec-frm-edTabsMargBlkStart: 0; - --ec-frm-edTabBrdRad: 0px; - --ec-frm-edTabBarBg: var(--sl-color-black); - --ec-frm-edTabBarBrdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); - --ec-frm-edTabBarBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); - --ec-frm-edBg: var(--sl-color-gray-6); - --ec-frm-trmTtbDotsFg: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); - --ec-frm-trmTtbDotsOpa: 0.75; - --ec-frm-trmTtbBg: var(--sl-color-black); - --ec-frm-trmTtbFg: var(--sl-color-text); - --ec-frm-trmTtbBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); - --ec-frm-trmBg: var(--sl-color-gray-6); - --ec-frm-inlBtnFg: var(--sl-color-text); - --ec-frm-inlBtnBg: var(--sl-color-text); - --ec-frm-inlBtnBgIdleOpa: 0; - --ec-frm-inlBtnBgHoverOrFocusOpa: 0.2; - --ec-frm-inlBtnBgActOpa: 0.3; - --ec-frm-inlBtnBrd: var(--sl-color-text); - --ec-frm-inlBtnBrdOpa: 0.4; - --ec-frm-tooltipSuccessBg: #158744; - --ec-frm-tooltipSuccessFg: white; } - -:root, -[data-bs-theme="light"] { - --bs-blue: #3347ff; - --bs-indigo: #6610f2; - --bs-purple: #bd53ee; - --bs-pink: #d63384; - --bs-red: #ee5389; - --bs-orange: #fd7e14; - --bs-yellow: #eebd53; - --bs-green: #84ee53; - --bs-teal: #20c997; - --bs-cyan: #0dcaf0; - --bs-black: #000; - --bs-white: #fff; - --bs-gray: #6c757d; - --bs-gray-dark: #343a40; - --bs-gray-100: #f8f9fa; - --bs-gray-200: #e9ecef; - --bs-gray-300: #dee2e6; - --bs-gray-400: #ced4da; - --bs-gray-500: #adb5bd; - --bs-gray-600: #6c757d; - --bs-gray-700: #495057; - --bs-gray-800: #343a40; - --bs-gray-900: #212529; - --bs-primary: #5d2f86; - --bs-secondary: #6c757d; - --bs-success: #84ee53; - --bs-info: #3347ff; - --bs-warning: #eebd53; - --bs-danger: #ee5389; - --bs-light: #f8f9fa; - --bs-dark: #212529; - --bs-primary-rgb: 93, 47, 134; - --bs-secondary-rgb: 108, 117, 125; - --bs-success-rgb: 132.2821, 238.017, 83.283; - --bs-info-rgb: 51, 71.4, 255; - --bs-warning-rgb: 238.017, 189.0179, 83.283; - --bs-danger-rgb: 238.017, 83.283, 137.4399; - --bs-light-rgb: 248, 249, 250; - --bs-dark-rgb: 33, 37, 41; - --bs-primary-text-emphasis: #251336; - --bs-secondary-text-emphasis: #2b2f32; - --bs-success-text-emphasis: #355f21; - --bs-info-text-emphasis: #141d66; - --bs-warning-text-emphasis: #5f4c21; - --bs-danger-text-emphasis: #5f2137; - --bs-light-text-emphasis: #495057; - --bs-dark-text-emphasis: #495057; - --bs-primary-bg-subtle: #dfd5e7; - --bs-secondary-bg-subtle: #e2e3e5; - --bs-success-bg-subtle: #e6fcdd; - --bs-info-bg-subtle: #d6daff; - --bs-warning-bg-subtle: #fcf2dd; - --bs-danger-bg-subtle: #fcdde7; - --bs-light-bg-subtle: #fcfcfd; - --bs-dark-bg-subtle: #ced4da; - --bs-primary-border-subtle: #beaccf; - --bs-secondary-border-subtle: #c4c8cb; - --bs-success-border-subtle: #cef8ba; - --bs-info-border-subtle: #adb6ff; - --bs-warning-border-subtle: #f8e5ba; - --bs-danger-border-subtle: #f8bad0; - --bs-light-border-subtle: #e9ecef; - --bs-dark-border-subtle: #adb5bd; - --bs-white-rgb: 255, 255, 255; - --bs-black-rgb: 0, 0, 0; - --bs-font-sans-serif: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); - --bs-body-font-family: var(--bs-font-sans-serif); - --bs-body-font-size: 1rem; - --bs-body-font-weight: 400; - --bs-body-line-height: 1.5; - --bs-body-color: #1d2d35; - --bs-body-color-rgb: 29, 45, 53; - --bs-body-bg: #fff; - --bs-body-bg-rgb: 255, 255, 255; - --bs-emphasis-color: #000; - --bs-emphasis-color-rgb: 0, 0, 0; - --bs-secondary-color: rgba(29, 45, 53, 0.75); - --bs-secondary-color-rgb: 29, 45, 53; - --bs-secondary-bg: #e9ecef; - --bs-secondary-bg-rgb: 233, 236, 239; - --bs-tertiary-color: rgba(29, 45, 53, 0.5); - --bs-tertiary-color-rgb: 29, 45, 53; - --bs-tertiary-bg: #f8f9fa; - --bs-tertiary-bg-rgb: 248, 249, 250; - --bs-heading-color: inherit; - --bs-link-color: #5d2f86; - --bs-link-color-rgb: 93, 47, 134; - --bs-link-decoration: none; - --bs-link-hover-color: #4a266b; - --bs-link-hover-color-rgb: 74, 38, 107; - --bs-link-hover-decoration: underline; - --bs-code-color: #d63384; - --bs-highlight-color: #1d2d35; - --bs-highlight-bg: #fcf2dd; - --bs-border-width: 1px; - --bs-border-style: solid; - --bs-border-color: #dee2e6; - --bs-border-color-translucent: rgba(0, 0, 0, 0.175); - --bs-border-radius: 0.375rem; - --bs-border-radius-sm: 0.25rem; - --bs-border-radius-lg: 0.5rem; - --bs-border-radius-xl: 1rem; - --bs-border-radius-xxl: 2rem; - --bs-border-radius-2xl: var(--bs-border-radius-xxl); - --bs-border-radius-pill: 50rem; - --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); - --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); - --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); - --bs-focus-ring-width: 0.25rem; - --bs-focus-ring-opacity: 0.25; - --bs-focus-ring-color: rgba(93, 47, 134, 0.25); - --bs-form-valid-color: #84ee53; - --bs-form-valid-border-color: #84ee53; - --bs-form-invalid-color: #ee5389; - --bs-form-invalid-border-color: #ee5389; } - -[data-bs-theme="dark"] { - color-scheme: dark; - --bs-body-color: #c1c3c8; - --bs-body-color-rgb: 192.831, 194.7078, 199.869; - --bs-body-bg: #17181c; - --bs-body-bg-rgb: 22.95, 24.31, 28.05; - --bs-emphasis-color: #fff; - --bs-emphasis-color-rgb: 255, 255, 255; - --bs-secondary-color: rgba(193, 195, 200, 0.75); - --bs-secondary-color-rgb: 192.831, 194.7078, 199.869; - --bs-secondary-bg: #343a40; - --bs-secondary-bg-rgb: 52, 58, 64; - --bs-tertiary-color: rgba(193, 195, 200, 0.5); - --bs-tertiary-color-rgb: 192.831, 194.7078, 199.869; - --bs-tertiary-bg: #2b3035; - --bs-tertiary-bg-rgb: 43, 48, 53; - --bs-primary-text-emphasis: #9e82b6; - --bs-secondary-text-emphasis: #a7acb1; - --bs-success-text-emphasis: #b5f598; - --bs-info-text-emphasis: #8591ff; - --bs-warning-text-emphasis: #f5d798; - --bs-danger-text-emphasis: #f598b8; - --bs-light-text-emphasis: #f8f9fa; - --bs-dark-text-emphasis: #dee2e6; - --bs-primary-bg-subtle: #13091b; - --bs-secondary-bg-subtle: #161719; - --bs-success-bg-subtle: #1a3011; - --bs-info-bg-subtle: #0a0e33; - --bs-warning-bg-subtle: #302611; - --bs-danger-bg-subtle: #30111b; - --bs-light-bg-subtle: #23262f; - --bs-dark-bg-subtle: #1a1d20; - --bs-primary-border-subtle: #381c50; - --bs-secondary-border-subtle: #41464b; - --bs-success-border-subtle: #4f8f32; - --bs-info-border-subtle: #1f2b99; - --bs-warning-border-subtle: #8f7132; - --bs-danger-border-subtle: #8f3252; - --bs-light-border-subtle: #353841; - --bs-dark-border-subtle: #343a40; - --bs-heading-color: white; - --bs-link-color: #b3c7ff; - --bs-link-hover-color: #c2d2ff; - --bs-link-color-rgb: 178.5, 198.9, 255; - --bs-link-hover-color-rgb: 194, 210, 255; - --bs-code-color: #e685b5; - --bs-highlight-color: #c1c3c8; - --bs-highlight-bg: #5f4c21; - --bs-border-color: #495057; - --bs-border-color-translucent: rgba(255, 255, 255, 0.15); - --bs-form-valid-color: #b5f598; - --bs-form-valid-border-color: #b5f598; - --bs-form-invalid-color: #f598b8; - --bs-form-invalid-border-color: #f598b8; } - -*, -*::before, -*::after { - box-sizing: border-box; } - -@media (prefers-reduced-motion: no-preference) { - :root { - scroll-behavior: smooth; } } - -body { - margin: 0; - font-family: var(--bs-body-font-family); - font-size: var(--bs-body-font-size); - font-weight: var(--bs-body-font-weight); - line-height: var(--bs-body-line-height); - color: var(--bs-body-color); - text-align: var(--bs-body-text-align); - background-color: var(--bs-body-bg); - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - -hr { - margin: 1rem 0; - color: inherit; - border: 0; - border-top: var(--bs-border-width) solid; - opacity: 0.25; } - -h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { - margin-top: 0; - margin-bottom: 0.5rem; - font-weight: 700; - line-height: 1.2; - color: var(--bs-heading-color); } - -h1, .h1 { - font-size: calc(1.375rem + 1.5vw); } - @media (min-width: 1200px) { - h1, .h1 { - font-size: 2.5rem; } } -h2, .h2 { - font-size: calc(1.325rem + 0.9vw); } - @media (min-width: 1200px) { - h2, .h2 { - font-size: 2rem; } } -h3, .h3 { - font-size: calc(1.3rem + 0.6vw); } - @media (min-width: 1200px) { - h3, .h3 { - font-size: 1.75rem; } } -h4, .h4 { - font-size: calc(1.275rem + 0.3vw); } - @media (min-width: 1200px) { - h4, .h4 { - font-size: 1.5rem; } } -h5, .h5 { - font-size: 1.25rem; } - -h6, .h6 { - font-size: 1rem; } - -p { - margin-top: 0; - margin-bottom: 1rem; } - -abbr[title] { - text-decoration: underline dotted; - cursor: help; - text-decoration-skip-ink: none; } - -address { - margin-bottom: 1rem; - font-style: normal; - line-height: inherit; } - -ol, -ul { - padding-left: 2rem; } - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1rem; } - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; } - -dt { - font-weight: 700; } - -dd { - margin-bottom: .5rem; - margin-left: 0; } - -blockquote { - margin: 0 0 1rem; } - -b, -strong { - font-weight: bolder; } - -small, .small { - font-size: 0.875em; } - -mark, .mark { - padding: 0.1875em; - color: var(--bs-highlight-color); - background-color: var(--bs-highlight-bg); } - -sub, -sup { - position: relative; - font-size: 0.75em; - line-height: 0; - vertical-align: baseline; } - -sub { - bottom: -.25em; } - -sup { - top: -.5em; } - -a { - color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); - text-decoration: none; } - a:hover { - --bs-link-color-rgb: var(--bs-link-hover-color-rgb); - text-decoration: underline; } - -a:not([href]):not([class]), a:not([href]):not([class]):hover { - color: inherit; - text-decoration: none; } - -pre, -code, -kbd, -samp { - font-family: var(--bs-font-monospace); - font-size: 1em; } - -pre { - display: block; - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; - font-size: 0.875em; } - pre code { - font-size: inherit; - color: inherit; - word-break: normal; } - -code { - font-size: 0.875em; - color: var(--bs-code-color); - word-wrap: break-word; } - a > code { - color: inherit; } - -kbd { - padding: 0.1875rem 0.375rem; - font-size: 0.875em; - color: var(--bs-body-bg); - background-color: var(--bs-body-color); - border-radius: 0.25rem; } - kbd kbd { - padding: 0; - font-size: 1em; } - -figure { - margin: 0 0 1rem; } - -img, -svg { - vertical-align: middle; } - -table { - caption-side: bottom; - border-collapse: collapse; } - -caption { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - color: var(--bs-secondary-color); - text-align: left; } - -th { - text-align: inherit; - text-align: -webkit-match-parent; } - -thead, -tbody, -tfoot, -tr, -td, -th { - border-color: inherit; - border-style: solid; - border-width: 0; } - -label { - display: inline-block; } - -button { - border-radius: 0; } - -button:focus:not(:focus-visible) { - outline: 0; } - -input, -button, -select, -optgroup, -textarea { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; } - -button, -select { - text-transform: none; } - -[role="button"] { - cursor: pointer; } - -select { - word-wrap: normal; } - select:disabled { - opacity: 1; } - -[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator { - display: none !important; } - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; } - button:not(:disabled), - [type="button"]:not(:disabled), - [type="reset"]:not(:disabled), - [type="submit"]:not(:disabled) { - cursor: pointer; } - -::-moz-focus-inner { - padding: 0; - border-style: none; } - -textarea { - resize: vertical; } - -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; } - -legend { - float: left; - width: 100%; - padding: 0; - margin-bottom: 0.5rem; - font-size: calc(1.275rem + 0.3vw); - line-height: inherit; } - @media (min-width: 1200px) { - legend { - font-size: 1.5rem; } } - legend + * { - clear: left; } - -::-webkit-datetime-edit-fields-wrapper, -::-webkit-datetime-edit-text, -::-webkit-datetime-edit-minute, -::-webkit-datetime-edit-hour-field, -::-webkit-datetime-edit-day-field, -::-webkit-datetime-edit-month-field, -::-webkit-datetime-edit-year-field { - padding: 0; } - -::-webkit-inner-spin-button { - height: auto; } - -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; } - -/* rtl:raw: -[type="tel"], -[type="url"], -[type="email"], -[type="number"] { - direction: ltr; -} -*/ -::-webkit-search-decoration { - -webkit-appearance: none; } - -::-webkit-color-swatch-wrapper { - padding: 0; } - -::file-selector-button { - font: inherit; - -webkit-appearance: button; } - -output { - display: inline-block; } - -iframe { - border: 0; } - -summary { - display: list-item; - cursor: pointer; } - -progress { - vertical-align: baseline; } - -[hidden] { - display: none !important; } - -.lead { - font-size: 1.25rem; - font-weight: 400; } - -.display-1 { - font-size: calc(1.625rem + 4.5vw); - font-weight: 300; - line-height: 1.2; } - @media (min-width: 1200px) { - .display-1 { - font-size: 5rem; } } -.display-2 { - font-size: calc(1.575rem + 3.9vw); - font-weight: 300; - line-height: 1.2; } - @media (min-width: 1200px) { - .display-2 { - font-size: 4.5rem; } } -.display-3 { - font-size: calc(1.525rem + 3.3vw); - font-weight: 300; - line-height: 1.2; } - @media (min-width: 1200px) { - .display-3 { - font-size: 4rem; } } -.display-4 { - font-size: calc(1.475rem + 2.7vw); - font-weight: 300; - line-height: 1.2; } - @media (min-width: 1200px) { - .display-4 { - font-size: 3.5rem; } } -.display-5 { - font-size: calc(1.425rem + 2.1vw); - font-weight: 300; - line-height: 1.2; } - @media (min-width: 1200px) { - .display-5 { - font-size: 3rem; } } -.display-6 { - font-size: calc(1.375rem + 1.5vw); - font-weight: 300; - line-height: 1.2; } - @media (min-width: 1200px) { - .display-6 { - font-size: 2.5rem; } } -.list-unstyled, ul.list-star li, ul.list-package li, ul.list-speech-balloon li, ul.list-books li, ul.list-toolbox li, .comment-list { - padding-left: 0; - list-style: none; } - -.list-inline { - padding-left: 0; - list-style: none; } - -.list-inline-item { - display: inline-block; } - .list-inline-item:not(:last-child) { - margin-right: 0.5rem; } - -.initialism { - font-size: 0.875em; - text-transform: uppercase; } - -.blockquote { - margin-bottom: 1rem; - font-size: 1.25rem; } - .blockquote > :last-child { - margin-bottom: 0; } - -.blockquote-footer { - margin-top: -1rem; - margin-bottom: 1rem; - font-size: 0.875em; - color: #6c757d; } - .blockquote-footer::before { - content: "\2014\00A0"; } - -.img-fluid { - max-width: 100%; - height: auto; } - -.img-thumbnail { - padding: 0.25rem; - background-color: var(--bs-body-bg); - border: var(--bs-border-width) solid var(--bs-border-color); - border-radius: var(--bs-border-radius); - max-width: 100%; - height: auto; } - -.figure { - display: inline-block; } - -.figure-img { - margin-bottom: 0.5rem; - line-height: 1; } - -.figure-caption { - font-size: 0.875em; - color: var(--bs-secondary-color); } - -.container, -.container-fluid, -.container-xxl, -.container-xl, -.container-lg, -.container-md, -.container-sm { - --bs-gutter-x: 3rem; - --bs-gutter-y: 0; - width: 100%; - padding-right: calc(var(--bs-gutter-x) * .5); - padding-left: calc(var(--bs-gutter-x) * .5); - margin-right: auto; - margin-left: auto; } - -@media (min-width: 576px) { - .container-sm, .container { - max-width: 540px; } } - -@media (min-width: 768px) { - .container-md, .container-sm, .container { - max-width: 720px; } } - -@media (min-width: 992px) { - .container-lg, .container-md, .container-sm, .container { - max-width: 960px; } } - -@media (min-width: 1200px) { - .container-xl, .container-lg, .container-md, .container-sm, .container { - max-width: 1240px; } } - -@media (min-width: 1400px) { - .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { - max-width: 1320px; } } - -:root { - --bs-breakpoint-xs: 0; - --bs-breakpoint-sm: 576px; - --bs-breakpoint-md: 768px; - --bs-breakpoint-lg: 992px; - --bs-breakpoint-xl: 1200px; - --bs-breakpoint-xxl: 1400px; } - -.row { - --bs-gutter-x: 3rem; - --bs-gutter-y: 0; - display: flex; - flex-wrap: wrap; - margin-top: calc(-1 * var(--bs-gutter-y)); - margin-right: calc(-.5 * var(--bs-gutter-x)); - margin-left: calc(-.5 * var(--bs-gutter-x)); } - .row > * { - flex-shrink: 0; - width: 100%; - max-width: 100%; - padding-right: calc(var(--bs-gutter-x) * .5); - padding-left: calc(var(--bs-gutter-x) * .5); - margin-top: var(--bs-gutter-y); } - -.col { - flex: 1 0 0%; } - -.row-cols-auto > * { - flex: 0 0 auto; - width: auto; } - -.row-cols-1 > * { - flex: 0 0 auto; - width: 100%; } - -.row-cols-2 > * { - flex: 0 0 auto; - width: 50%; } - -.row-cols-3 > * { - flex: 0 0 auto; - width: 33.33333333%; } - -.row-cols-4 > * { - flex: 0 0 auto; - width: 25%; } - -.row-cols-5 > * { - flex: 0 0 auto; - width: 20%; } - -.row-cols-6 > * { - flex: 0 0 auto; - width: 16.66666667%; } - -.col-auto { - flex: 0 0 auto; - width: auto; } - -.col-1 { - flex: 0 0 auto; - width: 6.25%; } - -.col-2 { - flex: 0 0 auto; - width: 12.5%; } - -.col-3 { - flex: 0 0 auto; - width: 18.75%; } - -.col-4 { - flex: 0 0 auto; - width: 25%; } - -.col-5 { - flex: 0 0 auto; - width: 31.25%; } - -.col-6 { - flex: 0 0 auto; - width: 37.5%; } - -.col-7 { - flex: 0 0 auto; - width: 43.75%; } - -.col-8 { - flex: 0 0 auto; - width: 50%; } - -.col-9 { - flex: 0 0 auto; - width: 56.25%; } - -.col-10 { - flex: 0 0 auto; - width: 62.5%; } - -.col-11 { - flex: 0 0 auto; - width: 68.75%; } - -.col-12 { - flex: 0 0 auto; - width: 75%; } - -.col-13 { - flex: 0 0 auto; - width: 81.25%; } - -.col-14 { - flex: 0 0 auto; - width: 87.5%; } - -.col-15 { - flex: 0 0 auto; - width: 93.75%; } - -.col-16 { - flex: 0 0 auto; - width: 100%; } - -.offset-1 { - margin-left: 6.25%; } - -.offset-2 { - margin-left: 12.5%; } - -.offset-3 { - margin-left: 18.75%; } - -.offset-4 { - margin-left: 25%; } - -.offset-5 { - margin-left: 31.25%; } - -.offset-6 { - margin-left: 37.5%; } - -.offset-7 { - margin-left: 43.75%; } - -.offset-8 { - margin-left: 50%; } - -.offset-9 { - margin-left: 56.25%; } - -.offset-10 { - margin-left: 62.5%; } - -.offset-11 { - margin-left: 68.75%; } - -.offset-12 { - margin-left: 75%; } - -.offset-13 { - margin-left: 81.25%; } - -.offset-14 { - margin-left: 87.5%; } - -.offset-15 { - margin-left: 93.75%; } - -.g-0, -.gx-0 { - --bs-gutter-x: 0; } - -.g-0, -.gy-0 { - --bs-gutter-y: 0; } - -.g-1, -.gx-1 { - --bs-gutter-x: 0.25rem; } - -.g-1, -.gy-1 { - --bs-gutter-y: 0.25rem; } - -.g-2, -.gx-2 { - --bs-gutter-x: 0.5rem; } - -.g-2, -.gy-2 { - --bs-gutter-y: 0.5rem; } - -.g-3, -.gx-3 { - --bs-gutter-x: 1rem; } - -.g-3, -.gy-3 { - --bs-gutter-y: 1rem; } - -.g-4, -.gx-4 { - --bs-gutter-x: 1.5rem; } - -.g-4, -.gy-4 { - --bs-gutter-y: 1.5rem; } - -.g-5, -.gx-5 { - --bs-gutter-x: 3rem; } - -.g-5, -.gy-5 { - --bs-gutter-y: 3rem; } - -@media (min-width: 576px) { - .col-sm { - flex: 1 0 0%; } - .row-cols-sm-auto > * { - flex: 0 0 auto; - width: auto; } - .row-cols-sm-1 > * { - flex: 0 0 auto; - width: 100%; } - .row-cols-sm-2 > * { - flex: 0 0 auto; - width: 50%; } - .row-cols-sm-3 > * { - flex: 0 0 auto; - width: 33.33333333%; } - .row-cols-sm-4 > * { - flex: 0 0 auto; - width: 25%; } - .row-cols-sm-5 > * { - flex: 0 0 auto; - width: 20%; } - .row-cols-sm-6 > * { - flex: 0 0 auto; - width: 16.66666667%; } - .col-sm-auto { - flex: 0 0 auto; - width: auto; } - .col-sm-1 { - flex: 0 0 auto; - width: 6.25%; } - .col-sm-2 { - flex: 0 0 auto; - width: 12.5%; } - .col-sm-3 { - flex: 0 0 auto; - width: 18.75%; } - .col-sm-4 { - flex: 0 0 auto; - width: 25%; } - .col-sm-5 { - flex: 0 0 auto; - width: 31.25%; } - .col-sm-6 { - flex: 0 0 auto; - width: 37.5%; } - .col-sm-7 { - flex: 0 0 auto; - width: 43.75%; } - .col-sm-8 { - flex: 0 0 auto; - width: 50%; } - .col-sm-9 { - flex: 0 0 auto; - width: 56.25%; } - .col-sm-10 { - flex: 0 0 auto; - width: 62.5%; } - .col-sm-11 { - flex: 0 0 auto; - width: 68.75%; } - .col-sm-12 { - flex: 0 0 auto; - width: 75%; } - .col-sm-13 { - flex: 0 0 auto; - width: 81.25%; } - .col-sm-14 { - flex: 0 0 auto; - width: 87.5%; } - .col-sm-15 { - flex: 0 0 auto; - width: 93.75%; } - .col-sm-16 { - flex: 0 0 auto; - width: 100%; } - .offset-sm-0 { - margin-left: 0; } - .offset-sm-1 { - margin-left: 6.25%; } - .offset-sm-2 { - margin-left: 12.5%; } - .offset-sm-3 { - margin-left: 18.75%; } - .offset-sm-4 { - margin-left: 25%; } - .offset-sm-5 { - margin-left: 31.25%; } - .offset-sm-6 { - margin-left: 37.5%; } - .offset-sm-7 { - margin-left: 43.75%; } - .offset-sm-8 { - margin-left: 50%; } - .offset-sm-9 { - margin-left: 56.25%; } - .offset-sm-10 { - margin-left: 62.5%; } - .offset-sm-11 { - margin-left: 68.75%; } - .offset-sm-12 { - margin-left: 75%; } - .offset-sm-13 { - margin-left: 81.25%; } - .offset-sm-14 { - margin-left: 87.5%; } - .offset-sm-15 { - margin-left: 93.75%; } - .g-sm-0, - .gx-sm-0 { - --bs-gutter-x: 0; } - .g-sm-0, - .gy-sm-0 { - --bs-gutter-y: 0; } - .g-sm-1, - .gx-sm-1 { - --bs-gutter-x: 0.25rem; } - .g-sm-1, - .gy-sm-1 { - --bs-gutter-y: 0.25rem; } - .g-sm-2, - .gx-sm-2 { - --bs-gutter-x: 0.5rem; } - .g-sm-2, - .gy-sm-2 { - --bs-gutter-y: 0.5rem; } - .g-sm-3, - .gx-sm-3 { - --bs-gutter-x: 1rem; } - .g-sm-3, - .gy-sm-3 { - --bs-gutter-y: 1rem; } - .g-sm-4, - .gx-sm-4 { - --bs-gutter-x: 1.5rem; } - .g-sm-4, - .gy-sm-4 { - --bs-gutter-y: 1.5rem; } - .g-sm-5, - .gx-sm-5 { - --bs-gutter-x: 3rem; } - .g-sm-5, - .gy-sm-5 { - --bs-gutter-y: 3rem; } } - -@media (min-width: 768px) { - .col-md { - flex: 1 0 0%; } - .row-cols-md-auto > * { - flex: 0 0 auto; - width: auto; } - .row-cols-md-1 > * { - flex: 0 0 auto; - width: 100%; } - .row-cols-md-2 > * { - flex: 0 0 auto; - width: 50%; } - .row-cols-md-3 > * { - flex: 0 0 auto; - width: 33.33333333%; } - .row-cols-md-4 > * { - flex: 0 0 auto; - width: 25%; } - .row-cols-md-5 > * { - flex: 0 0 auto; - width: 20%; } - .row-cols-md-6 > * { - flex: 0 0 auto; - width: 16.66666667%; } - .col-md-auto { - flex: 0 0 auto; - width: auto; } - .col-md-1 { - flex: 0 0 auto; - width: 6.25%; } - .col-md-2 { - flex: 0 0 auto; - width: 12.5%; } - .col-md-3 { - flex: 0 0 auto; - width: 18.75%; } - .col-md-4 { - flex: 0 0 auto; - width: 25%; } - .col-md-5 { - flex: 0 0 auto; - width: 31.25%; } - .col-md-6 { - flex: 0 0 auto; - width: 37.5%; } - .col-md-7 { - flex: 0 0 auto; - width: 43.75%; } - .col-md-8 { - flex: 0 0 auto; - width: 50%; } - .col-md-9 { - flex: 0 0 auto; - width: 56.25%; } - .col-md-10 { - flex: 0 0 auto; - width: 62.5%; } - .col-md-11 { - flex: 0 0 auto; - width: 68.75%; } - .col-md-12 { - flex: 0 0 auto; - width: 75%; } - .col-md-13 { - flex: 0 0 auto; - width: 81.25%; } - .col-md-14 { - flex: 0 0 auto; - width: 87.5%; } - .col-md-15 { - flex: 0 0 auto; - width: 93.75%; } - .col-md-16 { - flex: 0 0 auto; - width: 100%; } - .offset-md-0 { - margin-left: 0; } - .offset-md-1 { - margin-left: 6.25%; } - .offset-md-2 { - margin-left: 12.5%; } - .offset-md-3 { - margin-left: 18.75%; } - .offset-md-4 { - margin-left: 25%; } - .offset-md-5 { - margin-left: 31.25%; } - .offset-md-6 { - margin-left: 37.5%; } - .offset-md-7 { - margin-left: 43.75%; } - .offset-md-8 { - margin-left: 50%; } - .offset-md-9 { - margin-left: 56.25%; } - .offset-md-10 { - margin-left: 62.5%; } - .offset-md-11 { - margin-left: 68.75%; } - .offset-md-12 { - margin-left: 75%; } - .offset-md-13 { - margin-left: 81.25%; } - .offset-md-14 { - margin-left: 87.5%; } - .offset-md-15 { - margin-left: 93.75%; } - .g-md-0, - .gx-md-0 { - --bs-gutter-x: 0; } - .g-md-0, - .gy-md-0 { - --bs-gutter-y: 0; } - .g-md-1, - .gx-md-1 { - --bs-gutter-x: 0.25rem; } - .g-md-1, - .gy-md-1 { - --bs-gutter-y: 0.25rem; } - .g-md-2, - .gx-md-2 { - --bs-gutter-x: 0.5rem; } - .g-md-2, - .gy-md-2 { - --bs-gutter-y: 0.5rem; } - .g-md-3, - .gx-md-3 { - --bs-gutter-x: 1rem; } - .g-md-3, - .gy-md-3 { - --bs-gutter-y: 1rem; } - .g-md-4, - .gx-md-4 { - --bs-gutter-x: 1.5rem; } - .g-md-4, - .gy-md-4 { - --bs-gutter-y: 1.5rem; } - .g-md-5, - .gx-md-5 { - --bs-gutter-x: 3rem; } - .g-md-5, - .gy-md-5 { - --bs-gutter-y: 3rem; } } - -@media (min-width: 992px) { - .col-lg { - flex: 1 0 0%; } - .row-cols-lg-auto > * { - flex: 0 0 auto; - width: auto; } - .row-cols-lg-1 > * { - flex: 0 0 auto; - width: 100%; } - .row-cols-lg-2 > * { - flex: 0 0 auto; - width: 50%; } - .row-cols-lg-3 > * { - flex: 0 0 auto; - width: 33.33333333%; } - .row-cols-lg-4 > * { - flex: 0 0 auto; - width: 25%; } - .row-cols-lg-5 > * { - flex: 0 0 auto; - width: 20%; } - .row-cols-lg-6 > * { - flex: 0 0 auto; - width: 16.66666667%; } - .col-lg-auto { - flex: 0 0 auto; - width: auto; } - .col-lg-1 { - flex: 0 0 auto; - width: 6.25%; } - .col-lg-2 { - flex: 0 0 auto; - width: 12.5%; } - .col-lg-3 { - flex: 0 0 auto; - width: 18.75%; } - .col-lg-4 { - flex: 0 0 auto; - width: 25%; } - .col-lg-5 { - flex: 0 0 auto; - width: 31.25%; } - .col-lg-6 { - flex: 0 0 auto; - width: 37.5%; } - .col-lg-7 { - flex: 0 0 auto; - width: 43.75%; } - .col-lg-8 { - flex: 0 0 auto; - width: 50%; } - .col-lg-9 { - flex: 0 0 auto; - width: 56.25%; } - .col-lg-10 { - flex: 0 0 auto; - width: 62.5%; } - .col-lg-11 { - flex: 0 0 auto; - width: 68.75%; } - .col-lg-12 { - flex: 0 0 auto; - width: 75%; } - .col-lg-13 { - flex: 0 0 auto; - width: 81.25%; } - .col-lg-14 { - flex: 0 0 auto; - width: 87.5%; } - .col-lg-15 { - flex: 0 0 auto; - width: 93.75%; } - .col-lg-16 { - flex: 0 0 auto; - width: 100%; } - .offset-lg-0 { - margin-left: 0; } - .offset-lg-1 { - margin-left: 6.25%; } - .offset-lg-2 { - margin-left: 12.5%; } - .offset-lg-3 { - margin-left: 18.75%; } - .offset-lg-4 { - margin-left: 25%; } - .offset-lg-5 { - margin-left: 31.25%; } - .offset-lg-6 { - margin-left: 37.5%; } - .offset-lg-7 { - margin-left: 43.75%; } - .offset-lg-8 { - margin-left: 50%; } - .offset-lg-9 { - margin-left: 56.25%; } - .offset-lg-10 { - margin-left: 62.5%; } - .offset-lg-11 { - margin-left: 68.75%; } - .offset-lg-12 { - margin-left: 75%; } - .offset-lg-13 { - margin-left: 81.25%; } - .offset-lg-14 { - margin-left: 87.5%; } - .offset-lg-15 { - margin-left: 93.75%; } - .g-lg-0, - .gx-lg-0 { - --bs-gutter-x: 0; } - .g-lg-0, - .gy-lg-0 { - --bs-gutter-y: 0; } - .g-lg-1, - .gx-lg-1 { - --bs-gutter-x: 0.25rem; } - .g-lg-1, - .gy-lg-1 { - --bs-gutter-y: 0.25rem; } - .g-lg-2, - .gx-lg-2 { - --bs-gutter-x: 0.5rem; } - .g-lg-2, - .gy-lg-2 { - --bs-gutter-y: 0.5rem; } - .g-lg-3, - .gx-lg-3 { - --bs-gutter-x: 1rem; } - .g-lg-3, - .gy-lg-3 { - --bs-gutter-y: 1rem; } - .g-lg-4, - .gx-lg-4 { - --bs-gutter-x: 1.5rem; } - .g-lg-4, - .gy-lg-4 { - --bs-gutter-y: 1.5rem; } - .g-lg-5, - .gx-lg-5 { - --bs-gutter-x: 3rem; } - .g-lg-5, - .gy-lg-5 { - --bs-gutter-y: 3rem; } } - -@media (min-width: 1200px) { - .col-xl { - flex: 1 0 0%; } - .row-cols-xl-auto > * { - flex: 0 0 auto; - width: auto; } - .row-cols-xl-1 > * { - flex: 0 0 auto; - width: 100%; } - .row-cols-xl-2 > * { - flex: 0 0 auto; - width: 50%; } - .row-cols-xl-3 > * { - flex: 0 0 auto; - width: 33.33333333%; } - .row-cols-xl-4 > * { - flex: 0 0 auto; - width: 25%; } - .row-cols-xl-5 > * { - flex: 0 0 auto; - width: 20%; } - .row-cols-xl-6 > * { - flex: 0 0 auto; - width: 16.66666667%; } - .col-xl-auto { - flex: 0 0 auto; - width: auto; } - .col-xl-1 { - flex: 0 0 auto; - width: 6.25%; } - .col-xl-2 { - flex: 0 0 auto; - width: 12.5%; } - .col-xl-3 { - flex: 0 0 auto; - width: 18.75%; } - .col-xl-4 { - flex: 0 0 auto; - width: 25%; } - .col-xl-5 { - flex: 0 0 auto; - width: 31.25%; } - .col-xl-6 { - flex: 0 0 auto; - width: 37.5%; } - .col-xl-7 { - flex: 0 0 auto; - width: 43.75%; } - .col-xl-8 { - flex: 0 0 auto; - width: 50%; } - .col-xl-9 { - flex: 0 0 auto; - width: 56.25%; } - .col-xl-10 { - flex: 0 0 auto; - width: 62.5%; } - .col-xl-11 { - flex: 0 0 auto; - width: 68.75%; } - .col-xl-12 { - flex: 0 0 auto; - width: 75%; } - .col-xl-13 { - flex: 0 0 auto; - width: 81.25%; } - .col-xl-14 { - flex: 0 0 auto; - width: 87.5%; } - .col-xl-15 { - flex: 0 0 auto; - width: 93.75%; } - .col-xl-16 { - flex: 0 0 auto; - width: 100%; } - .offset-xl-0 { - margin-left: 0; } - .offset-xl-1 { - margin-left: 6.25%; } - .offset-xl-2 { - margin-left: 12.5%; } - .offset-xl-3 { - margin-left: 18.75%; } - .offset-xl-4 { - margin-left: 25%; } - .offset-xl-5 { - margin-left: 31.25%; } - .offset-xl-6 { - margin-left: 37.5%; } - .offset-xl-7 { - margin-left: 43.75%; } - .offset-xl-8 { - margin-left: 50%; } - .offset-xl-9 { - margin-left: 56.25%; } - .offset-xl-10 { - margin-left: 62.5%; } - .offset-xl-11 { - margin-left: 68.75%; } - .offset-xl-12 { - margin-left: 75%; } - .offset-xl-13 { - margin-left: 81.25%; } - .offset-xl-14 { - margin-left: 87.5%; } - .offset-xl-15 { - margin-left: 93.75%; } - .g-xl-0, - .gx-xl-0 { - --bs-gutter-x: 0; } - .g-xl-0, - .gy-xl-0 { - --bs-gutter-y: 0; } - .g-xl-1, - .gx-xl-1 { - --bs-gutter-x: 0.25rem; } - .g-xl-1, - .gy-xl-1 { - --bs-gutter-y: 0.25rem; } - .g-xl-2, - .gx-xl-2 { - --bs-gutter-x: 0.5rem; } - .g-xl-2, - .gy-xl-2 { - --bs-gutter-y: 0.5rem; } - .g-xl-3, - .gx-xl-3 { - --bs-gutter-x: 1rem; } - .g-xl-3, - .gy-xl-3 { - --bs-gutter-y: 1rem; } - .g-xl-4, - .gx-xl-4 { - --bs-gutter-x: 1.5rem; } - .g-xl-4, - .gy-xl-4 { - --bs-gutter-y: 1.5rem; } - .g-xl-5, - .gx-xl-5 { - --bs-gutter-x: 3rem; } - .g-xl-5, - .gy-xl-5 { - --bs-gutter-y: 3rem; } } - -@media (min-width: 1400px) { - .col-xxl { - flex: 1 0 0%; } - .row-cols-xxl-auto > * { - flex: 0 0 auto; - width: auto; } - .row-cols-xxl-1 > * { - flex: 0 0 auto; - width: 100%; } - .row-cols-xxl-2 > * { - flex: 0 0 auto; - width: 50%; } - .row-cols-xxl-3 > * { - flex: 0 0 auto; - width: 33.33333333%; } - .row-cols-xxl-4 > * { - flex: 0 0 auto; - width: 25%; } - .row-cols-xxl-5 > * { - flex: 0 0 auto; - width: 20%; } - .row-cols-xxl-6 > * { - flex: 0 0 auto; - width: 16.66666667%; } - .col-xxl-auto { - flex: 0 0 auto; - width: auto; } - .col-xxl-1 { - flex: 0 0 auto; - width: 6.25%; } - .col-xxl-2 { - flex: 0 0 auto; - width: 12.5%; } - .col-xxl-3 { - flex: 0 0 auto; - width: 18.75%; } - .col-xxl-4 { - flex: 0 0 auto; - width: 25%; } - .col-xxl-5 { - flex: 0 0 auto; - width: 31.25%; } - .col-xxl-6 { - flex: 0 0 auto; - width: 37.5%; } - .col-xxl-7 { - flex: 0 0 auto; - width: 43.75%; } - .col-xxl-8 { - flex: 0 0 auto; - width: 50%; } - .col-xxl-9 { - flex: 0 0 auto; - width: 56.25%; } - .col-xxl-10 { - flex: 0 0 auto; - width: 62.5%; } - .col-xxl-11 { - flex: 0 0 auto; - width: 68.75%; } - .col-xxl-12 { - flex: 0 0 auto; - width: 75%; } - .col-xxl-13 { - flex: 0 0 auto; - width: 81.25%; } - .col-xxl-14 { - flex: 0 0 auto; - width: 87.5%; } - .col-xxl-15 { - flex: 0 0 auto; - width: 93.75%; } - .col-xxl-16 { - flex: 0 0 auto; - width: 100%; } - .offset-xxl-0 { - margin-left: 0; } - .offset-xxl-1 { - margin-left: 6.25%; } - .offset-xxl-2 { - margin-left: 12.5%; } - .offset-xxl-3 { - margin-left: 18.75%; } - .offset-xxl-4 { - margin-left: 25%; } - .offset-xxl-5 { - margin-left: 31.25%; } - .offset-xxl-6 { - margin-left: 37.5%; } - .offset-xxl-7 { - margin-left: 43.75%; } - .offset-xxl-8 { - margin-left: 50%; } - .offset-xxl-9 { - margin-left: 56.25%; } - .offset-xxl-10 { - margin-left: 62.5%; } - .offset-xxl-11 { - margin-left: 68.75%; } - .offset-xxl-12 { - margin-left: 75%; } - .offset-xxl-13 { - margin-left: 81.25%; } - .offset-xxl-14 { - margin-left: 87.5%; } - .offset-xxl-15 { - margin-left: 93.75%; } - .g-xxl-0, - .gx-xxl-0 { - --bs-gutter-x: 0; } - .g-xxl-0, - .gy-xxl-0 { - --bs-gutter-y: 0; } - .g-xxl-1, - .gx-xxl-1 { - --bs-gutter-x: 0.25rem; } - .g-xxl-1, - .gy-xxl-1 { - --bs-gutter-y: 0.25rem; } - .g-xxl-2, - .gx-xxl-2 { - --bs-gutter-x: 0.5rem; } - .g-xxl-2, - .gy-xxl-2 { - --bs-gutter-y: 0.5rem; } - .g-xxl-3, - .gx-xxl-3 { - --bs-gutter-x: 1rem; } - .g-xxl-3, - .gy-xxl-3 { - --bs-gutter-y: 1rem; } - .g-xxl-4, - .gx-xxl-4 { - --bs-gutter-x: 1.5rem; } - .g-xxl-4, - .gy-xxl-4 { - --bs-gutter-y: 1.5rem; } - .g-xxl-5, - .gx-xxl-5 { - --bs-gutter-x: 3rem; } - .g-xxl-5, - .gy-xxl-5 { - --bs-gutter-y: 3rem; } } - -.clearfix::after { - display: block; - clear: both; - content: ""; } - -.text-bg-primary { - color: #fff !important; - background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } - -.text-bg-secondary { - color: #fff !important; - background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; } - -.text-bg-success { - color: #000 !important; - background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; } - -.text-bg-info { - color: #fff !important; - background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; } - -.text-bg-warning { - color: #000 !important; - background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; } - -.text-bg-danger { - color: #000 !important; - background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; } - -.text-bg-light { - color: #000 !important; - background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; } - -.text-bg-dark { - color: #fff !important; - background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; } - -.link-primary { - color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; } - .link-primary:hover, .link-primary:focus { - color: RGBA(74, 38, 107, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(74, 38, 107, var(--bs-link-underline-opacity, 1)) !important; } - -.link-secondary { - color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; } - .link-secondary:hover, .link-secondary:focus { - color: RGBA(86, 94, 100, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important; } - -.link-success { - color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important; } - .link-success:hover, .link-success:focus { - color: RGBA(157, 241, 118, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(157, 241, 118, var(--bs-link-underline-opacity, 1)) !important; } - -.link-info { - color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important; } - .link-info:hover, .link-info:focus { - color: RGBA(41, 57, 204, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(41, 57, 204, var(--bs-link-underline-opacity, 1)) !important; } - -.link-warning { - color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important; } - .link-warning:hover, .link-warning:focus { - color: RGBA(241, 202, 118, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(241, 202, 118, var(--bs-link-underline-opacity, 1)) !important; } - -.link-danger { - color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important; } - .link-danger:hover, .link-danger:focus { - color: RGBA(241, 118, 161, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(241, 118, 161, var(--bs-link-underline-opacity, 1)) !important; } - -.link-light { - color: RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important; } - .link-light:hover, .link-light:focus { - color: RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important; } - -.link-dark { - color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important; } - .link-dark:hover, .link-dark:focus { - color: RGBA(26, 30, 33, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important; } - -.link-body-emphasis { - color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important; } - .link-body-emphasis:hover, .link-body-emphasis:focus { - color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important; - text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important; } - -.focus-ring:focus { - outline: 0; - box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color); } - -.icon-link { - display: inline-flex; - gap: 0.375rem; - align-items: center; - text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5)); - text-underline-offset: 0.25em; - backface-visibility: hidden; } - .icon-link > .bi { - flex-shrink: 0; - width: 1em; - height: 1em; - fill: currentcolor; - transition: 0.2s ease-in-out transform; } - @media (prefers-reduced-motion: reduce) { - .icon-link > .bi { - transition: none; } } -.icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi { - transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0)); } - -.ratio { - position: relative; - width: 100%; } - .ratio::before { - display: block; - padding-top: var(--bs-aspect-ratio); - content: ""; } - .ratio > * { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; } - -.ratio-1x1 { - --bs-aspect-ratio: 100%; } - -.ratio-4x3 { - --bs-aspect-ratio: calc(3 / 4 * 100%); } - -.ratio-16x9 { - --bs-aspect-ratio: calc(9 / 16 * 100%); } - -.ratio-21x9 { - --bs-aspect-ratio: calc(9 / 21 * 100%); } - -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; } - -.fixed-bottom { - position: fixed; - right: 0; - bottom: 0; - left: 0; - z-index: 1030; } - -.sticky-top { - position: sticky; - top: 0; - z-index: 1020; } - -.sticky-bottom { - position: sticky; - bottom: 0; - z-index: 1020; } - -@media (min-width: 576px) { - .sticky-sm-top { - position: sticky; - top: 0; - z-index: 1020; } - .sticky-sm-bottom { - position: sticky; - bottom: 0; - z-index: 1020; } } - -@media (min-width: 768px) { - .sticky-md-top { - position: sticky; - top: 0; - z-index: 1020; } - .sticky-md-bottom { - position: sticky; - bottom: 0; - z-index: 1020; } } - -@media (min-width: 992px) { - .sticky-lg-top { - position: sticky; - top: 0; - z-index: 1020; } - .sticky-lg-bottom { - position: sticky; - bottom: 0; - z-index: 1020; } } - -@media (min-width: 1200px) { - .sticky-xl-top { - position: sticky; - top: 0; - z-index: 1020; } - .sticky-xl-bottom { - position: sticky; - bottom: 0; - z-index: 1020; } } - -@media (min-width: 1400px) { - .sticky-xxl-top { - position: sticky; - top: 0; - z-index: 1020; } - .sticky-xxl-bottom { - position: sticky; - bottom: 0; - z-index: 1020; } } - -.hstack { - display: flex; - flex-direction: row; - align-items: center; - align-self: stretch; } - -.vstack { - display: flex; - flex: 1 1 auto; - flex-direction: column; - align-self: stretch; } - -.visually-hidden, -.visually-hidden-focusable:not(:focus):not(:focus-within) { - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; } - .visually-hidden:not(caption), - .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) { - position: absolute !important; } - -.stretched-link::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - content: ""; } - -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - -.vr { - display: inline-block; - align-self: stretch; - width: var(--bs-border-width); - min-height: 1em; - background-color: currentcolor; - opacity: 0.25; } - -.table, table { - --bs-table-color-type: initial; - --bs-table-bg-type: initial; - --bs-table-color-state: initial; - --bs-table-bg-state: initial; - --bs-table-color: var(--bs-emphasis-color); - --bs-table-bg: var(--bs-body-bg); - --bs-table-border-color: var(--bs-border-color); - --bs-table-accent-bg: transparent; - --bs-table-striped-color: var(--bs-emphasis-color); - --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05); - --bs-table-active-color: var(--bs-emphasis-color); - --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1); - --bs-table-hover-color: var(--bs-emphasis-color); - --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075); - width: 100%; - margin-bottom: 1rem; - vertical-align: top; - border-color: var(--bs-table-border-color); } - .table > :not(caption) > * > *, table > :not(caption) > * > * { - padding: 0.5rem 0.5rem; - color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color))); - background-color: var(--bs-table-bg); - border-bottom-width: var(--bs-border-width); - box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))); } - .table > tbody, table > tbody { - vertical-align: inherit; } - .table > thead, table > thead { - vertical-align: bottom; } - -.table-group-divider { - border-top: calc(var(--bs-border-width) * 2) solid currentcolor; } - -.caption-top { - caption-side: top; } - -.table-sm > :not(caption) > * > * { - padding: 0.25rem 0.25rem; } - -.table-bordered > :not(caption) > * { - border-width: var(--bs-border-width) 0; } - .table-bordered > :not(caption) > * > * { - border-width: 0 var(--bs-border-width); } - -.table-borderless > :not(caption) > * > * { - border-bottom-width: 0; } - -.table-borderless > :not(:first-child) { - border-top-width: 0; } - -.table-striped > tbody > tr:nth-of-type(odd) > * { - --bs-table-color-type: var(--bs-table-striped-color); - --bs-table-bg-type: var(--bs-table-striped-bg); } - -.table-striped-columns > :not(caption) > tr > :nth-child(even) { - --bs-table-color-type: var(--bs-table-striped-color); - --bs-table-bg-type: var(--bs-table-striped-bg); } - -.table-active { - --bs-table-color-state: var(--bs-table-active-color); - --bs-table-bg-state: var(--bs-table-active-bg); } - -.table-hover > tbody > tr:hover > * { - --bs-table-color-state: var(--bs-table-hover-color); - --bs-table-bg-state: var(--bs-table-hover-bg); } - -.table-primary { - --bs-table-color: #000; - --bs-table-bg: #dfd5e7; - --bs-table-border-color: #b2aab9; - --bs-table-striped-bg: #d4cadb; - --bs-table-striped-color: #000; - --bs-table-active-bg: #c9c0d0; - --bs-table-active-color: #000; - --bs-table-hover-bg: #cec5d6; - --bs-table-hover-color: #000; - color: var(--bs-table-color); - border-color: var(--bs-table-border-color); } - -.table-secondary { - --bs-table-color: #000; - --bs-table-bg: #e2e3e5; - --bs-table-border-color: #b5b6b7; - --bs-table-striped-bg: #d7d8da; - --bs-table-striped-color: #000; - --bs-table-active-bg: #cbccce; - --bs-table-active-color: #000; - --bs-table-hover-bg: #d1d2d4; - --bs-table-hover-color: #000; - color: var(--bs-table-color); - border-color: var(--bs-table-border-color); } - -.table-success { - --bs-table-color: #000; - --bs-table-bg: #e6fcdd; - --bs-table-border-color: #b8cab1; - --bs-table-striped-bg: #dbefd2; - --bs-table-striped-color: #000; - --bs-table-active-bg: #cfe3c7; - --bs-table-active-color: #000; - --bs-table-hover-bg: #d5e9cc; - --bs-table-hover-color: #000; - color: var(--bs-table-color); - border-color: var(--bs-table-border-color); } - -.table-info { - --bs-table-color: #000; - --bs-table-bg: #d6daff; - --bs-table-border-color: #abaecc; - --bs-table-striped-bg: #cbcff2; - --bs-table-striped-color: #000; - --bs-table-active-bg: #c1c4e6; - --bs-table-active-color: #000; - --bs-table-hover-bg: #c6caec; - --bs-table-hover-color: #000; - color: var(--bs-table-color); - border-color: var(--bs-table-border-color); } - -.table-warning { - --bs-table-color: #000; - --bs-table-bg: #fcf2dd; - --bs-table-border-color: #cac2b1; - --bs-table-striped-bg: #efe6d2; - --bs-table-striped-color: #000; - --bs-table-active-bg: #e3dac7; - --bs-table-active-color: #000; - --bs-table-hover-bg: #e9e0cc; - --bs-table-hover-color: #000; - color: var(--bs-table-color); - border-color: var(--bs-table-border-color); } - -.table-danger { - --bs-table-color: #000; - --bs-table-bg: #fcdde7; - --bs-table-border-color: #cab1b9; - --bs-table-striped-bg: #efd2db; - --bs-table-striped-color: #000; - --bs-table-active-bg: #e3c7d0; - --bs-table-active-color: #000; - --bs-table-hover-bg: #e9ccd6; - --bs-table-hover-color: #000; - color: var(--bs-table-color); - border-color: var(--bs-table-border-color); } - -.table-light { - --bs-table-color: #000; - --bs-table-bg: #f8f9fa; - --bs-table-border-color: #c6c7c8; - --bs-table-striped-bg: #ecedee; - --bs-table-striped-color: #000; - --bs-table-active-bg: #dfe0e1; - --bs-table-active-color: #000; - --bs-table-hover-bg: #e5e6e7; - --bs-table-hover-color: #000; - color: var(--bs-table-color); - border-color: var(--bs-table-border-color); } - -.table-dark, [data-bs-theme="dark"] table { - --bs-table-color: #fff; - --bs-table-bg: #212529; - --bs-table-border-color: #4d5154; - --bs-table-striped-bg: #2c3034; - --bs-table-striped-color: #fff; - --bs-table-active-bg: #373b3e; - --bs-table-active-color: #fff; - --bs-table-hover-bg: #323539; - --bs-table-hover-color: #fff; - color: var(--bs-table-color); - border-color: var(--bs-table-border-color); } - -.table-responsive { - overflow-x: auto; - -webkit-overflow-scrolling: touch; } - -@media (max-width: 575.98px) { - .table-responsive-sm { - overflow-x: auto; - -webkit-overflow-scrolling: touch; } } - -@media (max-width: 767.98px) { - .table-responsive-md { - overflow-x: auto; - -webkit-overflow-scrolling: touch; } } - -@media (max-width: 991.98px) { - .table-responsive-lg { - overflow-x: auto; - -webkit-overflow-scrolling: touch; } } - -@media (max-width: 1199.98px) { - .table-responsive-xl { - overflow-x: auto; - -webkit-overflow-scrolling: touch; } } - -@media (max-width: 1399.98px) { - .table-responsive-xxl { - overflow-x: auto; - -webkit-overflow-scrolling: touch; } } - -.form-label { - margin-bottom: 0.5rem; } - -.col-form-label { - padding-top: calc(0.375rem + var(--bs-border-width)); - padding-bottom: calc(0.375rem + var(--bs-border-width)); - margin-bottom: 0; - font-size: inherit; - line-height: 1.5; } - -.col-form-label-lg { - padding-top: calc(0.5rem + var(--bs-border-width)); - padding-bottom: calc(0.5rem + var(--bs-border-width)); - font-size: 1.25rem; } - -.col-form-label-sm { - padding-top: calc(0.25rem + var(--bs-border-width)); - padding-bottom: calc(0.25rem + var(--bs-border-width)); - font-size: 0.875rem; } - -.form-text { - margin-top: 0.25rem; - font-size: 0.875em; - color: var(--bs-secondary-color); } - -.form-control, .search-form .search-field, .comment-form input[type="text"], -.comment-form input[type="email"], -.comment-form input[type="url"], -.comment-form textarea { - display: block; - width: 100%; - padding: 0.375rem 0.75rem; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: var(--bs-body-color); - appearance: none; - background-color: var(--bs-body-bg); - background-clip: padding-box; - border: var(--bs-border-width) solid var(--bs-border-color); - border-radius: var(--bs-border-radius); - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .form-control, .search-form .search-field, .comment-form input[type="text"], - .comment-form input[type="email"], - .comment-form input[type="url"], - .comment-form textarea { - transition: none; } } - .form-control[type="file"], .search-form [type="file"].search-field, .comment-form input[type="file"][type="text"], - .comment-form input[type="file"][type="email"], - .comment-form input[type="file"][type="url"], - .comment-form textarea[type="file"] { - overflow: hidden; } - .form-control[type="file"]:not(:disabled):not([readonly]), .search-form [type="file"].search-field:not(:disabled):not([readonly]), .comment-form input[type="file"][type="text"]:not(:disabled):not([readonly]), - .comment-form input[type="file"][type="email"]:not(:disabled):not([readonly]), - .comment-form input[type="file"][type="url"]:not(:disabled):not([readonly]), - .comment-form textarea[type="file"]:not(:disabled):not([readonly]) { - cursor: pointer; } - .form-control:focus, .search-form .search-field:focus, .comment-form input[type="text"]:focus, - .comment-form input[type="email"]:focus, - .comment-form input[type="url"]:focus, - .comment-form textarea:focus { - color: var(--bs-body-color); - background-color: var(--bs-body-bg); - border-color: #ae97c3; - outline: 0; - box-shadow: none; } - .form-control::-webkit-date-and-time-value, .search-form .search-field::-webkit-date-and-time-value, .comment-form input[type="text"]::-webkit-date-and-time-value, - .comment-form input[type="email"]::-webkit-date-and-time-value, - .comment-form input[type="url"]::-webkit-date-and-time-value, - .comment-form textarea::-webkit-date-and-time-value { - min-width: 85px; - height: 1.5em; - margin: 0; } - .form-control::-webkit-datetime-edit, .search-form .search-field::-webkit-datetime-edit, .comment-form input[type="text"]::-webkit-datetime-edit, - .comment-form input[type="email"]::-webkit-datetime-edit, - .comment-form input[type="url"]::-webkit-datetime-edit, - .comment-form textarea::-webkit-datetime-edit { - display: block; - padding: 0; } - .form-control::placeholder, .search-form .search-field::placeholder, .comment-form input[type="text"]::placeholder, - .comment-form input[type="email"]::placeholder, - .comment-form input[type="url"]::placeholder, - .comment-form textarea::placeholder { - color: var(--bs-secondary-color); - opacity: 1; } - .form-control:disabled, .search-form .search-field:disabled, .comment-form input[type="text"]:disabled, - .comment-form input[type="email"]:disabled, - .comment-form input[type="url"]:disabled, - .comment-form textarea:disabled { - background-color: var(--bs-secondary-bg); - opacity: 1; } - .form-control::file-selector-button, .search-form .search-field::file-selector-button, .comment-form input[type="text"]::file-selector-button, - .comment-form input[type="email"]::file-selector-button, - .comment-form input[type="url"]::file-selector-button, - .comment-form textarea::file-selector-button { - padding: 0.375rem 0.75rem; - margin: -0.375rem -0.75rem; - margin-inline-end: 0.75rem; - color: var(--bs-body-color); - background-color: var(--bs-tertiary-bg); - pointer-events: none; - border-color: inherit; - border-style: solid; - border-width: 0; - border-inline-end-width: var(--bs-border-width); - border-radius: 0; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .form-control::file-selector-button, .search-form .search-field::file-selector-button, .comment-form input[type="text"]::file-selector-button, - .comment-form input[type="email"]::file-selector-button, - .comment-form input[type="url"]::file-selector-button, - .comment-form textarea::file-selector-button { - transition: none; } } - .form-control:hover:not(:disabled):not([readonly])::file-selector-button, .search-form .search-field:hover:not(:disabled):not([readonly])::file-selector-button, .comment-form input[type="text"]:hover:not(:disabled):not([readonly])::file-selector-button, - .comment-form input[type="email"]:hover:not(:disabled):not([readonly])::file-selector-button, - .comment-form input[type="url"]:hover:not(:disabled):not([readonly])::file-selector-button, - .comment-form textarea:hover:not(:disabled):not([readonly])::file-selector-button { - background-color: var(--bs-secondary-bg); } - -.form-control-plaintext { - display: block; - width: 100%; - padding: 0.375rem 0; - margin-bottom: 0; - line-height: 1.5; - color: var(--bs-body-color); - background-color: transparent; - border: solid transparent; - border-width: var(--bs-border-width) 0; } - .form-control-plaintext:focus { - outline: 0; } - .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { - padding-right: 0; - padding-left: 0; } - -.form-control-sm { - min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); - padding: 0.25rem 0.5rem; - font-size: 0.875rem; - border-radius: var(--bs-border-radius-sm); } - .form-control-sm::file-selector-button { - padding: 0.25rem 0.5rem; - margin: -0.25rem -0.5rem; - margin-inline-end: 0.5rem; } - -.form-control-lg { - min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); - padding: 0.5rem 1rem; - font-size: 1.25rem; - border-radius: var(--bs-border-radius-lg); } - .form-control-lg::file-selector-button { - padding: 0.5rem 1rem; - margin: -0.5rem -1rem; - margin-inline-end: 1rem; } - -textarea.form-control, .search-form textarea.search-field { - min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2)); } - -textarea.form-control-sm { - min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); } - -textarea.form-control-lg { - min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); } - -.form-control-color { - width: 3rem; - height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2)); - padding: 0.375rem; } - .form-control-color:not(:disabled):not([readonly]) { - cursor: pointer; } - .form-control-color::-moz-color-swatch { - border: 0 !important; - border-radius: var(--bs-border-radius); } - .form-control-color::-webkit-color-swatch { - border: 0 !important; - border-radius: var(--bs-border-radius); } - .form-control-color.form-control-sm { - height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); } - .form-control-color.form-control-lg { - height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2)); } - -.form-select { - --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); - display: block; - width: 100%; - padding: 0.375rem 2.25rem 0.375rem 0.75rem; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: var(--bs-body-color); - appearance: none; - background-color: var(--bs-body-bg); - background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); - background-repeat: no-repeat; - background-position: right 0.75rem center; - background-size: 16px 12px; - border: var(--bs-border-width) solid var(--bs-border-color); - border-radius: var(--bs-border-radius); - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .form-select { - transition: none; } } - .form-select:focus { - border-color: #ae97c3; - outline: 0; - box-shadow: 0 0 0 0 rgba(93, 47, 134, 0.25); } - .form-select[multiple], .form-select[size]:not([size="1"]) { - padding-right: 0.75rem; - background-image: none; } - .form-select:disabled { - background-color: var(--bs-secondary-bg); } - .form-select:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 var(--bs-body-color); } - -.form-select-sm { - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.5rem; - font-size: 0.875rem; - border-radius: var(--bs-border-radius-sm); } - -.form-select-lg { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 1rem; - font-size: 1.25rem; - border-radius: var(--bs-border-radius-lg); } - -[data-bs-theme="dark"] .form-select { - --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c1c3c8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } - -.form-check { - display: block; - min-height: 1.5rem; - padding-left: 1.5em; - margin-bottom: 0.125rem; } - .form-check .form-check-input, .form-check li input[type="checkbox"], li .form-check input[type="checkbox"] { - float: left; - margin-left: -1.5em; } - -.form-check-reverse { - padding-right: 1.5em; - padding-left: 0; - text-align: right; } - .form-check-reverse .form-check-input, .form-check-reverse li input[type="checkbox"], li .form-check-reverse input[type="checkbox"] { - float: right; - margin-right: -1.5em; - margin-left: 0; } - -.form-check-input, li input[type="checkbox"] { - --bs-form-check-bg: var(--bs-body-bg); - flex-shrink: 0; - width: 1em; - height: 1em; - margin-top: 0.25em; - vertical-align: top; - appearance: none; - background-color: var(--bs-form-check-bg); - background-image: var(--bs-form-check-bg-image); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - border: var(--bs-border-width) solid var(--bs-border-color); - print-color-adjust: exact; } - .form-check-input[type="checkbox"], li input[type="checkbox"] { - border-radius: 0.25em; } - .form-check-input[type="radio"], li input[type="radio"][type="checkbox"] { - border-radius: 50%; } - .form-check-input:active, li input[type="checkbox"]:active { - filter: brightness(90%); } - .form-check-input:focus, li input[type="checkbox"]:focus { - border-color: #ae97c3; - outline: 0; - box-shadow: 0 0 0 0.25rem rgba(93, 47, 134, 0.25); } - .form-check-input:checked, li input[type="checkbox"]:checked { - background-color: #5d2f86; - border-color: #5d2f86; } - .form-check-input:checked[type="checkbox"], li input:checked[type="checkbox"] { - --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } - .form-check-input:checked[type="radio"], li input[type="checkbox"]:checked[type="radio"] { - --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); } - .form-check-input[type="checkbox"]:indeterminate, li input[type="checkbox"]:indeterminate { - background-color: #5d2f86; - border-color: #5d2f86; - --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); } - .form-check-input:disabled, li input[type="checkbox"]:disabled { - pointer-events: none; - filter: none; - opacity: 0.5; } - .form-check-input[disabled] ~ .form-check-label, li input[disabled][type="checkbox"] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label, li input[type="checkbox"]:disabled ~ .form-check-label { - cursor: default; - opacity: 0.5; } - -.form-switch { - padding-left: 2.5em; } - .form-switch .form-check-input, .form-switch li input[type="checkbox"], li .form-switch input[type="checkbox"] { - --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); - width: 2em; - margin-left: -2.5em; - background-image: var(--bs-form-switch-bg); - background-position: left center; - border-radius: 2em; - transition: background-position 0.15s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .form-switch .form-check-input, .form-switch li input[type="checkbox"], li .form-switch input[type="checkbox"] { - transition: none; } } - .form-switch .form-check-input:focus, .form-switch li input[type="checkbox"]:focus, li .form-switch input[type="checkbox"]:focus { - --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ae97c3'/%3e%3c/svg%3e"); } - .form-switch .form-check-input:checked, .form-switch li input[type="checkbox"]:checked, li .form-switch input[type="checkbox"]:checked { - background-position: right center; - --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } - .form-switch.form-check-reverse { - padding-right: 2.5em; - padding-left: 0; } - .form-switch.form-check-reverse .form-check-input, .form-switch.form-check-reverse li input[type="checkbox"], li .form-switch.form-check-reverse input[type="checkbox"] { - margin-right: -2.5em; - margin-left: 0; } - -.form-check-inline { - display: inline-block; - margin-right: 1rem; } - -.btn-check { - position: absolute; - clip: rect(0, 0, 0, 0); - pointer-events: none; } - .btn-check[disabled] + .btn, .search-form .btn-check[disabled] + .search-submit, .comment-form .btn-check[disabled] + input[type="submit"], .btn-check:disabled + .btn, .search-form .btn-check:disabled + .search-submit, .comment-form .btn-check:disabled + input[type="submit"] { - pointer-events: none; - filter: none; - opacity: 0.65; } - -[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus), [data-bs-theme="dark"] .form-switch li input[type="checkbox"]:not(:checked):not(:focus), li [data-bs-theme="dark"] .form-switch input[type="checkbox"]:not(:checked):not(:focus) { - --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e"); } - -.form-range { - width: 100%; - height: 1rem; - padding: 0; - appearance: none; - background-color: transparent; } - .form-range:focus { - outline: 0; } - .form-range:focus::-webkit-slider-thumb { - box-shadow: 0 0 0 1px #fff, none; } - .form-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px #fff, none; } - .form-range::-moz-focus-outer { - border: 0; } - .form-range::-webkit-slider-thumb { - width: 1rem; - height: 1rem; - margin-top: -0.25rem; - appearance: none; - background-color: #5d2f86; - border: 0; - border-radius: 1rem; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .form-range::-webkit-slider-thumb { - transition: none; } } - .form-range::-webkit-slider-thumb:active { - background-color: #cec1db; } - .form-range::-webkit-slider-runnable-track { - width: 100%; - height: 0.5rem; - color: transparent; - cursor: pointer; - background-color: var(--bs-secondary-bg); - border-color: transparent; - border-radius: 1rem; } - .form-range::-moz-range-thumb { - width: 1rem; - height: 1rem; - appearance: none; - background-color: #5d2f86; - border: 0; - border-radius: 1rem; - transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .form-range::-moz-range-thumb { - transition: none; } } - .form-range::-moz-range-thumb:active { - background-color: #cec1db; } - .form-range::-moz-range-track { - width: 100%; - height: 0.5rem; - color: transparent; - cursor: pointer; - background-color: var(--bs-secondary-bg); - border-color: transparent; - border-radius: 1rem; } - .form-range:disabled { - pointer-events: none; } - .form-range:disabled::-webkit-slider-thumb { - background-color: var(--bs-secondary-color); } - .form-range:disabled::-moz-range-thumb { - background-color: var(--bs-secondary-color); } - -.form-floating { - position: relative; } - .form-floating > .form-control, .search-form .form-floating > .search-field, .comment-form .form-floating > input[type="text"], - .comment-form .form-floating > input[type="email"], - .comment-form .form-floating > input[type="url"], - .comment-form .form-floating > textarea, - .form-floating > .form-control-plaintext, - .form-floating > .form-select { - height: calc(3.5rem + calc(var(--bs-border-width) * 2)); - min-height: calc(3.5rem + calc(var(--bs-border-width) * 2)); - line-height: 1.25; } - .form-floating > label { - position: absolute; - top: 0; - left: 0; - z-index: 2; - height: 100%; - padding: 1rem 0.75rem; - overflow: hidden; - text-align: start; - text-overflow: ellipsis; - white-space: nowrap; - pointer-events: none; - border: var(--bs-border-width) solid transparent; - transform-origin: 0 0; - transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .form-floating > label { - transition: none; } } - .form-floating > .form-control, .search-form .form-floating > .search-field, .comment-form .form-floating > input[type="text"], - .comment-form .form-floating > input[type="email"], - .comment-form .form-floating > input[type="url"], - .comment-form .form-floating > textarea, - .form-floating > .form-control-plaintext { - padding: 1rem 0.75rem; } - .form-floating > .form-control::placeholder, .search-form .form-floating > .search-field::placeholder, .comment-form .form-floating > input[type="text"]::placeholder, - .comment-form .form-floating > input[type="email"]::placeholder, - .comment-form .form-floating > input[type="url"]::placeholder, - .comment-form .form-floating > textarea::placeholder, - .form-floating > .form-control-plaintext::placeholder { - color: transparent; } - .form-floating > .form-control:focus, .search-form .form-floating > .search-field:focus, .comment-form .form-floating > input[type="text"]:focus, - .comment-form .form-floating > input[type="email"]:focus, - .comment-form .form-floating > input[type="url"]:focus, - .comment-form .form-floating > textarea:focus, .form-floating > .form-control:not(:placeholder-shown), .search-form .form-floating > .search-field:not(:placeholder-shown), .comment-form .form-floating > input[type="text"]:not(:placeholder-shown), - .comment-form .form-floating > input[type="email"]:not(:placeholder-shown), - .comment-form .form-floating > input[type="url"]:not(:placeholder-shown), - .comment-form .form-floating > textarea:not(:placeholder-shown), - .form-floating > .form-control-plaintext:focus, - .form-floating > .form-control-plaintext:not(:placeholder-shown) { - padding-top: 1.625rem; - padding-bottom: 0.625rem; } - .form-floating > .form-control:-webkit-autofill, .search-form .form-floating > .search-field:-webkit-autofill, .comment-form .form-floating > input[type="text"]:-webkit-autofill, - .comment-form .form-floating > input[type="email"]:-webkit-autofill, - .comment-form .form-floating > input[type="url"]:-webkit-autofill, - .comment-form .form-floating > textarea:-webkit-autofill, - .form-floating > .form-control-plaintext:-webkit-autofill { - padding-top: 1.625rem; - padding-bottom: 0.625rem; } - .form-floating > .form-select { - padding-top: 1.625rem; - padding-bottom: 0.625rem; } - .form-floating > .form-control:focus ~ label, .search-form .form-floating > .search-field:focus ~ label, .comment-form .form-floating > input[type="text"]:focus ~ label, - .comment-form .form-floating > input[type="email"]:focus ~ label, - .comment-form .form-floating > input[type="url"]:focus ~ label, - .comment-form .form-floating > textarea:focus ~ label, - .form-floating > .form-control:not(:placeholder-shown) ~ label, - .search-form .form-floating > .search-field:not(:placeholder-shown) ~ label, - .comment-form .form-floating > input[type="text"]:not(:placeholder-shown) ~ label, - .comment-form .form-floating > input[type="email"]:not(:placeholder-shown) ~ label, - .comment-form .form-floating > input[type="url"]:not(:placeholder-shown) ~ label, - .comment-form .form-floating > textarea:not(:placeholder-shown) ~ label, - .form-floating > .form-control-plaintext ~ label, - .form-floating > .form-select ~ label { - color: rgba(var(--bs-body-color-rgb), 0.65); - transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } - .form-floating > .form-control:focus ~ label::after, .search-form .form-floating > .search-field:focus ~ label::after, .comment-form .form-floating > input[type="text"]:focus ~ label::after, - .comment-form .form-floating > input[type="email"]:focus ~ label::after, - .comment-form .form-floating > input[type="url"]:focus ~ label::after, - .comment-form .form-floating > textarea:focus ~ label::after, - .form-floating > .form-control:not(:placeholder-shown) ~ label::after, - .search-form .form-floating > .search-field:not(:placeholder-shown) ~ label::after, - .comment-form .form-floating > input[type="text"]:not(:placeholder-shown) ~ label::after, - .comment-form .form-floating > input[type="email"]:not(:placeholder-shown) ~ label::after, - .comment-form .form-floating > input[type="url"]:not(:placeholder-shown) ~ label::after, - .comment-form .form-floating > textarea:not(:placeholder-shown) ~ label::after, - .form-floating > .form-control-plaintext ~ label::after, - .form-floating > .form-select ~ label::after { - position: absolute; - inset: 1rem 0.375rem; - z-index: -1; - height: 1.5em; - content: ""; - background-color: var(--bs-body-bg); - border-radius: var(--bs-border-radius); } - .form-floating > .form-control:-webkit-autofill ~ label, .search-form .form-floating > .search-field:-webkit-autofill ~ label, .comment-form .form-floating > input[type="text"]:-webkit-autofill ~ label, - .comment-form .form-floating > input[type="email"]:-webkit-autofill ~ label, - .comment-form .form-floating > input[type="url"]:-webkit-autofill ~ label, - .comment-form .form-floating > textarea:-webkit-autofill ~ label { - color: rgba(var(--bs-body-color-rgb), 0.65); - transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } - .form-floating > .form-control-plaintext ~ label { - border-width: var(--bs-border-width) 0; } - .form-floating > :disabled ~ label, - .form-floating > .form-control:disabled ~ label { - color: #6c757d; } - .form-floating > :disabled ~ label::after, - .form-floating > .form-control:disabled ~ label::after { - background-color: var(--bs-secondary-bg); } - -.input-group { - position: relative; - display: flex; - flex-wrap: wrap; - align-items: stretch; - width: 100%; } - .input-group > .form-control, .search-form .input-group > .search-field, .comment-form .input-group > input[type="text"], - .comment-form .input-group > input[type="email"], - .comment-form .input-group > input[type="url"], - .comment-form .input-group > textarea, - .input-group > .form-select, - .input-group > .form-floating { - position: relative; - flex: 1 1 auto; - width: 1%; - min-width: 0; } - .input-group > .form-control:focus, .search-form .input-group > .search-field:focus, .comment-form .input-group > input[type="text"]:focus, - .comment-form .input-group > input[type="email"]:focus, - .comment-form .input-group > input[type="url"]:focus, - .comment-form .input-group > textarea:focus, - .input-group > .form-select:focus, - .input-group > .form-floating:focus-within { - z-index: 5; } - .input-group .btn, .input-group .search-form .search-submit, .search-form .input-group .search-submit, .input-group .comment-form input[type="submit"], .comment-form .input-group input[type="submit"] { - position: relative; - z-index: 2; } - .input-group .btn:focus, .input-group .search-form .search-submit:focus, .search-form .input-group .search-submit:focus, .input-group .comment-form input[type="submit"]:focus, .comment-form .input-group input[type="submit"]:focus { - z-index: 5; } - -.input-group-text { - display: flex; - align-items: center; - padding: 0.375rem 0.75rem; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: var(--bs-body-color); - text-align: center; - white-space: nowrap; - background-color: var(--bs-tertiary-bg); - border: var(--bs-border-width) solid var(--bs-border-color); - border-radius: var(--bs-border-radius); } - -.input-group-lg > .form-control, .search-form .input-group-lg > .search-field, .comment-form .input-group-lg > input[type="text"], -.comment-form .input-group-lg > input[type="email"], -.comment-form .input-group-lg > input[type="url"], -.comment-form .input-group-lg > textarea, -.input-group-lg > .form-select, -.input-group-lg > .input-group-text, -.input-group-lg > .btn, -.search-form .input-group-lg > .search-submit, -.comment-form .input-group-lg > input[type="submit"] { - padding: 0.5rem 1rem; - font-size: 1.25rem; - border-radius: var(--bs-border-radius-lg); } - -.input-group-sm > .form-control, .search-form .input-group-sm > .search-field, .comment-form .input-group-sm > input[type="text"], -.comment-form .input-group-sm > input[type="email"], -.comment-form .input-group-sm > input[type="url"], -.comment-form .input-group-sm > textarea, -.input-group-sm > .form-select, -.input-group-sm > .input-group-text, -.input-group-sm > .btn, -.search-form .input-group-sm > .search-submit, -.comment-form .input-group-sm > input[type="submit"] { - padding: 0.25rem 0.5rem; - font-size: 0.875rem; - border-radius: var(--bs-border-radius-sm); } - -.input-group-lg > .form-select, -.input-group-sm > .form-select { - padding-right: 3rem; } - -.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), -.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3), -.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, -.search-form .input-group:not(.has-validation) > .form-floating:not(:last-child) > .search-field, -.comment-form .input-group:not(.has-validation) > .form-floating:not(:last-child) > input[type="text"], -.comment-form .input-group:not(.has-validation) > .form-floating:not(:last-child) > input[type="email"], -.comment-form .input-group:not(.has-validation) > .form-floating:not(:last-child) > input[type="url"], -.comment-form .input-group:not(.has-validation) > .form-floating:not(:last-child) > textarea, -.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - -.input-group.has-validation > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), -.input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4), -.input-group.has-validation > .form-floating:nth-last-child(n + 3) > .form-control, -.search-form .input-group.has-validation > .form-floating:nth-last-child(n + 3) > .search-field, -.comment-form .input-group.has-validation > .form-floating:nth-last-child(n + 3) > input[type="text"], -.comment-form .input-group.has-validation > .form-floating:nth-last-child(n + 3) > input[type="email"], -.comment-form .input-group.has-validation > .form-floating:nth-last-child(n + 3) > input[type="url"], -.comment-form .input-group.has-validation > .form-floating:nth-last-child(n + 3) > textarea, -.input-group.has-validation > .form-floating:nth-last-child(n + 3) > .form-select { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - -.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { - margin-left: calc(var(--bs-border-width) * -1); - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - -.input-group > .form-floating:not(:first-child) > .form-control, .search-form .input-group > .form-floating:not(:first-child) > .search-field, .comment-form .input-group > .form-floating:not(:first-child) > input[type="text"], -.comment-form .input-group > .form-floating:not(:first-child) > input[type="email"], -.comment-form .input-group > .form-floating:not(:first-child) > input[type="url"], -.comment-form .input-group > .form-floating:not(:first-child) > textarea, -.input-group > .form-floating:not(:first-child) > .form-select { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - -.valid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 0.875em; - color: var(--bs-form-valid-color); } - -.valid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: .1rem; - font-size: 0.875rem; - color: #fff; - background-color: var(--bs-success); - border-radius: var(--bs-border-radius); } - -.was-validated :valid ~ .valid-feedback, -.was-validated :valid ~ .valid-tooltip, -.is-valid ~ .valid-feedback, -.is-valid ~ .valid-tooltip { - display: block; } - -.was-validated .form-control:valid, .was-validated .search-form .search-field:valid, .search-form .was-validated .search-field:valid, .was-validated .comment-form input[type="text"]:valid, .comment-form .was-validated input[type="text"]:valid, -.was-validated .comment-form input[type="email"]:valid, -.comment-form .was-validated input[type="email"]:valid, -.was-validated .comment-form input[type="url"]:valid, -.comment-form .was-validated input[type="url"]:valid, -.was-validated .comment-form textarea:valid, -.comment-form .was-validated textarea:valid, .form-control.is-valid, .search-form .is-valid.search-field, .comment-form input.is-valid[type="text"], -.comment-form input.is-valid[type="email"], -.comment-form input.is-valid[type="url"], -.comment-form textarea.is-valid { - border-color: var(--bs-form-valid-border-color); - padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2384ee53' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: right calc(0.375em + 0.1875rem) center; - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } - .was-validated .form-control:valid:focus, .was-validated .search-form .search-field:valid:focus, .search-form .was-validated .search-field:valid:focus, .was-validated .comment-form input[type="text"]:valid:focus, .comment-form .was-validated input[type="text"]:valid:focus, - .was-validated .comment-form input[type="email"]:valid:focus, - .comment-form .was-validated input[type="email"]:valid:focus, - .was-validated .comment-form input[type="url"]:valid:focus, - .comment-form .was-validated input[type="url"]:valid:focus, - .was-validated .comment-form textarea:valid:focus, - .comment-form .was-validated textarea:valid:focus, .form-control.is-valid:focus, .search-form .is-valid.search-field:focus, .comment-form input.is-valid[type="text"]:focus, - .comment-form input.is-valid[type="email"]:focus, - .comment-form input.is-valid[type="url"]:focus, - .comment-form textarea.is-valid:focus { - border-color: var(--bs-form-valid-border-color); - box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.25); } - -.was-validated textarea.form-control:valid, .was-validated .search-form textarea.search-field:valid, .search-form .was-validated textarea.search-field:valid, textarea.form-control.is-valid, .search-form textarea.is-valid.search-field { - padding-right: calc(1.5em + 0.75rem); - background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } - -.was-validated .form-select:valid, .form-select.is-valid { - border-color: var(--bs-form-valid-border-color); } - .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { - --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2384ee53' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - padding-right: 4.125rem; - background-position: right 0.75rem center, center right 2.25rem; - background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } - .was-validated .form-select:valid:focus, .form-select.is-valid:focus { - border-color: var(--bs-form-valid-border-color); - box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.25); } - -.was-validated .form-control-color:valid, .form-control-color.is-valid { - width: calc(3rem + calc(1.5em + 0.75rem)); } - -.was-validated .form-check-input:valid, .was-validated li input[type="checkbox"]:valid, li .was-validated input[type="checkbox"]:valid, .form-check-input.is-valid, li input.is-valid[type="checkbox"] { - border-color: var(--bs-form-valid-border-color); } - .was-validated .form-check-input:valid:checked, .was-validated li input[type="checkbox"]:valid:checked, li .was-validated input[type="checkbox"]:valid:checked, .form-check-input.is-valid:checked, li input.is-valid[type="checkbox"]:checked { - background-color: var(--bs-form-valid-color); } - .was-validated .form-check-input:valid:focus, .was-validated li input[type="checkbox"]:valid:focus, li .was-validated input[type="checkbox"]:valid:focus, .form-check-input.is-valid:focus, li input.is-valid[type="checkbox"]:focus { - box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0.25); } - .was-validated .form-check-input:valid ~ .form-check-label, .was-validated li input[type="checkbox"]:valid ~ .form-check-label, li .was-validated input[type="checkbox"]:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label, li input.is-valid[type="checkbox"] ~ .form-check-label { - color: var(--bs-form-valid-color); } - -.form-check-inline .form-check-input ~ .valid-feedback, .form-check-inline li input[type="checkbox"] ~ .valid-feedback, li .form-check-inline input[type="checkbox"] ~ .valid-feedback { - margin-left: .5em; } - -.was-validated .input-group > .form-control:not(:focus):valid, .was-validated .search-form .input-group > .search-field:not(:focus):valid, .search-form .was-validated .input-group > .search-field:not(:focus):valid, .was-validated .comment-form .input-group > input[type="text"]:not(:focus):valid, .comment-form .was-validated .input-group > input[type="text"]:not(:focus):valid, -.was-validated .comment-form .input-group > input[type="email"]:not(:focus):valid, -.comment-form .was-validated .input-group > input[type="email"]:not(:focus):valid, -.was-validated .comment-form .input-group > input[type="url"]:not(:focus):valid, -.comment-form .was-validated .input-group > input[type="url"]:not(:focus):valid, -.was-validated .comment-form .input-group > textarea:not(:focus):valid, -.comment-form .was-validated .input-group > textarea:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid, .search-form .input-group > .search-field:not(:focus).is-valid, .comment-form .input-group > input[type="text"]:not(:focus).is-valid, -.comment-form .input-group > input[type="email"]:not(:focus).is-valid, -.comment-form .input-group > input[type="url"]:not(:focus).is-valid, -.comment-form .input-group > textarea:not(:focus).is-valid, .was-validated .input-group > .form-select:not(:focus):valid, -.input-group > .form-select:not(:focus).is-valid, .was-validated .input-group > .form-floating:not(:focus-within):valid, -.input-group > .form-floating:not(:focus-within).is-valid { - z-index: 3; } - -.invalid-feedback { - display: none; - width: 100%; - margin-top: 0.25rem; - font-size: 0.875em; - color: var(--bs-form-invalid-color); } - -.invalid-tooltip { - position: absolute; - top: 100%; - z-index: 5; - display: none; - max-width: 100%; - padding: 0.25rem 0.5rem; - margin-top: .1rem; - font-size: 0.875rem; - color: #fff; - background-color: var(--bs-danger); - border-radius: var(--bs-border-radius); } - -.was-validated :invalid ~ .invalid-feedback, -.was-validated :invalid ~ .invalid-tooltip, -.is-invalid ~ .invalid-feedback, -.is-invalid ~ .invalid-tooltip { - display: block; } - -.was-validated .form-control:invalid, .was-validated .search-form .search-field:invalid, .search-form .was-validated .search-field:invalid, .was-validated .comment-form input[type="text"]:invalid, .comment-form .was-validated input[type="text"]:invalid, -.was-validated .comment-form input[type="email"]:invalid, -.comment-form .was-validated input[type="email"]:invalid, -.was-validated .comment-form input[type="url"]:invalid, -.comment-form .was-validated input[type="url"]:invalid, -.was-validated .comment-form textarea:invalid, -.comment-form .was-validated textarea:invalid, .form-control.is-invalid, .search-form .is-invalid.search-field, .comment-form input.is-invalid[type="text"], -.comment-form input.is-invalid[type="email"], -.comment-form input.is-invalid[type="url"], -.comment-form textarea.is-invalid { - border-color: var(--bs-form-invalid-border-color); - padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ee5389'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ee5389' stroke='none'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: right calc(0.375em + 0.1875rem) center; - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } - .was-validated .form-control:invalid:focus, .was-validated .search-form .search-field:invalid:focus, .search-form .was-validated .search-field:invalid:focus, .was-validated .comment-form input[type="text"]:invalid:focus, .comment-form .was-validated input[type="text"]:invalid:focus, - .was-validated .comment-form input[type="email"]:invalid:focus, - .comment-form .was-validated input[type="email"]:invalid:focus, - .was-validated .comment-form input[type="url"]:invalid:focus, - .comment-form .was-validated input[type="url"]:invalid:focus, - .was-validated .comment-form textarea:invalid:focus, - .comment-form .was-validated textarea:invalid:focus, .form-control.is-invalid:focus, .search-form .is-invalid.search-field:focus, .comment-form input.is-invalid[type="text"]:focus, - .comment-form input.is-invalid[type="email"]:focus, - .comment-form input.is-invalid[type="url"]:focus, - .comment-form textarea.is-invalid:focus { - border-color: var(--bs-form-invalid-border-color); - box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.25); } - -.was-validated textarea.form-control:invalid, .was-validated .search-form textarea.search-field:invalid, .search-form .was-validated textarea.search-field:invalid, textarea.form-control.is-invalid, .search-form textarea.is-invalid.search-field { - padding-right: calc(1.5em + 0.75rem); - background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } - -.was-validated .form-select:invalid, .form-select.is-invalid { - border-color: var(--bs-form-invalid-border-color); } - .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] { - --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ee5389'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ee5389' stroke='none'/%3e%3c/svg%3e"); - padding-right: 4.125rem; - background-position: right 0.75rem center, center right 2.25rem; - background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } - .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus { - border-color: var(--bs-form-invalid-border-color); - box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.25); } - -.was-validated .form-control-color:invalid, .form-control-color.is-invalid { - width: calc(3rem + calc(1.5em + 0.75rem)); } - -.was-validated .form-check-input:invalid, .was-validated li input[type="checkbox"]:invalid, li .was-validated input[type="checkbox"]:invalid, .form-check-input.is-invalid, li input.is-invalid[type="checkbox"] { - border-color: var(--bs-form-invalid-border-color); } - .was-validated .form-check-input:invalid:checked, .was-validated li input[type="checkbox"]:invalid:checked, li .was-validated input[type="checkbox"]:invalid:checked, .form-check-input.is-invalid:checked, li input.is-invalid[type="checkbox"]:checked { - background-color: var(--bs-form-invalid-color); } - .was-validated .form-check-input:invalid:focus, .was-validated li input[type="checkbox"]:invalid:focus, li .was-validated input[type="checkbox"]:invalid:focus, .form-check-input.is-invalid:focus, li input.is-invalid[type="checkbox"]:focus { - box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.25); } - .was-validated .form-check-input:invalid ~ .form-check-label, .was-validated li input[type="checkbox"]:invalid ~ .form-check-label, li .was-validated input[type="checkbox"]:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label, li input.is-invalid[type="checkbox"] ~ .form-check-label { - color: var(--bs-form-invalid-color); } - -.form-check-inline .form-check-input ~ .invalid-feedback, .form-check-inline li input[type="checkbox"] ~ .invalid-feedback, li .form-check-inline input[type="checkbox"] ~ .invalid-feedback { - margin-left: .5em; } - -.was-validated .input-group > .form-control:not(:focus):invalid, .was-validated .search-form .input-group > .search-field:not(:focus):invalid, .search-form .was-validated .input-group > .search-field:not(:focus):invalid, .was-validated .comment-form .input-group > input[type="text"]:not(:focus):invalid, .comment-form .was-validated .input-group > input[type="text"]:not(:focus):invalid, -.was-validated .comment-form .input-group > input[type="email"]:not(:focus):invalid, -.comment-form .was-validated .input-group > input[type="email"]:not(:focus):invalid, -.was-validated .comment-form .input-group > input[type="url"]:not(:focus):invalid, -.comment-form .was-validated .input-group > input[type="url"]:not(:focus):invalid, -.was-validated .comment-form .input-group > textarea:not(:focus):invalid, -.comment-form .was-validated .input-group > textarea:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid, .search-form .input-group > .search-field:not(:focus).is-invalid, .comment-form .input-group > input[type="text"]:not(:focus).is-invalid, -.comment-form .input-group > input[type="email"]:not(:focus).is-invalid, -.comment-form .input-group > input[type="url"]:not(:focus).is-invalid, -.comment-form .input-group > textarea:not(:focus).is-invalid, .was-validated .input-group > .form-select:not(:focus):invalid, -.input-group > .form-select:not(:focus).is-invalid, .was-validated .input-group > .form-floating:not(:focus-within):invalid, -.input-group > .form-floating:not(:focus-within).is-invalid { - z-index: 4; } - -.btn, .search-form .search-submit, .comment-form input[type="submit"] { - --bs-btn-padding-x: 0.75rem; - --bs-btn-padding-y: 0.375rem; - --bs-btn-font-family: ; - --bs-btn-font-size: 1rem; - --bs-btn-font-weight: 400; - --bs-btn-line-height: 1.5; - --bs-btn-color: var(--bs-body-color); - --bs-btn-bg: transparent; - --bs-btn-border-width: var(--bs-border-width); - --bs-btn-border-color: transparent; - --bs-btn-border-radius: var(--bs-border-radius); - --bs-btn-hover-border-color: transparent; - --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --bs-btn-disabled-opacity: 0.65; - --bs-btn-focus-box-shadow: 0 0 0 0 rgba(var(--bs-btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); - font-family: var(--bs-btn-font-family); - font-size: var(--bs-btn-font-size); - font-weight: var(--bs-btn-font-weight); - line-height: var(--bs-btn-line-height); - color: var(--bs-btn-color); - text-align: center; - vertical-align: middle; - cursor: pointer; - user-select: none; - border: var(--bs-btn-border-width) solid var(--bs-btn-border-color); - border-radius: var(--bs-btn-border-radius); - background-color: var(--bs-btn-bg); - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .btn, .search-form .search-submit, .comment-form input[type="submit"] { - transition: none; } } - .btn:hover, .search-form .search-submit:hover, .comment-form input[type="submit"]:hover { - color: var(--bs-btn-hover-color); - text-decoration: none; - background-color: var(--bs-btn-hover-bg); - border-color: var(--bs-btn-hover-border-color); } - .btn-check + .btn:hover, .search-form .btn-check + .search-submit:hover, .comment-form .btn-check + input[type="submit"]:hover { - color: var(--bs-btn-color); - background-color: var(--bs-btn-bg); - border-color: var(--bs-btn-border-color); } - .btn:focus-visible, .search-form .search-submit:focus-visible, .comment-form input[type="submit"]:focus-visible { - color: var(--bs-btn-hover-color); - background-color: var(--bs-btn-hover-bg); - border-color: var(--bs-btn-hover-border-color); - outline: 0; - box-shadow: var(--bs-btn-focus-box-shadow); } - .btn-check:focus-visible + .btn, .search-form .btn-check:focus-visible + .search-submit, .comment-form .btn-check:focus-visible + input[type="submit"] { - border-color: var(--bs-btn-hover-border-color); - outline: 0; - box-shadow: var(--bs-btn-focus-box-shadow); } - .btn-check:checked + .btn, .search-form .btn-check:checked + .search-submit, .comment-form .btn-check:checked + input[type="submit"], :not(.btn-check) + .btn:active, .search-form :not(.btn-check) + .search-submit:active, .comment-form :not(.btn-check) + input[type="submit"]:active, .btn:first-child:active, .search-form .search-submit:first-child:active, .comment-form input[type="submit"]:first-child:active, .btn.active, .search-form .active.search-submit, .comment-form input.active[type="submit"], .btn.show, .search-form .show.search-submit, .comment-form input.show[type="submit"] { - color: var(--bs-btn-active-color); - background-color: var(--bs-btn-active-bg); - border-color: var(--bs-btn-active-border-color); } - .btn-check:checked + .btn:focus-visible, .search-form .btn-check:checked + .search-submit:focus-visible, .comment-form .btn-check:checked + input[type="submit"]:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .search-form :not(.btn-check) + .search-submit:active:focus-visible, .comment-form :not(.btn-check) + input[type="submit"]:active:focus-visible, .btn:first-child:active:focus-visible, .search-form .search-submit:first-child:active:focus-visible, .comment-form input[type="submit"]:first-child:active:focus-visible, .btn.active:focus-visible, .search-form .active.search-submit:focus-visible, .comment-form input.active[type="submit"]:focus-visible, .btn.show:focus-visible, .search-form .show.search-submit:focus-visible, .comment-form input.show[type="submit"]:focus-visible { - box-shadow: var(--bs-btn-focus-box-shadow); } - .btn-check:checked:focus-visible + .btn, .search-form .btn-check:checked:focus-visible + .search-submit, .comment-form .btn-check:checked:focus-visible + input[type="submit"] { - box-shadow: var(--bs-btn-focus-box-shadow); } - .btn:disabled, .search-form .search-submit:disabled, .comment-form input[type="submit"]:disabled, .btn.disabled, .search-form .disabled.search-submit, .comment-form input.disabled[type="submit"], fieldset:disabled .btn, fieldset:disabled .search-form .search-submit, .search-form fieldset:disabled .search-submit, fieldset:disabled .comment-form input[type="submit"], .comment-form fieldset:disabled input[type="submit"] { - color: var(--bs-btn-disabled-color); - pointer-events: none; - background-color: var(--bs-btn-disabled-bg); - border-color: var(--bs-btn-disabled-border-color); - opacity: var(--bs-btn-disabled-opacity); } - -.btn-primary { - --bs-btn-color: #fff; - --bs-btn-bg: #5d2f86; - --bs-btn-border-color: #5d2f86; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #4f2872; - --bs-btn-hover-border-color: #4a266b; - --bs-btn-focus-shadow-rgb: 117, 78, 152; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #4a266b; - --bs-btn-active-border-color: #462365; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #fff; - --bs-btn-disabled-bg: #5d2f86; - --bs-btn-disabled-border-color: #5d2f86; } - -.btn-secondary, .search-form .search-submit, .comment-form input[type="submit"] { - --bs-btn-color: #fff; - --bs-btn-bg: #6c757d; - --bs-btn-border-color: #6c757d; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #5c636a; - --bs-btn-hover-border-color: #565e64; - --bs-btn-focus-shadow-rgb: 130, 138, 145; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #565e64; - --bs-btn-active-border-color: #51585e; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #fff; - --bs-btn-disabled-bg: #6c757d; - --bs-btn-disabled-border-color: #6c757d; } - -.btn-success { - --bs-btn-color: #000; - --bs-btn-bg: #84ee53; - --bs-btn-border-color: #84ee53; - --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #97f16d; - --bs-btn-hover-border-color: #91f064; - --bs-btn-focus-shadow-rgb: 112, 202, 71; - --bs-btn-active-color: #000; - --bs-btn-active-bg: #9df176; - --bs-btn-active-border-color: #91f064; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #000; - --bs-btn-disabled-bg: #84ee53; - --bs-btn-disabled-border-color: #84ee53; } - -.btn-info { - --bs-btn-color: #fff; - --bs-btn-bg: #3347ff; - --bs-btn-border-color: #3347ff; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #2b3dd9; - --bs-btn-hover-border-color: #2939cc; - --bs-btn-focus-shadow-rgb: 82, 99, 255; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #2939cc; - --bs-btn-active-border-color: #2636bf; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #fff; - --bs-btn-disabled-bg: #3347ff; - --bs-btn-disabled-border-color: #3347ff; } - -.btn-warning { - --bs-btn-color: #000; - --bs-btn-bg: #eebd53; - --bs-btn-border-color: #eebd53; - --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #f1c76d; - --bs-btn-hover-border-color: #f0c464; - --bs-btn-focus-shadow-rgb: 202, 161, 71; - --bs-btn-active-color: #000; - --bs-btn-active-bg: #f1ca76; - --bs-btn-active-border-color: #f0c464; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #000; - --bs-btn-disabled-bg: #eebd53; - --bs-btn-disabled-border-color: #eebd53; } - -.btn-danger { - --bs-btn-color: #000; - --bs-btn-bg: #ee5389; - --bs-btn-border-color: #ee5389; - --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #f16d9b; - --bs-btn-hover-border-color: #f06495; - --bs-btn-focus-shadow-rgb: 202, 71, 117; - --bs-btn-active-color: #000; - --bs-btn-active-bg: #f176a1; - --bs-btn-active-border-color: #f06495; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #000; - --bs-btn-disabled-bg: #ee5389; - --bs-btn-disabled-border-color: #ee5389; } - -.btn-light { - --bs-btn-color: #000; - --bs-btn-bg: #f8f9fa; - --bs-btn-border-color: #f8f9fa; - --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #d3d4d5; - --bs-btn-hover-border-color: #c6c7c8; - --bs-btn-focus-shadow-rgb: 211, 212, 213; - --bs-btn-active-color: #000; - --bs-btn-active-bg: #c6c7c8; - --bs-btn-active-border-color: #babbbc; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #000; - --bs-btn-disabled-bg: #f8f9fa; - --bs-btn-disabled-border-color: #f8f9fa; } - -.btn-dark { - --bs-btn-color: #fff; - --bs-btn-bg: #212529; - --bs-btn-border-color: #212529; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #424649; - --bs-btn-hover-border-color: #373b3e; - --bs-btn-focus-shadow-rgb: 66, 70, 73; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #4d5154; - --bs-btn-active-border-color: #373b3e; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #fff; - --bs-btn-disabled-bg: #212529; - --bs-btn-disabled-border-color: #212529; } - -.btn-outline-primary { - --bs-btn-color: #5d2f86; - --bs-btn-border-color: #5d2f86; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #5d2f86; - --bs-btn-hover-border-color: #5d2f86; - --bs-btn-focus-shadow-rgb: 93, 47, 134; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #5d2f86; - --bs-btn-active-border-color: #5d2f86; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #5d2f86; - --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #5d2f86; - --bs-gradient: none; } - -.btn-outline-secondary { - --bs-btn-color: #6c757d; - --bs-btn-border-color: #6c757d; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #6c757d; - --bs-btn-hover-border-color: #6c757d; - --bs-btn-focus-shadow-rgb: 108, 117, 125; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #6c757d; - --bs-btn-active-border-color: #6c757d; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #6c757d; - --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #6c757d; - --bs-gradient: none; } - -.btn-outline-success { - --bs-btn-color: #84ee53; - --bs-btn-border-color: #84ee53; - --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #84ee53; - --bs-btn-hover-border-color: #84ee53; - --bs-btn-focus-shadow-rgb: 132.2821, 238.017, 83.283; - --bs-btn-active-color: #000; - --bs-btn-active-bg: #84ee53; - --bs-btn-active-border-color: #84ee53; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #84ee53; - --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #84ee53; - --bs-gradient: none; } - -.btn-outline-info { - --bs-btn-color: #3347ff; - --bs-btn-border-color: #3347ff; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #3347ff; - --bs-btn-hover-border-color: #3347ff; - --bs-btn-focus-shadow-rgb: 51, 71.4, 255; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #3347ff; - --bs-btn-active-border-color: #3347ff; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #3347ff; - --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #3347ff; - --bs-gradient: none; } - -.btn-outline-warning { - --bs-btn-color: #eebd53; - --bs-btn-border-color: #eebd53; - --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #eebd53; - --bs-btn-hover-border-color: #eebd53; - --bs-btn-focus-shadow-rgb: 238.017, 189.0179, 83.283; - --bs-btn-active-color: #000; - --bs-btn-active-bg: #eebd53; - --bs-btn-active-border-color: #eebd53; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #eebd53; - --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #eebd53; - --bs-gradient: none; } - -.btn-outline-danger { - --bs-btn-color: #ee5389; - --bs-btn-border-color: #ee5389; - --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #ee5389; - --bs-btn-hover-border-color: #ee5389; - --bs-btn-focus-shadow-rgb: 238.017, 83.283, 137.4399; - --bs-btn-active-color: #000; - --bs-btn-active-bg: #ee5389; - --bs-btn-active-border-color: #ee5389; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #ee5389; - --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #ee5389; - --bs-gradient: none; } - -.btn-outline-light { - --bs-btn-color: #f8f9fa; - --bs-btn-border-color: #f8f9fa; - --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #f8f9fa; - --bs-btn-hover-border-color: #f8f9fa; - --bs-btn-focus-shadow-rgb: 248, 249, 250; - --bs-btn-active-color: #000; - --bs-btn-active-bg: #f8f9fa; - --bs-btn-active-border-color: #f8f9fa; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #f8f9fa; - --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #f8f9fa; - --bs-gradient: none; } - -.btn-outline-dark { - --bs-btn-color: #212529; - --bs-btn-border-color: #212529; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #212529; - --bs-btn-hover-border-color: #212529; - --bs-btn-focus-shadow-rgb: 33, 37, 41; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #212529; - --bs-btn-active-border-color: #212529; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #212529; - --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #212529; - --bs-gradient: none; } - -.btn-link { - --bs-btn-font-weight: 400; - --bs-btn-color: var(--bs-link-color); - --bs-btn-bg: transparent; - --bs-btn-border-color: transparent; - --bs-btn-hover-color: var(--bs-link-hover-color); - --bs-btn-hover-border-color: transparent; - --bs-btn-active-color: var(--bs-link-hover-color); - --bs-btn-active-border-color: transparent; - --bs-btn-disabled-color: #6c757d; - --bs-btn-disabled-border-color: transparent; - --bs-btn-box-shadow: 0 0 0 #000; - --bs-btn-focus-shadow-rgb: 117, 78, 152; - text-decoration: none; } - .btn-link:hover, .btn-link:focus-visible { - text-decoration: underline; } - .btn-link:focus-visible { - color: var(--bs-btn-color); } - .btn-link:hover { - color: var(--bs-btn-hover-color); } - -.btn-lg, .btn-group-lg > .btn, .search-form .btn-group-lg > .search-submit, .comment-form .btn-group-lg > input[type="submit"] { - --bs-btn-padding-y: 0.5rem; - --bs-btn-padding-x: 1rem; - --bs-btn-font-size: 1.25rem; - --bs-btn-border-radius: var(--bs-border-radius-lg); } - -.btn-sm, .btn-group-sm > .btn, .search-form .btn-group-sm > .search-submit, .comment-form .btn-group-sm > input[type="submit"] { - --bs-btn-padding-y: 0.25rem; - --bs-btn-padding-x: 0.5rem; - --bs-btn-font-size: 0.875rem; - --bs-btn-border-radius: var(--bs-border-radius-sm); } - -.fade { - transition: opacity 0.15s linear; } - @media (prefers-reduced-motion: reduce) { - .fade { - transition: none; } } - .fade:not(.show) { - opacity: 0; } - -.collapse:not(.show) { - display: none; } - -.collapsing { - height: 0; - overflow: hidden; - transition: height 0.35s ease; } - @media (prefers-reduced-motion: reduce) { - .collapsing { - transition: none; } } - .collapsing.collapse-horizontal { - width: 0; - height: auto; - transition: width 0.35s ease; } - @media (prefers-reduced-motion: reduce) { - .collapsing.collapse-horizontal { - transition: none; } } -.dropup, -.dropend, -.dropdown, -.dropstart, -.dropup-center, -.dropdown-center { - position: relative; } - -.dropdown-toggle { - white-space: nowrap; } - .dropdown-toggle::after { - display: inline-block; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0.3em solid; - border-right: 0.3em solid transparent; - border-bottom: 0; - border-left: 0.3em solid transparent; } - .dropdown-toggle:empty::after { - margin-left: 0; } - -.dropdown-menu { - --bs-dropdown-zindex: 1000; - --bs-dropdown-min-width: 10rem; - --bs-dropdown-padding-x: 0; - --bs-dropdown-padding-y: 0.5rem; - --bs-dropdown-spacer: 0.125rem; - --bs-dropdown-font-size: 1rem; - --bs-dropdown-color: var(--bs-body-color); - --bs-dropdown-bg: var(--bs-body-bg); - --bs-dropdown-border-color: var(--bs-border-color-translucent); - --bs-dropdown-border-radius: var(--bs-border-radius); - --bs-dropdown-border-width: var(--bs-border-width); - --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width)); - --bs-dropdown-divider-bg: var(--bs-border-color-translucent); - --bs-dropdown-divider-margin-y: 0.5rem; - --bs-dropdown-box-shadow: var(--bs-box-shadow); - --bs-dropdown-link-color: var(--bs-body-color); - --bs-dropdown-link-hover-color: var(--bs-body-color); - --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg); - --bs-dropdown-link-active-color: #fff; - --bs-dropdown-link-active-bg: #5d2f86; - --bs-dropdown-link-disabled-color: var(--bs-tertiary-color); - --bs-dropdown-item-padding-x: 1rem; - --bs-dropdown-item-padding-y: 0.25rem; - --bs-dropdown-header-color: #6c757d; - --bs-dropdown-header-padding-x: 1rem; - --bs-dropdown-header-padding-y: 0.5rem; - position: absolute; - z-index: var(--bs-dropdown-zindex); - display: none; - min-width: var(--bs-dropdown-min-width); - padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x); - margin: 0; - font-size: var(--bs-dropdown-font-size); - color: var(--bs-dropdown-color); - text-align: left; - list-style: none; - background-color: var(--bs-dropdown-bg); - background-clip: padding-box; - border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color); - border-radius: var(--bs-dropdown-border-radius); } - .dropdown-menu[data-bs-popper] { - top: 100%; - left: 0; - margin-top: var(--bs-dropdown-spacer); } - -.dropdown-menu-start { - --bs-position: start; } - .dropdown-menu-start[data-bs-popper] { - right: auto; - left: 0; } - -.dropdown-menu-end { - --bs-position: end; } - .dropdown-menu-end[data-bs-popper] { - right: 0; - left: auto; } - -@media (min-width: 576px) { - .dropdown-menu-sm-start { - --bs-position: start; } - .dropdown-menu-sm-start[data-bs-popper] { - right: auto; - left: 0; } - .dropdown-menu-sm-end { - --bs-position: end; } - .dropdown-menu-sm-end[data-bs-popper] { - right: 0; - left: auto; } } - -@media (min-width: 768px) { - .dropdown-menu-md-start { - --bs-position: start; } - .dropdown-menu-md-start[data-bs-popper] { - right: auto; - left: 0; } - .dropdown-menu-md-end { - --bs-position: end; } - .dropdown-menu-md-end[data-bs-popper] { - right: 0; - left: auto; } } - -@media (min-width: 992px) { - .dropdown-menu-lg-start { - --bs-position: start; } - .dropdown-menu-lg-start[data-bs-popper] { - right: auto; - left: 0; } - .dropdown-menu-lg-end { - --bs-position: end; } - .dropdown-menu-lg-end[data-bs-popper] { - right: 0; - left: auto; } } - -@media (min-width: 1200px) { - .dropdown-menu-xl-start { - --bs-position: start; } - .dropdown-menu-xl-start[data-bs-popper] { - right: auto; - left: 0; } - .dropdown-menu-xl-end { - --bs-position: end; } - .dropdown-menu-xl-end[data-bs-popper] { - right: 0; - left: auto; } } - -@media (min-width: 1400px) { - .dropdown-menu-xxl-start { - --bs-position: start; } - .dropdown-menu-xxl-start[data-bs-popper] { - right: auto; - left: 0; } - .dropdown-menu-xxl-end { - --bs-position: end; } - .dropdown-menu-xxl-end[data-bs-popper] { - right: 0; - left: auto; } } - -.dropup .dropdown-menu[data-bs-popper] { - top: auto; - bottom: 100%; - margin-top: 0; - margin-bottom: var(--bs-dropdown-spacer); } - -.dropup .dropdown-toggle::after { - display: inline-block; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0; - border-right: 0.3em solid transparent; - border-bottom: 0.3em solid; - border-left: 0.3em solid transparent; } - -.dropup .dropdown-toggle:empty::after { - margin-left: 0; } - -.dropend .dropdown-menu[data-bs-popper] { - top: 0; - right: auto; - left: 100%; - margin-top: 0; - margin-left: var(--bs-dropdown-spacer); } - -.dropend .dropdown-toggle::after { - display: inline-block; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0.3em solid transparent; - border-right: 0; - border-bottom: 0.3em solid transparent; - border-left: 0.3em solid; } - -.dropend .dropdown-toggle:empty::after { - margin-left: 0; } - -.dropend .dropdown-toggle::after { - vertical-align: 0; } - -.dropstart .dropdown-menu[data-bs-popper] { - top: 0; - right: 100%; - left: auto; - margin-top: 0; - margin-right: var(--bs-dropdown-spacer); } - -.dropstart .dropdown-toggle::after { - display: inline-block; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ""; } - -.dropstart .dropdown-toggle::after { - display: none; } - -.dropstart .dropdown-toggle::before { - display: inline-block; - margin-right: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0.3em solid transparent; - border-right: 0.3em solid; - border-bottom: 0.3em solid transparent; } - -.dropstart .dropdown-toggle:empty::after { - margin-left: 0; } - -.dropstart .dropdown-toggle::before { - vertical-align: 0; } - -.dropdown-divider { - height: 0; - margin: var(--bs-dropdown-divider-margin-y) 0; - overflow: hidden; - border-top: 1px solid var(--bs-dropdown-divider-bg); - opacity: 1; } - -.dropdown-item { - display: block; - width: 100%; - padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x); - clear: both; - font-weight: 400; - color: var(--bs-dropdown-link-color); - text-align: inherit; - white-space: nowrap; - background-color: transparent; - border: 0; - border-radius: var(--bs-dropdown-item-border-radius, 0); } - .dropdown-item:hover, .dropdown-item:focus { - color: var(--bs-dropdown-link-hover-color); - text-decoration: none; - background-color: var(--bs-dropdown-link-hover-bg); } - .dropdown-item.active, .dropdown-item:active { - color: var(--bs-dropdown-link-active-color); - text-decoration: none; - background-color: var(--bs-dropdown-link-active-bg); } - .dropdown-item.disabled, .dropdown-item:disabled { - color: var(--bs-dropdown-link-disabled-color); - pointer-events: none; - background-color: transparent; } - -.dropdown-menu.show { - display: block; } - -.dropdown-header { - display: block; - padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x); - margin-bottom: 0; - font-size: 0.875rem; - color: var(--bs-dropdown-header-color); - white-space: nowrap; } - -.dropdown-item-text { - display: block; - padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x); - color: var(--bs-dropdown-link-color); } - -.dropdown-menu-dark { - --bs-dropdown-color: #dee2e6; - --bs-dropdown-bg: #343a40; - --bs-dropdown-border-color: var(--bs-border-color-translucent); - --bs-dropdown-box-shadow: ; - --bs-dropdown-link-color: #dee2e6; - --bs-dropdown-link-hover-color: #fff; - --bs-dropdown-divider-bg: var(--bs-border-color-translucent); - --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15); - --bs-dropdown-link-active-color: #fff; - --bs-dropdown-link-active-bg: #5d2f86; - --bs-dropdown-link-disabled-color: #adb5bd; - --bs-dropdown-header-color: #adb5bd; } - -.btn-group, -.btn-group-vertical { - position: relative; - display: inline-flex; - vertical-align: middle; } - .btn-group > .btn, .search-form .btn-group > .search-submit, .comment-form .btn-group > input[type="submit"], - .btn-group-vertical > .btn, - .search-form .btn-group-vertical > .search-submit, - .comment-form .btn-group-vertical > input[type="submit"] { - position: relative; - flex: 1 1 auto; } - .btn-group > .btn-check:checked + .btn, .search-form .btn-group > .btn-check:checked + .search-submit, .comment-form .btn-group > .btn-check:checked + input[type="submit"], - .btn-group > .btn-check:focus + .btn, - .search-form .btn-group > .btn-check:focus + .search-submit, - .comment-form .btn-group > .btn-check:focus + input[type="submit"], - .btn-group > .btn:hover, - .search-form .btn-group > .search-submit:hover, - .comment-form .btn-group > input[type="submit"]:hover, - .btn-group > .btn:focus, - .search-form .btn-group > .search-submit:focus, - .comment-form .btn-group > input[type="submit"]:focus, - .btn-group > .btn:active, - .search-form .btn-group > .search-submit:active, - .comment-form .btn-group > input[type="submit"]:active, - .btn-group > .btn.active, - .search-form .btn-group > .active.search-submit, - .comment-form .btn-group > input.active[type="submit"], - .btn-group-vertical > .btn-check:checked + .btn, - .search-form .btn-group-vertical > .btn-check:checked + .search-submit, - .comment-form .btn-group-vertical > .btn-check:checked + input[type="submit"], - .btn-group-vertical > .btn-check:focus + .btn, - .search-form .btn-group-vertical > .btn-check:focus + .search-submit, - .comment-form .btn-group-vertical > .btn-check:focus + input[type="submit"], - .btn-group-vertical > .btn:hover, - .search-form .btn-group-vertical > .search-submit:hover, - .comment-form .btn-group-vertical > input[type="submit"]:hover, - .btn-group-vertical > .btn:focus, - .search-form .btn-group-vertical > .search-submit:focus, - .comment-form .btn-group-vertical > input[type="submit"]:focus, - .btn-group-vertical > .btn:active, - .search-form .btn-group-vertical > .search-submit:active, - .comment-form .btn-group-vertical > input[type="submit"]:active, - .btn-group-vertical > .btn.active, - .search-form .btn-group-vertical > .active.search-submit, - .comment-form .btn-group-vertical > input.active[type="submit"] { - z-index: 1; } - -.btn-toolbar { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; } - .btn-toolbar .input-group { - width: auto; } - -.btn-group { - border-radius: var(--bs-border-radius); } - .btn-group > :not(.btn-check:first-child) + .btn, .search-form .btn-group > :not(.btn-check:first-child) + .search-submit, .comment-form .btn-group > :not(.btn-check:first-child) + input[type="submit"], - .btn-group > .btn-group:not(:first-child) { - margin-left: calc(var(--bs-border-width) * -1); } - .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .search-form .btn-group > .search-submit:not(:last-child):not(.dropdown-toggle), .comment-form .btn-group > input[type="submit"]:not(:last-child):not(.dropdown-toggle), - .btn-group > .btn.dropdown-toggle-split:first-child, - .search-form .btn-group > .dropdown-toggle-split.search-submit:first-child, - .comment-form .btn-group > input.dropdown-toggle-split[type="submit"]:first-child, - .btn-group > .btn-group:not(:last-child) > .btn, - .search-form .btn-group > .btn-group:not(:last-child) > .search-submit, - .comment-form .btn-group > .btn-group:not(:last-child) > input[type="submit"] { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - .btn-group > .btn:nth-child(n + 3), .search-form .btn-group > .search-submit:nth-child(n + 3), .comment-form .btn-group > input[type="submit"]:nth-child(n + 3), - .btn-group > :not(.btn-check) + .btn, - .search-form .btn-group > :not(.btn-check) + .search-submit, - .comment-form .btn-group > :not(.btn-check) + input[type="submit"], - .btn-group > .btn-group:not(:first-child) > .btn, - .search-form .btn-group > .btn-group:not(:first-child) > .search-submit, - .comment-form .btn-group > .btn-group:not(:first-child) > input[type="submit"] { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - -.dropdown-toggle-split { - padding-right: 0.5625rem; - padding-left: 0.5625rem; } - .dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after { - margin-left: 0; } - .dropstart .dropdown-toggle-split::before { - margin-right: 0; } - -.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split, .search-form .btn-group-sm > .search-submit + .dropdown-toggle-split, .comment-form .btn-group-sm > input[type="submit"] + .dropdown-toggle-split { - padding-right: 0.375rem; - padding-left: 0.375rem; } - -.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split, .search-form .btn-group-lg > .search-submit + .dropdown-toggle-split, .comment-form .btn-group-lg > input[type="submit"] + .dropdown-toggle-split { - padding-right: 0.75rem; - padding-left: 0.75rem; } - -.btn-group-vertical { - flex-direction: column; - align-items: flex-start; - justify-content: center; } - .btn-group-vertical > .btn, .search-form .btn-group-vertical > .search-submit, .comment-form .btn-group-vertical > input[type="submit"], - .btn-group-vertical > .btn-group { - width: 100%; } - .btn-group-vertical > .btn:not(:first-child), .search-form .btn-group-vertical > .search-submit:not(:first-child), .comment-form .btn-group-vertical > input[type="submit"]:not(:first-child), - .btn-group-vertical > .btn-group:not(:first-child) { - margin-top: calc(var(--bs-border-width) * -1); } - .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), .search-form .btn-group-vertical > .search-submit:not(:last-child):not(.dropdown-toggle), .comment-form .btn-group-vertical > input[type="submit"]:not(:last-child):not(.dropdown-toggle), - .btn-group-vertical > .btn-group:not(:last-child) > .btn, - .search-form .btn-group-vertical > .btn-group:not(:last-child) > .search-submit, - .comment-form .btn-group-vertical > .btn-group:not(:last-child) > input[type="submit"] { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; } - .btn-group-vertical > .btn ~ .btn, .search-form .btn-group-vertical > .search-submit ~ .btn, .search-form .btn-group-vertical > .btn ~ .search-submit, .search-form .btn-group-vertical > .search-submit ~ .search-submit, .comment-form .btn-group-vertical > input[type="submit"] ~ .btn, .comment-form .search-form .btn-group-vertical > input[type="submit"] ~ .search-submit, .search-form .comment-form .btn-group-vertical > input[type="submit"] ~ .search-submit, .comment-form .btn-group-vertical > .btn ~ input[type="submit"], .comment-form .search-form .btn-group-vertical > .search-submit ~ input[type="submit"], .search-form .comment-form .btn-group-vertical > .search-submit ~ input[type="submit"], .comment-form .btn-group-vertical > input[type="submit"] ~ input[type="submit"], - .btn-group-vertical > .btn-group:not(:first-child) > .btn, - .search-form .btn-group-vertical > .btn-group:not(:first-child) > .search-submit, - .comment-form .btn-group-vertical > .btn-group:not(:first-child) > input[type="submit"] { - border-top-left-radius: 0; - border-top-right-radius: 0; } - -.nav { - --bs-nav-link-padding-x: 1rem; - --bs-nav-link-padding-y: 0.5rem; - --bs-nav-link-font-weight: ; - --bs-nav-link-color: var(--bs-link-color); - --bs-nav-link-hover-color: var(--bs-link-hover-color); - --bs-nav-link-disabled-color: var(--bs-secondary-color); - display: flex; - flex-wrap: wrap; - padding-left: 0; - margin-bottom: 0; - list-style: none; } - -.nav-link, .banner .nav a { - display: block; - padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); - font-size: var(--bs-nav-link-font-size); - font-weight: var(--bs-nav-link-font-weight); - color: var(--bs-nav-link-color); - background: none; - border: 0; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .nav-link, .banner .nav a { - transition: none; } } - .nav-link:hover, .banner .nav a:hover, .nav-link:focus, .banner .nav a:focus { - color: var(--bs-nav-link-hover-color); - text-decoration: none; } - .nav-link:focus-visible, .banner .nav a:focus-visible { - outline: 0; - box-shadow: 0 0 0 0.25rem rgba(93, 47, 134, 0.25); } - .nav-link.disabled, .banner .nav a.disabled, .nav-link:disabled, .banner .nav a:disabled { - color: var(--bs-nav-link-disabled-color); - pointer-events: none; - cursor: default; } - -.nav-tabs { - --bs-nav-tabs-border-width: var(--bs-border-width); - --bs-nav-tabs-border-color: var(--bs-border-color); - --bs-nav-tabs-border-radius: var(--bs-border-radius); - --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color); - --bs-nav-tabs-link-active-color: var(--bs-emphasis-color); - --bs-nav-tabs-link-active-bg: var(--bs-body-bg); - --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg); - border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color); } - .nav-tabs .nav-link, .nav-tabs .banner .nav a, .banner .nav .nav-tabs a { - margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width)); - border: var(--bs-nav-tabs-border-width) solid transparent; - border-top-left-radius: var(--bs-nav-tabs-border-radius); - border-top-right-radius: var(--bs-nav-tabs-border-radius); } - .nav-tabs .nav-link:hover, .nav-tabs .banner .nav a:hover, .banner .nav .nav-tabs a:hover, .nav-tabs .nav-link:focus, .nav-tabs .banner .nav a:focus, .banner .nav .nav-tabs a:focus { - isolation: isolate; - border-color: var(--bs-nav-tabs-link-hover-border-color); } - .nav-tabs .nav-link.active, .nav-tabs .banner .nav a.active, .banner .nav .nav-tabs a.active, - .nav-tabs .nav-item.show .nav-link, - .nav-tabs .nav-item.show .banner .nav a, - .banner .nav .nav-tabs .nav-item.show a, - .nav-tabs .banner .nav li.show .nav-link, - .nav-tabs .banner .nav li.show a, - .banner .nav .nav-tabs li.show .nav-link, - .banner .nav .nav-tabs li.show a { - color: var(--bs-nav-tabs-link-active-color); - background-color: var(--bs-nav-tabs-link-active-bg); - border-color: var(--bs-nav-tabs-link-active-border-color); } - .nav-tabs .dropdown-menu { - margin-top: calc(-1 * var(--bs-nav-tabs-border-width)); - border-top-left-radius: 0; - border-top-right-radius: 0; } - -.nav-pills { - --bs-nav-pills-border-radius: var(--bs-border-radius); - --bs-nav-pills-link-active-color: #fff; - --bs-nav-pills-link-active-bg: #5d2f86; } - .nav-pills .nav-link, .nav-pills .banner .nav a, .banner .nav .nav-pills a { - border-radius: var(--bs-nav-pills-border-radius); } - .nav-pills .nav-link.active, .nav-pills .banner .nav a.active, .banner .nav .nav-pills a.active, - .nav-pills .show > .nav-link, - .nav-pills .banner .nav .show > a, - .banner .nav .nav-pills .show > a { - color: var(--bs-nav-pills-link-active-color); - background-color: var(--bs-nav-pills-link-active-bg); } - -.nav-underline { - --bs-nav-underline-gap: 1rem; - --bs-nav-underline-border-width: 0.125rem; - --bs-nav-underline-link-active-color: var(--bs-emphasis-color); - gap: var(--bs-nav-underline-gap); } - .nav-underline .nav-link, .nav-underline .banner .nav a, .banner .nav .nav-underline a { - padding-right: 0; - padding-left: 0; - border-bottom: var(--bs-nav-underline-border-width) solid transparent; } - .nav-underline .nav-link:hover, .nav-underline .banner .nav a:hover, .banner .nav .nav-underline a:hover, .nav-underline .nav-link:focus, .nav-underline .banner .nav a:focus, .banner .nav .nav-underline a:focus { - border-bottom-color: currentcolor; } - .nav-underline .nav-link.active, .nav-underline .banner .nav a.active, .banner .nav .nav-underline a.active, - .nav-underline .show > .nav-link, - .nav-underline .banner .nav .show > a, - .banner .nav .nav-underline .show > a { - font-weight: 700; - color: var(--bs-nav-underline-link-active-color); - border-bottom-color: currentcolor; } - -.nav-fill > .nav-link, .banner .nav .nav-fill > a, -.nav-fill .nav-item, -.nav-fill .banner .nav li, -.banner .nav .nav-fill li { - flex: 1 1 auto; - text-align: center; } - -.nav-justified > .nav-link, .banner .nav .nav-justified > a, -.nav-justified .nav-item, -.nav-justified .banner .nav li, -.banner .nav .nav-justified li { - flex-basis: 0; - flex-grow: 1; - text-align: center; } - -.nav-fill .nav-item .nav-link, .nav-fill .nav-item .banner .nav a, .banner .nav .nav-fill .nav-item a, .nav-fill .banner .nav li .nav-link, .nav-fill .banner .nav li a, .banner .nav .nav-fill li .nav-link, .banner .nav .nav-fill li a, -.nav-justified .nav-item .nav-link, -.nav-justified .nav-item .banner .nav a, -.banner .nav .nav-justified .nav-item a, -.nav-justified .banner .nav li .nav-link, -.nav-justified .banner .nav li a, -.banner .nav .nav-justified li .nav-link, -.banner .nav .nav-justified li a { - width: 100%; } - -.tab-content > .tab-pane { - display: none; } - -.tab-content > .active { - display: block; } - -.navbar { - --bs-navbar-padding-x: 0; - --bs-navbar-padding-y: 0.5rem; - --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65); - --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8); - --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); - --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1); - --bs-navbar-brand-padding-y: 0.3125rem; - --bs-navbar-brand-margin-end: 1rem; - --bs-navbar-brand-font-size: 1.25rem; - --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1); - --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1); - --bs-navbar-nav-link-padding-x: 0.5rem; - --bs-navbar-toggler-padding-y: 0.25rem; - --bs-navbar-toggler-padding-x: 0.75rem; - --bs-navbar-toggler-font-size: 1.25rem; - --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); - --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15); - --bs-navbar-toggler-border-radius: var(--bs-border-radius); - --bs-navbar-toggler-focus-width: 0; - --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out; - position: relative; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x); } - .navbar > .container, - .navbar > .container-fluid, - .navbar > .container-sm, - .navbar > .container-md, - .navbar > .container-lg, - .navbar > .container-xl, - .navbar > .container-xxl { - display: flex; - flex-wrap: inherit; - align-items: center; - justify-content: space-between; } - -.navbar-brand { - padding-top: var(--bs-navbar-brand-padding-y); - padding-bottom: var(--bs-navbar-brand-padding-y); - margin-right: var(--bs-navbar-brand-margin-end); - font-size: var(--bs-navbar-brand-font-size); - color: var(--bs-navbar-brand-color); - white-space: nowrap; } - .navbar-brand:hover, .navbar-brand:focus { - color: var(--bs-navbar-brand-hover-color); - text-decoration: none; } - -.navbar-nav { - --bs-nav-link-padding-x: 0; - --bs-nav-link-padding-y: 0.5rem; - --bs-nav-link-font-weight: ; - --bs-nav-link-color: var(--bs-navbar-color); - --bs-nav-link-hover-color: var(--bs-navbar-hover-color); - --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color); - display: flex; - flex-direction: column; - padding-left: 0; - margin-bottom: 0; - list-style: none; } - .navbar-nav .nav-link.active, .navbar-nav .banner .nav a.active, .banner .nav .navbar-nav a.active, .navbar-nav .nav-link.show, .navbar-nav .banner .nav a.show, .banner .nav .navbar-nav a.show { - color: var(--bs-navbar-active-color); } - .navbar-nav .dropdown-menu { - position: static; } - -.navbar-text { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - color: var(--bs-navbar-color); } - .navbar-text a, - .navbar-text a:hover, - .navbar-text a:focus { - color: var(--bs-navbar-active-color); } - -.navbar-collapse { - flex-basis: 100%; - flex-grow: 1; - align-items: center; } - -.navbar-toggler { - padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x); - font-size: var(--bs-navbar-toggler-font-size); - line-height: 1; - color: var(--bs-navbar-color); - background-color: transparent; - border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color); - border-radius: var(--bs-navbar-toggler-border-radius); - transition: var(--bs-navbar-toggler-transition); } - @media (prefers-reduced-motion: reduce) { - .navbar-toggler { - transition: none; } } - .navbar-toggler:hover { - text-decoration: none; } - .navbar-toggler:focus { - text-decoration: none; - outline: 0; - box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width); } - -.navbar-toggler-icon { - display: inline-block; - width: 1.5em; - height: 1.5em; - vertical-align: middle; - background-image: var(--bs-navbar-toggler-icon-bg); - background-repeat: no-repeat; - background-position: center; - background-size: 100%; } - -.navbar-nav-scroll { - max-height: var(--bs-scroll-height, 75vh); - overflow-y: auto; } - -@media (min-width: 576px) { - .navbar-expand-sm { - flex-wrap: nowrap; - justify-content: flex-start; } - .navbar-expand-sm .navbar-nav { - flex-direction: row; } - .navbar-expand-sm .navbar-nav .dropdown-menu { - position: absolute; } - .navbar-expand-sm .navbar-nav .nav-link, .navbar-expand-sm .navbar-nav .banner .nav a, .banner .nav .navbar-expand-sm .navbar-nav a { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); } - .navbar-expand-sm .navbar-nav-scroll { - overflow: visible; } - .navbar-expand-sm .navbar-collapse { - display: flex !important; - flex-basis: auto; } - .navbar-expand-sm .navbar-toggler { - display: none; } - .navbar-expand-sm .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; } - .navbar-expand-sm .offcanvas .offcanvas-header { - display: none; } - .navbar-expand-sm .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; } } - -@media (min-width: 768px) { - .navbar-expand-md { - flex-wrap: nowrap; - justify-content: flex-start; } - .navbar-expand-md .navbar-nav { - flex-direction: row; } - .navbar-expand-md .navbar-nav .dropdown-menu { - position: absolute; } - .navbar-expand-md .navbar-nav .nav-link, .navbar-expand-md .navbar-nav .banner .nav a, .banner .nav .navbar-expand-md .navbar-nav a { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); } - .navbar-expand-md .navbar-nav-scroll { - overflow: visible; } - .navbar-expand-md .navbar-collapse { - display: flex !important; - flex-basis: auto; } - .navbar-expand-md .navbar-toggler { - display: none; } - .navbar-expand-md .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; } - .navbar-expand-md .offcanvas .offcanvas-header { - display: none; } - .navbar-expand-md .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; } } - -@media (min-width: 992px) { - .navbar-expand-lg { - flex-wrap: nowrap; - justify-content: flex-start; } - .navbar-expand-lg .navbar-nav { - flex-direction: row; } - .navbar-expand-lg .navbar-nav .dropdown-menu { - position: absolute; } - .navbar-expand-lg .navbar-nav .nav-link, .navbar-expand-lg .navbar-nav .banner .nav a, .banner .nav .navbar-expand-lg .navbar-nav a { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); } - .navbar-expand-lg .navbar-nav-scroll { - overflow: visible; } - .navbar-expand-lg .navbar-collapse { - display: flex !important; - flex-basis: auto; } - .navbar-expand-lg .navbar-toggler { - display: none; } - .navbar-expand-lg .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; } - .navbar-expand-lg .offcanvas .offcanvas-header { - display: none; } - .navbar-expand-lg .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; } } - -@media (min-width: 1200px) { - .navbar-expand-xl { - flex-wrap: nowrap; - justify-content: flex-start; } - .navbar-expand-xl .navbar-nav { - flex-direction: row; } - .navbar-expand-xl .navbar-nav .dropdown-menu { - position: absolute; } - .navbar-expand-xl .navbar-nav .nav-link, .navbar-expand-xl .navbar-nav .banner .nav a, .banner .nav .navbar-expand-xl .navbar-nav a { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); } - .navbar-expand-xl .navbar-nav-scroll { - overflow: visible; } - .navbar-expand-xl .navbar-collapse { - display: flex !important; - flex-basis: auto; } - .navbar-expand-xl .navbar-toggler { - display: none; } - .navbar-expand-xl .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; } - .navbar-expand-xl .offcanvas .offcanvas-header { - display: none; } - .navbar-expand-xl .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; } } - -@media (min-width: 1400px) { - .navbar-expand-xxl { - flex-wrap: nowrap; - justify-content: flex-start; } - .navbar-expand-xxl .navbar-nav { - flex-direction: row; } - .navbar-expand-xxl .navbar-nav .dropdown-menu { - position: absolute; } - .navbar-expand-xxl .navbar-nav .nav-link, .navbar-expand-xxl .navbar-nav .banner .nav a, .banner .nav .navbar-expand-xxl .navbar-nav a { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); } - .navbar-expand-xxl .navbar-nav-scroll { - overflow: visible; } - .navbar-expand-xxl .navbar-collapse { - display: flex !important; - flex-basis: auto; } - .navbar-expand-xxl .navbar-toggler { - display: none; } - .navbar-expand-xxl .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; } - .navbar-expand-xxl .offcanvas .offcanvas-header { - display: none; } - .navbar-expand-xxl .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; } } - -.navbar-expand { - flex-wrap: nowrap; - justify-content: flex-start; } - .navbar-expand .navbar-nav { - flex-direction: row; } - .navbar-expand .navbar-nav .dropdown-menu { - position: absolute; } - .navbar-expand .navbar-nav .nav-link, .navbar-expand .navbar-nav .banner .nav a, .banner .nav .navbar-expand .navbar-nav a { - padding-right: var(--bs-navbar-nav-link-padding-x); - padding-left: var(--bs-navbar-nav-link-padding-x); } - .navbar-expand .navbar-nav-scroll { - overflow: visible; } - .navbar-expand .navbar-collapse { - display: flex !important; - flex-basis: auto; } - .navbar-expand .navbar-toggler { - display: none; } - .navbar-expand .offcanvas { - position: static; - z-index: auto; - flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - transform: none !important; - transition: none; } - .navbar-expand .offcanvas .offcanvas-header { - display: none; } - .navbar-expand .offcanvas .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; } - -.navbar-dark, -.navbar[data-bs-theme="dark"] { - --bs-navbar-color: #c1c3c8; - --bs-navbar-hover-color: #b3c7ff; - --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25); - --bs-navbar-active-color: #b3c7ff; - --bs-navbar-brand-color: #b3c7ff; - --bs-navbar-brand-hover-color: #b3c7ff; - --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1); - --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c1c3c8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } - -[data-bs-theme="dark"] .navbar-toggler-icon { - --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c1c3c8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } - -.card { - --bs-card-spacer-y: 1rem; - --bs-card-spacer-x: 1rem; - --bs-card-title-spacer-y: 0.5rem; - --bs-card-title-color: ; - --bs-card-subtitle-color: ; - --bs-card-border-width: var(--bs-border-width); - --bs-card-border-color: #e9ecef; - --bs-card-border-radius: var(--bs-border-radius); - --bs-card-box-shadow: ; - --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))); - --bs-card-cap-padding-y: 0.5rem; - --bs-card-cap-padding-x: 1rem; - --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03); - --bs-card-cap-color: ; - --bs-card-height: ; - --bs-card-color: ; - --bs-card-bg: var(--bs-body-bg); - --bs-card-img-overlay-padding: 1rem; - --bs-card-group-margin: 1.5rem; - position: relative; - display: flex; - flex-direction: column; - min-width: 0; - height: var(--bs-card-height); - color: var(--bs-body-color); - word-wrap: break-word; - background-color: var(--bs-card-bg); - background-clip: border-box; - border: var(--bs-card-border-width) solid var(--bs-card-border-color); - border-radius: var(--bs-card-border-radius); } - .card > hr { - margin-right: 0; - margin-left: 0; } - .card > .list-group { - border-top: inherit; - border-bottom: inherit; } - .card > .list-group:first-child { - border-top-width: 0; - border-top-left-radius: var(--bs-card-inner-border-radius); - border-top-right-radius: var(--bs-card-inner-border-radius); } - .card > .list-group:last-child { - border-bottom-width: 0; - border-bottom-right-radius: var(--bs-card-inner-border-radius); - border-bottom-left-radius: var(--bs-card-inner-border-radius); } - .card > .card-header + .list-group, - .card > .list-group + .card-footer { - border-top: 0; } - -.card-body { - flex: 1 1 auto; - padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); - color: var(--bs-card-color); } - -.card-title { - margin-bottom: var(--bs-card-title-spacer-y); - color: var(--bs-card-title-color); } - -.card-subtitle { - margin-top: calc(-.5 * var(--bs-card-title-spacer-y)); - margin-bottom: 0; - color: var(--bs-card-subtitle-color); } - -.card-text:last-child { - margin-bottom: 0; } - -.card-link:hover { - text-decoration: none; } - -.card-link + .card-link { - margin-left: var(--bs-card-spacer-x); } - -.card-header { - padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x); - margin-bottom: 0; - color: var(--bs-card-cap-color); - background-color: var(--bs-card-cap-bg); - border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color); } - .card-header:first-child { - border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; } - -.card-footer { - padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x); - color: var(--bs-card-cap-color); - background-color: var(--bs-card-cap-bg); - border-top: var(--bs-card-border-width) solid var(--bs-card-border-color); } - .card-footer:last-child { - border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); } - -.card-header-tabs { - margin-right: calc(-.5 * var(--bs-card-cap-padding-x)); - margin-bottom: calc(-1 * var(--bs-card-cap-padding-y)); - margin-left: calc(-.5 * var(--bs-card-cap-padding-x)); - border-bottom: 0; } - .card-header-tabs .nav-link.active, .card-header-tabs .banner .nav a.active, .banner .nav .card-header-tabs a.active { - background-color: var(--bs-card-bg); - border-bottom-color: var(--bs-card-bg); } - -.card-header-pills { - margin-right: calc(-.5 * var(--bs-card-cap-padding-x)); - margin-left: calc(-.5 * var(--bs-card-cap-padding-x)); } - -.card-img-overlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - padding: var(--bs-card-img-overlay-padding); - border-radius: var(--bs-card-inner-border-radius); } - -.card-img, -.card-img-top, -.card-img-bottom { - width: 100%; } - -.card-img, -.card-img-top { - border-top-left-radius: var(--bs-card-inner-border-radius); - border-top-right-radius: var(--bs-card-inner-border-radius); } - -.card-img, -.card-img-bottom { - border-bottom-right-radius: var(--bs-card-inner-border-radius); - border-bottom-left-radius: var(--bs-card-inner-border-radius); } - -.card-group > .card { - margin-bottom: var(--bs-card-group-margin); } - -@media (min-width: 576px) { - .card-group { - display: flex; - flex-flow: row wrap; } - .card-group > .card { - flex: 1 0 0%; - margin-bottom: 0; } - .card-group > .card + .card { - margin-left: 0; - border-left: 0; } - .card-group > .card:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - .card-group > .card:not(:last-child) .card-img-top, - .card-group > .card:not(:last-child) .card-header { - border-top-right-radius: 0; } - .card-group > .card:not(:last-child) .card-img-bottom, - .card-group > .card:not(:last-child) .card-footer { - border-bottom-right-radius: 0; } - .card-group > .card:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - .card-group > .card:not(:first-child) .card-img-top, - .card-group > .card:not(:first-child) .card-header { - border-top-left-radius: 0; } - .card-group > .card:not(:first-child) .card-img-bottom, - .card-group > .card:not(:first-child) .card-footer { - border-bottom-left-radius: 0; } } - -.accordion { - --bs-accordion-color: var(--bs-body-color); - --bs-accordion-bg: var(--bs-body-bg); - --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; - --bs-accordion-border-color: var(--bs-border-color); - --bs-accordion-border-width: var(--bs-border-width); - --bs-accordion-border-radius: var(--bs-border-radius); - --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))); - --bs-accordion-btn-padding-x: 1.25rem; - --bs-accordion-btn-padding-y: 1rem; - --bs-accordion-btn-color: var(--bs-body-color); - --bs-accordion-btn-bg: var(--bs-accordion-bg); - --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d2d35' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); - --bs-accordion-btn-icon-width: 1.25rem; - --bs-accordion-btn-icon-transform: rotate(-180deg); - --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out; - --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23251336' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); - --bs-accordion-btn-focus-box-shadow: none; - --bs-accordion-body-padding-x: 1.25rem; - --bs-accordion-body-padding-y: 1rem; - --bs-accordion-active-color: var(--bs-primary-text-emphasis); - --bs-accordion-active-bg: var(--bs-primary-bg-subtle); } - -.accordion-button { - position: relative; - display: flex; - align-items: center; - width: 100%; - padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x); - font-size: 1rem; - color: var(--bs-accordion-btn-color); - text-align: left; - background-color: var(--bs-accordion-btn-bg); - border: 0; - border-radius: 0; - overflow-anchor: none; - transition: var(--bs-accordion-transition); } - @media (prefers-reduced-motion: reduce) { - .accordion-button { - transition: none; } } - .accordion-button:not(.collapsed) { - color: var(--bs-accordion-active-color); - background-color: var(--bs-accordion-active-bg); - box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); } - .accordion-button:not(.collapsed)::after { - background-image: var(--bs-accordion-btn-active-icon); - transform: var(--bs-accordion-btn-icon-transform); } - .accordion-button::after { - flex-shrink: 0; - width: var(--bs-accordion-btn-icon-width); - height: var(--bs-accordion-btn-icon-width); - margin-left: auto; - content: ""; - background-image: var(--bs-accordion-btn-icon); - background-repeat: no-repeat; - background-size: var(--bs-accordion-btn-icon-width); - transition: var(--bs-accordion-btn-icon-transition); } - @media (prefers-reduced-motion: reduce) { - .accordion-button::after { - transition: none; } } - .accordion-button:hover { - z-index: 2; } - .accordion-button:focus { - z-index: 3; - outline: 0; - box-shadow: var(--bs-accordion-btn-focus-box-shadow); } - -.accordion-header { - margin-bottom: 0; } - -.accordion-item { - color: var(--bs-accordion-color); - background-color: var(--bs-accordion-bg); - border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); } - .accordion-item:first-of-type { - border-top-left-radius: var(--bs-accordion-border-radius); - border-top-right-radius: var(--bs-accordion-border-radius); } - .accordion-item:first-of-type > .accordion-header .accordion-button { - border-top-left-radius: var(--bs-accordion-inner-border-radius); - border-top-right-radius: var(--bs-accordion-inner-border-radius); } - .accordion-item:not(:first-of-type) { - border-top: 0; } - .accordion-item:last-of-type { - border-bottom-right-radius: var(--bs-accordion-border-radius); - border-bottom-left-radius: var(--bs-accordion-border-radius); } - .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed { - border-bottom-right-radius: var(--bs-accordion-inner-border-radius); - border-bottom-left-radius: var(--bs-accordion-inner-border-radius); } - .accordion-item:last-of-type > .accordion-collapse { - border-bottom-right-radius: var(--bs-accordion-border-radius); - border-bottom-left-radius: var(--bs-accordion-border-radius); } - -.accordion-body { - padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x); } - -.accordion-flush > .accordion-item { - border-right: 0; - border-left: 0; - border-radius: 0; } - .accordion-flush > .accordion-item:first-child { - border-top: 0; } - .accordion-flush > .accordion-item:last-child { - border-bottom: 0; } - .accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed { - border-radius: 0; } - .accordion-flush > .accordion-item > .accordion-collapse { - border-radius: 0; } - -[data-bs-theme="dark"] .accordion-button::after { - --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239e82b6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); - --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239e82b6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } - -.breadcrumb { - --bs-breadcrumb-padding-x: 0; - --bs-breadcrumb-padding-y: 0; - --bs-breadcrumb-margin-bottom: 1rem; - --bs-breadcrumb-bg: ; - --bs-breadcrumb-border-radius: ; - --bs-breadcrumb-divider-color: var(--bs-secondary-color); - --bs-breadcrumb-item-padding-x: 0.5rem; - --bs-breadcrumb-item-active-color: var(--bs-secondary-color); - display: flex; - flex-wrap: wrap; - padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x); - margin-bottom: var(--bs-breadcrumb-margin-bottom); - font-size: var(--bs-breadcrumb-font-size); - list-style: none; - background-color: var(--bs-breadcrumb-bg); - border-radius: var(--bs-breadcrumb-border-radius); } - -.breadcrumb-item + .breadcrumb-item { - padding-left: var(--bs-breadcrumb-item-padding-x); } - .breadcrumb-item + .breadcrumb-item::before { - float: left; - padding-right: var(--bs-breadcrumb-item-padding-x); - color: var(--bs-breadcrumb-divider-color); - content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */; } - -.breadcrumb-item.active { - color: var(--bs-breadcrumb-item-active-color); } - -.pagination { - --bs-pagination-padding-x: 0.75rem; - --bs-pagination-padding-y: 0.375rem; - --bs-pagination-font-size: 1rem; - --bs-pagination-color: var(--bs-link-color); - --bs-pagination-bg: var(--bs-body-bg); - --bs-pagination-border-width: var(--bs-border-width); - --bs-pagination-border-color: var(--bs-border-color); - --bs-pagination-border-radius: var(--bs-border-radius); - --bs-pagination-hover-color: var(--bs-link-hover-color); - --bs-pagination-hover-bg: var(--bs-tertiary-bg); - --bs-pagination-hover-border-color: var(--bs-border-color); - --bs-pagination-focus-color: var(--bs-link-hover-color); - --bs-pagination-focus-bg: var(--bs-secondary-bg); - --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(93, 47, 134, 0.25); - --bs-pagination-active-color: #fff; - --bs-pagination-active-bg: #5d2f86; - --bs-pagination-active-border-color: #5d2f86; - --bs-pagination-disabled-color: var(--bs-secondary-color); - --bs-pagination-disabled-bg: var(--bs-secondary-bg); - --bs-pagination-disabled-border-color: var(--bs-border-color); - display: flex; - padding-left: 0; - list-style: none; } - -.page-link { - position: relative; - display: block; - padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x); - font-size: var(--bs-pagination-font-size); - color: var(--bs-pagination-color); - background-color: var(--bs-pagination-bg); - border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color); - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .page-link { - transition: none; } } - .page-link:hover { - z-index: 2; - color: var(--bs-pagination-hover-color); - text-decoration: none; - background-color: var(--bs-pagination-hover-bg); - border-color: var(--bs-pagination-hover-border-color); } - .page-link:focus { - z-index: 3; - color: var(--bs-pagination-focus-color); - background-color: var(--bs-pagination-focus-bg); - outline: 0; - box-shadow: var(--bs-pagination-focus-box-shadow); } - .page-link.active, .active > .page-link { - z-index: 3; - color: var(--bs-pagination-active-color); - background-color: var(--bs-pagination-active-bg); - border-color: var(--bs-pagination-active-border-color); } - .page-link.disabled, .disabled > .page-link { - color: var(--bs-pagination-disabled-color); - pointer-events: none; - background-color: var(--bs-pagination-disabled-bg); - border-color: var(--bs-pagination-disabled-border-color); } - -.page-item:not(:first-child) .page-link { - margin-left: calc(var(--bs-border-width) * -1); } - -.page-item:first-child .page-link { - border-top-left-radius: var(--bs-pagination-border-radius); - border-bottom-left-radius: var(--bs-pagination-border-radius); } - -.page-item:last-child .page-link { - border-top-right-radius: var(--bs-pagination-border-radius); - border-bottom-right-radius: var(--bs-pagination-border-radius); } - -.pagination-lg { - --bs-pagination-padding-x: 1.5rem; - --bs-pagination-padding-y: 0.75rem; - --bs-pagination-font-size: 1.25rem; - --bs-pagination-border-radius: var(--bs-border-radius-lg); } - -.pagination-sm { - --bs-pagination-padding-x: 0.5rem; - --bs-pagination-padding-y: 0.25rem; - --bs-pagination-font-size: 0.875rem; - --bs-pagination-border-radius: var(--bs-border-radius-sm); } - -.badge { - --bs-badge-padding-x: 0.65em; - --bs-badge-padding-y: 0.35em; - --bs-badge-font-size: 0.75em; - --bs-badge-font-weight: 700; - --bs-badge-color: #fff; - --bs-badge-border-radius: var(--bs-border-radius); - display: inline-block; - padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x); - font-size: var(--bs-badge-font-size); - font-weight: var(--bs-badge-font-weight); - line-height: 1; - color: var(--bs-badge-color); - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: var(--bs-badge-border-radius); } - .badge:empty { - display: none; } - -.btn .badge, .search-form .search-submit .badge, .comment-form input[type="submit"] .badge { - position: relative; - top: -1px; } - -.alert { - --bs-alert-bg: transparent; - --bs-alert-padding-x: 1.5rem; - --bs-alert-padding-y: 1rem; - --bs-alert-margin-bottom: 0; - --bs-alert-color: inherit; - --bs-alert-border-color: transparent; - --bs-alert-border: 0 solid var(--bs-alert-border-color); - --bs-alert-border-radius: 0; - --bs-alert-link-color: inherit; - position: relative; - padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x); - margin-bottom: var(--bs-alert-margin-bottom); - color: var(--bs-alert-color); - background-color: var(--bs-alert-bg); - border: var(--bs-alert-border); - border-radius: var(--bs-alert-border-radius); } - -.alert-heading { - color: inherit; } - -.alert-link { - font-weight: 700; - color: var(--bs-alert-link-color); } - -.alert-dismissible { - padding-right: 4.5rem; } - .alert-dismissible .btn-close { - position: absolute; - top: 0; - right: 0; - z-index: 2; - padding: 1.25rem 1.5rem; } - -.alert-primary { - --bs-alert-color: var(--bs-primary-text-emphasis); - --bs-alert-bg: var(--bs-primary-bg-subtle); - --bs-alert-border-color: var(--bs-primary-border-subtle); - --bs-alert-link-color: var(--bs-primary-text-emphasis); } - -.alert-secondary { - --bs-alert-color: var(--bs-secondary-text-emphasis); - --bs-alert-bg: var(--bs-secondary-bg-subtle); - --bs-alert-border-color: var(--bs-secondary-border-subtle); - --bs-alert-link-color: var(--bs-secondary-text-emphasis); } - -.alert-success { - --bs-alert-color: var(--bs-success-text-emphasis); - --bs-alert-bg: var(--bs-success-bg-subtle); - --bs-alert-border-color: var(--bs-success-border-subtle); - --bs-alert-link-color: var(--bs-success-text-emphasis); } - -.alert-info { - --bs-alert-color: var(--bs-info-text-emphasis); - --bs-alert-bg: var(--bs-info-bg-subtle); - --bs-alert-border-color: var(--bs-info-border-subtle); - --bs-alert-link-color: var(--bs-info-text-emphasis); } - -.alert-warning { - --bs-alert-color: var(--bs-warning-text-emphasis); - --bs-alert-bg: var(--bs-warning-bg-subtle); - --bs-alert-border-color: var(--bs-warning-border-subtle); - --bs-alert-link-color: var(--bs-warning-text-emphasis); } - -.alert-danger { - --bs-alert-color: var(--bs-danger-text-emphasis); - --bs-alert-bg: var(--bs-danger-bg-subtle); - --bs-alert-border-color: var(--bs-danger-border-subtle); - --bs-alert-link-color: var(--bs-danger-text-emphasis); } - -.alert-light { - --bs-alert-color: var(--bs-light-text-emphasis); - --bs-alert-bg: var(--bs-light-bg-subtle); - --bs-alert-border-color: var(--bs-light-border-subtle); - --bs-alert-link-color: var(--bs-light-text-emphasis); } - -.alert-dark { - --bs-alert-color: var(--bs-dark-text-emphasis); - --bs-alert-bg: var(--bs-dark-bg-subtle); - --bs-alert-border-color: var(--bs-dark-border-subtle); - --bs-alert-link-color: var(--bs-dark-text-emphasis); } - -@keyframes progress-bar-stripes { - 0% { - background-position-x: 1rem; } } - -.progress, -.progress-stacked { - --bs-progress-height: 1rem; - --bs-progress-font-size: 0.75rem; - --bs-progress-bg: var(--bs-secondary-bg); - --bs-progress-border-radius: var(--bs-border-radius); - --bs-progress-box-shadow: var(--bs-box-shadow-inset); - --bs-progress-bar-color: #fff; - --bs-progress-bar-bg: #5d2f86; - --bs-progress-bar-transition: width 0.6s ease; - display: flex; - height: var(--bs-progress-height); - overflow: hidden; - font-size: var(--bs-progress-font-size); - background-color: var(--bs-progress-bg); - border-radius: var(--bs-progress-border-radius); } - -.progress-bar { - display: flex; - flex-direction: column; - justify-content: center; - overflow: hidden; - color: var(--bs-progress-bar-color); - text-align: center; - white-space: nowrap; - background-color: var(--bs-progress-bar-bg); - transition: var(--bs-progress-bar-transition); } - @media (prefers-reduced-motion: reduce) { - .progress-bar { - transition: none; } } -.progress-bar-striped { - background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-size: var(--bs-progress-height) var(--bs-progress-height); } - -.progress-stacked > .progress { - overflow: visible; } - -.progress-stacked > .progress > .progress-bar { - width: 100%; } - -.progress-bar-animated { - animation: 1s linear infinite progress-bar-stripes; } - @media (prefers-reduced-motion: reduce) { - .progress-bar-animated { - animation: none; } } -.list-group { - --bs-list-group-color: var(--bs-body-color); - --bs-list-group-bg: var(--bs-body-bg); - --bs-list-group-border-color: var(--bs-border-color); - --bs-list-group-border-width: var(--bs-border-width); - --bs-list-group-border-radius: var(--bs-border-radius); - --bs-list-group-item-padding-x: 1rem; - --bs-list-group-item-padding-y: 0.5rem; - --bs-list-group-action-color: var(--bs-secondary-color); - --bs-list-group-action-hover-color: var(--bs-emphasis-color); - --bs-list-group-action-hover-bg: var(--bs-tertiary-bg); - --bs-list-group-action-active-color: var(--bs-body-color); - --bs-list-group-action-active-bg: var(--bs-secondary-bg); - --bs-list-group-disabled-color: var(--bs-secondary-color); - --bs-list-group-disabled-bg: var(--bs-body-bg); - --bs-list-group-active-color: #fff; - --bs-list-group-active-bg: #5d2f86; - --bs-list-group-active-border-color: #5d2f86; - display: flex; - flex-direction: column; - padding-left: 0; - margin-bottom: 0; - border-radius: var(--bs-list-group-border-radius); } - -.list-group-numbered { - list-style-type: none; - counter-reset: section; } - .list-group-numbered > .list-group-item::before { - content: counters(section, ".") ". "; - counter-increment: section; } - -.list-group-item-action { - width: 100%; - color: var(--bs-list-group-action-color); - text-align: inherit; } - .list-group-item-action:hover, .list-group-item-action:focus { - z-index: 1; - color: var(--bs-list-group-action-hover-color); - text-decoration: none; - background-color: var(--bs-list-group-action-hover-bg); } - .list-group-item-action:active { - color: var(--bs-list-group-action-active-color); - background-color: var(--bs-list-group-action-active-bg); } - -.list-group-item { - position: relative; - display: block; - padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x); - color: var(--bs-list-group-color); - background-color: var(--bs-list-group-bg); - border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color); } - .list-group-item:first-child { - border-top-left-radius: inherit; - border-top-right-radius: inherit; } - .list-group-item:last-child { - border-bottom-right-radius: inherit; - border-bottom-left-radius: inherit; } - .list-group-item.disabled, .list-group-item:disabled { - color: var(--bs-list-group-disabled-color); - pointer-events: none; - background-color: var(--bs-list-group-disabled-bg); } - .list-group-item.active { - z-index: 2; - color: var(--bs-list-group-active-color); - background-color: var(--bs-list-group-active-bg); - border-color: var(--bs-list-group-active-border-color); } - .list-group-item + .list-group-item { - border-top-width: 0; } - .list-group-item + .list-group-item.active { - margin-top: calc(-1 * var(--bs-list-group-border-width)); - border-top-width: var(--bs-list-group-border-width); } - -.list-group-horizontal { - flex-direction: row; } - .list-group-horizontal > .list-group-item:first-child:not(:last-child) { - border-bottom-left-radius: var(--bs-list-group-border-radius); - border-top-right-radius: 0; } - .list-group-horizontal > .list-group-item:last-child:not(:first-child) { - border-top-right-radius: var(--bs-list-group-border-radius); - border-bottom-left-radius: 0; } - .list-group-horizontal > .list-group-item.active { - margin-top: 0; } - .list-group-horizontal > .list-group-item + .list-group-item { - border-top-width: var(--bs-list-group-border-width); - border-left-width: 0; } - .list-group-horizontal > .list-group-item + .list-group-item.active { - margin-left: calc(-1 * var(--bs-list-group-border-width)); - border-left-width: var(--bs-list-group-border-width); } - -@media (min-width: 576px) { - .list-group-horizontal-sm { - flex-direction: row; } - .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) { - border-bottom-left-radius: var(--bs-list-group-border-radius); - border-top-right-radius: 0; } - .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) { - border-top-right-radius: var(--bs-list-group-border-radius); - border-bottom-left-radius: 0; } - .list-group-horizontal-sm > .list-group-item.active { - margin-top: 0; } - .list-group-horizontal-sm > .list-group-item + .list-group-item { - border-top-width: var(--bs-list-group-border-width); - border-left-width: 0; } - .list-group-horizontal-sm > .list-group-item + .list-group-item.active { - margin-left: calc(-1 * var(--bs-list-group-border-width)); - border-left-width: var(--bs-list-group-border-width); } } - -@media (min-width: 768px) { - .list-group-horizontal-md { - flex-direction: row; } - .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) { - border-bottom-left-radius: var(--bs-list-group-border-radius); - border-top-right-radius: 0; } - .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) { - border-top-right-radius: var(--bs-list-group-border-radius); - border-bottom-left-radius: 0; } - .list-group-horizontal-md > .list-group-item.active { - margin-top: 0; } - .list-group-horizontal-md > .list-group-item + .list-group-item { - border-top-width: var(--bs-list-group-border-width); - border-left-width: 0; } - .list-group-horizontal-md > .list-group-item + .list-group-item.active { - margin-left: calc(-1 * var(--bs-list-group-border-width)); - border-left-width: var(--bs-list-group-border-width); } } - -@media (min-width: 992px) { - .list-group-horizontal-lg { - flex-direction: row; } - .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) { - border-bottom-left-radius: var(--bs-list-group-border-radius); - border-top-right-radius: 0; } - .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) { - border-top-right-radius: var(--bs-list-group-border-radius); - border-bottom-left-radius: 0; } - .list-group-horizontal-lg > .list-group-item.active { - margin-top: 0; } - .list-group-horizontal-lg > .list-group-item + .list-group-item { - border-top-width: var(--bs-list-group-border-width); - border-left-width: 0; } - .list-group-horizontal-lg > .list-group-item + .list-group-item.active { - margin-left: calc(-1 * var(--bs-list-group-border-width)); - border-left-width: var(--bs-list-group-border-width); } } - -@media (min-width: 1200px) { - .list-group-horizontal-xl { - flex-direction: row; } - .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) { - border-bottom-left-radius: var(--bs-list-group-border-radius); - border-top-right-radius: 0; } - .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) { - border-top-right-radius: var(--bs-list-group-border-radius); - border-bottom-left-radius: 0; } - .list-group-horizontal-xl > .list-group-item.active { - margin-top: 0; } - .list-group-horizontal-xl > .list-group-item + .list-group-item { - border-top-width: var(--bs-list-group-border-width); - border-left-width: 0; } - .list-group-horizontal-xl > .list-group-item + .list-group-item.active { - margin-left: calc(-1 * var(--bs-list-group-border-width)); - border-left-width: var(--bs-list-group-border-width); } } - -@media (min-width: 1400px) { - .list-group-horizontal-xxl { - flex-direction: row; } - .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) { - border-bottom-left-radius: var(--bs-list-group-border-radius); - border-top-right-radius: 0; } - .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) { - border-top-right-radius: var(--bs-list-group-border-radius); - border-bottom-left-radius: 0; } - .list-group-horizontal-xxl > .list-group-item.active { - margin-top: 0; } - .list-group-horizontal-xxl > .list-group-item + .list-group-item { - border-top-width: var(--bs-list-group-border-width); - border-left-width: 0; } - .list-group-horizontal-xxl > .list-group-item + .list-group-item.active { - margin-left: calc(-1 * var(--bs-list-group-border-width)); - border-left-width: var(--bs-list-group-border-width); } } - -.list-group-flush { - border-radius: 0; } - .list-group-flush > .list-group-item { - border-width: 0 0 var(--bs-list-group-border-width); } - .list-group-flush > .list-group-item:last-child { - border-bottom-width: 0; } - -.list-group-item-primary { - --bs-list-group-color: var(--bs-primary-text-emphasis); - --bs-list-group-bg: var(--bs-primary-bg-subtle); - --bs-list-group-border-color: var(--bs-primary-border-subtle); - --bs-list-group-action-hover-color: var(--bs-emphasis-color); - --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle); - --bs-list-group-action-active-color: var(--bs-emphasis-color); - --bs-list-group-action-active-bg: var(--bs-primary-border-subtle); - --bs-list-group-active-color: var(--bs-primary-bg-subtle); - --bs-list-group-active-bg: var(--bs-primary-text-emphasis); - --bs-list-group-active-border-color: var(--bs-primary-text-emphasis); } - -.list-group-item-secondary { - --bs-list-group-color: var(--bs-secondary-text-emphasis); - --bs-list-group-bg: var(--bs-secondary-bg-subtle); - --bs-list-group-border-color: var(--bs-secondary-border-subtle); - --bs-list-group-action-hover-color: var(--bs-emphasis-color); - --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle); - --bs-list-group-action-active-color: var(--bs-emphasis-color); - --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle); - --bs-list-group-active-color: var(--bs-secondary-bg-subtle); - --bs-list-group-active-bg: var(--bs-secondary-text-emphasis); - --bs-list-group-active-border-color: var(--bs-secondary-text-emphasis); } - -.list-group-item-success { - --bs-list-group-color: var(--bs-success-text-emphasis); - --bs-list-group-bg: var(--bs-success-bg-subtle); - --bs-list-group-border-color: var(--bs-success-border-subtle); - --bs-list-group-action-hover-color: var(--bs-emphasis-color); - --bs-list-group-action-hover-bg: var(--bs-success-border-subtle); - --bs-list-group-action-active-color: var(--bs-emphasis-color); - --bs-list-group-action-active-bg: var(--bs-success-border-subtle); - --bs-list-group-active-color: var(--bs-success-bg-subtle); - --bs-list-group-active-bg: var(--bs-success-text-emphasis); - --bs-list-group-active-border-color: var(--bs-success-text-emphasis); } - -.list-group-item-info { - --bs-list-group-color: var(--bs-info-text-emphasis); - --bs-list-group-bg: var(--bs-info-bg-subtle); - --bs-list-group-border-color: var(--bs-info-border-subtle); - --bs-list-group-action-hover-color: var(--bs-emphasis-color); - --bs-list-group-action-hover-bg: var(--bs-info-border-subtle); - --bs-list-group-action-active-color: var(--bs-emphasis-color); - --bs-list-group-action-active-bg: var(--bs-info-border-subtle); - --bs-list-group-active-color: var(--bs-info-bg-subtle); - --bs-list-group-active-bg: var(--bs-info-text-emphasis); - --bs-list-group-active-border-color: var(--bs-info-text-emphasis); } - -.list-group-item-warning { - --bs-list-group-color: var(--bs-warning-text-emphasis); - --bs-list-group-bg: var(--bs-warning-bg-subtle); - --bs-list-group-border-color: var(--bs-warning-border-subtle); - --bs-list-group-action-hover-color: var(--bs-emphasis-color); - --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle); - --bs-list-group-action-active-color: var(--bs-emphasis-color); - --bs-list-group-action-active-bg: var(--bs-warning-border-subtle); - --bs-list-group-active-color: var(--bs-warning-bg-subtle); - --bs-list-group-active-bg: var(--bs-warning-text-emphasis); - --bs-list-group-active-border-color: var(--bs-warning-text-emphasis); } - -.list-group-item-danger { - --bs-list-group-color: var(--bs-danger-text-emphasis); - --bs-list-group-bg: var(--bs-danger-bg-subtle); - --bs-list-group-border-color: var(--bs-danger-border-subtle); - --bs-list-group-action-hover-color: var(--bs-emphasis-color); - --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle); - --bs-list-group-action-active-color: var(--bs-emphasis-color); - --bs-list-group-action-active-bg: var(--bs-danger-border-subtle); - --bs-list-group-active-color: var(--bs-danger-bg-subtle); - --bs-list-group-active-bg: var(--bs-danger-text-emphasis); - --bs-list-group-active-border-color: var(--bs-danger-text-emphasis); } - -.list-group-item-light { - --bs-list-group-color: var(--bs-light-text-emphasis); - --bs-list-group-bg: var(--bs-light-bg-subtle); - --bs-list-group-border-color: var(--bs-light-border-subtle); - --bs-list-group-action-hover-color: var(--bs-emphasis-color); - --bs-list-group-action-hover-bg: var(--bs-light-border-subtle); - --bs-list-group-action-active-color: var(--bs-emphasis-color); - --bs-list-group-action-active-bg: var(--bs-light-border-subtle); - --bs-list-group-active-color: var(--bs-light-bg-subtle); - --bs-list-group-active-bg: var(--bs-light-text-emphasis); - --bs-list-group-active-border-color: var(--bs-light-text-emphasis); } - -.list-group-item-dark { - --bs-list-group-color: var(--bs-dark-text-emphasis); - --bs-list-group-bg: var(--bs-dark-bg-subtle); - --bs-list-group-border-color: var(--bs-dark-border-subtle); - --bs-list-group-action-hover-color: var(--bs-emphasis-color); - --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle); - --bs-list-group-action-active-color: var(--bs-emphasis-color); - --bs-list-group-action-active-bg: var(--bs-dark-border-subtle); - --bs-list-group-active-color: var(--bs-dark-bg-subtle); - --bs-list-group-active-bg: var(--bs-dark-text-emphasis); - --bs-list-group-active-border-color: var(--bs-dark-text-emphasis); } - -.btn-close { - --bs-btn-close-color: #000; - --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); - --bs-btn-close-opacity: 0.5; - --bs-btn-close-hover-opacity: 0.75; - --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(93, 47, 134, 0.25); - --bs-btn-close-focus-opacity: 1; - --bs-btn-close-disabled-opacity: 0.25; - --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%); - box-sizing: content-box; - width: 1em; - height: 1em; - padding: 0.25em 0.25em; - color: var(--bs-btn-close-color); - background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat; - border: 0; - border-radius: 0.375rem; - opacity: var(--bs-btn-close-opacity); } - .btn-close:hover { - color: var(--bs-btn-close-color); - text-decoration: none; - opacity: var(--bs-btn-close-hover-opacity); } - .btn-close:focus { - outline: 0; - box-shadow: var(--bs-btn-close-focus-shadow); - opacity: var(--bs-btn-close-focus-opacity); } - .btn-close:disabled, .btn-close.disabled { - pointer-events: none; - user-select: none; - opacity: var(--bs-btn-close-disabled-opacity); } - -.btn-close-white { - filter: var(--bs-btn-close-white-filter); } - -[data-bs-theme="dark"] .btn-close { - filter: var(--bs-btn-close-white-filter); } - -.toast { - --bs-toast-zindex: 1090; - --bs-toast-padding-x: 0.75rem; - --bs-toast-padding-y: 0.5rem; - --bs-toast-spacing: 3rem; - --bs-toast-max-width: 350px; - --bs-toast-font-size: 0.875rem; - --bs-toast-color: ; - --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.85); - --bs-toast-border-width: var(--bs-border-width); - --bs-toast-border-color: var(--bs-border-color-translucent); - --bs-toast-border-radius: var(--bs-border-radius); - --bs-toast-box-shadow: var(--bs-box-shadow); - --bs-toast-header-color: var(--bs-secondary-color); - --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85); - --bs-toast-header-border-color: var(--bs-border-color-translucent); - width: var(--bs-toast-max-width); - max-width: 100%; - font-size: var(--bs-toast-font-size); - color: var(--bs-toast-color); - pointer-events: auto; - background-color: var(--bs-toast-bg); - background-clip: padding-box; - border: var(--bs-toast-border-width) solid var(--bs-toast-border-color); - box-shadow: var(--bs-toast-box-shadow); - border-radius: var(--bs-toast-border-radius); } - .toast.showing { - opacity: 0; } - .toast:not(.show) { - display: none; } - -.toast-container { - --bs-toast-zindex: 1090; - position: absolute; - z-index: var(--bs-toast-zindex); - width: max-content; - max-width: 100%; - pointer-events: none; } - .toast-container > :not(:last-child) { - margin-bottom: var(--bs-toast-spacing); } - -.toast-header { - display: flex; - align-items: center; - padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x); - color: var(--bs-toast-header-color); - background-color: var(--bs-toast-header-bg); - background-clip: padding-box; - border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color); - border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width)); - border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width)); } - .toast-header .btn-close { - margin-right: calc(-.5 * var(--bs-toast-padding-x)); - margin-left: var(--bs-toast-padding-x); } - -.toast-body { - padding: var(--bs-toast-padding-x); - word-wrap: break-word; } - -.modal { - --bs-modal-zindex: 1055; - --bs-modal-width: 500px; - --bs-modal-padding: 1rem; - --bs-modal-margin: 0.5rem; - --bs-modal-color: ; - --bs-modal-bg: var(--bs-body-bg); - --bs-modal-border-color: var(--bs-border-color-translucent); - --bs-modal-border-width: var(--bs-border-width); - --bs-modal-border-radius: var(--bs-border-radius-lg); - --bs-modal-box-shadow: var(--bs-box-shadow-sm); - --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width))); - --bs-modal-header-padding-x: 1rem; - --bs-modal-header-padding-y: 1rem; - --bs-modal-header-padding: 1rem 1rem; - --bs-modal-header-border-color: var(--bs-border-color); - --bs-modal-header-border-width: var(--bs-border-width); - --bs-modal-title-line-height: 1.5; - --bs-modal-footer-gap: 0.5rem; - --bs-modal-footer-bg: ; - --bs-modal-footer-border-color: var(--bs-border-color); - --bs-modal-footer-border-width: var(--bs-border-width); - position: fixed; - top: 0; - left: 0; - z-index: var(--bs-modal-zindex); - display: none; - width: 100%; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - outline: 0; } - -.modal-dialog { - position: relative; - width: auto; - margin: var(--bs-modal-margin); - pointer-events: none; } - .modal.fade .modal-dialog { - transition: transform 0.3s ease-out; - transform: translate(0, -50px); } - @media (prefers-reduced-motion: reduce) { - .modal.fade .modal-dialog { - transition: none; } } - .modal.show .modal-dialog { - transform: none; } - .modal.modal-static .modal-dialog { - transform: scale(1.02); } - -.modal-dialog-scrollable { - height: calc(100% - var(--bs-modal-margin) * 2); } - .modal-dialog-scrollable .modal-content { - max-height: 100%; - overflow: hidden; } - .modal-dialog-scrollable .modal-body { - overflow-y: auto; } - -.modal-dialog-centered { - display: flex; - align-items: center; - min-height: calc(100% - var(--bs-modal-margin) * 2); } - -.modal-content { - position: relative; - display: flex; - flex-direction: column; - width: 100%; - color: var(--bs-modal-color); - pointer-events: auto; - background-color: var(--bs-modal-bg); - background-clip: padding-box; - border: var(--bs-modal-border-width) solid var(--bs-modal-border-color); - border-radius: var(--bs-modal-border-radius); - outline: 0; } - -.modal-backdrop { - --bs-backdrop-zindex: 1050; - --bs-backdrop-bg: #000; - --bs-backdrop-opacity: 0.5; - position: fixed; - top: 0; - left: 0; - z-index: var(--bs-backdrop-zindex); - width: 100vw; - height: 100vh; - background-color: var(--bs-backdrop-bg); } - .modal-backdrop.fade { - opacity: 0; } - .modal-backdrop.show { - opacity: var(--bs-backdrop-opacity); } - -.modal-header { - display: flex; - flex-shrink: 0; - align-items: center; - padding: var(--bs-modal-header-padding); - border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color); - border-top-left-radius: var(--bs-modal-inner-border-radius); - border-top-right-radius: var(--bs-modal-inner-border-radius); } - .modal-header .btn-close { - padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5); - margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto; } - -.modal-title { - margin-bottom: 0; - line-height: var(--bs-modal-title-line-height); } - -.modal-body { - position: relative; - flex: 1 1 auto; - padding: var(--bs-modal-padding); } - -.modal-footer { - display: flex; - flex-shrink: 0; - flex-wrap: wrap; - align-items: center; - justify-content: flex-end; - padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5); - background-color: var(--bs-modal-footer-bg); - border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color); - border-bottom-right-radius: var(--bs-modal-inner-border-radius); - border-bottom-left-radius: var(--bs-modal-inner-border-radius); } - .modal-footer > * { - margin: calc(var(--bs-modal-footer-gap) * .5); } - -@media (min-width: 576px) { - .modal { - --bs-modal-margin: 1.75rem; - --bs-modal-box-shadow: var(--bs-box-shadow); } - .modal-dialog { - max-width: var(--bs-modal-width); - margin-right: auto; - margin-left: auto; } - .modal-sm { - --bs-modal-width: 300px; } } - -@media (min-width: 992px) { - .modal-lg, - .modal-xl { - --bs-modal-width: 800px; } } - -@media (min-width: 1200px) { - .modal-xl { - --bs-modal-width: 1140px; } } - -.modal-fullscreen { - width: 100vw; - max-width: none; - height: 100%; - margin: 0; } - .modal-fullscreen .modal-content { - height: 100%; - border: 0; - border-radius: 0; } - .modal-fullscreen .modal-header, - .modal-fullscreen .modal-footer { - border-radius: 0; } - .modal-fullscreen .modal-body { - overflow-y: auto; } - -@media (max-width: 575.98px) { - .modal-fullscreen-sm-down { - width: 100vw; - max-width: none; - height: 100%; - margin: 0; } - .modal-fullscreen-sm-down .modal-content { - height: 100%; - border: 0; - border-radius: 0; } - .modal-fullscreen-sm-down .modal-header, - .modal-fullscreen-sm-down .modal-footer { - border-radius: 0; } - .modal-fullscreen-sm-down .modal-body { - overflow-y: auto; } } - -@media (max-width: 767.98px) { - .modal-fullscreen-md-down { - width: 100vw; - max-width: none; - height: 100%; - margin: 0; } - .modal-fullscreen-md-down .modal-content { - height: 100%; - border: 0; - border-radius: 0; } - .modal-fullscreen-md-down .modal-header, - .modal-fullscreen-md-down .modal-footer { - border-radius: 0; } - .modal-fullscreen-md-down .modal-body { - overflow-y: auto; } } - -@media (max-width: 991.98px) { - .modal-fullscreen-lg-down { - width: 100vw; - max-width: none; - height: 100%; - margin: 0; } - .modal-fullscreen-lg-down .modal-content { - height: 100%; - border: 0; - border-radius: 0; } - .modal-fullscreen-lg-down .modal-header, - .modal-fullscreen-lg-down .modal-footer { - border-radius: 0; } - .modal-fullscreen-lg-down .modal-body { - overflow-y: auto; } } - -@media (max-width: 1199.98px) { - .modal-fullscreen-xl-down { - width: 100vw; - max-width: none; - height: 100%; - margin: 0; } - .modal-fullscreen-xl-down .modal-content { - height: 100%; - border: 0; - border-radius: 0; } - .modal-fullscreen-xl-down .modal-header, - .modal-fullscreen-xl-down .modal-footer { - border-radius: 0; } - .modal-fullscreen-xl-down .modal-body { - overflow-y: auto; } } - -@media (max-width: 1399.98px) { - .modal-fullscreen-xxl-down { - width: 100vw; - max-width: none; - height: 100%; - margin: 0; } - .modal-fullscreen-xxl-down .modal-content { - height: 100%; - border: 0; - border-radius: 0; } - .modal-fullscreen-xxl-down .modal-header, - .modal-fullscreen-xxl-down .modal-footer { - border-radius: 0; } - .modal-fullscreen-xxl-down .modal-body { - overflow-y: auto; } } - -.tooltip { - --bs-tooltip-zindex: 1080; - --bs-tooltip-max-width: 200px; - --bs-tooltip-padding-x: 0.5rem; - --bs-tooltip-padding-y: 0.25rem; - --bs-tooltip-margin: ; - --bs-tooltip-font-size: 0.875rem; - --bs-tooltip-color: var(--bs-body-bg); - --bs-tooltip-bg: var(--bs-emphasis-color); - --bs-tooltip-border-radius: var(--bs-border-radius); - --bs-tooltip-opacity: 0.9; - --bs-tooltip-arrow-width: 0.8rem; - --bs-tooltip-arrow-height: 0.4rem; - z-index: var(--bs-tooltip-zindex); - display: block; - margin: var(--bs-tooltip-margin); - font-family: var(--bs-font-sans-serif); - font-style: normal; - font-weight: 400; - line-height: 1.5; - text-align: left; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - letter-spacing: normal; - word-break: normal; - white-space: normal; - word-spacing: normal; - line-break: auto; - font-size: var(--bs-tooltip-font-size); - word-wrap: break-word; - opacity: 0; } - .tooltip.show { - opacity: var(--bs-tooltip-opacity); } - .tooltip .tooltip-arrow { - display: block; - width: var(--bs-tooltip-arrow-width); - height: var(--bs-tooltip-arrow-height); } - .tooltip .tooltip-arrow::before { - position: absolute; - content: ""; - border-color: transparent; - border-style: solid; } - -.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow { - bottom: calc(-1 * var(--bs-tooltip-arrow-height)); } - .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { - top: -1px; - border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0; - border-top-color: var(--bs-tooltip-bg); } - -/* rtl:begin:ignore */ -.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow { - left: calc(-1 * var(--bs-tooltip-arrow-height)); - width: var(--bs-tooltip-arrow-height); - height: var(--bs-tooltip-arrow-width); } - .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { - right: -1px; - border-width: calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0; - border-right-color: var(--bs-tooltip-bg); } - -/* rtl:end:ignore */ -.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow { - top: calc(-1 * var(--bs-tooltip-arrow-height)); } - .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { - bottom: -1px; - border-width: 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height); - border-bottom-color: var(--bs-tooltip-bg); } - -/* rtl:begin:ignore */ -.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow { - right: calc(-1 * var(--bs-tooltip-arrow-height)); - width: var(--bs-tooltip-arrow-height); - height: var(--bs-tooltip-arrow-width); } - .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { - left: -1px; - border-width: calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height); - border-left-color: var(--bs-tooltip-bg); } - -/* rtl:end:ignore */ -.tooltip-inner { - max-width: var(--bs-tooltip-max-width); - padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x); - color: var(--bs-tooltip-color); - text-align: center; - background-color: var(--bs-tooltip-bg); - border-radius: var(--bs-tooltip-border-radius); } - -.popover { - --bs-popover-zindex: 1070; - --bs-popover-max-width: 276px; - --bs-popover-font-size: 0.875rem; - --bs-popover-bg: var(--bs-body-bg); - --bs-popover-border-width: var(--bs-border-width); - --bs-popover-border-color: var(--bs-border-color-translucent); - --bs-popover-border-radius: var(--bs-border-radius-lg); - --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width)); - --bs-popover-box-shadow: var(--bs-box-shadow); - --bs-popover-header-padding-x: 1rem; - --bs-popover-header-padding-y: 0.5rem; - --bs-popover-header-font-size: 1rem; - --bs-popover-header-color: inherit; - --bs-popover-header-bg: var(--bs-secondary-bg); - --bs-popover-body-padding-x: 1rem; - --bs-popover-body-padding-y: 1rem; - --bs-popover-body-color: var(--bs-body-color); - --bs-popover-arrow-width: 1rem; - --bs-popover-arrow-height: 0.5rem; - --bs-popover-arrow-border: var(--bs-popover-border-color); - z-index: var(--bs-popover-zindex); - display: block; - max-width: var(--bs-popover-max-width); - font-family: var(--bs-font-sans-serif); - font-style: normal; - font-weight: 400; - line-height: 1.5; - text-align: left; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - letter-spacing: normal; - word-break: normal; - white-space: normal; - word-spacing: normal; - line-break: auto; - font-size: var(--bs-popover-font-size); - word-wrap: break-word; - background-color: var(--bs-popover-bg); - background-clip: padding-box; - border: var(--bs-popover-border-width) solid var(--bs-popover-border-color); - border-radius: var(--bs-popover-border-radius); } - .popover .popover-arrow { - display: block; - width: var(--bs-popover-arrow-width); - height: var(--bs-popover-arrow-height); } - .popover .popover-arrow::before, .popover .popover-arrow::after { - position: absolute; - display: block; - content: ""; - border-color: transparent; - border-style: solid; - border-width: 0; } - -.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow { - bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); } - .bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after { - border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0; } - .bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before { - bottom: 0; - border-top-color: var(--bs-popover-arrow-border); } - .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after { - bottom: var(--bs-popover-border-width); - border-top-color: var(--bs-popover-bg); } - -/* rtl:begin:ignore */ -.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow { - left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); - width: var(--bs-popover-arrow-height); - height: var(--bs-popover-arrow-width); } - .bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after { - border-width: calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0; } - .bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before { - left: 0; - border-right-color: var(--bs-popover-arrow-border); } - .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after { - left: var(--bs-popover-border-width); - border-right-color: var(--bs-popover-bg); } - -/* rtl:end:ignore */ -.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow { - top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); } - .bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { - border-width: 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height); } - .bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before { - top: 0; - border-bottom-color: var(--bs-popover-arrow-border); } - .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { - top: var(--bs-popover-border-width); - border-bottom-color: var(--bs-popover-bg); } - -.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^="bottom"] .popover-header::before { - position: absolute; - top: 0; - left: 50%; - display: block; - width: var(--bs-popover-arrow-width); - margin-left: calc(-.5 * var(--bs-popover-arrow-width)); - content: ""; - border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg); } - -/* rtl:begin:ignore */ -.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow { - right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width)); - width: var(--bs-popover-arrow-height); - height: var(--bs-popover-arrow-width); } - .bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after { - border-width: calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height); } - .bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before { - right: 0; - border-left-color: var(--bs-popover-arrow-border); } - .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after { - right: var(--bs-popover-border-width); - border-left-color: var(--bs-popover-bg); } - -/* rtl:end:ignore */ -.popover-header { - padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x); - margin-bottom: 0; - font-size: var(--bs-popover-header-font-size); - color: var(--bs-popover-header-color); - background-color: var(--bs-popover-header-bg); - border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color); - border-top-left-radius: var(--bs-popover-inner-border-radius); - border-top-right-radius: var(--bs-popover-inner-border-radius); } - .popover-header:empty { - display: none; } - -.popover-body { - padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x); - color: var(--bs-popover-body-color); } - -.carousel { - position: relative; } - -.carousel.pointer-event { - touch-action: pan-y; } - -.carousel-inner { - position: relative; - width: 100%; - overflow: hidden; } - .carousel-inner::after { - display: block; - clear: both; - content: ""; } - -.carousel-item { - position: relative; - display: none; - float: left; - width: 100%; - margin-right: -100%; - backface-visibility: hidden; - transition: transform 0.6s ease-in-out; } - @media (prefers-reduced-motion: reduce) { - .carousel-item { - transition: none; } } -.carousel-item.active, -.carousel-item-next, -.carousel-item-prev { - display: block; } - -.carousel-item-next:not(.carousel-item-start), -.active.carousel-item-end { - transform: translateX(100%); } - -.carousel-item-prev:not(.carousel-item-end), -.active.carousel-item-start { - transform: translateX(-100%); } - -.carousel-fade .carousel-item { - opacity: 0; - transition-property: opacity; - transform: none; } - -.carousel-fade .carousel-item.active, -.carousel-fade .carousel-item-next.carousel-item-start, -.carousel-fade .carousel-item-prev.carousel-item-end { - z-index: 1; - opacity: 1; } - -.carousel-fade .active.carousel-item-start, -.carousel-fade .active.carousel-item-end { - z-index: 0; - opacity: 0; - transition: opacity 0s 0.6s; } - @media (prefers-reduced-motion: reduce) { - .carousel-fade .active.carousel-item-start, - .carousel-fade .active.carousel-item-end { - transition: none; } } -.carousel-control-prev, -.carousel-control-next { - position: absolute; - top: 0; - bottom: 0; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; - width: 15%; - padding: 0; - color: #fff; - text-align: center; - background: none; - border: 0; - opacity: 0.5; - transition: opacity 0.15s ease; } - @media (prefers-reduced-motion: reduce) { - .carousel-control-prev, - .carousel-control-next { - transition: none; } } - .carousel-control-prev:hover, .carousel-control-prev:focus, - .carousel-control-next:hover, - .carousel-control-next:focus { - color: #fff; - text-decoration: none; - outline: 0; - opacity: 0.9; } - -.carousel-control-prev { - left: 0; } - -.carousel-control-next { - right: 0; } - -.carousel-control-prev-icon, -.carousel-control-next-icon { - display: inline-block; - width: 2rem; - height: 2rem; - background-repeat: no-repeat; - background-position: 50%; - background-size: 100% 100%; } - -.carousel-control-prev-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/; } - -.carousel-control-next-icon { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/; } - -.carousel-indicators { - position: absolute; - right: 0; - bottom: 0; - left: 0; - z-index: 2; - display: flex; - justify-content: center; - padding: 0; - margin-right: 15%; - margin-bottom: 1rem; - margin-left: 15%; } - .carousel-indicators [data-bs-target] { - box-sizing: content-box; - flex: 0 1 auto; - width: 30px; - height: 3px; - padding: 0; - margin-right: 3px; - margin-left: 3px; - text-indent: -999px; - cursor: pointer; - background-color: #fff; - background-clip: padding-box; - border: 0; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - opacity: 0.5; - transition: opacity 0.6s ease; } - @media (prefers-reduced-motion: reduce) { - .carousel-indicators [data-bs-target] { - transition: none; } } - .carousel-indicators .active { - opacity: 1; } - -.carousel-caption { - position: absolute; - right: 15%; - bottom: 1.25rem; - left: 15%; - padding-top: 1.25rem; - padding-bottom: 1.25rem; - color: #fff; - text-align: center; } - -.carousel-dark .carousel-control-prev-icon, -.carousel-dark .carousel-control-next-icon { - filter: invert(1) grayscale(100); } - -.carousel-dark .carousel-indicators [data-bs-target] { - background-color: #000; } - -.carousel-dark .carousel-caption { - color: #000; } - -[data-bs-theme="dark"] .carousel .carousel-control-prev-icon, -[data-bs-theme="dark"] .carousel .carousel-control-next-icon, [data-bs-theme="dark"].carousel .carousel-control-prev-icon, -[data-bs-theme="dark"].carousel .carousel-control-next-icon { - filter: invert(1) grayscale(100); } - -[data-bs-theme="dark"] .carousel .carousel-indicators [data-bs-target], [data-bs-theme="dark"].carousel .carousel-indicators [data-bs-target] { - background-color: #000; } - -[data-bs-theme="dark"] .carousel .carousel-caption, [data-bs-theme="dark"].carousel .carousel-caption { - color: #000; } - -.spinner-grow, -.spinner-border { - display: inline-block; - width: var(--bs-spinner-width); - height: var(--bs-spinner-height); - vertical-align: var(--bs-spinner-vertical-align); - border-radius: 50%; - animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name); } - -@keyframes spinner-border { - to { - transform: rotate(360deg) /* rtl:ignore */; } } - -.spinner-border { - --bs-spinner-width: 2rem; - --bs-spinner-height: 2rem; - --bs-spinner-vertical-align: -0.125em; - --bs-spinner-border-width: 0.25em; - --bs-spinner-animation-speed: 0.75s; - --bs-spinner-animation-name: spinner-border; - border: var(--bs-spinner-border-width) solid currentcolor; - border-right-color: transparent; } - -.spinner-border-sm { - --bs-spinner-width: 1rem; - --bs-spinner-height: 1rem; - --bs-spinner-border-width: 0.2em; } - -@keyframes spinner-grow { - 0% { - transform: scale(0); } - 50% { - opacity: 1; - transform: none; } } - -.spinner-grow { - --bs-spinner-width: 2rem; - --bs-spinner-height: 2rem; - --bs-spinner-vertical-align: -0.125em; - --bs-spinner-animation-speed: 0.75s; - --bs-spinner-animation-name: spinner-grow; - background-color: currentcolor; - opacity: 0; } - -.spinner-grow-sm { - --bs-spinner-width: 1rem; - --bs-spinner-height: 1rem; } - -@media (prefers-reduced-motion: reduce) { - .spinner-border, - .spinner-grow { - --bs-spinner-animation-speed: 1.5s; } } - -.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm { - --bs-offcanvas-zindex: 1045; - --bs-offcanvas-width: 332px; - --bs-offcanvas-height: 30vh; - --bs-offcanvas-padding-x: 1rem; - --bs-offcanvas-padding-y: 1rem; - --bs-offcanvas-color: var(--bs-body-color); - --bs-offcanvas-bg: var(--bs-body-bg); - --bs-offcanvas-border-width: var(--bs-border-width); - --bs-offcanvas-border-color: var(--bs-border-color-translucent); - --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm); - --bs-offcanvas-transition: transform 0.3s ease-in-out; - --bs-offcanvas-title-line-height: 1.5; } - -@media (max-width: 575.98px) { - .offcanvas-sm { - position: fixed; - bottom: 0; - z-index: var(--bs-offcanvas-zindex); - display: flex; - flex-direction: column; - max-width: 100%; - color: var(--bs-offcanvas-color); - visibility: hidden; - background-color: var(--bs-offcanvas-bg); - background-clip: padding-box; - outline: 0; - transition: var(--bs-offcanvas-transition); } } - @media (max-width: 575.98px) and (prefers-reduced-motion: reduce) { - .offcanvas-sm { - transition: none; } } -@media (max-width: 575.98px) { - .offcanvas-sm.offcanvas-start { - top: 0; - left: 0; - width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(-100%); } - .offcanvas-sm.offcanvas-end { - top: 0; - right: 0; - width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(100%); } - .offcanvas-sm.offcanvas-top { - top: 0; - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(-100%); } - .offcanvas-sm.offcanvas-bottom { - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(100%); } - .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) { - transform: none; } - .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show { - visibility: visible; } } - -@media (min-width: 576px) { - .offcanvas-sm { - --bs-offcanvas-height: auto; - --bs-offcanvas-border-width: 0; - background-color: transparent !important; } - .offcanvas-sm .offcanvas-header { - display: none; } - .offcanvas-sm .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; - background-color: transparent !important; } } - -@media (max-width: 767.98px) { - .offcanvas-md { - position: fixed; - bottom: 0; - z-index: var(--bs-offcanvas-zindex); - display: flex; - flex-direction: column; - max-width: 100%; - color: var(--bs-offcanvas-color); - visibility: hidden; - background-color: var(--bs-offcanvas-bg); - background-clip: padding-box; - outline: 0; - transition: var(--bs-offcanvas-transition); } } - @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { - .offcanvas-md { - transition: none; } } -@media (max-width: 767.98px) { - .offcanvas-md.offcanvas-start { - top: 0; - left: 0; - width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(-100%); } - .offcanvas-md.offcanvas-end { - top: 0; - right: 0; - width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(100%); } - .offcanvas-md.offcanvas-top { - top: 0; - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(-100%); } - .offcanvas-md.offcanvas-bottom { - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(100%); } - .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) { - transform: none; } - .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show { - visibility: visible; } } - -@media (min-width: 768px) { - .offcanvas-md { - --bs-offcanvas-height: auto; - --bs-offcanvas-border-width: 0; - background-color: transparent !important; } - .offcanvas-md .offcanvas-header { - display: none; } - .offcanvas-md .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; - background-color: transparent !important; } } - -@media (max-width: 991.98px) { - .offcanvas-lg { - position: fixed; - bottom: 0; - z-index: var(--bs-offcanvas-zindex); - display: flex; - flex-direction: column; - max-width: 100%; - color: var(--bs-offcanvas-color); - visibility: hidden; - background-color: var(--bs-offcanvas-bg); - background-clip: padding-box; - outline: 0; - transition: var(--bs-offcanvas-transition); } } - @media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { - .offcanvas-lg { - transition: none; } } -@media (max-width: 991.98px) { - .offcanvas-lg.offcanvas-start { - top: 0; - left: 0; - width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(-100%); } - .offcanvas-lg.offcanvas-end { - top: 0; - right: 0; - width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(100%); } - .offcanvas-lg.offcanvas-top { - top: 0; - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(-100%); } - .offcanvas-lg.offcanvas-bottom { - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(100%); } - .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) { - transform: none; } - .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show { - visibility: visible; } } - -@media (min-width: 992px) { - .offcanvas-lg { - --bs-offcanvas-height: auto; - --bs-offcanvas-border-width: 0; - background-color: transparent !important; } - .offcanvas-lg .offcanvas-header { - display: none; } - .offcanvas-lg .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; - background-color: transparent !important; } } - -@media (max-width: 1199.98px) { - .offcanvas-xl { - position: fixed; - bottom: 0; - z-index: var(--bs-offcanvas-zindex); - display: flex; - flex-direction: column; - max-width: 100%; - color: var(--bs-offcanvas-color); - visibility: hidden; - background-color: var(--bs-offcanvas-bg); - background-clip: padding-box; - outline: 0; - transition: var(--bs-offcanvas-transition); } } - @media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) { - .offcanvas-xl { - transition: none; } } -@media (max-width: 1199.98px) { - .offcanvas-xl.offcanvas-start { - top: 0; - left: 0; - width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(-100%); } - .offcanvas-xl.offcanvas-end { - top: 0; - right: 0; - width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(100%); } - .offcanvas-xl.offcanvas-top { - top: 0; - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(-100%); } - .offcanvas-xl.offcanvas-bottom { - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(100%); } - .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) { - transform: none; } - .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show { - visibility: visible; } } - -@media (min-width: 1200px) { - .offcanvas-xl { - --bs-offcanvas-height: auto; - --bs-offcanvas-border-width: 0; - background-color: transparent !important; } - .offcanvas-xl .offcanvas-header { - display: none; } - .offcanvas-xl .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; - background-color: transparent !important; } } - -@media (max-width: 1399.98px) { - .offcanvas-xxl { - position: fixed; - bottom: 0; - z-index: var(--bs-offcanvas-zindex); - display: flex; - flex-direction: column; - max-width: 100%; - color: var(--bs-offcanvas-color); - visibility: hidden; - background-color: var(--bs-offcanvas-bg); - background-clip: padding-box; - outline: 0; - transition: var(--bs-offcanvas-transition); } } - @media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) { - .offcanvas-xxl { - transition: none; } } -@media (max-width: 1399.98px) { - .offcanvas-xxl.offcanvas-start { - top: 0; - left: 0; - width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(-100%); } - .offcanvas-xxl.offcanvas-end { - top: 0; - right: 0; - width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(100%); } - .offcanvas-xxl.offcanvas-top { - top: 0; - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(-100%); } - .offcanvas-xxl.offcanvas-bottom { - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(100%); } - .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) { - transform: none; } - .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show { - visibility: visible; } } - -@media (min-width: 1400px) { - .offcanvas-xxl { - --bs-offcanvas-height: auto; - --bs-offcanvas-border-width: 0; - background-color: transparent !important; } - .offcanvas-xxl .offcanvas-header { - display: none; } - .offcanvas-xxl .offcanvas-body { - display: flex; - flex-grow: 0; - padding: 0; - overflow-y: visible; - background-color: transparent !important; } } - -.offcanvas { - position: fixed; - bottom: 0; - z-index: var(--bs-offcanvas-zindex); - display: flex; - flex-direction: column; - max-width: 100%; - color: var(--bs-offcanvas-color); - visibility: hidden; - background-color: var(--bs-offcanvas-bg); - background-clip: padding-box; - outline: 0; - transition: var(--bs-offcanvas-transition); } - @media (prefers-reduced-motion: reduce) { - .offcanvas { - transition: none; } } - .offcanvas.offcanvas-start { - top: 0; - left: 0; - width: var(--bs-offcanvas-width); - border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(-100%); } - .offcanvas.offcanvas-end { - top: 0; - right: 0; - width: var(--bs-offcanvas-width); - border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateX(100%); } - .offcanvas.offcanvas-top { - top: 0; - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(-100%); } - .offcanvas.offcanvas-bottom { - right: 0; - left: 0; - height: var(--bs-offcanvas-height); - max-height: 100%; - border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color); - transform: translateY(100%); } - .offcanvas.showing, .offcanvas.show:not(.hiding) { - transform: none; } - .offcanvas.showing, .offcanvas.hiding, .offcanvas.show { - visibility: visible; } - -.offcanvas-backdrop { - position: fixed; - top: 0; - left: 0; - z-index: 1040; - width: 100vw; - height: 100vh; - background-color: #000; } - .offcanvas-backdrop.fade { - opacity: 0; } - .offcanvas-backdrop.show { - opacity: 0.5; } - -.offcanvas-header { - display: flex; - align-items: center; - padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x); } - .offcanvas-header .btn-close { - padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5); - margin: calc(-.5 * var(--bs-offcanvas-padding-y)) calc(-.5 * var(--bs-offcanvas-padding-x)) calc(-.5 * var(--bs-offcanvas-padding-y)) auto; } - -.offcanvas-title { - margin-bottom: 0; - line-height: var(--bs-offcanvas-title-line-height); } - -.offcanvas-body { - flex-grow: 1; - padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x); - overflow-y: auto; } - -.placeholder { - display: inline-block; - min-height: 1em; - vertical-align: middle; - cursor: wait; - background-color: currentcolor; - opacity: 0.5; } - .placeholder.btn::before, .search-form .placeholder.search-submit::before, .comment-form input.placeholder[type="submit"]::before { - display: inline-block; - content: ""; } - -.placeholder-xs { - min-height: .6em; } - -.placeholder-sm { - min-height: .8em; } - -.placeholder-lg { - min-height: 1.2em; } - -.placeholder-glow .placeholder { - animation: placeholder-glow 2s ease-in-out infinite; } - -@keyframes placeholder-glow { - 50% { - opacity: 0.2; } } - -.placeholder-wave { - mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%); - mask-size: 200% 100%; - animation: placeholder-wave 2s linear infinite; } - -@keyframes placeholder-wave { - 100% { - mask-position: -200% 0%; } } - -.align-baseline { - vertical-align: baseline !important; } - -.align-top { - vertical-align: top !important; } - -.align-middle { - vertical-align: middle !important; } - -.align-bottom { - vertical-align: bottom !important; } - -.align-text-bottom { - vertical-align: text-bottom !important; } - -.align-text-top { - vertical-align: text-top !important; } - -.float-start { - float: left !important; } - -.float-end { - float: right !important; } - -.float-none { - float: none !important; } - -.object-fit-contain { - object-fit: contain !important; } - -.object-fit-cover { - object-fit: cover !important; } - -.object-fit-fill { - object-fit: fill !important; } - -.object-fit-scale { - object-fit: scale-down !important; } - -.object-fit-none { - object-fit: none !important; } - -.opacity-0 { - opacity: 0 !important; } - -.opacity-25 { - opacity: 0.25 !important; } - -.opacity-50 { - opacity: 0.5 !important; } - -.opacity-75 { - opacity: 0.75 !important; } - -.opacity-100 { - opacity: 1 !important; } - -.overflow-auto { - overflow: auto !important; } - -.overflow-hidden { - overflow: hidden !important; } - -.overflow-visible { - overflow: visible !important; } - -.overflow-scroll { - overflow: scroll !important; } - -.overflow-x-auto { - overflow-x: auto !important; } - -.overflow-x-hidden { - overflow-x: hidden !important; } - -.overflow-x-visible { - overflow-x: visible !important; } - -.overflow-x-scroll { - overflow-x: scroll !important; } - -.overflow-y-auto { - overflow-y: auto !important; } - -.overflow-y-hidden { - overflow-y: hidden !important; } - -.overflow-y-visible { - overflow-y: visible !important; } - -.overflow-y-scroll { - overflow-y: scroll !important; } - -.d-inline { - display: inline !important; } - -.d-inline-block { - display: inline-block !important; } - -.d-block { - display: block !important; } - -.d-grid { - display: grid !important; } - -.d-inline-grid { - display: inline-grid !important; } - -.d-table { - display: table !important; } - -.d-table-row { - display: table-row !important; } - -.d-table-cell { - display: table-cell !important; } - -.d-flex { - display: flex !important; } - -.d-inline-flex { - display: inline-flex !important; } - -.d-none { - display: none !important; } - -.shadow { - box-shadow: var(--bs-box-shadow) !important; } - -.shadow-sm { - box-shadow: var(--bs-box-shadow-sm) !important; } - -.shadow-lg { - box-shadow: var(--bs-box-shadow-lg) !important; } - -.shadow-none { - box-shadow: none !important; } - -.focus-ring-primary { - --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity)); } - -.focus-ring-secondary { - --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity)); } - -.focus-ring-success { - --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity)); } - -.focus-ring-info { - --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity)); } - -.focus-ring-warning { - --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity)); } - -.focus-ring-danger { - --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity)); } - -.focus-ring-light { - --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity)); } - -.focus-ring-dark { - --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity)); } - -.position-static { - position: static !important; } - -.position-relative { - position: relative !important; } - -.position-absolute { - position: absolute !important; } - -.position-fixed { - position: fixed !important; } - -.position-sticky { - position: sticky !important; } - -.top-0 { - top: 0 !important; } - -.top-50 { - top: 50% !important; } - -.top-100 { - top: 100% !important; } - -.bottom-0 { - bottom: 0 !important; } - -.bottom-50 { - bottom: 50% !important; } - -.bottom-100 { - bottom: 100% !important; } - -.start-0 { - left: 0 !important; } - -.start-50 { - left: 50% !important; } - -.start-100 { - left: 100% !important; } - -.end-0 { - right: 0 !important; } - -.end-50 { - right: 50% !important; } - -.end-100 { - right: 100% !important; } - -.translate-middle { - transform: translate(-50%, -50%) !important; } - -.translate-middle-x { - transform: translateX(-50%) !important; } - -.translate-middle-y { - transform: translateY(-50%) !important; } - -.border { - border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } - -.border-0 { - border: 0 !important; } - -.border-top { - border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } - -.border-top-0 { - border-top: 0 !important; } - -.border-end { - border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } - -.border-end-0 { - border-right: 0 !important; } - -.border-bottom { - border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } - -.border-bottom-0 { - border-bottom: 0 !important; } - -.border-start { - border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } - -.border-start-0 { - border-left: 0 !important; } - -.border-primary { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important; } - -.border-secondary { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important; } - -.border-success { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important; } - -.border-info { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important; } - -.border-warning { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important; } - -.border-danger { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important; } - -.border-light { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important; } - -.border-dark { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important; } - -.border-black { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important; } - -.border-white { - --bs-border-opacity: 1; - border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important; } - -.border-primary-subtle { - border-color: var(--bs-primary-border-subtle) !important; } - -.border-secondary-subtle { - border-color: var(--bs-secondary-border-subtle) !important; } - -.border-success-subtle { - border-color: var(--bs-success-border-subtle) !important; } - -.border-info-subtle { - border-color: var(--bs-info-border-subtle) !important; } - -.border-warning-subtle { - border-color: var(--bs-warning-border-subtle) !important; } - -.border-danger-subtle { - border-color: var(--bs-danger-border-subtle) !important; } - -.border-light-subtle { - border-color: var(--bs-light-border-subtle) !important; } - -.border-dark-subtle { - border-color: var(--bs-dark-border-subtle) !important; } - -.border-1 { - border-width: 1px !important; } - -.border-2 { - border-width: 2px !important; } - -.border-3 { - border-width: 3px !important; } - -.border-4 { - border-width: 4px !important; } - -.border-5 { - border-width: 5px !important; } - -.border-opacity-10 { - --bs-border-opacity: 0.1; } - -.border-opacity-25 { - --bs-border-opacity: 0.25; } - -.border-opacity-50 { - --bs-border-opacity: 0.5; } - -.border-opacity-75 { - --bs-border-opacity: 0.75; } - -.border-opacity-100 { - --bs-border-opacity: 1; } - -.w-25 { - width: 25% !important; } - -.w-50 { - width: 50% !important; } - -.w-75 { - width: 75% !important; } - -.w-100 { - width: 100% !important; } - -.w-auto { - width: auto !important; } - -.mw-100 { - max-width: 100% !important; } - -.vw-100 { - width: 100vw !important; } - -.min-vw-100 { - min-width: 100vw !important; } - -.h-25 { - height: 25% !important; } - -.h-50 { - height: 50% !important; } - -.h-75 { - height: 75% !important; } - -.h-100 { - height: 100% !important; } - -.h-auto { - height: auto !important; } - -.mh-100 { - max-height: 100% !important; } - -.vh-100 { - height: 100vh !important; } - -.min-vh-100 { - min-height: 100vh !important; } - -.flex-fill { - flex: 1 1 auto !important; } - -.flex-row { - flex-direction: row !important; } - -.flex-column { - flex-direction: column !important; } - -.flex-row-reverse { - flex-direction: row-reverse !important; } - -.flex-column-reverse { - flex-direction: column-reverse !important; } - -.flex-grow-0 { - flex-grow: 0 !important; } - -.flex-grow-1 { - flex-grow: 1 !important; } - -.flex-shrink-0 { - flex-shrink: 0 !important; } - -.flex-shrink-1 { - flex-shrink: 1 !important; } - -.flex-wrap { - flex-wrap: wrap !important; } - -.flex-nowrap { - flex-wrap: nowrap !important; } - -.flex-wrap-reverse { - flex-wrap: wrap-reverse !important; } - -.justify-content-start { - justify-content: flex-start !important; } - -.justify-content-end { - justify-content: flex-end !important; } - -.justify-content-center { - justify-content: center !important; } - -.justify-content-between { - justify-content: space-between !important; } - -.justify-content-around { - justify-content: space-around !important; } - -.justify-content-evenly { - justify-content: space-evenly !important; } - -.align-items-start { - align-items: flex-start !important; } - -.align-items-end { - align-items: flex-end !important; } - -.align-items-center { - align-items: center !important; } - -.align-items-baseline { - align-items: baseline !important; } - -.align-items-stretch { - align-items: stretch !important; } - -.align-content-start { - align-content: flex-start !important; } - -.align-content-end { - align-content: flex-end !important; } - -.align-content-center { - align-content: center !important; } - -.align-content-between { - align-content: space-between !important; } - -.align-content-around { - align-content: space-around !important; } - -.align-content-stretch { - align-content: stretch !important; } - -.align-self-auto { - align-self: auto !important; } - -.align-self-start { - align-self: flex-start !important; } - -.align-self-end { - align-self: flex-end !important; } - -.align-self-center { - align-self: center !important; } - -.align-self-baseline { - align-self: baseline !important; } - -.align-self-stretch { - align-self: stretch !important; } - -.order-first { - order: -1 !important; } - -.order-0 { - order: 0 !important; } - -.order-1 { - order: 1 !important; } - -.order-2 { - order: 2 !important; } - -.order-3 { - order: 3 !important; } - -.order-4 { - order: 4 !important; } - -.order-5 { - order: 5 !important; } - -.order-last { - order: 6 !important; } - -.m-0 { - margin: 0 !important; } - -.m-1 { - margin: 0.25rem !important; } - -.m-2 { - margin: 0.5rem !important; } - -.m-3 { - margin: 1rem !important; } - -.m-4 { - margin: 1.5rem !important; } - -.m-5 { - margin: 3rem !important; } - -.m-auto { - margin: auto !important; } - -.mx-0 { - margin-right: 0 !important; - margin-left: 0 !important; } - -.mx-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; } - -.mx-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; } - -.mx-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; } - -.mx-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; } - -.mx-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; } - -.mx-auto { - margin-right: auto !important; - margin-left: auto !important; } - -.my-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; } - -.my-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; } - -.my-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; } - -.my-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; } - -.my-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; } - -.my-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; } - -.my-auto { - margin-top: auto !important; - margin-bottom: auto !important; } - -.mt-0 { - margin-top: 0 !important; } - -.mt-1 { - margin-top: 0.25rem !important; } - -.mt-2 { - margin-top: 0.5rem !important; } - -.mt-3 { - margin-top: 1rem !important; } - -.mt-4 { - margin-top: 1.5rem !important; } - -.mt-5 { - margin-top: 3rem !important; } - -.mt-auto { - margin-top: auto !important; } - -.me-0 { - margin-right: 0 !important; } - -.me-1 { - margin-right: 0.25rem !important; } - -.me-2 { - margin-right: 0.5rem !important; } - -.me-3 { - margin-right: 1rem !important; } - -.me-4 { - margin-right: 1.5rem !important; } - -.me-5 { - margin-right: 3rem !important; } - -.me-auto { - margin-right: auto !important; } - -.mb-0 { - margin-bottom: 0 !important; } - -.mb-1 { - margin-bottom: 0.25rem !important; } - -.mb-2 { - margin-bottom: 0.5rem !important; } - -.mb-3 { - margin-bottom: 1rem !important; } - -.mb-4 { - margin-bottom: 1.5rem !important; } - -.mb-5 { - margin-bottom: 3rem !important; } - -.mb-auto { - margin-bottom: auto !important; } - -.ms-0 { - margin-left: 0 !important; } - -.ms-1 { - margin-left: 0.25rem !important; } - -.ms-2 { - margin-left: 0.5rem !important; } - -.ms-3 { - margin-left: 1rem !important; } - -.ms-4 { - margin-left: 1.5rem !important; } - -.ms-5 { - margin-left: 3rem !important; } - -.ms-auto { - margin-left: auto !important; } - -.m-n1 { - margin: -0.25rem !important; } - -.m-n2 { - margin: -0.5rem !important; } - -.m-n3 { - margin: -1rem !important; } - -.m-n4 { - margin: -1.5rem !important; } - -.m-n5 { - margin: -3rem !important; } - -.mx-n1 { - margin-right: -0.25rem !important; - margin-left: -0.25rem !important; } - -.mx-n2 { - margin-right: -0.5rem !important; - margin-left: -0.5rem !important; } - -.mx-n3 { - margin-right: -1rem !important; - margin-left: -1rem !important; } - -.mx-n4 { - margin-right: -1.5rem !important; - margin-left: -1.5rem !important; } - -.mx-n5 { - margin-right: -3rem !important; - margin-left: -3rem !important; } - -.my-n1 { - margin-top: -0.25rem !important; - margin-bottom: -0.25rem !important; } - -.my-n2 { - margin-top: -0.5rem !important; - margin-bottom: -0.5rem !important; } - -.my-n3 { - margin-top: -1rem !important; - margin-bottom: -1rem !important; } - -.my-n4 { - margin-top: -1.5rem !important; - margin-bottom: -1.5rem !important; } - -.my-n5 { - margin-top: -3rem !important; - margin-bottom: -3rem !important; } - -.mt-n1 { - margin-top: -0.25rem !important; } - -.mt-n2 { - margin-top: -0.5rem !important; } - -.mt-n3 { - margin-top: -1rem !important; } - -.mt-n4 { - margin-top: -1.5rem !important; } - -.mt-n5 { - margin-top: -3rem !important; } - -.me-n1 { - margin-right: -0.25rem !important; } - -.me-n2 { - margin-right: -0.5rem !important; } - -.me-n3 { - margin-right: -1rem !important; } - -.me-n4 { - margin-right: -1.5rem !important; } - -.me-n5 { - margin-right: -3rem !important; } - -.mb-n1 { - margin-bottom: -0.25rem !important; } - -.mb-n2 { - margin-bottom: -0.5rem !important; } - -.mb-n3 { - margin-bottom: -1rem !important; } - -.mb-n4 { - margin-bottom: -1.5rem !important; } - -.mb-n5 { - margin-bottom: -3rem !important; } - -.ms-n1 { - margin-left: -0.25rem !important; } - -.ms-n2 { - margin-left: -0.5rem !important; } - -.ms-n3 { - margin-left: -1rem !important; } - -.ms-n4 { - margin-left: -1.5rem !important; } - -.ms-n5 { - margin-left: -3rem !important; } - -.p-0 { - padding: 0 !important; } - -.p-1 { - padding: 0.25rem !important; } - -.p-2 { - padding: 0.5rem !important; } - -.p-3 { - padding: 1rem !important; } - -.p-4 { - padding: 1.5rem !important; } - -.p-5 { - padding: 3rem !important; } - -.px-0 { - padding-right: 0 !important; - padding-left: 0 !important; } - -.px-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; } - -.px-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; } - -.px-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; } - -.px-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; } - -.px-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; } - -.py-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; } - -.py-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; } - -.py-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; } - -.py-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; } - -.py-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; } - -.py-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; } - -.pt-0 { - padding-top: 0 !important; } - -.pt-1 { - padding-top: 0.25rem !important; } - -.pt-2 { - padding-top: 0.5rem !important; } - -.pt-3 { - padding-top: 1rem !important; } - -.pt-4 { - padding-top: 1.5rem !important; } - -.pt-5 { - padding-top: 3rem !important; } - -.pe-0 { - padding-right: 0 !important; } - -.pe-1 { - padding-right: 0.25rem !important; } - -.pe-2 { - padding-right: 0.5rem !important; } - -.pe-3 { - padding-right: 1rem !important; } - -.pe-4 { - padding-right: 1.5rem !important; } - -.pe-5 { - padding-right: 3rem !important; } - -.pb-0 { - padding-bottom: 0 !important; } - -.pb-1 { - padding-bottom: 0.25rem !important; } - -.pb-2 { - padding-bottom: 0.5rem !important; } - -.pb-3 { - padding-bottom: 1rem !important; } - -.pb-4 { - padding-bottom: 1.5rem !important; } - -.pb-5 { - padding-bottom: 3rem !important; } - -.ps-0 { - padding-left: 0 !important; } - -.ps-1 { - padding-left: 0.25rem !important; } - -.ps-2 { - padding-left: 0.5rem !important; } - -.ps-3 { - padding-left: 1rem !important; } - -.ps-4 { - padding-left: 1.5rem !important; } - -.ps-5 { - padding-left: 3rem !important; } - -.gap-0 { - gap: 0 !important; } - -.gap-1 { - gap: 0.25rem !important; } - -.gap-2 { - gap: 0.5rem !important; } - -.gap-3 { - gap: 1rem !important; } - -.gap-4 { - gap: 1.5rem !important; } - -.gap-5 { - gap: 3rem !important; } - -.row-gap-0 { - row-gap: 0 !important; } - -.row-gap-1 { - row-gap: 0.25rem !important; } - -.row-gap-2 { - row-gap: 0.5rem !important; } - -.row-gap-3 { - row-gap: 1rem !important; } - -.row-gap-4 { - row-gap: 1.5rem !important; } - -.row-gap-5 { - row-gap: 3rem !important; } - -.column-gap-0 { - column-gap: 0 !important; } - -.column-gap-1 { - column-gap: 0.25rem !important; } - -.column-gap-2 { - column-gap: 0.5rem !important; } - -.column-gap-3 { - column-gap: 1rem !important; } - -.column-gap-4 { - column-gap: 1.5rem !important; } - -.column-gap-5 { - column-gap: 3rem !important; } - -.font-monospace { - font-family: var(--bs-font-monospace) !important; } - -.fs-1 { - font-size: calc(1.375rem + 1.5vw) !important; } - -.fs-2 { - font-size: calc(1.325rem + 0.9vw) !important; } - -.fs-3 { - font-size: calc(1.3rem + 0.6vw) !important; } - -.fs-4 { - font-size: calc(1.275rem + 0.3vw) !important; } - -.fs-5 { - font-size: 1.25rem !important; } - -.fs-6 { - font-size: 1rem !important; } - -.fst-italic { - font-style: italic !important; } - -.fst-normal { - font-style: normal !important; } - -.fw-lighter { - font-weight: lighter !important; } - -.fw-light { - font-weight: 300 !important; } - -.fw-normal { - font-weight: 400 !important; } - -.fw-medium { - font-weight: 500 !important; } - -.fw-semibold { - font-weight: 600 !important; } - -.fw-bold { - font-weight: 700 !important; } - -.fw-bolder { - font-weight: bolder !important; } - -.lh-1 { - line-height: 1 !important; } - -.lh-sm { - line-height: 1.25 !important; } - -.lh-base { - line-height: 1.5 !important; } - -.lh-lg { - line-height: 2 !important; } - -.text-start { - text-align: left !important; } - -.text-end { - text-align: right !important; } - -.text-center { - text-align: center !important; } - -.text-decoration-none { - text-decoration: none !important; } - -.text-decoration-underline { - text-decoration: underline !important; } - -.text-decoration-line-through { - text-decoration: line-through !important; } - -.text-lowercase { - text-transform: lowercase !important; } - -.text-uppercase { - text-transform: uppercase !important; } - -.text-capitalize { - text-transform: capitalize !important; } - -.text-wrap { - white-space: normal !important; } - -.text-nowrap { - white-space: nowrap !important; } - -/* rtl:begin:remove */ -.text-break { - word-wrap: break-word !important; - word-break: break-word !important; } - -/* rtl:end:remove */ -.text-primary { - --bs-text-opacity: 1; - color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important; } - -.text-secondary { - --bs-text-opacity: 1; - color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important; } - -.text-success { - --bs-text-opacity: 1; - color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important; } - -.text-info { - --bs-text-opacity: 1; - color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important; } - -.text-warning { - --bs-text-opacity: 1; - color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important; } - -.text-danger { - --bs-text-opacity: 1; - color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important; } - -.text-light { - --bs-text-opacity: 1; - color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important; } - -.text-dark { - --bs-text-opacity: 1; - color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important; } - -.text-black { - --bs-text-opacity: 1; - color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; } - -.text-white { - --bs-text-opacity: 1; - color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important; } - -.text-body { - --bs-text-opacity: 1; - color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important; } - -.text-muted { - --bs-text-opacity: 1; - color: var(--bs-secondary-color) !important; } - -.text-black-50 { - --bs-text-opacity: 1; - color: rgba(0, 0, 0, 0.5) !important; } - -.text-white-50 { - --bs-text-opacity: 1; - color: rgba(255, 255, 255, 0.5) !important; } - -.text-body-secondary { - --bs-text-opacity: 1; - color: var(--bs-secondary-color) !important; } - -.text-body-tertiary { - --bs-text-opacity: 1; - color: var(--bs-tertiary-color) !important; } - -.text-body-emphasis { - --bs-text-opacity: 1; - color: var(--bs-emphasis-color) !important; } - -.text-reset { - --bs-text-opacity: 1; - color: inherit !important; } - -.text-opacity-25 { - --bs-text-opacity: 0.25; } - -.text-opacity-50 { - --bs-text-opacity: 0.5; } - -.text-opacity-75 { - --bs-text-opacity: 0.75; } - -.text-opacity-100 { - --bs-text-opacity: 1; } - -.text-primary-emphasis { - color: var(--bs-primary-text-emphasis) !important; } - -.text-secondary-emphasis { - color: var(--bs-secondary-text-emphasis) !important; } - -.text-success-emphasis { - color: var(--bs-success-text-emphasis) !important; } - -.text-info-emphasis { - color: var(--bs-info-text-emphasis) !important; } - -.text-warning-emphasis { - color: var(--bs-warning-text-emphasis) !important; } - -.text-danger-emphasis { - color: var(--bs-danger-text-emphasis) !important; } - -.text-light-emphasis { - color: var(--bs-light-text-emphasis) !important; } - -.text-dark-emphasis { - color: var(--bs-dark-text-emphasis) !important; } - -.link-opacity-10 { - --bs-link-opacity: 0.1; } - -.link-opacity-10-hover:hover { - --bs-link-opacity: 0.1; } - -.link-opacity-25 { - --bs-link-opacity: 0.25; } - -.link-opacity-25-hover:hover { - --bs-link-opacity: 0.25; } - -.link-opacity-50 { - --bs-link-opacity: 0.5; } - -.link-opacity-50-hover:hover { - --bs-link-opacity: 0.5; } - -.link-opacity-75 { - --bs-link-opacity: 0.75; } - -.link-opacity-75-hover:hover { - --bs-link-opacity: 0.75; } - -.link-opacity-100 { - --bs-link-opacity: 1; } - -.link-opacity-100-hover:hover { - --bs-link-opacity: 1; } - -.link-offset-1 { - text-underline-offset: 0.125em !important; } - -.link-offset-1-hover:hover { - text-underline-offset: 0.125em !important; } - -.link-offset-2 { - text-underline-offset: 0.25em !important; } - -.link-offset-2-hover:hover { - text-underline-offset: 0.25em !important; } - -.link-offset-3 { - text-underline-offset: 0.375em !important; } - -.link-offset-3-hover:hover { - text-underline-offset: 0.375em !important; } - -.link-underline-primary { - --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important; } - -.link-underline-secondary { - --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important; } - -.link-underline-success { - --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important; } - -.link-underline-info { - --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important; } - -.link-underline-warning { - --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important; } - -.link-underline-danger { - --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important; } - -.link-underline-light { - --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important; } - -.link-underline-dark { - --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important; } - -.link-underline { - --bs-link-underline-opacity: 1; - text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important; } - -.link-underline-opacity-0 { - --bs-link-underline-opacity: 0; } - -.link-underline-opacity-0-hover:hover { - --bs-link-underline-opacity: 0; } - -.link-underline-opacity-10 { - --bs-link-underline-opacity: 0.1; } - -.link-underline-opacity-10-hover:hover { - --bs-link-underline-opacity: 0.1; } - -.link-underline-opacity-25 { - --bs-link-underline-opacity: 0.25; } - -.link-underline-opacity-25-hover:hover { - --bs-link-underline-opacity: 0.25; } - -.link-underline-opacity-50 { - --bs-link-underline-opacity: 0.5; } - -.link-underline-opacity-50-hover:hover { - --bs-link-underline-opacity: 0.5; } - -.link-underline-opacity-75 { - --bs-link-underline-opacity: 0.75; } - -.link-underline-opacity-75-hover:hover { - --bs-link-underline-opacity: 0.75; } - -.link-underline-opacity-100 { - --bs-link-underline-opacity: 1; } - -.link-underline-opacity-100-hover:hover { - --bs-link-underline-opacity: 1; } - -.bg-primary { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; } - -.bg-secondary { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important; } - -.bg-success { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important; } - -.bg-info { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important; } - -.bg-warning { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; } - -.bg-danger { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important; } - -.bg-light { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; } - -.bg-dark { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important; } - -.bg-black { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; } - -.bg-white { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important; } - -.bg-body { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important; } - -.bg-transparent { - --bs-bg-opacity: 1; - background-color: transparent !important; } - -.bg-body-secondary { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important; } - -.bg-body-tertiary { - --bs-bg-opacity: 1; - background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important; } - -.bg-opacity-10 { - --bs-bg-opacity: 0.1; } - -.bg-opacity-25 { - --bs-bg-opacity: 0.25; } - -.bg-opacity-50 { - --bs-bg-opacity: 0.5; } - -.bg-opacity-75 { - --bs-bg-opacity: 0.75; } - -.bg-opacity-100 { - --bs-bg-opacity: 1; } - -.bg-primary-subtle { - background-color: var(--bs-primary-bg-subtle) !important; } - -.bg-secondary-subtle { - background-color: var(--bs-secondary-bg-subtle) !important; } - -.bg-success-subtle { - background-color: var(--bs-success-bg-subtle) !important; } - -.bg-info-subtle { - background-color: var(--bs-info-bg-subtle) !important; } - -.bg-warning-subtle { - background-color: var(--bs-warning-bg-subtle) !important; } - -.bg-danger-subtle { - background-color: var(--bs-danger-bg-subtle) !important; } - -.bg-light-subtle { - background-color: var(--bs-light-bg-subtle) !important; } - -.bg-dark-subtle { - background-color: var(--bs-dark-bg-subtle) !important; } - -.bg-gradient { - background-image: var(--bs-gradient) !important; } - -.user-select-all { - user-select: all !important; } - -.user-select-auto { - user-select: auto !important; } - -.user-select-none { - user-select: none !important; } - -.pe-none { - pointer-events: none !important; } - -.pe-auto { - pointer-events: auto !important; } - -.rounded { - border-radius: var(--bs-border-radius) !important; } - -.rounded-0 { - border-radius: 0 !important; } - -.rounded-1 { - border-radius: var(--bs-border-radius-sm) !important; } - -.rounded-2 { - border-radius: var(--bs-border-radius) !important; } - -.rounded-3 { - border-radius: var(--bs-border-radius-lg) !important; } - -.rounded-4 { - border-radius: var(--bs-border-radius-xl) !important; } - -.rounded-5 { - border-radius: var(--bs-border-radius-xxl) !important; } - -.rounded-circle { - border-radius: 50% !important; } - -.rounded-pill { - border-radius: var(--bs-border-radius-pill) !important; } - -.rounded-top { - border-top-left-radius: var(--bs-border-radius) !important; - border-top-right-radius: var(--bs-border-radius) !important; } - -.rounded-top-0 { - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; } - -.rounded-top-1 { - border-top-left-radius: var(--bs-border-radius-sm) !important; - border-top-right-radius: var(--bs-border-radius-sm) !important; } - -.rounded-top-2 { - border-top-left-radius: var(--bs-border-radius) !important; - border-top-right-radius: var(--bs-border-radius) !important; } - -.rounded-top-3 { - border-top-left-radius: var(--bs-border-radius-lg) !important; - border-top-right-radius: var(--bs-border-radius-lg) !important; } - -.rounded-top-4 { - border-top-left-radius: var(--bs-border-radius-xl) !important; - border-top-right-radius: var(--bs-border-radius-xl) !important; } - -.rounded-top-5 { - border-top-left-radius: var(--bs-border-radius-xxl) !important; - border-top-right-radius: var(--bs-border-radius-xxl) !important; } - -.rounded-top-circle { - border-top-left-radius: 50% !important; - border-top-right-radius: 50% !important; } - -.rounded-top-pill { - border-top-left-radius: var(--bs-border-radius-pill) !important; - border-top-right-radius: var(--bs-border-radius-pill) !important; } - -.rounded-end { - border-top-right-radius: var(--bs-border-radius) !important; - border-bottom-right-radius: var(--bs-border-radius) !important; } - -.rounded-end-0 { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; } - -.rounded-end-1 { - border-top-right-radius: var(--bs-border-radius-sm) !important; - border-bottom-right-radius: var(--bs-border-radius-sm) !important; } - -.rounded-end-2 { - border-top-right-radius: var(--bs-border-radius) !important; - border-bottom-right-radius: var(--bs-border-radius) !important; } - -.rounded-end-3 { - border-top-right-radius: var(--bs-border-radius-lg) !important; - border-bottom-right-radius: var(--bs-border-radius-lg) !important; } - -.rounded-end-4 { - border-top-right-radius: var(--bs-border-radius-xl) !important; - border-bottom-right-radius: var(--bs-border-radius-xl) !important; } - -.rounded-end-5 { - border-top-right-radius: var(--bs-border-radius-xxl) !important; - border-bottom-right-radius: var(--bs-border-radius-xxl) !important; } - -.rounded-end-circle { - border-top-right-radius: 50% !important; - border-bottom-right-radius: 50% !important; } - -.rounded-end-pill { - border-top-right-radius: var(--bs-border-radius-pill) !important; - border-bottom-right-radius: var(--bs-border-radius-pill) !important; } - -.rounded-bottom { - border-bottom-right-radius: var(--bs-border-radius) !important; - border-bottom-left-radius: var(--bs-border-radius) !important; } - -.rounded-bottom-0 { - border-bottom-right-radius: 0 !important; - border-bottom-left-radius: 0 !important; } - -.rounded-bottom-1 { - border-bottom-right-radius: var(--bs-border-radius-sm) !important; - border-bottom-left-radius: var(--bs-border-radius-sm) !important; } - -.rounded-bottom-2 { - border-bottom-right-radius: var(--bs-border-radius) !important; - border-bottom-left-radius: var(--bs-border-radius) !important; } - -.rounded-bottom-3 { - border-bottom-right-radius: var(--bs-border-radius-lg) !important; - border-bottom-left-radius: var(--bs-border-radius-lg) !important; } - -.rounded-bottom-4 { - border-bottom-right-radius: var(--bs-border-radius-xl) !important; - border-bottom-left-radius: var(--bs-border-radius-xl) !important; } - -.rounded-bottom-5 { - border-bottom-right-radius: var(--bs-border-radius-xxl) !important; - border-bottom-left-radius: var(--bs-border-radius-xxl) !important; } - -.rounded-bottom-circle { - border-bottom-right-radius: 50% !important; - border-bottom-left-radius: 50% !important; } - -.rounded-bottom-pill { - border-bottom-right-radius: var(--bs-border-radius-pill) !important; - border-bottom-left-radius: var(--bs-border-radius-pill) !important; } - -.rounded-start { - border-bottom-left-radius: var(--bs-border-radius) !important; - border-top-left-radius: var(--bs-border-radius) !important; } - -.rounded-start-0 { - border-bottom-left-radius: 0 !important; - border-top-left-radius: 0 !important; } - -.rounded-start-1 { - border-bottom-left-radius: var(--bs-border-radius-sm) !important; - border-top-left-radius: var(--bs-border-radius-sm) !important; } - -.rounded-start-2 { - border-bottom-left-radius: var(--bs-border-radius) !important; - border-top-left-radius: var(--bs-border-radius) !important; } - -.rounded-start-3 { - border-bottom-left-radius: var(--bs-border-radius-lg) !important; - border-top-left-radius: var(--bs-border-radius-lg) !important; } - -.rounded-start-4 { - border-bottom-left-radius: var(--bs-border-radius-xl) !important; - border-top-left-radius: var(--bs-border-radius-xl) !important; } - -.rounded-start-5 { - border-bottom-left-radius: var(--bs-border-radius-xxl) !important; - border-top-left-radius: var(--bs-border-radius-xxl) !important; } - -.rounded-start-circle { - border-bottom-left-radius: 50% !important; - border-top-left-radius: 50% !important; } - -.rounded-start-pill { - border-bottom-left-radius: var(--bs-border-radius-pill) !important; - border-top-left-radius: var(--bs-border-radius-pill) !important; } - -.visible { - visibility: visible !important; } - -.invisible { - visibility: hidden !important; } - -.z-n1 { - z-index: -1 !important; } - -.z-0 { - z-index: 0 !important; } - -.z-1 { - z-index: 1 !important; } - -.z-2 { - z-index: 2 !important; } - -.z-3 { - z-index: 3 !important; } - -@media (min-width: 576px) { - .float-sm-start { - float: left !important; } - .float-sm-end { - float: right !important; } - .float-sm-none { - float: none !important; } - .object-fit-sm-contain { - object-fit: contain !important; } - .object-fit-sm-cover { - object-fit: cover !important; } - .object-fit-sm-fill { - object-fit: fill !important; } - .object-fit-sm-scale { - object-fit: scale-down !important; } - .object-fit-sm-none { - object-fit: none !important; } - .d-sm-inline { - display: inline !important; } - .d-sm-inline-block { - display: inline-block !important; } - .d-sm-block { - display: block !important; } - .d-sm-grid { - display: grid !important; } - .d-sm-inline-grid { - display: inline-grid !important; } - .d-sm-table { - display: table !important; } - .d-sm-table-row { - display: table-row !important; } - .d-sm-table-cell { - display: table-cell !important; } - .d-sm-flex { - display: flex !important; } - .d-sm-inline-flex { - display: inline-flex !important; } - .d-sm-none { - display: none !important; } - .flex-sm-fill { - flex: 1 1 auto !important; } - .flex-sm-row { - flex-direction: row !important; } - .flex-sm-column { - flex-direction: column !important; } - .flex-sm-row-reverse { - flex-direction: row-reverse !important; } - .flex-sm-column-reverse { - flex-direction: column-reverse !important; } - .flex-sm-grow-0 { - flex-grow: 0 !important; } - .flex-sm-grow-1 { - flex-grow: 1 !important; } - .flex-sm-shrink-0 { - flex-shrink: 0 !important; } - .flex-sm-shrink-1 { - flex-shrink: 1 !important; } - .flex-sm-wrap { - flex-wrap: wrap !important; } - .flex-sm-nowrap { - flex-wrap: nowrap !important; } - .flex-sm-wrap-reverse { - flex-wrap: wrap-reverse !important; } - .justify-content-sm-start { - justify-content: flex-start !important; } - .justify-content-sm-end { - justify-content: flex-end !important; } - .justify-content-sm-center { - justify-content: center !important; } - .justify-content-sm-between { - justify-content: space-between !important; } - .justify-content-sm-around { - justify-content: space-around !important; } - .justify-content-sm-evenly { - justify-content: space-evenly !important; } - .align-items-sm-start { - align-items: flex-start !important; } - .align-items-sm-end { - align-items: flex-end !important; } - .align-items-sm-center { - align-items: center !important; } - .align-items-sm-baseline { - align-items: baseline !important; } - .align-items-sm-stretch { - align-items: stretch !important; } - .align-content-sm-start { - align-content: flex-start !important; } - .align-content-sm-end { - align-content: flex-end !important; } - .align-content-sm-center { - align-content: center !important; } - .align-content-sm-between { - align-content: space-between !important; } - .align-content-sm-around { - align-content: space-around !important; } - .align-content-sm-stretch { - align-content: stretch !important; } - .align-self-sm-auto { - align-self: auto !important; } - .align-self-sm-start { - align-self: flex-start !important; } - .align-self-sm-end { - align-self: flex-end !important; } - .align-self-sm-center { - align-self: center !important; } - .align-self-sm-baseline { - align-self: baseline !important; } - .align-self-sm-stretch { - align-self: stretch !important; } - .order-sm-first { - order: -1 !important; } - .order-sm-0 { - order: 0 !important; } - .order-sm-1 { - order: 1 !important; } - .order-sm-2 { - order: 2 !important; } - .order-sm-3 { - order: 3 !important; } - .order-sm-4 { - order: 4 !important; } - .order-sm-5 { - order: 5 !important; } - .order-sm-last { - order: 6 !important; } - .m-sm-0 { - margin: 0 !important; } - .m-sm-1 { - margin: 0.25rem !important; } - .m-sm-2 { - margin: 0.5rem !important; } - .m-sm-3 { - margin: 1rem !important; } - .m-sm-4 { - margin: 1.5rem !important; } - .m-sm-5 { - margin: 3rem !important; } - .m-sm-auto { - margin: auto !important; } - .mx-sm-0 { - margin-right: 0 !important; - margin-left: 0 !important; } - .mx-sm-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; } - .mx-sm-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; } - .mx-sm-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; } - .mx-sm-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; } - .mx-sm-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; } - .mx-sm-auto { - margin-right: auto !important; - margin-left: auto !important; } - .my-sm-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; } - .my-sm-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; } - .my-sm-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; } - .my-sm-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; } - .my-sm-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; } - .my-sm-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; } - .my-sm-auto { - margin-top: auto !important; - margin-bottom: auto !important; } - .mt-sm-0 { - margin-top: 0 !important; } - .mt-sm-1 { - margin-top: 0.25rem !important; } - .mt-sm-2 { - margin-top: 0.5rem !important; } - .mt-sm-3 { - margin-top: 1rem !important; } - .mt-sm-4 { - margin-top: 1.5rem !important; } - .mt-sm-5 { - margin-top: 3rem !important; } - .mt-sm-auto { - margin-top: auto !important; } - .me-sm-0 { - margin-right: 0 !important; } - .me-sm-1 { - margin-right: 0.25rem !important; } - .me-sm-2 { - margin-right: 0.5rem !important; } - .me-sm-3 { - margin-right: 1rem !important; } - .me-sm-4 { - margin-right: 1.5rem !important; } - .me-sm-5 { - margin-right: 3rem !important; } - .me-sm-auto { - margin-right: auto !important; } - .mb-sm-0 { - margin-bottom: 0 !important; } - .mb-sm-1 { - margin-bottom: 0.25rem !important; } - .mb-sm-2 { - margin-bottom: 0.5rem !important; } - .mb-sm-3 { - margin-bottom: 1rem !important; } - .mb-sm-4 { - margin-bottom: 1.5rem !important; } - .mb-sm-5 { - margin-bottom: 3rem !important; } - .mb-sm-auto { - margin-bottom: auto !important; } - .ms-sm-0 { - margin-left: 0 !important; } - .ms-sm-1 { - margin-left: 0.25rem !important; } - .ms-sm-2 { - margin-left: 0.5rem !important; } - .ms-sm-3 { - margin-left: 1rem !important; } - .ms-sm-4 { - margin-left: 1.5rem !important; } - .ms-sm-5 { - margin-left: 3rem !important; } - .ms-sm-auto { - margin-left: auto !important; } - .m-sm-n1 { - margin: -0.25rem !important; } - .m-sm-n2 { - margin: -0.5rem !important; } - .m-sm-n3 { - margin: -1rem !important; } - .m-sm-n4 { - margin: -1.5rem !important; } - .m-sm-n5 { - margin: -3rem !important; } - .mx-sm-n1 { - margin-right: -0.25rem !important; - margin-left: -0.25rem !important; } - .mx-sm-n2 { - margin-right: -0.5rem !important; - margin-left: -0.5rem !important; } - .mx-sm-n3 { - margin-right: -1rem !important; - margin-left: -1rem !important; } - .mx-sm-n4 { - margin-right: -1.5rem !important; - margin-left: -1.5rem !important; } - .mx-sm-n5 { - margin-right: -3rem !important; - margin-left: -3rem !important; } - .my-sm-n1 { - margin-top: -0.25rem !important; - margin-bottom: -0.25rem !important; } - .my-sm-n2 { - margin-top: -0.5rem !important; - margin-bottom: -0.5rem !important; } - .my-sm-n3 { - margin-top: -1rem !important; - margin-bottom: -1rem !important; } - .my-sm-n4 { - margin-top: -1.5rem !important; - margin-bottom: -1.5rem !important; } - .my-sm-n5 { - margin-top: -3rem !important; - margin-bottom: -3rem !important; } - .mt-sm-n1 { - margin-top: -0.25rem !important; } - .mt-sm-n2 { - margin-top: -0.5rem !important; } - .mt-sm-n3 { - margin-top: -1rem !important; } - .mt-sm-n4 { - margin-top: -1.5rem !important; } - .mt-sm-n5 { - margin-top: -3rem !important; } - .me-sm-n1 { - margin-right: -0.25rem !important; } - .me-sm-n2 { - margin-right: -0.5rem !important; } - .me-sm-n3 { - margin-right: -1rem !important; } - .me-sm-n4 { - margin-right: -1.5rem !important; } - .me-sm-n5 { - margin-right: -3rem !important; } - .mb-sm-n1 { - margin-bottom: -0.25rem !important; } - .mb-sm-n2 { - margin-bottom: -0.5rem !important; } - .mb-sm-n3 { - margin-bottom: -1rem !important; } - .mb-sm-n4 { - margin-bottom: -1.5rem !important; } - .mb-sm-n5 { - margin-bottom: -3rem !important; } - .ms-sm-n1 { - margin-left: -0.25rem !important; } - .ms-sm-n2 { - margin-left: -0.5rem !important; } - .ms-sm-n3 { - margin-left: -1rem !important; } - .ms-sm-n4 { - margin-left: -1.5rem !important; } - .ms-sm-n5 { - margin-left: -3rem !important; } - .p-sm-0 { - padding: 0 !important; } - .p-sm-1 { - padding: 0.25rem !important; } - .p-sm-2 { - padding: 0.5rem !important; } - .p-sm-3 { - padding: 1rem !important; } - .p-sm-4 { - padding: 1.5rem !important; } - .p-sm-5 { - padding: 3rem !important; } - .px-sm-0 { - padding-right: 0 !important; - padding-left: 0 !important; } - .px-sm-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; } - .px-sm-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; } - .px-sm-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; } - .px-sm-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; } - .px-sm-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; } - .py-sm-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; } - .py-sm-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; } - .py-sm-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; } - .py-sm-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; } - .py-sm-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; } - .py-sm-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; } - .pt-sm-0 { - padding-top: 0 !important; } - .pt-sm-1 { - padding-top: 0.25rem !important; } - .pt-sm-2 { - padding-top: 0.5rem !important; } - .pt-sm-3 { - padding-top: 1rem !important; } - .pt-sm-4 { - padding-top: 1.5rem !important; } - .pt-sm-5 { - padding-top: 3rem !important; } - .pe-sm-0 { - padding-right: 0 !important; } - .pe-sm-1 { - padding-right: 0.25rem !important; } - .pe-sm-2 { - padding-right: 0.5rem !important; } - .pe-sm-3 { - padding-right: 1rem !important; } - .pe-sm-4 { - padding-right: 1.5rem !important; } - .pe-sm-5 { - padding-right: 3rem !important; } - .pb-sm-0 { - padding-bottom: 0 !important; } - .pb-sm-1 { - padding-bottom: 0.25rem !important; } - .pb-sm-2 { - padding-bottom: 0.5rem !important; } - .pb-sm-3 { - padding-bottom: 1rem !important; } - .pb-sm-4 { - padding-bottom: 1.5rem !important; } - .pb-sm-5 { - padding-bottom: 3rem !important; } - .ps-sm-0 { - padding-left: 0 !important; } - .ps-sm-1 { - padding-left: 0.25rem !important; } - .ps-sm-2 { - padding-left: 0.5rem !important; } - .ps-sm-3 { - padding-left: 1rem !important; } - .ps-sm-4 { - padding-left: 1.5rem !important; } - .ps-sm-5 { - padding-left: 3rem !important; } - .gap-sm-0 { - gap: 0 !important; } - .gap-sm-1 { - gap: 0.25rem !important; } - .gap-sm-2 { - gap: 0.5rem !important; } - .gap-sm-3 { - gap: 1rem !important; } - .gap-sm-4 { - gap: 1.5rem !important; } - .gap-sm-5 { - gap: 3rem !important; } - .row-gap-sm-0 { - row-gap: 0 !important; } - .row-gap-sm-1 { - row-gap: 0.25rem !important; } - .row-gap-sm-2 { - row-gap: 0.5rem !important; } - .row-gap-sm-3 { - row-gap: 1rem !important; } - .row-gap-sm-4 { - row-gap: 1.5rem !important; } - .row-gap-sm-5 { - row-gap: 3rem !important; } - .column-gap-sm-0 { - column-gap: 0 !important; } - .column-gap-sm-1 { - column-gap: 0.25rem !important; } - .column-gap-sm-2 { - column-gap: 0.5rem !important; } - .column-gap-sm-3 { - column-gap: 1rem !important; } - .column-gap-sm-4 { - column-gap: 1.5rem !important; } - .column-gap-sm-5 { - column-gap: 3rem !important; } - .text-sm-start { - text-align: left !important; } - .text-sm-end { - text-align: right !important; } - .text-sm-center { - text-align: center !important; } } - -@media (min-width: 768px) { - .float-md-start { - float: left !important; } - .float-md-end { - float: right !important; } - .float-md-none { - float: none !important; } - .object-fit-md-contain { - object-fit: contain !important; } - .object-fit-md-cover { - object-fit: cover !important; } - .object-fit-md-fill { - object-fit: fill !important; } - .object-fit-md-scale { - object-fit: scale-down !important; } - .object-fit-md-none { - object-fit: none !important; } - .d-md-inline { - display: inline !important; } - .d-md-inline-block { - display: inline-block !important; } - .d-md-block { - display: block !important; } - .d-md-grid { - display: grid !important; } - .d-md-inline-grid { - display: inline-grid !important; } - .d-md-table { - display: table !important; } - .d-md-table-row { - display: table-row !important; } - .d-md-table-cell { - display: table-cell !important; } - .d-md-flex { - display: flex !important; } - .d-md-inline-flex { - display: inline-flex !important; } - .d-md-none { - display: none !important; } - .flex-md-fill { - flex: 1 1 auto !important; } - .flex-md-row { - flex-direction: row !important; } - .flex-md-column { - flex-direction: column !important; } - .flex-md-row-reverse { - flex-direction: row-reverse !important; } - .flex-md-column-reverse { - flex-direction: column-reverse !important; } - .flex-md-grow-0 { - flex-grow: 0 !important; } - .flex-md-grow-1 { - flex-grow: 1 !important; } - .flex-md-shrink-0 { - flex-shrink: 0 !important; } - .flex-md-shrink-1 { - flex-shrink: 1 !important; } - .flex-md-wrap { - flex-wrap: wrap !important; } - .flex-md-nowrap { - flex-wrap: nowrap !important; } - .flex-md-wrap-reverse { - flex-wrap: wrap-reverse !important; } - .justify-content-md-start { - justify-content: flex-start !important; } - .justify-content-md-end { - justify-content: flex-end !important; } - .justify-content-md-center { - justify-content: center !important; } - .justify-content-md-between { - justify-content: space-between !important; } - .justify-content-md-around { - justify-content: space-around !important; } - .justify-content-md-evenly { - justify-content: space-evenly !important; } - .align-items-md-start { - align-items: flex-start !important; } - .align-items-md-end { - align-items: flex-end !important; } - .align-items-md-center { - align-items: center !important; } - .align-items-md-baseline { - align-items: baseline !important; } - .align-items-md-stretch { - align-items: stretch !important; } - .align-content-md-start { - align-content: flex-start !important; } - .align-content-md-end { - align-content: flex-end !important; } - .align-content-md-center { - align-content: center !important; } - .align-content-md-between { - align-content: space-between !important; } - .align-content-md-around { - align-content: space-around !important; } - .align-content-md-stretch { - align-content: stretch !important; } - .align-self-md-auto { - align-self: auto !important; } - .align-self-md-start { - align-self: flex-start !important; } - .align-self-md-end { - align-self: flex-end !important; } - .align-self-md-center { - align-self: center !important; } - .align-self-md-baseline { - align-self: baseline !important; } - .align-self-md-stretch { - align-self: stretch !important; } - .order-md-first { - order: -1 !important; } - .order-md-0 { - order: 0 !important; } - .order-md-1 { - order: 1 !important; } - .order-md-2 { - order: 2 !important; } - .order-md-3 { - order: 3 !important; } - .order-md-4 { - order: 4 !important; } - .order-md-5 { - order: 5 !important; } - .order-md-last { - order: 6 !important; } - .m-md-0 { - margin: 0 !important; } - .m-md-1 { - margin: 0.25rem !important; } - .m-md-2 { - margin: 0.5rem !important; } - .m-md-3 { - margin: 1rem !important; } - .m-md-4 { - margin: 1.5rem !important; } - .m-md-5 { - margin: 3rem !important; } - .m-md-auto { - margin: auto !important; } - .mx-md-0 { - margin-right: 0 !important; - margin-left: 0 !important; } - .mx-md-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; } - .mx-md-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; } - .mx-md-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; } - .mx-md-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; } - .mx-md-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; } - .mx-md-auto { - margin-right: auto !important; - margin-left: auto !important; } - .my-md-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; } - .my-md-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; } - .my-md-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; } - .my-md-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; } - .my-md-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; } - .my-md-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; } - .my-md-auto { - margin-top: auto !important; - margin-bottom: auto !important; } - .mt-md-0 { - margin-top: 0 !important; } - .mt-md-1 { - margin-top: 0.25rem !important; } - .mt-md-2 { - margin-top: 0.5rem !important; } - .mt-md-3 { - margin-top: 1rem !important; } - .mt-md-4 { - margin-top: 1.5rem !important; } - .mt-md-5 { - margin-top: 3rem !important; } - .mt-md-auto { - margin-top: auto !important; } - .me-md-0 { - margin-right: 0 !important; } - .me-md-1 { - margin-right: 0.25rem !important; } - .me-md-2 { - margin-right: 0.5rem !important; } - .me-md-3 { - margin-right: 1rem !important; } - .me-md-4 { - margin-right: 1.5rem !important; } - .me-md-5 { - margin-right: 3rem !important; } - .me-md-auto { - margin-right: auto !important; } - .mb-md-0 { - margin-bottom: 0 !important; } - .mb-md-1 { - margin-bottom: 0.25rem !important; } - .mb-md-2 { - margin-bottom: 0.5rem !important; } - .mb-md-3 { - margin-bottom: 1rem !important; } - .mb-md-4 { - margin-bottom: 1.5rem !important; } - .mb-md-5 { - margin-bottom: 3rem !important; } - .mb-md-auto { - margin-bottom: auto !important; } - .ms-md-0 { - margin-left: 0 !important; } - .ms-md-1 { - margin-left: 0.25rem !important; } - .ms-md-2 { - margin-left: 0.5rem !important; } - .ms-md-3 { - margin-left: 1rem !important; } - .ms-md-4 { - margin-left: 1.5rem !important; } - .ms-md-5 { - margin-left: 3rem !important; } - .ms-md-auto { - margin-left: auto !important; } - .m-md-n1 { - margin: -0.25rem !important; } - .m-md-n2 { - margin: -0.5rem !important; } - .m-md-n3 { - margin: -1rem !important; } - .m-md-n4 { - margin: -1.5rem !important; } - .m-md-n5 { - margin: -3rem !important; } - .mx-md-n1 { - margin-right: -0.25rem !important; - margin-left: -0.25rem !important; } - .mx-md-n2 { - margin-right: -0.5rem !important; - margin-left: -0.5rem !important; } - .mx-md-n3 { - margin-right: -1rem !important; - margin-left: -1rem !important; } - .mx-md-n4 { - margin-right: -1.5rem !important; - margin-left: -1.5rem !important; } - .mx-md-n5 { - margin-right: -3rem !important; - margin-left: -3rem !important; } - .my-md-n1 { - margin-top: -0.25rem !important; - margin-bottom: -0.25rem !important; } - .my-md-n2 { - margin-top: -0.5rem !important; - margin-bottom: -0.5rem !important; } - .my-md-n3 { - margin-top: -1rem !important; - margin-bottom: -1rem !important; } - .my-md-n4 { - margin-top: -1.5rem !important; - margin-bottom: -1.5rem !important; } - .my-md-n5 { - margin-top: -3rem !important; - margin-bottom: -3rem !important; } - .mt-md-n1 { - margin-top: -0.25rem !important; } - .mt-md-n2 { - margin-top: -0.5rem !important; } - .mt-md-n3 { - margin-top: -1rem !important; } - .mt-md-n4 { - margin-top: -1.5rem !important; } - .mt-md-n5 { - margin-top: -3rem !important; } - .me-md-n1 { - margin-right: -0.25rem !important; } - .me-md-n2 { - margin-right: -0.5rem !important; } - .me-md-n3 { - margin-right: -1rem !important; } - .me-md-n4 { - margin-right: -1.5rem !important; } - .me-md-n5 { - margin-right: -3rem !important; } - .mb-md-n1 { - margin-bottom: -0.25rem !important; } - .mb-md-n2 { - margin-bottom: -0.5rem !important; } - .mb-md-n3 { - margin-bottom: -1rem !important; } - .mb-md-n4 { - margin-bottom: -1.5rem !important; } - .mb-md-n5 { - margin-bottom: -3rem !important; } - .ms-md-n1 { - margin-left: -0.25rem !important; } - .ms-md-n2 { - margin-left: -0.5rem !important; } - .ms-md-n3 { - margin-left: -1rem !important; } - .ms-md-n4 { - margin-left: -1.5rem !important; } - .ms-md-n5 { - margin-left: -3rem !important; } - .p-md-0 { - padding: 0 !important; } - .p-md-1 { - padding: 0.25rem !important; } - .p-md-2 { - padding: 0.5rem !important; } - .p-md-3 { - padding: 1rem !important; } - .p-md-4 { - padding: 1.5rem !important; } - .p-md-5 { - padding: 3rem !important; } - .px-md-0 { - padding-right: 0 !important; - padding-left: 0 !important; } - .px-md-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; } - .px-md-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; } - .px-md-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; } - .px-md-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; } - .px-md-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; } - .py-md-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; } - .py-md-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; } - .py-md-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; } - .py-md-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; } - .py-md-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; } - .py-md-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; } - .pt-md-0 { - padding-top: 0 !important; } - .pt-md-1 { - padding-top: 0.25rem !important; } - .pt-md-2 { - padding-top: 0.5rem !important; } - .pt-md-3 { - padding-top: 1rem !important; } - .pt-md-4 { - padding-top: 1.5rem !important; } - .pt-md-5 { - padding-top: 3rem !important; } - .pe-md-0 { - padding-right: 0 !important; } - .pe-md-1 { - padding-right: 0.25rem !important; } - .pe-md-2 { - padding-right: 0.5rem !important; } - .pe-md-3 { - padding-right: 1rem !important; } - .pe-md-4 { - padding-right: 1.5rem !important; } - .pe-md-5 { - padding-right: 3rem !important; } - .pb-md-0 { - padding-bottom: 0 !important; } - .pb-md-1 { - padding-bottom: 0.25rem !important; } - .pb-md-2 { - padding-bottom: 0.5rem !important; } - .pb-md-3 { - padding-bottom: 1rem !important; } - .pb-md-4 { - padding-bottom: 1.5rem !important; } - .pb-md-5 { - padding-bottom: 3rem !important; } - .ps-md-0 { - padding-left: 0 !important; } - .ps-md-1 { - padding-left: 0.25rem !important; } - .ps-md-2 { - padding-left: 0.5rem !important; } - .ps-md-3 { - padding-left: 1rem !important; } - .ps-md-4 { - padding-left: 1.5rem !important; } - .ps-md-5 { - padding-left: 3rem !important; } - .gap-md-0 { - gap: 0 !important; } - .gap-md-1 { - gap: 0.25rem !important; } - .gap-md-2 { - gap: 0.5rem !important; } - .gap-md-3 { - gap: 1rem !important; } - .gap-md-4 { - gap: 1.5rem !important; } - .gap-md-5 { - gap: 3rem !important; } - .row-gap-md-0 { - row-gap: 0 !important; } - .row-gap-md-1 { - row-gap: 0.25rem !important; } - .row-gap-md-2 { - row-gap: 0.5rem !important; } - .row-gap-md-3 { - row-gap: 1rem !important; } - .row-gap-md-4 { - row-gap: 1.5rem !important; } - .row-gap-md-5 { - row-gap: 3rem !important; } - .column-gap-md-0 { - column-gap: 0 !important; } - .column-gap-md-1 { - column-gap: 0.25rem !important; } - .column-gap-md-2 { - column-gap: 0.5rem !important; } - .column-gap-md-3 { - column-gap: 1rem !important; } - .column-gap-md-4 { - column-gap: 1.5rem !important; } - .column-gap-md-5 { - column-gap: 3rem !important; } - .text-md-start { - text-align: left !important; } - .text-md-end { - text-align: right !important; } - .text-md-center { - text-align: center !important; } } - -@media (min-width: 992px) { - .float-lg-start { - float: left !important; } - .float-lg-end { - float: right !important; } - .float-lg-none { - float: none !important; } - .object-fit-lg-contain { - object-fit: contain !important; } - .object-fit-lg-cover { - object-fit: cover !important; } - .object-fit-lg-fill { - object-fit: fill !important; } - .object-fit-lg-scale { - object-fit: scale-down !important; } - .object-fit-lg-none { - object-fit: none !important; } - .d-lg-inline { - display: inline !important; } - .d-lg-inline-block { - display: inline-block !important; } - .d-lg-block { - display: block !important; } - .d-lg-grid { - display: grid !important; } - .d-lg-inline-grid { - display: inline-grid !important; } - .d-lg-table { - display: table !important; } - .d-lg-table-row { - display: table-row !important; } - .d-lg-table-cell { - display: table-cell !important; } - .d-lg-flex { - display: flex !important; } - .d-lg-inline-flex { - display: inline-flex !important; } - .d-lg-none { - display: none !important; } - .flex-lg-fill { - flex: 1 1 auto !important; } - .flex-lg-row { - flex-direction: row !important; } - .flex-lg-column { - flex-direction: column !important; } - .flex-lg-row-reverse { - flex-direction: row-reverse !important; } - .flex-lg-column-reverse { - flex-direction: column-reverse !important; } - .flex-lg-grow-0 { - flex-grow: 0 !important; } - .flex-lg-grow-1 { - flex-grow: 1 !important; } - .flex-lg-shrink-0 { - flex-shrink: 0 !important; } - .flex-lg-shrink-1 { - flex-shrink: 1 !important; } - .flex-lg-wrap { - flex-wrap: wrap !important; } - .flex-lg-nowrap { - flex-wrap: nowrap !important; } - .flex-lg-wrap-reverse { - flex-wrap: wrap-reverse !important; } - .justify-content-lg-start { - justify-content: flex-start !important; } - .justify-content-lg-end { - justify-content: flex-end !important; } - .justify-content-lg-center { - justify-content: center !important; } - .justify-content-lg-between { - justify-content: space-between !important; } - .justify-content-lg-around { - justify-content: space-around !important; } - .justify-content-lg-evenly { - justify-content: space-evenly !important; } - .align-items-lg-start { - align-items: flex-start !important; } - .align-items-lg-end { - align-items: flex-end !important; } - .align-items-lg-center { - align-items: center !important; } - .align-items-lg-baseline { - align-items: baseline !important; } - .align-items-lg-stretch { - align-items: stretch !important; } - .align-content-lg-start { - align-content: flex-start !important; } - .align-content-lg-end { - align-content: flex-end !important; } - .align-content-lg-center { - align-content: center !important; } - .align-content-lg-between { - align-content: space-between !important; } - .align-content-lg-around { - align-content: space-around !important; } - .align-content-lg-stretch { - align-content: stretch !important; } - .align-self-lg-auto { - align-self: auto !important; } - .align-self-lg-start { - align-self: flex-start !important; } - .align-self-lg-end { - align-self: flex-end !important; } - .align-self-lg-center { - align-self: center !important; } - .align-self-lg-baseline { - align-self: baseline !important; } - .align-self-lg-stretch { - align-self: stretch !important; } - .order-lg-first { - order: -1 !important; } - .order-lg-0 { - order: 0 !important; } - .order-lg-1 { - order: 1 !important; } - .order-lg-2 { - order: 2 !important; } - .order-lg-3 { - order: 3 !important; } - .order-lg-4 { - order: 4 !important; } - .order-lg-5 { - order: 5 !important; } - .order-lg-last { - order: 6 !important; } - .m-lg-0 { - margin: 0 !important; } - .m-lg-1 { - margin: 0.25rem !important; } - .m-lg-2 { - margin: 0.5rem !important; } - .m-lg-3 { - margin: 1rem !important; } - .m-lg-4 { - margin: 1.5rem !important; } - .m-lg-5 { - margin: 3rem !important; } - .m-lg-auto { - margin: auto !important; } - .mx-lg-0 { - margin-right: 0 !important; - margin-left: 0 !important; } - .mx-lg-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; } - .mx-lg-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; } - .mx-lg-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; } - .mx-lg-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; } - .mx-lg-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; } - .mx-lg-auto { - margin-right: auto !important; - margin-left: auto !important; } - .my-lg-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; } - .my-lg-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; } - .my-lg-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; } - .my-lg-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; } - .my-lg-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; } - .my-lg-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; } - .my-lg-auto { - margin-top: auto !important; - margin-bottom: auto !important; } - .mt-lg-0 { - margin-top: 0 !important; } - .mt-lg-1 { - margin-top: 0.25rem !important; } - .mt-lg-2 { - margin-top: 0.5rem !important; } - .mt-lg-3 { - margin-top: 1rem !important; } - .mt-lg-4 { - margin-top: 1.5rem !important; } - .mt-lg-5 { - margin-top: 3rem !important; } - .mt-lg-auto { - margin-top: auto !important; } - .me-lg-0 { - margin-right: 0 !important; } - .me-lg-1 { - margin-right: 0.25rem !important; } - .me-lg-2 { - margin-right: 0.5rem !important; } - .me-lg-3 { - margin-right: 1rem !important; } - .me-lg-4 { - margin-right: 1.5rem !important; } - .me-lg-5 { - margin-right: 3rem !important; } - .me-lg-auto { - margin-right: auto !important; } - .mb-lg-0 { - margin-bottom: 0 !important; } - .mb-lg-1 { - margin-bottom: 0.25rem !important; } - .mb-lg-2 { - margin-bottom: 0.5rem !important; } - .mb-lg-3 { - margin-bottom: 1rem !important; } - .mb-lg-4 { - margin-bottom: 1.5rem !important; } - .mb-lg-5 { - margin-bottom: 3rem !important; } - .mb-lg-auto { - margin-bottom: auto !important; } - .ms-lg-0 { - margin-left: 0 !important; } - .ms-lg-1 { - margin-left: 0.25rem !important; } - .ms-lg-2 { - margin-left: 0.5rem !important; } - .ms-lg-3 { - margin-left: 1rem !important; } - .ms-lg-4 { - margin-left: 1.5rem !important; } - .ms-lg-5 { - margin-left: 3rem !important; } - .ms-lg-auto { - margin-left: auto !important; } - .m-lg-n1 { - margin: -0.25rem !important; } - .m-lg-n2 { - margin: -0.5rem !important; } - .m-lg-n3 { - margin: -1rem !important; } - .m-lg-n4 { - margin: -1.5rem !important; } - .m-lg-n5 { - margin: -3rem !important; } - .mx-lg-n1 { - margin-right: -0.25rem !important; - margin-left: -0.25rem !important; } - .mx-lg-n2 { - margin-right: -0.5rem !important; - margin-left: -0.5rem !important; } - .mx-lg-n3 { - margin-right: -1rem !important; - margin-left: -1rem !important; } - .mx-lg-n4 { - margin-right: -1.5rem !important; - margin-left: -1.5rem !important; } - .mx-lg-n5 { - margin-right: -3rem !important; - margin-left: -3rem !important; } - .my-lg-n1 { - margin-top: -0.25rem !important; - margin-bottom: -0.25rem !important; } - .my-lg-n2 { - margin-top: -0.5rem !important; - margin-bottom: -0.5rem !important; } - .my-lg-n3 { - margin-top: -1rem !important; - margin-bottom: -1rem !important; } - .my-lg-n4 { - margin-top: -1.5rem !important; - margin-bottom: -1.5rem !important; } - .my-lg-n5 { - margin-top: -3rem !important; - margin-bottom: -3rem !important; } - .mt-lg-n1 { - margin-top: -0.25rem !important; } - .mt-lg-n2 { - margin-top: -0.5rem !important; } - .mt-lg-n3 { - margin-top: -1rem !important; } - .mt-lg-n4 { - margin-top: -1.5rem !important; } - .mt-lg-n5 { - margin-top: -3rem !important; } - .me-lg-n1 { - margin-right: -0.25rem !important; } - .me-lg-n2 { - margin-right: -0.5rem !important; } - .me-lg-n3 { - margin-right: -1rem !important; } - .me-lg-n4 { - margin-right: -1.5rem !important; } - .me-lg-n5 { - margin-right: -3rem !important; } - .mb-lg-n1 { - margin-bottom: -0.25rem !important; } - .mb-lg-n2 { - margin-bottom: -0.5rem !important; } - .mb-lg-n3 { - margin-bottom: -1rem !important; } - .mb-lg-n4 { - margin-bottom: -1.5rem !important; } - .mb-lg-n5 { - margin-bottom: -3rem !important; } - .ms-lg-n1 { - margin-left: -0.25rem !important; } - .ms-lg-n2 { - margin-left: -0.5rem !important; } - .ms-lg-n3 { - margin-left: -1rem !important; } - .ms-lg-n4 { - margin-left: -1.5rem !important; } - .ms-lg-n5 { - margin-left: -3rem !important; } - .p-lg-0 { - padding: 0 !important; } - .p-lg-1 { - padding: 0.25rem !important; } - .p-lg-2 { - padding: 0.5rem !important; } - .p-lg-3 { - padding: 1rem !important; } - .p-lg-4 { - padding: 1.5rem !important; } - .p-lg-5 { - padding: 3rem !important; } - .px-lg-0 { - padding-right: 0 !important; - padding-left: 0 !important; } - .px-lg-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; } - .px-lg-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; } - .px-lg-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; } - .px-lg-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; } - .px-lg-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; } - .py-lg-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; } - .py-lg-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; } - .py-lg-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; } - .py-lg-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; } - .py-lg-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; } - .py-lg-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; } - .pt-lg-0 { - padding-top: 0 !important; } - .pt-lg-1 { - padding-top: 0.25rem !important; } - .pt-lg-2 { - padding-top: 0.5rem !important; } - .pt-lg-3 { - padding-top: 1rem !important; } - .pt-lg-4 { - padding-top: 1.5rem !important; } - .pt-lg-5 { - padding-top: 3rem !important; } - .pe-lg-0 { - padding-right: 0 !important; } - .pe-lg-1 { - padding-right: 0.25rem !important; } - .pe-lg-2 { - padding-right: 0.5rem !important; } - .pe-lg-3 { - padding-right: 1rem !important; } - .pe-lg-4 { - padding-right: 1.5rem !important; } - .pe-lg-5 { - padding-right: 3rem !important; } - .pb-lg-0 { - padding-bottom: 0 !important; } - .pb-lg-1 { - padding-bottom: 0.25rem !important; } - .pb-lg-2 { - padding-bottom: 0.5rem !important; } - .pb-lg-3 { - padding-bottom: 1rem !important; } - .pb-lg-4 { - padding-bottom: 1.5rem !important; } - .pb-lg-5 { - padding-bottom: 3rem !important; } - .ps-lg-0 { - padding-left: 0 !important; } - .ps-lg-1 { - padding-left: 0.25rem !important; } - .ps-lg-2 { - padding-left: 0.5rem !important; } - .ps-lg-3 { - padding-left: 1rem !important; } - .ps-lg-4 { - padding-left: 1.5rem !important; } - .ps-lg-5 { - padding-left: 3rem !important; } - .gap-lg-0 { - gap: 0 !important; } - .gap-lg-1 { - gap: 0.25rem !important; } - .gap-lg-2 { - gap: 0.5rem !important; } - .gap-lg-3 { - gap: 1rem !important; } - .gap-lg-4 { - gap: 1.5rem !important; } - .gap-lg-5 { - gap: 3rem !important; } - .row-gap-lg-0 { - row-gap: 0 !important; } - .row-gap-lg-1 { - row-gap: 0.25rem !important; } - .row-gap-lg-2 { - row-gap: 0.5rem !important; } - .row-gap-lg-3 { - row-gap: 1rem !important; } - .row-gap-lg-4 { - row-gap: 1.5rem !important; } - .row-gap-lg-5 { - row-gap: 3rem !important; } - .column-gap-lg-0 { - column-gap: 0 !important; } - .column-gap-lg-1 { - column-gap: 0.25rem !important; } - .column-gap-lg-2 { - column-gap: 0.5rem !important; } - .column-gap-lg-3 { - column-gap: 1rem !important; } - .column-gap-lg-4 { - column-gap: 1.5rem !important; } - .column-gap-lg-5 { - column-gap: 3rem !important; } - .text-lg-start { - text-align: left !important; } - .text-lg-end { - text-align: right !important; } - .text-lg-center { - text-align: center !important; } } - -@media (min-width: 1200px) { - .float-xl-start { - float: left !important; } - .float-xl-end { - float: right !important; } - .float-xl-none { - float: none !important; } - .object-fit-xl-contain { - object-fit: contain !important; } - .object-fit-xl-cover { - object-fit: cover !important; } - .object-fit-xl-fill { - object-fit: fill !important; } - .object-fit-xl-scale { - object-fit: scale-down !important; } - .object-fit-xl-none { - object-fit: none !important; } - .d-xl-inline { - display: inline !important; } - .d-xl-inline-block { - display: inline-block !important; } - .d-xl-block { - display: block !important; } - .d-xl-grid { - display: grid !important; } - .d-xl-inline-grid { - display: inline-grid !important; } - .d-xl-table { - display: table !important; } - .d-xl-table-row { - display: table-row !important; } - .d-xl-table-cell { - display: table-cell !important; } - .d-xl-flex { - display: flex !important; } - .d-xl-inline-flex { - display: inline-flex !important; } - .d-xl-none { - display: none !important; } - .flex-xl-fill { - flex: 1 1 auto !important; } - .flex-xl-row { - flex-direction: row !important; } - .flex-xl-column { - flex-direction: column !important; } - .flex-xl-row-reverse { - flex-direction: row-reverse !important; } - .flex-xl-column-reverse { - flex-direction: column-reverse !important; } - .flex-xl-grow-0 { - flex-grow: 0 !important; } - .flex-xl-grow-1 { - flex-grow: 1 !important; } - .flex-xl-shrink-0 { - flex-shrink: 0 !important; } - .flex-xl-shrink-1 { - flex-shrink: 1 !important; } - .flex-xl-wrap { - flex-wrap: wrap !important; } - .flex-xl-nowrap { - flex-wrap: nowrap !important; } - .flex-xl-wrap-reverse { - flex-wrap: wrap-reverse !important; } - .justify-content-xl-start { - justify-content: flex-start !important; } - .justify-content-xl-end { - justify-content: flex-end !important; } - .justify-content-xl-center { - justify-content: center !important; } - .justify-content-xl-between { - justify-content: space-between !important; } - .justify-content-xl-around { - justify-content: space-around !important; } - .justify-content-xl-evenly { - justify-content: space-evenly !important; } - .align-items-xl-start { - align-items: flex-start !important; } - .align-items-xl-end { - align-items: flex-end !important; } - .align-items-xl-center { - align-items: center !important; } - .align-items-xl-baseline { - align-items: baseline !important; } - .align-items-xl-stretch { - align-items: stretch !important; } - .align-content-xl-start { - align-content: flex-start !important; } - .align-content-xl-end { - align-content: flex-end !important; } - .align-content-xl-center { - align-content: center !important; } - .align-content-xl-between { - align-content: space-between !important; } - .align-content-xl-around { - align-content: space-around !important; } - .align-content-xl-stretch { - align-content: stretch !important; } - .align-self-xl-auto { - align-self: auto !important; } - .align-self-xl-start { - align-self: flex-start !important; } - .align-self-xl-end { - align-self: flex-end !important; } - .align-self-xl-center { - align-self: center !important; } - .align-self-xl-baseline { - align-self: baseline !important; } - .align-self-xl-stretch { - align-self: stretch !important; } - .order-xl-first { - order: -1 !important; } - .order-xl-0 { - order: 0 !important; } - .order-xl-1 { - order: 1 !important; } - .order-xl-2 { - order: 2 !important; } - .order-xl-3 { - order: 3 !important; } - .order-xl-4 { - order: 4 !important; } - .order-xl-5 { - order: 5 !important; } - .order-xl-last { - order: 6 !important; } - .m-xl-0 { - margin: 0 !important; } - .m-xl-1 { - margin: 0.25rem !important; } - .m-xl-2 { - margin: 0.5rem !important; } - .m-xl-3 { - margin: 1rem !important; } - .m-xl-4 { - margin: 1.5rem !important; } - .m-xl-5 { - margin: 3rem !important; } - .m-xl-auto { - margin: auto !important; } - .mx-xl-0 { - margin-right: 0 !important; - margin-left: 0 !important; } - .mx-xl-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; } - .mx-xl-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; } - .mx-xl-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; } - .mx-xl-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; } - .mx-xl-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; } - .mx-xl-auto { - margin-right: auto !important; - margin-left: auto !important; } - .my-xl-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; } - .my-xl-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; } - .my-xl-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; } - .my-xl-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; } - .my-xl-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; } - .my-xl-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; } - .my-xl-auto { - margin-top: auto !important; - margin-bottom: auto !important; } - .mt-xl-0 { - margin-top: 0 !important; } - .mt-xl-1 { - margin-top: 0.25rem !important; } - .mt-xl-2 { - margin-top: 0.5rem !important; } - .mt-xl-3 { - margin-top: 1rem !important; } - .mt-xl-4 { - margin-top: 1.5rem !important; } - .mt-xl-5 { - margin-top: 3rem !important; } - .mt-xl-auto { - margin-top: auto !important; } - .me-xl-0 { - margin-right: 0 !important; } - .me-xl-1 { - margin-right: 0.25rem !important; } - .me-xl-2 { - margin-right: 0.5rem !important; } - .me-xl-3 { - margin-right: 1rem !important; } - .me-xl-4 { - margin-right: 1.5rem !important; } - .me-xl-5 { - margin-right: 3rem !important; } - .me-xl-auto { - margin-right: auto !important; } - .mb-xl-0 { - margin-bottom: 0 !important; } - .mb-xl-1 { - margin-bottom: 0.25rem !important; } - .mb-xl-2 { - margin-bottom: 0.5rem !important; } - .mb-xl-3 { - margin-bottom: 1rem !important; } - .mb-xl-4 { - margin-bottom: 1.5rem !important; } - .mb-xl-5 { - margin-bottom: 3rem !important; } - .mb-xl-auto { - margin-bottom: auto !important; } - .ms-xl-0 { - margin-left: 0 !important; } - .ms-xl-1 { - margin-left: 0.25rem !important; } - .ms-xl-2 { - margin-left: 0.5rem !important; } - .ms-xl-3 { - margin-left: 1rem !important; } - .ms-xl-4 { - margin-left: 1.5rem !important; } - .ms-xl-5 { - margin-left: 3rem !important; } - .ms-xl-auto { - margin-left: auto !important; } - .m-xl-n1 { - margin: -0.25rem !important; } - .m-xl-n2 { - margin: -0.5rem !important; } - .m-xl-n3 { - margin: -1rem !important; } - .m-xl-n4 { - margin: -1.5rem !important; } - .m-xl-n5 { - margin: -3rem !important; } - .mx-xl-n1 { - margin-right: -0.25rem !important; - margin-left: -0.25rem !important; } - .mx-xl-n2 { - margin-right: -0.5rem !important; - margin-left: -0.5rem !important; } - .mx-xl-n3 { - margin-right: -1rem !important; - margin-left: -1rem !important; } - .mx-xl-n4 { - margin-right: -1.5rem !important; - margin-left: -1.5rem !important; } - .mx-xl-n5 { - margin-right: -3rem !important; - margin-left: -3rem !important; } - .my-xl-n1 { - margin-top: -0.25rem !important; - margin-bottom: -0.25rem !important; } - .my-xl-n2 { - margin-top: -0.5rem !important; - margin-bottom: -0.5rem !important; } - .my-xl-n3 { - margin-top: -1rem !important; - margin-bottom: -1rem !important; } - .my-xl-n4 { - margin-top: -1.5rem !important; - margin-bottom: -1.5rem !important; } - .my-xl-n5 { - margin-top: -3rem !important; - margin-bottom: -3rem !important; } - .mt-xl-n1 { - margin-top: -0.25rem !important; } - .mt-xl-n2 { - margin-top: -0.5rem !important; } - .mt-xl-n3 { - margin-top: -1rem !important; } - .mt-xl-n4 { - margin-top: -1.5rem !important; } - .mt-xl-n5 { - margin-top: -3rem !important; } - .me-xl-n1 { - margin-right: -0.25rem !important; } - .me-xl-n2 { - margin-right: -0.5rem !important; } - .me-xl-n3 { - margin-right: -1rem !important; } - .me-xl-n4 { - margin-right: -1.5rem !important; } - .me-xl-n5 { - margin-right: -3rem !important; } - .mb-xl-n1 { - margin-bottom: -0.25rem !important; } - .mb-xl-n2 { - margin-bottom: -0.5rem !important; } - .mb-xl-n3 { - margin-bottom: -1rem !important; } - .mb-xl-n4 { - margin-bottom: -1.5rem !important; } - .mb-xl-n5 { - margin-bottom: -3rem !important; } - .ms-xl-n1 { - margin-left: -0.25rem !important; } - .ms-xl-n2 { - margin-left: -0.5rem !important; } - .ms-xl-n3 { - margin-left: -1rem !important; } - .ms-xl-n4 { - margin-left: -1.5rem !important; } - .ms-xl-n5 { - margin-left: -3rem !important; } - .p-xl-0 { - padding: 0 !important; } - .p-xl-1 { - padding: 0.25rem !important; } - .p-xl-2 { - padding: 0.5rem !important; } - .p-xl-3 { - padding: 1rem !important; } - .p-xl-4 { - padding: 1.5rem !important; } - .p-xl-5 { - padding: 3rem !important; } - .px-xl-0 { - padding-right: 0 !important; - padding-left: 0 !important; } - .px-xl-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; } - .px-xl-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; } - .px-xl-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; } - .px-xl-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; } - .px-xl-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; } - .py-xl-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; } - .py-xl-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; } - .py-xl-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; } - .py-xl-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; } - .py-xl-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; } - .py-xl-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; } - .pt-xl-0 { - padding-top: 0 !important; } - .pt-xl-1 { - padding-top: 0.25rem !important; } - .pt-xl-2 { - padding-top: 0.5rem !important; } - .pt-xl-3 { - padding-top: 1rem !important; } - .pt-xl-4 { - padding-top: 1.5rem !important; } - .pt-xl-5 { - padding-top: 3rem !important; } - .pe-xl-0 { - padding-right: 0 !important; } - .pe-xl-1 { - padding-right: 0.25rem !important; } - .pe-xl-2 { - padding-right: 0.5rem !important; } - .pe-xl-3 { - padding-right: 1rem !important; } - .pe-xl-4 { - padding-right: 1.5rem !important; } - .pe-xl-5 { - padding-right: 3rem !important; } - .pb-xl-0 { - padding-bottom: 0 !important; } - .pb-xl-1 { - padding-bottom: 0.25rem !important; } - .pb-xl-2 { - padding-bottom: 0.5rem !important; } - .pb-xl-3 { - padding-bottom: 1rem !important; } - .pb-xl-4 { - padding-bottom: 1.5rem !important; } - .pb-xl-5 { - padding-bottom: 3rem !important; } - .ps-xl-0 { - padding-left: 0 !important; } - .ps-xl-1 { - padding-left: 0.25rem !important; } - .ps-xl-2 { - padding-left: 0.5rem !important; } - .ps-xl-3 { - padding-left: 1rem !important; } - .ps-xl-4 { - padding-left: 1.5rem !important; } - .ps-xl-5 { - padding-left: 3rem !important; } - .gap-xl-0 { - gap: 0 !important; } - .gap-xl-1 { - gap: 0.25rem !important; } - .gap-xl-2 { - gap: 0.5rem !important; } - .gap-xl-3 { - gap: 1rem !important; } - .gap-xl-4 { - gap: 1.5rem !important; } - .gap-xl-5 { - gap: 3rem !important; } - .row-gap-xl-0 { - row-gap: 0 !important; } - .row-gap-xl-1 { - row-gap: 0.25rem !important; } - .row-gap-xl-2 { - row-gap: 0.5rem !important; } - .row-gap-xl-3 { - row-gap: 1rem !important; } - .row-gap-xl-4 { - row-gap: 1.5rem !important; } - .row-gap-xl-5 { - row-gap: 3rem !important; } - .column-gap-xl-0 { - column-gap: 0 !important; } - .column-gap-xl-1 { - column-gap: 0.25rem !important; } - .column-gap-xl-2 { - column-gap: 0.5rem !important; } - .column-gap-xl-3 { - column-gap: 1rem !important; } - .column-gap-xl-4 { - column-gap: 1.5rem !important; } - .column-gap-xl-5 { - column-gap: 3rem !important; } - .text-xl-start { - text-align: left !important; } - .text-xl-end { - text-align: right !important; } - .text-xl-center { - text-align: center !important; } } - -@media (min-width: 1400px) { - .float-xxl-start { - float: left !important; } - .float-xxl-end { - float: right !important; } - .float-xxl-none { - float: none !important; } - .object-fit-xxl-contain { - object-fit: contain !important; } - .object-fit-xxl-cover { - object-fit: cover !important; } - .object-fit-xxl-fill { - object-fit: fill !important; } - .object-fit-xxl-scale { - object-fit: scale-down !important; } - .object-fit-xxl-none { - object-fit: none !important; } - .d-xxl-inline { - display: inline !important; } - .d-xxl-inline-block { - display: inline-block !important; } - .d-xxl-block { - display: block !important; } - .d-xxl-grid { - display: grid !important; } - .d-xxl-inline-grid { - display: inline-grid !important; } - .d-xxl-table { - display: table !important; } - .d-xxl-table-row { - display: table-row !important; } - .d-xxl-table-cell { - display: table-cell !important; } - .d-xxl-flex { - display: flex !important; } - .d-xxl-inline-flex { - display: inline-flex !important; } - .d-xxl-none { - display: none !important; } - .flex-xxl-fill { - flex: 1 1 auto !important; } - .flex-xxl-row { - flex-direction: row !important; } - .flex-xxl-column { - flex-direction: column !important; } - .flex-xxl-row-reverse { - flex-direction: row-reverse !important; } - .flex-xxl-column-reverse { - flex-direction: column-reverse !important; } - .flex-xxl-grow-0 { - flex-grow: 0 !important; } - .flex-xxl-grow-1 { - flex-grow: 1 !important; } - .flex-xxl-shrink-0 { - flex-shrink: 0 !important; } - .flex-xxl-shrink-1 { - flex-shrink: 1 !important; } - .flex-xxl-wrap { - flex-wrap: wrap !important; } - .flex-xxl-nowrap { - flex-wrap: nowrap !important; } - .flex-xxl-wrap-reverse { - flex-wrap: wrap-reverse !important; } - .justify-content-xxl-start { - justify-content: flex-start !important; } - .justify-content-xxl-end { - justify-content: flex-end !important; } - .justify-content-xxl-center { - justify-content: center !important; } - .justify-content-xxl-between { - justify-content: space-between !important; } - .justify-content-xxl-around { - justify-content: space-around !important; } - .justify-content-xxl-evenly { - justify-content: space-evenly !important; } - .align-items-xxl-start { - align-items: flex-start !important; } - .align-items-xxl-end { - align-items: flex-end !important; } - .align-items-xxl-center { - align-items: center !important; } - .align-items-xxl-baseline { - align-items: baseline !important; } - .align-items-xxl-stretch { - align-items: stretch !important; } - .align-content-xxl-start { - align-content: flex-start !important; } - .align-content-xxl-end { - align-content: flex-end !important; } - .align-content-xxl-center { - align-content: center !important; } - .align-content-xxl-between { - align-content: space-between !important; } - .align-content-xxl-around { - align-content: space-around !important; } - .align-content-xxl-stretch { - align-content: stretch !important; } - .align-self-xxl-auto { - align-self: auto !important; } - .align-self-xxl-start { - align-self: flex-start !important; } - .align-self-xxl-end { - align-self: flex-end !important; } - .align-self-xxl-center { - align-self: center !important; } - .align-self-xxl-baseline { - align-self: baseline !important; } - .align-self-xxl-stretch { - align-self: stretch !important; } - .order-xxl-first { - order: -1 !important; } - .order-xxl-0 { - order: 0 !important; } - .order-xxl-1 { - order: 1 !important; } - .order-xxl-2 { - order: 2 !important; } - .order-xxl-3 { - order: 3 !important; } - .order-xxl-4 { - order: 4 !important; } - .order-xxl-5 { - order: 5 !important; } - .order-xxl-last { - order: 6 !important; } - .m-xxl-0 { - margin: 0 !important; } - .m-xxl-1 { - margin: 0.25rem !important; } - .m-xxl-2 { - margin: 0.5rem !important; } - .m-xxl-3 { - margin: 1rem !important; } - .m-xxl-4 { - margin: 1.5rem !important; } - .m-xxl-5 { - margin: 3rem !important; } - .m-xxl-auto { - margin: auto !important; } - .mx-xxl-0 { - margin-right: 0 !important; - margin-left: 0 !important; } - .mx-xxl-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; } - .mx-xxl-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; } - .mx-xxl-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; } - .mx-xxl-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; } - .mx-xxl-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; } - .mx-xxl-auto { - margin-right: auto !important; - margin-left: auto !important; } - .my-xxl-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; } - .my-xxl-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; } - .my-xxl-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; } - .my-xxl-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; } - .my-xxl-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; } - .my-xxl-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; } - .my-xxl-auto { - margin-top: auto !important; - margin-bottom: auto !important; } - .mt-xxl-0 { - margin-top: 0 !important; } - .mt-xxl-1 { - margin-top: 0.25rem !important; } - .mt-xxl-2 { - margin-top: 0.5rem !important; } - .mt-xxl-3 { - margin-top: 1rem !important; } - .mt-xxl-4 { - margin-top: 1.5rem !important; } - .mt-xxl-5 { - margin-top: 3rem !important; } - .mt-xxl-auto { - margin-top: auto !important; } - .me-xxl-0 { - margin-right: 0 !important; } - .me-xxl-1 { - margin-right: 0.25rem !important; } - .me-xxl-2 { - margin-right: 0.5rem !important; } - .me-xxl-3 { - margin-right: 1rem !important; } - .me-xxl-4 { - margin-right: 1.5rem !important; } - .me-xxl-5 { - margin-right: 3rem !important; } - .me-xxl-auto { - margin-right: auto !important; } - .mb-xxl-0 { - margin-bottom: 0 !important; } - .mb-xxl-1 { - margin-bottom: 0.25rem !important; } - .mb-xxl-2 { - margin-bottom: 0.5rem !important; } - .mb-xxl-3 { - margin-bottom: 1rem !important; } - .mb-xxl-4 { - margin-bottom: 1.5rem !important; } - .mb-xxl-5 { - margin-bottom: 3rem !important; } - .mb-xxl-auto { - margin-bottom: auto !important; } - .ms-xxl-0 { - margin-left: 0 !important; } - .ms-xxl-1 { - margin-left: 0.25rem !important; } - .ms-xxl-2 { - margin-left: 0.5rem !important; } - .ms-xxl-3 { - margin-left: 1rem !important; } - .ms-xxl-4 { - margin-left: 1.5rem !important; } - .ms-xxl-5 { - margin-left: 3rem !important; } - .ms-xxl-auto { - margin-left: auto !important; } - .m-xxl-n1 { - margin: -0.25rem !important; } - .m-xxl-n2 { - margin: -0.5rem !important; } - .m-xxl-n3 { - margin: -1rem !important; } - .m-xxl-n4 { - margin: -1.5rem !important; } - .m-xxl-n5 { - margin: -3rem !important; } - .mx-xxl-n1 { - margin-right: -0.25rem !important; - margin-left: -0.25rem !important; } - .mx-xxl-n2 { - margin-right: -0.5rem !important; - margin-left: -0.5rem !important; } - .mx-xxl-n3 { - margin-right: -1rem !important; - margin-left: -1rem !important; } - .mx-xxl-n4 { - margin-right: -1.5rem !important; - margin-left: -1.5rem !important; } - .mx-xxl-n5 { - margin-right: -3rem !important; - margin-left: -3rem !important; } - .my-xxl-n1 { - margin-top: -0.25rem !important; - margin-bottom: -0.25rem !important; } - .my-xxl-n2 { - margin-top: -0.5rem !important; - margin-bottom: -0.5rem !important; } - .my-xxl-n3 { - margin-top: -1rem !important; - margin-bottom: -1rem !important; } - .my-xxl-n4 { - margin-top: -1.5rem !important; - margin-bottom: -1.5rem !important; } - .my-xxl-n5 { - margin-top: -3rem !important; - margin-bottom: -3rem !important; } - .mt-xxl-n1 { - margin-top: -0.25rem !important; } - .mt-xxl-n2 { - margin-top: -0.5rem !important; } - .mt-xxl-n3 { - margin-top: -1rem !important; } - .mt-xxl-n4 { - margin-top: -1.5rem !important; } - .mt-xxl-n5 { - margin-top: -3rem !important; } - .me-xxl-n1 { - margin-right: -0.25rem !important; } - .me-xxl-n2 { - margin-right: -0.5rem !important; } - .me-xxl-n3 { - margin-right: -1rem !important; } - .me-xxl-n4 { - margin-right: -1.5rem !important; } - .me-xxl-n5 { - margin-right: -3rem !important; } - .mb-xxl-n1 { - margin-bottom: -0.25rem !important; } - .mb-xxl-n2 { - margin-bottom: -0.5rem !important; } - .mb-xxl-n3 { - margin-bottom: -1rem !important; } - .mb-xxl-n4 { - margin-bottom: -1.5rem !important; } - .mb-xxl-n5 { - margin-bottom: -3rem !important; } - .ms-xxl-n1 { - margin-left: -0.25rem !important; } - .ms-xxl-n2 { - margin-left: -0.5rem !important; } - .ms-xxl-n3 { - margin-left: -1rem !important; } - .ms-xxl-n4 { - margin-left: -1.5rem !important; } - .ms-xxl-n5 { - margin-left: -3rem !important; } - .p-xxl-0 { - padding: 0 !important; } - .p-xxl-1 { - padding: 0.25rem !important; } - .p-xxl-2 { - padding: 0.5rem !important; } - .p-xxl-3 { - padding: 1rem !important; } - .p-xxl-4 { - padding: 1.5rem !important; } - .p-xxl-5 { - padding: 3rem !important; } - .px-xxl-0 { - padding-right: 0 !important; - padding-left: 0 !important; } - .px-xxl-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; } - .px-xxl-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; } - .px-xxl-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; } - .px-xxl-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; } - .px-xxl-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; } - .py-xxl-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; } - .py-xxl-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; } - .py-xxl-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; } - .py-xxl-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; } - .py-xxl-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; } - .py-xxl-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; } - .pt-xxl-0 { - padding-top: 0 !important; } - .pt-xxl-1 { - padding-top: 0.25rem !important; } - .pt-xxl-2 { - padding-top: 0.5rem !important; } - .pt-xxl-3 { - padding-top: 1rem !important; } - .pt-xxl-4 { - padding-top: 1.5rem !important; } - .pt-xxl-5 { - padding-top: 3rem !important; } - .pe-xxl-0 { - padding-right: 0 !important; } - .pe-xxl-1 { - padding-right: 0.25rem !important; } - .pe-xxl-2 { - padding-right: 0.5rem !important; } - .pe-xxl-3 { - padding-right: 1rem !important; } - .pe-xxl-4 { - padding-right: 1.5rem !important; } - .pe-xxl-5 { - padding-right: 3rem !important; } - .pb-xxl-0 { - padding-bottom: 0 !important; } - .pb-xxl-1 { - padding-bottom: 0.25rem !important; } - .pb-xxl-2 { - padding-bottom: 0.5rem !important; } - .pb-xxl-3 { - padding-bottom: 1rem !important; } - .pb-xxl-4 { - padding-bottom: 1.5rem !important; } - .pb-xxl-5 { - padding-bottom: 3rem !important; } - .ps-xxl-0 { - padding-left: 0 !important; } - .ps-xxl-1 { - padding-left: 0.25rem !important; } - .ps-xxl-2 { - padding-left: 0.5rem !important; } - .ps-xxl-3 { - padding-left: 1rem !important; } - .ps-xxl-4 { - padding-left: 1.5rem !important; } - .ps-xxl-5 { - padding-left: 3rem !important; } - .gap-xxl-0 { - gap: 0 !important; } - .gap-xxl-1 { - gap: 0.25rem !important; } - .gap-xxl-2 { - gap: 0.5rem !important; } - .gap-xxl-3 { - gap: 1rem !important; } - .gap-xxl-4 { - gap: 1.5rem !important; } - .gap-xxl-5 { - gap: 3rem !important; } - .row-gap-xxl-0 { - row-gap: 0 !important; } - .row-gap-xxl-1 { - row-gap: 0.25rem !important; } - .row-gap-xxl-2 { - row-gap: 0.5rem !important; } - .row-gap-xxl-3 { - row-gap: 1rem !important; } - .row-gap-xxl-4 { - row-gap: 1.5rem !important; } - .row-gap-xxl-5 { - row-gap: 3rem !important; } - .column-gap-xxl-0 { - column-gap: 0 !important; } - .column-gap-xxl-1 { - column-gap: 0.25rem !important; } - .column-gap-xxl-2 { - column-gap: 0.5rem !important; } - .column-gap-xxl-3 { - column-gap: 1rem !important; } - .column-gap-xxl-4 { - column-gap: 1.5rem !important; } - .column-gap-xxl-5 { - column-gap: 3rem !important; } - .text-xxl-start { - text-align: left !important; } - .text-xxl-end { - text-align: right !important; } - .text-xxl-center { - text-align: center !important; } } - -@media (min-width: 1200px) { - .fs-1 { - font-size: 2.5rem !important; } - .fs-2 { - font-size: 2rem !important; } - .fs-3 { - font-size: 1.75rem !important; } - .fs-4 { - font-size: 1.5rem !important; } } - -@media print { - .d-print-inline { - display: inline !important; } - .d-print-inline-block { - display: inline-block !important; } - .d-print-block { - display: block !important; } - .d-print-grid { - display: grid !important; } - .d-print-inline-grid { - display: inline-grid !important; } - .d-print-table { - display: table !important; } - .d-print-table-row { - display: table-row !important; } - .d-print-table-cell { - display: table-cell !important; } - .d-print-flex { - display: flex !important; } - .d-print-inline-flex { - display: inline-flex !important; } - .d-print-none { - display: none !important; } } - -/* jost-regular - latin */ -@font-face { - font-family: Jost; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local("Jost Regular Regular"), local("Jost-Regular"), local("Jost* Book"), local("Jost-Book"), url("fonts/vendor/jost/jost-v4-latin-regular.woff2") format("woff2"), url("fonts/vendor/jost/jost-v4-latin-regular.woff") format("woff"); - /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } - -/* jost-500 - latin */ -@font-face { - font-family: Jost; - font-style: normal; - font-weight: 500; - font-display: swap; - src: local("Jost Regular Medium"), local("JostRoman-Medium"), local("Jost* Medium"), local("Jost-Medium"), url("fonts/vendor/jost/jost-v4-latin-500.woff2") format("woff2"), url("fonts/vendor/jost/jost-v4-latin-500.woff") format("woff"); - /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } - -/* jost-700 - latin */ -@font-face { - font-family: Jost; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local("Jost Regular Bold"), local("JostRoman-Bold"), local("Jost* Bold"), local("Jost-Bold"), url("fonts/vendor/jost/jost-v4-latin-700.woff2") format("woff2"), url("fonts/vendor/jost/jost-v4-latin-700.woff") format("woff"); - /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } - -/* jost-italic - latin */ -@font-face { - font-family: Jost; - font-style: italic; - font-weight: 400; - font-display: swap; - src: local("Jost Italic Italic"), local("Jost-Italic"), local("Jost* BookItalic"), local("Jost-BookItalic"), url("fonts/vendor/jost/jost-v4-latin-italic.woff2") format("woff2"), url("fonts/vendor/jost/jost-v4-latin-italic.woff") format("woff"); - /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } - -/* jost-500italic - latin */ -@font-face { - font-family: Jost; - font-style: italic; - font-weight: 500; - font-display: swap; - src: local("Jost Italic Medium Italic"), local("JostItalic-Medium"), local("Jost* Medium Italic"), local("Jost-MediumItalic"), url("fonts/vendor/jost/jost-v4-latin-500italic.woff2") format("woff2"), url("fonts/vendor/jost/jost-v4-latin-500italic.woff") format("woff"); - /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } - -/* jost-700italic - latin */ -@font-face { - font-family: Jost; - font-style: italic; - font-weight: 700; - font-display: swap; - src: local("Jost Italic Bold Italic"), local("JostItalic-Bold"), local("Jost* Bold Italic"), local("Jost-BoldItalic"), url("fonts/vendor/jost/jost-v4-latin-700italic.woff2") format("woff2"), url("fonts/vendor/jost/jost-v4-latin-700italic.woff") format("woff"); - /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } - -/* Show the sun icon if the bs theme is dark */ -html[data-bs-theme="dark"] .icon-tabler-sun { - display: block; } - -html[data-bs-theme="dark"] .icon-tabler-moon { - display: none; } - -/* Show the moon icon if the bs theme is light */ -html[data-bs-theme="light"] .icon-tabler-sun { - display: none; } - -html[data-bs-theme="light"] .icon-tabler-moon { - display: block; } - -/* -.section:not(body.section) { - padding-top: 5rem; - padding-bottom: 5rem; -} - -.section-lg { - padding-top: 7rem; - padding-bottom: 7rem; -} -*/ -/* -.highlight .chroma { - padding: 1rem; - border-radius: var(--bs-border-radius); -} -*/ -.privacy .content, -.terms .content, -.about .content, -.contributors .content, -.blog .content, -.page .content, -.error404 .content, -.docs.list .content, -.tutorial.list .content, -.showcase.list .content, -.categories.list .content, -.tags.list .content, -.list.section .content { - padding-top: 1rem; - padding-bottom: 3rem; } - -.content img { - max-width: 100%; } - -h6, -.h6, -h5, -.h5, -h4, -.h4, -h3, -.h3, -h2, -.h2, -h1, -.h1 { - margin-top: 2rem; - margin-bottom: 1rem; } - -/* -body.docs, -body.blog { - padding-top: 0; - padding-bottom: 0; -} -*/ -@media (min-width: 768px) { - body { - font-size: 1.125rem; - /* - padding-top: 4rem !important; - */ } - h1, - h2, - h3, - h4, - h5, - h6, - .h1, - .h2, - .h3, - .h4, - .h5, - .h6 { - margin-bottom: 1.125rem; } } - -.home h1, .home .h1 { - /* font-size: calc(1.375rem + 1.5vw); */ - font-size: calc(1.875rem + 1.5vw); - margin-top: -1rem; } - -a:hover, -a:focus { - text-decoration: underline; } - -.docs-navigation .card { - transition: transform 0.3s; } - -.docs-navigation .card:hover { - transform: scale(1.025); } - -a.btn:hover, .search-form a.search-submit:hover, -a.btn:focus, -.search-form a.search-submit:focus { - text-decoration: none; } - -.section { - padding-top: 5rem; - padding-bottom: 5rem; } - -body.section { - padding-top: 0; - padding-bottom: 0; } - -.section-md { - padding-top: 3rem; - padding-bottom: 3rem; } - -.section-sm { - padding-top: 1rem; - padding-bottom: 1rem; } - -/* -.section svg { - display: inline-block; - width: 2rem; - height: 2rem; - vertical-align: text-top; -} -*/ -/* -body { - padding-top: 3.5625rem; -} -*/ -.docs-sidebar { - order: 2; } - -@media (min-width: 992px) { - .docs-sidebar { - order: 0; - border-right: 1px solid #e9ecef; } - @supports (position: -webkit-sticky) or (position: sticky) { - .docs-sidebar { - position: -webkit-sticky; - position: sticky; - top: 4.25rem; - z-index: 1000; - height: calc(100vh - 4.25rem); } - .docs-sidebar-offset { - top: 4.5rem; - height: calc(100vh - 4.5rem); } - .docs-sidebar-top { - position: static; } } } - -@media (min-width: 1200px) { - .docs-sidebar { - flex: 0 1 320px; } } - -.docs-links { - padding-bottom: 5rem; } - -@media (min-width: 992px) { - @supports (position: -webkit-sticky) or (position: sticky) { - .docs-links { - max-height: calc(100vh - 4rem); - overflow-y: scroll; } } } - -@media (min-width: 992px) { - .docs-links { - display: block; - width: auto; - margin-right: -1.5rem; - padding-bottom: 4rem; } } - -.docs-toc { - order: 2; } - -@supports (position: -webkit-sticky) or (position: sticky) { - .docs-toc { - position: -webkit-sticky; - position: sticky; - top: 4.25rem; - height: calc(100vh - 4.25rem); - overflow-y: auto; } - .docs-toc-offset { - top: 4.5rem; - height: calc(100vh - 4.5rem); } - .docs-toc-top { - position: static; } } - -.docs-content { - padding-bottom: 3rem; - order: 1; } - -.docs-navigation { - border-top: 1px solid #e9ecef; - margin-top: 2rem; - margin-bottom: 0; - padding-top: 2rem; } - -.docs-navigation a { - font-size: 0.9rem; } - -@media (min-width: 992px) { - .docs-navigation { - margin-bottom: -1rem; } - .docs-navigation a { - font-size: 1rem; } } - -.docs-navigation a:hover, -.docs-navigation a:focus { - text-decoration: none; } - -.navbar a:hover, -.navbar a:focus { - text-decoration: none; } - -#TableOfContents ul, -#toc ul { - padding-left: 0; - list-style: none; } - -#toc a.active { - color: #5d2f86; - font-weight: 500; } - -.section-features { - padding-top: 2rem; } - -.bg-dots { - background-image: radial-gradient(#dee2e6 15%, transparent 15%); - background-position: 0 0; - background-size: 1rem 1rem; - -webkit-mask: linear-gradient(to top, #fff, transparent); - mask: linear-gradient(to top, #fff, transparent); - width: 100%; - height: 11rem; - margin-top: -10rem; - z-index: -1; } - -.bg-dots-md { - margin-top: -11rem; } - -.bg-dots-lg { - margin-top: -12rem; } - -.gradient-text { - background-color: #5d2f86; - background-image: linear-gradient(90deg, #5d2f86, #b3c7ff 50%, var(--sl-color-blue)); - background-size: 100%; - background-repeat: repeat; - -webkit-background-clip: text; - -moz-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-text-fill-color: transparent; } - -.katex { - font-size: 1.125rem; } - -.card-bar { - border-top: 4px solid; - border-image-source: linear-gradient(90deg, #5d2f86, #b3c7ff 50%, var(--sl-color-blue)); - border-image-slice: 1; } - -.modal-backdrop { - background-color: #fff; } - -.modal-backdrop.show { - opacity: 0.7; } - -@media (min-width: 768px) { - .modal-backdrop.show { - opacity: 0; } } - -sup[id] { - scroll-margin-top: 4.5rem; } - -div.footnotes { - font-size: 0.875rem; } - -a.footnote-backref { - text-decoration: none; } - -li input[type="checkbox"] { - margin: 0.25rem; - border: 1px solid #ced4da; } - -li input[type="checkbox"]:disabled { - pointer-events: none; - filter: none; - opacity: 1; } - -li input[type="checkbox"]:checked { - background-color: #5d2f86; - border-color: #5d2f86; } - -[data-bs-theme="dark"] li input[type="checkbox"] { - border: 1px solid #6c757d; } - -[data-bs-theme="dark"] li input[type="checkbox"]:checked { - background-color: #b3c7ff; - border-color: #b3c7ff; - --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231d2d35' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } - -.content .svg-inline { - margin-bottom: 1.5rem; } - -.content .svg-inline:not(.svg-inline-custom) { - height: 1.875rem; - width: 1.875rem; - stroke-width: 1.5; } - -/* -.content .alert .icon { - stroke-width: 1; - margin-bottom: 0; - margin-right: 0.5rem; -} -*/ -.logo-netlify-large-fullcolor-darkmode { - display: none; } - -[data-bs-theme="dark"] .logo-netlify-large-fullcolor-lightmode { - display: none; } - -[data-bs-theme="dark"] .logo-netlify-large-fullcolor-darkmode { - display: block; } - -.svg-lightmode { - display: block; } - -.svg-darkmode { - display: none; } - -.svg-monochrome path { - fill: #1d2d35; } - -[data-bs-theme="dark"] .svg-lightmode { - display: none; } - -[data-bs-theme="dark"] .svg-darkmode { - display: block; } - -[data-bs-theme="dark"] .netlify-logo path, -[data-bs-theme="dark"] .netlify-monogram path { - fill: #fff; } - -[data-bs-theme="dark"] .svg-monochrome path { - fill: var(--sl-color-gray-1); } - -hr { - border-color: #808080; } - -[data-bs-theme="dark"] hr { - border-color: var(--sl-color-gray-3); } - -.container-fw { - min-width: 0; } - -.card-nav { - column-gap: 1rem; } - -.card-nav .card { - margin: 0.5rem 0; } - -.card-nav .card:hover { - border: 1px solid #d9d9d9; - background-color: var(--sl-color-gray-7); } - -[data-bs-theme="dark"] .card-nav .card { - border: 1px solid #353841; } - -[data-bs-theme="dark"] .card-nav .card:hover { - border: 1px solid #888c96; - background-color: var(--sl-color-gray-6); } - -.highlight > .chroma { - border: 1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); } - -/* Background */ -.bg { - background-color: var(--sl-color-gray-7); } - -/* PreWrapper */ -.chroma { - background-color: var(--sl-color-gray-7); } - -/* Other */ -/* Error */ -.chroma .err { - color: inherit; } - -/* CodeLine */ -/* LineLink */ -.chroma .lnlinks { - outline: none; - text-decoration: none; - color: inherit; } - -/* LineTableTD */ -.chroma .lntd { - vertical-align: top; - padding: 0; - margin: 0; - border: 0; } - -/* LineTable */ -.chroma .lntable { - border-spacing: 0; - padding: 0; - margin: 0; - border: 0; } - -/* LineHighlight */ -.chroma .hl { - background-color: #0000001a; } - -.chroma .hl { - border-inline-start: 0.15rem solid #00000055; - margin-left: -1rem; - margin-right: -1rem; - padding-left: 1rem; - padding-right: 1rem; } - .chroma .hl .ln { - margin-left: -0.15rem; } - -/* LineNumbersTable */ -.chroma .lnt { - white-space: pre; - -webkit-user-select: none; - user-select: none; - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; } - -/* LineNumbers */ -.chroma .ln { - white-space: pre; - -webkit-user-select: none; - user-select: none; - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; } - -/* Line */ -.chroma .line { - display: flex; } - -/* Keyword */ -.chroma .k { - color: #000000; - font-weight: bold; } - -/* KeywordConstant */ -.chroma .kc { - color: #000000; - font-weight: bold; } - -/* KeywordDeclaration */ -.chroma .kd { - color: #000000; - font-weight: bold; } - -/* KeywordNamespace */ -.chroma .kn { - color: #000000; - font-weight: bold; } - -/* KeywordPseudo */ -.chroma .kp { - color: #000000; - font-weight: bold; } - -/* KeywordReserved */ -.chroma .kr { - color: #000000; - font-weight: bold; } - -/* KeywordType */ -.chroma .kt { - color: #445588; - font-weight: bold; } - -/* Name */ -/* NameAttribute */ -.chroma .na { - color: #008080; } - -/* NameBuiltin */ -.chroma .nb { - color: #0086b3; } - -/* NameBuiltinPseudo */ -.chroma .bp { - color: #999999; } - -/* NameClass */ -.chroma .nc { - color: #445588; - font-weight: bold; } - -/* NameConstant */ -.chroma .no { - color: #008080; } - -/* NameDecorator */ -.chroma .nd { - color: #3c5d5d; - font-weight: bold; } - -/* NameEntity */ -.chroma .ni { - color: #800080; } - -/* NameException */ -.chroma .ne { - color: #990000; - font-weight: bold; } - -/* NameFunction */ -.chroma .nf { - color: #990000; - font-weight: bold; } - -/* NameFunctionMagic */ -/* NameLabel */ -.chroma .nl { - color: #990000; - font-weight: bold; } - -/* NameNamespace */ -.chroma .nn { - color: #555555; } - -/* NameOther */ -/* NameProperty */ -/* NameTag */ -.chroma .nt { - color: #000080; } - -/* NameVariable */ -.chroma .nv { - color: #008080; } - -/* NameVariableClass */ -.chroma .vc { - color: #008080; } - -/* NameVariableGlobal */ -.chroma .vg { - color: #008080; } - -/* NameVariableInstance */ -.chroma .vi { - color: #008080; } - -/* NameVariableMagic */ -/* Literal */ -/* LiteralDate */ -/* LiteralString */ -.chroma .s { - color: #dd1144; } - -/* LiteralStringAffix */ -.chroma .sa { - color: #dd1144; } - -/* LiteralStringBacktick */ -.chroma .sb { - color: #dd1144; } - -/* LiteralStringChar */ -.chroma .sc { - color: #dd1144; } - -/* LiteralStringDelimiter */ -.chroma .dl { - color: #dd1144; } - -/* LiteralStringDoc */ -.chroma .sd { - color: #dd1144; } - -/* LiteralStringDouble */ -.chroma .s2 { - color: #dd1144; } - -/* LiteralStringEscape */ -.chroma .se { - color: #dd1144; } - -/* LiteralStringHeredoc */ -.chroma .sh { - color: #dd1144; } - -/* LiteralStringInterpol */ -.chroma .si { - color: #dd1144; } - -/* LiteralStringOther */ -.chroma .sx { - color: #dd1144; } - -/* LiteralStringRegex */ -.chroma .sr { - color: #009926; } - -/* LiteralStringSingle */ -.chroma .s1 { - color: #dd1144; } - -/* LiteralStringSymbol */ -.chroma .ss { - color: #990073; } - -/* LiteralNumber */ -.chroma .m { - color: #009999; } - -/* LiteralNumberBin */ -.chroma .mb { - color: #009999; } - -/* LiteralNumberFloat */ -.chroma .mf { - color: #009999; } - -/* LiteralNumberHex */ -.chroma .mh { - color: #009999; } - -/* LiteralNumberInteger */ -.chroma .mi { - color: #009999; } - -/* LiteralNumberIntegerLong */ -.chroma .il { - color: #009999; } - -/* LiteralNumberOct */ -.chroma .mo { - color: #009999; } - -/* Operator */ -.chroma .o { - color: #000000; - font-weight: bold; } - -/* OperatorWord */ -.chroma .ow { - color: #000000; - font-weight: bold; } - -/* Punctuation */ -/* Comment */ -.chroma .c { - color: #999988; - font-style: italic; } - -/* CommentHashbang */ -.chroma .ch { - color: #999988; - font-style: italic; } - -/* CommentMultiline */ -.chroma .cm { - color: #999988; - font-style: italic; } - -/* CommentSingle */ -.chroma .c1 { - color: #999988; - font-style: italic; } - -/* CommentSpecial */ -.chroma .cs { - color: #999999; - font-weight: bold; - font-style: italic; } - -/* CommentPreproc */ -.chroma .cp { - color: #999999; - font-weight: bold; - font-style: italic; } - -/* CommentPreprocFile */ -.chroma .cpf { - color: #999999; - font-weight: bold; - font-style: italic; } - -/* Generic */ -/* GenericDeleted */ -.chroma .gd { - color: #000000; - background-color: #ffdddd; } - -/* GenericEmph */ -.chroma .ge { - color: inherit; - font-style: italic; } - -/* GenericError */ -.chroma .gr { - color: #aa0000; } - -/* GenericHeading */ -.chroma .gh { - color: #999999; } - -/* GenericInserted */ -.chroma .gi { - color: #000000; - background-color: #ddffdd; } - -/* GenericOutput */ -.chroma .go { - color: #888888; } - -/* GenericPrompt */ -.chroma .gp { - color: #555555; } - -/* GenericStrong */ -.chroma .gs { - font-weight: bold; } - -/* GenericSubheading */ -.chroma .gu { - color: #aaaaaa; } - -/* GenericTraceback */ -.chroma .gt { - color: #aa0000; } - -/* GenericUnderline */ -.chroma .gl { - text-decoration: underline; } - -/* TextWhitespace */ -.chroma .w { - color: #bbbbbb; } - -[data-bs-theme="dark"] { - /* Background */ - /* PreWrapper */ - /* Other */ - /* Error */ - /* CodeLine */ - /* LineLink */ - /* LineTableTD */ - /* LineTable */ - /* LineHighlight */ - /* LineNumbersTable */ - /* LineNumbers */ - /* Line */ - /* Keyword */ - /* KeywordConstant */ - /* KeywordDeclaration */ - /* KeywordNamespace */ - /* KeywordPseudo */ - /* KeywordReserved */ - /* KeywordType */ - /* Name */ - /* NameAttribute */ - /* NameBuiltin */ - /* NameBuiltinPseudo */ - /* NameClass */ - /* NameConstant */ - /* NameDecorator */ - /* NameEntity */ - /* NameException */ - /* NameFunction */ - /* NameFunctionMagic */ - /* NameLabel */ - /* NameNamespace */ - /* NameOther */ - /* NameProperty */ - /* NameTag */ - /* NameVariable */ - /* NameVariableClass */ - /* NameVariableGlobal */ - /* NameVariableInstance */ - /* NameVariableMagic */ - /* Literal */ - /* LiteralDate */ - /* LiteralString */ - /* LiteralStringAffix */ - /* LiteralStringBacktick */ - /* LiteralStringChar */ - /* LiteralStringDelimiter */ - /* LiteralStringDoc */ - /* LiteralStringDouble */ - /* LiteralStringEscape */ - /* LiteralStringHeredoc */ - /* LiteralStringInterpol */ - /* LiteralStringOther */ - /* LiteralStringRegex */ - /* LiteralStringSingle */ - /* LiteralStringSymbol */ - /* LiteralNumber */ - /* LiteralNumberBin */ - /* LiteralNumberFloat */ - /* LiteralNumberHex */ - /* LiteralNumberInteger */ - /* LiteralNumberIntegerLong */ - /* LiteralNumberOct */ - /* Operator */ - /* OperatorWord */ - /* Punctuation */ - /* Comment */ - /* CommentHashbang */ - /* CommentMultiline */ - /* CommentSingle */ - /* CommentSpecial */ - /* CommentPreproc */ - /* CommentPreprocFile */ - /* Generic */ - /* GenericDeleted */ - /* GenericEmph */ - /* GenericError */ - /* GenericHeading */ - /* GenericInserted */ - /* GenericOutput */ - /* GenericPrompt */ - /* GenericStrong */ - /* GenericSubheading */ - /* GenericTraceback */ - /* GenericUnderline */ - /* TextWhitespace */ } - [data-bs-theme="dark"] .highlight > .chroma { - border: 1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); } - [data-bs-theme="dark"] .bg { - color: #c9d1d9; - background-color: var(--sl-color-gray-6); } - [data-bs-theme="dark"] .chroma { - color: #c9d1d9; - background-color: var(--sl-color-gray-6); } - [data-bs-theme="dark"] .chroma .err { - color: inherit; } - [data-bs-theme="dark"] .chroma .lnlinks { - outline: none; - text-decoration: none; - color: inherit; } - [data-bs-theme="dark"] .chroma .lntd { - vertical-align: top; - padding: 0; - margin: 0; - border: 0; } - [data-bs-theme="dark"] .chroma .lntable { - border-spacing: 0; - padding: 0; - margin: 0; - border: 0; } - [data-bs-theme="dark"] .chroma .hl { - background-color: #ffffff17; } - [data-bs-theme="dark"] .chroma .hl { - border-inline-start: 0.15rem solid #ffffff40; - margin-left: -1rem; - margin-right: -1rem; - padding-left: 1rem; - padding-right: 1rem; } - [data-bs-theme="dark"] .chroma .hl .ln { - margin-left: -0.15rem; } - [data-bs-theme="dark"] .chroma .lnt { - white-space: pre; - -webkit-user-select: none; - user-select: none; - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #64686c; } - [data-bs-theme="dark"] .chroma .ln { - white-space: pre; - -webkit-user-select: none; - user-select: none; - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #6e7681; } - [data-bs-theme="dark"] .chroma .line { - display: flex; } - [data-bs-theme="dark"] .chroma .k { - color: #ff7b72; } - [data-bs-theme="dark"] .chroma .kc { - color: #79c0ff; } - [data-bs-theme="dark"] .chroma .kd { - color: #ff7b72; } - [data-bs-theme="dark"] .chroma .kn { - color: #ff7b72; } - [data-bs-theme="dark"] .chroma .kp { - color: #79c0ff; } - [data-bs-theme="dark"] .chroma .kr { - color: #ff7b72; } - [data-bs-theme="dark"] .chroma .kt { - color: #ff7b72; } - [data-bs-theme="dark"] .chroma .na { - color: #d2a8ff; } - [data-bs-theme="dark"] .chroma .nc { - color: #f0883e; - font-weight: bold; } - [data-bs-theme="dark"] .chroma .no { - color: #79c0ff; - font-weight: bold; } - [data-bs-theme="dark"] .chroma .nd { - color: #d2a8ff; - font-weight: bold; } - [data-bs-theme="dark"] .chroma .ni { - color: #ffa657; } - [data-bs-theme="dark"] .chroma .ne { - color: #f0883e; - font-weight: bold; } - [data-bs-theme="dark"] .chroma .nf { - color: #d2a8ff; - font-weight: bold; } - [data-bs-theme="dark"] .chroma .nl { - color: #79c0ff; - font-weight: bold; } - [data-bs-theme="dark"] .chroma .nn { - color: #ff7b72; } - [data-bs-theme="dark"] .chroma .py { - color: #79c0ff; } - [data-bs-theme="dark"] .chroma .nt { - color: #7ee787; } - [data-bs-theme="dark"] .chroma .nv { - color: #79c0ff; } - [data-bs-theme="dark"] .chroma .l { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .ld { - color: #79c0ff; } - [data-bs-theme="dark"] .chroma .s { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .sa { - color: #79c0ff; } - [data-bs-theme="dark"] .chroma .sb { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .sc { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .dl { - color: #79c0ff; } - [data-bs-theme="dark"] .chroma .sd { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .s2 { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .se { - color: #79c0ff; } - [data-bs-theme="dark"] .chroma .sh { - color: #79c0ff; } - [data-bs-theme="dark"] .chroma .si { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .sx { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .sr { - color: #79c0ff; } - [data-bs-theme="dark"] .chroma .s1 { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .ss { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .m { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .mb { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .mf { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .mh { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .mi { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .il { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .mo { - color: #a5d6ff; } - [data-bs-theme="dark"] .chroma .o { - color: inherit; - font-weight: bold; } - [data-bs-theme="dark"] .chroma .ow { - color: #ff7b72; - font-weight: bold; } - [data-bs-theme="dark"] .chroma .c { - color: #8b949e; - font-style: italic; } - [data-bs-theme="dark"] .chroma .ch { - color: #8b949e; - font-style: italic; } - [data-bs-theme="dark"] .chroma .cm { - color: #8b949e; - font-style: italic; } - [data-bs-theme="dark"] .chroma .c1 { - color: #8b949e; - font-style: italic; } - [data-bs-theme="dark"] .chroma .cs { - color: #8b949e; - font-weight: bold; - font-style: italic; } - [data-bs-theme="dark"] .chroma .cp { - color: #8b949e; - font-weight: bold; - font-style: italic; } - [data-bs-theme="dark"] .chroma .cpf { - color: #8b949e; - font-weight: bold; - font-style: italic; } - [data-bs-theme="dark"] .chroma .gd { - color: #ffa198; - background-color: #490202; } - [data-bs-theme="dark"] .chroma .ge { - font-style: italic; } - [data-bs-theme="dark"] .chroma .gr { - color: #ffa198; } - [data-bs-theme="dark"] .chroma .gh { - color: #79c0ff; - font-weight: bold; } - [data-bs-theme="dark"] .chroma .gi { - color: #56d364; - background-color: #0f5323; } - [data-bs-theme="dark"] .chroma .go { - color: #8b949e; } - [data-bs-theme="dark"] .chroma .gp { - color: #8b949e; } - [data-bs-theme="dark"] .chroma .gs { - font-weight: bold; } - [data-bs-theme="dark"] .chroma .gu { - color: #79c0ff; } - [data-bs-theme="dark"] .chroma .gt { - color: #ff7b72; } - [data-bs-theme="dark"] .chroma .gl { - text-decoration: underline; } - [data-bs-theme="dark"] .chroma .w { - color: #6e7681; } - -/** Theme styles */ -[data-bs-theme="dark"] { - /* -.dropdown-menu { - @extend .dropdown-menu-dark; -} -*/ - /* -.navbar-light .navbar-brand { - color: $navbar-dark-color !important; -} -*/ - /* -.navbar-form::after { - color: $gray-600; - border: 1px solid $gray-800; -} -*/ - /* -pre code::-webkit-scrollbar-thumb { - background: $gray-400; -} - -code:not(.hljs) { - background: $body-overlay-dark; - color: $body-color-dark; -} - -pre code:hover { - scrollbar-width: thin; - scrollbar-color: $border-dark transparent; -} - -pre code::-webkit-scrollbar-thumb:hover { - background: $gray-500; -} -*/ - /* -.dropdown-toggle:focus, -.doks-sidebar-toggle:focus { - box-shadow: 0 0 0 0.2rem $focus-color-dark; -} -*/ - /* -@include media-breakpoint-up(md) { - .alert-dismissible .btn-close { - background-size: 1.25rem; - } -} -*/ - /* -.btn-close:focus { - box-shadow: 0 0 0 0.2rem $focus-color-dark; -} -*/ } - [data-bs-theme="dark"] h1, [data-bs-theme="dark"] .h1, - [data-bs-theme="dark"] h2, - [data-bs-theme="dark"] .h2, - [data-bs-theme="dark"] h3, - [data-bs-theme="dark"] .h3, - [data-bs-theme="dark"] h4, - [data-bs-theme="dark"] .h4 { - color: white; } - [data-bs-theme="dark"] body { - background: #17181c; - color: #c1c3c8; } - [data-bs-theme="dark"] a { - color: #b3c7ff; } - [data-bs-theme="dark"] .callout a { - color: inherit; } - [data-bs-theme="dark"] a.text- { - color: #c1c3c8 !important; } - [data-bs-theme="dark"] .btn-primary { - --bs-btn-color: #000; - --bs-btn-bg: #b3c7ff; - --bs-btn-border-color: #b3c7ff; - --bs-btn-hover-color: #000; - --bs-btn-hover-bg: #becfff; - --bs-btn-hover-border-color: #bacdff; - --bs-btn-focus-shadow-rgb: 152, 169, 217; - --bs-btn-active-color: #000; - --bs-btn-active-bg: #c2d2ff; - --bs-btn-active-border-color: #bacdff; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #000; - --bs-btn-disabled-bg: #b3c7ff; - --bs-btn-disabled-border-color: #b3c7ff; - color: #17181c; } - [data-bs-theme="dark"] .btn-outline-primary { - --bs-btn-color: #b3c7ff; - --bs-btn-border-color: #b3c7ff; - --bs-btn-hover-color: #b3c7ff; - --bs-btn-hover-bg: #b3c7ff; - --bs-btn-hover-border-color: #b3c7ff; - --bs-btn-focus-shadow-rgb: 178.5, 198.9, 255; - --bs-btn-active-color: #000; - --bs-btn-active-bg: #b3c7ff; - --bs-btn-active-border-color: #b3c7ff; - --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #b3c7ff; - --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #b3c7ff; - --bs-gradient: none; - color: #b3c7ff; } - [data-bs-theme="dark"] .btn-outline-primary:hover { - color: #17181c; } - [data-bs-theme="dark"] .btn-doks-light { - color: #c1c3c8; } - [data-bs-theme="dark"] .show > .btn-doks-light, - [data-bs-theme="dark"] .btn-doks-light:hover, - [data-bs-theme="dark"] .btn-doks-light:active { - color: #b3c7ff; } - [data-bs-theme="dark"] .btn-menu svg { - color: #c1c3c8; } - [data-bs-theme="dark"] .doks-sidebar-toggle { - color: #c1c3c8; } - [data-bs-theme="dark"] .btn-menu:hover, - [data-bs-theme="dark"] .btn-doks-light:hover, - [data-bs-theme="dark"] .doks-sidebar-toggle:hover { - background: transparent; } - [data-bs-theme="dark"] .navbar, - [data-bs-theme="dark"] .doks-subnavbar { - background-color: rgba(23, 24, 28, 0.95); - border-bottom: 1px solid #23262f; } - [data-bs-theme="dark"] body.home .navbar { - border-bottom: 0; } - [data-bs-theme="dark"] .offcanvas-header { - border-bottom: 1px solid #343a40; } - [data-bs-theme="dark"] .offcanvas .nav-link, [data-bs-theme="dark"] .offcanvas .banner .nav a, .banner .nav [data-bs-theme="dark"] .offcanvas a { - color: #c1c3c8; } - [data-bs-theme="dark"] .offcanvas .nav-link:hover, [data-bs-theme="dark"] .offcanvas .banner .nav a:hover, .banner .nav [data-bs-theme="dark"] .offcanvas a:hover, - [data-bs-theme="dark"] .offcanvas .nav-link:focus, - [data-bs-theme="dark"] .offcanvas .banner .nav a:focus, - .banner .nav [data-bs-theme="dark"] .offcanvas a:focus { - color: #b3c7ff; } - [data-bs-theme="dark"] .offcanvas .nav-link.active, [data-bs-theme="dark"] .offcanvas .banner .nav a.active, .banner .nav [data-bs-theme="dark"] .offcanvas a.active { - color: #b3c7ff; } - [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link, [data-bs-theme="dark"] .navbar-light .navbar-nav .banner .nav a, .banner .nav [data-bs-theme="dark"] .navbar-light .navbar-nav a { - color: #c1c3c8; } - [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:hover, [data-bs-theme="dark"] .navbar-light .navbar-nav .banner .nav a:hover, .banner .nav [data-bs-theme="dark"] .navbar-light .navbar-nav a:hover, - [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:focus, - [data-bs-theme="dark"] .navbar-light .navbar-nav .banner .nav a:focus, - .banner .nav [data-bs-theme="dark"] .navbar-light .navbar-nav a:focus { - color: #b3c7ff; } - [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link.disabled, [data-bs-theme="dark"] .navbar-light .navbar-nav .banner .nav a.disabled, .banner .nav [data-bs-theme="dark"] .navbar-light .navbar-nav a.disabled { - color: rgba(255, 255, 255, 0.25); } - [data-bs-theme="dark"] .navbar-light .navbar-nav .show > .nav-link, [data-bs-theme="dark"] .navbar-light .navbar-nav .banner .nav .show > a, .banner .nav [data-bs-theme="dark"] .navbar-light .navbar-nav .show > a, - [data-bs-theme="dark"] .navbar-light .navbar-nav .active > .nav-link, - [data-bs-theme="dark"] .navbar-light .navbar-nav .banner .nav .active > a, - .banner .nav [data-bs-theme="dark"] .navbar-light .navbar-nav .active > a, - [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link.show, - [data-bs-theme="dark"] .navbar-light .navbar-nav .banner .nav a.show, - .banner .nav [data-bs-theme="dark"] .navbar-light .navbar-nav a.show, - [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link.active, - [data-bs-theme="dark"] .navbar-light .navbar-nav .banner .nav a.active, - .banner .nav [data-bs-theme="dark"] .navbar-light .navbar-nav a.active { - color: #b3c7ff; } - [data-bs-theme="dark"] .navbar-light .navbar-text { - color: #c1c3c8; } - [data-bs-theme="dark"] .alert-primary a { - color: #17181c; } - [data-bs-theme="dark"] .alert-doks { - background: #23262f; - color: #c1c3c8; } - [data-bs-theme="dark"] .alert-doks a { - color: #b3c7ff; } - [data-bs-theme="dark"] .page-links a { - color: #c1c3c8; } - [data-bs-theme="dark"] .btn-toggle-nav a { - color: #c1c3c8; } - [data-bs-theme="dark"] .showcase-meta a { - color: #c1c3c8; } - [data-bs-theme="dark"] .showcase-meta a:hover, - [data-bs-theme="dark"] .showcase-meta a:focus { - color: #b3c7ff; } - [data-bs-theme="dark"] .docs-link:hover, - [data-bs-theme="dark"] .docs-link.active, - [data-bs-theme="dark"] .page-links a:hover { - text-decoration: none; - color: #b3c7ff; } - [data-bs-theme="dark"] .btn-toggle { - color: #c1c3c8; - background-color: transparent; - border: 0; } - [data-bs-theme="dark"] .btn-toggle:hover, - [data-bs-theme="dark"] .btn-toggle:focus { - color: #c1c3c8; } - [data-bs-theme="dark"] .btn-toggle::before { - width: 1.25em; - line-height: 0; - content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); - transition: transform 0.35s ease; - transform-origin: 0.5em 50%; - margin-bottom: 0.125rem; } - [data-bs-theme="dark"] .btn-toggle[aria-expanded="true"] { - color: #c1c3c8; } - [data-bs-theme="dark"] .btn-toggle[aria-expanded="true"]::before { - transform: rotate(90deg); } - [data-bs-theme="dark"] .btn-toggle-nav a:hover, - [data-bs-theme="dark"] .btn-toggle-nav a:focus { - color: #b3c7ff; } - [data-bs-theme="dark"] .btn-toggle-nav a.active { - color: #b3c7ff; } - [data-bs-theme="dark"] .navbar-light .navbar-text a { - color: #b3c7ff; } - [data-bs-theme="dark"] .docs-links h3.sidebar-link a, [data-bs-theme="dark"] .docs-links .sidebar-link.h3 a, - [data-bs-theme="dark"] .page-links h3.sidebar-link a, - [data-bs-theme="dark"] .page-links .sidebar-link.h3 a { - color: #c1c3c8; } - [data-bs-theme="dark"] .navbar-light .navbar-text a:hover, - [data-bs-theme="dark"] .navbar-light .navbar-text a:focus { - color: #b3c7ff; } - [data-bs-theme="dark"] .navbar .btn-link { - color: #c1c3c8; } - [data-bs-theme="dark"] .content .btn-link { - color: #b3c7ff; } - [data-bs-theme="dark"] .content .btn-link:hover { - color: #b3c7ff; } - [data-bs-theme="dark"] .content img[src^="https://latex.codecogs.com/svg.latex"] { - filter: invert(1); } - [data-bs-theme="dark"] .navbar .btn-link:hover { - color: #b3c7ff; } - [data-bs-theme="dark"] .navbar .btn-link:active { - color: #b3c7ff; } - [data-bs-theme="dark"] .form-control.is-search, [data-bs-theme="dark"] .search-form .is-search.search-field, .search-form [data-bs-theme="dark"] .is-search.search-field, [data-bs-theme="dark"] .comment-form input.is-search[type="text"], .comment-form [data-bs-theme="dark"] input.is-search[type="text"], - [data-bs-theme="dark"] .comment-form input.is-search[type="email"], - .comment-form [data-bs-theme="dark"] input.is-search[type="email"], - [data-bs-theme="dark"] .comment-form input.is-search[type="url"], - .comment-form [data-bs-theme="dark"] input.is-search[type="url"], - [data-bs-theme="dark"] .comment-form textarea.is-search, - .comment-form [data-bs-theme="dark"] textarea.is-search { - background: #23262f; - border: 1px solid transparent; - color: #dee2e6; - /* - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right calc(0.375em + 0.1875rem) center; - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); - */ } - [data-bs-theme="dark"] .form-control.is-search:focus, [data-bs-theme="dark"] .search-form .is-search.search-field:focus, .search-form [data-bs-theme="dark"] .is-search.search-field:focus, [data-bs-theme="dark"] .comment-form input.is-search[type="text"]:focus, .comment-form [data-bs-theme="dark"] input.is-search[type="text"]:focus, - [data-bs-theme="dark"] .comment-form input.is-search[type="email"]:focus, - .comment-form [data-bs-theme="dark"] input.is-search[type="email"]:focus, - [data-bs-theme="dark"] .comment-form input.is-search[type="url"]:focus, - .comment-form [data-bs-theme="dark"] input.is-search[type="url"]:focus, - [data-bs-theme="dark"] .comment-form textarea.is-search:focus, - .comment-form [data-bs-theme="dark"] textarea.is-search:focus { - border: 1px solid #b3c7ff; } - [data-bs-theme="dark"] .doks-search::after { - color: #dee2e6; - border: 1px solid #495057; } - [data-bs-theme="dark"] .text-dark { - color: #c1c3c8 !important; } - [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .search-form .search-field, .search-form [data-bs-theme="dark"] .search-field, [data-bs-theme="dark"] .comment-form input[type="text"], .comment-form [data-bs-theme="dark"] input[type="text"], - [data-bs-theme="dark"] .comment-form input[type="email"], - .comment-form [data-bs-theme="dark"] input[type="email"], - [data-bs-theme="dark"] .comment-form input[type="url"], - .comment-form [data-bs-theme="dark"] input[type="url"], - [data-bs-theme="dark"] .comment-form textarea, - .comment-form [data-bs-theme="dark"] textarea { - color: #dee2e6; } - [data-bs-theme="dark"] .form-control::placeholder, [data-bs-theme="dark"] .search-form .search-field::placeholder, .search-form [data-bs-theme="dark"] .search-field::placeholder, [data-bs-theme="dark"] .comment-form input[type="text"]::placeholder, .comment-form [data-bs-theme="dark"] input[type="text"]::placeholder, - [data-bs-theme="dark"] .comment-form input[type="email"]::placeholder, - .comment-form [data-bs-theme="dark"] input[type="email"]::placeholder, - [data-bs-theme="dark"] .comment-form input[type="url"]::placeholder, - .comment-form [data-bs-theme="dark"] input[type="url"]::placeholder, - [data-bs-theme="dark"] .comment-form textarea::placeholder, - .comment-form [data-bs-theme="dark"] textarea::placeholder { - color: #ced4da; - opacity: 1; } - [data-bs-theme="dark"] .border-top { - border-top: 1px solid #23262f !important; } - @media (min-width: 992px) { - [data-bs-theme="dark"] .docs-sidebar { - order: 0; - border-right: 1px solid #23262f; } } - [data-bs-theme="dark"] .docs-navigation { - border-top: 1px solid #23262f; } - [data-bs-theme="dark"] blockquote { - border-left: 3px solid #23262f; } - [data-bs-theme="dark"] .footer { - border-top: 1px solid #23262f; } - [data-bs-theme="dark"] .docs-links, - [data-bs-theme="dark"] .docs-toc { - scrollbar-width: thin; - scrollbar-color: #17181c #17181c; } - [data-bs-theme="dark"] .docs-links::-webkit-scrollbar, - [data-bs-theme="dark"] .docs-toc::-webkit-scrollbar { - width: 5px; } - [data-bs-theme="dark"] .docs-links::-webkit-scrollbar-track, - [data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-track { - background: #17181c; } - [data-bs-theme="dark"] .docs-links::-webkit-scrollbar-thumb, - [data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-thumb { - background: #17181c; } - [data-bs-theme="dark"] .docs-links:hover, - [data-bs-theme="dark"] .docs-toc:hover { - scrollbar-width: thin; - scrollbar-color: #23262f #17181c; } - [data-bs-theme="dark"] .docs-links:hover::-webkit-scrollbar-thumb, - [data-bs-theme="dark"] .docs-toc:hover::-webkit-scrollbar-thumb { - background: #23262f; } - [data-bs-theme="dark"] .docs-links::-webkit-scrollbar-thumb:hover, - [data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-thumb:hover { - background: #23262f; } - [data-bs-theme="dark"] .docs-links h3:not(:first-child), [data-bs-theme="dark"] .docs-links .h3:not(:first-child) { - border-top: 1px solid #23262f; } - [data-bs-theme="dark"] a.docs-link { - color: #c1c3c8; } - [data-bs-theme="dark"] .page-links li:not(:first-child) { - border-top: 1px dashed #23262f; } - [data-bs-theme="dark"] .card { - background: #17181c; - border: 1px solid #23262f; } - [data-bs-theme="dark"] .card.bg-light { - background: #23262f !important; } - [data-bs-theme="dark"] .navbar .menu-icon .navicon { - background: #c1c3c8; } - [data-bs-theme="dark"] .navbar .menu-icon .navicon::before, - [data-bs-theme="dark"] .navbar .menu-icon .navicon::after { - background: #c1c3c8; } - [data-bs-theme="dark"] .logo-light { - display: none !important; } - [data-bs-theme="dark"] .logo-dark { - display: inline-block !important; } - [data-bs-theme="dark"] .bg-light { - background: #141518 !important; } - [data-bs-theme="dark"] .bg-dots { - background-image: radial-gradient(#414349 15%, transparent 15%); } - [data-bs-theme="dark"] .text-muted { - color: #adafb6 !important; } - [data-bs-theme="dark"] .alert-primary { - background: #b3c7ff; - color: #17181c; } - [data-bs-theme="dark"] .figure-caption { - color: #c1c3c8; } - [data-bs-theme="dark"] .copy-status::after { - content: "Copy"; - display: block; - color: #c1c3c8; } - [data-bs-theme="dark"] .copy-status:hover::after { - content: "Copy"; - display: block; - color: #b3c7ff; } - [data-bs-theme="dark"] .copy-status:focus::after, - [data-bs-theme="dark"] .copy-status:active::after { - content: "Copied"; - display: block; - color: #b3c7ff; } - [data-bs-theme="dark"] .offcanvas { - background-color: #17181c; } - [data-bs-theme="dark"] .alert-dismissible .btn-close { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNkZWUyZTYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgiPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT48bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU+PC9zdmc+"); - background-size: 1.5rem; } - [data-bs-theme="dark"] .dropdown-item { - color: #17181c; } - [data-bs-theme="dark"] hr.text-black-50 { - color: #6c757d !important; } - [data-bs-theme="dark"] .email-form .form-control, [data-bs-theme="dark"] .email-form .search-form .search-field, .search-form [data-bs-theme="dark"] .email-form .search-field, [data-bs-theme="dark"] .email-form .comment-form input[type="text"], .comment-form [data-bs-theme="dark"] .email-form input[type="text"], - [data-bs-theme="dark"] .email-form .comment-form input[type="email"], - .comment-form [data-bs-theme="dark"] .email-form input[type="email"], - [data-bs-theme="dark"] .email-form .comment-form input[type="url"], - .comment-form [data-bs-theme="dark"] .email-form input[type="url"], - [data-bs-theme="dark"] .email-form .comment-form textarea, - .comment-form [data-bs-theme="dark"] .email-form textarea { - background: #23262f; - border: 1px solid transparent; } - [data-bs-theme="dark"] .email-form .form-control:focus, [data-bs-theme="dark"] .email-form .search-form .search-field:focus, .search-form [data-bs-theme="dark"] .email-form .search-field:focus, [data-bs-theme="dark"] .email-form .comment-form input[type="text"]:focus, .comment-form [data-bs-theme="dark"] .email-form input[type="text"]:focus, - [data-bs-theme="dark"] .email-form .comment-form input[type="email"]:focus, - .comment-form [data-bs-theme="dark"] .email-form input[type="email"]:focus, - [data-bs-theme="dark"] .email-form .comment-form input[type="url"]:focus, - .comment-form [data-bs-theme="dark"] .email-form input[type="url"]:focus, - [data-bs-theme="dark"] .email-form .comment-form textarea:focus, - .comment-form [data-bs-theme="dark"] .email-form textarea:focus { - border: 1px solid #b3c7ff; } - [data-bs-theme="dark"] .page-link { - color: #b3c7ff; - background-color: transparent; - border: var(--bs-border-width) solid #23262f; } - [data-bs-theme="dark"] .page-link:hover { - color: #17181c; - background-color: #c1c3c8; - border-color: #c1c3c8; } - [data-bs-theme="dark"] .page-link:focus { - color: #17181c; - background-color: #c1c3c8; } - [data-bs-theme="dark"] .page-item.active .page-link { - color: #17181c; - background-color: #b3c7ff; - border-color: #b3c7ff; } - [data-bs-theme="dark"] .page-item.disabled .page-link { - color: var(--bs-secondary-color); - background-color: #23262f; - border-color: #23262f; } - [data-bs-theme="dark"] .dropdown-menu { - background: #23262f; } - [data-bs-theme="dark"] .dropdown-menu .dropdown-item { - color: #c1c3c8; } - [data-bs-theme="dark"] .dropdown-menu .dropdown-item.untranslated { - color: #6c757d; - text-decoration: line-through; } - [data-bs-theme="dark"] .dropdown-menu .dropdown-item.untranslated:focus-visible, [data-bs-theme="dark"] .dropdown-menu .dropdown-item.untranslated:hover { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-home' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23b3c7ff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l-2 0l9 -9l9 9l-2 0' /%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7' /%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6' /%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 1rem top 0.6rem; - background-size: 0.9rem 0.9rem; - text-decoration: unset; } - [data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover { - color: #b3c7ff; - background: #17181c; } - [data-bs-theme="dark"] .dropdown-menu .dropdown-item.active, - [data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus { - color: #b3c7ff; - background: #17181c; } - [data-bs-theme="dark"] .navbar .dropdown-item.current, - [data-bs-theme="dark"] .doks-subnavbar .dropdown-item.current { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23dee2e6' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: right 1rem top 0.6rem; - background-size: 0.75rem 0.75rem; } - [data-bs-theme="dark"] details { - border: 1px solid #23262f; } - [data-bs-theme="dark"] summary:hover { - background: #23262f; } - [data-bs-theme="dark"] details[open] > summary { - border-bottom: 1px solid #23262f; } - [data-bs-theme="dark"] details summary::after { - content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); } - [data-bs-theme="dark"] #toc a.active { - color: #b3c7ff; } - [data-bs-theme="dark"] .btn-light { - color: #b3c7ff; - background: #23262f; - border: 1px solid #23262f; } - [data-bs-theme="dark"] table th { - color: white; } - [data-bs-theme="dark"] .table-dark, [data-bs-theme="dark"] table, - [data-bs-theme="dark"] [data-bs-theme="dark"] table { - --bs-table-color: inherit; - --bs-table-bg: $body-bg-dark; - background: #17181c; - border-color: #23262f; } - -.alert { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 0.875rem; } - -.alert-icon { - margin-right: 0.75rem; } - -.docs main .alert { - margin: 2rem -1.5rem; } - -.alert .alert-link { - text-decoration: underline; } - -.alert-doks { - background: #fbf7f0; - color: #1d2d35; } - -/* -.alert-light { - color: #215888; - background: linear-gradient(-45deg, rgb(212, 245, 255), rgb(234, 250, 255), rgb(234, 250, 255), #d3f6ef); -} - -.alert-light .alert-link { - color: #215888; -} -*/ -.alert-white { - background-color: rgba(255, 255, 255, 0.95); } - -.alert-primary { - color: #fff; - background-color: #5d2f86; } - -.alert a { - text-decoration: underline; } - -.alert-primary .alert-link { - color: #fff; } - -/* -.alert-primary { - color: #084298; - background-color: #cfe2ff; - border-color: #b6d4fe; -} - -.alert-primary .alert-link { - color: #06357a; -} -*/ -.alert-secondary { - color: #41464b; - background-color: #e2e3e5; - border-color: #d3d6d8; } - -.alert-secondary .alert-link { - color: #34383c; } - -.alert-success { - color: #0f5132; - background-color: #d1e7dd; - border-color: #badbcc; } - -.alert-success .alert-link { - color: #0c4128; } - -.alert-info { - color: #055160; - background-color: #cff4fc; - border-color: #b6effb; } - -.alert-info .alert-link { - color: #04414d; } - -.alert-warning { - color: #664d03; - background-color: #fff3cd; - border-color: #ffecb5; } - -.alert-warning .alert-link { - color: #523e02; } - -.alert-danger { - color: #842029; - background-color: #f8d7da; - border-color: #f5c2c7; } - -.alert-danger .alert-link { - color: #6a1a21; } - -.alert-light { - color: #636464; - background-color: #fefefe; - border-color: #fdfdfe; } - -.alert-light .alert-link { - color: #4f5050; } - -.alert-dark { - color: #141619; - background-color: #d3d3d4; - border-color: #bcbebf; } - -.alert-dark .alert-link { - color: #101214; } - -.alert .alert-link:hover, -.alert .alert-link:focus { - text-decoration: none; } - -.alert-text { - margin-right: -3rem; - font-size: 1rem; } - -.alert-dismissible .btn-close { - position: absolute; - top: 50%; - transform: translateY(-50%); - right: 1rem; - z-index: 2; - padding: 0.5rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); - background-size: 1.5rem; - filter: invert(1) grayscale(100%) brightness(200%); } - -.btn-close:focus, -.btn-close:active { - outline: none; - box-shadow: none; } - -@media (min-width: 768px) { - .alert-dismissible .btn-close { - background-size: 1.5rem; } } - -[data-global-alert="closed"] #announcement { - display: none; } - -.alert code { - background: #f6ecdc; - color: #1d2d35; - padding: 0.25rem 0.5rem; } - -.navbar .btn-link { - color: rgba(var(--bs-emphasis-color-rgb), 0.65); - padding: 0.4375rem 0; } - -#mode { - padding: 0.5rem; } - -.btn-link:focus { - outline: 0; - box-shadow: none; } - -#navigation { - margin-left: 1.25rem; } - -@media (min-width: 992px) { - #mode { - margin-left: 0.5rem; - margin-right: 0.25rem; } - .navbar .btn-link { - padding: 0.5625em 0.25rem 0.5rem 0.125rem; } } - -.navbar .btn-link:hover { - color: rgba(var(--bs-emphasis-color-rgb), 0.8); } - -.navbar .btn-link:active { - color: rgba(var(--bs-emphasis-color-rgb), 1); } - -body .toggle-dark { - display: block; } - -body .toggle-light { - display: none; } - -[data-dark-mode] body .toggle-light { - display: block; } - -[data-dark-mode] body .toggle-dark { - display: none; } - -.collapsible-sidebar { - margin: 2.125rem 0; } - -.btn-toggle { - display: inline-flex; - align-items: center; - padding: 0.25rem 0.5rem 0.25rem 0; - font-weight: 700; - font-size: 1rem; - text-transform: uppercase; - color: #1d2d35; - background-color: transparent; - border: 0; } - -.btn-toggle:hover, -.btn-toggle:focus { - color: #1d2d35; - background-color: transparent; - outline: 0; - box-shadow: none; } - -.btn-toggle::before { - width: 1.25em; - line-height: 0; - content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); - transition: transform 0.35s ease; - transform-origin: 0.5em 50%; - margin-bottom: 0.125rem; } - -.btn-toggle[aria-expanded="true"] { - color: #1d2d35; } - -.btn-toggle[aria-expanded="true"]::before { - transform: rotate(90deg); } - -.btn-toggle-nav a { - display: inline-flex; - padding: 0.1875rem 0.5rem; - margin-top: 0.125rem; - margin-left: 1.25rem; - text-decoration: none; } - -.btn-toggle-nav a:hover, -.btn-toggle-nav a:focus { - background-color: transparent; - color: #5d2f86; } - -.btn-toggle-nav a.active { - color: #5d2f86; } - -@media (max-width: 991.98px) { - .dropdown-menu { - width: 100%; - position: static; } } - -/* -@include media-breakpoint-up(lg) { - .dropdown-menu { - width: auto; - } -} -*/ -.btn-dropdown { - border: 0; } - -@media (max-width: 991.98px) { - .btn-dropdown { - width: 100%; - text-align: left; - padding-left: 0; - padding-right: 0; } } - -.navbar .dropdown-item.current { - font-weight: 600; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: right 1rem top 0.6rem; - background-size: 0.75rem 0.75rem; } - @media (max-width: 991.98px) { - .navbar .dropdown-item.current { - background-position: right 0.375rem top 0.6rem; } } -.btn-close { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); - background-size: 1.5rem; } - -.offcanvas-header .btn-close { - margin-right: 0 !important; } - -.dropdown-toggle::after { - display: none; } - -.dropdown-caret { - margin-left: -0.1875rem; } - -.dropdown-menu .dropdown-item.untranslated { - color: #6c757d; - text-decoration: line-through; } - .dropdown-menu .dropdown-item.untranslated:focus-visible, .dropdown-menu .dropdown-item.untranslated:hover { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-home' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%235d2f86' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l-2 0l9 -9l9 9l-2 0' /%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7' /%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6' /%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 1rem top 0.6rem; - background-size: 0.9rem 0.9rem; - text-decoration: unset; } - -.dropdown-menu .dropdown-item:hover { - color: #5d2f86; } - -.dropdown-menu span.dropdown-item.current:hover { - color: unset; } - -.clipboard { - position: relative; - float: right; } - -.btn-clipboard { - transition: opacity 0.25s ease-in-out; - opacity: 0; - position: absolute; - right: 0.5rem; - top: 0.5rem; - line-height: 1; - padding: 0.3125rem 0.3125rem 0.1875rem; - background-color: transparent; - border-color: transparent; } - @media (max-width: 767.98px) { - .btn-clipboard { - position: absolute; - right: -0.5rem; - top: 0.5rem; } } -.btn-clipboard::after { - width: 22px; - height: 22px; - display: inline-block; - content: ""; - -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%; - mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%; - -webkit-mask-size: cover; - mask-size: cover; - background-color: #495057; } - -.btn-clipboard:hover { - border-color: transparent; } - -.btn-clipboard:hover::after { - width: 22px; - height: 22px; - display: inline-block; - content: ""; - -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%; - mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%; - -webkit-mask-size: cover; - mask-size: cover; - background-color: #212529; } - -.btn-clipboard:focus, -.btn-clipboard:active { - border-color: transparent !important; } - -.btn-clipboard:focus::after, -.btn-clipboard:active::after { - width: 22px; - height: 22px; - display: inline-block; - content: ""; - -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%; - mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%; - -webkit-mask-size: cover; - mask-size: cover; - background-color: #212529; } - -[data-bs-theme="dark"] .btn-clipboard { - background-color: transparent; - border-color: transparent; } - -[data-bs-theme="dark"] .btn-clipboard::after { - background-color: #ced4da; } - -[data-bs-theme="dark"] .btn-clipboard:hover { - border-color: transparent; } - -[data-bs-theme="dark"] .btn-clipboard:hover::after { - background-color: #e9ecef; } - -[data-bs-theme="dark"] .btn-clipboard:focus, -[data-bs-theme="dark"] .btn-clipboard:active { - border-color: transparent; } - -[data-bs-theme="dark"] .btn-clipboard:focus::after, -[data-bs-theme="dark"] .btn-clipboard:active::after { - background-color: #e9ecef; } - -.highlight { - position: relative; } - -@media (min-width: 768px) { - .highlight:hover .btn-clipboard { - opacity: 1; } } - -#toTop { - opacity: 0; - transition: opacity 0.3s ease-in-out; } - -#toTop.fade { - opacity: 1; } - -.btn-cta { - padding-left: 2rem; - padding-right: 2rem; } - -.callout { - --bs-link-color-rgb: var(--callout-link); - --bs-code-color: var(--callout-code-color); - color: var(--callout-color, inherit); - background-color: var(--callout-bg, var(--bs-gray-100)); - border-left: 0.25rem solid var(--callout-border, var(--bs-gray-300)); - border-radius: 0; - /* - code { - background: transparent; - color: inherit; - } - */ } - .callout a { - text-decoration: underline; } - .callout .highlight { - background-color: rgba(0, 0, 0, 0.05); } - .callout .callout-icon.svg-inline { - flex-shrink: 0; - height: calc(1.5 * 1.125rem); } - .callout .callout-title { - font-weight: 700; } - -.callout-content { - min-width: 0; } - -.callout.callout-note { - border-color: var(--sl-color-blue); - background-color: var(--sl-color-blue-high); - /* - code:not(:where(.not-content *)) { - background: tint-color($info, 80%); - } - */ } - .callout.callout-note .callout-icon, - .callout.callout-note .callout-title, - .callout.callout-note .callout-body a { - color: var(--sl-color-blue-low); } - .callout.callout-note .callout-body, - .callout.callout-note .callout-body a:hover, - .callout.callout-note .callout-body a:active { - color: var(--sl-color-white); } - -.callout.callout-tip { - border-color: var(--sl-color-purple); - background-color: var(--sl-color-purple-high); - /* - code:not(:where(.not-content *)) { - background: tint-color($purple, 80%); - } - */ } - .callout.callout-tip .callout-icon, - .callout.callout-tip .callout-title, - .callout.callout-tip .callout-body a { - color: var(--sl-color-purple-low); } - .callout.callout-tip .callout-body, - .callout.callout-tip .callout-body a:hover, - .callout.callout-tip .callout-body a:active { - color: var(--sl-color-white); } - -.callout.callout-caution { - border-color: var(--sl-color-orange); - background-color: var(--sl-color-orange-high); - /* - code:not(:where(.not-content *)) { - background: tint-color($yellow, 80%); - } - */ } - .callout.callout-caution .callout-icon, - .callout.callout-caution .callout-title, - .callout.callout-caution .callout-body a { - color: var(--sl-color-orange-low); } - .callout.callout-caution .callout-body, - .callout.callout-caution .callout-body a:hover, - .callout.callout-caution .callout-body a:active { - color: var(--sl-color-white); } - -.callout.callout-danger { - border-color: var(--sl-color-red); - background-color: var(--sl-color-red-high); - /* - code:not(:where(.not-content *)) { - background: tint-color($red, 80%); - } - */ } - .callout.callout-danger .callout-icon, - .callout.callout-danger .callout-title, - .callout.callout-danger .callout-body a { - color: var(--sl-color-red-low); } - .callout.callout-danger .callout-body, - .callout.callout-danger .callout-body a:hover, - .callout.callout-danger .callout-body a:active { - color: var(--sl-color-white); } - -/* -.callout.callout-light code { - background: var(--sl-color-gray-1); -} -*/ -[data-bs-theme="dark"] .callout { - color: var(--sl-color-gray-1); } - -[data-bs-theme="dark"] .callout.callout-note { - border-color: var(--sl-color-blue); - background-color: var(--sl-color-blue-low); } - [data-bs-theme="dark"] .callout.callout-note .callout-icon, - [data-bs-theme="dark"] .callout.callout-note .callout-title, - [data-bs-theme="dark"] .callout.callout-note .callout-body a { - color: var(--sl-color-blue-high); } - [data-bs-theme="dark"] .callout.callout-note .callout-body, - [data-bs-theme="dark"] .callout.callout-note .callout-body a:hover, - [data-bs-theme="dark"] .callout.callout-note .callout-body a:active { - color: var(--sl-color-white); } - [data-bs-theme="dark"] .callout.callout-note code:not(:where(.not-content *)) { - color: var(--ec-codeFg); } - -[data-bs-theme="dark"] .callout.callout-tip { - border-color: var(--sl-color-purple); - background-color: var(--sl-color-purple-low); } - [data-bs-theme="dark"] .callout.callout-tip .callout-icon, - [data-bs-theme="dark"] .callout.callout-tip .callout-title, - [data-bs-theme="dark"] .callout.callout-tip .callout-body a { - color: var(--sl-color-purple-high); } - [data-bs-theme="dark"] .callout.callout-tip .callout-body, - [data-bs-theme="dark"] .callout.callout-tip .callout-body a:hover, - [data-bs-theme="dark"] .callout.callout-tip .callout-body a:active { - color: var(--sl-color-white); } - [data-bs-theme="dark"] .callout.callout-tip code:not(:where(.not-content *)) { - color: var(--ec-codeFg); } - -[data-bs-theme="dark"] .callout.callout-caution { - border-color: var(--sl-color-orange); - background-color: var(--sl-color-orange-low); } - [data-bs-theme="dark"] .callout.callout-caution .callout-icon, - [data-bs-theme="dark"] .callout.callout-caution .callout-title, - [data-bs-theme="dark"] .callout.callout-caution .callout-body a { - color: var(--sl-color-orange-high); } - [data-bs-theme="dark"] .callout.callout-caution .callout-body, - [data-bs-theme="dark"] .callout.callout-caution .callout-body a:hover, - [data-bs-theme="dark"] .callout.callout-caution .callout-body a:active { - color: var(--sl-color-white); } - [data-bs-theme="dark"] .callout.callout-caution code:not(:where(.not-content *)) { - color: var(--ec-codeFg); } - -[data-bs-theme="dark"] .callout.callout-danger { - border-color: var(--sl-color-red); - background-color: var(--sl-color-red-low); } - [data-bs-theme="dark"] .callout.callout-danger .callout-icon, - [data-bs-theme="dark"] .callout.callout-danger .callout-title, - [data-bs-theme="dark"] .callout.callout-danger .callout-body a { - color: var(--sl-color-red-high); } - [data-bs-theme="dark"] .callout.callout-danger .callout-body, - [data-bs-theme="dark"] .callout.callout-danger .callout-body a:hover, - [data-bs-theme="dark"] .callout.callout-danger .callout-body a:active { - color: var(--sl-color-white); } - [data-bs-theme="dark"] .callout.callout-danger code:not(:where(.not-content *)) { - color: var(--ec-codeFg); } - -.expressive-code { - font-family: var(--ec-uiFontFml); - font-size: var(--ec-uiFontSize); - line-height: var(--ec-uiLineHt); - text-size-adjust: none; - -webkit-text-size-adjust: none; - margin: 1.5rem 0; } - -.expressive-code *:not(path) { - all: revert; - box-sizing: border-box; } - -.expressive-code pre { - display: flex; - margin: 0; - padding: 0; - border: var(--ec-brdWd) solid var(--ec-brdCol); - border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd)); - background: var(--ec-codeBg); } - -.expressive-code pre:focus-visible { - outline: 3px solid var(--ec-focusBrd); - outline-offset: -3px; } - -.expressive-code pre > code { - all: unset; - display: block; - flex: 1 0 100%; - padding: var(--ec-codePadBlk) 0; - color: var(--ec-codeFg); - font-family: var(--ec-codeFontFml); - font-size: var(--ec-codeFontSize); - line-height: var(--ec-codeLineHt); } - -.expressive-code pre { - overflow-x: auto; } - -.expressive-code pre::-webkit-scrollbar, -.expressive-code pre::-webkit-scrollbar-track { - background-color: inherit; - border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd)); - border-top-left-radius: 0; - border-top-right-radius: 0; } - -.expressive-code pre::-webkit-scrollbar-thumb { - background-color: var(--ec-sbThumbCol); - border: 4px solid transparent; - background-clip: content-box; - border-radius: 10px; } - -.expressive-code pre::-webkit-scrollbar-thumb:hover { - background-color: var(--ec-sbThumbHoverCol); } - -.expressive-code .ec-line { - padding-inline: var(--ec-codePadInl); - padding-inline-end: calc(2rem + var(--ec-codePadInl)); - direction: ltr; - unicode-bidi: isolate; } - -.expressive-code .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; } - -.expressive-code .ec-line.mark { - --tmLineBgCol: var(--ec-tm-markBg); - --tmLineBrdCol: var(--ec-tm-markBrdCol); } - -.expressive-code .ec-line.ins { - --tmLineBgCol: var(--ec-tm-insBg); - --tmLineBrdCol: var(--ec-tm-insBrdCol); } - -.expressive-code .ec-line.ins::before { - content: var(--ec-tm-insDiffIndContent); - color: var(--ec-tm-insDiffIndCol); } - -.expressive-code .ec-line.del { - --tmLineBgCol: var(--ec-tm-delBg); - --tmLineBrdCol: var(--ec-tm-delBrdCol); } - -.expressive-code .ec-line.del::before { - content: var(--ec-tm-delDiffIndContent); - color: var(--ec-tm-delDiffIndCol); } - -.expressive-code .ec-line.mark, -.expressive-code .ec-line.ins, -.expressive-code .ec-line.del { - position: relative; - background: var(--tmLineBgCol); - min-width: calc(100% - var(--ec-tm-lineMarkerAccentMarg)); - margin-inline-start: var(--ec-tm-lineMarkerAccentMarg); - border-inline-start: var(--ec-tm-lineMarkerAccentWd) solid var(--tmLineBrdCol); - padding-inline-start: calc(var(--ec-codePadInl) - var(--ec-tm-lineMarkerAccentMarg) - var(--ec-tm-lineMarkerAccentWd)) !important; } - -.expressive-code .ec-line.mark::before, -.expressive-code .ec-line.ins::before, -.expressive-code .ec-line.del::before { - position: absolute; - left: var(--ec-tm-lineDiffIndMargLeft); } - -.expressive-code .ec-line mark, .expressive-code .ec-line .mark { - --tmInlineBgCol: var(--ec-tm-markBg); - --tmInlineBrdCol: var(--ec-tm-markBrdCol); } - -.expressive-code .ec-line ins { - --tmInlineBgCol: var(--ec-tm-insBg); - --tmInlineBrdCol: var(--ec-tm-insBrdCol); } - -.expressive-code .ec-line del { - --tmInlineBgCol: var(--ec-tm-delBg); - --tmInlineBrdCol: var(--ec-tm-delBrdCol); } - -.expressive-code .ec-line mark, .expressive-code .ec-line .mark, -.expressive-code .ec-line ins, -.expressive-code .ec-line del { - all: unset; - display: inline-block; - position: relative; - --tmBrdL: var(--ec-tm-inlMarkerBrdWd); - --tmBrdR: var(--ec-tm-inlMarkerBrdWd); - --tmRadL: var(--ec-tm-inlMarkerBrdRad); - --tmRadR: var(--ec-tm-inlMarkerBrdRad); - margin-inline: 0.025rem; - padding-inline: var(--ec-tm-inlMarkerPad); - border-radius: var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL); - background: var(--tmInlineBgCol); - background-clip: padding-box; } - -.expressive-code .ec-line mark.open-start, .expressive-code .ec-line .open-start.mark, -.expressive-code .ec-line ins.open-start, -.expressive-code .ec-line del.open-start { - margin-inline-start: 0; - padding-inline-start: 0; - --tmBrdL: 0px; - --tmRadL: 0; } - -.expressive-code .ec-line mark.open-end, .expressive-code .ec-line .open-end.mark, -.expressive-code .ec-line ins.open-end, -.expressive-code .ec-line del.open-end { - margin-inline-end: 0; - padding-inline-end: 0; - --tmBrdR: 0px; - --tmRadR: 0; } - -.expressive-code .ec-line mark::before, .expressive-code .ec-line .mark::before, -.expressive-code .ec-line ins::before, -.expressive-code .ec-line del::before { - content: ""; - position: absolute; - pointer-events: none; - display: inline-block; - inset: 0; - border-radius: var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL); - border: var(--ec-tm-inlMarkerBrdWd) solid var(--tmInlineBrdCol); - border-inline-width: var(--tmBrdL) var(--tmBrdR); } - -.expressive-code .frame { - all: unset; - position: relative; - display: block; - --header-border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd)); - --tab-border-radius: calc(var(--ec-frm-edTabBrdRad) + var(--ec-brdWd)); - --button-spacing: 0.4rem; - --code-background: var(--ec-frm-edBg); - border-radius: var(--header-border-radius); - box-shadow: var(--ec-frm-frameBoxShdCssVal); } - -.expressive-code .frame .header { - display: none; - z-index: 1; - position: relative; - border-radius: var(--header-border-radius) var(--header-border-radius) 0 0; } - -.expressive-code .frame.has-title pre, -.expressive-code .frame.has-title code, -.expressive-code .frame.is-terminal pre, -.expressive-code .frame.is-terminal code { - border-top: none; - border-top-left-radius: 0; - border-top-right-radius: 0; } - -.expressive-code .frame .title:empty:before { - content: "\a0"; } - -.expressive-code .frame.has-title:not(.is-terminal) { - --button-spacing: calc(1.9rem + 2 * (var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt))); } - -.expressive-code .frame.has-title:not(.is-terminal) .title { - position: relative; - color: var(--ec-frm-edActTabFg); - background: var(--ec-frm-edActTabBg); - background-clip: padding-box; - margin-block-start: var(--ec-frm-edTabsMargBlkStart); - padding: calc(var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)) var(--ec-uiPadInl); - border: var(--ec-brdWd) solid var(--ec-frm-edActTabBrdCol); - border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0; - border-bottom: none; - overflow: hidden; } - -.expressive-code .frame.has-title:not(.is-terminal) .title::after { - content: ""; - position: absolute; - pointer-events: none; - inset: 0; - border-top: var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndTopCol); - border-bottom: var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndBtmCol); } - -.expressive-code .frame.has-title:not(.is-terminal) .header { - display: flex; - background: linear-gradient(to top, var(--ec-frm-edTabBarBrdBtmCol) var(--ec-brdWd), transparent var(--ec-brdWd)), linear-gradient(var(--ec-frm-edTabBarBg), var(--ec-frm-edTabBarBg)); - background-repeat: no-repeat; - padding-inline-start: var(--ec-frm-edTabsMargInlStart); } - -.expressive-code .frame.has-title:not(.is-terminal) .header::before { - content: ""; - position: absolute; - pointer-events: none; - inset: 0; - border: var(--ec-brdWd) solid var(--ec-frm-edTabBarBrdCol); - border-radius: inherit; - border-bottom: none; } - -.expressive-code .frame.is-terminal { - --button-spacing: calc(1.9rem + var(--ec-brdWd) + 2 * var(--ec-uiPadBlk)); - --code-background: var(--ec-frm-trmBg); } - -.expressive-code .frame.is-terminal .header { - display: flex; - align-items: center; - justify-content: center; - padding-block: var(--ec-uiPadBlk); - padding-block-end: calc(var(--ec-uiPadBlk) + var(--ec-brdWd)); - position: relative; - font-weight: 500; - letter-spacing: 0.025ch; - color: var(--ec-frm-trmTtbFg); - background: var(--ec-frm-trmTtbBg); - border: var(--ec-brdWd) solid var(--ec-brdCol); - border-bottom: none; } - -.expressive-code .frame.is-terminal .header::before { - content: ""; - position: absolute; - pointer-events: none; - left: var(--ec-uiPadInl); - width: 2.1rem; - height: 0.56rem; - line-height: 0; - background-color: var(--ec-frm-trmTtbDotsFg); - opacity: var(--ec-frm-trmTtbDotsOpa); - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E"); - -webkit-mask-repeat: no-repeat; - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E"); - mask-repeat: no-repeat; } - -.expressive-code .frame.is-terminal .header::after { - content: ""; - position: absolute; - pointer-events: none; - inset: 0; - border-bottom: var(--ec-brdWd) solid var(--ec-frm-trmTtbBrdBtmCol); } - -.expressive-code .frame pre { - background: var(--code-background); } - -.expressive-code .copy { - display: flex; - gap: 0.25rem; - flex-direction: row; - position: absolute; - inset-block-start: calc(var(--ec-brdWd) + var(--button-spacing)); - inset-inline-end: calc(var(--ec-brdWd) + var(--ec-uiPadInl) / 2); - direction: ltr; - unicode-bidi: isolate; } - -.expressive-code .copy button { - position: relative; - align-self: flex-end; - margin: 0; - padding: 0; - border: none; - border-radius: 0.2rem; - z-index: 1; - cursor: pointer; - transition-property: opacity, background, border-color; - transition-duration: 0.2s; - transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); - width: 2.5rem; - height: 2.5rem; - background: var(--code-background); - opacity: 0.75; } - -.expressive-code .copy button div { - position: absolute; - inset: 0; - border-radius: inherit; - background: var(--ec-frm-inlBtnBg); - opacity: var(--ec-frm-inlBtnBgIdleOpa); - transition-property: inherit; - transition-duration: inherit; - transition-timing-function: inherit; } - -.expressive-code .copy button::before { - content: ""; - position: absolute; - pointer-events: none; - inset: 0; - border-radius: inherit; - border: var(--ec-brdWd) solid var(--ec-frm-inlBtnBrd); - opacity: var(--ec-frm-inlBtnBrdOpa); } - -.expressive-code .copy button::after { - content: ""; - position: absolute; - pointer-events: none; - inset: 0; - background-color: var(--ec-frm-inlBtnFg); - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E"); - -webkit-mask-repeat: no-repeat; - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E"); - mask-repeat: no-repeat; - margin: 0.475rem; - line-height: 0; } - -.expressive-code .copy button:focus::after, -.expressive-code .copy button:active::after { - display: inline-block; - content: ""; - -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%; - mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%; - -webkit-mask-size: cover; - mask-size: cover; - margin: 0.2375rem; } - -.expressive-code .copy button:hover, -.expressive-code .copy button:focus:focus-visible { - opacity: 1; } - -.expressive-code .copy button:hover div, -.expressive-code .copy button:focus:focus-visible div { - opacity: var(--ec-frm-inlBtnBgHoverOrFocusOpa); } - -.expressive-code .copy button:active { - opacity: 1; } - -.expressive-code .copy button:active div { - opacity: var(--ec-frm-inlBtnBgActOpa); } - -.expressive-code .copy .feedback { - --tooltip-arrow-size: 0.35rem; - --tooltip-bg: var(--ec-frm-tooltipSuccessBg); - color: var(--ec-frm-tooltipSuccessFg); - pointer-events: none; - user-select: none; - -webkit-user-select: none; - position: relative; - align-self: center; - background-color: var(--tooltip-bg); - z-index: 99; - padding: 0.125rem 0.75rem; - border-radius: 0.2rem; - margin-inline-end: var(--tooltip-arrow-size); - opacity: 0; - transition-property: opacity, transform; - transition-duration: 0.2s; - transition-timing-function: ease-in-out; - transform: translate3d(0, 0.25rem, 0); } - -.expressive-code .copy .feedback::after { - content: ""; - position: absolute; - pointer-events: none; - top: calc(50% - var(--tooltip-arrow-size)); - inset-inline-end: calc(-2 * (var(--tooltip-arrow-size) - 0.5px)); - border: var(--tooltip-arrow-size) solid transparent; - border-inline-start-color: var(--tooltip-bg); } - -.expressive-code .copy .feedback.show { - opacity: 1; - transform: translate3d(0, 0, 0); } - -@media (hover: hover) { - .expressive-code .copy button { - opacity: 0; - width: 2rem; - height: 2rem; } - .expressive-code .frame:hover .copy button:not(:hover), - .expressive-code .frame:focus-within :focus-visible ~ .copy button:not(:hover), - .expressive-code .frame .copy .feedback.show ~ button:not(:hover) { - opacity: 0.75; } } - -:root { - --ec-brdRad: 0px; - --ec-brdWd: 1px; - --ec-brdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); - --ec-codeFontFml: var(--__sl-font-mono); - --ec-codeFontSize: var(--sl-text-code); - --ec-codeFontWg: 400; - --ec-codeLineHt: var(--sl-line-height); - --ec-codePadBlk: 0; - --ec-codePadInl: 1rem; - --ec-codeBg: #011627; - --ec-codeFg: #d6deeb; - --ec-codeSelBg: #1d3b53; - --ec-uiFontFml: var(--__sl-font); - --ec-uiFontSize: 0.9rem; - --ec-uiFontWg: 400; - --ec-uiLineHt: 1.65; - --ec-uiPadBlk: 0.25rem; - --ec-uiPadInl: 1rem; - --ec-uiSelBg: #234d708c; - --ec-uiSelFg: #ffffff; - --ec-focusBrd: #122d42; - --ec-sbThumbCol: #ffffff17; - --ec-sbThumbHoverCol: #ffffff49; - --ec-tm-lineMarkerAccentMarg: 0rem; - --ec-tm-lineMarkerAccentWd: 0.15rem; - --ec-tm-lineDiffIndMargLeft: 0.25rem; - --ec-tm-inlMarkerBrdWd: 1.5px; - --ec-tm-inlMarkerBrdRad: 0.2rem; - --ec-tm-inlMarkerPad: 0.15rem; - --ec-tm-insDiffIndContent: "+"; - --ec-tm-delDiffIndContent: "-"; - --ec-tm-markBg: #ffffff17; - --ec-tm-markBrdCol: #ffffff40; - --ec-tm-insBg: #1e571599; - --ec-tm-insBrdCol: #487f3bd0; - --ec-tm-insDiffIndCol: #79b169d0; - --ec-tm-delBg: #862d2799; - --ec-tm-delBrdCol: #b4554bd0; - --ec-tm-delDiffIndCol: #ed8779d0; - --ec-frm-shdCol: #011627; - --ec-frm-frameBoxShdCssVal: none; - --ec-frm-edActTabBg: var(--sl-color-gray-6); - --ec-frm-edActTabFg: var(--sl-color-text); - --ec-frm-edActTabBrdCol: transparent; - --ec-frm-edActTabIndHt: 1px; - --ec-frm-edActTabIndTopCol: var(--sl-color-accent-high); - --ec-frm-edActTabIndBtmCol: transparent; - --ec-frm-edTabsMargInlStart: 0; - --ec-frm-edTabsMargBlkStart: 0; - --ec-frm-edTabBrdRad: 0px; - --ec-frm-edTabBarBg: var(--sl-color-black); - --ec-frm-edTabBarBrdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); - --ec-frm-edTabBarBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); - --ec-frm-edBg: var(--sl-color-gray-6); - --ec-frm-trmTtbDotsFg: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); - --ec-frm-trmTtbDotsOpa: 0.75; - --ec-frm-trmTtbBg: var(--sl-color-black); - --ec-frm-trmTtbFg: var(--sl-color-text); - --ec-frm-trmTtbBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); - --ec-frm-trmBg: var(--sl-color-gray-6); - --ec-frm-inlBtnFg: var(--sl-color-text); - --ec-frm-inlBtnBg: var(--sl-color-text); - --ec-frm-inlBtnBgIdleOpa: 0; - --ec-frm-inlBtnBgHoverOrFocusOpa: 0.2; - --ec-frm-inlBtnBgActOpa: 0.3; - --ec-frm-inlBtnBrd: var(--sl-color-text); - --ec-frm-inlBtnBrdOpa: 0.4; - --ec-frm-tooltipSuccessBg: #158744; - --ec-frm-tooltipSuccessFg: white; } - -.expressive-code .ec-line span[style^="--"]:not([class]) { - color: var(0, inherit); - font-style: var(0fs, inherit); - font-weight: var(0fw, inherit); - text-decoration: var(0td, inherit); } - -@media (prefers-color-scheme: light) { - :root:not([data-bs-theme="dark"]) { - --ec-codeBg: #fbfbfb; - --ec-codeFg: #403f53; - --ec-codeSelBg: #e0e0e0; - --ec-uiSelBg: #d3e8f8; - --ec-uiSelFg: #403f53; - --ec-focusBrd: #93a1a1; - --ec-sbThumbCol: #0000001a; - --ec-sbThumbHoverCol: #0000005c; - --ec-tm-markBg: #0000001a; - --ec-tm-markBrdCol: #00000055; - --ec-tm-insBg: #8ec77d99; - --ec-tm-insDiffIndCol: #336a28d0; - --ec-tm-delBg: #ff9c8e99; - --ec-tm-delDiffIndCol: #9d4138d0; - --ec-frm-shdCol: #d9d9d9; - --ec-frm-edActTabBg: var(--sl-color-gray-7); - --ec-frm-edActTabIndTopCol: #5d2f86; - --ec-frm-edTabBarBg: var(--sl-color-gray-6); - --ec-frm-edBg: var(--sl-color-gray-7); - --ec-frm-trmTtbBg: var(--sl-color-gray-6); - --ec-frm-trmBg: var(--sl-color-gray-7); - --ec-frm-tooltipSuccessBg: #078662; } - :root:not([data-bs-theme="dark"]) .expressive-code .ec-line span[style^="--"]:not([class]) { - color: var(1, inherit); - font-style: var(1fs, inherit); - font-weight: var(1fw, inherit); - text-decoration: var(1td, inherit); } } - -:root[data-bs-theme="light"] .expressive-code, -.expressive-code[data-bs-theme="light"] { - --ec-codeBg: #fbfbfb; - --ec-codeFg: #403f53; - --ec-codeSelBg: #e0e0e0; - --ec-uiSelBg: #d3e8f8; - --ec-uiSelFg: #403f53; - --ec-focusBrd: #93a1a1; - --ec-sbThumbCol: #0000001a; - --ec-sbThumbHoverCol: #0000005c; - --ec-tm-markBg: #0000001a; - --ec-tm-markBrdCol: #00000055; - --ec-tm-insBg: #8ec77d99; - --ec-tm-insDiffIndCol: #336a28d0; - --ec-tm-delBg: #ff9c8e99; - --ec-tm-delDiffIndCol: #9d4138d0; - --ec-frm-shdCol: #d9d9d9; - --ec-frm-edActTabBg: var(--sl-color-gray-7); - --ec-frm-edActTabIndTopCol: #5d2f86; - --ec-frm-edTabBarBg: var(--sl-color-gray-6); - --ec-frm-edBg: var(--sl-color-gray-7); - --ec-frm-trmTtbBg: var(--sl-color-gray-6); - --ec-frm-trmBg: var(--sl-color-gray-7); - --ec-frm-tooltipSuccessBg: #078662; } - -:root[data-bs-theme="light"] .expressive-code .ec-line span[style^="--"]:not([class]), -.expressive-code[data-bs-theme="light"] .ec-line span[style^="--"]:not([class]) { - color: var(1, inherit); - font-style: var(1fs, inherit); - font-weight: var(1fw, inherit); - text-decoration: var(1td, inherit); } - -pre, -code, -kbd, -samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 0.875rem; } - -code:not(:where(.not-content *)) { - background-color: var(--sl-color-gray-6); - margin-block: -0.125rem; - padding: 0.125rem 0.375rem; - color: inherit; } - -[data-bs-theme="dark"] code:not(:where(.not-content *)) { - background-color: var(--sl-color-gray-5); } - -/* -code { - background: $db-khaki-100; - - // background: $db-gray-200; - color: $db-bluishCyan-100; - padding: 0.25rem 0.5rem; -} - -pre { - margin: 2rem 0; -} - -pre code { - display: block; - overflow-x: auto; - line-height: $line-height-base; - padding: 1.25rem 1.5rem; - tab-size: 4; - scrollbar-width: thin; - scrollbar-color: transparent transparent; -} - -.hljs { - padding: 1.5rem !important; -} - -@include media-breakpoint-down(sm) { - pre, - code, - kbd, - samp { - border-radius: 0; - } - - pre { - margin: 2rem -1.5rem; - } -} - -pre code::-webkit-scrollbar { - height: 5px; -} - -pre code::-webkit-scrollbar-thumb { - background: $gray-400; -} - -pre code:hover { - scrollbar-width: thin; - scrollbar-color: $gray-500 transparent; -} - -pre code::-webkit-scrollbar-thumb:hover { - background: $gray-500; -} - -code.language-mermaid { - background: none; -} - -.line .ln { - margin-right: 1rem; -} - -.line.hl { - color: var(--sl-color-blue); -} - -@include color-mode(dark) { - .line.hl { - color: $yellow-100; - } -} -*/ -.math-block { - display: block; - margin: 2rem 0; - overflow-x: auto; } - -.math-inline { - display: inline; } - -[data-bs-theme="dark"] .math-inline img, -[data-bs-theme="dark"] .math-block img { - filter: invert(1); } - -img.diagram { - height: auto; - width: 100%; - margin: 1rem 0 2rem; } - -img.diagram-kroki-mermaid { - background: #fff; } - -/* Applies when there are no line numbers, or when line numbers are inline. */ -.highlight > pre { - padding: 0.875rem 1rem; } - -/* Applies when line numbers are in a table cell. */ -.highlight div { - padding: 0; } - -/* Applies to all. */ -.highlight > .chroma { - overflow-x: auto; - border: 1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); - /* add border-radius and box-shadow here */ } - -/* Applies when line numbers are inline */ -.chroma .ln { - padding: 0 0.5rem 0 0; } - -.chroma .hl { - border-inline-start: 0.15rem solid #0005; - margin-left: -1rem; - margin-right: -1rem; - padding-left: 1rem; - padding-right: 1rem; } - .chroma .hl .ln { - margin-left: -0.15rem; } - -/* Applies when using an external style sheet */ -.highlight .chroma .lntable .lnt, -.highlight .chroma .lntable .hl { - display: flex; } - -/* Applies when highlihting using table */ -.chroma .lntd:first-child { - padding: 0; } - .chroma .lntd:first-child .lnt { - padding-left: 1rem; } - -.chroma .lntd:nth-child(2) { - padding: 0; } - -/* Applies when using an external style sheet */ -.highlight .chroma .lntable .lntd + .lntd { - width: 100%; } - -[data-bs-theme="dark"] .chroma .ln { - padding: 0 0.5em 0 0; } - -/* LineTableTD */ -.chroma .lntd pre { - padding: 1rem 0; - margin-bottom: 0; } - -.highlight > .chroma::-webkit-scrollbar, -.highlight > .chroma::-webkit-scrollbar-track { - background-color: inherit; - border-radius: 1px; - border-top-left-radius: 0; - border-top-right-radius: 0; } - -.highlight > .chroma::-webkit-scrollbar-thumb { - background-color: #dddee0; - border: 4px solid transparent; - background-clip: content-box; - border-radius: 10px; } - -.highlight > .chroma::-webkit-scrollbar-thumb:hover { - background-color: #9d9e9f; } - -[data-bs-theme="dark"] .highlight > .chroma::-webkit-scrollbar-thumb { - background-color: #ffffff17; } - -[data-bs-theme="dark"] .highlight > .chroma::-webkit-scrollbar-thumb:hover { - background-color: #ffffff49; } - -/* -.chroma .hl { - background-color: #0000001a -} -*/ -[data-bs-theme="dark"] { - /* - .chroma .hl { - background-color: #ffffff17; - } - */ } - [data-bs-theme="dark"] .highlight > .chroma { - border: 1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%); } - [data-bs-theme="dark"] .chroma .hl { - border-inline-start: 0.15rem solid #ffffff40; - margin-left: -1rem; - margin-right: -1rem; - padding-left: 1rem; - padding-right: 1rem; } - [data-bs-theme="dark"] .chroma .hl .ln { - margin-left: -0.15rem; } - -.comment-list ol { - list-style: none; } - -blockquote { - margin-bottom: 1rem; - font-size: 1.25rem; - border-left: 3px solid #dee2e6; - padding-left: 1rem; } - -details { - display: block; - position: relative; - border: 1px solid #e9ecef; - border-radius: 0.25rem; - padding: 0.5rem 1rem 0; - margin: 0.5rem 0; } - -/* -details summary { - &::marker { - content: ""; - } -} -*/ -summary { - list-style: none; - display: inline-block; - width: calc(100% + 2rem); - margin: -0.5rem -1rem 0; - padding: 0.5rem 1rem; } - -summary::-webkit-details-marker { - display: none; } - -summary:hover { - background: #f8f9fa; } - -details summary::after { - display: inline-block; - content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); - transition: transform 0.35s ease; - transform-origin: center center; - position: absolute; - right: 1rem; } - -details[open] > summary::after { - transform: rotate(90deg); } - -/* -details summary > * { - display: inline-block; -} -*/ -details[open] { - padding: 0.5rem 1rem; } - -details[open] > summary { - border-bottom: 1px solid #dee2e6; - margin-bottom: 0.5rem; } - -details h2, details .h2, -details h3, -details .h3, -details h4, -details .h4 { - margin: 1rem 0 0.5rem; } - -details p:last-child { - margin-bottom: 0; } - -details ul, -details ol { - margin-bottom: 0; } - -details pre { - margin: 0 0 1rem; } - -/** Search form */ -.search-form label { - font-weight: normal; } - -img { - max-width: 100%; - height: auto; } - -img[data-sizes="auto"] { - display: block; } - -img, -picture { - font-size: 0; } - -figcaption { - font-size: 1rem; - margin-top: 0.5rem; - font-style: italic; } - -.content .gitpod-mark-monochrome.icon { - margin-bottom: 0.125rem; - margin-right: 0.5rem; } - -.blur-up { - filter: blur(5px); - transition: filter 400ms; } - -.blur-up.lazyloaded { - filter: unset; } - -.mermaid { - margin: 1.5rem 0; - padding: 1.5rem; } - -.mermaid svg { - height: auto; } - -.search-form .form-control:focus, .search-form .comment-form input[type="text"]:focus, .comment-form .search-form input[type="text"]:focus, -.search-form .comment-form input[type="email"]:focus, -.comment-form .search-form input[type="email"]:focus, -.search-form .comment-form input[type="url"]:focus, -.comment-form .search-form input[type="url"]:focus, -.search-form .comment-form textarea:focus, -.comment-form .search-form textarea:focus, .search-form .search-field:focus { - border: 2px solid #5d2f86; } - -[data-bs-theme="dark"] .search-form .form-control:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="text"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="text"]:focus, -[data-bs-theme="dark"] .search-form .comment-form input[type="email"]:focus, -.comment-form [data-bs-theme="dark"] .search-form input[type="email"]:focus, -[data-bs-theme="dark"] .search-form .comment-form input[type="url"]:focus, -.comment-form [data-bs-theme="dark"] .search-form input[type="url"]:focus, -[data-bs-theme="dark"] .search-form .comment-form textarea:focus, -.comment-form [data-bs-theme="dark"] .search-form textarea:focus, [data-bs-theme="dark"] .search-form .search-field:focus { - border: 2px solid #b3c7ff; } - -[data-bs-theme="dark"] .search-form .btn-link { - color: #b3c7ff; } - -.search-form .btn-link, -.modal-body p.message, -.modal-footer { - font-size: 0.875rem; } - -.modal-body::-webkit-scrollbar { - width: 0.25rem; } - -.modal-body::-webkit-scrollbar-track { - background-color: #f1f1f1; } - -.modal-body::-webkit-scrollbar-thumb { - background-color: #c1c1c1; } - -[data-bs-theme="dark"] .modal-body::-webkit-scrollbar-track { - background-color: #424242; } - -[data-bs-theme="dark"] .modal-body::-webkit-scrollbar-thumb { - background-color: #686868; } - -@media (min-width: 768px) { - #searchModal .modal-dialog { - max-height: 40rem; } } - -.search-result h2, .search-result .h2 { - margin-top: 0; } - -.search-result a:focus { - /* - border-color: transparent; - box-shadow: 0; - */ - outline: 0 none; } - -.search-result .content { - margin-top: 0.5rem; - padding-top: 0 !important; - padding-bottom: 0 !important; } - -.search-result .card .content p { - margin-bottom: 0; } - -.search-result .card .content a { - position: relative; - z-index: 1; } - -.search-result:hover .card, -.search-result.selected .card { - background-color: #5d2f86; - color: #fff; } - .search-result:hover .card .content a, - .search-result.selected .card .content a { - color: #fff; - text-decoration: underline; } - -[data-bs-theme="dark"] .search-result:hover .card, -[data-bs-theme="dark"] .search-result.selected .card { - background-color: #b3c7ff; - color: #23262f; } - [data-bs-theme="dark"] .search-result:hover .card .content a, - [data-bs-theme="dark"] .search-result.selected .card .content a { - color: #23262f; - text-decoration: underline; } - -[data-bs-theme="dark"] .search-result:hover .card h2, [data-bs-theme="dark"] .search-result:hover .card .h2, -[data-bs-theme="dark"] .search-result.selected .card h2, -[data-bs-theme="dark"] .search-result.selected .card .h2 { - color: #17181c; } - -.search-result .submitted { - font-size: 0.875rem; - margin-top: 0.5rem; } - -.navbar-form { - position: relative; } - -#suggestions { - position: absolute; - right: 0; - margin-top: 0.5rem; - width: calc(100vw - 3rem); - max-width: calc(400px - 3rem); - z-index: 1000; } - @media (min-width: 768px) { - #suggestions { - right: -2rem; } } - @media (min-width: 992px) { - #suggestions { - right: 0; } } -#suggestions a, -.suggestion__no-results { - padding: 0.75rem; - margin: 0 0.5rem; } - -#suggestions a { - display: block; - text-decoration: none; } - -#suggestions a:focus { - background: #f8f9fa; - outline: 0; } - -#suggestions div:not(:first-child) { - border-top: 1px dashed #e9ecef; } - -#suggestions div:first-child { - margin-top: 0.5rem; } - -#suggestions div:last-child { - margin-bottom: 0.5rem; } - -#suggestions a:hover { - background: #f8f9fa; } - -#suggestions span { - display: flex; - font-size: 1rem; } - -.suggestion__title { - font-weight: 700; - color: #b3c7ff; } - -.suggestion__description, -.suggestion__no-results { - color: #495057; } - -@media (min-width: 992px) { - #suggestions { - width: 31.125rem; - max-width: 31.125rem; } - #suggestions a { - display: flex; } - .suggestion__title { - width: 9rem; - padding-right: 1rem; - border-right: 1px solid #e9ecef; - display: inline-block; - text-align: right; } - .suggestion__description { - width: 19rem; - padding-left: 1rem; } } - -.section-nav { - padding-top: 2rem; } - .section-nav details { - border: 0; - padding: 0; - margin: 0.5rem 0; } - .section-nav details[open] { - padding: 0; } - .section-nav summary { - width: 100%; - padding: 0; - margin: 0; - font-weight: 700; } - .section-nav summary:hover { - background: none; } - .section-nav details[open] > summary { - border-bottom: 0; - margin-bottom: 0; } - .section-nav ul.list-nested details { - padding-left: 1rem; - margin-top: 0.5rem; } - .section-nav ul.list-nested li { - margin: 0; } - .section-nav a { - display: block; - margin: 0.5rem 0; - color: #1d2d35; - font-size: 1rem; - text-decoration: none; } - .section-nav a:hover, - .section-nav a:active { - color: #5d2f86; } - .section-nav li.active a { - color: #5d2f86; - font-weight: 500; } - .section-nav ul.list-nested li a { - padding-left: 1rem; } - .section-nav ul.list-nested { - border-left: 1px solid #e9ecef; } - -[data-bs-theme="dark"] .section-nav ul.list-nested { - border-left: 1px solid #23262f; } - -[data-bs-theme="dark"] .section-nav a { - color: #c1c3c8; } - -[data-bs-theme="dark"] .section-nav a:hover, -[data-bs-theme="dark"] .section-nav a:active { - color: var(--sl-color-text-accent); } - -[data-bs-theme="dark"] .section-nav li.active a { - color: var(--sl-color-text-accent); - font-weight: 500; } - -[data-bs-theme="dark"] .section-nav summary { - color: #fff; } - -table { - margin: 3rem 0; } - -.nav-tabs { - border-bottom: 0.0625rem solid #d8dee4; - margin-bottom: 1rem; } - -.nav-tabs .nav-link, .nav-tabs .banner .nav a, .banner .nav .nav-tabs a { - margin-bottom: -0.0625rem !important; - background: none; - border: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; - color: inherit; } - -.nav-tabs .nav-link:hover, .nav-tabs .banner .nav a:hover, .banner .nav .nav-tabs a:hover, -.nav-tabs .nav-link:focus, -.nav-tabs .banner .nav a:focus, -.banner .nav .nav-tabs a:focus { - isolation: isolate; - border-color: transparent; - color: var(--bs-emphasis-color); } - -.nav-tabs .nav-link.active, .nav-tabs .banner .nav a.active, .banner .nav .nav-tabs a.active, -.nav-tabs .nav-item.show .nav-link, -.nav-tabs .nav-item.show .banner .nav a, -.banner .nav .nav-tabs .nav-item.show a, -.nav-tabs .banner .nav li.show .nav-link, -.nav-tabs .banner .nav li.show a, -.banner .nav .nav-tabs li.show .nav-link, -.banner .nav .nav-tabs li.show a { - background-color: transparent; - border-color: transparent; - border-bottom: 0.125rem solid #5d2f86; } - -[data-bs-theme="dark"] .nav-tabs { - border-bottom: 0.0625rem solid #343a40; } - -[data-bs-theme="dark"] .nav-tabs .nav-link.active, [data-bs-theme="dark"] .nav-tabs .banner .nav a.active, .banner .nav [data-bs-theme="dark"] .nav-tabs a.active, -[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link, -[data-bs-theme="dark"] .nav-tabs .nav-item.show .banner .nav a, -.banner .nav [data-bs-theme="dark"] .nav-tabs .nav-item.show a, -[data-bs-theme="dark"] .nav-tabs .banner .nav li.show .nav-link, -[data-bs-theme="dark"] .nav-tabs .banner .nav li.show a, -.banner .nav [data-bs-theme="dark"] .nav-tabs li.show .nav-link, -.banner .nav [data-bs-theme="dark"] .nav-tabs li.show a { - border-bottom: 0.125rem solid #b3c7ff; } - -.footer { - border-top: 1px solid #e9ecef; - padding-top: 1.125rem; - padding-bottom: 1.125rem; } - .footer ul { - margin-bottom: 0; } - .footer li { - font-size: 0.875rem; - margin-bottom: 0; } - .footer .list-inline-item:not(:last-child) { - margin-right: 1rem; } - -@media (max-width: 991.98px) { - .footer .col-lg-8 { - margin-top: 0.25rem; - margin-bottom: 0.25rem; } } - -@media (min-width: 768px) { - .footer li { - font-size: 1rem; } } - -.fixed-bottom-right { - position: fixed; - right: 0; - bottom: 0; - z-index: 1000; } - -.navbar-text { - margin-left: 1rem; } - -.navbar-brand { - font-weight: 700; } - -.navbar-brand svg { - margin-right: 0.25rem; } - -[data-bs-theme="dark"] .navbar-brand { - color: inherit; } - -/* -.navbar-light .navbar-brand, -.navbar-light .navbar-brand:hover, -.navbar-light .navbar-brand:active { - color: $body-color; -} - -.navbar-light .navbar-nav .active .nav-link { - color: $primary; -} -*/ -.navbar { - z-index: 1000; - background-color: rgba(255, 255, 255, 0.95); - border-bottom: 1px solid #e9ecef; - /* - margin-top: 4px; - */ } - -@media (min-width: 992px) { - .navbar { - z-index: 1025; - /* - padding-top: 0.25rem; - padding-bottom: 0.25rem; - */ } } - -@media (min-width: 768px) { - .navbar-brand { - font-size: 1.375rem; } - .navbar-text { - margin-left: 1.25rem; } } - -/* -.navbar-nav { - flex-direction: row; -} -*/ -.nav-item, .banner .nav li { - margin-left: 0; } - -@media (max-width: 991.98px) { - .navbar .icon-tabler-chevron-down { - display: block; - float: right; - transform: rotate(270deg); - transition: transform 0.35s ease; } - .navbar .dropdown-toggle[aria-expanded="true"] .icon-tabler-chevron-down { - transform: rotate(360deg); } - .navbar-nav .dropdown-menu { - border: 0; } - /* - .navbar-nav .nav-item { - border-bottom: 1px solid rgba(52, 56, 65, 0.5); - font-family: $headings-font-family; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - } - */ - .navbar-nav .nav-link, .navbar-nav .banner .nav a, .banner .nav .navbar-nav a { - font-weight: 400; } - .navbar-nav .dropdown-item { - font-weight: 300; } - .dropdown-toggle svg { - margin-top: 0.25rem; - margin-left: 0; } } - -@media (min-width: 768px) { - .nav-item, .banner .nav li { - margin-left: 0.5rem; } } - -/* -@include media-breakpoint-down(sm) { - .nav-item:first-child { - margin-left: 0; - } -} -*/ -/* -@include media-breakpoint-down(md) { - .navbar .container { - padding-left: 1.5rem; - padding-right: 1.5rem; - } -} -*/ -.break { - flex-basis: 100%; - height: 0; } - -span#doks-language-current { - margin-left: 0.1rem; } - -button#doks-languages { - margin: 0.25rem 0 0; } - @media (min-width: 992px) { - button#doks-languages { - margin: 0.25rem 0.5rem 0 0.25rem; } } -button#doks-versions { - margin: 0.25rem 0 0; } - @media (min-width: 992px) { - button#doks-versions { - margin: 0.25rem 0.5rem 0 0.25rem; } } -@media (max-width: 575.98px) { - .navbar .offcanvas.offcanvas-start, - .navbar .offcanvas.offcanvas-end { - width: 80vw; } } - -.offcanvas-header { - border-bottom: 1px solid #dee2e6; - padding-top: 1.0625rem; - padding-bottom: 0.8125rem; } - -h5.offcanvas-title, .offcanvas-title.h5 { - margin: 0; - color: inherit; } - -.offcanvas .nav-link, .offcanvas .banner .nav a, .banner .nav .offcanvas a { - color: #1d2d35; } - -/* -.doks-subnavbar { - background-color: rgba(255, 255, 255, 0.95); - border-bottom: 1px solid $gray-200; -} - -.doks-subnavbar .nav-link { - padding: 0.5rem 1.5rem 0.5rem 0; -} - -.doks-subnavbar .nav-link:first-child { - padding: 0.5rem 1.5rem 0.5rem 0; -} -*/ -.offcanvas .nav-link:hover, .offcanvas .banner .nav a:hover, .banner .nav .offcanvas a:hover, -.offcanvas .nav-link:focus, -.offcanvas .banner .nav a:focus, -.banner .nav .offcanvas a:focus { - color: #5d2f86; } - -.offcanvas .nav-link.active, .offcanvas .banner .nav a.active, .banner .nav .offcanvas a.active { - color: #5d2f86; } - -/* -.navbar { - background-color: rgba(255, 255, 255, 0.95); - border-bottom: 1px solid $gray-200; - margin-top: 4px; -} -*/ -.header-bar { - border-top: 4px solid; - border-image-source: linear-gradient(83.21deg, #ffe000 0%, #e55235 100%); - border-image-slice: 1; } - -[data-bs-theme="dark"] .header-bar { - border-top: 4px solid; - border-image-source: linear-gradient(83.21deg, var(--sl-color-accent) 0%, var(--sl-color-green) 100%); - border-image-slice: 1; } - -.offcanvas .header-bar { - margin-bottom: -4px; } - -.home .navbar { - border-bottom: 0; } - -/* -.navbar-form { - position: relative; - margin-top: 0.25rem; -} -*/ -@media (min-width: 992px) { - .navbar-brand { - margin-right: 0.75rem !important; } - .main-nav .nav-item:first-child .nav-link, .main-nav .banner .nav li:first-child .nav-link, .banner .nav .main-nav li:first-child .nav-link, .main-nav .nav-item:first-child .banner .nav a, .banner .nav .main-nav .nav-item:first-child a, .main-nav .banner .nav li:first-child a, .banner .nav .main-nav li:first-child a, - .social-nav .nav-item:first-child .nav-link, - .social-nav .banner .nav li:first-child .nav-link, - .banner .nav .social-nav li:first-child .nav-link, - .social-nav .nav-item:first-child .banner .nav a, - .banner .nav .social-nav .nav-item:first-child a, - .social-nav .banner .nav li:first-child a, - .banner .nav .social-nav li:first-child a { - padding-left: 0; } - .main-nav .nav-item:last-child .nav-link, .main-nav .banner .nav li:last-child .nav-link, .banner .nav .main-nav li:last-child .nav-link, .main-nav .nav-item:last-child .banner .nav a, .banner .nav .main-nav .nav-item:last-child a, .main-nav .banner .nav li:last-child a, .banner .nav .main-nav li:last-child a, - .social-nav .nav-item:last-child .nav-link, - .social-nav .banner .nav li:last-child .nav-link, - .banner .nav .social-nav li:last-child .nav-link, - .social-nav .nav-item:last-child .banner .nav a, - .banner .nav .social-nav .nav-item:last-child a, - .social-nav .banner .nav li:last-child a, - .banner .nav .social-nav li:last-child a { - padding-right: 0; } - /* - .doks-search { - max-width: 20rem; - margin-top: 0.125rem; - margin-bottom: 0.125rem; - } - */ - /* - .navbar-form { - margin-top: 0; - margin-left: 6rem; - margin-right: 1.5rem; - } - */ } - -.form-control.is-search, .comment-form input.is-search[type="text"], -.comment-form input.is-search[type="email"], -.comment-form input.is-search[type="url"], -.comment-form textarea.is-search, .search-form .is-search.search-field { - padding-right: 4rem; - border: 1px solid transparent; - background: #f8f9fa; } - @media (min-width: 768px) { - .form-control.is-search, .comment-form input.is-search[type="text"], - .comment-form input.is-search[type="email"], - .comment-form input.is-search[type="url"], - .comment-form textarea.is-search, .search-form .is-search.search-field { - width: calc(100% + 2rem); } } - @media (min-width: 992px) { - .form-control.is-search, .comment-form input.is-search[type="text"], - .comment-form input.is-search[type="email"], - .comment-form input.is-search[type="url"], - .comment-form textarea.is-search, .search-form .is-search.search-field { - width: 100%; } } -.form-control.is-search:focus, .comment-form input.is-search[type="text"]:focus, -.comment-form input.is-search[type="email"]:focus, -.comment-form input.is-search[type="url"]:focus, -.comment-form textarea.is-search:focus, .search-form .is-search.search-field:focus { - border: 1px solid #5d2f86; } - -/* -.doks-search::after { - position: absolute; - top: 0.4625rem; - right: 0.5375rem; - display: flex; - align-items: center; - justify-content: center; - height: 1.5rem; - padding-right: 0.3125rem; - padding-left: 0.3125rem; - font-size: $font-size-base * 0.75; - color: $gray-700; - content: "Ctrl + /"; - border: 1px solid $gray-300; - border-radius: 0.25rem; - - @include media-breakpoint-up(md) { - right: -1.4625rem; - } - - @include media-breakpoint-up(lg) { - right: 0.3125rem; - } -} -*/ -/* -@include media-breakpoint-up(lg) { - .navbar-form { - margin-left: 15rem; - } -} - -@include media-breakpoint-up(xl) { - .navbar-form { - margin-left: 30rem; - } -} -*/ -/* -.form-control.is-search { -*/ -/* - padding-right: calc(1.5em + 0.75rem); - */ -/* - padding-right: 2.5rem; - background: $gray-100; - border: 0; - */ -/* - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right calc(0.375em + 0.1875rem) center; - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); - */ -/* -} -*/ -/* -.navbar-form::after { - position: absolute; - top: 0.4625rem; - right: 0.5375rem; - display: flex; - align-items: center; - justify-content: center; - height: 1.5rem; - padding-right: 0.4375rem; - padding-left: 0.4375rem; - font-size: $font-size-base * 0.75; - color: $gray-700; - content: "/"; - border: 1px solid $gray-300; - border-radius: 0.25rem; -} -*/ -/*! purgecss start ignore */ -/* -.algolia-autocomplete { - display: flex !important; -} - -.algolia-autocomplete .ds-dropdown-menu { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; -} - -@include media-breakpoint-down(sm) { - .algolia-autocomplete .ds-dropdown-menu { - max-width: 512px !important; - min-width: 312px !important; - width: auto !important; - } - - .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column { - font-weight: normal; - } - - .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column::after { - content: "/"; - margin-right: 0.25rem; - } -} - -.algolia-autocomplete .algolia-docsearch-suggestion--category-header { - color: $link-color-dark; -} - -.algolia-autocomplete .algolia-docsearch-suggestion--title { - margin-bottom: 0; -} - -.algolia-autocomplete .algolia-docsearch-suggestion--highlight { - padding: 0 0.05em; -} - -.algolia-autocomplete .algolia-docsearch-footer { - margin-top: 1rem; - margin-right: 0.5rem; - margin-bottom: 0.5rem; -} -*/ -/*! purgecss end ignore */ -/* - * Source: https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99 -*/ -/* Style the menu icon for the dropdown */ -.navbar .menu-icon { - cursor: pointer; - /* display: inline-block; */ - /* float: right; */ - padding: 1.125rem 0.625rem; - margin: 0 0 0 -0.625rem; - /* position: relative; */ - user-select: none; } - -.navbar .menu-icon .navicon { - background: rgba(var(--bs-emphasis-color-rgb), 0.65); - display: block; - height: 2px; - position: relative; - transition: background 0.2s ease-out; - width: 18px; } - -.navbar .menu-icon .navicon::before, -.navbar .menu-icon .navicon::after { - background: rgba(var(--bs-emphasis-color-rgb), 0.65); - content: ""; - display: block; - height: 100%; - position: absolute; - transition: all 0.2s ease-out; - width: 100%; } - -.navbar .menu-icon .navicon::before { - top: 5px; } - -.navbar .menu-icon .navicon::after { - top: -5px; } - -/* Add the icon and menu animations when the checkbox is clicked */ -.navbar .menu-btn { - display: none; } - -.navbar .menu-btn:checked ~ .navbar-collapse { - display: block; - max-height: 100vh; } - -.navbar .menu-btn:checked ~ .menu-icon .navicon { - background: transparent; } - -.navbar .menu-btn:checked ~ .menu-icon .navicon::before { - transform: rotate(-45deg); } - -.navbar .menu-btn:checked ~ .menu-icon .navicon::after { - transform: rotate(45deg); } - -.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::before, -.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after { - top: 0; } - -.btn-menu { - margin-left: 1rem; - border: transparent; } - -.btn-doks-light { - border: transparent; } - -.btn-menu, -.doks-sidebar-toggle { - padding-right: 0.25rem; - padding-left: 0.25rem; - margin-right: -0.5rem; } - -.btn-menu:hover, -.btn-doks-light:hover, -.doks-sidebar-toggle:hover { - background: transparent; - border: transparent; } - -.btn-menu:focus, -.btn-doks-light:focus, -.doks-sidebar-toggle:focus, -.doks-mode-toggle:focus { - outline: 0; - border: transparent; } - -.doks-sidebar-toggle .doks-collapse, -.doks-toc-toggle .doks-collapse { - display: none; } - -.doks-sidebar-toggle:not(.collapsed) .doks-expand, -.doks-toc-toggle:not(.collapsed) .doks-expand { - display: none; } - -.doks-sidebar-toggle:not(.collapsed) .doks-collapse, -.doks-toc-toggle:not(.collapsed) .doks-collapse { - display: inline-block; } - -.navbar-light .navbar-brand, -.navbar-light .navbar-brand:hover, -.navbar-light .navbar-brand:active { - color: #1d2d35; } - -.navbar-light .navbar-nav .active .nav-link, .navbar-light .navbar-nav .active .banner .nav a, .banner .nav .navbar-light .navbar-nav .active a { - color: #5d2f86; } - -.dropdown-divider { - border-top: 1px dashed #e9ecef; } - -.dropdown-item:hover { - background: #f8f9fa; } - -.dropdown-item:active { - color: inherit; } - -.social-link { - padding-right: 0.375rem; - padding-left: 0.375rem; } - -@media (max-width: 991.98px) { - #buttonColorMode { - margin: 0.5rem 0; } - #socialMenu { - margin: 0.5rem 0 0.5rem -0.25rem; } - .navbar-nav { - margin-top: 1rem; } - .dropdown-menu { - box-shadow: none !important; - background: transparent !important; - border-radius: 0 !important; - padding: 0; - margin-bottom: 0.25rem; } - .dropdown-item { - padding: 0.375rem 1rem 0.375rem 0; } - .nav-item .nav-link, .banner .nav li .nav-link, .nav-item .banner .nav a, .banner .nav .nav-item a, .banner .nav li a { - font-weight: 400; - font-size: 1.125rem; } - .btn-dropdown { - font-weight: 400; - font-size: 1.125rem; } } - -/* -@include media-breakpoint-up(lg) { - // Source: https://bootstrap-menu.com/detail-basic-hover.html - .navbar .nav-item .dropdown-menu { - display: none; - } - - .navbar .nav-item:hover .dropdown-menu { - display: block; - } -} -*/ -.modal-backdrop, -.offcanvas-backdrop { - visibility: hidden; - background: rgba(23, 24, 28, 0.5); - opacity: 0; } - -[data-bs-theme="dark"] .modal-backdrop, -[data-bs-theme="dark"] .offcanvas-backdrop { - visibility: hidden; - background: rgba(23, 24, 28, 0.5); - opacity: 0; } - -.modal-backdrop.show, -.offcanvas-backdrop.show { - visibility: visible; - opacity: 1; - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); } - -.showing, -.hiding { - -webkit-transition: none; - transition: none; - display: none; } - -.offcanvas-top.h-auto { - bottom: initial; } - -.navbar > .container, -.navbar > .container-fluid, -.navbar > .container-sm, -.navbar > .container-md, -.navbar > .container-lg, -.navbar > .container-xl, -.navbar > .container-xxl { - padding-right: 0.75rem; } - -.docs-content > h2[id]::before, .docs-content > [id].h2::before, -.docs-content > h3[id]::before, -.docs-content > [id].h3::before, -.docs-content > h4[id]::before, -.docs-content > [id].h4::before { - display: block; - height: 6rem; - margin-top: -6rem; - content: ""; } - -.docs-content ul, -.docs-content ol { - margin-bottom: 1rem; } - -.anchor { - visibility: hidden; - margin-left: 0.375rem; } - -.edit-page a, -.last-modified a { - color: var(--sl-color-gray-3); } - -h1:hover a, .h1:hover a, -h2:hover a, -.h2:hover a, -h3:hover a, -.h3:hover a, -h4:hover a, -.h4:hover a { - visibility: visible; - text-decoration: none; } - -.card-list { - margin-top: 2.25rem; } - -.page-footer-meta { - margin-top: 2rem; - margin-bottom: 2rem; } - -.edit-page, -.last-modified { - font-size: 0.875rem; - margin-top: 0.25rem; - margin-bottom: 0.25rem; } - -@media (min-width: 768px) { - .edit-page, - .last-modified { - font-size: 1rem; - margin-top: 0.75rem; - margin-bottom: 0.25rem; } } - -.edit-page a:hover, -.last-modified a:hover { - color: var(--sl-color-gray-4); - text-decoration: none; } - -[data-bs-theme="dark"] .edit-page a:hover, -[data-bs-theme="dark"] .last-modified a:hover { - color: var(--sl-color-gray-2); } - -.edit-page svg, -.last-modified svg { - margin-right: 0.25rem; - margin-bottom: 0.25rem; } - -p.meta { - margin-top: 0.5rem; - font-size: 1rem; } - -.breadcrumb { - margin-top: 2.25rem; - font-size: 1rem; } - -.toc-mobile { - margin-top: 2rem; - margin-bottom: 2rem; } - -.page-link:hover { - text-decoration: none; } - -.row-about { - padding-top: 5rem; - padding-bottom: 5rem; } - @media (min-width: 992px) { - .row-about { - padding-top: 7rem; - padding-bottom: 7rem; } } -.row-about h1, .row-about .h1 { - margin-top: 1rem; } - -ul li { - margin: 0.25rem 0; } - -.list-contributors { - margin-left: 1.25rem; } - -.list-contributors li { - margin: 0.25rem 0 0.25rem -1.5rem; - padding: 0.25rem; - background-color: #fff; - border-radius: 50%; } - -[data-bs-theme="dark"] .list-contributors li { - background-color: #212529; } - -ul.list-toolbox li { - position: relative; - margin: 0.25rem 0; } - ul.list-toolbox li::before { - background: none; - content: "🧰"; - height: 1rem; - width: 1rem; - position: absolute; - left: -2rem; - top: 0; } - -ul.list-books li { - position: relative; - margin: 0.25rem 0; } - ul.list-books li::before { - background: none; - content: "📚"; - height: 1rem; - width: 1rem; - position: absolute; - left: -2rem; - top: 0; } - -ul.list-speech-balloon li { - position: relative; - margin: 0.25rem 0; } - ul.list-speech-balloon li::before { - background: none; - content: "💬"; - height: 1rem; - width: 1rem; - position: absolute; - left: -2rem; - top: 0; } - -ul.list-package li { - position: relative; - margin: 0.25rem 0; } - ul.list-package li::before { - background: none; - content: "📦"; - height: 1rem; - width: 1rem; - position: absolute; - left: -2rem; - top: 0; } - -ul.list-star li { - position: relative; - margin: 0.25rem 0; } - ul.list-star li::before { - background: none; - content: "⭐"; - height: 1rem; - width: 1rem; - position: absolute; - left: -2rem; - top: 0; } - -.page-nav .card .icon-tabler-arrow-left { - margin-right: 0.75rem; } - -.page-nav .card .icon-tabler-arrow-right { - margin-left: 0.75rem; } - -.page-nav .card:hover { - border: 1px solid #d9d9d9; } - -[data-bs-theme="dark"] .page-nav .card { - border: 1px solid #353841; } - -[data-bs-theme="dark"] .page-nav .card:hover { - border: 1px solid #888c96; } - -.container-fw { - max-width: 1200px; } - .container-fw .docs-toc { - margin-left: 3rem; } - -.home .card, -.contributors.list .card, -.blog.list .card, -.blog.single .card, -.categories.list .card, -.tags.list .card { - margin-top: 2rem; - margin-bottom: 2rem; - transition: transform 0.3s; } - -.home .content .card:hover, -.contributors.list .content .card:hover, -.blog.list .content .card:hover, -.blog.single .content .card:hover, -.categories.list .content .card:hover, -.tags.list .content .card:hover { - transform: scale(1.025); } - -.contributors.list .card.card-terms:hover, -.categories.list .card.card-terms:hover, -.tags.list .card.card-terms:hover { - transform: none; } - -.home .content .card-body, -.contributors.list .content .card-body, -.blog.list .content .card-body, -.blog.single .content .card-body, -.categories.list .content .card-body, -.tags.list .content .card-body { - padding: 0 2rem 1rem; } - -.contributors.list .card-terms .card-body, -.categories.list .card-terms .card-body, -.tags.list .card-terms .card-body { - padding: 1rem; } - -.blog-header { - text-align: center; - margin-bottom: 2rem; } - -.blog-footer { - text-align: center; } - -.related-posts { - margin-top: 4rem; } - -h2.section-title, .section-title.h2 { - margin-bottom: 1.25rem; } - -.img-post-single { - margin-bottom: 2rem; } - -.pagination { - display: flex; - justify-content: center; } - -.page-item:first-child, -.page-item:last-child, -.page-item.disabled { - display: none; } - -.page-item a { - margin-left: 0.5rem; - margin-right: 0.5rem; - padding-left: 0.875rem; - padding-right: 0.875rem; } - -.page-item a[aria-label="Previous"], -.page-item a[aria-label="Next"] { - border-radius: 50%; } - -.tag-list-single { - margin-top: 3rem; - margin-bottom: 1rem; } - -.section-related { - padding-top: 1.5rem; - padding-bottom: 1.5rem; } - -.contributor-image { - text-align: center; - margin-top: 2.5rem; } - -span.reading-time { - margin-left: 2rem; } - span.reading-time svg { - margin-right: 0.3rem; - vertical-align: -0.4rem; } - -.docs-links, -.docs-toc { - scrollbar-width: thin; - scrollbar-color: #fff #fff; } - -.docs-links::-webkit-scrollbar, -.docs-toc::-webkit-scrollbar { - width: 5px; } - -.docs-links::-webkit-scrollbar-track, -.docs-toc::-webkit-scrollbar-track { - background: #fff; } - -.docs-links::-webkit-scrollbar-thumb, -.docs-toc::-webkit-scrollbar-thumb { - background: #fff; } - -.docs-links:hover, -.docs-toc:hover { - scrollbar-width: thin; - scrollbar-color: #e9ecef #fff; } - -.docs-links:hover::-webkit-scrollbar-thumb, -.docs-toc:hover::-webkit-scrollbar-thumb { - background: #e9ecef; } - -.docs-links::-webkit-scrollbar-thumb:hover, -.docs-toc::-webkit-scrollbar-thumb:hover { - background: #e9ecef; } - -.docs-links h3, .docs-links .h3, -.page-links h3, -.page-links .h3 { - font-size: 1.125rem; - margin: 1.25rem 0 0.5rem; - padding: 1.5rem 0 0; } - -@media (min-width: 992px) { - .docs-links h3, .docs-links .h3, - .page-links h3, - .page-links .h3 { - margin: 1.125rem 1.5rem 0.75rem 0; - padding: 1.375rem 0 0; } } - -.docs-links h3:not(:first-child), .docs-links .h3:not(:first-child) { - border-top: 1px solid #e9ecef; } - -a.docs-link { - color: #1d2d35; - display: block; - padding: 0.125rem 0; - font-size: 1rem; } - -.page-links li { - margin-top: 0.375rem; - padding-top: 0.375rem; } - -.page-links li ul li { - border-top: none; - padding-left: 1rem; - margin-top: 0.125rem; - padding-top: 0.125rem; } - -.page-links li:not(:first-child) { - border-top: 1px dashed #e9ecef; } - -.page-links a { - color: #1d2d35; - display: block; - padding: 0.125rem 0; - font-size: 0.9375rem; - text-decoration: none; } - -.docs-link:hover, -.docs-link.active, -.page-links a:hover, -.page-links a.active { - text-decoration: none; - color: #5d2f86; } - -.nav-link.active, .banner .nav a.active, -.dropdown-menu-main .dropdown-item.active, -.docs-link.active { - font-weight: 500; } - -.docs-links h3.sidebar-link, .docs-links .sidebar-link.h3, -.page-links h3.sidebar-link, -.page-links .sidebar-link.h3 { - text-transform: none; - font-size: 1.125rem; - font-weight: normal; } - -.docs-links h3.sidebar-link a, .docs-links .sidebar-link.h3 a, -.page-links h3.sidebar-link a, -.page-links .sidebar-link.h3 a { - color: #1d2d35; } - -.docs-links h3.sidebar-link a:hover, .docs-links .sidebar-link.h3 a:hover, -.page-links h3.sidebar-link a:hover, -.page-links .sidebar-link.h3 a:hover { - text-decoration: underline; } - -/* -body { - background-color: {{ site.Params.doks.backGround }}; -} -*/ - -/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/resources/_gen/assets/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.json b/resources/_gen/assets/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.json deleted file mode 100644 index cdd1d3b..0000000 --- a/resources/_gen/assets/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.json +++ /dev/null @@ -1 +0,0 @@ -{"Target":"main.01b0834d5af51b24812d02878d09c8d7677d6b8af13164fb50215889dc19aaefd0e9366c13b45a9a57ae481dfd1836bce46b5ebfe461d56e3498b9443d8c5e27.css","MediaType":"text/css","Data":{"Integrity":"sha512-AbCDTVr1GySBLQKHjQnI12d9a4rxMWT7UCFYidwZqu/Q6TZsE7RamleuSB39GDa85Gtev+Rh1W40mLlEPYxeJw=="}} \ No newline at end of file diff --git a/resources/_gen/assets/scss/app.scss_cdf9d7c9eb97e4550ded64a8776dd9e8.content b/resources/_gen/assets/scss/app.scss_cdf9d7c9eb97e4550ded64a8776dd9e8.content index d09f543..c005d16 100644 --- a/resources/_gen/assets/scss/app.scss_cdf9d7c9eb97e4550ded64a8776dd9e8.content +++ b/resources/_gen/assets/scss/app.scss_cdf9d7c9eb97e4550ded64a8776dd9e8.content @@ -1 +1 @@ -:root[data-bs-theme="light"],[data-bs-theme="light"] ::backdrop{--sl-color-white: hsl(224, 10%, 10%);--sl-color-gray-1: hsl(224, 14%, 16%);--sl-color-gray-2: hsl(224, 10%, 23%);--sl-color-gray-3: hsl(224, 7%, 36%);--sl-color-gray-4: hsl(224, 6%, 56%);--sl-color-gray-5: hsl(224, 6%, 77%);--sl-color-gray-6: hsl(224, 20%, 94%);--sl-color-gray-7: hsl(224, 19%, 97%);--sl-color-black: hsl(0, 0%, 100%)}:root,::backdrop{--sl-color-white: hsl(0, 0%, 100%);--sl-color-gray-1: hsl(224, 20%, 94%);--sl-color-gray-2: hsl(224, 6%, 77%);--sl-color-gray-3: hsl(224, 6%, 56%);--sl-color-gray-4: hsl(224, 7%, 36%);--sl-color-gray-5: hsl(224, 10%, 23%);--sl-color-gray-6: hsl(224, 14%, 16%);--sl-color-black: hsl(224, 10%, 10%);--sl-hue-orange: 41;--sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%);--sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%);--sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%);--sl-hue-green: 101;--sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%);--sl-color-green: hsl(var(--sl-hue-green), 82%, 63%);--sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%);--sl-hue-blue: 234;--sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%);--sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%);--sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%);--sl-hue-purple: 281;--sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%);--sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%);--sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%);--sl-hue-red: 339;--sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%);--sl-color-red: hsl(var(--sl-hue-red), 82%, 63%);--sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%);--sl-color-accent-low: hsl(224, 54%, 20%);--sl-color-accent: hsl(224, 100%, 60%);--sl-color-accent-high: hsl(224, 100%, 85%);--sl-color-text: var(--sl-color-gray-2);--sl-color-text-accent: var(--sl-color-accent-high);--sl-color-text-invert: var(--sl-color-accent-low);--sl-color-bg: var(--sl-color-black);--sl-color-bg-nav: var(--sl-color-gray-6);--sl-color-bg-sidebar: var(--sl-color-gray-6);--sl-color-bg-inline-code: var(--sl-color-gray-5);--sl-color-hairline-light: var(--sl-color-gray-5);--sl-color-hairline: var(--sl-color-gray-6);--sl-color-hairline-shade: var(--sl-color-black);--sl-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66);--sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), 0px 2px 1px hsla(0, 0%, 0%, 0.24);--sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08), 0px 5px 2px hsla(0, 0%, 0%, 0.08), 0px 3px 2px hsla(0, 0%, 0%, 0.12), 0px 1px 1px hsla(0, 0%, 0%, 0.15);--sl-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(0, 0%, 0%, 0.1), 0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(0, 0%, 0%, 0.75), 0px 4px 2px hsla(0, 0%, 0%, 0.25);--sl-text-xs: 0.8125rem;--sl-text-sm: 0.875rem;--sl-text-base: 1rem;--sl-text-lg: 1.125rem;--sl-text-xl: 1.25rem;--sl-text-2xl: 1.5rem;--sl-text-3xl: 1.8125rem;--sl-text-4xl: 2.1875rem;--sl-text-5xl: 2.625rem;--sl-text-6xl: 4rem;--sl-text-body: var(--sl-text-base);--sl-text-body-sm: var(--sl-text-xs);--sl-text-code: var(--sl-text-sm);--sl-text-code-sm: var(--sl-text-xs);--sl-text-h1: var(--sl-text-4xl);--sl-text-h2: var(--sl-text-3xl);--sl-text-h3: var(--sl-text-2xl);--sl-text-h4: var(--sl-text-xl);--sl-text-h5: var(--sl-text-lg);--sl-line-height: 1.8;--sl-line-height-headings: 1.2;--sl-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--__sl-font: var(--sl-font, ""), var(--sl-font-system);--__sl-font-mono: var(--sl-font-mono, ""), var(--sl-font-system-mono);--sl-nav-height: 3.5rem;--sl-nav-pad-x: 1rem;--sl-nav-pad-y: 0.75rem;--sl-mobile-toc-height: 3rem;--sl-sidebar-width: 18.75rem;--sl-sidebar-pad-x: 1rem;--sl-content-width: 45rem;--sl-content-pad-x: 1rem;--sl-menu-button-size: 2rem;--sl-nav-gap: var(--sl-content-pad-x);--sl-outline-offset-inside: -0.1875rem;--sl-z-index-toc: 4;--sl-z-index-menu: 5;--sl-z-index-navbar: 10;--sl-z-index-skiplink: 20}:root{--purple-hsl: 255, 60%, 60%;--overlay-blurple: hsla(var(--purple-hsl), 0.2)}:root{--ec-brdRad: 0px;--ec-brdWd: 1px;--ec-brdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-codeFontFml: var(--__sl-font-mono);--ec-codeFontSize: var(--sl-text-code);--ec-codeFontWg: 400;--ec-codeLineHt: var(--sl-line-height);--ec-codePadBlk: 0.75rem;--ec-codePadInl: 1rem;--ec-codeBg: #011627;--ec-codeFg: #d6deeb;--ec-codeSelBg: #1d3b53;--ec-uiFontFml: var(--__sl-font);--ec-uiFontSize: 0.9rem;--ec-uiFontWg: 400;--ec-uiLineHt: 1.65;--ec-uiPadBlk: 0.25rem;--ec-uiPadInl: 1rem;--ec-uiSelBg: #234d708c;--ec-uiSelFg: #ffffff;--ec-focusBrd: #122d42;--ec-sbThumbCol: #ffffff17;--ec-sbThumbHoverCol: #ffffff49;--ec-tm-lineMarkerAccentMarg: 0rem;--ec-tm-lineMarkerAccentWd: 0.15rem;--ec-tm-lineDiffIndMargLeft: 0.25rem;--ec-tm-inlMarkerBrdWd: 1.5px;--ec-tm-inlMarkerBrdRad: 0.2rem;--ec-tm-inlMarkerPad: 0.15rem;--ec-tm-insDiffIndContent: "+";--ec-tm-delDiffIndContent: "-";--ec-tm-markBg: #ffffff17;--ec-tm-markBrdCol: #ffffff40;--ec-tm-insBg: #1e571599;--ec-tm-insBrdCol: #487f3bd0;--ec-tm-insDiffIndCol: #79b169d0;--ec-tm-delBg: #862d2799;--ec-tm-delBrdCol: #b4554bd0;--ec-tm-delDiffIndCol: #ed8779d0;--ec-frm-shdCol: #011627;--ec-frm-frameBoxShdCssVal: none;--ec-frm-edActTabBg: var(--sl-color-gray-6);--ec-frm-edActTabFg: var(--sl-color-text);--ec-frm-edActTabBrdCol: transparent;--ec-frm-edActTabIndHt: 1px;--ec-frm-edActTabIndTopCol: var(--sl-color-accent-high);--ec-frm-edActTabIndBtmCol: transparent;--ec-frm-edTabsMargInlStart: 0;--ec-frm-edTabsMargBlkStart: 0;--ec-frm-edTabBrdRad: 0px;--ec-frm-edTabBarBg: var(--sl-color-black);--ec-frm-edTabBarBrdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edTabBarBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edBg: var(--sl-color-gray-6);--ec-frm-trmTtbDotsFg: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmTtbDotsOpa: 0.75;--ec-frm-trmTtbBg: var(--sl-color-black);--ec-frm-trmTtbFg: var(--sl-color-text);--ec-frm-trmTtbBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmBg: var(--sl-color-gray-6);--ec-frm-inlBtnFg: var(--sl-color-text);--ec-frm-inlBtnBg: var(--sl-color-text);--ec-frm-inlBtnBgIdleOpa: 0;--ec-frm-inlBtnBgHoverOrFocusOpa: 0.2;--ec-frm-inlBtnBgActOpa: 0.3;--ec-frm-inlBtnBrd: var(--sl-color-text);--ec-frm-inlBtnBrdOpa: 0.4;--ec-frm-tooltipSuccessBg: #158744;--ec-frm-tooltipSuccessFg: white}:root,[data-bs-theme="light"]{--bs-blue: #3347ff;--bs-indigo: #6610f2;--bs-purple: #bd53ee;--bs-pink: #d63384;--bs-red: #ee5389;--bs-orange: #fd7e14;--bs-yellow: #eebd53;--bs-green: #84ee53;--bs-teal: #20c997;--bs-cyan: #0dcaf0;--bs-black: #000;--bs-white: #fff;--bs-gray: #6c757d;--bs-gray-dark: #343a40;--bs-gray-100: #f8f9fa;--bs-gray-200: #e9ecef;--bs-gray-300: #dee2e6;--bs-gray-400: #ced4da;--bs-gray-500: #adb5bd;--bs-gray-600: #6c757d;--bs-gray-700: #495057;--bs-gray-800: #343a40;--bs-gray-900: #212529;--bs-primary: #5d2f86;--bs-secondary: #6c757d;--bs-success: #84ee53;--bs-info: #3347ff;--bs-warning: #eebd53;--bs-danger: #ee5389;--bs-light: #f8f9fa;--bs-dark: #212529;--bs-primary-rgb: 93,47,134;--bs-secondary-rgb: 108,117,125;--bs-success-rgb: 132.2821,238.017,83.283;--bs-info-rgb: 51,71.4,255;--bs-warning-rgb: 238.017,189.0179,83.283;--bs-danger-rgb: 238.017,83.283,137.4399;--bs-light-rgb: 248,249,250;--bs-dark-rgb: 33,37,41;--bs-primary-text-emphasis: #251336;--bs-secondary-text-emphasis: #2b2f32;--bs-success-text-emphasis: #355f21;--bs-info-text-emphasis: #141d66;--bs-warning-text-emphasis: #5f4c21;--bs-danger-text-emphasis: #5f2137;--bs-light-text-emphasis: #495057;--bs-dark-text-emphasis: #495057;--bs-primary-bg-subtle: #dfd5e7;--bs-secondary-bg-subtle: #e2e3e5;--bs-success-bg-subtle: #e6fcdd;--bs-info-bg-subtle: #d6daff;--bs-warning-bg-subtle: #fcf2dd;--bs-danger-bg-subtle: #fcdde7;--bs-light-bg-subtle: #fcfcfd;--bs-dark-bg-subtle: #ced4da;--bs-primary-border-subtle: #beaccf;--bs-secondary-border-subtle: #c4c8cb;--bs-success-border-subtle: #cef8ba;--bs-info-border-subtle: #adb6ff;--bs-warning-border-subtle: #f8e5ba;--bs-danger-border-subtle: #f8bad0;--bs-light-border-subtle: #e9ecef;--bs-dark-border-subtle: #adb5bd;--bs-white-rgb: 255,255,255;--bs-black-rgb: 0,0,0;--bs-font-sans-serif: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0));--bs-body-font-family: var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight: 400;--bs-body-line-height: 1.5;--bs-body-color: #1d2d35;--bs-body-color-rgb: 29,45,53;--bs-body-bg: #fff;--bs-body-bg-rgb: 255,255,255;--bs-emphasis-color: #000;--bs-emphasis-color-rgb: 0,0,0;--bs-secondary-color: rgba(29,45,53,0.75);--bs-secondary-color-rgb: 29,45,53;--bs-secondary-bg: #e9ecef;--bs-secondary-bg-rgb: 233,236,239;--bs-tertiary-color: rgba(29,45,53,0.5);--bs-tertiary-color-rgb: 29,45,53;--bs-tertiary-bg: #f8f9fa;--bs-tertiary-bg-rgb: 248,249,250;--bs-heading-color: inherit;--bs-link-color: #5d2f86;--bs-link-color-rgb: 93,47,134;--bs-link-decoration: none;--bs-link-hover-color: #4a266b;--bs-link-hover-color-rgb: 74,38,107;--bs-link-hover-decoration: underline;--bs-code-color: #d63384;--bs-highlight-color: #1d2d35;--bs-highlight-bg: #fcf2dd;--bs-border-width: 1px;--bs-border-style: solid;--bs-border-color: #dee2e6;--bs-border-color-translucent: rgba(0,0,0,0.175);--bs-border-radius: .375rem;--bs-border-radius-sm: .25rem;--bs-border-radius-lg: .5rem;--bs-border-radius-xl: 1rem;--bs-border-radius-xxl: 2rem;--bs-border-radius-2xl: var(--bs-border-radius-xxl);--bs-border-radius-pill: 50rem;--bs-box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.075);--bs-box-shadow-lg: 0 1rem 3rem rgba(0,0,0,0.175);--bs-box-shadow-inset: inset 0 1px 2px rgba(0,0,0,0.075);--bs-focus-ring-width: .25rem;--bs-focus-ring-opacity: .25;--bs-focus-ring-color: rgba(93,47,134,0.25);--bs-form-valid-color: #84ee53;--bs-form-valid-border-color: #84ee53;--bs-form-invalid-color: #ee5389;--bs-form-invalid-border-color: #ee5389}[data-bs-theme="dark"]{color-scheme:dark;--bs-body-color: #c1c3c8;--bs-body-color-rgb: 192.831,194.7078,199.869;--bs-body-bg: #17181c;--bs-body-bg-rgb: 22.95,24.31,28.05;--bs-emphasis-color: #fff;--bs-emphasis-color-rgb: 255,255,255;--bs-secondary-color: rgba(193,195,200,0.75);--bs-secondary-color-rgb: 192.831,194.7078,199.869;--bs-secondary-bg: #343a40;--bs-secondary-bg-rgb: 52,58,64;--bs-tertiary-color: rgba(193,195,200,0.5);--bs-tertiary-color-rgb: 192.831,194.7078,199.869;--bs-tertiary-bg: #2b3035;--bs-tertiary-bg-rgb: 43,48,53;--bs-primary-text-emphasis: #9e82b6;--bs-secondary-text-emphasis: #a7acb1;--bs-success-text-emphasis: #b5f598;--bs-info-text-emphasis: #8591ff;--bs-warning-text-emphasis: #f5d798;--bs-danger-text-emphasis: #f598b8;--bs-light-text-emphasis: #f8f9fa;--bs-dark-text-emphasis: #dee2e6;--bs-primary-bg-subtle: #13091b;--bs-secondary-bg-subtle: #161719;--bs-success-bg-subtle: #1a3011;--bs-info-bg-subtle: #0a0e33;--bs-warning-bg-subtle: #302611;--bs-danger-bg-subtle: #30111b;--bs-light-bg-subtle: #23262f;--bs-dark-bg-subtle: #1a1d20;--bs-primary-border-subtle: #381c50;--bs-secondary-border-subtle: #41464b;--bs-success-border-subtle: #4f8f32;--bs-info-border-subtle: #1f2b99;--bs-warning-border-subtle: #8f7132;--bs-danger-border-subtle: #8f3252;--bs-light-border-subtle: #353841;--bs-dark-border-subtle: #343a40;--bs-heading-color: #fff;--bs-link-color: #b3c7ff;--bs-link-hover-color: #c2d2ff;--bs-link-color-rgb: 178.5,198.9,255;--bs-link-hover-color-rgb: 194,210,255;--bs-code-color: #e685b5;--bs-highlight-color: #c1c3c8;--bs-highlight-bg: #5f4c21;--bs-border-color: #495057;--bs-border-color-translucent: rgba(255,255,255,0.15);--bs-form-valid-color: #b5f598;--bs-form-valid-border-color: #b5f598;--bs-form-invalid-color: #f598b8;--bs-form-invalid-border-color: #f598b8}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}h5,.h5,h4,.h4,h3,.h3,h2,.h2,h1,.h1{margin-top:0;margin-bottom:.5rem;font-weight:700;line-height:1.2;color:var(--bs-heading-color)}h1,.h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width: 1200px){h1,.h1{font-size:2.5rem}}h2,.h2{font-size:calc(1.325rem + .9vw)}@media (min-width: 1200px){h2,.h2{font-size:2rem}}h3,.h3{font-size:calc(1.3rem + .6vw)}@media (min-width: 1200px){h3,.h3{font-size:1.75rem}}h4,.h4{font-size:calc(1.275rem + .3vw)}@media (min-width: 1200px){h4,.h4{font-size:1.5rem}}h5,.h5{font-size:1.25rem}p{margin-top:0;margin-bottom:1rem}ol,ul{padding-left:2rem}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}strong{font-weight:bolder}small,.small{font-size:.875em}mark,.mark{padding:.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}a{color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));text-decoration:none}a:hover{--bs-link-color-rgb: var(--bs-link-hover-color-rgb);text-decoration:underline}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}pre,code,kbd,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}button{border-radius:0}button:focus:not(:focus-visible){outline:0}input,button{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button{text-transform:none}[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator{display:none !important}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button:not(:disabled),[type="button"]:not(:disabled),[type="reset"]:not(:disabled),[type="submit"]:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit;-webkit-appearance:button}summary{display:list-item;cursor:pointer}[hidden]{display:none !important}.lead{font-size:1.25rem;font-weight:400}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.img-fluid{max-width:100%;height:auto}.figure{display:inline-block}.container,.container-fluid,.container-lg{--bs-gutter-x: 3rem;--bs-gutter-y: 0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width: 576px){.container{max-width:540px}}@media (min-width: 768px){.container{max-width:720px}}@media (min-width: 992px){.container-lg,.container{max-width:960px}}@media (min-width: 1200px){.container-lg,.container{max-width:1240px}}@media (min-width: 1400px){.container-lg,.container{max-width:1320px}}:root{--bs-breakpoint-xs: 0;--bs-breakpoint-sm: 576px;--bs-breakpoint-md: 768px;--bs-breakpoint-lg: 992px;--bs-breakpoint-xl: 1200px;--bs-breakpoint-xxl: 1400px}.row{--bs-gutter-x: 3rem;--bs-gutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}@media (min-width: 768px){.col-md-12{flex:0 0 auto;width:75%}}@media (min-width: 992px){.col-lg-5{flex:0 0 auto;width:31.25%}.col-lg-8{flex:0 0 auto;width:50%}.col-lg-9{flex:0 0 auto;width:56.25%}.col-lg-10{flex:0 0 auto;width:62.5%}.col-lg-11{flex:0 0 auto;width:68.75%}.col-lg-12{flex:0 0 auto;width:75%}}@media (min-width: 1200px){.col-xl-3{flex:0 0 auto;width:18.75%}.col-xl-4{flex:0 0 auto;width:25%}.col-xl-8{flex:0 0 auto;width:50%}.col-xl-9{flex:0 0 auto;width:56.25%}}.sticky-top{position:sticky;top:0;z-index:1020}.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption){position:absolute !important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}li input[type="checkbox"]{--bs-form-check-bg: var(--bs-body-bg);flex-shrink:0;width:1em;height:1em;margin-top:.25em;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-form-check-bg);background-image:var(--bs-form-check-bg-image);background-repeat:no-repeat;background-position:center;background-size:contain;border:var(--bs-border-width) solid var(--bs-border-color);-webkit-print-color-adjust:exact;print-color-adjust:exact}li input[type="checkbox"]{border-radius:.25em}li input[type="radio"][type="checkbox"]{border-radius:50%}li input[type="checkbox"]:active{filter:brightness(90%)}li input[type="checkbox"]:focus{border-color:#ae97c3;outline:0;box-shadow:0 0 0 .25rem rgba(93,47,134,0.25)}li input[type="checkbox"]:checked{background-color:#5d2f86;border-color:#5d2f86}li input:checked[type="checkbox"]{--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}li input[type="checkbox"]:checked[type="radio"]{--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}li input[type="checkbox"]:indeterminate{background-color:#5d2f86;border-color:#5d2f86;--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}li input[type="checkbox"]:disabled{pointer-events:none;filter:none;opacity:.5}.btn{--bs-btn-padding-x: .75rem;--bs-btn-padding-y: .375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight: 400;--bs-btn-line-height: 1.5;--bs-btn-color: var(--bs-body-color);--bs-btn-bg: transparent;--bs-btn-border-width: var(--bs-border-width);--bs-btn-border-color: transparent;--bs-btn-border-radius: var(--bs-border-radius);--bs-btn-hover-border-color: transparent;--bs-btn-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);--bs-btn-disabled-opacity: .65;--bs-btn-focus-box-shadow: 0 0 0 0 rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);text-decoration:none;background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}:not(.btn-check)+.btn:active,.btn:first-child:active,.btn.active,.btn.show{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}:not(.btn-check)+.btn:active:focus-visible,.btn:first-child:active:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn:disabled,.btn.disabled{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color: #fff;--bs-btn-bg: #5d2f86;--bs-btn-border-color: #5d2f86;--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #4f2872;--bs-btn-hover-border-color: #4a266b;--bs-btn-focus-shadow-rgb: 117,78,152;--bs-btn-active-color: #fff;--bs-btn-active-bg: #4a266b;--bs-btn-active-border-color: #462365;--bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);--bs-btn-disabled-color: #fff;--bs-btn-disabled-bg: #5d2f86;--bs-btn-disabled-border-color: #5d2f86}.btn-link{--bs-btn-font-weight: 400;--bs-btn-color: var(--bs-link-color);--bs-btn-bg: transparent;--bs-btn-border-color: transparent;--bs-btn-hover-color: var(--bs-link-hover-color);--bs-btn-hover-border-color: transparent;--bs-btn-active-color: var(--bs-link-hover-color);--bs-btn-active-border-color: transparent;--bs-btn-disabled-color: #6c757d;--bs-btn-disabled-border-color: transparent;--bs-btn-box-shadow: 0 0 0 #000;--bs-btn-focus-shadow-rgb: 117,78,152;text-decoration:none}.btn-link:hover,.btn-link:focus-visible{text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.nav{--bs-nav-link-padding-x: 1rem;--bs-nav-link-padding-y: .5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color: var(--bs-link-color);--bs-nav-link-hover-color: var(--bs-link-hover-color);--bs-nav-link-disabled-color: var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);background:none;border:0;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.nav-link{transition:none}}.nav-link:hover,.nav-link:focus{color:var(--bs-nav-link-hover-color);text-decoration:none}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(93,47,134,0.25)}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.navbar{--bs-navbar-padding-x: 0;--bs-navbar-padding-y: .5rem;--bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y: .3125rem;--bs-navbar-brand-margin-end: 1rem;--bs-navbar-brand-font-size: 1.25rem;--bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x: .5rem;--bs-navbar-toggler-padding-y: .25rem;--bs-navbar-toggler-padding-x: .75rem;--bs-navbar-toggler-font-size: 1.25rem;--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2829,45,53,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius: var(--bs-border-radius);--bs-navbar-toggler-focus-width: 0;--bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);white-space:nowrap}.navbar-brand:hover,.navbar-brand:focus{color:var(--bs-navbar-brand-hover-color);text-decoration:none}.navbar-nav{--bs-nav-link-padding-x: 0;--bs-nav-link-padding-y: .5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color: var(--bs-navbar-color);--bs-nav-link-hover-color: var(--bs-navbar-hover-color);--bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}@media (min-width: 992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto !important;height:auto !important;visibility:visible !important;background-color:transparent !important;border:0 !important;transform:none !important;transition:none}.navbar-expand-lg .offcanvas .offcanvas-header{display:none}.navbar-expand-lg .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}.navbar[data-bs-theme="dark"]{--bs-navbar-color: #c1c3c8;--bs-navbar-hover-color: #b3c7ff;--bs-navbar-disabled-color: rgba(255,255,255,0.25);--bs-navbar-active-color: #b3c7ff;--bs-navbar-brand-color: #b3c7ff;--bs-navbar-brand-hover-color: #b3c7ff;--bs-navbar-toggler-border-color: rgba(255,255,255,0.1);--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c1c3c8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.card{--bs-card-spacer-y: 1rem;--bs-card-spacer-x: 1rem;--bs-card-title-spacer-y: .5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width: var(--bs-border-width);--bs-card-border-color: #e9ecef;--bs-card-border-radius: var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y: .5rem;--bs-card-cap-padding-x: 1rem;--bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg: var(--bs-body-bg);--bs-card-img-overlay-padding: 1rem;--bs-card-group-margin: 1.5rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}.card-text:last-child{margin-bottom:0}.breadcrumb{--bs-breadcrumb-padding-x: 0;--bs-breadcrumb-padding-y: 0;--bs-breadcrumb-margin-bottom: 1rem;--bs-breadcrumb-bg: ;--bs-breadcrumb-border-radius: ;--bs-breadcrumb-divider-color: var(--bs-secondary-color);--bs-breadcrumb-item-padding-x: .5rem;--bs-breadcrumb-item-active-color: var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */}.breadcrumb-item.active{color:var(--bs-breadcrumb-item-active-color)}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);text-decoration:none;background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.page-link.active,.active>.page-link{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.page-link.disabled,.disabled>.page-link{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(var(--bs-border-width) * -1)}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.alert-link{font-weight:700;color:var(--bs-alert-link-color)}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.modal-backdrop{--bs-backdrop-zindex: 1050;--bs-backdrop-bg: #000;--bs-backdrop-opacity: .5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}@keyframes spinner-border{to{transform:rotate(360deg) /* rtl:ignore */}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.offcanvas{--bs-offcanvas-zindex: 1045;--bs-offcanvas-width: 332px;--bs-offcanvas-height: 30vh;--bs-offcanvas-padding-x: 1rem;--bs-offcanvas-padding-y: 1rem;--bs-offcanvas-color: var(--bs-body-color);--bs-offcanvas-bg: var(--bs-body-bg);--bs-offcanvas-border-width: var(--bs-border-width);--bs-offcanvas-border-color: var(--bs-border-color-translucent);--bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);--bs-offcanvas-transition: transform .3s ease-in-out;--bs-offcanvas-title-line-height: 1.5}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}@media (prefers-reduced-motion: reduce){.offcanvas{transition:none}}.offcanvas.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas.showing,.offcanvas.show:not(.hiding){transform:none}.offcanvas.showing,.offcanvas.hiding,.offcanvas.show{visibility:visible}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.show{opacity:.5}.offcanvas-header{display:flex;align-items:center;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)}.offcanvas-title{margin-bottom:0;line-height:var(--bs-offcanvas-title-line-height)}.offcanvas-body{flex-grow:1;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);overflow-y:auto}@keyframes placeholder-glow{50%{opacity:.2}}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-none{display:none !important}.position-relative{position:relative !important}.w-100{width:100% !important}.h-auto{height:auto !important}.flex-row{flex-direction:row !important}.flex-column{flex-direction:column !important}.flex-grow-1{flex-grow:1 !important}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.justify-content-between{justify-content:space-between !important}.order-3{order:3 !important}.m-2{margin:.5rem !important}.mx-2{margin-right:.5rem !important;margin-left:.5rem !important}.mx-auto{margin-right:auto !important;margin-left:auto !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.my-3{margin-top:1rem !important;margin-bottom:1rem !important}.mt-1{margin-top:.25rem !important}.mt-2{margin-top:.5rem !important}.mt-4{margin-top:1.5rem !important}.me-2{margin-right:.5rem !important}.me-auto{margin-right:auto !important}.mb-4{margin-bottom:1.5rem !important}.ms-2{margin-left:.5rem !important}.ms-3{margin-left:1rem !important}.ms-auto{margin-left:auto !important}.mt-n3{margin-top:-1rem !important}.p-0{padding:0 !important}.p-2{padding:.5rem !important}.px-4{padding-right:1.5rem !important;padding-left:1.5rem !important}.pt-4{padding-top:1.5rem !important}.pe-4{padding-right:1.5rem !important}.pb-2{padding-bottom:.5rem !important}.pb-3{padding-bottom:1rem !important}.pb-4{padding-bottom:1.5rem !important}.ps-3{padding-left:1rem !important}.text-start{text-align:left !important}.text-end{text-align:right !important}.text-center{text-align:center !important}.text-decoration-none{text-decoration:none !important}.text-nowrap{white-space:nowrap !important}.text-body{--bs-text-opacity: 1;color:rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important}.text-muted{--bs-text-opacity: 1;color:var(--bs-secondary-color) !important}.text-body-secondary{--bs-text-opacity: 1;color:var(--bs-secondary-color) !important}.text-reset{--bs-text-opacity: 1;color:inherit !important}.rounded-circle{border-radius:50% !important}.rounded-pill{border-radius:var(--bs-border-radius-pill) !important}@media (min-width: 576px){.flex-sm-row{flex-direction:row !important}}@media (min-width: 768px){.flex-md-row{flex-direction:row !important}}@media (min-width: 992px){.d-lg-block{display:block !important}.d-lg-none{display:none !important}.flex-lg-row{flex-direction:row !important}.order-lg-3{order:3 !important}.order-lg-4{order:4 !important}.me-lg-1{margin-right:.25rem !important}.me-lg-3{margin-right:1rem !important}.ms-lg-2{margin-left:.5rem !important}.text-lg-start{text-align:left !important}.text-lg-end{text-align:right !important}}@media (min-width: 1200px){.d-xl-block{display:block !important}.d-xl-none{display:none !important}.flex-xl-nowrap{flex-wrap:nowrap !important}}@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;src:local("Jost Regular Regular"),local("Jost-Regular"),local("Jost* Book"),local("Jost-Book"),url("fonts/vendor/jost/jost-v4-latin-regular.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-regular.woff") format("woff")}@font-face{font-family:Jost;font-style:normal;font-weight:500;font-display:swap;src:local("Jost Regular Medium"),local("JostRoman-Medium"),local("Jost* Medium"),local("Jost-Medium"),url("fonts/vendor/jost/jost-v4-latin-500.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-500.woff") format("woff")}@font-face{font-family:Jost;font-style:normal;font-weight:700;font-display:swap;src:local("Jost Regular Bold"),local("JostRoman-Bold"),local("Jost* Bold"),local("Jost-Bold"),url("fonts/vendor/jost/jost-v4-latin-700.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-700.woff") format("woff")}@font-face{font-family:Jost;font-style:italic;font-weight:400;font-display:swap;src:local("Jost Italic Italic"),local("Jost-Italic"),local("Jost* BookItalic"),local("Jost-BookItalic"),url("fonts/vendor/jost/jost-v4-latin-italic.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-italic.woff") format("woff")}@font-face{font-family:Jost;font-style:italic;font-weight:500;font-display:swap;src:local("Jost Italic Medium Italic"),local("JostItalic-Medium"),local("Jost* Medium Italic"),local("Jost-MediumItalic"),url("fonts/vendor/jost/jost-v4-latin-500italic.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-500italic.woff") format("woff")}@font-face{font-family:Jost;font-style:italic;font-weight:700;font-display:swap;src:local("Jost Italic Bold Italic"),local("JostItalic-Bold"),local("Jost* Bold Italic"),local("Jost-BoldItalic"),url("fonts/vendor/jost/jost-v4-latin-700italic.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-700italic.woff") format("woff")}html[data-bs-theme="dark"] .icon-tabler-sun{display:block}html[data-bs-theme="dark"] .icon-tabler-moon{display:none}html[data-bs-theme="light"] .icon-tabler-sun{display:none}html[data-bs-theme="light"] .icon-tabler-moon{display:block}.privacy .content,.contributors .content,.blog .content,.error404 .content,.docs.list .content,.categories.list .content,.tags.list .content,.list.section .content{padding-top:1rem;padding-bottom:3rem}.content img{max-width:100%}h5,.h5,h4,.h4,h3,.h3,h2,.h2,h1,.h1{margin-top:2rem;margin-bottom:1rem}@media (min-width: 768px){body{font-size:1.125rem}h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{margin-bottom:1.125rem}}.home h1,.home .h1{font-size:calc(1.875rem + 1.5vw);margin-top:-1rem}a:hover,a:focus{text-decoration:underline}a.btn:hover,a.btn:focus{text-decoration:none}.section{padding-top:5rem;padding-bottom:5rem}body.section{padding-top:0;padding-bottom:0}.section-md{padding-top:3rem;padding-bottom:3rem}.docs-sidebar{order:2}@media (min-width: 992px){.docs-sidebar{order:0;border-right:1px solid #e9ecef}@supports (position: sticky){.docs-sidebar{position:sticky;top:4.25rem;z-index:1000;height:calc(100vh - 4.25rem)}}}@media (min-width: 1200px){.docs-sidebar{flex:0 1 320px}}.docs-links{padding-bottom:5rem}@media (min-width: 992px){@supports (position: sticky){.docs-links{max-height:calc(100vh - 4rem);overflow-y:scroll}}}@media (min-width: 992px){.docs-links{display:block;width:auto;margin-right:-1.5rem;padding-bottom:4rem}}.docs-toc{order:2}@supports (position: sticky){.docs-toc{position:sticky;top:4.25rem;height:calc(100vh - 4.25rem);overflow-y:auto}}.docs-content{padding-bottom:3rem;order:1}.navbar a:hover,.navbar a:focus{text-decoration:none}#TableOfContents ul,#toc ul{padding-left:0;list-style:none}#toc a.active{color:#5d2f86;font-weight:500}.section-features{padding-top:2rem}.bg-dots{background-image:radial-gradient(#dee2e6 15%, transparent 15%);background-position:0 0;background-size:1rem 1rem;-webkit-mask:linear-gradient(to top, #fff, transparent);mask:linear-gradient(to top, #fff, transparent);width:100%;height:11rem;margin-top:-10rem;z-index:-1}.modal-backdrop{background-color:#fff}.modal-backdrop.show{opacity:0.7}@media (min-width: 768px){.modal-backdrop.show{opacity:0}}li input[type="checkbox"]{margin:0.25rem;border:1px solid #ced4da}li input[type="checkbox"]:disabled{pointer-events:none;filter:none;opacity:1}li input[type="checkbox"]:checked{background-color:#5d2f86;border-color:#5d2f86}[data-bs-theme="dark"] li input[type="checkbox"]{border:1px solid #6c757d}[data-bs-theme="dark"] li input[type="checkbox"]:checked{background-color:#b3c7ff;border-color:#b3c7ff;--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231d2d35' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}.card-nav{-moz-column-gap:1rem;column-gap:1rem}.card-nav .card{margin:0.5rem 0}.card-nav .card:hover{border:1px solid #d9d9d9;background-color:var(--sl-color-gray-7)}[data-bs-theme="dark"] .card-nav .card{border:1px solid #353841}[data-bs-theme="dark"] .card-nav .card:hover{border:1px solid #888c96;background-color:var(--sl-color-gray-6)}.highlight>.chroma{border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}.bg{background-color:var(--sl-color-gray-7)}.chroma{background-color:var(--sl-color-gray-7)}.chroma .err{color:inherit}.chroma .lnlinks{outline:none;text-decoration:none;color:inherit}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}.chroma .hl{background-color:#0000001a}.chroma .hl{border-inline-start:0.15rem solid #00000055;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}.chroma .hl .ln{margin-left:-0.15rem}.chroma .lnt{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma .ln{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma .line{display:flex}.chroma .k{color:#000000;font-weight:bold}.chroma .kc{color:#000000;font-weight:bold}.chroma .kd{color:#000000;font-weight:bold}.chroma .kn{color:#000000;font-weight:bold}.chroma .kp{color:#000000;font-weight:bold}.chroma .kr{color:#000000;font-weight:bold}.chroma .kt{color:#445588;font-weight:bold}.chroma .na{color:#008080}.chroma .nb{color:#0086b3}.chroma .bp{color:#999999}.chroma .nc{color:#445588;font-weight:bold}.chroma .no{color:#008080}.chroma .nd{color:#3c5d5d;font-weight:bold}.chroma .ni{color:#800080}.chroma .ne{color:#990000;font-weight:bold}.chroma .nf{color:#990000;font-weight:bold}.chroma .nl{color:#990000;font-weight:bold}.chroma .nn{color:#555555}.chroma .nt{color:#000080}.chroma .nv{color:#008080}.chroma .vc{color:#008080}.chroma .vg{color:#008080}.chroma .vi{color:#008080}.chroma .s{color:#dd1144}.chroma .sa{color:#dd1144}.chroma .sb{color:#dd1144}.chroma .sc{color:#dd1144}.chroma .dl{color:#dd1144}.chroma .sd{color:#dd1144}.chroma .s2{color:#dd1144}.chroma .se{color:#dd1144}.chroma .sh{color:#dd1144}.chroma .si{color:#dd1144}.chroma .sx{color:#dd1144}.chroma .sr{color:#009926}.chroma .s1{color:#dd1144}.chroma .ss{color:#990073}.chroma .m{color:#009999}.chroma .mb{color:#009999}.chroma .mf{color:#009999}.chroma .mh{color:#009999}.chroma .mi{color:#009999}.chroma .il{color:#009999}.chroma .mo{color:#009999}.chroma .o{color:#000000;font-weight:bold}.chroma .ow{color:#000000;font-weight:bold}.chroma .c{color:#999988;font-style:italic}.chroma .ch{color:#999988;font-style:italic}.chroma .cm{color:#999988;font-style:italic}.chroma .c1{color:#999988;font-style:italic}.chroma .cs{color:#999999;font-weight:bold;font-style:italic}.chroma .cp{color:#999999;font-weight:bold;font-style:italic}.chroma .cpf{color:#999999;font-weight:bold;font-style:italic}.chroma .gd{color:#000000;background-color:#ffdddd}.chroma .ge{color:inherit;font-style:italic}.chroma .gr{color:#aa0000}.chroma .gh{color:#999999}.chroma .gi{color:#000000;background-color:#ddffdd}.chroma .go{color:#888888}.chroma .gp{color:#555555}.chroma .gs{font-weight:bold}.chroma .gu{color:#aaaaaa}.chroma .gt{color:#aa0000}.chroma .gl{text-decoration:underline}.chroma .w{color:#bbbbbb}[data-bs-theme="dark"] .highlight>.chroma{border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}[data-bs-theme="dark"] .bg{color:#c9d1d9;background-color:var(--sl-color-gray-6)}[data-bs-theme="dark"] .chroma{color:#c9d1d9;background-color:var(--sl-color-gray-6)}[data-bs-theme="dark"] .chroma .err{color:inherit}[data-bs-theme="dark"] .chroma .lnlinks{outline:none;text-decoration:none;color:inherit}[data-bs-theme="dark"] .chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}[data-bs-theme="dark"] .chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}[data-bs-theme="dark"] .chroma .hl{background-color:#ffffff17}[data-bs-theme="dark"] .chroma .hl{border-inline-start:0.15rem solid #ffffff40;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}[data-bs-theme="dark"] .chroma .hl .ln{margin-left:-0.15rem}[data-bs-theme="dark"] .chroma .lnt{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#64686c}[data-bs-theme="dark"] .chroma .ln{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681}[data-bs-theme="dark"] .chroma .line{display:flex}[data-bs-theme="dark"] .chroma .k{color:#ff7b72}[data-bs-theme="dark"] .chroma .kc{color:#79c0ff}[data-bs-theme="dark"] .chroma .kd{color:#ff7b72}[data-bs-theme="dark"] .chroma .kn{color:#ff7b72}[data-bs-theme="dark"] .chroma .kp{color:#79c0ff}[data-bs-theme="dark"] .chroma .kr{color:#ff7b72}[data-bs-theme="dark"] .chroma .kt{color:#ff7b72}[data-bs-theme="dark"] .chroma .na{color:#d2a8ff}[data-bs-theme="dark"] .chroma .nc{color:#f0883e;font-weight:bold}[data-bs-theme="dark"] .chroma .no{color:#79c0ff;font-weight:bold}[data-bs-theme="dark"] .chroma .nd{color:#d2a8ff;font-weight:bold}[data-bs-theme="dark"] .chroma .ni{color:#ffa657}[data-bs-theme="dark"] .chroma .ne{color:#f0883e;font-weight:bold}[data-bs-theme="dark"] .chroma .nf{color:#d2a8ff;font-weight:bold}[data-bs-theme="dark"] .chroma .nl{color:#79c0ff;font-weight:bold}[data-bs-theme="dark"] .chroma .nn{color:#ff7b72}[data-bs-theme="dark"] .chroma .py{color:#79c0ff}[data-bs-theme="dark"] .chroma .nt{color:#7ee787}[data-bs-theme="dark"] .chroma .nv{color:#79c0ff}[data-bs-theme="dark"] .chroma .l{color:#a5d6ff}[data-bs-theme="dark"] .chroma .ld{color:#79c0ff}[data-bs-theme="dark"] .chroma .s{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sa{color:#79c0ff}[data-bs-theme="dark"] .chroma .sb{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sc{color:#a5d6ff}[data-bs-theme="dark"] .chroma .dl{color:#79c0ff}[data-bs-theme="dark"] .chroma .sd{color:#a5d6ff}[data-bs-theme="dark"] .chroma .s2{color:#a5d6ff}[data-bs-theme="dark"] .chroma .se{color:#79c0ff}[data-bs-theme="dark"] .chroma .sh{color:#79c0ff}[data-bs-theme="dark"] .chroma .si{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sx{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sr{color:#79c0ff}[data-bs-theme="dark"] .chroma .s1{color:#a5d6ff}[data-bs-theme="dark"] .chroma .ss{color:#a5d6ff}[data-bs-theme="dark"] .chroma .m{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mb{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mf{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mh{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mi{color:#a5d6ff}[data-bs-theme="dark"] .chroma .il{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mo{color:#a5d6ff}[data-bs-theme="dark"] .chroma .o{color:inherit;font-weight:bold}[data-bs-theme="dark"] .chroma .ow{color:#ff7b72;font-weight:bold}[data-bs-theme="dark"] .chroma .c{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .ch{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .cm{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .c1{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .cs{color:#8b949e;font-weight:bold;font-style:italic}[data-bs-theme="dark"] .chroma .cp{color:#8b949e;font-weight:bold;font-style:italic}[data-bs-theme="dark"] .chroma .cpf{color:#8b949e;font-weight:bold;font-style:italic}[data-bs-theme="dark"] .chroma .gd{color:#ffa198;background-color:#490202}[data-bs-theme="dark"] .chroma .ge{font-style:italic}[data-bs-theme="dark"] .chroma .gr{color:#ffa198}[data-bs-theme="dark"] .chroma .gh{color:#79c0ff;font-weight:bold}[data-bs-theme="dark"] .chroma .gi{color:#56d364;background-color:#0f5323}[data-bs-theme="dark"] .chroma .go{color:#8b949e}[data-bs-theme="dark"] .chroma .gp{color:#8b949e}[data-bs-theme="dark"] .chroma .gs{font-weight:bold}[data-bs-theme="dark"] .chroma .gu{color:#79c0ff}[data-bs-theme="dark"] .chroma .gt{color:#ff7b72}[data-bs-theme="dark"] .chroma .gl{text-decoration:underline}[data-bs-theme="dark"] .chroma .w{color:#6e7681}[data-bs-theme="dark"] h1,[data-bs-theme="dark"] .h1,[data-bs-theme="dark"] h2,[data-bs-theme="dark"] .h2,[data-bs-theme="dark"] h3,[data-bs-theme="dark"] .h3,[data-bs-theme="dark"] h4,[data-bs-theme="dark"] .h4{color:#fff}[data-bs-theme="dark"] body{background:#17181c;color:#c1c3c8}[data-bs-theme="dark"] a{color:#b3c7ff}[data-bs-theme="dark"] .callout a{color:inherit}[data-bs-theme="dark"] .btn-primary{--bs-btn-color: #000;--bs-btn-bg: #b3c7ff;--bs-btn-border-color: #b3c7ff;--bs-btn-hover-color: #000;--bs-btn-hover-bg: #becfff;--bs-btn-hover-border-color: #bacdff;--bs-btn-focus-shadow-rgb: 152,169,217;--bs-btn-active-color: #000;--bs-btn-active-bg: #c2d2ff;--bs-btn-active-border-color: #bacdff;--bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);--bs-btn-disabled-color: #000;--bs-btn-disabled-bg: #b3c7ff;--bs-btn-disabled-border-color: #b3c7ff;color:#17181c}[data-bs-theme="dark"] .navbar{background-color:rgba(23,24,28,0.95);border-bottom:1px solid #23262f}[data-bs-theme="dark"] body.home .navbar{border-bottom:0}[data-bs-theme="dark"] .offcanvas-header{border-bottom:1px solid #343a40}[data-bs-theme="dark"] .offcanvas .nav-link{color:#c1c3c8}[data-bs-theme="dark"] .offcanvas .nav-link:hover,[data-bs-theme="dark"] .offcanvas .nav-link:focus{color:#b3c7ff}[data-bs-theme="dark"] .offcanvas .nav-link.active{color:#b3c7ff}[data-bs-theme="dark"] .page-links a{color:#c1c3c8}[data-bs-theme="dark"] .page-links a:hover{text-decoration:none;color:#b3c7ff}[data-bs-theme="dark"] .navbar .btn-link{color:#c1c3c8}[data-bs-theme="dark"] .content .btn-link{color:#b3c7ff}[data-bs-theme="dark"] .content .btn-link:hover{color:#b3c7ff}[data-bs-theme="dark"] .navbar .btn-link:hover{color:#b3c7ff}[data-bs-theme="dark"] .navbar .btn-link:active{color:#b3c7ff}@media (min-width: 992px){[data-bs-theme="dark"] .docs-sidebar{order:0;border-right:1px solid #23262f}}[data-bs-theme="dark"] blockquote{border-left:3px solid #23262f}[data-bs-theme="dark"] .footer{border-top:1px solid #23262f}[data-bs-theme="dark"] .docs-links,[data-bs-theme="dark"] .docs-toc{scrollbar-width:thin;scrollbar-color:#17181c #17181c}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar{width:5px}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar-track,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-track{background:#17181c}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar-thumb,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-thumb{background:#17181c}[data-bs-theme="dark"] .docs-links:hover,[data-bs-theme="dark"] .docs-toc:hover{scrollbar-width:thin;scrollbar-color:#23262f #17181c}[data-bs-theme="dark"] .docs-links:hover::-webkit-scrollbar-thumb,[data-bs-theme="dark"] .docs-toc:hover::-webkit-scrollbar-thumb{background:#23262f}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar-thumb:hover,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-thumb:hover{background:#23262f}[data-bs-theme="dark"] .docs-links h3:not(:first-child),[data-bs-theme="dark"] .docs-links .h3:not(:first-child){border-top:1px solid #23262f}[data-bs-theme="dark"] .page-links li:not(:first-child){border-top:1px dashed #23262f}[data-bs-theme="dark"] .card{background:#17181c;border:1px solid #23262f}[data-bs-theme="dark"] .bg-dots{background-image:radial-gradient(#414349 15%, transparent 15%)}[data-bs-theme="dark"] .text-muted{color:#adafb6 !important}[data-bs-theme="dark"] .offcanvas{background-color:#17181c}[data-bs-theme="dark"] .page-link{color:#b3c7ff;background-color:transparent;border:var(--bs-border-width) solid #23262f}[data-bs-theme="dark"] .page-link:hover{color:#17181c;background-color:#c1c3c8;border-color:#c1c3c8}[data-bs-theme="dark"] .page-link:focus{color:#17181c;background-color:#c1c3c8}[data-bs-theme="dark"] .page-item.active .page-link{color:#17181c;background-color:#b3c7ff;border-color:#b3c7ff}[data-bs-theme="dark"] .page-item.disabled .page-link{color:var(--bs-secondary-color);background-color:#23262f;border-color:#23262f}[data-bs-theme="dark"] details{border:1px solid #23262f}[data-bs-theme="dark"] summary:hover{background:#23262f}[data-bs-theme="dark"] details[open]>summary{border-bottom:1px solid #23262f}[data-bs-theme="dark"] details summary::after{content:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e")}[data-bs-theme="dark"] #toc a.active{color:#b3c7ff}.navbar .btn-link{color:rgba(var(--bs-emphasis-color-rgb), 0.65);padding:0.4375rem 0}.btn-link:focus{outline:0;box-shadow:none}@media (min-width: 992px){.navbar .btn-link{padding:0.5625em 0.25rem 0.5rem 0.125rem}}.navbar .btn-link:hover{color:rgba(var(--bs-emphasis-color-rgb), 0.8)}.navbar .btn-link:active{color:rgba(var(--bs-emphasis-color-rgb), 1)}.clipboard{position:relative;float:right}.btn-clipboard{transition:opacity 0.25s ease-in-out;opacity:0;position:absolute;right:0.5rem;top:0.5rem;line-height:1;padding:0.3125rem 0.3125rem 0.1875rem;background-color:transparent;border-color:transparent}@media (max-width: 767.98px){.btn-clipboard{position:absolute;right:-0.5rem;top:0.5rem}}.btn-clipboard::after{width:22px;height:22px;display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background-color:#495057}.btn-clipboard:hover{border-color:transparent}.btn-clipboard:hover::after{width:22px;height:22px;display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background-color:#212529}.btn-clipboard:focus,.btn-clipboard:active{border-color:transparent !important}.btn-clipboard:focus::after,.btn-clipboard:active::after{width:22px;height:22px;display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background-color:#212529}[data-bs-theme="dark"] .btn-clipboard{background-color:transparent;border-color:transparent}[data-bs-theme="dark"] .btn-clipboard::after{background-color:#ced4da}[data-bs-theme="dark"] .btn-clipboard:hover{border-color:transparent}[data-bs-theme="dark"] .btn-clipboard:hover::after{background-color:#e9ecef}[data-bs-theme="dark"] .btn-clipboard:focus,[data-bs-theme="dark"] .btn-clipboard:active{border-color:transparent}[data-bs-theme="dark"] .btn-clipboard:focus::after,[data-bs-theme="dark"] .btn-clipboard:active::after{background-color:#e9ecef}.highlight{position:relative}@media (min-width: 768px){.highlight:hover .btn-clipboard{opacity:1}}#toTop{opacity:0;transition:opacity 0.3s ease-in-out}.callout{--bs-link-color-rgb: var(--callout-link);--bs-code-color: var(--callout-code-color);color:var(--callout-color, inherit);background-color:var(--callout-bg, var(--bs-gray-100));border-left:0.25rem solid var(--callout-border, var(--bs-gray-300));border-radius:0}.callout a{text-decoration:underline}.callout .highlight{background-color:rgba(0,0,0,0.05)}.callout-content{min-width:0}.callout.callout-note{border-color:var(--sl-color-blue);background-color:var(--sl-color-blue-high)}.callout.callout-note .callout-body a{color:var(--sl-color-blue-low)}.callout.callout-note .callout-body,.callout.callout-note .callout-body a:hover,.callout.callout-note .callout-body a:active{color:var(--sl-color-white)}.callout.callout-tip{border-color:var(--sl-color-purple);background-color:var(--sl-color-purple-high)}.callout.callout-tip .callout-body a{color:var(--sl-color-purple-low)}.callout.callout-tip .callout-body,.callout.callout-tip .callout-body a:hover,.callout.callout-tip .callout-body a:active{color:var(--sl-color-white)}[data-bs-theme="dark"] .callout{color:var(--sl-color-gray-1)}[data-bs-theme="dark"] .callout.callout-note{border-color:var(--sl-color-blue);background-color:var(--sl-color-blue-low)}[data-bs-theme="dark"] .callout.callout-note .callout-body a{color:var(--sl-color-blue-high)}[data-bs-theme="dark"] .callout.callout-note .callout-body,[data-bs-theme="dark"] .callout.callout-note .callout-body a:hover,[data-bs-theme="dark"] .callout.callout-note .callout-body a:active{color:var(--sl-color-white)}[data-bs-theme="dark"] .callout.callout-note code:not(:where(.not-content *)){color:var(--ec-codeFg)}[data-bs-theme="dark"] .callout.callout-tip{border-color:var(--sl-color-purple);background-color:var(--sl-color-purple-low)}[data-bs-theme="dark"] .callout.callout-tip .callout-body a{color:var(--sl-color-purple-high)}[data-bs-theme="dark"] .callout.callout-tip .callout-body,[data-bs-theme="dark"] .callout.callout-tip .callout-body a:hover,[data-bs-theme="dark"] .callout.callout-tip .callout-body a:active{color:var(--sl-color-white)}[data-bs-theme="dark"] .callout.callout-tip code:not(:where(.not-content *)){color:var(--ec-codeFg)}.expressive-code{font-family:var(--ec-uiFontFml);font-size:var(--ec-uiFontSize);line-height:var(--ec-uiLineHt);-moz-text-size-adjust:none;text-size-adjust:none;-webkit-text-size-adjust:none;margin:1.5rem 0}.expressive-code *:not(path){all:revert;box-sizing:border-box}.expressive-code pre{display:flex;margin:0;padding:0;border:var(--ec-brdWd) solid var(--ec-brdCol);border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));background:var(--ec-codeBg)}.expressive-code pre:focus-visible{outline:3px solid var(--ec-focusBrd);outline-offset:-3px}.expressive-code pre>code{all:unset;display:block;flex:1 0 100%;padding:var(--ec-codePadBlk) 0;color:var(--ec-codeFg);font-family:var(--ec-codeFontFml);font-size:var(--ec-codeFontSize);line-height:var(--ec-codeLineHt)}.expressive-code pre{overflow-x:auto}.expressive-code pre::-webkit-scrollbar,.expressive-code pre::-webkit-scrollbar-track{background-color:inherit;border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));border-top-left-radius:0;border-top-right-radius:0}.expressive-code pre::-webkit-scrollbar-thumb{background-color:var(--ec-sbThumbCol);border:4px solid transparent;background-clip:content-box;border-radius:10px}.expressive-code pre::-webkit-scrollbar-thumb:hover{background-color:var(--ec-sbThumbHoverCol)}.expressive-code .ec-line{padding-inline:var(--ec-codePadInl);padding-inline-end:calc(2rem + var(--ec-codePadInl));direction:ltr;unicode-bidi:isolate}.expressive-code .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.expressive-code .ec-line.mark{--tmLineBgCol: var(--ec-tm-markBg);--tmLineBrdCol: var(--ec-tm-markBrdCol)}.expressive-code .ec-line.ins{--tmLineBgCol: var(--ec-tm-insBg);--tmLineBrdCol: var(--ec-tm-insBrdCol)}.expressive-code .ec-line.ins::before{content:var(--ec-tm-insDiffIndContent);color:var(--ec-tm-insDiffIndCol)}.expressive-code .ec-line.del{--tmLineBgCol: var(--ec-tm-delBg);--tmLineBrdCol: var(--ec-tm-delBrdCol)}.expressive-code .ec-line.del::before{content:var(--ec-tm-delDiffIndContent);color:var(--ec-tm-delDiffIndCol)}.expressive-code .ec-line.mark,.expressive-code .ec-line.ins,.expressive-code .ec-line.del{position:relative;background:var(--tmLineBgCol);min-width:calc(100% - var(--ec-tm-lineMarkerAccentMarg));margin-inline-start:var(--ec-tm-lineMarkerAccentMarg);border-inline-start:var(--ec-tm-lineMarkerAccentWd) solid var(--tmLineBrdCol);padding-inline-start:calc(var(--ec-codePadInl) - var(--ec-tm-lineMarkerAccentMarg) - var(--ec-tm-lineMarkerAccentWd)) !important}.expressive-code .ec-line.mark::before,.expressive-code .ec-line.ins::before,.expressive-code .ec-line.del::before{position:absolute;left:var(--ec-tm-lineDiffIndMargLeft)}.expressive-code .ec-line mark,.expressive-code .ec-line .mark{--tmInlineBgCol: var(--ec-tm-markBg);--tmInlineBrdCol: var(--ec-tm-markBrdCol)}.expressive-code .ec-line ins{--tmInlineBgCol: var(--ec-tm-insBg);--tmInlineBrdCol: var(--ec-tm-insBrdCol)}.expressive-code .ec-line del{--tmInlineBgCol: var(--ec-tm-delBg);--tmInlineBrdCol: var(--ec-tm-delBrdCol)}.expressive-code .ec-line mark,.expressive-code .ec-line .mark,.expressive-code .ec-line ins,.expressive-code .ec-line del{all:unset;display:inline-block;position:relative;--tmBrdL: var(--ec-tm-inlMarkerBrdWd);--tmBrdR: var(--ec-tm-inlMarkerBrdWd);--tmRadL: var(--ec-tm-inlMarkerBrdRad);--tmRadR: var(--ec-tm-inlMarkerBrdRad);margin-inline:0.025rem;padding-inline:var(--ec-tm-inlMarkerPad);border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);background:var(--tmInlineBgCol);background-clip:padding-box}.expressive-code .ec-line mark.open-start,.expressive-code .ec-line .open-start.mark,.expressive-code .ec-line ins.open-start,.expressive-code .ec-line del.open-start{margin-inline-start:0;padding-inline-start:0;--tmBrdL: 0px;--tmRadL: 0}.expressive-code .ec-line mark.open-end,.expressive-code .ec-line .open-end.mark,.expressive-code .ec-line ins.open-end,.expressive-code .ec-line del.open-end{margin-inline-end:0;padding-inline-end:0;--tmBrdR: 0px;--tmRadR: 0}.expressive-code .ec-line mark::before,.expressive-code .ec-line .mark::before,.expressive-code .ec-line ins::before,.expressive-code .ec-line del::before{content:"";position:absolute;pointer-events:none;display:inline-block;inset:0;border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);border:var(--ec-tm-inlMarkerBrdWd) solid var(--tmInlineBrdCol);border-inline-width:var(--tmBrdL) var(--tmBrdR)}.expressive-code .frame{all:unset;position:relative;display:block;--header-border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd));--tab-border-radius: calc(var(--ec-frm-edTabBrdRad) + var(--ec-brdWd));--button-spacing: 0.4rem;--code-background: var(--ec-frm-edBg);border-radius:var(--header-border-radius);box-shadow:var(--ec-frm-frameBoxShdCssVal)}.expressive-code .frame .header{display:none;z-index:1;position:relative;border-radius:var(--header-border-radius) var(--header-border-radius) 0 0}.expressive-code .frame.has-title pre,.expressive-code .frame.has-title code,.expressive-code .frame.is-terminal pre,.expressive-code .frame.is-terminal code{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.expressive-code .frame .title:empty:before{content:"\a0"}.expressive-code .frame.has-title:not(.is-terminal){--button-spacing: calc(1.9rem + 2 * (var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)))}.expressive-code .frame.has-title:not(.is-terminal) .title{position:relative;color:var(--ec-frm-edActTabFg);background:var(--ec-frm-edActTabBg);background-clip:padding-box;margin-block-start:var(--ec-frm-edTabsMargBlkStart);padding:calc(var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)) var(--ec-uiPadInl);border:var(--ec-brdWd) solid var(--ec-frm-edActTabBrdCol);border-radius:var(--tab-border-radius) var(--tab-border-radius) 0 0;border-bottom:none;overflow:hidden}.expressive-code .frame.has-title:not(.is-terminal) .title::after{content:"";position:absolute;pointer-events:none;inset:0;border-top:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndTopCol);border-bottom:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndBtmCol)}.expressive-code .frame.has-title:not(.is-terminal) .header{display:flex;background:linear-gradient(to top, var(--ec-frm-edTabBarBrdBtmCol) var(--ec-brdWd), transparent var(--ec-brdWd)),linear-gradient(var(--ec-frm-edTabBarBg), var(--ec-frm-edTabBarBg));background-repeat:no-repeat;padding-inline-start:var(--ec-frm-edTabsMargInlStart)}.expressive-code .frame.has-title:not(.is-terminal) .header::before{content:"";position:absolute;pointer-events:none;inset:0;border:var(--ec-brdWd) solid var(--ec-frm-edTabBarBrdCol);border-radius:inherit;border-bottom:none}.expressive-code .frame.is-terminal{--button-spacing: calc(1.9rem + var(--ec-brdWd) + 2 * var(--ec-uiPadBlk));--code-background: var(--ec-frm-trmBg)}.expressive-code .frame.is-terminal .header{display:flex;align-items:center;justify-content:center;padding-block:var(--ec-uiPadBlk);padding-block-end:calc(var(--ec-uiPadBlk) + var(--ec-brdWd));position:relative;font-weight:500;letter-spacing:0.025ch;color:var(--ec-frm-trmTtbFg);background:var(--ec-frm-trmTtbBg);border:var(--ec-brdWd) solid var(--ec-brdCol);border-bottom:none}.expressive-code .frame.is-terminal .header::before{content:"";position:absolute;pointer-events:none;left:var(--ec-uiPadInl);width:2.1rem;height:0.56rem;line-height:0;background-color:var(--ec-frm-trmTtbDotsFg);opacity:var(--ec-frm-trmTtbDotsOpa);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");mask-repeat:no-repeat}.expressive-code .frame.is-terminal .header::after{content:"";position:absolute;pointer-events:none;inset:0;border-bottom:var(--ec-brdWd) solid var(--ec-frm-trmTtbBrdBtmCol)}.expressive-code .frame pre{background:var(--code-background)}.expressive-code .copy{display:flex;gap:0.25rem;flex-direction:row;position:absolute;inset-block-start:calc(var(--ec-brdWd) + var(--button-spacing));inset-inline-end:calc(var(--ec-brdWd) + var(--ec-uiPadInl) / 2);direction:ltr;unicode-bidi:isolate}.expressive-code .copy button{position:relative;align-self:flex-end;margin:0;padding:0;border:none;border-radius:0.2rem;z-index:1;cursor:pointer;transition-property:opacity, background, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);width:2.5rem;height:2.5rem;background:var(--code-background);opacity:0.75}.expressive-code .copy button div{position:absolute;inset:0;border-radius:inherit;background:var(--ec-frm-inlBtnBg);opacity:var(--ec-frm-inlBtnBgIdleOpa);transition-property:inherit;transition-duration:inherit;transition-timing-function:inherit}.expressive-code .copy button::before{content:"";position:absolute;pointer-events:none;inset:0;border-radius:inherit;border:var(--ec-brdWd) solid var(--ec-frm-inlBtnBrd);opacity:var(--ec-frm-inlBtnBrdOpa)}.expressive-code .copy button::after{content:"";position:absolute;pointer-events:none;inset:0;background-color:var(--ec-frm-inlBtnFg);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");mask-repeat:no-repeat;margin:0.475rem;line-height:0}.expressive-code .copy button:focus::after,.expressive-code .copy button:active::after{display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;margin:0.2375rem}.expressive-code .copy button:hover,.expressive-code .copy button:focus:focus-visible{opacity:1}.expressive-code .copy button:hover div,.expressive-code .copy button:focus:focus-visible div{opacity:var(--ec-frm-inlBtnBgHoverOrFocusOpa)}.expressive-code .copy button:active{opacity:1}.expressive-code .copy button:active div{opacity:var(--ec-frm-inlBtnBgActOpa)}.expressive-code .copy .feedback{--tooltip-arrow-size: 0.35rem;--tooltip-bg: var(--ec-frm-tooltipSuccessBg);color:var(--ec-frm-tooltipSuccessFg);pointer-events:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;position:relative;align-self:center;background-color:var(--tooltip-bg);z-index:99;padding:0.125rem 0.75rem;border-radius:0.2rem;margin-inline-end:var(--tooltip-arrow-size);opacity:0;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:ease-in-out;transform:translate3d(0, 0.25rem, 0)}.expressive-code .copy .feedback::after{content:"";position:absolute;pointer-events:none;top:calc(50% - var(--tooltip-arrow-size));inset-inline-end:calc(-2 * (var(--tooltip-arrow-size) - 0.5px));border:var(--tooltip-arrow-size) solid transparent;border-inline-start-color:var(--tooltip-bg)}.expressive-code .copy .feedback.show{opacity:1;transform:translate3d(0, 0, 0)}@media (hover: hover){.expressive-code .copy button{opacity:0;width:2rem;height:2rem}.expressive-code .frame:hover .copy button:not(:hover),.expressive-code .frame:focus-within :focus-visible~.copy button:not(:hover),.expressive-code .frame .copy .feedback.show~button:not(:hover){opacity:0.75}}:root{--ec-brdRad: 0px;--ec-brdWd: 1px;--ec-brdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-codeFontFml: var(--__sl-font-mono);--ec-codeFontSize: var(--sl-text-code);--ec-codeFontWg: 400;--ec-codeLineHt: var(--sl-line-height);--ec-codePadBlk: 0;--ec-codePadInl: 1rem;--ec-codeBg: #011627;--ec-codeFg: #d6deeb;--ec-codeSelBg: #1d3b53;--ec-uiFontFml: var(--__sl-font);--ec-uiFontSize: 0.9rem;--ec-uiFontWg: 400;--ec-uiLineHt: 1.65;--ec-uiPadBlk: 0.25rem;--ec-uiPadInl: 1rem;--ec-uiSelBg: #234d708c;--ec-uiSelFg: #ffffff;--ec-focusBrd: #122d42;--ec-sbThumbCol: #ffffff17;--ec-sbThumbHoverCol: #ffffff49;--ec-tm-lineMarkerAccentMarg: 0rem;--ec-tm-lineMarkerAccentWd: 0.15rem;--ec-tm-lineDiffIndMargLeft: 0.25rem;--ec-tm-inlMarkerBrdWd: 1.5px;--ec-tm-inlMarkerBrdRad: 0.2rem;--ec-tm-inlMarkerPad: 0.15rem;--ec-tm-insDiffIndContent: "+";--ec-tm-delDiffIndContent: "-";--ec-tm-markBg: #ffffff17;--ec-tm-markBrdCol: #ffffff40;--ec-tm-insBg: #1e571599;--ec-tm-insBrdCol: #487f3bd0;--ec-tm-insDiffIndCol: #79b169d0;--ec-tm-delBg: #862d2799;--ec-tm-delBrdCol: #b4554bd0;--ec-tm-delDiffIndCol: #ed8779d0;--ec-frm-shdCol: #011627;--ec-frm-frameBoxShdCssVal: none;--ec-frm-edActTabBg: var(--sl-color-gray-6);--ec-frm-edActTabFg: var(--sl-color-text);--ec-frm-edActTabBrdCol: transparent;--ec-frm-edActTabIndHt: 1px;--ec-frm-edActTabIndTopCol: var(--sl-color-accent-high);--ec-frm-edActTabIndBtmCol: transparent;--ec-frm-edTabsMargInlStart: 0;--ec-frm-edTabsMargBlkStart: 0;--ec-frm-edTabBrdRad: 0px;--ec-frm-edTabBarBg: var(--sl-color-black);--ec-frm-edTabBarBrdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edTabBarBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edBg: var(--sl-color-gray-6);--ec-frm-trmTtbDotsFg: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmTtbDotsOpa: 0.75;--ec-frm-trmTtbBg: var(--sl-color-black);--ec-frm-trmTtbFg: var(--sl-color-text);--ec-frm-trmTtbBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmBg: var(--sl-color-gray-6);--ec-frm-inlBtnFg: var(--sl-color-text);--ec-frm-inlBtnBg: var(--sl-color-text);--ec-frm-inlBtnBgIdleOpa: 0;--ec-frm-inlBtnBgHoverOrFocusOpa: 0.2;--ec-frm-inlBtnBgActOpa: 0.3;--ec-frm-inlBtnBrd: var(--sl-color-text);--ec-frm-inlBtnBrdOpa: 0.4;--ec-frm-tooltipSuccessBg: #158744;--ec-frm-tooltipSuccessFg: white}.expressive-code .ec-line span[style^="--"]:not([class]){color:var(0, inherit);font-style:var(0fs, inherit);font-weight:var(0fw, inherit);-webkit-text-decoration:var(0td, inherit);text-decoration:var(0td, inherit)}@media (prefers-color-scheme: light){:root:not([data-bs-theme="dark"]){--ec-codeBg: #fbfbfb;--ec-codeFg: #403f53;--ec-codeSelBg: #e0e0e0;--ec-uiSelBg: #d3e8f8;--ec-uiSelFg: #403f53;--ec-focusBrd: #93a1a1;--ec-sbThumbCol: #0000001a;--ec-sbThumbHoverCol: #0000005c;--ec-tm-markBg: #0000001a;--ec-tm-markBrdCol: #00000055;--ec-tm-insBg: #8ec77d99;--ec-tm-insDiffIndCol: #336a28d0;--ec-tm-delBg: #ff9c8e99;--ec-tm-delDiffIndCol: #9d4138d0;--ec-frm-shdCol: #d9d9d9;--ec-frm-edActTabBg: var(--sl-color-gray-7);--ec-frm-edActTabIndTopCol: #5d2f86;--ec-frm-edTabBarBg: var(--sl-color-gray-6);--ec-frm-edBg: var(--sl-color-gray-7);--ec-frm-trmTtbBg: var(--sl-color-gray-6);--ec-frm-trmBg: var(--sl-color-gray-7);--ec-frm-tooltipSuccessBg: #078662}:root:not([data-bs-theme="dark"]) .expressive-code .ec-line span[style^="--"]:not([class]){color:var(1, inherit);font-style:var(1fs, inherit);font-weight:var(1fw, inherit);-webkit-text-decoration:var(1td, inherit);text-decoration:var(1td, inherit)}}:root[data-bs-theme="light"] .expressive-code,.expressive-code[data-bs-theme="light"]{--ec-codeBg: #fbfbfb;--ec-codeFg: #403f53;--ec-codeSelBg: #e0e0e0;--ec-uiSelBg: #d3e8f8;--ec-uiSelFg: #403f53;--ec-focusBrd: #93a1a1;--ec-sbThumbCol: #0000001a;--ec-sbThumbHoverCol: #0000005c;--ec-tm-markBg: #0000001a;--ec-tm-markBrdCol: #00000055;--ec-tm-insBg: #8ec77d99;--ec-tm-insDiffIndCol: #336a28d0;--ec-tm-delBg: #ff9c8e99;--ec-tm-delDiffIndCol: #9d4138d0;--ec-frm-shdCol: #d9d9d9;--ec-frm-edActTabBg: var(--sl-color-gray-7);--ec-frm-edActTabIndTopCol: #5d2f86;--ec-frm-edTabBarBg: var(--sl-color-gray-6);--ec-frm-edBg: var(--sl-color-gray-7);--ec-frm-trmTtbBg: var(--sl-color-gray-6);--ec-frm-trmBg: var(--sl-color-gray-7);--ec-frm-tooltipSuccessBg: #078662}:root[data-bs-theme="light"] .expressive-code .ec-line span[style^="--"]:not([class]),.expressive-code[data-bs-theme="light"] .ec-line span[style^="--"]:not([class]){color:var(1, inherit);font-style:var(1fs, inherit);font-weight:var(1fw, inherit);-webkit-text-decoration:var(1td, inherit);text-decoration:var(1td, inherit)}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.875rem}code:not(:where(.not-content *)){background-color:var(--sl-color-gray-6);margin-block:-0.125rem;padding:0.125rem 0.375rem;color:inherit}[data-bs-theme="dark"] code:not(:where(.not-content *)){background-color:var(--sl-color-gray-5)}.math-block{display:block;margin:2rem 0;overflow-x:auto}.math-inline{display:inline}[data-bs-theme="dark"] .math-inline img,[data-bs-theme="dark"] .math-block img{filter:invert(1)}img.diagram{height:auto;width:100%;margin:1rem 0 2rem}img.diagram-kroki-mermaid{background:#fff}.highlight>pre{padding:0.875rem 1rem}.highlight div{padding:0}.highlight>.chroma{overflow-x:auto;border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}.chroma .ln{padding:0 0.5rem 0 0}.chroma .hl{border-inline-start:0.15rem solid #0005;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}.chroma .hl .ln{margin-left:-0.15rem}.highlight .chroma .lntable .lnt,.highlight .chroma .lntable .hl{display:flex}.chroma .lntd:first-child{padding:0}.chroma .lntd:first-child .lnt{padding-left:1rem}.chroma .lntd:nth-child(2){padding:0}.highlight .chroma .lntable .lntd+.lntd{width:100%}[data-bs-theme="dark"] .chroma .ln{padding:0 0.5em 0 0}.chroma .lntd pre{padding:1rem 0;margin-bottom:0}.highlight>.chroma::-webkit-scrollbar,.highlight>.chroma::-webkit-scrollbar-track{background-color:inherit;border-radius:1px;border-top-left-radius:0;border-top-right-radius:0}.highlight>.chroma::-webkit-scrollbar-thumb{background-color:#dddee0;border:4px solid transparent;background-clip:content-box;border-radius:10px}.highlight>.chroma::-webkit-scrollbar-thumb:hover{background-color:#9d9e9f}[data-bs-theme="dark"] .highlight>.chroma::-webkit-scrollbar-thumb{background-color:#ffffff17}[data-bs-theme="dark"] .highlight>.chroma::-webkit-scrollbar-thumb:hover{background-color:#ffffff49}[data-bs-theme="dark"] .highlight>.chroma{border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}[data-bs-theme="dark"] .chroma .hl{border-inline-start:0.15rem solid #ffffff40;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}[data-bs-theme="dark"] .chroma .hl .ln{margin-left:-0.15rem}blockquote{margin-bottom:1rem;font-size:1.25rem;border-left:3px solid #dee2e6;padding-left:1rem}details{display:block;position:relative;border:1px solid #e9ecef;border-radius:0.25rem;padding:0.5rem 1rem 0;margin:0.5rem 0}summary{list-style:none;display:inline-block;width:calc(100% + 2rem);margin:-0.5rem -1rem 0;padding:0.5rem 1rem}summary::-webkit-details-marker{display:none}summary:hover{background:#f8f9fa}details summary::after{display:inline-block;content:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");transition:transform 0.35s ease;transform-origin:center center;position:absolute;right:1rem}details[open]>summary::after{transform:rotate(90deg)}details[open]{padding:0.5rem 1rem}details[open]>summary{border-bottom:1px solid #dee2e6;margin-bottom:0.5rem}details h2,details .h2,details h3,details .h3,details h4,details .h4{margin:1rem 0 0.5rem}details p:last-child{margin-bottom:0}details ul,details ol{margin-bottom:0}details pre{margin:0 0 1rem}img{max-width:100%;height:auto}img[data-sizes="auto"]{display:block}img{font-size:0}figcaption{font-size:1rem;margin-top:0.5rem;font-style:italic}.blur-up{filter:blur(5px);transition:filter 400ms}.blur-up.lazyloaded{filter:unset}.section-nav{padding-top:2rem}.section-nav details{border:0;padding:0;margin:0.5rem 0}.section-nav details[open]{padding:0}.section-nav summary{width:100%;padding:0;margin:0;font-weight:700}.section-nav summary:hover{background:none}.section-nav details[open]>summary{border-bottom:0;margin-bottom:0}.section-nav ul.list-nested details{padding-left:1rem;margin-top:0.5rem}.section-nav ul.list-nested li{margin:0}.section-nav a{display:block;margin:0.5rem 0;color:#1d2d35;font-size:1rem;text-decoration:none}.section-nav a:hover,.section-nav a:active{color:#5d2f86}.section-nav li.active a{color:#5d2f86;font-weight:500}.section-nav ul.list-nested li a{padding-left:1rem}.section-nav ul.list-nested{border-left:1px solid #e9ecef}[data-bs-theme="dark"] .section-nav ul.list-nested{border-left:1px solid #23262f}[data-bs-theme="dark"] .section-nav a{color:#c1c3c8}[data-bs-theme="dark"] .section-nav a:hover,[data-bs-theme="dark"] .section-nav a:active{color:var(--sl-color-text-accent)}[data-bs-theme="dark"] .section-nav li.active a{color:var(--sl-color-text-accent);font-weight:500}[data-bs-theme="dark"] .section-nav summary{color:#fff}.footer{border-top:1px solid #e9ecef;padding-top:1.125rem;padding-bottom:1.125rem}.footer ul{margin-bottom:0}.footer li{font-size:.875rem;margin-bottom:0}.footer .list-inline-item:not(:last-child){margin-right:1rem}@media (max-width: 991.98px){.footer .col-lg-8{margin-top:0.25rem;margin-bottom:0.25rem}}@media (min-width: 768px){.footer li{font-size:1rem}}.fixed-bottom-right{position:fixed;right:0;bottom:0;z-index:1000}.navbar-brand{font-weight:700}.navbar-brand svg{margin-right:0.25rem}[data-bs-theme="dark"] .navbar-brand{color:inherit}.navbar{z-index:1000;background-color:rgba(255,255,255,0.95);border-bottom:1px solid #e9ecef}@media (min-width: 992px){.navbar{z-index:1025}}@media (min-width: 768px){.navbar-brand{font-size:1.375rem}}.nav-item{margin-left:0}@media (max-width: 991.98px){.navbar-nav .nav-link{font-weight:400}}@media (min-width: 768px){.nav-item{margin-left:0.5rem}}@media (max-width: 575.98px){.navbar .offcanvas.offcanvas-start,.navbar .offcanvas.offcanvas-end{width:80vw}}.offcanvas-header{border-bottom:1px solid #dee2e6;padding-top:1.0625rem;padding-bottom:0.8125rem}h5.offcanvas-title,.offcanvas-title.h5{margin:0;color:inherit}.offcanvas .nav-link{color:#1d2d35}.offcanvas .nav-link:hover,.offcanvas .nav-link:focus{color:#5d2f86}.offcanvas .nav-link.active{color:#5d2f86}.home .navbar{border-bottom:0}@media (min-width: 992px){.navbar-brand{margin-right:0.75rem !important}}.social-link{padding-right:0.375rem;padding-left:0.375rem}@media (max-width: 991.98px){#buttonColorMode{margin:0.5rem 0}#socialMenu{margin:0.5rem 0 0.5rem -0.25rem}.navbar-nav{margin-top:1rem}.nav-item .nav-link{font-weight:400;font-size:1.125rem}}.modal-backdrop,.offcanvas-backdrop{visibility:hidden;background:rgba(23,24,28,0.5);opacity:0}[data-bs-theme="dark"] .modal-backdrop,[data-bs-theme="dark"] .offcanvas-backdrop{visibility:hidden;background:rgba(23,24,28,0.5);opacity:0}.modal-backdrop.show,.offcanvas-backdrop.show{visibility:visible;opacity:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.showing,.hiding{transition:none;display:none}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg{padding-right:0.75rem}.docs-content>h2[id]::before,.docs-content>[id].h2::before,.docs-content>h3[id]::before,.docs-content>[id].h3::before,.docs-content>h4[id]::before,.docs-content>[id].h4::before{display:block;height:6rem;margin-top:-6rem;content:""}.docs-content ul,.docs-content ol{margin-bottom:1rem}.anchor{visibility:hidden;margin-left:0.375rem}h1:hover a,.h1:hover a,h2:hover a,.h2:hover a,h3:hover a,.h3:hover a,h4:hover a,.h4:hover a{visibility:visible;text-decoration:none}.card-list{margin-top:2.25rem}.page-footer-meta{margin-top:2rem;margin-bottom:2rem}p.meta{margin-top:0.5rem;font-size:1rem}.breadcrumb{margin-top:2.25rem;font-size:1rem}.toc-mobile{margin-top:2rem;margin-bottom:2rem}.page-link:hover{text-decoration:none}ul li{margin:0.25rem 0}.page-nav .card .icon-tabler-arrow-left{margin-right:0.75rem}.page-nav .card .icon-tabler-arrow-right{margin-left:0.75rem}.page-nav .card:hover{border:1px solid #d9d9d9}[data-bs-theme="dark"] .page-nav .card{border:1px solid #353841}[data-bs-theme="dark"] .page-nav .card:hover{border:1px solid #888c96}.home .card,.contributors.list .card,.blog.list .card,.blog.single .card,.categories.list .card,.tags.list .card{margin-top:2rem;margin-bottom:2rem;transition:transform 0.3s}.home .content .card:hover,.contributors.list .content .card:hover,.blog.list .content .card:hover,.blog.single .content .card:hover,.categories.list .content .card:hover,.tags.list .content .card:hover{transform:scale(1.025)}.home .content .card-body,.contributors.list .content .card-body,.blog.list .content .card-body,.blog.single .content .card-body,.categories.list .content .card-body,.tags.list .content .card-body{padding:0 2rem 1rem}.blog-header{text-align:center;margin-bottom:2rem}.page-item:first-child,.page-item:last-child,.page-item.disabled{display:none}.page-item a{margin-left:0.5rem;margin-right:0.5rem;padding-left:0.875rem;padding-right:0.875rem}span.reading-time{margin-left:2rem}span.reading-time svg{margin-right:0.3rem;vertical-align:-0.4rem}.docs-links,.docs-toc{scrollbar-width:thin;scrollbar-color:#fff #fff}.docs-links::-webkit-scrollbar,.docs-toc::-webkit-scrollbar{width:5px}.docs-links::-webkit-scrollbar-track,.docs-toc::-webkit-scrollbar-track{background:#fff}.docs-links::-webkit-scrollbar-thumb,.docs-toc::-webkit-scrollbar-thumb{background:#fff}.docs-links:hover,.docs-toc:hover{scrollbar-width:thin;scrollbar-color:#e9ecef #fff}.docs-links:hover::-webkit-scrollbar-thumb,.docs-toc:hover::-webkit-scrollbar-thumb{background:#e9ecef}.docs-links::-webkit-scrollbar-thumb:hover,.docs-toc::-webkit-scrollbar-thumb:hover{background:#e9ecef}.docs-links h3,.docs-links .h3,.page-links h3,.page-links .h3{font-size:1.125rem;margin:1.25rem 0 0.5rem;padding:1.5rem 0 0}@media (min-width: 992px){.docs-links h3,.docs-links .h3,.page-links h3,.page-links .h3{margin:1.125rem 1.5rem 0.75rem 0;padding:1.375rem 0 0}}.docs-links h3:not(:first-child),.docs-links .h3:not(:first-child){border-top:1px solid #e9ecef}.page-links li{margin-top:0.375rem;padding-top:0.375rem}.page-links li ul li{border-top:none;padding-left:1rem;margin-top:0.125rem;padding-top:0.125rem}.page-links li:not(:first-child){border-top:1px dashed #e9ecef}.page-links a{color:#1d2d35;display:block;padding:0.125rem 0;font-size:.9375rem;text-decoration:none}.page-links a:hover,.page-links a.active{text-decoration:none;color:#5d2f86}.nav-link.active{font-weight:500} +:root[data-bs-theme="light"],[data-bs-theme="light"] ::backdrop{--sl-color-white: hsl(224, 10%, 10%);--sl-color-gray-1: hsl(224, 14%, 16%);--sl-color-gray-2: hsl(224, 10%, 23%);--sl-color-gray-3: hsl(224, 7%, 36%);--sl-color-gray-4: hsl(224, 6%, 56%);--sl-color-gray-5: hsl(224, 6%, 77%);--sl-color-gray-6: hsl(224, 20%, 94%);--sl-color-gray-7: hsl(224, 19%, 97%);--sl-color-black: hsl(0, 0%, 100%)}:root,::backdrop{--sl-color-white: hsl(0, 0%, 100%);--sl-color-gray-1: hsl(224, 20%, 94%);--sl-color-gray-2: hsl(224, 6%, 77%);--sl-color-gray-3: hsl(224, 6%, 56%);--sl-color-gray-4: hsl(224, 7%, 36%);--sl-color-gray-5: hsl(224, 10%, 23%);--sl-color-gray-6: hsl(224, 14%, 16%);--sl-color-black: hsl(224, 10%, 10%);--sl-hue-orange: 41;--sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%);--sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%);--sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%);--sl-hue-green: 101;--sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%);--sl-color-green: hsl(var(--sl-hue-green), 82%, 63%);--sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%);--sl-hue-blue: 234;--sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%);--sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%);--sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%);--sl-hue-purple: 281;--sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%);--sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%);--sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%);--sl-hue-red: 339;--sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%);--sl-color-red: hsl(var(--sl-hue-red), 82%, 63%);--sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%);--sl-color-accent-low: hsl(224, 54%, 20%);--sl-color-accent: hsl(224, 100%, 60%);--sl-color-accent-high: hsl(224, 100%, 85%);--sl-color-text: var(--sl-color-gray-2);--sl-color-text-accent: var(--sl-color-accent-high);--sl-color-text-invert: var(--sl-color-accent-low);--sl-color-bg: var(--sl-color-black);--sl-color-bg-nav: var(--sl-color-gray-6);--sl-color-bg-sidebar: var(--sl-color-gray-6);--sl-color-bg-inline-code: var(--sl-color-gray-5);--sl-color-hairline-light: var(--sl-color-gray-5);--sl-color-hairline: var(--sl-color-gray-6);--sl-color-hairline-shade: var(--sl-color-black);--sl-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66);--sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), 0px 2px 1px hsla(0, 0%, 0%, 0.24);--sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08), 0px 5px 2px hsla(0, 0%, 0%, 0.08), 0px 3px 2px hsla(0, 0%, 0%, 0.12), 0px 1px 1px hsla(0, 0%, 0%, 0.15);--sl-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(0, 0%, 0%, 0.1), 0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(0, 0%, 0%, 0.75), 0px 4px 2px hsla(0, 0%, 0%, 0.25);--sl-text-xs: 0.8125rem;--sl-text-sm: 0.875rem;--sl-text-base: 1rem;--sl-text-lg: 1.125rem;--sl-text-xl: 1.25rem;--sl-text-2xl: 1.5rem;--sl-text-3xl: 1.8125rem;--sl-text-4xl: 2.1875rem;--sl-text-5xl: 2.625rem;--sl-text-6xl: 4rem;--sl-text-body: var(--sl-text-base);--sl-text-body-sm: var(--sl-text-xs);--sl-text-code: var(--sl-text-sm);--sl-text-code-sm: var(--sl-text-xs);--sl-text-h1: var(--sl-text-4xl);--sl-text-h2: var(--sl-text-3xl);--sl-text-h3: var(--sl-text-2xl);--sl-text-h4: var(--sl-text-xl);--sl-text-h5: var(--sl-text-lg);--sl-line-height: 1.8;--sl-line-height-headings: 1.2;--sl-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--__sl-font: var(--sl-font, ""), var(--sl-font-system);--__sl-font-mono: var(--sl-font-mono, ""), var(--sl-font-system-mono);--sl-nav-height: 3.5rem;--sl-nav-pad-x: 1rem;--sl-nav-pad-y: 0.75rem;--sl-mobile-toc-height: 3rem;--sl-sidebar-width: 18.75rem;--sl-sidebar-pad-x: 1rem;--sl-content-width: 45rem;--sl-content-pad-x: 1rem;--sl-menu-button-size: 2rem;--sl-nav-gap: var(--sl-content-pad-x);--sl-outline-offset-inside: -0.1875rem;--sl-z-index-toc: 4;--sl-z-index-menu: 5;--sl-z-index-navbar: 10;--sl-z-index-skiplink: 20}:root{--purple-hsl: 255, 60%, 60%;--overlay-blurple: hsla(var(--purple-hsl), 0.2)}:root{--ec-brdRad: 0px;--ec-brdWd: 1px;--ec-brdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-codeFontFml: var(--__sl-font-mono);--ec-codeFontSize: var(--sl-text-code);--ec-codeFontWg: 400;--ec-codeLineHt: var(--sl-line-height);--ec-codePadBlk: 0.75rem;--ec-codePadInl: 1rem;--ec-codeBg: #011627;--ec-codeFg: #d6deeb;--ec-codeSelBg: #1d3b53;--ec-uiFontFml: var(--__sl-font);--ec-uiFontSize: 0.9rem;--ec-uiFontWg: 400;--ec-uiLineHt: 1.65;--ec-uiPadBlk: 0.25rem;--ec-uiPadInl: 1rem;--ec-uiSelBg: #234d708c;--ec-uiSelFg: #ffffff;--ec-focusBrd: #122d42;--ec-sbThumbCol: #ffffff17;--ec-sbThumbHoverCol: #ffffff49;--ec-tm-lineMarkerAccentMarg: 0rem;--ec-tm-lineMarkerAccentWd: 0.15rem;--ec-tm-lineDiffIndMargLeft: 0.25rem;--ec-tm-inlMarkerBrdWd: 1.5px;--ec-tm-inlMarkerBrdRad: 0.2rem;--ec-tm-inlMarkerPad: 0.15rem;--ec-tm-insDiffIndContent: "+";--ec-tm-delDiffIndContent: "-";--ec-tm-markBg: #ffffff17;--ec-tm-markBrdCol: #ffffff40;--ec-tm-insBg: #1e571599;--ec-tm-insBrdCol: #487f3bd0;--ec-tm-insDiffIndCol: #79b169d0;--ec-tm-delBg: #862d2799;--ec-tm-delBrdCol: #b4554bd0;--ec-tm-delDiffIndCol: #ed8779d0;--ec-frm-shdCol: #011627;--ec-frm-frameBoxShdCssVal: none;--ec-frm-edActTabBg: var(--sl-color-gray-6);--ec-frm-edActTabFg: var(--sl-color-text);--ec-frm-edActTabBrdCol: transparent;--ec-frm-edActTabIndHt: 1px;--ec-frm-edActTabIndTopCol: var(--sl-color-accent-high);--ec-frm-edActTabIndBtmCol: transparent;--ec-frm-edTabsMargInlStart: 0;--ec-frm-edTabsMargBlkStart: 0;--ec-frm-edTabBrdRad: 0px;--ec-frm-edTabBarBg: var(--sl-color-black);--ec-frm-edTabBarBrdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edTabBarBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edBg: var(--sl-color-gray-6);--ec-frm-trmTtbDotsFg: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmTtbDotsOpa: 0.75;--ec-frm-trmTtbBg: var(--sl-color-black);--ec-frm-trmTtbFg: var(--sl-color-text);--ec-frm-trmTtbBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmBg: var(--sl-color-gray-6);--ec-frm-inlBtnFg: var(--sl-color-text);--ec-frm-inlBtnBg: var(--sl-color-text);--ec-frm-inlBtnBgIdleOpa: 0;--ec-frm-inlBtnBgHoverOrFocusOpa: 0.2;--ec-frm-inlBtnBgActOpa: 0.3;--ec-frm-inlBtnBrd: var(--sl-color-text);--ec-frm-inlBtnBrdOpa: 0.4;--ec-frm-tooltipSuccessBg: #158744;--ec-frm-tooltipSuccessFg: white}:root,[data-bs-theme="light"]{--bs-blue: #3347ff;--bs-indigo: #6610f2;--bs-purple: #bd53ee;--bs-pink: #d63384;--bs-red: #ee5389;--bs-orange: #fd7e14;--bs-yellow: #eebd53;--bs-green: #84ee53;--bs-teal: #20c997;--bs-cyan: #0dcaf0;--bs-black: #000;--bs-white: #fff;--bs-gray: #6c757d;--bs-gray-dark: #343a40;--bs-gray-100: #f8f9fa;--bs-gray-200: #e9ecef;--bs-gray-300: #dee2e6;--bs-gray-400: #ced4da;--bs-gray-500: #adb5bd;--bs-gray-600: #6c757d;--bs-gray-700: #495057;--bs-gray-800: #343a40;--bs-gray-900: #212529;--bs-primary: #5d2f86;--bs-secondary: #6c757d;--bs-success: #84ee53;--bs-info: #3347ff;--bs-warning: #eebd53;--bs-danger: #ee5389;--bs-light: #f8f9fa;--bs-dark: #212529;--bs-primary-rgb: 93,47,134;--bs-secondary-rgb: 108,117,125;--bs-success-rgb: 132.2821,238.017,83.283;--bs-info-rgb: 51,71.4,255;--bs-warning-rgb: 238.017,189.0179,83.283;--bs-danger-rgb: 238.017,83.283,137.4399;--bs-light-rgb: 248,249,250;--bs-dark-rgb: 33,37,41;--bs-primary-text-emphasis: #251336;--bs-secondary-text-emphasis: #2b2f32;--bs-success-text-emphasis: #355f21;--bs-info-text-emphasis: #141d66;--bs-warning-text-emphasis: #5f4c21;--bs-danger-text-emphasis: #5f2137;--bs-light-text-emphasis: #495057;--bs-dark-text-emphasis: #495057;--bs-primary-bg-subtle: #dfd5e7;--bs-secondary-bg-subtle: #e2e3e5;--bs-success-bg-subtle: #e6fcdd;--bs-info-bg-subtle: #d6daff;--bs-warning-bg-subtle: #fcf2dd;--bs-danger-bg-subtle: #fcdde7;--bs-light-bg-subtle: #fcfcfd;--bs-dark-bg-subtle: #ced4da;--bs-primary-border-subtle: #beaccf;--bs-secondary-border-subtle: #c4c8cb;--bs-success-border-subtle: #cef8ba;--bs-info-border-subtle: #adb6ff;--bs-warning-border-subtle: #f8e5ba;--bs-danger-border-subtle: #f8bad0;--bs-light-border-subtle: #e9ecef;--bs-dark-border-subtle: #adb5bd;--bs-white-rgb: 255,255,255;--bs-black-rgb: 0,0,0;--bs-font-sans-serif: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0));--bs-body-font-family: var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight: 400;--bs-body-line-height: 1.5;--bs-body-color: #1d2d35;--bs-body-color-rgb: 29,45,53;--bs-body-bg: #fff;--bs-body-bg-rgb: 255,255,255;--bs-emphasis-color: #000;--bs-emphasis-color-rgb: 0,0,0;--bs-secondary-color: rgba(29,45,53,0.75);--bs-secondary-color-rgb: 29,45,53;--bs-secondary-bg: #e9ecef;--bs-secondary-bg-rgb: 233,236,239;--bs-tertiary-color: rgba(29,45,53,0.5);--bs-tertiary-color-rgb: 29,45,53;--bs-tertiary-bg: #f8f9fa;--bs-tertiary-bg-rgb: 248,249,250;--bs-heading-color: inherit;--bs-link-color: #5d2f86;--bs-link-color-rgb: 93,47,134;--bs-link-decoration: none;--bs-link-hover-color: #4a266b;--bs-link-hover-color-rgb: 74,38,107;--bs-link-hover-decoration: underline;--bs-code-color: #d63384;--bs-highlight-color: #1d2d35;--bs-highlight-bg: #fcf2dd;--bs-border-width: 1px;--bs-border-style: solid;--bs-border-color: #dee2e6;--bs-border-color-translucent: rgba(0,0,0,0.175);--bs-border-radius: .375rem;--bs-border-radius-sm: .25rem;--bs-border-radius-lg: .5rem;--bs-border-radius-xl: 1rem;--bs-border-radius-xxl: 2rem;--bs-border-radius-2xl: var(--bs-border-radius-xxl);--bs-border-radius-pill: 50rem;--bs-box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.075);--bs-box-shadow-lg: 0 1rem 3rem rgba(0,0,0,0.175);--bs-box-shadow-inset: inset 0 1px 2px rgba(0,0,0,0.075);--bs-focus-ring-width: .25rem;--bs-focus-ring-opacity: .25;--bs-focus-ring-color: rgba(93,47,134,0.25);--bs-form-valid-color: #84ee53;--bs-form-valid-border-color: #84ee53;--bs-form-invalid-color: #ee5389;--bs-form-invalid-border-color: #ee5389}[data-bs-theme="dark"]{color-scheme:dark;--bs-body-color: #c1c3c8;--bs-body-color-rgb: 192.831,194.7078,199.869;--bs-body-bg: #17181c;--bs-body-bg-rgb: 22.95,24.31,28.05;--bs-emphasis-color: #fff;--bs-emphasis-color-rgb: 255,255,255;--bs-secondary-color: rgba(193,195,200,0.75);--bs-secondary-color-rgb: 192.831,194.7078,199.869;--bs-secondary-bg: #343a40;--bs-secondary-bg-rgb: 52,58,64;--bs-tertiary-color: rgba(193,195,200,0.5);--bs-tertiary-color-rgb: 192.831,194.7078,199.869;--bs-tertiary-bg: #2b3035;--bs-tertiary-bg-rgb: 43,48,53;--bs-primary-text-emphasis: #9e82b6;--bs-secondary-text-emphasis: #a7acb1;--bs-success-text-emphasis: #b5f598;--bs-info-text-emphasis: #8591ff;--bs-warning-text-emphasis: #f5d798;--bs-danger-text-emphasis: #f598b8;--bs-light-text-emphasis: #f8f9fa;--bs-dark-text-emphasis: #dee2e6;--bs-primary-bg-subtle: #13091b;--bs-secondary-bg-subtle: #161719;--bs-success-bg-subtle: #1a3011;--bs-info-bg-subtle: #0a0e33;--bs-warning-bg-subtle: #302611;--bs-danger-bg-subtle: #30111b;--bs-light-bg-subtle: #23262f;--bs-dark-bg-subtle: #1a1d20;--bs-primary-border-subtle: #381c50;--bs-secondary-border-subtle: #41464b;--bs-success-border-subtle: #4f8f32;--bs-info-border-subtle: #1f2b99;--bs-warning-border-subtle: #8f7132;--bs-danger-border-subtle: #8f3252;--bs-light-border-subtle: #353841;--bs-dark-border-subtle: #343a40;--bs-heading-color: #fff;--bs-link-color: #b3c7ff;--bs-link-hover-color: #c2d2ff;--bs-link-color-rgb: 178.5,198.9,255;--bs-link-hover-color-rgb: 194,210,255;--bs-code-color: #e685b5;--bs-highlight-color: #c1c3c8;--bs-highlight-bg: #5f4c21;--bs-border-color: #495057;--bs-border-color-translucent: rgba(255,255,255,0.15);--bs-form-valid-color: #b5f598;--bs-form-valid-border-color: #b5f598;--bs-form-invalid-color: #f598b8;--bs-form-invalid-border-color: #f598b8}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}h5,.h5,h4,.h4,h3,.h3,h2,.h2,h1,.h1{margin-top:0;margin-bottom:.5rem;font-weight:700;line-height:1.2;color:var(--bs-heading-color)}h1,.h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width: 1200px){h1,.h1{font-size:2.5rem}}h2,.h2{font-size:calc(1.325rem + .9vw)}@media (min-width: 1200px){h2,.h2{font-size:2rem}}h3,.h3{font-size:calc(1.3rem + .6vw)}@media (min-width: 1200px){h3,.h3{font-size:1.75rem}}h4,.h4{font-size:calc(1.275rem + .3vw)}@media (min-width: 1200px){h4,.h4{font-size:1.5rem}}h5,.h5{font-size:1.25rem}p{margin-top:0;margin-bottom:1rem}ol,ul{padding-left:2rem}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}strong{font-weight:bolder}small,.small{font-size:.875em}mark,.mark{padding:.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}a{color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));text-decoration:none}a:hover{--bs-link-color-rgb: var(--bs-link-hover-color-rgb);text-decoration:underline}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}pre,code,kbd,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}button{border-radius:0}button:focus:not(:focus-visible){outline:0}input,button{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button{text-transform:none}[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator{display:none !important}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button:not(:disabled),[type="button"]:not(:disabled),[type="reset"]:not(:disabled),[type="submit"]:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit;-webkit-appearance:button}summary{display:list-item;cursor:pointer}[hidden]{display:none !important}.lead{font-size:1.25rem;font-weight:400}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.img-fluid{max-width:100%;height:auto}.figure{display:inline-block}.container,.container-fluid,.container-lg{--bs-gutter-x: 3rem;--bs-gutter-y: 0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width: 576px){.container{max-width:540px}}@media (min-width: 768px){.container{max-width:720px}}@media (min-width: 992px){.container-lg,.container{max-width:960px}}@media (min-width: 1200px){.container-lg,.container{max-width:1240px}}@media (min-width: 1400px){.container-lg,.container{max-width:1320px}}:root{--bs-breakpoint-xs: 0;--bs-breakpoint-sm: 576px;--bs-breakpoint-md: 768px;--bs-breakpoint-lg: 992px;--bs-breakpoint-xl: 1200px;--bs-breakpoint-xxl: 1400px}.row{--bs-gutter-x: 3rem;--bs-gutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}@media (min-width: 768px){.col-md-12{flex:0 0 auto;width:75%}}@media (min-width: 992px){.col-lg-5{flex:0 0 auto;width:31.25%}.col-lg-8{flex:0 0 auto;width:50%}.col-lg-9{flex:0 0 auto;width:56.25%}.col-lg-10{flex:0 0 auto;width:62.5%}.col-lg-11{flex:0 0 auto;width:68.75%}.col-lg-12{flex:0 0 auto;width:75%}}@media (min-width: 1200px){.col-xl-3{flex:0 0 auto;width:18.75%}.col-xl-4{flex:0 0 auto;width:25%}.col-xl-8{flex:0 0 auto;width:50%}.col-xl-9{flex:0 0 auto;width:56.25%}}.sticky-top{position:sticky;top:0;z-index:1020}.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption){position:absolute !important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}li input[type="checkbox"]{--bs-form-check-bg: var(--bs-body-bg);flex-shrink:0;width:1em;height:1em;margin-top:.25em;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-form-check-bg);background-image:var(--bs-form-check-bg-image);background-repeat:no-repeat;background-position:center;background-size:contain;border:var(--bs-border-width) solid var(--bs-border-color);-webkit-print-color-adjust:exact;print-color-adjust:exact}li input[type="checkbox"]{border-radius:.25em}li input[type="radio"][type="checkbox"]{border-radius:50%}li input[type="checkbox"]:active{filter:brightness(90%)}li input[type="checkbox"]:focus{border-color:#ae97c3;outline:0;box-shadow:0 0 0 .25rem rgba(93,47,134,0.25)}li input[type="checkbox"]:checked{background-color:#5d2f86;border-color:#5d2f86}li input:checked[type="checkbox"]{--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}li input[type="checkbox"]:checked[type="radio"]{--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}li input[type="checkbox"]:indeterminate{background-color:#5d2f86;border-color:#5d2f86;--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}li input[type="checkbox"]:disabled{pointer-events:none;filter:none;opacity:.5}.btn{--bs-btn-padding-x: .75rem;--bs-btn-padding-y: .375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight: 400;--bs-btn-line-height: 1.5;--bs-btn-color: var(--bs-body-color);--bs-btn-bg: transparent;--bs-btn-border-width: var(--bs-border-width);--bs-btn-border-color: transparent;--bs-btn-border-radius: var(--bs-border-radius);--bs-btn-hover-border-color: transparent;--bs-btn-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);--bs-btn-disabled-opacity: .65;--bs-btn-focus-box-shadow: 0 0 0 0 rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);text-decoration:none;background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}:not(.btn-check)+.btn:active,.btn:first-child:active,.btn.active,.btn.show{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}:not(.btn-check)+.btn:active:focus-visible,.btn:first-child:active:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn:disabled,.btn.disabled{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color: #fff;--bs-btn-bg: #5d2f86;--bs-btn-border-color: #5d2f86;--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #4f2872;--bs-btn-hover-border-color: #4a266b;--bs-btn-focus-shadow-rgb: 117,78,152;--bs-btn-active-color: #fff;--bs-btn-active-bg: #4a266b;--bs-btn-active-border-color: #462365;--bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);--bs-btn-disabled-color: #fff;--bs-btn-disabled-bg: #5d2f86;--bs-btn-disabled-border-color: #5d2f86}.btn-link{--bs-btn-font-weight: 400;--bs-btn-color: var(--bs-link-color);--bs-btn-bg: transparent;--bs-btn-border-color: transparent;--bs-btn-hover-color: var(--bs-link-hover-color);--bs-btn-hover-border-color: transparent;--bs-btn-active-color: var(--bs-link-hover-color);--bs-btn-active-border-color: transparent;--bs-btn-disabled-color: #6c757d;--bs-btn-disabled-border-color: transparent;--bs-btn-box-shadow: 0 0 0 #000;--bs-btn-focus-shadow-rgb: 117,78,152;text-decoration:none}.btn-link:hover,.btn-link:focus-visible{text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.nav{--bs-nav-link-padding-x: 1rem;--bs-nav-link-padding-y: .5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color: var(--bs-link-color);--bs-nav-link-hover-color: var(--bs-link-hover-color);--bs-nav-link-disabled-color: var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);background:none;border:0;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.nav-link{transition:none}}.nav-link:hover,.nav-link:focus{color:var(--bs-nav-link-hover-color);text-decoration:none}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(93,47,134,0.25)}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.navbar{--bs-navbar-padding-x: 0;--bs-navbar-padding-y: .5rem;--bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y: .3125rem;--bs-navbar-brand-margin-end: 1rem;--bs-navbar-brand-font-size: 1.25rem;--bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x: .5rem;--bs-navbar-toggler-padding-y: .25rem;--bs-navbar-toggler-padding-x: .75rem;--bs-navbar-toggler-font-size: 1.25rem;--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2829,45,53,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius: var(--bs-border-radius);--bs-navbar-toggler-focus-width: 0;--bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);white-space:nowrap}.navbar-brand:hover,.navbar-brand:focus{color:var(--bs-navbar-brand-hover-color);text-decoration:none}.navbar-nav{--bs-nav-link-padding-x: 0;--bs-nav-link-padding-y: .5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color: var(--bs-navbar-color);--bs-nav-link-hover-color: var(--bs-navbar-hover-color);--bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}@media (min-width: 992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto !important;height:auto !important;visibility:visible !important;background-color:transparent !important;border:0 !important;transform:none !important;transition:none}.navbar-expand-lg .offcanvas .offcanvas-header{display:none}.navbar-expand-lg .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}.navbar[data-bs-theme="dark"]{--bs-navbar-color: #c1c3c8;--bs-navbar-hover-color: #b3c7ff;--bs-navbar-disabled-color: rgba(255,255,255,0.25);--bs-navbar-active-color: #b3c7ff;--bs-navbar-brand-color: #b3c7ff;--bs-navbar-brand-hover-color: #b3c7ff;--bs-navbar-toggler-border-color: rgba(255,255,255,0.1);--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c1c3c8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.card{--bs-card-spacer-y: 1rem;--bs-card-spacer-x: 1rem;--bs-card-title-spacer-y: .5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width: var(--bs-border-width);--bs-card-border-color: #e9ecef;--bs-card-border-radius: var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y: .5rem;--bs-card-cap-padding-x: 1rem;--bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg: var(--bs-body-bg);--bs-card-img-overlay-padding: 1rem;--bs-card-group-margin: 1.5rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}.card-text:last-child{margin-bottom:0}.breadcrumb{--bs-breadcrumb-padding-x: 0;--bs-breadcrumb-padding-y: 0;--bs-breadcrumb-margin-bottom: 1rem;--bs-breadcrumb-bg: ;--bs-breadcrumb-border-radius: ;--bs-breadcrumb-divider-color: var(--bs-secondary-color);--bs-breadcrumb-item-padding-x: .5rem;--bs-breadcrumb-item-active-color: var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */}.breadcrumb-item.active{color:var(--bs-breadcrumb-item-active-color)}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);text-decoration:none;background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.page-link.active,.active>.page-link{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.page-link.disabled,.disabled>.page-link{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(var(--bs-border-width) * -1)}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.alert-link{font-weight:700;color:var(--bs-alert-link-color)}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.modal-backdrop{--bs-backdrop-zindex: 1050;--bs-backdrop-bg: #000;--bs-backdrop-opacity: .5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}@keyframes spinner-border{to{transform:rotate(360deg) /* rtl:ignore */}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.offcanvas{--bs-offcanvas-zindex: 1045;--bs-offcanvas-width: 332px;--bs-offcanvas-height: 30vh;--bs-offcanvas-padding-x: 1rem;--bs-offcanvas-padding-y: 1rem;--bs-offcanvas-color: var(--bs-body-color);--bs-offcanvas-bg: var(--bs-body-bg);--bs-offcanvas-border-width: var(--bs-border-width);--bs-offcanvas-border-color: var(--bs-border-color-translucent);--bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);--bs-offcanvas-transition: transform .3s ease-in-out;--bs-offcanvas-title-line-height: 1.5}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}@media (prefers-reduced-motion: reduce){.offcanvas{transition:none}}.offcanvas.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas.showing,.offcanvas.show:not(.hiding){transform:none}.offcanvas.showing,.offcanvas.hiding,.offcanvas.show{visibility:visible}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.show{opacity:.5}.offcanvas-header{display:flex;align-items:center;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)}.offcanvas-title{margin-bottom:0;line-height:var(--bs-offcanvas-title-line-height)}.offcanvas-body{flex-grow:1;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);overflow-y:auto}@keyframes placeholder-glow{50%{opacity:.2}}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-none{display:none !important}.position-relative{position:relative !important}.w-100{width:100% !important}.h-auto{height:auto !important}.flex-row{flex-direction:row !important}.flex-column{flex-direction:column !important}.flex-grow-1{flex-grow:1 !important}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.justify-content-between{justify-content:space-between !important}.order-3{order:3 !important}.m-2{margin:.5rem !important}.mx-2{margin-right:.5rem !important;margin-left:.5rem !important}.mx-auto{margin-right:auto !important;margin-left:auto !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.my-3{margin-top:1rem !important;margin-bottom:1rem !important}.mt-1{margin-top:.25rem !important}.mt-2{margin-top:.5rem !important}.mt-4{margin-top:1.5rem !important}.me-2{margin-right:.5rem !important}.me-auto{margin-right:auto !important}.mb-4{margin-bottom:1.5rem !important}.ms-2{margin-left:.5rem !important}.ms-3{margin-left:1rem !important}.ms-auto{margin-left:auto !important}.mt-n3{margin-top:-1rem !important}.p-0{padding:0 !important}.p-2{padding:.5rem !important}.px-4{padding-right:1.5rem !important;padding-left:1.5rem !important}.pt-4{padding-top:1.5rem !important}.pe-4{padding-right:1.5rem !important}.pb-2{padding-bottom:.5rem !important}.pb-3{padding-bottom:1rem !important}.pb-4{padding-bottom:1.5rem !important}.ps-3{padding-left:1rem !important}.text-start{text-align:left !important}.text-end{text-align:right !important}.text-center{text-align:center !important}.text-decoration-none{text-decoration:none !important}.text-nowrap{white-space:nowrap !important}.text-body{--bs-text-opacity: 1;color:rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important}.text-muted{--bs-text-opacity: 1;color:var(--bs-secondary-color) !important}.text-body-secondary{--bs-text-opacity: 1;color:var(--bs-secondary-color) !important}.text-reset{--bs-text-opacity: 1;color:inherit !important}.rounded-circle{border-radius:50% !important}.rounded-pill{border-radius:var(--bs-border-radius-pill) !important}@media (min-width: 576px){.flex-sm-row{flex-direction:row !important}}@media (min-width: 768px){.flex-md-row{flex-direction:row !important}}@media (min-width: 992px){.d-lg-block{display:block !important}.d-lg-none{display:none !important}.flex-lg-row{flex-direction:row !important}.order-lg-3{order:3 !important}.order-lg-4{order:4 !important}.me-lg-1{margin-right:.25rem !important}.me-lg-3{margin-right:1rem !important}.ms-lg-2{margin-left:.5rem !important}.text-lg-start{text-align:left !important}.text-lg-end{text-align:right !important}}@media (min-width: 1200px){.d-xl-block{display:block !important}.d-xl-none{display:none !important}.flex-xl-nowrap{flex-wrap:nowrap !important}}@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;src:local("Jost Regular Regular"),local("Jost-Regular"),local("Jost* Book"),local("Jost-Book"),url("fonts/vendor/jost/jost-v4-latin-regular.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-regular.woff") format("woff")}@font-face{font-family:Jost;font-style:normal;font-weight:500;font-display:swap;src:local("Jost Regular Medium"),local("JostRoman-Medium"),local("Jost* Medium"),local("Jost-Medium"),url("fonts/vendor/jost/jost-v4-latin-500.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-500.woff") format("woff")}@font-face{font-family:Jost;font-style:normal;font-weight:700;font-display:swap;src:local("Jost Regular Bold"),local("JostRoman-Bold"),local("Jost* Bold"),local("Jost-Bold"),url("fonts/vendor/jost/jost-v4-latin-700.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-700.woff") format("woff")}@font-face{font-family:Jost;font-style:italic;font-weight:400;font-display:swap;src:local("Jost Italic Italic"),local("Jost-Italic"),local("Jost* BookItalic"),local("Jost-BookItalic"),url("fonts/vendor/jost/jost-v4-latin-italic.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-italic.woff") format("woff")}@font-face{font-family:Jost;font-style:italic;font-weight:500;font-display:swap;src:local("Jost Italic Medium Italic"),local("JostItalic-Medium"),local("Jost* Medium Italic"),local("Jost-MediumItalic"),url("fonts/vendor/jost/jost-v4-latin-500italic.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-500italic.woff") format("woff")}@font-face{font-family:Jost;font-style:italic;font-weight:700;font-display:swap;src:local("Jost Italic Bold Italic"),local("JostItalic-Bold"),local("Jost* Bold Italic"),local("Jost-BoldItalic"),url("fonts/vendor/jost/jost-v4-latin-700italic.woff2") format("woff2"),url("fonts/vendor/jost/jost-v4-latin-700italic.woff") format("woff")}html[data-bs-theme="dark"] .icon-tabler-sun{display:block}html[data-bs-theme="dark"] .icon-tabler-moon{display:none}html[data-bs-theme="light"] .icon-tabler-sun{display:none}html[data-bs-theme="light"] .icon-tabler-moon{display:block}.privacy .content,.contributors .content,.blog .content,.error404 .content,.docs.list .content,.categories.list .content,.tags.list .content,.list.section .content{padding-top:1rem;padding-bottom:3rem}.content img{max-width:100%}h5,.h5,h4,.h4,h3,.h3,h2,.h2,h1,.h1{margin-top:2rem;margin-bottom:1rem}@media (min-width: 768px){body{font-size:1.125rem}h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{margin-bottom:1.125rem}}.home h1,.home .h1{font-size:calc(1.875rem + 1.5vw);margin-top:-1rem}a:hover,a:focus{text-decoration:underline}a.btn:hover,a.btn:focus{text-decoration:none}.section{padding-top:5rem;padding-bottom:5rem}body.section{padding-top:0;padding-bottom:0}.section-md{padding-top:3rem;padding-bottom:3rem}.docs-sidebar{order:2}@media (min-width: 992px){.docs-sidebar{order:0;border-right:1px solid #e9ecef}@supports (position: sticky){.docs-sidebar{position:sticky;top:4.25rem;z-index:1000;height:calc(100vh - 4.25rem)}}}@media (min-width: 1200px){.docs-sidebar{flex:0 1 320px}}.docs-links{padding-bottom:5rem}@media (min-width: 992px){@supports (position: sticky){.docs-links{max-height:calc(100vh - 4rem);overflow-y:scroll}}}@media (min-width: 992px){.docs-links{display:block;width:auto;margin-right:-1.5rem;padding-bottom:4rem}}.docs-toc{order:2}@supports (position: sticky){.docs-toc{position:sticky;top:4.25rem;height:calc(100vh - 4.25rem);overflow-y:auto}}.docs-content{padding-bottom:3rem;order:1}.navbar a:hover,.navbar a:focus{text-decoration:none}#TableOfContents ul,#toc ul{padding-left:0;list-style:none}#toc a.active{color:#5d2f86;font-weight:500}.section-features{padding-top:2rem}.bg-dots{background-image:radial-gradient(#dee2e6 15%, transparent 15%);background-position:0 0;background-size:1rem 1rem;-webkit-mask:linear-gradient(to top, #fff, transparent);mask:linear-gradient(to top, #fff, transparent);width:100%;height:11rem;margin-top:-10rem;z-index:-1}.modal-backdrop{background-color:#fff}.modal-backdrop.show{opacity:0.7}@media (min-width: 768px){.modal-backdrop.show{opacity:0}}li input[type="checkbox"]{margin:0.25rem;border:1px solid #ced4da}li input[type="checkbox"]:disabled{pointer-events:none;filter:none;opacity:1}li input[type="checkbox"]:checked{background-color:#5d2f86;border-color:#5d2f86}[data-bs-theme="dark"] li input[type="checkbox"]{border:1px solid #6c757d}[data-bs-theme="dark"] li input[type="checkbox"]:checked{background-color:#b3c7ff;border-color:#b3c7ff;--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231d2d35' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}.card-nav{-moz-column-gap:1rem;column-gap:1rem}.card-nav .card{margin:0.5rem 0}.card-nav .card:hover{border:1px solid #d9d9d9;background-color:var(--sl-color-gray-7)}[data-bs-theme="dark"] .card-nav .card{border:1px solid #353841}[data-bs-theme="dark"] .card-nav .card:hover{border:1px solid #888c96;background-color:var(--sl-color-gray-6)}.highlight>.chroma{border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}.bg{background-color:var(--sl-color-gray-7)}.chroma{background-color:var(--sl-color-gray-7)}.chroma .err{color:inherit}.chroma .lnlinks{outline:none;text-decoration:none;color:inherit}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}.chroma .hl{background-color:#0000001a}.chroma .hl{border-inline-start:0.15rem solid #00000055;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}.chroma .hl .ln{margin-left:-0.15rem}.chroma .lnt{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma .ln{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma .line{display:flex}.chroma .k{color:#000000;font-weight:bold}.chroma .kc{color:#000000;font-weight:bold}.chroma .kd{color:#000000;font-weight:bold}.chroma .kn{color:#000000;font-weight:bold}.chroma .kp{color:#000000;font-weight:bold}.chroma .kr{color:#000000;font-weight:bold}.chroma .kt{color:#445588;font-weight:bold}.chroma .na{color:#008080}.chroma .nb{color:#0086b3}.chroma .bp{color:#999999}.chroma .nc{color:#445588;font-weight:bold}.chroma .no{color:#008080}.chroma .nd{color:#3c5d5d;font-weight:bold}.chroma .ni{color:#800080}.chroma .ne{color:#990000;font-weight:bold}.chroma .nf{color:#990000;font-weight:bold}.chroma .nl{color:#990000;font-weight:bold}.chroma .nn{color:#555555}.chroma .nt{color:#000080}.chroma .nv{color:#008080}.chroma .vc{color:#008080}.chroma .vg{color:#008080}.chroma .vi{color:#008080}.chroma .s{color:#dd1144}.chroma .sa{color:#dd1144}.chroma .sb{color:#dd1144}.chroma .sc{color:#dd1144}.chroma .dl{color:#dd1144}.chroma .sd{color:#dd1144}.chroma .s2{color:#dd1144}.chroma .se{color:#dd1144}.chroma .sh{color:#dd1144}.chroma .si{color:#dd1144}.chroma .sx{color:#dd1144}.chroma .sr{color:#009926}.chroma .s1{color:#dd1144}.chroma .ss{color:#990073}.chroma .m{color:#009999}.chroma .mb{color:#009999}.chroma .mf{color:#009999}.chroma .mh{color:#009999}.chroma .mi{color:#009999}.chroma .il{color:#009999}.chroma .mo{color:#009999}.chroma .o{color:#000000;font-weight:bold}.chroma .ow{color:#000000;font-weight:bold}.chroma .c{color:#999988;font-style:italic}.chroma .ch{color:#999988;font-style:italic}.chroma .cm{color:#999988;font-style:italic}.chroma .c1{color:#999988;font-style:italic}.chroma .cs{color:#999999;font-weight:bold;font-style:italic}.chroma .cp{color:#999999;font-weight:bold;font-style:italic}.chroma .cpf{color:#999999;font-weight:bold;font-style:italic}.chroma .gd{color:#000000;background-color:#ffdddd}.chroma .ge{color:inherit;font-style:italic}.chroma .gr{color:#aa0000}.chroma .gh{color:#999999}.chroma .gi{color:#000000;background-color:#ddffdd}.chroma .go{color:#888888}.chroma .gp{color:#555555}.chroma .gs{font-weight:bold}.chroma .gu{color:#aaaaaa}.chroma .gt{color:#aa0000}.chroma .gl{text-decoration:underline}.chroma .w{color:#bbbbbb}[data-bs-theme="dark"] .highlight>.chroma{border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}[data-bs-theme="dark"] .bg{color:#c9d1d9;background-color:var(--sl-color-gray-6)}[data-bs-theme="dark"] .chroma{color:#c9d1d9;background-color:var(--sl-color-gray-6)}[data-bs-theme="dark"] .chroma .err{color:inherit}[data-bs-theme="dark"] .chroma .lnlinks{outline:none;text-decoration:none;color:inherit}[data-bs-theme="dark"] .chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}[data-bs-theme="dark"] .chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}[data-bs-theme="dark"] .chroma .hl{background-color:#ffffff17}[data-bs-theme="dark"] .chroma .hl{border-inline-start:0.15rem solid #ffffff40;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}[data-bs-theme="dark"] .chroma .hl .ln{margin-left:-0.15rem}[data-bs-theme="dark"] .chroma .lnt{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#64686c}[data-bs-theme="dark"] .chroma .ln{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681}[data-bs-theme="dark"] .chroma .line{display:flex}[data-bs-theme="dark"] .chroma .k{color:#ff7b72}[data-bs-theme="dark"] .chroma .kc{color:#79c0ff}[data-bs-theme="dark"] .chroma .kd{color:#ff7b72}[data-bs-theme="dark"] .chroma .kn{color:#ff7b72}[data-bs-theme="dark"] .chroma .kp{color:#79c0ff}[data-bs-theme="dark"] .chroma .kr{color:#ff7b72}[data-bs-theme="dark"] .chroma .kt{color:#ff7b72}[data-bs-theme="dark"] .chroma .na{color:#d2a8ff}[data-bs-theme="dark"] .chroma .nc{color:#f0883e;font-weight:bold}[data-bs-theme="dark"] .chroma .no{color:#79c0ff;font-weight:bold}[data-bs-theme="dark"] .chroma .nd{color:#d2a8ff;font-weight:bold}[data-bs-theme="dark"] .chroma .ni{color:#ffa657}[data-bs-theme="dark"] .chroma .ne{color:#f0883e;font-weight:bold}[data-bs-theme="dark"] .chroma .nf{color:#d2a8ff;font-weight:bold}[data-bs-theme="dark"] .chroma .nl{color:#79c0ff;font-weight:bold}[data-bs-theme="dark"] .chroma .nn{color:#ff7b72}[data-bs-theme="dark"] .chroma .py{color:#79c0ff}[data-bs-theme="dark"] .chroma .nt{color:#7ee787}[data-bs-theme="dark"] .chroma .nv{color:#79c0ff}[data-bs-theme="dark"] .chroma .l{color:#a5d6ff}[data-bs-theme="dark"] .chroma .ld{color:#79c0ff}[data-bs-theme="dark"] .chroma .s{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sa{color:#79c0ff}[data-bs-theme="dark"] .chroma .sb{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sc{color:#a5d6ff}[data-bs-theme="dark"] .chroma .dl{color:#79c0ff}[data-bs-theme="dark"] .chroma .sd{color:#a5d6ff}[data-bs-theme="dark"] .chroma .s2{color:#a5d6ff}[data-bs-theme="dark"] .chroma .se{color:#79c0ff}[data-bs-theme="dark"] .chroma .sh{color:#79c0ff}[data-bs-theme="dark"] .chroma .si{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sx{color:#a5d6ff}[data-bs-theme="dark"] .chroma .sr{color:#79c0ff}[data-bs-theme="dark"] .chroma .s1{color:#a5d6ff}[data-bs-theme="dark"] .chroma .ss{color:#a5d6ff}[data-bs-theme="dark"] .chroma .m{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mb{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mf{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mh{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mi{color:#a5d6ff}[data-bs-theme="dark"] .chroma .il{color:#a5d6ff}[data-bs-theme="dark"] .chroma .mo{color:#a5d6ff}[data-bs-theme="dark"] .chroma .o{color:inherit;font-weight:bold}[data-bs-theme="dark"] .chroma .ow{color:#ff7b72;font-weight:bold}[data-bs-theme="dark"] .chroma .c{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .ch{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .cm{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .c1{color:#8b949e;font-style:italic}[data-bs-theme="dark"] .chroma .cs{color:#8b949e;font-weight:bold;font-style:italic}[data-bs-theme="dark"] .chroma .cp{color:#8b949e;font-weight:bold;font-style:italic}[data-bs-theme="dark"] .chroma .cpf{color:#8b949e;font-weight:bold;font-style:italic}[data-bs-theme="dark"] .chroma .gd{color:#ffa198;background-color:#490202}[data-bs-theme="dark"] .chroma .ge{font-style:italic}[data-bs-theme="dark"] .chroma .gr{color:#ffa198}[data-bs-theme="dark"] .chroma .gh{color:#79c0ff;font-weight:bold}[data-bs-theme="dark"] .chroma .gi{color:#56d364;background-color:#0f5323}[data-bs-theme="dark"] .chroma .go{color:#8b949e}[data-bs-theme="dark"] .chroma .gp{color:#8b949e}[data-bs-theme="dark"] .chroma .gs{font-weight:bold}[data-bs-theme="dark"] .chroma .gu{color:#79c0ff}[data-bs-theme="dark"] .chroma .gt{color:#ff7b72}[data-bs-theme="dark"] .chroma .gl{text-decoration:underline}[data-bs-theme="dark"] .chroma .w{color:#6e7681}[data-bs-theme="dark"] h1,[data-bs-theme="dark"] .h1,[data-bs-theme="dark"] h2,[data-bs-theme="dark"] .h2,[data-bs-theme="dark"] h3,[data-bs-theme="dark"] .h3,[data-bs-theme="dark"] h4,[data-bs-theme="dark"] .h4{color:#fff}[data-bs-theme="dark"] body{background:#17181c;color:#c1c3c8}[data-bs-theme="dark"] a{color:#b3c7ff}[data-bs-theme="dark"] .callout a{color:inherit}[data-bs-theme="dark"] .btn-primary{--bs-btn-color: #000;--bs-btn-bg: #b3c7ff;--bs-btn-border-color: #b3c7ff;--bs-btn-hover-color: #000;--bs-btn-hover-bg: #becfff;--bs-btn-hover-border-color: #bacdff;--bs-btn-focus-shadow-rgb: 152,169,217;--bs-btn-active-color: #000;--bs-btn-active-bg: #c2d2ff;--bs-btn-active-border-color: #bacdff;--bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);--bs-btn-disabled-color: #000;--bs-btn-disabled-bg: #b3c7ff;--bs-btn-disabled-border-color: #b3c7ff;color:#17181c}[data-bs-theme="dark"] .navbar{background-color:rgba(23,24,28,0.95);border-bottom:1px solid #23262f}[data-bs-theme="dark"] body.home .navbar{border-bottom:0}[data-bs-theme="dark"] .offcanvas-header{border-bottom:1px solid #343a40}[data-bs-theme="dark"] .offcanvas .nav-link{color:#c1c3c8}[data-bs-theme="dark"] .offcanvas .nav-link:hover,[data-bs-theme="dark"] .offcanvas .nav-link:focus{color:#b3c7ff}[data-bs-theme="dark"] .offcanvas .nav-link.active{color:#b3c7ff}[data-bs-theme="dark"] .page-links a{color:#c1c3c8}[data-bs-theme="dark"] .page-links a:hover{text-decoration:none;color:#b3c7ff}[data-bs-theme="dark"] .navbar .btn-link{color:#c1c3c8}[data-bs-theme="dark"] .content .btn-link{color:#b3c7ff}[data-bs-theme="dark"] .content .btn-link:hover{color:#b3c7ff}[data-bs-theme="dark"] .navbar .btn-link:hover{color:#b3c7ff}[data-bs-theme="dark"] .navbar .btn-link:active{color:#b3c7ff}@media (min-width: 992px){[data-bs-theme="dark"] .docs-sidebar{order:0;border-right:1px solid #23262f}}[data-bs-theme="dark"] .footer{border-top:1px solid #23262f}[data-bs-theme="dark"] .docs-links,[data-bs-theme="dark"] .docs-toc{scrollbar-width:thin;scrollbar-color:#17181c #17181c}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar{width:5px}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar-track,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-track{background:#17181c}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar-thumb,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-thumb{background:#17181c}[data-bs-theme="dark"] .docs-links:hover,[data-bs-theme="dark"] .docs-toc:hover{scrollbar-width:thin;scrollbar-color:#23262f #17181c}[data-bs-theme="dark"] .docs-links:hover::-webkit-scrollbar-thumb,[data-bs-theme="dark"] .docs-toc:hover::-webkit-scrollbar-thumb{background:#23262f}[data-bs-theme="dark"] .docs-links::-webkit-scrollbar-thumb:hover,[data-bs-theme="dark"] .docs-toc::-webkit-scrollbar-thumb:hover{background:#23262f}[data-bs-theme="dark"] .docs-links h3:not(:first-child),[data-bs-theme="dark"] .docs-links .h3:not(:first-child){border-top:1px solid #23262f}[data-bs-theme="dark"] .page-links li:not(:first-child){border-top:1px dashed #23262f}[data-bs-theme="dark"] .card{background:#17181c;border:1px solid #23262f}[data-bs-theme="dark"] .bg-dots{background-image:radial-gradient(#414349 15%, transparent 15%)}[data-bs-theme="dark"] .text-muted{color:#adafb6 !important}[data-bs-theme="dark"] .offcanvas{background-color:#17181c}[data-bs-theme="dark"] .page-link{color:#b3c7ff;background-color:transparent;border:var(--bs-border-width) solid #23262f}[data-bs-theme="dark"] .page-link:hover{color:#17181c;background-color:#c1c3c8;border-color:#c1c3c8}[data-bs-theme="dark"] .page-link:focus{color:#17181c;background-color:#c1c3c8}[data-bs-theme="dark"] .page-item.active .page-link{color:#17181c;background-color:#b3c7ff;border-color:#b3c7ff}[data-bs-theme="dark"] .page-item.disabled .page-link{color:var(--bs-secondary-color);background-color:#23262f;border-color:#23262f}[data-bs-theme="dark"] details{border:1px solid #23262f}[data-bs-theme="dark"] summary:hover{background:#23262f}[data-bs-theme="dark"] details[open]>summary{border-bottom:1px solid #23262f}[data-bs-theme="dark"] details summary::after{content:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e")}[data-bs-theme="dark"] #toc a.active{color:#b3c7ff}.navbar .btn-link{color:rgba(var(--bs-emphasis-color-rgb), 0.65);padding:0.4375rem 0}.btn-link:focus{outline:0;box-shadow:none}@media (min-width: 992px){.navbar .btn-link{padding:0.5625em 0.25rem 0.5rem 0.125rem}}.navbar .btn-link:hover{color:rgba(var(--bs-emphasis-color-rgb), 0.8)}.navbar .btn-link:active{color:rgba(var(--bs-emphasis-color-rgb), 1)}.clipboard{position:relative;float:right}.btn-clipboard{transition:opacity 0.25s ease-in-out;opacity:0;position:absolute;right:0.5rem;top:0.5rem;line-height:1;padding:0.3125rem 0.3125rem 0.1875rem;background-color:transparent;border-color:transparent}@media (max-width: 767.98px){.btn-clipboard{position:absolute;right:-0.5rem;top:0.5rem}}.btn-clipboard::after{width:22px;height:22px;display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background-color:#495057}.btn-clipboard:hover{border-color:transparent}.btn-clipboard:hover::after{width:22px;height:22px;display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-copy' width='22' height='22' viewBox='0 0 24 24' stroke-width='1' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z'%3E%3C/path%3E%3Cpath d='M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background-color:#212529}.btn-clipboard:focus,.btn-clipboard:active{border-color:transparent !important}.btn-clipboard:focus::after,.btn-clipboard:active::after{width:22px;height:22px;display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background-color:#212529}[data-bs-theme="dark"] .btn-clipboard{background-color:transparent;border-color:transparent}[data-bs-theme="dark"] .btn-clipboard::after{background-color:#ced4da}[data-bs-theme="dark"] .btn-clipboard:hover{border-color:transparent}[data-bs-theme="dark"] .btn-clipboard:hover::after{background-color:#e9ecef}[data-bs-theme="dark"] .btn-clipboard:focus,[data-bs-theme="dark"] .btn-clipboard:active{border-color:transparent}[data-bs-theme="dark"] .btn-clipboard:focus::after,[data-bs-theme="dark"] .btn-clipboard:active::after{background-color:#e9ecef}.highlight{position:relative}@media (min-width: 768px){.highlight:hover .btn-clipboard{opacity:1}}#toTop{opacity:0;transition:opacity 0.3s ease-in-out}.callout{--bs-link-color-rgb: var(--callout-link);--bs-code-color: var(--callout-code-color);color:var(--callout-color, inherit);background-color:var(--callout-bg, var(--bs-gray-100));border-left:0.25rem solid var(--callout-border, var(--bs-gray-300));border-radius:0}.callout a{text-decoration:underline}.callout .highlight{background-color:rgba(0,0,0,0.05)}.callout-content{min-width:0}.callout.callout-note{border-color:var(--sl-color-blue);background-color:var(--sl-color-blue-high)}.callout.callout-note .callout-body a{color:var(--sl-color-blue-low)}.callout.callout-note .callout-body,.callout.callout-note .callout-body a:hover,.callout.callout-note .callout-body a:active{color:var(--sl-color-white)}.callout.callout-tip{border-color:var(--sl-color-purple);background-color:var(--sl-color-purple-high)}.callout.callout-tip .callout-body a{color:var(--sl-color-purple-low)}.callout.callout-tip .callout-body,.callout.callout-tip .callout-body a:hover,.callout.callout-tip .callout-body a:active{color:var(--sl-color-white)}[data-bs-theme="dark"] .callout{color:var(--sl-color-gray-1)}[data-bs-theme="dark"] .callout.callout-note{border-color:var(--sl-color-blue);background-color:var(--sl-color-blue-low)}[data-bs-theme="dark"] .callout.callout-note .callout-body a{color:var(--sl-color-blue-high)}[data-bs-theme="dark"] .callout.callout-note .callout-body,[data-bs-theme="dark"] .callout.callout-note .callout-body a:hover,[data-bs-theme="dark"] .callout.callout-note .callout-body a:active{color:var(--sl-color-white)}[data-bs-theme="dark"] .callout.callout-note code:not(:where(.not-content *)){color:var(--ec-codeFg)}[data-bs-theme="dark"] .callout.callout-tip{border-color:var(--sl-color-purple);background-color:var(--sl-color-purple-low)}[data-bs-theme="dark"] .callout.callout-tip .callout-body a{color:var(--sl-color-purple-high)}[data-bs-theme="dark"] .callout.callout-tip .callout-body,[data-bs-theme="dark"] .callout.callout-tip .callout-body a:hover,[data-bs-theme="dark"] .callout.callout-tip .callout-body a:active{color:var(--sl-color-white)}[data-bs-theme="dark"] .callout.callout-tip code:not(:where(.not-content *)){color:var(--ec-codeFg)}.expressive-code{font-family:var(--ec-uiFontFml);font-size:var(--ec-uiFontSize);line-height:var(--ec-uiLineHt);-moz-text-size-adjust:none;text-size-adjust:none;-webkit-text-size-adjust:none;margin:1.5rem 0}.expressive-code *:not(path){all:revert;box-sizing:border-box}.expressive-code pre{display:flex;margin:0;padding:0;border:var(--ec-brdWd) solid var(--ec-brdCol);border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));background:var(--ec-codeBg)}.expressive-code pre:focus-visible{outline:3px solid var(--ec-focusBrd);outline-offset:-3px}.expressive-code pre>code{all:unset;display:block;flex:1 0 100%;padding:var(--ec-codePadBlk) 0;color:var(--ec-codeFg);font-family:var(--ec-codeFontFml);font-size:var(--ec-codeFontSize);line-height:var(--ec-codeLineHt)}.expressive-code pre{overflow-x:auto}.expressive-code pre::-webkit-scrollbar,.expressive-code pre::-webkit-scrollbar-track{background-color:inherit;border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));border-top-left-radius:0;border-top-right-radius:0}.expressive-code pre::-webkit-scrollbar-thumb{background-color:var(--ec-sbThumbCol);border:4px solid transparent;background-clip:content-box;border-radius:10px}.expressive-code pre::-webkit-scrollbar-thumb:hover{background-color:var(--ec-sbThumbHoverCol)}.expressive-code .ec-line{padding-inline:var(--ec-codePadInl);padding-inline-end:calc(2rem + var(--ec-codePadInl));direction:ltr;unicode-bidi:isolate}.expressive-code .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.expressive-code .ec-line.mark{--tmLineBgCol: var(--ec-tm-markBg);--tmLineBrdCol: var(--ec-tm-markBrdCol)}.expressive-code .ec-line.ins{--tmLineBgCol: var(--ec-tm-insBg);--tmLineBrdCol: var(--ec-tm-insBrdCol)}.expressive-code .ec-line.ins::before{content:var(--ec-tm-insDiffIndContent);color:var(--ec-tm-insDiffIndCol)}.expressive-code .ec-line.del{--tmLineBgCol: var(--ec-tm-delBg);--tmLineBrdCol: var(--ec-tm-delBrdCol)}.expressive-code .ec-line.del::before{content:var(--ec-tm-delDiffIndContent);color:var(--ec-tm-delDiffIndCol)}.expressive-code .ec-line.mark,.expressive-code .ec-line.ins,.expressive-code .ec-line.del{position:relative;background:var(--tmLineBgCol);min-width:calc(100% - var(--ec-tm-lineMarkerAccentMarg));margin-inline-start:var(--ec-tm-lineMarkerAccentMarg);border-inline-start:var(--ec-tm-lineMarkerAccentWd) solid var(--tmLineBrdCol);padding-inline-start:calc(var(--ec-codePadInl) - var(--ec-tm-lineMarkerAccentMarg) - var(--ec-tm-lineMarkerAccentWd)) !important}.expressive-code .ec-line.mark::before,.expressive-code .ec-line.ins::before,.expressive-code .ec-line.del::before{position:absolute;left:var(--ec-tm-lineDiffIndMargLeft)}.expressive-code .ec-line mark,.expressive-code .ec-line .mark{--tmInlineBgCol: var(--ec-tm-markBg);--tmInlineBrdCol: var(--ec-tm-markBrdCol)}.expressive-code .ec-line ins{--tmInlineBgCol: var(--ec-tm-insBg);--tmInlineBrdCol: var(--ec-tm-insBrdCol)}.expressive-code .ec-line del{--tmInlineBgCol: var(--ec-tm-delBg);--tmInlineBrdCol: var(--ec-tm-delBrdCol)}.expressive-code .ec-line mark,.expressive-code .ec-line .mark,.expressive-code .ec-line ins,.expressive-code .ec-line del{all:unset;display:inline-block;position:relative;--tmBrdL: var(--ec-tm-inlMarkerBrdWd);--tmBrdR: var(--ec-tm-inlMarkerBrdWd);--tmRadL: var(--ec-tm-inlMarkerBrdRad);--tmRadR: var(--ec-tm-inlMarkerBrdRad);margin-inline:0.025rem;padding-inline:var(--ec-tm-inlMarkerPad);border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);background:var(--tmInlineBgCol);background-clip:padding-box}.expressive-code .ec-line mark.open-start,.expressive-code .ec-line .open-start.mark,.expressive-code .ec-line ins.open-start,.expressive-code .ec-line del.open-start{margin-inline-start:0;padding-inline-start:0;--tmBrdL: 0px;--tmRadL: 0}.expressive-code .ec-line mark.open-end,.expressive-code .ec-line .open-end.mark,.expressive-code .ec-line ins.open-end,.expressive-code .ec-line del.open-end{margin-inline-end:0;padding-inline-end:0;--tmBrdR: 0px;--tmRadR: 0}.expressive-code .ec-line mark::before,.expressive-code .ec-line .mark::before,.expressive-code .ec-line ins::before,.expressive-code .ec-line del::before{content:"";position:absolute;pointer-events:none;display:inline-block;inset:0;border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);border:var(--ec-tm-inlMarkerBrdWd) solid var(--tmInlineBrdCol);border-inline-width:var(--tmBrdL) var(--tmBrdR)}.expressive-code .frame{all:unset;position:relative;display:block;--header-border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd));--tab-border-radius: calc(var(--ec-frm-edTabBrdRad) + var(--ec-brdWd));--button-spacing: 0.4rem;--code-background: var(--ec-frm-edBg);border-radius:var(--header-border-radius);box-shadow:var(--ec-frm-frameBoxShdCssVal)}.expressive-code .frame .header{display:none;z-index:1;position:relative;border-radius:var(--header-border-radius) var(--header-border-radius) 0 0}.expressive-code .frame.has-title pre,.expressive-code .frame.has-title code,.expressive-code .frame.is-terminal pre,.expressive-code .frame.is-terminal code{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.expressive-code .frame .title:empty:before{content:"\a0"}.expressive-code .frame.has-title:not(.is-terminal){--button-spacing: calc(1.9rem + 2 * (var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)))}.expressive-code .frame.has-title:not(.is-terminal) .title{position:relative;color:var(--ec-frm-edActTabFg);background:var(--ec-frm-edActTabBg);background-clip:padding-box;margin-block-start:var(--ec-frm-edTabsMargBlkStart);padding:calc(var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)) var(--ec-uiPadInl);border:var(--ec-brdWd) solid var(--ec-frm-edActTabBrdCol);border-radius:var(--tab-border-radius) var(--tab-border-radius) 0 0;border-bottom:none;overflow:hidden}.expressive-code .frame.has-title:not(.is-terminal) .title::after{content:"";position:absolute;pointer-events:none;inset:0;border-top:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndTopCol);border-bottom:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndBtmCol)}.expressive-code .frame.has-title:not(.is-terminal) .header{display:flex;background:linear-gradient(to top, var(--ec-frm-edTabBarBrdBtmCol) var(--ec-brdWd), transparent var(--ec-brdWd)),linear-gradient(var(--ec-frm-edTabBarBg), var(--ec-frm-edTabBarBg));background-repeat:no-repeat;padding-inline-start:var(--ec-frm-edTabsMargInlStart)}.expressive-code .frame.has-title:not(.is-terminal) .header::before{content:"";position:absolute;pointer-events:none;inset:0;border:var(--ec-brdWd) solid var(--ec-frm-edTabBarBrdCol);border-radius:inherit;border-bottom:none}.expressive-code .frame.is-terminal{--button-spacing: calc(1.9rem + var(--ec-brdWd) + 2 * var(--ec-uiPadBlk));--code-background: var(--ec-frm-trmBg)}.expressive-code .frame.is-terminal .header{display:flex;align-items:center;justify-content:center;padding-block:var(--ec-uiPadBlk);padding-block-end:calc(var(--ec-uiPadBlk) + var(--ec-brdWd));position:relative;font-weight:500;letter-spacing:0.025ch;color:var(--ec-frm-trmTtbFg);background:var(--ec-frm-trmTtbBg);border:var(--ec-brdWd) solid var(--ec-brdCol);border-bottom:none}.expressive-code .frame.is-terminal .header::before{content:"";position:absolute;pointer-events:none;left:var(--ec-uiPadInl);width:2.1rem;height:0.56rem;line-height:0;background-color:var(--ec-frm-trmTtbDotsFg);opacity:var(--ec-frm-trmTtbDotsOpa);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");mask-repeat:no-repeat}.expressive-code .frame.is-terminal .header::after{content:"";position:absolute;pointer-events:none;inset:0;border-bottom:var(--ec-brdWd) solid var(--ec-frm-trmTtbBrdBtmCol)}.expressive-code .frame pre{background:var(--code-background)}.expressive-code .copy{display:flex;gap:0.25rem;flex-direction:row;position:absolute;inset-block-start:calc(var(--ec-brdWd) + var(--button-spacing));inset-inline-end:calc(var(--ec-brdWd) + var(--ec-uiPadInl) / 2);direction:ltr;unicode-bidi:isolate}.expressive-code .copy button{position:relative;align-self:flex-end;margin:0;padding:0;border:none;border-radius:0.2rem;z-index:1;cursor:pointer;transition-property:opacity, background, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);width:2.5rem;height:2.5rem;background:var(--code-background);opacity:0.75}.expressive-code .copy button div{position:absolute;inset:0;border-radius:inherit;background:var(--ec-frm-inlBtnBg);opacity:var(--ec-frm-inlBtnBgIdleOpa);transition-property:inherit;transition-duration:inherit;transition-timing-function:inherit}.expressive-code .copy button::before{content:"";position:absolute;pointer-events:none;inset:0;border-radius:inherit;border:var(--ec-brdWd) solid var(--ec-frm-inlBtnBrd);opacity:var(--ec-frm-inlBtnBrdOpa)}.expressive-code .copy button::after{content:"";position:absolute;pointer-events:none;inset:0;background-color:var(--ec-frm-inlBtnFg);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");mask-repeat:no-repeat;margin:0.475rem;line-height:0}.expressive-code .copy button:focus::after,.expressive-code .copy button:active::after{display:inline-block;content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;margin:0.2375rem}.expressive-code .copy button:hover,.expressive-code .copy button:focus:focus-visible{opacity:1}.expressive-code .copy button:hover div,.expressive-code .copy button:focus:focus-visible div{opacity:var(--ec-frm-inlBtnBgHoverOrFocusOpa)}.expressive-code .copy button:active{opacity:1}.expressive-code .copy button:active div{opacity:var(--ec-frm-inlBtnBgActOpa)}.expressive-code .copy .feedback{--tooltip-arrow-size: 0.35rem;--tooltip-bg: var(--ec-frm-tooltipSuccessBg);color:var(--ec-frm-tooltipSuccessFg);pointer-events:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;position:relative;align-self:center;background-color:var(--tooltip-bg);z-index:99;padding:0.125rem 0.75rem;border-radius:0.2rem;margin-inline-end:var(--tooltip-arrow-size);opacity:0;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:ease-in-out;transform:translate3d(0, 0.25rem, 0)}.expressive-code .copy .feedback::after{content:"";position:absolute;pointer-events:none;top:calc(50% - var(--tooltip-arrow-size));inset-inline-end:calc(-2 * (var(--tooltip-arrow-size) - 0.5px));border:var(--tooltip-arrow-size) solid transparent;border-inline-start-color:var(--tooltip-bg)}.expressive-code .copy .feedback.show{opacity:1;transform:translate3d(0, 0, 0)}@media (hover: hover){.expressive-code .copy button{opacity:0;width:2rem;height:2rem}.expressive-code .frame:hover .copy button:not(:hover),.expressive-code .frame:focus-within :focus-visible~.copy button:not(:hover),.expressive-code .frame .copy .feedback.show~button:not(:hover){opacity:0.75}}:root{--ec-brdRad: 0px;--ec-brdWd: 1px;--ec-brdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-codeFontFml: var(--__sl-font-mono);--ec-codeFontSize: var(--sl-text-code);--ec-codeFontWg: 400;--ec-codeLineHt: var(--sl-line-height);--ec-codePadBlk: 0;--ec-codePadInl: 1rem;--ec-codeBg: #011627;--ec-codeFg: #d6deeb;--ec-codeSelBg: #1d3b53;--ec-uiFontFml: var(--__sl-font);--ec-uiFontSize: 0.9rem;--ec-uiFontWg: 400;--ec-uiLineHt: 1.65;--ec-uiPadBlk: 0.25rem;--ec-uiPadInl: 1rem;--ec-uiSelBg: #234d708c;--ec-uiSelFg: #ffffff;--ec-focusBrd: #122d42;--ec-sbThumbCol: #ffffff17;--ec-sbThumbHoverCol: #ffffff49;--ec-tm-lineMarkerAccentMarg: 0rem;--ec-tm-lineMarkerAccentWd: 0.15rem;--ec-tm-lineDiffIndMargLeft: 0.25rem;--ec-tm-inlMarkerBrdWd: 1.5px;--ec-tm-inlMarkerBrdRad: 0.2rem;--ec-tm-inlMarkerPad: 0.15rem;--ec-tm-insDiffIndContent: "+";--ec-tm-delDiffIndContent: "-";--ec-tm-markBg: #ffffff17;--ec-tm-markBrdCol: #ffffff40;--ec-tm-insBg: #1e571599;--ec-tm-insBrdCol: #487f3bd0;--ec-tm-insDiffIndCol: #79b169d0;--ec-tm-delBg: #862d2799;--ec-tm-delBrdCol: #b4554bd0;--ec-tm-delDiffIndCol: #ed8779d0;--ec-frm-shdCol: #011627;--ec-frm-frameBoxShdCssVal: none;--ec-frm-edActTabBg: var(--sl-color-gray-6);--ec-frm-edActTabFg: var(--sl-color-text);--ec-frm-edActTabBrdCol: transparent;--ec-frm-edActTabIndHt: 1px;--ec-frm-edActTabIndTopCol: var(--sl-color-accent-high);--ec-frm-edActTabIndBtmCol: transparent;--ec-frm-edTabsMargInlStart: 0;--ec-frm-edTabsMargBlkStart: 0;--ec-frm-edTabBrdRad: 0px;--ec-frm-edTabBarBg: var(--sl-color-black);--ec-frm-edTabBarBrdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edTabBarBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-edBg: var(--sl-color-gray-6);--ec-frm-trmTtbDotsFg: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmTtbDotsOpa: 0.75;--ec-frm-trmTtbBg: var(--sl-color-black);--ec-frm-trmTtbFg: var(--sl-color-text);--ec-frm-trmTtbBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);--ec-frm-trmBg: var(--sl-color-gray-6);--ec-frm-inlBtnFg: var(--sl-color-text);--ec-frm-inlBtnBg: var(--sl-color-text);--ec-frm-inlBtnBgIdleOpa: 0;--ec-frm-inlBtnBgHoverOrFocusOpa: 0.2;--ec-frm-inlBtnBgActOpa: 0.3;--ec-frm-inlBtnBrd: var(--sl-color-text);--ec-frm-inlBtnBrdOpa: 0.4;--ec-frm-tooltipSuccessBg: #158744;--ec-frm-tooltipSuccessFg: white}.expressive-code .ec-line span[style^="--"]:not([class]){color:var(0, inherit);font-style:var(0fs, inherit);font-weight:var(0fw, inherit);-webkit-text-decoration:var(0td, inherit);text-decoration:var(0td, inherit)}@media (prefers-color-scheme: light){:root:not([data-bs-theme="dark"]){--ec-codeBg: #fbfbfb;--ec-codeFg: #403f53;--ec-codeSelBg: #e0e0e0;--ec-uiSelBg: #d3e8f8;--ec-uiSelFg: #403f53;--ec-focusBrd: #93a1a1;--ec-sbThumbCol: #0000001a;--ec-sbThumbHoverCol: #0000005c;--ec-tm-markBg: #0000001a;--ec-tm-markBrdCol: #00000055;--ec-tm-insBg: #8ec77d99;--ec-tm-insDiffIndCol: #336a28d0;--ec-tm-delBg: #ff9c8e99;--ec-tm-delDiffIndCol: #9d4138d0;--ec-frm-shdCol: #d9d9d9;--ec-frm-edActTabBg: var(--sl-color-gray-7);--ec-frm-edActTabIndTopCol: #5d2f86;--ec-frm-edTabBarBg: var(--sl-color-gray-6);--ec-frm-edBg: var(--sl-color-gray-7);--ec-frm-trmTtbBg: var(--sl-color-gray-6);--ec-frm-trmBg: var(--sl-color-gray-7);--ec-frm-tooltipSuccessBg: #078662}:root:not([data-bs-theme="dark"]) .expressive-code .ec-line span[style^="--"]:not([class]){color:var(1, inherit);font-style:var(1fs, inherit);font-weight:var(1fw, inherit);-webkit-text-decoration:var(1td, inherit);text-decoration:var(1td, inherit)}}:root[data-bs-theme="light"] .expressive-code,.expressive-code[data-bs-theme="light"]{--ec-codeBg: #fbfbfb;--ec-codeFg: #403f53;--ec-codeSelBg: #e0e0e0;--ec-uiSelBg: #d3e8f8;--ec-uiSelFg: #403f53;--ec-focusBrd: #93a1a1;--ec-sbThumbCol: #0000001a;--ec-sbThumbHoverCol: #0000005c;--ec-tm-markBg: #0000001a;--ec-tm-markBrdCol: #00000055;--ec-tm-insBg: #8ec77d99;--ec-tm-insDiffIndCol: #336a28d0;--ec-tm-delBg: #ff9c8e99;--ec-tm-delDiffIndCol: #9d4138d0;--ec-frm-shdCol: #d9d9d9;--ec-frm-edActTabBg: var(--sl-color-gray-7);--ec-frm-edActTabIndTopCol: #5d2f86;--ec-frm-edTabBarBg: var(--sl-color-gray-6);--ec-frm-edBg: var(--sl-color-gray-7);--ec-frm-trmTtbBg: var(--sl-color-gray-6);--ec-frm-trmBg: var(--sl-color-gray-7);--ec-frm-tooltipSuccessBg: #078662}:root[data-bs-theme="light"] .expressive-code .ec-line span[style^="--"]:not([class]),.expressive-code[data-bs-theme="light"] .ec-line span[style^="--"]:not([class]){color:var(1, inherit);font-style:var(1fs, inherit);font-weight:var(1fw, inherit);-webkit-text-decoration:var(1td, inherit);text-decoration:var(1td, inherit)}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.875rem}code:not(:where(.not-content *)){background-color:var(--sl-color-gray-6);margin-block:-0.125rem;padding:0.125rem 0.375rem;color:inherit}[data-bs-theme="dark"] code:not(:where(.not-content *)){background-color:var(--sl-color-gray-5)}.math-block{display:block;margin:2rem 0;overflow-x:auto}.math-inline{display:inline}[data-bs-theme="dark"] .math-inline img,[data-bs-theme="dark"] .math-block img{filter:invert(1)}img.diagram{height:auto;width:100%;margin:1rem 0 2rem}img.diagram-kroki-mermaid{background:#fff}.highlight>pre{padding:0.875rem 1rem}.highlight div{padding:0}.highlight>.chroma{overflow-x:auto;border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}.chroma .ln{padding:0 0.5rem 0 0}.chroma .hl{border-inline-start:0.15rem solid #0005;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}.chroma .hl .ln{margin-left:-0.15rem}.highlight .chroma .lntable .lnt,.highlight .chroma .lntable .hl{display:flex}.chroma .lntd:first-child{padding:0}.chroma .lntd:first-child .lnt{padding-left:1rem}.chroma .lntd:nth-child(2){padding:0}.highlight .chroma .lntable .lntd+.lntd{width:100%}[data-bs-theme="dark"] .chroma .ln{padding:0 0.5em 0 0}.chroma .lntd pre{padding:1rem 0;margin-bottom:0}.highlight>.chroma::-webkit-scrollbar,.highlight>.chroma::-webkit-scrollbar-track{background-color:inherit;border-radius:1px;border-top-left-radius:0;border-top-right-radius:0}.highlight>.chroma::-webkit-scrollbar-thumb{background-color:#dddee0;border:4px solid transparent;background-clip:content-box;border-radius:10px}.highlight>.chroma::-webkit-scrollbar-thumb:hover{background-color:#9d9e9f}[data-bs-theme="dark"] .highlight>.chroma::-webkit-scrollbar-thumb{background-color:#ffffff17}[data-bs-theme="dark"] .highlight>.chroma::-webkit-scrollbar-thumb:hover{background-color:#ffffff49}[data-bs-theme="dark"] .highlight>.chroma{border:1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)}[data-bs-theme="dark"] .chroma .hl{border-inline-start:0.15rem solid #ffffff40;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}[data-bs-theme="dark"] .chroma .hl .ln{margin-left:-0.15rem}details{display:block;position:relative;border:1px solid #e9ecef;border-radius:0.25rem;padding:0.5rem 1rem 0;margin:0.5rem 0}summary{list-style:none;display:inline-block;width:calc(100% + 2rem);margin:-0.5rem -1rem 0;padding:0.5rem 1rem}summary::-webkit-details-marker{display:none}summary:hover{background:#f8f9fa}details summary::after{display:inline-block;content:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");transition:transform 0.35s ease;transform-origin:center center;position:absolute;right:1rem}details[open]>summary::after{transform:rotate(90deg)}details[open]{padding:0.5rem 1rem}details[open]>summary{border-bottom:1px solid #dee2e6;margin-bottom:0.5rem}details h2,details .h2,details h3,details .h3,details h4,details .h4{margin:1rem 0 0.5rem}details p:last-child{margin-bottom:0}details ul,details ol{margin-bottom:0}details pre{margin:0 0 1rem}img{max-width:100%;height:auto}img[data-sizes="auto"]{display:block}img{font-size:0}figcaption{font-size:1rem;margin-top:0.5rem;font-style:italic}.blur-up{filter:blur(5px);transition:filter 400ms}.blur-up.lazyloaded{filter:unset}.section-nav{padding-top:2rem}.section-nav details{border:0;padding:0;margin:0.5rem 0}.section-nav details[open]{padding:0}.section-nav summary{width:100%;padding:0;margin:0;font-weight:700}.section-nav summary:hover{background:none}.section-nav details[open]>summary{border-bottom:0;margin-bottom:0}.section-nav ul.list-nested details{padding-left:1rem;margin-top:0.5rem}.section-nav ul.list-nested li{margin:0}.section-nav a{display:block;margin:0.5rem 0;color:#1d2d35;font-size:1rem;text-decoration:none}.section-nav a:hover,.section-nav a:active{color:#5d2f86}.section-nav li.active a{color:#5d2f86;font-weight:500}.section-nav ul.list-nested li a{padding-left:1rem}.section-nav ul.list-nested{border-left:1px solid #e9ecef}[data-bs-theme="dark"] .section-nav ul.list-nested{border-left:1px solid #23262f}[data-bs-theme="dark"] .section-nav a{color:#c1c3c8}[data-bs-theme="dark"] .section-nav a:hover,[data-bs-theme="dark"] .section-nav a:active{color:var(--sl-color-text-accent)}[data-bs-theme="dark"] .section-nav li.active a{color:var(--sl-color-text-accent);font-weight:500}[data-bs-theme="dark"] .section-nav summary{color:#fff}.footer{border-top:1px solid #e9ecef;padding-top:1.125rem;padding-bottom:1.125rem}.footer ul{margin-bottom:0}.footer li{font-size:.875rem;margin-bottom:0}.footer .list-inline-item:not(:last-child){margin-right:1rem}@media (max-width: 991.98px){.footer .col-lg-8{margin-top:0.25rem;margin-bottom:0.25rem}}@media (min-width: 768px){.footer li{font-size:1rem}}.fixed-bottom-right{position:fixed;right:0;bottom:0;z-index:1000}.navbar-brand{font-weight:700}.navbar-brand svg{margin-right:0.25rem}[data-bs-theme="dark"] .navbar-brand{color:inherit}.navbar{z-index:1000;background-color:rgba(255,255,255,0.95);border-bottom:1px solid #e9ecef}@media (min-width: 992px){.navbar{z-index:1025}}@media (min-width: 768px){.navbar-brand{font-size:1.375rem}}.nav-item{margin-left:0}@media (max-width: 991.98px){.navbar-nav .nav-link{font-weight:400}}@media (min-width: 768px){.nav-item{margin-left:0.5rem}}@media (max-width: 575.98px){.navbar .offcanvas.offcanvas-start,.navbar .offcanvas.offcanvas-end{width:80vw}}.offcanvas-header{border-bottom:1px solid #dee2e6;padding-top:1.0625rem;padding-bottom:0.8125rem}h5.offcanvas-title,.offcanvas-title.h5{margin:0;color:inherit}.offcanvas .nav-link{color:#1d2d35}.offcanvas .nav-link:hover,.offcanvas .nav-link:focus{color:#5d2f86}.offcanvas .nav-link.active{color:#5d2f86}.home .navbar{border-bottom:0}@media (min-width: 992px){.navbar-brand{margin-right:0.75rem !important}}.social-link{padding-right:0.375rem;padding-left:0.375rem}@media (max-width: 991.98px){#buttonColorMode{margin:0.5rem 0}#socialMenu{margin:0.5rem 0 0.5rem -0.25rem}.navbar-nav{margin-top:1rem}.nav-item .nav-link{font-weight:400;font-size:1.125rem}}.modal-backdrop,.offcanvas-backdrop{visibility:hidden;background:rgba(23,24,28,0.5);opacity:0}[data-bs-theme="dark"] .modal-backdrop,[data-bs-theme="dark"] .offcanvas-backdrop{visibility:hidden;background:rgba(23,24,28,0.5);opacity:0}.modal-backdrop.show,.offcanvas-backdrop.show{visibility:visible;opacity:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.showing,.hiding{transition:none;display:none}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg{padding-right:0.75rem}.docs-content>h2[id]::before,.docs-content>[id].h2::before,.docs-content>h3[id]::before,.docs-content>[id].h3::before,.docs-content>h4[id]::before,.docs-content>[id].h4::before{display:block;height:6rem;margin-top:-6rem;content:""}.docs-content ul,.docs-content ol{margin-bottom:1rem}.anchor{visibility:hidden;margin-left:0.375rem}h1:hover a,.h1:hover a,h2:hover a,.h2:hover a,h3:hover a,.h3:hover a,h4:hover a,.h4:hover a{visibility:visible;text-decoration:none}.card-list{margin-top:2.25rem}.page-footer-meta{margin-top:2rem;margin-bottom:2rem}p.meta{margin-top:0.5rem;font-size:1rem}.breadcrumb{margin-top:2.25rem;font-size:1rem}.toc-mobile{margin-top:2rem;margin-bottom:2rem}.page-link:hover{text-decoration:none}ul li{margin:0.25rem 0}.page-nav .card .icon-tabler-arrow-left{margin-right:0.75rem}.page-nav .card .icon-tabler-arrow-right{margin-left:0.75rem}.page-nav .card:hover{border:1px solid #d9d9d9}[data-bs-theme="dark"] .page-nav .card{border:1px solid #353841}[data-bs-theme="dark"] .page-nav .card:hover{border:1px solid #888c96}.home .card,.contributors.list .card,.blog.list .card,.blog.single .card,.categories.list .card,.tags.list .card{margin-top:2rem;margin-bottom:2rem;transition:transform 0.3s}.home .content .card:hover,.contributors.list .content .card:hover,.blog.list .content .card:hover,.blog.single .content .card:hover,.categories.list .content .card:hover,.tags.list .content .card:hover{transform:scale(1.025)}.home .content .card-body,.contributors.list .content .card-body,.blog.list .content .card-body,.blog.single .content .card-body,.categories.list .content .card-body,.tags.list .content .card-body{padding:0 2rem 1rem}.blog-header{text-align:center;margin-bottom:2rem}.page-item:first-child,.page-item:last-child,.page-item.disabled{display:none}.page-item a{margin-left:0.5rem;margin-right:0.5rem;padding-left:0.875rem;padding-right:0.875rem}span.reading-time{margin-left:2rem}span.reading-time svg{margin-right:0.3rem;vertical-align:-0.4rem}.docs-links,.docs-toc{scrollbar-width:thin;scrollbar-color:#fff #fff}.docs-links::-webkit-scrollbar,.docs-toc::-webkit-scrollbar{width:5px}.docs-links::-webkit-scrollbar-track,.docs-toc::-webkit-scrollbar-track{background:#fff}.docs-links::-webkit-scrollbar-thumb,.docs-toc::-webkit-scrollbar-thumb{background:#fff}.docs-links:hover,.docs-toc:hover{scrollbar-width:thin;scrollbar-color:#e9ecef #fff}.docs-links:hover::-webkit-scrollbar-thumb,.docs-toc:hover::-webkit-scrollbar-thumb{background:#e9ecef}.docs-links::-webkit-scrollbar-thumb:hover,.docs-toc::-webkit-scrollbar-thumb:hover{background:#e9ecef}.docs-links h3,.docs-links .h3,.page-links h3,.page-links .h3{font-size:1.125rem;margin:1.25rem 0 0.5rem;padding:1.5rem 0 0}@media (min-width: 992px){.docs-links h3,.docs-links .h3,.page-links h3,.page-links .h3{margin:1.125rem 1.5rem 0.75rem 0;padding:1.375rem 0 0}}.docs-links h3:not(:first-child),.docs-links .h3:not(:first-child){border-top:1px solid #e9ecef}.page-links li{margin-top:0.375rem;padding-top:0.375rem}.page-links li ul li{border-top:none;padding-left:1rem;margin-top:0.125rem;padding-top:0.125rem}.page-links li:not(:first-child){border-top:1px dashed #e9ecef}.page-links a{color:#1d2d35;display:block;padding:0.125rem 0;font-size:.9375rem;text-decoration:none}.page-links a:hover,.page-links a.active{text-decoration:none;color:#5d2f86}.nav-link.active{font-weight:500} diff --git a/resources/_gen/assets/scss/app.scss_cdf9d7c9eb97e4550ded64a8776dd9e8.json b/resources/_gen/assets/scss/app.scss_cdf9d7c9eb97e4550ded64a8776dd9e8.json index 1a2845c..c980d10 100644 --- a/resources/_gen/assets/scss/app.scss_cdf9d7c9eb97e4550ded64a8776dd9e8.json +++ b/resources/_gen/assets/scss/app.scss_cdf9d7c9eb97e4550ded64a8776dd9e8.json @@ -1 +1 @@ -{"Target":"main.4787ae34bca721fbe370741dc6b76ab1bc17c8e8057152e1fe8799e4f72c618b82948fec5d2a6a79d27cb153b80fe0b8dbe5c02b8d44b80b8d61bd1a60ecd4d9.css","MediaType":"text/css","Data":{"Integrity":"sha512-R4euNLynIfvjcHQdxrdqsbwXyOgFcVLh/oeZ5PcsYYuClI/sXSpqedJ8sVO4D+C42+XAK41EuAuNYb0aYOzU2Q=="}} \ No newline at end of file +{"Target":"main.f93298bbfac28aad707e0176e283a289a6f111a0a8be8dc661d9c822e77de2ce0347e2155b3a776a5cc75d62eaab4598db045a20dc59bbe57890e0b7bc072c78.css","MediaType":"text/css","Data":{"Integrity":"sha512-+TKYu/rCiq1wfgF24oOiiabxEaCovo3GYdnIIud94s4DR+IVWzp3alzHXWLqq0WY2wRaINxZu+V4kOC3vAcseA=="}} \ No newline at end of file