409 lines
14 KiB
SCSS
409 lines
14 KiB
SCSS
/*
|
|
* App LIGHT theme CSS
|
|
* ----------------------------------------------------------------------------
|
|
* Ionic Variables and Theming. For more info, please see:
|
|
* http://ionicframework.com/docs/theming/
|
|
*/
|
|
|
|
html {
|
|
|
|
// Color palette
|
|
--black: #{$black};
|
|
--gray-900: #{$gray-900};
|
|
--gray-800: #{$gray-800};
|
|
--gray-700: #{$gray-700};
|
|
--gray-600: #{$gray-600};
|
|
--gray-500: #{$gray-500};
|
|
--gray-400: #{$gray-400};
|
|
--gray-300: #{$gray-300};
|
|
--gray-200: #{$gray-200};
|
|
--gray-100: #{$gray-100};
|
|
--white: #{$white};
|
|
|
|
// Ionic shades, defined for ionic internal use.
|
|
--ion-color-step-0: var(--white);
|
|
--ion-color-step-50: var(--gray-100);
|
|
--ion-color-step-100: var(--gray-100);
|
|
--ion-color-step-150: var(--gray-200);
|
|
--ion-color-step-200: var(--gray-200);
|
|
--ion-color-step-250: var(--gray-300);
|
|
--ion-color-step-300: var(--gray-300);
|
|
--ion-color-step-350: var(--gray-400);
|
|
--ion-color-step-400: var(--gray-400);
|
|
--ion-color-step-450: var(--gray-500);
|
|
--ion-color-step-500: var(--gray-500);
|
|
--ion-color-step-550: var(--gray-600);
|
|
--ion-color-step-600: var(--gray-600);
|
|
--ion-color-step-650: var(--gray-700);
|
|
--ion-color-step-700: var(--gray-700);
|
|
--ion-color-step-750: var(--gray-800);
|
|
--ion-color-step-800: var(--gray-800);
|
|
--ion-color-step-850: var(--gray-900);
|
|
--ion-color-step-900: var(--gray-900);
|
|
--ion-color-step-950: var(--gray-900);
|
|
--ion-color-step-1000: var(--black);
|
|
|
|
@each $color-name, $unused in $colors {
|
|
@include generate-color($color-name, $colors, 'light');
|
|
}
|
|
|
|
// Accessibility vars.
|
|
--a11y-focus-color: var(--primary);
|
|
--a11y-focus-width: 2px;
|
|
--zoom-level: 100%;
|
|
|
|
--text-color: #{$text-color};
|
|
--text-size: var(--font-size-normal);
|
|
--background-color: #{$background-color};
|
|
--stroke: var(--gray-300);
|
|
|
|
--core-online-color: #5cb85c;
|
|
|
|
--ion-background-color: var(--background-color);
|
|
--ion-item-border-color: var(--stroke);
|
|
--ion-background-color-rgb: #{$background-color-rgb};
|
|
--ion-border-color: var(--stroke);
|
|
|
|
--core-input-stroke: var(--gray-500);
|
|
--core-input-text: var(--dark);
|
|
--core-input-background: var(--ion-background-color);
|
|
--core-input-radius: var(--small-radius);
|
|
--core-input-border-width: 1px;
|
|
|
|
--module-icon-size: 24px;
|
|
--module-icon-radius: var(--medium-radius);
|
|
|
|
--list-item-max-width: 768px;
|
|
|
|
--modal-lateral-max-width: 320px;
|
|
--modal-lateral-margin: 56px;
|
|
|
|
--contrast-background: white;
|
|
|
|
--loader-background-color: rgba(0, 0, 0, .1);
|
|
--loader-shine: 251, 251, 251;
|
|
--loader-radius: var(--small-radius);
|
|
--loader-display: block;
|
|
|
|
--drop-shadow-color: 0, 0, 0, 0.5;
|
|
--drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color));
|
|
--drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color));
|
|
|
|
--ion-text-color: var(--text-color);
|
|
--ion-text-color-rgb: #{$text-color-rgb};
|
|
--subdued-text-color: var(--medium);
|
|
|
|
--ion-card-color: var(--text-color);
|
|
--ion-card-vertical-margin: 10px;
|
|
--ion-card-horizontal-margin: 10px;
|
|
--ion-card-radius: var(--medium-radius);
|
|
--ion-card-border-width: 1px;
|
|
--ion-card-border-color: var(--stroke);
|
|
ion-card {
|
|
--border-width: var(--ion-card-border-width);
|
|
--border-style: solid;
|
|
--border-color: var(--ion-card-border-color);
|
|
--box-shadow: none;
|
|
--border-radius: var(--ion-card-radius);
|
|
}
|
|
|
|
--text-hightlight-background-color: #{$core-text-hightlight-background-color};
|
|
|
|
--ion-placeholder-color: var(--subdued-text-color);
|
|
|
|
ion-content {
|
|
--background: var(--ion-background-color);
|
|
--background-alternative: var(--gray-200);
|
|
}
|
|
|
|
--core-bottom-tabs-background: var(--white);
|
|
--core-bottom-tabs-color: var(--dark);
|
|
--core-bottom-tabs-color-selected: var(--primary);
|
|
--core-bottom-tabs-background-selected: transparent;
|
|
--core-bottom-tabs-badge-color: var(--primary);
|
|
--core-bottom-tabs-badge-text-color: var(--primary-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);
|
|
--color-selected: var(--core-bottom-tabs-color-selected);
|
|
--background-selected: var(--core-bottom-tabs-background-selected);
|
|
}
|
|
|
|
--core-link-color: var(--info);
|
|
a {
|
|
color: var(--core-link-color);
|
|
}
|
|
|
|
--core-header-toolbar-button-image-size: var(--a11y-min-target-size);
|
|
--core-header-toolbar-background: var(--white);
|
|
--core-header-toolbar-border-width: 0px;
|
|
--core-header-toolbar-border-color: var(--stroke);
|
|
--core-header-toolbar-color: var(--text-color);
|
|
--core-header-toolbar-height: 48px;
|
|
--core-header-shadow: none;
|
|
--core-header-buttons-background: var(--core-header-toolbar-background);
|
|
--core-header-buttons-color: var(--core-header-toolbar-color);
|
|
|
|
ion-header {
|
|
box-shadow: var(--core-header-shadow, none);
|
|
transition: box-shadow 0.5s;
|
|
|
|
ion-toolbar {
|
|
--color: var(--core-header-toolbar-color);
|
|
--background: var(--core-header-toolbar-background);
|
|
--border-width: 0 0 var(--core-header-toolbar-border-width) 0;
|
|
--border-color: var(--core-header-toolbar-border-color);
|
|
|
|
ion-button {
|
|
--ion-toolbar-color: var(--core-header-toolbar-color);
|
|
--color: var(--core-header-toolbar-color);
|
|
}
|
|
|
|
ion-spinner {
|
|
--ion-color-base: var(--core-header-toolbar-color);
|
|
--color: var(--core-header-toolbar-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
ion-header.core-header-shadow {
|
|
--core-header-shadow: var(--drop-shadow-bottom, none);
|
|
}
|
|
|
|
ion-header::after {
|
|
display: none;
|
|
}
|
|
|
|
ion-header.header-ios ion-toolbar:last-of-type {
|
|
--border-width: 0 0 var(--core-header-toolbar-border-width) 0;
|
|
}
|
|
|
|
--ion-searchbar-background: var(--ion-background-color);
|
|
--ion-searchbar-border-color: var(--core-input-stroke);
|
|
--ion-searchbar-border-radius: var(--core-input-radius);
|
|
--ion-searchbar-height: var(--a11y-min-target-size);
|
|
--ion-searchbar-color: var(--text-color);
|
|
--ion-searchbar-icon-color: var(--core-input-stroke);
|
|
ion-searchbar,
|
|
.ios ion-searchbar {
|
|
--background: var(--ion-searchbar-background);
|
|
--border-color: var(--ion-searchbar-border-color);
|
|
--color: var(--ion-searchbar-color);
|
|
--border-radius: var(--ion-searchbar-border-radius);
|
|
--icon-color: var(--ion-searchbar-icon-color);
|
|
--height: var(--ion-searchbar-height);
|
|
}
|
|
|
|
--core-search-box-background: var(--ion-background-color);
|
|
--core-search-box-border-color: var(--core-input-stroke);
|
|
--core-search-box-border-radius: var(--core-input-radius);
|
|
--core-search-box-color: var(--core-input-text);
|
|
|
|
--core-combobox-background: var(--core-input-background);
|
|
--core-combobox-color: var(--core-input-text);
|
|
--core-combobox-border-color: var(--core-input-stroke);
|
|
--core-combobox-border-width: var(--core-input-border-width);
|
|
--core-combobox-radius: var(--core-input-radius);
|
|
--core-combobox-box-shadow: none;
|
|
|
|
ion-action-sheet {
|
|
--button-color: var(--ion-text-color);
|
|
--button-color-selected: var(--ion-text-color);
|
|
|
|
.action-sheet-title {
|
|
--color: var(--ion-text-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
@media (min-height: 500px) {
|
|
--max-height: 50%;
|
|
--height: 100%;
|
|
}
|
|
|
|
.action-sheet-cancel {
|
|
--button-color: var(--danger);
|
|
}
|
|
}
|
|
|
|
ion-toast {
|
|
--color: var(--ion-color-step-50);
|
|
--button-color: var(--primary);
|
|
--background: var(--ion-color-step-800);
|
|
}
|
|
|
|
--core-tabs-background: var(--white);
|
|
--core-tab-background: var(--core-tabs-background);
|
|
--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(--primary);
|
|
--core-tab-font-weight-active: normal;
|
|
--core-tabs-height: 48px;
|
|
core-tabs, core-tabs-outlet {
|
|
ion-slide {
|
|
--background: var(--core-tab-background);
|
|
--color: var(--core-tab-color);
|
|
--border-color: var(--core-tab-border-color);
|
|
--color-active: var(--core-tab-color-active);
|
|
--border-color-active: var(--core-tab-border-color-active);
|
|
--color-selected: var(--border-color-active);
|
|
--font-weight-active: var(--core-tab-font-weight-active);
|
|
}
|
|
}
|
|
|
|
--core-loading-spinner: var(--primary);
|
|
ion-loading {
|
|
--spinner-color: var(--core-loading-spinner);
|
|
}
|
|
ion-spinner, ion-refresher {
|
|
--ion-color-base: var(--core-loading-spinner);
|
|
--ion-color-primary: var(--core-loading-spinner);
|
|
--color: var(--core-loading-spinner);
|
|
}
|
|
|
|
--core-progressbar-height: 8px;
|
|
--core-progressbar-color: var(--primary);
|
|
--core-progressbar-text-color: var(--medium);
|
|
--core-progressbar-background: var(--primary-tint);
|
|
|
|
--ion-item-background: #{$ion-item-background};
|
|
--ion-item-icon-color: var(--medium);
|
|
--ion-item-detail-icon-color: var(--dark);
|
|
--ion-item-detail-icon-font-size: 20px;
|
|
--ion-item-detail-icon-opacity: 1;
|
|
--core-more-icon: var(--ion-item-icon-color);
|
|
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);
|
|
|
|
> ion-icon[slot] {
|
|
color: var(--ion-item-icon-color);
|
|
}
|
|
}
|
|
|
|
--item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
|
|
--item-divider-background: var(--ion-item-background);
|
|
--item-divider-color: var(--text-color);
|
|
--item-divider-border-width: 0px;
|
|
--item-divider-font-size: 16px;
|
|
--item-divider-font-size-big: 20px;
|
|
ion-item-divider, ion-item.divider {
|
|
--background: var(--item-divider-background);
|
|
--color: var(--item-divider-color);
|
|
--min-height: var(--item-divider-min-height);
|
|
}
|
|
|
|
--spacer-vertical: 8px;
|
|
--spacer-color: var(--gray-300);
|
|
|
|
ion-note {
|
|
--color: var(--subdued-text-color);
|
|
}
|
|
|
|
ion-back-button {
|
|
--min-height: var(--a11y-min-target-size);
|
|
--min-width: var(--a11y-min-target-size);
|
|
}
|
|
|
|
--selected-item-color: var(--primary);
|
|
--selected-item-border-width: 5px;
|
|
|
|
--collapsible-toggle-background: transparent;
|
|
--collapsible-toggle-text: var(--medium);
|
|
|
|
--background-gradient-rgb: #{$ion-item-background-rgb};
|
|
|
|
--core-login-background: var(--white);
|
|
--core-login-text-color: var(--gray-900);
|
|
--core-login-input-background: var(--white);
|
|
--core-login-input-color: var(--gray-900);
|
|
|
|
--core-star-color: var(--primary);
|
|
|
|
--core-large-avatar-size: 90px;
|
|
--core-avatar-size: var(--a11y-min-target-size);
|
|
|
|
--core-courseimage-on-course-size: 72px;
|
|
--core-courseimage-radius: var(--medium-radius);
|
|
|
|
--core-navigation-background: var(--contrast-background);
|
|
|
|
--core-collapsible-footer-background: var(--contrast-background);
|
|
|
|
--core-user-menu-site-logo-max-height: 32px;
|
|
|
|
--addon-calendar-today-border-color: var(--primary);
|
|
--addon-calendar-border-color: var(--stroke);
|
|
|
|
--core-messages-message-bg: var(--white);
|
|
--core-messages-message-activated-bg: var(--gray-200);
|
|
--core-messages-message-note-text: var(--gray-500);
|
|
--core-messages-message-note-font-size: 75%;
|
|
--core-messages-message-mine-bg: var(--gray-300);
|
|
--core-messages-message-mine-activated-bg: var(--gray-400);
|
|
--core-messages-avatar-size: 30px;
|
|
--core-messages-discussion-badge: var(--primary);
|
|
--core-messages-discussion-badge-text: var(--white);
|
|
|
|
--addon-forum-avatar-size: var(--core-avatar-size);
|
|
--addon-forum-border-color: var(--stroke);
|
|
--addon-forum-highlight-color: var(--light);
|
|
|
|
--core-question-correct-color: var(--success-shade);
|
|
--core-question-correct-color-bg: var(--success-tint);
|
|
--core-question-incorrect-color: var(--danger);
|
|
--core-question-incorrect-color-bg: var(--danger-tint);
|
|
--core-question-feedback-color: var(--warning-shade);
|
|
--core-question-feedback-color-bg: var(--warning-tint);
|
|
--core-question-warning-color: var(--danger);
|
|
--core-question-saved-color-bg: var(--gray-200);
|
|
|
|
--core-question-state-correct-color: var(--success-tint);
|
|
--core-question-state-partial-color: var(--warning-tint);
|
|
--core-question-state-partial-text: var(--warning);
|
|
--core-question-state-incorrect-color: var(--danger-tint);
|
|
|
|
--core-question-feedback-color: var(--warning-shade);
|
|
--core-question-feedback-background-color: var(--warning-tint);
|
|
|
|
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-500);
|
|
--core-dd-question-radius: 10px;
|
|
--core-dd-question-border: var(--medium);
|
|
|
|
--rotate-expandable: rotate(90deg);
|
|
&[dir=rtl] {
|
|
--rotate-expandable: rotate(-90deg);
|
|
}
|
|
|
|
@for $i from 0 to length($core-course-image-background) {
|
|
--core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)};
|
|
--core-course-color-#{$i}-tint: #{get-color-tint-percent(nth($core-course-image-background, $i + 1))};
|
|
}
|
|
|
|
@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))};
|
|
}
|
|
|
|
// Make activtity colours available for custom modules.
|
|
@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;
|
|
}
|
|
|
|
--rte-editor-background: var(--core-input-background);
|
|
}
|