From 282bb7644f78ef2b6537e17d923fa47fb6e3b51d Mon Sep 17 00:00:00 2001 From: Alan Orth Date: Wed, 28 Aug 2024 11:24:38 +0300 Subject: [PATCH] Chase changes in DSpace 7.6.2 header and navbar Changes: - Re-work cgspace theme based on DSpace 7.6.2 dspace theme - Use primary instead of brand-primary (seems to be an older Bootstrap convention) - Simplify sub-theme CSS code to inherit from cgspace base theme Mobile menu is broken again and I haven't figured out how to fix it with all the reworking yet. --- .../search-export-csv.component.scss | 6 +- .../styles/_theme_css_variable_overrides.scss | 23 --- .../_theme_sass_variable_overrides.scss | 4 +- src/themes/alliance/styles/theme.scss | 1 + .../header-navbar-wrapper.component.html | 8 +- .../header-navbar-wrapper.component.scss | 1 + .../header-navbar-wrapper.component.ts | 2 + .../cgspace/app/header/header.component.html | 45 +++--- .../cgspace/app/header/header.component.scss | 5 - .../cgspace/app/header/header.component.ts | 11 +- .../cgspace/app/navbar/navbar.component.html | 35 ++-- .../cgspace/app/navbar/navbar.component.scss | 63 +------- src/themes/cgspace/styles/_global-styles.scss | 87 +++++----- .../styles/_theme_css_variable_overrides.scss | 48 ++++-- .../_theme_sass_variable_overrides.scss | 152 +++++++++++------- .../styles/_theme_css_variable_overrides.scss | 23 --- .../_theme_sass_variable_overrides.scss | 4 +- src/themes/cip/styles/theme.scss | 1 + .../styles/_theme_css_variable_overrides.scss | 24 --- .../_theme_sass_variable_overrides.scss | 4 +- src/themes/iita/styles/theme.scss | 1 + .../styles/_theme_css_variable_overrides.scss | 23 --- .../_theme_sass_variable_overrides.scss | 4 +- src/themes/ilri/styles/theme.scss | 1 + .../styles/_theme_css_variable_overrides.scss | 24 --- .../_theme_sass_variable_overrides.scss | 5 +- src/themes/iwmi/styles/theme.scss | 1 + 27 files changed, 244 insertions(+), 362 deletions(-) diff --git a/src/app/shared/search/search-export-csv/search-export-csv.component.scss b/src/app/shared/search/search-export-csv/search-export-csv.component.scss index 4a7688f8ecf..a8bf7fa225c 100644 --- a/src/app/shared/search/search-export-csv/search-export-csv.component.scss +++ b/src/app/shared/search/search-export-csv/search-export-csv.component.scss @@ -2,11 +2,11 @@ // This is from the cgspace theme's _global-styles.scss, but we have to use // CSS variables because the SCSS ones aren't defined by the time this runs. .export-button { - background-color: var(--brand-primary); - border-color: var(--brand-primary); + background-color: var(--primary); + border-color: var(--primary); color: var(--bs-white); &:hover { - background-color: var(--brand-primary-darker); + background-color: var(--primary-darker); } } diff --git a/src/themes/alliance/styles/_theme_css_variable_overrides.scss b/src/themes/alliance/styles/_theme_css_variable_overrides.scss index 5d72386334e..7b3b54cac3a 100644 --- a/src/themes/alliance/styles/_theme_css_variable_overrides.scss +++ b/src/themes/alliance/styles/_theme_css_variable_overrides.scss @@ -1,28 +1,5 @@ // Override or add CSS variables for your theme here :root { - --ds-header-logo-height: 40px; - --ds-banner-text-background: $white; - --ds-banner-background-gradient-width: 300px; - --ds-home-news-link-color: #{$brand-primary}; - --ds-home-news-link-hover-color: var(--brand-primary-darker); - --ds-thumbnail-max-width: 200px; - // override DSpace navbar link colors (note the special variable syntax here) - --ds-navbar-link-color: #{$white}; - --ds-navbar-link-color-hover: #{$brand-secondary}; - --ds-header-navbar-border-top-color: #{$brand-primary}; - --ds-header-navbar-border-bottom-color: #{$brand-secondary}; - // override DSpace search, language, and login colors - --ds-header-icon-color: #{$white}; - --ds-header-icon-color-hover: #{$brand-secondary}; - // override DSpace header background color - --ds-header-bg: #{$brand-primary}; - // override DSpace footer background color - --ds-footer-bg: #{$brand-primary}; - // override DSpace header trail text color - --ds-breadcrumb-link-color: #{$brand-primary}; - --ds-breadcrumb-link-active-color: #{$gray-800}; - --brand-primary: #{$brand-primary}; - --brand-primary-darker: #{darken($brand-primary, 10%)}; } diff --git a/src/themes/alliance/styles/_theme_sass_variable_overrides.scss b/src/themes/alliance/styles/_theme_sass_variable_overrides.scss index 497d8e27598..81c1bf63f3c 100644 --- a/src/themes/alliance/styles/_theme_sass_variable_overrides.scss +++ b/src/themes/alliance/styles/_theme_sass_variable_overrides.scss @@ -28,10 +28,10 @@ $font-family-sans-serif: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; // Alliance dark blue (Primary color) -$brand-primary: #173F6F; +$primary: #173F6F; // Alliance dark green (Primary color) -$brand-secondary: #358540; +$secondary: #358540; // Alliance black (Primary color) $gray-800: #231F20; diff --git a/src/themes/alliance/styles/theme.scss b/src/themes/alliance/styles/theme.scss index aff2691864a..1b3950ce040 100644 --- a/src/themes/alliance/styles/theme.scss +++ b/src/themes/alliance/styles/theme.scss @@ -9,6 +9,7 @@ @import '../../../styles/_vendor.scss'; @import '../../../styles/_custom_variables.scss'; @import './_theme_css_variable_overrides.scss'; +@import '../../cgspace/styles/_theme_css_variable_overrides.scss'; @import '../../../styles/bootstrap_variables_mapping.scss'; @import '../../../styles/_truncatable-part.component.scss'; @import './_global-styles.scss'; diff --git a/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.html index 091d1522589..5f51689df8c 100644 --- a/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.html +++ b/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.html @@ -1,3 +1,9 @@ -
+
+ +
+ +
diff --git a/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss index e69de29bb2d..cfa412ba7ca 100644 --- a/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss +++ b/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss @@ -0,0 +1 @@ +@import '../../../dspace/app/header-nav-wrapper/header-navbar-wrapper.component'; diff --git a/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts index 36e23e174af..ef7d38028ae 100644 --- a/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts +++ b/src/themes/cgspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component'; +import { slideMobileNav } from '../../../../app/shared/animations/slide'; /** * This component represents a wrapper for the horizontal navbar and the header @@ -8,6 +9,7 @@ import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/h selector: 'ds-header-navbar-wrapper', styleUrls: ['header-navbar-wrapper.component.scss'], templateUrl: 'header-navbar-wrapper.component.html', + animations: [slideMobileNav], }) export class HeaderNavbarWrapperComponent extends BaseComponent { } diff --git a/src/themes/cgspace/app/header/header.component.html b/src/themes/cgspace/app/header/header.component.html index cd136ca794c..69214a95669 100644 --- a/src/themes/cgspace/app/header/header.component.html +++ b/src/themes/cgspace/app/header/header.component.html @@ -1,25 +1,34 @@ -
- - +
+ diff --git a/src/themes/cgspace/app/header/header.component.scss b/src/themes/cgspace/app/header/header.component.scss index 30885413a49..4ce8d32c305 100644 --- a/src/themes/cgspace/app/header/header.component.scss +++ b/src/themes/cgspace/app/header/header.component.scss @@ -1,6 +1 @@ @import '../../../dspace/app/header/header.component'; - -// The dspace theme only sets the header background on medium screens and up -.header { - background-color: var(--ds-header-bg); -} diff --git a/src/themes/cgspace/app/header/header.component.ts b/src/themes/cgspace/app/header/header.component.ts index 6da89b47d57..98768d8b264 100644 --- a/src/themes/cgspace/app/header/header.component.ts +++ b/src/themes/cgspace/app/header/header.component.ts @@ -1,5 +1,6 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component'; +import { Observable } from 'rxjs'; /** * Represents the header with the logo and simple navigation @@ -9,5 +10,11 @@ import { HeaderComponent as BaseComponent } from '../../../../app/header/header. styleUrls: ['header.component.scss'], templateUrl: 'header.component.html', }) -export class HeaderComponent extends BaseComponent { +export class HeaderComponent extends BaseComponent implements OnInit { + public isNavBarCollapsed$: Observable; + + ngOnInit() { + super.ngOnInit(); + this.isNavBarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID); + } } diff --git a/src/themes/cgspace/app/navbar/navbar.component.html b/src/themes/cgspace/app/navbar/navbar.component.html index 616b0505533..d828206e7ae 100644 --- a/src/themes/cgspace/app/navbar/navbar.component.html +++ b/src/themes/cgspace/app/navbar/navbar.component.html @@ -1,26 +1,9 @@ - + + + + diff --git a/src/themes/cgspace/app/navbar/navbar.component.scss b/src/themes/cgspace/app/navbar/navbar.component.scss index a142a52b476..32c65c8c978 100644 --- a/src/themes/cgspace/app/navbar/navbar.component.scss +++ b/src/themes/cgspace/app/navbar/navbar.component.scss @@ -1,64 +1,3 @@ -nav.navbar { - background-color: var(--ds-navbar-bg); - align-items: baseline; -} - -/** Mobile menu styling **/ -@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) { - .navbar { - width: 100vw; - background-color: var(--bs-white); - position: absolute; - overflow: hidden; - height: 0; - z-index: var(--ds-nav-z-index); - - &.open { - height: auto; - min-height: 100vh; - border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid; - } - } -} - -@media screen and (min-width: map-get($grid-breakpoints, md)) { - .reset-padding-md { - margin-left: calc(var(--bs-spacer) / -2); - margin-right: calc(var(--bs-spacer) / -2); - } -} - -/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */ -.navbar-expand-md.navbar-container { - @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) { - >.navbar-inner-container { - padding: 0 var(--bs-spacer); - - a.navbar-brand { - display: none; - } - - .navbar-collapsed { - display: none; - } - } - - padding: 0; - } - - height: 80px; -} - -a.navbar-brand img { - max-height: var(--ds-header-logo-height); -} - -.navbar-nav ::ng-deep { - a.nav-link, .btn.nav-link { - color: var(--ds-navbar-link-color); +:host { - &:hover, &:focus { - color: var(--ds-navbar-link-color-hover); - } - } } diff --git a/src/themes/cgspace/styles/_global-styles.scss b/src/themes/cgspace/styles/_global-styles.scss index ab8424b9931..af6916eabb7 100644 --- a/src/themes/cgspace/styles/_global-styles.scss +++ b/src/themes/cgspace/styles/_global-styles.scss @@ -17,7 +17,7 @@ // search-text-filter.component and we might need to copy that into this // theme so we can override it again. a { - color: $brand-primary; + color: $primary; } h4 { @@ -32,8 +32,8 @@ body { } li.page-item.active a.page-link { - background-color: $brand-primary; - border-color: $brand-primary; + background-color: $primary; + border-color: $primary; color: $white; } @@ -42,23 +42,23 @@ a.page-link { color: $gray-800; @include hover { - background-color: $brand-secondary; - border-color: $brand-secondary; + background-color: $secondary; + border-color: $secondary; color: $white; } } // override Bootstrap primary buttons default states .btn-primary:not(:disabled):not(.disabled), .btn-primary:not(:disabled):not(.disabled) { - background-color: $brand-primary; - border-color: $brand-primary; + background-color: $primary; + border-color: $primary; color: $white; // override default blue hover // TODO: fix active/clicked state @include hover { - background-color: darken($brand-primary, 10%); - border-color: $brand-primary; + background-color: darken($primary, 10%); + border-color: $primary; color: $white; } } @@ -66,65 +66,65 @@ a.page-link { // override Bootstrap primary button disabled colors (they are still reduced // opacity, but we use CGIAR colors). .btn-primary.disabled, .btn-primary:disabled { - background-color: $brand-primary; - border-color: $brand-primary; + background-color: $primary; + border-color: $primary; } // override Bootstrap primary button active states .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { - background-color: $brand-primary; - border-color: $brand-primary; + background-color: $primary; + border-color: $primary; color: $white; } // override Bootstrap secondary button default states .btn-secondary:not(:disabled):not(.disabled), .btn-secondary:not(:disabled):not(.disabled) { background-color: $white; - border-color: $brand-primary; - color: $brand-primary; + border-color: $primary; + color: $primary; // override default blue hover @include hover { - border-color: $brand-primary; - color: $brand-secondary; + border-color: $primary; + color: $secondary; } } // override Bootstrap secondary button active states .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { - background-color: $brand-primary; - border-color: $brand-primary; + background-color: $primary; + border-color: $primary; color: $white; } // Override Bootstrap button outline .btn-outline-secondary:not(:disabled):not(.disabled), .btn-outline-primary:not(:disabled):not(.disabled), .show > .btn-outline-primary.dropdown-toggle, .btn-outline-secondary:not(:disabled):not(.disabled), .btn-outline-secondary:not(:disabled):not(.disabled), .show > .btn-outline-secondary.dropdown-toggle { - background-color: $brand-primary; - border-color: $brand-primary; + background-color: $primary; + border-color: $primary; color: $white; // override default blue hover @include hover { - background-color: darken($brand-primary, 10%); - border-color: $brand-primary; + background-color: darken($primary, 10%); + border-color: $primary; color: $white; } } // Override Bootstrap button outline secondary active state .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { - background-color: $brand-primary; - border-color: $brand-primary; + background-color: $primary; + border-color: $primary; color: $white; } .btn-link { - color: $brand-primary; + color: $primary; // override default blue hover @include hover { - color: darken($brand-primary, 10%); + color: darken($primary, 10%); } } @@ -140,8 +140,8 @@ ds-dynamic-form-group .form-row { } .list-group-item.active { - background-color: $brand-primary; - border-color: $brand-primary; + background-color: $primary; + border-color: $primary; color: $white; } @@ -154,57 +154,58 @@ a.lead { } a { - color: $brand-primary; + color: $primary; @include hover { - color: darken($brand-primary, 10%); + color: darken($primary, 10%); } } .badge-info { - background-color: $brand-primary; - border-color: $brand-primary; + background-color: $primary; + border-color: $primary; color: $white; } // Override badge colors .badge-primary, .badge-secondary, .badge-dark { - background-color: $brand-primary; + color: $white; + background-color: $primary; } a.badge-primary, a.badge-secondary, a.badge-dark { - background-color: $brand-primary; + background-color: $primary; @include hover { - background-color: $brand-secondary; + background-color: $secondary; } } .dropdown-item.active { color: $white; - background-color: $brand-primary; + background-color: $primary; } .dropdown-item:hover { color: $white; - background-color: $brand-secondary; + background-color: $secondary; } // Override Bootstrap alert box to be more subtle and use CGIAR colors .alert-info { background-color: $white; - color: $brand-primary; - border-color: $brand-secondary; + color: $primary; + border-color: $secondary; } // Override Bootstrap focus hover effect .form-control:focus { - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba($brand-primary, 0.25); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba($primary, 0.25); } // Override date facet link color from search-text-filter.component .filter-value { - color: $brand-primary; + color: $primary; } // "Unsaved" icon at the bottom of the submission form @@ -214,5 +215,5 @@ ds-submission-form-footer i.fa-exclamation-circle { // "Saved" icon at the bottom of the submission form ds-submission-form-footer i.fa-check-circle { - color: $brand-secondary; + color: $secondary; } diff --git a/src/themes/cgspace/styles/_theme_css_variable_overrides.scss b/src/themes/cgspace/styles/_theme_css_variable_overrides.scss index 5d72386334e..3505430c2e8 100644 --- a/src/themes/cgspace/styles/_theme_css_variable_overrides.scss +++ b/src/themes/cgspace/styles/_theme_css_variable_overrides.scss @@ -1,28 +1,48 @@ // Override or add CSS variables for your theme here :root { - --ds-header-logo-height: 40px; - --ds-banner-text-background: $white; + + @include media-breakpoint-up(md) { + --ds-header-logo-height: 40px; + --ds-header-height: 80px; + } + @include media-breakpoint-down(sm) { + --ds-header-logo-height: 50px; + --ds-header-height: 90px; + } + + --ds-banner-text-background: rgba(0, 0, 0, 0.45); --ds-banner-background-gradient-width: 300px; - --ds-home-news-link-color: #{$brand-primary}; - --ds-home-news-link-hover-color: var(--brand-primary-darker); + + --ds-header-navbar-border-bottom-height: 5px; + + /* set the next two properties as `--ds-header-navbar-border-bottom-*` + in order to keep the bottom border of the header when navbar is expanded */ + --ds-expandable-navbar-border-top-color: #{$white}; + --ds-expandable-navbar-border-top-height: 0; + --ds-expandable-navbar-padding-top: 0; + + --ds-navbar-bg: #{$ds-navbar-bg}; + --ds-navbar-dropdown-bg: #{$ds-navbar-dropdown-bg}; + --ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg}; + + --ds-home-news-link-color: #{$primary}; + --ds-home-news-link-hover-color: var(--primary-darker); --ds-thumbnail-max-width: 200px; // override DSpace navbar link colors (note the special variable syntax here) --ds-navbar-link-color: #{$white}; - --ds-navbar-link-color-hover: #{$brand-secondary}; - --ds-header-navbar-border-top-color: #{$brand-primary}; - --ds-header-navbar-border-bottom-color: #{$brand-secondary}; + --ds-navbar-link-color-hover: #{$secondary}; + --ds-header-navbar-border-top-color: #{$primary}; + --ds-header-navbar-border-bottom-color: #{$secondary}; // override DSpace search, language, and login colors --ds-header-icon-color: #{$white}; - --ds-header-icon-color-hover: #{$brand-secondary}; + --ds-header-icon-color-hover: #{$secondary}; // override DSpace header background color - --ds-header-bg: #{$brand-primary}; + --ds-header-bg: #{$ds-header-bg}; // override DSpace footer background color - --ds-footer-bg: #{$brand-primary}; + --ds-footer-bg: #{$primary}; // override DSpace header trail text color - --ds-breadcrumb-link-color: #{$brand-primary}; + --ds-breadcrumb-link-color: #{$primary}; --ds-breadcrumb-link-active-color: #{$gray-800}; - --brand-primary: #{$brand-primary}; - --brand-primary-darker: #{darken($brand-primary, 10%)}; + --primary-darker: #{darken($primary, 10%)}; } - diff --git a/src/themes/cgspace/styles/_theme_sass_variable_overrides.scss b/src/themes/cgspace/styles/_theme_sass_variable_overrides.scss index 87e7e73b8c3..9fcf66673a5 100644 --- a/src/themes/cgspace/styles/_theme_sass_variable_overrides.scss +++ b/src/themes/cgspace/styles/_theme_sass_variable_overrides.scss @@ -1,66 +1,98 @@ // DSpace works with CSS variables for its own components, and has a mapping of all bootstrap Sass // variables to CSS equivalents (see src/styles/_bootstrap_variables_mapping.scss). However Bootstrap -// still uses Sass variables internally. So if you want to override bootstrap (or other sass -// variables) you can do so here. Their CSS counterparts will include the changes you make here +// still uses Sass variables internally. So if you want to override Bootstrap (or other sass +// variables) you can do so here. Their CSS counterparts will include the changes you make here. + +// When this file is going to be compiled, internal Bootstrap variables won't have been declared yet, +// therefore if you want to use any Bootstrap variable you also need to declare it here. + +// All SASS variables from the base theme are also included here. Do not use the '!default' flag +// here if you want to override them. + + +/*** FONT FAMILIES ***/ + @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -// Use Source Sans Pro and fall back to the native font stack from Bootstrap 4.6 -// See: https://getbootstrap.com/docs/4.6/content/reboot/#native-font-stack -$font-family-sans-serif: - 'Source Sans 3', - // Safari for macOS and iOS (San Francisco) - -apple-system, - // Chrome < 56 for macOS (San Francisco) - BlinkMacSystemFont, - // Windows - "Segoe UI", - // Android - Roboto, - // Basic web fallback - "Helvetica Neue", Arial, - // Linux - "Noto Sans", - "Liberation Sans", - // Sans serif fallback - sans-serif, - // Emoji fonts - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; - -// CGIAR dark green -$brand-primary: #427730 !default; - -// CGIAR light green -$brand-secondary: #7AB800 !default; - -$navbar-dark-color: #FFFFFF; - -/* Reassign color vars to semantic color scheme */ -$blue: #43515f !default; -$green: $brand-secondary !default; -$cyan: #207698 !default; -$yellow: #ec9433 !default; -$red: #CF4444 !default; -$dark: #43515f !default; - -$gray-800: #343a40 !default; -$gray-700: #495057 !default; -$gray-400: #ced4da !default; -$gray-100: #f8f9fa !default; - -$body-color: $gray-800 !default; // Bootstrap $gray-800 - -$table-accent-bg: $gray-100 !default; // Bootstrap $gray-100 -$table-hover-bg: $gray-400 !default; // Bootstrap $gray-400 - -$yiq-contrasted-threshold: 170 !default; +$font-family-sans-serif: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; + +/*** SEMANTIC COLOR SCHEME ***/ + +// Gray scale (uncomment the variables that you want to override or that you need to use in this file) +//$white: #fff; +$gray-100: #f8f9fa; +//$gray-200: #e9ecef; +//$gray-300: #dee2e6; +$gray-400: #ced4da; +//$gray-500: #adb5bd; +//$gray-600: #6c757d; +//$gray-700: #495057; +$gray-800: #343a40; +//$gray-900: #212529; +//$black: #000; + +// Other colors (uncomment the variables that you want to override or that you need to use in this file) +//$blue: #007bff !default; +//$indigo: #6610f2 !default; +//$purple: #6f42c1 !default; +//$pink: #e83e8c !default; +//$red: #dc3545 !default; +//$orange: #fd7e14 !default; +//$yellow: #ffc107 !default; +//$green: #28a745 !default; +//$teal: #20c997 !default; +//$cyan: #17a2b8 !default; + +// Define or override other colors here +// ... + +// Override semantic colors here +$primary: #427730 !default; // CGIAR dark green +$secondary: #7AB800 !default; // CGIAR light green +$success: $secondary !default; // CGIAR light green +$info: #207698 !default; // Light blue +$warning: #ec9433 !default; // Orange +$danger: #cf4444 !default; // Red +$light: #f8f9fa !default; // As Bootstrap $gray-100 +$dark: #43515f !default; // Gray + +// Add new semantic colors here (you don't need to add existing semantic colors) $theme-colors: ( - primary: $dark, - secondary: $gray-700, - success: $green, - info: $cyan, - warning: $yellow, - danger: $red, - light: $gray-100, - dark: $dark -) !default; + // ... +); + + +/*** OTHER BOOTSTRAP VARIABLES ***/ + +// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. +$yiq-contrasted-threshold: 170; + +$body-color: $gray-800 !default; + +$link-color: $info !default; +$link-decoration: none; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline; + +$table-accent-bg: $gray-100; +$table-hover-bg: $gray-400; + +$navbar-dark-color: #fff; + + +/*** CUSTOM DSPACE VARIABLES ***/ + +// Check these next +$ds-home-news-link-color: #92c642; +$ds-header-navbar-border-bottom-color: #92c642; + +$ds-breadcrumb-link-color: #154E66 !default; +$ds-breadcrumb-link-active-color: #040D11 !default; + +$ds-header-bg: $primary !default; + +$ds-navbar-bg: $primary; +$ds-navbar-dropdown-bg: $primary; +$ds-expandable-navbar-bg: $primary; +$ds-expandable-navbar-link-color: $navbar-dark-color; diff --git a/src/themes/cip/styles/_theme_css_variable_overrides.scss b/src/themes/cip/styles/_theme_css_variable_overrides.scss index 5d72386334e..7b3b54cac3a 100644 --- a/src/themes/cip/styles/_theme_css_variable_overrides.scss +++ b/src/themes/cip/styles/_theme_css_variable_overrides.scss @@ -1,28 +1,5 @@ // Override or add CSS variables for your theme here :root { - --ds-header-logo-height: 40px; - --ds-banner-text-background: $white; - --ds-banner-background-gradient-width: 300px; - --ds-home-news-link-color: #{$brand-primary}; - --ds-home-news-link-hover-color: var(--brand-primary-darker); - --ds-thumbnail-max-width: 200px; - // override DSpace navbar link colors (note the special variable syntax here) - --ds-navbar-link-color: #{$white}; - --ds-navbar-link-color-hover: #{$brand-secondary}; - --ds-header-navbar-border-top-color: #{$brand-primary}; - --ds-header-navbar-border-bottom-color: #{$brand-secondary}; - // override DSpace search, language, and login colors - --ds-header-icon-color: #{$white}; - --ds-header-icon-color-hover: #{$brand-secondary}; - // override DSpace header background color - --ds-header-bg: #{$brand-primary}; - // override DSpace footer background color - --ds-footer-bg: #{$brand-primary}; - // override DSpace header trail text color - --ds-breadcrumb-link-color: #{$brand-primary}; - --ds-breadcrumb-link-active-color: #{$gray-800}; - --brand-primary: #{$brand-primary}; - --brand-primary-darker: #{darken($brand-primary, 10%)}; } diff --git a/src/themes/cip/styles/_theme_sass_variable_overrides.scss b/src/themes/cip/styles/_theme_sass_variable_overrides.scss index 772abacafb8..9ed9c7b3904 100644 --- a/src/themes/cip/styles/_theme_sass_variable_overrides.scss +++ b/src/themes/cip/styles/_theme_sass_variable_overrides.scss @@ -5,7 +5,7 @@ // See: https://cipotato.org/site/logo/pdf/BrandingGuidelines.PDF // CIP orange -$brand-primary: #EE7203; +$primary: #EE7203; // CIP brown -$brand-secondary: #5D2E00; +$secondary: #5D2E00; diff --git a/src/themes/cip/styles/theme.scss b/src/themes/cip/styles/theme.scss index aff2691864a..1b3950ce040 100644 --- a/src/themes/cip/styles/theme.scss +++ b/src/themes/cip/styles/theme.scss @@ -9,6 +9,7 @@ @import '../../../styles/_vendor.scss'; @import '../../../styles/_custom_variables.scss'; @import './_theme_css_variable_overrides.scss'; +@import '../../cgspace/styles/_theme_css_variable_overrides.scss'; @import '../../../styles/bootstrap_variables_mapping.scss'; @import '../../../styles/_truncatable-part.component.scss'; @import './_global-styles.scss'; diff --git a/src/themes/iita/styles/_theme_css_variable_overrides.scss b/src/themes/iita/styles/_theme_css_variable_overrides.scss index f58cb67c4ed..2b58dfb3c7d 100644 --- a/src/themes/iita/styles/_theme_css_variable_overrides.scss +++ b/src/themes/iita/styles/_theme_css_variable_overrides.scss @@ -1,29 +1,5 @@ // Override or add CSS variables for your theme here :root { - --ds-header-logo-height: 40px; - --ds-banner-text-background: $white; - --ds-banner-background-gradient-width: 300px; - --ds-home-news-link-color: #{$brand-primary}; - --ds-home-news-link-hover-color: var(--brand-primary-darker); - --ds-thumbnail-max-width: 200px; - // override DSpace navbar link colors (note the special variable syntax here) - --ds-navbar-link-color: #{$white}; --ds-navbar-link-color-hover: #{$iita-brown}; - --ds-header-navbar-border-top-color: #{$brand-primary}; - --ds-header-navbar-border-bottom-color: #{$brand-secondary}; - // override DSpace search, language, and login colors - --ds-header-icon-color: #{$white}; - --ds-header-icon-color-hover: #{$brand-secondary}; - // override DSpace header background color - --ds-header-bg: #{$brand-primary}; - // override DSpace footer background color - --ds-footer-bg: #{$brand-primary}; - // override DSpace header trail text color - --ds-breadcrumb-link-color: #{$brand-primary}; - --ds-breadcrumb-link-active-color: #{$gray-800}; - --brand-primary: #{$brand-primary}; - --brand-primary-darker: #{darken($brand-primary, 10%)}; - --brand-secondary: #{$brand-secondary}; } - diff --git a/src/themes/iita/styles/_theme_sass_variable_overrides.scss b/src/themes/iita/styles/_theme_sass_variable_overrides.scss index e919de46e06..d15fee9ef97 100644 --- a/src/themes/iita/styles/_theme_sass_variable_overrides.scss +++ b/src/themes/iita/styles/_theme_sass_variable_overrides.scss @@ -5,10 +5,10 @@ // See: IITA Branding Guidelines.pdf // IITA dark/house orange -$brand-primary: #F26522; +$primary: #F26522; // IITA light orange -$brand-secondary: #F7941D; +$secondary: #F7941D; // IITA brown, from the website since I can't find anything suitable in the // Branding Guidelines document. diff --git a/src/themes/iita/styles/theme.scss b/src/themes/iita/styles/theme.scss index aff2691864a..1b3950ce040 100644 --- a/src/themes/iita/styles/theme.scss +++ b/src/themes/iita/styles/theme.scss @@ -9,6 +9,7 @@ @import '../../../styles/_vendor.scss'; @import '../../../styles/_custom_variables.scss'; @import './_theme_css_variable_overrides.scss'; +@import '../../cgspace/styles/_theme_css_variable_overrides.scss'; @import '../../../styles/bootstrap_variables_mapping.scss'; @import '../../../styles/_truncatable-part.component.scss'; @import './_global-styles.scss'; diff --git a/src/themes/ilri/styles/_theme_css_variable_overrides.scss b/src/themes/ilri/styles/_theme_css_variable_overrides.scss index 5d72386334e..7b3b54cac3a 100644 --- a/src/themes/ilri/styles/_theme_css_variable_overrides.scss +++ b/src/themes/ilri/styles/_theme_css_variable_overrides.scss @@ -1,28 +1,5 @@ // Override or add CSS variables for your theme here :root { - --ds-header-logo-height: 40px; - --ds-banner-text-background: $white; - --ds-banner-background-gradient-width: 300px; - --ds-home-news-link-color: #{$brand-primary}; - --ds-home-news-link-hover-color: var(--brand-primary-darker); - --ds-thumbnail-max-width: 200px; - // override DSpace navbar link colors (note the special variable syntax here) - --ds-navbar-link-color: #{$white}; - --ds-navbar-link-color-hover: #{$brand-secondary}; - --ds-header-navbar-border-top-color: #{$brand-primary}; - --ds-header-navbar-border-bottom-color: #{$brand-secondary}; - // override DSpace search, language, and login colors - --ds-header-icon-color: #{$white}; - --ds-header-icon-color-hover: #{$brand-secondary}; - // override DSpace header background color - --ds-header-bg: #{$brand-primary}; - // override DSpace footer background color - --ds-footer-bg: #{$brand-primary}; - // override DSpace header trail text color - --ds-breadcrumb-link-color: #{$brand-primary}; - --ds-breadcrumb-link-active-color: #{$gray-800}; - --brand-primary: #{$brand-primary}; - --brand-primary-darker: #{darken($brand-primary, 10%)}; } diff --git a/src/themes/ilri/styles/_theme_sass_variable_overrides.scss b/src/themes/ilri/styles/_theme_sass_variable_overrides.scss index da658c37e7b..5f4f49cd101 100644 --- a/src/themes/ilri/styles/_theme_sass_variable_overrides.scss +++ b/src/themes/ilri/styles/_theme_sass_variable_overrides.scss @@ -3,7 +3,7 @@ // matter whether they are already defined or not. // dark ILRI red background -$brand-primary: #702D3E; +$primary: #702D3E; // ILRI light red -$brand-secondary: #E3D7D7; +$secondary: #E3D7D7; diff --git a/src/themes/ilri/styles/theme.scss b/src/themes/ilri/styles/theme.scss index aff2691864a..1b3950ce040 100644 --- a/src/themes/ilri/styles/theme.scss +++ b/src/themes/ilri/styles/theme.scss @@ -9,6 +9,7 @@ @import '../../../styles/_vendor.scss'; @import '../../../styles/_custom_variables.scss'; @import './_theme_css_variable_overrides.scss'; +@import '../../cgspace/styles/_theme_css_variable_overrides.scss'; @import '../../../styles/bootstrap_variables_mapping.scss'; @import '../../../styles/_truncatable-part.component.scss'; @import './_global-styles.scss'; diff --git a/src/themes/iwmi/styles/_theme_css_variable_overrides.scss b/src/themes/iwmi/styles/_theme_css_variable_overrides.scss index d71c6bdd33b..7b3b54cac3a 100644 --- a/src/themes/iwmi/styles/_theme_css_variable_overrides.scss +++ b/src/themes/iwmi/styles/_theme_css_variable_overrides.scss @@ -1,29 +1,5 @@ // Override or add CSS variables for your theme here :root { - --ds-header-logo-height: 40px; - --ds-banner-text-background: $white; - --ds-banner-background-gradient-width: 300px; - --ds-home-news-link-color: #{$brand-primary}; - --ds-home-news-link-hover-color: var(--brand-primary-darker); - --ds-thumbnail-max-width: 200px; - // override DSpace navbar link colors (note the special variable syntax here) - --ds-navbar-link-color: #{$white}; - --ds-navbar-link-color-hover: #{$brand-secondary}; - --ds-header-navbar-border-top-color: #{$brand-primary}; - --ds-header-navbar-border-bottom-color: #{$brand-secondary}; - // override DSpace search, language, and login colors - --ds-header-icon-color: #{$white}; - --ds-header-icon-color-hover: #{$brand-secondary}; - // override DSpace header background color - --ds-header-bg: #{$brand-primary}; - // override DSpace footer background color - --ds-footer-bg: #{$brand-primary}; - // override DSpace header trail text color - --ds-breadcrumb-link-color: #{$brand-primary}; - --ds-breadcrumb-link-active-color: #{$gray-800}; - --brand-primary: #{$brand-primary}; - --brand-primary-darker: #{darken($brand-primary, 10%)}; - --brand-secondary: #{$brand-secondary}; } diff --git a/src/themes/iwmi/styles/_theme_sass_variable_overrides.scss b/src/themes/iwmi/styles/_theme_sass_variable_overrides.scss index 8daba922b1f..d7d0c1468e2 100644 --- a/src/themes/iwmi/styles/_theme_sass_variable_overrides.scss +++ b/src/themes/iwmi/styles/_theme_sass_variable_overrides.scss @@ -5,8 +5,7 @@ // See: https://branding.iwmi.org // IWMI dark blue -$brand-primary: #28537D; +$primary: #28537D; // IWMI light blue -$brand-secondary: #5088C6; - +$secondary: #5088C6; diff --git a/src/themes/iwmi/styles/theme.scss b/src/themes/iwmi/styles/theme.scss index aff2691864a..1b3950ce040 100644 --- a/src/themes/iwmi/styles/theme.scss +++ b/src/themes/iwmi/styles/theme.scss @@ -9,6 +9,7 @@ @import '../../../styles/_vendor.scss'; @import '../../../styles/_custom_variables.scss'; @import './_theme_css_variable_overrides.scss'; +@import '../../cgspace/styles/_theme_css_variable_overrides.scss'; @import '../../../styles/bootstrap_variables_mapping.scss'; @import '../../../styles/_truncatable-part.component.scss'; @import './_global-styles.scss';