Template:Babel/style.css

.babel-box {
	float: left;
	border-style: solid;
	border-width: 1px;
	margin: 1px;
}
.babel-box table {
	border-spacing: 0; /* replacement for cellspacing="0" */
}
.babel-box .babel-content {
	width: 238px;
}
.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: #CCCC00; }
.babel-box.babel-0 .babel-content { background-color: #FFE0E8; }
.babel-box.babel-0 .babel-code { background-color: #FFB3B3; }
.babel-box.babel-1 { border-color: #C0C8FF; }
.babel-box.babel-1 .babel-content { background-color: #F0F8FF; }
.babel-box.babel-1 .babel-code { background-color: #C0C8FF; }
.babel-box.babel-2 { border-color: #77E0E8; }
.babel-box.babel-2 .babel-content { background-color: #D0F8FF; }
.babel-box.babel-2 .babel-code { background-color: #77E0E8; }
.babel-box.babel-3 { border-color: #99B3FF; }
.babel-box.babel-3 .babel-content { background-color: #E0E8FF; }
.babel-box.babel-3 .babel-code { background-color: #99B3FF; }
.babel-box.babel-4 { border-color: #CCCC00; }
.babel-box.babel-4 .babel-content { background-color: #FFFF99; }
.babel-box.babel-4 .babel-code { background-color: #FFFF00; }
.babel-box.babel-N { border-color: #6EF7A7; }
.babel-box.babel-N .babel-content { background-color: #C5FCDC; }
.babel-box.babel-N .babel-code { background-color: #6EF7A7; }

/* 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: #666600; }
    html.skin-theme-clientpref-night .babel-box.babel-0 .babel-content { background-color: #45212B; }
    html.skin-theme-clientpref-night .babel-box.babel-0 .babel-code { color: #000000; }
    html.skin-theme-clientpref-night .babel-box.babel-1 { border-color: #C0C8FF; }
    html.skin-theme-clientpref-night .babel-box.babel-1 .babel-content { background-color: #1F2C38; }
    html.skin-theme-clientpref-night .babel-box.babel-1 .babel-code { color: #000000; }
    html.skin-theme-clientpref-night .babel-box.babel-2 { border-color: #77E0E8; }
    html.skin-theme-clientpref-night .babel-box.babel-2 .babel-content { background-color: #193439; }
    html.skin-theme-clientpref-night .babel-box.babel-2 .babel-code { color: #000000; }
    html.skin-theme-clientpref-night .babel-box.babel-3 { border-color: #99B3FF; }
    html.skin-theme-clientpref-night .babel-box.babel-3 .babel-content { background-color: #131D3A; }
    html.skin-theme-clientpref-night .babel-box.babel-3 .babel-code { color: #000000; }
    html.skin-theme-clientpref-night .babel-box.babel-4 { border-color: #666600; }
    html.skin-theme-clientpref-night .babel-box.babel-4 .babel-content { background-color: #222200; }
    html.skin-theme-clientpref-night .babel-box.babel-4 .babel-code { color: #000000; }
    html.skin-theme-clientpref-night .babel-box.babel-N { border-color: #6EF7A7; }
    html.skin-theme-clientpref-night .babel-box.babel-N .babel-content { background-color: #153222; }
    html.skin-theme-clientpref-night .babel-box.babel-N .babel-code { color: #000000; }
}

@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: #666600; }
    html.skin-theme-clientpref-os    .babel-box.babel-0 .babel-content { background-color: #45212B; }
    html.skin-theme-clientpref-os    .babel-box.babel-0 .babel-code { color: #000000; }
    html.skin-theme-clientpref-os    .babel-box.babel-1 { border-color: #C0C8FF; }
    html.skin-theme-clientpref-os    .babel-box.babel-1 .babel-content { background-color: #1F2C38; }
    html.skin-theme-clientpref-os    .babel-box.babel-1 .babel-code { color: #000000; }
    html.skin-theme-clientpref-os    .babel-box.babel-2 { border-color: #77E0E8; }
    html.skin-theme-clientpref-os    .babel-box.babel-2 .babel-content { background-color: #193439; }
    html.skin-theme-clientpref-os    .babel-box.babel-2 .babel-code { color: #000000; }
    html.skin-theme-clientpref-os    .babel-box.babel-3 { border-color: #99B3FF; }
    html.skin-theme-clientpref-os    .babel-box.babel-3 .babel-content { background-color: #131D3A; }
    html.skin-theme-clientpref-os    .babel-box.babel-3 .babel-code { color: #000000; }
    html.skin-theme-clientpref-os    .babel-box.babel-4 { border-color: #666600; }
    html.skin-theme-clientpref-os    .babel-box.babel-4 .babel-content { background-color: #222200; }
    html.skin-theme-clientpref-os    .babel-box.babel-4 .babel-code { color: #000000; }
    html.skin-theme-clientpref-os    .babel-box.babel-N { border-color: #6EF7A7; }
    html.skin-theme-clientpref-os    .babel-box.babel-N .babel-content { background-color: #153222; }
    html.skin-theme-clientpref-os    .babel-box.babel-N .babel-code { color: #000000; }
}