diff --git a/angular.json b/angular.json index 5f0204249b1..a5fc631b056 100644 --- a/angular.json +++ b/angular.json @@ -59,6 +59,11 @@ "input": "src/themes/dspace/styles/theme.scss", "inject": false, "bundleName": "dspace-theme" + }, + { + "input": "src/themes/mofp/styles/theme.scss", + "inject": false, + "bundleName": "mofp-theme" } ], "scripts": [], diff --git a/config/config.yml b/config/config.yml index 109db60ca92..19c64587689 100644 --- a/config/config.yml +++ b/config/config.yml @@ -3,3 +3,6 @@ rest: host: sandbox.dspace.org port: 443 nameSpace: /server + +themes: + - name: 'mofp' diff --git a/src/app/shared/menu/menu-item/models/menu-item.model.ts b/src/app/shared/menu/menu-item/models/menu-item.model.ts index ddca3d222d9..a2c3ef7ea2c 100644 --- a/src/app/shared/menu/menu-item/models/menu-item.model.ts +++ b/src/app/shared/menu/menu-item/models/menu-item.model.ts @@ -6,4 +6,6 @@ import { MenuItemType } from '../../menu-item-type.model'; export interface MenuItemModel { type: MenuItemType; disabled: boolean; + text: string; + link: string; } diff --git a/src/themes/custom/app/home-page/home-page.component.html b/src/themes/custom/app/home-page/home-page.component.html index e69de29bb2d..f7e8fd31737 100644 --- a/src/themes/custom/app/home-page/home-page.component.html +++ b/src/themes/custom/app/home-page/home-page.component.html @@ -0,0 +1,16 @@ +
+
+
+
+ +
+ +
+
+ + + + + + Photo by @inspiredimages +
diff --git a/src/themes/dspace/app/home-page/home-news/home-news.component.html b/src/themes/dspace/app/home-page/home-news/home-news.component.html index ca686a9933f..66c5b86fec8 100644 --- a/src/themes/dspace/app/home-page/home-news/home-news.component.html +++ b/src/themes/dspace/app/home-page/home-news/home-news.component.html @@ -28,6 +28,7 @@

DSpace 8

  • Demo Collection Administrator = dspacedemo+colladmin@gmail.com
  • Demo Submitter = dspacedemo+submit@gmail.com
    • + diff --git a/src/themes/dspace/styles/theme.scss b/src/themes/dspace/styles/theme.scss index 05c96f33728..0ccb393a914 100644 --- a/src/themes/dspace/styles/theme.scss +++ b/src/themes/dspace/styles/theme.scss @@ -10,3 +10,10 @@ @import '../../../styles/bootstrap_variables_mapping.scss'; @import '../../../styles/_truncatable-part.component.scss'; @import './_global-styles.scss'; + +.display-3 { + font-size: 30px; + font-weight: 500; + line-height: 1.1; + color: inherit; +} diff --git a/src/themes/eager-themes.module.ts b/src/themes/eager-themes.module.ts index c4db7b582a0..2d294dff56d 100644 --- a/src/themes/eager-themes.module.ts +++ b/src/themes/eager-themes.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core'; import { EagerThemeModule as DSpaceEagerThemeModule } from './dspace/eager-theme.module'; -// import { EagerThemeModule as CustomEagerThemeModule } from './custom/eager-theme.module'; /** * This module bundles the eager theme modules for all available themes. @@ -12,8 +11,7 @@ import { EagerThemeModule as DSpaceEagerThemeModule } from './dspace/eager-theme */ @NgModule({ imports: [ - DSpaceEagerThemeModule, - // CustomEagerThemeModule, + DSpaceEagerThemeModule ], }) export class EagerThemesModule { diff --git a/src/themes/mofp/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/themes/mofp/app/header-nav-wrapper/header-navbar-wrapper.component.html new file mode 100644 index 00000000000..091d1522589 --- /dev/null +++ b/src/themes/mofp/app/header-nav-wrapper/header-navbar-wrapper.component.html @@ -0,0 +1,3 @@ +
    + +
    diff --git a/src/themes/mofp/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/mofp/app/header-nav-wrapper/header-navbar-wrapper.component.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/themes/mofp/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/mofp/app/header-nav-wrapper/header-navbar-wrapper.component.ts new file mode 100644 index 00000000000..36e23e174af --- /dev/null +++ b/src/themes/mofp/app/header-nav-wrapper/header-navbar-wrapper.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component'; + +/** + * This component represents a wrapper for the horizontal navbar and the header + */ +@Component({ + selector: 'ds-header-navbar-wrapper', + styleUrls: ['header-navbar-wrapper.component.scss'], + templateUrl: 'header-navbar-wrapper.component.html', +}) +export class HeaderNavbarWrapperComponent extends BaseComponent { +} diff --git a/src/themes/mofp/app/header/header.component.html b/src/themes/mofp/app/header/header.component.html new file mode 100644 index 00000000000..e51045365b2 --- /dev/null +++ b/src/themes/mofp/app/header/header.component.html @@ -0,0 +1,21 @@ +
    +
    +
    + + + +
    +
    +
    diff --git a/src/themes/mofp/app/header/header.component.scss b/src/themes/mofp/app/header/header.component.scss new file mode 100644 index 00000000000..ab418865f12 --- /dev/null +++ b/src/themes/mofp/app/header/header.component.scss @@ -0,0 +1,19 @@ +@media screen and (min-width: map-get($grid-breakpoints, md)) { + nav.navbar { + display: none; + } + .header { + background-color: var(--ds-header-bg); + } +} + +.navbar-brand img { + @media screen and (max-width: map-get($grid-breakpoints, md)) { + height: var(--ds-header-logo-height-xs); + } +} +.navbar-toggler .navbar-toggler-icon { + background-image: none !important; + line-height: 1.5; + color: var(--bs-link-color); +} diff --git a/src/themes/mofp/app/header/header.component.ts b/src/themes/mofp/app/header/header.component.ts new file mode 100644 index 00000000000..6da89b47d57 --- /dev/null +++ b/src/themes/mofp/app/header/header.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component'; + +/** + * Represents the header with the logo and simple navigation + */ +@Component({ + selector: 'ds-header', + styleUrls: ['header.component.scss'], + templateUrl: 'header.component.html', +}) +export class HeaderComponent extends BaseComponent { +} diff --git a/src/themes/mofp/app/home-page/home-news/home-news.component.html b/src/themes/mofp/app/home-page/home-news/home-news.component.html new file mode 100644 index 00000000000..8e1f5ace9c9 --- /dev/null +++ b/src/themes/mofp/app/home-page/home-news/home-news.component.html @@ -0,0 +1,4 @@ +
    + + +
    diff --git a/src/themes/mofp/app/home-page/home-news/home-news.component.scss b/src/themes/mofp/app/home-page/home-news/home-news.component.scss new file mode 100644 index 00000000000..93ec1763f34 --- /dev/null +++ b/src/themes/mofp/app/home-page/home-news/home-news.component.scss @@ -0,0 +1,74 @@ +:host { + display: block; + margin-top: calc(var(--ds-content-spacing) * -1); + + div.background-image-container { + color: white; + position: relative; + + .background-image > img { + background-color: var(--bs-info); + position: absolute; + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: top; + } + + .container { + position: relative; + text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); + + &:before, &:after { + content: ''; + display: block; + width: var(--ds-banner-background-gradient-width); + height: 100%; + top: 0; + position: absolute; + } + + &:before { + background: linear-gradient(to left, var(--ds-banner-text-background), transparent); + left: calc(-1 * var(--ds-banner-background-gradient-width)); + + } + + &:after { + background: linear-gradient(to right, var(--ds-banner-text-background), transparent); + right: calc(-1 * var(--ds-banner-background-gradient-width)); + } + + background-color: var(--ds-banner-text-background); + } + + + small.credits { + a { + color: inherit; + } + + opacity: 0.3; + position: absolute; + right: var(--bs-spacer); + bottom: 0; + } + } + + .jumbotron { + background-color: transparent; + } + + a { + color: var(--ds-home-news-link-color); + + @include hover { + color: var(--ds-home-news-link-hover-color); + } + } +} + + diff --git a/src/themes/mofp/app/home-page/home-news/home-news.component.ts b/src/themes/mofp/app/home-page/home-news/home-news.component.ts new file mode 100644 index 00000000000..d4032011dc3 --- /dev/null +++ b/src/themes/mofp/app/home-page/home-news/home-news.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; +import { HomeNewsComponent as BaseComponent } from '../../../../../app/home-page/home-news/home-news.component'; + +@Component({ + selector: 'ds-home-news', + styleUrls: ['./home-news.component.scss'], + templateUrl: './home-news.component.html' +}) + +/** + * Component to render the news section on the home page + */ +export class HomeNewsComponent extends BaseComponent {} + diff --git a/src/themes/mofp/app/navbar/navbar.component.html b/src/themes/mofp/app/navbar/navbar.component.html new file mode 100644 index 00000000000..1a58edb8f2b --- /dev/null +++ b/src/themes/mofp/app/navbar/navbar.component.html @@ -0,0 +1,23 @@ + diff --git a/src/themes/mofp/app/navbar/navbar.component.scss b/src/themes/mofp/app/navbar/navbar.component.scss new file mode 100644 index 00000000000..2859ec6d6cb --- /dev/null +++ b/src/themes/mofp/app/navbar/navbar.component.scss @@ -0,0 +1,57 @@ +nav.navbar { + border-top: 1px var(--ds-header-navbar-border-top-color) solid; + border-bottom: 5px var(--bs-green) solid; + align-items: baseline; + color: var(--ds-header-icon-color); +} + +/** Mobile menu styling **/ +@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) { + .navbar { + width: 100%; + background-color: var(--bs-white); + position: absolute; + overflow: hidden; + height: 0; + &.open { + height: 100vh; //doesn't matter because wrapper is sticky + } + } +} + +@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 { + color: var(--ds-navbar-link-color); + } + ::ng-deep a.nav-link:hover { + color: var(--ds-navbar-link-color-hover); + } +} diff --git a/src/themes/mofp/app/navbar/navbar.component.ts b/src/themes/mofp/app/navbar/navbar.component.ts new file mode 100644 index 00000000000..321351a933c --- /dev/null +++ b/src/themes/mofp/app/navbar/navbar.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { NavbarComponent as BaseComponent } from '../../../../app/navbar/navbar.component'; +import { slideMobileNav } from '../../../../app/shared/animations/slide'; + +/** + * Component representing the public navbar + */ +@Component({ + selector: 'ds-navbar', + styleUrls: ['./navbar.component.scss'], + templateUrl: './navbar.component.html', + animations: [slideMobileNav] +}) +export class NavbarComponent extends BaseComponent { +} diff --git a/src/themes/mofp/assets/fonts/.gitkeep b/src/themes/mofp/assets/fonts/.gitkeep new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/themes/mofp/assets/images/.gitkeep b/src/themes/mofp/assets/images/.gitkeep new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/themes/mofp/assets/images/banner-half.jpg b/src/themes/mofp/assets/images/banner-half.jpg new file mode 100644 index 00000000000..31610cc3502 Binary files /dev/null and b/src/themes/mofp/assets/images/banner-half.jpg differ diff --git a/src/themes/mofp/assets/images/banner-half.webp b/src/themes/mofp/assets/images/banner-half.webp new file mode 100644 index 00000000000..f11cfb78595 Binary files /dev/null and b/src/themes/mofp/assets/images/banner-half.webp differ diff --git a/src/themes/mofp/assets/images/banner-tall.jpg b/src/themes/mofp/assets/images/banner-tall.jpg new file mode 100644 index 00000000000..d3103112968 Binary files /dev/null and b/src/themes/mofp/assets/images/banner-tall.jpg differ diff --git a/src/themes/mofp/assets/images/banner-tall.webp b/src/themes/mofp/assets/images/banner-tall.webp new file mode 100644 index 00000000000..a4ec97f2bcd Binary files /dev/null and b/src/themes/mofp/assets/images/banner-tall.webp differ diff --git a/src/themes/mofp/assets/images/banner.jpg b/src/themes/mofp/assets/images/banner.jpg new file mode 100644 index 00000000000..5f18b6cb6d8 Binary files /dev/null and b/src/themes/mofp/assets/images/banner.jpg differ diff --git a/src/themes/mofp/assets/images/banner.webp b/src/themes/mofp/assets/images/banner.webp new file mode 100644 index 00000000000..7745766f054 Binary files /dev/null and b/src/themes/mofp/assets/images/banner.webp differ diff --git a/src/themes/mofp/assets/images/favicons/android-chrome-192x192.png b/src/themes/mofp/assets/images/favicons/android-chrome-192x192.png new file mode 100644 index 00000000000..1aaffb1b90e Binary files /dev/null and b/src/themes/mofp/assets/images/favicons/android-chrome-192x192.png differ diff --git a/src/themes/mofp/assets/images/favicons/android-chrome-512x512.png b/src/themes/mofp/assets/images/favicons/android-chrome-512x512.png new file mode 100644 index 00000000000..2d35f496dc2 Binary files /dev/null and b/src/themes/mofp/assets/images/favicons/android-chrome-512x512.png differ diff --git a/src/themes/mofp/assets/images/favicons/apple-touch-icon.png b/src/themes/mofp/assets/images/favicons/apple-touch-icon.png new file mode 100644 index 00000000000..58ff41f34b7 Binary files /dev/null and b/src/themes/mofp/assets/images/favicons/apple-touch-icon.png differ diff --git a/src/themes/mofp/assets/images/favicons/favicon.ico b/src/themes/mofp/assets/images/favicons/favicon.ico new file mode 100644 index 00000000000..a5dfd5e3226 Binary files /dev/null and b/src/themes/mofp/assets/images/favicons/favicon.ico differ diff --git a/src/themes/mofp/assets/images/favicons/favicon.svg b/src/themes/mofp/assets/images/favicons/favicon.svg new file mode 100644 index 00000000000..8ea65cb72f0 --- /dev/null +++ b/src/themes/mofp/assets/images/favicons/favicon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/themes/mofp/assets/images/favicons/manifest.webmanifest b/src/themes/mofp/assets/images/favicons/manifest.webmanifest new file mode 100644 index 00000000000..1784ba2b4c5 --- /dev/null +++ b/src/themes/mofp/assets/images/favicons/manifest.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "DSpace", + "short_name": "DSpace", + "icons": [ + { + "src": "android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#091119", + "background_color": "#091119", + "display": "standalone" +} diff --git a/src/themes/mofp/assets/images/mofp_banner.jpg b/src/themes/mofp/assets/images/mofp_banner.jpg new file mode 100644 index 00000000000..de2845c21af Binary files /dev/null and b/src/themes/mofp/assets/images/mofp_banner.jpg differ diff --git a/src/themes/mofp/assets/images/mofp_header.jpg b/src/themes/mofp/assets/images/mofp_header.jpg new file mode 100644 index 00000000000..371d2b38a31 Binary files /dev/null and b/src/themes/mofp/assets/images/mofp_header.jpg differ diff --git a/src/themes/mofp/eager-theme.module.ts b/src/themes/mofp/eager-theme.module.ts new file mode 100644 index 00000000000..5dd114cd727 --- /dev/null +++ b/src/themes/mofp/eager-theme.module.ts @@ -0,0 +1,52 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { SharedModule } from '../../app/shared/shared.module'; +import { HomeNewsComponent } from './app/home-page/home-news/home-news.component'; +import { NavbarComponent } from './app/navbar/navbar.component'; +import { HeaderComponent } from './app/header/header.component'; +import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component'; +import { SearchModule } from '../../app/shared/search/search.module'; +import { RootModule } from '../../app/root.module'; +import { NavbarModule } from '../../app/navbar/navbar.module'; + +/** + * Add components that use a custom decorator to ENTRY_COMPONENTS as well as DECLARATIONS. + * This will ensure that decorator gets picked up when the app loads + */ +const ENTRY_COMPONENTS = [ +]; + +const DECLARATIONS = [ + ...ENTRY_COMPONENTS, + HomeNewsComponent, + HeaderComponent, + HeaderNavbarWrapperComponent, + NavbarComponent, +]; + +@NgModule({ + imports: [ + CommonModule, + SharedModule, + SearchModule, + FormsModule, + RootModule, + NavbarModule, + ], + declarations: DECLARATIONS, + providers: [ + ...ENTRY_COMPONENTS.map((component) => ({ provide: component })) + ], +}) +/** + * This module is included in the main bundle that gets downloaded at first page load. So it should + * contain only the themed components that have to be available immediately for the first page load, + * and the minimal set of imports required to make them work. Anything you can cut from it will make + * the initial page load faster, but may cause the page to flicker as components that were already + * rendered server side need to be lazy-loaded again client side + * + * Themed EntryComponents should also be added here + */ +export class EagerThemeModule { +} diff --git a/src/themes/mofp/lazy-theme.module.ts b/src/themes/mofp/lazy-theme.module.ts new file mode 100644 index 00000000000..a4e8027a159 --- /dev/null +++ b/src/themes/mofp/lazy-theme.module.ts @@ -0,0 +1,122 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { AdminRegistriesModule } from '../../app/admin/admin-registries/admin-registries.module'; +import { AdminSearchModule } from '../../app/admin/admin-search-page/admin-search.module'; +import { + AdminWorkflowModuleModule +} from '../../app/admin/admin-workflow-page/admin-workflow.module'; +import { + BitstreamFormatsModule +} from '../../app/admin/admin-registries/bitstream-formats/bitstream-formats.module'; +import { BrowseByModule } from '../../app/browse-by/browse-by.module'; +import { + CollectionFormModule +} from '../../app/collection-page/collection-form/collection-form.module'; +import { CommunityFormModule } from '../../app/community-page/community-form/community-form.module'; +import { CoreModule } from '../../app/core/core.module'; +import { DragDropModule } from '@angular/cdk/drag-drop'; +import { EditItemPageModule } from '../../app/item-page/edit-item-page/edit-item-page.module'; +import { FormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; +import { IdlePreloadModule } from 'angular-idle-preload'; +import { + JournalEntitiesModule +} from '../../app/entity-groups/journal-entities/journal-entities.module'; +import { MyDspaceSearchModule } from '../../app/my-dspace-page/my-dspace-search.module'; +import { MenuModule } from '../../app/shared/menu/menu.module'; +import { NavbarModule } from '../../app/navbar/navbar.module'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { ProfilePageModule } from '../../app/profile-page/profile-page.module'; +import { RegisterEmailFormModule } from '../../app/register-email-form/register-email-form.module'; +import { + ResearchEntitiesModule +} from '../../app/entity-groups/research-entities/research-entities.module'; +import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to'; +import { SearchPageModule } from '../../app/search-page/search-page.module'; +import { SharedModule } from '../../app/shared/shared.module'; +import { StatisticsModule } from '../../app/statistics/statistics.module'; +import { StoreModule } from '@ngrx/store'; +import { StoreRouterConnectingModule } from '@ngrx/router-store'; +import { TranslateModule } from '@ngx-translate/core'; +import { HomePageModule } from '../../app/home-page/home-page.module'; +import { AppModule } from '../../app/app.module'; +import { ItemPageModule } from '../../app/item-page/item-page.module'; +import { RouterModule } from '@angular/router'; +import { CommunityListPageModule } from '../../app/community-list-page/community-list-page.module'; +import { InfoModule } from '../../app/info/info.module'; +import { StatisticsPageModule } from '../../app/statistics-page/statistics-page.module'; +import { CommunityPageModule } from '../../app/community-page/community-page.module'; +import { CollectionPageModule } from '../../app/collection-page/collection-page.module'; +import { SubmissionModule } from '../../app/submission/submission.module'; +import { MyDSpacePageModule } from '../../app/my-dspace-page/my-dspace-page.module'; +import { SearchModule } from '../../app/shared/search/search.module'; +import { + ResourcePoliciesModule +} from '../../app/shared/resource-policies/resource-policies.module'; +import { ComcolModule } from '../../app/shared/comcol/comcol.module'; +import { RootModule } from '../../app/root.module'; + +const DECLARATIONS = [ +]; + +@NgModule({ + imports: [ + AdminRegistriesModule, + AdminSearchModule, + AdminWorkflowModuleModule, + AppModule, + RootModule, + BitstreamFormatsModule, + BrowseByModule, + CollectionFormModule, + CollectionPageModule, + CommonModule, + CommunityFormModule, + CommunityListPageModule, + CommunityPageModule, + CoreModule, + DragDropModule, + ItemPageModule, + EditItemPageModule, + FormsModule, + HomePageModule, + HttpClientModule, + IdlePreloadModule, + InfoModule, + JournalEntitiesModule, + MenuModule, + MyDspaceSearchModule, + NavbarModule, + NgbModule, + ProfilePageModule, + RegisterEmailFormModule, + ResearchEntitiesModule, + RouterModule, + ScrollToModule, + SearchPageModule, + SharedModule, + StatisticsModule, + StatisticsPageModule, + StoreModule, + StoreRouterConnectingModule, + TranslateModule, + SubmissionModule, + MyDSpacePageModule, + MyDspaceSearchModule, + SearchModule, + FormsModule, + ResourcePoliciesModule, + ComcolModule, + ], + declarations: DECLARATIONS, +}) + +/** + * This module serves as an index for all the components in this theme. + * It should import all other modules, so the compiler knows where to find any components referenced + * from a component in this theme + * It is purposefully not exported, it should never be imported anywhere else, its only purpose is + * to give lazily loaded components a context in which they can be compiled successfully + */ +class LazyThemeModule { +} diff --git a/src/themes/mofp/styles/_global-styles.scss b/src/themes/mofp/styles/_global-styles.scss new file mode 100644 index 00000000000..ecba9796eed --- /dev/null +++ b/src/themes/mofp/styles/_global-styles.scss @@ -0,0 +1,60 @@ +// Add any global css for the theme here + +// imports the base global style +@import '../../../styles/_global-styles.scss'; + +:root{ + --mofp-orange: #dbb01a; +} + +.facet-filter, .setting-option { + background-color: var(--bs-light); + border-radius: var(--bs-border-radius); + + &.p-3 { + // Needs !important because the original bootstrap class uses it + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + } + + .badge-secondary { + background-color: var(--bs-primary); + } + + h5 { + font-size: 1.1rem + } +} +header.main-header { + background: #545454 url("/assets/mofp/images/mofp_header.jpg"); + background-size: 50% 100%; + background-repeat: no-repeat; + border-bottom: 5px solid var(--mofp-orange); + min-height: 80px; +} +nav.navbar { + border-bottom: none !important; + border-top: none !important; +} +.navbar-nav .nav-item .dropdown-toggle { + color: white !important; +} + +.background-image-container{ + background: url("/assets/mofp/images/mofp_banner.jpg"); + background-size: 100% 100%; + min-height: 128px; +} +.btn-primary { + color: #fff; + background-color: #04518F; + border-color: #045185; +} +@media screen and (min-width: 768px){ + .header { + background-color: #545454 !important; + } + nav.navbar { + display: inline-block !important; + } +} diff --git a/src/themes/mofp/styles/_theme_css_variable_overrides.scss b/src/themes/mofp/styles/_theme_css_variable_overrides.scss new file mode 100644 index 00000000000..e4b4b61f458 --- /dev/null +++ b/src/themes/mofp/styles/_theme_css_variable_overrides.scss @@ -0,0 +1,10 @@ +// Override or add CSS variables for your theme here + +:root { + --ds-header-logo-height: 40px; + --ds-banner-text-background: rgba(0, 0, 0, 0.45); + --ds-banner-background-gradient-width: 300px; + --ds-home-news-link-color: #{$green}; + --ds-home-news-link-hover-color: #{darken($green, 15%)}; +} + diff --git a/src/themes/mofp/styles/_theme_sass_variable_overrides.scss b/src/themes/mofp/styles/_theme_sass_variable_overrides.scss new file mode 100644 index 00000000000..9257bc46dd8 --- /dev/null +++ b/src/themes/mofp/styles/_theme_sass_variable_overrides.scss @@ -0,0 +1,29 @@ +// 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 + +@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600;1,700;1,800&display=swap'); + +$font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + +$navbar-dark-color: #FFFFFF; + +/* Reassign color vars to semantic color scheme */ +$blue: #43515f !default; +$green: #92C642 !default; +$cyan: #207698 !default; +$yellow: #ec9433 !default; +$red: #CF4444 !default; +$dark: #43515f !default; + +$gray-800: #343a40 !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; diff --git a/src/themes/mofp/styles/theme.scss b/src/themes/mofp/styles/theme.scss new file mode 100644 index 00000000000..05c96f33728 --- /dev/null +++ b/src/themes/mofp/styles/theme.scss @@ -0,0 +1,12 @@ +// This file combines the other scss files in to one. You usually shouldn't edit this file directly + +@import './_theme_sass_variable_overrides.scss'; +@import '../../../styles/_variables.scss'; +@import '../../../styles/_mixins.scss'; +@import '../../../styles/helpers/font_awesome_imports.scss'; +@import '../../../styles/_vendor.scss'; +@import '../../../styles/_custom_variables.scss'; +@import './_theme_css_variable_overrides.scss'; +@import '../../../styles/bootstrap_variables_mapping.scss'; +@import '../../../styles/_truncatable-part.component.scss'; +@import './_global-styles.scss';