diff options
Diffstat (limited to 'app/javascript/styles/accounts.scss')
-rw-r--r-- | app/javascript/styles/accounts.scss | 133 |
1 files changed, 69 insertions, 64 deletions
diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index 10f8bd2b9..d346a6bb2 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -1,29 +1,34 @@ .card { + display: flex; background: $ui-base-color; - background-size: cover; - background-position: center; - padding: 60px 0; - padding-bottom: 0; border-radius: 4px 4px 0 0; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); overflow: hidden; - position: relative; @media screen and (max-width: 700px) { border-radius: 0; box-shadow: none; } - &::after { - background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8)); - display: block; - content: ""; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; + .details { + position: relative; + padding: 60px 0 0; + background-size: cover; + background-position: center; + text-align: center; + flex: auto; + + &::after { + background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8)); + display: block; + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + } } .name { @@ -66,57 +71,36 @@ z-index: 2; } - .details { - display: flex; - margin-top: 30px; - position: relative; - z-index: 2; - flex-direction: row; - } - .details-counters { - display: flex; + position: relative; + display: inline-flex; flex-direction: row; - order: 0; + margin: 15px 0; + z-index: 2; } .counter { width: 80px; color: $ui-primary-color; padding: 5px 10px 0; - margin-bottom: 10px; - border-right: 1px solid $ui-primary-color; cursor: default; position: relative; - a { - display: block; + & + .counter { + border-left: 1px solid $ui-primary-color; } - &::after { - display: block; - content: ""; - position: absolute; - bottom: -10px; - left: 0; - width: 100%; - border-bottom: 4px solid $ui-primary-color; - opacity: 0.5; - transition: all 0.8s ease; + & > * { + opacity: .7; + transition: opacity .3s ease; } - &.active { - &::after { - border-bottom: 4px solid $ui-highlight-color; - opacity: 1; - } + &.active > *, &:hover > * { + opacity: 1; } - &:hover { - &::after { - opacity: 1; - transition-duration: 0.2s; - } + a { + display: block; } a { @@ -140,30 +124,51 @@ } .bio { - flex: 1; + position: relative; font-size: 14px; line-height: 18px; + margin: 15px 0; padding: 5px 10px; color: $ui-secondary-color; - order: 1; + z-index: 2; } - @media screen and (max-width: 480px) { - .details { - display: block; - } + .metadata { + max-width: 40%; + background: $ui-base-color; + color: $primary-text-color; + text-align: left; + overflow-y: auto; + white-space: pre-wrap; - .bio { - text-align: center; - margin-bottom: 20px; - } + .metadata-item { + border-bottom: 1px $ui-primary-color solid; + padding: 15px 10px; + font-size: 18px; + line-height: 24px; + overflow: hidden; + text-overflow: ellipsis; - .counter { - flex: 1 1 auto; - } + a { + color: $ui-highlight-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } - .counter:last-child { - border-right: none; + b { + display: block; + font-size: 12px; + line-height: 16px; + text-transform: uppercase; + color: $ui-primary-color; + + a { + color: $ui-primary-color; + } + } } } } |