MediaWiki:Vector.css: Unterschied zwischen den Versionen

Version vom 21. Dezember 2015, 08:10 Uhr

/* Das folgende CSS wird für Benutzer der Vector-Benutzeroberfläche geladen. */

.mppreviews img,
#mptopleftright img{
 margin:5px;
 border-radius:3px;
 box-shadow: 2px 2px 5px rgba(51,51,51,0.64);
}

.darkbackground,
#mptopleftright,
#mpintro,
#mpbiblio,
#mpadaption,
#mpdates,
#mplinks,
#mpcalendar,
#mpindex,
#mpfoot
{
  margin:5px;
  border-right:1px solid #643F3F; 
  border-bottom:1px solid #643F3F;
  float:left;
}

.darkbackground{
  width:630px;
  margin-left:0px;
  padding-top:5px; 
  padding-bottom:0px; 
  background:#0b0f10; 
  color:#f7f3ea;
}

#mpcalink{
  margin:5px;
  padding:0px;
  float:left;
}

#mpcalendar,
#mpindex{
  margin:0px;
}
#mpcalendar{
  margin-top:5px;
}
#mpindex{
  margin-bottom:5px;
}

#mptopleftright{
  min-height:240px;
}

.darkbackground .basarcontent{
  margin:0 2em;
}

.darkbackground a, 
.darkbackground a:visited, 
.darkbackground a.external{ 
  color:#cdcdcd; 
  text-decoration:underline; 
  font-weight:bold;
}
.darkbackground h3{ 
  color:#f7f3ea;
}
#mpfoot{
  text-align:center;
  clear:both;
  width:calc(100% - 12px)
}

@media(max-width:697px)
{
  .darkbackground .basartop img{
    width:341px;
    height:216px;
  }
  .darkbackground .basarbottom img{
    width:341px;
    height:88px;
  }
  .darkbackground{
    width:calc(100% - 4px);
    min-width:341px;
  }
  #mpdates,
  #mpbiblio,
  #mplinks,
  #mpintro,
  #mpadaption,
  #mpintro,
  #mpcalink{
    width:calc(100% - 10px);
    min-width:340px;
  }
  .basarbottom img,
  .basartop img{
    margin:0 calc(50% - 170px);
  }
  #mptopleftright{
   float:left; 
   width:calc(50% - 11px);
   min-width:160px;
  }
  #mpindex,
  #mpcalendar{
  width:100%;
  }
  .mplinkimg img{
  width:60%;
  height:60%;
  }
}

@media (min-width:698px) and (max-width:834px)
{
  .darkbackground{
    width:341px;
    padding:0px;
  }
  .darkbackground .basartop img{
    width:341px;
    height:216px;
  }
  .darkbackground .basarbottom img{
    width:341px;
    height:88px;
  }
  #mptopleftright{
   float:left; 
   width:calc(100% - 360px);
   min-width:141px;
  }
  #mpintro{
   width:calc(100% - 10px);
  }
  #mpbiblio, #mpadaption,
  #mpdates, #mplinks{
  width:calc(100% - 12px);
  }
  #mpindex, #mpcalendar
  {
  width:calc(100% - 2px);
  }
}

@media (min-width:835px) and (max-width:1235px)
{
  .darkbackground{
    width:calc(100% - 12px);
    text-align:justify;
  }
  .darkbackground .basartop img,
  .darkbackground .basarbottom img{
    margin:0px calc(50% - 300px);
  }
  #mptopleftright{
  display:none;
  }
  #mpbiblio, #mpadaption,
  #mplinks{
  width:calc(100% - 12px);
  }
  #mpdates, 
  #mpcalink{
  width:calc(50% - 12px);
  }
  
  #mpcalendar,
  #mpindex{
  width:calc(100%);
  }
  
}
@media (min-width:1235px) and (max-width:1521px)
{
  .darkbackground{
    width:630px;
    text-align:justify;
  }
  .darkbackground .basartop img,
  .darkbackground .basarbottom img{
    margin:0px calc(50% - 300px);
  }
  #mptopleftright{
  display:none;
  }
  
  #mpbiblio, #mpintro{
    width:calc(100% - 652px);
  }
  
  #mpintro img{
    width:78%;
    height:78%;
    float:right;
  }
  #mpadaption, #mpcalink{
    clear:both;
  }
  #mplinks,
  #mpdates, #mpcalink,
  #mpadaption{
  width:calc(50% - 12px);
  }
  #mpcalendar,
  #mpindex{
  width:100%;
  }
}
@media (min-width:1522px)
{
  .darkbackground .basartop img,
  .darkbackground .basarbottom img{
    margin:0px calc(50% - 300px);
  }
    #mptopleftright{
    width:calc(100% - 851px);
    max-width:calc(50% - 332px);
  }
  
  #mpintro, #mpbiblio{
    width:calc(100% - 652px);
  }
  #mpadaption,
  #links{
  clear:both;
  }
  #mpdates,
  #mpadaption,
  #mpcalink,
  #mplinks{
  width:calc(50% - 12px);
  }
  
  #mpcalendar,
  #mpindex{
  width:100%;
  }
  #mpcalink,
  #mplinks{
  float:right;
  }
}