bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use --accent-color more through UI

Browse source
This commit is contained in:
Alex Gleason 2020-06-07 13:14:18 -05:00
parent ccf452e028
commit 24979c9461
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
5 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/styles/accounts.scss
View file

@ -580,7 +580,7 @@ a .account__avatar {
} }
.account__section-headline { .account__section-headline {
background: var(--brand-color--faint); background: var(--accent-color--faint);
button, button,
a { a {

6
app/styles/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: var(--brand-color--med); background: var(--accent-color--med);
@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 var(--brand-color--faint); border: 5px solid var(--accent-color--faint);
left: 0; left: 0;
top: -90px; top: -90px;
border-radius: 50%; border-radius: 50%;
@ -162,7 +162,7 @@
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
.account-mobile-container { .account-mobile-container {
display: block; display: block;
background: var(--brand-color--faint); background: var(--accent-color--faint);
margin-top: 10px; margin-top: 10px;
position: relative; position: relative;
padding: 10px 10px 0; padding: 10px 10px 0;

2
app/styles/components/columns.scss
View file

@ -203,7 +203,7 @@
} }
.column-back-button { .column-back-button {
background: var(--brand-color--med); background: var(--accent-color--med);
color: var(--highlight-text-color); color: var(--highlight-text-color);
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;

5
app/styles/components/tabs-bar.scss
View file

@ -122,6 +122,10 @@
font-size: 16px; font-size: 16px;
transition: 0.2s; transition: 0.2s;
> span {
text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.15);
}
&:hover { &:hover {
background-color: var(--accent-color--bright); background-color: var(--accent-color--bright);
} }
@ -151,6 +155,7 @@
font-weight: bold; font-weight: bold;
transition: 0.1s; transition: 0.1s;
outline: none; outline: none;
text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.15);
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
width: 36px; width: 36px;

9
app/styles/themes.scss
View file

@ -36,14 +36,15 @@ body {
--accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l); --accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
--primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l); --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
--background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l); --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
--accent-color_h: calc(var(--brand-color_h) - 20); --accent-color_h: calc(var(--brand-color_h) - 15);
--accent-color_s: calc(var(--brand-color_s) + 10%); --accent-color_s: 86%;
--accent-color_l: calc(var(--brand-color_l) + 5%); --accent-color_l: 44%;
// Modifiers // Modifiers
--brand-color--faint: hsla(var(--brand-color_hsl), 0.1); --brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
--brand-color--med: hsla(var(--brand-color_hsl), 0.2); --brand-color--med: hsla(var(--brand-color_hsl), 0.2);
--accent-color--faint: hsla(var(--accent-color_hsl), 0.1); --accent-color--faint: hsla(var(--accent-color_hsl), 0.15);
--accent-color--med: hsla(var(--accent-color_hsl), 0.25);
--accent-color--bright: hsl( --accent-color--bright: hsl(
var(--accent-color_h), var(--accent-color_h),
var(--accent-color_s), var(--accent-color_s),