MediaWiki:Mobile.css: Unterschied zwischen den Versionen

Aus Technische Spezifikationen
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 51: Zeile 51:
}
}


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);
Zeile 64: Zeile 67:
}
}


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


.header {
.header {
Zeile 82: Zeile 83:
.specsBox {
.specsBox {
   position:relative;
   position:relative;
  height:480px;
   margin-top:16px;
   margin-top:16px;
   margin-bottom:16px;
   margin-bottom:16px;
Zeile 129: Zeile 129:
.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 .abmessung, .anlieferungselement .gewicht, .anlieferungselement .format, .anlieferungselement .alternative, .anlieferungselement .anmerkung, .anlieferungselement .abmessungExpandiert, .anlieferungselement .mandanten{
padding-left: 5px;
padding-right: 5px;
}
.anlieferungselement .bezeichnung{
width:25%;
font-weight:bold;
padding-right:5px;
display:inline-block;
vertical-align:top;
}
.anlieferungselement .wert{
width:75%;
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;
text-align:center;
}
}

Version vom 29. Juli 2019, 14:22 Uhr

/* Das folgende CSS wird für alle Nutzer der mobilen Ansicht geladen. */

@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;
}

p, p *, li, li * {
font-family: Arial,Tahoma,Verdana;
}
.branding-box a span {
    background-image: url(/de/resources/assets/iq-digital.png?53da3);
    background-repeat: no-repeat;
    background-size: 70px auto;
    background-position: left center;
    padding-left:80px;
height:32px;
}

.header .branding-box {
width:80%;
}



.header {
    white-space:normal;
}

a {
color:#ee7f00;
}

a:visited {
color:#ee7f00;
}

.specsBox {
  position:relative;
  margin-top:16px;
  margin-bottom:16px;
}

.specsBox .container{
position:absolute;
  width:320px;
  left:50%;
margin-left:-160px;
background-color:#ffeecc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.specsBox .infos {
margin: 16px;
border-top: 1px solid black;
padding-top:16px;
}

.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 .abmessung, .anlieferungselement .gewicht, .anlieferungselement .format, .anlieferungselement .alternative, .anlieferungselement .anmerkung, .anlieferungselement .abmessungExpandiert, .anlieferungselement .mandanten{
padding-left: 5px;
padding-right: 5px;
}


.anlieferungselement .bezeichnung{
width:25%;
font-weight:bold;
padding-right:5px;
display:inline-block;
vertical-align:top;
}
.anlieferungselement .wert{
width:75%;
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;
text-align:center;
}