EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3814 styles: Adapt colors to match LMS

main
Pau Ferrer Ocaña 2022-02-03 15:28:40 +01:00
parent cb5508fc72
commit 5040f70da8
31 changed files with 264 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addons/block/blogtags/components/blogtags/blogtags.scss
View File

@ -11,8 +11,8 @@
display: inline-block;
a {
background: var(--ion-color-primary);
color: var(--ion-color-primary-contrast);
background: var(--primary);
color: var(--primary-contrast);
padding: 3px 8px;
-webkit-font-smoothing: antialiased;
display: inline-block;

4
src/addons/block/tags/components/tags/tags.scss
View File

@ -13,8 +13,8 @@
display: inline-block;
a {
background: var(--ion-color-primary);
color: var(--ion-color-primary-contrast);
background: var(--primary);
color: var(--primary-contrast);
padding: 3px 8px;
-webkit-font-smoothing: antialiased;
display: inline-block;

18
src/addons/calendar/calendar-common.scss
View File

@ -1,3 +1,5 @@
@import "~theme/globals";
:host {
--addon-calendar-blank-day-background-color: var(--light);
@ -9,20 +11,10 @@
padding: 0.7rem;
}
&.addon-calendar-eventtype-category > ion-icon {
background-color: var(--addon-calendar-event-category-color);
@each $category, $value in $calendar-event-category-colors {
&.addon-calendar-eventtype-#{$category} > ion-icon {
background-color: $value;
}
&.addon-calendar-eventtype-course > ion-icon {
background-color: var(--addon-calendar-event-course-color);
}
&.addon-calendar-eventtype-group > ion-icon {
background-color: var(--addon-calendar-event-group-color);
}
&.addon-calendar-eventtype-user > ion-icon {
background-color: var(--addon-calendar-event-user-color);
}
&.addon-calendar-eventtype-site > ion-icon {
background-color: var(--addon-calendar-event-site-color);
}
}

4
src/addons/messages/pages/discussion/discussion.scss
View File

@ -4,13 +4,13 @@
:host {
.addon-messages-unreadfrom {
color: var(--ion-color-primary);
color: var(--primary);
background-color: transparent;
margin-top: 6px;
margin-left: auto;
margin-right: auto;
ion-icon {
color: var(--ion-color-primary);
color: var(--primary);
background-color: transparent;
}
}

4
src/addons/mod/assign/components/submission/submission.scss
View File

@ -15,7 +15,7 @@
}
div.submissioneditable p {
color: var(--red);
color: var(--danger);
}
.core-grading-summary .advancedgrade {
@ -25,6 +25,6 @@
:host-context(body.dark) ::ng-deep {
div.submissioneditable p {
color: var(--red-light);
color: var(--danger-tint);
}
}

2
src/addons/mod/data/data-forms.scss
View File

@ -39,7 +39,7 @@
}
&.has-focus {
--input-border-color: var(--ion-color-primary);
--input-border-color: var(--primary);
}
&.has-focus.ion-valid {
--input-border-color: var(--success);

4
src/addons/mod/lesson/pages/user-retake/user-retake.scss
View File

@ -4,10 +4,10 @@
}
.addon-mod_lesson-highlight {
--background: var(--blue-light);
--background: var(--primary-tint);
ion-label, ion-label p {
color: var(--blue-dark);
color: var(--primary-shade);
}
}

4
src/addons/mod/quiz/components/connection-error/connection-error.scss
View File

@ -1,7 +1,7 @@
:host {
background-color: var(--red-light);
background-color: var(--danger-tint);
.item {
--background: var(--red-light);
--background: var(--danger-tint);
}
}

8
src/addons/mod/quiz/components/index/index.scss
View File

@ -14,8 +14,8 @@
.item.addon-mod_quiz-highlighted,
.addon-mod_quiz-highlighted p,
.item.addon-mod_quiz-highlighted p {
--background: var(--blue-light);
color: var(--blue-dark);
--background: var(--primary-tint);
color: var(--primary-shade);
}
}
}
@ -26,8 +26,8 @@
.item.addon-mod_quiz-highlighted,
.addon-mod_quiz-highlighted p,
.item.addon-mod_quiz-highlighted p {
--background: var(--blue-dark);
color: var(--blue-light);
--background: var(--primary-shade);
color: var(--primary-tint);
}
}
}

