Skip to content

Commit

Permalink
fix: ORA dark theme compatibility updates (#111)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DawoudSheraz
DawoudSheraz authored Dec 6, 2024
1 parent 5891123 commit 8f1ae4d
Show file tree
Hide file tree
Showing 3 changed files with 203 additions and 3 deletions.
2 changes: 2 additions & 0 deletions changelog.d/20241205_225149_hina.khadim_ora_dark_theme_fixups.md
View file
Original file line number Diff line number Diff line change
@@ -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.
2 changes: 1 addition & 1 deletion tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
202 changes: 200 additions & 2 deletions tutorindigo/templates/indigo/lms/static/sass/xblock/_xblock.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}

}
}

0 comments on commit 8f1ae4d

Please sign in to comment.