[13182] | 1 | /* |
---|
| 2 | * photoswipe.css |
---|
| 3 | * Copyright (c) %%year%% by Code Computerlove (http://www.codecomputerlove.com) |
---|
| 4 | * Licensed under the MIT license |
---|
| 5 | * |
---|
| 6 | * Default styles for PhotoSwipe |
---|
| 7 | * Avoid any position or dimension based styles |
---|
| 8 | * where possible, unless specified already here. |
---|
| 9 | * The gallery automatically works out gallery item |
---|
| 10 | * positions etc. |
---|
| 11 | */ |
---|
| 12 | |
---|
| 13 | |
---|
| 14 | body.ps-active, body.ps-building, div.ps-active, div.ps-building |
---|
| 15 | { |
---|
| 16 | background: #000; |
---|
| 17 | overflow: hidden; |
---|
| 18 | } |
---|
| 19 | body.ps-active *, div.ps-active * |
---|
| 20 | { |
---|
| 21 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
---|
| 22 | display: none; |
---|
| 23 | } |
---|
| 24 | body.ps-active *:focus, div.ps-active *:focus |
---|
| 25 | { |
---|
| 26 | outline: 0; |
---|
| 27 | } |
---|
| 28 | |
---|
| 29 | |
---|
| 30 | /* Document overlay */ |
---|
| 31 | div.ps-document-overlay |
---|
| 32 | { |
---|
| 33 | background: #000; |
---|
| 34 | } |
---|
| 35 | |
---|
| 36 | |
---|
| 37 | /* UILayer */ |
---|
| 38 | div.ps-uilayer { |
---|
| 39 | |
---|
| 40 | background: #000; |
---|
| 41 | cursor: pointer; |
---|
| 42 | |
---|
| 43 | } |
---|
| 44 | |
---|
| 45 | |
---|
| 46 | /* Zoom/pan/rotate layer */ |
---|
| 47 | div.ps-zoom-pan-rotate{ |
---|
| 48 | background: #000; |
---|
| 49 | } |
---|
| 50 | div.ps-zoom-pan-rotate * { display: block; } |
---|
| 51 | |
---|
| 52 | |
---|
| 53 | /* Carousel */ |
---|
| 54 | div.ps-carousel-item-loading |
---|
| 55 | { |
---|
| 56 | background: url(images/loader.gif) no-repeat center center; |
---|
| 57 | } |
---|
| 58 | |
---|
| 59 | div.ps-carousel-item-error |
---|
| 60 | { |
---|
| 61 | background: url(images/error.gif) no-repeat center center; |
---|
| 62 | } |
---|
| 63 | |
---|
| 64 | |
---|
| 65 | /* Caption */ |
---|
| 66 | div.ps-caption |
---|
| 67 | { |
---|
| 68 | background: #000000; |
---|
| 69 | background: -moz-linear-gradient(top, #303130 0%, #000101 100%); |
---|
| 70 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101)); |
---|
| 71 | border-bottom: 1px solid #42403f; |
---|
| 72 | color: #ffffff; |
---|
| 73 | font-size: 13px; |
---|
| 74 | font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif; |
---|
| 75 | text-align: center; |
---|
| 76 | } |
---|
| 77 | div.ps-caption * { display: inline; } |
---|
| 78 | |
---|
| 79 | div.ps-caption-bottom |
---|
| 80 | { |
---|
| 81 | border-top: 1px solid #42403f; |
---|
| 82 | border-bottom: none; |
---|
| 83 | min-height: 44px; |
---|
| 84 | } |
---|
| 85 | |
---|
| 86 | div.ps-caption-content |
---|
| 87 | { |
---|
| 88 | padding: 13px; |
---|
| 89 | display: block; |
---|
| 90 | } |
---|
| 91 | |
---|
| 92 | |
---|
| 93 | /* Toolbar */ |
---|
| 94 | div.ps-toolbar |
---|
| 95 | { |
---|
| 96 | background: #000000; |
---|
| 97 | background: -moz-linear-gradient(top, #303130 0%, #000101 100%); |
---|
| 98 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101)); |
---|
| 99 | border-top: 1px solid #42403f; |
---|
| 100 | color: #ffffff; |
---|
| 101 | font-size: 13px; |
---|
| 102 | font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif; |
---|
| 103 | text-align: center; |
---|
| 104 | height: 44px; |
---|
| 105 | display: table; |
---|
| 106 | table-layout: fixed; |
---|
| 107 | } |
---|
| 108 | div.ps-toolbar * { |
---|
| 109 | display: block; |
---|
| 110 | } |
---|
| 111 | |
---|
| 112 | div.ps-toolbar-top |
---|
| 113 | { |
---|
| 114 | border-bottom: 1px solid #42403f; |
---|
| 115 | border-top: none; |
---|
| 116 | } |
---|
| 117 | |
---|
| 118 | div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play |
---|
| 119 | { |
---|
| 120 | cursor: pointer; |
---|
| 121 | display: table-cell; |
---|
| 122 | } |
---|
| 123 | |
---|
| 124 | div.ps-toolbar div div.ps-toolbar-content |
---|
| 125 | { |
---|
| 126 | width: 44px; |
---|
| 127 | height: 44px; |
---|
| 128 | margin: 0 auto 0; |
---|
| 129 | background-image: url(images/icons.png); |
---|
| 130 | background-repeat: no-repeat; |
---|
| 131 | } |
---|
| 132 | |
---|
| 133 | div.ps-toolbar-close div.ps-toolbar-content |
---|
| 134 | { |
---|
| 135 | background-position: 0 0; |
---|
| 136 | } |
---|
| 137 | |
---|
| 138 | div.ps-toolbar-previous div.ps-toolbar-content |
---|
| 139 | { |
---|
| 140 | background-position: -44px 0; |
---|
| 141 | } |
---|
| 142 | |
---|
| 143 | div.ps-toolbar-previous-disabled div.ps-toolbar-content |
---|
| 144 | { |
---|
| 145 | background-position: -44px -44px; |
---|
| 146 | } |
---|
| 147 | |
---|
| 148 | div.ps-toolbar-next div.ps-toolbar-content |
---|
| 149 | { |
---|
| 150 | background-position: -132px 0; |
---|
| 151 | } |
---|
| 152 | |
---|
| 153 | div.ps-toolbar-next-disabled div.ps-toolbar-content |
---|
| 154 | { |
---|
| 155 | background-position: -132px -44px; |
---|
| 156 | } |
---|
| 157 | |
---|
| 158 | div.ps-toolbar-play div.ps-toolbar-content |
---|
| 159 | { |
---|
| 160 | background-position: -88px 0; |
---|
| 161 | } |
---|
| 162 | |
---|
| 163 | /* Hi-res display */ |
---|
| 164 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), |
---|
| 165 | only screen and (min--moz-device-pixel-ratio: 1.5), |
---|
| 166 | only screen and (min-resolution: 240dpi) |
---|
| 167 | { |
---|
| 168 | div.ps-toolbar div div.ps-toolbar-content |
---|
| 169 | { |
---|
| 170 | -moz-background-size: 176px 88px; |
---|
| 171 | -o-background-size: 176px 88px; |
---|
| 172 | -webkit-background-size: 176px 88px; |
---|
| 173 | background-size: 176px 88px; |
---|
| 174 | background-image: url(images/icons@2x.png); |
---|
| 175 | } |
---|
| 176 | } |
---|