Use --brand-color-faint in more spots
This commit is contained in:
parent
0491183877
commit
be3065405c
|
@ -52,13 +52,13 @@ body {
|
|||
&:focus,
|
||||
&:active,
|
||||
&.selected {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-bar {
|
||||
border-color: lighten($ui-base-color, 4%);
|
||||
border-color: var(--brand-color-faint);
|
||||
|
||||
&:first-child {
|
||||
background: darken($ui-base-color, 6%);
|
||||
|
@ -72,11 +72,11 @@ body {
|
|||
|
||||
// Change the background colors of statuses
|
||||
.focusable:focus {
|
||||
background: $ui-base-color;
|
||||
background: var(--brand-color-faint);
|
||||
}
|
||||
|
||||
.status.status-direct {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
}
|
||||
|
||||
.focusable:focus .status.status-direct {
|
||||
|
|
|
@ -235,7 +235,7 @@ $small-breakpoint: 960px;
|
|||
color: $darker-text-color;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid var(--brand-color-faint);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
|
|
|
@ -72,7 +72,7 @@ body {
|
|||
}
|
||||
|
||||
&.embed {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
|
|
|
@ -502,7 +502,7 @@
|
|||
.focusable {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
|
||||
.status.status-direct {
|
||||
background: lighten($ui-base-color, 12%);
|
||||
|
@ -1768,7 +1768,7 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.column-back-button {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
color: var(--highlight-text-color);
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
|
@ -1787,7 +1787,7 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.column-header__back-button {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
border: 0;
|
||||
font-family: inherit;
|
||||
color: var(--highlight-text-color);
|
||||
|
@ -2261,7 +2261,7 @@ a.status-card {
|
|||
}
|
||||
|
||||
.status-card.compact {
|
||||
border-color: lighten($ui-base-color, 4%);
|
||||
border-color: var(--brand-color-faint);
|
||||
|
||||
&.interactive {
|
||||
border: 0;
|
||||
|
@ -2282,7 +2282,7 @@ a.status-card {
|
|||
}
|
||||
|
||||
a.status-card.compact:hover {
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
background-color: var(--brand-color-faint);
|
||||
}
|
||||
|
||||
.status-card__image-image {
|
||||
|
@ -2760,7 +2760,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.account--panel {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
display: flex;
|
||||
|
@ -3518,7 +3518,7 @@ a.status-card.compact:hover {
|
|||
border-radius: 4px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: lighten($ui-base-color, 8%);
|
||||
background-color: var(--brand-color-faint);
|
||||
}
|
||||
|
||||
.media-gallery__item {
|
||||
|
@ -4258,7 +4258,7 @@ noscript {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
@ -4282,7 +4282,7 @@ noscript {
|
|||
.account__moved-note {
|
||||
padding: 14px 10px;
|
||||
padding-bottom: 16px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
||||
|
@ -4322,7 +4322,7 @@ noscript {
|
|||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
|
||||
label {
|
||||
flex: 1 1 auto;
|
||||
|
|
|
@ -36,14 +36,14 @@
|
|||
min-height: 74px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
@media (min-width: 895px) {height: 74px;}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 5px solid lighten($ui-base-color, 4%);
|
||||
border: 5px solid var(--brand-color-faint);
|
||||
left: 0;
|
||||
top: -90px;
|
||||
border-radius: 50%;
|
||||
|
@ -156,7 +156,7 @@
|
|||
@media screen and (max-width: 895px) {
|
||||
.account-mobile-container {
|
||||
display: block;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
padding: 10px 10px 0;
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.detailed-status {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
padding: 14px 10px;
|
||||
|
||||
&--flex {
|
||||
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
.detailed-status__action-bar {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
display: flex;
|
||||
|
|
|
@ -499,7 +499,7 @@
|
|||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
@ -522,14 +522,14 @@
|
|||
height: 100%;
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
border: 4px solid lighten($ui-base-color, 4%);
|
||||
border: 4px solid var(--brand-color-faint);
|
||||
background: darken($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
margin-top: 0;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 5px;
|
||||
|
||||
|
@ -638,7 +638,7 @@
|
|||
flex: 0 0 auto;
|
||||
color: $darker-text-color;
|
||||
padding: 10px;
|
||||
border-right: 1px solid lighten($ui-base-color, 4%);
|
||||
border-right: 1px solid var(--brand-color-faint);
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
@ -869,7 +869,7 @@
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
& > div,
|
||||
& > a {
|
||||
padding: 20px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
|
@ -583,7 +583,7 @@ code {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -251,7 +251,7 @@
|
|||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
margin-top: 0;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--brand-color-faint);
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
|
|
Loading…
Reference in New Issue