2021-02-03 09:30:07 +00:00
|
|
|
/*
|
|
|
|
|
* App LIGHT theme CSS
|
|
|
|
|
* ----------------------------------------------------------------------------
|
|
|
|
|
* Ionic Variables and Theming. For more info, please see:
|
|
|
|
|
* http://ionicframework.com/docs/theming/
|
|
|
|
|
*/
|
2020-10-06 10:48:02 +00:00
|
|
|
|
2020-10-05 12:56:27 +00:00
|
|
|
:root {
|
2020-10-22 13:13:12 +00:00
|
|
|
|
|
|
|
|
// Color palette
|
2021-02-03 09:30:07 +00:00
|
|
|
--black: #{$black}; // Headings, standard text.
|
2021-06-16 16:00:21 +00:00
|
|
|
--gray-darker: #{$gray-darker}; // Text (emphasis-detail), placeholder, background.
|
|
|
|
|
--gray-dark: #{$gray-dark}; // Borders (never text).
|
2021-02-03 09:30:07 +00:00
|
|
|
--gray: #{$gray};
|
2021-06-16 16:00:21 +00:00
|
|
|
--gray-light: #{$gray-light}; // Background.
|
2021-02-03 09:30:07 +00:00
|
|
|
--gray-lighter: #{$gray-lighter};
|
2021-06-16 16:00:21 +00:00
|
|
|
--white: #{$white}; // Background, reversed text.
|
2021-02-03 09:30:07 +00:00
|
|
|
|
|
|
|
|
--blue: #{$blue};
|
2021-02-03 14:59:12 +00:00
|
|
|
--blue-light: #{$blue-light};
|
2021-02-23 07:53:24 +00:00
|
|
|
--blue-dark: #{$blue-dark};
|
|
|
|
|
|
2021-02-03 09:30:07 +00:00
|
|
|
--green: #{$green};
|
2021-02-23 07:53:24 +00:00
|
|
|
--green-light: #{$green-light};
|
|
|
|
|
--green-dark: #{$green-dark};
|
|
|
|
|
|
2021-02-03 09:30:07 +00:00
|
|
|
--red: #{$red};
|
2021-02-23 07:53:24 +00:00
|
|
|
--red-light: #{$red-light};
|
|
|
|
|
--red-dark: #{$red-dark};
|
|
|
|
|
|
2021-02-03 09:30:07 +00:00
|
|
|
--yellow: #{$yellow};
|
2021-02-23 07:53:24 +00:00
|
|
|
--yellow-light: #{$yellow-light};
|
|
|
|
|
--yellow-dark: #{$yellow-dark};
|
2021-02-03 09:30:07 +00:00
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--turquoise: #007982; // Accent.
|
|
|
|
|
--purple: #8e24aa;
|
|
|
|
|
|
|
|
|
|
--text-color: #{$text-color};
|
|
|
|
|
--background-color: #{$background-color};
|
|
|
|
|
|
|
|
|
|
--brand-color: #{$brand-color};
|
|
|
|
|
--brand-color-contrast: var(--text-color);
|
2021-02-23 07:53:24 +00:00
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--core-online-color: #5cb85c;
|
2021-02-03 09:30:07 +00:00
|
|
|
|
|
|
|
|
// Named Color Variables
|
2021-06-16 16:00:21 +00:00
|
|
|
--primary: var(--brand-color);
|
|
|
|
|
--success: #{$success};
|
|
|
|
|
--danger: #{$danger};
|
|
|
|
|
--warning: #{$warning};
|
|
|
|
|
--info: #{$info};
|
|
|
|
|
--light: #{$light};
|
|
|
|
|
--dark: #{$dark};
|
|
|
|
|
--medium: #{$medium};
|
2021-02-23 07:53:24 +00:00
|
|
|
|
|
|
|
|
@each $color-name, $value in $colors {
|
2021-05-14 08:26:52 +00:00
|
|
|
@include generate-color($color-name, $colors);
|
2021-02-23 07:53:24 +00:00
|
|
|
}
|
|
|
|
|
|
2021-05-06 09:33:10 +00:00
|
|
|
// Accessibility vars.
|
|
|
|
|
--a11y-min-target-size: 44px;
|
2021-05-13 14:39:16 +00:00
|
|
|
--a11y-focus-color: var(--primary);
|
|
|
|
|
--a11y-focus-width: 2px;
|
2021-05-06 09:33:10 +00:00
|
|
|
|
2021-05-10 09:52:41 +00:00
|
|
|
--module-icon-size: 24px;
|
|
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--ion-background-color: var(--background-color);
|
|
|
|
|
--ion-background-color-rgb: #{$background-color-rgb};
|
2021-05-18 15:11:00 +00:00
|
|
|
|
2021-06-02 10:44:34 +00:00
|
|
|
--contrast-background: white;
|
|
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--ion-text-color: var(--text-color);
|
|
|
|
|
--ion-text-color-rgb: #{$text-color-rgb};
|
|
|
|
|
--subdued-text-color: #595959;
|
2021-06-02 10:44:34 +00:00
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--ion-card-color: var(--text-color);
|
2020-10-22 13:13:12 +00:00
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--text-hightlight-background-color: #{$core-text-hightlight-background-color};
|
2021-01-21 14:00:38 +00:00
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--ion-placeholder-color: var(--subdued-text-color);
|
2021-06-15 11:23:48 +00:00
|
|
|
|
2020-10-22 13:13:12 +00:00
|
|
|
ion-content {
|
2021-05-18 15:11:00 +00:00
|
|
|
--background: var(--ion-background-color);
|
2021-05-21 09:17:27 +00:00
|
|
|
--background-alternative: var(--gray-lighter);
|
2020-10-22 13:13:12 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--core-bottom-tabs-background: var(--black);
|
|
|
|
|
--core-bottom-tabs-color: var(--gray-lighter);
|
|
|
|
|
--core-bottom-tabs-color-selected: var(--brand-color);
|
2021-09-08 16:00:29 +00:00
|
|
|
--core-bottom-tabs-background-selected: transparent;
|
2021-06-16 16:00:21 +00:00
|
|
|
--core-bottom-tabs-badge-color: var(--brand-color);
|
|
|
|
|
--core-bottom-tabs-badge-text-color: var(--brand-color-contrast);
|
|
|
|
|
--bottom-tabs-size: 56px;
|
2021-05-26 07:51:12 +00:00
|
|
|
ion-tab-bar.mainmenu-tabs {
|
2021-05-07 08:31:06 +00:00
|
|
|
--background: var(--core-bottom-tabs-background);
|
|
|
|
|
--color: var(--core-bottom-tabs-color);
|
|
|
|
|
--color-selected: var(--core-bottom-tabs-color-selected);
|
2021-07-07 13:24:16 +00:00
|
|
|
--background-selected: var(--core-bottom-tabs-background-selected);
|
2021-05-19 14:26:59 +00:00
|
|
|
ion-badge {
|
|
|
|
|
--background: var(--core-bottom-tabs-badge-color);
|
|
|
|
|
--color: var(--core-bottom-tabs-badge-text-color);
|
|
|
|
|
}
|
2020-10-22 13:13:12 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--core-link-color: var(--blue);
|
2021-05-07 08:31:06 +00:00
|
|
|
a {
|
|
|
|
|
color: var(--core-link-color);
|
|
|
|
|
}
|
|
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--core-header-toolbar-button-image-size: 44px;
|
|
|
|
|
--core-header-toolbar-background: var(--white);
|
|
|
|
|
--core-header-toolbar-border-width: 3px;
|
|
|
|
|
--core-header-toolbar-border-color: var(--brand-color);
|
|
|
|
|
--core-header-toolbar-color: var(--black);
|
|
|
|
|
--core-header-toolbar-height: 56px;
|
|
|
|
|
html.ios {
|
|
|
|
|
--core-header-toolbar-height: 54px;
|
|
|
|
|
}
|
|
|
|
|
|
2021-06-07 08:22:27 +00:00
|
|
|
ion-header ion-toolbar {
|
2021-05-07 08:31:06 +00:00
|
|
|
--color: var(--core-header-toolbar-color);
|
|
|
|
|
--background: var(--core-header-toolbar-background);
|
2021-06-02 10:44:34 +00:00
|
|
|
--border-width: 0 0 var(--core-header-toolbar-border-width) 0;
|
|
|
|
|
--border-color: var(--core-header-toolbar-border-color);
|
|
|
|
|
|
2020-12-04 15:10:10 +00:00
|
|
|
ion-button {
|
2021-06-07 08:22:27 +00:00
|
|
|
--ion-toolbar-color: var(--core-header-toolbar-color);
|
2021-05-07 08:31:06 +00:00
|
|
|
--color: var(--core-header-toolbar-color);
|
2020-12-04 15:10:10 +00:00
|
|
|
}
|
2020-11-20 10:59:36 +00:00
|
|
|
|
|
|
|
|
ion-spinner {
|
2021-05-19 14:26:59 +00:00
|
|
|
--ion-color-base: var(--core-header-toolbar-color);
|
2021-05-07 08:31:06 +00:00
|
|
|
--color: var(--core-header-toolbar-color);
|
2020-11-20 10:59:36 +00:00
|
|
|
}
|
2020-10-22 13:13:12 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-07 08:22:27 +00:00
|
|
|
ion-header.header-ios ion-toolbar:last-of-type {
|
|
|
|
|
--border-width: 0 0 var(--core-header-toolbar-border-width) 0;
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-27 14:10:43 +00:00
|
|
|
ion-searchbar {
|
|
|
|
|
--background: var(--ion-item-background);
|
|
|
|
|
.searchbar-input {
|
|
|
|
|
height: var(--a11y-min-target-size);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-04 16:37:02 +00:00
|
|
|
ion-action-sheet {
|
2021-06-02 10:44:34 +00:00
|
|
|
--button-color: var(--ion-text-color);
|
|
|
|
|
--button-color-selected: var(--ion-text-color);
|
2021-07-01 10:17:26 +00:00
|
|
|
--title-border-color: var(--brand-color);
|
2021-05-07 08:31:06 +00:00
|
|
|
|
|
|
|
|
.action-sheet-title {
|
2021-06-02 10:44:34 +00:00
|
|
|
--color: var(--ion-text-color);
|
2021-07-01 10:17:26 +00:00
|
|
|
font-weight: bold;
|
2021-05-07 08:31:06 +00:00
|
|
|
}
|
2020-11-04 16:37:02 +00:00
|
|
|
|
|
|
|
|
@media (min-height: 500px) {
|
|
|
|
|
--max-height: 50%;
|
|
|
|
|
--height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-sheet-cancel {
|
|
|
|
|
--button-color: var(--ion-color-danger);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--core-tabs-background: var(--white);
|
|
|
|
|
--core-tab-background: var(--core-tabs-background);
|
|
|
|
|
--core-tab-color: var(--subdued-text-color);
|
|
|
|
|
--core-tab-border-color: var(--gray);
|
|
|
|
|
--core-tab-color-active: var(--dark);
|
|
|
|
|
--core-tab-border-color-active: var(--brand-color);
|
|
|
|
|
--core-tab-font-weight-active: normal;
|
|
|
|
|
--core-tabs-height: 56px;
|
2021-02-01 11:32:10 +00:00
|
|
|
core-tabs, core-tabs-outlet {
|
2020-11-03 07:37:59 +00:00
|
|
|
ion-slide {
|
2021-01-26 16:38:23 +00:00
|
|
|
--background: var(--core-tab-background);
|
|
|
|
|
--color: var(--core-tab-color);
|
2021-05-05 15:41:37 +00:00
|
|
|
--border-color: var(--core-tab-border-color);
|
2021-01-26 16:38:23 +00:00
|
|
|
--color-active: var(--core-tab-color-active);
|
|
|
|
|
--border-color-active: var(--core-tab-border-color-active);
|
2021-06-03 10:35:16 +00:00
|
|
|
--font-weight-active: var(--core-tab-font-weight-active);
|
2020-11-03 07:37:59 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-12 08:44:44 +00:00
|
|
|
ion-spinner {
|
2021-05-19 14:26:59 +00:00
|
|
|
--ion-color-base: var(--ion-color-primary);
|
2021-05-07 08:31:06 +00:00
|
|
|
--color: var(--ion-color-primary);
|
2020-11-12 08:44:44 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--core-progressbar-height: 8px;
|
|
|
|
|
--core-progressbar-color: var(--brand-color);
|
|
|
|
|
--core-progressbar-text-color: var(--gray-darker);
|
|
|
|
|
--core-progressbar-background: var(--gray-lighter);
|
2020-11-18 10:07:56 +00:00
|
|
|
core-progress-bar {
|
2021-05-27 14:10:43 +00:00
|
|
|
--height: var(--core-progressbar-height);
|
|
|
|
|
--color: var(--core-progressbar-color);
|
|
|
|
|
--text-color: var(--core-progressbar-text-color);
|
|
|
|
|
--background: var(--core-progressbar-background);
|
2020-11-18 10:07:56 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--core-side-blocks-max-width: 30%;
|
|
|
|
|
--core-side-blocks-min-width: 280px;
|
2020-12-07 16:04:31 +00:00
|
|
|
core-block-course-blocks {
|
2021-06-16 16:00:21 +00:00
|
|
|
--side-blocks-max-width: var(--core-side-blocks-max-width);
|
|
|
|
|
--side-blocks-min-width: var(--core-side-blocks-min-width);
|
2020-12-07 16:04:31 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--ion-item-background: #{$ion-item-background};
|
2021-05-03 13:32:10 +00:00
|
|
|
--ion-item-detail-icon-color: var(--gray-darker);
|
|
|
|
|
--ion-item-detail-icon-font-size: 20px;
|
|
|
|
|
--ion-item-detail-icon-opacity: 1;
|
|
|
|
|
ion-item {
|
|
|
|
|
--detail-icon-color: var(--ion-item-detail-icon-color);
|
|
|
|
|
--detail-icon-font-size: var(--ion-item-detail-icon-font-size);
|
|
|
|
|
--detail-icon-opacity: var(--ion-item-detail-icon-opacity);
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-10 10:19:34 +00:00
|
|
|
--item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
|
2021-06-16 16:00:21 +00:00
|
|
|
--item-divider-background: var(--gray-lighter);
|
|
|
|
|
--item-divider-color: var(--text-color);
|
2021-05-11 09:52:57 +00:00
|
|
|
ion-item-divider, ion-item.divider {
|
2021-05-19 14:26:59 +00:00
|
|
|
--background: var(--item-divider-background);
|
|
|
|
|
--color: var(--item-divider-color);
|
2021-05-11 09:52:57 +00:00
|
|
|
--min-height: var(--item-divider-min-height);
|
|
|
|
|
min-height: var(--min-height);
|
2020-12-14 13:50:37 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
--spacer-background: var(--item-divider-background);
|
2021-05-21 09:17:27 +00:00
|
|
|
core-spacer {
|
2021-06-02 10:01:26 +00:00
|
|
|
--item-divider-background: var(--spacer-background);
|
2021-05-21 09:17:27 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-15 11:23:48 +00:00
|
|
|
ion-note {
|
|
|
|
|
--color: var(--subdued-text-color);
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-07 08:31:06 +00:00
|
|
|
--core-combobox-background: var(--ion-item-background);
|
2021-06-16 16:00:21 +00:00
|
|
|
--core-combobox-color: var(--black);
|
|
|
|
|
--core-combobox-border-color: var(--primary);
|
|
|
|
|
--core-combobox-border-width: 3px;
|
2021-07-07 13:24:16 +00:00
|
|
|
--core-combobox-border-all-width: 0 0 var(--core-combobox-border-width) 0;
|
|
|
|
|
--core-combobox-radius: 0;
|
|
|
|
|
--core-combobox-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
2021-06-16 16:00:21 +00:00
|
|
|
|
|
|
|
|
--selected-item-color: var(--primary);
|
|
|
|
|
--selected-item-border-width: 5px;
|
|
|
|
|
|
|
|
|
|
--core-login-background: var(--white);
|
|
|
|
|
--core-login-text-color: var(--black);
|
|
|
|
|
--core-login-input-background: var(--white);
|
|
|
|
|
--core-login-input-color: var(--black);
|
|
|
|
|
|
|
|
|
|
--core-star-color: var(--brand-color);
|
|
|
|
|
|
|
|
|
|
--core-large-avatar-size: 90px;
|
|
|
|
|
--core-avatar-size: 44px;
|
|
|
|
|
|
|
|
|
|
--core-send-message-input-background: var(--gray-light);
|
|
|
|
|
--core-send-message-input-color: var(--black);
|
|
|
|
|
|
|
|
|
|
--core-courseimage-on-course-height: 150px;
|
|
|
|
|
|
|
|
|
|
--addon-calendar-event-category-color: var(--purple);
|
|
|
|
|
--addon-calendar-event-course-color: var(--red);
|
|
|
|
|
--addon-calendar-event-group-color: var(--yellow);
|
|
|
|
|
--addon-calendar-event-user-color: var(--blue);
|
|
|
|
|
--addon-calendar-event-site-color: var(--green);
|
|
|
|
|
--addon-calendar-today-border-color: var(--primary);
|
|
|
|
|
--addon-calendar-border-color: var(--gray);
|
|
|
|
|
|
|
|
|
|
--addon-messages-message-bg: var(--white);
|
|
|
|
|
--addon-messages-message-activated-bg: var(--gray-light);
|
|
|
|
|
--addon-messages-message-note-text: var(--gray-dark);
|
|
|
|
|
--addon-messages-message-note-font-size: 75%;
|
|
|
|
|
--addon-messages-message-mine-bg: var(--gray-light);
|
|
|
|
|
--addon-messages-message-mine-activated-bg: var(--gray);
|
|
|
|
|
--addon-messages-avatar-size: 30px;
|
|
|
|
|
--addon-messages-discussion-badge: var(--primary);
|
|
|
|
|
--addon-messages-discussion-badge-text: var(--white);
|
|
|
|
|
|
|
|
|
|
--addon-forum-avatar-size: var(--core-avatar-size);
|
|
|
|
|
--addon-forum-border-color: var(--gray);
|
|
|
|
|
--addon-forum-highlight-color: var(--gray-lighter);
|
2021-02-16 10:18:12 +00:00
|
|
|
|
2021-05-10 09:52:41 +00:00
|
|
|
--drop-shadow: 0, 0, 0, 0.18;
|
2021-01-26 11:21:40 +00:00
|
|
|
|
2021-05-10 09:52:41 +00:00
|
|
|
--core-menu-box-shadow-end: -4px 0px 16px rgba(var(--drop-shadow));
|
|
|
|
|
--core-menu-box-shadow-start: 4px 0px 16px rgba(var(--drop-shadow));
|
2021-02-18 08:19:38 +00:00
|
|
|
|
|
|
|
|
--core-question-correct-color: var(--green-dark);
|
|
|
|
|
--core-question-correct-color-bg: var(--green-light);
|
|
|
|
|
--core-question-incorrect-color: var(--red);
|
|
|
|
|
--core-question-incorrect-color-bg: var(--red-light);
|
|
|
|
|
--core-question-feedback-color: var(--yellow-dark);
|
|
|
|
|
--core-question-feedback-color-bg: var(--yellow-light);
|
|
|
|
|
--core-question-warning-color: var(--red);
|
|
|
|
|
--core-question-saved-color-bg: var(--gray-light);
|
|
|
|
|
|
|
|
|
|
--core-question-state-correct-color: var(--green-light);
|
|
|
|
|
--core-question-state-partial-color: var(--yellow-light);
|
|
|
|
|
--core-question-state-partial-text: var(--yellow);
|
|
|
|
|
--core-question-state-incorrect-color: var(--red-light);
|
|
|
|
|
|
|
|
|
|
--core-question-feedback-color: var(--yellow-dark);
|
|
|
|
|
--core-question-feedback-background-color: var(--yellow-light);
|
|
|
|
|
|
|
|
|
|
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark);
|
2021-05-28 12:15:42 +00:00
|
|
|
--core-dd-question-radius: 10px;
|
|
|
|
|
--core-dd-question-border: var(--gray-darker);
|
2021-05-06 09:33:10 +00:00
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
@for $i from 0 to length($core-course-image-background) {
|
|
|
|
|
--core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)};
|
2021-05-14 15:08:41 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-16 16:00:21 +00:00
|
|
|
@for $i from 0 to length($core-dd-question-colors) {
|
|
|
|
|
--core-dd-question-color-#{$i + 1}: #{nth($core-dd-question-colors, $i + 1)};
|
|
|
|
|
--core-dd-question-color-#{$i + 1}-contrast: #{get_contrast_color(nth($core-dd-question-colors, $i + 1))};
|
2021-05-14 15:08:41 +00:00
|
|
|
}
|
2020-10-05 12:56:27 +00:00
|
|
|
}
|
