-
-
-
-
+
diff --git a/app/styles/about.scss b/app/styles/about.scss
index 7e6c3d21b..a111afa5b 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -3,6 +3,688 @@ $fluid-breakpoint: $maximum-width + 20px;
$column-breakpoint: 700px;
$small-breakpoint: 960px;
+.public-layout {
+ .container {
+ width: 100%;
+ max-width: 960px;
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ padding: 0;
+ }
+ }
+
+ .content {
+ display: block;
+ margin: 40px 0;
+ background: #fff;
+ border-radius: 6px;
+
+ @media screen and (max-width: 767px) {
+ margin-top: 0;
+ }
+ }
+
+ .header {
+ height: 80px;
+ display: flex;
+ align-items: stretch;
+ justify-content: center;
+ flex-wrap: nowrap;
+ padding: 14px 0;
+ box-sizing: border-box;
+
+ @media screen and (max-width: 1024px) {
+ padding: 14px 20px;
+ }
+
+ .header-container {
+ display: flex;
+ width: 960px;
+ align-items: stretch;
+ justify-content: center;
+ flex-wrap: nowrap;
+
+ & > div {
+ flex: 1 1 33.3%;
+ min-height: 1px;
+ }
+ }
+
+ .nav-left {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ flex-wrap: nowrap;
+ }
+
+ .nav-center {
+ display: flex;
+ align-items: stretch;
+ justify-content: center;
+ flex-wrap: nowrap;
+ }
+
+ .nav-right {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ flex-wrap: nowrap;
+
+ .simple_form.new_user {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .fields-group {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 0;
+ position: relative;
+
+ p.hint.subtle-hint {
+ position: absolute;
+ top: 30px;
+ left: 160px;
+ border-radius: 4px;
+ background: #fff;
+ overflow: hidden;
+
+ a {
+ padding: 4px;
+ background-color: var(--brand-color-med);
+ }
+ }
+
+ .input {
+ margin-bottom: 0;
+ margin-right: 10px;
+
+ input {
+ min-width: 150px;
+ font-size: 14px;
+ }
+ }
+ }
+
+ .actions {
+ display: flex;
+ margin-top: 0;
+
+ .button {
+ margin-bottom: 0 !important;
+ line-height: 38px !important;
+ border: 1px solid #333 !important;
+ height: 38px !important;
+ box-sizing: border-box !important;
+ padding: 0 18px !important;
+ text-transform: none !important;
+ }
+ }
+ }
+ }
+
+ .brand {
+ display: block;
+
+ img {
+ display: block;
+ height: 30px;
+ width: auto;
+ position: relative;
+ bottom: -2px;
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ height: 20px;
+ }
+ }
+ }
+
+ .nav-link {
+ display: flex;
+ align-items: center;
+ padding: 12px 22px;
+ font-size: 14px;
+ font-weight: 600;
+ text-decoration: none;
+ color: var(--primary-text-color);
+ white-space: nowrap;
+ text-align: center;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ color: var(--primary-text-color);
+ }
+
+ &--hollow {
+ background-color: var(--brand-color-med);
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: var(--brand-color);
+ }
+
+ }
+
+ @media screen and (max-width: 550px) {
+ &.optional {
+ display: none;
+ }
+ }
+ }
+
+ .nav-button {
+ background: var(--brand-color);
+ color: #fff;
+ margin: 8px;
+ margin-left: 0;
+ border-radius: 4px;
+
+ &:hover,
+ &:focus,
+ &:active {
+ opacity: 0.9;
+ color: #fff;
+ text-decoration: none;
+ }
+ }
+ }
+
+ $no-columns-breakpoint: 600px;
+
+ .grid {
+ display: grid;
+ grid-gap: 10px;
+ grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr);
+ grid-auto-columns: 25%;
+ grid-auto-rows: max-content;
+
+ .column-0 {
+ grid-row: 1;
+ grid-column: 1;
+ }
+
+ .column-1 {
+ grid-row: 1;
+ grid-column: 2;
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ grid-template-columns: 100%;
+ grid-gap: 0;
+
+ .column-1 {
+ display: none;
+ }
+ }
+ }
+
+ .public-account-header {
+ overflow: hidden;
+ margin-bottom: 10px;
+ box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+
+ &.inactive {
+ opacity: 0.5;
+
+ .public-account-header__image,
+ .avatar {
+ filter: grayscale(100%);
+ }
+
+ .logo-button {
+ background-color: var(--primary-text-color-faint);
+ }
+ }
+
+ &__image {
+ border-radius: 4px 4px 0 0;
+ overflow: hidden;
+ height: 300px;
+ position: relative;
+ background: darken($ui-base-color, 12%);
+
+ &::after {
+ content: "";
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15);
+ top: 0;
+ left: 0;
+ }
+
+ img {
+ object-fit: cover;
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ border-radius: 4px 4px 0 0;
+ }
+
+ @media screen and (max-width: 600px) {
+ height: 200px;
+ }
+ }
+
+ &--no-bar {
+ margin-bottom: 0;
+
+ .public-account-header__image,
+ .public-account-header__image img {
+ border-radius: 4px;
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-radius: 0;
+ }
+ }
+ }
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ margin-bottom: 0;
+ box-shadow: none;
+
+ &__image::after {
+ display: none;
+ }
+
+ &__image,
+ &__image img {
+ border-radius: 0;
+ }
+ }
+
+ &__bar {
+ position: relative;
+ margin-top: -80px;
+ display: flex;
+ justify-content: flex-start;
+
+ &::before {
+ content: "";
+ display: block;
+ background: var(--brand-color-faint);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 60px;
+ border-radius: 0 0 4px 4px;
+ z-index: -1;
+ }
+
+ .avatar {
+ display: block;
+ width: 120px;
+ height: 120px;
+ padding-left: 20px - 4px;
+ flex: 0 0 auto;
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ border-radius: 50%;
+ border: 4px solid var(--brand-color-faint);
+ background: darken($ui-base-color, 8%);
+ }
+ }
+
+ @media screen and (max-width: 600px) {
+ margin-top: 0;
+ background: var(--brand-color-faint);
+ border-radius: 0 0 4px 4px;
+ padding: 5px;
+
+ &::before {
+ display: none;
+ }
+
+ .avatar {
+ width: 48px;
+ height: 48px;
+ padding: 7px 0;
+ padding-left: 10px;
+
+ img {
+ border: 0;
+ border-radius: 4px;
+ }
+
+ @media screen and (max-width: 360px) {
+ display: none;
+ }
+ }
+ }
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-radius: 0;
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ flex-wrap: wrap;
+ }
+ }
+
+ &__tabs {
+ flex: 1 1 auto;
+ margin-left: 20px;
+
+ &__name {
+ padding-top: 20px;
+ padding-bottom: 8px;
+
+ h1 {
+ font-size: 20px;
+ line-height: 18px * 1.5;
+ color: var(--primary-text-color);
+ font-weight: 500;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ text-shadow: 1px 1px 1px $base-shadow-color;
+
+ small {
+ display: block;
+ font-size: 14px;
+ color: var(--primary-text-color);
+ font-weight: 400;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+
+ @media screen and (max-width: 600px) {
+ margin-left: 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ &__name {
+ padding-top: 0;
+ padding-bottom: 0;
+
+ h1 {
+ font-size: 16px;
+ line-height: 24px;
+ text-shadow: none;
+
+ small {
+ color: var(--primary-text-color-faint);
+ }
+ }
+ }
+ }
+
+ &__tabs {
+ display: flex;
+ justify-content: flex-start;
+ align-items: stretch;
+ height: 58px;
+
+ .details-counters {
+ display: flex;
+ flex-direction: row;
+ min-width: 300px;
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ .details-counters {
+ display: none;
+ }
+ }
+
+ .counter {
+ width: 33.3%;
+ box-sizing: border-box;
+ flex: 0 0 auto;
+ color: var(--primary-text-color-faint);
+ padding: 10px;
+ border-right: 1px solid var(--brand-color-faint);
+ cursor: default;
+ text-align: center;
+ position: relative;
+
+ a {
+ display: block;
+ }
+
+ &:last-child {
+ border-right: 0;
+ }
+
+ &::after {
+ display: block;
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ border-bottom: 4px solid $ui-primary-color;
+ opacity: 0.5;
+ transition: all 400ms ease;
+ }
+
+ &.active {
+ &::after {
+ border-bottom: 4px solid $highlight-text-color;
+ opacity: 1;
+ }
+
+ &.inactive::after {
+ border-bottom-color: var(--primary-text-color-faint);
+ }
+ }
+
+ &:hover {
+ &::after {
+ opacity: 1;
+ transition-duration: 100ms;
+ }
+ }
+
+ a {
+ text-decoration: none;
+ color: inherit;
+ }
+
+ .counter-label {
+ font-size: 12px;
+ display: block;
+ }
+
+ .counter-number {
+ font-weight: 500;
+ font-size: 18px;
+ margin-bottom: 5px;
+ color: var(--primary-text-color);
+ font-family: $font-display, sans-serif;
+ }
+ }
+
+ .spacer {
+ flex: 1 1 auto;
+ height: 1px;
+ }
+
+ &__buttons {
+ padding: 7px 8px;
+ }
+ }
+ }
+
+ &__extra {
+ display: none;
+ margin-top: 4px;
+
+ .public-account-bio {
+ border-radius: 0;
+ box-shadow: none;
+ background: transparent;
+ margin: 0 -5px;
+
+ .account__header__fields {
+ border-top: 1px solid var(--brand-color-med);
+ }
+
+ .roles {
+ display: none;
+ }
+ }
+
+ &__links {
+ margin-top: -15px;
+ font-size: 14px;
+ color: var(--primary-text-color-faint);
+
+ a {
+ display: inline-block;
+ color: var(--primary-text-color-faint);
+ text-decoration: none;
+ padding: 15px;
+ font-weight: 500;
+
+ strong {
+ font-weight: 700;
+ color: var(--primary-text-color);
+ }
+ }
+ }
+
+ @media screen and (max-width: $no-columns-breakpoint) {
+ display: block;
+ flex: 100%;
+ }
+ }
+ }
+
+ .account__section-headline {
+ border-radius: 4px 4px 0 0;
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ border-radius: 0;
+ }
+ }
+
+ .detailed-status__meta {
+ margin-top: 25px;
+ }
+
+ .public-account-bio {
+ background: var(--brand-color-med);
+ box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+ border-radius: 4px;
+ overflow: hidden;
+ margin-bottom: 10px;
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ box-shadow: none;
+ margin-bottom: 0;
+ border-radius: 0;
+ }
+
+ .account__header__fields {
+ margin: 0;
+ border-top: 0;
+
+ a {
+ color: lighten($ui-highlight-color, 8%);
+ }
+
+ dl:first-child .verified {
+ border-radius: 0 4px 0 0;
+ }
+
+ .verified a {
+ color: $valid-value-color;
+ }
+ }
+
+ .account__header__content {
+ padding: 20px;
+ padding-bottom: 0;
+ color: var(--primary-text-color);
+ }
+
+ &__extra,
+ .roles {
+ padding: 20px;
+ font-size: 14px;
+ color: var(--primary-text-color-faint);
+ }
+
+ .roles {
+ padding-bottom: 0;
+ }
+ }
+
+ .static-icon-button {
+ color: $action-button-color;
+ font-size: 18px;
+
+ & > span {
+ font-size: 14px;
+ font-weight: 500;
+ }
+ }
+
+ .card-grid {
+ display: flex;
+ flex-wrap: wrap;
+ min-width: 100%;
+ margin: 0 -5px;
+
+ & > div {
+ box-sizing: border-box;
+ flex: 1 0 auto;
+ width: 300px;
+ padding: 0 5px;
+ margin-bottom: 10px;
+ max-width: 33.333%;
+
+ @media screen and (max-width: 900px) {
+ max-width: 50%;
+ }
+
+ @media screen and (max-width: 600px) {
+ max-width: 100%;
+ }
+ }
+
+ @media screen and (max-width: $no-gap-breakpoint) {
+ margin: 0;
+ border-top: 1px solid var(--brand-color-med);
+
+ & > div {
+ width: 100%;
+ padding: 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid var(--brand-color-med);
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ .card__bar {
+ background: var(--brand-color-med);
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: var(--brand-color-faint);
+ }
+ }
+ }
+ }
+ }
+}
+
.container {
box-sizing: border-box;
max-width: $maximum-width;
@@ -661,7 +1343,6 @@ $small-breakpoint: 960px;
.public-layout {
position: relative;
background-color: var(--brand-color);
- background-image: url('data:image/svg+xml;utf8,
');
background-size: 100% auto;
background-repeat: no-repeat;
background-position: 0 -106px;
@@ -670,7 +1351,9 @@ $small-breakpoint: 960px;
flex-direction: column;
@media screen and (max-width: 767px) {
- background-image: none;
+ .wave {
+ display: none;
+ }
.brand__tagline,
.brand h1 {
@@ -684,7 +1367,7 @@ $small-breakpoint: 960px;
&:hover,
&:focus,
&:active {
- color: $gab-background-base-light;
+ opacity: 0.9;
}
}
@@ -693,12 +1376,13 @@ $small-breakpoint: 960px;
}
.nav-button {
- background: darken($gab-brand-default, 10%);
+ background: var(--accent-color);
+ color: #fff;
&:hover,
&:focus,
&:active {
- background: darken($gab-brand-default, 15%);
+ opacity: 0.9;
}
}
}
@@ -870,7 +1554,7 @@ $small-breakpoint: 960px;
}
.simple_form p.lead {
- color: var(--primary-text-color-faint);
+ color: var(--primary-text-color);
font-size: 15px;
line-height: 20px;
font-weight: 400;
@@ -1016,3 +1700,23 @@ $small-breakpoint: 960px;
.about-page {
background: var(--brand-color-faint);
}
+
+.public-layout__top {
+ position: relative;
+
+ .header,
+ .container {
+ position: relative;
+ z-index: 1;
+ }
+}
+
+.public-layout__top .wave {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
diff --git a/app/styles/containers.scss b/app/styles/containers.scss
index 135f06635..f2fa0fc4a 100644
--- a/app/styles/containers.scss
+++ b/app/styles/containers.scss
@@ -189,694 +189,3 @@
}
}
}
-
-.public-layout {
- .container {
- width: 100%;
- max-width: 960px;
-
- @media screen and (max-width: $no-gap-breakpoint) {
- padding: 0;
- }
- }
-
- .content {
- display: block;
- margin: 40px 0;
- background: #fff;
- border-radius: 6px;
-
- @media screen and (max-width: 767px) {
- margin-top: 0;
- }
- }
-
- .header {
- height: 80px;
- display: flex;
- align-items: stretch;
- justify-content: center;
- flex-wrap: nowrap;
- padding: 14px 0;
- box-sizing: border-box;
-
- @media screen and (max-width: 1024px) {
- padding: 14px 20px;
- }
-
- .header-container {
- display: flex;
- width: 960px;
- align-items: stretch;
- justify-content: center;
- flex-wrap: nowrap;
-
- & > div {
- flex: 1 1 33.3%;
- min-height: 1px;
- }
- }
-
- .nav-left {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- flex-wrap: nowrap;
- }
-
- .nav-center {
- display: flex;
- align-items: stretch;
- justify-content: center;
- flex-wrap: nowrap;
- }
-
- .nav-right {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- flex-wrap: nowrap;
-
- .simple_form.new_user {
- display: flex;
- flex-direction: row;
- align-items: center;
-
- .fields-group {
- display: flex;
- flex-direction: row;
- margin-bottom: 0;
- position: relative;
-
- p.hint.subtle-hint {
- position: absolute;
- top: 30px;
- left: 160px;
- border-radius: 4px;
- background: #fff;
- overflow: hidden;
-
- a {
- padding: 4px;
- background-color: var(--brand-color-med);
- }
- }
-
- .input {
- margin-bottom: 0;
- margin-right: 10px;
-
- input {
- min-width: 150px;
- font-size: 14px;
- }
- }
- }
-
- .actions {
- display: flex;
- margin-top: 0;
-
- .button {
- margin-bottom: 0 !important;
- line-height: 38px !important;
- border: 1px solid #333 !important;
- height: 38px !important;
- box-sizing: border-box !important;
- padding: 0 18px !important;
- text-transform: none !important;
- }
- }
- }
- }
-
- .brand {
- display: block;
-
- img {
- display: block;
- height: 30px;
- width: auto;
- position: relative;
- bottom: -2px;
-
- @media screen and (max-width: $no-gap-breakpoint) {
- height: 20px;
- }
- }
- }
-
- .nav-link {
- display: flex;
- align-items: center;
- padding: 12px 22px;
- font-size: 14px;
- font-weight: 600;
- text-decoration: none;
- color: var(--primary-text-color);
- white-space: nowrap;
- text-align: center;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- color: var(--primary-text-color);
- }
-
- &--hollow {
- background-color: var(--brand-color-med);
-
- &:hover,
- &:focus,
- &:active {
- color: var(--brand-color);
- }
-
- }
-
- @media screen and (max-width: 550px) {
- &.optional {
- display: none;
- }
- }
- }
-
- .nav-button {
- background: var(--brand-color);
- color: #fff;
- margin: 8px;
- margin-left: 0;
- border-radius: 4px;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- background: darken($gab-brand-default, 10%);
- }
-
- &--hollow {
- background: transparent;
-
- &:hover,
- &:focus,
- &:active {
- background: rgba($gab-brand-default, 0.2);
- }
- }
- }
- }
-
- $no-columns-breakpoint: 600px;
-
- .grid {
- display: grid;
- grid-gap: 10px;
- grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr);
- grid-auto-columns: 25%;
- grid-auto-rows: max-content;
-
- .column-0 {
- grid-row: 1;
- grid-column: 1;
- }
-
- .column-1 {
- grid-row: 1;
- grid-column: 2;
- }
-
- @media screen and (max-width: $no-columns-breakpoint) {
- grid-template-columns: 100%;
- grid-gap: 0;
-
- .column-1 {
- display: none;
- }
- }
- }
-
- .public-account-header {
- overflow: hidden;
- margin-bottom: 10px;
- box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-
- &.inactive {
- opacity: 0.5;
-
- .public-account-header__image,
- .avatar {
- filter: grayscale(100%);
- }
-
- .logo-button {
- background-color: var(--primary-text-color-faint);
- }
- }
-
- &__image {
- border-radius: 4px 4px 0 0;
- overflow: hidden;
- height: 300px;
- position: relative;
- background: darken($ui-base-color, 12%);
-
- &::after {
- content: "";
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15);
- top: 0;
- left: 0;
- }
-
- img {
- object-fit: cover;
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- border-radius: 4px 4px 0 0;
- }
-
- @media screen and (max-width: 600px) {
- height: 200px;
- }
- }
-
- &--no-bar {
- margin-bottom: 0;
-
- .public-account-header__image,
- .public-account-header__image img {
- border-radius: 4px;
-
- @media screen and (max-width: $no-gap-breakpoint) {
- border-radius: 0;
- }
- }
- }
-
- @media screen and (max-width: $no-gap-breakpoint) {
- margin-bottom: 0;
- box-shadow: none;
-
- &__image::after {
- display: none;
- }
-
- &__image,
- &__image img {
- border-radius: 0;
- }
- }
-
- &__bar {
- position: relative;
- margin-top: -80px;
- display: flex;
- justify-content: flex-start;
-
- &::before {
- content: "";
- display: block;
- background: var(--brand-color-faint);
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- height: 60px;
- border-radius: 0 0 4px 4px;
- z-index: -1;
- }
-
- .avatar {
- display: block;
- width: 120px;
- height: 120px;
- padding-left: 20px - 4px;
- flex: 0 0 auto;
-
- img {
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- border-radius: 50%;
- border: 4px solid var(--brand-color-faint);
- background: darken($ui-base-color, 8%);
- }
- }
-
- @media screen and (max-width: 600px) {
- margin-top: 0;
- background: var(--brand-color-faint);
- border-radius: 0 0 4px 4px;
- padding: 5px;
-
- &::before {
- display: none;
- }
-
- .avatar {
- width: 48px;
- height: 48px;
- padding: 7px 0;
- padding-left: 10px;
-
- img {
- border: 0;
- border-radius: 4px;
- }
-
- @media screen and (max-width: 360px) {
- display: none;
- }
- }
- }
-
- @media screen and (max-width: $no-gap-breakpoint) {
- border-radius: 0;
- }
-
- @media screen and (max-width: $no-columns-breakpoint) {
- flex-wrap: wrap;
- }
- }
-
- &__tabs {
- flex: 1 1 auto;
- margin-left: 20px;
-
- &__name {
- padding-top: 20px;
- padding-bottom: 8px;
-
- h1 {
- font-size: 20px;
- line-height: 18px * 1.5;
- color: var(--primary-text-color);
- font-weight: 500;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- text-shadow: 1px 1px 1px $base-shadow-color;
-
- small {
- display: block;
- font-size: 14px;
- color: var(--primary-text-color);
- font-weight: 400;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
-
- @media screen and (max-width: 600px) {
- margin-left: 15px;
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- &__name {
- padding-top: 0;
- padding-bottom: 0;
-
- h1 {
- font-size: 16px;
- line-height: 24px;
- text-shadow: none;
-
- small {
- color: var(--primary-text-color-faint);
- }
- }
- }
- }
-
- &__tabs {
- display: flex;
- justify-content: flex-start;
- align-items: stretch;
- height: 58px;
-
- .details-counters {
- display: flex;
- flex-direction: row;
- min-width: 300px;
- }
-
- @media screen and (max-width: $no-columns-breakpoint) {
- .details-counters {
- display: none;
- }
- }
-
- .counter {
- width: 33.3%;
- box-sizing: border-box;
- flex: 0 0 auto;
- color: var(--primary-text-color-faint);
- padding: 10px;
- border-right: 1px solid var(--brand-color-faint);
- cursor: default;
- text-align: center;
- position: relative;
-
- a {
- display: block;
- }
-
- &:last-child {
- border-right: 0;
- }
-
- &::after {
- display: block;
- content: "";
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- border-bottom: 4px solid $ui-primary-color;
- opacity: 0.5;
- transition: all 400ms ease;
- }
-
- &.active {
- &::after {
- border-bottom: 4px solid $highlight-text-color;
- opacity: 1;
- }
-
- &.inactive::after {
- border-bottom-color: var(--primary-text-color-faint);
- }
- }
-
- &:hover {
- &::after {
- opacity: 1;
- transition-duration: 100ms;
- }
- }
-
- a {
- text-decoration: none;
- color: inherit;
- }
-
- .counter-label {
- font-size: 12px;
- display: block;
- }
-
- .counter-number {
- font-weight: 500;
- font-size: 18px;
- margin-bottom: 5px;
- color: var(--primary-text-color);
- font-family: $font-display, sans-serif;
- }
- }
-
- .spacer {
- flex: 1 1 auto;
- height: 1px;
- }
-
- &__buttons {
- padding: 7px 8px;
- }
- }
- }
-
- &__extra {
- display: none;
- margin-top: 4px;
-
- .public-account-bio {
- border-radius: 0;
- box-shadow: none;
- background: transparent;
- margin: 0 -5px;
-
- .account__header__fields {
- border-top: 1px solid var(--brand-color-med);
- }
-
- .roles {
- display: none;
- }
- }
-
- &__links {
- margin-top: -15px;
- font-size: 14px;
- color: var(--primary-text-color-faint);
-
- a {
- display: inline-block;
- color: var(--primary-text-color-faint);
- text-decoration: none;
- padding: 15px;
- font-weight: 500;
-
- strong {
- font-weight: 700;
- color: var(--primary-text-color);
- }
- }
- }
-
- @media screen and (max-width: $no-columns-breakpoint) {
- display: block;
- flex: 100%;
- }
- }
- }
-
- .account__section-headline {
- border-radius: 4px 4px 0 0;
-
- @media screen and (max-width: $no-gap-breakpoint) {
- border-radius: 0;
- }
- }
-
- .detailed-status__meta {
- margin-top: 25px;
- }
-
- .public-account-bio {
- background: var(--brand-color-med);
- box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
- border-radius: 4px;
- overflow: hidden;
- margin-bottom: 10px;
-
- @media screen and (max-width: $no-gap-breakpoint) {
- box-shadow: none;
- margin-bottom: 0;
- border-radius: 0;
- }
-
- .account__header__fields {
- margin: 0;
- border-top: 0;
-
- a {
- color: lighten($ui-highlight-color, 8%);
- }
-
- dl:first-child .verified {
- border-radius: 0 4px 0 0;
- }
-
- .verified a {
- color: $valid-value-color;
- }
- }
-
- .account__header__content {
- padding: 20px;
- padding-bottom: 0;
- color: var(--primary-text-color);
- }
-
- &__extra,
- .roles {
- padding: 20px;
- font-size: 14px;
- color: var(--primary-text-color-faint);
- }
-
- .roles {
- padding-bottom: 0;
- }
- }
-
- .static-icon-button {
- color: $action-button-color;
- font-size: 18px;
-
- & > span {
- font-size: 14px;
- font-weight: 500;
- }
- }
-
- .card-grid {
- display: flex;
- flex-wrap: wrap;
- min-width: 100%;
- margin: 0 -5px;
-
- & > div {
- box-sizing: border-box;
- flex: 1 0 auto;
- width: 300px;
- padding: 0 5px;
- margin-bottom: 10px;
- max-width: 33.333%;
-
- @media screen and (max-width: 900px) {
- max-width: 50%;
- }
-
- @media screen and (max-width: 600px) {
- max-width: 100%;
- }
- }
-
- @media screen and (max-width: $no-gap-breakpoint) {
- margin: 0;
- border-top: 1px solid var(--brand-color-med);
-
- & > div {
- width: 100%;
- padding: 0;
- margin-bottom: 0;
- border-bottom: 1px solid var(--brand-color-med);
-
- &:last-child {
- border-bottom: 0;
- }
-
- .card__bar {
- background: var(--brand-color-med);
-
- &:hover,
- &:active,
- &:focus {
- background: var(--brand-color-faint);
- }
- }
- }
- }
- }
-}
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 2f875f209..db2067516 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -319,7 +319,7 @@ code {
font-family: inherit;
resize: vertical;
background: var(--foreground-color);
- border: 1px solid var(--brand-color-faint);
+ border: 1px solid var(--highlight-text-color);
border-radius: 4px;
padding: 10px;
transition: 0.2s;
@@ -338,7 +338,7 @@ code {
&:active,
&:focus {
- border-color: var(--highlight-text-color);
+ border-color: var(--brand-color-hicontrast);
}
}