$avatar_width: 120px; // shared styles for user and group cards .user-card, .group-card { // mobile cards should always be on top of everything - 1102 z-index: z("mobile-composer") + 2; max-width: 95vw; margin: 0 2.5vw; max-height: 85vh; // 2.5vh margin-top and margin-bottom. 10vh top // avatar - names - controls .first-row { flex-wrap: wrap; .names { flex: 1 1 calc(100% - #{$avatar_width}); box-sizing: border-box; } .usercard-controls { --usercard-control-margin: 0.25em; display: flex; flex: 1; flex-wrap: wrap; margin: 1em calc(var(--usercard-control-margin) * -1) 0; li { flex: 1 0 calc(50% - (var(--usercard-control-margin) * 2)); min-width: 0; margin: 0 var(--usercard-control-margin); &:empty { display: none; } button { @include ellipsis; margin-bottom: calc(var(--usercard-control-margin) * 2); } } } } h1 { font-size: var(--font-up-3); .d-icon { font-size: var(--font-down-2); } } h2 { font-size: var(--font-0); } h3 { font-size: var(--font-down-1); } } // styles for user cards only .user-card { // badges .badge-section { display: flex; align-items: flex-start; flex-wrap: wrap; .user-card-badge-link, .more-user-badges { display: flex; flex: 0 1 50%; max-width: 50%; // for text ellipsis padding: 2px 0; box-sizing: border-box; &:nth-child(odd) { padding-right: 4px; } a { width: 100%; display: flex; } } .user-badge { display: flex; margin: 0; width: 100%; .badge-display-name { overflow: hidden; text-overflow: ellipsis; } } } .public-user-fields { @media screen and (max-height: 550px) { max-height: 12vh; } max-height: 40vh; overflow-y: auto; .public-user-field { @include line-clamp(3); } } } // mobile card cloak .card-cloak { position: fixed; top: 0; left: 0; z-index: z("mobile-composer") + 1; // 1101 height: 100vh; width: 100vw; background-color: rgba(black, 0.5); animation: fadein 0.2s; }