4
src/addons/mod/wiki/components/index/index.scss
View File

@ -3,7 +3,7 @@
$addon-mod-wiki-toc-level-padding: 12px !default;
:host {
--addon-mod-wiki-newentry-link-color: var(--red);
--addon-mod-wiki-newentry-link-color: var(--danger);
--addon-mod-wiki-toc-border-color: var(--gray-500);
--addon-mod-wiki-toc-background-color: var(--gray-200);
@ -58,6 +58,6 @@ $addon-mod-wiki-toc-level-padding: 12px !default;
}
:host-context(body.dark) {
--addon-mod-wiki-newentry-link-color: var(--red-light);
--addon-mod-wiki-newentry-link-color: var(--danger-tint);
--addon-mod-wiki-toc-background-color: var(--medium);
}

4
src/addons/mod/workshop/components/submission/submission.scss
View File

@ -1,10 +1,10 @@
:host {
p.addon-overriden-grade {
color: var(--ion-color-success);
color: var(--success);
}
p.addon-has-overriden-grade {
color: var(--ion-color-danger);
color: var(--danger);
text-decoration: line-through;
}
}

8
src/addons/qtype/ddmarker/component/ddmarker.scss
View File

@ -118,18 +118,18 @@ core-format-text ::ng-deep {
}
div.markertexts span.markertext {
z-index: 3;
background-color: var(--yellow-light);
background-color: var(--warning-tint);
border-style: solid;
border-width: 2px;
border-color: var(--yellow);
border-color: var(--warning);
position: absolute;
color: var(--gray-900);
}
span.wrongpart {
background-color: var(--yellow-light);
background-color: var(--warning-tint);
border-style: solid;
border-width: 2px;
border-color: var(--yellow);
border-color: var(--warning);
padding: 5px;
border-radius: 10px;
opacity: 0.6;

6
src/core/components/combobox/combobox.scss
View File

@ -9,9 +9,9 @@
ion-button {
--icon-margin: 0 8px;
--background: var(--core-combobox-background);
--background-hover: #000000;
--background-activated: #000000;
--background-focused: #000000;
--background-hover: black;
--background-activated: black;
--background-focused: black;
--background-hover-opacity: .04;
--color: var(--core-combobox-color);

2
src/core/components/input-errors/input-errors.scss
View File

@ -4,7 +4,7 @@
.core-input-error-container {
.core-input-error {
padding: 4px;
color: var(--ion-color-danger);
color: var(--danger);
font-size: 12px;
display: none;

2
src/core/components/loading/loading.scss
View File

@ -3,7 +3,7 @@
:host {
--loading-background: var(--ion-background-color);
--loading-background-inline: var(--ion-background-color-rgb);
--loading-spinner: var(--ion-color-primary);
--loading-spinner: var(--core-loading-spinner);
--loading-text-color: var(--ion-text-color);
--loading-inline-margin: 0px;
--loading-inline-min-height: 28px;

17
src/core/components/split-view/split-view.scss
View File

@ -1,9 +1,12 @@
@import "~theme/globals";
:host {
--menu-min-width: 270px;
--menu-max-width: 28%;
--menu-box-shadow: var(--core-menu-box-shadow-end);
--menu-z: 2;
--menu-border-width: 1;
--menu-border-width: 1px;
--menu-border-color: var(--stroke);
--menu-display: flex;
--content-display: block;
--content-outlet-display: none;
@ -38,8 +41,8 @@
flex-shrink: 0;
order: -1;
width: 100%;
border-inline-start: 0;
border-inline-end: var(--border);
@include border-start(0);
@include border-end(var(--menu-border-width), solid, var(--menu-border-color));
min-width: var(--menu-min-width);
max-width: var(--menu-max-width);
}
@ -82,11 +85,3 @@
--content-placeholder-display: none;
--content-outlet-display: var(--content-display);
}
:host-context(ion-app.md) {
--border: calc(var(--menu-border-width) * 1px) solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13))));
}
:host-context(ion-app.ios) {
--border: calc(var(--menu-border-width) * .55px) solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
}

