First Commit

css/button.css.v1

@@ -0,0 +1,138 @@
+:root,.light,.default,[data-theme=light],[data-theme=default]{color-scheme:light;
+--white: #fff;
+--black: #000;
+--snow: #fcfcfc;
+--eclipse: #18181b;
+--border-width: 1px;
+--field-border-width: 0px;
+--disabled-opacity: 0.5;
+--ring-offset-width: 2px;
+--cursor-interactive: pointer;
+--cursor-disabled: not-allowed;
+--scrollbar-track: transparent;
+--scrollbar-gutter: auto;
+--scrollbar-width: thin;
+--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+--default: #ebebec;
+--default-foreground: var(--eclipse);
+--accent: #4c8ac8;
+--accent-foreground: var(--snow);
+--field-background: var(--white);
+--field-foreground: #18181b;
+--field-placeholder: var(--muted);
+--field-border: transparent;
+--success: #17c964;
+--success-foreground: var(--eclipse);
+--warning: #f5a524;
+--warning-foreground: var(--eclipse);
+--danger: #ff383c;
+--danger-foreground: var(--snow);
+--segment: var(--white);
+--segment-foreground: var(--eclipse);
+--separator: #e4e4e7;
+--focus: var(--accent);
+--link: var(--foreground);
+--backdrop: #00000080;
+--surface-hover: var(--surface);
+--border: #28282c;
+--text-xs: 11px;
+--text-sm: 12.8px;
+--text-md: 14px;
+--text-lg: 16px;
+--text-xlg: 20px;
+--primary-color: #000000;
+--main-padding: 6px;
+--spacing: 2px;
+--radius: 2px;
+--button-border-color: var(--border);
+--button-border-size: 1px;
+--button-bg: rgb(from var(--accent) r g b);
+--button-hover-bg: rgb(from var(--button-bg) r g b / 0.8);
+--button-active-bg: rgb(from var(--button-bg) r g b / 0.65);
+--button-text-color: var(--default);
+--button-font-size: var(--text-md)}.dark,[data-theme=dark]{--scrollbar-track: transparent;
+--scrollbar-gutter: auto;
+--scrollbar-width: thin;
+--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+--accent: #a0cfff;
+--default: #27272a;
+--default-foreground: var(--snow);
+--field-background: #18181b;
+--field-foreground: var(--foreground);
+--warning: #f7b750;
+--warning-foreground: var(--eclipse);
+--danger: #db3b3e;
+--danger-foreground: var(--snow);
+--segment: #46464c;
+--segment-foreground: var(--foreground);
+--border: #dedee0;
+--separator: #212124;
+--focus: var(--accent);
+--link: var(--foreground);
+--backdrop: #0009;
+--surface-shadow: 0 0 0 0 transparent inset;
+--overlay-shadow: 0 0 1px 0 #ffffff4d inset;
+--field-shadow: 0 0 0 0 transparent inset;
+--surface-hover: var(--surface);
+--button-border-color: var(--border);
+--button-border-size: 1px;
+--button-bg: rgb(from var(--accent) r g b);
+--button-hover-bg: rgb(from var(--button-bg) r g b / 0.8);
+--button-active-bg: rgb(from var(--button-bg) r g b / 0.65);
+--button-text-color: var(--default);
+--button-font-size: var(--text-md)}*,*::before,*::after{box-sizing:border-box}.btn{font-family:Arial,Helvetica,sans-serif;
+margin:0;
+text-align:center;
+vertical-align:middle;
+font-size:var(--button-font-size);
+text-decoration:none;
+color:var(--button-text-color);
+isolation:isolate;
+min-height:calc(var(--spacing)*18);
+transform-origin:50%;
+justify-content:center;
+align-items:center;
+gap:calc(var(--spacing)*2);
+border:solid var(--button-border-size) rgba(0,0,0,0);
+border-radius:calc(var(--radius)*3);
+width:-moz-fit-content;
+width:fit-content;
+padding-inline:calc(var(--spacing)*4);
+line-height:normal;
+-webkit-user-select:none;
+-moz-user-select:none;
+user-select:none;
+-webkit-tap-highlight-color:rgba(0,0,0,0);
+outline-style:none;
+display:inline-flex;
+position:relative;
+cursor:pointer;
+background:var(--button-bg);
+transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease}.btn:hover:not(.btn--disabled){background:var(--button-hover-bg)}.btn:active:not(.btn--disabled){background:var(--button-active-bg);
+transform:scale(0.98)}.btn:focus-visible{outline:2px solid var(--focus);
+outline-offset:2px}.btn img,.btn .btn__icon{width:1.25em;
+height:1.25em;
+flex-shrink:0}.btn--xsmall{--button-font-size: var(--text-xs);
+min-height:calc(var(--spacing)*12);
+padding-inline:calc(var(--spacing)*3)}.btn--small{--button-font-size: var(--text-sm);
+min-height:calc(var(--spacing)*14);
+padding-inline:calc(var(--spacing)*3)}.btn--large{--button-font-size: var(--text-lg);
+min-height:calc(var(--spacing)*22);
+padding-inline:calc(var(--spacing)*6)}.btn--full{width:100%}.btn--secondary{--button-bg: var(--default);
+--button-hover-bg: color-mix(in srgb, var(--default) 85%, transparent);
+--button-active-bg: color-mix(in srgb, var(--default) 70%, transparent);
+--button-text-color: var(--default-foreground)}.btn--outline{--button-bg: transparent;
+--button-hover-bg: transparent;
+--button-active-bg: transparent;
+--button-text-color: var(--default-foreground);
+border-color:var(--button-border-color)}.btn--outline:hover:not(.btn--disabled){border-color:var(--accent);
+color:var(--accent)}.btn--outline:active:not(.btn--disabled){opacity:.7}.btn--text{--button-bg: transparent;
+--button-hover-bg: transparent;
+--button-active-bg: transparent;
+--button-text-color: var(--default-foreground);
+border-color:rgba(0,0,0,0)}.btn--text:hover:not(.btn--disabled){text-decoration:underline}.btn--alert{--button-bg: var(--danger);
+--button-hover-bg: color-mix(in srgb, var(--danger) 85%, #000);
+--button-active-bg: color-mix(in srgb, var(--danger) 70%, #000);
+--button-text-color: var(--danger-foreground)}.btn--disabled{opacity:var(--disabled-opacity);
+cursor:not-allowed;
+pointer-events:none}/*# sourceMappingURL=button.css.map */