Closed linawolf closed 1 year ago
Symphony is using boxes with a white background and a colored frame:
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:
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:
.bignums-important>li, .bignums-seealso>li, .bignums-tip>li { border-color: #5cb85c; /* background-color: #ebf6eb; */ }
And the warning numbers:
.bignums-caution>li, .bignums-warning>li, .bignums-attention>li { /* background-color: #fdf5ea; */ border-color: #f0ad4e; }
The xxl-numbers need some additional padding:
.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:
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.
Symphony is using boxes with a white background and a colored frame:
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:
by removing the background color and setting a border:
also for the tip numbers:
And the warning numbers:
The xxl-numbers need some additional padding:
.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: