MediaWiki:Common.css: mudanças entre as edições

Ir para navegação Ir para pesquisar
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 579: Linha 579:
/* Tests */
/* Tests */


@baseBg: #ececec;
.slideshow {
@baseTxt: #3f3739;
width: 100%;
@hoverColor: #5fd8dd;
height: 360px;
body{
position: relative;
  background-color: @baseBg;
text-align: center;
  color: @baseTxt;
line-height: 750px;
padding-bottom: 30px;
}
}
a{
.slideshow--item {
  color: @baseTxt;
width: 100%;
   text-decoration: none;
height: 400px;
line-height: 1.5;
position: absolute;
top: 0;
visibility: hidden;
    background-repeat:none;
   background-size:cover;
}
}
 
.one{
.slideshow{
background-image:url(http://lorempixel.com/640/360/sports/1);
  position: relative;
  width: 300px;
  height: 300px;
  margin: 20px auto 0px auto;
  text-align: center;
}
}
.slide{
.two{
  position: absolute;
background-image:url(http://lorempixel.com/640/360/sports/2);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
}
 
.three{
.overlay{
background-image:url(http://lorempixel.com/640/360/sports/3);
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
}
}
.overlay-shadow{
.four{
  box-shadow: inset 0px 0px 10px #000;
background-image:url(http://lorempixel.com/640/360/people/3);
  opacity: 0.6;
}
}
.overlay-highlight{
.slideshow--bullet:checked + .slideshow--item {
  background: -webkit-radial-gradient(30% 30%, closest-corner, #fff, #2F2727);
visibility: visible;
  background: -moz-radial-gradient(30% 30%, closest-corner, #fff, #2F2727);
  background: -ms-radial-gradient(30% 30%, closest-corner, #fff, #2F2727);
  opacity: 0.4;
}
}
.active{
.slideshow--nav{
  opacity: 1;
position: absolute;
top: 0;
bottom: 0;
width: 50%;
display: none;
z-index: 88;
cursor: pointer;
color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
 
.slideshow--nav:after {
.slide img.horizontal{
display: block;
  max-height: 100%;
content: '\25B6';
  width: auto;
font-size: 2em;
color: grey;
position: absolute;
top: 50%;
right: 10px;
margin-top: -.5em;
}
}
.slide img.vertical{
.slideshow--nav-previous {
  max-width: 100%;
left: 0;
  height: auto;
display: block;
}
}
.slideshow-nav{
.slideshow--nav-previous:after {
  width: 500px;
-webkit-transform: scaleX(-1);
  margin: -175px auto 0 auto;
-moz-transform: scaleX(-1);
  padding: 10px;
transform: scaleX(-1);
  text-align: center;
right: auto;
  overflow: auto;
left: 10px;
}
}
.nav-link{
.slideshow--nav-next {
  transition: color 0.25s linear;
left: 50%;
  padding: 0px 5px;
display: block;
}
}
.nav-link:hover{
.slideshow--bullet {
  color: #222;
font-size: .75em;
width: 1em;
height: 1em;
display: inline-block;
position: relative;
z-index: 99;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #ccc;
border-radius: 1em;
transition: .3s ease-out background,
.3s ease-out transform;
}
}
.nav-link em{
.slideshow--bullet:checked {
 
background: #999;
}
outline: none;
.previous{
-webkit-transform: scale(1.3);
  float: left;
-moz-transform: scale(1.3);
}
transform: scale(1.3);
 
.next{
  float: right;
}
}

Menu de navegação