diff --git a/repub/components.py b/repub/components.py index af9e631..035b74c 100644 --- a/repub/components.py +++ b/repub/components.py @@ -391,14 +391,13 @@ def toggle_field( "data-class:bg-amber-500": f"${signal_name}", "data-class:bg-slate-200": f"!${signal_name}", }, - class_="group relative inline-flex w-11 shrink-0 rounded-full bg-slate-200 p-0.5 outline-offset-2 outline-amber-500 transition", + class_="group relative inline-flex w-11 shrink-0 rounded-full p-0.5 outline-offset-2 outline-amber-500 transition", )[ h.span( { "data-class:translate-x-5": f"${signal_name}", - "data-class:translate-x-0": f"!${signal_name}", }, - class_="size-5 translate-x-0 rounded-full bg-white shadow-xs ring-1 ring-slate-900/5 transition-transform", + class_="size-5 rounded-full bg-white shadow-xs ring-1 ring-slate-900/5 transition-transform", ), h.input( {"data-bind": signal_name}, diff --git a/repub/static/app.css b/repub/static/app.css index 0a0f270..7ec7d8c 100644 --- a/repub/static/app.css +++ b/repub/static/app.css @@ -1,8 +1,4 @@ /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */ -@view-transition { - navigation: auto; -} - @layer properties; @layer theme, base, components, utilities; @layer theme { @@ -63,6 +59,7 @@ --text-xl--line-height: calc(1.75 / 1.25); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); + --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-black: 900; @@ -70,6 +67,7 @@ --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; + --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); @@ -225,9 +223,6 @@ } } @layer utilities { - .visible { - visibility: visible; - } .sr-only { position: absolute; width: 1px; @@ -296,9 +291,6 @@ .mt-5 { margin-top: calc(var(--spacing) * 5); } - .mt-6 { - margin-top: calc(var(--spacing) * 6); - } .mt-10 { margin-top: calc(var(--spacing) * 10); } @@ -320,9 +312,6 @@ .hidden { display: none; } - .inline { - display: inline; - } .inline-flex { display: inline-flex; } @@ -337,6 +326,12 @@ width: calc(var(--spacing) * 11); height: calc(var(--spacing) * 11); } + .h-5 { + height: calc(var(--spacing) * 5); + } + .h-12 { + height: calc(var(--spacing) * 12); + } .h-40 { height: calc(var(--spacing) * 40); } @@ -349,12 +344,12 @@ .w-11 { width: calc(var(--spacing) * 11); } + .w-40 { + width: calc(var(--spacing) * 40); + } .w-full { width: 100%; } - .max-w-2xl { - max-width: var(--container-2xl); - } .max-w-3xl { max-width: var(--container-3xl); } @@ -376,6 +371,9 @@ .min-w-56 { min-width: calc(var(--spacing) * 56); } + .min-w-64 { + min-width: calc(var(--spacing) * 64); + } .min-w-\[70rem\] { min-width: 70rem; } @@ -388,14 +386,13 @@ .table-auto { table-layout: auto; } - .translate-x-0 { - --tw-translate-x: calc(var(--spacing) * 0); - translate: var(--tw-translate-x) var(--tw-translate-y); - } .translate-x-5 { --tw-translate-x: calc(var(--spacing) * 5); translate: var(--tw-translate-x) var(--tw-translate-y); } + .animate-pulse { + animation: var(--animate-pulse); + } .cursor-not-allowed { cursor: not-allowed; } @@ -524,21 +521,12 @@ .border-slate-200 { border-color: var(--color-slate-200); } - .border-white\/10 { - border-color: color-mix(in srgb, #fff 10%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-white) 10%, transparent); - } - } .border-white\/15 { border-color: color-mix(in srgb, #fff 15%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 15%, transparent); } } - .bg-amber-100 { - background-color: var(--color-amber-100); - } .bg-amber-200 { background-color: var(--color-amber-200); } @@ -645,6 +633,9 @@ .p-5 { padding: calc(var(--spacing) * 5); } + .p-6 { + padding: calc(var(--spacing) * 6); + } .px-2 { padding-inline: calc(var(--spacing) * 2); } @@ -696,6 +687,9 @@ .pl-4 { padding-left: calc(var(--spacing) * 4); } + .text-center { + text-align: center; + } .text-left { text-align: left; } @@ -744,6 +738,10 @@ --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } + .font-normal { + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); @@ -779,9 +777,6 @@ .text-amber-700 { color: var(--color-amber-700); } - .text-amber-800 { - color: var(--color-amber-800); - } .text-amber-950 { color: var(--color-amber-950); } @@ -999,12 +994,6 @@ } } } - .data-class\:translate-x-0 { - &[data-class] { - --tw-translate-x: calc(var(--spacing) * 0); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - } .data-class\:translate-x-5 { &[data-class] { --tw-translate-x: calc(var(--spacing) * 5); @@ -1051,6 +1040,11 @@ padding-inline: calc(var(--spacing) * 5); } } + .sm\:px-6 { + @media (width >= 40rem) { + padding-inline: calc(var(--spacing) * 6); + } + } .sm\:pl-4 { @media (width >= 40rem) { padding-left: calc(var(--spacing) * 4); @@ -1362,6 +1356,11 @@ syntax: "*"; inherits: false; } +@keyframes pulse { + 50% { + opacity: 0.5; + } +} @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop {