diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
5 files changed, 188 insertions, 234 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 0b7b58bb0..be82bdab3 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -79,65 +79,6 @@ background: lighten($ui-base-color, 4%); } -.account__header { - flex: 0 0 auto; - background: lighten($ui-base-color, 4%); - text-align: center; - background-size: cover; - background-position: center; - position: relative; - - .account__avatar { - @include avatar-radius(); - @include avatar-size(90px); - display: block; - margin: 0 auto 10px; - overflow: hidden; - } - - &.inactive { - opacity: 0.5; - - .account__header__avatar { - filter: grayscale(100%); - } - - .account__header__username { - color: $secondary-text-color; - } - } - - & > div { - background: rgba(lighten($ui-base-color, 4%), 0.9); - padding: 20px 10px; - } - - .account__header__content { - color: $secondary-text-color; - } - - .account__header__display-name { - color: $primary-text-color; - display: inline-block; - width: 100%; - font-size: 20px; - line-height: 27px; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - } - - .account__header__username { - color: $highlight-text-color; - font-size: 14px; - font-weight: 400; - display: block; - margin-bottom: 10px; - overflow: hidden; - text-overflow: ellipsis; - } -} - .account__disclaimer { padding: 10px; border-top: 1px solid lighten($ui-base-color, 8%); @@ -166,39 +107,6 @@ } } -.account__header__content { - color: $darker-text-color; - font-size: 14px; - font-weight: 400; - overflow: hidden; - word-break: normal; - word-wrap: break-word; - - p { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: inherit; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } -} - -.account__header__display-name { - .emojione { - width: 25px; - height: 25px; - } -} - .account__action-bar { border-top: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%); @@ -270,15 +178,6 @@ } } -.account__header__avatar { - background-size: 90px 90px; - display: block; - height: 90px; - margin: 0 auto 10px; - overflow: hidden; - width: 90px; -} - .account-authorize { padding: 14px 10px; @@ -427,29 +326,11 @@ } } -.account--follows-info { - color: $primary-text-color; - position: absolute; - top: 10px; - left: 10px; - opacity: 0.7; - display: inline-block; - vertical-align: top; - background-color: rgba($base-overlay-background, 0.4); - text-transform: uppercase; - font-size: 11px; - font-weight: 500; - padding: 4px; - border-radius: 4px; -} - -.account--muting-info { +.relationship-tag { color: $primary-text-color; - position: absolute; - top: 40px; - left: 10px; + margin-bottom: 4px; opacity: 0.7; - display: inline-block; + display: block; vertical-align: top; background-color: rgba($base-overlay-background, 0.4); text-transform: uppercase; @@ -459,12 +340,6 @@ border-radius: 4px; } -.account--action-button { - position: absolute; - top: 10px; - right: 20px; -} - .account-gallery__container { display: flex; justify-content: center; @@ -614,8 +489,188 @@ } } -.account__header .roles { - margin-top: 20px; - margin-bottom: 20px; - padding: 0 15px; +.account__header__content { + color: $darker-text-color; + font-size: 14px; + font-weight: 400; + overflow: hidden; + word-break: normal; + word-wrap: break-word; + + p { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: inherit; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } +} + +.account__header { + overflow: hidden; + + &.inactive { + opacity: 0.5; + + .account__header__image, + .account__avatar { + filter: grayscale(100%); + } + } + + &__info { + position: absolute; + top: 10px; + left: 10px; + } + + &__image { + overflow: hidden; + height: 145px; + position: relative; + background: darken($ui-base-color, 4%); + + img { + object-fit: cover; + display: block; + width: 100%; + height: 100%; + margin: 0; + } + } + + &__bar { + position: relative; + background: lighten($ui-base-color, 4%); + padding: 5px; + border-bottom: 1px solid lighten($ui-base-color, 12%); + + .avatar { + display: block; + flex: 0 0 auto; + width: 90px; + margin-left: -2px; + + .account__avatar { + border: 2px solid lighten($ui-base-color, 4%); + } + } + } + + &__tabs { + display: flex; + align-items: flex-start; + padding: 7px 5px; + margin-top: -55px; + + &__buttons { + display: flex; + align-items: center; + padding-top: 55px; + + .icon-button { + border: 1px solid lighten($ui-base-color, 12%); + border-radius: 4px; + box-sizing: content-box; + padding: 2px; + margin: 0 8px; + } + } + + &__name { + padding: 5px; + + .account-role { + vertical-align: top; + } + + .emojione { + width: 22px; + height: 22px; + } + + h1 { + font-size: 16px; + line-height: 24px; + color: $primary-text-color; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + small { + display: block; + font-size: 14px; + color: $darker-text-color; + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + + .spacer { + flex: 1 1 auto; + } + } + + &__bio { + overflow: hidden; + margin: 0 -5px; + + .account__header__content { + padding: 20px 15px; + padding-bottom: 5px; + color: $primary-text-color; + } + + .account__header__fields { + margin: 0; + border-top: 1px solid lighten($ui-base-color, 12%); + + a { + color: lighten($ui-highlight-color, 8%); + } + + dl:first-child .verified { + border-radius: 0 4px 0 0; + } + + .verified a { + color: $valid-value-color; + } + } + } + + &__extra { + margin-top: 4px; + + &__links { + font-size: 14px; + color: $darker-text-color; + + a { + display: inline-block; + color: $darker-text-color; + text-decoration: none; + padding: 10px; + padding-top: 20px; + font-weight: 500; + + strong { + font-weight: 700; + color: $primary-text-color; + } + } + } + } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index f996bbfc5..21b76e33a 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1261,7 +1261,6 @@ noscript { @import 'domains'; @import 'status'; @import 'modal'; -@import 'metadata'; @import 'composer'; @import 'columns'; @import 'regeneration_indicator'; diff --git a/app/javascript/flavours/glitch/styles/components/metadata.scss b/app/javascript/flavours/glitch/styles/components/metadata.scss index da045574a..e69de29bb 100644 --- a/app/javascript/flavours/glitch/styles/components/metadata.scss +++ b/app/javascript/flavours/glitch/styles/components/metadata.scss @@ -1,45 +0,0 @@ -.account__header .account__header__fields { - font-size: 15px; - line-height: 20px; - overflow: hidden; - margin: 20px -10px -20px; - border-bottom: 0; - border-top: 0; - - dl { - background: $ui-base-color; - border-top: 1px solid lighten($ui-base-color, 4%); - border-bottom: 0; - display: flex; - } - - dt, - dd { - box-sizing: border-box; - padding: 14px 5px; - text-align: center; - max-height: 48px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - dt { - color: $darker-text-color; - background: lighten($ui-base-color, 13%); - width: 120px; - flex: 0 0 auto; - font-weight: 500; - } - - dd { - flex: 1 1 auto; - color: $primary-text-color; - background: $ui-base-color; - - &.verified { - border: 1px solid rgba($valid-value-color, 0.5); - background: rgba($valid-value-color, 0.25); - } - } -} diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index fd334f869..f0c0ed427 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -683,6 +683,7 @@ color: $darker-text-color; text-decoration: none; padding: 15px; + font-weight: 500; strong { font-weight: 700; diff --git a/app/javascript/flavours/glitch/styles/metadata.scss b/app/javascript/flavours/glitch/styles/metadata.scss deleted file mode 100644 index 280848959..000000000 --- a/app/javascript/flavours/glitch/styles/metadata.scss +++ /dev/null @@ -1,56 +0,0 @@ -.account__header__fields { - $meta-table-border: lighten($ui-base-color, 8%); - padding: 0; - margin: 15px -15px -15px -15px; - border: 0 none; - border-top: 1px solid $meta-table-border; - border-bottom: 1px solid $meta-table-border; - font-size: 14px; - line-height: 20px; - - dl { - display: flex; - border-bottom: 1px solid $meta-table-border; - } - - dt, - dd { - box-sizing: border-box; - padding: 14px; - text-align: center; - max-height: 48px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - dt { - padding-left: 15px; - font-weight: 500; - text-align: center; - width: 120px; - flex: 0 0 auto; - color: $secondary-text-color; - background: darken($ui-base-color, 8%); - } - - dd { - flex: 1 1 auto; - color: $darker-text-color; - } - - a { - color: $highlight-text-color; - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - - dl:last-child { - border-bottom: 0; - } -} |