kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make tabs stand out with adjusted colors

This commit is contained in:
John Hollowell 2021-02-07 19:10:33 -05:00
parent 438cc9561c
commit 506bb2963f
6 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/sass/components/_tab.scss
View File

@ -23,15 +23,15 @@
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-top-left-radius: 0.25rem; border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem; border-top-right-radius: 0.25rem;
@include themify($themes) { @include themify($themes) {
color: themed('navbar-title-color'); color: themed('navbar-title-color');
background-color: themed('body-background-color'); background-color: themed('tab-link-background-color');
border: none; border: none;
border-bottom: 1px solid themed('hr-color'); border-bottom: 1px solid themed('hr-color');
&.active { &.active {
background-color: themed('body-background-color'); background-color: themed('tab-link-active-background-color');
border: 1px solid themed('hr-color'); border: 1px solid themed('hr-color');
border-bottom: none; border-bottom: none;
} }
@ -54,4 +54,4 @@
background-color: themed('body-background-color'); background-color: themed('body-background-color');
} }
} }
} }

8
assets/sass/themes/_dark.scss
View File

@ -1,6 +1,6 @@
$dark: ( $dark: (
footer-background-color: #403E41, footer-background-color: #403E41,
footer-color: #bdbdbd, footer-color: #bdbdbd,
link: #FFD866, link: #FFD866,
link-hover: #FF6188, link-hover: #FF6188,
title-color: #ffd866, title-color: #ffd866,
@ -14,7 +14,7 @@ $dark: (
dropdown-content-background-color: #595B5C, dropdown-content-background-color: #595B5C,
dropdown-item-hover-background-color: #727072, dropdown-item-hover-background-color: #727072,
dropdown-item-hover-color: #FCFCFA, dropdown-item-hover-color: #FCFCFA,
dropdown-item-color: #FCFCFA, dropdown-item-color: #FCFCFA,
navbar-border-bottom-color: #4e4e4e, navbar-border-bottom-color: #4e4e4e,
navbar-background-color: #403E41, navbar-background-color: #403E41,
navbar-mobile-background-color: #3a3a3a, navbar-mobile-background-color: #3a3a3a,
@ -107,4 +107,6 @@ $dark: (
share-background-color: lighten(#403E41, 2.5%), share-background-color: lighten(#403E41, 2.5%),
donation-background-color: #525252, donation-background-color: #525252,
button-primary-color: $button_dark_primary_color, button-primary-color: $button_dark_primary_color,
); tab-link-background-color: lighten(#2D2A2E, 5%),
tab-link-active-background-color: lighten(#2D2A2E, 20%),
);

4
assets/sass/themes/_hacker.scss
View File

@ -107,4 +107,6 @@ $hacker: (
share-background-color: #383b4c, share-background-color: #383b4c,
donation-background-color: #43454d, donation-background-color: #43454d,
button-primary-color: $button_hacker_primary_color, button-primary-color: $button_hacker_primary_color,
); tab-link-background-color: lighten(#151715, 5%),
tab-link-active-background-color: lighten(#151715, 20%),
);

4
assets/sass/themes/_kimbie.scss
View File

@ -106,4 +106,6 @@ $kimbie: (
share-background-color: #403c38, share-background-color: #403c38,
donation-background-color: #52493c, donation-background-color: #52493c,
button-primary-color: $button_kimbie_primary_color, button-primary-color: $button_kimbie_primary_color,
); tab-link-background-color: lighten(#221a0f, 5%),
tab-link-active-background-color: lighten(#221a0f, 20%),
);

10
assets/sass/themes/_light.scss
View File

@ -1,6 +1,6 @@
$light: ( $light: (
footer-background-color: #eee, footer-background-color: #eee,
footer-color: #424242, footer-color: #424242,
link: #607d8b, link: #607d8b,
link-hover: #26a69a, link-hover: #26a69a,
title-color: #607d8b, title-color: #607d8b,
@ -9,12 +9,12 @@ $light: (
hr-color: #ccc, hr-color: #ccc,
body-background-color: #fafafa, body-background-color: #fafafa,
backdrop-background-color: #e0e0e0, backdrop-background-color: #e0e0e0,
dropdown-border-top-color: #e0e0e0, dropdown-border-top-color: #e0e0e0,
dropdown-item-active-background-color: #e0e0e0, dropdown-item-active-background-color: #e0e0e0,
dropdown-content-background-color: #fafafa, dropdown-content-background-color: #fafafa,
dropdown-item-hover-background-color: #bdbdbd, dropdown-item-hover-background-color: #bdbdbd,
dropdown-item-hover-color: #FCFCFA, dropdown-item-hover-color: #FCFCFA,
dropdown-item-color: #555, dropdown-item-color: #555,
navbar-border-bottom-color: #e0e0e0, navbar-border-bottom-color: #e0e0e0,
navbar-background-color: #eee, navbar-background-color: #eee,
navbar-mobile-background-color: #f1f1f1, navbar-mobile-background-color: #f1f1f1,
@ -106,4 +106,6 @@ $light: (
share-background-color: #90a4ae, share-background-color: #90a4ae,
donation-background-color: #eceff1, donation-background-color: #eceff1,
button-primary-color: $button_light_primary_color, button-primary-color: $button_light_primary_color,
); tab-link-background-color: darken(#fafafa, 2%),
tab-link-active-background-color: darken(#fafafa, 10%),
);

6
assets/sass/themes/_solarized.scss
View File

@ -14,7 +14,7 @@ $solarized: (
dropdown-content-background-color: #fafafa, dropdown-content-background-color: #fafafa,
dropdown-item-hover-background-color: darken(#FBF1D1, 5%), dropdown-item-hover-background-color: darken(#FBF1D1, 5%),
dropdown-item-hover-color: #B58900, dropdown-item-hover-color: #B58900,
dropdown-item-color: #424242, dropdown-item-color: #424242,
navbar-border-bottom-color: #eddc9f, navbar-border-bottom-color: #eddc9f,
navbar-background-color: #EEE8D5, navbar-background-color: #EEE8D5,
navbar-mobile-background-color: darken(#EEE8D5, 2.5%), navbar-mobile-background-color: darken(#EEE8D5, 2.5%),
@ -106,4 +106,6 @@ $solarized: (
share-background-color: #99907a, share-background-color: #99907a,
donation-background-color: #c5e0df, donation-background-color: #c5e0df,
button-primary-color: $button_solarized_primary_color, button-primary-color: $button_solarized_primary_color,
); tab-link-background-color: darken(#FDF7E3, 5%),
tab-link-active-background-color: darken(#FDF7E3, 20%),
);