mirror of
https://github.com/pockethost/pockethost.git
synced 2025-06-12 00:56:40 +00:00
3986 lines
111 KiB
HTML
3986 lines
111 KiB
HTML
<!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>Blog - PocketHost</title>
|
||
<meta name="description" content="Get a PocketBase backend for your next app in under 10 seconds.">
|
||
|
||
<!-- Facebook Meta Tags -->
|
||
<meta property="og:url" content="https://pockethost.io/blog/">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Blog - PocketHost">
|
||
<meta property="og:description" content="Get a PocketBase backend for your next app in under 10 seconds.">
|
||
<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/">
|
||
<meta name="twitter:title" content="Blog - PocketHost">
|
||
<meta name="twitter:description" content="Get a PocketBase backend for your next app in under 10 seconds.">
|
||
<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>
|
||
|
||
|
||
|
||
<style>
|
||
.container {
|
||
max-width: 65ch;
|
||
}
|
||
</style>
|
||
|
||
<div class='container mx-auto py-8 px-4'>
|
||
<h1 class='text-4xl mb-8 font-bold'>Blog</h1>
|
||
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.9.3/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>Version 0.9.3 Update</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2023-10-11">Oct 11, 2023</time>
|
||
</div>
|
||
|
||
<p>Unveiling PocketHost v0.9.3! Dive into enhanced release prompts, streamlined docker launch, and improved debug output. Ditch the light theme toggle and redundant checks. Last chance before our major version release! So strap in and ride shotgun on our journey to Pocket perfection!</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.9.2/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.9.2: Unleashing Enhanced Security & Streamlined Experience</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2023-10-06">Oct 06, 2023</time>
|
||
</div>
|
||
|
||
<p>Unveil the latest patches, keen additions, and crucial fixes in v0.9.2 for PocketHost.io, honing its seamless performance. Get the scoop right from reversing linting errors to Cloudflare proxy enforcement for rock-solid security. It's all set for a more robust, secure, and agile developer experience. Let's deep-dive!</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.9.1/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.9.1</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2023-10-02">Oct 02, 2023</time>
|
||
</div>
|
||
|
||
<p>Discover the latest enhancements in PocketHost 0.9.1, the zero-config 'PocketBase in the cloud' platform. This maintenance release brings significant improvements to documentation, code refactoring, and a better proxy error trapping. Dive into new features, bug fixes, and a refreshed marketing approach, all geared to improve your coding experience.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.9.0/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.9.0</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2023-10-01">Oct 01, 2023</time>
|
||
</div>
|
||
|
||
<p>PocketHost 0.9.0 introduces several improvements, including PocketBase JS Hooks support, Docker containment for instances, a shift to Static Site Generation (SSG) for the UI, better logging, and deeper secrets integration. Join the discussions about upcoming v1.0 features and paid tiers on our dedicated Discord server.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.8.2/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.8.2</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2023-07-15">Jul 15, 2023</time>
|
||
</div>
|
||
|
||
<p>Discover what's new in PocketHost 0.8.2, the latest maintenance release for your favorite zero-config 'PocketBase in the cloud' platform. Explore our improved logging, FTP enhancements, database migration cleanup, and much more. Stay current and enhance your NodeJS development experience with these updates.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.8.1/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.8.1</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2023-06-23">Jun 23, 2023</time>
|
||
</div>
|
||
|
||
<p>Explore the game-changing 0.8.1 update of PocketHost, your zero-config 'PocketBase in the cloud' solution, primed with improved instance launching, enhanced logging, and refined UI. Join 2000+ developers in enjoying the comfort of seamless back-end deployment in over 2700 instances with this increasingly popular go-to platform.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.8.0/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.8.0</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2023-06-19">Jun 19, 2023</time>
|
||
</div>
|
||
|
||
<p>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 & a cranked up UI. Get ready to supercharge your PocketBase deployment like never before with faster operations and a sleek, intuitive control panel.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.7.2/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.7.2</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2023-06-14">Jun 14, 2023</time>
|
||
</div>
|
||
|
||
<p>Discover PocketHost 0.7.2, the latest update to your favorite cloud solution for PocketBase. Experience new features including adjustable PocketBase versions, improved UI, and more. With over 326 Github stars, 2000 users, 2500 instances created, and 1.5 million executions - PocketHost continues to be the ultimate zero-config platform.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.7.0/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.7.0</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2023-06-08">Jun 08, 2023</time>
|
||
</div>
|
||
|
||
<p>Experience effortless backend management with the latest PocketHost 0.7.0! It now natively integrates PocketBase updates, with the addition of migration features, letting your projects be as agile as you are. Dive into an era where lean development meets power-packed features. Maintenance mode, updates and migrations are now simpler than ever.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.7.1/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.7.1</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2023-01-23">Jan 23, 2023</time>
|
||
</div>
|
||
|
||
<p>PocketHost, the highly accoladed 'PockerBase in the cloud' service, has rolled out its v0.7.1 update. This maintenance release showcases improved FTP access, static assets management, error handling, plus a number of essential fixes while introducing an FAQ section and transitioning the docs to GitBook. Over 2000 users have been discussing these features in the cloud!</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.6.1/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.6.1</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2023-01-08">Jan 08, 2023</time>
|
||
</div>
|
||
|
||
<p>Delivering a fresh update on PocketHost 0.6.1, with a brisk fix on a pesky semver locking error. Dive in to find out how this refined version can streamline your web development journey and ignite unparalleled efficiency. Touch base with the future of a zero-config world.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.6.0/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.6.0</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-12-31">Dec 31, 2022</time>
|
||
</div>
|
||
|
||
<p>Delve into the latest updates of PocketHost 0.6.0 in this blog post. Explore the newly integrated FTP support, discover improvements in instance uptime, learn about cached PocketBase releases, and the bid adieu to the troublesome CORS PUT issue of the past.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.5.7/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.5.7</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-12-26">Dec 26, 2022</time>
|
||
</div>
|
||
|
||
<p>Dive into the nitty-gritty of the new PocketHost 0.5.7, launched on the 26th of December, 2022! With the addition of superior PATCH and DELETE CORS operations, PM2 production, and an innovative 'auto-upgrade' feature with SemVer tagging, this update resolves a myriad of production errors. It's a game-changer for NodeJS developers!</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.5.6/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.5.6</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-12-24">Dec 24, 2022</time>
|
||
</div>
|
||
|
||
<p>PocketHost 0.5.6 rolls out a game-changing update, ditching Docker and introducing PocketBase 0.10.4! Compatible across all your NodeJS programming needs, our latest version promises efficiency, stability and commitment to keep your coding streamlined and carefree, while you focus on what truly matters - your creation.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.5.5/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.5.5</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-12-18">Dec 18, 2022</time>
|
||
</div>
|
||
|
||
<p>Unleashing the latest updates on PocketHost - now bumped up to version 0.5.5! Seamlessly integrate with the newest PocketBase versions 0.9.2, 0.10.0, and 0.10.1. Dive into the world of swift project deployment with this exciting edition of PocketHost.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.5.4/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.5.4</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-12-09">Dec 09, 2022</time>
|
||
</div>
|
||
|
||
<p>Discover the latest updates on PocketHost 0.5.4 in this insightful post. Uncover essential fixes to the 'Create Instance' cancel button and the instance activity status for real-time events, coupled with chores providing support for PocketBase 0.9.0 and 0.9.1. Immerse in this technical tour that adds finesse to your PocketHost experience.
|
||
</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.5.3/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.5.3</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-11-21">Nov 21, 2022</time>
|
||
</div>
|
||
|
||
<p>Imbibe in the latest iteration of PocketHost 0.5.3! We've retrofitted our backend to provide improved dashboard details, error messages for backup discrepancies, and rejuvenated aut0-cancellation. Built on go 1.19.3, we've thrown in some slick refactoring manoeuvres for logging and async operations. Plus, we've barricaded backups for missing data directories. Enjoy!</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.5.2/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.5.2</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-11-19">Nov 19, 2022</time>
|
||
</div>
|
||
|
||
<p>Explore the latest updates to PocketHost v0.5.2 - our robust hosted backend service for NodeJS developers. This release brings rc3, rc4, and 0.8.0-final support, optimizes with yarn deduplication, enhances Typescript bootstrapping, and fixes account verification through a hard-redirect. Stay in the loop with PocketHost - the one-stop solution for smooth deployments.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.5.1/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.5.1</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-11-16">Nov 16, 2022</time>
|
||
</div>
|
||
|
||
<p>We're continuing our journey towards perfection with PocketHost 0.5.1. This update rectifies a bug causing a 404 error post-instance creation and resolves an issue with the SQLite3 build. As always, we're committed to making PocketHost the go-to backend solution for all NodeJS developers.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.5.0/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.5.0</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-11-10">Nov 10, 2022</time>
|
||
</div>
|
||
|
||
<p>Experience PocketHost 0.5.0 — your key to enhanced backend development. Newly added features include data backups, version display, UX improvements, and password reset capabilities. Now, easily view your PocketBase instance version number right from the dashboard. It's high time to change the game in backend hosting and deployment.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.4.2/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.4.2</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-11-05">Nov 05, 2022</time>
|
||
</div>
|
||
|
||
<p>Unleash the potential of PocketHost with the latest 0.4.2 update. Now, get real-time runtime metrics that display the usage of your instance in terms of minutes per month, allowing enhanced project tracking and resource management. Level-up your backend development and project efficiency with the power of PocketHost.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.4.1/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.4.1</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-11-05">Nov 05, 2022</time>
|
||
</div>
|
||
|
||
<p>Unveiling PocketHost 0.4.1! Updated to support both 0.7.10 and 0.8.0-rc2, this version is freshly juiced with go 1.19.3 and brings you some slick Docker build system updates. Dive in for an electrifying experience for NodeJS developers ready to push their creations into the world!</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.4.0/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.4.0</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-11-02">Nov 02, 2022</time>
|
||
</div>
|
||
|
||
<p>Unveiling the latest enhancement of pockethost.io with PocketHost 0.4.0. Our update brings in full support for PocketBase 0.8 alongside the novel concept of 'platforms' for seamless version control. A breakthrough for NodeJS developers seeking to streamline their project workflow with our proficient backend solution.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/awesome-pocketbase-20-and-growing/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>awesome-pockebase has 20+ community resources and growing</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-10-27">Oct 27, 2022</time>
|
||
</div>
|
||
|
||
<p>In our incredible developer-centric GitHub, awesome-pocketbase, we now have over 20 thriving resources for PocketBase users. From Python SDKs to SQLite tools, and even starter kits, the community is putting together some exceptional tools to amplify your experience. If you've created a project for PocketBase yourself, reach out! We'd love to feature you.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.3.2/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.3.2</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-10-26">Oct 26, 2022</time>
|
||
</div>
|
||
|
||
<p>Uncover the latest updates from PocketHost with version 0.3.2, a cut above the rest that prioritizes security and efficiency. We've moved the PBScript repository for streamlined access and ramped up security so accounts must be verified before instance operation. A pivotal step for our NodeJS developers.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.3.1/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.3.1</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-10-26">Oct 26, 2022</time>
|
||
</div>
|
||
|
||
<p>Dive headfirst into PocketHost 0.3.1, rolled out this October with exciting features! Experience seamless OpenGraph support, amplifying your project visibility across browsers. Immerse yourself in vivid dark mode enhancements, easing the strain on your eyes during those late-night coding sessions. It’s like having coffee with Darth Vader in The Matrix - intense and thrilling!</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.3.0/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.3.0</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-10-26">Oct 26, 2022</time>
|
||
</div>
|
||
|
||
<p>Unleash the potential of PocketHost 0.3.0! This revolutionary update introduces enhanced Docker and proxy support, enriched developer documentation, and a complete UX redesign. Also, get the ability to run varying PocketBase versions for custom use-cases, including beta/dev, with visually striking running status indicators in vibrant green.</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.2.0/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.2.0</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-10-12">Oct 12, 2022</time>
|
||
</div>
|
||
|
||
<p>PocketHost 0.2.0 has been released, featuring fully Dockerized services and advanced scaling using a dynamic proxy. Experience smooth project launches plus added server power, and future possibilities with fly.io integration. The update promises more accessible back-ends and powerful BaaS with the coming PBScript release and pockethost integration.
|
||
</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<a href="/blog/0.0.1/" class="">
|
||
<h2 class='text-white text-2xl font-bold'>PocketHost 0.0.1</h2>
|
||
|
||
<div>
|
||
<time class="text-green-400 font-bold" datetime="2022-09-18">Sep 18, 2022</time>
|
||
</div>
|
||
|
||
<p>Explore the alpha version of PocketHost 0.0.1, your one-click solution for multi-tenant hosting of PocketBase projects. The system runs on a single Digital Ocean VPS and Svelte front-end, with instant SSL certification and dynamic port assignment. Discover this new level of simplicity and efficiency in web development here!</p>
|
||
</a>
|
||
</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/ -->
|
||
</body>
|
||
</html>
|