0
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-08-15 17:24:47 +08:00
discourse/plugins/discourse-rewind/assets/stylesheets/common/rewind-callout.scss
Martin Brennan c4d4ed890f
FEATURE: Share Rewind reports publicly by default and allow for making them private (#36587)
This commit introduces a toggle which is enabled by default
to share the Discourse Rewind report publicly.

**IMPORTANT NOTES**:

*  Users with "Hide my public profile" enabled
**will not** have their Rewind shared publicly by default,
and will not be able to unless they disable "Hide my public
profile" first.
* This commit also excludes personal messages from best
   posts and best topics reports so sensitive message data
   will never be shown, but other report data like reaction
   counts may still be based off of PM data

Other users who cannot see the rewind will see an error.

We always show a message saying which  user you are looking
at when viewing another user's Rewind.

Users can also unshare their rewind from Rewind preferences.
2025-12-16 09:29:35 +10:00

92 lines
2.1 KiB
SCSS
Vendored

.quick-access-panel {
> ul,
.empty-state__container {
height: 100%; // flex alignment fix
}
}
.rewind-callout__container {
height: 47px;
border-bottom: 1px solid var(--primary-low);
@media screen and (width <= 639px) {
height: 40px;
}
}
#rewind-vhs {
display: block;
width: 100%;
height: 100%;
}
.btn.rewind-callout {
padding: 0;
margin: 0 auto;
width: 100%;
transition: transform 0.3s ease;
transform-origin: left top;
z-index: 2;
svg {
transition: box-shadow 0.3s ease;
}
&:hover {
transform: translateX(10px) translateY(10px) scale(1.05);
svg {
box-shadow: -10px 10px 15px rgb(0 0 0 / 0.15);
}
}
}
.rewind-callout {
position: relative;
display: flex;
transition: transform 200ms ease;
.btn.no-text.--special-kbd {
top: 0.5em;
right: 1em;
position: absolute;
font-size: var(--font-down-3);
@media screen and (width <= 639px) {
top: 0.45em;
}
}
}
.rewind-callout::before {
content: "";
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 287.46 22.28"><path d="m0 0 64.78 22.28h44.53L44.54 0z" style="fill:%23d0232b"/><path d="m44.54 0 64.77 22.28h44.54L89.08 0z" style="fill:%23f15e24"/><path d="m89.08 0 64.77 22.28h44.54L133.61 0z" style="fill:%23fdf6b0"/><path d="m133.61 0 64.78 22.28h44.54L178.15 0z" style="fill:%230ea94e"/><path d="m178.15 0 64.78 22.28h44.53L222.69 0z" style="fill:%232bace2"/></svg>');
background-repeat: no-repeat;
background-position: 47% 100%;
background-size: 139px;
background-blend-mode: multiply;
position: absolute;
left: -48px;
top: -15px;
z-index: -1;
width: 100%;
height: 16px;
background-color: #d4d1bc;
transform: skew(72deg, 0deg);
transform-origin: 50% 0% 0;
transition:
transform 200ms ease,
width 200ms ease;
}
.rewind-callout::after {
content: "";
position: absolute;
left: -10px;
top: -5px;
z-index: -1;
width: 10px;
height: calc(100% - 3px);
background-color: #e8e5d0;
transform: skew(0deg, 41deg) scale3d(1, 1, 1);
}