diff --git a/changelog.d/20241205_225149_hina.khadim_ora_dark_theme_fixups.md b/changelog.d/20241205_225149_hina.khadim_ora_dark_theme_fixups.md new file mode 100644 index 00000000..5658dc72 --- /dev/null +++ b/changelog.d/20241205_225149_hina.khadim_ora_dark_theme_fixups.md @@ -0,0 +1,2 @@ +- [BugFix] Update dark-theme styles for ORA (Open Response Assessment) so that it becomes readable, usable, beautiful, and appealing (by @hinakhadim) + - The readability of styles in the `scss` file is challenging and will be improved in subsequent releases. \ No newline at end of file diff --git a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss index f2e46f36..7a0c580f 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss @@ -2,7 +2,7 @@ $primary: {{ INDIGO_PRIMARY_COLOR }}; $primary-light: #F2F7F8; // Theme fonts -$font-family-title: 'Inter', sans-serif;; +$font-family-title: 'Inter', sans-serif; $serif: Crimson; $f-sans-serif: Crimson, 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); diff --git a/tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss b/tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss index 1ee09ae7..9b7a7078 100644 --- a/tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss +++ b/tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss @@ -8,6 +8,10 @@ background: transparent; color: $text-color-d; } + .modal .inner-wrapper{ + background: $body-bg-d; + color: $text-color-d; + } .xblock--drag-and-drop { .keyboard-help-dialog { .modal-window { @@ -120,8 +124,12 @@ .openassessment .ui-slidable__container .ui-slidable:not([disabled]) { color: $text-color-d; &:hover { + color: $primary-d; background: $primary-light-d !important; } + &:focus{ + color: $primary-d; + } } .openassessment .openassessment__steps__step.is--in-progress .step__status__value { background: $primary-d; @@ -132,8 +140,10 @@ h1, h2, h3, h4, h5, h6 { color: $text-color-d; } - .openassessment .openassessment__steps .openassessment__steps__step .step__header .step__title .step__counter:before { + .openassessment .openassessment__steps .openassessment__steps__step .step__header .step__title { + .step__counter:before, .step__label { color: $text-color-d; + } } .openassessment .openassessment__steps__step .step__instruction, .openassessment .submission__answer__part__prompt__copy { @@ -157,6 +167,14 @@ .openassessment .step--self-assessment .self-assessment__assessment .response__submission__label, .openassessment .step--peer-assessment .peer-assessment__assessment .response__submission__label, .openassessment .step--response .response__submission__actions .response__submission__label, .openassessment .step--response .response__submission__content .response__submission__label { color: $text-color-d; } + + .openassessment .step--student-training .student-training__assessment .question__answers, + .openassessment .step--self-assessment .self-assessment__assessment .question__answers { + .wrapper--input .answer__label, .answer__tip, .answer__points, .answer__points__label { + color: $text-color-d; + } + } + .openassessment .openassessment__steps__step { background: none; } @@ -167,7 +185,12 @@ background: none; border-color: $primary-d; } - + .openassessment .submission__answer__part__text__value { + color: $text-color-d; + } + .openassessment .submission__answer__part__text__value:not(textarea){ + background: none; + } .xmodule_display.xmodule_ProblemBlock div.problem .question-description { color: $text-color-primary; @@ -265,4 +288,179 @@ } } } + + .ui-dialog.ui-widget.ui-widget-content, + .ui-dialog-titlebar.ui-widget-header, + .ui-dialog-buttonpane.ui-widget-content, + .dialog-confirm.ui-dialog-content.ui-widget-content{ + background: $body-bg-d; + color: $text-color-d; + & .ui-button.ui-state-default:active, + & .ui-button.ui-state-default:focus + {box-shadow: none;} + } + + .openassessment .submission__answer__part__prompt__copy a, + .wrapper--xblock .message .message__content a{ + color: $primary-d; + &:hover{ + color: #77a0ee; + } + } + + .openassessment { + .submission__peer-evaluations__title, + .self-assessment__display__title,.step--self-assessment .self-assessment__display__title, + .peer-assessment__display__title,.step--self-assessment .peer-assessment__display__title,, + .staff-assessment__display__title, .step--self-assessment .staff-assessment__display__title,{ + color: $text-color-d !important; // open-assessment scss file used !important + } + } + + div.wrapper--xblock { + + .openassessment__student-training--instructions.step__message > .message__content{ + color: $primary-light-d; + } + .openassessment .openassessment__steps__step .step__message.message--waiting{ + background: $primary-light-d; + } + .message--complete, + .step--student-training .message--correct, + .step--student-training .message--correct{ + background: #ecfaec; + & .message__content{ + color: $primary-light-d; + a { + color: $btn-color-d; + } + } + } + + .message--incomplete, + .step--student-training .message--incorrect, + .step--student-training .wrapper--xblock .message--incorrect{ + background: #fff9eb; + & .message__content{ + color: $primary-light-d; + a { + color: $btn-color-d; + } + } + } + + .openassessment .openassessment__steps__step.is--in-progress .step__status__value .copy{ + color: $primary-light-d; + } + + .openassessment .openassessment__steps .openassessment__steps__step .step__header .step__deadline{ + color: $border-color-d; + } + + .step--response .step__rubric{ + background: $primary-light-d; + } + + .step--response .step__rubric .question__answers .wrapper--input .answer__label, + .step--student-training .student-training__assessment .question__answers .wrapper--input .answer__label, + .openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input .answer__label, + .openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input .answer__label, + .openassessment .staff-assessment__assessment .question__answers .wrapper--input .answer__label{ + color: $text-color-d; + } + + .step--response .step__rubric .question__answers .answer__tip, + .step--student-training .student-training__assessment .question__answers .answer__tip, + .openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip, + .openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip, + .openassessment .staff-assessment__assessment .question__answers .answer__tip, + .step--response .step__rubric .question__answers .answer__points, + .step--student-training .student-training__assessment .question__answers .answer__points, + .openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points, + .openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points, + .openassessment .staff-assessment__assessment .question__answers .answer__points + .step--response .step__rubric .question__answers .answer__points__label, + .step--student-training .student-training__assessment .question__answers .answer__points__label, + .openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points__label, + .openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points__label, + .openassessment .staff-assessment__assessment .question__answers .answer__points__label + { + color: $text-color-primary; + } + + .tox .tox-toolbar, .tox .tox-toolbar__overflow, + .tox .tox-toolbar__primary{ + background-color: $body-bg-d; + color: $text-color-d; + } + + .tox .tox-tbtn{ + color: $text-color-d; + } + + .tox .tox-tbtn__select-chevron svg{ + fill: $text-color-d; + } + + .tox .tox-edit-area__iframe{ + background-color: $body-bg-d; + } + + .openassessment .submission__answer__display__title{ + color: $text-color-primary; + } + + .openassessment .question__score{ + .question__score__value, + .label, + .question__score__potential + { color: $text-color-d; } + } + .openassessment .answer{ + .answer__source__value-with-points, + .answer__value__value, + .answer__source, + .answer__points__label, + .answer__points + { color: $text-color-d; } + } + .openassessment .question__score__value:after{ + color: $text-color-d; + } + + + // for staff + .ui-staff{ + .wrapper--content{ + background: $body-bg-d; + color: $text-color-d; + } + + .step__message.message.message--warning, + .step__message.message.message--correct, + .message--incorrect, + .message--complete, + .message--incomplete{ + color: $primary-light-d; + & .message__content{ + color: $primary-light-d; + a { + color: $btn-color-d; + } + } + } + } + + .openassessment .ui-staff__content__section{ + .wrapper--input{ + background: $body-bg-d; + color: $text-color-d; + } + } + + .openassessment .staff-info__workflow-cancellation .staff-info__cancel-submission__content .comments__label{ + color: $text-color-d; + } + + } }