187 lines
4.5 KiB
SCSS
187 lines
4.5 KiB
SCSS
.public-layout {
|
|
.header {
|
|
@include shadow-4dp;
|
|
background: $top-bar-color;
|
|
border-radius: $nav-bar-radius;
|
|
margin: 16px 0;
|
|
|
|
.brand {
|
|
svg { fill: $top-bar-text-color }
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active { background: $tab-bg-hover-color }
|
|
}
|
|
|
|
.nav-link,
|
|
.nav-link.optional {
|
|
color: $top-bar-text-color;
|
|
|
|
&:hover {
|
|
color: $top-bar-text-color;
|
|
background: $tab-bg-hover-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.nav-button {
|
|
background: transparent;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
|
|
&:hover { background: $tab-bg-hover-color }
|
|
}
|
|
|
|
.detailed-status__meta { margin-top: 16px }
|
|
}
|
|
|
|
.detailed-status { padding: 16px }
|
|
|
|
.footer {
|
|
padding-top: 32px;
|
|
padding-bottom: 64px;
|
|
color: $ui-text-color;
|
|
|
|
h4 { color: $ui-text-color }
|
|
|
|
ul a { color: $secondary-text-color }
|
|
|
|
.grid .column-2 h4 a { color: $ui-text-color }
|
|
|
|
.brand {
|
|
svg { fill: $icon-color }
|
|
|
|
&:hover svg { fill: $icon-hover-color }
|
|
}
|
|
}
|
|
|
|
.account__section-headline {
|
|
@include shadow-1dp;
|
|
border-radius: $card-radius $card-radius 0 0;
|
|
}
|
|
|
|
.public-account-header {
|
|
@include shadow-2dp;
|
|
margin-bottom: 16px;
|
|
|
|
&__image {
|
|
border-radius: $card-radius $card-radius 0 0;
|
|
background: $card-bg-color;
|
|
|
|
&::after { box-shadow: none }
|
|
|
|
img { border-radius: $card-radius $card-radius 0 0 }
|
|
}
|
|
|
|
&__bar {
|
|
background: linear-gradient(0deg, transparent, transparent 60px, rgba(0, 0, 0, 0.5) 60px, rgba(0, 0, 0, 0.2) 80%, transparent);
|
|
|
|
&::before {
|
|
background: $tab-bg-color;
|
|
border-radius: 0 0 $card-radius $card-radius;
|
|
}
|
|
|
|
.avatar img {
|
|
border-radius: $avatar-radius;
|
|
border: 2px solid $border-color;
|
|
background: $card-bg-color;
|
|
}
|
|
}
|
|
|
|
&__tabs {
|
|
margin-left: 24px;
|
|
|
|
&__name {
|
|
h1 {
|
|
color: $primary-text-on-shadow-color;
|
|
text-shadow: none;
|
|
|
|
small { color: $primary-text-on-shadow-color }
|
|
}
|
|
}
|
|
|
|
&__tabs {
|
|
.counter {
|
|
color: $secondary-text-color;
|
|
padding: 8px 16px;
|
|
border-right: none;
|
|
|
|
&.active {
|
|
&::after { border-bottom: 4px solid $tab-item-active-color }
|
|
}
|
|
|
|
&::after {
|
|
border-bottom: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
&:hover { background: $tab-bg-hover-color }
|
|
|
|
.counter-number {
|
|
color: $ui-text-color;
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__extra {
|
|
.public-account-bio .account__header__fields { border-top: 1px solid $border-color }
|
|
|
|
&__links {
|
|
color: $ui-text-color;
|
|
|
|
a {
|
|
color: $ui-text-color;
|
|
padding: 16px;
|
|
|
|
strong { color: $primary-text-color }
|
|
}
|
|
}
|
|
}
|
|
|
|
&--no-bar .public-account-header {
|
|
&__image,
|
|
&__image img { border-radius: $card-radius }
|
|
}
|
|
}
|
|
|
|
.public-account-bio {
|
|
@include shadow-2dp;
|
|
background: $card-bg-color;
|
|
border-radius: $card-radius;
|
|
margin-bottom: 16px;
|
|
|
|
&__extra,
|
|
.roles {
|
|
padding: 16px;
|
|
color: $info-text-color;
|
|
}
|
|
|
|
.account__header {
|
|
&__content {
|
|
padding: 16px 16px 0;
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
&__fields {
|
|
a,
|
|
.verified a { color: $primary-text-color }
|
|
|
|
dl:first-child .verified { border-radius: 0 $card-radius 0 0 }
|
|
}
|
|
}
|
|
}
|
|
|
|
.directory__list { grid-gap: 16px }
|
|
|
|
.grid { grid-gap: 16px }
|
|
}
|
|
|
|
.account-header .name { color: $ui-text-color }
|
|
|
|
.brand__tagline { color: $ui-text-color }
|
|
|
|
.logo-container h1 svg { fill: $ui-text-color }
|
|
|
|
.grid-4 { grid-gap: 16px } |