/* Контейнер для кнопки, чтобы не прыгал контент, когда она сменит позиционирование */ .css-modal-details { height: 60px; display:flex; align-items:center; justify-content:center; } /* Кнопка для открытия */ .css-modal-details summary { display: inline-flex; margin: 10px; text-decoration: none; position: relative; font-size: 20px; line-height: 20px; padding: 12px 30px; color: #FFF; font-weight: bold; text-transform: uppercase; font-family: 'Roboto', Тahoma, sans-serif; background: #337AB7; cursor: pointer; border: 2px solid #BFE2FF; overflow: hidden; z-index: 1; } .css-modal-details summary:hover, .css-modal-details summary:active, .css-modal-details summary:focus { color: #FFF; } .css-modal-details summary:before { content: ''; position: absolute; top: 0; right: -50px; bottom: 0; left: 0; border-right: 50px solid transparent; border-top: 50px solid #2D6B9F; transition: transform 0.5s; transform: translateX(-100%); z-index: -1; } .css-modal-details summary:hover:before, .css-modal-details summary:active:before, .css-modal-details summary:focus:before { transform: translateX(0); } /* Кнопка при открытом окне переходит на весь экран */ .css-modal-details details[open] summary { cursor: default; opacity: 0; position: fixed; left: 0; top: 0; z-index: 3; width: 100%; height: 100%; } /* Контейнер, который затемняет страницу */ .css-modal-details details .cmc { display:flex; align-items:center; justify-content:center; } .css-modal-details details[open] .cmc { pointer-events: none; z-index: 4; position: fixed; left: 0; top: 0; width: 100%; height: 100%; animation: bg 0.5s ease; background: rgba(51, 122, 183, 0.7); } /* Модальное окно */ .css-modal-details details .cmt { font-family: Verdana, sans-serif; font-size: 16px; padding: 20px; width:80%; max-width: 600px; max-height: 70%; transition: 0.5s; border: 6px solid #BFE2FF; border-radius: 12px; background: #FFF; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); text-align: center; overflow: auto; } .css-modal-details details[open] .cmt { animation: scale 0.5s ease; z-index: 4; pointer-events: auto; } /* Декоративная кнопка с крестиком */ .css-modal-details details[open] .cmc:after { content: ""; width: 50px; height: 50px; border: 6px solid #BFE2FF; border-radius: 12px; position: absolute; z-index: 10; top: 20px; right: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e"); background-color: #FFF; background-size: cover; animation: move 0.5s ease; } /* Анимации */ @keyframes scale { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes move { 0% { right: -80px; } 100% { right: 20px; } } @keyframes bg { 0% { background: rgba(51, 122, 183, 0); } 100% { background: rgba(51, 122, 183, 0.7); } }