|
|
| (20 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| /* Gestaltung der Phoenix-Wiki-Portale */ | | /* Die Phoenix-spezifischen Anpassungen (.phoenix-hero, Portal-Kacheln, Religions-Karten, Länderkarten-Marker, Infoboxen, mobiles Burger-Menü, Chip-Navigation, TOC-Tiefe, Chip-Design für Benutzer-/Aktionsmenü usw.) wurden in den PhoenixSkin-Fork übernommen (resources/phoenix-custom.less) und hier entfernt, da PhoenixSkin seit 2026-09-08 der Standard-Skin des Wikis ist. */ |
| .phoenix-hero { | |
| padding: 2.2rem;
| |
| margin: 0 0 1.5rem;
| |
| color: #f8f0dc;
| |
| background: linear-gradient(135deg, #182433, #394b58);
| |
| border: 1px solid #9b8356;
| |
| border-radius: 4px;
| |
| }
| |
| .phoenix-kicker {
| |
| color: #d2bb83;
| |
| font-size: .85rem;
| |
| letter-spacing: .16em;
| |
| }
| |
| .phoenix-title {
| |
| margin: .25rem 0;
| |
| font-family: Georgia, serif;
| |
| font-size: 2.4rem;
| |
| }
| |
| .phoenix-lead {
| |
| max-width: 52rem;
| |
| font-size: 1.05rem;
| |
| }
| |
| .phoenix-portal-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
| |
| gap: 1rem;
| |
| margin: 1rem 0 1.5rem;
| |
| }
| |
| .phoenix-portal-card {
| |
| padding: 1rem 1.1rem;
| |
| background: #f7f2e7;
| |
| border: 1px solid #c8b98f;
| |
| border-left: 5px solid #735c32;
| |
| border-radius: 3px;
| |
| }
| |
| .phoenix-portal-card h3 {
| |
| margin-top: 0;
| |
| font-family: Georgia, serif;
| |
| }
| |
| .phoenix-portal-card .mw-editsection {
| |
| display: none;
| |
| }
| |
| @media (max-width: 720px) {
| |
| .phoenix-title { font-size: 1.8rem; }
| |
| }
| |
| | |
|
| |
|
| /* Vollflächig klickbare Kacheln */ | | /* Hinweis-Box (Quelltext-Editor) und Symbol (VisualEditor) für den |
| .phoenix-click-card {
| | Redaktionsleitfaden im Bearbeiten-Modus (Inhalt wird per Common.js |
| position: relative;
| | eingefuegt). Bewusst hier in Common.css statt im Skin hinterlegt, |
| cursor: pointer;
| | damit Farbe/Text direkt im Wiki angepasst werden koennen, ohne den |
| transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
| | Skin anzufassen. */ |
| }
| | #phoenix-editnotice-leitfaden { |
| .phoenix-click-card:hover,
| | display: flex; |
| .phoenix-click-card:focus-within {
| | align-items: flex-start; |
| background: #efe6d5;
| | gap: 0.5em; |
| border-color: #a58e60;
| | margin: 0.8em 0 0; |
| box-shadow: 0 3px 10px rgba(61, 48, 30, .16);
| | padding: 0.7em 1em; |
| transform: translateY(-1px);
| | background: #fdf2d9; |
| }
| | border: 2px solid #b8860b; |
| .phoenix-portal-card h3 a::after, | | border-left: 6px solid #b8860b; |
| .phoenix-religion-card .phoenix-card-link a::after {
| | border-radius: 2px; |
| content: "";
| | color: #443a2a; |
| position: absolute;
| | font-size: 0.95em; |
| inset: 0;
| |
| z-index: 2;
| |
| }
| |
| .phoenix-portal-card h3 a:focus-visible,
| |
| .phoenix-religion-card .phoenix-card-link a:focus-visible { | |
| outline: 2px solid #735c32;
| |
| outline-offset: 3px;
| |
| }
| |
| .phoenix-religion-grid {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 1em;
| |
| align-items: stretch;
| |
| }
| |
| .phoenix-religion-card {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: .9em;
| |
| box-sizing: border-box;
| |
| flex: 1 1 360px;
| |
| min-height: 118px;
| |
| padding: .9em;
| |
| border: 1px solid #c8ccd1;
| |
| border-radius: 6px;
| |
| background: #fff;
| |
| } | | } |
| .phoenix-religion-symbol { | | #phoenix-editnotice-leitfaden .phoenix-editnotice-icon { |
| flex: 0 0 88px;
| | flex: 0 0 auto; |
| text-align: center;
| | font-size: 1.4em; |
| | line-height: 1.2; |
| | color: #b8860b; |
| } | | } |
| .phoenix-religion-content { | | #phoenix-editnotice-leitfaden .phoenix-editnotice-text { |
| flex: 1 1 auto;
| | flex: 1 1 auto; |
| } | | } |
| @media (prefers-reduced-motion: reduce) {
| | #phoenix-editnotice-leitfaden a { |
| .phoenix-click-card {
| | font-weight: bold; |
| transition: none;
| |
| }
| |
| .phoenix-click-card:hover,
| |
| .phoenix-click-card:focus-within {
| |
| transform: none;
| |
| }
| |
| } | | } |
|
| |
|
| /* Interaktive Markierungen der Länderkarte */
| | #phoenix-ve-editnotice-icon { |
| .phoenix-map-marker {
| | display: inline-flex; |
| color: #d01818 !important;
| | align-items: center; |
| -webkit-text-stroke: 2px #000;
| | justify-content: center; |
| paint-order: stroke fill;
| | align-self: center; |
| text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 5px #fff;
| | width: 2.86em; |
| transition: color .15s ease;
| | height: 2.86em; |
| }
| | margin: 0 0.2em; |
| a:hover .phoenix-map-marker,
| | color: #b8860b; |
| a:focus .phoenix-map-marker {
| | font-size: 1.1em; |
| color: #000 !important;
| | text-decoration: none; |
| }
| | cursor: pointer; |
| a:has(> .phoenix-map-marker) {
| |
| text-decoration: none !important;
| |
| }
| |
| | |
| | |
| /* Einheitliche Navigation und Infoboxen */
| |
| .phoenix-backlink {
| |
| margin: .2rem 0 1rem;
| |
| padding: .45rem .7rem;
| |
| background: #f7f2e7;
| |
| border-left: 4px solid #735c32;
| |
| color: #443a2a;
| |
| }
| |
| .phoenix-infobox { | |
| float: right;
| |
| clear: right;
| |
| width: 300px;
| |
| margin: 0 0 1rem 1.25rem;
| |
| background: #faf7ef;
| |
| }
| |
| .phoenix-infobox th {
| |
| width: 38%;
| |
| background: #eee5d3;
| |
| color: #3f3322;
| |
| }
| |
| .phoenix-infobox tr:first-child th { | |
| width: auto;
| |
| background: #735c32;
| |
| color: #fff;
| |
| font-family: Georgia, serif;
| |
| font-size: 1.1rem;
| |
| text-align: center;
| |
| }
| |
| .phoenix-infobox-image {
| |
| text-align: center;
| |
| } | | } |
| .phoenix-infobox-image img {
| | #phoenix-ve-editnotice-icon:hover { |
| max-width: 260px;
| | color: #8a6508; |
| height: auto;
| |
| }
| |
| .phoenix-infobox tr:has(> .phoenix-infobox-value:empty) {
| |
| display: none;
| |
| }
| |
| @media (max-width: 720px) {
| |
| .phoenix-infobox {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 0 0 1rem;
| |
| }
| |
| }
| |
| | |
| | |
| /* Piktogramme in Portalkacheln */
| |
| .phoenix-icon-card {
| |
| text-align: center;
| |
| }
| |
| | |
| .phoenix-icon-card .phoenix-portal-icon {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| min-height: 120px;
| |
| margin-bottom: .6rem;
| |
| }
| |
| | |
| .phoenix-icon-card .phoenix-portal-icon img {
| |
| display: block;
| |
| width: 112px;
| |
| height: 112px;
| |
| object-fit: contain;
| |
| }
| |
| | |
| .phoenix-icon-card h3 {
| |
| margin-bottom: .15rem;
| |
| }
| |
| | |
| | |
| /* Gerade Linie unter ==-Überschriften entfernen, Schwung (Hintergrundbild auf h2) bleibt erhalten */
| |
| .mw-heading2 {
| |
| border-bottom: none;
| |
| }
| |
| | |
| /* Mobile Navigation: Seitenleiste als Burger-Off-Canvas-Menü (oben links) */
| |
| @media screen and (max-width: 768px) {
| |
| #column-navigation {
| |
| position: fixed;
| |
| top: 0;
| |
| left: 0;
| |
| width: 82vw;
| |
| max-width: 320px;
| |
| height: 100vh;
| |
| overflow-y: auto;
| |
| background: #fff;
| |
| box-shadow: 2px 0 12px rgba(0, 0, 0, .25);
| |
| transform: translateX(-100%);
| |
| transition: transform .25s ease;
| |
| padding: 3.5rem 1rem 1rem;
| |
| z-index: 1000;
| |
| box-sizing: border-box;
| |
| }
| |
| body.nav-open #column-navigation {
| |
| transform: translateX(0);
| |
| }
| |
| | |
| .nav-overlay {
| |
| display: none;
| |
| position: fixed;
| |
| inset: 0;
| |
| background: rgba(0, 0, 0, .4);
| |
| z-index: 900;
| |
| }
| |
| body.nav-open .nav-overlay {
| |
| display: block;
| |
| }
| |
| body.nav-open {
| |
| overflow: hidden;
| |
| }
| |
| | |
| .mw-burger {
| |
| position: fixed;
| |
| top: .6rem;
| |
| left: .6rem;
| |
| z-index: 1100;
| |
| width: 42px;
| |
| height: 42px;
| |
| border: 1px solid #9b8356;
| |
| border-radius: 4px;
| |
| background: #fff;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| padding: 0;
| |
| cursor: pointer;
| |
| }
| |
| .mw-burger span,
| |
| .mw-burger span::before,
| |
| .mw-burger span::after {
| |
| content: "";
| |
| display: block;
| |
| width: 22px;
| |
| height: 2px;
| |
| background: #223355;
| |
| position: relative;
| |
| transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
| |
| }
| |
| .mw-burger span::before {
| |
| position: absolute;
| |
| top: -7px;
| |
| }
| |
| .mw-burger span::after {
| |
| position: absolute;
| |
| top: 7px;
| |
| }
| |
| body.nav-open .mw-burger span {
| |
| background: transparent;
| |
| }
| |
| body.nav-open .mw-burger span::before {
| |
| transform: rotate(45deg);
| |
| top: 0;
| |
| background: #223355;
| |
| }
| |
| body.nav-open .mw-burger span::after {
| |
| transform: rotate(-45deg);
| |
| top: 0;
| |
| background: #223355;
| |
| }
| |
| | |
| /* Breite Inhalte (Tabellen, Bilder) nicht über den Viewport hinausragen lassen */
| |
| .mw-parser-output table {
| |
| display: block;
| |
| max-width: 100%;
| |
| overflow-x: auto;
| |
| }
| |
| #content img,
| |
| .mw-parser-output img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| }
| |
| }
| |
| | |
| | |
| /* Inhaltsverzeichnis-Tiefe pro Seite ueber {{TOC Tiefe|N}} */
| |
| .tocLimit-1 .toclevel-2, .tocLimit-1 .toclevel-3, .tocLimit-1 .toclevel-4, .tocLimit-1 .toclevel-5, .tocLimit-1 .toclevel-6 {
| |
| display: none;
| |
| }
| |
| .tocLimit-2 .toclevel-3, .tocLimit-2 .toclevel-4, .tocLimit-2 .toclevel-5, .tocLimit-2 .toclevel-6 {
| |
| display: none;
| |
| }
| |
| .tocLimit-3 .toclevel-4, .tocLimit-3 .toclevel-5, .tocLimit-3 .toclevel-6 {
| |
| display: none;
| |
| }
| |
| .tocLimit-4 .toclevel-5, .tocLimit-4 .toclevel-6 {
| |
| display: none;
| |
| }
| |
| .tocLimit-5 .toclevel-6 {
| |
| display: none;
| |
| }
| |
| | |
| | |
| /* Kopfzeile/Reiter auf schmalen Bildschirmen lesbar stapeln statt ueberlappen zu lassen */
| |
| @media screen and (max-width: 750px) {
| |
| #p-banner,
| |
| #p-banner.mw-wiki-title {
| |
| font-size: 1.1rem;
| |
| display: block;
| |
| width: auto;
| |
| max-width: calc(100% - 3.5rem);
| |
| white-space: normal;
| |
| overflow-wrap: break-word;
| |
| line-height: 1.25;
| |
| margin-left: 3.2rem;
| |
| }
| |
| | |
| #p-search {
| |
| float: none;
| |
| position: static;
| |
| width: auto;
| |
| max-width: none;
| |
| margin: .5rem 0 .5rem 3rem;
| |
| }
| |
| #p-search input,
| |
| #p-search .oo-ui-widget {
| |
| max-width: 100%;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| #p-namespaces,
| |
| #p-views,
| |
| #p-actions,
| |
| #p-variants {
| |
| float: none;
| |
| white-space: normal;
| |
| margin: 0;
| |
| padding: .3rem 0;
| |
| border-bottom: 1px solid #e2dccb;
| |
| }
| |
| #p-actions {
| |
| border-bottom: none;
| |
| }
| |
| #p-namespaces ul,
| |
| #p-views ul,
| |
| #p-actions ul,
| |
| #p-variants ul {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: .4rem;
| |
| margin: 0;
| |
| padding: 0;
| |
| list-style: none;
| |
| }
| |
| #p-namespaces li,
| |
| #p-views li,
| |
| #p-actions li,
| |
| #p-variants li {
| |
| display: block;
| |
| white-space: nowrap;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| #p-namespaces li a,
| |
| #p-views li a,
| |
| #p-actions li a,
| |
| #p-variants li a {
| |
| display: inline-block;
| |
| padding: .25rem .55rem;
| |
| background: #f7f2e7;
| |
| border: 1px solid #d8cdb0;
| |
| border-radius: 3px;
| |
| font-size: .8rem;
| |
| line-height: 1.1;
| |
| text-decoration: none;
| |
| }
| |
| #p-namespaces li.selected a,
| |
| #p-views li.selected a {
| |
| background: #735c32;
| |
| border-color: #735c32;
| |
| color: #fff;
| |
| }
| |
| } | | } |
