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

Color replace --brand-color-med

This commit is contained in:
Alex Gleason 2020-05-31 16:27:35 -05:00
parent a44d4d2dc8
commit 53cb73634d
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
9 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/reducers/theme.js
View File

@ -24,7 +24,7 @@ export const generateTheme = (brandColor, mode) => {
'brand-color-faint': cssrgba(brandColor, 0.1), 'brand-color-faint': cssrgba(brandColor, 0.1),
'brand-color-med': cssrgba(brandColor, 0.2), 'brand-color-med': cssrgba(brandColor, 0.2),
'highlight-text-color': makeContrast(5, brandColor, mode).hex, 'highlight-text-color': makeContrast(5, brandColor, mode).hex,
'brand-color-hicontrast': makeContrast(20, brandColor, mode).hex, 'brand-color-hicontrast': makeContrast(15, brandColor, mode).hex,
}); });
}; };

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

@ -95,10 +95,6 @@ body {
background: $ui-base-color; background: $ui-base-color;
} }
.account-gallery__item a {
background-color: $ui-base-color;
}
// Change the colors used in the dropdown menu // Change the colors used in the dropdown menu
.dropdown-menu { .dropdown-menu {
&__item { &__item {

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

@ -170,7 +170,7 @@ $small-breakpoint: 960px;
} }
.information-board { .information-board {
background: darken($ui-base-color, 4%); background: var(--brand-color-med);
padding: 20px 0; padding: 20px 0;
.container-alt { .container-alt {
@ -428,7 +428,7 @@ $small-breakpoint: 960px;
} }
&__call-to-action { &__call-to-action {
background: darken($ui-base-color, 4%); background: var(--brand-color-med);
border-radius: 4px; border-radius: 4px;
padding: 25px 40px; padding: 25px 40px;
overflow: hidden; overflow: hidden;

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

@ -85,7 +85,7 @@ body {
} }
&.admin { &.admin {
background: darken($ui-base-color, 4%); background: var(--brand-color-med);
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;

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

@ -25,11 +25,12 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: auto; width: auto;
transition: 0.2s;
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: lighten($ui-highlight-color, 10%); background-color: var(--brand-color-hicontrast);
} }
&--destructive { &--destructive {
@ -391,7 +392,7 @@
} }
a { a {
color: var(--brand-color-hicontrast); color: var(--highlight-text-color);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -548,6 +549,10 @@
&.status-direct:not(.read) { &.status-direct:not(.read) {
background: var(--brand-color-med); background: var(--brand-color-med);
border-bottom-color: var(--brand-color-med); border-bottom-color: var(--brand-color-med);
.status__content a {
color: var(--brand-color-hicontrast);
}
} }
&.light { &.light {
@ -796,7 +801,7 @@
.account__avatar { .account__avatar {
@include avatar-radius; @include avatar-radius;
position: relative; position: relative;
background-color: var(--accent-color); background-color: var(--brand-color-faint);
&-inline { &-inline {
display: inline-block; display: inline-block;
@ -3366,7 +3371,7 @@ a.status-card.compact:hover {
margin-bottom: 5px; margin-bottom: 5px;
h5 { h5 {
background: darken($ui-base-color, 4%); background: var(--brand-color-med);
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color-med);
cursor: default; cursor: default;
display: flex; display: flex;
@ -4018,6 +4023,10 @@ a.status-card.compact:hover {
overflow: hidden; overflow: hidden;
margin: 2px; margin: 2px;
a {
background: var(--brand-color-faint);
}
&__icons { &__icons {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -4029,14 +4038,14 @@ a.status-card.compact:hover {
.notification__filter-bar, .notification__filter-bar,
.account__section-headline { .account__section-headline {
background: darken($ui-base-color, 4%); background: var(--brand-color-med);
border-bottom: 1px solid var(--brand-color-med); border-bottom: 1px solid var(--brand-color-med);
cursor: default; cursor: default;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
button { button {
background: darken($ui-base-color, 4%); background: var(--brand-color-med);
border: 0; border: 0;
margin: 0; margin: 0;
} }
@ -4546,7 +4555,7 @@ noscript {
&__header { &__header {
color: $dark-text-color; color: $dark-text-color;
background: lighten($ui-base-color, 2%); background: lighten($ui-base-color, 2%);
border-bottom: 1px solid darken($ui-base-color, 4%); border-bottom: 1px solid var(--brand-color-med);
font-weight: 500; font-weight: 500;
padding: 15px; padding: 15px;
font-size: 16px; font-size: 16px;

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

@ -18,7 +18,7 @@
overflow: hidden; overflow: hidden;
height: 350px; height: 350px;
position: relative; position: relative;
background: darken($ui-base-color, 4%); background: var(--brand-color-med);
@media screen and (max-width: 895px) {height: 225px;} @media screen and (max-width: 895px) {height: 225px;}
&--none {height: 125px;} &--none {height: 125px;}

2
app/styles/soapbox/components/hotkeys-modal.scss
View File

@ -44,7 +44,7 @@
display: inline-block; display: inline-block;
padding: 2px 8px; padding: 2px 8px;
background-color: var(--brand-color-med); background-color: var(--brand-color-med);
border: 1px solid darken($ui-base-color, 4%); border: 1px solid var(--brand-color-med);
border-radius: 4px; border-radius: 4px;
} }
} }

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

@ -864,7 +864,7 @@ code {
margin-bottom: 25px; margin-bottom: 25px;
.fa-link { .fa-link {
background-color: darken($ui-base-color, 4%); background-color: var(--brand-color-med);
border-radius: 100%; border-radius: 100%;
font-size: 24px; font-size: 24px;
padding: 10px; padding: 10px;
@ -904,7 +904,7 @@ code {
text-align: center; text-align: center;
&::after { &::after {
background-color: darken($ui-base-color, 4%); background-color: var(--brand-color-med);
content: ''; content: '';
display: block; display: block;
height: 100%; height: 100%;

4
app/styles/soapbox/tables.scss
View File

@ -11,7 +11,7 @@
vertical-align: top; vertical-align: top;
border-top: 1px solid $ui-base-color; border-top: 1px solid $ui-base-color;
text-align: left; text-align: left;
background: darken($ui-base-color, 4%); background: var(--brand-color-med);
} }
& > thead > tr > th { & > thead > tr > th {
@ -183,7 +183,7 @@ a.table-action-link {
&__row { &__row {
border: 1px solid darken($ui-base-color, 8%); border: 1px solid darken($ui-base-color, 8%);
border-top: 0; border-top: 0;
background: darken($ui-base-color, 4%); background: var(--brand-color-med);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
&:first-child { &:first-child {