mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 13:09:55 +08:00
d88ee33eb6
Stylelint is a css linter: https://stylelint.io/ As part of this change we have added two javascript scripts: ``` pnpm lint:css pnpm lint:css:fix ``` Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for configuration in VSCode. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
85 lines
1.6 KiB
SCSS
85 lines
1.6 KiB
SCSS
.topic-above-footer-buttons-outlet.presence {
|
|
min-height: 2.5em; // height of the avatars, prevents layout shift
|
|
margin: var(--below-topic-margin) 0;
|
|
}
|
|
|
|
.presence-users {
|
|
background-color: var(--secondary);
|
|
color: var(--primary-medium);
|
|
display: flex;
|
|
padding: 0.5em;
|
|
padding-left: 0;
|
|
border-radius: var(--d-border-radius);
|
|
|
|
span.presence-text {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.presence-avatars {
|
|
display: flex;
|
|
overflow: hidden;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.wave {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
|
|
.dot {
|
|
display: inline-block;
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
animation: wave 1.8s linear infinite;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
animation-delay: -1.6s;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
animation-delay: -1.4s;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes wave {
|
|
0%,
|
|
60%,
|
|
100% {
|
|
transform: initial;
|
|
}
|
|
|
|
30% {
|
|
transform: translateY(-0.2em);
|
|
}
|
|
}
|
|
}
|
|
|
|
.reply-to .presence-users {
|
|
padding: unset;
|
|
}
|
|
|
|
// TMP: RTL overrides
|
|
.rtl {
|
|
span.presence-text {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
// Always hide the "Topic Presence" in the topic timeline
|
|
.topic-navigation.with-timeline .topic-navigation-bottom-outlet.presence {
|
|
display: none;
|
|
}
|
|
|
|
// When topic progress is visible in the posts grid area and is sticky,
|
|
// adjust positioning so presence is on the same line
|
|
@media screen and (width <= 924px) {
|
|
body:has(.topic-navigation.with-topic-progress)
|
|
.topic-above-footer-buttons-outlet.presence {
|
|
margin-top: -3.2em;
|
|
margin-right: 8em;
|
|
}
|
|
}
|