fix(widgets): stabilize user card layout
This commit is contained in:
kate522 committed
1 parent
15b4c818c5
commit
246084648f
4 files changed
+176
-48
No files matched your search
@@ -22,61 +22,170 @@
|
||||
}
|
||||
|
||||
.aksrt-user-card {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
border-radius: 8px;
|
||||
overflow: visible;
|
||||
border: 1px solid var(--color-line, #e5e7eb);
|
||||
background: var(--surface-1, #fff);
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.aksrt-user-card__cover {
|
||||
height: 90px;
|
||||
background: linear-gradient(135deg, #93c5fd, #c4b5fd) center/cover no-repeat;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 104px;
|
||||
min-height: 104px;
|
||||
max-height: 104px;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
border-radius: 7px 7px 0 0;
|
||||
background-color: #93c5fd;
|
||||
background-image: linear-gradient(135deg, #93c5fd, #c4b5fd);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.aksrt-user-card__cover.is-empty {
|
||||
background: linear-gradient(135deg, #e2e8f0, #f8fafc);
|
||||
}
|
||||
.aksrt-user-card__body { padding: 0 14px 16px; position: relative; }
|
||||
.aksrt-user-card__body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 0 16px 18px;
|
||||
}
|
||||
.aksrt-user-card__checkin {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
z-index: 2;
|
||||
max-width: 48%;
|
||||
top: 66%;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
max-width: calc(100% - 56px);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.aksrt-user-card__checkin .but {
|
||||
padding: 4px 8px !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 1.2;
|
||||
.aksrt-user-card__checkin--without-cover {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
max-width: none;
|
||||
margin: 10px 0 0;
|
||||
transform: none;
|
||||
}
|
||||
.aksrt-user-card .aksrt-user-card__checkin .aksrt-header-checkin {
|
||||
width: auto !important;
|
||||
min-height: 40px;
|
||||
padding: 8px 12px !important;
|
||||
border-radius: 6px 0 0 6px !important;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.aksrt-user-card__checkin .aksrt-header-checkin-details { display: none; }
|
||||
.aksrt-user-card__avatar {
|
||||
.aksrt-user-card__avatar-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: -36px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
flex: 0 0 auto;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
margin: -38px auto 0;
|
||||
}
|
||||
.aksrt-user-card.no-cover .aksrt-user-card__avatar-wrap {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.aksrt-user-card__avatar {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 3px solid var(--surface-1, #fff);
|
||||
background: var(--surface-2, #eee);
|
||||
}
|
||||
.aksrt-user-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.aksrt-user-card__avatar > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.aksrt-user-card__avatar > img,
|
||||
.aksrt-user-card__avatar > a > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.aksrt-user-card__vip {
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
bottom: -3px;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 3px;
|
||||
border: 2px solid var(--surface-1, #fff);
|
||||
border-radius: 50%;
|
||||
background: var(--surface-1, #fff);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
|
||||
line-height: 1;
|
||||
}
|
||||
.aksrt-user-card__vip .aksrt-vip-badge {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.aksrt-user-card__vip .aksrt-vip-badge__icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.aksrt-user-card__name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin: 10px 0 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.aksrt-user-card__name-row {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
gap: 4px;
|
||||
}
|
||||
.aksrt-user-card__name .display-name {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.aksrt-user-card__name a { color: inherit; text-decoration: none; }
|
||||
.aksrt-user-card__bio,
|
||||
.aksrt-user-card__guest-title {
|
||||
width: 100%;
|
||||
margin: 8px 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--muted-2-color, #888);
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.aksrt-user-card__guest-title { font-size: 14px; font-weight: 600; color: inherit; }
|
||||
.aksrt-user-card__stats {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
gap: 18px;
|
||||
margin-top: 12px;
|
||||
@@ -92,6 +201,7 @@
|
||||
}
|
||||
.aksrt-user-card__actions {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
Reference in new issue
Block a user