2,590
edits
(Created page with "→CSS placed here will affect users of the mobile site: @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 300; src: url('/de/resources...") |
No edit summary |
||
Line 1: | Line 1: | ||
/* CSS | /* Das folgende CSS wird für alle Nutzer der mobilen Ansicht geladen. */ | ||
.language-selector { | |||
display:none !important; | |||
} | |||
.mainheader { | |||
background-color: #a2a9b1; | |||
color:#FFFFFF; | |||
text-align:left; | |||
font-size:25px; | |||
width:100%; | |||
padding-left:5px; | |||
height:120px; | |||
padding-top:30px; | |||
} | |||
.mainheader .title { | |||
height:30px; | |||
line-height:30px; | |||
} | |||
.bold { | |||
font-weight:bold; | |||
} | |||
@font-face { | @font-face { | ||
Line 49: | Line 73: | ||
font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana; | font-family: 'Rajdhani',sans-serif,Arial,Tahoma,Verdana; | ||
font-weight:bold; | font-weight:bold; | ||
} | |||
.content h3, .mw-body-content h3 { | |||
text-decoration:underline; | |||
} | } | ||
p, p *, li, li * { | |||
font-family: Arial,Tahoma,Verdana; | |||
} | |||
.branding-box a span { | .branding-box a span { | ||
background-image: url(/de/resources/assets/iq-digital.png?53da3); | background-image: url(/de/resources/assets/iq-digital.png?53da3); | ||
Line 64: | Line 94: | ||
} | } | ||
.header { | .header { | ||
Line 82: | Line 110: | ||
.specsBox { | .specsBox { | ||
position:relative; | position:relative; | ||
width:320px; | |||
margin- | margin: 16px auto 16px auto; | ||
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; | ||
Line 99: | Line 129: | ||
.specsBox .infos { | .specsBox .infos { | ||
border-top: 1px solid black; | border-top: 1px solid black; | ||
padding-top:16px; | padding-top:16px; | ||
Line 129: | Line 158: | ||
.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; | |||
font-size:14px; | |||
} | |||
.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 .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; | |||
} | |||
.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; | |||
} | |||
.specsBox .galerie .gallery { | |||
margin:0; | |||
padding:0; | |||
} | |||
.mainpage { | |||
display:flex; | |||
flex-wrap:wrap; | |||
justify-content:center; | |||
min-width:320px; | |||
box-sizing: border-box; | |||
} | |||
.mainpage * { | |||
box-sizing: border-box; | |||
} | |||
.chapter { | |||
width:320px; | |||
min-width:320px; | |||
margin-right:16px; | |||
} | |||
@media screen and (max-width: 352px) { | |||
.mainpage, .specsBox { | |||
margin-left:-16px; | |||
margin-right:-16px; | |||
} | |||
.chapter { | |||
width:320px; | |||
min-width:320px; | |||
margin-right:0; | |||
} | |||
.mainheader { | |||
padding-top:15px; | |||
} | |||
} | |||
@media screen and (max-width: 370px) { | |||
.mainheader { | |||
padding-top:15px; | |||
} | |||
} | |||
@media screen and (min-width: 720px) { | |||
.mainpage { | |||
margin-left:-3.35em; | |||
margin-right:-3.35em; | |||
} | |||
.mainheader .title{ | |||
text-align:left; | |||
} | |||
} | |||
@media screen and (max-width: 672px) { | |||
.chapter { | |||
margin-right:0; | |||
} | |||
.mainheader .title{ | |||
text-align:left; | |||
} | |||
} | |||
.kontakt{ | |||
margin: 15px 20px 5px 0; | |||
width:250px; | |||
} | |||
.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; | |||
} | |||
.chapterlist { | |||
width:320px; | |||
border: 0.5px solid #a2a9b1; | |||
background-color: #f8f9fa; | |||
color: #222; | |||
margin: 1em auto; | |||
border-collapse: collapse; | |||
font-size:16px; | |||
} | |||
.chapterlist .clheader { | |||
font-size:22px; | |||
background-color:#525050; | |||
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; | |||
} | } |