8,957
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 83: | Line 83: | ||
/* Photo frames */ | /* Photo frames */ | ||
.photo-frame { | .photo-frame { | ||
display: inline-block; | display: inline-block; | ||
position: relative; | |||
margin: 18px 16px; | |||
padding: 0; | |||
transition: transform 0.33s cubic-bezier(.64,1.7,.56,.93), box-shadow 0.3s; | |||
opacity: 0; | |||
animation: photo-fadein 0.6s 0.2s forwards; | |||
} | |||
@keyframes photo-fadein { | |||
from { opacity: 0; transform: translateY(28px) scale(.98);} | |||
to { opacity: 1; transform: translateY(0) scale(1);} | |||
} | |||
.photo-frame .frame-border { | |||
position: relative; | |||
padding: 12px 32px 18px 32px; /* top, right, bottom, left */ | |||
border-style: solid; | |||
border-width: 8px 22px 10px 22px; /* верх/право/низ/лево */ | |||
border-color: #C71F31; /* светло-кроваво-красный */ | |||
border-radius: 18px; | |||
background: #fff; | |||
box-shadow: 0 2px 12px rgba(120,20,40,0.07); | |||
transition: box-shadow 0.3s, border-color 0.3s; | |||
z-index: 1; | |||
} | } | ||
.photo-frame:hover .frame-border { | |||
box-shadow: 0 6px 28px rgba(120,20,40,0.18), 0 0 0 4px #c71f3129; | |||
border-color: #E13349; | |||
transform: scale(1.025) translateY(-8px); | |||
} | } | ||
.photo-frame img, | |||
.photo-frame- | .photo-frame .mw-file-element { | ||
display: block; | display: block; | ||
width: | max-width: 220px; | ||
height: | max-height: 310px; | ||
margin: 0 auto; | margin: 0 auto; | ||
border-radius: 9px; | |||
border- | box-shadow: 0 2px 10px rgba(90,13,21,0.06); | ||
transition: filter 0.2s; | |||
transition: | |||
} | } | ||
.photo-frame:hover img { | |||
.photo-frame | filter: brightness(1.03) contrast(1.08); | ||
} | } | ||
.photo-frame .caption { | .photo-frame .caption { | ||
margin-top: | text-align: center; | ||
color: #96101e; | |||
color: | font-weight: 500; | ||
font-size: 1.02em; | |||
letter-spacing: 0.04em; | |||
margin-top: 10px; | |||
margin-bottom: 2px; | |||
text-shadow: 0 1px 0 #fff6, 0 1px 4px #c01a2231; | |||
transition: color 0.2s; | |||
user-select: text; | |||
} | } | ||