8 500
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 579: | Linha 579: | ||
/* Testes */ | /* Testes */ | ||
#slideshow-wrapper { | |||
display: grid; | |||
grid-template-columns: 15% 70% 15%; | |||
grid-template-rows: 5% 90% 5%; | |||
grid-column-gap: 1vw; | |||
grid-row-gap: 1vh; | |||
width: 95%; | |||
margin-left: auto; | |||
margin-right: auto; | |||
background-color: white; | |||
box-shadow: 0px 0px 20px 5px gray; | |||
} | |||
#slideshow { | |||
grid-column: 2; | |||
grid-row: 2; | |||
position: relative; | |||
margin-left: auto; | |||
margin-right: auto; | |||
width: 100%; | |||
. | height: 70vh; | ||
} | |||
#slideshow-nav-bars { | |||
grid-column: 2; | |||
grid-row: 2; | |||
height: 30px; | |||
position: relative; | |||
margin-left: auto; | |||
margin-right: auto; | |||
display: inline-block; | |||
background-color: rgba(0, 0, 0, 0.5); | |||
width: auto; | |||
padding-left: 10px; | |||
padding-right: 10px; | |||
top: 91%; | |||
} | |||
#slideshow-title { | |||
grid-column: 1; | |||
grid-row: 2; | |||
text-align: center; | |||
font-family: 'MS PGothic', Osaka, Arial, sans-serif; | |||
writing-mode: vertical-rl; | |||
text-orientation: mixed; | |||
font-size: xxx-large; | |||
} | |||
#titles { | |||
grid-column: 2; | |||
grid-row: 1; | |||
text-align: center; | |||
font-size: xx-large; | |||
font-family: 'MS PGothic', Osaka, Arial, sans-serif; | |||
width: 99.78%; | |||
height: 60px; | |||
} | |||
@keyframes slideInLeft { | |||
0% { | |||
transform: translateX(-50%); | |||
opacity: 0%; | |||
} | |||
100% { | |||
transform: translateX(0%); | |||
opacity: 100%; | |||
} | |||
} | |||
@keyframes slideInRight { | |||
0% { | |||
transform: translateX(50%); | |||
opacity: 0%; | |||
} | |||
100% { | |||
transform: translateX(0%); | |||
opacity: 100%; | |||
} | |||
} | |||
@keyframes slideOutLeft { | |||
0% { | |||
transform: translateX(0%); | |||
opacity: 100%; | |||
} | |||
100% { | |||
transform: translateX(-50%); | |||
opacity: 0%; | |||
} | |||
} | |||
@keyframes slideOutRight { | |||
0% { | |||
transform: translateX(0%); | |||
opacity: 100%; | |||
} | |||
100% { | |||
transform: translateX(50%); | |||
opacity: 0%; | |||
} | |||
} | |||
@keyframes hide { | |||
0% {display: none;} | |||
} | |||
.image-title { | |||
margin-top: 0%; | |||
height: 100%; | |||
position: relative; | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
.slide-in-from-left { | |||
animation: slideInLeft 0.5s linear; | |||
} | |||
.slide-in-from-right { | |||
animation: slideInRight 0.5s linear; | |||
} | |||
.slide-out-to-left { | |||
animation: slideOutLeft 0.5s linear; | |||
} | |||
.slide-out-to-right { | |||
animation: slideOutRight 0.5s linear; | |||
} | |||
.image { | |||
width: 100%; | |||
height: 100%; | |||
position: relative; | |||
margin-left: auto; | |||
margin-right: auto; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
background-size: contain; | |||
background-color: black; | |||
animation-name: fadein; | |||
animation-duration: 1s; | |||
animation-timing-function: linear; | |||
} | |||
@keyframes fadein { | |||
0% {opacity: 0.7;} | |||
100% {opacity: 1;} | |||
} | |||
.nav-arrow { | |||
color: white; | |||
position: absolute; | |||
top: 50%; | |||
z-index: 1; | |||
cursor: pointer; | |||
font-size: xx-large; | |||
} | |||
#prev { | |||
left: 1%; | |||
} | |||
#next { | |||
right: 1%; | |||
} | |||
.bar { | |||
position: relative; | |||
margin-left: auto; | |||
margin-right: auto; | |||
border-radius: 5%; | |||
height: 2px; | |||
width: 5vh; | |||
background-color: white; | |||
display: inline-block; | |||
} | |||
.active-bar { | |||
background-color: pink; | |||
} | |||
.show { | |||
display: block; | |||
} | |||
.hidden { | |||
display: none; | |||
} | |||
#image-one { | |||
background-color: pink; | |||
} | |||
#image-two { | |||
background-color: blue; | |||
} | |||
#image-three { | |||
background-color: green; | |||
} | |||
#image-four { | |||
background-color: purple; | |||
} | |||
#image-five { | |||
background-color: orange; | |||
} |