|
|
| (10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 17: |
Zeile 17: |
| margin-top: 0px !important; | | margin-top: 0px !important; |
| margin-bottom: 0px !important; | | margin-bottom: 0px !important; |
| & .gallerytext {
| | } |
| | .gallerytext { |
| margin-top: 10px !important; | | margin-top: 10px !important; |
| margin-bottom: 10px !important; | | margin-bottom: 10px !important; |
| }
| |
| } | | } |
|
| |
|
| Zeile 91: |
Zeile 91: |
| .mw-quelle-vertikal { | | .mw-quelle-vertikal { |
| vertical-align: middle; | | vertical-align: middle; |
| writing-mode:tb-rl;
| | /* writing-mode:tb-rl; */ /* veraltetes (deprecated) MS CSS für vertikalen Textfluss */ |
| writing-mode:vertical-rl; | | writing-mode:vertical-rl; |
| font-size: xx-small; | | font-size: xx-small; |
| Zeile 118: |
Zeile 118: |
| border-radius: 15px; | | border-radius: 15px; |
| margin: 10px; | | margin: 10px; |
| /* background-color: lightblue; /* Optional: Hintergrundfarbe */ */ | | /* Optional: Hintergrundfarbe */ |
| | /* background-color: lightblue; */ |
| hyphens: auto; | | hyphens: auto; |
| text-align: justify; | | text-align: justify; |
| Zeile 211: |
Zeile 212: |
| display:grid; | | display:grid; |
| grid-template-columns: 200px 200px; | | grid-template-columns: 200px 200px; |
| grid-row: auto auto; | | grid-row: auto; |
| grid-column-gap: 20px; | | grid-column-gap: 20px; |
| grid-row-gap: 20px; | | grid-row-gap: 20px; |
| Zeile 222: |
Zeile 223: |
| } | | } |
|
| |
|
| /**** Testsektion ZD ****/ | | /*** Simple Tooltip ***/ |
| :root {
| | .tooltipster-default { |
| --bg: #f4f3ef;
| | color: #000000; |
| --surface: #ffffff;
| | background-color: #f8f9fa; |
| --border: #d8d5cc;
| | border-radius: 15px; |
| --text: #2a2825;
| | border-style: solid; |
| --muted: #888480;
| | border-color: #FEF247; |
| --hl-border: #e05a2b;
| | } |
| --hl-shadow: #e05a2b55;
| |
| --combo-active-bg: #e05a2b12;
| |
| --combo-active-border: #e05a2b;
| |
| }
| |
| | |
| * { box-sizing: border-box; margin: 0; padding: 0; }
| |
| | |
| body {
| |
| background: var(--bg);
| |
| color: var(--text);
| |
| font-family: 'Inter', sans-serif;
| |
| padding: 2.5rem 2rem;
| |
| max-width: 900px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| h1 {
| |
| font-size: 1.3rem;
| |
| font-weight: 600;
| |
| margin-bottom: 0.3rem;
| |
| letter-spacing: -0.02em;
| |
| }
| |
| .page-subtitle {
| |
| color: var(--muted); | |
| font-size: 0.82rem; | |
| margin-bottom: 2rem;
| |
| }
| |
| | |
| /* ─── Bild-Container mit Overlays ─── */
| |
| .figure-section {
| |
| margin-bottom: 3rem;
| |
| }
| |
| | |
| .figure-title {
| |
| font-size: 1rem;
| |
| font-weight: 600;
| |
| margin-bottom: 0.3rem;
| |
| }
| |
| .figure-desc {
| |
| font-size: 0.82rem;
| |
| color: var(--muted);
| |
| margin-bottom: 1rem;
| |
| }
| |
| | |
| .image-container {
| |
| position: relative;
| |
| display: inline-block;
| |
| max-width: 100%;
| |
| margin-bottom: 1.5rem;
| |
| border-radius: 6px; | |
| overflow: hidden;
| |
| box-shadow: 0 3px 16px rgba(0,0,0,0.12);
| |
| }
| |
| | |
| .image-container img {
| |
| display: block;
| |
| width: 100%;
| |
| height: auto;
| |
| }
| |
| | |
| /* ─── Overlay-Felder ─── */
| |
| .overlay {
| |
| position: absolute;
| |
| border: 3px solid transparent;
| |
| border-radius: 3px; | |
| pointer-events: none;
| |
| transition: border-color 0.15s, box-shadow 0.15s;
| |
| /* top/left/width/height werden per data-Attribut gesetzt */
| |
| }
| |
| | |
| .overlay.highlighted {
| |
| border-color: var(--hl-border);
| |
| box-shadow: inset 0 0 0 2px var(--hl-shadow), 0 0 0 2px var(--hl-shadow);
| |
| }
| |
| | |
| /* ─── Kombinationen ─── */
| |
| .combos-title {
| |
| font-size: 0.75rem;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.08em;
| |
| color: var(--muted);
| |
| margin-bottom: 0.6rem;
| |
| }
| |
| | |
| .combos {
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: 0.45rem;
| |
| max-width: 600px;
| |
| }
| |
| | |
| .combos > div {
| |
| background: var(--surface);
| |
| border: 1px solid var(--border);
| |
| border-radius: 6px;
| |
| padding: 0.55rem 0.9rem;
| |
| font-size: 0.87rem;
| |
| cursor: default;
| |
| transition: background 0.15s, border-color 0.15s;
| |
| line-height: 1.5; | |
| }
| |
| | |
| .combos > div:hover,
| |
| .combos > div.active {
| |
| background: var(--combo-active-bg);
| |
| border-color: var(--combo-active-border);
| |
| }
| |
| | |
| .combo-label {
| |
| font-family: 'JetBrains Mono', monospace;
| |
| font-size: 0.74rem;
| |
| color: var(--hl-border);
| |
| font-weight: 600;
| |
| margin-right: 0.55rem;
| |
| }
| |
| | |
| .legend {
| |
| margin-top: 2rem;
| |
| font-size: 0.78rem;
| |
| color: var(--muted);
| |
| border-top: 1px solid var(--border);
| |
| padding-top: 1rem;
| |
| max-width: 600px;
| |
| }
| |
| .legend code {
| |
| font-family: 'JetBrains Mono', monospace;
| |
| background: #e8e5de;
| |
| padding: 0.1em 0.4em;
| |
| border-radius: 3px;
| |
| color: var(--text);
| |
| }
| |
