discourse/app/assets/stylesheets/common/components/powered-by-discourse.scss
Jarek Radosz be513ed9a3
DEV: Fix all mixed-decls sass deprecations (#31343)
```
WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls
```
2025-02-13 23:58:19 +01:00

79 lines
1.8 KiB
SCSS

.powered-by-discourse {
grid-area: below-content;
justify-self: start;
font-size: var(--font-down-1);
letter-spacing: 0.2px; // extra spacing makes small text easier to read
padding: 2px; // animated hover "border" width
background: var(--secondary);
border-radius: 0.75em;
transition: all 0.25s ease-in-out;
margin-bottom: 0.45em;
color: var(--primary-medium);
.admin-area &,
.has-full-page-chat &,
.static-login &,
.invite-page &,
.account-created-page &,
.admin-invite-page &,
.activate-account-page & {
display: none !important;
}
&:visited {
color: var(--primary-medium);
}
&__content {
display: inline-flex;
align-items: center;
gap: 0.5em;
color: currentcolor;
background: var(--secondary);
border-radius: 0.62em;
padding: 0.25em 0.65em 0.25em 0.5em;
}
.d-icon {
position: relative;
top: 0.05em; // vertical alignment
}
.discourse-no-touch & {
&:hover {
color: var(--primary-high);
@media (prefers-reduced-motion: no-preference) {
// secondary repeat is an intentional buffer
background: linear-gradient(
45deg,
var(--secondary),
var(--secondary),
var(--secondary),
var(--secondary),
var(--secondary),
#d0232b,
#f15d22,
#fff9ae,
#00a94f,
#00aeef
);
background-size: 300%;
animation: d-rainbow-shimmer 0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-delay: 0.15s; // avoid animating on passing hover
}
}
@keyframes d-rainbow-shimmer {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
}
}