diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_order_status.html b/src/pretix/presale/templates/pretixpresale/event/fragment_order_status.html
index 7f213c2edd..a29a3847e7 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_order_status.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_order_status.html
@@ -3,29 +3,44 @@
{# Changes should be replicated in pretixcontrol/orders/fragment_order_status.html and in pretix/base/models/orders.py #}
{% if order.status == "n" %}
{% if order.require_approval %}
- {% trans "Approval pending" %}
+
+ {% trans "Approval pending" %}
+
{% elif order.total == 0 %}
- {% trans "Confirmation pending" context "order state" %}
+
+ {% trans "Confirmation pending" context "order state" %}
+
{% elif event.settings.payment_pending_hidden %}
{# intentionally left blank #}
{% elif order.valid_if_pending %}
- {% trans "Confirmed" context "order state" %}
+
+ {% trans "Confirmed" context "order state" %}
+
{% else %}
- {% trans "Payment pending" %}
- {% endif %}
- {% if not event.settings.payment_pending_hidden %}
-
+
+ {% trans "Payment pending" %}
+
{% endif %}
{% elif order.status == "p" %}
{% if order.count_positions == 0 %}
- {% trans "Canceled (paid fee)" %}
+
+ {% trans "Canceled (paid fee)" %}
+
{% elif order.total == 0 %}
- {% trans "Confirmed" context "order state" %}
+
+ {% trans "Confirmed" context "order state" %}
+
{% else %}
- {% trans "Paid" %}
+
+ {% trans "Paid" %}
+
{% endif %}
{% elif order.status == "e" %}
- {% trans "Expired" %}
+
+ {% trans "Expired" %}
+
{% elif order.status == "c" %}
- {% trans "Canceled" %}
+
+ {% trans "Canceled" %}
+
{% endif %}
diff --git a/src/pretix/static/pretixbase/scss/_theme.scss b/src/pretix/static/pretixbase/scss/_theme.scss
index 8489ce30b7..de69f6e302 100644
--- a/src/pretix/static/pretixbase/scss/_theme.scss
+++ b/src/pretix/static/pretixbase/scss/_theme.scss
@@ -252,3 +252,31 @@ svg.svg-icon {
@include table-row-variant('info', var(--pretix-brand-info-success-lighten-30), var(--pretix-brand-info-success-lighten-25));
@include table-row-variant('warning', var(--pretix-brand-warning-lighten-40), var(--pretix-brand-warning-lighten-35));
@include table-row-variant('danger', var(--pretix-brand-danger-lighten-30), var(--pretix-brand-danger-lighten-25));
+
+.text-blob-success, .text-blob-info, .text-blob-warning, .text-blob-danger {
+ padding: .25em .8em;
+ border-radius: 1em;
+
+ &:has(.status-dot) {
+ padding-left: .45em;
+ }
+}
+.text-blob-success {
+ color: var(--pretix-brand-success-darken-10);
+ background: var(--pretix-brand-success-lighten-48);
+}
+.text-blob-info {
+ color: var(--pretix-brand-info-darken-20);
+ background: var(--pretix-brand-info-lighten-33);
+}
+.text-blob-warning {
+ color: var(--pretix-brand-warning-darken-25);
+ background: var(--pretix-brand-warning-lighten-41);
+ .status-dot {
+ color: var(--pretix-brand-warning);
+ }
+}
+.text-blob-danger {
+ color: var(--pretix-brand-danger-darken-5);
+ background: var(--pretix-brand-danger-lighten-43);
+}