### HTML Form Submission Example Source: https://formguard.strivio.world/llms.txt This HTML snippet demonstrates how to connect a basic form to a FormGuard endpoint. Ensure the 'action' attribute points to your unique FormGuard endpoint ID. ```html
``` -------------------------------- ### JavaScript Fetch API for Form Submission Source: https://formguard.strivio.world/llms.txt This JavaScript example shows how to submit form data asynchronously using the Fetch API and JSON. It's suitable for AJAX-driven form submissions. ```javascript await fetch("https://formguard.strivio.world/api/submit/{your-endpoint-id}", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: "user@example.com", message: "I love FormGuard!" }), }); ``` -------------------------------- ### JavaScript Theme Initialization and Mutation Observer Source: https://formguard.strivio.world/dashboard This script initializes theme detection and application by observing changes to HTML attributes and computed styles. It sets theme attributes and CSS variables based on detected themes or user preferences, ensuring consistent theming across the application. ```javascript (() => { let a2 = [ "data-joy-color-scheme", "data-mui-color-scheme", "data-theme", "data-color-scheme", "class", ], b2 = /* @__PURE__ */ __name((a3) => (a3.includes("dark") ? "dark" : a3.includes("light") ? "light" : null), "b2"), c2 = /* @__PURE__ */ __name((a3) => { let b3 = document.getElementById("--stack-theme-mode"); b3 || ((b3 = document.createElement("style")).id = "--stack-theme-mode", (b3.innerHTML = "/* This tag is used by Stack Auth to set the theme in the browser without causing a hydration error (since React ignores additional tags in the ). We later use the `html:has(head > [data-stack-theme=XYZ])` selector to apply styles based on the theme. */"), document.head.appendChild(b3)), b3.setAttribute("data-stack-theme", a3); }, "c2"), d2 = /* @__PURE__ */ __name(() => { let a3 = getComputedStyle(document.documentElement).getPropertyValue("color-scheme"); if (a3) { let d3 = b2(a3); if (d3) return c2(d3), true; } return false; }, "d2"), e2 = /* @__PURE__ */ __name(() => { let a3 = getComputedStyle(document.documentElement).getPropertyValue("--background"); if (a3) { /^\d+\s\d+%\s\d+(\.\d+)?%$/.test(a3) && (a3 = `hsl(${a3})`); let b3 = ((a4) => { let b4 = document.createElement("div"); (b4.style.color = a4), document.body.appendChild(b4); let c3 = getComputedStyle(b4).color; document.body.removeChild(b4); let d3 = c3.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); return d3 ? [parseInt(d3[1]), parseInt(d3[2]), parseInt(d3[3])] : null; })(a3); if (b3) return ( 128 > ((a4) => (299 * a4[0] + 587 * a4[1] + 114 * a4[2]) / 1e3)(b3) ? c2("dark") : c2("light") ), true; } return false; }, "e2"), f2 = /* @__PURE__ */ __name(() => { for (let d3 of a2) { let a3 = document.documentElement.getAttribute(d3); if (a3) { let d4 = b2(a3); if (d4) return c2(d4), true; } } return false; }, "f2"); new MutationObserver((b3) => { b3.forEach((b4) => { !d2() && !(b4.attributeName && a2.includes(b4.attributeName) && f2()) && e2(); }); }).observe(document.documentElement, { attributes: true, attributeFilter: a2, }), d2() || f2() || e2(); })() ``` -------------------------------- ### CSS Pseudo-element and State-Based Styling Utilities Source: https://formguard.strivio.world/dashboard Contains CSS classes that utilize pseudo-elements like `::after` and state-based selectors like `:focus-within` and `:hover`. These classes enable dynamic styling based on element state or for adding decorative content. ```css :where(.stack-scope) .after\:absolute::after, :where(.stack-scope).after\:absolute::after { content: var(--tw-content); position: absolute; } :where(.stack-scope) .after\:inset-y-0::after, :where(.stack-scope).after\:inset-y-0::after { content: var(--tw-content); top: 0px; bottom: 0px; } :where(.stack-scope) .after\:left-1\/2::after, :where(.stack-scope).after\:left-1\/2::after { content: var(--tw-content); left: 50%; } :where(.stack-scope) .after\:w-1::after, :where(.stack-scope).after\:w-1::after { content: var(--tw-content); width: 0.25rem; } :where(.stack-scope) .after\:-translate-x-1\/2::after, :where(.stack-scope).after\:-translate-x-1\/2::after { content: var(--tw-content); --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } :where(.stack-scope) .focus-within\:relative:focus-within, :where(.stack-scope).focus-within\:relative:focus-within { position: relative; } :where(.stack-scope) .focus-within\:z-20:focus-within, :where(.stack-scope).focus-within\:z-20:focus-within { z-index: 20; } :where(.stack-scope) .hover\:bg-accent:hover, :where(.stack-scope).hover\:bg-accent:hover { background-color: hsl(var(--accent)); } :where(.stack-scope) .hover\:bg-destructive\/90:hover, :where(.stack-scope).hover\:bg-destructive\/90:hover { background-color: hsl(var(--destructive) / 0.9); } :where(.stack-scope) .hover\:bg-muted:hover, :where(.stack-scope).hover\:bg-muted:hover { background-color: hsl(var(--muted)); } :where(.stack-scope) .hover\:bg-muted\/50:hover, :where(.stack-scope).hover\:bg-muted\/50:hover { background-color: hsl(var(--muted) / 0.5); } :where(.stack-scope) .hover\:bg-primary:hover, :where(.stack-scope).hover\:bg-primary:hover { background-color: hsl(var(--primary)); } :where(.stack-scope) .hover\:bg-primary\/90:hover, :where(.stack-scope).hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); } :where(.stack-scope) .hover\:bg-secondary:hover, :where(.stack-scope).hover\:bg-secondary:hover { background-color: hsl(var(--secondary)); } ``` -------------------------------- ### CSS Min-Width Utilities Source: https://formguard.strivio.world/dashboard Provides CSS classes for setting minimum width constraints on elements. These utilities ensure that elements do not shrink below a certain width, maintaining readability and layout integrity. ```css :where(.stack-scope) .min-w-0 { min-width: 0px; } :where(.stack-scope) .min-w-6, :where(.stack-scope).min-w-6 { min-width: 1.5rem; } ``` -------------------------------- ### CSS Styling Utilities for Input Elements Source: https://formguard.strivio.world/dashboard Provides CSS classes for styling specific input elements, including file upload buttons and placeholder text. These utilities aim to offer consistent styling across different browsers and scenarios. ```css :where(.stack-scope) * .hide-password-toggle::-ms-reveal, :where(.stack-scope) * .hide-password-toggle::-ms-clear, *:where(.stack-scope) .hide-password-toggle::-ms-reveal, *:where(.stack-scope) .hide-password-toggle::-ms-clear { visibility: hidden; pointer-events: none; display: none; } :where(.stack-scope) .file\:border-0::file-selector-button, :where(.stack-scope).file\:border-0::file-selector-button { border-width: 0px; } :where(.stack-scope) .file\:bg-transparent::file-selector-button, :where(.stack-scope).file\:bg-transparent::file-selector-button { background-color: transparent; } :where(.stack-scope) .file\:text-sm::file-selector-button, :where(.stack-scope).file\:text-sm::file-selector-button { font-size: 0.875rem; line-height: 1.25rem; } :where(.stack-scope) .file\:font-medium::file-selector-button, :where(.stack-scope).file\:font-medium::file-selector-button { font-weight: 500; } :where(.stack-scope) .placeholder\:text-muted-foreground::-moz-placeholder, :where(.stack-scope).placeholder\:text-muted-foreground::-moz-placeholder { color: hsl(var(--muted-foreground)); } :where(.stack-scope) .placeholder\:text-muted-foreground::placeholder, :where(.stack-scope).placeholder\:text-muted-foreground::placeholder { color: hsl(var(--muted-foreground)); } ``` -------------------------------- ### CSS Utility Classes for Positioning Source: https://formguard.strivio.world/dashboard This set of CSS utility classes provides shortcuts for setting element positioning. It includes classes for static, fixed, absolute, and relative positioning, as well as specific inset values for precise placement. ```css :where(.stack-scope) .static, :where(.stack-scope).static { position: static; } :where(.stack-scope) .fixed, :where(.stack-scope).fixed { position: fixed; } :where(.stack-scope) .absolute, :where(.stack-scope).absolute { position: absolute; } :where(.stack-scope) .relative, :where(.stack-scope).relative { position: relative; } :where(.stack-scope) .inset-0, :where(.stack-scope).inset-0 { inset: 0px; } :where(.stack-scope) .inset-x-0, :where(.stack-scope).inset-x-0 { left: 0px; right: 0px; } :where(.stack-scope) .inset-y-0, :where(.stack-scope).inset-y-0 { top: 0px; bottom: 0px; } ``` -------------------------------- ### Tailwind CSS Transition Utilities Source: https://formguard.strivio.world/dashboard Provides CSS for common transition properties and durations in Tailwind CSS. These classes allow for smooth visual changes on elements when their state is altered. ```css :where(.stack-scope) .transition, :where(.stack-scope).transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } :where(.stack-scope) .transition-all, :where(.stack-scope).transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } :where(.stack-scope) .transition-colors, :where(.stack-scope).transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } :where(.stack-scope) .transition-opacity, :where(.stack-scope).transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } :where(.stack-scope) .transition-transform, :where(.stack-scope).transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } :where(.stack-scope) .duration-100, :where(.stack-scope).duration-100 { transition-duration: 100ms; } :where(.stack-scope) .duration-1000, :where(.stack-scope).duration-1000 { transition-duration: 1000ms; } :where(.stack-scope) .duration-200, :where(.stack-scope).duration-200 { transition-duration: 200ms; } :where(.stack-scope) .duration-300, :where(.stack-scope).duration-300 { transition-duration: 300ms; } :where(.stack-scope) .ease-in-out, :where(.stack-scope).ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } ``` -------------------------------- ### CSS Utility Classes for Spacing and Placement Source: https://formguard.strivio.world/dashboard This snippet contains CSS utility classes for controlling element spacing and placement, particularly for positioning elements relative to their parent. It includes classes for negative margins and specific offsets for the 'top', 'bottom', 'left', and 'right' properties. ```css :where(.stack-scope) .-right-2, :where(.stack-scope).-right-2 { right: -0.5rem; } :where(.stack-scope) .-top-2, :where(.stack-scope).-top-2 { top: -0.5rem; } :where(.stack-scope) .bottom-0, :where(.stack-scope).bottom-0 { bottom: 0px; } :where(.stack-scope) .left-0, :where(.stack-scope).left-0 { left: 0px; } :where(.stack-scope) .left-2, :where(.stack-scope).left-2 { left: 0.5rem; } :where(.stack-scope) .left-3, :where(.stack-scope).left-3 { left: 0.75rem; } :where(.stack-scope) .left-\\[50\%\\], :where(.stack-scope).left-\\[50\%\] { left: 50%; } :where(.stack-scope) .right-0, :where(.stack-scope).right-0 { right: 0px; } :where(.stack-scope) .right-1, :where(.stack-scope).right-1 { right: 0.25rem; } :where(.stack-scope) .right-2, :where(.stack-scope).right-2 { right: 0.5rem; } ``` -------------------------------- ### CSS Styling for UI Components Source: https://formguard.strivio.world/dashboard This CSS code defines styles for various UI components, including command groups, input fields, and items. It utilizes CSS variables for theming and responsive design, ensuring consistent appearance across different devices and themes (light/dark). ```css :where(.stack-scope).\[\&_\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group], :where(.stack-scope).\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] { padding-top: 0px; } :where(.stack-scope) .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group], :where(.stack-scope).\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] { padding-left: 0.5rem; padding-right: 0.5rem; } :where(.stack-scope) .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg, :where(.stack-scope).\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg { height: 1.25rem; } :where(.stack-scope) .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg, :where(.stack-scope).\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg { width: 1.25rem; } :where(.stack-scope) .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input], :where(.stack-scope).\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] { height: 3rem; } :where(.stack-scope) .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item], :where(.stack-scope).\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] { padding-left: 0.5rem; padding-right: 0.5rem; } :where(.stack-scope) .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item], :where(.stack-scope).\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] { padding-top: 0.75rem; padding-bottom: 0.75rem; } :where(.stack-scope) .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg, :where(.stack-scope).\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg { height: 1.25rem; } :where(.stack-scope) .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg, :where(.stack-scope).\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg { width: 1.25rem; } :where(.stack-scope) .\[\&_p\]\:leading-relaxed p, :where(.stack-scope).\[\&_p\]\:leading-relaxed p { line-height: 1.625; } :where(.stack-scope) .\[\&_svg\]\:invisible svg, :where(.stack-scope).\[\&_svg\]\:invisible svg { visibility: hidden; } :where(.stack-scope) .\[\&_tr\:last-child\]\:border-0 tr:last-child, :where(.stack-scope).\[\&_tr\:last-child\]\:border-0 tr:last-child { border-width: 0px; } :where(.stack-scope) .\[\&_tr\]\:border-b tr, :where(.stack-scope).\[\&_tr\]\:border-b tr { border-bottom-width: 1px; } .stack-scope { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 10% 3.9%; --radius: 0.5rem; } html:has(head > [data-stack-theme="dark"]) .stack-scope { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 50%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } ``` -------------------------------- ### Gap and Spacing Utilities (CSS) Source: https://formguard.strivio.world/dashboard These CSS classes manage the spacing between elements, both as direct gaps and as margins between siblings. They utilize CSS variables for flexibility and are applied to parent elements to control child spacing. No external dependencies are required. ```css :where(.stack-scope) .gap-1, :where(.stack-scope).gap-1 { gap: 0.25rem; } :where(.stack-scope) .gap-1\.5, :where(.stack-scope).gap-1\.5 { gap: 0.375rem; } :where(.stack-scope) .gap-2, :where(.stack-scope).gap-2 { gap: 0.5rem; } :where(.stack-scope) .gap-4, :where(.stack-scope).gap-4 { gap: 1rem; } :where(.stack-scope) .gap-6, :where(.stack-scope).gap-6 { gap: 1.5rem; } :where(.stack-scope) .gap-x-6, :where(.stack-scope).gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; } :where(.stack-scope) .gap-y-4, :where(.stack-scope).gap-y-4 { row-gap: 1rem; } :where(.stack-scope) .space-x-1 > :not([hidden]) ~ :not([hidden]), :where(.stack-scope).space-x-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } :where(.stack-scope) .space-x-2 > :not([hidden]) ~ :not([hidden]), :where(.stack-scope).space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } :where(.stack-scope) .space-y-1 > :not([hidden]) ~ :not([hidden]), :where(.stack-scope).space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } :where(.stack-scope) .space-y-1\.5 > :not([hidden]) ~ :not([hidden]), :where(.stack-scope).space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } :where(.stack-scope) .space-y-2 > :not([hidden]) ~ :not([hidden]), :where(.stack-scope).space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } :where(.stack-scope) .space-y-3 > :not([hidden]) ~ :not([hidden]), :where(.stack-scope).space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } :where(.stack-scope) .space-y-4 > :not([hidden]) ~ :not([hidden]), :where(.stack-scope).space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse))); } ``` -------------------------------- ### JavaScript Theme Management Source: https://formguard.strivio.world/dashboard This JavaScript code handles theme switching for the application. It supports 'light', 'dark', and 'system' themes, persisting the user's choice in local storage. It also dynamically applies theme attributes to the HTML element and sets the CSS color scheme. ```javascript ((a2, b2, c2, d2, e2, f2, g2, h2) => { let i2 = document.documentElement, j2 = ["light", "dark"]; function k2(b3) { var c3; (Array.isArray(a2) ? a2 : [a2]).forEach((a3) => { let c4 = a3 === "class", d3 = c4 && f2 ? e2.map((a4) => f2[a4] || a4) : e2; c4 ? (i2.classList.remove(...d3), i2.classList.add(f2 && f2[b3] ? f2[b3] : b3)) : i2.setAttribute(a3, b3); }), (c3 = b3), h2 && j2.includes(c3) && (i2.style.colorScheme = c3); } __name(k2, "k2"); if (d2) k2(d2); else try { let a3 = localStorage.getItem(b2) || c2, d3 = g2 && a3 === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : a3; k2(d3); } catch {} })("class", "theme", "system", null, ["light", "dark"], null, true, true) ``` -------------------------------- ### CSS Max-Height Utilities Source: https://formguard.strivio.world/dashboard Provides CSS classes for setting maximum height constraints on elements. These utilities are useful for preventing elements from becoming too tall, ensuring a consistent layout across different screen sizes. ```css :where(.stack-scope) .max-h-6, :where(.stack-scope).max-h-6 { max-height: 1.5rem; } :where(.stack-scope) .max-h-96, :where(.stack-scope).max-h-96 { max-height: 24rem; } :where(.stack-scope) .max-h-\\[300px\], :where(.stack-scope).max-h-\\[300px\] { max-height: 300px; } :where(.stack-scope) .max-h-screen, :where(.stack-scope).max-h-screen { max-height: 100vh; } ``` -------------------------------- ### Flexbox Layout Utilities (CSS) Source: https://formguard.strivio.world/dashboard These CSS classes define flex container and item properties, allowing for flexible and responsive layouts. They control direction, alignment, and wrapping of child elements. No external dependencies are required. ```css :where(.stack-scope) .flex-col, :where(.stack-scope).flex-col { flex-direction: column; } :where(.stack-scope) .flex-col-reverse, :where(.stack-scope).flex-col-reverse { flex-direction: column-reverse; } :where(.stack-scope) .flex-wrap, :where(.stack-scope).flex-wrap { flex-wrap: wrap; } :where(.stack-scope) .items-start, :where(.stack-scope).items-start { align-items: flex-start; } :where(.stack-scope) .items-end, :where(.stack-scope).items-end { align-items: flex-end; } :where(.stack-scope) .items-center, :where(.stack-scope).items-center { align-items: center; } :where(.stack-scope) .items-stretch, :where(.stack-scope).items-stretch { align-items: stretch; } :where(.stack-scope) .justify-start, :where(.stack-scope).justify-start { justify-content: flex-start; } :where(.stack-scope) .justify-end, :where(.stack-scope).justify-end { justify-content: flex-end; } :where(.stack-scope) .justify-center, :where(.stack-scope).justify-center { justify-content: center; } :where(.stack-scope) .justify-between, :where(.stack-scope).justify-between { justify-content: space-between; } :where(.stack-scope) .justify-evenly, :where(.stack-scope).justify-evenly { justify-content: space-evenly; } ``` -------------------------------- ### CSS Width Utilities Source: https://formguard.strivio.world/dashboard Defines CSS classes for setting various width properties, including fixed pixel values, percentages, and content-based widths. These utilities provide granular control over element sizing. ```css :where(.stack-scope) .w-0 { width: 0px; } :where(.stack-scope) .w-10, :where(.stack-scope).w-10 { width: 2.5rem; } :where(.stack-scope) .w-16, :where(.stack-scope).w-16 { width: 4rem; } :where(.stack-scope) .w-2, :where(.stack-scope).w-2 { width: 0.5rem; } :where(.stack-scope) .w-2\.5, :where(.stack-scope).w-2\.5 { width: 0.625rem; } :where(.stack-scope) .w-2\/3, :where(.stack-scope).w-2\/3 { width: 66.666667%; } :where(.stack-scope) .w-24, :where(.stack-scope).w-24 { width: 6rem; } :where(.stack-scope) .w-3, :where(.stack-scope).w-3 { width: 0.75rem; } :where(.stack-scope) .w-3\.5, :where(.stack-scope).w-3\.5 { width: 0.875rem; } :where(.stack-scope) .w-3\/4, :where(.stack-scope).w-3\/4 { width: 75%; } :where(.stack-scope) .w-4, :where(.stack-scope).w-4 { width: 1rem; } :where(.stack-scope) .w-48, :where(.stack-scope).w-48 { width: 12rem; } :where(.stack-scope) .w-5, :where(.stack-scope).w-5 { width: 1.25rem; } :where(.stack-scope) .w-6, :where(.stack-scope).w-6 { width: 1.5rem; } :where(.stack-scope) .w-64, :where(.stack-scope).w-64 { width: 16rem; } :where(.stack-scope) .w-7, :where(.stack-scope).w-7 { width: 1.75rem; } :where(.stack-scope) .w-72, :where(.stack-scope).w-72 { width: 18rem; } :where(.stack-scope) .w-8, :where(.stack-scope).w-8 { width: 2rem; } :where(.stack-scope) .w-9, :where(.stack-scope).w-9 { width: 2.25rem; } :where(.stack-scope) .w-\\[100px\], :where(.stack-scope).w-\\[100px\] { width: 100px; } :where(.stack-scope) .w-\\[120px\], :where(.stack-scope).w-\\[120px\] { width: 120px; } :where(.stack-scope) .w-\\[140px\], :where(.stack-scope).w-\\[140px\] { width: 140px; } :where(.stack-scope) .w-\\[150px\], :where(.stack-scope).w-\\[150px\] { width: 150px; } :where(.stack-scope) .w-\\[1px\], :where(.stack-scope).w-\\[1px\] { width: 1px; } :where(.stack-scope) .w-\\[200px\], :where(.stack-scope).w-\\[200px\] { width: 200px; } :where(.stack-scope) .w-\\[250px\], :where(.stack-scope).w-\\[250px\] { width: 250px; } :where(.stack-scope) .w-\\[34px\], :where(.stack-scope).w-\\[34px\] { width: 34px; } :where(.stack-scope) .w-\\[36px\], :where(.stack-scope).w-\\[36px\] { width: 36px; } :where(.stack-scope) .w-\\[60px\], :where(.stack-scope).w-\\[60px\] { width: 60px; } :where(.stack-scope) .w-\\[70px\], :where(.stack-scope).w-\\[70px\] { width: 70px; } :where(.stack-scope) .w-\\[800px\], :where(.stack-scope).w-\\[800px\] { width: 800px; } :where(.stack-scope) .w-\\[80px\], :where(.stack-scope).w-\\[80px\] { width: 80px; } :where(.stack-scope) .w-\[calc\(100\%\+3rem\)\], :where(.stack-scope).w-\[calc\(100\%\+3rem\)\] { width: calc(100% + 3rem); } :where(.stack-scope) .w-fit, :where(.stack-scope).w-fit { width: -moz-fit-content; width: fit-content; } :where(.stack-scope) .w-full, :where(.stack-scope).w-full { width: 100%; } :where(.stack-scope) .w-max, :where(.stack-scope).w-max { width: -moz-max-content; width: max-content; } :where(.stack-scope) .w-px, :where(.stack-scope).w-px { width: 1px; } ``` -------------------------------- ### CSS Min-Height Utilities Source: https://formguard.strivio.world/dashboard Offers CSS classes for defining minimum height requirements for elements. These classes ensure that elements maintain a certain height, even if their content is minimal, contributing to layout stability. ```css :where(.stack-scope) .min-h-6, :where(.stack-scope).min-h-6 { min-height: 1.5rem; } :where(.stack-scope) .min-h-\\[60px\], :where(.stack-scope).min-h-\\[60px\] { min-height: 60px; } ``` -------------------------------- ### Alignment and Overflow Utilities (CSS) Source: https://formguard.strivio.world/dashboard These CSS classes control the alignment of individual flex items and the overflow behavior of elements. They also provide utilities for text truncation and wrapping to manage content display. No external dependencies are required. ```css :where(.stack-scope) .self-center, :where(.stack-scope).self-center { align-self: center; } :where(.stack-scope) .self-stretch, :where(.stack-scope).self-stretch { align-self: stretch; } :where(.stack-scope) .overflow-auto, :where(.stack-scope).overflow-auto { overflow: auto; } :where(.stack-scope) .overflow-hidden, :where(.stack-scope).overflow-hidden { overflow: hidden; } :where(.stack-scope) .overflow-y-auto, :where(.stack-scope).overflow-y-auto { overflow-y: auto; } :where(.stack-scope) .overflow-x-hidden, :where(.stack-scope).overflow-x-hidden { overflow-x: hidden; } :where(.stack-scope) .truncate, :where(.stack-scope).truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(.stack-scope) .overflow-ellipsis, :where(.stack-scope).overflow-ellipsis { text-overflow: ellipsis; } :where(.stack-scope) .text-ellipsis, :where(.stack-scope).text-ellipsis { text-overflow: ellipsis; } :where(.stack-scope) .whitespace-nowrap, :where(.stack-scope).whitespace-nowrap { white-space: nowrap; } :where(.stack-scope) .whitespace-pre-wrap, :where(.stack-scope).whitespace-pre-wrap { white-space: pre-wrap; } :where(.stack-scope) .text-wrap, :where(.stack-scope).t ``` -------------------------------- ### CSS Utility Classes for Pointer Events and Visibility Source: https://formguard.strivio.world/dashboard This snippet defines CSS utility classes to control pointer events and element visibility. '.pointer-events-none' and '.pointer-events-auto' manage mouse interactions, while '.visible' and '.invisible' control the CSS 'visibility' property. ```css :where(.stack-scope) .pointer-events-none, :where(.stack-scope).pointer-events-none { pointer-events: none; } :where(.stack-scope) .pointer-events-auto, :where(.stack-scope).pointer-events-auto { pointer-events: auto; } :where(.stack-scope) .visible, :where(.stack-scope).visible { visibility: visible; } :where(.stack-scope) .invisible, :where(.stack-scope).invisible { visibility: hidden; } ``` -------------------------------- ### CSS Styles for Replaced Elements and Responsiveness Source: https://formguard.strivio.world/dashboard This CSS snippet sets replaced elements like images, SVGs, and videos to display as block by default and aligns them vertically. It also constrains their maximum width to 100% of their parent container and maintains their aspect ratio, ensuring responsive behavior. ```css /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ :where(.stack-scope) img, :where(.stack-scope) svg, :where(.stack-scope) video, :where(.stack-scope) canvas, :where(.stack-scope) audio, :where(.stack-scope) iframe, :where(.stack-scope) embed, :where(.stack-scope) object, img:where(.stack-scope), svg:where(.stack-scope), video:where(.stack-scope), canvas:where(.stack-scope), audio:where(.stack-scope), iframe:where(.stack-scope), embed:where(.stack-scope), object:where(.stack-scope) { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ :where(.stack-scope) img, :where(.stack-scope) video, img:where(.stack-scope), video:where(.stack-scope) { max-width: 100%; height: auto; } ``` -------------------------------- ### JavaScript: Utility Function for DOM and Routing Source: https://formguard.strivio.world/dashboard The `$RX` function is a utility for updating DOM element attributes and triggering a React retry mechanism. It's used here to set redirect information, including the type, URL, and status code, on a specific element. ```javascript $RX=function(b,c,d,e,f){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),f&&(a.cstck=f),b._reactRetry&&b._reactRetry())};;$RX("B:1","NEXT_REDIRECT;replace;/handler/sign-in;307;") ``` -------------------------------- ### Apply Modern Firefox Focus Style (CSS) Source: https://formguard.strivio.world/dashboard Applies a modern Firefox focus style using '-moz-focusring' to all focusable elements within a stack scope. This provides a consistent visual indicator for focusable elements. ```css :where(.stack-scope) :-moz-focusring, :where(.stack-scope):-moz-focusring { outline: auto; } ``` -------------------------------- ### Set Summary Display Style (CSS) Source: https://formguard.strivio.world/dashboard Sets the display property to 'list-item' for summary elements within a stack scope in Chrome and Safari. This ensures proper rendering of summary elements. ```css :where(.stack-scope) summary, summary:where(.stack-scope) { display: list-item; } ```