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.

481 lines
8.9 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
  1. /*!
  2. * # Semantic UI 2.0.0 - Item
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributorss
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Standard
  13. *******************************/
  14. /*--------------
  15. Item
  16. ---------------*/
  17. .ui.items > .item {
  18. display: -webkit-box;
  19. display: -webkit-flex;
  20. display: -ms-flexbox;
  21. display: flex;
  22. margin: 1em 0em;
  23. width: 100%;
  24. min-height: 0px;
  25. background: transparent;
  26. padding: 0em;
  27. border: none;
  28. border-radius: 0rem;
  29. box-shadow: none;
  30. -webkit-transition: box-shadow 0.2s ease;
  31. transition: box-shadow 0.2s ease;
  32. z-index: '';
  33. }
  34. .ui.items > .item a {
  35. cursor: pointer;
  36. }
  37. /*--------------
  38. Items
  39. ---------------*/
  40. .ui.items {
  41. margin: 1.5em 0em;
  42. }
  43. .ui.items:first-child {
  44. margin-top: 0em !important;
  45. }
  46. .ui.items:last-child {
  47. margin-bottom: 0em !important;
  48. }
  49. /*--------------
  50. Item
  51. ---------------*/
  52. .ui.items > .item:after {
  53. display: block;
  54. content: ' ';
  55. height: 0px;
  56. clear: both;
  57. overflow: hidden;
  58. visibility: hidden;
  59. }
  60. .ui.items > .item:first-child {
  61. margin-top: 0em;
  62. }
  63. .ui.items > .item:last-child {
  64. margin-bottom: 0em;
  65. }
  66. /*--------------
  67. Images
  68. ---------------*/
  69. .ui.items > .item > .image {
  70. position: relative;
  71. -webkit-box-flex: 0;
  72. -webkit-flex: 0 0 auto;
  73. -ms-flex: 0 0 auto;
  74. flex: 0 0 auto;
  75. display: block;
  76. float: none;
  77. margin: 0em;
  78. padding: 0em;
  79. max-height: '';
  80. -webkit-align-self: top;
  81. -ms-flex-item-align: top;
  82. align-self: top;
  83. }
  84. .ui.items > .item > .image > img {
  85. display: block;
  86. width: 100%;
  87. height: auto;
  88. border-radius: 0.125rem;
  89. border: none;
  90. }
  91. .ui.items > .item > .image:only-child > img {
  92. border-radius: 0rem;
  93. }
  94. /*--------------
  95. Content
  96. ---------------*/
  97. .ui.items > .item > .content {
  98. display: block;
  99. -webkit-box-flex: 1;
  100. -webkit-flex: 1 1 auto;
  101. -ms-flex: 1 1 auto;
  102. flex: 1 1 auto;
  103. background: none;
  104. margin: 0em;
  105. padding: 0em;
  106. box-shadow: none;
  107. font-size: 1em;
  108. border: none;
  109. border-radius: 0em;
  110. }
  111. .ui.items > .item > .content:after {
  112. display: block;
  113. content: ' ';
  114. height: 0px;
  115. clear: both;
  116. overflow: hidden;
  117. visibility: hidden;
  118. }
  119. .ui.items > .item > .image + .content {
  120. width: auto;
  121. display: block;
  122. margin-left: 0em;
  123. -webkit-align-self: top;
  124. -ms-flex-item-align: top;
  125. align-self: top;
  126. padding-left: 1.5em;
  127. }
  128. .ui.items > .item > .content > .header {
  129. display: block;
  130. margin: -0.21425em 0em 0em;
  131. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  132. font-weight: bold;
  133. color: rgba(0, 0, 0, 0.85);
  134. }
  135. /* Default Header Size */
  136. .ui.items > .item > .content > .header:not(.ui) {
  137. font-size: 1.28571429em;
  138. }
  139. /*--------------
  140. Floated
  141. ---------------*/
  142. .ui.items > .item [class*="left floated"] {
  143. float: left;
  144. }
  145. .ui.items > .item [class*="right floated"] {
  146. float: right;
  147. }
  148. /*--------------
  149. Content Image
  150. ---------------*/
  151. .ui.items > .item .content img {
  152. -webkit-align-self: middle;
  153. -ms-flex-item-align: middle;
  154. align-self: middle;
  155. width: '';
  156. }
  157. .ui.items > .item img.avatar,
  158. .ui.items > .item .avatar img {
  159. width: '';
  160. height: '';
  161. border-radius: 500rem;
  162. }
  163. /*--------------
  164. Description
  165. ---------------*/
  166. .ui.items > .item > .content > .description {
  167. margin-top: 0.6em;
  168. max-width: auto;
  169. font-size: 1em;
  170. line-height: 1.4285em;
  171. color: rgba(0, 0, 0, 0.8);
  172. }
  173. /*--------------
  174. Paragraph
  175. ---------------*/
  176. .ui.items > .item > .content p {
  177. margin: 0em 0em 0.5em;
  178. }
  179. .ui.items > .item > .content p:last-child {
  180. margin-bottom: 0em;
  181. }
  182. /*--------------
  183. Meta
  184. ---------------*/
  185. .ui.items > .item .meta {
  186. margin: 0.5em 0em 0.5em;
  187. font-size: 1em;
  188. line-height: 1em;
  189. color: rgba(0, 0, 0, 0.6);
  190. }
  191. .ui.items > .item .meta * {
  192. margin-right: 0.3em;
  193. }
  194. .ui.items > .item .meta :last-child {
  195. margin-right: 0em;
  196. }
  197. .ui.items > .item .meta [class*="right floated"] {
  198. margin-right: 0em;
  199. margin-left: 0.3em;
  200. }
  201. /*--------------
  202. Links
  203. ---------------*/
  204. /* Generic */
  205. .ui.items > .item > .content a:not(.ui) {
  206. color: '';
  207. -webkit-transition: color 0.2s ease;
  208. transition: color 0.2s ease;
  209. }
  210. .ui.items > .item > .content a:not(.ui):hover {
  211. color: '';
  212. }
  213. /* Header */
  214. .ui.items > .item > .content > a.header {
  215. color: rgba(0, 0, 0, 0.85);
  216. }
  217. .ui.items > .item > .content > a.header:hover {
  218. color: #2c76bf;
  219. }
  220. /* Meta */
  221. .ui.items > .item .meta > a:not(.ui) {
  222. color: rgba(0, 0, 0, 0.4);
  223. }
  224. .ui.items > .item .meta > a:not(.ui):hover {
  225. color: rgba(0, 0, 0, 0.8);
  226. }
  227. /*--------------
  228. Labels
  229. ---------------*/
  230. /*-----Star----- */
  231. /* Icon */
  232. .ui.items > .item > .content .favorite.icon {
  233. cursor: pointer;
  234. opacity: 0.75;
  235. -webkit-transition: color 0.2s ease;
  236. transition: color 0.2s ease;
  237. }
  238. .ui.items > .item > .content .favorite.icon:hover {
  239. opacity: 1;
  240. color: #ffb70a;
  241. }
  242. .ui.items > .item > .content .active.favorite.icon {
  243. color: #ffe623;
  244. }
  245. /*-----Like----- */
  246. /* Icon */
  247. .ui.items > .item > .content .like.icon {
  248. cursor: pointer;
  249. opacity: 0.75;
  250. -webkit-transition: color 0.2s ease;
  251. transition: color 0.2s ease;
  252. }
  253. .ui.items > .item > .content .like.icon:hover {
  254. opacity: 1;
  255. color: #ff2733;
  256. }
  257. .ui.items > .item > .content .active.like.icon {
  258. color: #ff2733;
  259. }
  260. /*----------------
  261. Extra Content
  262. -----------------*/
  263. .ui.items > .item .extra {
  264. display: block;
  265. position: relative;
  266. background: none;
  267. margin: 0.5rem 0em 0em;
  268. width: 100%;
  269. padding: 0em 0em 0em;
  270. top: 0em;
  271. left: 0em;
  272. color: rgba(0, 0, 0, 0.4);
  273. box-shadow: none;
  274. -webkit-transition: color 0.2s ease;
  275. transition: color 0.2s ease;
  276. border-top: none;
  277. }
  278. .ui.items > .item .extra > * {
  279. margin: 0.25rem 0.5rem 0.25rem 0em;
  280. }
  281. .ui.items > .item .extra > [class*="right floated"] {
  282. margin: 0.25rem 0em 0.25rem 0.5rem;
  283. }
  284. .ui.items > .item .extra:after {
  285. display: block;
  286. content: ' ';
  287. height: 0px;
  288. clear: both;
  289. overflow: hidden;
  290. visibility: hidden;
  291. }
  292. /*******************************
  293. Responsive
  294. *******************************/
  295. /* Default Image Width */
  296. .ui.items > .item > .image:not(.ui) {
  297. width: 175px;
  298. }
  299. /* Tablet Only */
  300. @media only screen and (min-width: 768px) and (max-width: 991px) {
  301. .ui.items > .item {
  302. margin: 1em 0em;
  303. }
  304. .ui.items > .item > .image:not(.ui) {
  305. width: 150px;
  306. }
  307. .ui.items > .item > .image + .content {
  308. display: block;
  309. padding: 0em 0em 0em 1em;
  310. }
  311. }
  312. /* Mobily Only */
  313. @media only screen and (max-width: 767px) {
  314. .ui.items > .item {
  315. -webkit-box-orient: vertical;
  316. -webkit-box-direction: normal;
  317. -webkit-flex-direction: column;
  318. -ms-flex-direction: column;
  319. flex-direction: column;
  320. margin: 2em 0em;
  321. }
  322. .ui.items > .item > .image {
  323. display: block;
  324. margin-left: auto;
  325. margin-right: auto;
  326. }
  327. .ui.items > .item > .image,
  328. .ui.items > .item > .image > img {
  329. max-width: 100% !important;
  330. width: auto !important;
  331. max-height: 250px !important;
  332. }
  333. .ui.items > .item > .image + .content {
  334. display: block;
  335. padding: 1.5em 0em 0em;
  336. }
  337. }
  338. /*******************************
  339. Variations
  340. *******************************/
  341. /*-------------------
  342. Aligned
  343. --------------------*/
  344. .ui.items > .item > .image + [class*="top aligned"].content {
  345. -webkit-align-self: top;
  346. -ms-flex-item-align: top;
  347. align-self: top;
  348. }
  349. .ui.items > .item > .image + [class*="middle aligned"].content {
  350. -webkit-align-self: center;
  351. -ms-flex-item-align: center;
  352. align-self: center;
  353. }
  354. .ui.items > .item > .image + [class*="bottom aligned"].content {
  355. -webkit-align-self: bottom;
  356. -ms-flex-item-align: bottom;
  357. align-self: bottom;
  358. }
  359. /*--------------
  360. Relaxed
  361. ---------------*/
  362. .ui.relaxed.items > .item {
  363. margin: 1.5em 0em;
  364. }
  365. .ui[class*="very relaxed"].items > .item {
  366. margin: 2em 0em;
  367. }
  368. /*-------------------
  369. Divided
  370. --------------------*/
  371. .ui.divided.items > .item {
  372. border-top: 1px solid rgba(34, 36, 38, 0.15);
  373. margin: 0em;
  374. padding: 1em 0em;
  375. }
  376. .ui.divided.items > .item:first-child {
  377. border-top: none;
  378. margin-top: 0em !important;
  379. padding-top: 0em !important;
  380. }
  381. .ui.divided.items > .item:last-child {
  382. margin-bottom: 0em !important;
  383. padding-bottom: 0em !important;
  384. }
  385. /* Relaxed Divided */
  386. .ui.relaxed.divided.items > .item {
  387. margin: 0em;
  388. padding: 1.5em 0em;
  389. }
  390. .ui[class*="very relaxed"].divided.items > .item {
  391. margin: 0em;
  392. padding: 2em 0em;
  393. }
  394. /*-------------------
  395. Link
  396. --------------------*/
  397. .ui.items a.item:hover,
  398. .ui.link.items > .item:hover {
  399. cursor: pointer;
  400. }
  401. .ui.items a.item:hover .content .header,
  402. .ui.link.items > .item:hover .content .header {
  403. color: #2c76bf;
  404. }
  405. /*--------------
  406. Size
  407. ---------------*/
  408. .ui.items > .item {
  409. font-size: 1em;
  410. }
  411. /*******************************
  412. Theme Overrides
  413. *******************************/
  414. /*******************************
  415. User Variable Overrides
  416. *******************************/