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.

567 lines
13 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
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Item
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Theme
  13. *******************************/
  14. /*
  15. */
  16. /*******************************
  17. Folders
  18. *******************************/
  19. /* Path to theme packages */
  20. /* Path to site override folder */
  21. /*******************************
  22. Themes
  23. *******************************/
  24. /* To override a theme for an individual element
  25. specify theme name below
  26. Be sure to update the user folder name (see README)
  27. */
  28. /* Global */
  29. /* Elements */
  30. /* Collections */
  31. /* Modules */
  32. /* Views */
  33. /*******************************
  34. Import Directives
  35. *******************************/
  36. /*------------------
  37. Load Defaults
  38. -------------------*/
  39. /*******************************
  40. Site Settings
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Fonts
  47. --------------------*/
  48. /*-------------------
  49. Site Colors
  50. --------------------*/
  51. /*--- Colors ---*/
  52. /*--- Light Colors ---*/
  53. /*-------------------
  54. Page
  55. --------------------*/
  56. /* Used to match floats with text */
  57. /*-------------------
  58. Background Colors
  59. --------------------*/
  60. /* Used for differentiating neutrals */
  61. /* Used for differentiating layers */
  62. /*-------------------
  63. Grid
  64. --------------------*/
  65. /*-------------------
  66. Breakpoints
  67. --------------------*/
  68. /*******************************
  69. Power-User
  70. *******************************/
  71. /*-------------------
  72. Icons
  73. --------------------*/
  74. /* Max Width of Icon */
  75. /*-------------------
  76. Easing
  77. --------------------*/
  78. /*--- Neutrals ---*/
  79. /*--- Colored Backgrounds ---*/
  80. /*--- Colored Text ---*/
  81. /*--- Colored Headers ---*/
  82. /*-------------------
  83. Emotive Colors
  84. --------------------*/
  85. /* Mood */
  86. /* Status */
  87. /* Darkened Headers */
  88. /*-------------------
  89. Neutral Text
  90. --------------------*/
  91. /*-------------------
  92. Brand Colors
  93. --------------------*/
  94. /*-------------------
  95. Grid Columns
  96. --------------------*/
  97. /*-------------------
  98. Borders
  99. --------------------*/
  100. /*-------------------
  101. Sizes
  102. --------------------*/
  103. /*-------------------
  104. Transitions
  105. --------------------*/
  106. /*******************************
  107. States
  108. *******************************/
  109. /*-------------------
  110. Disabled
  111. --------------------*/
  112. /*-------------------
  113. Hover
  114. --------------------*/
  115. /*--- Colors ---*/
  116. /*--- Emotive ---*/
  117. /*--- Neutrals ---*/
  118. /*-------------------
  119. Down (:active)
  120. --------------------*/
  121. /*--- Colors ---*/
  122. /*--- Emotive ---*/
  123. /*--- Neutrals ---*/
  124. /*-------------------
  125. Active
  126. --------------------*/
  127. /*--- Standard ---*/
  128. /*--- Emotive ---*/
  129. /*--- Neutrals ---*/
  130. /*******************************
  131. Item
  132. *******************************/
  133. /*-------------------
  134. View
  135. --------------------*/
  136. /* Group */
  137. /* Item */
  138. /* Responsive */
  139. /*-------------------
  140. Content
  141. --------------------*/
  142. /* Image */
  143. /* Content */
  144. /* Header */
  145. /* Metadata */
  146. /* Icons */
  147. /* Actions */
  148. /* Links */
  149. /* Description */
  150. /* Content Image */
  151. /* Avatar Image */
  152. /* Paragraph */
  153. /* Additional Content */
  154. /*-------------------
  155. Variations
  156. --------------------*/
  157. /* Relaxed */
  158. /* Divided */
  159. /* Sizes */
  160. /*------------------
  161. Load Theme
  162. -------------------*/
  163. /*------------------
  164. Load Site
  165. -------------------*/
  166. /*******************************
  167. User Global Variables
  168. *******************************/
  169. /*******************************
  170. User Variable Overrides
  171. *******************************/
  172. /*------------------
  173. Override Loader
  174. -------------------*/
  175. /*******************************
  176. Standard
  177. *******************************/
  178. /*--------------
  179. Item
  180. ---------------*/
  181. .ui.items > .item {
  182. table-layout: fixed;
  183. display: table;
  184. margin: 1em 0em;
  185. width: 100%;
  186. min-height: 0px;
  187. background: transparent;
  188. padding: 0em;
  189. border: none;
  190. border-radius: 0rem;
  191. box-shadow: none;
  192. -webkit-transition: box-shadow 0.2s ease;
  193. transition: box-shadow 0.2s ease;
  194. z-index: '';
  195. }
  196. .ui.items > .item a {
  197. cursor: pointer;
  198. }
  199. /*--------------
  200. Items
  201. ---------------*/
  202. .ui.items {
  203. margin: 1.5em 0em;
  204. }
  205. .ui.items:first-child {
  206. margin-top: 0em !important;
  207. }
  208. .ui.items:last-child {
  209. margin-bottom: 0em !important;
  210. }
  211. /*--------------
  212. Item
  213. ---------------*/
  214. .ui.items > .item {
  215. min-width: 100%;
  216. }
  217. .ui.items > .item:after {
  218. display: block;
  219. content: ' ';
  220. height: 0px;
  221. clear: both;
  222. overflow: hidden;
  223. visibility: hidden;
  224. }
  225. .ui.items > .item:first-child {
  226. margin-top: 0em;
  227. }
  228. .ui.items > .item:last-child {
  229. margin-bottom: 0em;
  230. }
  231. /*--------------
  232. Images
  233. ---------------*/
  234. .ui.items > .item > .image {
  235. position: relative;
  236. display: table-cell;
  237. float: none;
  238. margin: 0em;
  239. padding: 0em;
  240. max-height: '';
  241. vertical-align: top;
  242. }
  243. .ui.items > .item > .image > img {
  244. display: block;
  245. width: 100%;
  246. height: auto;
  247. border-radius: 0.125rem;
  248. border: none;
  249. }
  250. .ui.items > .item > .image:only-child > img {
  251. border-radius: 0rem;
  252. }
  253. /*--------------
  254. Content
  255. ---------------*/
  256. .ui.items > .item > .content {
  257. display: block;
  258. background: none;
  259. margin: 0em;
  260. padding: 0em;
  261. box-shadow: none;
  262. font-size: 1em;
  263. border: none;
  264. border-radius: 0em;
  265. }
  266. .ui.items > .item > .content:after {
  267. display: block;
  268. content: ' ';
  269. height: 0px;
  270. clear: both;
  271. overflow: hidden;
  272. visibility: hidden;
  273. }
  274. .ui.items > .item > .image + .content {
  275. width: 100%;
  276. display: table-cell;
  277. margin-left: 0em;
  278. vertical-align: top;
  279. padding-left: 1.5em;
  280. }
  281. .ui.items > .item > .content > .header {
  282. display: inline-block;
  283. margin: -0.165em 0em 0em;
  284. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  285. font-weight: bold;
  286. color: rgba(0, 0, 0, 0.85);
  287. }
  288. /* Default Header Size */
  289. .ui.items > .item > .content > .header:not(.ui) {
  290. font-size: 1.2em;
  291. }
  292. .ui.items > .item > .content > .meta + .description {
  293. margin-top: 0.6em;
  294. }
  295. /*--------------
  296. Floated
  297. ---------------*/
  298. .ui.items > .item .left.floated {
  299. float: left;
  300. }
  301. .ui.items > .item [class*="right floated"] {
  302. float: right;
  303. }
  304. /*--------------
  305. Content Image
  306. ---------------*/
  307. .ui.items > .item .content img {
  308. display: inline-block;
  309. vertical-align: middle;
  310. width: 2em;
  311. }
  312. .ui.items > .item img.avatar,
  313. .ui.items > .item .avatar img {
  314. width: 2em;
  315. height: 2em;
  316. border-radius: 500rem;
  317. }
  318. /*--------------
  319. Description
  320. ---------------*/
  321. .ui.items > .item > .content > .description {
  322. max-width: 550px;
  323. font-size: 1em;
  324. line-height: 1.33;
  325. color: rgba(0, 0, 0, 0.8);
  326. }
  327. /*--------------
  328. Paragraph
  329. ---------------*/
  330. .ui.items > .item > .content p {
  331. margin: 0em 0em 0.5em;
  332. }
  333. .ui.items > .item > .content p:last-child {
  334. margin-bottom: 0em;
  335. }
  336. /*--------------
  337. Meta
  338. ---------------*/
  339. .ui.items > .item .meta {
  340. font-size: 1em;
  341. line-height: 1em;
  342. color: rgba(0, 0, 0, 0.6);
  343. }
  344. .ui.items > .item .meta * {
  345. margin-right: 0.3em;
  346. }
  347. .ui.items > .item .meta :last-child {
  348. margin-right: 0em;
  349. }
  350. .ui.items > .item .meta [class*="right floated"] {
  351. margin-right: 0em;
  352. margin-left: 0.3em;
  353. }
  354. /*--------------
  355. Links
  356. ---------------*/
  357. /* Generic */
  358. .ui.items > .item > .content a {
  359. color: #009fda;
  360. -webkit-transition: color 0.2s ease;
  361. transition: color 0.2s ease;
  362. }
  363. .ui.items > .item > .content a:hover {
  364. color: #00b2f3;
  365. }
  366. /* Header */
  367. .ui.items > .item > .content > a.header {
  368. color: rgba(0, 0, 0, 0.85);
  369. }
  370. .ui.items > .item > .content > a.header:hover {
  371. color: #00b2f3;
  372. }
  373. /* Meta */
  374. .ui.items > .item .meta a {
  375. color: rgba(0, 0, 0, 0.4);
  376. }
  377. .ui.items > .item .meta a:hover {
  378. color: rgba(0, 0, 0, 0.8);
  379. }
  380. /*--------------
  381. Labels
  382. ---------------*/
  383. /*-----Star----- */
  384. /* Icon */
  385. .ui.items > .item > .content .favorite.icon {
  386. cursor: pointer;
  387. opacity: 0.75;
  388. -webkit-transition: color 0.2s ease;
  389. transition: color 0.2s ease;
  390. }
  391. .ui.items > .item > .content .favorite.icon:hover {
  392. opacity: 1;
  393. color: #ffb70a;
  394. }
  395. .ui.items > .item > .content .active.favorite.icon {
  396. color: #ffb70a;
  397. }
  398. /*-----Like----- */
  399. /* Icon */
  400. .ui.items > .item > .content .like.icon {
  401. cursor: pointer;
  402. opacity: 0.75;
  403. -webkit-transition: color 0.2s ease;
  404. transition: color 0.2s ease;
  405. }
  406. .ui.items > .item > .content .like.icon:hover {
  407. opacity: 1;
  408. color: #ff2733;
  409. }
  410. .ui.items > .item > .content .active.like.icon {
  411. color: #ff2733;
  412. }
  413. /*----------------
  414. Extra Content
  415. -----------------*/
  416. .ui.items > .item .extra {
  417. display: block;
  418. position: relative;
  419. background: none;
  420. margin: 0.5rem 0em 0em;
  421. width: 100%;
  422. padding: 0em 0em 0em;
  423. top: 0em;
  424. left: 0em;
  425. color: rgba(0, 0, 0, 0.4);
  426. box-shadow: none;
  427. -webkit-transition: color 0.2s ease;
  428. transition: color 0.2s ease;
  429. border-top: none;
  430. }
  431. .ui.items > .item .extra > * {
  432. margin: 0.5rem 0.5rem 0em 0em;
  433. }
  434. .ui.items > .item .extra > [class*="right floated"] {
  435. margin: 0.5rem 0em 0em 0.5rem;
  436. }
  437. .ui.items > .item .extra:after {
  438. display: block;
  439. content: ' ';
  440. height: 0px;
  441. clear: both;
  442. overflow: hidden;
  443. visibility: hidden;
  444. }
  445. /*******************************
  446. Responsive
  447. *******************************/
  448. /* Default Image Width */
  449. .ui.items > .item > .image:not(.ui) {
  450. width: 175px;
  451. }
  452. /* Tablet Only */
  453. @media only screen and (min-width: 768px) and (max-width: 991px) {
  454. .ui.items > .item {
  455. margin: 1em 0em;
  456. }
  457. .ui.items > .item > .image:not(.ui) {
  458. width: 150px;
  459. }
  460. .ui.items > .item > .image + .content {
  461. display: block;
  462. padding: 0em 0em 0em 1em;
  463. }
  464. }
  465. /* Mobily Only */
  466. @media only screen and (max-width: 767px) {
  467. .ui.items > .item {
  468. margin: 2em 0em;
  469. }
  470. .ui.items > .item > .image {
  471. display: block;
  472. margin-left: auto;
  473. margin-right: auto;
  474. }
  475. .ui.items > .item > .image,
  476. .ui.items > .item > .image > img {
  477. max-width: 100% !important;
  478. width: auto !important;
  479. max-height: 250px !important;
  480. }
  481. .ui.items > .item > .image + .content {
  482. display: block;
  483. padding: 1.5em 0em 0em;
  484. }
  485. }
  486. /*******************************
  487. Variations
  488. *******************************/
  489. /*-------------------
  490. Aligned
  491. --------------------*/
  492. .ui.items > .item > .image + [class*="top aligned"].content {
  493. vertical-align: top;
  494. }
  495. .ui.items > .item > .image + [class*="middle aligned"].content {
  496. vertical-align: middle;
  497. }
  498. .ui.items > .item > .image + [class*="bottom aligned"].content {
  499. vertical-align: bottom;
  500. }
  501. /*--------------
  502. Relaxed
  503. ---------------*/
  504. .ui.relaxed.items > .item {
  505. margin: 1.5em 0em;
  506. }
  507. .ui[class*="very relaxed"].items > .item {
  508. margin: 2em 0em;
  509. }
  510. /*-------------------
  511. Divided
  512. --------------------*/
  513. .ui.divided.items > .item {
  514. border-top: 1px solid rgba(0, 0, 0, 0.15);
  515. margin: 0em;
  516. padding: 1em 0em;
  517. }
  518. .ui.divided.items > .item:first-child {
  519. border-top: none;
  520. margin-top: 0em !important;
  521. padding-top: 0em !important;
  522. }
  523. .ui.divided.items > .item:last-child {
  524. margin-bottom: 0em !important;
  525. padding-bottom: 0em !important;
  526. }
  527. /* Relaxed Divided */
  528. .ui.relaxed.divided.items > .item {
  529. margin: 0em;
  530. padding: 1.5em 0em;
  531. }
  532. .ui[class*="very relaxed"].divided.items > .item {
  533. margin: 0em;
  534. padding: 2em 0em;
  535. }
  536. /*-------------------
  537. Link
  538. --------------------*/
  539. .ui.items a.item:hover,
  540. .ui.link.items > .item:hover {
  541. cursor: pointer;
  542. }
  543. .ui.items a.item:hover .content .header,
  544. .ui.link.items > .item:hover .content .header {
  545. color: #00b2f3;
  546. }
  547. /*--------------
  548. Size
  549. ---------------*/
  550. .ui.items > .item {
  551. font-size: 1em;
  552. }
  553. /*******************************
  554. Overrides
  555. *******************************/
  556. /*******************************
  557. User Variable Overrides
  558. *******************************/