TYPO3-Documentation / sphinx_typo3_theme

Sphinx theme for docs.typo3.org
https://typo3-documentation.github.io/sphinx_typo3_theme
MIT License
28 stars 17 forks source link

Use white background for numbered sections like symfony #173

Closed linawolf closed 1 year ago

linawolf commented 2 years ago

Symphony is using boxes with a white background and a colored frame:

image

The texts have a higher contrast. Expecially our link color orange has not a high enough contrast on some backgrounds.

I would suggest to change our css for the numbered sections as follows:

image

by removing the background color and setting a border:

.bignums>li, .bignums-hint>li, .bignums-note>li, .bignums-caution>li, .bignums-warning>li, .bignums-attention>li, .bignums-important>li, .bignums-seealso>li, .bignums-tip>li, .bignums-danger>li, .bignums-error>li, .bignums-xxl>li {
  list-style: none;
  position: relative;
  padding: 1rem;
  padding-left: 3.875rem;
  padding-top: 1.2875rem;
   background-color: #ffffff; 
  min-height: 4.3rem;
  border-radius: 0.25rem;
  border: 2px solid #e6e6e6;
}

also for the tip numbers:

image

.bignums-important>li, .bignums-seealso>li, .bignums-tip>li {
  border-color: #5cb85c;
  /* background-color: #ebf6eb; */
}

And the warning numbers:

image

.bignums-caution>li, .bignums-warning>li, .bignums-attention>li {
  /* background-color: #fdf5ea; */
  border-color: #f0ad4e;
}

The xxl-numbers need some additional padding:

image

.bignums-xxl>li { padding: 0; padding-left: 4.75rem; padding-top: 1.375rem; padding-bottom: 1rem; background-color: transparent; min-height: 3rem; }

.bignums-xxl>li:before { font-size: 1.5rem; / top: 0; / / left: 0; / }

And even the nested boxes look good in my eyes:

image

marble commented 1 year ago

Done in upcoming sphinx_typo3_theme v4.7.8. Note that .bignums-xxl didn't have a background-color. Consequently they now don't have a border.