196 lines
4.5 KiB
SCSS
196 lines
4.5 KiB
SCSS
@charset "UTF-8";
|
|
@import 'base_config';
|
|
@import '../custom_config';
|
|
@import '../custom_color', '../custom_layout';
|
|
@import 'mixins';
|
|
|
|
.account {
|
|
border-bottom: 1px solid $border-color;
|
|
padding: 16px;
|
|
|
|
.account__display-name,
|
|
.account__display-name strong { color: $primary-text-color }
|
|
|
|
&__avatar {
|
|
border-radius: $avater-radius;
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
&-overlay {
|
|
&-base {
|
|
border-radius: 50%;
|
|
width: 44px;
|
|
height: 44px;
|
|
background-size: 44px;
|
|
}
|
|
|
|
&-overlay { border-radius: $avater-radius }
|
|
}
|
|
}
|
|
|
|
&__avatar-wrapper {
|
|
margin-left: 0;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
&__header {
|
|
&__bar {
|
|
background: $card-bg-color;
|
|
padding: 8px;
|
|
border-bottom: none;
|
|
|
|
.avatar .account__avatar { border: none }
|
|
}
|
|
|
|
&__tabs {
|
|
padding: 8px;
|
|
|
|
&__name {
|
|
padding: 8px;
|
|
|
|
h1 {
|
|
color: $primary-text-color;
|
|
|
|
small { color: $secondary-text-color }
|
|
}
|
|
}
|
|
|
|
&__buttons {
|
|
.icon-button {
|
|
@include icon-button;
|
|
border: none;
|
|
border-radius: 50%;
|
|
padding: 8px;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__extra {
|
|
margin-top: 0;
|
|
|
|
&__links {
|
|
color: $secondary-text-color;
|
|
padding: 10px 0;
|
|
|
|
a {
|
|
color: $secondary-text-color;
|
|
padding: 4px 12px;
|
|
|
|
strong { color: $ui-text-color }
|
|
}
|
|
}
|
|
}
|
|
|
|
&__bio {
|
|
margin: 0;
|
|
|
|
.account__header {
|
|
&__content {
|
|
color: $primary-text-color;
|
|
padding: 8px;
|
|
}
|
|
|
|
&__fields {
|
|
border: 1px solid $border-color;
|
|
border-radius: 4px;
|
|
|
|
.verified {
|
|
border: none;
|
|
background: $verified-bg-color;
|
|
|
|
a,
|
|
&__mark { color: $primary-text-color }
|
|
}
|
|
|
|
dl {
|
|
border-bottom: 1px solid $border-color;
|
|
|
|
&:first-child .verified { border-radius: 0 }
|
|
|
|
&:last-child { border-bottom: 0 }
|
|
}
|
|
|
|
dt {
|
|
color: $primary-text-color;
|
|
background: $list-bg-inactive-color;
|
|
}
|
|
|
|
dd { color: $primary-text-color }
|
|
}
|
|
}
|
|
}
|
|
|
|
&__account-note {
|
|
padding: 8px 16px;
|
|
border-bottom: 1px solid $border-color;
|
|
|
|
label {
|
|
color: $ui-text-color;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
textarea {
|
|
color: $primary-text-color;
|
|
padding: 8px 16px;
|
|
border-radius: 0;
|
|
|
|
&:focus { background: transparent }
|
|
|
|
&::placeholder { color: $tips-text-color }
|
|
}
|
|
}
|
|
|
|
&__content { color: $secondary-text-color }
|
|
}
|
|
|
|
&__section-headline {
|
|
background: $text-tab-bg-color;
|
|
border-bottom: 1px solid $border-color;
|
|
|
|
a {
|
|
padding: 16px 0;
|
|
color: $text-tab-indicator-color;
|
|
|
|
&.active {
|
|
color: $text-tab-indicator-active-color;
|
|
border-bottom: 4px solid $text-tab-indicator-active-color;
|
|
|
|
&::before,
|
|
&:after { border: none }
|
|
|
|
&:focus { background: $text-tab-indicator-bg-focus-color }
|
|
}
|
|
|
|
&:hover { background: $text-tab-indicator-bg-hover-color }
|
|
}
|
|
}
|
|
|
|
&__relationship {
|
|
padding: 0;
|
|
height: auto;
|
|
|
|
.icon-button {
|
|
@include icon-button;
|
|
padding: 8px;
|
|
box-sizing: content-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
.account-role {
|
|
padding: 4px 8px;
|
|
border-radius: 17px;
|
|
color: $ui-text-color;
|
|
background-color: $contained-chip-color;
|
|
}
|
|
|
|
.accounts-table__count {
|
|
color: $ui-text-color;
|
|
|
|
small { color: $secondary-text-color }
|
|
}
|
|
|
|
.account-gallery {
|
|
&__item { border-radius: 0 }
|
|
} |