anynews/republisher
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix toggle on-state styling

Browse source
This commit is contained in:
Abel Luck 2026-03-30 18:56:07 +02:00
parent 94dc8d62cb
commit b43f466e76
2 changed files with 39 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

5
repub/components.py
View file

@ -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},

75
repub/static/app.css
View file

@ -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 {