MediaWiki:Common.css: Unterschied zwischen den Versionen
Aus Altes Köln
Simon (Diskussion | Beiträge) (Unteren Rand von historischer Namensliste entfernt) |
Simon (Diskussion | Beiträge) |
||
(14 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 48: | Zeile 48: | ||
/* flex-grow: 1;*/ | /* flex-grow: 1;*/ | ||
margin-left: 50px; | margin-left: 50px; | ||
+ | } | ||
+ | |||
+ | /* Links in der Hauptnavigation oben sollten nicht umbrechen. */ | ||
+ | #mw-navigation .nav-link { | ||
+ | white-space: nowrap; | ||
} | } | ||
Zeile 68: | Zeile 73: | ||
} | } | ||
− | /* Links im Fließtext unterstreichen */ | + | /* Links im Fließtext und in Tooltips unterstreichen */ |
.content a, | .content a, | ||
.content a[href].new, | .content a[href].new, | ||
− | .content a[href].external { | + | .content a[href].external, |
+ | .ak-tooltip a, | ||
+ | .ak-tooltip a[href].new, | ||
+ | .ak-tooltip a[href].external { | ||
text-decoration-color: lightgray; | text-decoration-color: lightgray; | ||
text-decoration-line: underline; | text-decoration-line: underline; | ||
Zeile 77: | Zeile 85: | ||
/* Externe Links mit Icon markieren */ | /* Externe Links mit Icon markieren */ | ||
− | .mw-parser-output .external { | + | .mw-parser-output .external, |
+ | .ak-tooltip .external { | ||
background-position: center right; | background-position: center right; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
Zeile 97: | Zeile 106: | ||
body.page-Hauptseite .contentHeader { | body.page-Hauptseite .contentHeader { | ||
margin-top: 2.5em; | margin-top: 2.5em; | ||
+ | } | ||
+ | |||
+ | /* Bild auf Startseite auf Seitenbreite beschränken, aber Seitenverhältnis erhalten. */ | ||
+ | .ak-max-width { | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
} | } | ||
Zeile 145: | Zeile 160: | ||
.page-Kartensammlung .ak-map-sidebar { | .page-Kartensammlung .ak-map-sidebar { | ||
height: auto; | height: auto; | ||
+ | } | ||
+ | |||
+ | /* Kartensammlung kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */ | ||
+ | |||
+ | .page-Kartensammlung .ak-page-header { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .page-Kartensammlung .contentHeader { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .page-Kartensammlung div.mb-2 { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .page-Kartensammlung .ak-main-grid.container > .row:nth-child(2) > .col { | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .page-Kartensammlung #content { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .page-Kartensammlung .mw-parser-output > p { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*--- Stadtmodellseite ---*/ | ||
+ | |||
+ | /* Seite bekommt volle Breite */ | ||
+ | .page-Stadtmodell .ak-main-grid.container { | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | |||
+ | /* Flexbox den ganzen Weg runter bis zum Stadtmodell anwenden, damit das Stadtmodell die volle Seitenhöhe ausfüllen kann. */ | ||
+ | |||
+ | .page-Stadtmodell .ak-main-grid.container { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | |||
+ | .page-Stadtmodell .ak-main-grid.container > .row:nth-child(2) { | ||
+ | flex-grow: 1; | ||
+ | } | ||
+ | |||
+ | .page-Stadtmodell .ak-main-grid.container > .row:nth-child(2) > .col { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | |||
+ | .page-Stadtmodell #content, | ||
+ | .page-Stadtmodell #bodyContent, | ||
+ | .page-Stadtmodell #mw-content-text, | ||
+ | .page-Stadtmodell #mw-content-text .mw-parser-output { | ||
+ | flex-grow: 1; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | .page-Stadtmodell .ak-map-container { | ||
+ | flex-grow: 1; | ||
+ | align-items: stretch; | ||
+ | } | ||
+ | |||
+ | .page-Stadtmodell .ak-map-container { | ||
+ | flex-grow: 1; | ||
+ | align-items: stretch; | ||
+ | } | ||
+ | |||
+ | .page-Stadtmodell .ak-map, | ||
+ | .page-Stadtmodell .ak-map-sidebar { | ||
+ | height: auto; | ||
+ | } | ||
+ | */ | ||
+ | |||
+ | /* Stadtmodell kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */ | ||
+ | |||
+ | .page-Stadtmodell .ak-page-header { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .page-Stadtmodell .contentHeader { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .page-Stadtmodell div.mb-2 { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .page-Stadtmodell .ak-main-grid.container > .row:nth-child(2) > .col { | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .page-Stadtmodell #content { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .page-Stadtmodell .mw-parser-output > p { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | /* Navigation liegt über verschwommenem Hintergrundbild. */ | ||
+ | .page-Stadtmodell #mw-navigation { | ||
+ | z-index: 20; | ||
} | } | ||
Zeile 279: | Zeile 404: | ||
} | } | ||
− | + | .ak-source-date { | |
font-size: 0.8em; | font-size: 0.8em; | ||
color: #868e96; | color: #868e96; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Adressenliste */ | ||
+ | |||
+ | .ak-address-list dl { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .ak-address-list dt, | ||
+ | .ak-address-list dd { | ||
+ | display: inline-block; | ||
+ | margin: 0; | ||
} | } | ||
/* Tooltips */ | /* Tooltips */ | ||
+ | |||
+ | .ak-text-with-tooltip::after { | ||
+ | content: ''; | ||
+ | display: inline-block; | ||
+ | width: 16px; | ||
+ | height: 16px; | ||
+ | margin-left: 0.5em; | ||
+ | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374c0fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); | ||
+ | vertical-align: middle; | ||
+ | } | ||
.ak-tooltip-text { | .ak-tooltip-text { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .ak-tooltip { | ||
+ | min-width: 100px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Zeitleisten */ | ||
+ | |||
+ | /* Datentabelle verstecken */ | ||
+ | .ak-timeline-datatable { | ||
display: none; | display: none; | ||
} | } |
Aktuelle Version vom 9. Januar 2021, 17:54 Uhr
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ /* Seitenkopf */ .ak-page-header { background-image: url(/images/b/b0/Colonia.png); background-repeat: no-repeat; background-size: cover; background-position-y: 33%; } .ak-page-header__content { /*background-image: linear-gradient(to right, rgba(255,255,255,0.65) 0%,rgba(0,0,0,0) 100%);*/ /*margin-left: 0;*/ background-color: rgba(255,255,255,0.65); min-height: 135px; /*margin-right: 0;*/ display: flex; align-items: center; justify-content: center; } .ak-page-header__logo-col { padding-left: 0; } #p-logo img { height: 100px; } .ak-page-header__headline-col { display: flex; align-items: center; } .ak-page-header__headline { margin: 0; border: none; padding: 0; font-family: 'UnifrakturMaguntia', cursive; font-size: 5rem; line-height: 1; /*line-height: 135px;*/ padding-top: 10px; /* margin-bottom: -10px;*/ /*text-align: center;*/ color: #5e2028; /* flex-grow: 1;*/ margin-left: 50px; } /* Links in der Hauptnavigation oben sollten nicht umbrechen. */ #mw-navigation .nav-link { white-space: nowrap; } /* Padding von Seiteninhalt entfernen, es bekommt schon von Bootstrap Padding. So können wir es mit anderen Bootstrap-Containern alignen. */ .mw-body { padding: 0; } /* Powered By Logos verstecken */ #footer-poweredbyico { display: none; } /* Sicherstellen, dass die Visual Editor Toolbar nicht unter dem fixen Seitenheader hängt */ .ve-init-mw-desktopArticleTarget-toolbar-open > .oo-ui-toolbar-bar { margin-top: 56px; } /* Links im Fließtext und in Tooltips unterstreichen */ .content a, .content a[href].new, .content a[href].external, .ak-tooltip a, .ak-tooltip a[href].new, .ak-tooltip a[href].external { text-decoration-color: lightgray; text-decoration-line: underline; } /* Externe Links mit Icon markieren */ .mw-parser-output .external, .ak-tooltip .external { background-position: center right; background-repeat: no-repeat; background-size: 12px; background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%231a76c7' d='M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z'%3E%3C/path%3E%3C/svg%3E"); padding-right: 15px; } /*--- Hauptseite ---*/ /* Überschrift auf Hauptseite verstecken */ body.page-Hauptseite.action-view h1.firstHeading, body.page-Hauptseite.action-submit h1.firstHeading { display: none; } body.page-Hauptseite .contentHeader { margin-top: 2.5em; } /* Bild auf Startseite auf Seitenbreite beschränken, aber Seitenverhältnis erhalten. */ .ak-max-width { max-width: 100%; height: auto; } /*--- Kartensammlungsseite ---*/ /* Seite bekommt volle Breite */ .page-Kartensammlung .ak-main-grid.container { max-width: 100%; } /* Flexbox den ganzen Weg runter bis zur Karte anwenden, damit die Karte die volle Seitenhöhe ausfüllen kann. */ .page-Kartensammlung .ak-main-grid.container { display: flex; flex-direction: column; } .page-Kartensammlung .ak-main-grid.container > .row:nth-child(2) { flex-grow: 1; } .page-Kartensammlung .ak-main-grid.container > .row:nth-child(2) > .col { display: flex; flex-direction: column; } .page-Kartensammlung #content, .page-Kartensammlung #bodyContent, .page-Kartensammlung #mw-content-text, .page-Kartensammlung #mw-content-text .mw-parser-output { flex-grow: 1; display: flex; flex-direction: column; } .page-Kartensammlung .ak-map-container { flex-grow: 1; align-items: stretch; } .page-Kartensammlung .ak-map-container { flex-grow: 1; align-items: stretch; } .page-Kartensammlung .ak-map, .page-Kartensammlung .ak-map-sidebar { height: auto; } /* Kartensammlung kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */ .page-Kartensammlung .ak-page-header { display: none; } .page-Kartensammlung .contentHeader { display: none; } .page-Kartensammlung div.mb-2 { display: none; } .page-Kartensammlung .ak-main-grid.container > .row:nth-child(2) > .col { padding: 0; } .page-Kartensammlung #content { margin: 0; } .page-Kartensammlung .mw-parser-output > p { margin: 0; } /*--- Stadtmodellseite ---*/ /* Seite bekommt volle Breite */ .page-Stadtmodell .ak-main-grid.container { max-width: 100%; } /* Flexbox den ganzen Weg runter bis zum Stadtmodell anwenden, damit das Stadtmodell die volle Seitenhöhe ausfüllen kann. */ .page-Stadtmodell .ak-main-grid.container { display: flex; flex-direction: column; } .page-Stadtmodell .ak-main-grid.container > .row:nth-child(2) { flex-grow: 1; } .page-Stadtmodell .ak-main-grid.container > .row:nth-child(2) > .col { display: flex; flex-direction: column; } .page-Stadtmodell #content, .page-Stadtmodell #bodyContent, .page-Stadtmodell #mw-content-text, .page-Stadtmodell #mw-content-text .mw-parser-output { flex-grow: 1; display: flex; flex-direction: column; } /* .page-Stadtmodell .ak-map-container { flex-grow: 1; align-items: stretch; } .page-Stadtmodell .ak-map-container { flex-grow: 1; align-items: stretch; } .page-Stadtmodell .ak-map, .page-Stadtmodell .ak-map-sidebar { height: auto; } */ /* Stadtmodell kriegt fast vollen Platz der Seite: Andere Elemente ausblenden, Abstände nullen. */ .page-Stadtmodell .ak-page-header { display: none; } .page-Stadtmodell .contentHeader { display: none; } .page-Stadtmodell div.mb-2 { display: none; } .page-Stadtmodell .ak-main-grid.container > .row:nth-child(2) > .col { padding: 0; } .page-Stadtmodell #content { margin: 0; } .page-Stadtmodell .mw-parser-output > p { margin: 0; } /* Navigation liegt über verschwommenem Hintergrundbild. */ .page-Stadtmodell #mw-navigation { z-index: 20; } /* Design- und Layout-Elemente */ .ak-layout { display: flex; } .ak-layout > * { flex-grow: 1; } .ak-box { /*outline: 5px solid darkgray;*/ margin-top: 1rem; margin-bottom: 2rem; /*border: 5px solid white; background: gray;*/ /*border: 1px solid #ced4da;*/ border-radius: 4px; box-shadow: 0px 3px 12px rgba(0,0,0,0.1); padding: 1rem; } .ak-layout > .ak-box + .ak-box { margin-left: 2rem; } .ak-layout + .ak-box { margin-top: 0; } .ak-box h2 { margin: 0 0 1rem 0; padding: 0; text-align: center; font-size: 1.5rem; } .ak-link-list ul { list-style: none; display: flex; justify-content: center; margin: 0 0 1rem 0; padding: 0; font-weight: bold; } .ak-link-list li + li { margin-left: 0.5rem; } .ak-link-list li + li::before { content: "\0000B7"; margin-right: 0.5rem; } /* Aufklappbare Boxen, adaptiert von https://alligator.io/css/collapsible/ */ .ak-collapsible-wrap { margin-bottom: 1.2rem 0; } .ak-collapsible-wrap input.ak-toggle[type='checkbox'] { display: none; } .ak-collapsible-wrap .ak-lbl-toggle { display: block; font-size: 1.5rem; cursor: pointer; transition: all 0.25s ease-out; } .ak-collapsible-wrap .ak-lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; } .ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle::before { transform: rotate(90deg) translateX(-3px); } .ak-collapsible-wrap .ak-collapsible-content { height: 0; overflow: hidden; background-color: #f8f9fa; } .ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle + .ak-collapsible-content { height: auto; } .ak-collapsible-wrap .ak-collapsible-content .ak-collapsible-content-inner { padding: .5rem 1rem; } /* Infoboxen */ .ak-infobox { float:right; margin-left: 2em; } .ak-infobox-street { max-width: 400px; } .ak-infobox-street ul.smw-format.ul-format { list-style: none; padding: 0; margin: 0; } .ak-infobox-street ul.smw-format.ul-format li { margin: 0; } .ak-infobox-street ul.smw-format.ul-format li + li { margin-top: 0.5em; } .ak-source-date { font-size: 0.8em; color: #868e96; } /* Adressenliste */ .ak-address-list dl { margin: 0; } .ak-address-list dt, .ak-address-list dd { display: inline-block; margin: 0; } /* Tooltips */ .ak-text-with-tooltip::after { content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 0.5em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374c0fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); vertical-align: middle; } .ak-tooltip-text { display: none; } .ak-tooltip { min-width: 100px; } /* Zeitleisten */ /* Datentabelle verstecken */ .ak-timeline-datatable { display: none; }