You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

593 lines
9.9 KiB

  1. .ui.items {
  2. margin: 1em 0 0;
  3. }
  4. .ui.items:first-child {
  5. margin-top: 0;
  6. }
  7. .ui.items:last-child {
  8. margin-bottom: -1em;
  9. }
  10. .ui.items:after {
  11. display: block;
  12. content: ' ';
  13. height: 0;
  14. clear: both;
  15. overflow: hidden;
  16. visibility: hidden;
  17. }
  18. .ui.items>.row>.item,
  19. .ui.items>.item {
  20. display: block;
  21. float: right;
  22. position: relative;
  23. top: 0;
  24. width: 316px;
  25. min-height: 375px;
  26. margin: 0 .5em 2.5em;
  27. padding: 0;
  28. background-color: #FFF;
  29. line-height: 1.2;
  30. font-size: 1em;
  31. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1);
  32. box-shadow: 0 0 0 1px rgba(0,0,0,.1);
  33. border-bottom: .2em solid rgba(0,0,0,.2);
  34. border-radius: .33em;
  35. -webkit-transition: -webkit-box-shadow .2s ease;
  36. transition: box-shadow .2s ease;
  37. padding: .5em;
  38. }
  39. .ui.items a.item,
  40. .ui.items .item a {
  41. cursor: pointer;
  42. }
  43. .ui.items .item,
  44. .ui.items .item>.image,
  45. .ui.items .item>.image .overlay,
  46. .ui.items .item>.content,
  47. .ui.items .item>.content>.meta,
  48. .ui.items .item>.content>.extra {
  49. -webkit-box-sizing: border-box;
  50. -moz-box-sizing: border-box;
  51. -ms-box-sizing: border-box;
  52. box-sizing: border-box;
  53. }
  54. .ui.items .item>.image {
  55. display: block;
  56. position: relative;
  57. background-color: rgba(0,0,0,.05);
  58. -webkit-box-sizing: border-box;
  59. -moz-box-sizing: border-box;
  60. -ms-box-sizing: border-box;
  61. box-sizing: border-box;
  62. border-radius: .2em;
  63. }
  64. .ui.items .item>.image>img {
  65. display: block;
  66. width: 100%;
  67. }
  68. .ui.items .item>.content {
  69. padding: .75em .5em;
  70. }
  71. .ui.items .item>.content>.name {
  72. display: block;
  73. font-size: 1.25em;
  74. font-weight: 700;
  75. margin-bottom: .2em;
  76. color: rgba(0,0,0,.7);
  77. }
  78. .ui.items .item>.content>.description {
  79. clear: both;
  80. margin: 0;
  81. color: rgba(0,0,0,.45);
  82. }
  83. .ui.items .item>.content>.description p {
  84. margin: 0 0 .2em;
  85. }
  86. .ui.items .item>.content>.description p:last-child {
  87. margin-bottom: 0;
  88. }
  89. .ui.items .item .meta {
  90. float: left;
  91. color: rgba(0,0,0,.35);
  92. }
  93. .ui.items .item>.content>.meta+.name {
  94. float: right;
  95. }
  96. .ui.items .item .star.label:hover::after {
  97. border-left-color: #F6EFC3;
  98. }
  99. .ui.items .item .star.label:hover::after {
  100. border-top-color: #F6EFC3;
  101. }
  102. .ui.items .item .star.label:hover .icon {
  103. color: #ac9400;
  104. }
  105. .ui.items .item .star.label.active::after {
  106. border-left-color: #F6EFC3;
  107. }
  108. .ui.items .item .star.label.active::after {
  109. border-top-color: #F6EFC3;
  110. }
  111. .ui.items .item .star.label.active .icon {
  112. color: #ac9400;
  113. }
  114. .ui.items .item .like.label:hover::after {
  115. border-left-color: #F5E1E2;
  116. }
  117. .ui.items .item .like.label.active::after {
  118. border-top-color: #F5E1E2;
  119. }
  120. .ui.items .item .like.label:hover .icon {
  121. color: #ef404a;
  122. }
  123. .ui.items .item .like.label.active::after {
  124. border-left-color: #F5E1E2;
  125. }
  126. .ui.items .item .like.label.active::after {
  127. border-top-color: #F5E1E2;
  128. }
  129. .ui.items .item .like.label.active .icon {
  130. color: #ef404a;
  131. }
  132. .ui.items .item .extra {
  133. position: absolute;
  134. width: 100%;
  135. padding: 0 .5em;
  136. bottom: -2em;
  137. right: 0;
  138. height: 1.5em;
  139. color: rgba(0,0,0,.25);
  140. -webkit-transition: color .2s ease;
  141. transition: color .2s ease;
  142. }
  143. .ui.items .item .extra>img {
  144. display: inline-block;
  145. border-radius: 500px;
  146. margin-left: .25em;
  147. vertical-align: middle;
  148. width: 2em;
  149. }
  150. .ui.items .item .extra .left {
  151. float: right;
  152. }
  153. .ui.items .item .extra .right {
  154. float: left;
  155. }
  156. .ui.items .item:hover {
  157. cursor: pointer;
  158. z-index: 5;
  159. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  160. box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  161. }
  162. .ui.items .item:hover .extra {
  163. color: rgba(0,0,0,.5);
  164. }
  165. .ui.items .item:nth-of-type(n+1):hover {
  166. border-bottom-color: #6ECFF5!important;
  167. }
  168. .ui.items .item:nth-of-type(n+2):hover {
  169. border-bottom-color: #5C6166!important;
  170. }
  171. .ui.items .item:nth-of-type(n+3):hover {
  172. border-bottom-color: #A1CF64!important;
  173. }
  174. .ui.items .item:nth-of-type(n+4):hover {
  175. border-bottom-color: #D95C5C!important;
  176. }
  177. .ui.items .item:nth-of-type(n+5):hover {
  178. border-bottom-color: #564F8A!important;
  179. }
  180. .ui.items .item:nth-of-type(n+6):hover {
  181. border-bottom-color: #00B5AD!important;
  182. }
  183. .ui.connected.items {
  184. display: table;
  185. width: 100%;
  186. margin-right: 0!important;
  187. margin-left: 0!important;
  188. }
  189. .ui.connected.items>.row>.item,
  190. .ui.connected.items>.item {
  191. float: none;
  192. display: table-cell;
  193. vertical-align: top;
  194. height: auto;
  195. border-radius: 0;
  196. margin: 0;
  197. width: 33.33%;
  198. }
  199. .ui.connected.items>.row {
  200. display: table;
  201. margin: .5em 0;
  202. }
  203. .ui.connected.items>.row:first-child {
  204. margin-top: 0;
  205. }
  206. .ui.connected.items>.item,
  207. .ui.connected.items>.row:last-child>.item {
  208. border-bottom: .2em solid rgba(0,0,0,.2);
  209. }
  210. .ui.connected.items>.row:last-child>.item:first-child,
  211. .ui.connected.items>.item:first-child {
  212. border-radius: 0 0 .33em 0;
  213. }
  214. .ui.connected.items>.row:last-child>.item:last-child,
  215. .ui.connected.items>.item:last-child {
  216. border-radius: 0 0 .33em;
  217. }
  218. .ui.connected.items .item:hover {
  219. border-bottom-width: .2em;
  220. }
  221. .ui.one.connected.items>.row>.item,
  222. .ui.one.connected.items>.item {
  223. width: 50%;
  224. padding-right: 2%;
  225. padding-left: 2%;
  226. }
  227. .ui.two.connected.items>.row>.item,
  228. .ui.two.connected.items>.item {
  229. width: 50%;
  230. padding-right: 1%;
  231. padding-left: 1%;
  232. }
  233. .ui.three.connected.items>.row>.item,
  234. .ui.three.connected.items>.item {
  235. width: 33.333%;
  236. padding-right: 1%;
  237. padding-left: 1%;
  238. }
  239. .ui.four.connected.items>.row>.item,
  240. .ui.four.connected.items>.item {
  241. width: 25%;
  242. padding-right: .5%;
  243. padding-left: .5%;
  244. }
  245. .ui.five.connected.items>.row>.item,
  246. .ui.five.connected.items>.item {
  247. width: 20%;
  248. padding-right: .5%;
  249. padding-left: .5%;
  250. }
  251. .ui.six.connected.items>.row>.item,
  252. .ui.six.connected.items>.item {
  253. width: 16.66%;
  254. padding-right: .5%;
  255. padding-left: .5%;
  256. }
  257. .ui.seven.connected.items>.row>.item,
  258. .ui.seven.connected.items>.item {
  259. width: 14.28%;
  260. padding-right: .5%;
  261. padding-left: .5%;
  262. }
  263. .ui.eight.connected.items>.row>.item,
  264. .ui.eight.connected.items>.item {
  265. width: 12.5%;
  266. padding-right: .25%;
  267. padding-left: .25%;
  268. }
  269. .ui.nine.connected.items>.row>.item,
  270. .ui.nine.connected.items>.item {
  271. width: 11.11%;
  272. padding-right: .25%;
  273. padding-left: .25%;
  274. }
  275. .ui.ten.connected.items>.row>.item,
  276. .ui.ten.connected.items>.item {
  277. width: 10%;
  278. padding-right: .2%;
  279. padding-left: .2%;
  280. }
  281. .ui.eleven.connected.items>.row>.item,
  282. .ui.eleven.connected.items>.item {
  283. width: 9.09%;
  284. padding-right: .2%;
  285. padding-left: .2%;
  286. }
  287. .ui.twelve.connected.items>.row>.item,
  288. .ui.twelve.connected.items>.item {
  289. width: 8.3333%;
  290. padding-right: .1%;
  291. padding-left: .1%;
  292. }
  293. @media only screen and (max-width:768px) {
  294. .ui.stackable.items {
  295. display: block!important;
  296. }
  297. .ui.stackable.items>.item,
  298. .ui.stackable.items>.row>.item {
  299. display: block!important;
  300. height: auto!important;
  301. width: auto!important;
  302. padding: 0!important;
  303. }
  304. }
  305. .ui.horizontal.items>.item,
  306. .ui.items>.horizontal.item {
  307. display: table;
  308. }
  309. .ui.horizontal.items>.item>.image .ui.items>.horizontal.item>.image {
  310. display: table-cell;
  311. width: 50%;
  312. }
  313. .ui.horizontal.items>.item>.image+.content,
  314. .ui.items>.horizontal.item>.image+.content {
  315. width: 50%;
  316. display: table-cell;
  317. }
  318. .ui.horizontal.items>.item>.content,
  319. .ui.items>.horizontal.item>.content {
  320. padding: 1% 3% 11% 1.7%;
  321. vertical-align: top;
  322. }
  323. .ui.horizontal.items>.item>.meta,
  324. .ui.items>.horizontal.item>.meta {
  325. position: absolute;
  326. padding: 0;
  327. bottom: 7%;
  328. right: 3%;
  329. width: 94%;
  330. }
  331. .ui.horizontal.items>.item>.image+.content+.meta,
  332. .ui.items>.horizontal.item>.image+.content+.meta {
  333. bottom: 7%;
  334. right: 53%;
  335. width: 44%;
  336. }
  337. .ui.horizontal.items>.item .avatar,
  338. .ui.items>.horizontal.item .avatar {
  339. width: 11.5%;
  340. }
  341. .ui.items>.item .avatar {
  342. max-width: 25px;
  343. }
  344. .ui.one.items {
  345. margin-right: -2%;
  346. margin-left: -2%;
  347. }
  348. .ui.one.items>.item {
  349. width: 100%;
  350. margin-right: 2%;
  351. margin-left: 2%;
  352. }
  353. .ui.two.items {
  354. margin-right: -1%;
  355. margin-left: -1%;
  356. }
  357. .ui.two.items>.item {
  358. width: 48%;
  359. margin-right: 1%;
  360. margin-left: 1%;
  361. }
  362. .ui.two.items>.item:nth-child(2n+1) {
  363. clear: right;
  364. }
  365. .ui.three.items {
  366. margin-right: -1%;
  367. margin-left: -1%;
  368. }
  369. .ui.three.items>.item {
  370. width: 31.333%;
  371. margin-right: 1%;
  372. margin-left: 1%;
  373. }
  374. .ui.three.items>.item:nth-child(3n+1) {
  375. clear: right;
  376. }
  377. .ui.four.items {
  378. margin-right: -.5%;
  379. margin-left: -.5%;
  380. }
  381. .ui.four.items>.item {
  382. width: 24%;
  383. margin-right: .5%;
  384. margin-left: .5%;
  385. }
  386. .ui.four.items>.item:nth-child(4n+1) {
  387. clear: right;
  388. }
  389. .ui.five.items {
  390. margin-right: -.5%;
  391. margin-left: -.5%;
  392. }
  393. .ui.five.items>.item {
  394. width: 19%;
  395. margin-right: .5%;
  396. margin-left: .5%;
  397. }
  398. .ui.five.items>.item:nth-child(5n+1) {
  399. clear: right;
  400. }
  401. .ui.six.items {
  402. margin-right: -.5%;
  403. margin-left: -.5%;
  404. }
  405. .ui.six.items>.item {
  406. width: 15.66%;
  407. margin-right: .5%;
  408. margin-left: .5%;
  409. }
  410. .ui.six.items>.item:nth-child(6n+1) {
  411. clear: right;
  412. }
  413. .ui.seven.items {
  414. margin-right: -.5%;
  415. margin-left: -.5%;
  416. }
  417. .ui.seven.items>.item {
  418. width: 13.28%;
  419. margin-right: .5%;
  420. margin-left: .5%;
  421. font-size: 11px;
  422. }
  423. .ui.seven.items>.item:nth-child(7n+1) {
  424. clear: right;
  425. }
  426. .ui.eight.items {
  427. margin-right: -.25%;
  428. margin-left: -.25%;
  429. }
  430. .ui.eight.items>.item {
  431. width: 12%;
  432. margin-right: .25%;
  433. margin-left: .25%;
  434. font-size: 11px;
  435. }
  436. .ui.eight.items>.item:nth-child(8n+1) {
  437. clear: right;
  438. }
  439. .ui.nine.items {
  440. margin-right: -.25%;
  441. margin-left: -.25%;
  442. }
  443. .ui.nine.items>.item {
  444. width: 10.61%;
  445. margin-right: .25%;
  446. margin-left: .25%;
  447. font-size: 10px;
  448. }
  449. .ui.nine.items>.item:nth-child(9n+1) {
  450. clear: right;
  451. }
  452. .ui.ten.items {
  453. margin-right: -.2%;
  454. margin-left: -.2%;
  455. }
  456. .ui.ten.items>.item {
  457. width: 9.6%;
  458. margin-right: .2%;
  459. margin-left: .2%;
  460. font-size: 10px;
  461. }
  462. .ui.ten.items>.item:nth-child(10n+1) {
  463. clear: right;
  464. }
  465. .ui.eleven.items {
  466. margin-right: -.2%;
  467. margin-left: -.2%;
  468. }
  469. .ui.eleven.items>.item {
  470. width: 8.69%;
  471. margin-right: .2%;
  472. margin-left: .2%;
  473. font-size: 9px;
  474. }
  475. .ui.eleven.items>.item:nth-child(11n+1) {
  476. clear: right;
  477. }
  478. .ui.twelve.items {
  479. margin-right: -.1%;
  480. margin-left: -.1%;
  481. }
  482. .ui.twelve.items>.item {
  483. width: 8.1333%;
  484. margin-right: .1%;
  485. margin-left: .1%;
  486. font-size: 9px;
  487. }
  488. .ui.twelve.items>.item:nth-child(12n+1) {
  489. clear: right;
  490. }