DEV: merge post-action-feedback CSS into common file (#34080)

Concerns this button feedback

<img width="190" height="152" alt="image"
src="https://github.com/user-attachments/assets/805a9258-2130-4e2e-99d4-50d9638c825b"
/>



This change is pretty straightforward, the desktop css includes all
styling for the `.post-action-feedback-alert`, so that can be simply
moved to common. The mobile alert was removed by
https://github.com/discourse/discourse/pull/31375 (because we open a
link modal instead)... so the mobile styles aren't actually applied
anywhere (no plugins either).
This commit is contained in:
Kris
2025-08-05 10:44:26 -04:00
committed by GitHub
parent 9bd4ac4ba8
commit 37ebaf4c3c
5 changed files with 39 additions and 79 deletions
@@ -36,3 +36,42 @@
}
}
}
.post-action-feedback-alert {
position: absolute;
top: -1.5rem;
left: 60%;
transform: translateX(-50%);
color: var(--success);
padding: 0.25rem 0.5rem;
white-space: nowrap;
font-size: var(--font-down-2);
opacity: 0;
z-index: calc(z("timeline") + 1);
}
.--transition {
.post-action-feedback-alert,
.post-action-feedback-svg {
transition:
opacity 0.25s,
color 0.25s;
}
}
.--activated {
.post-action-feedback-alert,
.post-action-feedback-svg {
opacity: 1;
}
.post-action-feedback-alert {
&.-success {
color: var(--success);
}
&.-fail {
color: var(--danger);
}
}
}
@@ -2,7 +2,6 @@
@import "latest-topic-list";
@import "login-signup-page";
@import "modal";
@import "post-action-feedback";
@import "topic";
@import "topic-list";
@import "topic-post";
@@ -1,38 +0,0 @@
.post-action-feedback-alert {
position: absolute;
top: -1.5rem;
left: 60%;
transform: translateX(-50%);
color: var(--success);
padding: 0.25rem 0.5rem;
white-space: nowrap;
font-size: var(--font-down-2);
opacity: 0;
z-index: calc(z("timeline") + 1);
}
.--transition {
.post-action-feedback-alert,
.post-action-feedback-svg {
transition:
opacity 0.25s,
color 0.25s;
}
}
.--activated {
.post-action-feedback-alert,
.post-action-feedback-svg {
opacity: 1;
}
.post-action-feedback-alert {
&.-success {
color: var(--success);
}
&.-fail {
color: var(--danger);
}
}
}
@@ -1,6 +1,5 @@
@import "login-signup-page";
@import "modal";
@import "post-action-feedback";
@import "push-notifications-mobile";
@import "topic-list";
@import "topic-post";
@@ -1,39 +0,0 @@
@keyframes d-toast-opening {
from {
transform: translateY(var(--transform-y, 10px));
}
}
.post-action-feedback-alert {
--transform-y: 0;
position: fixed;
top: calc(var(--header-offset) + 0.5rem);
left: 0;
right: 0;
margin-inline: 0.5rem;
z-index: z("max");
display: flex;
box-sizing: border-box;
padding: 1em 1.5em;
opacity: 1;
transition: opacity 0.5s;
border-radius: var(--d-border-radius);
color: var(--primary);
overflow: hidden;
background-color: var(--tertiary-very-low);
border: 1px solid var(--content-border-color);
box-shadow: var(--shadow-dropdown);
overflow-wrap: break-word;
animation: d-toast-opening 0.3s ease-in-out;
will-change: transform;
&.-fade-out {
opacity: 0;
}
}
@media (prefers-reduced-motion: no-preference) {
.post-action-feedback-alert {
--transform-y: 2vh;
}
}