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.

311 lines
5.6 KiB

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