/* Обучающая подсказка к кнопке «Скачать в JPG». Задача Б24 58243. Позиционирует её JS (gallery-download-jpg-hint.js), здесь только вид. */ /* 1041: выше самого верхнего слоя страницы (z-index 1000 у стилей шаблона), но ниже magnific-popup (1042) — если фото открыли во весь экран, подсказка не должна висеть поверх него. */ .gallery-jpg-hint { position: absolute; z-index: 1041; box-sizing: border-box; width: 280px; max-width: calc(100vw - 16px); padding: 12px 14px 14px; background: #fff; border: 1px solid #d5e3ee; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); color: #333; font-size: 13px; line-height: 18px; text-align: left; } .gallery-jpg-hint__title { margin-bottom: 6px; font-size: 14px; font-weight: bold; line-height: 18px; } .gallery-jpg-hint__text { margin: 0 0 12px; } /* Вид кнопки — фирменный .button-yellow из styles.css шаблона, здесь только то, чего в нём нет: подсказка висит в , а не в .main-container. */ .gallery-jpg-hint__ok { vertical-align: top; } /* Хвостик вниз, к кнопке: два треугольника — цветной поверх контурного, чтобы держалась рамка подсказки. Сдвиг по горизонтали ставит JS. */ .gallery-jpg-hint__arrow { position: absolute; bottom: -9px; width: 0; height: 0; margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid #d5e3ee; } .gallery-jpg-hint__arrow:after { content: ''; position: absolute; top: -10px; left: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; } /* Подсветка самой кнопки на время показа подсказки */ .gallery-download-jpg--hinted { border-bottom-color: transparent; border-radius: 4px; background: #eaf4fb; box-shadow: 0 0 0 3px rgba(56, 145, 206, .35); padding: 2px 6px; margin: -2px -6px; } @media (max-width: 670px) { .gallery-jpg-hint { width: 260px; max-width: calc(100vw - 24px); } }