Files
FixIt/assets/scss/pages/friends/_index.scss
T
Cell 20c0997cc5 fix(assets): restructure SCSS pages directory and fix positioning issues
- Restructure SCSS pages directory and rename shared to content
- Ensure hr overflow visible for awesome-hr icon
- Restore position relative on .page for absolute children
2026-07-16 00:13:35 +08:00

69 lines
1.3 KiB
SCSS

// Style of layout friends
@use "core/mixins" as *;
.special.friends {
.friend-links {
margin-top: 1rem;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
@include media('xs') {
.friend-links {
justify-content: space-around;
}
}
.friend-link {
width: 150px;
height: 200px;
font-size: 1rem;
text-align: center;
background: rgba(255, 255, 255, 0.3);
box-sizing: border-box;
box-shadow: 3px 3px 5px #aaa;
border: none;
transition-duration: 0.3s;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
@include border-radius;
}
.friend-link:hover {
background: #fff;
box-shadow: 0 0 3px #aaa;
scale: 1.03;
}
.friend-avatar {
object-fit: cover;
object-position: center;
width: 100% !important;
height: 150px !important;
margin: 0;
padding: 0;
@include border-radius;
}
.friend-nickname {
display: block;
position: relative;
color: #2bbc8a;
font-weight: bold;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 18px;
margin-bottom: 1rem;
}
.friend-nickname:hover {
color: #d480aa;
}
}