Действия

Widget

Порталы: различия между версиями

Материал из ВикиВоины
 
(не показаны 2 промежуточные версии этого же участника)
Строка 156: Строка 156:
 
  font-weight: bold;
 
  font-weight: bold;
 
  margin-top: 5px;
 
  margin-top: 5px;
 +
margin-bottom: -10px;
 +
 
}
 
}
  
Строка 418: Строка 420:
 
.portals-friends__card {
 
.portals-friends__card {
 
   font-size: 0.55em;
 
   font-size: 0.55em;
 +
}
 +
 +
.portal-card__title {
 +
    font-size: 0.8em;
 
}
 
}
 
.period_title {
 
.period_title {
Строка 434: Строка 440:
 
bottom: 0;
 
bottom: 0;
 
opacity: 1;
 
opacity: 1;
 +
                max-height: 70px;
 +
                overflow-y: auto;
 
}
 
}
 
 
Строка 489: Строка 497:
 
}
 
}
  
 +
.geo-portal {
 +
  display: inline-block;
 +
}
  
 +
.category-message {
 +
    height: auto!important;
 +
}
  
 
}
 
}
 
</style>
 
</style>
 
</div>
 
</div>

Текущая версия на 21:34, 30 августа 2024

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> <script> $('.portal-carousel').slick({ 

 slidesToShow: 4,
 slidesToScroll: 1,
 infinite: true,
 arrows: true,
prevArrow: '
', nextArrow: '
', 
 responsive: [
   {
     breakpoint: 1300,
     settings: {
       slidesToShow: 3,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 1000,
     settings: {
       slidesToShow: 2,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 800,
     settings: {
       slidesToShow: 1,
       slidesToScroll: 1
     }
   }
 ]

});

/* Слайдер галерея*/ $('.gallery-slider').slick({ 

 dots: false,
 infinite: true,
 speed: 500,
 fade: true,
 cssEase: 'linear',
 arrows: false,
 asNavFor: '.gallery-slider-nav',

});

$('.gallery-slider-nav').slick({ 

 infinite: true,
 slidesToShow: 5,
 slidesToScroll: 1,
 asNavFor: '.gallery-slider',
 dots: false,
 centerMode: true,
 focusOnSelect: true,
 arrows: true,
prevArrow: '
', nextArrow: '
', 
 responsive: [
   {
     breakpoint: 1200,
     settings: {
       slidesToShow: 4,
     }
   },
   {
     breakpoint: 992,
     settings: {
       slidesToShow: 3,
     }
   }
 ]

});


/* Слайдер сликовский на страницах порталов внизу*/ $('.friends-carousel').slick({ 

 slidesToShow: 5,
 slidesToScroll: 1,
 infinite: true,
 arrows: true,
prevArrow: '
', nextArrow: '
', 
 responsive: [
   {
     breakpoint: 1300,
     settings: {
       slidesToShow: 4,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 600,
     settings: {
       slidesToShow: 3,
       slidesToScroll: 1
     }
   }
 ]

});

$(document).ready(function() { 

 $(".portals-friends__card_img").mouseenter(function() {
   $(this).addClass("rotate");
 }).mouseleave(function() {
   $(this).removeClass("rotate");
 });

}); </script> <style> .sections_title { width: 100%; font-size: 25px; 

       font-weight: bold;

padding: 5px; margin-top: 20px; margin-bottom: 20px; text-align: center; }

.portal-carousel { 

   width: 91%;
   margin-right: auto;
   margin-left: auto;

}

.portal-card { 

color: #fff;
height: 450px;
padding: 15px;
text-align: center;
margin-left: 15px;
margin-right: 15px;
outline: none;
display: flex !important;
flex-direction: column;
align-items: center;

}

.portal-card__text { margin-top: 5px; 

       font-size: 0.9em;
       padding: 5px;
       overflow-y: auto;

}

.portal-card__text a { text-decoration: none; transition: all 0.2s; }

.portal-card__title { 

font-weight: bold;
margin-top: 5px;
margin-bottom: -10px;

}

.portal-card img { 

   width: 100%;
   height: 200px;
   object-fit: cover;

}

.slider-arrow { 

 position: absolute;
 top: 38%;
 height: 60px;
 width: 60px;
 padding: 10px;
 z-index: 1;
 border-radius: 50%;

}

.slider-arrow:hover { 

 opacity: 70%;

}

.slider-arrow_prod_right, .slider-arrow_gallery_right { 

 right: -3em;
 background: url("https://wikiwarriors.org/images/Arrow-right.png") center no-repeat;

}

.slider-arrow_prod_left, .slider-arrow_gallery_left { 

 left: -3em;
 background: url("https://wikiwarriors.org/images/Arrow-left.png") center no-repeat;

}

.slider-arrow:hover { 

 cursor: pointer;

}

.period_title { 

 padding: 5px;
 font-size: 1.3em;
 margin-bottom: 10px;

}

.period_title span { 

 color: #fff;

}

.warriors-cards-wrap { 

   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-content: center;
   justify-content: space-around;
   align-items: center;

}

.warriors-card { 

 border-radius: 5%;
 height: 110px;
 width: 140px;
 margin-bottom: 15px;
 position: relative;
 z-index: 0;
 transition: 0.2s all ease;
 }

.warriors-card:hover { 

 transform: scale3d(1.1, 1.1, 1.1);
 }

.warriors-card img { 

 margin: 0;
 width: 100%; 
 height: 100%; 
 vertical-align: bottom;
 object-fit: cover;
 object-position: top;
 }

.warriors-card-descr { 

 color: #fff;
 font-size: 0.8em;
 background-color: #000;
 border-radius: 0 5px 0 3px;
 padding: 4px;
 line-height: 1;
 position: absolute;
 z-index: 1;
 left: 0;
 bottom: -1px;
 }

.gallery-slider { 

   width: 90%;
   margin: auto;

}

.gallery-img { 

 width: auto!important;
 height: 550px!important;
 position: relative;
 margin-bottom: 0;

}

.gallery-wrap { height: 550px; 

   text-align: center;
   margin: auto;
   outline: none;
   display: flex !important;
   justify-content: space-around;
   align-items: center;

}

.gallery-img-wrap { position: relative; height: 500px; }

.gallery-descr { 

   opacity: 0;
   position: absolute;
   font-size: 1em;
   direction: ltr;
   padding: 10px;
   text-align: center;
   bottom: -50px;
   height: auto;
   width: 100%;
   background: rgba(0, 0, 0, 0.6);
   color: white;
   transition: all 0.2s ease;

}

.gallery-wrap:hover .gallery-descr { opacity: 1; bottom: -25px; }

.gallery-slider-nav { width: 90%; 

   margin: 20px auto;

}

.gallery-image-nav { max-width: 12rem; 

 max-height: 7.8rem;
 margin-left: 0.5rem;
 margin-right: 0.5rem;

}

.gallery-wrap-nav { height: 100px; 

   padding: 0;

outline: none; 

 -webkit-filter: brightness(40%);
         filter: brightness(40%);

}

.slick-current { 

 -webkit-filter: none !important;
 filter: none !important;

}

.gallery-image-nav img { 

 width: 100%;
 object-fit: cover;
 height: 7.8rem;

}

.slider-arrow_gallery { 

   height: 100%;
   top: 0;
   border-radius: 0;

}

/* Карточки дружественных порталов */ .friends-carousel { 

  width: 91%;
   margin-right: auto;
   margin-left: auto;

}

.portals-friends__card, .portals-collections__card { 

 text-align: center;
 padding: 10px;
 display: -webkit-box!important;
 display: -ms-flexbox!important;
 display: flex!important;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;

}

.portals-friends__card:focus { 

 outline: none;

}

.portals-friends__card .portal-card__img { 

 height: 140px;

}

.portals-friends__card_img { 

 margin-bottom: 5px;

}

.portals-friends__card a, .portals-collections__card a { font-size: 1.7em; text-decoration: none; transition: all 0.2s; }

.rotate { 

 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 -webkit-transition: -webkit-transform 0.5s ease;
 transition: transform 0.5s ease;

}

.mobile { 

 display: none;

}

.portal-collections-cards-wrap { 

   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-content: center;
   justify-content: space-around;
   align-items: center;

}

.portal-card__img_small { 

   font-size: 0.6em;

}

.portals-collections__card { 

    width: 150px;

}

.toc { 

display: none!important;

}


@media only screen and (max-width:640px) { .slider-arrow_prod_right { 

 right: -2em;

}

.slider-arrow_prod_left { 

 left: -2em;

} .portal-card__text { 

  font-size: 0.75em;

} .warriors-card-descr { 

  font-size: 0.6em;

} .portals-friends__card { 

 font-size: 0.55em;

}

.portal-card__title { 

   font-size: 0.8em;

} .period_title { text-align: center; } .gallery-wrap { 

   height: 280px;

} .gallery-slider { width: 100%; } .gallery-descr { font-size: 0.6em; padding: 5px; left: 0; bottom: 0; opacity: 1; 

               max-height: 70px;
               overflow-y: auto;

}

.gallery-img { 

   width: auto!important;
   max-height: 280px!important;

} .gallery-wrap-nav { 

      height: 45px;

} .gallery-image-nav { 

   height: 3.8rem;

} .gallery-image-nav img { 

   width: 100%;

height: 2.8rem; } .gallery-img-wrap { position: initial; height: 280px; } .slider-arrow_gallery { 

   height: 110%;
   top: -2px;

} 

   .friends-carousel {
   height: 100px;

}

.slider-arrow_gallery_right { 

 right: -2.2em;

}

.slider-arrow_gallery_left { 

 left: -2.2em;

}

.gallery-img { 

 object-fit: cover;

} 

.nomobile {
 display: none;

} 

.mobile {
 display: inline;

}

.friends-carousel { 

margin-bottom: 40px;

}

.portals-friends__card .portal-card__img { 

 height: 90px;

}

.geo-portal { 

 display: inline-block;

}

.category-message { 

   height: auto!important;

}

} </style>

Источник — https://wikiwarriors.org/mediawiki/index.php?title=Widget:Порталы&oldid=431687