Advertisement
bvffalo

thumbnail expand KC

Dec 19th, 2019
240
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.20 KB | None | 0 0
  1. /*thumbnail expand KC*/
  2.  
  3. .uploadCell img:not(.imgExpanded){
  4. max-width:200px;
  5. max-height:200px;
  6. object-fit:contain;
  7. }
  8.  
  9. .linkThumb img{
  10. max-height:200px;
  11. max-width:200px;
  12. }
  13.  
  14.  .panelUploads{
  15. display:block;
  16. }
  17.  
  18. .uploadCell{
  19. margin:.25em 1em .25em .5em;
  20. float:none;
  21. }
  22.  
  23. .uploadCell img{
  24. float:left;
  25. }
  26.  
  27. .uploadCell img:not(.imgExpanded){
  28. max-width:200px;
  29. max-height:200px;
  30. object-fit:contain;
  31. }
  32.  
  33. .multipleUploads>.innerOP .divMessage,.multipleUploads>.innerPost .divMessage,.multipleUploads>.markedPost .divMessage{
  34. clear:both;
  35. }
  36.  
  37. .multipleUploads>.innerOP .opUploadPanel,.multipleUploads>.panelUploads{
  38. float:left;
  39. width:100%;
  40. }
  41.  
  42. .multipleUploads>.uploadCell{
  43. float:left;
  44. }
  45.  
  46. .sfw #bannerImage:hover,.sfw .catalogCell .linkThumb img:hover,.sfw .uploadCell img:hover:not(.imgExpanded){
  47. opacity:1!important;
  48. filter:blur(5px);
  49. }
  50.  
  51. .sfw #bannerImage,.sfw .catalogCell .linkThumb img,.sfw .uploadCell img:not(.imgExpanded){
  52. opacity:0;
  53. }
  54.  
  55. .flipped{
  56. -moz-transform:scaleX(-1);
  57. -o-transform:scaleX(-1);
  58. -webkit-transform:scaleX(-1);
  59. transform:scaleX(-1);
  60. filter:FlipH;
  61. -ms-filter:FlipH;
  62. }
  63.  
  64. @media only screen and (max-width:479px){
  65. .catalogCell{
  66. width:90px!important;
  67. max-height:230px!important;
  68. }
  69.  
  70. .linkThumb img{
  71. width:90px!important;
  72. height:90px!important;
  73. top:0;
  74.          }
  75. }
  76.  
  77. @media only screen and (min-width:480px) and (max-width:767px){
  78. .catalogCell{
  79. width:180px!important;
  80. max-height:300px!important;
  81. }
  82.  
  83. .linkThumb img{
  84. width:170px!important;
  85. height:170px!important;
  86.       }
  87. }
  88.  
  89. .catalogCell{
  90. width:210px;
  91. display:inline-block;
  92. vertical-align:top;
  93. max-height:400px;
  94. position:relative;
  95. border:1px solid #000;
  96. background:0 0;
  97. margin:5px;
  98. padding:5px;
  99. overflow:auto;
  100. }
  101.  
  102. .catalogCell:nth-child(10n+1){
  103. border-left:1px;
  104. }
  105.  
  106. .catalogCell:nth-child(10n){
  107. border-right:1px;
  108. }
  109.  
  110. .catalogCell:hover{
  111. background:#ffe4e6;
  112. }
  113.  
  114. .catalogCell .divMessage{
  115. margin:0;
  116. }
  117.  
  118. #divTools{
  119. text-align:left;
  120. margin-left:15px;
  121. }
  122.  
  123. .catalogFlag{
  124. float:left;
  125. }
  126.  
  127. .catalogHeader{
  128. line-height:1em;
  129. }
  130.  
  131. .catalogCell .labelSubject{
  132. padding:0;
  133. margin:0 0 .5em;
  134. font-size:1em; color:#000;
  135. }
  136.  
  137. .linkThumb img{
  138. max-height:200px;
  139. max-width:200px;
  140. }
  141.  
  142. .catalogDiv{
  143. text-align:center;
  144. }
  145.  
  146. #boardsWrapper{
  147. width:80%;
  148. margin:1em auto;
  149. text-align:center;
  150. }
  151.  
  152. .boardsCell span{
  153. text-overflow:ellipsis;
  154. }
  155.  
  156. .search{
  157. margin:0 11px .5em;
  158. }
  159.  
  160. .search form{
  161. display:inline-block;
  162. }
  163.  
  164. #boardsSort,#searchButton{
  165. margin-top:1em;
  166. }
  167.  
  168. #legend{
  169. width:15%;
  170. text-align:left;
  171. display:inline-block;
  172. }
  173.  
  174. .boardsCellHeader{
  175. width:85%;
  176. display:inline-table;
  177. }
  178.  
  179.  .sfw #bannerImage:hover,.sfw .catalogCell .linkThumb img:hover,.sfw .uploadCell img:hover:not(.imgExpanded){
  180. opacity:1!important;
  181. filter:blur(5px);
  182. }
  183.  
  184. .sfw #bannerImage,.sfw .catalogCell .linkThumb img,.sfw .uploadCell img:not(.imgExpanded){
  185. opacity:0;
  186. }
  187.  
  188. .flipped{
  189. -moz-transform:scaleX(-1);
  190. -o-transform:scaleX(-1);
  191. -webkit-transform:scaleX(-1);
  192. transform:scaleX(-1);
  193. filter:FlipH;
  194. -ms-filter:FlipH;
  195. }
  196.  
  197. .linkThumb img{
  198. max-height:200px;
  199. max-width:200px;
  200. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement