michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-23 11:26:56 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

popup user profile - big screens only (phones have no hover)

Browse source
This commit is contained in:
rimu 2024-12-23 12:26:28 +13:00
parent c01fd229e9
commit 5ee8e49bc4
2 changed files with 35 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/static/styles.css
View file

@ -1965,22 +1965,24 @@ form h5 {
.render_username .author_link {
display: inline-block;
}
.render_username .author_link:hover + .user_preview, .render_username .user_preview:hover {
display: inline-block !important;
position: absolute;
top: 17px;
left: 0;
background-color: white;
z-index: 20;
}
.render_username .user_preview .card {
width: 300px;
}
.render_username .user_preview .card .preview_avatar_image {
max-width: 50%;
}
.render_username .user_preview .card .preview_avatar_image img {
max-width: 100%;
@media (min-width: 1280px) {
.render_username .author_link:hover + .user_preview, .render_username .user_preview:hover {
display: inline-block !important;
position: absolute;
top: 17px;
left: 0;
background-color: white;
z-index: 20;
}
.render_username .user_preview .card {
width: 300px;
}
.render_username .user_preview .card .preview_avatar_image {
max-width: 50%;
}
.render_username .user_preview .card .preview_avatar_image img {
max-width: 100%;
}
}
/* high contrast */

31
app/static/styles.scss
View file

@ -1682,26 +1682,29 @@ form {
display: inline-block;
}
.author_link:hover + .user_preview, .user_preview:hover {
display: inline-block !important;
position: absolute;
top: 17px;
left: 0;
background-color: white;
z-index: 20;
}
@include breakpoint(laptop) {
.author_link:hover + .user_preview, .user_preview:hover {
display: inline-block !important;
position: absolute;
top: 17px;
left: 0;
background-color: white;
z-index: 20;
}
.user_preview .card {
width: 300px;
.user_preview .card {
width: 300px;
.preview_avatar_image {
max-width: 50%;
.preview_avatar_image {
max-width: 50%;
img {
max-width: 100%;
img {
max-width: 100%;
}
}
}
}
}
/* high contrast */