Mastodon
/
Pinafore-Web-Client-Frontend
mirror of https://github.com/nolanlawson/pinafore
1
0
Fork 0
Code Issues Releases Wiki Activity

fix: contrast for active navigation 

Increase the background contrast for the selected page.
Increase the prominance of the indictor bar so we dont need to rely on
the background to have a strong contrast difference.
This commit is contained in:
Nick Colley 2022-11-25 12:38:40 +00:00 committed by Nick Colley
parent 490da809c6
commit 26b48d48bf
2 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/scss/themes/_base.scss
View File

@ -26,23 +26,22 @@
--form-border: #{darken($border-color, 10%)};
--nav-bg: #{$main-theme-color};
--nav-active-bg: #{lighten($main-theme-color, 9%)};
--nav-active-bg: #{lighten($main-theme-color, 6%)};
--nav-border: #{darken($main-theme-color, 10%)};
--nav-a-border: #{$main-theme-color};
--nav-a-border-hover: #{rgba($secondary-text-color, 0.6)};
--nav-a-bg-hover: #{lighten($main-theme-color, 3%)};
--nav-a-selected-border: #{$secondary-text-color};
--nav-a-selected-bg: #{lighten($main-theme-color, 10%)};
--nav-a-selected-active-bg: #{lighten($main-theme-color, 17%)};
--nav-svg-fill: #{$secondary-text-color};
--nav-text-color: #{$secondary-text-color};
--nav-indicator-bg: #{rgba($secondary-text-color, 0.8)};
--nav-indicator-bg-hover: #{rgba($secondary-text-color, 0.85)};
--nav-a-selected-bg: #{lighten($main-theme-color, 3%)};
--nav-a-selected-bg-hover: #{lighten($main-theme-color, 6%)};
--nav-a-selected-border-hover: #{$secondary-text-color};
--nav-a-selected-bg-hover: #{lighten($main-theme-color, 15%)};
--nav-a-bg-hover: #{lighten($main-theme-color, 5%)};
--nav-a-border-hover: #{$main-theme-color};
--nav-a-selected-active-bg: var(--nav-a-selected-bg-hover);
--nav-svg-fill: #{$secondary-text-color};
--nav-svg-fill-hover: #{$secondary-text-color};
--nav-text-color: #{$secondary-text-color};
--nav-text-color-hover: #{$secondary-text-color};
--nav-indicator-bg: #{rgba($secondary-text-color, 0.8)};
--nav-indicator-bg-hover: #{rgba($secondary-text-color, 0.6)};
--action-button-fill-color: #{lighten($deemphasized-color, 16%)};
--action-button-bg-color-hover: #{fade-out($main-text-color, 0.94)};

7
src/scss/variables.scss
View File

@ -21,9 +21,9 @@
//
--nav-font-size: 1rem;
--nav-indicator-height: 2px;
--nav-indicator-height: 3px;
--nav-border-bottom: 0px;
--nav-icon-pad-v: 15px;
--nav-icon-pad-v: 14px;
--nav-icon-pad-h: 20px;
--nav-icon-size: 20px;
@ -46,10 +46,9 @@
--main-border-size: 1px;
@media (max-width: 991px) {
--nav-icon-pad-v: 20px;
--nav-icon-pad-v: 18px;
--nav-icon-pad-h: 10px;
--nav-icon-size: 25px;
--nav-indicator-height: 3px;
--nav-border-bottom: 0px;
}