4
src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
View File

@ -37,13 +37,13 @@
.core-rte-info-message {
padding: 5px;
border-top: 1px solid var(--ion-color-info);
border-top: 1px solid var(--info);
background: var(--background);
flex-shrink: 1;
font-size: 1.1rem;
.icon {
color: var(--ion-color-info);
color: var(--info);
}
}
}

13
src/core/features/grades/pages/course/course.scss
View File

@ -6,7 +6,8 @@
--even-cell-background: var(--white);
--odd-cell-hover: var(--gray-200);
--even-cell-hover: var(--light);
--icon-color: #999999;
--icon-color: var(--gray-500);
--border-color: var(--stroke);
.odd {
--cell-background: var(--odd-cell-background);
@ -26,15 +27,7 @@
--even-cell-background: var(--gray-900);
--odd-cell-hover: var(--gray-500);
--even-cell-hover: var(--medium);
--icon-color: #eeeeee;
}
:host-context(ion-app.md) {
--border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13))));
}
:host-context(ion-app.ios) {
--border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
--icon-color: var(--gray-200);
}
.core-grades-table {

5
src/core/features/login/pages/site/site.scss
View File

@ -25,7 +25,7 @@
width: 50px;
height: 50px;
border-radius: 20%;
box-shadow: 0 0 4px #eee;
box-shadow: 0 0 4px var(--gray-200);
text-align: center;
overflow: hidden;
@ -117,8 +117,9 @@
.core-login-entered-site {
background-color: var(--light);
ion-thumbnail {
box-shadow: 0 0 4px #ddd;
box-shadow: 0 0 4px var(--gray-300);
}
}

4
src/core/features/mainmenu/pages/menu/menu.scss
View File

@ -155,9 +155,9 @@
}
:host-context(.core-online) .core-network-message {
background: var(--green);
background: var(--success);
}
:host-context(.core-offline) .core-network-message {
background: var(--red);
background: var(--danger);
}

6
src/core/features/mainmenu/pages/more/more.scss
View File

@ -1,11 +1,7 @@
@import "~theme/globals";
ion-item {
--border-color: var(--core-more-item-border,
var(--ion-item-border-color,
var(--ion-border-color,
var(--ion-color-step-150,
rgba(0, 0, 0, 0.13)))));
--border-color: var(--core-more-item-border, var(--ion-border-color));
ion-icon {
color: var(--core-more-icon, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54));

4
src/core/features/question/question.scss
View File

@ -31,10 +31,10 @@
border-radius: 3px;
&.incorrect {
background-color: var(--red);
background-color: var(--danger);
}
&.correct {
background-color: var(--green);
background-color: var(--success);
}
}
}

2
src/theme/components/discussion.scss
View File

@ -158,7 +158,7 @@
ion-icon {
font-size: 1.4em;
line-height: initial;
color: var(--ion-color-danger);
color: var(--danger);
}
}

31
src/theme/components/format-text.scss
View File

