From 06f58f53493b0587dab4ecdcc7f81b181424da89 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 20 Apr 2022 20:03:18 +0300 Subject: i forgor --- src/components/user_card/user_card.scss | 324 ++++++++++++++++++++++++++++++++ 1 file changed, 324 insertions(+) create mode 100644 src/components/user_card/user_card.scss (limited to 'src/components/user_card/user_card.scss') diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss new file mode 100644 index 00000000..4dabafa2 --- /dev/null +++ b/src/components/user_card/user_card.scss @@ -0,0 +1,324 @@ +@import '../../_variables.scss'; + +.user-card { + position: relative; + z-index: 1; + + &:hover { + --_still-image-img-visibility: visible; + --_still-image-canvas-visibility: hidden; + --_still-image-label-visibility: hidden; + } + + .panel-heading { + padding: .5em 0; + text-align: center; + box-shadow: none; + background: transparent; + flex-direction: column; + align-items: stretch; + // create new stacking context + position: relative; + } + + .panel-body { + word-wrap: break-word; + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; + // create new stacking context + position: relative; + } + + .background-image { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + mask: linear-gradient(to top, white, transparent) bottom no-repeat, + linear-gradient(to top, white, white); + // Autoprefixer seem to ignore this one, and also syntax is different + -webkit-mask-composite: xor; + mask-composite: exclude; + background-size: cover; + mask-size: 100% 60%; + border-top-left-radius: calc(var(--panelRadius) - 1px); + border-top-right-radius: calc(var(--panelRadius) - 1px); + background-color: var(--profileBg); + z-index: -2; + + &.hide-bio { + mask-size: 100% 40px; + } + } + + &-bio { + text-align: center; + display: block; + line-height: 18px; + padding: 1em; + margin: 0; + + a { + color: $fallback--link; + color: var(--postLink, $fallback--link); + } + + img { + object-fit: contain; + vertical-align: middle; + max-width: 100%; + max-height: 400px; + } + } + + // Modifiers + + &-rounded-t { + border-top-left-radius: $fallback--panelRadius; + border-top-left-radius: var(--panelRadius, $fallback--panelRadius); + border-top-right-radius: $fallback--panelRadius; + border-top-right-radius: var(--panelRadius, $fallback--panelRadius); + } + + &-rounded { + border-radius: $fallback--panelRadius; + border-radius: var(--panelRadius, $fallback--panelRadius); + } + + &-bordered { + border-width: 1px; + border-style: solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + } +} + +.user-info { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + padding: 0 26px; + + .container { + min-width: 0; + padding: 16px 0 6px; + display: flex; + align-items: flex-start; + max-height: 56px; + + > * { + min-width: 0; + } + + .Avatar { + --_avatarShadowBox: var(--avatarShadow); + --_avatarShadowFilter: var(--avatarShadowFilter); + --_avatarShadowInset: var(--avatarShadowInset); + + flex: 1 0 100%; + width: 56px; + height: 56px; + object-fit: cover; + } + } + + &-avatar-link { + position: relative; + cursor: pointer; + + &-overlay { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + display: flex; + justify-content: center; + align-items: center; + border-radius: $fallback--avatarRadius; + border-radius: var(--avatarRadius, $fallback--avatarRadius); + opacity: 0; + transition: opacity .2s ease; + + svg { + color: #FFF; + } + } + + &:hover &-overlay { + opacity: 1; + } + } + + .external-link-button, .edit-profile-button { + cursor: pointer; + width: 2.5em; + text-align: center; + margin: -0.5em 0; + padding: 0.5em 0; + + &:not(:hover) .icon { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + } + + .user-summary { + display: block; + 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; + + .top-line, + .bottom-line { + display: flex; + } + } + + .user-name { + text-overflow: ellipsis; + overflow: hidden; + flex: 1 1 auto; + margin-right: 1em; + font-size: 15px; + } + + .bottom-line { + font-weight: light; + font-size: 15px; + align-items: baseline; + + .lock-icon { + margin-left: 0.5em; + } + + .user-screen-name { + min-width: 1px; + flex: 0 1 auto; + text-overflow: ellipsis; + overflow: hidden; + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + + .dailyAvg { + min-width: 1px; + flex: 0 0 auto; + margin-left: 1em; + font-size: 0.7em; + color: $fallback--text; + color: var(--text, $fallback--text); + } + + .user-role { + flex: none; + color: $fallback--text; + color: var(--alertNeutralText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--alertNeutral, $fallback--fg); + } + } + + .user-meta { + margin-bottom: .15em; + display: flex; + align-items: baseline; + font-size: 14px; + line-height: 22px; + flex-wrap: wrap; + + .following { + flex: 1 0 auto; + margin: 0; + margin-bottom: .25em; + text-align: left; + } + + .highlighter { + flex: 0 1 auto; + display: flex; + flex-wrap: wrap; + margin-right: -.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: .5em; + margin-bottom: .25em; + } + } + } + .user-interactions { + position: relative; + display: flex; + flex-flow: row wrap; + margin-right: -.75em; + + > * { + margin: 0 .75em .6em 0; + white-space: nowrap; + min-width: 95px; + } + + button { + margin: 0; + } + } +} + +.sidebar .edit-profile-button { + display: none; +} + +.user-counts { + display: flex; + line-height:16px; + padding: .5em 1.5em 0em 1.5em; + text-align: center; + justify-content: space-between; + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + flex-wrap: wrap; +} + +.user-count { + flex: 1 0 auto; + padding: .5em 0 .5em 0; + margin: 0 .5em; + + h5 { + font-size:1em; + font-weight: bolder; + margin: 0 0 0.25em; + } + a { + text-decoration: none; + } +} -- cgit v1.2.3-70-g09d2 From 7f513fe46fbf631190445b21b7cb4b7cb431d019 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 20 Apr 2022 23:44:33 +0300 Subject: more em-sized fonts --- src/components/emoji_input/emoji_input.vue | 2 +- src/components/emoji_picker/emoji_picker.scss | 6 ++++-- src/components/link-preview/link-preview.vue | 2 +- src/components/notifications/notifications.scss | 8 ++++---- src/components/registration/registration.vue | 2 +- src/components/status/status.scss | 9 ++++----- src/components/still-image/still-image.vue | 8 ++++---- src/components/user_card/user_card.scss | 5 ++--- src/components/user_list_popover/user_list_popover.vue | 2 +- 9 files changed, 22 insertions(+), 22 deletions(-) (limited to 'src/components/user_card/user_card.scss') diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index aa2950ce..7d95ab7e 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -78,7 +78,7 @@ top: 0; right: 0; margin: .2em .25em; - font-size: 16px; + font-size: 1.3em; cursor: pointer; line-height: 24px; diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 1a696584..2055e02e 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -73,12 +73,13 @@ &-item { padding: 0 7px; cursor: pointer; - font-size: 24px; + font-size: 1.85em; &.disabled { opacity: 0.5; pointer-events: none; } + &.active { border-bottom: 4px solid; @@ -151,9 +152,10 @@ justify-content: left; &-title { - font-size: 12px; + font-size: 0.85em; width: 100%; margin: 0; + &.disabled { display: none; } diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue index d3ca39b8..220527f2 100644 --- a/src/components/link-preview/link-preview.vue +++ b/src/components/link-preview/link-preview.vue @@ -63,7 +63,7 @@ } .card-host { - font-size: 12px; + font-size: 0.85em; } .card-description { diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index a285027d..aa4ae346 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -113,13 +113,13 @@ } .emoji-reaction-emoji { - font-size: 16px; + font-size: 1.3em; } .notification-details { - min-width: 0px; + min-width: 0; word-wrap: break-word; - line-height:18px; + line-height: 1.4; position: relative; overflow: hidden; width: 100%; @@ -142,7 +142,7 @@ } .timeago { - margin-right: .2em; + margin-right: 0.2em; } .status-content { diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 1c83a47e..c3fee6f8 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -318,7 +318,7 @@ $validations-cRed: #f04124; text-align: left; span { - font-size: 12px; + font-size: 0.85em; } } diff --git a/src/components/status/status.scss b/src/components/status/status.scss index e38e2a53..36a2cca1 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -82,7 +82,6 @@ .status-username { white-space: nowrap; - font-size: 14px; overflow: hidden; max-width: 85%; font-weight: bold; @@ -160,7 +159,7 @@ & .heading-reply-row { position: relative; align-content: baseline; - font-size: 12px; + font-size: 0.85em; margin-top: 0.2em; line-height: 130%; max-width: 100%; @@ -229,7 +228,7 @@ .replies { margin-top: 0.25em; line-height: 18px; - font-size: 12px; + font-size: 0.85em; display: flex; flex-wrap: wrap; @@ -389,14 +388,14 @@ .stat-title { color: var(--faint, $fallback--faint); - font-size: 12px; + font-size: 0.85em; text-transform: uppercase; position: relative; } .stat-number { font-weight: bolder; - font-size: 16px; + font-size: 1.1em; line-height: 1em; } diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index e939b532..ab3080c8 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -58,10 +58,10 @@ zoom: var(--_still_image-label-scale, 1); content: 'gif'; position: absolute; - line-height: 10px; - font-size: 10px; - top: 5px; - left: 5px; + line-height: 1; + font-size: 0.7em; + top: 0.5em; + left: 0.5em; background: rgba(127, 127, 127, 0.5); color: #fff; display: block; diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 4dabafa2..44657bdf 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -189,12 +189,12 @@ overflow: hidden; flex: 1 1 auto; margin-right: 1em; - font-size: 15px; + font-size: 1.1em; } .bottom-line { font-weight: light; - font-size: 15px; + font-size: 1.1em; align-items: baseline; .lock-icon { @@ -232,7 +232,6 @@ margin-bottom: .15em; display: flex; align-items: baseline; - font-size: 14px; line-height: 22px; flex-wrap: wrap; diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue index 8706d0ff..bdc3aa92 100644 --- a/src/components/user_list_popover/user_list_popover.vue +++ b/src/components/user_list_popover/user_list_popover.vue @@ -73,7 +73,7 @@ } .user-list-screen-name { - font-size: 9px; + font-size: 0.65em; } } } -- cgit v1.2.3-70-g09d2 From 33d92f9b16267415d1e62285a4f305ae10baf489 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 20 Apr 2022 23:55:34 +0300 Subject: relative units in line-height + some cleanup --- src/App.scss | 6 +++--- src/components/notifications/notifications.scss | 3 ++- src/components/password_reset/password_reset.vue | 7 ++++--- src/components/react_button/react_button.vue | 2 +- src/components/status/status.scss | 4 ++-- src/components/user_card/user_card.scss | 2 +- src/components/user_profile/user_profile.vue | 2 +- src/panel.scss | 2 +- 8 files changed, 15 insertions(+), 13 deletions(-) (limited to 'src/components/user_card/user_card.scss') diff --git a/src/App.scss b/src/App.scss index 8c59c77a..3d30ec79 100644 --- a/src/App.scss +++ b/src/App.scss @@ -457,7 +457,7 @@ textarea, display: inline-block; position: relative; height: 2em; - line-height: 16px; + line-height: 1.2; hyphens: none; padding: 8px 0.5em; @@ -508,7 +508,7 @@ textarea, background-color: var(--input, $fallback--fg); vertical-align: top; text-align: center; - line-height: 1.1em; + line-height: 1.1; font-size: 1.1em; box-sizing: border-box; color: transparent; @@ -548,7 +548,7 @@ textarea, background-color: var(--input, $fallback--fg); vertical-align: top; text-align: center; - line-height: 1.1em; + line-height: 1.1; font-size: 1.1em; box-sizing: border-box; color: transparent; diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index aa4ae346..976688d1 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -155,7 +155,8 @@ margin: 0 0 0.3em; padding: 0; font-size: 1em; - line-height:20px; + line-height: 1.5; + small { font-weight: lighter; } diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue index e0579568..90673f44 100644 --- a/src/components/password_reset/password_reset.vue +++ b/src/components/password_reset/password_reset.vue @@ -91,6 +91,7 @@ flex-direction: column; margin-top: 0.6em; max-width: 18rem; + > * { min-width: 0; } @@ -100,8 +101,8 @@ display: flex; flex-direction: column; margin-bottom: 1em; - padding: 0.3em 0.0em 0.3em; - line-height: 24px; + padding: 0.3em 0; + line-height: 1.85em; } .error { @@ -113,7 +114,7 @@ .alert { padding: 0.5em; - margin: 0.3em 0.0em 1em; + margin: 0.3em 0 1em; } .password-reset-required { diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index c69c315b..7f35b7b5 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -101,7 +101,7 @@ cursor: pointer; flex-basis: 20%; - line-height: 1.5em; + line-height: 1.5; align-content: center; &:hover { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 36a2cca1..b3ad3818 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -106,7 +106,7 @@ .heading-name-row { display: flex; justify-content: space-between; - line-height: 18px; + line-height: 1.3; a { display: inline-block; @@ -227,7 +227,7 @@ .replies { margin-top: 0.25em; - line-height: 18px; + line-height: 1.3; font-size: 0.85em; display: flex; flex-wrap: wrap; diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 44657bdf..2e153120 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -55,7 +55,7 @@ &-bio { text-align: center; display: block; - line-height: 18px; + line-height: 1.3; padding: 1em; margin: 0; diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index f1e3cb72..67966ff4 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -176,7 +176,7 @@ } .user-profile-field-name, .user-profile-field-value { - line-height: 18px; + line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; diff --git a/src/panel.scss b/src/panel.scss index 637ea17c..776ed863 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -195,7 +195,7 @@ } .panel-body > p { - line-height: 18px; + line-height: 1.3; padding: 1em; margin: 0; } -- cgit v1.2.3-70-g09d2