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.

323 lines
6.3 KiB

  1. .ui.segment {
  2. position: relative;
  3. background-color: #FFF;
  4. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1);
  5. box-shadow: 0 0 0 1px rgba(0,0,0,.1);
  6. margin: 1em 0;
  7. padding: 1em;
  8. border-radius: 5px;
  9. -webkit-box-sizing: border-box;
  10. -moz-box-sizing: border-box;
  11. -ms-box-sizing: border-box;
  12. box-sizing: border-box;
  13. }
  14. .ui.segment:first-child {
  15. margin-top: 0;
  16. }
  17. .ui.segment:last-child {
  18. margin-bottom: 0;
  19. }
  20. .ui.segment:after {
  21. content: '';
  22. display: block;
  23. height: 0;
  24. clear: both;
  25. visibility: hidden;
  26. }
  27. .ui.vertical.segment {
  28. margin: 0;
  29. padding-left: 0;
  30. padding-right: 0;
  31. background-color: transparent;
  32. border-radius: 0;
  33. -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1);
  34. box-shadow: 0 1px 0 rgba(0,0,0,.1);
  35. }
  36. .ui.vertical.segment:first-child {
  37. padding-top: 0;
  38. }
  39. .ui.horizontal.segment {
  40. margin: 0;
  41. padding-top: 0;
  42. padding-bottom: 0;
  43. background-color: transparent;
  44. border-radius: 0;
  45. -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.1);
  46. box-shadow: 1px 0 0 rgba(0,0,0,.1);
  47. }
  48. .ui.horizontal.segment:first-child {
  49. padding-left: 0;
  50. }
  51. .ui.pointing.menu+.ui.attached.segment {
  52. top: 1px;
  53. }
  54. .ui.segment>:first-child {
  55. margin-top: 0;
  56. }
  57. .ui.segment>:last-child {
  58. margin-bottom: 0;
  59. }
  60. .ui.piled.segment {
  61. margin: 2em 0;
  62. -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.15);
  63. -ms-box-shadow: 0 0 1px 1px rgba(0,0,0,.15);
  64. -o-box-shadow: 0 0 1px 1px rgba(0,0,0,.15);
  65. box-shadow: 0 0 1px 1px rgba(0,0,0,.15);
  66. }
  67. .ui.piled.segment:first-child {
  68. margin-top: 0;
  69. }
  70. .ui.piled.segment:last-child {
  71. margin-bottom: 0;
  72. }
  73. .ui.piled.segment:after,
  74. .ui.piled.segment:before {
  75. background-color: #FFF;
  76. visibility: visible;
  77. content: "";
  78. display: block;
  79. height: 100%;
  80. left: -1px;
  81. position: absolute;
  82. width: 100%;
  83. -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
  84. box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
  85. }
  86. .ui.piled.segment:after {
  87. -webkit-transform: rotate(1.2deg);
  88. -ms-transform: rotate(1.2deg);
  89. transform: rotate(1.2deg);
  90. top: 0;
  91. z-index: -1;
  92. }
  93. .ui.piled.segment:before {
  94. -webkit-transform: rotate(-1.2deg);
  95. -ms-transform: rotate(-1.2deg);
  96. transform: rotate(-1.2deg);
  97. top: 0;
  98. z-index: -2;
  99. }
  100. .ui.stacked.segment {
  101. padding-bottom: 1.7em;
  102. }
  103. .ui.stacked.segment:after,
  104. .ui.stacked.segment:before {
  105. content: '';
  106. position: absolute;
  107. bottom: -3px;
  108. left: 0;
  109. border-top: 1px solid rgba(0,0,0,.1);
  110. background-color: rgba(0,0,0,.02);
  111. width: 100%;
  112. height: 5px;
  113. visibility: visible;
  114. }
  115. .ui.stacked.segment:before {
  116. bottom: 0;
  117. }
  118. .ui.stacked.inverted.segment:after,
  119. .ui.stacked.inverted.segment:before {
  120. background-color: rgba(255,255,255,.1);
  121. border-top: 1px solid rgba(255,255,255,.35);
  122. }
  123. .ui.raised.segment {
  124. -webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,.1);
  125. box-shadow: 0 1px 2px 1px rgba(0,0,0,.1);
  126. }
  127. .ui.disabled.segment {
  128. opacity: .8;
  129. color: #DDD;
  130. }
  131. .ui.basic.segment {
  132. position: relative;
  133. background-color: transparent;
  134. -webkit-box-shadow: none;
  135. box-shadow: none;
  136. border-radius: 0;
  137. }
  138. .ui.basic.segment:first-child {
  139. padding-top: 0;
  140. }
  141. .ui.basic.segment:last-child {
  142. padding-bottom: 0;
  143. }
  144. .ui.fitted.segment {
  145. padding: 0;
  146. }
  147. .ui.blue.segment {
  148. border-top: .2em solid #6ECFF5;
  149. }
  150. .ui.green.segment {
  151. border-top: .2em solid #A1CF64;
  152. }
  153. .ui.red.segment {
  154. border-top: .2em solid #D95C5C;
  155. }
  156. .ui.orange.segment {
  157. border-top: .2em solid #F05940;
  158. }
  159. .ui.purple.segment {
  160. border-top: .2em solid #564F8A;
  161. }
  162. .ui.teal.segment {
  163. border-top: .2em solid #00B5AD;
  164. }
  165. .ui.inverted.black.segment {
  166. background-color: #5C6166!important;
  167. color: #FFF!important;
  168. }
  169. .ui.inverted.blue.segment {
  170. background-color: #6ECFF5!important;
  171. color: #FFF!important;
  172. }
  173. .ui.inverted.green.segment {
  174. background-color: #A1CF64!important;
  175. color: #FFF!important;
  176. }
  177. .ui.inverted.red.segment {
  178. background-color: #D95C5C!important;
  179. color: #FFF!important;
  180. }
  181. .ui.inverted.orange.segment {
  182. background-color: #F05940!important;
  183. color: #FFF!important;
  184. }
  185. .ui.inverted.purple.segment {
  186. background-color: #564F8A!important;
  187. color: #FFF!important;
  188. }
  189. .ui.inverted.teal.segment {
  190. background-color: #00B5AD!important;
  191. color: #FFF!important;
  192. }
  193. .ui.left.aligned.segment {
  194. text-align: left;
  195. }
  196. .ui.right.aligned.segment {
  197. text-align: right;
  198. }
  199. .ui.center.aligned.segment {
  200. text-align: center;
  201. }
  202. .ui.floated.segment,
  203. .ui.left.floated.segment {
  204. float: left;
  205. }
  206. .ui.right.floated.segment {
  207. float: right;
  208. }
  209. .ui.inverted.segment {
  210. border: 0;
  211. -webkit-box-shadow: none;
  212. box-shadow: none;
  213. }
  214. .ui.inverted.segment,
  215. .ui.primary.inverted.segment {
  216. background-color: #222;
  217. color: #FFF;
  218. }
  219. .ui.primary.segment {
  220. background-color: #FFF;
  221. color: #555;
  222. }
  223. .ui.secondary.segment {
  224. background-color: #FAF9FA;
  225. color: #777;
  226. }
  227. .ui.tertiary.segment {
  228. background-color: #EBEBEB;
  229. color: #B0B0B0;
  230. }
  231. .ui.secondary.inverted.segment {
  232. background-color: #555;
  233. background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(255,255,255,.3)));
  234. background-image: -webkit-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);
  235. background-image: -webkit-gradient(linear, top left, bottom left, from(rgba(255,255,255,.3)), to(rgba(255,255,255,.3)));
  236. background-image: -webkit-linear-gradient(rgba(255,255,255,.3) 0, rgba(255,255,255,.3) 100%);
  237. background-image: linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);
  238. color: #FAFAFA;
  239. }
  240. .ui.tertiary.inverted.segment {
  241. background-color: #555;
  242. background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.6)),to(rgba(255,255,255,.6)));
  243. background-image: -webkit-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);
  244. background-image: -webkit-gradient(linear, top left, bottom left, from(rgba(255,255,255,.6)), to(rgba(255,255,255,.6)));
  245. background-image: -webkit-linear-gradient(rgba(255,255,255,.6) 0, rgba(255,255,255,.6) 100%);
  246. background-image: linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);
  247. color: #EEE;
  248. }
  249. .ui.segment.attached {
  250. top: -1px;
  251. bottom: -1px;
  252. border-radius: 0;
  253. margin: 0;
  254. -webkit-box-shadow: 0 0 0 1px #DDD;
  255. box-shadow: 0 0 0 1px #DDD;
  256. }
  257. .ui.top.attached.segment {
  258. top: 0;
  259. bottom: -1px;
  260. margin-top: 1em;
  261. margin-bottom: 0;
  262. border-radius: 5px 5px 0 0;
  263. }
  264. .ui.segment.bottom.attached {
  265. top: -1px;
  266. bottom: 0;
  267. margin-top: 0;
  268. margin-bottom: 1em;
  269. border-radius: 0 0 5px 5px;
  270. }