@ -556,16 +556,15 @@ core-rich-text-editor .core-rte-editor {
font-weight: 400;
}
@each $color-name, $base in $colors {
@each $color-name, $unused in $colors {
.alert-#{$color-name} {
--color-base: var(--ion-color-#{$color-name});
color: var(--color-base);
--color-base: var(--#{$color-name});
color: var(--#{$color-name}-shade);
border-color: var(--color-base);
background-color: var(--ion-color-#{$color-name}-lighter);
background-color: var(--#{$color-name}-tint);
.alert-link {
color: var(--ion-color-#{$color-name}-shade);
.alert-link, a {
color: var(--#{$color-name}-shade);
}
}
.alert-#{$color-name} p {
@ -594,9 +593,9 @@ core-rich-text-editor .core-rte-editor {
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }
@each $color-name, $base in $colors {
@each $color-name, $unused in $colors {
.border-#{$color-name} {
border-color: var(--ion-color-#{$color-name}) !important;
border-color: var(--#{$color-name}) !important;
}
}
@ -678,9 +677,9 @@ core-rich-text-editor .core-rte-editor {
.font-italic { font-style: italic !important; }
.text-white { color: var(--white) !important; }
@each $color-name, $base in $colors {
@each $color-name, $unused in $colors {
.text-#{$color-name} {
color: var(--ion-color-#{$color-name});
color: var(--#{$color-name});
}
}
@ -710,14 +709,14 @@ core-rich-text-editor .core-rte-editor {
}
.label-important {
color: var(--ion-color-danger-contrast);
background-color: var(--ion-color-danger);
color: var(--danger-contrast);
background-color: var(--danger);
}
@each $color-name, $base in $colors {
@each $color-name, $unused in $colors {
.label-#{$color-name} {
color: var(--ion-color-#{$color-name}-contrast);
background-color: var(--ion-color-#{$color-name});
color: var(--#{$color-name}-contrast);
background-color: var(--#{$color-name});
}
}
}

30
src/theme/components/rubrics.scss
View File

@ -9,13 +9,13 @@ core-format-text {
}
.gradingform_rubric_editform .status.ready {
background-color: var(--green-light);
border-color: var(--green);
background-color: var(--success-tint);
border-color: var(--success);
}
.gradingform_rubric_editform .status.draft {
background-color: var(--yellow-light);
border-color: var(--yellow);
background-color: var(--warning-tint);
border-color: var(--warning);
}
.gradingform_rubric {
@ -107,7 +107,7 @@ core-format-text {
.gradingform_rubric .criterion .levels .level .score {
font-style: italic;
color: var(--green);
color: var(--success);
font-weight: bold;
margin-top: 5px;
white-space: nowrap;
@ -126,11 +126,11 @@ core-format-text {
/* evaluation */
.gradingform_rubric .criterion .levels .level.currentchecked {
background-color: #fff0f0;
background-color: var(--danger-tint);
}
.gradingform_rubric .criterion .levels .level.checked {
background-color: var(--green-light);
background-color: var(--success-tint);
border: 1px solid var(--medium);
}
@ -154,7 +154,7 @@ core-format-text {
}
.gradingform_rubric .criterion .levels.error {
border: 1px solid var(--red);
border: 1px solid var(--danger);
}
.gradingform_rubric .criterion .description.error,
@ -166,19 +166,19 @@ core-format-text {
.gradingform_rubric-regrade {
padding: 10px;
background-color: var(--light);
border: 1px solid var(--red-light);
border: 1px solid var(--danger-tint);
margin-bottom: 10px;
}
.gradingform_rubric-restored {
padding: 10px;
background-color: var(--yellow-light);
border: 1px solid var(--yellow);
background-color: var(--warning-tint);
border: 1px solid var(--warning);
margin-bottom: 10px;
}
.gradingform_rubric-error {
color: var(--red);
color: var(--danger);
font-weight: bold;
}
@ -219,17 +219,17 @@ core-format-text {
}
.gradingform_rubric.evaluate .criterion .levels .level:hover {
background-color: var(--green-light);
background-color: var(--success-tint);
}
.gradingform_rubric .criterion .levels .level.checked {
background-color: var(--green-light);
background-color: var(--success-tint);
border: none;
border-left: 1px solid var(--stroke);
}
.gradingform_rubric .criterion .levels .level .score {
color: var(--green);
color: var(--success);
font-weight: 500;
font-style: normal;
margin-top: 20px;

30
src/theme/globals.mixins.ionic.scss
View File

@ -47,14 +47,16 @@
}
// Mixes a color with black to create its shade.
// Default to bootstrap level 6.
// --------------------------------------------------------------------------------------------
@function get-color-shade($color) {
@return mix(#000, $color, 12%);
@function get-color-shade($color, $percent: 48%) {
@return mix(#000, $color, $percent);
}
// Mixes a color with white to create its tint.
// Default to bootstrap level -10.
// --------------------------------------------------------------------------------------------
@function get-color-tint($color, $percent: 10%) {
@function get-color-tint($color, $percent: 80%) {
@return mix(#fff, $color, $percent);
}
@ -72,20 +74,35 @@
@mixin generate-color($color-name, $colors) {
$base: map-get($colors, $color-name);
$light: map-get($base, 'light');
@include generate-color-variants($color-name, $light);
body.dark {
$dark: map-get($base, 'dark');
$dark: mix($light, white, 40%) !default;
@include generate-color-variants($color-name, $dark);
}
}
@mixin generate-color-variants($color-name, $base) {
$contrast: get_contrast_color($base);
$shade: get-color-shade($base);
$tint: get-color-tint($base);
$lighter: get-color-tint($base, 90%);
--ion-color-#{$color-name}: var(--#{$color-name}, #{$base});
--#{$color-name}: #{$base};
--#{$color-name}-shade: #{$shade};
--#{$color-name}-tint: #{$tint};
--#{$color-name}-contrast: #{$contrast};
// Internal ionic use only.
--ion-color-#{$color-name}: var(--#{$color-name});
--ion-color-#{$color-name}-base: var(--ion-color-#{$color-name});
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
--ion-color-#{$color-name}-contrast: #{$contrast};
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
--ion-color-#{$color-name}-shade: #{$shade};
--ion-color-#{$color-name}-tint: #{$tint};
--ion-color-#{$color-name}-lighter: #{$lighter};
.ion-color-#{$color-name} {
--ion-color: var(--ion-color-#{$color-name});
@ -95,7 +112,6 @@
--ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb);
--ion-color-shade: var(--ion-color-#{$color-name}-shade);
--ion-color-tint: var(--ion-color-#{$color-name}-tint);
--ion-color-lighter: var(--ion-color-#{$color-name}-lighter);
}
}

57
src/theme/globals.mixins.scss
View File

@ -1,3 +1,5 @@
@use "sass:math" as math;
/*
* App custom mixins for SCSS
* ----------------------------------------------------------------------------
@ -233,8 +235,59 @@
@return (red($color) + green($color) + blue($color)) / 3;
}
// Get the better color contrast using WCAG algorythm.
@function get_contrast_color($color) {
$brightness: get_brightness($color);
$lumiance: luminance($color);
@return if($brightness < 127, white, black);
// White lumiance is 1.
$whiteContrast: ($lumiance + 0.05) / (1 + 0.05);
// White lumiance is 0.
$blackContrast: (0.05) / ($lumiance + 0.05);
@return if($whiteContrast < $blackContrast, white, black);
}
// Color contrast using yiq aproximation with 150 threshold.
@function get_contrast_color_yiq($color, $dark: black, $light: white) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@return if($yiq >= 128, $dark, $light);
}
// WCAG contrast algorythm
@function check-contrast($foreground, $background) {
$foregroundLumiance: luminance($foreground);
$backgroundLuminance: luminance($background);
@if ($backgroundLuminance < $foregroundLumiance) {
@return ($backgroundLuminance + 0.05) / ($foregroundLumiance + 0.05);
} @else {
@return ($foregroundLumiance + 0.05) / ($backgroundLuminance + 0.05);
}
}
@function luminance($color) {
$r: red($color);
$g: green($color);
$b: blue($color);
$r: component-luminance($r);
$g: component-luminance($g);
$b: component-luminance($b);
@return $r * 0.2126 + $g * 0.7152 + $b * 0.0722;
}
@function component-luminance($value) {
$value: $value / 255;
@if ($value <= 0.03928) {
@return $value / 12.92;
} @else {
@return math.pow(($value + 0.055) / 1.055, 2.4);
}
}

71
src/theme/globals.variables.scss
View File

@ -17,24 +17,10 @@ $gray-900: #1d2125 !default; // Copy text
$black: #000000 !default; // Avoid usage
$blue: #0f6cbf !default;
$blue-light: mix($blue, white, 20%) !default;
$blue-dark: darken($blue, 10%) !default;
$cyan: #008196 !default;
$cyan-light: mix($cyan, white, 20%) !default;
$cyan-dark: darken($cyan, 10%) !default;
$green: #357a32 !default; // Accent.
$green-light: mix($green, white, 20%) !default;
$green-dark: darken($green, 10%) !default;
$green: #357a32 !default;
$red: #ca3120 !default;
$red-light: mix($red, white, 20%) !default;
$red-dark: darken($red, 10%) !default;
$yellow: #f0ad4e !default;
$yellow-light: mix($yellow, white, 20%) !default;
$yellow-dark: mix($yellow, black, 40%) !default;
$brand-color: #ff7518 !default;
@ -45,7 +31,7 @@ $text-color-dark-rgb: color-to-rgb-list($text-color-dark) !default;
$background-color: $white !default;
$background-color-rgb: color-to-rgb-list($background-color) !default;
$background-color-dark: mix(#ffffff, #000000, 10%) !default; // #1a1a1a
$background-color-dark: $gray-900 !default; // #1a1a1a
$background-color-dark-rgb: color-to-rgb-list($background-color-dark) !default;
$ion-item-background: $white !default;
@ -63,40 +49,17 @@ $light: $gray-100 !default;
$medium: $gray-600 !default;
$dark: $gray-800 !default;
$stroke: $gray-300 !default;
$colors: (
primary: $primary,
secondary: $secondary,
success: $success,
warning: $warning,
danger: $danger,
info: $info,
light: $light,
medium: $medium,
dark: $dark
) !default;
$primary-dark: mix($blue, white, 40%) !default;
$secondary-dark: mix($secondary, white, 40%) !default;
$danger-dark: mix($red, white, 40%) !default;
$warning-dark: mix($yellow, white, 40%) !default;
$success-dark: mix($green, white, 40%) !default;
$info-dark: mix($cyan, white, 40%) !default;
$light-dark: $dark !default;
$medium-dark: $gray-200 !default;
$dark-dark: $light !default;
$colors-dark: (
primary: $primary-dark,
secondary: $secondary-dark,
success: $success-dark,
warning: $warning-dark,
danger: $danger-dark,
info: $info-dark,
light: $light-dark,
medium: $medium-dark,
dark: $dark-dark,
primary: (light: $primary),
secondary: (light: $secondary),
success: (light: $success),
warning: (light: $warning),
danger: (light: $danger),
info: (light: $info),
light: (light: $light, dark: $dark),
medium: (light: $medium, dark: $gray-200),
dark: (light: $dark, dark: $light),
brand: (light: $brand-color, dark: $brand-color),
) !default;
/**
@ -153,6 +116,7 @@ $core-user-hide-siteinfo: $core-more-hide-siteinfo !default;
$core-user-hide-sitename: $core-more-hide-sitename !default;
$core-user-hide-siteurl: $core-more-hide-siteurl !default;
// Activity icon background colors.
$activity-icon-colors: (
administration: #5d63f6,
assessment: #eb66a2,
@ -161,3 +125,12 @@ $activity-icon-colors: (
content: #399be2,
interface: #a378ff
) !default;
// Calendar event category background colors.
$calendar-event-category-colors: (
category: #8e24aa,
course: $red,
group: $yellow,
user: $blue,
site: $green
) !default;

18
src/theme/theme.base.scss
View File

@ -217,7 +217,7 @@ ion-button ion-spinner {
--color: inherit !important;
}
@each $color-name, $value in $colors {
@each $color-name, $unused in $colors {
.text-#{$color-name},
p.text-#{$color-name} {
color: var(--ion-color-#{$color-name});
@ -240,7 +240,7 @@ ion-header ion-toolbar {
.button.button-solid {
--background: transparent;
--color: var(--core-header-toolbar-color);
--ion-color-primary: var(--core-header-toolbar-color);
--primary: var(--core-header-toolbar-color);
}
.button.button-clear.button-has-icon-only,
@ -272,7 +272,7 @@ ion-icon {
bottom: 0;
left: 0;
right: 0;
background-color: var(--ion-color-danger);
background-color: var(--danger);
-webkit-mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%;
mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%;
}
@ -303,7 +303,7 @@ button,
// Clear buttons will be black.
ion-button.button-clear {
--ion-color-primary: var(--primary);
--primary: var(--primary);
}
[role="button"],
@ -364,7 +364,7 @@ div.core-iframe-network-error {
right: -15%;
width: 50%;
height: 50%;
background-color: var(--ion-color-danger);
background-color: var(--danger);
-webkit-mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%;
mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%;
}
@ -633,7 +633,7 @@ body.core-iframe-fullscreen ion-router-outlet {
.item-dimmed {
opacity: 0.7;
--background: var(--ion-color-light);
--background: var(--light);
}
// Extra text colors.
@ -642,7 +642,7 @@ body.core-iframe-fullscreen ion-router-outlet {
}
// Card styles
@each $color-name, $base in $colors {
@each $color-name, $unused in $colors {
// Message cards.
ion-card.core-#{$color-name}-card {
@ -723,6 +723,10 @@ ion-card {
}
}
ion-chip.ion-color {
background: var(--ion-color-tint);
}
.core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div {
display: inline !important;
}

56
src/theme/theme.dark.scss
View File

@ -7,7 +7,7 @@
:root body.dark {
// Ionic shades.
// Ionic shades, defined for ionic internal use.
--ion-color-step-0: var(--black);
--ion-color-step-50: var(--gray-900);
--ion-color-step-100: var(--gray-900);
@ -36,45 +36,33 @@
--text-color: #{$text-color-dark};
--ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-dark-rgb};
--subdued-text-color: #b4b4b4;
--primary: #{$primary-dark};
--secondary: #{$secondary-dark};
--success: #{$success-dark};
--danger: #{$danger-dark};
--warning: #{$warning-dark};
--info: #{$info-dark};
--light: #{$light-dark};
--dark: #{$dark-dark};
--medium: #{$medium-dark};
@each $color-name, $value in $colors-dark {
@include generate-color($color-name, $colors-dark);
}
--ion-border-color: var(--gray-900);
--subdued-text-color: var(--gray-400);
--ion-card-color: var(--text-color);
--ion-card-background: var(--ion-item-background);
--contrast-background: black;
--stroke: var(--gray-700);
--ion-border-color: var(--stroke);
--ion-item-border-color: var(--stroke);
ion-content {
--background: var(--ion-background-color);
--background-alternative: var(--gray-900);
}
--core-bottom-tabs-badge-text-color: var(--brand-color-contrast);
--core-bottom-tabs-badge-text-color: var(--brand-contrast);
--core-bottom-tabs-background: var(--gray-900);
--core-bottom-tabs-color: var(--medium);
ion-action-sheet {
.action-sheet-cancel {
--button-color: var(--ion-color-danger-tint);
--button-color: var(--danger-tint);
}
}
--core-link-color: var(--blue-light);
--core-link-color: var(--primary-tint);
--core-header-toolbar-background: var(--gray-900);
--core-header-toolbar-color: var(--white);
@ -101,22 +89,22 @@
--core-login-input-background: var(--core-login-background);
--core-login-input-color: var(--core-login-text-color);
--core-question-correct-color: var(--green-light);
--core-question-correct-color-bg: var(--green-dark);
--core-question-incorrect-color: var(--red);
--core-question-incorrect-color-bg: var(--red-dark);
--core-question-feedback-color: var(--yellow-light);
--core-question-feedback-color-bg: var(--yellow-dark);
--core-question-warning-color: var(--red);
--core-question-correct-color: var(--success-tint);
--core-question-correct-color-bg: var(--success-shade);
--core-question-incorrect-color: var(--danger);
--core-question-incorrect-color-bg: var(--danger-shade);
--core-question-feedback-color: var(--warning-tint);
--core-question-feedback-color-bg: var(--warning-shade);
--core-question-warning-color: var(--danger);
--core-question-saved-color-bg: var(--gray-500);
--core-question-state-correct-color: var(--green-dark);
--core-question-state-partial-color: var(--yellow-dark);
--core-question-state-partial-text: var(--yellow);
--core-question-state-incorrect-color: var(--red-dark);
--core-question-state-correct-color: var(--success-shade);
--core-question-state-partial-color: var(--warning-shade);
--core-question-state-partial-text: var(--warning);
--core-question-state-incorrect-color: var(--danger-shade);
--core-question-feedback-color: var(--yellow-light);
--core-question-feedback-background-color: var(--yellow-dark);
--core-question-feedback-color: var(--warning-tint);
--core-question-feedback-background-color: var(--warning-shade);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-200);
--core-dd-question-border: var(--gray-200);

89
src/theme/theme.light.scss
View File

@ -20,7 +20,7 @@
--gray-100: #{$gray-100};
--white: #{$white};
// Ionic shades.
// 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);
@ -43,50 +43,21 @@
--ion-color-step-950: var(--gray-900);
--ion-color-step-1000: var(--black);
--blue: #{$blue};
--blue-light: #{$blue-light};
--blue-dark: #{$blue-dark};
--green: #{$green};
--green-light: #{$green-light};
--green-dark: #{$green-dark};
--red: #{$red};
--red-light: #{$red-light};
--red-dark: #{$red-dark};
--yellow: #{$yellow};
--yellow-light: #{$yellow-light};
--yellow-dark: #{$yellow-dark};
--turquoise: #007982; // Accent.
--purple: #8e24aa;
--text-color: #{$text-color};
--background-color: #{$background-color};
--brand-color: #{$brand-color};
--brand-color-contrast: var(--text-color);
--core-online-color: #5cb85c;
// Named Color Variables
--primary: #{$primary};
--secondary: #{$secondary};
--success: #{$success};
--danger: #{$danger};
--warning: #{$warning};
--info: #{$info};
--light: #{$light};
--dark: #{$dark};
--medium: #{$medium};
--stroke: var(--gray-300);
--ion-border-color: var(--stroke);
--ion-item-border-color: var(--stroke);
--stroke: #{$stroke};
@each $color-name, $value in $colors {
@each $color-name, $unused in $colors {
@include generate-color($color-name, $colors);
}
--brand-color: var(--brand);
// Accessibility vars.
--a11y-min-target-size: 44px;
--a11y-focus-color: var(--primary);
@ -102,7 +73,7 @@
--ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-rgb};
--subdued-text-color: #595959;
--subdued-text-color: var(--gray-700);
--small-radius: 4px;
--medium-radius: 8px;
@ -128,11 +99,11 @@
}
--core-bottom-tabs-background: var(--white);
--core-bottom-tabs-color: var(--medium);
--core-bottom-tabs-color: var(--gray-700);
--core-bottom-tabs-color-selected: var(--brand-color);
--core-bottom-tabs-background-selected: transparent;
--core-bottom-tabs-badge-color: var(--brand-color);
--core-bottom-tabs-badge-text-color: var(--brand-color-contrast);
--core-bottom-tabs-badge-text-color: var(--brand-contrast);
--bottom-tabs-size: 56px;
ion-tab-bar.mainmenu-tabs {
--background: var(--core-bottom-tabs-background);
@ -141,7 +112,7 @@
--background-selected: var(--core-bottom-tabs-background-selected);
}
--core-link-color: var(--blue);
--core-link-color: var(--primary);
a {
color: var(--core-link-color);
}
@ -203,7 +174,7 @@
}
.action-sheet-cancel {
--button-color: var(--ion-color-danger);
--button-color: var(--danger);
}
}
@ -226,9 +197,10 @@
}
}
--core-loading-spinner: var(--primary);
ion-spinner {
--ion-color-base: var(--ion-color-primary);
--color: var(--ion-color-primary);
--ion-color-base: var(--core-loading-spinner);
--color: var(--core-loading-spinner);
}
--core-progressbar-height: 8px;
@ -310,11 +282,6 @@
--core-user-menu-site-logo-max-height: 32px;
--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(--stroke);
@ -337,22 +304,22 @@
--core-menu-box-shadow-end: -4px 0px 16px rgba(var(--drop-shadow));
--core-menu-box-shadow-start: 4px 0px 16px rgba(var(--drop-shadow));
--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-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(--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-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(--yellow-dark);
--core-question-feedback-background-color: var(--yellow-light);
--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;