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 {
max-width:640px;
margin:0 auto;
  position:relative;
}
.slide_frame{
  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-indicator {
  display:flex;
  justify-content:center;
  margin-top:10px;
}
.slideshow-indicator span{
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: #ccc;
    cursor: pointer;
    margin:0 10px;
   
}
.slideshow-indicator span:first-child.active {
    cursor: default;
  background-color: #000;
}
.slideshow-indicator span.active {
    cursor: default;
  background-color: #000;
}
.slideshow-indicator span:before {
    margin-left: -110px;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}
.slideshow-indicator span.active:before {
    margin-left: -130px;
}


.slideshow-nav span{
.slideshow-container {
    display: inline-block;
      display: block;
    padding: 0 0 0 16px;
      max-width: 400px;
    color: #000;
      position: relative;
    vertical-align: middle;
      margin: auto;
    text-decoration: none;
      overflow: hidden;
    font-size: 15px;
     }
    position: absolute;
    top: 50%;
}
.slideshow-nav span:before,
.slideshow-nav span:after {
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
     vertical-align: middle;
}


.slideshow-nav span.prev {
    .slide {
  left:0;
      display: block;
}
      position: absolute;
.slideshow-nav span.prev:before{
      width: 100%;
    box-sizing: border-box;
      height: 300px; /* Altura da imagem */
    width: 50px;
      opacity: 0;
    height: 50px;
      transition: opacity 1s;
    background: rgba(169, 169, 169, 0.59);
     }
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.slideshow-nav span.prev:after{
    width: 20px;
    left: 125%;
     height: 20px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}


    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }


.slideshow-nav span.next {
    /* Efeito de transição do slideshow */
  right:0;
    .slideshow-container .slide:first-child {
}
      animation: fade 6s infinite;
.slideshow-nav span.next:before,
    }
.slideshow-nav span.next:after{
 
  left:auto;
     @keyframes fade {
  right:1px;
      0%, 20% {
}
        opacity: 1;
.slideshow-nav span.next:before{
      }
     box-sizing: border-box;
      25%, 100% {
    width: 50px;
        opacity: 0;
    height: 50px;
      }
    background: rgba(169, 169, 169, 0.59);
     }
    -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