243 lines
9.8 KiB
SCSS
243 lines
9.8 KiB
SCSS
/*
|
|
* App LIGHT theme CSS
|
|
* ----------------------------------------------------------------------------
|
|
* Ionic Variables and Theming. For more info, please see:
|
|
* http://ionicframework.com/docs/theming/
|
|
*/
|
|
|
|
:root {
|
|
|
|
// Color palette
|
|
--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};
|
|
--blue-dark: #{$blue-dark};
|
|
--blue-light: #{$blue-light};
|
|
--turquoise: #{$turquoise};
|
|
--green: #{$green};
|
|
--red: #{$red};
|
|
--orange: #{$orange};
|
|
--yellow: #{$yellow};
|
|
--purple: #{$purple};
|
|
|
|
--core-color: #{$core-color};
|
|
--core-online-color: #{$core-online-color};
|
|
|
|
// Named Color Variables
|
|
--primary: var(--core-color);
|
|
--secondary: var(--blue);
|
|
--tertiary: var(--turquoise);
|
|
--success: var(--green);
|
|
--danger: var(--red);
|
|
--warning: var(--yellow);
|
|
--light: var(--gray-lighter);
|
|
--dark: var(--black);
|
|
--medium: var(--gray-light);
|
|
--light: var(--gray-lighter);
|
|
--primary: var(--core-color);
|
|
|
|
--ion-color-primary: var(--primary);
|
|
--ion-color-primary-rgb: 249,128,18;
|
|
--ion-color-primary-contrast: #ffffff;
|
|
--ion-color-primary-contrast-rgb: 255,255,255;
|
|
--ion-color-primary-shade: #db7110;
|
|
--ion-color-primary-tint: #fa8d2a;
|
|
|
|
--ion-color-secondary: var(--secondary);
|
|
--ion-color-secondary-rgb: 0,100,210;
|
|
--ion-color-secondary-contrast: #ffffff;
|
|
--ion-color-secondary-contrast-rgb: 255,255,255;
|
|
--ion-color-secondary-shade: #0058b9;
|
|
--ion-color-secondary-tint: #1a74d7;
|
|
|
|
--ion-color-tertiary: var(--tertiary);
|
|
--ion-color-tertiary-rgb: 0,121,130;
|
|
--ion-color-tertiary-contrast: #ffffff;
|
|
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
|
--ion-color-tertiary-shade: #006a72;
|
|
--ion-color-tertiary-tint: #1a868f;
|
|
|
|
--ion-color-success: var(--success);
|
|
--ion-color-success-rgb: 94,129,0;
|
|
--ion-color-success-contrast: #ffffff;
|
|
--ion-color-success-contrast-rgb: 255,255,255;
|
|
--ion-color-success-shade: #537200;
|
|
--ion-color-success-tint: #6e8e1a;
|
|
|
|
--ion-color-warning: var(--warning);
|
|
--ion-color-warning-rgb: 251,173,26;
|
|
--ion-color-warning-contrast: #000000;
|
|
--ion-color-warning-contrast-rgb: 0,0,0;
|
|
--ion-color-warning-shade: #dd9817;
|
|
--ion-color-warning-tint: #fbb531;
|
|
|
|
--ion-color-danger: var(--danger);
|
|
--ion-color-danger-rgb: 203,61,77;
|
|
--ion-color-danger-contrast: #ffffff;
|
|
--ion-color-danger-contrast-rgb: 255,255,255;
|
|
--ion-color-danger-shade: #b33644;
|
|
--ion-color-danger-tint: #d0505f;
|
|
|
|
--ion-color-dark: var(--dark);
|
|
--ion-color-dark-rgb: 58,58,58;
|
|
--ion-color-dark-contrast: #ffffff;
|
|
--ion-color-dark-contrast-rgb: 255,255,255;
|
|
--ion-color-dark-shade: #333333;
|
|
--ion-color-dark-tint: #4e4e4e;
|
|
|
|
--ion-color-medium: var(--medium);
|
|
--ion-color-medium-rgb: 158,158,158;
|
|
--ion-color-medium-contrast: #000000;
|
|
--ion-color-medium-contrast-rgb: 0,0,0;
|
|
--ion-color-medium-shade: #8b8b8b;
|
|
--ion-color-medium-tint: #a8a8a8;
|
|
|
|
--ion-color-light: var(--light);
|
|
--ion-color-light-rgb: 245,245,245;
|
|
--ion-color-light-contrast: #000000;
|
|
--ion-color-light-contrast-rgb: 0,0,0;
|
|
--ion-color-light-shade: #d8d8d8;
|
|
--ion-color-light-tint: #f6f6f6;
|
|
|
|
--ion-text-color: var($text-color);
|
|
--ion-text-color-rgb: 58,58,58;
|
|
--ion-card-color: var(--ion-text-color);
|
|
|
|
--text-hightlight-background-color: var(--custom-text-hightlight-background-color, #99c1ed);
|
|
|
|
ion-content {
|
|
--background: #{$background-color};
|
|
--background-lighter: var(--gray-lighter);
|
|
--contrast-background: var(--white);
|
|
}
|
|
|
|
ion-tab-bar {
|
|
--background: var(--custom-bottom-tabs-background, var(--gray-darker));
|
|
--color: var(--custom-bottom-tabs-color, var(--white));
|
|
}
|
|
|
|
--core-toolbar-button-image-width: var(--custom-toolbar-button-image-width, 32px);
|
|
--ion-statusbar-background: var(--custom-toolbar-background, var(--ion-color-primary));
|
|
ion-toolbar {
|
|
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
|
|
--background: var(--ion-statusbar-background);
|
|
ion-button {
|
|
--ion-toolbar-color: transparent;
|
|
}
|
|
|
|
ion-spinner {
|
|
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
--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));
|
|
|
|
core-tabs, core-tabs-outlet {
|
|
--background: var(--core-tabs-background);
|
|
ion-slide {
|
|
--background: var(--core-tab-background);
|
|
--color: var(--core-tab-color);
|
|
--border-color: var(--core-tab-border-colo);
|
|
--color-active: var(--core-tab-color-active);
|
|
--border-color-active: var(--core-tab-border-color-active);
|
|
}
|
|
}
|
|
|
|
ion-spinner {
|
|
--color: var(--core-color);
|
|
}
|
|
|
|
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));
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
ion-item-divider {
|
|
--background: var(--gray-lighter);
|
|
--color: inherit;
|
|
}
|
|
|
|
--core-button-select-background: var(--custom-button-select-background, var(--ion-color-primary-contrast));
|
|
|
|
--selected-item-color: var(--custom-selected-item-color, var(--core-color));
|
|
--selected-item-border-width: var(--custom-selected-item-border-width, 5px);
|
|
|
|
--core-login-background: var(--custom-login-background, var(--white));
|
|
--core-login-text-color: var(--custom-login-text-color, var(--black));
|
|
|
|
--core-course-color-0: var(--custom-course-color-0, #81ecec);
|
|
--core-course-color-1: var(--custom-course-color-1, #74b9ff);
|
|
--core-course-color-2: var(--custom-course-color-2, #a29bfe);
|
|
--core-course-color-3: var(--custom-course-color-3, #dfe6e9);
|
|
--core-course-color-4: var(--custom-course-color-4, #00b894);
|
|
--core-course-color-5: var(--custom-course-color-5, #0984e3);
|
|
--core-course-color-6: var(--custom-course-color-6, #b2bec3);
|
|
--core-course-color-7: var(--custom-course-color-7, #fdcb6e);
|
|
--core-course-color-8: var(--custom-course-color-9, #fd79a8);
|
|
--core-course-color-9: var(--custom-course-color-90, #6c5ce7);
|
|
--core-star-color: var(--custom-star-color, var(--core-color));
|
|
|
|
--core-large-avatar-size: var(--custom-large-avatar-size, 90px);
|
|
--core-avatar-size: var(--custom-avatar-size, 40px);
|
|
|
|
--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));
|
|
|
|
--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));
|
|
|
|
--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));
|
|
|
|
--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));
|
|
}
|