MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Line 1: Line 1:
/* --- ImageFrame Styles --- */
.image-frame {
.image-frame {
     display: inline-block;
     display: inline-block;
    padding: 12px 24px 8px 24px; /* Тонкие верх/низ, широкие бока */
     border-left: 12px solid #c72a37;
     border-left: 16px solid #c72a37;   /* Боковые стороны широкие */
     border-right: 12px solid #c72a37;
     border-right: 16px solid #c72a37;
     border-top: 5px solid #c72a37;
     border-top: 6px solid #d7484b;    /* Верх и низ тоньше, чуть светлее */
     border-bottom: none;
     border-bottom: 6px solid #d7484b;
     border-radius: 22px 22px 0 0;
     background: #181217;
     background: none;
     border-radius: 24px;
     margin: 16px auto 0 auto;
     box-shadow: 0 4px 20px rgba(50,20,30,0.07);
     box-shadow: 0 3px 16px rgba(70,15,25,0.06);
    margin: 16px auto;
     transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s cubic-bezier(.22,1,.36,1), opacity 0.7s cubic-bezier(.22,1,.36,1);
     transition:
      transform 0.4s cubic-bezier(.22,1,.36,1),
      box-shadow 0.4s cubic-bezier(.22,1,.36,1),
      opacity 0.8s cubic-bezier(.22,1,.36,1);
     opacity: 0;
     opacity: 0;
     transform: scale(0.96) translateY(40px);
     transform: scale(0.96) translateY(24px);
     animation: frameIn 1s cubic-bezier(.22,1,.36,1) forwards;
     animation: frameIn 0.9s cubic-bezier(.22,1,.36,1) forwards;
    text-align: center;
     max-width: 330px;
     max-width: 370px;
}
}
@keyframes frameIn {
@keyframes frameIn {
   to {
   to {
Line 27: Line 22:
   }
   }
}
}
.image-frame:hover, .image-frame:focus-within {
.image-frame:hover, .image-frame:focus-within {
     transform: scale(1.06) translateY(-8px);
     transform: scale(1.05) translateY(-3px);
     box-shadow: 0 12px 32px rgba(150,20,20,0.18), 0 2px 14px rgba(0,0,0,0.09);
     box-shadow: 0 9px 24px rgba(140,20,30,0.12), 0 2px 9px rgba(0,0,0,0.10);
     z-index: 3;
     z-index: 2;
}
}


/* Картинка внутри рамки */
/* Фото */
.framed-img, .image-frame img {
.framed-img, .image-frame img {
     display: block;
     display: block;
     max-width: 98%;
     max-width: 100%;
     margin: 0 auto 6px auto;
     margin: 0;
     border-radius: 14px;
     border-radius: 12px 12px 0 0;
     box-shadow: 0 1.5px 5px rgba(0,0,0,0.06);
     box-shadow: none;
}
}


/* Подпись */
/* Чёрная подложка для подписи */
.image-caption {
.image-caption {
     font-size: 1.11em;
    background: #181217;
     margin-top: 6px;
    border-bottom: 6px solid #c72a37;
    border-left: 12px solid #c72a37;
    border-right: 12px solid #c72a37;
    border-radius: 0 0 22px 22px;
     font-size: 1.10em;
     margin: 0;
    padding: 10px 0 7px 0;
     color: #e0a6b4;
     color: #e0a6b4;
     letter-spacing: .02em;
     letter-spacing: .02em;
     font-family: 'Segoe UI', 'Arial', sans-serif;
     font-family: 'Segoe UI', 'Arial', sans-serif;
     text-align: center;
     text-align: center;
     padding-bottom: 2px;
     box-shadow: 0 1.5px 5px rgba(0,0,0,0.03);
}
}




Navigation menu