MediaWiki:Common.css: Unterschied zwischen den Versionen
Aus Ardapedia
KKeine Bearbeitungszusammenfassung |
K Icon FIx Markierung: Zurückgesetzt |
||
| Zeile 1: | Zeile 1: | ||
/* ===== Ardapedía: Common.css (bestehend + Icon-Fixes inkl. mobil) ===== */ | |||
/* Bestehende Regeln */ | |||
#mw-content-container { | #mw-content-container { | ||
background-color: #858B62; | background-color: #858B62; | ||
| Zeile 8: | Zeile 11: | ||
.mw-footer-container { | .mw-footer-container { | ||
color: #000000; | color: #000000; | ||
padding-top: 0.5em; | padding-top: 0.5em; | ||
} | } | ||
| Zeile 34: | Zeile 37: | ||
.h3 { | .h3 { | ||
font-family: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif; | font-family: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif; | ||
} | } | ||
| Zeile 73: | Zeile 75: | ||
.overlay h2 { | .overlay h2 { | ||
font-size: 20px; | font-size: 20px; | ||
margin:5px !important | margin: 5px !important; | ||
} | } | ||
} | } | ||
| Zeile 83: | Zeile 85: | ||
div.float-right, table.float-right, ul.float-right, .float-right { | div.float-right, table.float-right, ul.float-right, .float-right { | ||
clear: right; | clear: right; | ||
float: right; | float: right; | ||
margin: 1em 0 1em 1em; | margin: 1em 0 1em 1em; | ||
} | } | ||
.toc, .toccolours { | .toc, .toccolours { | ||
border: 1px solid #8e4924; | border: 1px solid #8e4924; | ||
background-color:#f8f9fa; | background-color: #f8f9fa; | ||
padding: 5px; | padding: 5px; | ||
font-size: 95%; | font-size: 95%; | ||
} | |||
#f-list { | |||
color: #7F855D; | |||
line-height: 1.4em; | |||
font-size: 85%; | |||
} | |||
/* ===== Icon-FIXES: ersetzt defekte background-image:url(?hash) ===== */ | |||
/* Externe Links: kleines Pfeil-Icon */ | |||
a.external, | |||
a[rel~="external"] { | |||
position: relative; | |||
padding-right: 14px; | |||
} | |||
a.external::after, | |||
a[rel~="external"]::after { | |||
content: ""; | |||
position: absolute; | |||
right: 0; | |||
top: 50%; | |||
width: 12px; | |||
height: 12px; | |||
transform: translateY(-50%); | |||
background-repeat: no-repeat; | |||
background-position: center center; | |||
background-size: 12px 12px; | |||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23555" d="M8.5 0h3v3h-1V1.707L6.854 5.354l-.708-.708L9.793 1H8.5V0z"/><path fill="%23555" d="M10 6v5H1V2h5v1H2v7h7V6h1z"/></svg>') !important; | |||
} | |||
/* Persönliches Menü: Chevron-Down ersetzen */ | |||
#personal h2::after { | |||
display: inline-block; | |||
content: ""; | |||
width: 22px; | |||
height: 12px; | |||
vertical-align: middle; | |||
background-repeat: no-repeat !important; | |||
background-position: center center !important; | |||
background-size: 22px 12px !important; | |||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" viewBox="0 0 22 12"><path fill="%23555" d="M2 2l9 8 9-8-1.5-1.5L11 7.8 3.5.5z"/></svg>') !important; | |||
} | |||
/* Generische Inline-Icons (optional für Menü/Buttons) */ | |||
.mw-icon-inline { | |||
display: inline-block; | |||
width: 16px; | |||
height: 16px; | |||
vertical-align: text-bottom; | |||
background-repeat: no-repeat; | |||
background-position: center center; | |||
background-size: 16px 16px; | |||
} | |||
.mw-icon-inline--hamburger { | |||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="14" height="2" x="1" y="3" fill="%23555"/><rect width="14" height="2" x="1" y="7" fill="%23555"/><rect width="14" height="2" x="1" y="11" fill="%23555"/></svg>'); | |||
} | |||
.mw-icon-inline--search { | |||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="7" cy="7" r="5" stroke="%23555" stroke-width="2" fill="none"/><path d="M11 11l4 4" stroke="%23555" stroke-width="2"/></svg>'); | |||
} | |||
/* Vector/Dropdowns: Tabs/Chevrons reparieren */ | |||
.vector-menu-dropdown > h3::after, | |||
.vector-menu-tabs .vector-menu-content li a::after { | |||
content: ""; | |||
width: 10px; | |||
height: 10px; | |||
margin-left: .25em; | |||
display: inline-block; | |||
background-repeat: no-repeat !important; | |||
background-position: center center !important; | |||
background-size: 10px 10px !important; | |||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path fill="%23555" d="M1 3l4 4 4-4z"/></svg>') !important; | |||
} | |||
/* Mobile/Minerva: Icons für Menü, Suche, Pfeile etc. */ | |||
.skin-minerva .minerva-icon, | |||
.skin-minerva .minerva-icon--secondary { | |||
width: 16px; | |||
height: 16px; | |||
display: inline-block; | |||
background-repeat: no-repeat !important; | |||
background-position: center center !important; | |||
background-size: 16px 16px !important; | |||
} | |||
.skin-minerva .minerva-icon--menu, | |||
.skin-minerva .drawer-toggle .icon { | |||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="14" height="2" x="1" y="3" fill="%23555"/><rect width="14" height="2" x="1" y="7" fill="%23555"/><rect width="14" height="2" x="1" y="11" fill="%23555"/></svg>') !important; | |||
} | |||
.skin-minerva .minerva-icon--search, | |||
.skin-minerva .header .search-toggle .icon { | |||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="7" cy="7" r="5" stroke="%23555" stroke-width="2" fill="none"/><path d="M11 11l4 4" stroke="%23555" stroke-width="2"/></svg>') !important; | |||
} | |||
.skin-minerva .minerva-icon--arrow, | |||
.skin-minerva .menu__item--collapsible > .indicator { | |||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23555" d="M2 4l4 4 4-4z"/></svg>') !important; | |||
} | |||
/* Harte Überschreibung gegen kaputte Deklarationen mit url(?hash) */ | |||
#personal h2:after, | |||
a.external:after, | |||
a[rel~="external"]:after, | |||
.vector-menu-dropdown > h3:after, | |||
.vector-menu-tabs .vector-menu-content li a:after, | |||
.skin-minerva .minerva-icon, | |||
.skin-minerva .minerva-icon--secondary { | |||
background-image: initial; /* Basis reset */ | |||
} | |||
/* Kleinere Screens: zusätzliche mobile Feinschliffe */ | |||
@media screen and (max-width: 851px) { | |||
/* Abstand falls Icons rechts sitzen */ | |||
a.external, | |||
a[rel~="external"] { padding-right: 14px; } | |||
} | } | ||
/* Optional: Dunklere Variante bei Hover/Fokus für bessere Sichtbarkeit */ | |||
a.external:hover::after, | |||
a[rel~="external"]:hover::after, | |||
.vector-menu-tabs .vector-menu-content li a:hover::after { | |||
filter: brightness(0.6); | |||
} | } | ||
Version vom 1. September 2025, 10:58 Uhr
/* ===== Ardapedía: Common.css (bestehend + Icon-Fixes inkl. mobil) ===== */
/* Bestehende Regeln */
#mw-content-container {
background-color: #858B62;
}
body {
background-color: #FDFBEA;
}
.mw-footer-container {
color: #000000;
padding-top: 0.5em;
}
#mw-content, #mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
background-color: #FDFBEA;
}
a, .mw-footer-container a {
color: #8E4A25;
}
.mw-footer ul, .mw-footer li {
margin: 0;
}
a:visited, .mw-footer-container a:visited, .mw-footer-container a:hover, a:hover {
color: #6F4630;
}
.mw-body h1.firstHeading {
border-bottom: solid 4px #515C17;
}
.h3 {
font-family: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
}
#mw-content-container {
border-bottom: solid 4px #333a0f;
}
h1, h2, h3, h4, h5, h6 {
color: #8E4A25;
border-bottom: 1px solid #c0c0c0;
}
.color-middle, .color-left, .color-right {
background: #333a0f;
}
.ardapedia_column, .yui-u {
float: left;
width: 49%;
}
.yui-g .first {
margin-right: 2%;
}
.ardapedia_row:after, yui-g:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 851px) {
.ardapedia_column, .yui-u {
float: none;
width: 100%;
}
.overlay h2 {
font-size: 20px;
margin: 5px !important;
}
}
.mw-search-results {
margin: 0;
max-width: 76em;
}
div.float-right, table.float-right, ul.float-right, .float-right {
clear: right;
float: right;
margin: 1em 0 1em 1em;
}
.toc, .toccolours {
border: 1px solid #8e4924;
background-color: #f8f9fa;
padding: 5px;
font-size: 95%;
}
#f-list {
color: #7F855D;
line-height: 1.4em;
font-size: 85%;
}
/* ===== Icon-FIXES: ersetzt defekte background-image:url(?hash) ===== */
/* Externe Links: kleines Pfeil-Icon */
a.external,
a[rel~="external"] {
position: relative;
padding-right: 14px;
}
a.external::after,
a[rel~="external"]::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 12px;
height: 12px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center center;
background-size: 12px 12px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23555" d="M8.5 0h3v3h-1V1.707L6.854 5.354l-.708-.708L9.793 1H8.5V0z"/><path fill="%23555" d="M10 6v5H1V2h5v1H2v7h7V6h1z"/></svg>') !important;
}
/* Persönliches Menü: Chevron-Down ersetzen */
#personal h2::after {
display: inline-block;
content: "";
width: 22px;
height: 12px;
vertical-align: middle;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 22px 12px !important;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" viewBox="0 0 22 12"><path fill="%23555" d="M2 2l9 8 9-8-1.5-1.5L11 7.8 3.5.5z"/></svg>') !important;
}
/* Generische Inline-Icons (optional für Menü/Buttons) */
.mw-icon-inline {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: text-bottom;
background-repeat: no-repeat;
background-position: center center;
background-size: 16px 16px;
}
.mw-icon-inline--hamburger {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="14" height="2" x="1" y="3" fill="%23555"/><rect width="14" height="2" x="1" y="7" fill="%23555"/><rect width="14" height="2" x="1" y="11" fill="%23555"/></svg>');
}
.mw-icon-inline--search {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="7" cy="7" r="5" stroke="%23555" stroke-width="2" fill="none"/><path d="M11 11l4 4" stroke="%23555" stroke-width="2"/></svg>');
}
/* Vector/Dropdowns: Tabs/Chevrons reparieren */
.vector-menu-dropdown > h3::after,
.vector-menu-tabs .vector-menu-content li a::after {
content: "";
width: 10px;
height: 10px;
margin-left: .25em;
display: inline-block;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 10px 10px !important;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path fill="%23555" d="M1 3l4 4 4-4z"/></svg>') !important;
}
/* Mobile/Minerva: Icons für Menü, Suche, Pfeile etc. */
.skin-minerva .minerva-icon,
.skin-minerva .minerva-icon--secondary {
width: 16px;
height: 16px;
display: inline-block;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 16px 16px !important;
}
.skin-minerva .minerva-icon--menu,
.skin-minerva .drawer-toggle .icon {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="14" height="2" x="1" y="3" fill="%23555"/><rect width="14" height="2" x="1" y="7" fill="%23555"/><rect width="14" height="2" x="1" y="11" fill="%23555"/></svg>') !important;
}
.skin-minerva .minerva-icon--search,
.skin-minerva .header .search-toggle .icon {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="7" cy="7" r="5" stroke="%23555" stroke-width="2" fill="none"/><path d="M11 11l4 4" stroke="%23555" stroke-width="2"/></svg>') !important;
}
.skin-minerva .minerva-icon--arrow,
.skin-minerva .menu__item--collapsible > .indicator {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23555" d="M2 4l4 4 4-4z"/></svg>') !important;
}
/* Harte Überschreibung gegen kaputte Deklarationen mit url(?hash) */
#personal h2:after,
a.external:after,
a[rel~="external"]:after,
.vector-menu-dropdown > h3:after,
.vector-menu-tabs .vector-menu-content li a:after,
.skin-minerva .minerva-icon,
.skin-minerva .minerva-icon--secondary {
background-image: initial; /* Basis reset */
}
/* Kleinere Screens: zusätzliche mobile Feinschliffe */
@media screen and (max-width: 851px) {
/* Abstand falls Icons rechts sitzen */
a.external,
a[rel~="external"] { padding-right: 14px; }
}
/* Optional: Dunklere Variante bei Hover/Fokus für bessere Sichtbarkeit */
a.external:hover::after,
a[rel~="external"]:hover::after,
.vector-menu-tabs .vector-menu-content li a:hover::after {
filter: brightness(0.6);
}
