MediaWiki:Common.css
Aus SELFHTML-Wiki
Hinweis: Leeren Sie nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Extras → Internetspuren löschen … → Individuelle Auswahl → Den kompletten Cache löschen
:root{
--blue-darker: hsl(201 50% 15%);
--blue-dark: hsl(201 50% 25%);
--blue: #337599;
--blue1: #eaf1f5; /* hsl(202 36% 94%) */
--blue2: #d6e3eb; /* hsl(203 35% 89%) */
--blue4: #adc8d6; /* hsl(201 34% 76%) */
--blue6: #85acc2; /* hsl(202 34% 65%) */
--blue8: #5c91ad; /* hsl(201 34% 52%) */
--green-dark: hsl(80 45% 30%);
--green-darker: hsl(80 45% 40%);
--green: hsl(80 45% 50%);
--green1: hsl(80 45% 60%);
--green2: hsl(80 45% 70%);
--green3: hsl(80 45% 80%);
--green5: hsl(80 65% 95%);
--orange: #df6c20;
--orange1: #ffede0;
--red-dark: hsl( 13 96% 20%);
--red-darker: hsl( 13 96% 30%);
--red: #c82f04;
--red1: #f9eae5;
--red2: #f4d5cd;
--red3: hsl(13 96% 90%);
--red4: #e9ac9b;
--yellow-darker: hsl( 45 77% 30%);
--yellow-dark: hsl( 44 75% 40%);
--yellow: hsl(44 75% 50%);
--yellow2: hsl(44 75% 70%);
--yellow3: hsl(44 75% 90%);
--black: #113;
--grey1: #e7e7ea;
--grey2: #cfcfd6;
--grey8: #41415b;
--bluegrey: #607885;
--bluegrey4: #bfc9ce;
--bgcolor: #fff;
--text-color: var(--black);
--link-color: var(--blue);
background-color: var(--bgcolor);
color: var(--text-color);
}
/* Blauer Titelbalken aus Skin überschreiben */
html {
--head-height: 2.5em;
background: linear-gradient(to bottom,var(--blue) 0px,var(--blue) calc(var(--head-height) - 2px),white calc(var(--head-height) - 2px),calc(var(--head-height) - 1px),var(--blue) calc(var(--head-height) - 1px)) no-repeat top / 100% var(--head-height);
}
/* CodingStyle */
div.codingstyle {
position: relative;
white-space: pre;
background-color: hsla(80, 45%, 48%, .2);
border: thin dashed #8db243;
color: #000000;
line-height: 1.1em;
margin: 1em 0;
padding: 0;
font-size: 1em;
-moz-tab-size: 2;
tab-size: 2;
font-family: monospace;
}
div.codingstyle.wrong,
div.codingstyle.obsolete {
background: hsla(13, 96%, 39%, .1);
border-color: #c32e04;
}
div.codingstyle > pre {
border-color: transparent;
background-color: transparent;
margin: 0;
padding: 1em 1em .8em;
}
div.codingstyle::before {
content: "richtig";
position: absolute;
font-family: sans-serif;
left: .5em;
top: -.75em;
font-weight: bold;
color: #8db243;
background: white;
padding: .1em .5em;
border-bottom: thin dashed #8db243;
}
div.codingstyle.wrong::before,
div.codingstyle.obsolete::before {
content: "falsch";
color: #c32e04;
border-color: #c32e04;
}
div.codingstyle.obsolete::before {
content: "obsolet";
}
/* #dokuwiki__pagetools {top: -35vh !important;} (Wenn Werbung geschaltet ist) */
/* Mehr Abstand für Edit-Buttons */
#wpSummary ~ div.editButtons {
margin: 1.4em 0 2.4em -.1em;
}
/* CSS an dieser Stelle wirkt sich auf alle Skins aus */
/* Systemschriften */
html, body,
#firstHeading, .page-Startseite #mw-content-text > h1:first-child {
font-family: "Segoe UI", Roboto, Calibri, -apple-system, BlinkMacSystemFont, "PT Sans", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
/* Links neben Überschriften */
.locale-anchor::before {
content: url("/images/7/7e/Link_icon_black.svg");
display: inline-block;
margin-left: .3em;
width: .8em;
padding: 0 .2em;
border-radius: 0 .3em .3em;
}
.locale-anchor:hover::before,
.locale-anchor:focus::before {
background-color: #df6c20;
}
.locale-anchor span {
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
}
/* Diskussionsseiten ausblenden */
body:not([class*="page-Benutzer"]) #ca-talk {
display: none;
}
body:not([class*="page-Benutzer"]) #ca-watch {
display: none !important; /*dann braucht man auch Seiten nicht beobachten */
}
/** talkpage-header nicht für Benutzerdiskussionen **/
body[class*=page-Benutzer_Diskussion] .mw-talkpageheader,
body[class*=page-Benutzer_Diskussion] .mw-talkpageheader + p {
display: none;
}
/** max-width für Bilder **/
img {
max-width: 100%;
height: auto;
}
/* 2 Spalten */
div.twocol {
float: left;
min-width: 12em;
padding: 0 1% 0 0;
width: 49%;
}
div.twocol + div.twocol {
padding: 0 0 0 1%;
}
@media (max-width: 73em ) {
div.twocol div.twocol {
min-width: 100%;
padding: 0;
}
}
@media (max-width: 50em ) {
div.twocol {
min-width: 100%;
}
div.twocol + div.twocol {
padding: 0;
}
}
/* 3 Spalten */
@media (min-width: 50em ) {
div.threecol {
display: flex;
}
div.threecol > .flex-item {
flex: 1 1 auto;
width: 100vw;
margin: 0 1em 0 0;
}
div.threecol > .flex-item:last-child {
margin: 0;
}
}
/* reduzierte Einrückung für ol innerhalb von nSpalten */
#mw-content-text .nSpalten ol {
margin: 0.3em 0 0 1.6em;
}
/* Hinweis, dass unsigned als subst eingebunden werden sollte */
.action-submit .unsigned::after {
background: none repeat scroll 0 0 #c32e04;
color: white;
content: "An `subst:` gedacht?";
margin-left: .5em;
padding: .1em .5em;
vertical-align: top;
}
/* Tabellen Finanzbericht */
.finanzbericht td:not(:first-child) {
text-align: right;
}
/* Quick-Syntax-Box */
.selfhtml_quick_syntax_examples {
width: 100%;
margin: 1em 0;
padding: 0.2em 0;
border: 1px solid rgb(102, 102, 255);
border-top: none;
background-color: rgb(250, 250, 255);
}
.selfhtml_quick_syntax_examples caption {
padding: 0.1em 0.5em;
border: 1px solid rgb(102, 102, 255);
border-bottom: none;
background-color: rgb(250, 250, 255);
text-align: left;
font-weight: bold;
}
.selfhtml_quick_syntax_examples th {
padding: 0 0.5em;
text-align: left;
}
.selfhtml_quick_syntax_examples td {
padding: 0 0.5em;
vertical-align: top;
}
#selfhtml_quick_syntax_examples_lastline {
padding-bottom: .5em;
padding-top: 1em;
}
#editform .mw-editTools > ul {
list-style: none;
display: flex;
justify-content: center;
gap: 0.5em;
margin: 0;
}
#editform .mw-editTools > ul li {
margin: 0;
}
#editform .mw-editTools > ul li button {
padding: 0.2em 0.5em;
background-color: white;
border: thin solid #114;
border-bottom-style: none;
border-radius: 0.3em 0.3em 0 0;
}
#editform .mw-editTools > ul > li button[aria-selected=true] {
background-color: #ccf;
}
#editform .mw-editTools #specialchars {
border: thin solid #666;
text-align: center;
display: block;
}
#editform .mw-editTools #specialchars p {
line-height: 1.7em;
}
#editform .mw-editTools #specialchars a {
color: var(--blue);
background-color: #eee;
border-radius: 0.2em;
padding: 0em 0.3em;
border: thin solid black;
}
/* Üsim2 */
.vorlage_h2 {
font-size: 1.5em;
border-bottom: 2px solid #c4d4da;
padding-bottom: .15em;
margin-top: 2em;
margin-bottom: .75em;
font-weight: normal;
}
/* Inhaltsverzeichnis (TOC) */
.toc td {
padding: 5px 0;
}
/* Vorlage TOC */
.tocleft {
clear: left; /* Falls andere "left"-Elemente davor stehen */
float: left;
margin-right: 1.5em;
background: white;
padding-right: 1em;
}
.tocright {
clear: right; /* Falls andere "right"-Elemente davor stehen */
float: right;
position: relative; /* Stacking-Kontext erzeugen, überlagert ggf. Outline von Beispielen */
margin-left: 1.5em;
background: white;
padding-left: 1em;
}
.toclimit-1 .toclevel-1 ul,
.toclimit-2 .toclevel-2 ul,
.toclimit-3 .toclevel-3 ul,
.toclimit-4 .toclevel-4 ul,
.toclimit-5 .toclevel-5 ul,
.toclimit-6 .toclevel-6 ul {
display: none;
}
.tocright.aside {
margin-left: 0;
margin-bottom: 1.5em;
}
@media (min-width: 60em) {
.tocright.aside {
white-space: nowrap;
}
}
/* einzeiliges Inhaltsverzeichnis */
.tocinline .toctoggle,
.tocinline .tocnumber {
display: none;
}
.tocinline,
.tocinline #toctitle,
.tocinline #toctitle > h2,
.tocinline #toc ul,
.tocinline #toc li {
display: inline;
}
.tocinline #toctitle > h2 {
margin-right: 1em;
}
.tocinline #toc a {
padding: 0 .4em;
}
.nonumbering .tocnumber {
display: none;
}
/* Vorlage Begrüßung */
.toc.hallo a {
display: inline-flex;
}
/* Infoboxen: Achtung, Hinweis, Info, ToDo, Löschen, URLMove, Hauptartikel */
[role=complementary],
[role=link],
.disambuigation,
.example,
[role=note] {
border: thin solid transparent;
border-left: thick solid #8db243;
border-radius: 0 0.5em 0.5em 0;
line-height: 1.5em;
margin: .5em 0 1em;
padding: 0 0 0 .5em; /* padding-bottom 1em stört bei den meisten Nutzungen. Wo wird es gebraucht? */
padding-left: calc(var(--ausrückung, 0em) + 1em);
text-indent: calc(0em - var(--ausrückung, 0em))
}
[role=complementary] {
border-color: #dfac20;
border-color: var(--yellow);
}
[role=complementary].autor {
max-width: 20em
}
[role=complementary].aside {
text-align: left
}
[role="complementary"].aside,
[role="complementary"].autor {
border: thin solid var(--yellow);
background-image: linear-gradient(to bottom, var(--yellow3), var(--yellow2));
border-radius: 2px;
}
[role="complementary"].aside [role=heading],
[role="complementary"].autor [role=heading]{
background-color:transparent;
color: #333;
}
@media (min-width:60em) {
[role=complementary].aside {
float: right;
width: auto;
max-width: 30em;
margin: .5em 0 1em 1em
}
}
[role=complementary] [role=heading],
[role=note].attention [role=heading] {
font-weight: bold;
margin: 0 0 0.5em -1em;
text-indent: 1em
}
[role=complementary] dl {
display: grid;
grid-template-columns: 2em 1fr
}
[role=complementary].autor dl {
grid-template-columns: 5em 1fr
}
[role=complementary] dt {
font-weight: bold;
margin-bottom: .1em
}
[role=complementary] dd {
margin: 0 0 1em;
padding: 0 1em
}
[role=link] {
border-left-color: var(--link-color);
}
#mw-content-text {
container-type: inline-size;
container-name: mw-content;
margin-top: -0.4em; /* Container erzeugt Blockformatierungskontext, Margin vom ersten p ausgleichen */
}
ul.continuation {
--cont-arrow: 1.5rem;
--cont-height: 3rem;
--link-color: white;
display: grid;
/* ohne @container-Support und für schmalen Viewport */
grid: "prev prev . " var(--cont-height)
" . main . " var(--cont-height)
" . next next" var(--cont-height)
/ var(--cont-arrow) 1fr var(--cont-arrow);
padding: 0;
margin: 0.3em 0;
max-width: 25em;
gap: 2px;
}
@container mw-content (min-width:25em) {
ul.continuation {
grid: " . . main main . . " var(--cont-height)
"prev prev prev next next next" var(--cont-height)
/ var(--cont-arrow) 2fr 3fr 3fr 2fr var(--cont-arrow);
max-width: unset;
}
}
@container mw-content (min-width:42em) {
ul.continuation {
grid: "prev prev main next next" var(--cont-height)
/ var(--cont-arrow) 1fr 1fr 1fr var(--cont-arrow);
max-width: unset;
}
}
.continuation li {
list-style: none;
margin: 0; /* Selfskin setzt störenden margin-bottom */
}
.continuation li.prev-cont { grid-area: prev; }
.continuation li.main-cont { grid-area: main; }
.continuation li.next-cont { grid-area: next; }
.continuation li.prev-cont:not(:empty) {
clip-path: polygon(0% 50%, var(--cont-arrow) 0%, 100% 0%, 100% 100%, var(--cont-arrow) 100%);
padding-left: var(--cont-arrow);
background-color: var(--blue);
}
.continuation li.next-cont:not(:empty) {
clip-path: polygon(0% 0%, calc(100% - var(--cont-arrow)) 0%, 100% 50%, calc(100% - var(--cont-arrow)) 100%, 0% 100%);
padding-right: var(--cont-arrow);
background-color: var(--blue);
}
/* strong.selflink wird von Mediawiki statt a Element erzeugt wenn ein Link auf die eigene Seite zeigt */
/* Link-Inhalt per Flexbox vertikal zentrieren. Horizontale Zentrierung mit text-align */
.continuation a, .continuation .selflink {
display: flex;
height: 100%;
flex-flow: column;
justify-content: center;
text-align: center;
text-decoration: none;
}
.continuation a {
color: var(--link-color);
background-color: var(--blue);
}
.continuation .selflink {
background-color: var(--blue1);
}
.mw-body .continuation a:visited,
.mw-body .continuation a:hover,
.mw-body .continuation a:focus {
color: var(--link-color);
}
.example {
border-left-color: #dfac20;
background-color: var(--yellow1);
}
.example [role=heading] {
font-weight: bold
}
[role=note].attn {
border-left-color: #c82f04
}
[role=note].attention {
border-color: #c82f04;
background-color: #ffebe6;
border-bottom-left-radius: 0.5em;
color: #333
}
[role=note].attention [role=heading] {
background-color: #c82f04
}
[role=note].attention [role=heading] a {
background-color: #c82f04;
color: white
}
.note-box {
margin: .5em 0 1em;
outline: thin dotted hotpink;
}
.private {
display: none
}
.note-box-example {
border-left: 5px solid #dfac20;
padding-left: 15px;
overflow: visible
}
.note-box-example>div {
padding: .5em 0
}
.note-box-example>div:nth-last-child(2) {
padding-bottom: 0
}
.note-box-example>.note-box-title {
color: #333;
background: none;
border: none;
font-weight: bold;
font-size: 100%;
padding-top: 0
}
.note-box-example>.note-box-title a {
margin: 0 0 0 .5ch;
/* color: rgb(38, 115, 191) */
}
.note-box-example>.note-box-text {
border: none
}
.note-box-example .note-box-footer {
display: none
}
.note-box-example-wiki,
.note-box-example-code {
margin-top: -1px;
overflow: auto
}
.note-box-example-code {
font: 16px/19px monospace;
white-space: pre
}
.note-box-example-code .ln-xtra,
.note-box-example-code li.ln-xtra,
.note-box-example-code div.ln-xtra {
background-color: var(--red);
}
.note-box-example-code pre {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
font-size: 1em;
overflow: hidden; /* muss sein, sonst kommt gelegentlich ein Scrollbar */
}
/* Vorlagen Icon und Iconset */
.smetadaten {
float: right;
}
ul.siconset {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
span.sicon {
display: inline-block;
position: relative;
width: 32px;
height: 32px;
overflow: hidden;
}
li.sicon {
float: left;
position: relative;
width: 32px;
height: 32px;
overflow: hidden;
margin: 0;
padding: 0;
}
.sicon img {
position: absolute;
border: 0;
max-width: none;
}
/* BrowserIcons */
span.bricon {
vertical-align: middle;
}
.bricon .version {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font: bold 10px/11px sans-serif;
text-align: center;
}
.sicon_op img {top: -0px; left: 0; }
.sicon_ie img { top: -31px; left: 0; }
.sicon_ie8 img { top: -31px; left: -279px; }
.sicon_ie9 img { top: -31px; left: -310px; }
.sicon_ie10 img { top: -31px; left: -341px; }
.sicon_ie11 img { top: -31px; left: -372px; }
.sicon_edge img { top: -31px; left: -403px; }
.sicon_fx img { top: -62px; left: 0; }
.sicon_saf img { top: -93px; left: 0; }
.sicon_saf8 img { top: -93px; left: -372px; }
.sicon_saf9 img { top: -93px; left: -403px; }
.sicon_saf10 img { top: -93px; left: -434px; }
.sicon_saf11 img { top: -93px; left: -465px; }
.sicon_chr img { top: -155px; left: -0px; }
.sicon_html2 img { top: -186px; left: -0px; }
.sicon_html3_2 img { top: -186px; left: -31px; }
.sicon_html4 img { top: -186px; left: -62px; }
.sicon_html5 img { top: -186px; left: -93px; }
.sicon_html5v img { top: -186px; left: -124px; }
.sicon_xhtml1 img { top: -186px; left: -217px; }
.sicon_xhtml1_1 img { top: -186px; left: -248px; }
.sicon_css1 img { top: -217px; left: -0px; }
.sicon_css2 img { top: -217px; left: -31px; }
.sicon_css2_1 img { top: -217px; left: -62px; }
.sicon_css3 img { top: -217px; left: -93px; }
.sicon_css4 img { top: -217px; left: -124px; }
.sicon_dom1 img { top: -217px; left: -465px; }
.sicon_dom2 img { top: -217px; left: -434px; }
.sicon_dom3 img { top: -217px; left: -403px; }
.sicon_ecma1 img { top: -217px; left: -186px; }
.sicon_ecma2 img { top: -217px; left: -217px; }
.sicon_ecma3 img { top: -217px; left: -248px; }
.sicon_ecma4 img { top: -217px; left: -279px; }
.sicon_ecma5 img { top: -217px; left: -310px; }
.sicon_ecma6 img { top: -217px; left: -341px; }
.sicon_js_ms img { top: -248px; left: -0px; }
.sicon_js1_0 img { top: -248px; left: -31px; }
.sicon_js1_1 img { top: -248px; left: -62px; }
.sicon_js1_2 img { top: -248px; left: -93px; }
.sicon_js1_3 img { top: -248px; left: -124px; }
.sicon_js1_4 img { top: -248px; left: -155px; }
.sicon_js1_5 img { top: -248px; left: -186px; }
.sicon_js1_6 img { top: -248px; left: -217px; }
.sicon_js1_7 img { top: -248px; left: -248px; }
.sicon_js1_8 img { top: -248px; left: -279px; }
.sicon_jq img { top: -310px; left: -0px; }
.sicon_jq1_0 img { top: -310px; left: -31px; }
.sicon_jq1_1 img { top: -310px; left: -62px; }
.sicon_jq1_2 img { top: -310px; left: -93px; }
.sicon_jq1_3 img { top: -310px; left: -124px; }
.sicon_jq1_4 img { top: -310px; left: -155px; }
.sicon_jq1_5 img { top: -310px; left: -186px; }
.sicon_jq1_6 img { top: -310px; left: -217px; }
.sicon_achtung img { top: -279px; left: -0px; }
.sicon_visuell img { top: -279px; left: -31px; }
.sicon_aural img { top: -279px; left: -62px; }
.sicon_print img { top: -279px; left: -93px; }
.sicon_ro img { top: -279px; left: -124px; }
.sicon_rw img { top: -279px; left: -155px; }
.sicon_frei img { top: -279px; left: -186px; }
.sicon_leer img { top: -279px; left: -217px; }
.sicon_leer1 img { top: -279px; left: -248px; }
.sicon_leer2 img { top: -279px; left: -279px; }
.sicon_xml1 img { top: -186px; left: -403px; }
.sicon_xslt1 img { top: -186px; left: -434px; }
.sicon_xpath1 img { top: -186px; left: -465px; }
.sicon_svg1 img { top: -279px; left: -0px; }
.sicon_svg1_1 img { top: -279px; left: -31px; }
.sicon_svg1_2 img { top: -279px; left: -62px; }
.sicon_svg2 img { top: -279px; left: -93px; }
.sicon_mathml1 img { top: -279px; left: -186px; }
.sicon_mathml2 img { top: -279px; left: -217px; }
.sicon_mathml3 img { top: -279px; left: -248px; }
.sicon_php4 img { top: -0px; left: -0px; }
.sicon_php5 img { top: -0px; left: -31px; }
.sicon_php7 img { top: -0px; left: -62px; }
.sicon_perl5_6 img { top: -31px; left: -0px; }
.sicon_perl5_8 img { top: -31px; left: -31px; }
.sicon_perl5_10 img { top: -31px; left: -62px; }
.sicon_perl6 img { top: -31px; left: -93px; }
.sicon_java img { top: -341px; left: 0; }
.sicon_java0 img { top: -341px; left: -31px; }
.sicon_java1 img { top: -341px; left: -62px; }
.sicon_java2 img { top: -341px; left: -93px; }
.sicon_java3 img { top: -341px; left: -124px; }
.sicon_java4 img { top: -341px; left: -155px; }
.sicon_java5 img { top: -341px; left: -186px; }
.sicon_java6 img { top: -341px; left: -217px; }
.sicon_java7 img { top: -341px; left: -248px; }
.sicon_java8 img { top: -341px; left: -279px; }
.sicon_as1 img { top: -62px; left: -0px; }
.sicon_as2 img { top: -62px; left: -31px; }
.sicon_as3 img { top: -62px; left: -62px; }
.sicon_flash2 img { top: -93px; left: -0px; }
.sicon_flash3 img { top: -93px; left: -31px; }
.sicon_flash4 img { top: -93px; left: -62px; }
.sicon_flash5 img { top: -93px; left: -93px; }
.sicon_flash6 img { top: -93px; left: -124px; }
.sicon_flash7 img { top: -93px; left: -155px; }
.sicon_flash8 img { top: -93px; left: -186px; }
.sicon_flash9 img { top: -93px; left: -217px; }
.sicon_flash10 img { top: -93px; left: -248px; }
.sicon_sl1 img { top: -124px; left: -0px; }
.sicon_sl2 img { top: -124px; left: -31px; }
.sicon_sl3 img { top: -124px; left: -62px; }
.sicon_sl4 img { top: -124px; left: -93px; }
.sicon_ap1_3 img { top: -155px; left: -0px; }
.sicon_ap2_0 img { top: -155px; left: -31px; }
.sicon_ap2_2 img { top: -155px; left: -62px; }
.sicon_ap2_4 img { top: -155px; left: -93px; }
.sicon_iis1 img { top: -186px; left: -0px; }
.sicon_iis2 img { top: -186px; left: -31px; }
.sicon_iis3 img { top: -186px; left: -62px; }
.sicon_iis4 img { top: -186px; left: -93px; }
.sicon_iis5 img { top: -186px; left: -124px; }
.sicon_iis5_1 img { top: -186px; left: -155px; }
.sicon_iis6 img { top: -186px; left: -186px; }
.sicon_iis7 img { top: -186px; left: -217px; }
.sicon_iis7_5 img { top: -186px; left: -248px; }
.sicon_cgi1_0 img { top: -217px; left: -0px; }
.sicon_cgi1_1 img { top: -217px; left: -31px; }
.sicon_http1_0 img { top: -217px; left: -62px; }
.sicon_http1_1 img { top: -217px; left: -93px; }
.sicon_http2 img { top: -217px; left: -155px; }
.sicon_ssl1 img { top: -248px; left: -62px; }
.sicon_ssl2 img { top: -248px; left: -93px; }
.sicon_ssl3 img { top: -248px; left: -124px; }
.sicon_tls1_0 img { top: -248px; left: -155px; }
.sicon_tls1_1 img { top: -248px; left: -186px; }
.sicon_tls1_2 img { top: -248px; left: -217px; }
.sicon_ssi img { top: -248px; left: -31px; }
.sicon_ftp img { top: -217px; left: -124px; }
.sicon_mime1 img { top: -248px; left: -0px; }
.sicon_android img { top: -310px; left: -0px; }
.sicon_sass img { top: -310px; left: -31px; }
/* Vorlage Cursordemo */
.cursordemo {
padding: 0 2em 0 .2em;
border: thin solid;
font-weight: bold;
background: #e8ddca;
}
/* Vorlagen zur Begriffsklärung */
.vorlage_bk {
margin: 10px 0;
padding-left: 10px;
border: thin solid #c62100;
border-left-width: 10px;
border-radius: 0 .7em .7em;
background-color: #f1f3f4;
}
/* Referenz-Tabellen */
div.flexcontainer {
display: flex;
justify-content: space-between;
}
@media (max-width: 60em ) {
div.flexcontainer {
flex-direction: column;
}
}
div.wrapper { /* kann irgendwann weg */
width: 60%;
min-width: 600px;
display: inline-block;
}
div.wrapper .note-box-example {
max-width: 600px;
}
table.reference {
margin-top: 0;
margin-right: 0;
border: 0 none;
background: transparent;
}
@media (max-width: 60em ) {
table.reference {
width: 100%;
}
}
table.reference tr th,
table.reference tr td {
padding: .3em .7em;
vertical-align: top;
}
table.reference .sicon, table.reference img {
vertical-align: middle;
}
table.reference ul {
margin-left: .8em;
}
table.attribute-reference {
width: 100%;
min-width: 25em; /* Just a test */
}
table.attribute-reference > caption {
background: #f1f3f4;
border: 1px solid #d5d5d5;
border-bottom: none;
padding: 0.5em 1em;
}
.flexcontainer dl {
display: grid;
grid-template-columns: min-content 1fr;
row-gap: 0.3em;
}
.flexcontainer dt,
.reference dt {
grid-column: 1 / 2;
}
/* und noch der Doppelpunkt */
.flexcontainer dt::after,
.reference dt::after {
content: ": ";
}
.flexcontainer dd,
.reference dd {
margin: 0;
padding-left: 1em;
grid-column: 2 / 3;
}
.flexcontainer ul,
.reference ul {
margin: 0 0 0 1em;
}
.flexcontainer dd p:first-child,
.reference dd p:first-child {
margin-top: 0;
}
.flexcontainer dd p:last-child,
.reference dd p:last-child {
margin-bottom: 0;
}
table.html5-element-reference .syntax p {
background-color: #fdfcf3;
border: 1px dashed #e7c157;
color: #000000;
font-family: monospace;
font-size: 1.2em;
line-height: 1.1em;
padding: .8em 1em;
}
.wrapper > table {
width: 100%;
}
/* Tabelle Hilfe:Farbtabelle */
table.farbtabelle {
border-collapse: separate;
border-spacing: .2em;
}
table.farbtabelle tr th,
table.farbtabelle tr td {
padding: 0.4em 1em;
text-align: center;
}
table.farbtabelle tr td:nth-child(2) {
text-align: left;
}
/* Tabelle JavaScript-Attribute */
table.js-attr caption {
text-align: left;
font-weight: bold;
margin-bottom: 1em;
}
table.js-attr td {
background-color: #dce5ee;
padding: .25em 2em .25em .5em;
}
table.js-attr td:first-child {
background-color: #cdd8e4;
}
table.js-attr tr:first-child td:last-child {
border-top-right-radius: .5em;
}
table.js-attr tr:last-child td:first-child {
border-bottom-left-radius: .5em;
}
table.js-attr tr:last-child td:last-child {
border-bottom-right-radius: .5em;
}
@media (max-width: 60em ) {
.tocright, .aside {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.aside .toc > b {
display: block;
}
.aside ul {
display: inline;
margin: 0!important;
padding: 0!important;
}
.aside li {
display: inline;
margin: 0!important;
padding: 0!important;
}
.aside li a::after, .aside li b::after, .aside li strong::after {
content: url("/skins/Selfhtml/images/bullet.gif");
padding: 0 .2em 0 .4em;
white-space: nowrap;
}
.aside li b > a::after {
content: "";
padding: 0;
}
.aside .toc > ul:first-of-type > li:first-of-type > a::before,
.aside .toc > ul:first-of-type > li:first-of-type > b::before {
content: url("/skins/Selfhtml/images/bullet.gif");
padding: 0 .4em 0 .2em;
}
}
div.browsersupport {
float: right;
clear: right;
margin-left: 1em;
padding-left: 3em;
background-color: var(--green5); /* Green3 liefert zu wenig Kontrast! */
border-radius: 1.5em 0.4em 1em 1.5em;
border: 2px solid var(--green);
}
#bodyContent div.browsersupport a { /* Add id to boost specificity */
display: block;
position: relative;
color: var(--black1);
text-align: center;
text-decoration: none;
background-image: none;
padding: 0;
margin-right: 1em;
}
div.browsersupport a::before {
content: " ";
display: block;
position: absolute;
top: 0em;
left: -3em;
width: 4em;
height: 100%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg style='fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round;'%3E%3Ccircle cx='50' cy='50' r='48'/%3E%3Cpath d='M2,50H98M50,2V98A49,55,0 0,0 50,2A49,55,0 0,0 50,98M10,22A98,60,0 0 0 90,22M10,78A98,60,0 0 1 90,78'/%3E%3C/g%3E%3C/svg%3E") center left/contain no-repeat;
}
@media (prefers-color-scheme: dark) {
/* div.browsersupport {
background-color: var(--green-dark);
}
#bodyContent div.browsersupport a {
color: var(--green5);
}
*/
}
/* Cards - aus Vorlage. ID Selektor weil sonst das Listenlayout im Selfskin spezifischer ist. */
#mw-content-text .cards-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17em, 1fr));
gap: 1em;
list-style: none;
clear: both;
margin: 0;
padding: 0;
align-items: stretch;
}
#mw-content-text .cards-list .card {
position: relative;
container-type: inline-size;
container-name: card;
margin: 0;
border: thin dotted; /* Randfarbe automatisch je nach Darkmode */
border-left: none;
border-radius: 0.4em;
background:linear-gradient(to right, #fff, #ddd);
padding: 0.2em 0.4em;
}
#mw-content-text .cards-list .card[data-neu] {
border-color: var(--green);
background:linear-gradient(to right, var(--green5), var(--green2));
}
#mw-content-text .cards-list .card[data-neu]::after {
position: absolute;
rotate: 30deg;
content: 'Neu!';
color: var(--green);
font-size: 2em;
font-weight: bold;
top: -.1em;
right: -.5em;
}
#mw-content-text .cards-list .card .card-titel {
margin: .4em 0 .5em; /* rb margin analog zu <p> im selfskin */
padding: 0; /* Padding aus Vector-Skin entfernen */
font-size: 1.15em;
font-weight: bold;
color: var(--link-color);
}
#mw-content-text .cards-list .card:has(.vollbild) .card-titel {
position:absolute;
width: 100cqw;
}
#mw-content-text .cards-list .logo {
float:right;
margin-left: 0.5em;
}
#mw-content-text .cards-list .logo img {
width: 35cqw;
max-width: 5em;
}
#mw-content-text .cards-list .card:has(:focus-within,:hover) {
box-shadow: 0px 0px 4px 4px var(--link-color);
}
#mw-content-text .cards-list .card:has(:focus-within,:hover) .card-titel {
text-decoration: underline;
}
#mw-content-text .cards-list .card:has(.vollbild) .card-inhalt {
display: flex;
flex-flow: column;
justify-content: end;
height: 100%;
}
#mw-content-text .cards-list .card-inhalt .bild {
--offsetY: 0em;
text-align:center;
position:relative;
z-index:-1
}
#mw-content-text .cards-list .card-inhalt .bild img {
object-fit: contain;
width: 100%;
margin: calc(-1 * var(--offsetY)) 0 0 0;
max-height: calc(10em + var(--offsetY));
}
#mw-content-text .cards-list .card-link a {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
margin: 0; padding: 0;
box-sizing: border-box;
border-radius: 0.4em;
text-decoration: none;
background: none;
}
/* Cards alt */
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17em, 1fr));
gap:2em;
}
.cards-container > * { /* All children: p a, div or img */
margin: 0;
padding: 0;
align-items: stretch;
}
.cards-container div a {
text-decoration:none;
}
.cards-container > p > a {
align-items: stretch;
}
.cards-container a:hover > span,
.cards-container a:focus > span,
.cards-container a:hover > img,
.cards-container a:focus > img {
box-shadow: 3px 3px 15px;
}
.cards-container > .card {
border: thin dotted;
border-left: none;
border-radius:0.4em;
background:linear-gradient(to right, #fff, #ddd);
padding: 0.2em 0.4em;
}
.cards-container > .neu {
border-color: var(--green);
background:linear-gradient(to right, var(--green3), var(--green1));
position: relative;
}
.cards-container > .neu::before {
position: absolute;
top: 0;
left: -1em;
rotate: -30deg;
content: 'Neu!';
color: var(--green);
font-weight: bold;
}
.card { }
.card a b {font-size: 1.15em;}
.card img {width: 110px; float: right; margin-left:0.3em}
.card .teaser img {width: 100%;margin:0; }
.bg-filled {color:black; padding:0.2em 0.4em; border-radius:0.4em;}
/* https://wiki.selfhtml.org/wiki/Hilfe:Infografiken_in_SVG */
@media (prefers-color-scheme: dark) {
.cards-container > .card {
background: var(--blue-dark);
color: white;
}
.bg-filled a,.bg-filled a:visited, .mw-body .bg-filed :visited {
color: var(--blue);
}
}
/* Marker-Vorlage */
mark { color: var(--text-color); } /* color:black aus Selfhtml Skin überschreiben */
mark,
mark.mark-gelb { background-color: var(--yellow3); }
mark.mark-rot { background-color: var(--red3); }
mark.mark-blau { background-color: var(--blue2); }
mark.mark-grün { background-color: var(--green3); }
@media screen and (prefers-color-scheme: dark) {
/* mark,
mark.mark-gelb { background-color: var(--yellow-dark); }
mark.mark-rot { background-color: var(--red-dark; }
mark.mark-blau { background-color: var(--blue); }
mark.mark-grün { background-color: var(--green-dark); }
*/
}
/* Ausblenden der Diskussionsseiten */
#pt-anoncontribs,
#pt-anontalk,
#pt-mycontris,
#pt-watchlist,
#ca-talk {
display:none;
}
.mw-body :visited {
color: var(--blue);
}
.beispiel_url:visited,
.frickl_url:visited,
.beispiel_url_code:visited {
color: var(--blue);
}
