New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color blindness support #198

Closed
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
6 participants
@SystemStack

SystemStack commented Mar 7, 2017

  • Reduced glare from conjoined colors in doony-circle-failure and doony-circle-success to a single color
  • Danger button changed to #ff0700 for consistency with doony-circle-failure class
Levi Broadnax
Color blindness support
* Reduced glare from conjoined colors to a single color
* Danger button changed to #ff0700 for consistency with 'doony-circle-failure' class
@mister-roboto

This comment has been minimized.

mister-roboto commented on c44613e Mar 7, 2017

@SystemStack you need to sign Plone Contributor Agreement in order to merge this pull request.

Learn about the Plone Contributor Agreement: http://docs.plone.org/develop/coredev/docs/contributors_agreement_explained.html

@jensens

This comment has been minimized.

Member

jensens commented Mar 7, 2017

I don't think we need a contributor agreement vor Jenkins configuration?

@tisto

This comment has been minimized.

Member

tisto commented Mar 7, 2017

This is a fix in the CSS that we copied from the Dooney Jenkins theme. I don't think we should change anything there. Any change will be gone once we update here. @SystemStack have you considered fixing this in the Dooney theme directly?

@gforcada

This comment has been minimized.

Contributor

gforcada commented Mar 7, 2017

No need for Contributors Agreement, right.

@SystemStack rather than modifying the copied theme, wouldn't it be possible to override it below? With CSS given the same specificity the last rule defined wins.

@SystemStack thanks for contributing!!

@tisto

This comment has been minimized.

Member

tisto commented Mar 8, 2017

@gforcada this is not how CSS works. A more specific CSS selector wins. Therefore it should be easy to override the Dooney CSS without touching it directly.

@gforcada

This comment has been minimized.

Contributor

gforcada commented Mar 8, 2017

@tisto yes, specificity wins, but if you have

.box { color: red }
.box { color: blue}

The .box will be blue rather than red

@tkimnguyen

This comment has been minimized.

Member

tkimnguyen commented Mar 9, 2017

Are you saying that the change should be applied in the Dooney theme or added to a new CSS file here that would get loaded along with jenkins.plone.org.css ?

@tisto

This comment has been minimized.

Member

tisto commented Mar 9, 2017

@tkimnguyen ideally the fix should go upstream into the Dooney theme. If we do not want to do this, we should at least add it to the jenkins.plone.org.css file section that did not just copy over the Dooney theme. It is fine to just use one single CSS file, we should just use a more specific css selector to make sure it gets applied (@gforcada is correct, but using the order of the css lines seems to be a bit too fragile to me).

@tkimnguyen

This comment has been minimized.

Member

tkimnguyen commented Mar 11, 2017

I was able to get the last 2 lines below to work, testing on a local Chrome "Save as" of the http://jenkins.plone.org/view/Dependencies/ view which had some red lights (the main http://jenkins.plone.org page has only green, ha!). They're more specifically targeted (the td). Cool idea.

/* START Levi's stuff */

.btn-danger{color:#ffffff;background-color:#ff0700;border-color:#d43f3a}

.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{color:#ffffff;background-color:#d2322d;border-color:#ff0700}

.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{background-color:#ff0700;border-color:#d43f3a}

td .doony-circle-failure{background:#ff0700;background-image:-moz-radial-gradient(3px 3px 45deg, circle cover, #ff0700 0%, #ff0700 100%);background-image:-webkit-radial-gradient(3px 3px, circle cover, #ff0700, #ff0700);background-image:radial-gradient(circle at 3px 3px, #ff0700 0%, #ff0700 100%)}
td .doony-circle-success{background:#00ff00;background-image:-moz-radial-gradient(3px 3px 45deg, circle cover, #00ff00 0%, #00ff00 100%);background-image:-webkit-radial-gradient(3px 3px, circle cover, #00ff00, #00ff00);background-image:radial-gradient(circle at 3px 3px, #00ff00 0%, #00ff00 100%)}

/* END Levi's stuff */
@tkimnguyen

This comment has been minimized.

Member

tkimnguyen commented Mar 11, 2017

OK I tested on a local Chrome "Save As" of http://jenkins.plone.org. I think only these two lines are necessary to add to jenkins.plone.org.css anywhere:

/* START Levi's accessibility fixes */

td .doony-circle-failure{background:#ff0700;background-image:-moz-radial-gradient(3px 3px 45deg, circle cover, #ff0700 0%, #ff0700 100%);background-image:-webkit-radial-gradient(3px 3px, circle cover, #ff0700, #ff0700);background-image:radial-gradient(circle at 3px 3px, #ff0700 0%, #ff0700 100%)}
td .doony-circle-success{background:#00ff00;background-image:-moz-radial-gradient(3px 3px 45deg, circle cover, #00ff00 0%, #00ff00 100%);background-image:-webkit-radial-gradient(3px 3px, circle cover, #00ff00, #00ff00);background-image:radial-gradient(circle at 3px 3px, #00ff00 0%, #00ff00 100%)}

/* END Levi's accessibility fixes */

@SystemStack do you want to modify your PR to do that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment