Advertisement
decembre

STY - Flickr WideScreen (viewer) - FLUIDR v.2 Beta

Jul 25th, 2016
222
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.51 KB | None | 0 0
  1. @namespace url(http://www.w3.org/1999/xhtml);
  2.  
  3. @-moz-document domain("www.fluidr.com") {
  4.  
  5. /* ==== FlickrWideScreen (viewer) - FLUIDR v.2 (new2) - BETA - Problem - NEW5 ==== */
  6.  
  7. * {
  8.   box-sizing: border-box;
  9. }
  10.  
  11. body {
  12. display: inline-block !important;
  13. width: 100%!important;
  14. max-width: 100%!important;
  15. max-width: 1908px !important;
  16. }
  17. #photos {
  18. display: inline-block !important;
  19. width: 100%!important;
  20. max-width: 100%!important;
  21. max-width: 1908px !important;
  22. /* outline: 1px solid red !important; */
  23. }
  24.  
  25.  
  26. #photos.fluid-size-l {
  27. display: inline-block !important;
  28. width: 100%!important;
  29. max-width: 100%!important;
  30. max-width: 1908px !important;
  31. /* outline: 1px solid green !important; */
  32. }
  33. #photos.fluid-size-z {
  34. display: inline-block !important;
  35. width: 100%!important;
  36. max-width: 100%!important;
  37. min-width: 1908px !important;
  38. max-width: 1908px !important;
  39. /* outline: 1px solid yellow !important; */
  40. }
  41. #photos.fluid-size-m {
  42. /* width: 100%!important; */
  43. outline: 1px solid red !important;
  44. }
  45.  
  46. /* PHOTOS CONTAINER */
  47. #photos{
  48. /* display: inline-block!important; */
  49. display: table !important;
  50. width: 97%!important;
  51. /* outline: 2px dotted red !important; */
  52. }
  53. /* PHOTOS - ROW  */
  54. .photos-page {
  55. /* display: table-row !important; */
  56. /* display: table !important; */
  57. /* display: inline-table !important; */
  58. display: inline-block!important;
  59. /* display: table-cell !important; */
  60. width: 100% !important;
  61. min-width: 1900px !important;
  62. max-width: 1900px !important;
  63. /* min-height: 500px !important; */
  64. /* max-height: 500px !important; */
  65.     margin-bottom: 10px !important;
  66. /* outline: 2px dotted green !important; */
  67. }
  68.  
  69. /* PHOTO PANEL - CELL */
  70. .photo-panel {
  71. /* display: table-row !important; */
  72. /* display: table !important; */
  73. /* display: inline-table !important; */
  74. display: inline-block!important;
  75. /* display: table-cell !important; */
  76. max-height: 445px !important;
  77. min-height: 445px !important;
  78. /* height: 425px !important; */
  79. min-width: 930px !important;
  80. max-width: 930px !important;
  81. margin: 0 auto !important;
  82.  
  83. /* top: 0px !important; */
  84. margin-bottom: 5px !important;
  85. margin-right: 6px !important;
  86. padding: 5px 5px !important;
  87. /* outline: 5px solid peru !important; */
  88. /* background: tan !important; */
  89. border: 1px solid gray !important;
  90. }
  91.  
  92. .photoshow {
  93. /* display: table-row !important; */
  94. /* display: table !important; */
  95. /* display: inline-table !important; */
  96. display: inline-block!important;
  97. /* display: table-cell !important; */
  98. /* max-height: 100px !important; */
  99. /* min-height: 100px !important; */
  100. /* height: auto !important; */
  101. height: 422px !important;
  102.  
  103. /* width: 200px !important; */
  104.     min-width: 515px !important;
  105.     max-width: 515px !important;
  106. margin: auto !important;
  107. /* background: red !important; */
  108. /* outline: 1px solid tomato !important; */
  109. }
  110. .fluid-size-z .photo-subpanel-align {
  111. display: inline-block!important;
  112.     min-width: 515px !important;
  113.     max-width: 515px !important;
  114. max-height: 430px !important;
  115. min-height: 43px !important;
  116. margin-bottom: 0px !important;
  117. /* pointer-events: none !important; */
  118. /* background: green !important; */
  119. }
  120. .photo-subpanel-align {
  121. /* display: table-row !important; */
  122.  
  123. /* display: inline-table !important; */
  124. /* display: inline-block!important; */
  125. /* display: table-cell !important; */
  126. /* height: 200px !important; */
  127.     margin-bottom: 2em;
  128.     text-align: center;
  129.     vertical-align: top;
  130. }
  131.  
  132. /* (new2) IMAGE CONTAINER - === */
  133.  
  134. .photo-subpanel a {
  135. display: inline-block !important;
  136. /* height: 100px !important; */
  137.     color: #aaa;
  138.     cursor: pointer;
  139.     text-decoration: none;
  140.     transition: color 0.5s ease 0s;
  141. /* pointer-events: none !important; */
  142. /* z-index: 100 !important; */
  143. /* background: red !important; */
  144. }
  145.  
  146. .photo-panel-img {
  147. /* display: table-cell !important; */
  148. /* display: table-row !important; */
  149. /* display: table !important; */
  150. /* display: inline-table !important; */
  151. display: inline-block!important;
  152.  
  153. /* max-height: 100px !important; */
  154. /* min-height: 100px !important; */
  155. /* height: auto !important; */
  156. /* width: 200px !important; */
  157. /* margin: auto !important; */
  158. background-position: 50% 50% !important;
  159.      background-size: 90% auto;
  160. /* pointer-events: none !important; */
  161. /* outline: 1px solid peru !important; */
  162. }
  163.  
  164. /* (new2) IMAGE / VIDEO CONTAINER - FADER ZOOM - FOR THUMBNAIL ZOOM - === */
  165. .photo-panel-img .fader,
  166. .photo-panel-video .fader {
  167. display: none !important;
  168. max-height: 0px !important;
  169. min-height: 00px !important;
  170. z-index: 100 !important;
  171. /* background-color: blue !important; */
  172. outline: 1px solid violet !important;
  173. }
  174. .photo-panel .photo-panel-img {
  175. display: inline-block!important;
  176. max-height: 424px !important;
  177. min-height: 424px !important;
  178.     min-width: 515px !important;
  179.     max-width: 515px !important;
  180. /*     cursor: pointer !important; */
  181. cursor: zoom-in !important;
  182. /* pointer-events: none !important; */
  183. }
  184. img.zoomed-element {
  185. /* cursor: url("./img/zoomout.cur"), pointer !important; */
  186. cursor: zoom-out !important;
  187. }
  188. .meta-subpanel-align {
  189. /* position: absolute; */
  190. display: inline-block!important;
  191. /* display: table-cell; */
  192. max-height: 430px !important;
  193. min-height: 430px !important;
  194. /* width: 285px!important; */
  195. /* vertical-align: middle; */
  196. /* left: -500px; */
  197. /* padding-bottom: 10px; */
  198. /* padding-left: 10px; */
  199. /* padding-top: 10px; */
  200.     padding: 0px 5px !important;
  201. /* transition: opacity 0.5s ease 0s; */
  202. /* outline: 1px solid peru !important; */
  203. }
  204.  
  205. .meta-subpanel {
  206. /* text-align: left; */
  207. /* width: 285px!important; */
  208. /* word-wrap: break-word; */
  209. /* outline: 1px solid peru !important; */
  210. }
  211.  
  212. /* PHOTO - LARGE - METADATA ON === */
  213. #photos.fluid-size-l .photos-page [id^="photo-panel-"] {
  214. outline: 1px solid green !important;
  215. }
  216.  
  217. /* PHOTO - MEDIUM - METADATA ON === */
  218. #photos.fluid-size-z .photos-page [id^="photo-panel-"] {
  219. /* outline: 1px solid yellow !important; */
  220. }
  221. /* PHOTO - SMALL - METADATA ON === */
  222. #photos.fluid-size-m .photos-page [id^="photo-panel-"] {
  223. /* outline: 1px solid red !important; */
  224. }
  225.  
  226. /* PHOTO - LARGE - METADATA OFF === */
  227. #photos.fluid-size-l-meta-hide .photos-page [id^="photo-panel-"] {
  228. /* outline: 1px dashed green !important; */
  229. }
  230.  
  231. /* PHOTO - MEDIUM - METADATA OFF === */
  232. #photos.fluid-size-z-meta-hide .photos-page [id^="photo-panel-"] {
  233. /* outline: 1px dashed yellow !important; */
  234. }
  235. /* PHOTO - SMALL - METADATA OFF === */
  236. #photos.fluid-size-m-meta-hide .photos-page [id^="photo-panel-"] {
  237. /* outline: 1px dashed red !important; */
  238. }
  239.  
  240. /* ==== END ==== */
  241.  
  242. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement