diff --git a/src/assets/img/top_logo.png b/src/assets/img/top_logo.png
new file mode 100644
index 000000000..0cbb69d0e
Binary files /dev/null and b/src/assets/img/top_logo.png differ
diff --git a/src/core/features/courses/pages/my/my.html b/src/core/features/courses/pages/my/my.html
index 65f89ff10..0d1d12031 100644
--- a/src/core/features/courses/pages/my/my.html
+++ b/src/core/features/courses/pages/my/my.html
@@ -5,7 +5,8 @@
-
+
diff --git a/src/core/features/courses/pages/my/my.scss b/src/core/features/courses/pages/my/my.scss
index 31a27190b..e073b4273 100644
--- a/src/core/features/courses/pages/my/my.scss
+++ b/src/core/features/courses/pages/my/my.scss
@@ -1,5 +1,3 @@
-@import "~theme/globals";
-
:host ::ng-deep ion-item-divider {
display: none !important;
}
@@ -16,17 +14,3 @@ core-block ::ng-deep ion-card.addon-block-myoverview {
--background: transparent;
margin: 0;
}
-
-@if ($core-dashboard-logo) {
- .in-toolbar h1 .core-header-logo {
- max-height: calc(var(--core-header-toolbar-height) - 24px);
- }
-
- .in-toolbar h1 core-format-text {
- display: none;
- }
-} @else {
- .in-toolbar h1 .core-header-logo {
- display: none;
- }
-}
diff --git a/src/core/features/mainmenu/pages/home/home.html b/src/core/features/mainmenu/pages/home/home.html
index bb7bd1179..faba964d0 100644
--- a/src/core/features/mainmenu/pages/home/home.html
+++ b/src/core/features/mainmenu/pages/home/home.html
@@ -5,7 +5,8 @@
-
+
diff --git a/src/core/features/mainmenu/pages/home/home.scss b/src/core/features/mainmenu/pages/home/home.scss
deleted file mode 100644
index b8ba15df9..000000000
--- a/src/core/features/mainmenu/pages/home/home.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "~theme/globals";
-
-@if ($core-dashboard-logo) {
- .in-toolbar h1 .core-header-logo {
- max-height: calc(var(--core-header-toolbar-height) - 24px);
- }
-
- .in-toolbar h1 core-format-text {
- display: none;
- }
-} @else {
- .in-toolbar h1 .core-header-logo {
- display: none;
- }
-}
diff --git a/src/core/features/mainmenu/pages/home/home.ts b/src/core/features/mainmenu/pages/home/home.ts
index d536a54bd..9187887b0 100644
--- a/src/core/features/mainmenu/pages/home/home.ts
+++ b/src/core/features/mainmenu/pages/home/home.ts
@@ -29,7 +29,6 @@ import { CoreMainMenuDeepLinkManager } from '@features/mainmenu/classes/deep-lin
@Component({
selector: 'page-core-mainmenu-home',
templateUrl: 'home.html',
- styleUrls: ['home.scss'],
})
export class CoreMainMenuHomePage implements OnInit {
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 45e7221d6..f11236c58 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -119,53 +119,6 @@ body {
}
}
-ion-header ion-title{
- h1, h2, .subheading {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- margin: 0;
- }
-
- .filter_mathjaxloader_equation div {
- display: inline !important;
- }
-}
-
-ion-app.md ion-header ion-title{
- @include padding(0, 20px);
-
- h1, h2, .subheading {
- font-size: 20px;
- font-weight: 500;
- letter-spacing: .0125em;
- }
-
- h1 + h2,
- h1 + .subheading {
- font-size: 14px;
- font-weight: 400;
- }
-}
-
-ion-app.ios ion-header ion-title {
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- h1, h2, .subheading {
- font-size: 17px;
- font-weight: 600;
- }
-
- h1 + h2,
- h1 + .subheading {
- font-size: 14px;
- font-weight: 400;
- }
-}
-
-
// Correctly inherit ion-text-wrap onto labels.
.item ion-label core-format-text .core-format-text-content > *,
.fake-ion-item core-format-text .core-format-text-content > * {
@@ -196,32 +149,109 @@ ion-toolbar {
--min-height: var(--core-header-toolbar-height);
}
-ion-header ion-toolbar {
- ion-back-button,
- .in-toolbar.button-clear {
- --color: var(--core-header-toolbar-color);
- --ion-toolbar-color: var(--core-header-toolbar-color);
- --border-radius: var(--huge-radius);
- }
+// Header.
+ion-header {
+ z-index: 12; // To hide ion-slides on scroll.
- .button.button-clear,
- .button.button-solid {
- --background: transparent;
- --color: var(--core-header-toolbar-color);
- --primary: var(--core-header-toolbar-color);
- }
+ ion-toolbar {
+ ion-spinner {
+ margin: 10px;
+ }
- .button.button-clear.button-has-icon-only,
- .button.button-solid.button-has-icon-only {
- --border-radius: var(--huge-radius);
- width: var(--a11y-min-target-size);
- height: var(--a11y-min-target-size);
- }
+ ion-back-button,
+ .in-toolbar.button-clear {
+ --color: var(--core-header-toolbar-color);
+ --ion-toolbar-color: var(--core-header-toolbar-color);
+ --border-radius: var(--huge-radius);
+ }
+
+ .button.button-clear,
+ .button.button-solid {
+ --background: transparent;
+ --color: var(--core-header-toolbar-color);
+ --primary: var(--core-header-toolbar-color);
+ }
+
+ .button.button-clear.button-has-icon-only,
+ .button.button-solid.button-has-icon-only {
+ --border-radius: var(--huge-radius);
+ width: var(--a11y-min-target-size);
+ height: var(--a11y-min-target-size);
+ ion-icon {
+ font-size: 24px;
+ }
+ }
- .core-navbar-button-hidden {
- display: none !important;
+ .core-navbar-button-hidden {
+ display: none !important;
+ }
}
+
+ ion-title {
+ @include padding(0, 16px);
+
+ h1, h2, .subheading {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin: 0;
+ }
+
+ .filter_mathjaxloader_equation div {
+ display: inline !important;
+ }
+
+ h1 {
+ .core-header-logo {
+ max-height: var(--core-mainpage-headerlogo-maxheight);
+ display: var( --core-mainpage-headerlogo-display);
+ }
+
+ .core-header-sitename {
+ display: var(--core-mainpage-sitename-display);
+ }
+ }
+
+ h1, h2, .subheading {
+ font-size: 20px;
+ font-weight: 500;
+ letter-spacing: .0125em;
+ text-align: start;
+ padding: 0;
+ }
+
+ h1 + h2,
+ h1 + .subheading {
+ font-size: 14px;
+ font-weight: 400;
+ }
+
+ &.ios {
+ position: static;
+ width: auto;
+ height: auto;
+ left: auto;
+ right: auto;
+ top: auto;
+ text-align: start;
+
+ h1, h2, .subheading {
+ font-size: 17px;
+ font-weight: 600;
+ }
+
+ h1 + h2,
+ h1 + .subheading {
+ font-size: 14px;
+ font-weight: 400;
+ }
+ }
+ }
+}
+
+ion-tabs.hide-header ion-header {
+ display: none;
}
ion-footer ion-toolbar.ion-color-contrast {
@@ -474,19 +504,6 @@ core-split-view.menu-and-content {
}
}
-// Header.
-ion-header {
- z-index: 12; // To hide ion-slides on scroll.
-}
-ion-tabs.hide-header ion-header {
- display: none;
-}
-ion-toolbar {
- ion-spinner {
- margin: 10px;
- }
-}
-
// Iframe fullscreen manage.
// Using router outlet to avoid changing styles on modals.
body.core-iframe-fullscreen ion-router-outlet {
@@ -955,6 +972,10 @@ ion-searchbar {
.sc-ion-searchbar-ios.searchbar-input {
@include padding-horizontal(48px);
}
+
+ .searchbar-input {
+ @include padding-horizontal(48px);
+ }
}
// File uploader.
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 33ef85f65..6f2e2b837 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -363,4 +363,14 @@
@each $type, $value in $activity-icon-colors {
--activity#{$type}: #{$value};
}
+
+ --core-mainpage-sitename-display: none;
+ --core-mainpage-headerlogo-display: none;
+ --core-mainpage-headerlogo-maxheight: calc(var(--core-header-toolbar-height) - 16px);
+
+ @if ($core-dashboard-logo) {
+ --core-mainpage-headerlogo-display: inline;
+ } @else {
+ --core-mainpage-sitename-display: inline;
+ }
}
