Порталы
Материал из ВикиВоины
<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;
}
.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;
} .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; }
.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>