diff options
Diffstat (limited to 'app/javascript/styles/accounts.scss')
| -rw-r--r-- | app/javascript/styles/accounts.scss | 391 |
1 files changed, 391 insertions, 0 deletions
diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss new file mode 100644 index 000000000..99af9c982 --- /dev/null +++ b/app/javascript/styles/accounts.scss @@ -0,0 +1,391 @@ +.card { + background: $color1; + background-size: cover; + padding: 60px 0; + padding-bottom: 0; + border-radius: 4px 4px 0 0; + box-shadow: 0 0 15px rgba($color8, 0.2); + overflow: hidden; + position: relative; + + @media screen and (max-width: 700px) { + border-radius: 0; + box-shadow: none; + } + + &:after { + background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8)); + display: block; + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + } + + .name { + display: block; + font-size: 20px; + line-height: 18px * 1.5; + color: $color5; + font-weight: 500; + text-align: center; + position: relative; + z-index: 2; + text-shadow: 0 0 2px $color8; + + small { + display: block; + font-size: 14px; + color: $color4; + font-weight: 400; + } + } + + .avatar { + width: 120px; + margin: 0 auto; + margin-bottom: 15px; + position: relative; + z-index: 2; + + img { + width: 120px; + height: 120px; + display: block; + border-radius: 120px; + } + } + + .controls { + position: absolute; + top: 10px; + right: 10px; + z-index: 2; + } + + .details { + display: flex; + margin-top: 30px; + position: relative; + z-index: 2; + flex-direction: row; + } + + .details-counters { + display: flex; + flex-direction: row; + order: 0; + } + + .counter { + width: 80px; + color: $color3; + padding: 5px 10px 0px; + margin-bottom: 10px; + border-right: 1px solid $color3; + cursor: default; + position: relative; + + a { + display: block; + } + + &:after { + display: block; + content: ""; + position: absolute; + bottom: -10px; + left: 0; + width: 100%; + border-bottom: 4px solid $color3; + opacity: 0.5; + transition: all 0.8s ease; + } + + &.active { + &:after { + border-bottom: 4px solid $color4; + opacity: 1; + } + } + + &:hover { + &:after { + opacity: 1; + transition-duration: 0.2s; + } + } + + a { + text-decoration: none; + color: inherit; + } + + .counter-label { + font-size: 12px; + text-transform: uppercase; + display: block; + margin-bottom: 5px; + text-shadow: 0 0 2px $color8; + } + + .counter-number { + font-weight: 500; + font-size: 18px; + color: $color5; + } + } + + .bio { + flex: 1; + font-size: 14px; + line-height: 18px; + padding: 5px 10px; + color: $color2; + order: 1; + } + + @media screen and (max-width: 480px) { + .details { + display: block; + } + + .bio { + text-align: center; + margin-bottom: 20px; + } + + .counter { + flex: 1 1 auto; + } + + .counter:last-child { + border-right: none; + } + } +} + +.pagination { + padding: 30px 0; + text-align: center; + overflow: hidden; + + a, .current, .next, .prev, .page, .gap { + font-size: 14px; + color: $color5; + font-weight: 500; + display: inline-block; + padding: 6px 10px; + text-decoration: none; + } + + .current { + background: $color5; + border-radius: 100px; + color: $color1; + cursor: default; + margin: 0 10px; + } + + .gap { + cursor: default; + } + + .prev, .next { + text-transform: uppercase; + color: $color2; + } + + .prev { + float: left; + padding-left: 0; + + .fa { + display: inline-block; + margin-right: 5px; + } + } + + .next { + float: right; + padding-right: 0; + + .fa { + display: inline-block; + margin-left: 5px; + } + } + + .disabled { + cursor: default; + color: lighten($color1, 10%); + } + + @media screen and (max-width: 360px) { + padding: 30px 20px; + + a, .current, .next, .prev, .gap { + display: none; + } + + .next, .prev { + display: inline-block; + } + } +} + +.accounts-grid { + box-shadow: 0 0 15px rgba($color8, 0.2); + background: $color5; + border-radius: 0 0 4px 4px; + padding: 20px 10px; + padding-bottom: 10px; + overflow: hidden; + display: flex; + flex-wrap: wrap; + + @media screen and (max-width: 700px) { + border-radius: 0; + box-shadow: none; + } + + .account-grid-card { + box-sizing: border-box; + width: 335px; + border: 1px solid $color2; + border-radius: 4px; + color: $color1; + margin-bottom: 10px; + + &:nth-child(odd) { + margin-right: 10px; + } + + .account-grid-card__header { + overflow: hidden; + padding: 10px; + border-bottom: 1px solid $color2; + } + + .avatar { + width: 60px; + height: 60px; + float: left; + margin-right: 15px; + + img { + display: block; + width: 60px; + height: 60px; + border-radius: 60px; + } + } + + .name { + padding-top: 10px; + + a { + display: block; + color: $color1; + text-decoration: none; + + &:hover { + .display_name { + text-decoration: underline; + } + } + } + } + + .display_name { + font-size: 14px; + display: block; + } + + .username { + color: $color4; + } + + .note { + padding: 10px; + padding-top: 15px; + color: $color3; + word-wrap: break-word; + } + } +} + +.nothing-here { + color: $color3; + font-size: 14px; + font-weight: 500; + text-align: center; + padding: 15px 0; + padding-bottom: 25px; + cursor: default; +} + +.account-card { + padding: 14px 10px; + background: $color5; + border-radius: 4px; + text-align: left; + box-shadow: 0 0 15px rgba($color8, 0.2); + + .detailed-status__display-name { + display: block; + overflow: hidden; + margin-bottom: 15px; + + &:last-child { + margin-bottom: 0; + } + + & > div { + float: left; + margin-right: 10px; + width: 48px; + height: 48px; + } + + .avatar { + display: block; + border-radius: 4px; + } + + .display-name { + display: block; + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + cursor: default; + + strong { + font-weight: 500; + color: $color1; + } + + span { + font-size: 14px; + color: $color3; + } + } + + &:hover { + .display-name { + strong { + text-decoration: none; + } + } + } + } + + .account__header__content { + font-size: 14px; + color: $color1; + } +} |