matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use a more appealing accent color

Browse Source
This commit is contained in:
Alex Gleason
2020-06-06 16:29:57 -05:00
parent 86508da96e
commit 0fc3952cd8
4 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/styles/about.scss
View File

@ -18,7 +18,7 @@ $small-breakpoint: 960px;
margin: 40px 0;
background: var(--foreground-color);
border-radius: 6px;
@media screen and (max-width: 520px) { margin: 40px 20px; }
@media screen and (max-width: 767px) {
@ -1377,13 +1377,16 @@ $small-breakpoint: 960px;
}
.nav-button {
background: var(--accent-color);
background: var(--brand-color);
color: #fff;
filter: var(--accent-filter);
transition: 0.2s;
&:hover,
&:focus,
&:active {
opacity: 0.9;
background: var(--brand-color);
filter: var(--accent-filter-hover);
}
}
}

13
app/styles/components/tabs-bar.scss
View File

@ -118,17 +118,15 @@
height: 34px;
margin-left: 20px;
border-radius: 6px;
background-color: var(--accent-color);
background-color: var(--brand-color);
font-weight: bold;
font-size: 16px;
transition: 0.2s;
filter: var(--accent-filter);
&:hover {
background-color: rgb(
calc(var(--accent-color-r) + 10),
calc(var(--accent-color-g) + 10),
calc(var(--accent-color-b) + 10)
);
background-color: var(--brand-color);
filter: var(--accent-filter-hover);
}
}
@ -207,7 +205,7 @@
&::before {
content: "";
display: block;
background: var(--accent-color);
background: var(--brand-color);
position: absolute;
transition: 0.2s;
left: 0;
@ -218,6 +216,7 @@
z-index: -1;
width: calc(100% + 20px);
margin-left: -12px;
filter: var(--accent-filter);
@media screen and (max-width: 895px) {
height: 0;

7
app/styles/themes.scss
View File

@ -3,11 +3,8 @@ body {
--brand-color: rgb(var(--brand-color-rgb));
--brand-color-faint: rgba(var(--brand-color-rgb), 0.1);
--brand-color-med: rgba(var(--brand-color-rgb), 0.2);
--accent-color-r: calc(var(--brand-color-r) + 25);
--accent-color-g: calc(var(--brand-color-g) + 25);
--accent-color-b: calc(var(--brand-color-b) + 25);
--accent-color-rgb: var(--accent-color-r), var(--accent-color-g), var(--accent-color-b);
--accent-color: rgb(var(--accent-color-rgb));
--accent-filter: saturate(1.3) hue-rotate(-20deg) brightness(1.2);
--accent-filter-hover: saturate(1.3) hue-rotate(-20deg) brightness(1.3);
--primary-text-color-rgb: var(--primary-text-color-r), var(--primary-text-color-g), var(--primary-text-color-b);
--primary-text-color: rgb(var(--primary-text-color-rgb));
--primary-text-color-faint: rgba(var(--primary-text-color-rgb), 0.6);

3
app/styles/ui.scss
View File

@ -413,7 +413,8 @@
border-radius: 8px;
text-align: center;
color: #fff;
background: var(--accent-color);
background: var(--brand-color);
filter: var(--accent-filter);
@media screen and (max-width: 895px) {
top: 0;