@@ -66,7 +66,7 @@
color="success" role="status" [attr.aria-label]="'core.downloaded' | translate">
-
{{ 'core.courses.aria:coursecategory' | translate }}
diff --git a/src/core/features/courses/components/course-progress/core-courses-course-progress.html b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
index 9a5976b70..4d529d350 100644
--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@@ -47,7 +47,7 @@
name="fam-cloud-done" color="success" role="status" [attr.aria-label]="'core.downloaded' | translate">
-
diff --git a/src/core/features/courses/pages/my/my.html b/src/core/features/courses/pages/my/my.html
index 0d1d12031..c01f49f85 100644
--- a/src/core/features/courses/pages/my/my.html
+++ b/src/core/features/courses/pages/my/my.html
@@ -31,7 +31,7 @@
-
diff --git a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
index 94c9dc386..5e1ad41d8 100644
--- a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
+++ b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
@@ -80,8 +80,7 @@
+ (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="downAction($event)" (keydown)="downAction($event)">
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 61d29ffbf..bac39ab1b 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -62,7 +62,7 @@
-
{{ 'core.login.forgotten' | translate }}
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 2f628b064..7854dfa37 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -76,7 +76,7 @@
-
{{ 'core.login.forgotten' | translate }}
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index c51e50ee4..3afa0eba1 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -110,7 +110,7 @@
+ aria-haspopup="dialog" expand="block" fill="clear">
{{ 'core.needhelp' | translate }}
diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss
index e6e0b7fea..4f0ebd805 100644
--- a/src/core/features/mainmenu/pages/menu/menu.scss
+++ b/src/core/features/mainmenu/pages/menu/menu.scss
@@ -1,161 +1,178 @@
@import "~theme/globals";
-:host{
- --menutabbar-size: var(--bottom-tabs-size);
-
- ion-tab-bar {
- height: var(--menutabbar-size);
- }
-
- @if ($core-always-show-main-menu) {
- ion-tabs.placement-bottom ion-tab-bar {
- height: var(--menutabbar-size) !important;
- visibility: visible !important;
- transform: translateY(0) !important;
- }
- } @else {
- ion-tabs.tabshidden.placement-bottom ion-tab-bar {
- pointer-events: none;
-
- ion-tab-button {
- height: auto;
- }
- }
-
- }
-
- ion-tab-button ion-icon.core-tab-icon {
- text-overflow: unset;
- overflow: visible;
- text-align: center;
- }
-
- ion-tab-button.ios ion-icon.core-tab-icon {
- font-size: 25px;
- }
-
- ion-tab-button.md ion-badge.core-tab-badge {
- font-size: 12px;
- font-weight: bold;
- border-radius: 10px;
- padding-left: 6px;
- padding-right: 6px;
- line-height: 14px;
- }
-
- ion-tab-button.tab-selected {
- background: var(--background-selected);
- }
-
- ion-icon.core-tab-badge {
- color: var(--core-bottom-tabs-badge-color);
- padding: 3px 6px 2px;
- @include position(8px, null, null, calc(50% + 6px));
- min-width: 12px;
- font-size: 8px;
- font-weight: normal;
- box-sizing: border-box;
- position: absolute;
- z-index: 1;
- }
-
- ion-badge.core-tab-badge {
- --background: var(--core-bottom-tabs-badge-color);
- --color: var(--core-bottom-tabs-badge-text-color);
- }
-
- ion-tabs.placement-bottom ion-tab-button {
- ion-icon.core-tab-icon {
- transition: margin 500ms ease-in-out, transform 300ms ease-in-out;
- }
- ion-icon.core-tab-badge,
- ion-badge.core-tab-badge {
- top: 8px;
- }
+:host {
+ ion-tabs {
+ --menutabbar-size: var(--bottom-tabs-size);
}
ion-tabs.placement-side {
- flex-direction: row;
- ion-tab-bar {
- order: -1;
- width: var(--menutabbar-size);
- height: calc(100% - var(--ion-safe-area-top) - var(--ion-safe-area-bottom));
- flex-direction: column;
- @include border-end(var(--border));
- border-top: 0;
- justify-content: flex-start;
-
- @include padding(var(--ion-safe-area-top), 0px, var(--ion-safe-area-bottom), var(--ion-safe-area-left));
-
- ion-tab-button, core-user-menu-button {
- width: 100%;
- min-height: var(--menutabbar-size);
- flex: 0;
-
- ion-icon.core-tab-badge,
- ion-badge.core-tab-badge {
- top: calc(50% - 20px);
- }
- }
- }
+ --menutabbar-size: var(--side-tabs-size);
}
+ --network-margin-bottom: 0px;
+ --network-message-background: transparent;
+ --network-message-offline: none;
+ --network-message-online: none;
+ --network-message-height: 16px;
+}
+
+:host-context(.core-online),
+:host-context(.core-offline) {
+ .core-network-message {
+ visibility: visible;
+ height: var(--network-message-height);
+ padding-bottom: calc(var(--ion-safe-area-bottom, 0px) + var(--network-message-height));
+ }
+}
+
+:host-context(.core-online) {
+ --network-margin-bottom: 8px;
+
+ --network-message-background: var(--success);
+ --network-message-online: block;
+}
+
+:host-context(.core-offline) {
+ --network-margin-bottom: 8px;
+
+ --network-message-background: var(--danger);
+ --network-message-offline: block;
+}
+
+ion-tab-bar {
+ height: var(--menutabbar-size);
+
core-user-menu-button {
align-items: center;
display: flex;
justify-content: center;
}
- .core-network-message {
- --network-message-height: 16px;
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- padding-left: 10px;
- padding-right: 10px;
- text-align: center;
- color: white;
- visibility: hidden;
- height: 0;
- transition: all 500ms ease-in-out;
- opacity: .8;
- z-index: 12;
- }
+ ion-tab-button {
+ &.tab-selected {
+ background: var(--background-selected);
+ }
- .core-online-message,
- .core-offline-message {
- display: none;
+ ion-icon.core-tab-icon {
+ text-overflow: unset;
+ overflow: visible;
+ text-align: center;
+ font-size: 24px;
+ }
+
+ ion-badge.core-tab-badge {
+ font-size: 12px;
+ font-weight: bold;
+ border-radius: 10px;
+ padding-left: 6px;
+ padding-right: 6px;
+ line-height: 14px;
+ --background: var(--core-bottom-tabs-badge-color);
+ --color: var(--core-bottom-tabs-badge-text-color);
+ }
+
+ ion-icon.core-tab-badge {
+ color: var(--core-bottom-tabs-badge-color);
+ padding: 3px 6px 2px;
+ @include position(8px, null, null, calc(50% + 6px));
+ min-width: 12px;
+ font-size: 8px;
+ font-weight: normal;
+ box-sizing: border-box;
+ position: absolute;
+ z-index: 1;
+ }
}
}
-:host-context(.core-online),
-:host-context(.core-offline) {
- ion-tabs.placement-bottom ion-tab-button ion-icon.core-tab-icon {
- margin-bottom: 8px;
+ion-tabs.placement-bottom {
+ ion-tab-button {
+ ion-icon.core-tab-icon {
+ margin-bottom: var(--network-margin-bottom);
+ transition: margin 500ms ease-in-out, transform 300ms ease-in-out;
+ }
+
+ ion-icon.core-tab-badge,
+ ion-badge.core-tab-badge {
+ top: 8px;
+ }
}
- ion-tabs.placement-bottom ion-tab-button.ios ion-icon.core-tab-icon {
- margin-bottom: 14px;
- }
+ @if ($core-always-show-main-menu) {
+ ion-tab-bar {
+ height: var(--menutabbar-size) !important;
+ visibility: visible !important;
+ transform: translateY(0) !important;
+ }
+ } @else {
+ &.tabshidden ion-tab-bar {
+ pointer-events: none;
- .core-network-message {
- visibility: visible;
- height: var(--network-message-height);
- padding-bottom: calc(var(--ion-safe-area-bottom, 0px) + var(--network-message-height));
- pointer-events: none;
+ ion-tab-button {
+ height: auto;
+ }
+ }
}
}
-:host-context(.core-offline) .core-offline-message,
-:host-context(.core-online) .core-online-message {
- display: block;
+ion-tabs.placement-side {
+ flex-direction: row;
+
+ ion-tab-bar {
+ order: -1;
+ width: var(--menutabbar-size);
+ height: calc(100% - var(--ion-safe-area-top) - var(--ion-safe-area-bottom));
+ flex-direction: column;
+ @include border-end(var(--border));
+ border-top: 0;
+ justify-content: flex-start;
+
+ @include padding(var(--ion-safe-area-top), 0px, var(--ion-safe-area-bottom), var(--ion-safe-area-left));
+
+ ion-tab-button {
+ --padding-start: 0;
+ --padding-end: 0;
+ ion-badge.core-tab-badge {
+ @include position(null, 1px, null, auto);
+ }
+ }
+
+
+ ion-tab-button, core-user-menu-button {
+ width: 100%;
+ min-height: var(--menutabbar-size);
+ flex: 0;
+
+ ion-icon.core-tab-badge,
+ ion-badge.core-tab-badge {
+ top: calc(50% - 20px);
+ }
+ }
+ }
}
-:host-context(.core-online) .core-network-message {
- background: var(--success);
-}
+.core-network-message {
+ background: var(--network-message-background);
+ pointer-events: none;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding-left: 10px;
+ padding-right: 10px;
+ text-align: center;
+ color: white;
+ visibility: hidden;
+ height: 0;
+ transition: all 500ms ease-in-out;
+ opacity: .8;
+ z-index: 12;
-:host-context(.core-offline) .core-network-message {
- background: var(--danger);
+ .core-online {
+ display: var(--network-message-online);
+ }
+
+ .core-offline {
+ display: var(--network-message-offline);
+ }
}
diff --git a/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html b/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html
index b47edea6c..287220e84 100644
--- a/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html
+++ b/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html
@@ -14,5 +14,5 @@
(onLoadingContent)="contentLoading()">
-
+
diff --git a/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html b/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
index 04564f703..c80615fda 100644
--- a/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
+++ b/src/core/features/siteplugins/components/only-title-block/core-siteplugins-only-title-block.html
@@ -1,4 +1,4 @@
-
+
{{ title | translate }}
diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
index 295192bbe..62028bf62 100644
--- a/src/core/features/user/pages/about/about.html
+++ b/src/core/features/user/pages/about/about.html
@@ -17,7 +17,7 @@
+ [attr.aria-label]="'core.user.newpicture' | translate" fill="clear">
@@ -94,7 +94,7 @@
-
+
{{ 'core.user.interests' | translate}}
diff --git a/src/core/singletons/colors.ts b/src/core/singletons/colors.ts
index b86c8b500..d0e0e3dfa 100644
--- a/src/core/singletons/colors.ts
+++ b/src/core/singletons/colors.ts
@@ -25,7 +25,6 @@ interface ColorComponents {
* Ionic color names.
*/
export enum CoreIonicColorNames {
- BRAND = 'brand',
PRIMARY = 'primary',
SECONDARY = 'secondary',
SUCCESS = 'success',
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index 09430b3a4..5f8d3a5fe 100644
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@@ -17,7 +17,7 @@ $gray-900: #1d2125 !default; // Copy text
$black: #000000 !default; // Avoid usage
$blue: #0f6cbf !default;
-$cyan: #008196 !default;
+$cyan: #008196 !default; // Not used.
$green: #357a32 !default;
$red: #ca3120 !default;
$yellow: #f0ad4e !default;
@@ -39,19 +39,19 @@ $ion-item-background-rgb: color-to-rgb-list($ion-item-background) !default;
$ion-item-background-dark: $gray-900 !default;
$ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default;
-$primary: $blue !default;
-$secondary: $gray-400 !default;
+$primary: $brand-color !default;
+$secondary: $gray-300 !default;
$danger: $red !default;
$warning: $yellow !default;
$success: $green !default;
-$info: $cyan !default;
+$info: $blue !default;
$light: $gray-100 !default;
$medium: $gray-600 !default;
$dark: $gray-800 !default;
$colors: (
- primary: (light: $primary),
- secondary: (light: $secondary),
+ primary: (light: $primary, dark: $primary),
+ secondary: (light: $secondary, dark: $gray-700),
success: (light: $success),
warning: (light: $warning),
danger: (light: $danger),
@@ -59,7 +59,6 @@ $colors: (
light: (light: $light, dark: $dark),
medium: (light: $medium, dark: $gray-200),
dark: (light: $dark, dark: $light),
- brand: (light: $brand-color, dark: $brand-color),
) !default;
/**
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 3181dbb72..647a1d7f3 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -370,6 +370,10 @@ ion-button.button.button-clear.button-has-icon-only {
--border-radius: var(--huge-radius);
}
+ion-button.button.button-clear {
+ --color: var(--dark);
+}
+
ion-button.button.button-solid,
ion-button.button.button-outline {
--border-radius: var(--core-input-radius);
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 358d341f1..e4985f605 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -65,7 +65,7 @@
}
}
- --core-link-color: var(--primary-tint);
+ --core-link-color: var(--info-tint);
--core-header-toolbar-background: var(--gray-900);
--core-header-toolbar-color: var(--white);
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 99cc6f2a9..2c054b588 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -47,7 +47,8 @@
@include generate-color($color-name, $colors);
}
- --brand-color: var(--brand);
+ --brand-color: var(--primary);
+ --brand-contrast: var(--primary-contrast);
// Accessibility vars.
--a11y-min-target-size: 44px;
@@ -112,11 +113,12 @@
--core-bottom-tabs-background: var(--white);
--core-bottom-tabs-color: var(--gray-700);
- --core-bottom-tabs-color-selected: var(--brand);
+ --core-bottom-tabs-color-selected: var(--brand-color);
--core-bottom-tabs-background-selected: transparent;
- --core-bottom-tabs-badge-color: var(--brand);
+ --core-bottom-tabs-badge-color: var(--brand-color);
--core-bottom-tabs-badge-text-color: var(--brand-contrast);
--bottom-tabs-size: 48px;
+ --side-tabs-size: 56px;
ion-tab-bar.mainmenu-tabs {
--background: var(--core-bottom-tabs-background);
--color: var(--core-bottom-tabs-color);
@@ -124,7 +126,7 @@
--background-selected: var(--core-bottom-tabs-background-selected);
}
- --core-link-color: var(--primary);
+ --core-link-color: var(--info);
a {
color: var(--core-link-color);
}
@@ -201,7 +203,7 @@
ion-action-sheet {
--button-color: var(--ion-text-color);
--button-color-selected: var(--ion-text-color);
- --title-border-color: var(--brand);
+ --title-border-color: var(--brand-color);
.action-sheet-title {
--color: var(--ion-text-color);
@@ -223,7 +225,7 @@
--core-tab-color: var(--subdued-text-color);
--core-tab-border-color: var(--stroke);
--core-tab-color-active: var(--dark);
- --core-tab-border-color-active: var(--brand);
+ --core-tab-border-color-active: var(--brand-color);
--core-tab-font-weight-active: normal;
--core-tabs-height: 48px;
core-tabs, core-tabs-outlet {
@@ -237,7 +239,7 @@
}
}
- --core-loading-spinner: var(--brand);
+ --core-loading-spinner: var(--brand-color);
ion-loading {
--spinner-color: var(--core-loading-spinner);
}
@@ -248,7 +250,7 @@
}
--core-progressbar-height: 8px;
- --core-progressbar-color: var(--brand);
+ --core-progressbar-color: var(--brand-color);
--core-progressbar-text-color: var(--medium);
--core-progressbar-background: var(--brand-tint);
@@ -302,7 +304,7 @@
--core-login-input-background: var(--white);
--core-login-input-color: var(--gray-900);
- --core-star-color: var(--brand);
+ --core-star-color: var(--brand-color);
--core-large-avatar-size: 90px;
--core-avatar-size: var(--a11y-min-target-size);