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 578: Linha 578:


/* Tests */
/* Tests */
 
/*
* Slideshow
*/
.slideshow {
.slideshow {
width: 100%;
max-width:640px;
height: 360px;
margin:0 auto;
position: relative;
  position:relative;
text-align: center;
}
line-height: 750px;
.slide_frame{
padding-bottom: 30px;
  position:relative;
  padding-bottom:75%;
  width:100%;
  overflow:hidden;
  margin:0 auto
}
.slideshow-slides {
    height: 100%;
    position: absolute;
    width: 100%;
    /* left は JavaScript で指定 */
}
.slideshow-slides .slide {
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    /* left は JavaScript で指定 */
}
.slideshow-slides .slide img{
  width:100%;
}
}
.slideshow--item {
.slideshow-indicator {
width: 100%;
  display:flex;
height: 400px;
  justify-content:center;
line-height: 1.5;
   margin-top:10px;
position: absolute;
top: 0;
visibility: hidden;
    background-repeat:none;
   background-size:cover;
}
}
.one{
.slideshow-indicator span{
background-image:url(http://lorempixel.com/640/360/sports/1);
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: #ccc;
    cursor: pointer;
    margin:0 10px;
   
}
}
.two{
.slideshow-indicator span:first-child.active {
background-image:url(http://lorempixel.com/640/360/sports/2);
    cursor: default;
  background-color: #000;
}
}
.three{
.slideshow-indicator span.active {
background-image:url(http://lorempixel.com/640/360/sports/3);
    cursor: default;
  background-color: #000;
}
}
.four{
.slideshow-indicator span:before {
background-image:url(http://lorempixel.com/640/360/people/3);
    margin-left: -110px;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}
}
.slideshow--bullet:checked + .slideshow--item {
.slideshow-indicator span.active:before {
visibility: visible;
    margin-left: -130px;
}
}
.slideshow--nav{
 
position: absolute;
.slideshow-nav span{
top: 0;
    display: inline-block;
bottom: 0;
    padding: 0 0 0 16px;
width: 50%;
    color: #000;
display: none;
    vertical-align: middle;
z-index: 88;
    text-decoration: none;
cursor: pointer;
    font-size: 15px;
color: transparent;
    position: absolute;
-webkit-touch-callout: none;
    top: 50%;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
.slideshow--nav:after {
.slideshow-nav span:before,
display: block;
.slideshow-nav span:after {
content: '\25B6';
  position: absolute;
font-size: 2em;
    top: 0;
color: grey;
    bottom: 0;
position: absolute;
    left: 0;
top: 50%;
    margin: auto;
right: 10px;
    content: "";
margin-top: -.5em;
    vertical-align: middle;
}
}
.slideshow--nav-previous {
 
left: 0;
.slideshow-nav span.prev {
display: block;
  left:0;
}
}
.slideshow--nav-previous:after {
.slideshow-nav span.prev:before{
-webkit-transform: scaleX(-1);
    box-sizing: border-box;
-moz-transform: scaleX(-1);
    width: 50px;
transform: scaleX(-1);
    height: 50px;
right: auto;
    background: rgba(169, 169, 169, 0.59);
left: 10px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
}
.slideshow--nav-next {
.slideshow-nav span.prev:after{
left: 50%;
    width: 20px;
display: block;
    left: 125%;
    height: 20px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
 
 
.slideshow-nav span.next {
  right:0;
}
}
.slideshow--bullet {
.slideshow-nav span.next:before,
font-size: .75em;
.slideshow-nav span.next:after{
width: 1em;
  left:auto;
height: 1em;
  right:1px;
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;
}
}
.slideshow--bullet:checked {
.slideshow-nav span.next:before{
background: #999;
    box-sizing: border-box;
outline: none;
    width: 50px;
-webkit-transform: scale(1.3);
    height: 50px;
-moz-transform: scale(1.3);
    background: rgba(169, 169, 169, 0.59);
transform: scale(1.3);
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
}
.slideshow-nav span.next:after{
    width: 20px;
    right: 125%;
    height: 20px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45

Menu de navegação