UNPKG

photo-sphere-viewer

Version:

A JavaScript library to display Photo Sphere panoramas

143 lines (142 loc) 3.58 kB
/*! * Photo Sphere Viewer 4.8.1 * @copyright 2014-2015 Jérémy Heleine * @copyright 2015-2022 Damien "Mistic" Sorel * @licence MIT (https://opensource.org/licenses/MIT) */ .psv-gallery { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(61, 61, 61, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.7); overflow-x: auto; overflow-y: hidden; -webkit-transition: -webkit-transform ease-in-out 0.1s; transition: -webkit-transform ease-in-out 0.1s; transition: transform ease-in-out 0.1s; transition: transform ease-in-out 0.1s, -webkit-transform ease-in-out 0.1s; -webkit-transform: translateY(100%); transform: translateY(100%); z-index: 90; } .psv--has-navbar .psv-gallery { bottom: 40px; -webkit-transform: translateY(calc(100% + 40px)); transform: translateY(calc(100% + 40px)); } .psv-gallery--open { -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } .psv-gallery-container { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 15px; } .psv-gallery-item { -webkit-box-flex: 0; -ms-flex: none; flex: none; position: relative; margin-right: 15px; border-radius: 5px; overflow: hidden; cursor: pointer; } .psv-gallery-item-wrapper { width: 100%; height: 0; } .psv-gallery-item-title { position: absolute; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 2.2em; padding: 0.5em; background: rgba(0, 0, 0, 0.6); font: 16px sans-serif; line-height: 1.2em; color: rgba(255, 255, 255, 0.7); z-index: 2; -webkit-transition: height ease-in-out 0.2s; transition: height ease-in-out 0.2s; } .psv-gallery-item-title span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .psv-gallery-item-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-size: cover; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition: -webkit-transform ease-in-out 0.2s; transition: -webkit-transform ease-in-out 0.2s; transition: transform ease-in-out 0.2s; transition: transform ease-in-out 0.2s, -webkit-transform ease-in-out 0.2s; z-index: 1; } .psv-gallery-item:hover .psv-gallery-item-title { height: 100%; } .psv-gallery-item:hover .psv-gallery-item-title span { white-space: normal; } .psv-gallery-item:hover .psv-gallery-item-thumb { -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); } .psv-gallery-item--active::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 3px solid white; z-index: 3; } @media screen and (max-width: 500px) { .psv-gallery { top: 0; overflow-x: hidden; overflow-y: auto; } .psv-gallery-container { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; } .psv-gallery-item { width: calc(50% - 15px) !important; margin-bottom: 15px; } } /*# sourceMappingURL=gallery.css.map */