Best Answer

Test navigation buttons contrast color in light mode

  • 9 October 2023
  • 3 replies
  • 53 views

I’ve put my platform into light mode in the new course player according to the forums here (thanks!), but I have one additional style issue. The “Previous” button and some of the icons in a test are showing white text over the grey background. I’m not sure which color to modify, but it definitely isn’t any color I have set to white or grey currently.

 

Here’s what I have in Branding:


/* Light Theme */
lrn-course-player-play-area {
--ui-color-layout-contrast: #f5f5f5;
--ui-color-typography-negative: rgb(0, 0, 0);
--ui-color-border-accessibility-default: rgba(65, 64, 66, 0.507);
--ui-color-layout-overlay-dark: rgb(255, 255, 255);
}
lrn-training-material-header,
.lrn-course-player-table-of-contents-header,
.lrn-course-player-training-material-idle-view-content {
--ui-color-icon-negative: rgb(73, 43, 43);
--ui-color-icon-neutral: rgb(255, 255, 255);
}
lrn-training-material-header button,
.lrn-course-player-table-of-contents-header button,
dcb-ui-list-item-training-material-content,
.lrn-course-player-training-material-idle-view-content {
--ui-color-border-accessibility-negative: rgba(102, 102, 102, 1);
--ui-color-interaction-ripple-light: rgba(0, 0, 0, 0.08);
--ui-color-interaction-hover-light: rgba(0, 0, 0, 0.233);
--ui-color-button-label-negative: rgba(51, 51, 51, 1);
}
lrn-course-player-play-area dcb-ui-accordion dcb-ui-icon span.color-negative svg {
fill: #00112c;
}

/** Remove Tags **/
.lrn-course-player-lesson-info {
display:none;
}
/** End Remove Tags **/

/** Remove achievements from Course Completion Popup **/
.lrn-course-completion-dialog-achievements {
display: none;
}
/** End Remove achievements from Course Completion Popup **/

/*Column width 6 Buttons */
.myRow{
float:left;width:100%
}
.myRow.sixths{
width:16.6666666%
}
/*end column width*/


/*Column width 7 Buttons */
.myRow{
float:left;width:100%
}
.myRow.sevenths{
width:14.28571%
}
/*end column width*/

/* HTML boxes no border */
.htmlwidget {
background: transparent; border: none;
box-shadow: none;
}


/* Title Bar hide */
#doc-layout-title-bar {
display: none;
}
/* end Title Bar hide */

 

icon

Best answer by amwilliams 16 October 2023, 21:49

View original

3 replies

Userlevel 4

Following

Aye yo! Figured it out! 

 

lrn-course-player-play-area, 
dcb-te-submit-bar-slot.dcb-te-submit-bar-before-button,
dcb-ui-button-text button.ui-button-color-negative {
background-color: #ffffff;
}

 

Userlevel 7
Badge +3

Man these are some heavy fixes. Not looking forward to digging into the new course player for edits….

Reply