mirror of
https://github.com/pockethost/pockethost.git
synced 2025-06-24 15:02:31 +00:00
3824 lines
103 KiB
HTML
3824 lines
103 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>PocketHost 0.9.0 - PocketHost</title>
|
|
<meta name="description" content="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.">
|
|
|
|
<!-- Facebook Meta Tags -->
|
|
<meta property="og:url" content="https://pockethost.io/blog/0.9.0/">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="PocketHost 0.9.0 - PocketHost">
|
|
<meta property="og:description" content="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.">
|
|
<meta property="og:image" content="https://pockethost.io/poster.png">
|
|
|
|
<!-- Twitter Meta Tags -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:domain" content="">
|
|
<meta property="twitter:url" content="https://pockethost.io/blog/0.9.0/">
|
|
<meta name="twitter:title" content="PocketHost 0.9.0 - PocketHost">
|
|
<meta name="twitter:description" content="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.">
|
|
<meta name="twitter:image" content="https://pockethost.io/poster.png">
|
|
|
|
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
|
|
|
|
<meta name="generator" content="Eleventy v2.0.1">
|
|
|
|
|
|
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="PocketHost">
|
|
<link rel="alternate" href="/feed/feed.json" type="application/json" title="PocketHost">
|
|
|
|
<link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">
|
|
|
|
<link href="/icons/fontawesome.min.css" rel="stylesheet">
|
|
<link href="/icons/all.min.css" rel="stylesheet">
|
|
<link href="/icons/brands.min.css" rel="stylesheet">
|
|
|
|
|
|
<style>
|
|
/*
|
|
! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
|
|
*//*
|
|
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
|
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
|
*/
|
|
|
|
*,
|
|
::before,
|
|
::after {
|
|
box-sizing: border-box; /* 1 */
|
|
border-width: 0; /* 2 */
|
|
border-style: solid; /* 2 */
|
|
border-color: #e5e7eb; /* 2 */
|
|
}
|
|
|
|
::before,
|
|
::after {
|
|
--tw-content: '';
|
|
}
|
|
|
|
/*
|
|
1. Use a consistent sensible line-height in all browsers.
|
|
2. Prevent adjustments of font size after orientation changes in iOS.
|
|
3. Use a more readable tab size.
|
|
4. Use the user's configured `sans` font-family by default.
|
|
5. Use the user's configured `sans` font-feature-settings by default.
|
|
6. Use the user's configured `sans` font-variation-settings by default.
|
|
*/
|
|
|
|
html {
|
|
line-height: 1.5; /* 1 */
|
|
-webkit-text-size-adjust: 100%; /* 2 */
|
|
-moz-tab-size: 4; /* 3 */
|
|
-o-tab-size: 4;
|
|
tab-size: 4; /* 3 */
|
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
|
|
font-feature-settings: normal; /* 5 */
|
|
font-variation-settings: normal; /* 6 */
|
|
}
|
|
|
|
/*
|
|
1. Remove the margin in all browsers.
|
|
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
|
*/
|
|
|
|
body {
|
|
margin: 0; /* 1 */
|
|
line-height: inherit; /* 2 */
|
|
}
|
|
|
|
/*
|
|
1. Add the correct height in Firefox.
|
|
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
|
3. Ensure horizontal rules are visible by default.
|
|
*/
|
|
|
|
hr {
|
|
height: 0; /* 1 */
|
|
color: inherit; /* 2 */
|
|
border-top-width: 1px; /* 3 */
|
|
}
|
|
|
|
/*
|
|
Add the correct text decoration in Chrome, Edge, and Safari.
|
|
*/
|
|
|
|
abbr:where([title]) {
|
|
-webkit-text-decoration: underline dotted;
|
|
text-decoration: underline dotted;
|
|
}
|
|
|
|
/*
|
|
Remove the default font size and weight for headings.
|
|
*/
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
/*
|
|
Reset links to optimize for opt-in styling instead of opt-out.
|
|
*/
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
/*
|
|
Add the correct font weight in Edge and Safari.
|
|
*/
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
/*
|
|
1. Use the user's configured `mono` font family by default.
|
|
2. Correct the odd `em` font sizing in all browsers.
|
|
*/
|
|
|
|
code,
|
|
kbd,
|
|
samp,
|
|
pre {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
|
|
font-size: 1em; /* 2 */
|
|
}
|
|
|
|
/*
|
|
Add the correct font size in all browsers.
|
|
*/
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
/*
|
|
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
|
*/
|
|
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
/*
|
|
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
|
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
|
3. Remove gaps between table borders by default.
|
|
*/
|
|
|
|
table {
|
|
text-indent: 0; /* 1 */
|
|
border-color: inherit; /* 2 */
|
|
border-collapse: collapse; /* 3 */
|
|
}
|
|
|
|
/*
|
|
1. Change the font styles in all browsers.
|
|
2. Remove the margin in Firefox and Safari.
|
|
3. Remove default padding in all browsers.
|
|
*/
|
|
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
font-family: inherit; /* 1 */
|
|
font-feature-settings: inherit; /* 1 */
|
|
font-variation-settings: inherit; /* 1 */
|
|
font-size: 100%; /* 1 */
|
|
font-weight: inherit; /* 1 */
|
|
line-height: inherit; /* 1 */
|
|
color: inherit; /* 1 */
|
|
margin: 0; /* 2 */
|
|
padding: 0; /* 3 */
|
|
}
|
|
|
|
/*
|
|
Remove the inheritance of text transform in Edge and Firefox.
|
|
*/
|
|
|
|
button,
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
|
|
/*
|
|
1. Correct the inability to style clickable types in iOS and Safari.
|
|
2. Remove default button styles.
|
|
*/
|
|
|
|
button,
|
|
[type='button'],
|
|
[type='reset'],
|
|
[type='submit'] {
|
|
-webkit-appearance: button; /* 1 */
|
|
background-color: transparent; /* 2 */
|
|
background-image: none; /* 2 */
|
|
}
|
|
|
|
/*
|
|
Use the modern Firefox focus style for all focusable elements.
|
|
*/
|
|
|
|
:-moz-focusring {
|
|
outline: auto;
|
|
}
|
|
|
|
/*
|
|
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
|
*/
|
|
|
|
:-moz-ui-invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/*
|
|
Add the correct vertical alignment in Chrome and Firefox.
|
|
*/
|
|
|
|
progress {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/*
|
|
Correct the cursor style of increment and decrement buttons in Safari.
|
|
*/
|
|
|
|
::-webkit-inner-spin-button,
|
|
::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
|
|
/*
|
|
1. Correct the odd appearance in Chrome and Safari.
|
|
2. Correct the outline style in Safari.
|
|
*/
|
|
|
|
[type='search'] {
|
|
-webkit-appearance: textfield; /* 1 */
|
|
outline-offset: -2px; /* 2 */
|
|
}
|
|
|
|
/*
|
|
Remove the inner padding in Chrome and Safari on macOS.
|
|
*/
|
|
|
|
::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/*
|
|
1. Correct the inability to style clickable types in iOS and Safari.
|
|
2. Change font properties to `inherit` in Safari.
|
|
*/
|
|
|
|
::-webkit-file-upload-button {
|
|
-webkit-appearance: button; /* 1 */
|
|
font: inherit; /* 2 */
|
|
}
|
|
|
|
/*
|
|
Add the correct display in Chrome and Safari.
|
|
*/
|
|
|
|
summary {
|
|
display: list-item;
|
|
}
|
|
|
|
/*
|
|
Removes the default spacing and border for appropriate elements.
|
|
*/
|
|
|
|
blockquote,
|
|
dl,
|
|
dd,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
hr,
|
|
figure,
|
|
p,
|
|
pre {
|
|
margin: 0;
|
|
}
|
|
|
|
fieldset {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
legend {
|
|
padding: 0;
|
|
}
|
|
|
|
ol,
|
|
ul,
|
|
menu {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
Reset default styling for dialogs.
|
|
*/
|
|
dialog {
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
Prevent resizing textareas horizontally by default.
|
|
*/
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
/*
|
|
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
|
2. Set the default placeholder color to the user's configured gray 400 color.
|
|
*/
|
|
|
|
input::-moz-placeholder, textarea::-moz-placeholder {
|
|
opacity: 1; /* 1 */
|
|
color: #9ca3af; /* 2 */
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
opacity: 1; /* 1 */
|
|
color: #9ca3af; /* 2 */
|
|
}
|
|
|
|
/*
|
|
Set the default cursor for buttons.
|
|
*/
|
|
|
|
button,
|
|
[role="button"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*
|
|
Make sure disabled buttons don't get the pointer cursor.
|
|
*/
|
|
:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
/*
|
|
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
|
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
|
This can trigger a poorly considered lint error in some tools but is included by design.
|
|
*/
|
|
|
|
img,
|
|
svg,
|
|
video,
|
|
canvas,
|
|
audio,
|
|
iframe,
|
|
embed,
|
|
object {
|
|
display: block; /* 1 */
|
|
vertical-align: middle; /* 2 */
|
|
}
|
|
|
|
/*
|
|
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
|
*/
|
|
|
|
img,
|
|
video {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Make elements with the HTML hidden attribute stay hidden by default */
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
:root,
|
|
[data-theme] {
|
|
background-color: hsl(var(--b1) / var(--tw-bg-opacity, 1));
|
|
color: hsl(var(--bc) / var(--tw-text-opacity, 1));
|
|
}
|
|
|
|
html {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
--pf: 141 72% 35%;
|
|
--sf: 164 73% 35%;
|
|
--af: 175 70% 34%;
|
|
--in: 198 93% 60%;
|
|
--su: 158 64% 52%;
|
|
--wa: 43 96% 56%;
|
|
--er: 0 91% 71%;
|
|
--inc: 198 100% 12%;
|
|
--suc: 158 100% 10%;
|
|
--wac: 43 100% 11%;
|
|
--erc: 0 100% 14%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: .2s;
|
|
--btn-text-case: uppercase;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
--p: 141 72% 42%;
|
|
--pc: 0 0% 100%;
|
|
--s: 164 73% 42%;
|
|
--sc: 0 0% 100%;
|
|
--a: 175 70% 41%;
|
|
--ac: 0 0% 100%;
|
|
--n: 213 18% 20%;
|
|
--nf: 212 17% 17%;
|
|
--nc: 220 13% 69%;
|
|
--b1: 212 18% 14%;
|
|
--b2: 213 18% 12%;
|
|
--b3: 213 18% 10%;
|
|
--bc: 0 0% 100%;
|
|
}
|
|
|
|
[data-theme=dark] {
|
|
color-scheme: dark;
|
|
--pf: 141 72% 35%;
|
|
--sf: 164 73% 35%;
|
|
--af: 175 70% 34%;
|
|
--in: 198 93% 60%;
|
|
--su: 158 64% 52%;
|
|
--wa: 43 96% 56%;
|
|
--er: 0 91% 71%;
|
|
--inc: 198 100% 12%;
|
|
--suc: 158 100% 10%;
|
|
--wac: 43 100% 11%;
|
|
--erc: 0 100% 14%;
|
|
--rounded-box: 1rem;
|
|
--rounded-btn: 0.5rem;
|
|
--rounded-badge: 1.9rem;
|
|
--animation-btn: 0.25s;
|
|
--animation-input: .2s;
|
|
--btn-text-case: uppercase;
|
|
--btn-focus-scale: 0.95;
|
|
--border-btn: 1px;
|
|
--tab-border: 1px;
|
|
--tab-radius: 0.5rem;
|
|
--p: 141 72% 42%;
|
|
--pc: 0 0% 100%;
|
|
--s: 164 73% 42%;
|
|
--sc: 0 0% 100%;
|
|
--a: 175 70% 41%;
|
|
--ac: 0 0% 100%;
|
|
--n: 213 18% 20%;
|
|
--nf: 212 17% 17%;
|
|
--nc: 220 13% 69%;
|
|
--b1: 212 18% 14%;
|
|
--b2: 213 18% 12%;
|
|
--b3: 213 18% 10%;
|
|
--bc: 0 0% 100%;
|
|
}
|
|
|
|
*, ::before, ::after {
|
|
--tw-border-spacing-x: 0;
|
|
--tw-border-spacing-y: 0;
|
|
--tw-translate-x: 0;
|
|
--tw-translate-y: 0;
|
|
--tw-rotate: 0;
|
|
--tw-skew-x: 0;
|
|
--tw-skew-y: 0;
|
|
--tw-scale-x: 1;
|
|
--tw-scale-y: 1;
|
|
--tw-pan-x: ;
|
|
--tw-pan-y: ;
|
|
--tw-pinch-zoom: ;
|
|
--tw-scroll-snap-strictness: proximity;
|
|
--tw-gradient-from-position: ;
|
|
--tw-gradient-via-position: ;
|
|
--tw-gradient-to-position: ;
|
|
--tw-ordinal: ;
|
|
--tw-slashed-zero: ;
|
|
--tw-numeric-figure: ;
|
|
--tw-numeric-spacing: ;
|
|
--tw-numeric-fraction: ;
|
|
--tw-ring-inset: ;
|
|
--tw-ring-offset-width: 0px;
|
|
--tw-ring-offset-color: #fff;
|
|
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
--tw-shadow: 0 0 #0000;
|
|
--tw-shadow-colored: 0 0 #0000;
|
|
--tw-blur: ;
|
|
--tw-brightness: ;
|
|
--tw-contrast: ;
|
|
--tw-grayscale: ;
|
|
--tw-hue-rotate: ;
|
|
--tw-invert: ;
|
|
--tw-saturate: ;
|
|
--tw-sepia: ;
|
|
--tw-drop-shadow: ;
|
|
--tw-backdrop-blur: ;
|
|
--tw-backdrop-brightness: ;
|
|
--tw-backdrop-contrast: ;
|
|
--tw-backdrop-grayscale: ;
|
|
--tw-backdrop-hue-rotate: ;
|
|
--tw-backdrop-invert: ;
|
|
--tw-backdrop-opacity: ;
|
|
--tw-backdrop-saturate: ;
|
|
--tw-backdrop-sepia: ;
|
|
}
|
|
|
|
::backdrop {
|
|
--tw-border-spacing-x: 0;
|
|
--tw-border-spacing-y: 0;
|
|
--tw-translate-x: 0;
|
|
--tw-translate-y: 0;
|
|
--tw-rotate: 0;
|
|
--tw-skew-x: 0;
|
|
--tw-skew-y: 0;
|
|
--tw-scale-x: 1;
|
|
--tw-scale-y: 1;
|
|
--tw-pan-x: ;
|
|
--tw-pan-y: ;
|
|
--tw-pinch-zoom: ;
|
|
--tw-scroll-snap-strictness: proximity;
|
|
--tw-gradient-from-position: ;
|
|
--tw-gradient-via-position: ;
|
|
--tw-gradient-to-position: ;
|
|
--tw-ordinal: ;
|
|
--tw-slashed-zero: ;
|
|
--tw-numeric-figure: ;
|
|
--tw-numeric-spacing: ;
|
|
--tw-numeric-fraction: ;
|
|
--tw-ring-inset: ;
|
|
--tw-ring-offset-width: 0px;
|
|
--tw-ring-offset-color: #fff;
|
|
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
--tw-shadow: 0 0 #0000;
|
|
--tw-shadow-colored: 0 0 #0000;
|
|
--tw-blur: ;
|
|
--tw-brightness: ;
|
|
--tw-contrast: ;
|
|
--tw-grayscale: ;
|
|
--tw-hue-rotate: ;
|
|
--tw-invert: ;
|
|
--tw-saturate: ;
|
|
--tw-sepia: ;
|
|
--tw-drop-shadow: ;
|
|
--tw-backdrop-blur: ;
|
|
--tw-backdrop-brightness: ;
|
|
--tw-backdrop-contrast: ;
|
|
--tw-backdrop-grayscale: ;
|
|
--tw-backdrop-hue-rotate: ;
|
|
--tw-backdrop-invert: ;
|
|
--tw-backdrop-opacity: ;
|
|
--tw-backdrop-saturate: ;
|
|
--tw-backdrop-sepia: ;
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 640px) {
|
|
|
|
.container {
|
|
max-width: 640px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
|
|
.container {
|
|
max-width: 768px;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) {
|
|
|
|
.container {
|
|
max-width: 1024px;
|
|
}
|
|
}
|
|
@media (min-width: 1280px) {
|
|
|
|
.container {
|
|
max-width: 1280px;
|
|
}
|
|
}
|
|
@media (min-width: 1536px) {
|
|
|
|
.container {
|
|
max-width: 1536px;
|
|
}
|
|
}
|
|
.prose {
|
|
color: var(--tw-prose-body);
|
|
max-width: 65ch;
|
|
}
|
|
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
}
|
|
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-lead);
|
|
font-size: 1.25em;
|
|
line-height: 1.6;
|
|
margin-top: 1.2em;
|
|
margin-bottom: 1.2em;
|
|
}
|
|
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-links);
|
|
text-decoration: underline;
|
|
font-weight: 500;
|
|
}
|
|
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-bold);
|
|
font-weight: 600;
|
|
}
|
|
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: inherit;
|
|
}
|
|
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: inherit;
|
|
}
|
|
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: inherit;
|
|
}
|
|
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
list-style-type: decimal;
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
padding-left: 1.625em;
|
|
}
|
|
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
list-style-type: upper-alpha;
|
|
}
|
|
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
list-style-type: lower-alpha;
|
|
}
|
|
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
list-style-type: upper-alpha;
|
|
}
|
|
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
list-style-type: lower-alpha;
|
|
}
|
|
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
list-style-type: upper-roman;
|
|
}
|
|
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
list-style-type: lower-roman;
|
|
}
|
|
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
list-style-type: upper-roman;
|
|
}
|
|
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
list-style-type: lower-roman;
|
|
}
|
|
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
list-style-type: decimal;
|
|
}
|
|
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
list-style-type: disc;
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
padding-left: 1.625em;
|
|
}
|
|
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
|
|
font-weight: 400;
|
|
color: var(--tw-prose-counters);
|
|
}
|
|
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
|
|
color: var(--tw-prose-bullets);
|
|
}
|
|
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-headings);
|
|
font-weight: 600;
|
|
margin-top: 1.25em;
|
|
}
|
|
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
border-color: var(--tw-prose-hr);
|
|
border-top-width: 1px;
|
|
margin-top: 3em;
|
|
margin-bottom: 3em;
|
|
}
|
|
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
color: var(--tw-prose-quotes);
|
|
border-left-width: 0.25rem;
|
|
border-left-color: var(--tw-prose-quote-borders);
|
|
quotes: "\201C""\201D""\2018""\2019";
|
|
margin-top: 1.6em;
|
|
margin-bottom: 1.6em;
|
|
padding-left: 1em;
|
|
}
|
|
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
|
content: open-quote;
|
|
}
|
|
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
|
content: close-quote;
|
|
}
|
|
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-headings);
|
|
font-weight: 800;
|
|
font-size: 2.25em;
|
|
margin-top: 0;
|
|
margin-bottom: 0.8888889em;
|
|
line-height: 1.1111111;
|
|
}
|
|
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
font-weight: 900;
|
|
color: inherit;
|
|
}
|
|
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-headings);
|
|
font-weight: 700;
|
|
font-size: 1.5em;
|
|
margin-top: 2em;
|
|
margin-bottom: 1em;
|
|
line-height: 1.3333333;
|
|
}
|
|
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
font-weight: 800;
|
|
color: inherit;
|
|
}
|
|
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-headings);
|
|
font-weight: 600;
|
|
font-size: 1.25em;
|
|
margin-top: 1.6em;
|
|
margin-bottom: 0.6em;
|
|
line-height: 1.6;
|
|
}
|
|
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
font-weight: 700;
|
|
color: inherit;
|
|
}
|
|
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-headings);
|
|
font-weight: 600;
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.5em;
|
|
line-height: 1.5;
|
|
}
|
|
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
font-weight: 700;
|
|
color: inherit;
|
|
}
|
|
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
display: block;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
color: var(--tw-prose-kbd);
|
|
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
|
|
font-size: 0.875em;
|
|
border-radius: 0.3125rem;
|
|
padding-top: 0.1875em;
|
|
padding-right: 0.375em;
|
|
padding-bottom: 0.1875em;
|
|
padding-left: 0.375em;
|
|
}
|
|
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-code);
|
|
font-weight: 600;
|
|
font-size: 0.875em;
|
|
}
|
|
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
|
content: "`";
|
|
}
|
|
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
|
content: "`";
|
|
}
|
|
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: inherit;
|
|
}
|
|
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: inherit;
|
|
}
|
|
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: inherit;
|
|
font-size: 0.875em;
|
|
}
|
|
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: inherit;
|
|
font-size: 0.9em;
|
|
}
|
|
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: inherit;
|
|
}
|
|
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: inherit;
|
|
}
|
|
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: inherit;
|
|
}
|
|
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-pre-code);
|
|
background-color: var(--tw-prose-pre-bg);
|
|
overflow-x: auto;
|
|
font-weight: 400;
|
|
font-size: 0.875em;
|
|
line-height: 1.7142857;
|
|
margin-top: 1.7142857em;
|
|
margin-bottom: 1.7142857em;
|
|
border-radius: 0.375rem;
|
|
padding-top: 0.8571429em;
|
|
padding-right: 1.1428571em;
|
|
padding-bottom: 0.8571429em;
|
|
padding-left: 1.1428571em;
|
|
}
|
|
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
background-color: transparent;
|
|
border-width: 0;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
font-weight: inherit;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
line-height: inherit;
|
|
}
|
|
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
|
content: none;
|
|
}
|
|
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
|
content: none;
|
|
}
|
|
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
width: 100%;
|
|
table-layout: auto;
|
|
text-align: left;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
font-size: 0.875em;
|
|
line-height: 1.7142857;
|
|
}
|
|
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: var(--tw-prose-th-borders);
|
|
}
|
|
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-headings);
|
|
font-weight: 600;
|
|
vertical-align: bottom;
|
|
padding-right: 0.5714286em;
|
|
padding-bottom: 0.5714286em;
|
|
padding-left: 0.5714286em;
|
|
}
|
|
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: var(--tw-prose-td-borders);
|
|
}
|
|
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
border-bottom-width: 0;
|
|
}
|
|
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
vertical-align: baseline;
|
|
}
|
|
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
border-top-width: 1px;
|
|
border-top-color: var(--tw-prose-th-borders);
|
|
}
|
|
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
vertical-align: top;
|
|
}
|
|
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
color: var(--tw-prose-captions);
|
|
font-size: 0.875em;
|
|
line-height: 1.4285714;
|
|
margin-top: 0.8571429em;
|
|
}
|
|
.prose {
|
|
--tw-prose-body: #374151;
|
|
--tw-prose-headings: #111827;
|
|
--tw-prose-lead: #4b5563;
|
|
--tw-prose-links: #111827;
|
|
--tw-prose-bold: #111827;
|
|
--tw-prose-counters: #6b7280;
|
|
--tw-prose-bullets: #d1d5db;
|
|
--tw-prose-hr: #e5e7eb;
|
|
--tw-prose-quotes: #111827;
|
|
--tw-prose-quote-borders: #e5e7eb;
|
|
--tw-prose-captions: #6b7280;
|
|
--tw-prose-kbd: #111827;
|
|
--tw-prose-kbd-shadows: 17 24 39;
|
|
--tw-prose-code: #111827;
|
|
--tw-prose-pre-code: #e5e7eb;
|
|
--tw-prose-pre-bg: #1f2937;
|
|
--tw-prose-th-borders: #d1d5db;
|
|
--tw-prose-td-borders: #e5e7eb;
|
|
--tw-prose-invert-body: #d1d5db;
|
|
--tw-prose-invert-headings: #fff;
|
|
--tw-prose-invert-lead: #9ca3af;
|
|
--tw-prose-invert-links: #fff;
|
|
--tw-prose-invert-bold: #fff;
|
|
--tw-prose-invert-counters: #9ca3af;
|
|
--tw-prose-invert-bullets: #4b5563;
|
|
--tw-prose-invert-hr: #374151;
|
|
--tw-prose-invert-quotes: #f3f4f6;
|
|
--tw-prose-invert-quote-borders: #374151;
|
|
--tw-prose-invert-captions: #9ca3af;
|
|
--tw-prose-invert-kbd: #fff;
|
|
--tw-prose-invert-kbd-shadows: 255 255 255;
|
|
--tw-prose-invert-code: #fff;
|
|
--tw-prose-invert-pre-code: #d1d5db;
|
|
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
|
|
--tw-prose-invert-th-borders: #4b5563;
|
|
--tw-prose-invert-td-borders: #374151;
|
|
font-size: 1rem;
|
|
line-height: 1.75;
|
|
}
|
|
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
padding-left: 0.375em;
|
|
}
|
|
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
padding-left: 0.375em;
|
|
}
|
|
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 0.75em;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 1.25em;
|
|
}
|
|
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-bottom: 1.25em;
|
|
}
|
|
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 1.25em;
|
|
}
|
|
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-bottom: 1.25em;
|
|
}
|
|
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 0.75em;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
}
|
|
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 0.5em;
|
|
padding-left: 1.625em;
|
|
}
|
|
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 0;
|
|
}
|
|
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 0;
|
|
}
|
|
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 0;
|
|
}
|
|
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 0;
|
|
}
|
|
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
padding-left: 0;
|
|
}
|
|
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
padding-right: 0;
|
|
}
|
|
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
padding-top: 0.5714286em;
|
|
padding-right: 0.5714286em;
|
|
padding-bottom: 0.5714286em;
|
|
padding-left: 0.5714286em;
|
|
}
|
|
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
padding-left: 0;
|
|
}
|
|
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
padding-right: 0;
|
|
}
|
|
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-top: 0;
|
|
}
|
|
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
|
margin-bottom: 0;
|
|
}
|
|
.alert {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-auto-flow: row;
|
|
align-content: flex-start;
|
|
align-items: center;
|
|
justify-items: center;
|
|
gap: 1rem;
|
|
text-align: center;
|
|
border-width: 1px;
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--b2) / var(--tw-border-opacity));
|
|
padding: 1rem;
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
border-radius: var(--rounded-box, 1rem);
|
|
--alert-bg: hsl(var(--b2));
|
|
--alert-bg-mix: hsl(var(--b1));
|
|
background-color: var(--alert-bg);
|
|
}
|
|
@media (min-width: 640px) {
|
|
|
|
.alert {
|
|
grid-auto-flow: column;
|
|
grid-template-columns: auto minmax(auto,1fr);
|
|
justify-items: start;
|
|
text-align: left;
|
|
}
|
|
}
|
|
@media (hover:hover) {
|
|
|
|
.label a:hover {
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
}
|
|
|
|
.menu li > *:not(ul):not(.menu-title):not(details):active,
|
|
.menu li > *:not(ul):not(.menu-title):not(details).active,
|
|
.menu li > details > summary:active {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--n) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--nc) / var(--tw-text-opacity));
|
|
}
|
|
|
|
.tab:hover {
|
|
--tw-text-opacity: 1;
|
|
}
|
|
|
|
.table tr.hover:hover,
|
|
.table tr.hover:nth-child(even):hover {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
|
|
}
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-color: transparent;
|
|
border-color: hsl(var(--b2) / var(--tw-border-opacity));
|
|
text-align: center;
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
transition-duration: 200ms;
|
|
border-radius: var(--rounded-btn, 0.5rem);
|
|
height: 3rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
min-height: 3rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1em;
|
|
gap: 0.5rem;
|
|
font-weight: 600;
|
|
text-decoration-line: none;
|
|
border-width: var(--border-btn, 1px);
|
|
animation: button-pop var(--animation-btn, 0.25s) ease-out;
|
|
text-transform: var(--btn-text-case, uppercase);
|
|
--tw-border-opacity: 1;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
outline-color: hsl(var(--bc) / 1);
|
|
}
|
|
.btn-disabled,
|
|
.btn[disabled],
|
|
.btn:disabled {
|
|
pointer-events: none;
|
|
}
|
|
.btn-square {
|
|
height: 3rem;
|
|
width: 3rem;
|
|
padding: 0px;
|
|
}
|
|
.btn-group > input[type="radio"].btn {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
.btn-group > input[type="radio"].btn:before {
|
|
content: attr(data-title);
|
|
}
|
|
.btn:is(input[type="checkbox"]),
|
|
.btn:is(input[type="radio"]) {
|
|
width: auto;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
.btn:is(input[type="checkbox"]):after,
|
|
.btn:is(input[type="radio"]):after {
|
|
--tw-content: attr(aria-label);
|
|
content: var(--tw-content);
|
|
}
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.dropdown > *:not(summary):focus {
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
.dropdown .dropdown-content {
|
|
position: absolute;
|
|
}
|
|
.dropdown:is(:not(details)) .dropdown-content {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transform-origin: top;
|
|
--tw-scale-x: .95;
|
|
--tw-scale-y: .95;
|
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
transition-duration: 200ms;
|
|
}
|
|
.dropdown-end .dropdown-content {
|
|
right: 0px;
|
|
}
|
|
.dropdown-left .dropdown-content {
|
|
bottom: auto;
|
|
right: 100%;
|
|
top: 0px;
|
|
transform-origin: right;
|
|
}
|
|
.dropdown-right .dropdown-content {
|
|
bottom: auto;
|
|
left: 100%;
|
|
top: 0px;
|
|
transform-origin: left;
|
|
}
|
|
.dropdown-bottom .dropdown-content {
|
|
bottom: auto;
|
|
top: 100%;
|
|
transform-origin: top;
|
|
}
|
|
.dropdown-top .dropdown-content {
|
|
bottom: 100%;
|
|
top: auto;
|
|
transform-origin: bottom;
|
|
}
|
|
.dropdown-end.dropdown-right .dropdown-content {
|
|
bottom: 0px;
|
|
top: auto;
|
|
}
|
|
.dropdown-end.dropdown-left .dropdown-content {
|
|
bottom: 0px;
|
|
top: auto;
|
|
}
|
|
.dropdown.dropdown-open .dropdown-content,
|
|
.dropdown:not(.dropdown-hover):focus .dropdown-content,
|
|
.dropdown:focus-within .dropdown-content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
@media (hover: hover) {
|
|
|
|
.dropdown.dropdown-hover:hover .dropdown-content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.btn:hover {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--b3) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--pf) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
|
|
}
|
|
|
|
.btn.glass:hover {
|
|
--glass-opacity: 25%;
|
|
--glass-border-opacity: 15%;
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
--tw-border-opacity: 0;
|
|
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
|
|
--tw-bg-opacity: 0.2;
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--bc) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--b1) / var(--tw-text-opacity));
|
|
}
|
|
|
|
.btn-outline.btn-primary:hover {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--pf) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--pc) / var(--tw-text-opacity));
|
|
}
|
|
|
|
.btn-outline.btn-secondary:hover {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--sf) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--sc) / var(--tw-text-opacity));
|
|
}
|
|
|
|
.btn-outline.btn-accent:hover {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--af) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--af) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--ac) / var(--tw-text-opacity));
|
|
}
|
|
|
|
.btn-outline.btn-success:hover {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--su) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--su) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--suc) / var(--tw-text-opacity));
|
|
}
|
|
|
|
.btn-outline.btn-info:hover {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--in) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--in) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--inc) / var(--tw-text-opacity));
|
|
}
|
|
|
|
.btn-outline.btn-warning:hover {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--wa) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--wac) / var(--tw-text-opacity));
|
|
}
|
|
|
|
.btn-outline.btn-error:hover {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--er) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--er) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--erc) / var(--tw-text-opacity));
|
|
}
|
|
|
|
.btn-disabled:hover,
|
|
.btn[disabled]:hover,
|
|
.btn:disabled:hover {
|
|
--tw-border-opacity: 0;
|
|
background-color: hsl(var(--n) / var(--tw-bg-opacity));
|
|
--tw-bg-opacity: 0.2;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
--tw-text-opacity: 0.2;
|
|
}
|
|
|
|
.btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--pf) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
|
|
}
|
|
|
|
.dropdown.dropdown-hover:hover .dropdown-content {
|
|
--tw-scale-x: 1;
|
|
--tw-scale-y: 1;
|
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
}
|
|
|
|
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
|
|
cursor: pointer;
|
|
background-color: hsl(var(--bc) / 0.1);
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.tab[disabled],
|
|
.tab[disabled]:hover {
|
|
cursor: not-allowed;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
--tw-text-opacity: 0.2;
|
|
}
|
|
}
|
|
.dropdown:is(details) summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.footer {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-auto-flow: row;
|
|
place-items: start;
|
|
-moz-column-gap: 1rem;
|
|
column-gap: 1rem;
|
|
row-gap: 2.5rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
.footer > * {
|
|
display: grid;
|
|
place-items: start;
|
|
gap: 0.5rem;
|
|
}
|
|
@media (min-width: 48rem) {
|
|
|
|
.footer {
|
|
grid-auto-flow: column;
|
|
}
|
|
|
|
.footer-center {
|
|
grid-auto-flow: row dense;
|
|
}
|
|
}
|
|
.label {
|
|
display: flex;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-left: 0.25rem;
|
|
padding-right: 0.25rem;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.input {
|
|
flex-shrink: 1;
|
|
height: 3rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
font-size: 1rem;
|
|
line-height: 2;
|
|
line-height: 1.5rem;
|
|
border-width: 1px;
|
|
border-color: hsl(var(--bc) / var(--tw-border-opacity));
|
|
--tw-border-opacity: 0;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
|
|
border-radius: var(--rounded-btn, 0.5rem);
|
|
}
|
|
.input-group > .input {
|
|
isolation: isolate;
|
|
}
|
|
.input-group > *,
|
|
.input-group > .input,
|
|
.input-group > .textarea,
|
|
.input-group > .select {
|
|
border-radius: 0px;
|
|
}
|
|
.join {
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
border-radius: var(--rounded-btn, 0.5rem);
|
|
}
|
|
.join :where(.join-item) {
|
|
border-start-end-radius: 0;
|
|
border-end-end-radius: 0;
|
|
border-end-start-radius: 0;
|
|
border-start-start-radius: 0;
|
|
}
|
|
.join .join-item:not(:first-child):not(:last-child),
|
|
.join *:not(:first-child):not(:last-child) .join-item {
|
|
border-start-end-radius: 0;
|
|
border-end-end-radius: 0;
|
|
border-end-start-radius: 0;
|
|
border-start-start-radius: 0;
|
|
}
|
|
.join .join-item:first-child:not(:last-child),
|
|
.join *:first-child:not(:last-child) .join-item {
|
|
border-start-end-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|
|
.join .dropdown .join-item:first-child:not(:last-child),
|
|
.join *:first-child:not(:last-child) .dropdown .join-item {
|
|
border-start-end-radius: inherit;
|
|
border-end-end-radius: inherit;
|
|
}
|
|
.join :where(.join-item:first-child:not(:last-child)),
|
|
.join :where(*:first-child:not(:last-child) .join-item) {
|
|
border-end-start-radius: inherit;
|
|
border-start-start-radius: inherit;
|
|
}
|
|
.join .join-item:last-child:not(:first-child),
|
|
.join *:last-child:not(:first-child) .join-item {
|
|
border-end-start-radius: 0;
|
|
border-start-start-radius: 0;
|
|
}
|
|
.join :where(.join-item:last-child:not(:first-child)),
|
|
.join :where(*:last-child:not(:first-child) .join-item) {
|
|
border-start-end-radius: inherit;
|
|
border-end-end-radius: inherit;
|
|
}
|
|
@supports not selector(:has(*)) {
|
|
|
|
:where(.join *) {
|
|
border-radius: inherit;
|
|
}
|
|
}
|
|
@supports selector(:has(*)) {
|
|
|
|
:where(.join *:has(.join-item)) {
|
|
border-radius: inherit;
|
|
}
|
|
}
|
|
.link {
|
|
cursor: pointer;
|
|
text-decoration-line: underline;
|
|
}
|
|
.menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
padding: 0.5rem;
|
|
}
|
|
.menu :where(li ul) {
|
|
position: relative;
|
|
white-space: nowrap;
|
|
margin-left: 1rem;
|
|
padding-left: 0.5rem;
|
|
}
|
|
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
|
|
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
align-content: flex-start;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
grid-auto-columns: minmax(auto, max-content) auto max-content;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.menu li.disabled {
|
|
cursor: not-allowed;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
color: hsl(var(--bc) / 0.3);
|
|
}
|
|
.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
|
|
display: none;
|
|
}
|
|
:where(.menu li) {
|
|
position: relative;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
}
|
|
:where(.menu li) .badge {
|
|
justify-self: end;
|
|
}
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
overflow: hidden;
|
|
height: 0.5rem;
|
|
background-color: hsl(var(--bc) / 0.2);
|
|
border-radius: var(--rounded-box, 1rem);
|
|
}
|
|
.range {
|
|
height: 1.5rem;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
--range-shdw: var(--bc);
|
|
overflow: hidden;
|
|
background-color: transparent;
|
|
border-radius: var(--rounded-box, 1rem);
|
|
}
|
|
.range:focus {
|
|
outline: none;
|
|
}
|
|
.select {
|
|
display: inline-flex;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
height: 3rem;
|
|
padding-left: 1rem;
|
|
padding-right: 2.5rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
line-height: 2;
|
|
min-height: 3rem;
|
|
border-width: 1px;
|
|
border-color: hsl(var(--bc) / var(--tw-border-opacity));
|
|
--tw-border-opacity: 0;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
|
|
border-radius: var(--rounded-btn, 0.5rem);
|
|
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
|
|
linear-gradient(135deg, currentColor 50%, transparent 50%);
|
|
background-position: calc(100% - 20px) calc(1px + 50%),
|
|
calc(100% - 16.1px) calc(1px + 50%);
|
|
background-size: 4px 4px,
|
|
4px 4px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.select[multiple] {
|
|
height: auto;
|
|
}
|
|
.stats {
|
|
display: inline-grid;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
border-radius: var(--rounded-box, 1rem);
|
|
}
|
|
:where(.stats) {
|
|
grid-auto-flow: column;
|
|
overflow-x: auto;
|
|
}
|
|
.steps {
|
|
display: inline-grid;
|
|
grid-auto-flow: column;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
counter-reset: step;
|
|
grid-auto-columns: 1fr;
|
|
}
|
|
.steps .step {
|
|
display: grid;
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
grid-template-columns: auto;
|
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
grid-template-rows: 40px 1fr;
|
|
place-items: center;
|
|
text-align: center;
|
|
min-width: 4rem;
|
|
}
|
|
.tab {
|
|
position: relative;
|
|
display: inline-flex;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
height: 2rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
line-height: 2;
|
|
--tab-padding: 1rem;
|
|
--tw-text-opacity: 0.5;
|
|
--tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
|
|
--tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
|
|
--tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
|
|
color: var(--tab-color);
|
|
padding-left: var(--tab-padding, 1rem);
|
|
padding-right: var(--tab-padding, 1rem);
|
|
}
|
|
.table {
|
|
position: relative;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
border-radius: var(--rounded-box, 1rem);
|
|
}
|
|
.table :where(.table-pin-rows thead tr) {
|
|
position: sticky;
|
|
top: 0px;
|
|
z-index: 1;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
|
|
}
|
|
.table :where(.table-pin-rows tfoot tr) {
|
|
position: sticky;
|
|
bottom: 0px;
|
|
z-index: 1;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
|
|
}
|
|
.table :where(.table-pin-cols tr th) {
|
|
position: sticky;
|
|
left: 0px;
|
|
right: 0px;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
|
|
}
|
|
.toggle {
|
|
flex-shrink: 0;
|
|
--tglbg: hsl(var(--b1));
|
|
--handleoffset: 1.5rem;
|
|
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
|
|
--togglehandleborder: 0 0;
|
|
height: 1.5rem;
|
|
width: 3rem;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
border-width: 1px;
|
|
border-color: hsl(var(--bc) / var(--tw-border-opacity));
|
|
--tw-border-opacity: 0.2;
|
|
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
|
|
--tw-bg-opacity: 0.5;
|
|
border-radius: var(--rounded-badge, 1.9rem);
|
|
transition: background,
|
|
box-shadow var(--animation-input, 0.2s) ease-out;
|
|
box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
|
|
0 0 0 2px var(--tglbg) inset,
|
|
var(--togglehandleborder);
|
|
}
|
|
.btm-nav > *:where(.active) {
|
|
border-top-width: 2px;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
|
|
}
|
|
.btm-nav > * .label {
|
|
font-size: 1rem;
|
|
line-height: 1.5rem;
|
|
}
|
|
.btn:active:hover,
|
|
.btn:active:focus {
|
|
animation: button-pop 0s ease-out;
|
|
transform: scale(var(--btn-focus-scale, 0.97));
|
|
}
|
|
.btn:focus-visible {
|
|
outline-style: solid;
|
|
outline-width: 2px;
|
|
outline-offset: 2px;
|
|
}
|
|
.btn-primary {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--p) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--p) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--pc) / var(--tw-text-opacity));
|
|
outline-color: hsl(var(--p) / 1);
|
|
}
|
|
.btn-primary.btn-active {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--pf) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
|
|
}
|
|
.btn.glass {
|
|
--tw-shadow: 0 0 #0000;
|
|
--tw-shadow-colored: 0 0 #0000;
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
outline-color: currentColor;
|
|
}
|
|
.btn.glass.btn-active {
|
|
--glass-opacity: 25%;
|
|
--glass-border-opacity: 15%;
|
|
}
|
|
.btn-ghost {
|
|
border-width: 1px;
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
color: currentColor;
|
|
--tw-shadow: 0 0 #0000;
|
|
--tw-shadow-colored: 0 0 #0000;
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
outline-color: currentColor;
|
|
}
|
|
.btn-ghost.btn-active {
|
|
--tw-border-opacity: 0;
|
|
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
|
|
--tw-bg-opacity: 0.2;
|
|
}
|
|
.btn-outline {
|
|
border-color: currentColor;
|
|
background-color: transparent;
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
--tw-shadow: 0 0 #0000;
|
|
--tw-shadow-colored: 0 0 #0000;
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
}
|
|
.btn-outline.btn-active {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--bc) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--b1) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-primary {
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--p) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-primary.btn-active {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--pf) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--pc) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-secondary {
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--s) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-secondary.btn-active {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--sf) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--sc) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-accent {
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--a) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-accent.btn-active {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--af) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--af) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--ac) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-success {
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--su) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-success.btn-active {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--su) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--su) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--suc) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-info {
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--in) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-info.btn-active {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--in) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--in) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--inc) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-warning {
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--wa) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-warning.btn-active {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--wa) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--wac) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-error {
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--er) / var(--tw-text-opacity));
|
|
}
|
|
.btn-outline.btn-error.btn-active {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--er) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--er) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--erc) / var(--tw-text-opacity));
|
|
}
|
|
.btn.btn-disabled,
|
|
.btn[disabled],
|
|
.btn:disabled {
|
|
--tw-border-opacity: 0;
|
|
background-color: hsl(var(--n) / var(--tw-bg-opacity));
|
|
--tw-bg-opacity: 0.2;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
--tw-text-opacity: 0.2;
|
|
}
|
|
.btn-group > input[type="radio"]:checked.btn,
|
|
.btn-group > .btn-active {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--p) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--p) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--pc) / var(--tw-text-opacity));
|
|
}
|
|
.btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
|
|
outline-style: solid;
|
|
outline-width: 2px;
|
|
outline-color: hsl(var(--p) / 1);
|
|
}
|
|
.btn:is(input[type="checkbox"]:checked),
|
|
.btn:is(input[type="radio"]:checked) {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--p) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--p) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--pc) / var(--tw-text-opacity));
|
|
}
|
|
.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
|
|
outline-color: hsl(var(--p) / 1);
|
|
}
|
|
@keyframes button-pop {
|
|
|
|
0% {
|
|
transform: scale(var(--btn-focus-scale, 0.98));
|
|
}
|
|
|
|
40% {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
.card.compact .card-body {
|
|
padding: 1rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
@keyframes checkmark {
|
|
|
|
0% {
|
|
background-position-y: 5px;
|
|
}
|
|
|
|
50% {
|
|
background-position-y: -2px;
|
|
}
|
|
|
|
100% {
|
|
background-position-y: 0;
|
|
}
|
|
}
|
|
.dropdown.dropdown-open .dropdown-content,
|
|
.dropdown:focus .dropdown-content,
|
|
.dropdown:focus-within .dropdown-content {
|
|
--tw-scale-x: 1;
|
|
--tw-scale-y: 1;
|
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
}
|
|
.input input:focus {
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
.input[list]::-webkit-calendar-picker-indicator {
|
|
line-height: 1em;
|
|
}
|
|
.input:focus,
|
|
.input:focus-within {
|
|
outline-style: solid;
|
|
outline-width: 2px;
|
|
outline-offset: 2px;
|
|
outline-color: hsl(var(--bc) / 0.2);
|
|
}
|
|
.input-disabled,
|
|
.input:disabled,
|
|
.input[disabled] {
|
|
cursor: not-allowed;
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--b2) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 0.2;
|
|
}
|
|
.input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder {
|
|
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
|
|
--tw-placeholder-opacity: 0.2;
|
|
}
|
|
.input-disabled::placeholder,
|
|
.input:disabled::placeholder,
|
|
.input[disabled]::placeholder {
|
|
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
|
|
--tw-placeholder-opacity: 0.2;
|
|
}
|
|
.join > :where(*:not(:first-child)) {
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
margin-left: -1px;
|
|
}
|
|
.link:focus {
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
.link:focus-visible {
|
|
outline: 2px solid currentColor;
|
|
outline-offset: 2px;
|
|
}
|
|
:where(.menu li:empty) {
|
|
background-color: hsl(var(--bc) / 0.1);
|
|
margin: 0.5rem 1rem;
|
|
height: 1px;
|
|
}
|
|
.menu :where(li ul):before {
|
|
position: absolute;
|
|
bottom: 0.75rem;
|
|
left: 0px;
|
|
top: 0.75rem;
|
|
width: 1px;
|
|
background-color: hsl(var(--bc) / 0.1);
|
|
content: "";
|
|
}
|
|
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
|
|
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
text-align: left;
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
transition-duration: 200ms;
|
|
border-radius: var(--rounded-btn, 0.5rem);
|
|
text-wrap: balance;
|
|
}
|
|
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
|
|
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active):focus,
|
|
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):is(summary):not(.active):focus-visible,
|
|
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active).focus,
|
|
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
|
|
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible {
|
|
cursor: pointer;
|
|
background-color: hsl(var(--bc) / 0.1);
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
.menu li > *:not(ul):not(.menu-title):not(details):active,
|
|
.menu li > *:not(ul):not(.menu-title):not(details).active,
|
|
.menu li > details > summary:active {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--n) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--nc) / var(--tw-text-opacity));
|
|
}
|
|
.menu :where(li > details > summary)::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.menu :where(li > details > summary):after,
|
|
.menu :where(li > .menu-dropdown-toggle):after {
|
|
justify-self: end;
|
|
display: block;
|
|
margin-top: -0.5rem;
|
|
height: 0.5rem;
|
|
width: 0.5rem;
|
|
transform: rotate(45deg);
|
|
transition-property: transform, margin-top;
|
|
transition-duration: 0.3s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
content: "";
|
|
transform-origin: 75% 75%;
|
|
box-shadow: 2px 2px;
|
|
pointer-events: none;
|
|
}
|
|
.menu :where(li > details[open] > summary):after,
|
|
.menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
|
|
transform: rotate(225deg);
|
|
margin-top: 0;
|
|
}
|
|
.mockup-phone .display {
|
|
overflow: hidden;
|
|
border-radius: 40px;
|
|
margin-top: -25px;
|
|
}
|
|
.mockup-browser .mockup-browser-toolbar .input {
|
|
position: relative;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
height: 1.75rem;
|
|
width: 24rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
|
|
padding-left: 2rem;
|
|
}
|
|
.mockup-browser .mockup-browser-toolbar .input:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0.5rem;
|
|
top: 50%;
|
|
aspect-ratio: 1 / 1;
|
|
height: 0.75rem;
|
|
--tw-translate-y: -50%;
|
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
border-radius: 9999px;
|
|
border-width: 2px;
|
|
border-color: currentColor;
|
|
opacity: 0.6;
|
|
}
|
|
.mockup-browser .mockup-browser-toolbar .input:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 1.25rem;
|
|
top: 50%;
|
|
height: 0.5rem;
|
|
--tw-translate-y: 25%;
|
|
--tw-rotate: -45deg;
|
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
border-radius: 9999px;
|
|
border-width: 1px;
|
|
border-color: currentColor;
|
|
opacity: 0.6;
|
|
}
|
|
@keyframes modal-pop {
|
|
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.progress::-moz-progress-bar {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
|
|
border-radius: var(--rounded-box, 1rem);
|
|
}
|
|
.progress:indeterminate {
|
|
--progress-color: hsl(var(--bc));
|
|
background-image: repeating-linear-gradient(
|
|
90deg,
|
|
var(--progress-color) -1%,
|
|
var(--progress-color) 10%,
|
|
transparent 10%,
|
|
transparent 90%
|
|
);
|
|
background-size: 200%;
|
|
background-position-x: 15%;
|
|
animation: progress-loading 5s ease-in-out infinite;
|
|
}
|
|
.progress::-webkit-progress-bar {
|
|
background-color: transparent;
|
|
border-radius: var(--rounded-box, 1rem);
|
|
}
|
|
.progress::-webkit-progress-value {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
|
|
border-radius: var(--rounded-box, 1rem);
|
|
}
|
|
.progress:indeterminate::-moz-progress-bar {
|
|
background-color: transparent;
|
|
background-image: repeating-linear-gradient(
|
|
90deg,
|
|
var(--progress-color) -1%,
|
|
var(--progress-color) 10%,
|
|
transparent 10%,
|
|
transparent 90%
|
|
);
|
|
background-size: 200%;
|
|
background-position-x: 15%;
|
|
animation: progress-loading 5s ease-in-out infinite;
|
|
}
|
|
@keyframes progress-loading {
|
|
|
|
50% {
|
|
background-position-x: -115%;
|
|
}
|
|
}
|
|
@keyframes radiomark {
|
|
|
|
0% {
|
|
box-shadow: 0 0 0 12px hsl(var(--b1)) inset,
|
|
0 0 0 12px hsl(var(--b1)) inset;
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 0 3px hsl(var(--b1)) inset,
|
|
0 0 0 3px hsl(var(--b1)) inset;
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 0 4px hsl(var(--b1)) inset,
|
|
0 0 0 4px hsl(var(--b1)) inset;
|
|
}
|
|
}
|
|
.range:focus-visible::-webkit-slider-thumb {
|
|
--focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
|
|
}
|
|
.range:focus-visible::-moz-range-thumb {
|
|
--focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
|
|
}
|
|
.range::-webkit-slider-runnable-track {
|
|
height: 0.5rem;
|
|
width: 100%;
|
|
background-color: hsl(var(--bc) / 0.1);
|
|
border-radius: var(--rounded-box, 1rem);
|
|
}
|
|
.range::-moz-range-track {
|
|
height: 0.5rem;
|
|
width: 100%;
|
|
background-color: hsl(var(--bc) / 0.1);
|
|
border-radius: var(--rounded-box, 1rem);
|
|
}
|
|
.range::-webkit-slider-thumb {
|
|
position: relative;
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
border-style: none;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
|
|
border-radius: var(--rounded-box, 1rem);
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
top: 50%;
|
|
color: hsl(var(--range-shdw));
|
|
transform: translateY(-50%);
|
|
--filler-size: 100rem;
|
|
--filler-offset: 0.6rem;
|
|
box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset,
|
|
var(--focus-shadow, 0 0),
|
|
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
|
|
}
|
|
.range::-moz-range-thumb {
|
|
position: relative;
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
border-style: none;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
|
|
border-radius: var(--rounded-box, 1rem);
|
|
top: 50%;
|
|
color: hsl(var(--range-shdw));
|
|
--filler-size: 100rem;
|
|
--filler-offset: 0.5rem;
|
|
box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset,
|
|
var(--focus-shadow, 0 0),
|
|
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
|
|
}
|
|
@keyframes rating-pop {
|
|
|
|
0% {
|
|
transform: translateY(-0.125em);
|
|
}
|
|
|
|
40% {
|
|
transform: translateY(-0.125em);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.select:focus {
|
|
outline-style: solid;
|
|
outline-width: 2px;
|
|
outline-offset: 2px;
|
|
outline-color: hsl(var(--bc) / 0.2);
|
|
}
|
|
.select-disabled,
|
|
.select:disabled,
|
|
.select[disabled] {
|
|
cursor: not-allowed;
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--b2) / var(--tw-border-opacity));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 0.2;
|
|
}
|
|
.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
|
|
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
|
|
--tw-placeholder-opacity: 0.2;
|
|
}
|
|
.select-disabled::placeholder,
|
|
.select:disabled::placeholder,
|
|
.select[disabled]::placeholder {
|
|
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
|
|
--tw-placeholder-opacity: 0.2;
|
|
}
|
|
.select-multiple,
|
|
.select[multiple],
|
|
.select[size].select:not([size="1"]) {
|
|
background-image: none;
|
|
padding-right: 1rem;
|
|
}
|
|
[dir="rtl"] .select {
|
|
background-position: calc(0% + 12px) calc(1px + 50%),
|
|
calc(0% + 16px) calc(1px + 50%);
|
|
}
|
|
:where(.stats) > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-x-reverse: 0;
|
|
border-right-width: calc(1px * var(--tw-divide-x-reverse));
|
|
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
|
|
--tw-divide-y-reverse: 0;
|
|
border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
|
|
border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
|
|
}
|
|
.steps .step:before {
|
|
top: 0px;
|
|
grid-column-start: 1;
|
|
grid-row-start: 1;
|
|
height: 0.5rem;
|
|
width: 100%;
|
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
content: "";
|
|
margin-left: -100%;
|
|
}
|
|
.steps .step:after {
|
|
content: counter(step);
|
|
counter-increment: step;
|
|
z-index: 1;
|
|
position: relative;
|
|
grid-column-start: 1;
|
|
grid-row-start: 1;
|
|
display: grid;
|
|
height: 2rem;
|
|
width: 2rem;
|
|
place-items: center;
|
|
place-self: center;
|
|
border-radius: 9999px;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
}
|
|
.steps .step:first-child:before {
|
|
content: none;
|
|
}
|
|
.steps .step[data-content]:after {
|
|
content: attr(data-content);
|
|
}
|
|
.steps .step-neutral + .step-neutral:before,
|
|
.steps .step-neutral:after {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--n) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--nc) / var(--tw-text-opacity));
|
|
}
|
|
.steps .step-primary + .step-primary:before,
|
|
.steps .step-primary:after {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--p) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--pc) / var(--tw-text-opacity));
|
|
}
|
|
.steps .step-secondary + .step-secondary:before,
|
|
.steps .step-secondary:after {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--s) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--sc) / var(--tw-text-opacity));
|
|
}
|
|
.steps .step-accent + .step-accent:before,
|
|
.steps .step-accent:after {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--a) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--ac) / var(--tw-text-opacity));
|
|
}
|
|
.steps .step-info + .step-info:before {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--in) / var(--tw-bg-opacity));
|
|
}
|
|
.steps .step-info:after {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--in) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--inc) / var(--tw-text-opacity));
|
|
}
|
|
.steps .step-success + .step-success:before {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--su) / var(--tw-bg-opacity));
|
|
}
|
|
.steps .step-success:after {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--su) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--suc) / var(--tw-text-opacity));
|
|
}
|
|
.steps .step-warning + .step-warning:before {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
|
|
}
|
|
.steps .step-warning:after {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--wac) / var(--tw-text-opacity));
|
|
}
|
|
.steps .step-error + .step-error:before {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--er) / var(--tw-bg-opacity));
|
|
}
|
|
.steps .step-error:after {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--er) / var(--tw-bg-opacity));
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--erc) / var(--tw-text-opacity));
|
|
}
|
|
.tab.tab-active:not(.tab-disabled):not([disabled]) {
|
|
border-color: hsl(var(--bc) / var(--tw-border-opacity));
|
|
--tw-border-opacity: 1;
|
|
--tw-text-opacity: 1;
|
|
}
|
|
.tab:focus {
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
.tab:focus-visible {
|
|
outline: 2px solid currentColor;
|
|
outline-offset: -3px;
|
|
}
|
|
.tab:focus-visible.tab-lifted {
|
|
border-bottom-right-radius: var(--tab-radius, 0.5rem);
|
|
border-bottom-left-radius: var(--tab-radius, 0.5rem);
|
|
}
|
|
.tab-disabled,
|
|
.tab[disabled] {
|
|
cursor: not-allowed;
|
|
color: hsl(var(--bc) / var(--tw-text-opacity));
|
|
--tw-text-opacity: 0.2;
|
|
}
|
|
.tabs-boxed .tab {
|
|
border-radius: var(--rounded-btn, 0.5rem);
|
|
}
|
|
.table :where(th, td) {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
vertical-align: middle;
|
|
}
|
|
.table tr.active,
|
|
.table tr.active:nth-child(even),
|
|
.table-zebra tbody tr:nth-child(even) {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
|
|
}
|
|
.table-zebra tr.active,
|
|
.table-zebra tr.active:nth-child(even),
|
|
.table-zebra-zebra tbody tr:nth-child(even) {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
|
|
}
|
|
.table :where(thead, tbody) :where(tr:not(:last-child)),
|
|
.table :where(thead, tbody) :where(tr:first-child:last-child) {
|
|
border-bottom-width: 1px;
|
|
--tw-border-opacity: 1;
|
|
border-bottom-color: hsl(var(--b2) / var(--tw-border-opacity));
|
|
}
|
|
.table :where(thead, tfoot) {
|
|
white-space: nowrap;
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
font-weight: 700;
|
|
color: hsl(var(--bc) / 0.6);
|
|
}
|
|
@keyframes toast-pop {
|
|
|
|
0% {
|
|
transform: scale(0.9);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
[dir="rtl"] .toggle {
|
|
--handleoffsetcalculator: calc(var(--handleoffset) * 1);
|
|
}
|
|
.toggle:focus-visible {
|
|
outline-style: solid;
|
|
outline-width: 2px;
|
|
outline-offset: 2px;
|
|
outline-color: hsl(var(--bc) / 0.2);
|
|
}
|
|
.toggle:checked,
|
|
.toggle[checked="true"],
|
|
.toggle[aria-checked="true"] {
|
|
--handleoffsetcalculator: var(--handleoffset);
|
|
--tw-border-opacity: 1;
|
|
--tw-bg-opacity: 1;
|
|
}
|
|
[dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[checked="true"], [dir="rtl"] .toggle[aria-checked="true"] {
|
|
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
|
|
}
|
|
.toggle:indeterminate {
|
|
--tw-border-opacity: 1;
|
|
--tw-bg-opacity: 1;
|
|
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
|
|
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
|
|
0 0 0 2px var(--tglbg) inset;
|
|
}
|
|
[dir="rtl"] .toggle:indeterminate {
|
|
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
|
|
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
|
|
0 0 0 2px var(--tglbg) inset;
|
|
}
|
|
.toggle:disabled {
|
|
cursor: not-allowed;
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--bc) / var(--tw-border-opacity));
|
|
background-color: transparent;
|
|
opacity: 0.3;
|
|
--togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset,
|
|
var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset;
|
|
}
|
|
:root .prose {
|
|
--tw-prose-body: hsl(var(--bc) / 0.8);
|
|
--tw-prose-headings: hsl(var(--bc));
|
|
--tw-prose-lead: hsl(var(--bc));
|
|
--tw-prose-links: hsl(var(--bc));
|
|
--tw-prose-bold: hsl(var(--bc));
|
|
--tw-prose-counters: hsl(var(--bc));
|
|
--tw-prose-bullets: hsl(var(--bc) / 0.5);
|
|
--tw-prose-hr: hsl(var(--bc) / 0.2);
|
|
--tw-prose-quotes: hsl(var(--bc));
|
|
--tw-prose-quote-borders: hsl(var(--bc) / 0.2);
|
|
--tw-prose-captions: hsl(var(--bc) / 0.5);
|
|
--tw-prose-code: hsl(var(--bc));
|
|
--tw-prose-pre-code: hsl(var(--nc));
|
|
--tw-prose-pre-bg: hsl(var(--n));
|
|
--tw-prose-th-borders: hsl(var(--bc) / 0.5);
|
|
--tw-prose-td-borders: hsl(var(--bc) / 0.2);
|
|
}
|
|
.prose :where(code):not(:where([class~="not-prose"] *)) {
|
|
padding: 2px 8px;
|
|
border-radius: var(--rounded-badge);
|
|
}
|
|
.prose code:after,
|
|
.prose code:before {
|
|
content: none;
|
|
}
|
|
.prose pre code {
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
.prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)) {
|
|
border-bottom-color: hsl(var(--bc) / 20%);
|
|
}
|
|
.rounded-box {
|
|
border-radius: var(--rounded-box, 1rem);
|
|
}
|
|
.btm-nav-xs > *:where(.active) {
|
|
border-top-width: 1px;
|
|
}
|
|
.btm-nav-sm > *:where(.active) {
|
|
border-top-width: 2px;
|
|
}
|
|
.btm-nav-md > *:where(.active) {
|
|
border-top-width: 2px;
|
|
}
|
|
.btm-nav-lg > *:where(.active) {
|
|
border-top-width: 4px;
|
|
}
|
|
.btn-block {
|
|
width: 100%;
|
|
}
|
|
.btn-square:where(.btn-xs) {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
padding: 0px;
|
|
}
|
|
.btn-square:where(.btn-sm) {
|
|
height: 2rem;
|
|
width: 2rem;
|
|
padding: 0px;
|
|
}
|
|
.btn-square:where(.btn-md) {
|
|
height: 3rem;
|
|
width: 3rem;
|
|
padding: 0px;
|
|
}
|
|
.btn-square:where(.btn-lg) {
|
|
height: 4rem;
|
|
width: 4rem;
|
|
padding: 0px;
|
|
}
|
|
.join.join-vertical {
|
|
flex-direction: column;
|
|
}
|
|
.join.join-vertical .join-item:first-child:not(:last-child),
|
|
.join.join-vertical *:first-child:not(:last-child) .join-item {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-top-left-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
}
|
|
.join.join-vertical .join-item:last-child:not(:first-child),
|
|
.join.join-vertical *:last-child:not(:first-child) .join-item {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
}
|
|
.join.join-horizontal {
|
|
flex-direction: row;
|
|
}
|
|
.join.join-horizontal .join-item:first-child:not(:last-child),
|
|
.join.join-horizontal *:first-child:not(:last-child) .join-item {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: inherit;
|
|
border-top-left-radius: inherit;
|
|
}
|
|
.join.join-horizontal .join-item:last-child:not(:first-child),
|
|
.join.join-horizontal *:last-child:not(:first-child) .join-item {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
border-bottom-right-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
}
|
|
.steps-horizontal .step {
|
|
display: grid;
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
place-items: center;
|
|
text-align: center;
|
|
}
|
|
.steps-vertical .step {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-template-rows: repeat(1, minmax(0, 1fr));
|
|
}
|
|
.avatar.online:before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 10;
|
|
display: block;
|
|
border-radius: 9999px;
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--su) / var(--tw-bg-opacity));
|
|
outline-style: solid;
|
|
outline-width: 2px;
|
|
outline-color: hsl(var(--b1) / 1);
|
|
width: 15%;
|
|
height: 15%;
|
|
top: 7%;
|
|
right: 7%;
|
|
}
|
|
.btn-group .btn:not(:first-child):not(:last-child) {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.btn-group .btn:first-child:not(:last-child) {
|
|
margin-left: -1px;
|
|
margin-top: -0px;
|
|
border-top-left-radius: var(--rounded-btn, 0.5rem);
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.btn-group .btn:last-child:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: var(--rounded-btn, 0.5rem);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
|
|
}
|
|
.btn-group-horizontal .btn:not(:first-child):not(:last-child) {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.btn-group-horizontal .btn:first-child:not(:last-child) {
|
|
margin-left: -1px;
|
|
margin-top: -0px;
|
|
border-top-left-radius: var(--rounded-btn, 0.5rem);
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.btn-group-horizontal .btn:last-child:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: var(--rounded-btn, 0.5rem);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
|
|
}
|
|
.btn-group-vertical .btn:first-child:not(:last-child) {
|
|
margin-left: -0px;
|
|
margin-top: -1px;
|
|
border-top-left-radius: var(--rounded-btn, 0.5rem);
|
|
border-top-right-radius: var(--rounded-btn, 0.5rem);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.btn-group-vertical .btn:last-child:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
|
|
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
|
|
}
|
|
.join.join-vertical > :where(*:not(:first-child)) {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
margin-top: -1px;
|
|
}
|
|
.join.join-horizontal > :where(*:not(:first-child)) {
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
margin-left: -1px;
|
|
}
|
|
.menu-sm :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
|
|
.menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 0.25rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
border-radius: var(--rounded-btn, 0.5rem);
|
|
}
|
|
.menu-sm .menu-title {
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.steps-horizontal .step {
|
|
grid-template-rows: 40px 1fr;
|
|
grid-template-columns: auto;
|
|
min-width: 4rem;
|
|
}
|
|
.steps-horizontal .step:before {
|
|
height: 0.5rem;
|
|
width: 100%;
|
|
--tw-translate-x: 0px;
|
|
--tw-translate-y: 0px;
|
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
content: "";
|
|
margin-left: -100%;
|
|
}
|
|
.steps-vertical .step {
|
|
gap: 0.5rem;
|
|
grid-template-columns: 40px 1fr;
|
|
grid-template-rows: auto;
|
|
min-height: 4rem;
|
|
justify-items: start;
|
|
}
|
|
.steps-vertical .step:before {
|
|
height: 100%;
|
|
width: 0.5rem;
|
|
--tw-translate-x: -50%;
|
|
--tw-translate-y: -50%;
|
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
margin-left: 50%;
|
|
}
|
|
[dir="rtl"] .steps-vertical .step:before {
|
|
margin-right: auto;
|
|
}
|
|
.invisible {
|
|
visibility: hidden;
|
|
}
|
|
.static {
|
|
position: static;
|
|
}
|
|
.fixed {
|
|
position: fixed;
|
|
}
|
|
.absolute {
|
|
position: absolute;
|
|
}
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
.-inset-px {
|
|
inset: -1px;
|
|
}
|
|
.inset-x-0 {
|
|
left: 0px;
|
|
right: 0px;
|
|
}
|
|
.-top-3 {
|
|
top: -0.75rem;
|
|
}
|
|
.bottom-4 {
|
|
bottom: 1rem;
|
|
}
|
|
.right-4 {
|
|
right: 1rem;
|
|
}
|
|
.top-0 {
|
|
top: 0px;
|
|
}
|
|
.isolate {
|
|
isolation: isolate;
|
|
}
|
|
.-z-10 {
|
|
z-index: -10;
|
|
}
|
|
.z-\[1\] {
|
|
z-index: 1;
|
|
}
|
|
.mx-auto {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.mb-0 {
|
|
margin-bottom: 0px;
|
|
}
|
|
.mb-12 {
|
|
margin-bottom: 3rem;
|
|
}
|
|
.mb-2 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.mb-36 {
|
|
margin-bottom: 9rem;
|
|
}
|
|
.mb-4 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.mb-6 {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.mb-8 {
|
|
margin-bottom: 2rem;
|
|
}
|
|
.mt-16 {
|
|
margin-top: 4rem;
|
|
}
|
|
.mt-2 {
|
|
margin-top: 0.5rem;
|
|
}
|
|
.mt-3 {
|
|
margin-top: 0.75rem;
|
|
}
|
|
.mt-4 {
|
|
margin-top: 1rem;
|
|
}
|
|
.mt-6 {
|
|
margin-top: 1.5rem;
|
|
}
|
|
.mt-8 {
|
|
margin-top: 2rem;
|
|
}
|
|
.block {
|
|
display: block;
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.inline-flex {
|
|
display: inline-flex;
|
|
}
|
|
.table {
|
|
display: table;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.aspect-\[1155\/678\] {
|
|
aspect-ratio: 1155/678;
|
|
}
|
|
.h-14 {
|
|
height: 3.5rem;
|
|
}
|
|
.h-6 {
|
|
height: 1.5rem;
|
|
}
|
|
.h-\[60px\] {
|
|
height: 60px;
|
|
}
|
|
.min-h-screen {
|
|
min-height: 100vh;
|
|
}
|
|
.w-14 {
|
|
width: 3.5rem;
|
|
}
|
|
.w-5 {
|
|
width: 1.25rem;
|
|
}
|
|
.w-52 {
|
|
width: 13rem;
|
|
}
|
|
.w-\[60px\] {
|
|
width: 60px;
|
|
}
|
|
.w-\[72\.1875rem\] {
|
|
width: 72.1875rem;
|
|
}
|
|
.w-full {
|
|
width: 100%;
|
|
}
|
|
.max-w-2xl {
|
|
max-width: 42rem;
|
|
}
|
|
.max-w-full {
|
|
max-width: 100%;
|
|
}
|
|
.max-w-lg {
|
|
max-width: 32rem;
|
|
}
|
|
.flex-none {
|
|
flex: none;
|
|
}
|
|
.transform {
|
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
}
|
|
.transform-gpu {
|
|
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
}
|
|
.grid-cols-1 {
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
.flex-col {
|
|
flex-direction: column;
|
|
}
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
.items-baseline {
|
|
align-items: baseline;
|
|
}
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
.gap-12 {
|
|
gap: 3rem;
|
|
}
|
|
.gap-2 {
|
|
gap: 0.5rem;
|
|
}
|
|
.gap-4 {
|
|
gap: 1rem;
|
|
}
|
|
.gap-x-2 {
|
|
-moz-column-gap: 0.5rem;
|
|
column-gap: 0.5rem;
|
|
}
|
|
.gap-x-3 {
|
|
-moz-column-gap: 0.75rem;
|
|
column-gap: 0.75rem;
|
|
}
|
|
.gap-y-6 {
|
|
row-gap: 1.5rem;
|
|
}
|
|
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-space-y-reverse: 0;
|
|
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
|
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
|
}
|
|
.overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
.scroll-smooth {
|
|
scroll-behavior: smooth;
|
|
}
|
|
.break-words {
|
|
overflow-wrap: break-word;
|
|
}
|
|
.rounded {
|
|
border-radius: 0.25rem;
|
|
}
|
|
.rounded-3xl {
|
|
border-radius: 1.5rem;
|
|
}
|
|
.rounded-\[250px\] {
|
|
border-radius: 250px;
|
|
}
|
|
.rounded-\[75px\] {
|
|
border-radius: 75px;
|
|
}
|
|
.rounded-full {
|
|
border-radius: 9999px;
|
|
}
|
|
.rounded-lg {
|
|
border-radius: 0.5rem;
|
|
}
|
|
.rounded-md {
|
|
border-radius: 0.375rem;
|
|
}
|
|
.rounded-xl {
|
|
border-radius: 0.75rem;
|
|
}
|
|
.rounded-t-3xl {
|
|
border-top-left-radius: 1.5rem;
|
|
border-top-right-radius: 1.5rem;
|
|
}
|
|
.border-2 {
|
|
border-width: 2px;
|
|
}
|
|
.border-4 {
|
|
border-width: 4px;
|
|
}
|
|
.border-t-2 {
|
|
border-top-width: 2px;
|
|
}
|
|
.border-base-200 {
|
|
--tw-border-opacity: 1;
|
|
border-color: hsl(var(--b2) / var(--tw-border-opacity));
|
|
}
|
|
.border-zinc-700 {
|
|
--tw-border-opacity: 1;
|
|
border-color: rgb(63 63 70 / var(--tw-border-opacity));
|
|
}
|
|
.bg-\[\#18171e\] {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(24 23 30 / var(--tw-bg-opacity));
|
|
}
|
|
.bg-base-100 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
|
|
}
|
|
.bg-gray-900 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
|
}
|
|
.bg-indigo-500 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
|
|
}
|
|
.bg-primary {
|
|
--tw-bg-opacity: 1;
|
|
background-color: hsl(var(--p) / var(--tw-bg-opacity));
|
|
}
|
|
.bg-white\/60 {
|
|
background-color: rgb(255 255 255 / 0.6);
|
|
}
|
|
.bg-zinc-800 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
|
|
}
|
|
.bg-zinc-900 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
|
|
}
|
|
.bg-white {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
}
|
|
.bg-gradient-to-r {
|
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
}
|
|
.bg-gradient-to-tr {
|
|
background-image: linear-gradient(to top right, var(--tw-gradient-stops));
|
|
}
|
|
.from-\[\#44BCFF\] {
|
|
--tw-gradient-from: #44BCFF var(--tw-gradient-from-position);
|
|
--tw-gradient-to: rgb(68 188 255 / 0) var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
.from-\[\#ff80b5\] {
|
|
--tw-gradient-from: #ff80b5 var(--tw-gradient-from-position);
|
|
--tw-gradient-to: rgb(255 128 181 / 0) var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
.via-\[\#FF44EC\] {
|
|
--tw-gradient-to: rgb(255 68 236 / 0) var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), #FF44EC var(--tw-gradient-via-position), var(--tw-gradient-to);
|
|
}
|
|
.to-\[\#9089fc\] {
|
|
--tw-gradient-to: #9089fc var(--tw-gradient-to-position);
|
|
}
|
|
.to-\[\#FF675E\] {
|
|
--tw-gradient-to: #FF675E var(--tw-gradient-to-position);
|
|
}
|
|
.p-2 {
|
|
padding: 0.5rem;
|
|
}
|
|
.p-8 {
|
|
padding: 2rem;
|
|
}
|
|
.p-\[75px\] {
|
|
padding: 75px;
|
|
}
|
|
.px-3 {
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
}
|
|
.px-3\.5 {
|
|
padding-left: 0.875rem;
|
|
padding-right: 0.875rem;
|
|
}
|
|
.px-36 {
|
|
padding-left: 9rem;
|
|
padding-right: 9rem;
|
|
}
|
|
.px-4 {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
.px-6 {
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
.px-8 {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
.px-\[75px\] {
|
|
padding-left: 75px;
|
|
padding-right: 75px;
|
|
}
|
|
.py-2 {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.py-2\.5 {
|
|
padding-top: 0.625rem;
|
|
padding-bottom: 0.625rem;
|
|
}
|
|
.py-24 {
|
|
padding-top: 6rem;
|
|
padding-bottom: 6rem;
|
|
}
|
|
.py-3 {
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
}
|
|
.py-4 {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
.py-6 {
|
|
padding-top: 1.5rem;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
.py-8 {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
.pb-\[75px\] {
|
|
padding-bottom: 75px;
|
|
}
|
|
.pt-\[75px\] {
|
|
padding-top: 75px;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.text-2xl {
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
}
|
|
.text-3xl {
|
|
font-size: 1.875rem;
|
|
line-height: 2.25rem;
|
|
}
|
|
.text-4xl {
|
|
font-size: 2.25rem;
|
|
line-height: 2.5rem;
|
|
}
|
|
.text-5xl {
|
|
font-size: 3rem;
|
|
line-height: 1;
|
|
}
|
|
.text-6xl {
|
|
font-size: 3.75rem;
|
|
line-height: 1;
|
|
}
|
|
.text-\[32px\] {
|
|
font-size: 32px;
|
|
}
|
|
.text-base {
|
|
font-size: 1rem;
|
|
line-height: 1.5rem;
|
|
}
|
|
.text-lg {
|
|
font-size: 1.125rem;
|
|
line-height: 1.75rem;
|
|
}
|
|
.text-sm {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
.text-xl {
|
|
font-size: 1.25rem;
|
|
line-height: 1.75rem;
|
|
}
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
.font-semibold {
|
|
font-weight: 600;
|
|
}
|
|
.uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
.leading-6 {
|
|
line-height: 1.5rem;
|
|
}
|
|
.leading-7 {
|
|
line-height: 1.75rem;
|
|
}
|
|
.leading-8 {
|
|
line-height: 2rem;
|
|
}
|
|
.tracking-tight {
|
|
letter-spacing: -0.025em;
|
|
}
|
|
.text-gray-300 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(209 213 219 / var(--tw-text-opacity));
|
|
}
|
|
.text-gray-400 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(156 163 175 / var(--tw-text-opacity));
|
|
}
|
|
.text-gray-500 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(107 114 128 / var(--tw-text-opacity));
|
|
}
|
|
.text-gray-600 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(75 85 99 / var(--tw-text-opacity));
|
|
}
|
|
.text-gray-900 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(17 24 39 / var(--tw-text-opacity));
|
|
}
|
|
.text-green-400 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(74 222 128 / var(--tw-text-opacity));
|
|
}
|
|
.text-green-600 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(22 163 74 / var(--tw-text-opacity));
|
|
}
|
|
.text-green-700 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(21 128 61 / var(--tw-text-opacity));
|
|
}
|
|
.text-indigo-400 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(129 140 248 / var(--tw-text-opacity));
|
|
}
|
|
.text-indigo-600 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(79 70 229 / var(--tw-text-opacity));
|
|
}
|
|
.text-primary {
|
|
--tw-text-opacity: 1;
|
|
color: hsl(var(--p) / var(--tw-text-opacity));
|
|
}
|
|
.text-white {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
}
|
|
.opacity-30 {
|
|
opacity: 0.3;
|
|
}
|
|
.opacity-70 {
|
|
opacity: 0.7;
|
|
}
|
|
.mix-blend-lighten {
|
|
mix-blend-mode: lighten;
|
|
}
|
|
.shadow-2xl {
|
|
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
}
|
|
.shadow-sm {
|
|
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
}
|
|
.shadow-xl {
|
|
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
}
|
|
.ring-1 {
|
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
}
|
|
.ring-inset {
|
|
--tw-ring-inset: inset;
|
|
}
|
|
.ring-gray-900\/10 {
|
|
--tw-ring-color: rgb(17 24 39 / 0.1);
|
|
}
|
|
.ring-indigo-200 {
|
|
--tw-ring-opacity: 1;
|
|
--tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
|
|
}
|
|
.blur-3xl {
|
|
--tw-blur: blur(64px);
|
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
}
|
|
.blur-lg {
|
|
--tw-blur: blur(16px);
|
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
}
|
|
.filter {
|
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
}
|
|
.transition {
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
.transition-all {
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
.duration-1000 {
|
|
transition-duration: 1000ms;
|
|
}
|
|
.duration-200 {
|
|
transition-duration: 200ms;
|
|
}
|
|
.hover\:bg-indigo-400:hover {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
|
|
}
|
|
.hover\:bg-zinc-800:hover {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
|
|
}
|
|
.hover\:text-white:hover {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
}
|
|
.hover\:ring-indigo-300:hover {
|
|
--tw-ring-opacity: 1;
|
|
--tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity));
|
|
}
|
|
.focus\:outline-none:focus {
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
.focus\:ring-2:focus {
|
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
}
|
|
.focus\:ring-gray-900:focus {
|
|
--tw-ring-opacity: 1;
|
|
--tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
|
|
}
|
|
.focus\:ring-offset-2:focus {
|
|
--tw-ring-offset-width: 2px;
|
|
}
|
|
.focus-visible\:outline:focus-visible {
|
|
outline-style: solid;
|
|
}
|
|
.focus-visible\:outline-2:focus-visible {
|
|
outline-width: 2px;
|
|
}
|
|
.focus-visible\:outline-offset-2:focus-visible {
|
|
outline-offset: 2px;
|
|
}
|
|
.focus-visible\:outline-indigo-500:focus-visible {
|
|
outline-color: #6366f1;
|
|
}
|
|
.focus-visible\:outline-indigo-600:focus-visible {
|
|
outline-color: #4f46e5;
|
|
}
|
|
.group:hover .group-hover\:-inset-1 {
|
|
inset: -0.25rem;
|
|
}
|
|
.group:hover .group-hover\:opacity-100 {
|
|
opacity: 1;
|
|
}
|
|
.group:hover .group-hover\:duration-200 {
|
|
transition-duration: 200ms;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
.dark\:text-green-400 {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(74 222 128 / var(--tw-text-opacity));
|
|
}
|
|
|
|
.dark\:text-white {
|
|
--tw-text-opacity: 1;
|
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
}
|
|
}
|
|
@media (min-width: 640px) {
|
|
|
|
.sm\:mx-8 {
|
|
margin-left: 2rem;
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.sm\:mt-10 {
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.sm\:mt-20 {
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
.sm\:gap-y-0 {
|
|
row-gap: 0px;
|
|
}
|
|
|
|
.sm\:rounded-b-none {
|
|
border-bottom-right-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
}
|
|
|
|
.sm\:p-10 {
|
|
padding: 2.5rem;
|
|
}
|
|
|
|
.sm\:py-32 {
|
|
padding-top: 8rem;
|
|
padding-bottom: 8rem;
|
|
}
|
|
|
|
.sm\:text-5xl {
|
|
font-size: 3rem;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
|
|
.md\:flex {
|
|
display: flex;
|
|
}
|
|
|
|
.md\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
.md\:w-1\/2 {
|
|
width: 50%;
|
|
}
|
|
|
|
.md\:bg-gradient-to-r {
|
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
}
|
|
|
|
.md\:from-zinc-900 {
|
|
--tw-gradient-from: #18181b var(--tw-gradient-from-position);
|
|
--tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
|
|
.md\:to-zinc-800 {
|
|
--tw-gradient-to: #27272a var(--tw-gradient-to-position);
|
|
}
|
|
}
|
|
@media (min-width: 1024px) {
|
|
|
|
.lg\:sticky {
|
|
position: sticky;
|
|
}
|
|
|
|
.lg\:order-first {
|
|
order: -9999;
|
|
}
|
|
|
|
.lg\:col-span-3 {
|
|
grid-column: span 3 / span 3;
|
|
}
|
|
|
|
.lg\:col-span-8 {
|
|
grid-column: span 8 / span 8;
|
|
}
|
|
|
|
.lg\:mx-0 {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.lg\:block {
|
|
display: block;
|
|
}
|
|
|
|
.lg\:grid {
|
|
display: grid;
|
|
}
|
|
|
|
.lg\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
.lg\:h-screen {
|
|
height: 100vh;
|
|
}
|
|
|
|
.lg\:w-1\/2 {
|
|
width: 50%;
|
|
}
|
|
|
|
.lg\:max-w-4xl {
|
|
max-width: 56rem;
|
|
}
|
|
|
|
.lg\:grid-cols-12 {
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
}
|
|
|
|
.lg\:grid-cols-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.lg\:overflow-y-scroll {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.lg\:rounded-bl-3xl {
|
|
border-bottom-left-radius: 1.5rem;
|
|
}
|
|
|
|
.lg\:rounded-tr-none {
|
|
border-top-right-radius: 0px;
|
|
}
|
|
|
|
.lg\:px-4 {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.lg\:px-8 {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
}
|
|
@media (min-width: 1280px) {
|
|
|
|
.xl\:mb-0 {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.xl\:w-1\/5 {
|
|
width: 20%;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body id='body'>
|
|
<header class="flex items-center bg-zinc-900 py-4 px-8 shadow-xl justify-between">
|
|
<a href="/" aria-label="Home" class="flex items-center gap-4 bg-[#18171e] rounded-lg px-4">
|
|
<img
|
|
src="/img/pockethost-cloud-logo.jpg"
|
|
alt="logo"
|
|
width="450"
|
|
height="450"
|
|
class="w-14 h-14 rounded-lg"
|
|
/>
|
|
|
|
<h1 class="text-green-700 dark:text-white font-bold text-2xl"
|
|
>PocketHost</h1
|
|
>
|
|
</a>
|
|
|
|
|
|
<div class="md:flex hidden gap-2">
|
|
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/'>Home</a>
|
|
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/blog'>Blog</a>
|
|
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/docs/overview/introduction'>Docs</a>
|
|
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='https://discord.gg/nVTxCMEcGT'>Support</a>
|
|
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='https://github.com/pockethost/pockethost'><i class="fa-brands fa-github"></i></a>
|
|
</div>
|
|
|
|
<div class="block md:hidden">
|
|
<div class="dropdown dropdown-end">
|
|
<label tabindex="0" class="btn btn-ghost lg:hidden">
|
|
<i class="fa-regular fa-bars text-2xl"></i>
|
|
</label>
|
|
|
|
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow-2xl bg-base-100 border-4 border-base-200 rounded-box w-52">
|
|
<li><a class='py-3 font-bold' href='/'>Home</a></li>
|
|
<li><a class='py-3 font-bold' href='/blog'>Blog</a></li>
|
|
<li><a class='py-3 font-bold' href='/docs/overview/introduction'>Docs</a></li>
|
|
<li><a class='py-3 font-bold' href='https://discord.gg/nVTxCMEcGT'>Support</a></li>
|
|
<li><a class='py-3 font-bold' href='https://github.com/pockethost/pockethost'><i class="fa-brands fa-github"></i> GitHub</a> </li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<div class='prose mx-auto py-8 px-4'>
|
|
<h1 class='text-white font-bold'>PocketHost 0.9.0</h1>
|
|
|
|
<div class='text-green-400 font-bold'>
|
|
<time datetime="2023-10-01">01 October 2023</time>
|
|
</div>
|
|
|
|
<div class='mb-36'>
|
|
<h1 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview">#</a></h1>
|
|
<p>Get ready to dive into the newest chapter of the PocketHost saga with the latest 0.9.0 release, offering some major enhancements that'll spring your productivity into overdrive.</p>
|
|
<p>Take control with the new PocketBase JS Hooks support. All hail the <code>pb_hooks</code> directory, a new playground for your wildest Javascript explorations. As a result, Deno worker support took the backstage, but rest assured, it's for a good reason: the stability of the sailing ship that is the PocketHost-PocketBase alliance.</p>
|
|
<p>Expect an extra layer of robustness as instances now run in Docker containers. It's a necessary security guard ensuring every instance holds its ground securely without interfering with the others. Bear with us on this one - we're expecting a little turbulence as we calibrate the Docker influence on the platform.</p>
|
|
<p>Witness the speed of light with Static Site Generation (SSG) on the new-look frontend, now hosted on Cloudflare Pages. It's as if the Mothership running in San Francisco engaged hyperdrive, promising almost instant load times, and delivering a huge upgrade in user experience.</p>
|
|
<p>For an in-depth look at all the enhancements and discussions around v1.0 and its potential paid tiers, hop onto our dedicated Discord server. Your input might just influence the future face of PocketHost. Get your hands on the project now - this ride to fantastic, efficient web hosting is only just beginning.</p>
|
|
<p>PocketHost is the zero-config 'PocketBase in the cloud' platform. Thank you for everyone's continued support for this project.</p>
|
|
<h2 id="hook-support" tabindex="-1">Hook Support! <a class="header-anchor" href="#hook-support">#</a></h2>
|
|
<p>PocketHost now officially supports PocketBase JS hooks via the <code>pb_hooks</code> directory. This feature was soft-launched about a month ago and is stable.</p>
|
|
<p>Support for Deno workers has been removed in favor of <code>pb_hooks</code>.</p>
|
|
<p>PocketHost itself also moved some of its own code into <code>pb_hooks</code> with mixed results: database triggers worked well, but API endpoints didn't. We hit too many library and platform incompatibilities with the goja JS runtime environment. The Deno workers allowed full nodejs compatibility, but ultimately, we felt that supporting <code>pb_hooks</code> was going to be better for both the PocketHost and PocketBase projects.</p>
|
|
<h2 id="instances-now-run-in-docker" tabindex="-1">Instances now run in Docker <a class="header-anchor" href="#instances-now-run-in-docker">#</a></h2>
|
|
<p>PocketHost now runs your instance in a Docker container. This helps us guarantee resources for your instance as well as secure your instance from other instances. Now that your PocketBase instance has OS-level access via <code>pb_hooks</code>, this was a necessary security step and is good for stability too.</p>
|
|
<p>We expect <em>some</em> temporary platform instability while we iron out any new side effects introduced by this change, but long term, the PocketHost platform will be more stable and durable with this change in place.</p>
|
|
<h2 id="frontend-is-now-ssg" tabindex="-1">Frontend is now SSG <a class="header-anchor" href="#frontend-is-now-ssg">#</a></h2>
|
|
<p>We moved the entire frontend (built in SvelteKit) to SSG on Cloudflare Pages. This means near-instant load times for the PocketHost dashboard anywhere around the globe.</p>
|
|
<p>Piror to this change, the Mothership running in San Francisco USA was running a nodejs web server and serving the frontend. The user experience should be dramatically improved for everyone now.</p>
|
|
<p>This change also gives us the added benefit of CI preview URLs for all frontend updates, even in feature branches.</p>
|
|
<h2 id="v1-0-paid-tiers-roadmap-and-discussion" tabindex="-1">v1.0 Paid Tiers, Roadmap, and Discussion <a class="header-anchor" href="#v1-0-paid-tiers-roadmap-and-discussion">#</a></h2>
|
|
<p>Many of these updates have surrounded discussion around an eventual v1.0 and introduction of a paid tier. There is no timeline for v1.0, but it's under active discussion <a href="https://discord.com/channels/1128192380500193370/1153379252255862837">in the v1.0 thread on our Discord server</a>.</p>
|
|
<p>Already green-lit and under active development:</p>
|
|
<ul>
|
|
<li>PocketHost dashboard feature to manage user feedback, feature suggestions, and voting on features</li>
|
|
<li>New marketing site and dashboard ui/ux overhaul</li>
|
|
<li>Charts and stats for instances</li>
|
|
<li>Uptime monitoring</li>
|
|
</ul>
|
|
<h2 id="other-highlights" tabindex="-1">Other Highlights <a class="header-anchor" href="#other-highlights">#</a></h2>
|
|
<ul>
|
|
<li>Improved logging - <code>console.log</code> in JS hooks now appears in logs</li>
|
|
<li>Improved secrets - secrets are now passed to <code>pocketbase</code> executable and are available in JS hooks</li>
|
|
</ul>
|
|
<h2 id="change-log" tabindex="-1">Change log <a class="header-anchor" href="#change-log">#</a></h2>
|
|
<ul>
|
|
<li>enh: imrpoved paid users view</li>
|
|
<li>enh: local dev setup</li>
|
|
<li>enh: improve debugging mode</li>
|
|
<li>enh: downloader debugging information</li>
|
|
<li>chore: remove old cli package</li>
|
|
<li>enh: update sftp link</li>
|
|
<li>chore: add permalink to live publishing step</li>
|
|
<li>enh: Cloudflare Pages SSG publishing</li>
|
|
<li>enh: SSG</li>
|
|
<li>fix: sveltekit environment variables</li>
|
|
<li>enh: invocation indexes</li>
|
|
<li>chore: comment template environment variables</li>
|
|
<li>enh: run PocketBase in debugging mode when DEBUG=true</li>
|
|
<li>enh: gitignore update</li>
|
|
<li>fix: db migrations</li>
|
|
<li>fix: secondsThisMonth in users table</li>
|
|
<li>enh: usage tracking to JS hooks</li>
|
|
<li>enh: add docker-compose sample for better dx</li>
|
|
<li>enh: mothership backup script</li>
|
|
<li>enh: autoremove docker container at exit</li>
|
|
<li>enh: derive docker container name from instance name</li>
|
|
<li>enh: logging/debugging output</li>
|
|
<li>chore: track uid in invocations</li>
|
|
<li>chore: user record cleanup</li>
|
|
<li>chore: update env error messages</li>
|
|
<li>chore: refactor assert()</li>
|
|
<li>feat: support pb_hooks on monthership</li>
|
|
<li>chore: remove db backup constants</li>
|
|
<li>Merge branch 'master' of github.com:benallfree/pockethost</li>
|
|
<li>docs: v0.9.0 update</li>
|
|
<li>GitBook: No commit message</li>
|
|
<li>chore: remove deno worker helper lib</li>
|
|
<li>feat: remove Deno worker, add console.log capture for pb_hooks</li>
|
|
<li>feat: docker</li>
|
|
<li>chore: husky linting</li>
|
|
<li>chore: formatting fix</li>
|
|
<li>feat: potential paid users view</li>
|
|
<li>fix: dotenv holdover fix</li>
|
|
<li>fix: startup error - initialize portmanager first</li>
|
|
<li>chore: make ftpService await initialization</li>
|
|
<li>chore: optimize port allocation initialization</li>
|
|
<li>chore: env template typo fix</li>
|
|
<li>chore: doc update</li>
|
|
<li>chore: yarn lock update</li>
|
|
<li>chore: tsx update</li>
|
|
<li>chore: prettier update</li>
|
|
<li>chore: remove dotenv support</li>
|
|
<li>chore: frontend tsconfig fix</li>
|
|
<li>chore: dotenvify frontend</li>
|
|
<li>chore: add dotenv support to root</li>
|
|
<li>chore: yarn.lock update</li>
|
|
<li>chore: hoist tslib and ts versions</li>
|
|
<li>chore: node version guard</li>
|
|
<li>chore: update sqlite3</li>
|
|
<li>chore: fix env.ts typing</li>
|
|
<li>chore: upgrade svelte & sveltekit</li>
|
|
<li>docs: hosting section</li>
|
|
<li>fix: Accept all headers in options requests (#274)</li>
|
|
<li>chore: prod logging update</li>
|
|
<li>feat: pb_hooks</li>
|
|
<li>chore: prevent access to pb_data and pb_migrations while instance may be running</li>
|
|
<li>docs: pb_hooks</li>
|
|
<li>feat: Support pb_hooks directory introduced by PocketBase 0.17.0 (#272)</li>
|
|
<li>chore: move UpdaterService</li>
|
|
<li>fix: reactive instance subdomain in code sample section</li>
|
|
</ul>
|
|
<h2 id="stats-and-info" tabindex="-1">Stats and Info <a class="header-anchor" href="#stats-and-info">#</a></h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>name</th>
|
|
<th>value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>stars</td>
|
|
<td>424</td>
|
|
</tr>
|
|
<tr>
|
|
<td>userCount</td>
|
|
<td>2636</td>
|
|
</tr>
|
|
<tr>
|
|
<td>runningInstanceCount</td>
|
|
<td>14</td>
|
|
</tr>
|
|
<tr>
|
|
<td>instanceCount</td>
|
|
<td>3560</td>
|
|
</tr>
|
|
<tr>
|
|
<td>instanceCount1Hour</td>
|
|
<td>82</td>
|
|
</tr>
|
|
<tr>
|
|
<td>instanceCount1Day</td>
|
|
<td>297</td>
|
|
</tr>
|
|
<tr>
|
|
<td>instanceCount7Day</td>
|
|
<td>617</td>
|
|
</tr>
|
|
<tr>
|
|
<td>instanceCount30Day</td>
|
|
<td>1159</td>
|
|
</tr>
|
|
<tr>
|
|
<td>invocationCount</td>
|
|
<td>2613110</td>
|
|
</tr>
|
|
<tr>
|
|
<td>invocationCount1Hour</td>
|
|
<td>606</td>
|
|
</tr>
|
|
<tr>
|
|
<td>invocationCount1Day</td>
|
|
<td>15068</td>
|
|
</tr>
|
|
<tr>
|
|
<td>invocationCount7Day</td>
|
|
<td>133707</td>
|
|
</tr>
|
|
<tr>
|
|
<td>invocationCount30Day</td>
|
|
<td>447101</td>
|
|
</tr>
|
|
<tr>
|
|
<td>invocationSeconds</td>
|
|
<td>82116629.66801019</td>
|
|
</tr>
|
|
<tr>
|
|
<td>invocationSeconds1Hour</td>
|
|
<td>64166.25600000002</td>
|
|
</tr>
|
|
<tr>
|
|
<td>invocationSeconds1Day</td>
|
|
<td>842562.3680000034</td>
|
|
</tr>
|
|
<tr>
|
|
<td>invocationSeconds7Day</td>
|
|
<td>5469632.9049999295</td>
|
|
</tr>
|
|
<tr>
|
|
<td>invocationSeconds30Day</td>
|
|
<td>18793014.398999963</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class='text-2xl'>
|
|
Connect with us! Join our <a href="https://discord.gg/BnhQJMgvYd">Discord server</a> or jump into <a href="https://github.com/pockethost/pockethost/discussions">GitHub Discussions</a>
|
|
</div>
|
|
</div>
|
|
<div class='mb-6'>
|
|
</div>
|
|
<div class="flex items-center justify-between py-6">
|
|
<div><a href="/blog/0.8.2/" class='btn'><i class="fa-solid fa-arrow-left"></i> PocketHost 0.8.2</a></div>
|
|
<div><a href="/blog/0.9.1/" class='btn'>PocketHost 0.9.1 <i class="fa-solid fa-arrow-right"></i></a></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<a href='#body' aria-label='Return to the top of the page' class='fixed bottom-4 right-4 btn btn-square'>
|
|
<i class="fa-regular fa-arrow-up"></i>
|
|
</a>
|
|
|
|
<footer></footer>
|
|
|
|
<!-- Current page: /blog/0.9.0/ -->
|
|
</body>
|
|
</html>
|