8 500
edições
MediaWiki:Common.css (ver código-fonte)
Edição das 19h37min de 24 de julho de 2023
, 24 de julho de 2023sem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 800: | Linha 800: | ||
.carousel::after { | .carousel::after { | ||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E"); | background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E"); | ||
} | |||
body{ | |||
margin:0; | |||
padding:0; | |||
background-color:#34495e; | |||
} | |||
.slidershow{ | |||
width:700px; | |||
height:400px; | |||
overflow:hidden; | |||
} | |||
.middle{ | |||
position:absolute; | |||
top:50%; | |||
left:50%; | |||
transform:translate(-50%,-50%); | |||
} | |||
.navigation, .navigation_active{ | |||
position:absolute; | |||
bottom:20px; | |||
left:50%; | |||
transform:translateX(-50%); | |||
display:flex; | |||
} | |||
.bar{ | |||
width:50px; | |||
height:10px; | |||
border: 2px solid #fff; | |||
margin:6px; | |||
cursor:pointer; | |||
transition:.4s; | |||
background:transparent; | |||
} | |||
.bar:hover{ | |||
background:#fff; | |||
} | |||
input[name="r"]{ | |||
position:absolute; | |||
visibility:hidden; | |||
} | |||
.slides{ | |||
width:500%; | |||
height:100%; | |||
display:flex; | |||
} | |||
.slide{ | |||
width:20%; | |||
transition:.4s; | |||
} | |||
.slide img{ | |||
width:100%; | |||
height:100%; | |||
} | |||
#r1:checked ~ .s1{ | |||
margin-left:0; | |||
} | |||
#r2:checked ~ .s1{ | |||
margin-left:-20%; | |||
} | |||
#r3:checked ~ .s1{ | |||
margin-left:-40%; | |||
} | |||
#r4:checked ~ .s1{ | |||
margin-left:-60%; | |||
} | |||
#r5:checked ~ .s1{ | |||
margin-left:-80%; | |||
} | |||
#r1:checked ~ .navigation .bar:first-child, | |||
#r2:checked ~ .navigation .bar:nth-child(2), | |||
#r3:checked ~ .navigation .bar:nth-child(3), | |||
#r4:checked ~ .navigation .bar:nth-child(4), | |||
#r5:checked ~ .navigation .bar:nth-child(5){ | |||
background:#fff !important; | |||
} | |||
/*настройка переключения и положения для правой стрелки*/ | |||
#r1:checked ~ #controls .bar-arrow:nth-child(2), | |||
#r2:checked ~ #controls .bar-arrow:nth-child(3), | |||
#r3:checked ~ #controls .bar-arrow:nth-child(4), | |||
#r4:checked ~ #controls .bar-arrow:nth-child(5), | |||
#r5:checked ~ #controls .bar-arrow:nth-child(1){ | |||
content:''; | |||
width: 17px; | |||
height: 17px; | |||
position: absolute; | |||
right:1rem; | |||
border-top: 3px solid #ccc; | |||
border-right: 3px solid #ccc; | |||
transform: rotate(45deg); | |||
top:50%; | |||
} | |||
/*настройка переключения и положения для левой стрелки*/ | |||
#r1:checked ~ #controls .bar-arrow:nth-child(5), | |||
#r2:checked ~ #controls .bar-arrow:nth-child(1), | |||
#r3:checked ~ #controls .bar-arrow:nth-child(2), | |||
#r4:checked ~ #controls .bar-arrow:nth-child(3), | |||
#r5:checked ~ #controls .bar-arrow:nth-child(4){ | |||
content:''; | |||
width: 17px; | |||
height: 17px; | |||
position: absolute; | |||
left:1rem; | |||
border-top: 3px solid #ccc; | |||
border-right: 3px solid #ccc; | |||
transform: rotate(-135deg); | |||
top:50%; | |||
} | } | ||