Page Menu
Home
Phorge
Search
Configure Global Search
Log In
Files
F85806125
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Award Token
Flag For Later
Size
11 KB
Referenced Files
None
Subscribers
None
View Options
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index caa358dafe..9135897250 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -1,622 +1,623 @@
.user-card {
position: relative;
z-index: 1;
// editing headers
h4 {
line-height: 2;
display: flex;
padding: 0 1.0em;
span {
flex: 1;
}
}
.input.bio {
height: auto; // override settings default textarea size
}
.user-card-inner {
padding-bottom: 0;
}
&-setting,
&-bio {
color: var(--lightText);
display: block;
line-height: 1.3;
padding: 0 0.6em;
img {
object-fit: contain;
vertical-align: middle;
max-width: 100%;
max-height: 400px;
}
}
.user-card-setting {
margin-left: 0.6em;
margin-right: 0.6em;
}
.user-card-bio {
text-align: center;
margin: 0 0.6em;
&.input {
margin: 0 1em;
textarea {
text-align: inherit;
}
}
&, * {
line-height: 1.5;
}
&.-justify-left {
text-align: start;
}
}
&:hover {
--_still-image-img-visibility: visible;
--_still-image-canvas-visibility: hidden;
--_still-image-label-visibility: hidden;
}
.panel-heading {
text-align: center;
box-shadow: none;
background: transparent;
backdrop-filter: none;
flex-direction: column;
align-items: stretch;
// create new stacking context
position: relative;
}
.personal-marks {
margin: 0.6em;
padding: 0.6em;
&:not(:last-child) {
border-bottom: 1px solid var(--border);
}
.highlighter {
h4 {
margin-top: 0.6em;
}
.userHighlightSel {
vertical-align: bottom;
margin-left: -0.1em;
&.-none select {
color: var(--textFaint);
option {
color: var(--text);
background: var(--background);
}
}
}
.highlighter-color {
vertical-align: bottom;
margin-left: 0.6em;
}
}
}
.background-image {
position: absolute;
inset: 0;
right: -1.2em;
left: -1.2em;
top: -1.4em;
padding: 0;
mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
background-size: cover;
border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
background-color: var(--profileBg);
z-index: -2;
}
&.-rounded-t {
border-top-left-radius: var(--roundness);
border-top-right-radius: var(--roundness);
--__roundnessTop: var(--roundness);
--__roundnessBottom: 0;
}
&.-rounded {
border-radius: var(--roundness);
--__roundnessTop: var(--roundness);
--__roundnessBottom: var(--roundness);
}
&.-popover {
border-radius: var(--roundness);
--__roundnessTop: var(--roundness);
--__roundnessBottom: var(--roundness);
}
&.-bordered {
border-width: 1px;
border-style: solid;
border-color: var(--border);
}
}
.user-info {
position: relative;
margin: 0.6em;
margin-bottom: 0;
text-align: left;
.user-identity {
position: relative;
aspect-ratio: 3;
min-height: 6em;
display: flex;
align-items: flex-end;
margin-bottom: 1em;
container: user-card / inline-size;
> * {
min-width: 0;
}
> a {
vertical-align: middle;
display: flex;
}
.Avatar {
--_avatarShadowBox: var(--avatarShadow);
--_avatarShadowFilter: var(--avatarShadowFilter);
--_avatarShadowInset: var(--avatarShadowInset);
width: 7em;
width: calc(min(7em, 20cqw));
height: 7em;
height: calc(min(7em, 20cqw));
object-fit: cover;
}
}
.other-actions {
position: relative;
display: inline-grid;
grid-auto-flow: column;
grid-gap: 0.6em;
font-size: 1.25rem;
z-index: 2;
align-self: end;
a, button, div {
text-align: center;
width: 2em;
height: 2em;
line-height: 2em;
padding: 0.6em;
margin: -0.6em;
&.save-profile-button,
&.reset-profile-button,
&.edit-banner-button {
width: auto;
}
&:hover .icon {
color: var(--textFaint);
}
&:not(:hover) .icon {
color: var(--lightText);
}
}
}
&-avatar {
position: relative;
cursor: pointer;
margin-right: 0.6em;
&.-overlay {
position: absolute;
inset: -0.6em;
left: -0.6em;
right: -1.2em;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--roundness);
opacity: 0;
transition: opacity 0.2s ease;
svg {
color: #fff;
margin: 0.5em;
}
}
&:hover &.-overlay {
opacity: 1;
background-color: rgb(0 0 0 / 30%);
}
}
.user-info-avatar.-editable {
.-overlay {
opacity: 1;
place-items: start end;
justify-content: end;
}
}
.user-summary {
align-self: stretch;
display: flex;
flex-direction: column;
margin-left: 0.6em;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 0;
// This is so that text doesn't get overlapped by avatar's shadow if it has
// big one
z-index: 1;
line-height: 2em;
--emoji-size: 1.7em;
.RichContent {
/* stylelint-disable-next-line declaration-no-important */
--link: var(--text) !important;
}
.name-wrapper {
display: flex;
align-items: baseline;
.edit-button {
width: 3em;
text-align: center;
&:hover .icon {
color: var(--textFaint);
}
&:not(:hover) .icon {
color: var(--lightText);
}
}
.input,
.user-name {
flex: 1;
font-weight: 600;
line-height: 2;
margin-right: 1em;
text-overflow: ellipsis;
overflow: hidden;
}
.input {
margin: 0 -0.5em;
padding: 0 0.5em;
}
}
.top-line {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
// these two normalize position and height when custom emoji are used
line-height: 2;
margin-bottom: -0.2em;
font-size: calc(max(110%, 4cqw));
}
.bottom-line {
display: flex;
align-items: baseline;
flex-wrap: wrap;
white-space: normal;
font-weight: 500;
font-size: 0.9em;
+ font-size: calc(max(90%, 2.5cqw));
line-height: 1.5;
}
.lock-icon {
display: inline-block;
vertical-align: baseline;
overflow-x: hidden;
margin: 0 0.35em 0 0.5em;
}
.user-screen-name {
color: var(--text);
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
.user-role {
display: inline-block;
vertical-align: baseline;
}
}
.highlighter {
margin: 5em;
align-items: baseline;
line-height: 22px;
flex-wrap: wrap;
.following {
flex: 1 0 auto;
margin: 0;
margin-bottom: 0.25em;
text-align: left;
}
.highlighter {
flex: 0 1 auto;
display: flex;
flex-wrap: wrap;
margin-right: -0.5em;
align-self: start;
.userHighlightCl {
padding: 2px 10px;
flex: 1 0 auto;
}
.userHighlightSel {
padding-top: 0;
padding-bottom: 0;
flex: 1 0 auto;
}
.userHighlightText {
width: 70px;
flex: 1 0 auto;
}
.userHighlightCl,
.userHighlightText,
.userHighlightSel {
vertical-align: top;
margin-right: 0.5em;
margin-bottom: 0.25em;
}
}
}
.user-interactions {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 0.6em;
> * {
flex: 0 0 10%;
}
.popover-trigger-button, .moderation-tools-button {
width: 100%;
}
> .btn-group, > button {
white-space: nowrap;
}
}
}
.sidebar .edit-profile-button {
display: none;
}
.user-extras {
padding: 1.2em 0.6em;
line-height: 1.5;
.user-stats {
display: block;
text-align: center;
word-wrap: break-word;
width: 100%;
dl {
display: inline;
margin-right: 1em;
white-space: nowrap;
}
dd {
font-weight: bolder;
text-overflow: ellipsis;
overflow: hidden;
margin: 0;
}
dd, dt {
display: inline
}
/* stylelint-disable-next-line no-descending-specificity */
a {
text-decoration: none;
}
}
.birthday {
width: 100%;
text-align: center;
white-space: nowrap;
--icon: var(--text);
}
}
.user-profile-fields {
margin: 0 0.5em;
display: flex;
flex-direction: column;
--emoji-size: 1.8em;
img {
object-fit: contain;
vertical-align: middle;
max-width: 100%;
max-height: 400px;
}
.user-profile-field-add,
.user-profile-field {
display: flex;
align-items: center;
margin: 0.25em;
border: 1px solid var(--border);
border-radius: var(--roundness);
line-height: 2em;
.label {
margin-left: 0.5em;
}
}
.user-profile-field-add {
justify-content: center;
margin: 0.25em;
}
.user-profile-field {
/* stylelint-disable no-descending-specificity */
// input is a generic class
.input {
text-align: inherit;
flex: 1;
}
/* stylelint-enable no-descending-specificity */
.delete-field {
display: inline-block;
text-align: center;
width: 2em;
}
.user-profile-field-name,
.user-profile-field-value,
.user-profile-field-add {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
display: inline-flex;
&.-edit {
padding: 0;
input {
font-weight: inherit;
}
}
}
.user-profile-field-name {
flex: 0 1 50%;
font-weight: 600;
text-align: right;
justify-content: end;
color: var(--lightText);
min-width: 9em;
border-right: 1px solid var(--border);
padding-left: 1.2em;
padding-right: 0.6em;
}
.user-profile-field-value {
flex: 1 1 55%;
color: var(--text);
padding-left: 0.6em;
margin: 0;
}
}
}
.edit-image {
.panel-body {
text-align: center;
}
.current-avatar {
object-fit: contain;
}
.image-container {
display: flex;
margin: 0 1em 0.5em;
gap: 0.5em;
.new-image {
display: flex;
flex-direction: column;
}
.cropper {
flex: 1;
}
> * {
flex: 1 0 10em;
max-height: 100%;
aspect-ratio: 1;
}
.separator {
min-width: 1.1em;
font-size: 500%;
align-self: center;
flex: 0 1 5em;
aspect-ratio: unset;
}
}
&.-banner {
.images-container {
grid-template-rows: 20em 5em 20em;
grid-template-columns: 1fr;
> * {
flex: 1 0 10em;
width: 100%;
aspect-ratio: 3;
}
}
.separator {
min-height: 1.1em;
font-size: 500%;
justify-self: center;
flex: 0 1 5em;
aspect-ratio: unset;
}
}
}
File Metadata
Details
Attached
Mime Type
text/x-diff
Expires
Mon, Oct 12, 1:38 PM (1 d, 16 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1786294
Default Alt Text
(11 KB)
Attached To
Mode
rPUFE pleroma-fe-upstream
Attached
Detach File
Event Timeline
Log In to Comment