mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-18 05:25:40 +09:00
355 lines
8.4 KiB
CSS
355 lines
8.4 KiB
CSS
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
|
|
|
.surface {
|
|
--profile-skeleton-bg: var(--background-primary);
|
|
--profile-skeleton-fill: var(--background-secondary-alt);
|
|
--profile-skeleton-fill-strong: var(--background-tertiary);
|
|
--profile-skeleton-border-color: var(--brand-primary);
|
|
--profile-skeleton-radius: 0.375rem;
|
|
--profile-skeleton-border-width: 0;
|
|
--profile-skeleton-width: 100%;
|
|
--profile-skeleton-height: 100%;
|
|
--profile-skeleton-content-gap: 0.625rem;
|
|
--profile-skeleton-line-radius: 62.4375rem;
|
|
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
width: var(--profile-skeleton-width);
|
|
height: var(--profile-skeleton-height);
|
|
max-height: var(--profile-skeleton-height);
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border: var(--profile-skeleton-border-width) solid var(--profile-skeleton-border-color);
|
|
border-radius: var(--profile-skeleton-radius);
|
|
background: var(--profile-skeleton-bg);
|
|
}
|
|
|
|
.pulse {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
will-change: opacity;
|
|
}
|
|
|
|
.popout {
|
|
--profile-popout-content-width: 18.75rem;
|
|
--profile-popout-content-height: 32.5rem;
|
|
--profile-popout-border-width: 0.15625rem;
|
|
--profile-popout-avatar-size: 5rem;
|
|
--profile-popout-avatar-border: 0.2rem;
|
|
--profile-popout-avatar-left: 0.625rem;
|
|
--profile-popout-avatar-top: 3.4375rem;
|
|
--profile-popout-banner-height: 6.5625rem;
|
|
--profile-popout-header-height: 8.75rem;
|
|
--profile-skeleton-width: var(--profile-popout-content-width);
|
|
--profile-skeleton-height: var(--profile-popout-content-height);
|
|
--profile-skeleton-radius: 0.375rem;
|
|
--profile-skeleton-border-width: var(--profile-popout-border-width);
|
|
--profile-skeleton-banner-height: var(--profile-popout-banner-height);
|
|
--profile-skeleton-header-height: var(--profile-popout-header-height);
|
|
--profile-skeleton-avatar-size: var(--profile-popout-avatar-size);
|
|
--profile-skeleton-avatar-border: var(--profile-popout-avatar-border);
|
|
--profile-skeleton-avatar-top: var(--profile-popout-avatar-top);
|
|
--profile-skeleton-avatar-left: var(--profile-popout-avatar-left);
|
|
--profile-skeleton-content-padding-inline: 1rem;
|
|
--profile-skeleton-content-padding-block: 0.5rem;
|
|
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.modal {
|
|
--profile-skeleton-radius: var(--profile-modal-inner-radius, 0.25rem);
|
|
--profile-skeleton-banner-aspect: 20 / 7;
|
|
--profile-skeleton-avatar-size: var(--profile-modal-avatar-size, 7.5rem);
|
|
--profile-skeleton-avatar-border: var(--profile-modal-avatar-border, 0.3rem);
|
|
--profile-skeleton-avatar-top: calc(var(--profile-modal-avatar-top, -4.05rem) * var(--profile-modal-scale, 1));
|
|
--profile-skeleton-avatar-left: calc(var(--profile-modal-avatar-left, 1rem) * var(--profile-modal-scale, 1));
|
|
--profile-skeleton-content-padding-inline: calc(1rem * var(--profile-modal-scale, 1));
|
|
--profile-skeleton-content-padding-block: calc(1rem * var(--profile-modal-scale, 1));
|
|
--profile-skeleton-content-gap: calc(0.75rem * var(--profile-modal-scale, 1));
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.popout .header {
|
|
height: var(--profile-skeleton-header-height);
|
|
}
|
|
|
|
.banner {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
background: var(--profile-skeleton-fill);
|
|
}
|
|
|
|
.popout .banner {
|
|
height: var(--profile-skeleton-banner-height);
|
|
overflow: visible;
|
|
}
|
|
|
|
.modal .banner {
|
|
aspect-ratio: var(--profile-skeleton-banner-aspect);
|
|
border-top-left-radius: var(--profile-modal-inner-radius, 0.25rem);
|
|
border-top-right-radius: var(--profile-modal-inner-radius, 0.25rem);
|
|
clip-path: inset(0 round var(--profile-modal-inner-radius, 0.25rem) var(--profile-modal-inner-radius, 0.25rem) 0 0);
|
|
}
|
|
|
|
.bannerMask {
|
|
contain: layout paint;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.bannerFill {
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.08) 48%, transparent 100%),
|
|
var(--profile-skeleton-fill-strong);
|
|
}
|
|
|
|
.headerLower {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.popout .headerLower {
|
|
height: calc(var(--profile-skeleton-header-height) - var(--profile-skeleton-banner-height));
|
|
}
|
|
|
|
.modal .headerLower {
|
|
min-height: calc(2.375rem * var(--profile-modal-scale, 1));
|
|
padding: 0 var(--profile-skeleton-content-padding-inline);
|
|
padding-top: calc(1rem * var(--profile-modal-scale, 1));
|
|
}
|
|
|
|
.avatar {
|
|
position: absolute;
|
|
top: var(--profile-skeleton-avatar-top);
|
|
left: var(--profile-skeleton-avatar-left);
|
|
box-sizing: content-box;
|
|
width: var(--profile-skeleton-avatar-size);
|
|
height: var(--profile-skeleton-avatar-size);
|
|
border: var(--profile-skeleton-avatar-border) solid var(--profile-skeleton-bg);
|
|
border-radius: 624.9375rem;
|
|
background: var(--profile-skeleton-fill-strong);
|
|
}
|
|
|
|
.popoutAvatarSlot {
|
|
position: absolute;
|
|
top: var(--profile-skeleton-avatar-top);
|
|
left: var(--profile-skeleton-avatar-left);
|
|
z-index: 1;
|
|
box-sizing: content-box;
|
|
width: var(--profile-skeleton-avatar-size);
|
|
height: var(--profile-skeleton-avatar-size);
|
|
border: var(--profile-skeleton-avatar-border) solid var(--profile-skeleton-bg);
|
|
border-radius: 624.9375rem;
|
|
background: var(--profile-skeleton-fill-strong);
|
|
}
|
|
|
|
.popoutAvatarStatus {
|
|
position: absolute;
|
|
top: calc(var(--profile-skeleton-avatar-top) + var(--profile-skeleton-avatar-size) - 1.125rem);
|
|
left: calc(var(--profile-skeleton-avatar-left) + var(--profile-skeleton-avatar-size) - 1.125rem);
|
|
z-index: 2;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border: 0.25rem solid var(--profile-skeleton-bg);
|
|
border-radius: 624.9375rem;
|
|
background: var(--profile-skeleton-fill-strong);
|
|
}
|
|
|
|
.modal .avatar {
|
|
transform: scale(var(--profile-modal-scale, 1));
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.modalActions {
|
|
display: flex;
|
|
height: calc(2.375rem * var(--profile-modal-scale, 1));
|
|
min-height: calc(2.375rem * var(--profile-modal-scale, 1));
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: var(--profile-skeleton-content-gap);
|
|
padding: var(--profile-skeleton-content-padding-block) var(--profile-skeleton-content-padding-inline);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal .content {
|
|
margin: var(--profile-skeleton-content-padding-block) var(--profile-skeleton-content-padding-inline);
|
|
padding: 0;
|
|
}
|
|
|
|
.line,
|
|
.block,
|
|
.pill,
|
|
.button,
|
|
.tab,
|
|
.panel,
|
|
.smallAvatar {
|
|
flex-shrink: 0;
|
|
border-radius: var(--profile-skeleton-line-radius);
|
|
background: var(--profile-skeleton-fill);
|
|
}
|
|
|
|
.line {
|
|
height: var(--profile-skeleton-line-height, 0.75rem);
|
|
width: var(--profile-skeleton-line-width, 100%);
|
|
}
|
|
|
|
.nameLine {
|
|
--profile-skeleton-line-height: 1.375rem;
|
|
--profile-skeleton-line-width: 72%;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.usernameLine {
|
|
--profile-skeleton-line-height: 0.875rem;
|
|
--profile-skeleton-line-width: 48%;
|
|
}
|
|
|
|
.statusLine {
|
|
--profile-skeleton-line-height: 1rem;
|
|
--profile-skeleton-line-width: 78%;
|
|
}
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.sectionTitle {
|
|
--profile-skeleton-line-height: 0.875rem;
|
|
--profile-skeleton-line-width: 34%;
|
|
}
|
|
|
|
.sectionLineLong {
|
|
--profile-skeleton-line-width: 92%;
|
|
}
|
|
|
|
.sectionLineMedium {
|
|
--profile-skeleton-line-width: 74%;
|
|
}
|
|
|
|
.sectionLineShort {
|
|
--profile-skeleton-line-width: 54%;
|
|
}
|
|
|
|
.activityBlock {
|
|
height: 3rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.roleRow,
|
|
.connectionRow,
|
|
.tabs {
|
|
display: flex;
|
|
gap: 0.375rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.pill {
|
|
height: 1.375rem;
|
|
width: var(--profile-skeleton-pill-width, 4.25rem);
|
|
border-radius: 62.4375rem;
|
|
}
|
|
|
|
.connectionPill {
|
|
width: 1.875rem;
|
|
height: 1.875rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
padding: 0.5rem 0.75rem 0.75rem;
|
|
}
|
|
|
|
.button {
|
|
width: 100%;
|
|
height: 2rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.modalUserInfo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding-left: 0.75rem;
|
|
}
|
|
|
|
.modalNameLine {
|
|
--profile-skeleton-line-height: 1.875rem;
|
|
--profile-skeleton-line-width: 52%;
|
|
}
|
|
|
|
.modalTagLine {
|
|
--profile-skeleton-line-height: 1.125rem;
|
|
--profile-skeleton-line-width: 42%;
|
|
}
|
|
|
|
.modalActionButton {
|
|
width: 7rem;
|
|
height: 2rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.modalActionIcon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.tab {
|
|
width: 30%;
|
|
height: 1.875rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.panel {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: 0.875rem;
|
|
padding: calc(1rem * var(--profile-modal-scale, 1));
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mutualRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.smallAvatar {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 624.9375rem;
|
|
}
|
|
|
|
.mutualText {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|