SAK-50127 Samigo timer bar isn’t clearly visible in dark mode #12931
Conversation
ern
changed the title
| @@ -62,12 +62,12 @@ | |||
| <div class="progress-wrapper"> | |||
| <div class="timer-title">${ titleMessage }</div> | |||
| <div class="progress-wrapper-container"> | |||
| <div class="progress"> | |||
| <div class="progress sak-bg-4"> | |||
There was a problem hiding this comment.
the class progress is used in just few places:
Maybe should check those as well, and if they have the same issue maybe just add the background to the progress class?
There was a problem hiding this comment.
With the newest push we override the default background color, I checked that the other files also have the same problem
| @@ -10,6 +10,10 @@ body{ | |||
| scroll-behavior: $scroll-behavior; | |||
| } | |||
|
|
|||
| .progress { | |||
| background-color: var(--sakai-background-color-4) !important; // Override default progress bar background color | |||
There was a problem hiding this comment.
since we need to override the default value of the progress bootstrap bar, this will sure apply on 100% of the cases
There was a problem hiding this comment.
but i don't think .progress is a bootstrap class? are you sure you need !important? did you test without it? please provide a screenshot
There was a problem hiding this comment.
@jumarub using !important is a last resort
always prefer using css specificity first, see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#tips_for_handling_specificity_headaches
There was a problem hiding this comment.
progress and progress-bar are bootstrap classes for the progress bar component, the sakai class and bootstrap class seem familiar
https://getbootstrap.com/docs/4.0/components/progress/
On the other hand I test it without the !important and it seems to work, so removing the !important is correct.
No description provided.