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.

464 lines
9.1 KiB

  1. /*
  2. * # Semantic - Segment
  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. */
  11. /*******************************
  12. Segment
  13. *******************************/
  14. .ui.segment {
  15. position: relative;
  16. background-color: #FFFFFF;
  17. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  18. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  19. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  20. margin: 1em 0em;
  21. padding: 1em;
  22. -webkit-border-radius: 5px 5px 5px 5px;
  23. -moz-border-radius: 5px 5px 5px 5px;
  24. border-radius: 5px 5px 5px 5px;
  25. -webkit-box-sizing: border-box;
  26. -moz-box-sizing: border-box;
  27. -ms-box-sizing: border-box;
  28. box-sizing: border-box;
  29. }
  30. .ui.segment:first-child {
  31. margin-top: 0em;
  32. }
  33. .ui.segment:last-child {
  34. margin-bottom: 0em;
  35. }
  36. .ui.segment:after {
  37. content: '';
  38. display: block;
  39. height: 0;
  40. clear: both;
  41. visibility: hidden;
  42. }
  43. .ui.vertical.segment {
  44. margin: 0em;
  45. padding-left: 0em;
  46. padding-right: 0em;
  47. background-color: transparent;
  48. -webkit-border-radius: 0px;
  49. -moz-border-radius: 0px;
  50. border-radius: 0px;
  51. -webkit-box-shadow:
  52. 0px 1px 0px rgba(0, 0, 0, 0.1)
  53. ;
  54. -moz-box-shadow:
  55. 0px 1px 0px rgba(0, 0, 0, 0.1)
  56. ;
  57. box-shadow:
  58. 0px 1px 0px rgba(0, 0, 0, 0.1)
  59. ;
  60. }
  61. .ui.vertical.segment:first-child {
  62. padding-top: 0em;
  63. }
  64. .ui.horizontal.segment {
  65. margin: 0em;
  66. padding-top: 0em;
  67. padding-bottom: 0em;
  68. background-color: transparent;
  69. -webkit-border-radius: 0px;
  70. -moz-border-radius: 0px;
  71. border-radius: 0px;
  72. -webkit-box-shadow:
  73. 1px 0px 0px rgba(0, 0, 0, 0.1)
  74. ;
  75. -moz-box-shadow:
  76. 1px 0px 0px rgba(0, 0, 0, 0.1)
  77. ;
  78. box-shadow:
  79. 1px 0px 0px rgba(0, 0, 0, 0.1)
  80. ;
  81. }
  82. .ui.horizontal.segment:first-child {
  83. padding-left: 0em;
  84. }
  85. /*-------------------
  86. Loose Coupling
  87. --------------------*/
  88. .ui.pointing.menu + .ui.attached.segment {
  89. top: 1px;
  90. }
  91. /* No padding on edge content */
  92. .ui.segment > :first-child {
  93. margin-top: 0em;
  94. }
  95. .ui.segment > :last-child {
  96. margin-bottom: 0em;
  97. }
  98. /* Padding on next content after a label */
  99. .ui.segment > .attached.label:first-child + * {
  100. margin-top: 2em;
  101. }
  102. .ui.segment > .bottom.attached.label:first-child ~ :last-child {
  103. margin-top: 0em;
  104. margin-bottom: 2em;
  105. }
  106. /*******************************
  107. Types
  108. *******************************/
  109. /*-------------------
  110. Piled
  111. --------------------*/
  112. .ui.piled.segment {
  113. margin: 2em 0em;
  114. -webkit-box-shadow:
  115. 0px 0px 1px 1px rgba(0, 0, 0, 0.15)
  116. ;
  117. -moz-box-shadow:
  118. 0px 0px 1px 1px rgba(0, 0, 0, 0.15)
  119. ;
  120. -ms-box-shadow:
  121. 0px 0px 1px 1px rgba(0, 0, 0, 0.15)
  122. ;
  123. -o-box-shadow:
  124. 0px 0px 1px 1px rgba(0, 0, 0, 0.15)
  125. ;
  126. box-shadow:
  127. 0px 0px 1px 1px rgba(0, 0, 0, 0.15)
  128. ;
  129. }
  130. .ui.piled.segment:first-child {
  131. margin-top: 0em;
  132. }
  133. .ui.piled.segment:last-child {
  134. margin-bottom: 0em;
  135. }
  136. .ui.piled.segment:after,
  137. .ui.piled.segment:before {
  138. background-color: #FFFFFF;
  139. visibility: visible;
  140. content: "";
  141. display: block;
  142. height: 100%;
  143. left: -1px;
  144. position: absolute;
  145. width: 100%;
  146. -webkit-box-shadow:
  147. 0px 0px 1px 1px rgba(0, 0, 0, 0.1)
  148. ;
  149. -moz-box-shadow:
  150. 0px 0px 1px 1px rgba(0, 0, 0, 0.1)
  151. ;
  152. box-shadow:
  153. 0px 0px 1px 1px rgba(0, 0, 0, 0.1)
  154. ;
  155. }
  156. .ui.piled.segment:after {
  157. -webkit-transform: rotate(1.2deg);
  158. -moz-transform: rotate(1.2deg);
  159. -ms-transform: rotate(1.2deg);
  160. -o-transform: rotate(1.2deg);
  161. transform: rotate(1.2deg);
  162. top: 0;
  163. z-index: -1;
  164. }
  165. .ui.piled.segment:before {
  166. -webkit-transform: rotate(-1.2deg);
  167. -moz-transform: rotate(-1.2deg);
  168. -ms-transform: rotate(-1.2deg);
  169. -o-transform: rotate(-1.2deg);
  170. transform: rotate(-1.2deg);
  171. top: 0;
  172. z-index: -2;
  173. }
  174. /*-------------------
  175. Stacked
  176. --------------------*/
  177. .ui.stacked.segment {
  178. padding-bottom: 1.7em;
  179. }
  180. .ui.stacked.segment:after,
  181. .ui.stacked.segment:before {
  182. content: '';
  183. position: absolute;
  184. bottom: -3px;
  185. left: 0%;
  186. border-top: 1px solid rgba(0, 0, 0, 0.1);
  187. background-color: rgba(0, 0, 0, 0.02);
  188. width: 100%;
  189. height: 5px;
  190. visibility: visible;
  191. }
  192. .ui.stacked.segment:before {
  193. bottom: 0px;
  194. }
  195. /* Inverted */
  196. .ui.stacked.inverted.segment:after,
  197. .ui.stacked.inverted.segment:before {
  198. background-color: rgba(255, 255, 255, 0.1);
  199. border-top: 1px solid rgba(255, 255, 255, 0.35);
  200. }
  201. /*-------------------
  202. Raised
  203. --------------------*/
  204. .ui.raised.segment {
  205. -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
  206. -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
  207. box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
  208. }
  209. /*******************************
  210. States
  211. *******************************/
  212. .ui.disabled.segment {
  213. opacity: 0.8;
  214. color: #DDDDDD;
  215. }
  216. /*******************************
  217. Variations
  218. *******************************/
  219. /*-------------------
  220. Basic
  221. --------------------*/
  222. .ui.basic.segment {
  223. position: relative;
  224. background-color: transparent;
  225. -webkit-box-shadow: none;
  226. -moz-box-shadow: none;
  227. box-shadow: none;
  228. -webkit-border-radius: 0px;
  229. -moz-border-radius: 0px;
  230. border-radius: 0px;
  231. }
  232. .ui.basic.segment:first-child {
  233. padding-top: 0em;
  234. }
  235. .ui.basic.segment:last-child {
  236. padding-bottom: 0em;
  237. }
  238. /*-------------------
  239. Fittted
  240. --------------------*/
  241. .ui.fitted.segment {
  242. padding: 0em;
  243. }
  244. /*-------------------
  245. Colors
  246. --------------------*/
  247. .ui.blue.segment {
  248. border-top: 0.2em solid #6ECFF5;
  249. }
  250. .ui.green.segment {
  251. border-top: 0.2em solid #A1CF64;
  252. }
  253. .ui.red.segment {
  254. border-top: 0.2em solid #D95C5C;
  255. }
  256. .ui.purple.segment {
  257. border-top: 0.2em solid #564F8A;
  258. }
  259. .ui.teal.segment {
  260. border-top: 0.2em solid #00B5AD;
  261. }
  262. /*-------------------
  263. Inverted Colors
  264. --------------------*/
  265. .ui.inverted.black.segment {
  266. background-color: #5C6166 !important;
  267. color: #FFFFFF !important;
  268. }
  269. .ui.inverted.blue.segment {
  270. background-color: #6ECFF5 !important;
  271. color: #FFFFFF !important;
  272. }
  273. .ui.inverted.green.segment {
  274. background-color: #A1CF64 !important;
  275. color: #FFFFFF !important;
  276. }
  277. .ui.inverted.red.segment {
  278. background-color: #D95C5C !important;
  279. color: #FFFFFF !important;
  280. }
  281. .ui.inverted.purple.segment {
  282. background-color: #564F8A !important;
  283. color: #FFFFFF !important;
  284. }
  285. .ui.inverted.teal.segment {
  286. background-color: #00B5AD !important;
  287. color: #FFFFFF !important;
  288. }
  289. /*-------------------
  290. Aligned
  291. --------------------*/
  292. .ui.left.aligned.segment {
  293. text-align: left;
  294. }
  295. .ui.right.aligned.segment {
  296. text-align: right;
  297. }
  298. .ui.center.aligned.segment {
  299. text-align: center;
  300. }
  301. /*-------------------
  302. Floated
  303. --------------------*/
  304. .ui.floated.segment,
  305. .ui.left.floated.segment {
  306. float: left;
  307. }
  308. .ui.right.floated.segment {
  309. float: right;
  310. }
  311. /*-------------------
  312. Inverted
  313. --------------------*/
  314. .ui.inverted.segment {
  315. border: none;
  316. -webkit-box-shadow: none;
  317. -moz-box-shadow: none;
  318. box-shadow: none;
  319. }
  320. .ui.inverted.segment,
  321. .ui.primary.inverted.segment {
  322. background-color: #222222;
  323. color: #FFFFFF;
  324. }
  325. /*-------------------
  326. Ordinality
  327. --------------------*/
  328. .ui.primary.segment {
  329. background-color: #FFFFFF;
  330. color: #555555;
  331. }
  332. .ui.secondary.segment {
  333. background-color: #FAF9FA;
  334. color: #777777;
  335. }
  336. .ui.tertiary.segment {
  337. background-color: #EBEBEB;
  338. color: #B0B0B0;
  339. }
  340. .ui.secondary.inverted.segment {
  341. background-color: #555555;
  342. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.3)));
  343. background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
  344. background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
  345. background-image: -o-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
  346. background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
  347. color: #FAFAFA;
  348. }
  349. .ui.tertiary.inverted.segment {
  350. background-color: #555555;
  351. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6)));
  352. background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
  353. background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
  354. background-image: -o-linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
  355. background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
  356. color: #EEEEEE;
  357. }
  358. /*-------------------
  359. Attached
  360. --------------------*/
  361. .ui.segment.attached {
  362. top: -1px;
  363. bottom: -1px;
  364. -moz-border-radius: 0px;
  365. -webkit-border-radius: 0px;
  366. border-radius: 0px;
  367. margin: 0em;
  368. -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
  369. -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
  370. box-shadow: 0px 0px 0px 1px #DDDDDD;
  371. }
  372. .ui.top.attached.segment {
  373. top: 0px;
  374. bottom: -1px;
  375. margin-top: 1em;
  376. margin-bottom: 0em;
  377. -moz-border-radius: 5px 5px 0px 0px;
  378. -webkit-border-radius: 5px 5px 0px 0px;
  379. border-radius: 5px 5px 0px 0px;
  380. }
  381. .ui.segment.bottom.attached {
  382. top: -1px;
  383. bottom: 0px;
  384. margin-top: 0em;
  385. margin-bottom: 1em;
  386. -moz-border-radius: 0px 0px 5px 5px;
  387. -webkit-border-radius: 0px 0px 5px 5px;
  388. border-radius: 0px 0px 5px 5px;
  389. }