MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
(Created page with "→CSS placed here will be applied to all skins: @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 300; src: url('/de/resources/assets/f...") |
No edit summary |
||
(5 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS | /* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ | ||
#p-lang { | |||
//display:none; | |||
} | |||
.bold { | |||
font-weight:bold; | |||
} | |||
div#p-logo::after { | |||
content: "Technical Specifications"; | |||
font-weight: bold; | |||
color:#ef7f00; | |||
margin-top:-30px; | |||
position:absolute; | |||
margin-left:1.1em; | |||
} | |||
@font-face { | @font-face { | ||
font-family: 'Rajdhani'; | font-family: 'Rajdhani'; | ||
Line 39: | Line 57: | ||
src: local('Rajdhani Bold'), local('Rajdhani-Bold'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.eot?#iefix') format('embedded-opentype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.woff2') format('woff2'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.woff') format('woff'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.ttf') format('truetype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.svg#Rajdhani') format('svg') | src: local('Rajdhani Bold'), local('Rajdhani-Bold'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.eot?#iefix') format('embedded-opentype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.woff2') format('woff2'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.woff') format('woff'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.ttf') format('truetype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.svg#Rajdhani') format('svg') | ||
} | } | ||
* { | * { | ||
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana; | font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana; | ||
font-size: 100%; | font-size: 100%; | ||
} | } | ||
Line 51: | Line 69: | ||
} | } | ||
.content h3, .mw-body-content h3 { | |||
text-decoration:underline; | |||
} | |||
p, p *, li, li * { | p, p *, li, li * { | ||
Line 88: | Line 109: | ||
} | } | ||
a { | a, #mw-panel .portal .body li a { | ||
color:#ee7f00; | color:#ee7f00; | ||
} | } | ||
a:visited { | a:visited, #mw-panel .portal .body li a:visited { | ||
color:#ee7f00; | color:#ee7f00; | ||
} | } | ||
Line 98: | Line 119: | ||
.specsBox { | .specsBox { | ||
position:relative; | position:relative; | ||
float:right; | float:right; | ||
width:320px; | width:320px; | ||
margin: 16px 0 16px 16px; | margin: 16px 0 16px 16px; | ||
box-sizing:border-box; | |||
} | |||
.specsBox *{ | |||
box-sizing:border-box; | |||
} | } | ||
.specsBox .container{ | .specsBox .container{ | ||
width:320px; | width:320px; | ||
padding:1em; | |||
background-color:#ffeecc; | |||
background-color:#ffeecc; | -webkit-border-radius: 5px; | ||
-webkit-border-radius: 5px; | -moz-border-radius: 5px; | ||
-moz-border-radius: 5px; | border-radius: 5px; | ||
border-radius: 5px; | } | ||
.specsBox #toc { | |||
margin-top:1em; | |||
} | } | ||
.specsBox .infos { | .specsBox .infos { | ||
border-top: 1px solid black; | border-top: 1px solid black; | ||
padding-top: | padding-top:1em; | ||
} | } | ||
Line 146: | Line 172: | ||
.content .specsBox ul { | .content .specsBox ul { | ||
padding-left:0; | padding-left:0; | ||
} | |||
.anlieferungselement { | |||
width:320px; | |||
background-color: #fff1e6; | |||
border-radius: 5px; | |||
margin-right:5px; | |||
margin-bottom: 10px; | |||
padding-bottom:5px; | |||
} | |||
.anlieferungselement *{ | |||
box-sizing: border-box; | |||
} | |||
.anlieferungselement:last-of-type { | |||
margin-bottom:0; | |||
} | |||
.anlieferungselement .titel{ | |||
font-weight:bold; | |||
font-size:120%; | |||
text-align:center; | |||
border-bottom: 2px solid #ffad66; | |||
background-color: #ffe4cc; | |||
padding: 5px 5px 0 5px; | |||
border-top-left-radius:5px; | |||
border-top-right-radius:5px; | |||
} | |||
.anlieferungselement .subtitel{ | |||
font-weight:bold; | |||
font-size:120%; | |||
text-align:center; | |||
border-bottom: 2px solid #ffad66; | |||
background-color: #ffe4cc; | |||
padding: 5px 5px 0 5px; | |||
} | |||
.anlieferungselement .abmessung, .anlieferungselement .gewicht, .anlieferungselement .format, .anlieferungselement .alternative, .anlieferungselement .anmerkung, .anlieferungselement .abmessungExpandiert, .anlieferungselement .mandanten, .anlieferungselement .dauer, .anlieferungselement .seitenverhaeltnis{ | |||
padding-left: 5px; | |||
padding-right: 5px; | |||
} | |||
.anlieferungselement .bezeichnung{ | |||
width:33%; | |||
font-weight:bold; | |||
padding-right:5px; | |||
display:inline-block; | |||
vertical-align:top; | |||
} | |||
.anlieferungselement .wert{ | |||
width:67%; | |||
display:inline-block; | |||
} | |||
.anlieferungselement .referenz { | |||
padding: 1em; | |||
text-align:center; | |||
font-size:120%; | |||
display:inline-block; | |||
width:100%; | |||
} | |||
.anlieferung_kombination { | |||
display:flex; | |||
} | |||
.anlieferung_kombination.horizontal { | |||
align-content:center; | |||
flex-direction:row; | |||
border: 2px solid #ffad66; | |||
flex-wrap:wrap; | |||
justify-content:center; | |||
} | |||
.anlieferung_kombination.vertikal{ | |||
justify-content: center; | |||
flex-direction:column; | |||
align-content:center; | |||
} | |||
.anlieferung_kombination > .container > .anlieferung_kombination.vertikal{ | |||
} | |||
.anlieferung_kombination > .container > .anlieferung_kombination.horizontal{ | |||
flex:initial; | |||
} | |||
.anlieferung_kombination.horizontal > .anlieferungselement { | |||
flex:none; | |||
margin: 5px; | |||
} | |||
.anlieferung_kombination.horizontal > .zeichen{ | |||
flex:none; | |||
} | |||
.anlieferung_kombination > .zeichen{ | |||
font-weight: bold; | |||
font-size: 200%; | |||
width: 100px; | |||
text-align: center; | |||
vertical-align:middle; | |||
} | |||
.anlieferung_kombination.vertikal > .zeichen{ | |||
font-size:300%; | |||
line-height:80px; | |||
height:80px; | |||
width:320px; | |||
align-self:center; | |||
} | |||
.anlieferung_kombination.vertikal .header { | |||
background-color: #ffe4cc; | |||
width: 100%; | |||
text-align: center; | |||
border: 2px solid #ffad66; | |||
border-bottom: none; | |||
box-sizing: border-box; | |||
} | |||
.anlieferung_kombination .header .bezeichnung{ | |||
font-size:200%; | |||
font-weight:bold; | |||
} | |||
.anlieferung_kombination .header .text { | |||
font-size:150%; | |||
} | |||
.galerie { | |||
margin-top:1em; | |||
margin-bottom:1em; | |||
text-align:center; | |||
} | |||
.mainpage { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:flex-start; | |||
min-width:320px; | |||
box-sizing: border-box; | |||
} | |||
.mainpage * { | |||
box-sizing: border-box; | |||
} | |||
.chapter { | |||
width:320px; | |||
min-width:320px; | |||
margin-right:1em; | |||
} | |||
.kontakt{ | |||
margin: 15px 20px 5px 0; | |||
width:200px; | |||
} | |||
.kontakt_name{ | |||
font-weight: 700; | |||
font-size:16px; | |||
} | |||
.kontakt_funktion{ | |||
border-bottom: 1px solid black; | |||
font-size:16px; | |||
} | |||
.included .specsBox .infos .anlieferung{ | |||
display:none; | |||
} | |||
.included .specsBox .infos.text{ | |||
padding-top:0; | |||
} | |||
div.warnung::after { | |||
clear:both; | |||
} | |||
div.warnung::before { | |||
content: "Warnung"; | |||
background:url(/de/images/c/cb/Warning.png) no-repeat; | |||
background-position:center; | |||
background-size:24px auto; | |||
width:24px; | |||
height:24px; | |||
line-height:24px; | |||
display:inline-block; | |||
color:rgba(0,0,0,0); | |||
float:left; | |||
margin-right:10px; | |||
} | |||
div.warnung { | |||
font-weight:bold; | |||
font-size:120%; | |||
color:#ff0000; | |||
float:left; | |||
} | |||
#mw-panel #p-Start.portal .body li { | |||
font-size:20px; | |||
font-weight:bold; | |||
} | |||
.chapterlist { | |||
width:320px; | |||
border: 0.5px solid #a2a9b1; | |||
background-color: #f8f9fa; | |||
color: #222; | |||
margin: 1em 0; | |||
border-collapse: collapse; | |||
font-size:16px; | |||
} | |||
.chapterlist .clheader { | |||
font-size:22px; | |||
background-color:#021B23; | |||
color:#FFF; | |||
padding: 0.2em 0.4em; | |||
font-weight:bold; | |||
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana; | |||
} | |||
.chapterlist ul { | |||
margin:0; | |||
padding:0; | |||
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana; | |||
} | |||
.chapterlist li { | |||
list-style-type: none; | |||
list-style-image: none; | |||
padding: 0.2em 0.4em; | |||
margin:0; | |||
font-weight:bold; | |||
border-bottom: 0.5px solid #a2a9b1; | |||
line-height:1.6; | |||
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana; | |||
font-size:100%; | |||
} | |||
.chapterlist li *{ | |||
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana; | |||
} | |||
.mainheader { | |||
background-color: #021B23; | |||
color:#FFFFFF; | |||
text-align:left; | |||
font-size:60px; | |||
width:100%; | |||
padding-left:20px; | |||
height:300px; | |||
padding-top:70px; | |||
} | |||
.mainheader .title { | |||
height:80px; | |||
line-height:80px; | |||
} | |||
.seitenanfang, .werbeformkombination { | |||
background-color: #f8f9fa; | |||
color: #202122; | |||
margin: 1em 0; | |||
border: 1px solid #a2a9b1; | |||
padding:1em; | |||
} | |||
.seitenanfang span, .werbeformkombination span { | |||
font-size:150%; | |||
} | |||
.werbeformkombination { | |||
width:600px; | |||
height:150px; | |||
display:flex; | |||
align-items:center; | |||
} | |||
#p-logo a { | |||
background-size: 100% auto; | |||
} | } |
Latest revision as of 08:33, 8 December 2022
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
#p-lang {
//display:none;
}
.bold {
font-weight:bold;
}
div#p-logo::after {
content: "Technical Specifications";
font-weight: bold;
color:#ef7f00;
margin-top:-30px;
position:absolute;
margin-left:1.1em;
}
@font-face {
font-family: 'Rajdhani';
font-style: normal;
font-weight: 300;
src: url('/de/resources/assets/fonts/rajdhani-v7-latin-300.eot');
src: local('Rajdhani Light'), local('Rajdhani-Light'), url('/de/resources/assets/fonts/rajdhani-v7-latin-300.eot?#iefix') format('embedded-opentype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-300.woff2') format('woff2'), url('/de/resources/assets/fonts/rajdhani-v7-latin-300.woff') format('woff'), url('/de/resources/assets/fonts/rajdhani-v7-latin-300.ttf') format('truetype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-300.svg#Rajdhani') format('svg')
}
@font-face {
font-family: 'Rajdhani';
font-style: normal;
font-weight: 400;
src: url('/de/resources/assets/fonts/rajdhani-v7-latin-regular.eot');
src: local('Rajdhani Regular'), local('Rajdhani-Regular'), url('/de/resources/assets/fonts/rajdhani-v7-latin-regular.eot?#iefix') format('embedded-opentype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-regular.woff2') format('woff2'), url('/de/resources/assets/fonts/rajdhani-v7-latin-regular.woff') format('woff'), url('/de/resources/assets/fonts/rajdhani-v7-latin-regular.ttf') format('truetype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-regular.svg#Rajdhani') format('svg')
}
@font-face {
font-family: 'Rajdhani';
font-style: normal;
font-weight: 500;
src: url('/de/resources/assets/fonts/rajdhani-v7-latin-500.eot');
src: local('Rajdhani Medium'), local('Rajdhani-Medium'), url('/de/resources/assets/fonts/rajdhani-v7-latin-500.eot?#iefix') format('embedded-opentype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-500.woff2') format('woff2'), url('/de/resources/assets/fonts/rajdhani-v7-latin-500.woff') format('woff'), url('/de/resources/assets/fonts/rajdhani-v7-latin-500.ttf') format('truetype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-500.svg#Rajdhani') format('svg')
}
@font-face {
font-family: 'Rajdhani';
font-style: normal;
font-weight: 600;
src: url('/de/resources/assets/fonts/rajdhani-v7-latin-600.eot');
src: local('Rajdhani SemiBold'), local('Rajdhani-SemiBold'), url('/de/resources/assets/fonts/rajdhani-v7-latin-600.eot?#iefix') format('embedded-opentype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-600.woff2') format('woff2'), url('/de/resources/assets/fonts/rajdhani-v7-latin-600.woff') format('woff'), url('/de/resources/assets/fonts/rajdhani-v7-latin-600.ttf') format('truetype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-600.svg#Rajdhani') format('svg')
}
@font-face {
font-family: 'Rajdhani';
font-style: normal;
font-weight: 700;
src: url('/de/resources/assets/fonts/rajdhani-v7-latin-700.eot');
src: local('Rajdhani Bold'), local('Rajdhani-Bold'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.eot?#iefix') format('embedded-opentype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.woff2') format('woff2'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.woff') format('woff'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.ttf') format('truetype'), url('/de/resources/assets/fonts/rajdhani-v7-latin-700.svg#Rajdhani') format('svg')
}
* {
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana;
font-size: 100%;
}
.pre-content h1, .content h1, .content h2, .content h3, .mw-body h1, .mw-body-content h1, .mw-body-content h2, .mw-body-content h3 {
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana;
font-weight:bold;
}
.content h3, .mw-body-content h3 {
text-decoration:underline;
}
p, p *, li, li * {
font-family: Arial,Tahoma,Verdana;
}
.cb {
clear:both;
}
.underline {
text-decoration:underline;
}
.blue {
color:#0099ff;
}
.orange{
color:#ef7f00;
}
.red{
color:#ff0000;
}
table.standardtable {
border: 1px solid black;
border-collapse:collapse;
}
table.standardtable td, table.standardtable th{
padding:5px;
border: 1px solid black;
}
ul.widegallery {
text-align:left;
}
a, #mw-panel .portal .body li a {
color:#ee7f00;
}
a:visited, #mw-panel .portal .body li a:visited {
color:#ee7f00;
}
.specsBox {
position:relative;
float:right;
width:320px;
margin: 16px 0 16px 16px;
box-sizing:border-box;
}
.specsBox *{
box-sizing:border-box;
}
.specsBox .container{
width:320px;
padding:1em;
background-color:#ffeecc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.specsBox #toc {
margin-top:1em;
}
.specsBox .infos {
border-top: 1px solid black;
padding-top:1em;
}
.specsBox span {
display:inline-block;
vertical-align:top;
}
.specsBox .key {
width:33%;
text-align:left;
font-weight:bold;
}
.specsBox .value {
width:66%;
text-align:left;
}
.specsBox .name {
font-weight:bold;
}
.specsBox h3 {
margin: 0 auto;
}
.content .specsBox ul {
padding-left:0;
}
.anlieferungselement {
width:320px;
background-color: #fff1e6;
border-radius: 5px;
margin-right:5px;
margin-bottom: 10px;
padding-bottom:5px;
}
.anlieferungselement *{
box-sizing: border-box;
}
.anlieferungselement:last-of-type {
margin-bottom:0;
}
.anlieferungselement .titel{
font-weight:bold;
font-size:120%;
text-align:center;
border-bottom: 2px solid #ffad66;
background-color: #ffe4cc;
padding: 5px 5px 0 5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.anlieferungselement .subtitel{
font-weight:bold;
font-size:120%;
text-align:center;
border-bottom: 2px solid #ffad66;
background-color: #ffe4cc;
padding: 5px 5px 0 5px;
}
.anlieferungselement .abmessung, .anlieferungselement .gewicht, .anlieferungselement .format, .anlieferungselement .alternative, .anlieferungselement .anmerkung, .anlieferungselement .abmessungExpandiert, .anlieferungselement .mandanten, .anlieferungselement .dauer, .anlieferungselement .seitenverhaeltnis{
padding-left: 5px;
padding-right: 5px;
}
.anlieferungselement .bezeichnung{
width:33%;
font-weight:bold;
padding-right:5px;
display:inline-block;
vertical-align:top;
}
.anlieferungselement .wert{
width:67%;
display:inline-block;
}
.anlieferungselement .referenz {
padding: 1em;
text-align:center;
font-size:120%;
display:inline-block;
width:100%;
}
.anlieferung_kombination {
display:flex;
}
.anlieferung_kombination.horizontal {
align-content:center;
flex-direction:row;
border: 2px solid #ffad66;
flex-wrap:wrap;
justify-content:center;
}
.anlieferung_kombination.vertikal{
justify-content: center;
flex-direction:column;
align-content:center;
}
.anlieferung_kombination > .container > .anlieferung_kombination.vertikal{
}
.anlieferung_kombination > .container > .anlieferung_kombination.horizontal{
flex:initial;
}
.anlieferung_kombination.horizontal > .anlieferungselement {
flex:none;
margin: 5px;
}
.anlieferung_kombination.horizontal > .zeichen{
flex:none;
}
.anlieferung_kombination > .zeichen{
font-weight: bold;
font-size: 200%;
width: 100px;
text-align: center;
vertical-align:middle;
}
.anlieferung_kombination.vertikal > .zeichen{
font-size:300%;
line-height:80px;
height:80px;
width:320px;
align-self:center;
}
.anlieferung_kombination.vertikal .header {
background-color: #ffe4cc;
width: 100%;
text-align: center;
border: 2px solid #ffad66;
border-bottom: none;
box-sizing: border-box;
}
.anlieferung_kombination .header .bezeichnung{
font-size:200%;
font-weight:bold;
}
.anlieferung_kombination .header .text {
font-size:150%;
}
.galerie {
margin-top:1em;
margin-bottom:1em;
text-align:center;
}
.mainpage {
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
min-width:320px;
box-sizing: border-box;
}
.mainpage * {
box-sizing: border-box;
}
.chapter {
width:320px;
min-width:320px;
margin-right:1em;
}
.kontakt{
margin: 15px 20px 5px 0;
width:200px;
}
.kontakt_name{
font-weight: 700;
font-size:16px;
}
.kontakt_funktion{
border-bottom: 1px solid black;
font-size:16px;
}
.included .specsBox .infos .anlieferung{
display:none;
}
.included .specsBox .infos.text{
padding-top:0;
}
div.warnung::after {
clear:both;
}
div.warnung::before {
content: "Warnung";
background:url(/de/images/c/cb/Warning.png) no-repeat;
background-position:center;
background-size:24px auto;
width:24px;
height:24px;
line-height:24px;
display:inline-block;
color:rgba(0,0,0,0);
float:left;
margin-right:10px;
}
div.warnung {
font-weight:bold;
font-size:120%;
color:#ff0000;
float:left;
}
#mw-panel #p-Start.portal .body li {
font-size:20px;
font-weight:bold;
}
.chapterlist {
width:320px;
border: 0.5px solid #a2a9b1;
background-color: #f8f9fa;
color: #222;
margin: 1em 0;
border-collapse: collapse;
font-size:16px;
}
.chapterlist .clheader {
font-size:22px;
background-color:#021B23;
color:#FFF;
padding: 0.2em 0.4em;
font-weight:bold;
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana;
}
.chapterlist ul {
margin:0;
padding:0;
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana;
}
.chapterlist li {
list-style-type: none;
list-style-image: none;
padding: 0.2em 0.4em;
margin:0;
font-weight:bold;
border-bottom: 0.5px solid #a2a9b1;
line-height:1.6;
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana;
font-size:100%;
}
.chapterlist li *{
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana;
}
.mainheader {
background-color: #021B23;
color:#FFFFFF;
text-align:left;
font-size:60px;
width:100%;
padding-left:20px;
height:300px;
padding-top:70px;
}
.mainheader .title {
height:80px;
line-height:80px;
}
.seitenanfang, .werbeformkombination {
background-color: #f8f9fa;
color: #202122;
margin: 1em 0;
border: 1px solid #a2a9b1;
padding:1em;
}
.seitenanfang span, .werbeformkombination span {
font-size:150%;
}
.werbeformkombination {
width:600px;
height:150px;
display:flex;
align-items:center;
}
#p-logo a {
background-size: 100% auto;
}