Game widow (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „→Das folgende CSS wird für alle Benutzeroberflächen geladen.: →This governs the sections on the Community portal: .cpbox { display: flex; fle…“) |
(Anpassung des Designs nach Vorlage der englischen Version.) |
||
Zeile 1: | Zeile 1: | ||
+ | /* CSS placed here will be applied to all skins */ |
||
− | /* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ |
||
/* This governs the sections on the Community portal */ |
/* This governs the sections on the Community portal */ |
||
.cpbox { |
.cpbox { |
||
Zeile 44: | Zeile 44: | ||
border-radius: 1em; |
border-radius: 1em; |
||
padding: 1em; |
padding: 1em; |
||
+ | } |
||
+ | |||
+ | /* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */ |
||
+ | /* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */ |
||
+ | .desktopleft { |
||
+ | text-align: left; |
||
+ | } |
||
+ | |||
+ | .desktopcenter { |
||
+ | text-align: center; |
||
+ | } |
||
+ | |||
+ | .desktopright { |
||
+ | text-align: right; |
||
+ | } |
||
+ | |||
+ | /* Template:FP links styles */ |
||
+ | .fplinks { |
||
+ | display: flex; |
||
+ | flex-wrap: wrap; |
||
+ | justify-content: space-evenly; |
||
+ | align-items: stretch; |
||
+ | text-align: center; |
||
+ | } |
||
+ | |||
+ | .fplink-outer { |
||
+ | flex-basis: calc(20% - 10px); |
||
+ | width: calc(20% - 15px); |
||
+ | min-width: 80px; |
||
+ | display: inline-block; |
||
+ | vertical-align: middle; |
||
+ | } |
||
+ | |||
+ | .fplink-wide { |
||
+ | flex-basis: calc(33% - 10px); |
||
+ | width: calc(33% - 15px); |
||
+ | } |
||
+ | |||
+ | .fplink-fullwidth { |
||
+ | flex-basis: 100%; |
||
+ | width: calc(100% - 15px); |
||
+ | font-weight: bold; |
||
+ | } |
||
+ | |||
+ | .fplink { |
||
+ | padding: 0.5em; |
||
+ | box-sizing: border-box; |
||
+ | width: 100%; |
||
+ | height: 100%; |
||
+ | display: table; |
||
+ | } |
||
+ | |||
+ | .fplink-plain { |
||
+ | background: transparent; |
||
+ | border-radius: 0; |
||
+ | border: 0; |
||
+ | box-shadow: none; |
||
+ | } |
||
+ | |||
+ | .fplink-inner { |
||
+ | display: table-row; |
||
+ | } |
||
+ | |||
+ | .fplink a { |
||
+ | display: table-cell; |
||
+ | vertical-align: middle; |
||
+ | } |
||
+ | |||
+ | .fplink-small .fplink img { |
||
+ | max-width: 50px; |
||
+ | } |
||
+ | |||
+ | .fplink img { |
||
+ | max-width: 150px; |
||
+ | width: 100%; |
||
+ | height: auto; |
||
+ | } |
||
+ | |||
+ | /*Table Alignment*/ |
||
+ | tbody { |
||
+ | vertical-align: top; |
||
+ | } |
||
+ | |||
+ | .centeredTable td { |
||
+ | text-align: center; |
||
+ | } |
||
+ | |||
+ | .centeredTable td:first-child { |
||
+ | text-align:left; |
||
+ | } |
||
+ | |||
+ | .darktable td { |
||
+ | vertical-align: middle; |
||
+ | padding: 5px 10px; |
||
+ | } |
||
+ | |||
+ | /* Responsive Image Scaling */ |
||
+ | img.responsive { |
||
+ | max-width: 100%; |
||
+ | height: auto; |
||
} |
} |
Aktuelle Version vom 31. August 2019, 10:46 Uhr
/* CSS placed here will be applied to all skins */
/* This governs the sections on the Community portal */
.cpbox {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.cpbox #admins {
box-sizing: border-box;
width: calc(33% - 10px);
margin: 5px;
flex-grow: 1;
min-width: 300px;
}
.cpbox #help {
box-sizing: border-box;
width: calc(67% - 10px);
margin: 5px;
flex-grow: 1;
}
/* Template documentation styles */
/* If modifying these styles, be sure to update the mobile skin! */
.doc {
margin: 0em auto 1em;
background-color: rgba(0, 0, 0, 0.1);
border: 2px solid #BDCAC3;
border-radius: 1em;
padding: 1em;
}
.doc-header {
padding-bottom: 3px;
border-bottom: 1px solid #BDCAC3;
margin-bottom: 1ex;
}
.doc-footer {
margin: 0;
background-color: rgba(0, 0, 0, 0.1);
border: 2px solid #BDCAC3;
border-radius: 1em;
padding: 1em;
}
/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */
/* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */
.desktopleft {
text-align: left;
}
.desktopcenter {
text-align: center;
}
.desktopright {
text-align: right;
}
/* Template:FP links styles */
.fplinks {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: stretch;
text-align: center;
}
.fplink-outer {
flex-basis: calc(20% - 10px);
width: calc(20% - 15px);
min-width: 80px;
display: inline-block;
vertical-align: middle;
}
.fplink-wide {
flex-basis: calc(33% - 10px);
width: calc(33% - 15px);
}
.fplink-fullwidth {
flex-basis: 100%;
width: calc(100% - 15px);
font-weight: bold;
}
.fplink {
padding: 0.5em;
box-sizing: border-box;
width: 100%;
height: 100%;
display: table;
}
.fplink-plain {
background: transparent;
border-radius: 0;
border: 0;
box-shadow: none;
}
.fplink-inner {
display: table-row;
}
.fplink a {
display: table-cell;
vertical-align: middle;
}
.fplink-small .fplink img {
max-width: 50px;
}
.fplink img {
max-width: 150px;
width: 100%;
height: auto;
}
/*Table Alignment*/
tbody {
vertical-align: top;
}
.centeredTable td {
text-align: center;
}
.centeredTable td:first-child {
text-align:left;
}
.darktable td {
vertical-align: middle;
padding: 5px 10px;
}
/* Responsive Image Scaling */
img.responsive {
max-width: 100%;
height: auto;
}