Die Darstellung von Codeboxen in Beiträgen der Woltlab Suite 3 ist optisch nicht so wirklich gelungen, daher habe ich eine Modifikation auf CSS-Basis erstellt.
Füge folgenden Codeblock der CSS-Definition des jeweiligen Stils hinzu:
Code
/* ================================================================ Code Box Modification by Gino Zantarelli */
.codeBox {
box-shadow: none;
border-radius: 0px;
padding: 0px;
}
.codeBox > .toggleButton {
border-top: 10px solid $wcfContentBackground;
box-shadow: 0 1px 0px 0px $wcfContentText inset;
padding-bottom: 0px;
font-size: 10px;
font-style: normal;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
}
.codeBox.collapsed > .toggleButton {
border-top: 10px solid $wcfContentBackground;
box-shadow: 0 1px 0px 0px $wcfContentText inset;
padding-bottom: 0px;
font-size: 10px;
font-style: normal;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
}
.codeBox > div {
background-color: rgba(0, 0, 0, .03);
color: $wcfContentText;
padding: 14px;
border: none;
}
.codeBox > div > ol::before {
border-right: 1px solid $wcfContentText;
opacity: .4;
}Das sind die optischen Unterschiede der Codeboxen...
Vorher:
Nachher: