Wikipedia:Hauptseite/styles

CSS

ol.breadcrumb-nav-container,
ul.breadcrumb-nav-container{
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0.2em0;
padding-left:0;
}
ol.breadcrumb-nav-container>li,
ul.breadcrumb-nav-container>li{
display:inline;
margin-right:1.5em;
padding:0;
}
ol.breadcrumb-nav-midsep>li,
ul.breadcrumb-nav-midsep>li,
ol.breadcrumb-nav-pipe>li,
ul.breadcrumb-nav-pipe>li{
margin-right:0;
}
ol.breadcrumb-nav-midsep>li::after,
ul.breadcrumb-nav-midsep>li::after,
ol.breadcrumb-nav-pipe>li::after,
ul.breadcrumb-nav-pipe>li::after{
margin-left:0.2em;
margin-right:0.2em;
}
ol.breadcrumb-nav-midsep>li::after,
ul.breadcrumb-nav-midsep>li::after{
content:"\A025円AA";
}
ol.breadcrumb-nav-pipe>li::after,
ul.breadcrumb-nav-pipe>li::after{
content:"\A0|";
}
ol.breadcrumb-nav-midsep>li:last-child::after,
ul.breadcrumb-nav-midsep>li:last-child::after,
ol.breadcrumb-nav-pipe>li:last-child::after,
ul.breadcrumb-nav-pipe>li:last-child::after{
display:none;
}
ul+ul.breadcrumb-nav-container,
div+ul.breadcrumb-nav-container{
margin-top:0.5em;
}
.center.breadcrumb-nav-container{
margin-left:auto;
margin-right:auto;
text-align:center;
}
.center.breadcrumb-nav-container>li{
margin-left:0.75em;
margin-right:0.75em;
}
#hauptseite-toc,
.hauptseite-upward{
display:none;
}
.hauptseite-box{
display:table;
margin-left:auto;
margin-right:auto;
margin-top:1em;
}
#willkommenp:first-child{
margin-top:0;
}
.hauptseite-box-title{
font-family:inherit;
font-size:1em;
font-weight:bold;
line-height:1.5;
display:block!important;/* zur Korrektur unerwünschter Effekte mit display:flex in Mobilversion */
}
.hauptseite-preview-wikidata{
color:var(--color-subtle,#54595d);
}
@mediaonlyscreen{
/* klassischer Desktop, zweispaltig; Grundstruktur */
#spalten{
overflow:auto;
padding-bottom:1px;
}
#links,
#rechts{
float:left;
width:calc(50%-0.5em-0.005px);
}
#links{
margin-right:1em;
}
#links.hauptseite-box{
margin-left:0;
}
#unten{
clear:both;
}
.hauptseite-portalea,
#schwesterprojektea{
font-weight:bold;
}
.hauptseite-box{
width:100%;
}
.hauptseite-box-content,
.hauptseite-box-title{
border:#8898BFthinsolid;
}
.hauptseite-box-title{
background-color:#D8E8FF;
margin-bottom:0;
margin-top:0;
padding:0.2em0.8em;
}
.hauptseite-box-content,
.hauptseite-preview-wikidata{
background-color:var(--dewiki-hintergrundfarbe-basis);
border-top:none;
overflow:auto;
padding:0.3em0.8em0.3em;
}
.hauptseite-mehr{
font-size:90%;
margin:0.5em00.2em0;
text-align:right;
}
.hauptseite-audiodesc{
font-family:monospace;
}
.hauptseite-item{
white-space:nowrap;
}
.hauptseite-item-long{
white-space:normal;
}
#oben.hauptseite-box-title,
#unten.hauptseite-box-title{
text-align:center;
}
}
@mediaonlyscreenand(max-width:54rem){
/* Platzmangel */
#links,
#rechts{
float:none;
margin-right:0;
width:auto;
}
.hauptseite-box{
width:99%;
}
.hauptseite-box-content,
.hauptseite-preview-wikidata{
border-bottom:none;
border-left:none;
border-right:none;
padding:0.5em0;
}
ul:not(.breadcrumb-nav-container)li:not(.hauptseite-item){
margin-left:0.5em;
}
.hauptseite-details,
.breadcrumb-nav-container>li.hauptseite-details{
display:none;
}
#hauptseite-toc{
display:block;
font-size:92%;
line-height:1.4em;
margin-bottom:1em;
}
.hauptseite-upward{
display:block;
float:right;
margin-left:2em;
}
#oben.hauptseite-box-title,
#unten.hauptseite-box-title,
#willkommenp:first-child{
text-align:left;
}
}
@mediaonlyscreenand(max-width:42rem){
/* Besonders kleiner Screen */
#hauptseite-toc{
display:none;
}
#oben.hauptseite-upward{
display:none;
}
}
@mediaonlyscreenand(min-width:180rem){
/* Mehr als zweispaltig; 121rem */
#links{
float:none;
margin-right:0;
width:auto;
}
#links-oben,
#links-unten{
float:left;
}
#oben.hauptseite-box,
#unten.hauptseite-box{
max-width:none;
width:auto;
}
}
@mediaonlyscreenand(min-width:99999rem){
/* Dreispaltig */
#links-oben,
#links-unten{
margin-right:3%;
width:28%;
}
#rechts{
width:38%;
}
}
@mediaonlyscreenand(min-width:180rem){
/* Vierspaltig */
#rechts{
float:none;
width:auto;
}
#links-oben,
#links-unten,
#rechts-oben,
#rechts-unten{
width:23%;
}
#links-oben,
#links-unten,
#rechts-oben,
#rechts-unten{
margin-left:1%;
margin-right:1%;
}
#rechts-oben,
#rechts-unten{
float:left;
}
}
@mediaonlyscreenand(min-width:260rem){
/* Fünfspaltig */
#rechts-unten{
float:none;
width:auto;
}
#links-oben,
#links-unten,
#rechts-oben,
#rechts-unten-1,
#rechts-unten-2{
margin-left:1%;
margin-right:1%;
width:18%;
}
#rechts-unten-1,
#rechts-unten-2{
float:left;
}
#rechts-unten-2{
margin-right:0;
}
.hauptseite-box{
max-width:75em;
}
#unten.hauptseite-box{
max-width:none;
}
}
@mediaprint{
.hauptseite-portale,
#intern,
#schwesterprojekte,
.hauptseite-mehr{
display:none;
}
.hauptseite-box{
margin-left:10%;
max-width:70em;
width:80%;
}
}
/* Dunkelmodus */
@mediascreen{
html.skin-theme-clientpref-night.hauptseite-box-title{
color:var(--color-base,#eaecf0);
background-color:var(--dewiki-hintergrundfarbe5);
border-color:#72777d;
}
html.skin-theme-clientpref-night.hauptseite-box-content{
color:var(--color-base,#eaecf0);
border-color:#72777d;
}
}
@mediascreenand(prefers-color-scheme:dark){
html.skin-theme-clientpref-os.hauptseite-box-title{
color:var(--color-base,#eaecf0);
background-color:var(--dewiki-hintergrundfarbe5);
border-color:#72777d;
}
html.skin-theme-clientpref-os.hauptseite-box-content{
color:var(--color-base,#eaecf0);
border-color:#72777d;
}
}

Kopiervorlage

<templatestyles src="Wikipedia:Hauptseite/styles.css" />

Klassen

Elementstruktur