mirror of
https://github.com/discourse/discourse.git
synced 2026-08-11 02:59:07 +08:00
e5e1de0e83When hovering the scroll to bottom button disappears into the text as there is no background color. ## Before <img width="395" height="160" alt="Screenshot 2026-06-26 at 1 03 23 PM" src="https://github.com/user-attachments/assets/ba31870b-e2a5-4196-9a30-8d97cec54670" /> ## After <img width="395" height="161" alt="Screenshot 2026-06-26 at 1 03 48 PM" src="https://github.com/user-attachments/assets/21fdfb1e-00ac-4a15-be09-9e2cd2846cbc" /> <img width="394" height="160" alt="Screenshot 2026-06-26 at 1 04 00 PM" src="https://github.com/user-attachments/assets/2a7f999d-72b2-404a-892e-194967679868" />
66 lines
1.1 KiB
SCSS
Vendored
66 lines
1.1 KiB
SCSS
Vendored
.chat-scroll-to-bottom {
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
&__button {
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
position: absolute;
|
|
height: 2rem;
|
|
bottom: -25px;
|
|
padding: 0 var(--space-2);
|
|
background: var(--primary-medium);
|
|
opacity: 0;
|
|
transition:
|
|
opacity 0.25s ease,
|
|
transform 0.5s ease;
|
|
transform: scale(0.1);
|
|
z-index: z("dropdown");
|
|
color: var(--secondary);
|
|
|
|
.d-icon {
|
|
color: inherit;
|
|
}
|
|
|
|
> * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
.d-icon {
|
|
color: var(--secondary) !important;
|
|
}
|
|
}
|
|
|
|
.no-touch & {
|
|
&:hover {
|
|
opacity: 1;
|
|
|
|
.d-icon {
|
|
color: var(--primary-very-high) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.visible {
|
|
transform: translateY(-32px) scale(1);
|
|
opacity: 0.8;
|
|
|
|
&:hover {
|
|
transform: translateY(-32px) scale(1);
|
|
|
|
&:active {
|
|
transform: translateY(-32px) scale(0.8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__new-messages {
|
|
font-size: var(--font-down-1-rem);
|
|
}
|
|
}
|
