8,959
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| (18 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.mw-kartographer-map, | |||
.mw-kartographer-map .leaflet-container { | |||
height: 400px !important; | |||
} | |||
.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; | |||
width: 100%; | |||
height: auto; | |||
border-bottom: 1px solid #4a1111; | |||
} | |||
.infobox-venue .ib-caption { | |||
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-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; | |||
color: #e0a6b4; | |||
border-bottom: 6px solid #c72a37; | |||
border-left: 11px solid #c72a37; | |||
border-right: 11px solid #c72a37; | |||
border-radius: 0 0 18px 18px; | |||
font-size: 1.11em; | |||
padding: 10px 0 7px 0; | |||
margin: 0; | |||
font-family: 'Segoe UI', 'Arial', sans-serif; | |||
letter-spacing: .02em; | |||
width: 206px; | |||
box-sizing: border-box; | |||
text-align: center; | |||
} | |||
| Line 83: | Line 198: | ||
/*photo frames */ | /*photo frames */ | ||
/* Стиль для контейнера изображения с рамкой и подписью */ | |||
.photo-frame { | .photo-frame { | ||
display: inline-block; | display: inline-block; /* Для корректного центрирования и отображения */ | ||
text-align: center; | text-align: center; /* Центрирование подписи */ | ||
margin: | margin: 10px; /* Отступ для визуального разделения */ | ||
vertical-align: top; | padding: 10px 10px 0; /* Уменьшен нижний отступ, чтобы подпись была ближе */ | ||
opacity: 0; | vertical-align: top; /* Выравнивание по верхнему краю */ | ||
animation: fadeIn 1s ease forwards; | opacity: 0; /* Изначально невидимый */ | ||
animation: fadeIn 1s ease forwards; /* Анимация появления */ | |||
box-sizing: border-box; /* Учитывает рамку и отступы в размерах */ | |||
} | } | ||
/* Анимация появления */ | |||
@keyframes fadeIn { | |||
from { | |||
opacity: 0; | |||
transform: translateY(10px); /* Легкий сдвиг вниз */ | |||
} | |||
to { | |||
opacity: 1; | |||
transform: translateY(0); | |||
} | |||
} | } | ||
.photo-border: | /* Стиль для самой фотографии */ | ||
border-width: | .photo-frame img { | ||
box- | border-style: solid; /* Тип рамки */ | ||
border-color: #D02019; /* Красная рамка */ | |||
border-width: 20px 40px; /* Верх/низ: 20px, лево/право: 40px */ | |||
display: block; /* Убирает лишние отступы под изображением */ | |||
max-width: 300px; /* Увеличенная максимальная ширина изображения */ | |||
max-height: 450px; /* Увеличенная максимальная высота изображения */ | |||
height: auto; /* Сохраняет пропорции изображения */ | |||
object-fit: contain; /* Изображение не обрезается, а вписывается целиком */ | |||
box-sizing: border-box; /* Рамка включается в размеры изображения */ | |||
transition: all 0.3s ease; /* Плавный переход для всех изменений */ | |||
} | } | ||
.photo-frame img { | /* Эффект при наведении */ | ||
.photo-frame img:hover { | |||
border-width: 23px 47px; /* Увеличиваем рамку при наведении */ | |||
transform: scale(1.05); /* Увеличение изображения на 5% */ | |||
} | } | ||
/* Стиль для подписи */ | /* Стиль для подписи */ | ||
.photo-frame .caption { | .photo-frame .caption { | ||
margin-top: 5px; /* Минимальный отступ сверху для подписи */ | |||
font-size: 14px; /* Размер шрифта подписи */ | font-size: 14px; /* Размер шрифта подписи */ | ||
color: #333; /* Цвет текста подписи */ | |||
line-height: 1.2; /* Межстрочный интервал для компактности */ | |||
} | } | ||