content.css 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. /**
  2. * @name content.css
  3. * @author Tobias Reich
  4. * @copyright 2014 by Tobias Reich
  5. */
  6. /* Gradient ------------------------------------------------*/
  7. #content::before {
  8. content: "";
  9. position: absolute;
  10. left: 0px;
  11. width: 100%;
  12. height: 20px;
  13. background: linear-gradient(to bottom, #262626, #222);
  14. border-top: 1px solid #333;
  15. }
  16. /* Modes ------------------------------------------------*/
  17. #content.view::before {
  18. display: none;
  19. }
  20. #content {
  21. position: absolute;
  22. padding: 50px 0px 33px 0px;
  23. width: 100%;
  24. min-height: calc(100% - 90px);
  25. -webkit-overflow-scrolling: touch;
  26. }
  27. /* Photo ------------------------------------------------*/
  28. .photo {
  29. float: left;
  30. display: inline-block;
  31. width: 206px;
  32. height: 206px;
  33. margin: 30px 0px 0px 30px;
  34. cursor: pointer;
  35. }
  36. .photo img {
  37. position: absolute;
  38. width: 200px;
  39. height: 200px;
  40. background-color: #222;
  41. border-radius: 2px;
  42. border: 2px solid #ccc;
  43. }
  44. .photo:hover img,
  45. .photo.active img {
  46. box-shadow: 0px 0px 5px #005ecc;
  47. }
  48. .photo:active {
  49. transition-duration: .1s;
  50. transform: scale(.98);
  51. }
  52. /* Album ------------------------------------------------*/
  53. .album {
  54. float: left;
  55. display: inline-block;
  56. width: 204px;
  57. height: 204px;
  58. margin: 30px 0px 0px 30px;
  59. cursor: pointer;
  60. }
  61. .album img:first-child,
  62. .album img:nth-child(2) {
  63. transform: rotate(0deg) translateY(0px) translateX(0px);
  64. opacity: 0;
  65. }
  66. .album:hover img:first-child {
  67. transform: rotate(-2deg) translateY(10px) translateX(-12px);
  68. opacity: 1;
  69. }
  70. .album:hover img:nth-child(2) {
  71. transform: rotate(5deg) translateY(-8px) translateX(12px);
  72. opacity: 1;
  73. }
  74. .album img {
  75. position: absolute;
  76. width: 200px;
  77. height: 200px;
  78. background-color: #222;
  79. border-radius: 2px;
  80. border: 2px solid #ccc;
  81. }
  82. .album:hover img,
  83. .album.active img {
  84. box-shadow: 0px 0px 5px #005ecc;
  85. }
  86. /* Album/Photo Overlay ------------------------------------------------*/
  87. .album .overlay,
  88. .photo .overlay {
  89. position: absolute;
  90. width: 200px;
  91. height: 200px;
  92. margin: 2px;
  93. }
  94. .album .overlay {
  95. background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%);
  96. }
  97. .photo .overlay {
  98. background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%);
  99. opacity: 0;
  100. }
  101. .photo:hover .overlay,
  102. .photo.active .overlay {
  103. opacity: 1;
  104. }
  105. .album .overlay h1,
  106. .photo .overlay h1 {
  107. min-height: 19px;
  108. width: 185px;
  109. margin: 153px 0px 3px 15px;
  110. color: #fff;
  111. font-size: 16px;
  112. font-weight: bold;
  113. overflow: hidden;
  114. }
  115. .album .overlay a,
  116. .photo .overlay a {
  117. font-size: 11px;
  118. color: #aaa;
  119. }
  120. .album .overlay a {
  121. margin-left: 15px;
  122. }
  123. .photo .overlay a {
  124. margin: 155px 0px 5px 15px;
  125. }
  126. .photo .overlay a span {
  127. margin: 0px 5px 0px 0px;
  128. }
  129. /* Badges ------------------------------------------------*/
  130. .album .badge,
  131. .photo .badge {
  132. position: absolute;
  133. margin-top: -1px;
  134. margin-left: 12px;
  135. padding: 12px 7px 3px 7px;
  136. box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
  137. border-radius: 0px 0px 3px 3px;
  138. border: 1px solid #fff;
  139. border-top: none;
  140. color: #fff;
  141. font-size: 24px;
  142. text-shadow: 0px 1px 0px rgba(0, 0, 0, .4);
  143. opacity: .9;
  144. }
  145. .album .badge.icon-star,
  146. .photo .badge.icon-star {
  147. padding: 12px 8px 3px 8px;
  148. }
  149. .album .badge.icon-share,
  150. .photo .badge.icon-share {
  151. padding: 12px 6px 3px 8px;
  152. }
  153. .album .badge.icon-time,
  154. .photo .badge.icon-time {
  155. padding: 12px 8px 3px 9px;
  156. }
  157. .album .badge::after,
  158. .photo .badge::after {
  159. content: "";
  160. position: absolute;
  161. margin-top: -12px;
  162. margin-left: -26px;
  163. width: 38px;
  164. height: 5px;
  165. background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  166. opacity: .4;
  167. }
  168. .album .badge.icon-star::after,
  169. .photo .badge.icon-star::after {
  170. margin-left: -29px;
  171. }
  172. .album .badge.icon-share::after,
  173. .photo .badge.icon-share::after {
  174. margin-left: -31px;
  175. }
  176. .album .badge.icon-time::after,
  177. .photo .badge.icon-time::after {
  178. margin-left: -29px;
  179. }
  180. .album .badge.icon-reorder::after {
  181. margin-left: -30px;
  182. }
  183. .album .badge:nth-child(2n),
  184. .photo .badge:nth-child(2n) {
  185. margin-left: 57px;
  186. }
  187. .album .badge.red,
  188. .photo .badge.red {
  189. background: linear-gradient(to bottom, #d64b4b 0%, #ab2c2c 100%);
  190. }
  191. .album .badge.blue,
  192. .photo .badge.blue {
  193. background: linear-gradient(to bottom, #347cd6 0%, #2945ab 100%);
  194. }
  195. /* Divider ------------------------------------------------*/
  196. .divider {
  197. float: left;
  198. width: 100%;
  199. margin-top: 50px;
  200. opacity: 0;
  201. border-top: 1px solid #2E2E2E;
  202. box-shadow: 0px -1px 0px #151515;
  203. }
  204. .divider:first-child {
  205. margin-top: 0px;
  206. border-top: none;
  207. }
  208. .divider h1 {
  209. float: left;
  210. margin: 20px 0px 0px 30px;
  211. color: #fff;
  212. font-size: 14px;
  213. font-weight: bold;
  214. text-shadow: 0px -1px 0px rgba(0, 0, 0, .8);
  215. }
  216. /* No Content ------------------------------------------------*/
  217. .no_content {
  218. position: absolute;
  219. top: 50%;
  220. left: 50%;
  221. height: 160px;
  222. width: 180px;
  223. margin-top: -80px;
  224. margin-left: -90px;
  225. padding-top: 20px;
  226. color: rgba(20, 20, 20, 1);
  227. text-shadow: 0px 1px 0px rgba(255, 255, 255, .05);
  228. text-align: center;
  229. }
  230. .no_content .icon {
  231. font-size: 120px;
  232. }
  233. .no_content p {
  234. font-size: 18px;
  235. }