/**
* Icons CSS
*
* Contains:
* 1. Google Material Symbols (font-based icons)
* 2. Legacy SVG background icons
*
* Usage Material Icons:
* arrow_forward_ios
*
* Reference: https://fonts.google.com/icons
*/
/* ========================================
Google Material Symbols
========================================
Font loaded via in HTML , NOT via @import here.
This avoids render-blocking @import chain and allows preconnect.
See: objects.php, country_page.php, etc.
======================================== */
/* Base styles for Material Symbols */
.material-symbols-rounded {
font-family: 'Material Symbols Rounded';
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
vertical-align: middle;
user-select: none;
font-size: inherit;
}
/* Icon size modifiers */
.icon-xs {
font-size: 14px;
}
.icon-sm {
font-size: 18px;
}
.icon-md {
font-size: 24px;
}
.icon-lg {
font-size: 32px;
}
.icon-xl {
font-size: 48px;
}
/* Filled style modifier */
.icon-filled {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* ========================================
Legacy SVG Icons (background-image)
======================================== */
.icon-loc,
.icon-tiq,
.icon_air,
.icon-car,
.icon-transfer,
.add-photo-gallery,
.icon-baggage,
.icon-airports,
.icon-weather,
.icon-city,
.icon-route,
.icon-stat,
.icon-list,
.icon-map,
.icon-sun,
.icon-info,
.icon-email,
.icon-youtube,
.icon-photo,
.icon-loc-map,
.icon-comments,
.nearby-places,
.icon-info-details,
.icon-ticket,
.icon-bus,
.icon-car-ferry,
.icon-train,
.icon-ticket-01,
.icon-ferry,
.icon-car-00,
.icon-book,
.icon-gallery,
.icon-rent {
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
background-repeat: no-repeat;
background-size: contain;
outline-offset: 4px;
margin: 4px;
opacity: 0.4;
}
.ic-star-1,
.ic-star-2,
.ic-star-3,
.ic-star-4,
.ic-star-5,
.ic-quality-1,
.ic-quality-2,
.ic-quality-3,
.ic-quality-4,
.ic-quality-5,
.icon-city-nature,
.icon-location-compass {
height: 1em;
/* Задаем высоту */
display: inline-block;
text-align: center;
background-repeat: no-repeat;
background-size: 100%;
/* Масштабируем изображение */
background-image: url(/img/icon/star-5.svg);
outline-offset: 4px;
margin: 4px;
opacity: 1;
/* Устанавливаем полную непрозрачность */
}
.icon-comments-mini,
.icon-routes {
width: 1em;
height: 1em;
background-image: url(/img/icon/comment.svg);
opacity: 1;
display: inline-block;
background-repeat: no-repeat;
background-size: 100%;
margin: 0 6px -4px 0;
}
.icon-location-compass {
width: 180px;
height: 180px;
background-image: url(/img/icon/location-compass.svg);
}
.icon-city-nature {
width: 180px;
height: 180px;
background-image: url(/img/icon/city-nature.svg);
}
.icon-routes {
width: 2em;
height: 2em;
background-image: url(/img/icon/route-svg-0.svg);
}
.up-arrow {
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
background-repeat: no-repeat;
background-size: 100%;
/* Масштабируем изображение */
background-image: url(/img/icon/up-arrow.svg);
}
.ic-star-1 {
min-width: 1em;
background-image: url(/img/icon/star-1.svg);
}
.ic-star-2 {
min-width: 2em;
background-image: url(/img/icon/star-2.svg);
}
.ic-star-3 {
min-width: 3em;
background-image: url(/img/icon/star-3.svg);
}
.ic-star-4 {
min-width: 4em;
background-image: url(/img/icon/star-4.svg);
}
.ic-star-5 {
min-width: 5em;
background-image: url(/img/icon/star-5.svg);
}
.ic-quality-1 {
min-width: 1em;
background-image: url(/img/icon/quality-1.svg);
}
.ic-quality-2 {
min-width: 2em;
background-image: url(/img/icon/quality-2.svg);
}
.ic-quality-3 {
min-width: 3em;
background-image: url(/img/icon/quality-3.svg);
}
.ic-quality-4 {
min-width: 4em;
background-image: url(/img/icon/quality-4.svg);
}
.ic-quality-5 {
min-width: 5em;
background-image: url(/img/icon/quality-5.svg);
}
.icon-ticket-01 {
width: 1em;
height: 1em;
background-image: url(/img/icon/ticket-svg-01.svg);
opacity: 1;
transform: rotate(-45deg);
}
@keyframes swing {
0% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
.icon-rent {
width: 38px;
height: 38px;
background-image: url(/img/icon/rent-svg.svg);
opacity: 1;
margin: 0 auto;
animation: swing 5s ease-in-out infinite;
transform-origin: top center;
position: absolute;
right: 8px;
opacity: 0.7;
}
.icon-rent:hover {
animation-play-state: paused;
background-image: url(/img/icon/rent-svg-blue.svg);
opacity: 1;
}
.icon-gallery {
width: 170px;
height: 170px;
background-image: url(/img/icon/icon_gallery.svg);
opacity: 1;
margin: 0 auto;
}
.icon-book {
width: 130px;
height: 130px;
background-image: url(/img/icon/text-book-opened.svg);
opacity: 1;
margin: 0 auto;
}
.icon-car-00 {
width: 160px;
height: 160px;
background-image: url(/img/icon/car_00.svg);
opacity: 1;
margin: 0 auto;
}
.icon-ferry {
width: 160px;
height: 160px;
background-image: url(/img/icon/ferry-5.svg);
opacity: 1;
margin: 0 auto;
}
.icon-train {
width: 160px;
height: 160px;
background-image: url(/img/icon/train-svg.svg);
opacity: 1;
}
.icon-ticket {
width: 160px;
height: 160px;
background-image: url(/img/icon/ticket-svg.svg);
opacity: 1;
}
.icon-car-ferry {
width: 150px;
height: 150px;
background-image: url(/img/icon/car-ferry-svg.svg);
opacity: 1;
}
.icon-bus {
width: 160px;
height: 160px;
background-image: url(/img/icon/bus-icon-svg.svg);
opacity: 1;
}
.add-photo-gallery {
width: 160px;
height: 160px;
background-image: url(/img/icon/add-image.svg);
opacity: 1;
}
.nearby-places {
width: 160px;
height: 160px;
background-image: url(/img/icon/compass.svg);
opacity: 1;
}
.icon-info-details {
width: 140px;
height: 140px;
background-image: url(/img/icon/info-svg.svg);
opacity: 1;
}
.icon-loc {
background-image: url(/img/icon/location.svg);
outline: 2px solid #0488db;
border-radius: 50%;
}
.icon-loc-map {
width: 22px;
height: 22px;
background-image: url(/img/icon/location-1.svg);
}
.icon-tiq {
background-image: url(/img/icon/plane-ticket-travel.svg);
display: block;
opacity: 1;
}
.icon_air {
background-image: url(/img/icon/airport_00.svg);
width: 80px;
height: 80px;
}
.wr-icon {
display: flex;
justify-content: center;
align-items: center;
width: 216px;
/* 180px + 2 * 18px (padding) */
height: 216px;
/* 180px + 2 * 18px (padding) */
border-radius: 50%;
padding: 18px;
-webkit-box-shadow: 5px 5px 15px 6px rgba(0, 0, 0, 0.83);
box-shadow: 5px 5px 15px 6px rgba(0, 0, 0, 0.83);
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
}
.icon-comments {
width: 110px;
height: 110px;
background-image: url(/img/icon/comment.svg);
opacity: 1;
}
.icon-car {
width: 140px;
height: 140px;
background-image: url(/img/icon/car-svg.svg);
opacity: 1;
}
.icon-transfer {
width: 130px;
height: 130px;
background-image: url(/img/icon/taxi-driver.svg);
opacity: 1;
}
.icon-baggage {
width: 140px;
height: 140px;
background-image: url(/img/icon/luggage.svg);
opacity: 1;
}
.icon-airports {
width: 140px;
height: 140px;
background-image: url(/img/icon/airport-building.svg);
opacity: 1;
}
.icon-weather {
width: 140px;
height: 140px;
background-image: url(/img/icon/weather.svg);
opacity: 1;
}
.icon-city {
width: 140px;
height: 140px;
background-image: url(/img/icon/building-city.svg);
opacity: 1;
}
.icon-route {
width: 140px;
height: 140px;
background-image: url(/img/icon/route-svg.svg);
opacity: 1;
}
.icon-stat {
width: 140px;
height: 140px;
background-image: url(/img/icon/stats-growth.svg);
opacity: 1;
}
.icon-list {
width: 120px;
height: 120px;
background-image: url(/img/icon/list.svg);
opacity: 1;
}
.icon-map {
width: 120px;
height: 120px;
background-image: url(/img/icon/map-map-marker.svg);
opacity: 1;
}
.icon-sun {
width: 120px;
height: 120px;
background-image: url(/img/icon/sunset.svg);
opacity: 1;
}
.icon-info {
width: 120px;
height: 120px;
background-image: url(/img/icon/info.svg);
opacity: 1;
}
.ic-address {
display: inline-block;
width: 1em;
height: 1em;
background-image: url(/img/icon/address-location.svg);
background-size: cover;
opacity: 0.5;
margin-right: 6px;
}
.icon-email {
width: 140px;
height: 140px;
background-image: url(/img/icon/email.svg);
opacity: 1;
}
.icon-youtube {
width: 160px;
height: 160px;
background-image: url(/img/icon/youtube.svg);
opacity: 1;
}
.icon-photo {
width: 160px;
height: 160px;
background-image: url(/img/icon/photo_00.svg);
opacity: 1;
}
.nearby-hotels {
width: 140px;
height: 140px;
background-image: url(/img/icon/nearby-hotels.svg);
opacity: 1;
}
.wr-icon-registered {
text-align: center;
}
.icon-profile,
.icon-rating-star,
.icon-add-photo-gallery,
.icon-comment-add,
.icon-added-gallery {
width: 100px;
height: 100px;
background-size: contain;
/* Растягивает изображение так, чтобы оно полностью поместилось в контейнер */
background-repeat: no-repeat;
/* Отменяет повторение фона */
background-position: center;
/* Центрирует фон в контейнере */
background-image: url('/img/icon/user-plus.svg');
/* Указывает путь к изображению */
display: inline-block;
margin: 0 auto;
}
.icon-rating-star {
background-image: url('/img/icon/medal-star.svg');
}
.icon-add-photo-gallery {
background-image: url('/img/icon/element-plus.svg');
}
.icon-comment-add {
background-image: url('/img/icon/message.svg');
}
.icon-added-gallery {
background-image: url('/img/icon/gallery-tick.svg');
}