Mirroristas/pockethost
2
0
Fork 0
mirror of https://github.com/pockethost/pockethost.git synced 2025-06-10 16:16:43 +00:00
Code Issues Packages Projects Releases Wiki Activity
pockethost/dist/lander/blog/0.8.0/index.html
Brewhouse Digital 97d5d57231
Marketing - Added Pricing Page (#328)
2023-11-03 13:24:04 -07:00

3715 lines
100 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html class='scroll-smooth' lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML Meta Tags -->
<title>PocketHost 0.8.0 - PocketHost</title>
<meta name="description" content="PocketHost 0.8.0 brings the future of cloud hosting platforms to Nodejs developers with major improvements like instance renaming, enhanced stability, stress testing, Maintenance Mode &amp; a cranked up UI. Get ready to supercharge your PocketBase deployment like never before with faster operations and a sleek, intuitive control panel.">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://pockethost.io/blog/0.8.0/">
<meta property="og:type" content="website">
<meta property="og:title" content="PocketHost 0.8.0 - PocketHost">
<meta property="og:description" content="PocketHost 0.8.0 brings the future of cloud hosting platforms to Nodejs developers with major improvements like instance renaming, enhanced stability, stress testing, Maintenance Mode &amp; a cranked up UI. Get ready to supercharge your PocketBase deployment like never before with faster operations and a sleek, intuitive control panel.">
<meta property="og:image" content="https://pockethost.io/poster.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="">
<meta property="twitter:url" content="https://pockethost.io/blog/0.8.0/">
<meta name="twitter:title" content="PocketHost 0.8.0 - PocketHost">
<meta name="twitter:description" content="PocketHost 0.8.0 brings the future of cloud hosting platforms to Nodejs developers with major improvements like instance renaming, enhanced stability, stress testing, Maintenance Mode &amp; a cranked up UI. Get ready to supercharge your PocketBase deployment like never before with faster operations and a sleek, intuitive control panel.">
<meta name="twitter:image" content="https://pockethost.io/poster.png">
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
<meta name="generator" content="Eleventy v2.0.1">
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="PocketHost">
<link rel="alternate" href="/feed/feed.json" type="application/json" title="PocketHost">
<link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">
<link href="/icons/fontawesome.min.css" rel="stylesheet">
<link href="/icons/all.min.css" rel="stylesheet">
<link href="/icons/brands.min.css" rel="stylesheet">
<style>
/*
! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: 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"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
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.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
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)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
:root,
[data-theme] {
background-color: hsl(var(--b1) / var(--tw-bg-opacity, 1));
color: hsl(var(--bc) / var(--tw-text-opacity, 1));
}
html {
-webkit-tap-highlight-color: transparent;
}
:root {
color-scheme: dark;
--pf: 141 72% 35%;
--sf: 164 73% 35%;
--af: 175 70% 34%;
--in: 198 93% 60%;
--su: 158 64% 52%;
--wa: 43 96% 56%;
--er: 0 91% 71%;
--inc: 198 100% 12%;
--suc: 158 100% 10%;
--wac: 43 100% 11%;
--erc: 0 100% 14%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: .2s;
--btn-text-case: uppercase;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--p: 141 72% 42%;
--pc: 0 0% 100%;
--s: 164 73% 42%;
--sc: 0 0% 100%;
--a: 175 70% 41%;
--ac: 0 0% 100%;
--n: 213 18% 20%;
--nf: 212 17% 17%;
--nc: 220 13% 69%;
--b1: 212 18% 14%;
--b2: 213 18% 12%;
--b3: 213 18% 10%;
--bc: 0 0% 100%;
}
[data-theme=dark] {
color-scheme: dark;
--pf: 141 72% 35%;
--sf: 164 73% 35%;
--af: 175 70% 34%;
--in: 198 93% 60%;
--su: 158 64% 52%;
--wa: 43 96% 56%;
--er: 0 91% 71%;
--inc: 198 100% 12%;
--suc: 158 100% 10%;
--wac: 43 100% 11%;
--erc: 0 100% 14%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: .2s;
--btn-text-case: uppercase;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--p: 141 72% 42%;
--pc: 0 0% 100%;
--s: 164 73% 42%;
--sc: 0 0% 100%;
--a: 175 70% 41%;
--ac: 0 0% 100%;
--n: 213 18% 20%;
--nf: 212 17% 17%;
--nc: 220 13% 69%;
--b1: 212 18% 14%;
--b2: 213 18% 12%;
--b3: 213 18% 10%;
--bc: 0 0% 100%;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-links);
text-decoration: underline;
font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: decimal;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: disc;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 500;
font-style: italic;
color: var(--tw-prose-quotes);
border-left-width: 0.25rem;
border-left-color: var(--tw-prose-quote-borders);
quotes: "\201C""\201D""\2018""\2019";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: 0.8888889em;
line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 900;
color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 800;
color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: 0.6em;
line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 700;
color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 700;
color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
display: block;
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 500;
font-family: inherit;
color: var(--tw-prose-kbd);
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
font-size: 0.875em;
border-radius: 0.3125rem;
padding-top: 0.1875em;
padding-right: 0.375em;
padding-bottom: 0.1875em;
padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-code);
font-weight: 600;
font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-pre-code);
background-color: var(--tw-prose-pre-bg);
overflow-x: auto;
font-weight: 400;
font-size: 0.875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: 0.375rem;
padding-top: 0.8571429em;
padding-right: 1.1428571em;
padding-bottom: 0.8571429em;
padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
font-weight: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
width: 100%;
table-layout: auto;
text-align: left;
margin-top: 2em;
margin-bottom: 2em;
font-size: 0.875em;
line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-right: 0.5714286em;
padding-bottom: 0.5714286em;
padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-top-width: 1px;
border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
vertical-align: top;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-captions);
font-size: 0.875em;
line-height: 1.4285714;
margin-top: 0.8571429em;
}
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-kbd: #111827;
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5em;
padding-left: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-top: 0.5714286em;
padding-right: 0.5714286em;
padding-bottom: 0.5714286em;
padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-right: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 0;
}
.alert {
display: grid;
width: 100%;
grid-auto-flow: row;
align-content: flex-start;
align-items: center;
justify-items: center;
gap: 1rem;
text-align: center;
border-width: 1px;
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
padding: 1rem;
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
border-radius: var(--rounded-box, 1rem);
--alert-bg: hsl(var(--b2));
--alert-bg-mix: hsl(var(--b1));
background-color: var(--alert-bg);
}
@media (min-width: 640px) {
.alert {
grid-auto-flow: column;
grid-template-columns: auto minmax(auto,1fr);
justify-items: start;
text-align: left;
}
}
@media (hover:hover) {
.label a:hover {
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
}
.menu li > *:not(ul):not(.menu-title):not(details):active,
.menu li > *:not(ul):not(.menu-title):not(details).active,
.menu li > details > summary:active {
--tw-bg-opacity: 1;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--nc) / var(--tw-text-opacity));
}
.tab:hover {
--tw-text-opacity: 1;
}
.table tr.hover:hover,
.table tr.hover:nth-child(even):hover {
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
}
}
.btn {
display: inline-flex;
flex-shrink: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-wrap: wrap;
align-items: center;
justify-content: center;
border-color: transparent;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
text-align: center;
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-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-duration: 200ms;
border-radius: var(--rounded-btn, 0.5rem);
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
min-height: 3rem;
font-size: 0.875rem;
line-height: 1em;
gap: 0.5rem;
font-weight: 600;
text-decoration-line: none;
border-width: var(--border-btn, 1px);
animation: button-pop var(--animation-btn, 0.25s) ease-out;
text-transform: var(--btn-text-case, uppercase);
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
outline-color: hsl(var(--bc) / 1);
}
.btn-disabled,
.btn[disabled],
.btn:disabled {
pointer-events: none;
}
.btn-square {
height: 3rem;
width: 3rem;
padding: 0px;
}
.btn-group > input[type="radio"].btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.btn-group > input[type="radio"].btn:before {
content: attr(data-title);
}
.btn:is(input[type="checkbox"]),
.btn:is(input[type="radio"]) {
width: auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.btn:is(input[type="checkbox"]):after,
.btn:is(input[type="radio"]):after {
--tw-content: attr(aria-label);
content: var(--tw-content);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown > *:not(summary):focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.dropdown .dropdown-content {
position: absolute;
}
.dropdown:is(:not(details)) .dropdown-content {
visibility: hidden;
opacity: 0;
transform-origin: top;
--tw-scale-x: .95;
--tw-scale-y: .95;
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));
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-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-duration: 200ms;
}
.dropdown-end .dropdown-content {
right: 0px;
}
.dropdown-left .dropdown-content {
bottom: auto;
right: 100%;
top: 0px;
transform-origin: right;
}
.dropdown-right .dropdown-content {
bottom: auto;
left: 100%;
top: 0px;
transform-origin: left;
}
.dropdown-bottom .dropdown-content {
bottom: auto;
top: 100%;
transform-origin: top;
}
.dropdown-top .dropdown-content {
bottom: 100%;
top: auto;
transform-origin: bottom;
}
.dropdown-end.dropdown-right .dropdown-content {
bottom: 0px;
top: auto;
}
.dropdown-end.dropdown-left .dropdown-content {
bottom: 0px;
top: auto;
}
.dropdown.dropdown-open .dropdown-content,
.dropdown:not(.dropdown-hover):focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
visibility: visible;
opacity: 1;
}
@media (hover: hover) {
.dropdown.dropdown-hover:hover .dropdown-content {
visibility: visible;
opacity: 1;
}
.btn:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--b3) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
}
.btn-primary:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
}
.btn.glass:hover {
--glass-opacity: 25%;
--glass-border-opacity: 15%;
}
.btn-ghost:hover {
--tw-border-opacity: 0;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
}
.btn-outline:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--b1) / var(--tw-text-opacity));
}
.btn-outline.btn-primary:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn-outline.btn-secondary:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--sf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--sc) / var(--tw-text-opacity));
}
.btn-outline.btn-accent:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--af) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--af) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--ac) / var(--tw-text-opacity));
}
.btn-outline.btn-success:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--su) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--suc) / var(--tw-text-opacity));
}
.btn-outline.btn-info:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--in) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--inc) / var(--tw-text-opacity));
}
.btn-outline.btn-warning:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--wa) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--wac) / var(--tw-text-opacity));
}
.btn-outline.btn-error:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--er) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--erc) / var(--tw-text-opacity));
}
.btn-disabled:hover,
.btn[disabled]:hover,
.btn:disabled:hover {
--tw-border-opacity: 0;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
.btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
}
.dropdown.dropdown-hover:hover .dropdown-content {
--tw-scale-x: 1;
--tw-scale-y: 1;
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(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
cursor: pointer;
background-color: hsl(var(--bc) / 0.1);
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
outline: 2px solid transparent;
outline-offset: 2px;
}
.tab[disabled],
.tab[disabled]:hover {
cursor: not-allowed;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
}
.dropdown:is(details) summary::-webkit-details-marker {
display: none;
}
.footer {
display: grid;
width: 100%;
grid-auto-flow: row;
place-items: start;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 2.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.footer > * {
display: grid;
place-items: start;
gap: 0.5rem;
}
@media (min-width: 48rem) {
.footer {
grid-auto-flow: column;
}
.footer-center {
grid-auto-flow: row dense;
}
}
.label {
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
align-items: center;
justify-content: space-between;
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.input {
flex-shrink: 1;
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1rem;
line-height: 2;
line-height: 1.5rem;
border-width: 1px;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 0;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-btn, 0.5rem);
}
.input-group > .input {
isolation: isolate;
}
.input-group > *,
.input-group > .input,
.input-group > .textarea,
.input-group > .select {
border-radius: 0px;
}
.join {
display: inline-flex;
align-items: stretch;
border-radius: var(--rounded-btn, 0.5rem);
}
.join :where(.join-item) {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: 0;
border-start-start-radius: 0;
}
.join .join-item:not(:first-child):not(:last-child),
.join *:not(:first-child):not(:last-child) .join-item {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: 0;
border-start-start-radius: 0;
}
.join .join-item:first-child:not(:last-child),
.join *:first-child:not(:last-child) .join-item {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.join .dropdown .join-item:first-child:not(:last-child),
.join *:first-child:not(:last-child) .dropdown .join-item {
border-start-end-radius: inherit;
border-end-end-radius: inherit;
}
.join :where(.join-item:first-child:not(:last-child)),
.join :where(*:first-child:not(:last-child) .join-item) {
border-end-start-radius: inherit;
border-start-start-radius: inherit;
}
.join .join-item:last-child:not(:first-child),
.join *:last-child:not(:first-child) .join-item {
border-end-start-radius: 0;
border-start-start-radius: 0;
}
.join :where(.join-item:last-child:not(:first-child)),
.join :where(*:last-child:not(:first-child) .join-item) {
border-start-end-radius: inherit;
border-end-end-radius: inherit;
}
@supports not selector(:has(*)) {
:where(.join *) {
border-radius: inherit;
}
}
@supports selector(:has(*)) {
:where(.join *:has(.join-item)) {
border-radius: inherit;
}
}
.link {
cursor: pointer;
text-decoration-line: underline;
}
.menu {
display: flex;
flex-direction: column;
flex-wrap: wrap;
font-size: 0.875rem;
line-height: 1.25rem;
padding: 0.5rem;
}
.menu :where(li ul) {
position: relative;
white-space: nowrap;
margin-left: 1rem;
padding-left: 0.5rem;
}
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
display: grid;
grid-auto-flow: column;
align-content: flex-start;
align-items: center;
gap: 0.5rem;
grid-auto-columns: minmax(auto, max-content) auto max-content;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.menu li.disabled {
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
color: hsl(var(--bc) / 0.3);
}
.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
display: none;
}
:where(.menu li) {
position: relative;
display: flex;
flex-shrink: 0;
flex-direction: column;
flex-wrap: wrap;
align-items: stretch;
}
:where(.menu li) .badge {
justify-self: end;
}
.progress {
position: relative;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
overflow: hidden;
height: 0.5rem;
background-color: hsl(var(--bc) / 0.2);
border-radius: var(--rounded-box, 1rem);
}
.range {
height: 1.5rem;
width: 100%;
cursor: pointer;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
--range-shdw: var(--bc);
overflow: hidden;
background-color: transparent;
border-radius: var(--rounded-box, 1rem);
}
.range:focus {
outline: none;
}
.select {
display: inline-flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 3rem;
padding-left: 1rem;
padding-right: 2.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 2;
min-height: 3rem;
border-width: 1px;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 0;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-btn, 0.5rem);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1px + 50%),
calc(100% - 16.1px) calc(1px + 50%);
background-size: 4px 4px,
4px 4px;
background-repeat: no-repeat;
}
.select[multiple] {
height: auto;
}
.stats {
display: inline-grid;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
border-radius: var(--rounded-box, 1rem);
}
:where(.stats) {
grid-auto-flow: column;
overflow-x: auto;
}
.steps {
display: inline-grid;
grid-auto-flow: column;
overflow: hidden;
overflow-x: auto;
counter-reset: step;
grid-auto-columns: 1fr;
}
.steps .step {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-columns: auto;
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-template-rows: 40px 1fr;
place-items: center;
text-align: center;
min-width: 4rem;
}
.tab {
position: relative;
display: inline-flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
height: 2rem;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 2;
--tab-padding: 1rem;
--tw-text-opacity: 0.5;
--tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
--tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
--tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
color: var(--tab-color);
padding-left: var(--tab-padding, 1rem);
padding-right: var(--tab-padding, 1rem);
}
.table {
position: relative;
width: 100%;
text-align: left;
font-size: 0.875rem;
line-height: 1.25rem;
border-radius: var(--rounded-box, 1rem);
}
.table :where(.table-pin-rows thead tr) {
position: sticky;
top: 0px;
z-index: 1;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.table :where(.table-pin-rows tfoot tr) {
position: sticky;
bottom: 0px;
z-index: 1;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.table :where(.table-pin-cols tr th) {
position: sticky;
left: 0px;
right: 0px;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.toggle {
flex-shrink: 0;
--tglbg: hsl(var(--b1));
--handleoffset: 1.5rem;
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
--togglehandleborder: 0 0;
height: 1.5rem;
width: 3rem;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-width: 1px;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 0.2;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.5;
border-radius: var(--rounded-badge, 1.9rem);
transition: background,
box-shadow var(--animation-input, 0.2s) ease-out;
box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
0 0 0 2px var(--tglbg) inset,
var(--togglehandleborder);
}
.btm-nav > *:where(.active) {
border-top-width: 2px;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.btm-nav > * .label {
font-size: 1rem;
line-height: 1.5rem;
}
.btn:active:hover,
.btn:active:focus {
animation: button-pop 0s ease-out;
transform: scale(var(--btn-focus-scale, 0.97));
}
.btn:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
}
.btn-primary {
--tw-border-opacity: 1;
border-color: hsl(var(--p) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
outline-color: hsl(var(--p) / 1);
}
.btn-primary.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
}
.btn.glass {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline-color: currentColor;
}
.btn.glass.btn-active {
--glass-opacity: 25%;
--glass-border-opacity: 15%;
}
.btn-ghost {
border-width: 1px;
border-color: transparent;
background-color: transparent;
color: currentColor;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline-color: currentColor;
}
.btn-ghost.btn-active {
--tw-border-opacity: 0;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
}
.btn-outline {
border-color: currentColor;
background-color: transparent;
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-outline.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--b1) / var(--tw-text-opacity));
}
.btn-outline.btn-primary {
--tw-text-opacity: 1;
color: hsl(var(--p) / var(--tw-text-opacity));
}
.btn-outline.btn-primary.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn-outline.btn-secondary {
--tw-text-opacity: 1;
color: hsl(var(--s) / var(--tw-text-opacity));
}
.btn-outline.btn-secondary.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--sf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--sc) / var(--tw-text-opacity));
}
.btn-outline.btn-accent {
--tw-text-opacity: 1;
color: hsl(var(--a) / var(--tw-text-opacity));
}
.btn-outline.btn-accent.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--af) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--af) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--ac) / var(--tw-text-opacity));
}
.btn-outline.btn-success {
--tw-text-opacity: 1;
color: hsl(var(--su) / var(--tw-text-opacity));
}
.btn-outline.btn-success.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--su) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--suc) / var(--tw-text-opacity));
}
.btn-outline.btn-info {
--tw-text-opacity: 1;
color: hsl(var(--in) / var(--tw-text-opacity));
}
.btn-outline.btn-info.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--in) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--inc) / var(--tw-text-opacity));
}
.btn-outline.btn-warning {
--tw-text-opacity: 1;
color: hsl(var(--wa) / var(--tw-text-opacity));
}
.btn-outline.btn-warning.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--wa) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--wac) / var(--tw-text-opacity));
}
.btn-outline.btn-error {
--tw-text-opacity: 1;
color: hsl(var(--er) / var(--tw-text-opacity));
}
.btn-outline.btn-error.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--er) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--erc) / var(--tw-text-opacity));
}
.btn.btn-disabled,
.btn[disabled],
.btn:disabled {
--tw-border-opacity: 0;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
.btn-group > input[type="radio"]:checked.btn,
.btn-group > .btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--p) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-color: hsl(var(--p) / 1);
}
.btn:is(input[type="checkbox"]:checked),
.btn:is(input[type="radio"]:checked) {
--tw-border-opacity: 1;
border-color: hsl(var(--p) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
outline-color: hsl(var(--p) / 1);
}
@keyframes button-pop {
0% {
transform: scale(var(--btn-focus-scale, 0.98));
}
40% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}
.card.compact .card-body {
padding: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
@keyframes checkmark {
0% {
background-position-y: 5px;
}
50% {
background-position-y: -2px;
}
100% {
background-position-y: 0;
}
}
.dropdown.dropdown-open .dropdown-content,
.dropdown:focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
--tw-scale-x: 1;
--tw-scale-y: 1;
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));
}
.input input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.input[list]::-webkit-calendar-picker-indicator {
line-height: 1em;
}
.input:focus,
.input:focus-within {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: hsl(var(--bc) / 0.2);
}
.input-disabled,
.input:disabled,
.input[disabled] {
cursor: not-allowed;
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
--tw-text-opacity: 0.2;
}
.input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.input-disabled::placeholder,
.input:disabled::placeholder,
.input[disabled]::placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.join > :where(*:not(:first-child)) {
margin-top: 0px;
margin-bottom: 0px;
margin-left: -1px;
}
.link:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
:where(.menu li:empty) {
background-color: hsl(var(--bc) / 0.1);
margin: 0.5rem 1rem;
height: 1px;
}
.menu :where(li ul):before {
position: absolute;
bottom: 0.75rem;
left: 0px;
top: 0.75rem;
width: 1px;
background-color: hsl(var(--bc) / 0.1);
content: "";
}
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: left;
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-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-duration: 200ms;
border-radius: var(--rounded-btn, 0.5rem);
text-wrap: balance;
}
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active):focus,
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):is(summary):not(.active):focus-visible,
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active).focus,
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible {
cursor: pointer;
background-color: hsl(var(--bc) / 0.1);
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
outline: 2px solid transparent;
outline-offset: 2px;
}
.menu li > *:not(ul):not(.menu-title):not(details):active,
.menu li > *:not(ul):not(.menu-title):not(details).active,
.menu li > details > summary:active {
--tw-bg-opacity: 1;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--nc) / var(--tw-text-opacity));
}
.menu :where(li > details > summary)::-webkit-details-marker {
display: none;
}
.menu :where(li > details > summary):after,
.menu :where(li > .menu-dropdown-toggle):after {
justify-self: end;
display: block;
margin-top: -0.5rem;
height: 0.5rem;
width: 0.5rem;
transform: rotate(45deg);
transition-property: transform, margin-top;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
content: "";
transform-origin: 75% 75%;
box-shadow: 2px 2px;
pointer-events: none;
}
.menu :where(li > details[open] > summary):after,
.menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
transform: rotate(225deg);
margin-top: 0;
}
.mockup-phone .display {
overflow: hidden;
border-radius: 40px;
margin-top: -25px;
}
.mockup-browser .mockup-browser-toolbar .input {
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
height: 1.75rem;
width: 24rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
padding-left: 2rem;
}
.mockup-browser .mockup-browser-toolbar .input:before {
content: "";
position: absolute;
left: 0.5rem;
top: 50%;
aspect-ratio: 1 / 1;
height: 0.75rem;
--tw-translate-y: -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));
border-radius: 9999px;
border-width: 2px;
border-color: currentColor;
opacity: 0.6;
}
.mockup-browser .mockup-browser-toolbar .input:after {
content: "";
position: absolute;
left: 1.25rem;
top: 50%;
height: 0.5rem;
--tw-translate-y: 25%;
--tw-rotate: -45deg;
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));
border-radius: 9999px;
border-width: 1px;
border-color: currentColor;
opacity: 0.6;
}
@keyframes modal-pop {
0% {
opacity: 0;
}
}
.progress::-moz-progress-bar {
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
}
.progress:indeterminate {
--progress-color: hsl(var(--bc));
background-image: repeating-linear-gradient(
90deg,
var(--progress-color) -1%,
var(--progress-color) 10%,
transparent 10%,
transparent 90%
);
background-size: 200%;
background-position-x: 15%;
animation: progress-loading 5s ease-in-out infinite;
}
.progress::-webkit-progress-bar {
background-color: transparent;
border-radius: var(--rounded-box, 1rem);
}
.progress::-webkit-progress-value {
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
}
.progress:indeterminate::-moz-progress-bar {
background-color: transparent;
background-image: repeating-linear-gradient(
90deg,
var(--progress-color) -1%,
var(--progress-color) 10%,
transparent 10%,
transparent 90%
);
background-size: 200%;
background-position-x: 15%;
animation: progress-loading 5s ease-in-out infinite;
}
@keyframes progress-loading {
50% {
background-position-x: -115%;
}
}
@keyframes radiomark {
0% {
box-shadow: 0 0 0 12px hsl(var(--b1)) inset,
0 0 0 12px hsl(var(--b1)) inset;
}
50% {
box-shadow: 0 0 0 3px hsl(var(--b1)) inset,
0 0 0 3px hsl(var(--b1)) inset;
}
100% {
box-shadow: 0 0 0 4px hsl(var(--b1)) inset,
0 0 0 4px hsl(var(--b1)) inset;
}
}
.range:focus-visible::-webkit-slider-thumb {
--focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
}
.range:focus-visible::-moz-range-thumb {
--focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
}
.range::-webkit-slider-runnable-track {
height: 0.5rem;
width: 100%;
background-color: hsl(var(--bc) / 0.1);
border-radius: var(--rounded-box, 1rem);
}
.range::-moz-range-track {
height: 0.5rem;
width: 100%;
background-color: hsl(var(--bc) / 0.1);
border-radius: var(--rounded-box, 1rem);
}
.range::-webkit-slider-thumb {
position: relative;
height: 1.5rem;
width: 1.5rem;
border-style: none;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
appearance: none;
-webkit-appearance: none;
top: 50%;
color: hsl(var(--range-shdw));
transform: translateY(-50%);
--filler-size: 100rem;
--filler-offset: 0.6rem;
box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset,
var(--focus-shadow, 0 0),
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
}
.range::-moz-range-thumb {
position: relative;
height: 1.5rem;
width: 1.5rem;
border-style: none;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
top: 50%;
color: hsl(var(--range-shdw));
--filler-size: 100rem;
--filler-offset: 0.5rem;
box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset,
var(--focus-shadow, 0 0),
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
}
@keyframes rating-pop {
0% {
transform: translateY(-0.125em);
}
40% {
transform: translateY(-0.125em);
}
100% {
transform: translateY(0);
}
}
.select:focus {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: hsl(var(--bc) / 0.2);
}
.select-disabled,
.select:disabled,
.select[disabled] {
cursor: not-allowed;
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
--tw-text-opacity: 0.2;
}
.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.select-disabled::placeholder,
.select:disabled::placeholder,
.select[disabled]::placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.select-multiple,
.select[multiple],
.select[size].select:not([size="1"]) {
background-image: none;
padding-right: 1rem;
}
[dir="rtl"] .select {
background-position: calc(0% + 12px) calc(1px + 50%),
calc(0% + 16px) calc(1px + 50%);
}
:where(.stats) > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
--tw-divide-y-reverse: 0;
border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}
.steps .step:before {
top: 0px;
grid-column-start: 1;
grid-row-start: 1;
height: 0.5rem;
width: 100%;
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));
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
content: "";
margin-left: -100%;
}
.steps .step:after {
content: counter(step);
counter-increment: step;
z-index: 1;
position: relative;
grid-column-start: 1;
grid-row-start: 1;
display: grid;
height: 2rem;
width: 2rem;
place-items: center;
place-self: center;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
}
.steps .step:first-child:before {
content: none;
}
.steps .step[data-content]:after {
content: attr(data-content);
}
.steps .step-neutral + .step-neutral:before,
.steps .step-neutral:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--nc) / var(--tw-text-opacity));
}
.steps .step-primary + .step-primary:before,
.steps .step-primary:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.steps .step-secondary + .step-secondary:before,
.steps .step-secondary:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--s) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--sc) / var(--tw-text-opacity));
}
.steps .step-accent + .step-accent:before,
.steps .step-accent:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--a) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--ac) / var(--tw-text-opacity));
}
.steps .step-info + .step-info:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
}
.steps .step-info:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--inc) / var(--tw-text-opacity));
}
.steps .step-success + .step-success:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
}
.steps .step-success:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--suc) / var(--tw-text-opacity));
}
.steps .step-warning + .step-warning:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
}
.steps .step-warning:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--wac) / var(--tw-text-opacity));
}
.steps .step-error + .step-error:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
}
.steps .step-error:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--erc) / var(--tw-text-opacity));
}
.tab.tab-active:not(.tab-disabled):not([disabled]) {
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 1;
--tw-text-opacity: 1;
}
.tab:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.tab:focus-visible {
outline: 2px solid currentColor;
outline-offset: -3px;
}
.tab:focus-visible.tab-lifted {
border-bottom-right-radius: var(--tab-radius, 0.5rem);
border-bottom-left-radius: var(--tab-radius, 0.5rem);
}
.tab-disabled,
.tab[disabled] {
cursor: not-allowed;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
.tabs-boxed .tab {
border-radius: var(--rounded-btn, 0.5rem);
}
.table :where(th, td) {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
vertical-align: middle;
}
.table tr.active,
.table tr.active:nth-child(even),
.table-zebra tbody tr:nth-child(even) {
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
}
.table-zebra tr.active,
.table-zebra tr.active:nth-child(even),
.table-zebra-zebra tbody tr:nth-child(even) {
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
}
.table :where(thead, tbody) :where(tr:not(:last-child)),
.table :where(thead, tbody) :where(tr:first-child:last-child) {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-bottom-color: hsl(var(--b2) / var(--tw-border-opacity));
}
.table :where(thead, tfoot) {
white-space: nowrap;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
color: hsl(var(--bc) / 0.6);
}
@keyframes toast-pop {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
[dir="rtl"] .toggle {
--handleoffsetcalculator: calc(var(--handleoffset) * 1);
}
.toggle:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: hsl(var(--bc) / 0.2);
}
.toggle:checked,
.toggle[checked="true"],
.toggle[aria-checked="true"] {
--handleoffsetcalculator: var(--handleoffset);
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
}
[dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[checked="true"], [dir="rtl"] .toggle[aria-checked="true"] {
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
}
.toggle:indeterminate {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
0 0 0 2px var(--tglbg) inset;
}
[dir="rtl"] .toggle:indeterminate {
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
0 0 0 2px var(--tglbg) inset;
}
.toggle:disabled {
cursor: not-allowed;
--tw-border-opacity: 1;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
background-color: transparent;
opacity: 0.3;
--togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset,
var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset;
}
:root .prose {
--tw-prose-body: hsl(var(--bc) / 0.8);
--tw-prose-headings: hsl(var(--bc));
--tw-prose-lead: hsl(var(--bc));
--tw-prose-links: hsl(var(--bc));
--tw-prose-bold: hsl(var(--bc));
--tw-prose-counters: hsl(var(--bc));
--tw-prose-bullets: hsl(var(--bc) / 0.5);
--tw-prose-hr: hsl(var(--bc) / 0.2);
--tw-prose-quotes: hsl(var(--bc));
--tw-prose-quote-borders: hsl(var(--bc) / 0.2);
--tw-prose-captions: hsl(var(--bc) / 0.5);
--tw-prose-code: hsl(var(--bc));
--tw-prose-pre-code: hsl(var(--nc));
--tw-prose-pre-bg: hsl(var(--n));
--tw-prose-th-borders: hsl(var(--bc) / 0.5);
--tw-prose-td-borders: hsl(var(--bc) / 0.2);
}
.prose :where(code):not(:where([class~="not-prose"] *)) {
padding: 2px 8px;
border-radius: var(--rounded-badge);
}
.prose code:after,
.prose code:before {
content: none;
}
.prose pre code {
border-radius: 0;
padding: 0;
}
.prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)) {
border-bottom-color: hsl(var(--bc) / 20%);
}
.rounded-box {
border-radius: var(--rounded-box, 1rem);
}
.btm-nav-xs > *:where(.active) {
border-top-width: 1px;
}
.btm-nav-sm > *:where(.active) {
border-top-width: 2px;
}
.btm-nav-md > *:where(.active) {
border-top-width: 2px;
}
.btm-nav-lg > *:where(.active) {
border-top-width: 4px;
}
.btn-block {
width: 100%;
}
.btn-square:where(.btn-xs) {
height: 1.5rem;
width: 1.5rem;
padding: 0px;
}
.btn-square:where(.btn-sm) {
height: 2rem;
width: 2rem;
padding: 0px;
}
.btn-square:where(.btn-md) {
height: 3rem;
width: 3rem;
padding: 0px;
}
.btn-square:where(.btn-lg) {
height: 4rem;
width: 4rem;
padding: 0px;
}
.join.join-vertical {
flex-direction: column;
}
.join.join-vertical .join-item:first-child:not(:last-child),
.join.join-vertical *:first-child:not(:last-child) .join-item {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.join.join-vertical .join-item:last-child:not(:first-child),
.join.join-vertical *:last-child:not(:first-child) .join-item {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.join.join-horizontal {
flex-direction: row;
}
.join.join-horizontal .join-item:first-child:not(:last-child),
.join.join-horizontal *:first-child:not(:last-child) .join-item {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: inherit;
border-top-left-radius: inherit;
}
.join.join-horizontal .join-item:last-child:not(:first-child),
.join.join-horizontal *:last-child:not(:first-child) .join-item {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: inherit;
border-top-right-radius: inherit;
}
.steps-horizontal .step {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
place-items: center;
text-align: center;
}
.steps-vertical .step {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.avatar.online:before {
content: "";
position: absolute;
z-index: 10;
display: block;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
outline-style: solid;
outline-width: 2px;
outline-color: hsl(var(--b1) / 1);
width: 15%;
height: 15%;
top: 7%;
right: 7%;
}
.btn-group .btn:not(:first-child):not(:last-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group .btn:first-child:not(:last-child) {
margin-left: -1px;
margin-top: -0px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
border-bottom-right-radius: 0;
}
.btn-group .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.btn-group-horizontal .btn:not(:first-child):not(:last-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group-horizontal .btn:first-child:not(:last-child) {
margin-left: -1px;
margin-top: -0px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
border-bottom-right-radius: 0;
}
.btn-group-horizontal .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.btn-group-vertical .btn:first-child:not(:last-child) {
margin-left: -0px;
margin-top: -1px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group-vertical .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.join.join-vertical > :where(*:not(:first-child)) {
margin-left: 0px;
margin-right: 0px;
margin-top: -1px;
}
.join.join-horizontal > :where(*:not(:first-child)) {
margin-top: 0px;
margin-bottom: 0px;
margin-left: -1px;
}
.menu-sm :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
.menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
border-radius: var(--rounded-btn, 0.5rem);
}
.menu-sm .menu-title {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.steps-horizontal .step {
grid-template-rows: 40px 1fr;
grid-template-columns: auto;
min-width: 4rem;
}
.steps-horizontal .step:before {
height: 0.5rem;
width: 100%;
--tw-translate-x: 0px;
--tw-translate-y: 0px;
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));
content: "";
margin-left: -100%;
}
.steps-vertical .step {
gap: 0.5rem;
grid-template-columns: 40px 1fr;
grid-template-rows: auto;
min-height: 4rem;
justify-items: start;
}
.steps-vertical .step:before {
height: 100%;
width: 0.5rem;
--tw-translate-x: -50%;
--tw-translate-y: -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));
margin-left: 50%;
}
[dir="rtl"] .steps-vertical .step:before {
margin-right: auto;
}
.invisible {
visibility: hidden;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-inset-px {
inset: -1px;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.-top-3 {
top: -0.75rem;
}
.bottom-4 {
bottom: 1rem;
}
.right-4 {
right: 1rem;
}
.top-0 {
top: 0px;
}
.isolate {
isolation: isolate;
}
.-z-10 {
z-index: -10;
}
.z-\[1\] {
z-index: 1;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-36 {
margin-bottom: 9rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.block {
display: block;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.aspect-\[1155\/678\] {
aspect-ratio: 1155/678;
}
.h-14 {
height: 3.5rem;
}
.h-6 {
height: 1.5rem;
}
.h-\[60px\] {
height: 60px;
}
.min-h-screen {
min-height: 100vh;
}
.w-14 {
width: 3.5rem;
}
.w-5 {
width: 1.25rem;
}
.w-52 {
width: 13rem;
}
.w-\[60px\] {
width: 60px;
}
.w-\[72\.1875rem\] {
width: 72.1875rem;
}
.w-full {
width: 100%;
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-full {
max-width: 100%;
}
.max-w-lg {
max-width: 32rem;
}
.flex-none {
flex: none;
}
.transform {
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));
}
.transform-gpu {
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-12 {
gap: 3rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.gap-x-2 {
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.gap-y-6 {
row-gap: 1.5rem;
}
.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));
}
.overflow-hidden {
overflow: hidden;
}
.scroll-smooth {
scroll-behavior: smooth;
}
.break-words {
overflow-wrap: break-word;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-3xl {
border-radius: 1.5rem;
}
.rounded-\[250px\] {
border-radius: 250px;
}
.rounded-\[75px\] {
border-radius: 75px;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-t-3xl {
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
}
.border-2 {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-base-200 {
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
}
.border-zinc-700 {
--tw-border-opacity: 1;
border-color: rgb(63 63 70 / var(--tw-border-opacity));
}
.bg-\[\#18171e\] {
--tw-bg-opacity: 1;
background-color: rgb(24 23 30 / var(--tw-bg-opacity));
}
.bg-base-100 {
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-indigo-500 {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
}
.bg-primary {
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
}
.bg-white\/60 {
background-color: rgb(255 255 255 / 0.6);
}
.bg-zinc-800 {
--tw-bg-opacity: 1;
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
.bg-zinc-900 {
--tw-bg-opacity: 1;
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-\[\#44BCFF\] {
--tw-gradient-from: #44BCFF var(--tw-gradient-from-position);
--tw-gradient-to: rgb(68 188 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#ff80b5\] {
--tw-gradient-from: #ff80b5 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 128 181 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#FF44EC\] {
--tw-gradient-to: rgb(255 68 236 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #FF44EC var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#9089fc\] {
--tw-gradient-to: #9089fc var(--tw-gradient-to-position);
}
.to-\[\#FF675E\] {
--tw-gradient-to: #FF675E var(--tw-gradient-to-position);
}
.p-2 {
padding: 0.5rem;
}
.p-8 {
padding: 2rem;
}
.p-\[75px\] {
padding: 75px;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-3\.5 {
padding-left: 0.875rem;
padding-right: 0.875rem;
}
.px-36 {
padding-left: 9rem;
padding-right: 9rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-\[75px\] {
padding-left: 75px;
padding-right: 75px;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pb-\[75px\] {
padding-bottom: 75px;
}
.pt-\[75px\] {
padding-top: 75px;
}
.text-center {
text-align: center;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.text-\[32px\] {
font-size: 32px;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.leading-6 {
line-height: 1.5rem;
}
.leading-7 {
line-height: 1.75rem;
}
.leading-8 {
line-height: 2rem;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-green-400 {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity));
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity));
}
.text-indigo-400 {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity));
}
.text-indigo-600 {
--tw-text-opacity: 1;
color: rgb(79 70 229 / var(--tw-text-opacity));
}
.text-primary {
--tw-text-opacity: 1;
color: hsl(var(--p) / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.opacity-30 {
opacity: 0.3;
}
.opacity-70 {
opacity: 0.7;
}
.mix-blend-lighten {
mix-blend-mode: lighten;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
--tw-ring-inset: inset;
}
.ring-gray-900\/10 {
--tw-ring-color: rgb(17 24 39 / 0.1);
}
.ring-indigo-200 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
}
.blur-3xl {
--tw-blur: blur(64px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-lg {
--tw-blur: blur(16px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-1000 {
transition-duration: 1000ms;
}
.duration-200 {
transition-duration: 200ms;
}
.hover\:bg-indigo-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.hover\:bg-zinc-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:ring-indigo-300:hover {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-gray-900:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
.focus-visible\:outline:focus-visible {
outline-style: solid;
}
.focus-visible\:outline-2:focus-visible {
outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
outline-offset: 2px;
}
.focus-visible\:outline-indigo-500:focus-visible {
outline-color: #6366f1;
}
.focus-visible\:outline-indigo-600:focus-visible {
outline-color: #4f46e5;
}
.group:hover .group-hover\:-inset-1 {
inset: -0.25rem;
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.group:hover .group-hover\:duration-200 {
transition-duration: 200ms;
}
@media (prefers-color-scheme: dark) {
.dark\:text-green-400 {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity));
}
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
}
@media (min-width: 640px) {
.sm\:mx-8 {
margin-left: 2rem;
margin-right: 2rem;
}
.sm\:mt-10 {
margin-top: 2.5rem;
}
.sm\:mt-20 {
margin-top: 5rem;
}
.sm\:gap-y-0 {
row-gap: 0px;
}
.sm\:rounded-b-none {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.sm\:p-10 {
padding: 2.5rem;
}
.sm\:py-32 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.sm\:text-5xl {
font-size: 3rem;
line-height: 1;
}
}
@media (min-width: 768px) {
.md\:flex {
display: flex;
}
.md\:hidden {
display: none;
}
.md\:w-1\/2 {
width: 50%;
}
.md\:bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.md\:from-zinc-900 {
--tw-gradient-from: #18181b var(--tw-gradient-from-position);
--tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.md\:to-zinc-800 {
--tw-gradient-to: #27272a var(--tw-gradient-to-position);
}
}
@media (min-width: 1024px) {
.lg\:sticky {
position: sticky;
}
.lg\:order-first {
order: -9999;
}
.lg\:col-span-3 {
grid-column: span 3 / span 3;
}
.lg\:col-span-8 {
grid-column: span 8 / span 8;
}
.lg\:mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.lg\:block {
display: block;
}
.lg\:grid {
display: grid;
}
.lg\:hidden {
display: none;
}
.lg\:h-screen {
height: 100vh;
}
.lg\:w-1\/2 {
width: 50%;
}
.lg\:max-w-4xl {
max-width: 56rem;
}
.lg\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:overflow-y-scroll {
overflow-y: scroll;
}
.lg\:rounded-bl-3xl {
border-bottom-left-radius: 1.5rem;
}
.lg\:rounded-tr-none {
border-top-right-radius: 0px;
}
.lg\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1280px) {
.xl\:mb-0 {
margin-bottom: 0px;
}
.xl\:w-1\/5 {
width: 20%;
}
}
</style>
</head>
<body id='body'>
<header class="flex items-center bg-zinc-900 py-4 px-8 shadow-xl justify-between">
<a href="/" aria-label="Home" class="flex items-center gap-4 bg-[#18171e] rounded-lg px-4">
<img
src="/img/pockethost-cloud-logo.jpg"
alt="logo"
width="450"
height="450"
class="w-14 h-14 rounded-lg"
/>
<h1 class="text-green-700 dark:text-white font-bold text-2xl"
>PocketHost</h1
>
</a>
<div class="md:flex hidden gap-2">
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/'>Home</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/blog'>Blog</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/docs/overview/introduction'>Docs</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='https://discord.gg/nVTxCMEcGT'>Support</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='https://github.com/pockethost/pockethost'><i class="fa-brands fa-github"></i></a>
</div>
<div class="block md:hidden">
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost lg:hidden">
<i class="fa-regular fa-bars text-2xl"></i>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow-2xl bg-base-100 border-4 border-base-200 rounded-box w-52">
<li><a class='py-3 font-bold' href='/'>Home</a></li>
<li><a class='py-3 font-bold' href='/blog'>Blog</a></li>
<li><a class='py-3 font-bold' href='/docs/overview/introduction'>Docs</a></li>
<li><a class='py-3 font-bold' href='https://discord.gg/nVTxCMEcGT'>Support</a></li>
<li><a class='py-3 font-bold' href='https://github.com/pockethost/pockethost'><i class="fa-brands fa-github"></i> GitHub</a> </li>
</ul>
</div>
</div>
</header>
<main>
<div class='prose mx-auto py-8 px-4'>
<h1 class='text-white font-bold'>PocketHost 0.8.0</h1>
<div class='text-green-400 font-bold'>
<time datetime="2023-06-19">19 June 2023</time>
</div>
<div class='mb-36'>
<h1 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview">#</a></h1>
<p>Dive into the new world of cloud hosting with PocketHost 0.8.0 tailored exclusively for Nodejs developers. This paradigm-shifting update revamps the already robust PocketHost by adding a plethora of new enhancements. Expect a sleeker, intuitive control panel alongside faster operations to supercharge your PocketBase deployment without batting an eye.</p>
<p>Midnight oil was burned redesigning the instance user interface on the dashboard, bringing you more structure and lucidity. Beware of the added <em>Danger Zone</em>—a trapdoor leading to the potentially destructive settings for your beloved PocketBase instance. Fear not at the sight of the unknown; for the first time, instances can be renamed offering a new level of personalization to your cloud terrain.</p>
<p>PocketHost 0.8.0 gives you the reigns of your instance with Maintenance Mode—allowing you to disengage running copies and keep them inoperational until you see fit. This proves vital during backups and restores, making them a breeze. Underneath this delightfully tidy UI and heightened control, this update hides a heart of iron. The code managing the launch and closure of instances underwent a complete overhaul, optimizing for superior stability and performance.</p>
<p>So, strap in, and prepare to traverse the cloud-scapes of PocketHost 0.8.0 with a heightened sense of control, crystal clarity, and unshakable stability. Be forewarned, this journey isn’t for the faint-hearted!</p>
<p>PocketHost is the zero-config 'PocketBase in the cloud' platform. Thank you for everyone's continued support for this project.</p>
<h2 id="what-s-new" tabindex="-1">What's New <a class="header-anchor" href="#what-s-new">#</a></h2>
<p>There are several MAJOR changes in this release.</p>
<h3 id="new-instance-ui" tabindex="-1">New Instance UI <a class="header-anchor" href="#new-instance-ui">#</a></h3>
<p>The instance UI in the dashboard has been redesigned to improve organization and clarity.</p>
<h3 id="danger-zone" tabindex="-1">Danger Zone <a class="header-anchor" href="#danger-zone">#</a></h3>
<p>A new accordion tab, <em>Danger Zone</em>, has been added. This tab contains potentially harmful or destructive settings for your PocketBase instance.</p>
<h3 id="rename-instance" tabindex="-1">Rename Instance <a class="header-anchor" href="#rename-instance">#</a></h3>
<p>Instances can now be renamed.</p>
<h3 id="instance-permalink" tabindex="-1">Instance Permalink <a class="header-anchor" href="#instance-permalink">#</a></h3>
<p>Every instance is accessible from <code>https://&lt;uuid&gt;.pockethost.io</code></p>
<h3 id="maintenance-mode" tabindex="-1">Maintenance Mode <a class="header-anchor" href="#maintenance-mode">#</a></h3>
<p>You can now put your PocketHost instance in Maintenance Mode. Maintenance mode will shut down any running copies of the instance and keep it shut down until you take it out of maintenance mode. This is helpful for backups and restores in particular.</p>
<h3 id="stability-improvements" tabindex="-1">Stability Improvements <a class="header-anchor" href="#stability-improvements">#</a></h3>
<p>In this release, the code managing the launching and shutting down of instances has been completey reworked. The result is dramatically improved stability and performance.</p>
<h3 id="stress-testing" tabindex="-1">Stress Testing <a class="header-anchor" href="#stress-testing">#</a></h3>
<p>Each release of PocketHost is now tested with 500 simultaneous requests to hundreds of different PocketBase instances. Stress testing revealed some rare error conditions which have been corrected.</p>
<h2 id="change-log" tabindex="-1">Change log <a class="header-anchor" href="#change-log">#</a></h2>
<ul>
<li>fix: instance store and realtime responsiveness</li>
<li>fix: instance shutdown while in unhealthy state</li>
<li>fix: frontend logger refactor</li>
<li>enh: dashbaord for large number of instances</li>
<li>Feat: mega stability overhaul, maintenance mode, rename, respond by uuid</li>
<li>refactor: version change</li>
<li>enh: process killing enhancements</li>
<li>enh: version download enhancements</li>
<li>refactor: rpc commands</li>
<li>enh: autocancel behavior for instance client mixin</li>
<li>enh: downloadManager serialization guard</li>
<li>enh: SqliteService async serialization enhancements</li>
<li>enh: start central pocketbase at daemon port base</li>
<li>fix: createInvocation autocancel key</li>
<li>enh: logging output</li>
<li>fix: remove async promise handler pattern from InstanceLoggerService</li>
<li>chore: FtpService logging and code formatting enhancements</li>
<li>fix: handle preflight exceptions in tryCatch</li>
<li>enh: SqliteLogger logging</li>
<li>chore: remove backups table from db</li>
<li>chore: remove RPC commands support from db</li>
<li>fix: remove async promise handler (won't catch errors)</li>
<li>fix: undefined value in TimerManager</li>
<li>enh: cleanupManager async cleanups and singleton shutdown</li>
<li>enh: safeCatch logging and handling</li>
<li>enh: terminal colors for logging</li>
<li>enh: RPC hygen templates</li>
<li>fix: faq link</li>
<li>enh: instance overview formatting</li>
<li>enh: running-&gt;version</li>
<li>enh: organize instance info in accordion</li>
<li>fix: secrets form dark mode</li>
<li>enh: add admin link to instance title</li>
<li>enh: bootstrap 5.3 update, hljs dark mode</li>
<li>fix: remove WorkerLogFields reference</li>
<li>cos: tiny button refactor &amp; reduce size of code copy button</li>
<li>chore: get rid of worker log fields</li>
<li>big: refactor instancemanager for proper shutdown when pocketbase fails</li>
<li>bug: reset instances on boot</li>
<li>bug: request hangs if pockethost doesn't launch</li>
<li>docs</li>
</ul>
<h2 id="stats-and-info" tabindex="-1">Stats and Info <a class="header-anchor" href="#stats-and-info">#</a></h2>
<ul>
<li>331 github stars</li>
<li>~2000 registered users</li>
<li>~2700 instances created</li>
<li>~1.5 million instance invocations to date (# times PocketBase executable has been launched)</li>
<li>~400 instances active and used in the past week</li>
</ul>
<div class='text-2xl'>
Connect with us! Join our <a href="https://discord.gg/BnhQJMgvYd">Discord server</a> or jump into <a href="https://github.com/pockethost/pockethost/discussions">GitHub Discussions</a>
</div>
</div>
<div class='mb-6'>
</div>
<div class="flex items-center justify-between py-6">
<div><a href="/blog/0.7.2/" class='btn'><i class="fa-solid fa-arrow-left"></i> PocketHost 0.7.2</a></div>
<div><a href="/blog/0.8.1/" class='btn'>PocketHost 0.8.1 <i class="fa-solid fa-arrow-right"></i></a></div>
</div>
</div>
</main>
<a href='#body' aria-label='Return to the top of the page' class='fixed bottom-4 right-4 btn btn-square'>
<i class="fa-regular fa-arrow-up"></i>
</a>
<footer></footer>
<!-- Current page: /blog/0.8.0/ -->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink