diff --git a/dist/sigpro.css b/dist/sigpro.css deleted file mode 100644 index d02c36f..0000000 --- a/dist/sigpro.css +++ /dev/null @@ -1,959 +0,0 @@ -@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"; -:root { - --radius: 0.5rem; - --background: oklch(100% 0 0); - --foreground: oklch(14.1% 0.005 285.823); - --card: oklch(100% 0 0); - --card-foreground: oklch(14.1% 0.005 285.823); - --popover: oklch(100% 0 0); - --popover-foreground: oklch(14.1% 0.005 285.823); - --primary: oklch(21% 0.006 285.885); - --primary-foreground: oklch(98.5% 0 0); - --secondary: oklch(96.7% 0.001 286.375); - --secondary-foreground: oklch(21% 0.006 285.885); - --muted: oklch(96.7% 0.001 286.375); - --muted-foreground: oklch(55.2% 0.016 285.938); - --accent: oklch(96.7% 0.001 286.375); - --accent-foreground: oklch(21% 0.006 285.885); - --destructive: oklch(57.7% 0.245 27.325); - --border-color: oklch(92% 0.004 286.32); - --input: oklch(92% 0.004 286.32); - --ring: oklch(70.5% 0.015 286.067); - --chart-1: oklch(64.6% 0.222 41.116); - --chart-2: oklch(60% 0.118 184.704); - --chart-3: oklch(39.8% 0.07 227.392); - --chart-4: oklch(82.8% 0.189 84.429); - --chart-5: oklch(76.9% 0.188 70.08); - --sidebar: oklch(98.5% 0 0); - --sidebar-foreground: oklch(14.1% 0.005 285.823); - --sidebar-primary: oklch(21% 0.006 285.885); - --sidebar-primary-foreground: oklch(98.5% 0 0); - --sidebar-accent: oklch(96.7% 0.001 286.375); - --sidebar-accent-foreground: oklch(21% 0.006 285.885); - --sidebar-border: oklch(92% 0.004 286.32); - --sidebar-ring: oklch(70.5% 0.015 286.067); - --shadow: 0px 10px 15px -3px #0000001a, 0px 4px 6px -2px #0000000d; - --loading-icon-url: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' stroke='rgb(184, 184, 184)' stroke-width='20' fill='none' stroke-linecap='round' stroke-dasharray='200' stroke-dashoffset='100'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E"); - --border: 1px solid var(--border-color); -} -@media (prefers-color-scheme: dark) { - :root { - --background: oklch(14.1% 0.005 285.823); - --foreground: oklch(98.5% 0 0); - --card: oklch(21% 0.006 285.885); - --card-foreground: oklch(98.5% 0 0); - --popover: oklch(21% 0.006 285.885); - --popover-foreground: oklch(98.5% 0 0); - --primary: oklch(92% 0.004 286.32); - --primary-foreground: oklch(21% 0.006 285.885); - --secondary: oklch(27.4% 0.006 286.033); - --secondary-foreground: oklch(98.5% 0 0); - --muted: oklch(27.4% 0.006 286.033); - --muted-foreground: oklch(70.5% 0.015 286.067); - --accent: oklch(27.4% 0.006 286.033); - --accent-foreground: oklch(98.5% 0 0); - --destructive: oklch(70.4% 0.191 22.216); - --border-color: oklch(100% 0 0/0.1); - --input: oklch(100% 0 0/0.15); - --ring: oklch(55.2% 0.016 285.938); - --chart-1: oklch(48.8% 0.243 264.376); - --chart-2: oklch(69.6% 0.17 162.48); - --chart-3: oklch(76.9% 0.188 70.08); - --chart-4: oklch(62.7% 0.265 303.9); - --chart-5: oklch(64.5% 0.246 16.439); - --sidebar: oklch(21% 0.006 285.885); - --sidebar-foreground: oklch(98.5% 0 0); - --sidebar-primary: oklch(48.8% 0.243 264.376); - --sidebar-primary-foreground: oklch(98.5% 0 0); - --sidebar-accent: oklch(27.4% 0.006 286.033); - --sidebar-accent-foreground: oklch(98.5% 0 0); - --sidebar-border: oklch(100% 0 0/0.1); - --sidebar-ring: oklch(55.2% 0.016 285.938); - --border: 1px solid var(--border-color); - } -} -html { - color-scheme: light dark; -} -html[data-theme="light"] { - color-scheme: light; - --background: oklch(100% 0 0); - --foreground: oklch(14.1% 0.005 285.823); - --card: oklch(100% 0 0); - --card-foreground: oklch(14.1% 0.005 285.823); - --popover: oklch(100% 0 0); - --popover-foreground: oklch(14.1% 0.005 285.823); - --primary: oklch(21% 0.006 285.885); - --primary-foreground: oklch(98.5% 0 0); - --secondary: oklch(96.7% 0.001 286.375); - --secondary-foreground: oklch(21% 0.006 285.885); - --muted: oklch(96.7% 0.001 286.375); - --muted-foreground: oklch(55.2% 0.016 285.938); - --accent: oklch(96.7% 0.001 286.375); - --accent-foreground: oklch(21% 0.006 285.885); - --destructive: oklch(57.7% 0.245 27.325); - --border-color: oklch(92% 0.004 286.32); - --input: oklch(92% 0.004 286.32); - --ring: oklch(70.5% 0.015 286.067); - --chart-1: oklch(64.6% 0.222 41.116); - --chart-2: oklch(60% 0.118 184.704); - --chart-3: oklch(39.8% 0.07 227.392); - --chart-4: oklch(82.8% 0.189 84.429); - --chart-5: oklch(76.9% 0.188 70.08); - --sidebar: oklch(98.5% 0 0); - --sidebar-foreground: oklch(14.1% 0.005 285.823); - --sidebar-primary: oklch(21% 0.006 285.885); - --sidebar-primary-foreground: oklch(98.5% 0 0); - --sidebar-accent: oklch(96.7% 0.001 286.375); - --sidebar-accent-foreground: oklch(21% 0.006 285.885); - --sidebar-border: oklch(92% 0.004 286.32); - --sidebar-ring: oklch(70.5% 0.015 286.067); - --shadow: 0px 10px 15px -3px #0000001a, 0px 4px 6px -2px #0000000d; - --border: 1px solid var(--border-color); -} -html[data-theme="dark"] { - color-scheme: dark; - --background: oklch(14.1% 0.005 285.823); - --foreground: oklch(98.5% 0 0); - --card: oklch(21% 0.006 285.885); - --card-foreground: oklch(98.5% 0 0); - --popover: oklch(21% 0.006 285.885); - --popover-foreground: oklch(98.5% 0 0); - --primary: oklch(92% 0.004 286.32); - --primary-foreground: oklch(21% 0.006 285.885); - --secondary: oklch(27.4% 0.006 286.033); - --secondary-foreground: oklch(98.5% 0 0); - --muted: oklch(27.4% 0.006 286.033); - --muted-foreground: oklch(70.5% 0.015 286.067); - --accent: oklch(27.4% 0.006 286.033); - --accent-foreground: oklch(98.5% 0 0); - --destructive: oklch(70.4% 0.191 22.216); - --border-color: oklch(100% 0 0/0.1); - --input: oklch(100% 0 0/0.15); - --ring: oklch(55.2% 0.016 285.938); - --chart-1: oklch(48.8% 0.243 264.376); - --chart-2: oklch(69.6% 0.17 162.48); - --chart-3: oklch(76.9% 0.188 70.08); - --chart-4: oklch(62.7% 0.265 303.9); - --chart-5: oklch(64.5% 0.246 16.439); - --sidebar: oklch(21% 0.006 285.885); - --sidebar-foreground: oklch(98.5% 0 0); - --sidebar-primary: oklch(48.8% 0.243 264.376); - --sidebar-primary-foreground: oklch(98.5% 0 0); - --sidebar-accent: oklch(27.4% 0.006 286.033); - --sidebar-accent-foreground: oklch(98.5% 0 0); - --sidebar-border: oklch(100% 0 0/0.1); - --sidebar-ring: oklch(55.2% 0.016 285.938); - --border: 1px solid var(--border-color); -} -* { - box-sizing: border-box; - scrollbar-width: auto; - scrollbar-color: var(--muted-foreground) var(--muted); - margin: 0; - padding: 0; -} -::-webkit-scrollbar { - width: 12px; -} -::-webkit-scrollbar-thumb { - background: var(--muted-foreground); - border: 2px solid var(--background); - border-radius: 6px; -} -::-webkit-scrollbar-thumb:hover { - background: var(--foreground); -} -::-webkit-scrollbar-track { - background: var(--muted); - border-radius: 6px; -} -body { - background-color: var(--background); - color: var(--foreground); - max-width: 900px; - margin: 0 auto; - padding: 2rem 1rem 1rem; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - Segoe UI, - Roboto, - Oxygen, - Ubuntu, - Cantarell, - sans-serif; - line-height: 1.5; - transition: - background-color 0.3s, - color 0.3s; -} -h1, -h2, -h3, -h4, -h5, -h6 { - margin-bottom: 0.5em; - font-weight: 700; -} -h1 { - letter-spacing: -0.025em; - font-size: 1.875rem; - font-weight: 700; - line-height: 2.25rem; -} -h2 { - letter-spacing: -0.025em; - font-size: 1.25rem; - font-weight: 600; - line-height: 1.75rem; -} -h3 { - letter-spacing: -0.025em; - font-size: 1.125rem; - font-weight: 600; - line-height: 1.75rem; -} -h4 { - letter-spacing: -0.025em; - font-size: 16px; - font-weight: 600; - line-height: 1.75rem; -} -h5 { - font-size: 15px; -} -h6 { - font-size: 14px; -} -p { - margin: 1em 0; -} -a { - color: var(--primary); - text-decoration: none; - transition: color 0.2s; -} -a:hover { - color: color-mix(in srgb, var(--primary) 80%, transparent); - text-decoration: underline; -} -a:focus-visible { - outline: 2px solid var(--ring); - outline-offset: 2px; - border-radius: 2px; -} -ul, -ol { - margin-bottom: 1em; - padding-left: 1.5em; -} -header { - margin-bottom: 2rem; -} -header h1 { - font-size: 2rem; -} -nav ul { - gap: 1rem; - padding: 0; - list-style: none; - display: flex; -} -section { - margin-bottom: 2rem; -} -form { - flex-direction: column; - gap: 1rem; - display: flex; -} -input[type="password"], -input[type="text"], -input[type="date"], -input[type="color"], -input[type="time"], -input[type="file"], -input[type="search"], -input[type="email"], -select, -textarea { - font-weight: 500; - font: inherit; - border: var(--border); - border-radius: var(--radius); - background-color: var(--background); - color: var(--foreground); - padding: 0.5rem; - font-size: 0.875rem; - transition: - border-color 0.2s, - box-shadow 0.2s; -} -input[type="password"]:focus, -input[type="text"]:focus, -input[type="date"]:focus, -input[type="time"]:focus, -input[type="search"]:focus, -input[type="email"]:focus, -select:focus, -textarea:focus { - border-color: var(--ring); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 15%, transparent); - outline: none; -} -input[type="color"] { - -webkit-appearance: none; - appearance: none; - cursor: pointer; - padding: initial; - max-width: initial; - border-radius: var(--radius); - border: none; - outline: none; -} -input[type="color"]::-webkit-color-swatch { - border-radius: var(--radius); - border: none; -} -input[type="color"]::-moz-color-swatch { - border-radius: var(--radius); - border: none; -} -input[type="reset"], -input[type="submit"], -input[type="button"], -button { - font: inherit; - cursor: pointer; - border-radius: var(--radius); - padding: 0.5rem 1rem; - font-size: 0.875rem; - font-weight: 500; - transition: background-color 0.2s ease-in-out; -} -button { - background-color: var(--primary); - color: var(--primary-foreground); - border: none; - &:hover { - background-color: color-mix(in srgb, var(--primary) 90%, transparent); - } - &:focus-visible { - box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); - outline: none; - } - &:active { - transform: scale(0.98); - } -} -button[secondary] { - background-color: var(--secondary); - color: var(--secondary-foreground); - &:hover { - background-color: color-mix(in srgb, var(--secondary) 90%, transparent); - } -} -input[type="submit"] { - border: var(--border); - color: var(--foreground); - background-color: #0000; - &:hover { - background-color: color-mix(in srgb, var(--muted) 90%, transparent); - } -} -input[type="button"] { - color: var(--foreground); - background-color: #0000; - border: none; - &:hover { - background-color: var(--muted); - } -} -input[type="reset"] { - background-color: var(--destructive); - color: var(--primary-foreground); - border: none; - &:hover { - background-color: color-mix(in srgb, var(--destructive) 90%, transparent); - } -} -fieldset { - border: var(--border); - border-radius: var(--radius); - gap: 0.5rem; - padding: 1rem; - display: flex; -} -fieldset[role="group"] { - border: none; - gap: 0; - padding: 1rem; - display: flex; - & > * { - border-radius: 0; - &:first-child { - border-top-left-radius: var(--radius); - border-bottom-left-radius: var(--radius); - border-right: 0; - } - &:last-child { - border-top-right-radius: var(--radius); - border-bottom-right-radius: var(--radius); - border-right: var(--border); - } - } -} -fieldset[role="otp"] { - border: none; - gap: 0; - padding: 1rem; - display: flex; - & > input { - text-align: center; - border-right: 0; - border-radius: 0; - width: 1rem; - &:first-child { - border-top-left-radius: var(--radius); - border-bottom-left-radius: var(--radius); - border-right: 0; - } - &:last-child { - border-top-right-radius: var(--radius); - border-bottom-right-radius: var(--radius); - border-right: var(--border); - } - } -} -legend { - padding: 0 0.5rem; -} -label { - display: block; - & * { - vertical-align: middle; - } -} -small { - color: var(--muted-foreground); -} -figure { - margin-bottom: 1rem; - overflow: hidden; -} -img { - border-radius: var(--radius); - max-width: 100%; - height: auto; -} -img[avatar] { - border-radius: 50%; -} -figcaption { - color: var(--muted-foreground); - margin-top: 0.5rem; - font-size: 0.875rem; -} -blockquote { - border-left: 4px solid var(--border-color); - padding-left: 1rem; - font-style: italic; - & > footer { - text-align: center; - } -} -[type="checkbox"], -[type="radio"] { - margin-right: 0.5rem; -} -progress { - width: 100%; -} -dialog { - background-color: var(--background); - color: var(--foreground); - border: var(--border); - border-radius: var(--radius); - margin: auto; - padding: 24px; -} -dialog::backdrop { - background-color: #000c; -} -details { - border: var(--border); - border-radius: var(--radius); - margin-bottom: 1rem; - padding: 0.5rem; -} -summary { - cursor: pointer; - font-weight: 700; -} -article { - border: var(--border); - border-radius: var(--radius); - margin-bottom: 1rem; - padding: 1rem; -} -footer { - color: var(--muted-foreground); - margin-top: 2rem; -} -[aria-busy="true"] { - opacity: 0.7; - cursor: progress; -} -[aria-busy="spinner"] { - opacity: 0.7; - cursor: progress; - &:before { - content: var(--loading-icon-url); - padding-right: 1rem; - } -} -@media (prefers-reduced-motion: reduce) { - *, - :before, - :after { - transition-duration: 0.01ms !important; - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - } -} -@media (width<=600px) { - body { - padding: 0.5rem; - } - nav ul { - flex-direction: column; - } -} -input[type="file"]::file-selector-button { - background-color: var(--background); - color: var(--foreground); - border: none; - font-weight: 600; -} -:disabled, -[disabled] { - cursor: not-allowed; - opacity: 0.5; -} -button:disabled, -input:disabled, -select:disabled, -textarea:disabled { - pointer-events: none; -} -input[type="radio"], -input[type="checkbox"], -input[type="range"] { - accent-color: var(--primary); - background-color: var(--background); -} -input[type="checkbox"][icon] { - display: none; - & + * { - cursor: pointer; - border-radius: var(--radius); - box-sizing: border-box; - padding: 0.5rem; - &:hover { - background-color: var(--border-color); - } - } -} -input[type="checkbox"][icon] { - display: none; - & + * { - cursor: pointer; - border-radius: var(--radius); - width: 2rem; - height: 2rem; - padding: 0.5rem; - &:hover { - background-color: var(--border-color); - stroke: var(--muted-foreground); - } - } -} -input[type="checkbox"][icon]:checked { - & + * { - background-color: var(--border-color); - &:hover { - stroke: var(--accent-foreground); - } - } -} -kbd { - background-color: var(--primary); - color: var(--primary-foreground); - border-radius: 6px; - padding: 0.125rem 0.625rem; - font-weight: 700; -} -kbd[secondary] { - background-color: var(--secondary); - color: var(--secondary-foreground); -} -kbd[outline] { - background-color: var(--background); - color: var(--primary); - border: var(--border); -} -kbd[destructive] { - background-color: var(--destructive); - color: var(--primary-foreground); -} -table { - caption-side: bottom; - border-collapse: collapse; - & caption { - color: var(--muted-foreground); - margin-top: 1rem; - } - & th { - color: var(--muted-foreground); - } - & tr { - border-bottom: var(--border); - } - & tr:hover { - background-color: hsl(var(--muted) / 0.5); - } - & td, - & th { - vertical-align: middle; - text-align: start; - padding: 0.5rem; - } - & tfoot { - background-color: var(--muted); - } -} -dialog[drawer] { - resize: vertical; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - max-height: 50vh; - top: auto; - bottom: 0; - &[open] { - animation: 0.2s ease-in forwards slideup; - } -} -dialog > header { - margin: 0; -} -dialog[sheet-top], -dialog[sheet-bottom], -dialog[sheet-left], -dialog[sheet-right] { - border-radius: 0; - margin: 0; -} -dialog[sheet-top], -dialog[sheet-bottom] { - width: 100vw; - max-height: 50vh; -} -dialog[sheet-left], -dialog[sheet-right] { - max-width: 50vw; - height: 100vh; -} -dialog[sheet-top][open] { - animation: 0.2s ease-in forwards slidedown; -} -dialog[sheet-bottom][open] { - animation: 0.2s ease-in forwards slideup; - top: auto; - bottom: 0; -} -dialog[sheet-left][open] { - animation: 0.2s ease-in forwards slideright; -} -dialog[sheet-right][open] { - animation: 0.2s ease-in forwards slideleft; - left: auto; - right: 0; -} -@keyframes slideup { - 0% { - transform: translateY(100%); - } - to { - transform: translateY(0); - } -} -@keyframes slidedown { - 0% { - transform: translateY(-100%); - } - to { - transform: translateY(0); - } -} -@keyframes slideleft { - 0% { - transform: translate(100%); - } - to { - transform: translate(0); - } -} -@keyframes slideright { - 0% { - transform: translate(-100%); - } - to { - transform: translate(0); - } -} -progress { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: var(--muted); - border: 0; - border-radius: 9999px; - height: 0.5rem; -} -progress[value]::-webkit-progress-value { - background-color: var(--primary); - border-radius: 9999px; -} -::-webkit-progress-bar { - background-color: var(--muted); - border-radius: 9999px; -} -::-moz-progress-bar { - background-color: var(--primary); - border-radius: 9999px; -} -progress:indeterminate { - background: var(--muted) - linear-gradient(to right, var(--primary) 35%, var(--muted) 35%) top - left/150% 150% no-repeat; - animation: 1.5s linear infinite progress-indeterminate; -} -progress:indeterminate::-webkit-progress-bar { - background-color: #0000; -} -progress:indeterminate::-moz-progress-bar { - background-color: #0000; -} -@keyframes progress-indeterminate { - 0% { - background-position: 200% 0; - } - to { - background-position: -200% 0; - } -} -hr { - background-color: var(--border-color); - border: 0; - flex-shrink: 0; - height: 1px; - margin: 1rem 0; -} -hr[vertical] { - width: 1px; - height: auto; - margin: 0 1rem; -} -nav { - --separator: attr(breadcrumb, ">"); - align-items: center; - display: flex; - & > a { - color: var(--muted-foreground); - padding: 0 0.625rem 0 0; - &:after { - content: var(--separator); - padding: 0 0 0 0.625rem; - display: inline-block; - } - &:last-child { - color: var(--foreground); - &:after { - content: ""; - } - } - } - &:hover:after { - text-decoration: none; - } -} -div[skeleton] { - background-color: var(--input); - border-radius: var(--radius); - opacity: 1; - animation: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite shimmer; - & * { - display: none; - } -} -@keyframes shimmer { - 50% { - opacity: 0.5; - } -} -[popover] { - inset: unset; - bottom: calc(anchor(top) + 5px); - justify-self: anchor-center; - border: var(--border); - border-radius: var(--radius); - margin: 0; - padding: 0.5rem; - position: absolute; -} -[tooltip-top], -[tooltip-bottom], -[tooltip-left], -[tooltip-right] { - position: relative; - &:after { - white-space: nowrap; - background-color: var(--primary); - color: var(--primary-foreground); - border-radius: var(--radius); - opacity: 0; - z-index: 10; - pointer-events: none; - padding: 6px 8px; - font-size: 0.875em; - transition: opacity 0.2s ease-in-out; - position: absolute; - } - &:hover:after { - opacity: 1; - } -} -[tooltip-top]:after { - content: attr(tooltip-top); - top: -0.8rem; - left: 50%; - transform: translate(-50%) translateY(-100%); -} -[tooltip-bottom]:after { - content: attr(tooltip-bottom); - top: calc(100% + 0.8rem); - left: 50%; - transform: translate(-50%) translateY(0%); -} -[tooltip-left]:after { - content: attr(tooltip-left); - top: 50%; - left: -0.3rem; - transform: translate(-100%) translateY(-50%); -} -[tooltip-right]:after { - content: attr(tooltip-right); - margin-left: 0.3rem; - top: 50%; - left: calc(100% + 0.3rem); - transform: translate(0%) translateY(-50%); -} -pre { - border-radius: var(--radius); - & > code { - display: block; - overflow-x: auto; - } -} -code { - border: var(--border); - border-radius: var(--radius); - background-color: var(--primary); - color: var(--primary-foreground); - padding: 0.2rem; -} -dialog[sonner], -dialog[toast] { - padding: 1rem 1.5rem 1rem 1rem; - inset: auto 1rem 1rem auto; - &::backdrop { - opacity: 0; - } -} -dialog[toast] { - box-shadow: var(--shadow); - &[open] { - animation: - 0.2s ease-in forwards slideup, - 0.2s ease-in forwards fad-in; - } -} -dialog[sonner] { - background-color: #0000; - border: none; - flex-direction: column-reverse; - gap: 0.5rem; - transition: gap 0.15s ease-in; - display: flex; - & > li { - background-color: var(--background); - counter-increment: sonner-counter; - border: var(--border); - border-radius: var(--radius); - padding: 1rem 1.5rem 1rem 1rem; - list-style: none; - animation: - 0.2s ease-in forwards slideup, - 0.2s ease-in forwards fad-in; - &:hover { - scale: 1.1; - } - } -} -@keyframes fad-in { - 0% { - opacity: 0; - } - to { - opacity: 1; - } -} -aside { - background-color: var(--sidebar); - border: 1px solid var(--sidebar-border); - flex-direction: column; - justify-content: space-between; - padding: 0.5rem; - display: flex; - position: relative; - & > main { - flex-direction: column; - flex-grow: 1; - display: flex; - overflow-y: auto; - } - & > header, - & > footer { - position: sticky; - } -} -menu { - border: var(--border); - border-radius: var(--radius); - flex-direction: row; - width: fit-content; - display: flex; - & > li { - padding: 0.25rem 0.75rem; - list-style: none; - } -} -[scroll-x] { - overflow-x: scroll; -} -[scroll-y] { - overflow-y: scroll; -}