catstodon/app/javascript/flavours/glitch/styles/components/accounts.scss

622 lines
11 KiB
SCSS
Raw Normal View History

2018-01-13 23:48:18 +01:00
.account {
padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
2018-01-14 00:47:59 +01:00
color: inherit;
text-decoration: none;
2018-01-13 23:48:18 +01:00
.account__display-name {
flex: 1 1 auto;
display: block;
color: $darker-text-color;
2018-01-13 23:48:18 +01:00
overflow: hidden;
text-decoration: none;
font-size: 14px;
}
2018-01-14 00:47:59 +01:00
&.small {
border: none;
padding: 0;
& > .account__avatar-wrapper { margin: 0 8px 0 0 }
& > .display-name {
height: 24px;
line-height: 24px;
}
}
2018-01-13 23:48:18 +01:00
}
.account__wrapper {
display: flex;
}
.account__avatar-wrapper {
float: left;
margin-left: 12px;
margin-right: 12px;
2018-01-13 23:48:18 +01:00
}
.account__avatar {
@include avatar-radius();
position: relative;
cursor: pointer;
&-inline {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
}
.account__avatar-overlay {
2018-01-15 00:48:54 +01:00
position: relative;
2018-01-13 23:48:18 +01:00
@include avatar-size(48px);
&-base {
@include avatar-radius();
@include avatar-size(36px);
}
&-overlay {
@include avatar-radius();
@include avatar-size(24px);
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
}
.account__relationship {
height: 18px;
padding: 10px;
white-space: nowrap;
}
2018-01-14 00:47:59 +01:00
.account__header__wrapper {
flex: 0 0 auto;
background: lighten($ui-base-color, 4%);
}
2018-01-13 23:48:18 +01:00
.account__header {
flex: 0 0 auto;
background: lighten($ui-base-color, 4%);
text-align: center;
background-size: cover;
background-position: center;
position: relative;
2018-01-14 00:47:59 +01:00
.account__avatar {
@include avatar-radius();
@include avatar-size(90px);
display: block;
margin: 0 auto 10px;
overflow: hidden;
}
2018-01-13 23:48:18 +01:00
&.inactive {
opacity: 0.5;
.account__header__avatar {
filter: grayscale(100%);
}
.account__header__username {
color: $secondary-text-color;
2018-01-13 23:48:18 +01:00
}
}
& > div {
background: rgba(lighten($ui-base-color, 4%), 0.9);
padding: 20px 10px;
}
.account__header__content {
color: $secondary-text-color;
2018-01-13 23:48:18 +01:00
}
.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;
2018-01-13 23:48:18 +01:00
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%);
color: $dark-text-color;
2018-01-13 23:48:18 +01:00
strong {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
a {
font-weight: 500;
color: inherit;
text-decoration: underline;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
}
.account__header__content {
color: $darker-text-color;
2018-01-13 23:48:18 +01:00
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%);
line-height: 36px;
overflow: hidden;
flex: 0 0 auto;
display: flex;
}
.account__action-bar-dropdown {
padding: 10px;
.dropdown--active {
.dropdown__content.dropdown__right {
left: 6px;
right: initial;
}
&::after {
bottom: initial;
margin-left: 11px;
margin-top: -7px;
right: initial;
}
}
}
.account__action-bar-links {
display: flex;
flex: 1 1 auto;
line-height: 18px;
text-align: center;
2018-01-13 23:48:18 +01:00
}
.account__action-bar__tab {
text-decoration: none;
overflow: hidden;
flex: 0 1 100%;
2018-01-13 23:48:18 +01:00
border-left: 1px solid lighten($ui-base-color, 8%);
padding: 10px 0;
border-bottom: 4px solid transparent;
&.active {
border-bottom: 4px solid $ui-highlight-color;
}
2018-01-13 23:48:18 +01:00
& > span {
display: block;
text-transform: uppercase;
font-size: 11px;
color: $darker-text-color;
2018-01-13 23:48:18 +01:00
}
strong {
display: block;
font-size: 15px;
font-weight: 500;
color: $primary-text-color;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
abbr {
color: $highlight-text-color;
2018-01-13 23:48:18 +01:00
}
}
.account__header__avatar {
background-size: 90px 90px;
display: block;
height: 90px;
margin: 0 auto 10px;
overflow: hidden;
width: 90px;
}
.account-authorize {
padding: 14px 10px;
.detailed-status__display-name {
display: block;
margin-bottom: 15px;
overflow: hidden;
}
}
.account-authorize__avatar {
float: left;
margin-right: 10px;
}
.notification__message {
2018-01-15 00:48:54 +01:00
margin-left: 42px;
padding: 8px 0 0 26px;
2018-01-13 23:48:18 +01:00
cursor: default;
color: $darker-text-color;
2018-01-13 23:48:18 +01:00
font-size: 15px;
position: relative;
.fa {
color: $highlight-text-color;
2018-01-13 23:48:18 +01:00
}
> span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
.account--panel {
background: lighten($ui-base-color, 4%);
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
display: flex;
flex-direction: row;
padding: 10px 0;
}
.account--panel__button,
.detailed-status__button {
flex: 1 1 auto;
text-align: center;
}
.column-settings__outer {
background: lighten($ui-base-color, 8%);
padding: 15px;
}
.column-settings__section {
color: $darker-text-color;
2018-01-13 23:48:18 +01:00
cursor: default;
display: block;
font-weight: 500;
margin-bottom: 10px;
}
.column-settings__hashtags {
.column-settings__row {
margin-bottom: 15px;
}
.column-select {
&__control {
@include search-input();
}
&__placeholder {
color: $dark-text-color;
padding-left: 2px;
font-size: 12px;
}
&__value-container {
padding-left: 6px;
}
&__multi-value {
background: lighten($ui-base-color, 8%);
&__remove {
cursor: pointer;
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 12%);
color: lighten($darker-text-color, 4%);
}
}
}
&__multi-value__label,
&__input {
color: $darker-text-color;
}
&__clear-indicator,
&__dropdown-indicator {
cursor: pointer;
transition: none;
color: $dark-text-color;
&:hover,
&:active,
&:focus {
color: lighten($dark-text-color, 4%);
}
}
&__indicator-separator {
background-color: lighten($ui-base-color, 8%);
}
&__menu {
@include search-popout();
padding: 0;
background: $ui-secondary-color;
}
&__menu-list {
padding: 6px;
}
&__option {
color: $inverted-text-color;
border-radius: 4px;
font-size: 14px;
&--is-focused,
&--is-selected {
background: darken($ui-secondary-color, 10%);
}
}
}
2018-01-13 23:48:18 +01:00
}
.column-settings__row {
.text-btn {
margin-bottom: 15px;
}
}
.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;
2018-03-05 11:09:29 +01:00
font-size: 11px;
font-weight: 500;
padding: 4px;
border-radius: 4px;
}
.account--muting-info {
color: $primary-text-color;
position: absolute;
top: 40px;
left: 10px;
opacity: 0.7;
display: inline-block;
vertical-align: top;
background-color: rgba($base-overlay-background, 0.4);
text-transform: uppercase;
2018-01-13 23:48:18 +01:00
font-size: 11px;
font-weight: 500;
padding: 4px;
border-radius: 4px;
}
.account--action-button {
position: absolute;
top: 10px;
right: 20px;
}
.account-gallery__container {
display: flex;
justify-content: center;
2018-01-13 23:48:18 +01:00
flex-wrap: wrap;
padding: 2px;
2018-01-13 23:48:18 +01:00
}
.account-gallery__item {
flex-grow: 1;
width: 50%;
overflow: hidden;
position: relative;
&::before {
content: "";
display: block;
padding-top: 100%;
}
2018-01-13 23:48:18 +01:00
a {
display: block;
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: 2px;
top: 0;
left: 0;
2018-01-13 23:48:18 +01:00
background-color: $base-overlay-background;
background-size: cover;
background-position: center;
position: absolute;
color: $ui-primary-color;
2018-01-13 23:48:18 +01:00
text-decoration: none;
border-radius: 4px;
2018-01-13 23:48:18 +01:00
&:hover,
&:active,
&:focus {
outline: 0;
color: $ui-secondary-color;
&::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba($base-overlay-background, 0.3);
border-radius: 4px;
}
2018-01-13 23:48:18 +01:00
}
}
&__icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
2018-01-13 23:48:18 +01:00
}
.notification__filter-bar,
.account__section-headline {
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
2018-01-13 23:48:18 +01:00
cursor: default;
display: flex;
flex-shrink: 0;
2018-01-13 23:48:18 +01:00
button {
background: darken($ui-base-color, 4%);
border: 0;
margin: 0;
}
button,
a {
2018-01-13 23:48:18 +01:00
display: block;
flex: 1 1 auto;
color: $darker-text-color;
padding: 15px 0;
font-size: 14px;
font-weight: 500;
text-align: center;
text-decoration: none;
position: relative;
2018-01-13 23:48:18 +01:00
&.active {
color: $secondary-text-color;
&::before,
&::after {
display: block;
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent lighten($ui-base-color, 8%);
}
&::after {
bottom: -1px;
border-color: transparent transparent $ui-base-color;
}
}
2018-01-13 23:48:18 +01:00
}
}
.account__moved-note {
padding: 14px 10px;
padding-bottom: 16px;
background: lighten($ui-base-color, 4%);
border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
&__message {
position: relative;
margin-left: 58px;
color: $dark-text-color;
2018-01-13 23:48:18 +01:00
padding: 8px 0;
padding-top: 0;
padding-bottom: 4px;
font-size: 14px;
> span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
&__icon-wrapper {
left: -26px;
position: absolute;
}
.detailed-status__display-avatar {
position: relative;
}
.detailed-status__display-name {
margin-bottom: 0;
}
}
.account__header .roles {
margin-top: 20px;
margin-bottom: 20px;
padding: 0 15px;
}