MediaWiki:Mobile.css: Difference between revisions

no edit summary
(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 placed here will affect users of the mobile site */
/* 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:
}
}


p, p *, li, li * {
 
font-family: Arial,Tahoma,Verdana;
}


.header {
.header {
Line 82: Line 110:
.specsBox {
.specsBox {
   position:relative;
   position:relative;
   height:480px;
   width:320px;
   margin-top:16px;
   margin: 16px auto 16px auto;
   margin-bottom:16px;
box-sizing:border-box;
}
 
.specsBox *{
   box-sizing:border-box;
}
}


.specsBox .container{
.specsBox .container{
position:absolute;
   width:320px;
   width:320px;
  left:50%;
padding:1em;
margin-left:-160px;
background-color:#ffeecc;
background-color:#ffeecc;
-webkit-border-radius: 5px;
-webkit-border-radius: 5px;
Line 99: Line 129:


.specsBox .infos {
.specsBox .infos {
margin: 16px;
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;
}
}