458 lines
9.3 KiB
CSS
458 lines
9.3 KiB
CSS
.table {
|
|
margin-bottom: 2ex;
|
|
}
|
|
|
|
.table tr {
|
|
border-bottom: 1px solid #aaa;
|
|
}
|
|
|
|
.table td {
|
|
padding-right: 10px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.table td:last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.table_label {
|
|
font-style: italic;
|
|
}
|
|
|
|
.question:not(.for-solution) {
|
|
padding: 1ex;
|
|
background: #ddd;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
position: relative;
|
|
}
|
|
.question p {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
}
|
|
.question .question-text {
|
|
font-weight: 600;
|
|
margin: 1ex 1em 1.5ex 1em;
|
|
}
|
|
|
|
.solution {
|
|
margin-top: -1.5em;
|
|
margin-bottom: 1em;
|
|
text-align: end;
|
|
}
|
|
|
|
.solution .solution-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
display: block;
|
|
margin-right: 0.35em;
|
|
}
|
|
|
|
.question .question-picture {
|
|
max-width: 100%;
|
|
margin-bottom: 1em;
|
|
}
|
|
.question .question-picture img {
|
|
max-width: 100%;
|
|
}
|
|
.question .answers {
|
|
margin-top: 1ex;
|
|
display: grid;
|
|
grid-template-columns: repeat(1, 100%);
|
|
grid-gap: 1ex;
|
|
align-items: start;
|
|
}
|
|
|
|
.question.layout-not-found {
|
|
background: #f88;
|
|
}
|
|
.question.layout-not-found .question-text {
|
|
margin-bottom: 1ex;
|
|
}
|
|
.question.layout-not-found .answers {
|
|
display: none;
|
|
}
|
|
|
|
.question.layout-2 .answers,
|
|
.question.layout-6 .answers,
|
|
.question.layout-8 .answers {
|
|
grid-template-columns: repeat(2, calc(50% - 1ex / 2));
|
|
}
|
|
|
|
.question .answers button {
|
|
background: #fff;
|
|
border: 0;
|
|
cursor: pointer;
|
|
padding: 1ex 1em;
|
|
font-size: 100%;
|
|
text-align: left;
|
|
position: relative;
|
|
line-height: 133%;
|
|
font-family: Roboto, sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
.question .answers button:focus {
|
|
outline: 0;
|
|
}
|
|
.question .answers img {
|
|
max-width: 100%;
|
|
}
|
|
.question .answers button .result {
|
|
display: none;
|
|
}
|
|
.question .answers button.correct {
|
|
background: #3bb583;
|
|
}
|
|
.question .answers button.wrong {
|
|
background: #fe756c;
|
|
}
|
|
|
|
.question .answers button.correct .result,
|
|
.question .answers button.wrong .result {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: block;
|
|
}
|
|
|
|
figure {
|
|
margin-bottom: 6ex;
|
|
}
|
|
|
|
figure img {
|
|
min-width: min(59.3%, 800px);
|
|
max-width: min(59.3%, 800px);
|
|
max-height: 50vh;
|
|
object-fit: contain;
|
|
}
|
|
|
|
figcaption {
|
|
font-style: italic;
|
|
margin-bottom: 6ex;
|
|
}
|
|
|
|
.qso_own,
|
|
.qso_other {
|
|
background: #ddd;
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 80%;
|
|
padding: 1ex;
|
|
margin-bottom: 1ex;
|
|
}
|
|
|
|
.qso_own {
|
|
margin-left: 40px;
|
|
}
|
|
|
|
.qso_other {
|
|
margin-left: calc(40px + 10%);
|
|
}
|
|
|
|
.qso_own:after {
|
|
content: " ";
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
left: -20px;
|
|
right: auto;
|
|
top: 0px;
|
|
bottom: auto;
|
|
border: 22px solid;
|
|
border-color: #ddd transparent transparent transparent;
|
|
}
|
|
|
|
.qso_other:after {
|
|
content: " ";
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
left: auto;
|
|
right: -20px;
|
|
top: 0px;
|
|
bottom: auto;
|
|
border: 20px solid;
|
|
border-color: #ddd transparent transparent transparent;
|
|
}
|
|
|
|
p,
|
|
li,
|
|
tr,
|
|
td {
|
|
hyphens: auto;
|
|
-webkit-hyphens: auto;
|
|
text-align: justify;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: square;
|
|
}
|
|
|
|
ul li::marker {
|
|
color: #2aa6da;
|
|
}
|
|
|
|
ol li {
|
|
margin-bottom: 1ex;
|
|
}
|
|
|
|
a {
|
|
color: #2aa6da;
|
|
}
|
|
|
|
a:hover {
|
|
color: #2aa6da;
|
|
}
|
|
|
|
footer {
|
|
clear: right;
|
|
}
|
|
|
|
span.morse {
|
|
font-size: 33%;
|
|
position: relative;
|
|
bottom: 1.7ex;
|
|
}
|
|
|
|
span.morse_char {
|
|
padding-right: 3ex;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
span.morse_char:last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
span.morse_symbol {
|
|
padding-right: 1.6ex;
|
|
letter-spacing: -0.05ex;
|
|
}
|
|
|
|
span.morse_char:last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
span.formula {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.info_alpha {
|
|
margin-bottom: 2ex;
|
|
padding: 2ex;
|
|
background: #ff756d;
|
|
color: #fff;
|
|
}
|
|
|
|
.info_beta {
|
|
margin-bottom: 2ex;
|
|
padding: 2ex;
|
|
background: #b8eaff;
|
|
}
|
|
|
|
.info_beta a {
|
|
color: #22f;
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.course p,
|
|
.course ul,
|
|
.course ol,
|
|
.course .question,
|
|
.course .solution,
|
|
.course .table,
|
|
.course .katex-display {
|
|
width: 59.3%;
|
|
}
|
|
|
|
.course .margin {
|
|
clear: right;
|
|
float: right;
|
|
margin-left: 5%;
|
|
width: 35.7%;
|
|
margin-bottom: 4ex;
|
|
}
|
|
|
|
.course .margin .table,
|
|
.course .margin .katex-display {
|
|
width: 100%;
|
|
}
|
|
|
|
.course .margin p,
|
|
.course .margin ul,
|
|
.course .margin ol {
|
|
width: auto;
|
|
}
|
|
|
|
.margin .photo,
|
|
.margin .picture {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.margin .photo img,
|
|
.margin .picture img {
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
max-height: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.course .margin {
|
|
margin-top: 4ex;
|
|
margin-bottom: 4ex;
|
|
}
|
|
|
|
figure img {
|
|
min-width: min(100%, 800px);
|
|
max-width: min(100%, 800px);
|
|
max-height: 50vh;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.course em {
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
color: #2aa6da;
|
|
}
|
|
|
|
.course .margin.tip:before,
|
|
.course .margin.unit:before,
|
|
.course .margin.indepth:before,
|
|
.course .margin.attention:before,
|
|
.course .margin.danger:before {
|
|
background-position: left bottom;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
display: block;
|
|
padding: 0.4ex 0 0.4ex 4ex;
|
|
line-height: 133%;
|
|
margin-bottom: 0.5ex;
|
|
}
|
|
|
|
.course .margin.tip,
|
|
.course .margin.unit,
|
|
.course .margin.indepth,
|
|
.course .margin.attention,
|
|
.course .margin.danger {
|
|
border-left: 5px solid #bbb;
|
|
padding-left: 0.5em;
|
|
}
|
|
|
|
.course .margin.tip {
|
|
border-left-color: #2aa6da;
|
|
}
|
|
|
|
.course .margin.tip:before {
|
|
content: "Tipp";
|
|
background-color: #b8eaff;
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');
|
|
}
|
|
|
|
.course .margin.unit {
|
|
border-left-color: #40c08c;
|
|
}
|
|
|
|
.course .margin.unit:before {
|
|
content: "Neue Einheit";
|
|
background-color: #b5e8d3;
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M208-120q-37 0-62.5-25.5T120-208v-548q0-29 27-40.5t47 8.5l90 90-54 54 28 28 54-54 104 104-54 54 28 28 54-54 104 104-54 54 28 28 54-54 104 104-54 54 28 28 54-54 80 80q20 20 8.5 47T756-120H208Zm32-120h332L240-572v332Z"/></svg>');
|
|
}
|
|
|
|
.course .margin.indepth:before {
|
|
content: "Vertiefung";
|
|
background-color: #ddd;
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-26 0-47-12.5T400-126q-33 0-56.5-23.5T320-206v-142q-59-39-94.5-103T190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 77-35.5 140T640-348v142q0 33-23.5 56.5T560-126q-12 21-33 33.5T480-80Zm-80-126h160v-36H400v36Zm0-76h160v-38H400v38Zm-8-118h58v-108l-88-88 42-42 76 76 76-76 42 42-88 88v108h58q54-26 88-76.5T690-590q0-88-61-149t-149-61q-88 0-149 61t-61 149q0 63 34 113.5t88 76.5Zm88-162Zm0-38Z"/></svg>');
|
|
}
|
|
|
|
.course .margin.attention {
|
|
border-left-color: #ffb300;
|
|
}
|
|
|
|
.course .margin.attention:before {
|
|
content: "Achtung";
|
|
background-color: #ffe5a9;
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');
|
|
}
|
|
|
|
.course .margin.danger {
|
|
border-left-color: #ff756d;
|
|
}
|
|
|
|
.course .margin.danger:before {
|
|
content: "Gefahr";
|
|
background-color: #ffcfcc;
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>');
|
|
}
|
|
|
|
.course-toc,
|
|
.chapter-toc {
|
|
width: 600px;
|
|
max-width: calc(100vw - 20px);
|
|
}
|
|
|
|
.course-toc .btn-label,
|
|
.chapter-toc .btn-label {
|
|
position: relative;
|
|
left: -12px;
|
|
width: 4em;
|
|
display: inline-block;
|
|
padding: 6px 12px;
|
|
background: #00adef;
|
|
color: #fff;
|
|
border-radius: 3px 0 0 3px;
|
|
text-align: right;
|
|
}
|
|
|
|
.course-toc .btn-labeled,
|
|
.chapter-toc .btn-labeled {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.answers button:before {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.answers button:nth-child(1):before {
|
|
content: "A:";
|
|
}
|
|
|
|
.answers button:nth-child(2):before {
|
|
content: "B:";
|
|
}
|
|
|
|
.answers button:nth-child(3):before {
|
|
content: "C:";
|
|
}
|
|
|
|
.answers button:nth-child(4):before {
|
|
content: "D:";
|
|
}
|
|
|
|
/* Enable Line Breaks in Equations ... */
|
|
.course .katex-display > .katex {
|
|
white-space: normal;
|
|
}
|
|
|
|
/* Add space between broken lines: */
|
|
.course .katex-display .base {
|
|
margin: 0.5em 0em;
|
|
}
|
|
|
|
/* Compensate by reducing space around display math */
|
|
.course .katex-display {
|
|
margin: 1em 0em;
|
|
}
|
|
|
|
/* Quiz-Modus */
|
|
body[data-quiz-mode][data-quiz-has-questions] .course > * {
|
|
display: none !important;
|
|
}
|
|
body[data-quiz-mode][data-quiz-has-questions] .course > [data-quiz-shown] {
|
|
display: revert !important;
|
|
}
|