mirror of
https://github.com/Macrame-App/Macrame
synced 2025-12-29 07:19:26 +00:00
Redundant commit: only to switch branches. Can be removed.
This commit is contained in:
Jesse Malotaux
commit
59dd711ab3
102 changed files with 34954 additions and 0 deletions
357
public/assets/DialogComp-ByJn29_w.css
Normal file
357
public/assets/DialogComp-ByJn29_w.css
Normal file
|
|
@ -0,0 +1,357 @@
|
|||
/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
|
||||
button, .btn {
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing, .25rem) * 3);
|
||||
border-radius: var(--radius-lg, .5rem);
|
||||
border-style: var(--tw-border-style);
|
||||
--tw-border-style: solid;
|
||||
height: fit-content;
|
||||
padding-inline: calc(var(--spacing, .25rem) * 4);
|
||||
padding-block: calc(var(--spacing, .25rem) * 2);
|
||||
--tw-font-weight: var(--font-weight-normal, 400);
|
||||
font-weight: var(--font-weight-normal, 400);
|
||||
--tw-tracking: var(--tracking-wide, .025em);
|
||||
letter-spacing: var(--tracking-wide, .025em);
|
||||
transition-property: all;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
transition: border-color .1s ease-in-out, background-color .2s;
|
||||
display: flex;
|
||||
}
|
||||
:is(button, .btn):not(.button__subtle, .button__ghost):hover {
|
||||
--tw-shadow-color: var(--color-black, #000);
|
||||
}
|
||||
:is(button, .btn)[disabled], :is(button, .btn).disabled {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
}
|
||||
:is(button, .btn) svg {
|
||||
width: calc(var(--spacing, .25rem) * 5);
|
||||
height: calc(var(--spacing, .25rem) * 5);
|
||||
transition-property: stroke;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
|
||||
--tw-duration: .4s;
|
||||
--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));
|
||||
transition-duration: .4s;
|
||||
transition-timing-function: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));
|
||||
}
|
||||
:is(button, .btn).btn__sm svg {
|
||||
width: calc(var(--spacing, .25rem) * 4);
|
||||
height: calc(var(--spacing, .25rem) * 4);
|
||||
}
|
||||
:is(button, .btn).btn__lg svg {
|
||||
width: calc(var(--spacing, .25rem) * 6);
|
||||
height: calc(var(--spacing, .25rem) * 6);
|
||||
}
|
||||
:is(button, .btn):hover {
|
||||
color: var(--color-white, #fff) !important;
|
||||
}
|
||||
:is(button, .btn):hover svg {
|
||||
stroke: var(--color-white, #fff) !important;
|
||||
}
|
||||
:is(button, .btn).btn__primary {
|
||||
border-color: var(--color-sky-100, oklch(.951 .026 236.824));
|
||||
background-color: color-mix(in oklab, var(--color-sky-100, oklch(.951 .026 236.824)) 10%, transparent);
|
||||
color: var(--color-sky-100, oklch(.951 .026 236.824));
|
||||
}
|
||||
:is(button, .btn).btn__primary svg {
|
||||
stroke: var(--color-sky-200, oklch(.901 .058 230.902));
|
||||
}
|
||||
:is(button, .btn).btn__primary:hover {
|
||||
border-color: var(--color-sky-300, oklch(.828 .111 230.318));
|
||||
background-color: color-mix(in oklab, var(--color-sky-400, oklch(.746 .16 232.661)) 40%, transparent);
|
||||
}
|
||||
:is(button, .btn).btn__secondary {
|
||||
border-color: var(--color-amber-100, oklch(.962 .059 95.617));
|
||||
background-color: color-mix(in oklab, var(--color-amber-100, oklch(.962 .059 95.617)) 10%, transparent);
|
||||
color: var(--color-amber-100, oklch(.962 .059 95.617));
|
||||
}
|
||||
:is(button, .btn).btn__secondary svg {
|
||||
stroke: var(--color-amber-300, oklch(.879 .169 91.605));
|
||||
}
|
||||
:is(button, .btn).btn__secondary:hover {
|
||||
border-color: var(--color-amber-400, oklch(.828 .189 84.429));
|
||||
background-color: color-mix(in oklab, var(--color-amber-400, oklch(.828 .189 84.429)) 40%, transparent);
|
||||
}
|
||||
:is(button, .btn).btn__danger {
|
||||
border-color: var(--color-rose-100, oklch(.941 .03 12.58));
|
||||
background-color: color-mix(in oklab, var(--color-rose-200, oklch(.892 .058 10.001)) 20%, transparent);
|
||||
color: var(--color-rose-200, oklch(.892 .058 10.001));
|
||||
}
|
||||
:is(button, .btn).btn__danger svg {
|
||||
stroke: var(--color-rose-400, oklch(.712 .194 13.428));
|
||||
}
|
||||
:is(button, .btn).btn__danger:hover {
|
||||
border-color: var(--color-rose-500, oklch(.645 .246 16.439));
|
||||
background-color: color-mix(in oklab, var(--color-rose-400, oklch(.712 .194 13.428)) 40%, transparent);
|
||||
color: var(--color-white, #fff);
|
||||
}
|
||||
:is(button, .btn).btn__dark {
|
||||
border-color: var(--color-slate-400, oklch(.704 .04 256.788));
|
||||
background-color: color-mix(in oklab, var(--color-slate-200, oklch(.929 .013 255.508)) 10%, transparent);
|
||||
color: var(--color-slate-100, oklch(.968 .007 247.896));
|
||||
}
|
||||
:is(button, .btn).btn__dark svg {
|
||||
stroke: var(--color-slate-300, oklch(.869 .022 252.894));
|
||||
}
|
||||
:is(button, .btn).btn__dark:hover {
|
||||
border-color: var(--color-slate-200, oklch(.929 .013 255.508));
|
||||
background-color: color-mix(in oklab, var(--color-slate-400, oklch(.704 .04 256.788)) 40%, transparent);
|
||||
color: var(--color-white, #fff);
|
||||
}
|
||||
:is(button, .btn).btn__success {
|
||||
border-color: var(--color-lime-100, oklch(.967 .067 122.328));
|
||||
background-color: color-mix(in oklab, var(--color-lime-200, oklch(.938 .127 124.321)) 10%, transparent);
|
||||
color: var(--color-lime-100, oklch(.967 .067 122.328));
|
||||
}
|
||||
:is(button, .btn).btn__success svg {
|
||||
stroke: var(--color-lime-400, oklch(.841 .238 128.85));
|
||||
}
|
||||
:is(button, .btn).btn__success:hover {
|
||||
border-color: var(--color-lime-500, oklch(.768 .233 130.85));
|
||||
background-color: color-mix(in oklab, var(--color-lime-400, oklch(.841 .238 128.85)) 40%, transparent);
|
||||
color: var(--color-white, #fff);
|
||||
}
|
||||
:is(button, .btn).btn__subtle {
|
||||
color: var(--color-white, #fff);
|
||||
background-color: #0000;
|
||||
border-color: #0000;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
:is(button, .btn).btn__subtle:hover {
|
||||
background-color: color-mix(in oklab, var(--color-white, #fff) 10%, transparent);
|
||||
}
|
||||
}
|
||||
:is(button, .btn).btn__subtle:hover {
|
||||
border-color: color-mix(in oklab, var(--color-white, #fff) 40%, transparent);
|
||||
background-color: color-mix(in oklab, var(--color-white, #fff) 20%, transparent);
|
||||
--tw-gradient-to: color-mix(in oklab, var(--color-white, #fff) 30%, transparent);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
:is(button, .btn).btn__ghost {
|
||||
color: color-mix(in oklab, var(--color-white, #fff) 80%, transparent);
|
||||
background-color: #0000;
|
||||
border-color: #0000;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
:is(button, .btn).btn__ghost:hover {
|
||||
color: var(--color-white, #fff);
|
||||
}
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-font-weight {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-tracking {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-inset-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-inset-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-ring-color {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-ring-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-inset-ring-color {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-inset-ring-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-ring-inset {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-ring-offset-width {
|
||||
syntax: "<length>";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-ring-offset-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: #fff;
|
||||
}
|
||||
@property --tw-ring-offset-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-duration {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-ease {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-gradient-position {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-gradient-from {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-via {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-to {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-stops {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-gradient-via-stops {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-gradient-from-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 0%;
|
||||
}
|
||||
@property --tw-gradient-via-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 50%;
|
||||
}
|
||||
@property --tw-gradient-to-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
|
||||
.dialog-container {
|
||||
position: relative;
|
||||
}
|
||||
.dialog-container dialog {
|
||||
pointer-events: none;
|
||||
z-index: 50;
|
||||
--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
|
||||
max-width: calc(100vw - 2rem);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
color: var(--color-slate-200, oklch(.929 .013 255.508));
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
.dialog-container dialog[open] {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.dialog-container dialog::backdrop {
|
||||
background-color: color-mix(in oklab, var(--color-black, #000) 50%, transparent);
|
||||
--tw-backdrop-blur: blur(var(--blur-xs, 4px));
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
|
||||
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
|
||||
}
|
||||
.dialog-container dialog .dialog__close {
|
||||
top: calc(var(--spacing, .25rem) * 4);
|
||||
right: calc(var(--spacing, .25rem) * 4);
|
||||
padding: calc(var(--spacing, .25rem) * 0);
|
||||
color: var(--color-white, #fff);
|
||||
position: absolute;
|
||||
}
|
||||
.dialog-container dialog .dialog__close svg {
|
||||
width: calc(var(--spacing, .25rem) * 5);
|
||||
height: calc(var(--spacing, .25rem) * 5);
|
||||
}
|
||||
.dialog__content > :first-child {
|
||||
padding-right: calc(var(--spacing, .25rem) * 8);
|
||||
}
|
||||
@property --tw-translate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-translate-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-translate-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-backdrop-blur {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-backdrop-brightness {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-backdrop-contrast {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-backdrop-grayscale {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-backdrop-hue-rotate {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-backdrop-invert {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-backdrop-opacity {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-backdrop-saturate {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
@property --tw-backdrop-sepia {
|
||||
syntax: "*";
|
||||
inherits: false
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue