123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- /**
- * @copyright 2014 by Tobias Reich
- */
- #imageview {
- position: fixed;
- display: none;
- width: 100%;
- height: 100%;
- background-color: rgba(10, 10, 10, .98);
- transition: background-color .3s;
- /* Modes ------------------------------------------------*/
- &.view { background-color: inherit; }
- &.full { background-color: rgba(0, 0, 0, 1); }
- /* ImageView ------------------------------------------------*/
- #image {
- position: absolute;
- top: 60px;
- right: 30px;
- bottom: 30px;
- left: 30px;
- background-repeat: no-repeat;
- background-position: 50% 50%;
- background-size: contain;
- transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s cubic-bezier(.51, .92, .24, 1.15);
- animation-name: zoomIn;
- animation-duration: .3s;
- animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);
- &.small {
- top: 50%;
- right: auto;
- bottom: auto;
- left: 50%;
- }
- &.full {
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- }
- /* Previous/Next Buttons ------------------------------------------------*/
- .arrow_wrapper {
- position: fixed;
- width: 20%;
- height: calc(100% - 60px);
- top: 60px;
- z-index: 1;
- &.previous { left: 0; }
- &.next { right: 0; }
- a#previous { left: 20px; }
- a#next { right: 20px; }
- a {
- position: fixed;
- top: 50%;
- margin-top: -10px;
- color: #fff;
- font-size: 50px;
- text-shadow: 0 1px 2px #000;
- cursor: pointer;
- opacity: 0;
- z-index: 2;
- transition: opacity .2s;
- }
- &:hover a { opacity: .2; }
- }
- }
|