MediaWiki:Gadget-serlo-design.css

/* == General == */
.serlo h1, .serlo h2 {
    font-family: sans-serif;
    font-weight: bold;
}

.serlo h1 {
    border-bottom: 0;
    margin-top: .7rem;
}

.serlo .mw-body-content {
    font-size: 1rem;
}

.serlo .mw-body-content p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* == Colors == */
.serlo a:not(.new),
.serlo .toctogglelabel,
.serlo .collapsible.selected .title .changecolor,
.serlo h1,
.serlo h2 {
    color: #007ec1;
}

/* == TOC == */

.serlo #toc {
	border: none;
	padding: 1.4rem;
}

/* == Boxes == */

/* CSS for Boxes */
.serlo-box {
	margin-left: 2.5rem;
	min-height: 3rem;
}

.serlo-box:before{
    content: " ";
    background-size: cover;
    width: 2.5rem;
    height: 2.5rem;
    display: block;
    position: absolute;
    margin-left: -3.65rem;
    margin-top: .3rem;
}

#mw-mf-viewport .serlo-box:before {
	right: 0;
	margin-top: -.3rem;
	margin-left: 0;
}

/* Icon for Boxes */
.serlo-box.serlo-definition:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.35 28.35"><defs><style>.cls-1{fill:%23037ec2}</style></defs><path class="cls-1" d="M13.26 13.26a.3.3 0 0 1-.31.3.29.29 0 0 1-.3-.3V9a.29.29 0 0 1 .3-.3.3.3 0 0 1 .31.3zm6.41 3.36c0-1.57-1.18-3.06-2.44-3.06V8.68a1.23 1.23 0 0 0 0-2.45h-6.11a1.23 1.23 0 0 0 0 2.45v4.88c-1.26 0-2.44 1.49-2.44 3.06a.61.61 0 0 0 .61.61h3.85l.73 4.63a.31.31 0 0 0 .3.26.31.31 0 0 0 .3-.28l.53-4.61h4.09a.61.61 0 0 0 .61-.61"/></svg>'); }
.serlo-box.serlo-example:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.35 28.35"><defs><style>.cls-1{fill:%23037ec2}</style></defs><path class="cls-1" d="M21.69 9.48a2.82 2.82 0 0 0-2.82-2.82H9.48a2.82 2.82 0 0 0-2.82 2.82v9.39a2.82 2.82 0 0 0 2.82 2.82h9.39a2.82 2.82 0 0 0 2.82-2.82zm-3.76 3.76l-2.82-2.82.9-.9a1 1 0 0 1 1.34 0L18.83 11a1 1 0 0 1 0 1.33zM12 19.18H9.17v-2.81L14.49 11l2.82 2.82zm2.68-6.75a.21.21 0 0 0-.29 0l-2.85 2.85c-.08.09-.1.23 0 .29a.21.21 0 0 0 .3 0l2.85-2.84a.22.22 0 0 0 0-.3"/></svg>'); }
.serlo-box.serlo-exercise:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.35 28.35"><defs><style>.cls-1{fill:%23037ec2}</style></defs><path class="cls-1" d="M15.59 11.55a.21.21 0 0 1-.07.16l-5.84 5.84a.23.23 0 0 1-.17.07c-.12 0-.39-.31-.39-.44a.23.23 0 0 1 .07-.18L15 11.18a.2.2 0 0 1 .16-.06.64.64 0 0 1 .41.39m-.72-2l-7.94 8v4h4l8-7.95zm6.53.92a1.27 1.27 0 0 0-.36-.87l-2.21-2.25a1.23 1.23 0 0 0-.87-.37 1.21 1.21 0 0 0-.86.37L15.5 8.88l4 4 1.58-1.58a1.24 1.24 0 0 0 .36-.86"/></svg>'); }
.serlo-box.serlo-hint:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.35 28.35"><defs><style>.cls-1{fill:%23037ec2}</style></defs><path class="cls-1" d="M7.57 17.82a.54.54 0 1 1-.57-.54.54.54 0 0 1 .54.54m1.25.85v-5.78c0-.23-.12-.29-.37-.29h-2c-.25 0-.45.06-.45.29v5.78c0 .23.2.28.45.28h2c.25 0 .37-.05.37-.28m15.57-6c0-.75-.84-1.15-1.64-1.15H16.6A28.44 28.44 0 0 0 17.22 8c0-1.15-.5-1.3-1.51-1.3-.33 0-1.15 2.26-1.28 2.51s-.29.49-.44.73a16.15 16.15 0 0 1-1.7 1.6 2.71 2.71 0 0 1-2.45 1.06h-.38V19h.38c2.09 0 4.22 1.52 6.53 1.52 1.34 0 2 .07 2-1.26a2.91 2.91 0 0 0-.15-.58 1.64 1.64 0 0 0 1-1.27 3 3 0 0 0-.22-1.14 1.61 1.61 0 0 0 .54-1.27 2 2 0 0 0-.54-1.13h3.72c.83 0 1.65-.43 1.65-1.23"/></svg>'); }
.serlo-box.serlo-proof:before, .serlo-box.serlo-alternativeproof:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.35 28.35"><defs><style>.cls-1{fill:%23037ec2}</style></defs><path class="cls-1" d="M22.58 12.12c0-.3-.32-.42-.57-.46l-5.07-.74-2.27-4.6a.62.62 0 0 0-.5-.41c-.23 0-.4.22-.49.41l-2.27 4.6-5.07.74c-.26 0-.57.16-.57.46a.8.8 0 0 0 .25.49l3.68 3.57-.87 5.05a1.36 1.36 0 0 0 0 .21c0 .26.13.5.43.5a.84.84 0 0 0 .4-.12l4.53-2.38 4.54 2.38a.81.81 0 0 0 .4.12c.3 0 .42-.24.42-.5a1.41 1.41 0 0 0 0-.21l-.87-5.05 3.67-3.57a.77.77 0 0 0 .26-.49"/></svg>'); }
.serlo-box.serlo-proofsummary:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.35 28.35"><defs><style>.cls-1{fill:%23037ec2}</style></defs><path class="cls-1" d="M21.57 16.07l-2-1.9 2-1.95a.7.7 0 0 0 .24-.44c0-.28-.3-.39-.52-.43l-2.8-.4.51-2.7a.66.66 0 0 0-.07-.5c-.16-.22-.46-.14-.66 0L15.86 9l-1.23-2.5c-.08-.17-.24-.38-.45-.38s-.37.21-.45.38l-1.27 2.57L10 7.79a.6.6 0 0 0-.59 0 .56.56 0 0 0-.13.57L9.71 11l-2.66.38c-.23 0-.51.15-.51.43a.73.73 0 0 0 .23.44l2 2-2 2c-.16.16-.32.42-.16.64a.69.69 0 0 0 .45.22l2.73.37-.45 2.63a1.23 1.23 0 0 0 0 .19c0 .24.12.46.39.46a.83.83 0 0 0 .37-.11l2.42-1.28 1.28 2.53.09.16a.41.41 0 0 0 .59.14.9.9 0 0 0 .23-.31l1.21-2.52 2.43 1.28a.8.8 0 0 0 .37.11c.26 0 .37-.22.37-.46a1.21 1.21 0 0 0 0-.19l-.46-2.71 2.72-.42a.66.66 0 0 0 .36-.13c.22-.15.17-.4 0-.59a.81.81 0 0 0-.14-.19z"/></svg>'); }
.serlo-box.serlo-solution:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.35 28.35"><defs><style>.cls-1{fill:%23037ec2}</style></defs><path class="cls-1" d="M21.23 14.18a7.06 7.06 0 1 0-7.06 7.05 7.06 7.06 0 0 0 7.06-7m-2.32-1.49a.57.57 0 0 1-.16.41l-5 5a.59.59 0 0 1-.42.17.58.58 0 0 1-.41-.17L9.6 14.76a.56.56 0 0 1-.16-.41.58.58 0 0 1 .16-.42l.84-.83a.58.58 0 0 1 .41-.17.57.57 0 0 1 .41.17l2.08 2.08 3.75-3.74a.56.56 0 0 1 .82 0l.84.82a.6.6 0 0 1 .16.43"/></svg>'); }
.serlo-box.serlo-solutionprocess:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.35 28.35"><defs><style>.cls-1{fill:%23037ec2}</style></defs><g path class="cls-1" d="M20.67 13.05H8.27a.89.89 0 0 0-.63.2l-1.3 1.28a.28.28 0 0 0 0 .41l1.3 1.26a.86.86 0 0 0 .63.22h12.4a.48.48 0 0 0 .51-.53v-2.36a.45.45 0 0 0-.51-.48z"/><path class="cls-1" d="M13 21.8a.64.64 0 0 0 .64.6h1.18c.32 0 .42-.28.42-.6v-4.63H13z"/><path class="cls-1" d="M12.95 11.18h2.24v1.67h-2.24z"/><path class="cls-1" d="M22 8.59l-1.3-1.28a.87.87 0 0 0-.63-.24h-4.88v-.63c0-.32-.1-.49-.42-.49h-1.18c-.33 0-.64.17-.64.49v.63H7.68c-.32 0-.72.23-.72.55V10c0 .32.4.44.72.44h12.4a.87.87 0 0 0 .63-.18L22 9a.26.26 0 0 0 0-.41z"/></g></svg>'); }
.serlo-box.serlo-theorem:before { margin-top: .1rem; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.35 28.35"><defs><style>.cls-1{fill:%23037ec2}</style></defs><g><path class="cls-1" d="M13.82 9.21c-2.55 0-5.16 1.78-5.16 4.52a3.9 3.9 0 0 0 1 2.7 5.63 5.63 0 0 1 1.7 2.92 1 1 0 0 0-.48.83.9.9 0 0 0 .26.64.94.94 0 0 0-.26.65 1 1 0 0 0 .46.82 1 1 0 0 0 1 1.44 1.63 1.63 0 0 0 3 0 1 1 0 0 0 1-1.44 1 1 0 0 0 .45-.82 1 1 0 0 0-.25-.65.93.93 0 0 0 .25-.64 1 1 0 0 0-.47-.83 5.61 5.61 0 0 1 1.69-2.92 3.91 3.91 0 0 0 1-2.7C19 11 16.37 9.21 13.82 9.21zm1.93 4.84a.33.33 0 0 1-.32-.32c0-.7-1.08-1-1.61-1a.32.32 0 1 1 0-.64c.93 0 2.25.49 2.25 1.61a.33.33 0 0 1-.32.35z"/><path class="cls-1" d="M9.49 9.47c.11 0 .17-.18.26-.27L9.62 9 7 6.4c-.16-.16-.29-.13-.44 0s-.13.28 0 .43l1.08 1.08c.5.5 1 1 1.51 1.48a.43.43 0 0 0 .34.08z"/><path class="cls-1" d="M21.77 6.41a.4.4 0 0 0-.38 0c-.89.86-1.76 1.73-2.63 2.6a.32.32 0 0 0-.08.27 1.66 1.66 0 0 0 .3.29l.2-.13c.88-.88 1.77-1.75 2.65-2.65a.4.4 0 0 0-.06-.38z"/><path class="cls-1" d="M7 13.44l-3.74-1c0 .07-.18.17-.18.28s.09.32.18.34c1.19.32 2.39.63 3.59.92a.3.3 0 0 0 .15-.54z"/><path class="cls-1" d="M25.24 12.7c0-.08-.2-.22-.28-.2-.38.07-.75.18-1.12.28-.83.21-1.65.42-2.47.65a.4.4 0 0 0-.2.32c0 .1.11.21.16.3h.12c1.22-.31 2.45-.62 3.66-.95.08-.05.15-.28.13-.4z"/><path class="cls-1" d="M14.2 7.91c.26 0 .3-.15.3-.36V4.08c0-.22 0-.43-.31-.42s-.3.19-.3.39v3.51c0 .23.11.35.31.35z"/></g></svg>'); }
.serlo-box.serlo-warning:before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.35 28.35"><defs><style>.cls-1{fill:%23037ec2}</style></defs><path class="cls-1" d="M15.25 18.74A.28.28 0 0 1 15 19h-1.63a.28.28 0 0 1-.27-.28v-1.6a.27.27 0 0 1 .27-.27H15a.27.27 0 0 1 .27.27zm0-3.14c0 .11-.13.19-.28.19h-1.58c-.16 0-.28-.08-.28-.19L13 11.75a.22.22 0 0 1 .09-.17.3.3 0 0 1 .2-.1h1.81a.3.3 0 0 1 .2.1.19.19 0 0 1 .09.16zm-.11-7.86a1.08 1.08 0 0 0-1.89 0L6.77 19.58a1.08 1.08 0 0 0 0 1.06 1.07 1.07 0 0 0 .92.53h12.95a1.07 1.07 0 0 0 .92-.53 1.08 1.08 0 0 0 0-1.06z"/></svg>'); }