MediaWiki:Common.css: Unterschied zwischen den Versionen
Aus Altes Köln
Simon (Diskussion | Beiträge) K |
Simon (Diskussion | Beiträge) (CSS für aufklappbare Boxen (erster Stand zum Rumspielen)) |
||
Zeile 86: | Zeile 86: | ||
− | /*--- | + | /*--- Hauptseite ---*/ |
/* Überschrift auf Hauptseite verstecken */ | /* Überschrift auf Hauptseite verstecken */ | ||
Zeile 201: | Zeile 201: | ||
content: "\0000B7"; | content: "\0000B7"; | ||
margin-right: 0.5rem; | 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-weight: bold; | ||
+ | font-family: monospace; | ||
+ | font-size: 1.2rem; | ||
+ | text-transform: uppercase; | ||
+ | text-align: center; | ||
+ | |||
+ | padding: 1rem; | ||
+ | |||
+ | color: #A77B0E; | ||
+ | background: #FAE042; | ||
+ | |||
+ | cursor: pointer; | ||
+ | |||
+ | border-radius: 7px; | ||
+ | transition: all 0.25s ease-out; | ||
+ | } | ||
+ | |||
+ | .ak-collapsible-wrap .ak-lbl-toggle:hover { | ||
+ | color: #7C5A0B; | ||
+ | } | ||
+ | |||
+ | .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 { | ||
+ | max-height: 0px; | ||
+ | overflow: hidden; | ||
+ | transition: max-height .25s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle + .ak-collapsible-content { | ||
+ | max-height: 350px; | ||
+ | } | ||
+ | |||
+ | .ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle { | ||
+ | border-bottom-right-radius: 0; | ||
+ | border-bottom-left-radius: 0; | ||
+ | } | ||
+ | |||
+ | .ak-collapsible-wrap .ak-collapsible-content .ak-collapsible-content-inner { | ||
+ | background: rgba(250, 224, 66, .2); | ||
+ | border-bottom: 1px solid rgba(250, 224, 66, .45); | ||
+ | border-bottom-left-radius: 7px; | ||
+ | border-bottom-right-radius: 7px; | ||
+ | padding: .5rem 1rem; | ||
} | } |
Version vom 4. August 2019, 23:17 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; } /* 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 unterstreichen */ .content a, .content a[href].new, .content a[href].external { text-decoration-color: lightgray; text-decoration-line: underline; } /* Externe Links mit Icon markieren */ .mw-parser-output .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; } /*--- 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; } /* 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-weight: bold; font-family: monospace; font-size: 1.2rem; text-transform: uppercase; text-align: center; padding: 1rem; color: #A77B0E; background: #FAE042; cursor: pointer; border-radius: 7px; transition: all 0.25s ease-out; } .ak-collapsible-wrap .ak-lbl-toggle:hover { color: #7C5A0B; } .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 { max-height: 0px; overflow: hidden; transition: max-height .25s ease-in-out; } .ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle + .ak-collapsible-content { max-height: 350px; } .ak-collapsible-wrap .ak-toggle:checked + .ak-lbl-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .ak-collapsible-wrap .ak-collapsible-content .ak-collapsible-content-inner { background: rgba(250, 224, 66, .2); border-bottom: 1px solid rgba(250, 224, 66, .45); border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; padding: .5rem 1rem; }