8,957
edits
No edit summary |
No edit summary |
||
(10 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.mw-kartographer-map, | |||
. | .mw-kartographer-map .leaflet-container { | ||
height: 400px !important; | |||
background: | } | ||
box-shadow: none; | |||
.infobox-venue { | |||
width: 320px; | |||
border: 1px solid #3a0a0a; | |||
background: #0f0f0f; | |||
color: #eee; | |||
font-size: 92%; | |||
line-height: 1.45; | |||
border-radius: 10px; | |||
overflow: hidden; | |||
box-shadow: 0 0 0 1px #5b1212 inset, 0 6px 18px rgba(0,0,0,.35); | |||
} | |||
.infobox-venue > caption, | |||
.infobox-venue > tbody > tr:first-child > th[colspan="2"], | |||
.infobox-venue > .infobox-title { | |||
display: none; | |||
} | } | ||
.infobox-venue > .ib-title { | |||
. | font-weight: 700; | ||
} | } | ||
.infobox-venue .ib-image { | |||
. | padding: 0; | ||
background: #1a0b0b; | |||
} | |||
.infobox-venue .ib-img { | |||
display: block; | display: block; | ||
width: 100%; | |||
border- | height: auto; | ||
border-bottom: 1px solid #4a1111; | |||
border- | } | ||
.infobox-venue .ib-caption { | |||
border-bottom: | font-size: 85%; | ||
color: #ccc; | |||
padding: .4em .8em; | |||
border-bottom: 1px solid #311010; | |||
background: #130505; | |||
} | |||
.infobox-venue th { | |||
text-align: left; | |||
vertical-align: top; | |||
width: 40%; | |||
white-space: nowrap; | |||
padding: .5em .7em; | |||
color: #ffd4d4; | |||
background: #170909; | |||
border-bottom: 1px solid #2d0e0e; | |||
} | |||
.infobox-venue td { | |||
padding: .5em .7em; | |||
border-bottom: 1px solid #231010; | |||
vertical-align: top; | |||
} | |||
.infobox-venue .ib-note { | |||
opacity: .8; | |||
font-style: italic; | |||
font-size: 90%; | |||
} | } | ||
.infobox-venue .ib-map { | |||
. | padding: 0; | ||
border-top: 1px solid #2d0e0e; | |||
background: #0f0f0f; | |||
} | } | ||
.image- | |||
.image-frame2 { | |||
display: inline-block; | |||
border: none; | |||
border-radius: 18px; | |||
overflow: hidden; | |||
box-shadow: 0 3px 16px rgba(70,15,25,0.09); | |||
margin: 8px; | |||
background: none; | |||
} | |||
.framed-img2, .image-frame2 img { | |||
display: block; | |||
width: 206px; | |||
height: 206px; | |||
border-radius: 0; | |||
border-left: 11px solid #c72a37; | |||
border-right: 11px solid #c72a37; | |||
border-top: 6px solid #c72a37; | |||
border-bottom: none; | |||
box-sizing: border-box; | |||
margin: 0 auto; | |||
} | |||
.image-caption2 { | |||
background: #181217; | background: #181217; | ||
color: #e0a6b4; | color: #e0a6b4; | ||
border-bottom: 6px solid #c72a37; | border-bottom: 6px solid #c72a37; | ||
border-left: | border-left: 11px solid #c72a37; | ||
border-right: | border-right: 11px solid #c72a37; | ||
border-radius: 0 0 | border-radius: 0 0 18px 18px; | ||
font-size: 1. | font-size: 1.11em; | ||
padding: | padding: 10px 0 7px 0; | ||
margin: 0; | margin: 0; | ||
font-family: 'Segoe UI', 'Arial', sans-serif; | font-family: 'Segoe UI', 'Arial', sans-serif; | ||
letter-spacing: .02em; | letter-spacing: .02em; | ||
width: 206px; | |||
box-sizing: border-box; | |||
text-align: center; | |||
} | } | ||
Line 136: | Line 202: | ||
display: inline-block; /* Для корректного центрирования и отображения */ | display: inline-block; /* Для корректного центрирования и отображения */ | ||
text-align: center; /* Центрирование подписи */ | text-align: center; /* Центрирование подписи */ | ||
margin: | margin: 10px; /* Отступ для визуального разделения */ | ||
vertical-align: top; /* Выравнивание по верхнему краю | padding: 10px 10px 0; /* Уменьшен нижний отступ, чтобы подпись была ближе */ | ||
vertical-align: top; /* Выравнивание по верхнему краю */ | |||
opacity: 0; /* Изначально невидимый */ | opacity: 0; /* Изначально невидимый */ | ||
animation: fadeIn 1s ease forwards; /* Анимация появления */ | animation: fadeIn 1s ease forwards; /* Анимация появления */ | ||
box-sizing: border-box; /* Учитывает рамку и отступы в размерах */ | |||
} | } | ||
Line 158: | Line 226: | ||
border-style: solid; /* Тип рамки */ | border-style: solid; /* Тип рамки */ | ||
border-color: #D02019; /* Красная рамка */ | border-color: #D02019; /* Красная рамка */ | ||
border-width: | border-width: 20px 40px; /* Верх/низ: 20px, лево/право: 40px */ | ||
display: block; /* Убирает лишние отступы под изображением */ | display: block; /* Убирает лишние отступы под изображением */ | ||
width: | max-width: 300px; /* Увеличенная максимальная ширина изображения */ | ||
height: | max-height: 450px; /* Увеличенная максимальная высота изображения */ | ||
object-fit: | height: auto; /* Сохраняет пропорции изображения */ | ||
object-fit: contain; /* Изображение не обрезается, а вписывается целиком */ | |||
box-sizing: border-box; /* Рамка включается в размеры изображения */ | |||
transition: all 0.3s ease; /* Плавный переход для всех изменений */ | transition: all 0.3s ease; /* Плавный переход для всех изменений */ | ||
} | } | ||
Line 168: | Line 238: | ||
/* Эффект при наведении */ | /* Эффект при наведении */ | ||
.photo-frame img:hover { | .photo-frame img:hover { | ||
border-width: | border-width: 23px 47px; /* Увеличиваем рамку при наведении */ | ||
transform: scale(1.05); /* Увеличение изображения на 5% */ | transform: scale(1.05); /* Увеличение изображения на 5% */ | ||
} | } | ||
/* Стиль для подписи */ | |||
.photo-frame .caption { | |||
margin-top: 5px; /* Минимальный отступ сверху для подписи */ | |||
font-size: 14px; /* Размер шрифта подписи */ | |||
color: #333; /* Цвет текста подписи */ | |||
line-height: 1.2; /* Межстрочный интервал для компактности */ | |||
} | |||
/* Media */ | /* Media */ |