forked from EVOgeek/Vmeda.Online
Juan Leyva
GitHub
commit
6964c01c77
@ -1781,6 +1781,10 @@
|
||||
"core.settings.appready": "local_moodlemobileapp",
|
||||
"core.settings.cannotsyncoffline": "local_moodlemobileapp",
|
||||
"core.settings.cannotsyncwithoutwifi": "local_moodlemobileapp",
|
||||
"core.settings.colorscheme": "local_moodlemobileapp",
|
||||
"core.settings.colorscheme-auto": "local_moodlemobileapp",
|
||||
"core.settings.colorscheme-dark": "local_moodlemobileapp",
|
||||
"core.settings.colorscheme-light": "local_moodlemobileapp",
|
||||
"core.settings.compilationinfo": "local_moodlemobileapp",
|
||||
"core.settings.cordovadevicemodel": "local_moodlemobileapp",
|
||||
"core.settings.cordovadeviceosversion": "local_moodlemobileapp",
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
</ion-item-divider>
|
||||
<ng-container *ngFor="let event of dayEvents.events">
|
||||
<a ion-item text-wrap detail-none class="core-course-module-handler item-media" (click)="action($event, event.url)" [title]="event.name">
|
||||
<img item-start [src]="event.iconUrl" core-external-content alt="" role="presentation" *ngIf="event.iconUrl" class="core-module-icon">
|
||||
<img item-start [src]="event.iconUrl" alt="" role="presentation" *ngIf="event.iconUrl" class="core-module-icon">
|
||||
<h2><core-format-text [text]="event.name"></core-format-text></h2>
|
||||
<p *ngIf="showCourse">
|
||||
<core-format-text [text]="event.course.fullnamedisplay"></core-format-text>
|
||||
|
||||
@ -58,6 +58,9 @@ ion-app.app-root addon-calendar-calendar {
|
||||
.addon-calendar-months {
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
@include darkmode() {
|
||||
background-color: $gray-darker;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-calendar-day {
|
||||
@ -108,6 +111,9 @@ ion-app.app-root addon-calendar-calendar {
|
||||
}
|
||||
&.dayblank {
|
||||
background-color: $gray-lighter;
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-calendar-event {
|
||||
|
||||
@ -4,10 +4,13 @@ $item-message-note-text: $gray-dark !default;
|
||||
$item-message-note-font-size: 75% !default;
|
||||
$item-message-mine-bg: $gray-light !default;
|
||||
|
||||
ion-app.app-root page-addon-messages-discussion {
|
||||
ion-app.app-root page-addon-messages-discussion.ion-page {
|
||||
|
||||
ion-content {
|
||||
background-color: $gray-lighter !important;
|
||||
@include darkmode() {
|
||||
background-color: $gray-darker !important;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-messages-discussion-container {
|
||||
@ -59,6 +62,7 @@ ion-app.app-root page-addon-messages-discussion {
|
||||
align-items: center;
|
||||
margin-bottom: .5rem!important;
|
||||
margin-top: 0;
|
||||
color: $text-color;
|
||||
|
||||
ion-avatar {
|
||||
display: block;
|
||||
@ -108,6 +112,9 @@ ion-app.app-root page-addon-messages-discussion {
|
||||
|
||||
.addon-message-text {
|
||||
display: inline-flex;
|
||||
* {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-messages-delete-button {
|
||||
|
||||
@ -28,6 +28,9 @@ ion-app.app-root .addon-message-discussion {
|
||||
white-space: nowrap;
|
||||
color: $black;
|
||||
@include margin(null, 2px, null, null);
|
||||
@include darkmode() {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-message-last-message-text {
|
||||
|
||||
@ -10,6 +10,9 @@ ion-app.app-root addon-mod-assign-submission {
|
||||
|
||||
div.submissioneditable p {
|
||||
color: $red;
|
||||
@include darkmode() {
|
||||
color: $red-light;
|
||||
}
|
||||
}
|
||||
|
||||
.core-grading-summary .advancedgrade {
|
||||
@ -45,6 +48,7 @@ core-format-text {
|
||||
margin: 0 auto;
|
||||
tbody {
|
||||
background: $white;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
padding: $content-padding;
|
||||
background-color: white;
|
||||
background-color: $white;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-right-width: 0;
|
||||
@ -11,6 +11,10 @@
|
||||
border-style: solid;
|
||||
border-color: $list-border-color;
|
||||
|
||||
@include darkmode {
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
|
||||
table, tbody {
|
||||
display: block;
|
||||
}
|
||||
@ -46,6 +50,11 @@ page-addon-mod-data-edit {
|
||||
form .addon-data-advanced-search {
|
||||
background-color: $list-background-color;
|
||||
|
||||
@include darkmode() {
|
||||
background-color: $core-dark-item-bg-color;
|
||||
color: $core-dark-text-color;
|
||||
}
|
||||
|
||||
.item.item-input .item-block .item-inner ion-input,
|
||||
.item.item-input.item-input-has-focus .item-inner ion-input,
|
||||
.item.item-input.input-has-focus .item-inner ion-input {
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
ion-app.app-root page-addon-mod-forum-discussion {
|
||||
.card.highlight .card-header .item {
|
||||
background-color: $gray-lighter;
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-forum-reply-button .label {
|
||||
|
||||
@ -26,6 +26,9 @@ ion-app.app-root page-addon-mod-lesson-player {
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: $gray-lighter;
|
||||
@include darkmode() {
|
||||
background-color: $core-dark-item-divider-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
@ -52,13 +55,25 @@ ion-app.app-root page-addon-mod-lesson-player {
|
||||
|
||||
.item-ios table {
|
||||
@extend .card-ios;
|
||||
@include darkmode() {
|
||||
color: $white;
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.item-md table {
|
||||
@extend .card-md;
|
||||
@include darkmode() {
|
||||
color: $white;
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.item-wp table {
|
||||
@extend .card-wp;
|
||||
@include darkmode() {
|
||||
color: $white;
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,6 +25,9 @@ ion-app.app-root addon-mod-quiz-index {
|
||||
|
||||
.item:nth-child(even) {
|
||||
background-color: $gray-lighter;
|
||||
@include darkmode() {
|
||||
background-color: $core-dark-item-divider-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-mod_quiz-highlighted,
|
||||
@ -34,5 +37,15 @@ ion-app.app-root addon-mod-quiz-index {
|
||||
background-color: $blue-light;
|
||||
color: $blue-dark;
|
||||
}
|
||||
|
||||
@include darkmode() {
|
||||
.addon-mod_quiz-highlighted,
|
||||
.item.addon-mod_quiz-highlighted,
|
||||
.addon-mod_quiz-highlighted p,
|
||||
.item.addon-mod_quiz-highlighted p {
|
||||
background-color: $blue-dark;
|
||||
color: $blue-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,5 +10,13 @@ ion-app.app-root page-addon-mod-quiz-navigation-modal {
|
||||
}
|
||||
color: $text-color;
|
||||
background-color: $white;
|
||||
|
||||
@include darkmode() {
|
||||
ion-label.label {
|
||||
color: $core-dark-text-color;
|
||||
}
|
||||
color: $core-dark-text-color;
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,10 +11,16 @@ ion-app.app-root addon-mod-survey-index {
|
||||
|
||||
ion-grid {
|
||||
background-color: $white;
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.even {
|
||||
background-color: $gray-light;
|
||||
@include darkmode() {
|
||||
background-color: $gray-darker;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-mod_survey-textarea textarea {
|
||||
|
||||
@ -6,20 +6,32 @@ $addon-mod-wiki-toc-background-color: $gray-light !default;
|
||||
|
||||
ion-app.app-root addon-mod-wiki-index {
|
||||
background-color: $white;
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
.addon-mod_wiki-page-content {
|
||||
background-color: $white;
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.wiki-toc {
|
||||
border: 1px solid $addon-mod-wiki-toc-border-color;
|
||||
background: $addon-mod-wiki-toc-background-color;
|
||||
p {
|
||||
color: $text-color !important;
|
||||
}
|
||||
a {
|
||||
color: $link-color;
|
||||
}
|
||||
margin: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.wiki-toc-title {
|
||||
color: $addon-mod-wiki-toc-title-color;
|
||||
color: $addon-mod-wiki-toc-title-color !important;
|
||||
font-size: 1.1em;
|
||||
font-variant: small-caps;
|
||||
text-align: center;
|
||||
|
||||
@ -69,6 +69,7 @@ addon-qtype-ddmarker {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
border-radius: 10px;
|
||||
color: $text-color;
|
||||
}
|
||||
div.markertexts span.markertext {
|
||||
z-index: 3;
|
||||
|
||||
@ -69,14 +69,21 @@ addon-qtype-ddwtos {
|
||||
|
||||
span.incorrect {
|
||||
background-color: $red-light;
|
||||
@include darkmode() {
|
||||
background-color: $red-dark;
|
||||
}
|
||||
}
|
||||
span.correct {
|
||||
background-color: $green-light;
|
||||
@include darkmode() {
|
||||
background-color: $green-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 to length($core-dd-question-colors) {
|
||||
.group#{$i + 1} {
|
||||
background: nth($core-dd-question-colors, $i + 1);
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,5 +15,9 @@ ion-app.app-root addon-qtype-gapselect {
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
background: $gray-lighter;
|
||||
|
||||
@include darkmode() {
|
||||
background: $gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,6 +43,10 @@ ion-app.app-root.ios {
|
||||
@extend .card-ios ;
|
||||
@extend .card-content-ios;
|
||||
|
||||
@include darkmode() {
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
|
||||
&[icon-start] {
|
||||
@include padding(null, null, null, $card-ios-padding-left * 2 + 20);
|
||||
|
||||
|
||||
@ -38,6 +38,10 @@ ion-app.app-root.md {
|
||||
@extend .card-md;
|
||||
@extend .card-content-md;
|
||||
|
||||
@include darkmode() {
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
|
||||
&[icon-start] {
|
||||
@include padding(null, null, null, $card-md-padding-left * 2 + 20);
|
||||
|
||||
|
||||
@ -255,6 +255,10 @@ ion-app.app-root {
|
||||
|
||||
&.core-shortened {
|
||||
color: $gray-darker;
|
||||
@include darkmode() {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
min-height: 50px;
|
||||
|
||||
@ -268,6 +272,10 @@ ion-app.app-root {
|
||||
z-index: 1001;
|
||||
background-color: $white;
|
||||
@include padding(null, null, null, 10px);
|
||||
@include darkmode() {
|
||||
color: $white;
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
@ -282,6 +290,15 @@ ion-app.app-root {
|
||||
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
|
||||
z-index: 1000;
|
||||
|
||||
@include darkmode {
|
||||
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white));
|
||||
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
|
||||
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
|
||||
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -469,6 +486,23 @@ ion-app.app-root {
|
||||
}
|
||||
}
|
||||
|
||||
@include darkmode() {
|
||||
ion-select.core-button-select,
|
||||
.core-button-select {
|
||||
background-color: $core-dark-item-divider-bg-color;
|
||||
|
||||
|
||||
&.select-md,
|
||||
&.button-md,
|
||||
&.select-ios,
|
||||
&.button-ios,
|
||||
&.select-wp,
|
||||
&.button-wp {
|
||||
background: $core-dark-item-divider-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// File uploader.
|
||||
// -------------------------
|
||||
.core-fileuploader-file-handler {
|
||||
@ -692,6 +726,10 @@ ion-app.app-root {
|
||||
@extend ion-card;
|
||||
border-bottom: 3px solid $color-base;
|
||||
|
||||
@include darkmode() {
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
|
||||
&[icon-start] {
|
||||
@include padding(null, null, null, 52px);
|
||||
position: relative;
|
||||
@ -713,6 +751,9 @@ ion-app.app-root {
|
||||
ion-icon {
|
||||
color: $color-base;
|
||||
}
|
||||
@include darkmode() {
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.core-#{$color-name}-item.item-input {
|
||||
|
||||
@ -35,6 +35,10 @@ ion-app.app-root.wp {
|
||||
@extend .card-wp ;
|
||||
@extend .card-content-wp;
|
||||
|
||||
@include darkmode() {
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
|
||||
&[icon-start] {
|
||||
@include padding(null, null, null, $card-wp-padding-left * 2 + 20);
|
||||
|
||||
|
||||
@ -1779,6 +1779,10 @@
|
||||
"core.settings.appready": "App ready",
|
||||
"core.settings.cannotsyncoffline": "Cannot synchronise offline.",
|
||||
"core.settings.cannotsyncwithoutwifi": "Cannot synchronise because the current settings only allow to synchronise when connected to Wi-Fi. Please connect to a Wi-Fi network.",
|
||||
"core.settings.colorscheme": "Color Scheme",
|
||||
"core.settings.colorscheme-auto": "Auto (based on system settings)",
|
||||
"core.settings.colorscheme-dark": "Dark",
|
||||
"core.settings.colorscheme-light": "Light",
|
||||
"core.settings.compilationinfo": "Compilation info",
|
||||
"core.settings.cordovadevicemodel": "Cordova device model",
|
||||
"core.settings.cordovadeviceosversion": "Cordova device OS version",
|
||||
|
||||
@ -5,6 +5,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-dark) {
|
||||
.fa-#{$color-name} {
|
||||
color: $color-base !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[dir=rtl] .icon {
|
||||
&.core-icon-dir-flip,
|
||||
|
||||
@ -6,6 +6,7 @@ ion-app.app-root core-iframe {
|
||||
border: 0;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
background-color: $gray-light;
|
||||
}
|
||||
|
||||
.core-loading-container {
|
||||
|
||||
@ -7,6 +7,9 @@ ion-app.app-root {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
clear: both;
|
||||
@include darkmode() {
|
||||
color: $core-dark-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.core-loading-content {
|
||||
|
||||
@ -4,4 +4,8 @@ ion-app.app-root .core-input-required-asterisk, ion-app.app-root .icon.core-inpu
|
||||
@include padding(null, null, null, 4px);
|
||||
line-height: 100%;
|
||||
vertical-align: top;
|
||||
|
||||
@include darkmode() {
|
||||
color: $red-light !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,10 @@ ion-app.app-root core-progress-bar {
|
||||
color: $gray-darker;
|
||||
@include position(-16px, 10px, null, null);
|
||||
position: absolute;
|
||||
|
||||
@include darkmode() {
|
||||
color: $gray-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
progress {
|
||||
@ -35,6 +39,9 @@ ion-app.app-root core-progress-bar {
|
||||
.progress-bar-fallback span,
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: $core-progressbar-color;
|
||||
@include darkmode() {
|
||||
background-color: $core-progressbar-color;
|
||||
}
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -6,6 +6,9 @@ ion-app.app-root core-rich-text-editor {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
.core-rte-editor, .core-textarea {
|
||||
padding: 2px;
|
||||
@ -13,6 +16,10 @@ ion-app.app-root core-rich-text-editor {
|
||||
width: 100%;
|
||||
resize: none;
|
||||
background-color: $white;
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.core-rte-editor {
|
||||
@ -32,6 +39,10 @@ ion-app.app-root core-rich-text-editor {
|
||||
display: block;
|
||||
color: $gray-light;
|
||||
font-weight: bold;
|
||||
|
||||
@include darkmode() {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
// Make empty elements selectable (to move the cursor).
|
||||
@ -65,6 +76,10 @@ ion-app.app-root core-rich-text-editor {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
background-color: $white;
|
||||
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
}
|
||||
@include padding(5px, null);
|
||||
border-top: 1px solid $gray;
|
||||
|
||||
@ -90,12 +105,20 @@ ion-app.app-root core-rich-text-editor {
|
||||
color: $text-color;
|
||||
cursor: pointer;
|
||||
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
color: $core-dark-text-color;
|
||||
}
|
||||
|
||||
&.toolbar-button-enable {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:active, &[aria-pressed="true"] {
|
||||
background-color: $gray;
|
||||
@include darkmode() {
|
||||
background-color: $gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&.toolbar-arrow {
|
||||
@ -107,6 +130,9 @@ ion-app.app-root core-rich-text-editor {
|
||||
|
||||
&:active {
|
||||
background-color: $white;
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
&.toolbar-arrow-hidden {
|
||||
|
||||
@ -34,4 +34,9 @@ ion-app.app-root core-send-message-form {
|
||||
min-height: 0;
|
||||
align-self: self-end;
|
||||
}
|
||||
@include darkmode() {
|
||||
ion-icon.icon {
|
||||
color: $gray-darker;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -22,6 +22,10 @@ ion-app.app-root core-split-view {
|
||||
.split-pane-side .core-split-item-selected {
|
||||
background-color: $gray-lighter;
|
||||
@include core-selected-item($core-splitview-selected);
|
||||
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.item-ios[detail-push] .item-inner,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<ion-item #container class="core-timer" [attr.text-center]="align == 'center' ? true : null" [attr.text-end]="align == 'right' ? true : null" role="timer">
|
||||
<ion-item #container no-lines class="core-timer" [attr.text-center]="align == 'center' ? true : null" [attr.text-end]="align == 'right' ? true : null" role="timer">
|
||||
<ion-icon name="timer" item-start role="presentation"></ion-icon>
|
||||
<label *ngIf="timeLeft > 0 && timerText">{{ timerText }}</label>
|
||||
<span *ngIf="timeLeft > 0">{{ timeLeft | coreSecondsToHMS }}</span>
|
||||
|
||||
@ -4,7 +4,7 @@ ion-app.app-root core-timer {
|
||||
}
|
||||
|
||||
.core-timer {
|
||||
background-color: transparent;
|
||||
background-color: transparent !important;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
@ -13,7 +13,7 @@ ion-app.app-root core-timer {
|
||||
// Create the timer warning colors. Go to $core-timer-warn-color.
|
||||
@for $i from 0 through $core-timer-iterations {
|
||||
&.core-timer-timeleft-#{$i} {
|
||||
background-color: rgba($core-timer-warn-color, 1 - ($i / $core-timer-iterations));
|
||||
background-color: rgba($core-timer-warn-color, 1 - ($i / $core-timer-iterations)) !important;
|
||||
|
||||
@if $i <= $core-timer-iterations / 2 {
|
||||
label, span, ion-icon {
|
||||
|
||||
@ -89,5 +89,6 @@
|
||||
"statusbarlighttextandroid": true,
|
||||
"statusbarbgremotetheme": "#000000",
|
||||
"statusbarlighttextremotetheme": true,
|
||||
"enableanalytics": false
|
||||
"enableanalytics": false,
|
||||
"forceColorScheme": ""
|
||||
}
|
||||
|
||||
@ -29,4 +29,10 @@ ion-app.app-root core-block {
|
||||
.item-divider .icon {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
@include darkmode() {
|
||||
.item-divider .icon {
|
||||
color: $core-dark-text-color
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -36,6 +36,7 @@ export class CoreConstants {
|
||||
static SETTINGS_REPORT_IN_BACKGROUND = 'CoreSettingsReportInBackground'; // @deprecated since 3.5.0
|
||||
static SETTINGS_SEND_ON_ENTER = 'CoreSettingsSendOnEnter';
|
||||
static SETTINGS_FONT_SIZE = 'CoreSettingsFontSize';
|
||||
static SETTINGS_COLOR_SCHEME = 'CoreSettingsColorScheme';
|
||||
static SETTINGS_ANALYTICS_ENABLED = 'CoreSettingsAnalyticsEnabled';
|
||||
|
||||
// WS constants.
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<ion-item *ngIf="module && module.visibleoncoursepage !== 0" text-wrap id="core-course-module-{{module.id}}" class="core-course-module-handler {{module.handlerData.class}}" (click)="moduleClicked($event)" [ngClass]="{'item-media': module.handlerData.icon, 'core-not-clickable': !module.handlerData.action || !module.uservisible === false, 'item-dimmed': module.visible === 0 || module.uservisible === false}" [title]="module.handlerData.a11yTitle" detail-none>
|
||||
<ion-item *ngIf="module && module.visibleoncoursepage !== 0" text-wrap id="core-course-module-{{module.id}}" class="core-course-module-handler {{module.handlerData.class}}" (click)="moduleClicked($event)" [ngClass]="{'item-media': module.handlerData.icon, 'core-not-clickable': !module.handlerData.action || module.uservisible === false, 'item-dimmed': module.visible === 0 || module.uservisible === false}" [title]="module.handlerData.a11yTitle" detail-none>
|
||||
|
||||
<img item-start *ngIf="module.handlerData.icon" [src]="module.handlerData.icon" [alt]="module.modnametranslated" class="core-module-icon">
|
||||
<div class="core-module-title">
|
||||
|
||||
@ -15,6 +15,20 @@ ion-app.app-root core-course-module {
|
||||
.core-module-icon {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
&.item-ios:active,
|
||||
&.item-ios.activated {
|
||||
background-color: $list-ios-activated-background-color;
|
||||
}
|
||||
&.item-md:active,
|
||||
&.item-md.activated {
|
||||
background-color: $list-md-activated-background-color;
|
||||
}
|
||||
&.item-wp:active,
|
||||
&.item-wp.activated {
|
||||
background-color: $list-wp-activated-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.core-module-title {
|
||||
@ -64,9 +78,32 @@ ion-app.app-root core-course-module {
|
||||
}
|
||||
}
|
||||
|
||||
.core-not-clickable:active,
|
||||
.core-not-clickable.activated {
|
||||
background-color: $list-background-color;
|
||||
.core-not-clickable {
|
||||
cursor: initial;
|
||||
|
||||
&:active,
|
||||
&.activated {
|
||||
background-color: $list-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include darkmode() {
|
||||
.item.core-course-module-handler {
|
||||
background: $core-dark-item-bg-color;
|
||||
&.item-ios:active,
|
||||
&.item-ios.activated,
|
||||
&.item-md:active,
|
||||
&.item-md.activated,
|
||||
&.item-wp:active,
|
||||
&.item-wp.activated {
|
||||
background-color: $core-dark-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.core-not-clickable:active,
|
||||
.core-not-clickable.activated {
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,6 +6,10 @@ ion-app.app-root core-grades-course {
|
||||
font-size: 16px;
|
||||
color: $text-color;
|
||||
|
||||
@include darkmode() {
|
||||
color: $core-dark-text-color;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid $list-border-color;
|
||||
}
|
||||
@ -19,6 +23,10 @@ ion-app.app-root core-grades-course {
|
||||
vertical-align: bottom;
|
||||
font-weight: bold;
|
||||
background-color: $white;
|
||||
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
tbody th {
|
||||
font-weight: normal;
|
||||
@ -58,11 +66,17 @@ ion-app.app-root core-grades-course {
|
||||
.odd {
|
||||
td, th, th.core-split-item-selected {
|
||||
background-color: $gray-lighter;
|
||||
@include darkmode() {
|
||||
background-color: $gray-darker;
|
||||
}
|
||||
}
|
||||
}
|
||||
.even {
|
||||
td, th, th.core-split-item-selected {
|
||||
background-color: $white;
|
||||
@include darkmode() {
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
74
src/core/login/login.scss
Normal file
74
src/core/login/login.scss
Normal file
@ -0,0 +1,74 @@
|
||||
ion-app.app-root page-core-login-credentials,
|
||||
ion-app.app-root page-core-login-reconnect,
|
||||
ion-app.app-root page-core-login-site {
|
||||
.scroll-content {
|
||||
background: $core-login-page-background-color;
|
||||
|
||||
@include darkmode() {
|
||||
background: $core-dark-login-page-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img.login-logo {
|
||||
width: 90%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 16px;
|
||||
margin: 8px;
|
||||
background: $core-login-box-background-color;
|
||||
border: 1px solid $core-login-box-background-border;
|
||||
color: $core-login-box-text-color;
|
||||
|
||||
@include darkmode() {
|
||||
background: $core-dark-login-box-background-color;
|
||||
border-color: $core-dark-login-box-background-border;
|
||||
color: $core-dark-login-box-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.core-sitename, .core-siteurl {
|
||||
@if $core-fixed-url { display: none; }
|
||||
}
|
||||
|
||||
@if $core-login-button-outline {
|
||||
.button-md.button-default-md, .button-ios.button-default-ios {
|
||||
@extend .button-md-light;
|
||||
}
|
||||
}
|
||||
|
||||
@if $core-login-loading-color {
|
||||
.core-loading-container {
|
||||
color: $core-login-loading-color;
|
||||
|
||||
.spinner circle, .spinner line {
|
||||
stroke: $core-login-loading-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $core-dark-login-button-outline {
|
||||
.button-md.button-default-md, .button-ios.button-default-ios {
|
||||
@extend .button-md-light;
|
||||
}
|
||||
}
|
||||
|
||||
@include darkmode() {
|
||||
.core-loading-container {
|
||||
color: $core-dark-login-loading-color;
|
||||
|
||||
.spinner circle, .spinner line {
|
||||
stroke: $core-dark-login-loading-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-input {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
@ -36,11 +36,11 @@
|
||||
</form>
|
||||
|
||||
<!-- Forgotten password button. -->
|
||||
<div padding-top>
|
||||
<div padding-top class="core-login-forgotten-password">
|
||||
<button ion-button block text-wrap color="light" (click)="forgottenPassword()">{{ 'core.login.forgotten' | translate }}</button>
|
||||
</div>
|
||||
|
||||
<ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
|
||||
<ion-list *ngIf="identityProviders && identityProviders.length" padding-top class="core-login-identity-providers">
|
||||
<ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header>
|
||||
<button ion-item *ngFor="let provider of identityProviders" text-wrap class="core-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
|
||||
<img [src]="provider.iconurl" alt="" width="32" height="32" item-start>
|
||||
@ -48,7 +48,7 @@
|
||||
</button>
|
||||
</ion-list>
|
||||
|
||||
<ion-list *ngIf="canSignup" padding-top>
|
||||
<ion-list *ngIf="canSignup" padding-top class="core-login-sign-up">
|
||||
<ion-list-header text-wrap>{{ 'core.login.firsttime' | translate }}</ion-list-header>
|
||||
<ion-item no-lines text-wrap *ngIf="authInstructions">
|
||||
<p><core-format-text [text]="authInstructions"></core-format-text></p>
|
||||
|
||||
@ -1,45 +1,4 @@
|
||||
ion-app.app-root page-core-login-credentials {
|
||||
.scroll-content {
|
||||
background: $core-login-page-background-color;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img.login-logo {
|
||||
width: 90%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 16px;
|
||||
margin: 8px;
|
||||
background: $core-login-box-background-color;
|
||||
border: 1px solid $core-login-box-background-border;
|
||||
color: $core-login-box-text-color;
|
||||
}
|
||||
|
||||
.core-sitename, .core-siteurl {
|
||||
@if $core-fixed-url { display: none; }
|
||||
}
|
||||
|
||||
@if $core-login-button-outline {
|
||||
.button-md.button-default-md, .button-ios.button-default-ios {
|
||||
@extend .button-md-light;
|
||||
}
|
||||
}
|
||||
|
||||
@if $core-login-loading-color {
|
||||
.core-loading-container {
|
||||
color: $core-login-loading-color;
|
||||
|
||||
.spinner circle, .spinner line {
|
||||
stroke: $core-login-loading-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-input {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@ -22,6 +22,8 @@ ion-app.app-root page-core-login-init {
|
||||
background-size: 100%;
|
||||
background-size: $core-splash-bgsize;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.spinner circle, .spinner line {
|
||||
stroke: $core-splash-spinner-color;
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<p class="item-heading">{{ 'core.login.username' | translate }}</p>
|
||||
<p>{{username}}</p>
|
||||
</ion-item>
|
||||
<form [formGroup]="credForm" (ngSubmit)="login($event)">
|
||||
<form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form">
|
||||
<ion-item margin-bottom>
|
||||
<core-show-password item-content [name]="'password'">
|
||||
<ion-input class="core-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"></ion-input>
|
||||
@ -50,12 +50,12 @@
|
||||
</ion-list>
|
||||
|
||||
<!-- Forgotten password button. -->
|
||||
<div padding-top>
|
||||
<div padding-top class="core-login-forgotten-password">
|
||||
<button ion-button block text-wrap color="light" (click)="forgottenPassword()">{{ 'core.login.forgotten' | translate }}</button>
|
||||
</div>
|
||||
|
||||
<!-- Identity providers. -->
|
||||
<ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
|
||||
<ion-list *ngIf="identityProviders && identityProviders.length" padding-top class="core-login-identity-providers">
|
||||
<ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header>
|
||||
<button ion-item *ngFor="let provider of identityProviders" text-wrap class="core-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
|
||||
<img [src]="provider.iconurl" alt="" width="32" height="32" item-start>
|
||||
|
||||
@ -1,52 +1,20 @@
|
||||
ion-app.app-root page-core-login-reconnect {
|
||||
.scroll-content {
|
||||
background: $core-login-page-background-color;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img.login-logo {
|
||||
width: 90%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 16px;
|
||||
margin: 8px;
|
||||
background: $core-login-box-background-color;
|
||||
border: 1px solid $core-login-box-background-border;
|
||||
color: $core-login-box-text-color;
|
||||
|
||||
.core-login-form .item {
|
||||
background-color: $core-login-item-background-color;
|
||||
@include padding-horizontal(0);
|
||||
|
||||
@include darkmode() {
|
||||
background-color: $core-dark-login-item-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.core-login-form .item-inner {
|
||||
background-color: $core-login-item-inner-background-color;
|
||||
@include padding-horizontal(0);
|
||||
}
|
||||
}
|
||||
|
||||
.core-sitename, .core-siteurl {
|
||||
@if $core-fixed-url { display: none; }
|
||||
}
|
||||
|
||||
@if $core-login-button-outline {
|
||||
.button-md.button-default-md, .button-ios.button-default-ios {
|
||||
@extend .button-md-light;
|
||||
}
|
||||
}
|
||||
|
||||
@if $core-login-loading-color {
|
||||
.core-loading-container {
|
||||
color: $core-login-loading-color;
|
||||
|
||||
.spinner circle, .spinner line {
|
||||
stroke: $core-login-loading-color;
|
||||
@include darkmode() {
|
||||
background-color: $core-dark-login-item-inner-background-color;
|
||||
}
|
||||
@include padding-horizontal(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,38 +1,4 @@
|
||||
ion-app.app-root page-core-login-site {
|
||||
.scroll-content {
|
||||
background-color: $core-login-page-background-color;
|
||||
}
|
||||
|
||||
img.login-logo {
|
||||
width: 90%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 16px;
|
||||
margin: 8px;
|
||||
background: $core-login-box-background-color;
|
||||
border: 1px solid $core-login-box-background-border;
|
||||
color: $core-login-box-text-color;
|
||||
}
|
||||
|
||||
@if $core-login-button-outline {
|
||||
.button-md.button-default-md, .button-ios.button-default-ios {
|
||||
@extend .button-md-light;
|
||||
}
|
||||
}
|
||||
|
||||
@if $core-login-loading-color {
|
||||
.core-loading-container {
|
||||
color: $core-login-loading-color;
|
||||
|
||||
.spinner circle, .spinner line {
|
||||
stroke: $core-login-loading-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.item-input:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@ -41,7 +7,7 @@ ion-app.app-root page-core-login-site {
|
||||
background: transparent;
|
||||
|
||||
.searchbar-input {
|
||||
background-color: $searchbar-ios-toolbar-input-background
|
||||
background-color: $searchbar-ios-toolbar-input-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -82,7 +82,44 @@ ion-app.app-root page-core-mainmenu-more {
|
||||
background-color: $core-more-divider-wp;
|
||||
}
|
||||
}
|
||||
|
||||
@include darkmode() {
|
||||
ion-icon {
|
||||
color: $core-dark-text-color;
|
||||
}
|
||||
|
||||
.item-divider {
|
||||
&.item-ios,
|
||||
&.item-md,
|
||||
&.item-wp {
|
||||
color: $core-dark-text-color;
|
||||
background-color: $core-dark-item-divider-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.item-block {
|
||||
&.item-ios,
|
||||
&.item-md,
|
||||
&.item-wp {
|
||||
color: $core-dark-text-color;
|
||||
background-color: $core-dark-item-bg-color;
|
||||
p {
|
||||
color: $core-dark-text-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.activated {
|
||||
&.item-ios {
|
||||
background-color: $core-more-activated-background-ios;
|
||||
}
|
||||
&.item-md {
|
||||
background-color: $core-more-activated-background-md;
|
||||
}
|
||||
&.item-wp {
|
||||
background-color: $core-more-activated-background-wp;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -3,6 +3,10 @@
|
||||
"appready": "App ready",
|
||||
"cannotsyncoffline": "Cannot synchronise offline.",
|
||||
"cannotsyncwithoutwifi": "Cannot synchronise because the current settings only allow to synchronise when connected to Wi-Fi. Please connect to a Wi-Fi network.",
|
||||
"colorscheme": "Color Scheme",
|
||||
"colorscheme-auto": "Auto (based on system settings)",
|
||||
"colorscheme-dark": "Dark",
|
||||
"colorscheme-light": "Light",
|
||||
"compilationinfo": "Compilation info",
|
||||
"cordovadevicemodel": "Cordova device model",
|
||||
"cordovadeviceosversion": "Cordova device OS version",
|
||||
|
||||
@ -20,6 +20,12 @@
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-item>
|
||||
<ion-item text-wrap class="core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0">
|
||||
<ion-label><h2>{{ 'core.settings.colorscheme' | translate }}</h2></ion-label>
|
||||
<ion-select [(ngModel)]="selectedScheme" (ngModelChange)="colorSchemeChanged()" interface="action-sheet">
|
||||
<ion-option *ngFor="let scheme of colorSchemes" [value]="scheme">{{ 'core.settings.colorscheme-' + scheme | translate }}</ion-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item text-wrap *ngIf="rteSupported">
|
||||
<ion-label>
|
||||
<h2>{{ 'core.settings.enablerichtexteditor' | translate }}</h2>
|
||||
|
||||
@ -24,6 +24,7 @@ import { CoreDomUtilsProvider } from '@providers/utils/dom';
|
||||
import { CoreLocalNotificationsProvider } from '@providers/local-notifications';
|
||||
import { CorePushNotificationsProvider } from '@core/pushnotifications/providers/pushnotifications';
|
||||
import { CoreConfigConstants } from '../../../../configconstants';
|
||||
import { CoreSettingsHelper } from '../../providers/helper';
|
||||
|
||||
/**
|
||||
* Page that displays the general settings.
|
||||
@ -44,11 +45,13 @@ export class CoreSettingsGeneralPage {
|
||||
debugDisplay: boolean;
|
||||
analyticsSupported: boolean;
|
||||
analyticsEnabled: boolean;
|
||||
colorSchemes = [];
|
||||
selectedScheme: string;
|
||||
|
||||
constructor(appProvider: CoreAppProvider, private configProvider: CoreConfigProvider, fileProvider: CoreFileProvider,
|
||||
private eventsProvider: CoreEventsProvider, private langProvider: CoreLangProvider,
|
||||
private domUtils: CoreDomUtilsProvider, private pushNotificationsProvider: CorePushNotificationsProvider,
|
||||
localNotificationsProvider: CoreLocalNotificationsProvider) {
|
||||
localNotificationsProvider: CoreLocalNotificationsProvider, private settingsHelper: CoreSettingsHelper) {
|
||||
|
||||
// Get the supported languages.
|
||||
const languages = CoreConfigConstants.languages;
|
||||
@ -59,6 +62,22 @@ export class CoreSettingsGeneralPage {
|
||||
});
|
||||
}
|
||||
|
||||
if (!CoreConfigConstants.forceColorScheme) {
|
||||
let defaultColorScheme = 'light';
|
||||
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches ||
|
||||
window.matchMedia('(prefers-color-scheme: light)').matches) {
|
||||
this.colorSchemes.push('auto');
|
||||
defaultColorScheme = 'auto';
|
||||
}
|
||||
this.colorSchemes.push('light');
|
||||
this.colorSchemes.push('dark');
|
||||
|
||||
this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, defaultColorScheme).then((scheme) => {
|
||||
this.selectedScheme = scheme;
|
||||
});
|
||||
}
|
||||
|
||||
// Sort them by name.
|
||||
this.languages.sort((a, b) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
@ -126,10 +145,19 @@ export class CoreSettingsGeneralPage {
|
||||
|
||||
return fontSize;
|
||||
});
|
||||
document.documentElement.style.fontSize = this.selectedFontSize + '%';
|
||||
|
||||
this.settingsHelper.setFontSize(this.selectedFontSize);
|
||||
this.configProvider.set(CoreConstants.SETTINGS_FONT_SIZE, this.selectedFontSize);
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when a new color scheme is selected.
|
||||
*/
|
||||
colorSchemeChanged(): void {
|
||||
this.settingsHelper.setColorScheme(this.selectedScheme);
|
||||
this.configProvider.set(CoreConstants.SETTINGS_COLOR_SCHEME, this.selectedScheme);
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the rich text editor is enabled or disabled.
|
||||
*/
|
||||
|
||||
@ -20,6 +20,9 @@ import { CoreFilepoolProvider } from '@providers/filepool';
|
||||
import { CoreLoggerProvider } from '@providers/logger';
|
||||
import { CoreSitesProvider } from '@providers/sites';
|
||||
import { CoreUtilsProvider } from '@providers/utils/utils';
|
||||
import { CoreConstants } from '@core/constants';
|
||||
import { CoreConfigProvider } from '@providers/config';
|
||||
import { CoreConfigConstants } from '../../../configconstants';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
/**
|
||||
@ -32,7 +35,8 @@ export class CoreSettingsHelper {
|
||||
|
||||
constructor(loggerProvider: CoreLoggerProvider, private appProvider: CoreAppProvider, private cronDelegate: CoreCronDelegate,
|
||||
private eventsProvider: CoreEventsProvider, private filePoolProvider: CoreFilepoolProvider,
|
||||
private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider, private translate: TranslateService) {
|
||||
private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider, private translate: TranslateService,
|
||||
private configProvider: CoreConfigProvider) {
|
||||
this.logger = loggerProvider.getInstance('CoreSettingsHelper');
|
||||
}
|
||||
|
||||
@ -175,4 +179,50 @@ export class CoreSettingsHelper {
|
||||
|
||||
return syncPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Init Settings related to DOM.
|
||||
*/
|
||||
initDomSettings(): void {
|
||||
// Set the font size based on user preference.
|
||||
this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0].toString()).then((fontSize) => {
|
||||
this.setFontSize(fontSize);
|
||||
});
|
||||
|
||||
if (!!CoreConfigConstants.forceColorScheme) {
|
||||
this.setColorScheme(CoreConfigConstants.forceColorScheme);
|
||||
} else {
|
||||
let defaultColorScheme = 'light';
|
||||
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches ||
|
||||
window.matchMedia('(prefers-color-scheme: light)').matches) {
|
||||
defaultColorScheme = 'auto';
|
||||
}
|
||||
|
||||
this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, defaultColorScheme).then((scheme) => {
|
||||
this.setColorScheme(scheme);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set document default font size.
|
||||
*
|
||||
* @param fontSize Font size in percentage.
|
||||
*/
|
||||
setFontSize(fontSize: string): void {
|
||||
document.documentElement.style.fontSize = fontSize + '%';
|
||||
}
|
||||
|
||||
/**
|
||||
* Set body color scheme.
|
||||
*
|
||||
* @param colorScheme Name of the color scheme.
|
||||
*/
|
||||
setColorScheme(colorScheme: string): void {
|
||||
document.body.classList.remove('scheme-light');
|
||||
document.body.classList.remove('scheme-dark');
|
||||
document.body.classList.remove('scheme-auto');
|
||||
document.body.classList.add('scheme-' + colorScheme);
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,4 +28,8 @@ import { CoreSettingsHelper } from './providers/helper';
|
||||
CoreSettingsHelper
|
||||
]
|
||||
})
|
||||
export class CoreSettingsModule {}
|
||||
export class CoreSettingsModule {
|
||||
constructor(settingsHelper: CoreSettingsHelper) {
|
||||
settingsHelper.initDomSettings();
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,10 @@ ion-app.app-root page-core-user-profile {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
background-color: $white;
|
||||
@include darkmode() {
|
||||
background: $core-dark-item-bg-color;
|
||||
}
|
||||
}
|
||||
[core-user-avatar].item-avatar-center {
|
||||
display: inline-block;
|
||||
@ -26,11 +29,19 @@ ion-app.app-root page-core-user-profile {
|
||||
background: $list-background-color;
|
||||
border-bottom: 1px solid $list-border-color;
|
||||
|
||||
@include darkmode() {
|
||||
background: $core-dark-item-bg-color;
|
||||
}
|
||||
|
||||
.core-user-profile-handler {
|
||||
background: $list-background-color;
|
||||
border: 0;
|
||||
color: $core-user-profile-communication-icons-color;
|
||||
|
||||
@include darkmode() {
|
||||
background: $core-dark-item-bg-color;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -22,7 +22,6 @@ import { TranslateService } from '@ngx-translate/core';
|
||||
import { CoreTextUtilsProvider } from './text';
|
||||
import { CoreAppProvider } from '../app';
|
||||
import { CoreConfigProvider } from '../config';
|
||||
import { CoreConfigConstants } from '../../configconstants';
|
||||
import { CoreUrlUtilsProvider } from './url';
|
||||
import { CoreFileProvider } from '@providers/file';
|
||||
import { CoreConstants } from '@core/constants';
|
||||
@ -73,10 +72,6 @@ export class CoreDomUtilsProvider {
|
||||
configProvider.get(CoreConstants.SETTINGS_DEBUG_DISPLAY, false).then((debugDisplay) => {
|
||||
this.debugDisplay = !!debugDisplay;
|
||||
});
|
||||
// Set the font size based on user preference.
|
||||
configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0]).then((fontSize) => {
|
||||
document.documentElement.style.fontSize = fontSize + '%';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
123
src/theme/dark.scss
Normal file
123
src/theme/dark.scss
Normal file
@ -0,0 +1,123 @@
|
||||
$core-dark-text-color: $white !default;
|
||||
$core-dark-text-secondary-color: $gray-light !default;
|
||||
$core-dark-link-color: $blue-light !default;
|
||||
|
||||
$core-dark-item-bg-color: $gray-darker !default;
|
||||
$core-dark-item-divider-bg-color: $black !default;
|
||||
$core-dark-background-color: $gray-dark !default;
|
||||
|
||||
// Login.
|
||||
$core-dark-login-page-background-color: radial-gradient(white, $gray-dark) !default;
|
||||
$core-dark-login-box-background-color: $black !default;
|
||||
$core-dark-login-box-background-border: $core-login-box-background-border !default;
|
||||
$core-dark-login-box-text-color: $core-dark-text-color !default;
|
||||
$core-dark-login-item-inner-background-color: $core-dark-login-box-background-color !default;
|
||||
$core-dark-login-item-background-color: $core-dark-login-box-background-color !default;
|
||||
$core-dark-login-button-outline: $core-login-button-outline !default;
|
||||
$core-dark-login-loading-color: $core-dark-text-color !default;
|
||||
|
||||
ion-app.app-root .ion-page {
|
||||
@include darkmode() {
|
||||
color: $core-dark-text-color;
|
||||
background-color: $core-dark-item-bg-color;
|
||||
|
||||
a {
|
||||
color: $core-dark-link-color;
|
||||
}
|
||||
|
||||
.core-tabs-bar *,
|
||||
.core-tabs-bar .tab-slide,
|
||||
.ion-page,
|
||||
.item,
|
||||
.item-select,
|
||||
ion-card,
|
||||
.card-header {
|
||||
color: $core-dark-text-color;
|
||||
background-color: $core-dark-item-bg-color;
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
ion-icon,
|
||||
.label {
|
||||
color: $core-dark-text-color;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-dark) {
|
||||
.icon-md-#{$color-name},
|
||||
.icon-ios-#{$color-name},
|
||||
.icon-wp-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $core-dark-text-secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.item-divider,
|
||||
.item-divider .item-inner {
|
||||
color: $core-dark-text-color;
|
||||
background-color: $core-dark-item-divider-bg-color;
|
||||
}
|
||||
|
||||
.item.item-ios:active,
|
||||
.item.item-ios.activated,
|
||||
.item.item-md:active,
|
||||
.item.item-md.activated,
|
||||
.item.item-wp:active,
|
||||
.item.item-wp.activated {
|
||||
background-color: $core-dark-background-color;
|
||||
}
|
||||
|
||||
.content,
|
||||
.content-md,
|
||||
.content-ios,
|
||||
.content-wp {
|
||||
color: $core-dark-text-color;
|
||||
background-color: $core-dark-background-color;
|
||||
}
|
||||
|
||||
.button,
|
||||
.button-md-light,
|
||||
.button-ios-light,
|
||||
.button-wp-light,
|
||||
.button-outline {
|
||||
ion-icon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-md-light .toolbar-background,
|
||||
.toolbar-ios-light .toolbar-background,
|
||||
.toolbar-wp-light .toolbar-background {
|
||||
background-color: $core-dark-item-divider-bg-color;
|
||||
color: $core-dark-text-color;
|
||||
}
|
||||
|
||||
.button.button-clear-md-dark,
|
||||
.button.button-clear-ios-dark,
|
||||
.button.button-clear-wp-dark {
|
||||
.button-inner ion-icon {
|
||||
color: $core-dark-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.button-outline {
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}
|
||||
|
||||
ion-refresher {
|
||||
.refresher-pulling-icon,
|
||||
.refresher-refreshing-icon,
|
||||
.refresher-pulling-icon ion-icon,
|
||||
.refresher-refreshing-icon ion-icon,
|
||||
ion-icon {
|
||||
color: $refresher-icon-color;
|
||||
}
|
||||
|
||||
.refresher-pulling-text,
|
||||
.refresher-refreshing-text {
|
||||
color: $core-dark-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -88,6 +88,15 @@ $info: $blue !default;
|
||||
$inverted-base: $white !default;
|
||||
$inverted-contrast: $primary !default;
|
||||
|
||||
$primary-dark: lighten($primary, 10%) !default;
|
||||
$secondary-dark: mix($secondary, white, 20%) !default;
|
||||
$danger-dark: mix($danger, white, 20%) !default;
|
||||
$warning-dark: mix($warning, white, 20%) !default;
|
||||
$success-dark: mix($success, white, 20%) !default;
|
||||
$info-dark: mix($info, white, 20%) !default;
|
||||
$inverted-base-dark: $dark !default;
|
||||
$inverted-contrast-dark: $primary-dark !default;
|
||||
|
||||
$colors: (
|
||||
primary: $primary,
|
||||
secondary: $secondary,
|
||||
@ -104,6 +113,22 @@ $colors: (
|
||||
)
|
||||
);
|
||||
|
||||
$colors-dark: (
|
||||
primary: $primary-dark,
|
||||
secondary: $secondary-dark,
|
||||
danger: $danger-dark,
|
||||
light: $dark,
|
||||
gray: $color-gray,
|
||||
dark: $light,
|
||||
warning: $warning-dark,
|
||||
success: $success-dark,
|
||||
info: $info-dark,
|
||||
inverted: (
|
||||
base: $inverted-base-dark,
|
||||
contrast: $inverted-contrast-dark
|
||||
)
|
||||
);
|
||||
|
||||
$text-color: $black !default;
|
||||
$link-color: $blue !default;
|
||||
$background-color: $gray-light !default;
|
||||
@ -544,9 +569,30 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
|
||||
}
|
||||
}
|
||||
|
||||
@mixin darkmode() {
|
||||
$root: #{&};
|
||||
|
||||
@at-root body.scheme-auto {
|
||||
#{$root} {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@at-root body.scheme-dark {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Font Awesome
|
||||
$fa-font-path: $font-path;
|
||||
@import "font-awesome";
|
||||
|
||||
// Format text styles.
|
||||
@import "format-text";
|
||||
|
||||
// Dark mode.
|
||||
@import "dark";
|
||||
Loading…
x
Reference in New Issue
Block a user