location | light mode | dark mode | WCAG contrast (with text colour) | WCAG contrast (with link colour) |
---|---|---|---|---|
Babel-0 left | #FFB3B3 | #4A0000 | Light mode: 9.485 (AAA) Dark mode: 13.75 (AAA) |
Light mode: 9.485 (AAA) Dark mode: 6.545 (AA) |
Babel-1 left | #FEA6DB | #570035 | Light mode: 8.979 (AAA) Dark mode: 12.18 (AAA) |
Light mode: 8.979 (AAA) Dark mode: 5.801 (AA) |
Babel-2 left | #EA9BFD | #4F0162 | Light mode: 8.145 (AAA) Dark mode: 11.73 (AAA) |
Light mode: 8.145 (AAA) Dark mode: 5.584 (AA) |
Babel-3 left | #A68FFC | #19026D | Light mode: 6.110 (AA) Dark mode: 13.97 (AAA) |
Light mode: 6.110 (AA) Dark mode: 6.649 (AA) |
Babel-4 left | #84B2FA | #043178 | Light mode: 7.472 (AAA) Dark mode: 10.34 (AAA) |
Light mode: 7.472 (AAA) Dark mode: 4.925 (AA) |
Babel-5 left | #78F7F8 | #068384 | Light mode: 12.64 (AAA) Dark mode: 3.870 (FAIL) |
Light mode: 12.64 (AAA) Dark mode: 1.842 (FAIL) |
Babel-N left | #6DF7A6 | #078E3F | Light mode: 11.90 (AAA) Dark mode: 3.586 (FAIL) |
Light mode: 11.90 (AAA) Dark mode: 1.707 (FAIL) |
Babel-0 right | #FFE0E8 | #410010 | Light mode: 13.11 (AAA) Dark mode: 14.40 (AAA) |
Light mode: 13.11 (AAA) Dark mode: 6.858 (AA) |
Babel-1 right | #FEDBF8 | #390130 | Light mode: 12.82 (AAA) Dark mode: 14.54 (AAA) |
Light mode: 12.82 (AAA) Dark mode: 6.921 (AA) |
Babel-2 right | #EFD6FE | #210135 | Light mode: 12.07 (AAA) Dark mode: 15.84 (AAA) |
Light mode: 12.07 (AAA) Dark mode: 7.542 (AAA) |
Babel-3 right | #D5D2FD | #05022F | Light mode: 11.11 (AAA) Dark mode: 16.81 (AAA) |
Light mode: 11.11 (AAA) Dark mode: 8.001 (AAA) |
Babel-4 right | #CDE4FD | #011831 | Light mode: 12.37 (AAA) Dark mode: 15.09 (AAA) |
Light mode: 12.37 (AAA) Dark mode: 7.184 (AAA) |
Babel-5 right | #C9FCFB | #023534 | Light mode: 14.43 (AAA) Dark mode: 11.37 (AAA) |
Light mode: 14.43 (AAA) Dark mode: 5.412 (AA) |
Babel-N right | #C4FCDB | #023A19 | Light mode: 14.05 (AAA) Dark mode: 10.94 (AAA) |
Light mode: 14.05 (AAA) Dark mode: 5.210 (AA) |
.babel-box {
float: left;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
margin: 1px;
}
.babel-box-wrapper .babel-box {
width: calc(100% - 2px); /* subtract horizontal margin */
}
.babel-box table {
border-spacing: 0; /* replacement for cellspacing="0" */
}
.babel-box .babel-content {
width: 100%;
min-width: 238px;
height: 100%;
margin: 0;
}
.babel-box .babel-code {
width: 45px;
height: 45px;
text-align: center;
}
.babel-box .babel-text {
font-size: 8pt;
padding: 4pt;
line-height: 1.25em;
}
.babel-box.babel-0 { border-color: #FFB3B3; }
.babel-box.babel-0 .babel-content { background-color: #FFE0E8; }
.babel-box.babel-0 .babel-code { background-color: #FFB3B3; }
.babel-box.babel-1 { border-color: #FEA6DB; }
.babel-box.babel-1 .babel-content { background-color: #FEDBF8; }
.babel-box.babel-1 .babel-code { background-color: #FEA6DB; }
.babel-box.babel-2 { border-color: #EA9BFD; }
.babel-box.babel-2 .babel-content { background-color: #EFD6FE; }
.babel-box.babel-2 .babel-code { background-color: #EA9BFD; }
.babel-box.babel-3 { border-color: #A68FFC; }
.babel-box.babel-3 .babel-content { background-color: #D5D2FD; }
.babel-box.babel-3 .babel-code { background-color: #A68FFC; }
.babel-box.babel-4 { border-color: #84B2FA; }
.babel-box.babel-4 .babel-content { background-color: #CDE4FD; }
.babel-box.babel-4 .babel-code { background-color: #84B2FA; }
.babel-box.babel-5 { border-color: #78F7F8; }
.babel-box.babel-5 .babel-content { background-color: #C9FCFB; }
.babel-box.babel-5 .babel-code { background-color: #78F7F8; }
.babel-box.babel-N { border-color: #6DF7A6; }
.babel-box.babel-N .babel-content { background-color: #C4FCDB; }
.babel-box.babel-N .babel-code { background-color: #6DF7A6; }
/* dark mode colors; styles need to be duplicated exactly between these two media blocks */
@media screen {
html.skin-theme-clientpref-night .babel-box .babel-code a { color: #3366EE; }
html.skin-theme-clientpref-night .babel-box.babel-0 { border-color: #4A0000; }
html.skin-theme-clientpref-night .babel-box.babel-0 .babel-content { background-color: #410010; }
html.skin-theme-clientpref-night .babel-box.babel-0 .babel-code { background-color: #4A0000; }
html.skin-theme-clientpref-night .babel-box.babel-1 { border-color: #570035; }
html.skin-theme-clientpref-night .babel-box.babel-1 .babel-content { background-color: #390130; }
html.skin-theme-clientpref-night .babel-box.babel-1 .babel-code { background-color: #570035; }
html.skin-theme-clientpref-night .babel-box.babel-2 { border-color: #4F0162; }
html.skin-theme-clientpref-night .babel-box.babel-2 .babel-content { background-color: #210135; }
html.skin-theme-clientpref-night .babel-box.babel-2 .babel-code { background-color: #4F0162; }
html.skin-theme-clientpref-night .babel-box.babel-3 { border-color: #19026D; }
html.skin-theme-clientpref-night .babel-box.babel-3 .babel-content { background-color: #05022F; }
html.skin-theme-clientpref-night .babel-box.babel-3 .babel-code { background-color: #19026D; }
html.skin-theme-clientpref-night .babel-box.babel-4 { border-color: #043178; }
html.skin-theme-clientpref-night .babel-box.babel-4 .babel-content { background-color: #011831; }
html.skin-theme-clientpref-night .babel-box.babel-4 .babel-code { background-color: #043178; }
html.skin-theme-clientpref-night .babel-box.babel-5 { border-color: #068384; }
html.skin-theme-clientpref-night .babel-box.babel-5 .babel-content { background-color: #023534; }
html.skin-theme-clientpref-night .babel-box.babel-5 .babel-code { background-color: #068384; }
html.skin-theme-clientpref-night .babel-box.babel-N { border-color: #078E3F; }
html.skin-theme-clientpref-night .babel-box.babel-N .babel-content { background-color: #023A19; }
html.skin-theme-clientpref-night .babel-box.babel-N .babel-code { background-color: #078E3F; }
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .babel-box .babel-code a { color: #3366EE; }
html.skin-theme-clientpref-os .babel-box.babel-0 { border-color: #FFB3B3; }
html.skin-theme-clientpref-os .babel-box.babel-0 .babel-content { background-color: #FFE0E8; }
html.skin-theme-clientpref-os .babel-box.babel-0 .babel-code { color: #000000; }
html.skin-theme-clientpref-os .babel-box.babel-1 { border-color: #FEA6DB; }
html.skin-theme-clientpref-os .babel-box.babel-1 .babel-content { background-color: #FEDBF8; }
html.skin-theme-clientpref-os .babel-box.babel-1 .babel-code { color: #000000; }
html.skin-theme-clientpref-os .babel-box.babel-2 { border-color: #EA9BFD; }
html.skin-theme-clientpref-os .babel-box.babel-2 .babel-content { background-color: #EFD6FE; }
html.skin-theme-clientpref-os .babel-box.babel-2 .babel-code { color: #000000; }
html.skin-theme-clientpref-os .babel-box.babel-3 { border-color: #A68FFC; }
html.skin-theme-clientpref-os .babel-box.babel-3 .babel-content { background-color: #D5D2FD; }
html.skin-theme-clientpref-os .babel-box.babel-3 .babel-code { color: #000000; }
html.skin-theme-clientpref-os .babel-box.babel-4 { border-color: #84B2FA; }
html.skin-theme-clientpref-os .babel-box.babel-4 .babel-content { background-color: #CDE4FD; }
html.skin-theme-clientpref-os .babel-box.babel-4 .babel-code { color: #000000; }
html.skin-theme-clientpref-os .babel-box.babel-5 { border-color: #78F7F8; }
html.skin-theme-clientpref-os .babel-box.babel-5 .babel-content { background-color: #C9FCFB; }
html.skin-theme-clientpref-os .babel-box.babel-5 .babel-code { color: #000000; }
html.skin-theme-clientpref-os .babel-box.babel-N { border-color: #6DF7A6; }
html.skin-theme-clientpref-os .babel-box.babel-N .babel-content { background-color: #C4FCDB; }
html.skin-theme-clientpref-os .babel-box.babel-N .babel-code { color: #000000; }
}