code { line-height: 2; } .table-ublock { border-collapse: separate; border-spacing: 3em 1em; } .code-red, .code-blue { word-break: break-all; } .code-red { border: 1px solid black; color: red; } .code-blue { color: blue; } .table-browser-compatibility { border-collapse: collapse; max-width: 500px; } .table-browser-compatibility > tbody > tr > td { border: 1px solid #777; } .table-browser-compatibility > tbody > tr > td:nth-child(1) { font-family: consolas,"Liberation Mono",courier,monospace; padding: 10px; width: 100%; } .browser-compatibility { border-top: 0; height: 200px; padding: 6px 0; vertical-align: bottom; } .browser-compatibility > th > span { display: inline-block; font-weight: bold; height: 20px; margin: 12px; padding: 0; text-align: left; transform: rotate(-90deg); white-space: nowrap; width: 20px; } .browser-compatibility-support-yes, .browser-compatibility-support-no { font-weight: bold; text-align: center; } .browser-compatibility-support-no { background-color: #ffbdbd; background-image: linear-gradient(to bottom right,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 1px,transparent 0,transparent 67px,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 73px,transparent 0,transparent 138px,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 144px,transparent 0),linear-gradient(to bottom left,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 1px,transparent 0,transparent 67px,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 73px,transparent 0,transparent 138px,rgba(94,3,6,.1) 0,rgba(94,3,6,.1) 144px,transparent 0); background-position: 50% 50%,50% 50%; background-repeat: no-repeat; background-size: 100px 100px,100px 100px; } .browser-compatibility-support-yes { background-color: #ebf8e1; } @media (prefers-color-scheme: dark) { .code-blue { color: #8484ff; } }