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.

651 lines
12 KiB

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