Dennis Eisold
4d08c3db55
Adds a button to the existing top-right button group on chapter and section pages that hides everything outside of the breadcrumb, the heading, the rendered questions and the link to the next section or chapter at the end of the page. The state is persisted via localStorage so it survives navigation. On pages without questions a small notice is shown instead. Replaces the previously published userscript by integrating the same behaviour directly into the site.
489 lines
10 KiB
CSS
489 lines
10 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 {
|
|
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 .margin 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 */
|
|
#quiz-mode-toggle {
|
|
cursor: pointer;
|
|
}
|
|
#quiz-mode-toggle.active {
|
|
background: #0a7a2a;
|
|
border-color: #0a7a2a;
|
|
color: #fff;
|
|
}
|
|
#quiz-mode-toggle.active svg {
|
|
fill: #fff;
|
|
}
|
|
|
|
#quiz-mode-notice {
|
|
position: fixed;
|
|
top: 12px;
|
|
right: 12px;
|
|
z-index: 99999;
|
|
max-width: 260px;
|
|
padding: 8px 12px;
|
|
font: 500 13px/1.35 system-ui, -apple-system, sans-serif;
|
|
color: #333;
|
|
background: #fff3cd;
|
|
border: 1px solid #ffe69c;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
body.quiz-mode-active.quiz-has-questions .course > * {
|
|
display: none !important;
|
|
}
|
|
body.quiz-mode-active.quiz-has-questions .course > .course-toolbar,
|
|
body.quiz-mode-active.quiz-has-questions .course > h1,
|
|
body.quiz-mode-active.quiz-has-questions .course > nav,
|
|
body.quiz-mode-active.quiz-has-questions .course > .question,
|
|
body.quiz-mode-active.quiz-has-questions .course > [data-quiz-tail],
|
|
body.quiz-mode-active.quiz-has-questions .course > [data-quiz-tail] ~ * {
|
|
display: revert !important;
|
|
}
|