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.
|
|
|
|
|
--gray-darker: #{$gray-darker};
|
|
|
|
|
--gray-dark: #{$gray-dark};
|
|
|
|
|
--gray: #{$gray};
|
|
|
|
|
--gray-light: #{$gray-light};
|
|
|
|
|
--gray-lighter: #{$gray-lighter};
|
|
|
|
|
--white: #{$white};
|
|
|
|
|
|
|
|
|
|
--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
|
|
|
--turquoise: #{$turquoise};
|
2021-02-23 07:53:24 +00:00
|
|
|
--turquoise-light: #{$turquoise-light};
|
|
|
|
|
--turquoise-dark: #{$turquoise-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
|
|
|
--orange: #{$orange};
|
2021-02-23 07:53:24 +00:00
|
|
|
--orange-light: #{$orange-light};
|
|
|
|
|
|
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
|
|
|
--purple: #{$purple};
|
|
|
|
|
|
2021-02-23 07:53:24 +00:00
|
|
|
--core-color: #{$core-color};
|
|
|
|
|
--core-color-light: #{$core-color-light};
|
|
|
|
|
--core-color-dark: #{$core-color-dark};
|
|
|
|
|
|
2021-02-03 09:30:07 +00:00
|
|
|
--core-online-color: #{$core-online-color};
|
|
|
|
|
|
|
|
|
|
// Named Color Variables
|
2021-03-31 07:17:14 +00:00
|
|
|
--primary: #{$primary};
|
|
|
|
|
--secondary: #{$secondary};
|
|
|
|
|
--tertiary: #{$tertiary};
|
|
|
|
|
--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 {
|
|
|
|
|
@include generate-color($color-name);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
--ion-text-color: #{$text-color};
|
2020-10-22 13:13:12 +00:00
|
|
|
--ion-text-color-rgb: 58,58,58;
|
2021-01-12 09:38:34 +00:00
|
|
|
--ion-card-color: var(--ion-text-color);
|
2020-10-22 13:13:12 +00:00
|
|
|
|
2021-01-21 14:00:38 +00:00
|
|
|
--text-hightlight-background-color: var(--custom-text-hightlight-background-color, #99c1ed);
|
|
|
|
|
|
2020-10-22 13:13:12 +00:00
|
|
|
ion-content {
|
2021-02-03 09:30:07 +00:00
|
|
|
--background: #{$background-color};
|
2021-01-22 16:06:30 +00:00
|
|
|
--background-lighter: var(--gray-lighter);
|
2020-12-14 13:50:37 +00:00
|
|
|
--contrast-background: var(--white);
|
2020-10-22 13:13:12 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ion-tab-bar {
|
2020-11-03 07:37:59 +00:00
|
|
|
--background: var(--custom-bottom-tabs-background, var(--gray-darker));
|
|
|
|
|
--color: var(--custom-bottom-tabs-color, var(--white));
|
2020-10-22 13:13:12 +00:00
|
|
|
}
|
|
|
|
|
|
2021-01-26 11:21:40 +00:00
|
|
|
--core-toolbar-button-image-width: var(--custom-toolbar-button-image-width, 32px);
|
2020-11-23 11:30:30 +00:00
|
|
|
--ion-statusbar-background: var(--custom-toolbar-background, var(--ion-color-primary));
|
2020-10-22 13:13:12 +00:00
|
|
|
ion-toolbar {
|
2020-11-03 07:37:59 +00:00
|
|
|
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
|
2020-11-23 11:30:30 +00:00
|
|
|
--background: var(--ion-statusbar-background);
|
2020-12-04 15:10:10 +00:00
|
|
|
ion-button {
|
|
|
|
|
--ion-toolbar-color: transparent;
|
2021-02-23 07:53:24 +00:00
|
|
|
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
|
2020-12-04 15:10:10 +00:00
|
|
|
}
|
2020-11-20 10:59:36 +00:00
|
|
|
|
|
|
|
|
ion-spinner {
|
|
|
|
|
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
|
|
|
|
|
}
|
2020-10-22 13:13:12 +00:00
|
|
|
}
|
|
|
|
|
|
2020-11-04 16:37:02 +00:00
|
|
|
ion-action-sheet {
|
|
|
|
|
--action-sheet-shadow-color: var(--custom--action-sheet-shadow-color, 0, 0, 0, 1);
|
|
|
|
|
--button-color-selected: var(--custom--action-sheet-selected-color, var(--core-color));
|
|
|
|
|
--title-border-color: var(--custom-title-border-color, var(--gray));
|
|
|
|
|
|
|
|
|
|
@media (min-height: 500px) {
|
|
|
|
|
--max-height: 50%;
|
|
|
|
|
--height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-sheet-cancel {
|
|
|
|
|
--button-color: var(--ion-color-danger);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-01-26 16:38:23 +00:00
|
|
|
--core-tabs-background: var(--custom-tabs-background, var(--white));
|
|
|
|
|
--core-tab-background: var(--custom-tab-background, var(--core-tabs-background));
|
|
|
|
|
--core-tab-color: var(--custom-tab-color, var(--gray-dark));
|
|
|
|
|
--core-tab-border-color: var(--custom-tab-border-color, var(--gray));
|
|
|
|
|
--core-tab-color-active: var(--custom-tab-color-active, var(--core-color));
|
|
|
|
|
--core-tab-border-color-active: var(--custom-tab-border-color-active, var(--core-color));
|
|
|
|
|
|
2021-02-01 11:32:10 +00:00
|
|
|
core-tabs, core-tabs-outlet {
|
2021-01-26 16:38:23 +00:00
|
|
|
--background: var(--core-tabs-background);
|
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);
|
2020-11-03 07:37:59 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-12 08:44:44 +00:00
|
|
|
ion-spinner {
|
|
|
|
|
--color: var(--core-color);
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-18 10:07:56 +00:00
|
|
|
core-progress-bar {
|
|
|
|
|
--height: var(--custom-progress-bar-height, 8px);
|
|
|
|
|
--color: var(--custom-progress-color, var(--core-color));
|
|
|
|
|
--text-color: var(--custom-progress-text-color, var(--gray-darker));
|
|
|
|
|
--background: var(--custom-progress-background, var(--gray-lighter));
|
|
|
|
|
}
|
|
|
|
|
|
2020-12-07 16:04:31 +00:00
|
|
|
core-block-course-blocks {
|
|
|
|
|
--side-blocks-max-width: var(--custom-side-blocks-max-width, 30%);
|
|
|
|
|
--side-blocks-min-width: var(--custom-side-blocks-min-width, 280px);
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-03 13:32:10 +00:00
|
|
|
--ion-item-background: var(--white);
|
|
|
|
|
--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);
|
|
|
|
|
}
|
|
|
|
|
|
2020-12-14 13:50:37 +00:00
|
|
|
ion-item-divider {
|
|
|
|
|
--background: var(--gray-lighter);
|
2021-02-03 09:55:01 +00:00
|
|
|
--color: inherit;
|
2020-12-14 13:50:37 +00:00
|
|
|
}
|
|
|
|
|
|
2021-01-27 16:04:21 +00:00
|
|
|
--core-button-select-background: var(--custom-button-select-background, var(--ion-color-primary-contrast));
|
|
|
|
|
|
2020-11-12 08:53:56 +00:00
|
|
|
--selected-item-color: var(--custom-selected-item-color, var(--core-color));
|
|
|
|
|
--selected-item-border-width: var(--custom-selected-item-border-width, 5px);
|
|
|
|
|
|
2020-11-03 07:37:59 +00:00
|
|
|
--core-login-background: var(--custom-login-background, var(--white));
|
2020-11-18 10:07:56 +00:00
|
|
|
--core-login-text-color: var(--custom-login-text-color, var(--black));
|
2020-11-20 10:59:36 +00:00
|
|
|
|
|
|
|
|
--core-star-color: var(--custom-star-color, var(--core-color));
|
2020-12-04 14:23:00 +00:00
|
|
|
|
|
|
|
|
--core-large-avatar-size: var(--custom-large-avatar-size, 90px);
|
2021-01-18 15:40:34 +00:00
|
|
|
--core-avatar-size: var(--custom-avatar-size, 40px);
|
2020-12-14 13:50:37 +00:00
|
|
|
|
2021-01-22 16:06:30 +00:00
|
|
|
--core-send-message-input-background: var(--custom-send-message-input-background, var(--gray));
|
|
|
|
|
--core-send-message-input-color: var(--custom-send-message-input-color, var(--black));
|
|
|
|
|
|
2020-12-14 13:50:37 +00:00
|
|
|
--addon-calendar-event-category-color: var(--custom-calendar-event-category-color, var(--purple));
|
|
|
|
|
--addon-calendar-event-course-color: var(--custom-calendar-event-course-color, var(--red));
|
|
|
|
|
--addon-calendar-event-group-color: var(--custom-calendar-event-group-color, var(--yellow));
|
|
|
|
|
--addon-calendar-event-user-color: var(--custom-calendar-event-user-color, var(--blue));
|
|
|
|
|
--addon-calendar-event-site-color: var(--custom-calendar-event-site-color, var(--green));
|
|
|
|
|
--addon-calendar-today-bgcolor: var(--custom-calendar-today-bgcolor, var(--core-color));
|
|
|
|
|
--addon-calendar-today-color: var(--custom-calendar-today-color, var(--white));
|
|
|
|
|
--addon-calendar-border-color: var(--custom-calendar-border-color, var(--gray));
|
2021-01-22 16:06:30 +00:00
|
|
|
|
|
|
|
|
--addon-messages-message-bg: var(--custom-messages-message-bg, var(--white));
|
|
|
|
|
--addon-messages-message-activated-bg: var(--custom-messages-message-activated-bg, var(--gray-light));
|
|
|
|
|
--addon-messages-message-note-text: var(--custom-messages-message-note-text, var(--gray-dark));
|
|
|
|
|
--addon-messages-message-note-font-size: var(--custom-messages-message-note-font-size, 75%);
|
|
|
|
|
--addon-messages-message-mine-bg: var(--custom-messages-message-mine-bg, var(--gray-light));
|
|
|
|
|
--addon-messages-message-mine-activated-bg: var(--custom-messages-message-mine-activated-bg, var(--gray));
|
|
|
|
|
--addon-messages-avatar-size: var(--custom-messages-avatar-size, 30px);
|
|
|
|
|
--addon-messages-discussion-badge: var(--custom-messages-discussion-badge, var(--core-color));
|
|
|
|
|
--addon-messages-discussion-badge-text: var(--custom-messages-discussion-badge-text, var(--white));
|
2021-01-26 11:21:40 +00:00
|
|
|
|
2021-02-16 10:18:12 +00:00
|
|
|
--addon-forum-avatar-size: var(--custom-forum-avatar-size, 28px);
|
2021-02-18 10:49:15 +00:00
|
|
|
--addon-forum-border-color: var(--custom-forum-border-color, var(--gray));
|
|
|
|
|
--addon-forum-highlight-color: var(--custom-forum-highlight-color, var(--gray-lighter));
|
2021-02-16 10:18:12 +00:00
|
|
|
|
2021-01-26 11:21:40 +00:00
|
|
|
--drop-shadow: var(--custom-drop-shadow, 0, 0, 0, 0.2);
|
|
|
|
|
|
|
|
|
|
--core-menu-box-shadow-end: var(--custom-menu-box-shadow-end, -4px 0px 16px rgba(0, 0, 0, 0.18));
|
|
|
|
|
--core-menu-box-shadow-start: var(--custom-menu-box-shadow-start, 4px 0px 16px rgba(0, 0, 0, 0.18));
|
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);
|
2020-10-05 12:56:27 +00:00
|
|
|
}
|
