Mudanças entre as edições de "MediaWiki:Common.css"
De VRWiki
Linha 6: | Linha 6: | ||
} | } | ||
+ | |||
+ | |||
+ | ---------------SLIDER ABAIXO | ||
+ | |||
+ | |||
+ | .slider-holder | ||
+ | { | ||
+ | width: 800px; | ||
+ | height: 400px; | ||
+ | background-color: yellow; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | margin-top: 0px; | ||
+ | text-align: center; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .image-holder | ||
+ | { | ||
+ | width: 2400px; | ||
+ | background-color: red; | ||
+ | height: 400px; | ||
+ | clear: both; | ||
+ | position: relative; | ||
+ | |||
+ | -webkit-transition: left 2s; | ||
+ | -moz-transition: left 2s; | ||
+ | -o-transition: left 2s; | ||
+ | transition: left 2s; | ||
+ | } | ||
+ | |||
+ | .slider-image | ||
+ | { | ||
+ | float: left; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #slider-image-1:target ~ .image-holder | ||
+ | { | ||
+ | left: 0px; | ||
+ | } | ||
+ | |||
+ | #slider-image-2:target ~ .image-holder | ||
+ | { | ||
+ | left: -800px; | ||
+ | } | ||
+ | |||
+ | #slider-image-3:target ~ .image-holder | ||
+ | { | ||
+ | left: -1600px; | ||
+ | } | ||
+ | |||
+ | .button-holder | ||
+ | { | ||
+ | position: relative; | ||
+ | top: -20px; | ||
+ | } | ||
+ | |||
+ | .slider-change | ||
+ | { | ||
+ | display: inline-block; | ||
+ | height: 10px; | ||
+ | width: 10px; | ||
+ | border-radius: 5px; | ||
+ | background-color: brown; | ||
+ | } |
Edição das 15h07min de 12 de fevereiro de 2016
/** o código CSS colocado aqui será aplicado a todos os temas */ pre { white-space: pre-line; } ---------------SLIDER ABAIXO .slider-holder { width: 800px; height: 400px; background-color: yellow; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; overflow: hidden; } .image-holder { width: 2400px; background-color: red; height: 400px; clear: both; position: relative; -webkit-transition: left 2s; -moz-transition: left 2s; -o-transition: left 2s; transition: left 2s; } .slider-image { float: left; margin: 0px; padding: 0px; position: relative; } #slider-image-1:target ~ .image-holder { left: 0px; } #slider-image-2:target ~ .image-holder { left: -800px; } #slider-image-3:target ~ .image-holder { left: -1600px; } .button-holder { position: relative; top: -20px; } .slider-change { display: inline-block; height: 10px; width: 10px; border-radius: 5px; background-color: brown; }