moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use --brand-color-faint in more spots

This commit is contained in:
Alex Gleason 2020-05-30 21:58:18 -05:00
parent 0491183877
commit be3065405c
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
11 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/styles/soapbox-light/diff.scss
View File

@ -52,13 +52,13 @@ body {
&:focus, &:focus,
&:active, &:active,
&.selected { &.selected {
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
} }
} }
} }
.emoji-mart-bar { .emoji-mart-bar {
border-color: lighten($ui-base-color, 4%); border-color: var(--brand-color-faint);
&:first-child { &:first-child {
background: darken($ui-base-color, 6%); background: darken($ui-base-color, 6%);
@ -72,11 +72,11 @@ body {
// Change the background colors of statuses // Change the background colors of statuses
.focusable:focus { .focusable:focus {
background: $ui-base-color; background: var(--brand-color-faint);
} }
.status.status-direct { .status.status-direct {
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
} }
.focusable:focus .status.status-direct { .focusable:focus .status.status-direct {

2
app/styles/soapbox/about.scss
View File

@ -235,7 +235,7 @@ $small-breakpoint: 960px;
color: $darker-text-color; color: $darker-text-color;
padding-bottom: 5px; padding-bottom: 5px;
margin-bottom: 15px; margin-bottom: 15px;
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid var(--brand-color-faint);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

2
app/styles/soapbox/accounts.scss
View File

@ -48,7 +48,7 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {

2
app/styles/soapbox/basics.scss
View File

@ -72,7 +72,7 @@ body {
} }
&.embed { &.embed {
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
margin: 0; margin: 0;
padding-bottom: 0; padding-bottom: 0;

20
app/styles/soapbox/components.scss
View File

@ -502,7 +502,7 @@
.focusable { .focusable {
&:focus { &:focus {
outline: 0; outline: 0;
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
.status.status-direct { .status.status-direct {
background: lighten($ui-base-color, 12%); background: lighten($ui-base-color, 12%);
@ -1768,7 +1768,7 @@ a.account__display-name {
} }
.column-back-button { .column-back-button {
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
color: var(--highlight-text-color); color: var(--highlight-text-color);
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;
@ -1787,7 +1787,7 @@ a.account__display-name {
} }
.column-header__back-button { .column-header__back-button {
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
border: 0; border: 0;
font-family: inherit; font-family: inherit;
color: var(--highlight-text-color); color: var(--highlight-text-color);
@ -2261,7 +2261,7 @@ a.status-card {
} }
.status-card.compact { .status-card.compact {
border-color: lighten($ui-base-color, 4%); border-color: var(--brand-color-faint);
&.interactive { &.interactive {
border: 0; border: 0;
@ -2282,7 +2282,7 @@ a.status-card {
} }
a.status-card.compact:hover { a.status-card.compact:hover {
background-color: lighten($ui-base-color, 4%); background-color: var(--brand-color-faint);
} }
.status-card__image-image { .status-card__image-image {
@ -2760,7 +2760,7 @@ a.status-card.compact:hover {
} }
.account--panel { .account--panel {
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
display: flex; display: flex;
@ -3518,7 +3518,7 @@ a.status-card.compact:hover {
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
width: 100%; width: 100%;
background-color: lighten($ui-base-color, 8%); background-color: var(--brand-color-faint);
} }
.media-gallery__item { .media-gallery__item {
@ -4258,7 +4258,7 @@ noscript {
} }
&:focus { &:focus {
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
@ -4282,7 +4282,7 @@ noscript {
.account__moved-note { .account__moved-note {
padding: 14px 10px; padding: 14px 10px;
padding-bottom: 16px; padding-bottom: 16px;
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
@ -4322,7 +4322,7 @@ noscript {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
label { label {
flex: 1 1 auto; flex: 1 1 auto;

6
app/styles/soapbox/components/account-header.scss
View File

@ -36,14 +36,14 @@
min-height: 74px; min-height: 74px;
width: 100%; width: 100%;
position: relative; position: relative;
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
@media (min-width: 895px) {height: 74px;} @media (min-width: 895px) {height: 74px;}
} }
&__avatar { &__avatar {
display: block; display: block;
position: absolute; position: absolute;
border: 5px solid lighten($ui-base-color, 4%); border: 5px solid var(--brand-color-faint);
left: 0; left: 0;
top: -90px; top: -90px;
border-radius: 50%; border-radius: 50%;
@ -156,7 +156,7 @@
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
.account-mobile-container { .account-mobile-container {
display: block; display: block;
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
margin-top: 10px; margin-top: 10px;
position: relative; position: relative;
padding: 10px 10px 0; padding: 10px 10px 0;

4
app/styles/soapbox/components/detailed-status.scss
View File

@ -7,7 +7,7 @@
} }
.detailed-status { .detailed-status {
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
padding: 14px 10px; padding: 14px 10px;
&--flex { &--flex {
@ -52,7 +52,7 @@
} }
.detailed-status__action-bar { .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-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
display: flex; display: flex;

10
app/styles/soapbox/containers.scss
View File

@ -499,7 +499,7 @@
&::before { &::before {
content: ""; content: "";
display: block; display: block;
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -522,14 +522,14 @@
height: 100%; height: 100%;
margin: 0; margin: 0;
border-radius: 50%; border-radius: 50%;
border: 4px solid lighten($ui-base-color, 4%); border: 4px solid var(--brand-color-faint);
background: darken($ui-base-color, 8%); background: darken($ui-base-color, 8%);
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
margin-top: 0; margin-top: 0;
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
padding: 5px; padding: 5px;
@ -638,7 +638,7 @@
flex: 0 0 auto; flex: 0 0 auto;
color: $darker-text-color; color: $darker-text-color;
padding: 10px; padding: 10px;
border-right: 1px solid lighten($ui-base-color, 4%); border-right: 1px solid var(--brand-color-faint);
cursor: default; cursor: default;
text-align: center; text-align: center;
position: relative; position: relative;
@ -869,7 +869,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
} }
} }
} }

2
app/styles/soapbox/dashboard.scss
View File

@ -13,7 +13,7 @@
& > div, & > div,
& > a { & > a {
padding: 20px; padding: 20px;
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
border-radius: 4px; border-radius: 4px;
} }

2
app/styles/soapbox/forms.scss
View File

@ -583,7 +583,7 @@ code {
} }
&:focus { &:focus {
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
} }
} }

2
app/styles/soapbox/widgets.scss
View File

@ -251,7 +251,7 @@
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
margin-top: 0; margin-top: 0;
background: lighten($ui-base-color, 4%); background: var(--brand-color-faint);
h1 { h1 {
font-size: 24px; font-size: 24px;