mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-11-18 10:47:29 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

dick about with stats a bit

Browse source
This commit is contained in:
tobi 2025-04-16 19:38:43 +02:00
commit 60ee05d2a7
2 changed files with 148 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

97
web/source/css/status.css
View file

@ -260,22 +260,100 @@
display: flex;
gap: 1rem;
.stats-grouping {
.stats-grouping,
.stats-more-info-content {
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
.edited-at {
font-size: smaller;
}
row-gap: 0.25rem;
}
.stats-item {
display: flex;
gap: 0.4rem;
width: fit-content;
}
.stats-item.published-at {
details.stats-more-info {
z-index: 2;
margin-left: auto;
& > summary {
/*
Remove details/summary
arrow and use our own.
*/
list-style: none;
&::-webkit-details-marker {
display: none; /* Safari */
}
/*
Don't display the
"hide" button initially.
*/
i.hide {
display: none;
}
/*
Normalize width and
alignment of fa icons.
*/
i.fa {
width: 2rem;
text-align: center;
}
display: flex;
height: 100%;
align-items: center;
cursor: pointer;
border-radius: $br-inner;
&:focus-visible {
outline: $button-focus-outline;
}
&:hover {
outline: 0.1rem solid $fg-reduced;
}
}
@keyframes fade-in {
0% {opacity: 0}
100% {opacity: 1}
}
&[open] {
.stats-more-info-content {
animation: fade-in .1s;
}
& > summary i.show {
display: none;
}
& > summary i.hide {
display: block;
}
}
}
.stats-more-info-content {
position: absolute;
right: 0;
flex-direction: column;
max-width: 100%;
background: $status-info-bg;
padding: 0.5rem 0.75rem;
border: $boxshadow-border;
box-shadow: $boxshadow;
opacity: 1;
}
.stats-item.published-at dd time.dt-published {
text-decoration: underline;
}
@ -283,10 +361,6 @@
z-index: 1;
user-select: none;
}
.language {
margin-left: auto;
}
}
grid-column: span 3;
@ -327,7 +401,8 @@
&.expanded {
background: $status-focus-bg;
.status-info {
.status-info,
.status-info .status-stats .stats-more-info-content {
background: $status-focus-info-bg;
}
}