event_news/app/assets/stylesheets/event_news_front.css.scss

153 lines
2.6 KiB
SCSS
Raw Normal View History

2021-09-05 10:56:57 +00:00
.full-size-img img {
width: 100%;
}
.full-size-img {
width: 100%;
}
.s-annc__sub-img.pull-right {
margin-left: 2em;
}
.s-annc__sub-img.pull-left {
margin-right: 2em;
}
strong.carousel__description {
color: white;
}
@media (max-width: 767px){
.carousel_images{
width: 100%;
}
}
.carousel_img_item{
display: none;
float: left;
}
.controlplay {
position: absolute;
right: 1em;
top: 3%;
z-index: 200;
}
.controlplay a {
display: inline-block;
margin-right: 0.25em;
cursor: pointer;
padding: 5px 10px;
border: 1px solid rgba(255,255,255,0.5);
background: rgba(0,0,0,0.2);
}
.controlplay a i {
font-family: FontAwesome;
position: relative;
font-size: 1rem;
line-height: 1;
color: #FFF;
vertical-align: middle;
font-style: unset;
}
.controlplay .resume-slide i::before {
content: "\f04b";
}
.controlplay .pause-slide i::before {
content: "\f04c";
}
ul.button-mid .prev-button {
transition: 0.4s;
position: relative;
float: left;
left: 0.5rem;
width: 2.5rem;
height: 2.5rem;
font-size: 2.2rem;
color: #ffffff;
background: rgba(0,0,0,0.2);
text-align: center;
line-height: 2.5rem;
top: 50%;
position: absolute;
transform: translateY(-50%);
z-index: 999;
}
ul.button-mid .next-button {
float: right;
transition: 0.4s;
position: relative;
right: 0.5rem;
width: 2.5rem;
height: 2.5rem;
font-size: 2.2rem;
color: #fff;
background: rgba(0,0,0,0.2);
text-align: center;
line-height: 2.5rem;
top: 50%;
position: absolute;
transform: translateY(-50%);
z-index: 999;
}
.carousel_images_slide{
padding: 3em;
}
.carousel_img_item img{
cursor: pointer;
}
@media (max-width: 479px){
.carousel_img_item:nth-child(-n+1){
display: block;
width: 100%;
float: left;
}
.carousel_img_item{
width: 100%;
}
}
@media (min-width: 480px){
.carousel_img_item:nth-child(-n+2){
display: block;
width: 50%;
float: left;
}
.carousel_img_item{
width: 50%;
}
}
@media (min-width: 768px){
.carousel_img_item:nth-child(-n+3){
display: block;
width: 33%;
float: left;
}
.carousel_img_item{
width: 33%;
}
}
@media (min-width: 1280px){
.carousel_img_item:nth-child(-n+4){
display: block;
width: 25%;
float: left;
}
.carousel_img_item{
width: 25%;
}
}
.w-ba-banner .controlplay .resume-slide.active i{
color: #32D9C3;
}
.w-ba-banner .controlplay .pause-slide.active i{
color: #ff4500;
}
.w-ba-banner .controlplay{
width: auto;
}
.w-ba-banner .button-mid{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.next-button,.prev-button{
cursor: pointer;
}