segment.css 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858
  1. /*!
  2. * # Fomantic-UI - Segment
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Segment
  12. *******************************/
  13. .ui.segment {
  14. position: relative;
  15. background: #FFFFFF;
  16. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  17. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  18. margin: 1rem 0;
  19. padding: 1em 1em;
  20. border-radius: 0.28571429rem;
  21. border: 1px solid rgba(34, 36, 38, 0.15);
  22. }
  23. .ui.segment:first-child {
  24. margin-top: 0;
  25. }
  26. .ui.segment:last-child {
  27. margin-bottom: 0;
  28. }
  29. /* Vertical */
  30. .ui.vertical.segment {
  31. margin: 0;
  32. padding-left: 0;
  33. padding-right: 0;
  34. background: none transparent;
  35. border-radius: 0;
  36. -webkit-box-shadow: none;
  37. box-shadow: none;
  38. border: none;
  39. border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  40. }
  41. .ui.vertical.segment:last-child {
  42. border-bottom: none;
  43. }
  44. /*-------------------
  45. Loose Coupling
  46. --------------------*/
  47. /* Header */
  48. .ui.inverted.segment > .ui.header .sub.header,
  49. .ui.inverted.segment > .ui.header {
  50. color: #FFFFFF;
  51. }
  52. /* Label */
  53. .ui[class*="bottom attached"].segment > [class*="top attached"].label {
  54. border-top-left-radius: 0;
  55. border-top-right-radius: 0;
  56. }
  57. .ui[class*="top attached"].segment > [class*="bottom attached"].label {
  58. border-bottom-left-radius: 0;
  59. border-bottom-right-radius: 0;
  60. }
  61. .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
  62. border-top-left-radius: 0;
  63. border-top-right-radius: 0;
  64. }
  65. .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
  66. border-bottom-left-radius: 0;
  67. border-bottom-right-radius: 0;
  68. }
  69. /* Grid */
  70. .ui.page.grid.segment,
  71. .ui.grid > .row > .ui.segment.column,
  72. .ui.grid > .ui.segment.column {
  73. padding-top: 2em;
  74. padding-bottom: 2em;
  75. }
  76. .ui.grid.segment {
  77. margin: 1rem 0;
  78. border-radius: 0.28571429rem;
  79. }
  80. /* Table */
  81. .ui.basic.table.segment {
  82. background: #FFFFFF;
  83. border: 1px solid rgba(34, 36, 38, 0.15);
  84. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  85. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  86. }
  87. .ui[class*="very basic"].table.segment {
  88. padding: 1em 1em;
  89. }
  90. /* Tab */
  91. .ui.segment.tab:last-child {
  92. margin-bottom: 1rem;
  93. }
  94. /*******************************
  95. Types
  96. *******************************/
  97. /*-------------------
  98. Placeholder
  99. --------------------*/
  100. .ui.placeholder.segment {
  101. display: -webkit-box;
  102. display: -ms-flexbox;
  103. display: flex;
  104. -webkit-box-orient: vertical;
  105. -webkit-box-direction: normal;
  106. -ms-flex-direction: column;
  107. flex-direction: column;
  108. -webkit-box-pack: center;
  109. -ms-flex-pack: center;
  110. justify-content: center;
  111. -webkit-box-align: stretch;
  112. -ms-flex-align: stretch;
  113. align-items: stretch;
  114. max-width: initial;
  115. -webkit-animation: none;
  116. animation: none;
  117. overflow: visible;
  118. padding: 1em 1em;
  119. min-height: 18rem;
  120. background: #F9FAFB;
  121. border-color: rgba(34, 36, 38, 0.15);
  122. -webkit-box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
  123. box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
  124. }
  125. .ui.placeholder.segment .button,
  126. .ui.placeholder.segment textarea {
  127. display: block;
  128. }
  129. .ui.placeholder.segment .field,
  130. .ui.placeholder.segment textarea,
  131. .ui.placeholder.segment > .ui.input,
  132. .ui.placeholder.segment .button {
  133. max-width: 15rem;
  134. margin-left: auto;
  135. margin-right: auto;
  136. }
  137. .ui.placeholder.segment .column .button,
  138. .ui.placeholder.segment .column .field,
  139. .ui.placeholder.segment .column textarea,
  140. .ui.placeholder.segment .column > .ui.input {
  141. max-width: 15rem;
  142. margin-left: auto;
  143. margin-right: auto;
  144. }
  145. .ui.placeholder.segment > .inline {
  146. -ms-flex-item-align: center;
  147. align-self: center;
  148. }
  149. .ui.placeholder.segment > .inline > .button {
  150. display: inline-block;
  151. width: auto;
  152. margin: 0 0.35714286rem 0 0;
  153. }
  154. .ui.placeholder.segment > .inline > .button:last-child {
  155. margin-right: 0;
  156. }
  157. /*-------------------
  158. Piled
  159. --------------------*/
  160. .ui.piled.segments,
  161. .ui.piled.segment {
  162. margin: 3em 0;
  163. -webkit-box-shadow: '';
  164. box-shadow: '';
  165. z-index: auto;
  166. }
  167. .ui.piled.segment:first-child {
  168. margin-top: 0;
  169. }
  170. .ui.piled.segment:last-child {
  171. margin-bottom: 0;
  172. }
  173. .ui.piled.segments:after,
  174. .ui.piled.segments:before,
  175. .ui.piled.segment:after,
  176. .ui.piled.segment:before {
  177. background-color: #FFFFFF;
  178. visibility: visible;
  179. content: '';
  180. display: block;
  181. height: 100%;
  182. left: 0;
  183. position: absolute;
  184. width: 100%;
  185. border: 1px solid rgba(34, 36, 38, 0.15);
  186. -webkit-box-shadow: '';
  187. box-shadow: '';
  188. }
  189. .ui.piled.segments:before,
  190. .ui.piled.segment:before {
  191. -webkit-transform: rotate(-1.2deg);
  192. transform: rotate(-1.2deg);
  193. top: 0;
  194. z-index: -2;
  195. }
  196. .ui.piled.segments:after,
  197. .ui.piled.segment:after {
  198. -webkit-transform: rotate(1.2deg);
  199. transform: rotate(1.2deg);
  200. top: 0;
  201. z-index: -1;
  202. }
  203. /* Piled Attached */
  204. .ui[class*="top attached"].piled.segment {
  205. margin-top: 3em;
  206. margin-bottom: 0;
  207. }
  208. .ui.piled.segment[class*="top attached"]:first-child {
  209. margin-top: 0;
  210. }
  211. .ui.piled.segment[class*="bottom attached"] {
  212. margin-top: 0;
  213. margin-bottom: 3em;
  214. }
  215. .ui.piled.segment[class*="bottom attached"]:last-child {
  216. margin-bottom: 0;
  217. }
  218. /*-------------------
  219. Stacked
  220. --------------------*/
  221. .ui.stacked.segment {
  222. padding-bottom: 1.4em;
  223. }
  224. .ui.stacked.segments:before,
  225. .ui.stacked.segments:after,
  226. .ui.stacked.segment:before,
  227. .ui.stacked.segment:after {
  228. content: '';
  229. position: absolute;
  230. bottom: -3px;
  231. left: 0;
  232. border-top: 1px solid rgba(34, 36, 38, 0.15);
  233. background: rgba(0, 0, 0, 0.03);
  234. width: 100%;
  235. height: 6px;
  236. visibility: visible;
  237. }
  238. .ui.stacked.segments:before,
  239. .ui.stacked.segment:before {
  240. display: none;
  241. }
  242. /* Add additional page */
  243. .ui.tall.stacked.segments:before,
  244. .ui.tall.stacked.segment:before {
  245. display: block;
  246. bottom: 0;
  247. }
  248. /* Inverted */
  249. .ui.stacked.inverted.segments:before,
  250. .ui.stacked.inverted.segments:after,
  251. .ui.stacked.inverted.segment:before,
  252. .ui.stacked.inverted.segment:after {
  253. background-color: rgba(0, 0, 0, 0.03);
  254. border-top: 1px solid rgba(34, 36, 38, 0.35);
  255. }
  256. /*-------------------
  257. Padded
  258. --------------------*/
  259. .ui.padded.segment {
  260. padding: 1.5em;
  261. }
  262. .ui[class*="very padded"].segment {
  263. padding: 3em;
  264. }
  265. /* Padded vertical */
  266. .ui.padded.segment.vertical.segment,
  267. .ui[class*="very padded"].vertical.segment {
  268. padding-left: 0;
  269. padding-right: 0;
  270. }
  271. /*-------------------
  272. Compact
  273. --------------------*/
  274. .ui.compact.segment {
  275. display: table;
  276. }
  277. /* Compact Group */
  278. .ui.compact.segments {
  279. display: -webkit-inline-box;
  280. display: -ms-inline-flexbox;
  281. display: inline-flex;
  282. }
  283. .ui.compact.segments .segment,
  284. .ui.segments .compact.segment {
  285. display: block;
  286. -webkit-box-flex: 0;
  287. -ms-flex: 0 1 auto;
  288. flex: 0 1 auto;
  289. }
  290. /*-------------------
  291. Circular
  292. --------------------*/
  293. .ui.circular.segment {
  294. display: table-cell;
  295. padding: 2em;
  296. text-align: center;
  297. vertical-align: middle;
  298. border-radius: 500em;
  299. }
  300. /*-------------------
  301. Raised
  302. --------------------*/
  303. .ui.raised.raised.segments,
  304. .ui.raised.raised.segment {
  305. -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  306. box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  307. }
  308. /*******************************
  309. Groups
  310. *******************************/
  311. /* Group */
  312. .ui.segments {
  313. -webkit-box-orient: vertical;
  314. -webkit-box-direction: normal;
  315. -ms-flex-direction: column;
  316. flex-direction: column;
  317. position: relative;
  318. margin: 1rem 0;
  319. border: 1px solid rgba(34, 36, 38, 0.15);
  320. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  321. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  322. border-radius: 0.28571429rem;
  323. }
  324. .ui.segments:first-child {
  325. margin-top: 0;
  326. }
  327. .ui.segments:last-child {
  328. margin-bottom: 0;
  329. }
  330. /* Nested Segment */
  331. .ui.segments > .segment {
  332. top: 0;
  333. bottom: 0;
  334. border-radius: 0;
  335. margin: 0;
  336. width: auto;
  337. -webkit-box-shadow: none;
  338. box-shadow: none;
  339. border: none;
  340. border-top: 1px solid rgba(34, 36, 38, 0.15);
  341. }
  342. .ui.segments:not(.horizontal) > .segment:first-child {
  343. top: 0;
  344. bottom: 0;
  345. border-top: none;
  346. margin-top: 0;
  347. margin-bottom: 0;
  348. border-radius: 0.28571429rem 0.28571429rem 0 0;
  349. }
  350. /* Bottom */
  351. .ui.segments:not(.horizontal) > .segment:last-child {
  352. top: 0;
  353. bottom: 0;
  354. margin-top: 0;
  355. margin-bottom: 0;
  356. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
  357. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
  358. border-radius: 0 0 0.28571429rem 0.28571429rem;
  359. }
  360. /* Only */
  361. .ui.segments:not(.horizontal) > .segment:only-child {
  362. border-radius: 0.28571429rem;
  363. }
  364. /* Nested Group */
  365. .ui.segments > .ui.segments {
  366. border-top: 1px solid rgba(34, 36, 38, 0.15);
  367. margin: 1rem 1rem;
  368. }
  369. .ui.segments > .segments:first-child {
  370. border-top: none;
  371. }
  372. .ui.segments > .segment + .segments:not(.horizontal) {
  373. margin-top: 0;
  374. }
  375. /* Horizontal Group */
  376. .ui.horizontal.segments {
  377. display: -webkit-box;
  378. display: -ms-flexbox;
  379. display: flex;
  380. -webkit-box-orient: horizontal;
  381. -webkit-box-direction: normal;
  382. -ms-flex-direction: row;
  383. flex-direction: row;
  384. background-color: transparent;
  385. padding: 0;
  386. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  387. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  388. margin: 1rem 0;
  389. border-radius: 0.28571429rem;
  390. border: 1px solid rgba(34, 36, 38, 0.15);
  391. }
  392. .ui.stackable.horizontal.segments {
  393. -ms-flex-wrap: wrap;
  394. flex-wrap: wrap;
  395. }
  396. /* Nested Horizontal Group */
  397. .ui.segments > .horizontal.segments {
  398. margin: 0;
  399. background-color: transparent;
  400. border-radius: 0;
  401. border: none;
  402. -webkit-box-shadow: none;
  403. box-shadow: none;
  404. border-top: 1px solid rgba(34, 36, 38, 0.15);
  405. }
  406. /* Horizontal Segment */
  407. .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
  408. -webkit-box-flex: 1;
  409. flex: 1 1 auto;
  410. -ms-flex: 1 1 0;
  411. /* Solves #2550 MS Flex */
  412. }
  413. .ui.horizontal.segments > .segment {
  414. margin: 0;
  415. min-width: 0;
  416. border-radius: 0;
  417. border: none;
  418. -webkit-box-shadow: none;
  419. box-shadow: none;
  420. border-left: 1px solid rgba(34, 36, 38, 0.15);
  421. }
  422. /* Border Fixes */
  423. .ui.segments > .horizontal.segments:first-child {
  424. border-top: none;
  425. }
  426. .ui.horizontal.segments:not(.stackable) > .segment:first-child {
  427. border-left: none;
  428. }
  429. /*******************************
  430. States
  431. *******************************/
  432. /*--------------
  433. Disabled
  434. ---------------*/
  435. .ui.disabled.segment {
  436. opacity: 0.45;
  437. color: rgba(40, 40, 40, 0.3);
  438. }
  439. /*--------------
  440. Loading
  441. ---------------*/
  442. .ui.loading.segment {
  443. position: relative;
  444. cursor: default;
  445. pointer-events: none;
  446. text-shadow: none !important;
  447. -webkit-transition: all 0s linear;
  448. transition: all 0s linear;
  449. }
  450. .ui.loading.segment:before {
  451. position: absolute;
  452. content: '';
  453. top: 0;
  454. left: 0;
  455. background: rgba(255, 255, 255, 0.8);
  456. width: 100%;
  457. height: 100%;
  458. border-radius: 0.28571429rem;
  459. z-index: 100;
  460. }
  461. .ui.loading.segment:after {
  462. position: absolute;
  463. content: '';
  464. top: 50%;
  465. left: 50%;
  466. margin: -1.5em 0 0 -1.5em;
  467. width: 3em;
  468. height: 3em;
  469. -webkit-animation: loader 0.6s infinite linear;
  470. animation: loader 0.6s infinite linear;
  471. border: 0.2em solid #767676;
  472. border-radius: 500rem;
  473. -webkit-box-shadow: 0 0 0 1px transparent;
  474. box-shadow: 0 0 0 1px transparent;
  475. visibility: visible;
  476. z-index: 101;
  477. }
  478. /*******************************
  479. Variations
  480. *******************************/
  481. /*-------------------
  482. Basic
  483. --------------------*/
  484. .ui.basic.segment,
  485. .ui.segments .ui.basic.segment,
  486. .ui.basic.segments {
  487. background: none transparent;
  488. -webkit-box-shadow: none;
  489. box-shadow: none;
  490. border: none;
  491. border-radius: 0;
  492. }
  493. /*-------------------
  494. Clearing
  495. --------------------*/
  496. .ui.clearing.segment:after {
  497. content: "";
  498. display: block;
  499. clear: both;
  500. }
  501. /*-------------------
  502. Colors
  503. --------------------*/
  504. .ui.red.segment.segment.segment.segment.segment:not(.inverted) {
  505. border-top: 2px solid #DB2828;
  506. }
  507. .ui.inverted.red.segment.segment.segment.segment.segment {
  508. background-color: #DB2828;
  509. color: #FFFFFF;
  510. }
  511. .ui.orange.segment.segment.segment.segment.segment:not(.inverted) {
  512. border-top: 2px solid #F2711C;
  513. }
  514. .ui.inverted.orange.segment.segment.segment.segment.segment {
  515. background-color: #F2711C;
  516. color: #FFFFFF;
  517. }
  518. .ui.yellow.segment.segment.segment.segment.segment:not(.inverted) {
  519. border-top: 2px solid #FBBD08;
  520. }
  521. .ui.inverted.yellow.segment.segment.segment.segment.segment {
  522. background-color: #FBBD08;
  523. color: #FFFFFF;
  524. }
  525. .ui.olive.segment.segment.segment.segment.segment:not(.inverted) {
  526. border-top: 2px solid #B5CC18;
  527. }
  528. .ui.inverted.olive.segment.segment.segment.segment.segment {
  529. background-color: #B5CC18;
  530. color: #FFFFFF;
  531. }
  532. .ui.green.segment.segment.segment.segment.segment:not(.inverted) {
  533. border-top: 2px solid #21BA45;
  534. }
  535. .ui.inverted.green.segment.segment.segment.segment.segment {
  536. background-color: #21BA45;
  537. color: #FFFFFF;
  538. }
  539. .ui.teal.segment.segment.segment.segment.segment:not(.inverted) {
  540. border-top: 2px solid #00B5AD;
  541. }
  542. .ui.inverted.teal.segment.segment.segment.segment.segment {
  543. background-color: #00B5AD;
  544. color: #FFFFFF;
  545. }
  546. .ui.blue.segment.segment.segment.segment.segment:not(.inverted) {
  547. border-top: 2px solid #2185D0;
  548. }
  549. .ui.inverted.blue.segment.segment.segment.segment.segment {
  550. background-color: #2185D0;
  551. color: #FFFFFF;
  552. }
  553. .ui.violet.segment.segment.segment.segment.segment:not(.inverted) {
  554. border-top: 2px solid #6435C9;
  555. }
  556. .ui.inverted.violet.segment.segment.segment.segment.segment {
  557. background-color: #6435C9;
  558. color: #FFFFFF;
  559. }
  560. .ui.purple.segment.segment.segment.segment.segment:not(.inverted) {
  561. border-top: 2px solid #A333C8;
  562. }
  563. .ui.inverted.purple.segment.segment.segment.segment.segment {
  564. background-color: #A333C8;
  565. color: #FFFFFF;
  566. }
  567. .ui.pink.segment.segment.segment.segment.segment:not(.inverted) {
  568. border-top: 2px solid #E03997;
  569. }
  570. .ui.inverted.pink.segment.segment.segment.segment.segment {
  571. background-color: #E03997;
  572. color: #FFFFFF;
  573. }
  574. .ui.brown.segment.segment.segment.segment.segment:not(.inverted) {
  575. border-top: 2px solid #A5673F;
  576. }
  577. .ui.inverted.brown.segment.segment.segment.segment.segment {
  578. background-color: #A5673F;
  579. color: #FFFFFF;
  580. }
  581. .ui.grey.segment.segment.segment.segment.segment:not(.inverted) {
  582. border-top: 2px solid #767676;
  583. }
  584. .ui.inverted.grey.segment.segment.segment.segment.segment {
  585. background-color: #767676;
  586. color: #FFFFFF;
  587. }
  588. .ui.black.segment.segment.segment.segment.segment:not(.inverted) {
  589. border-top: 2px solid #1B1C1D;
  590. }
  591. .ui.inverted.black.segment.segment.segment.segment.segment {
  592. background-color: #1B1C1D;
  593. color: #FFFFFF;
  594. }
  595. /*-------------------
  596. Aligned
  597. --------------------*/
  598. .ui[class*="left aligned"].segment {
  599. text-align: left;
  600. }
  601. .ui[class*="right aligned"].segment {
  602. text-align: right;
  603. }
  604. .ui[class*="center aligned"].segment {
  605. text-align: center;
  606. }
  607. /*-------------------
  608. Floated
  609. --------------------*/
  610. .ui.floated.segment,
  611. .ui[class*="left floated"].segment {
  612. float: left;
  613. margin-right: 1em;
  614. }
  615. .ui[class*="right floated"].segment {
  616. float: right;
  617. margin-left: 1em;
  618. }
  619. /*-------------------
  620. Inverted
  621. --------------------*/
  622. .ui.inverted.segment {
  623. border: none;
  624. -webkit-box-shadow: none;
  625. box-shadow: none;
  626. }
  627. .ui.inverted.segment,
  628. .ui.primary.inverted.segment {
  629. background: #1B1C1D;
  630. color: rgba(255, 255, 255, 0.9);
  631. }
  632. /* Nested */
  633. .ui.inverted.segment .segment {
  634. color: rgba(0, 0, 0, 0.87);
  635. }
  636. .ui.inverted.segment .inverted.segment {
  637. color: rgba(255, 255, 255, 0.9);
  638. }
  639. /* Attached */
  640. .ui.inverted.attached.segment {
  641. border-color: #555555;
  642. }
  643. /* Loading */
  644. .ui.inverted.loading.segment {
  645. color: #FFFFFF;
  646. }
  647. .ui.inverted.loading.segment:before {
  648. background: rgba(0, 0, 0, 0.85);
  649. }
  650. /*-------------------
  651. Emphasis
  652. --------------------*/
  653. /* Secondary */
  654. .ui.secondary.segment {
  655. background: #F3F4F5;
  656. color: rgba(0, 0, 0, 0.6);
  657. }
  658. .ui.secondary.inverted.segment {
  659. background: #4c4f52 -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0.2)));
  660. background: #4c4f52 -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 100%);
  661. background: #4c4f52 linear-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 100%);
  662. color: rgba(255, 255, 255, 0.8);
  663. }
  664. /* Tertiary */
  665. .ui.tertiary.segment {
  666. background: #DCDDDE;
  667. color: rgba(0, 0, 0, 0.6);
  668. }
  669. .ui.tertiary.inverted.segment {
  670. background: #717579 -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.35)), to(rgba(255, 255, 255, 0.35)));
  671. background: #717579 -webkit-linear-gradient(rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0.35) 100%);
  672. background: #717579 linear-gradient(rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0.35) 100%);
  673. color: rgba(255, 255, 255, 0.8);
  674. }
  675. /*-------------------
  676. Attached
  677. --------------------*/
  678. /* Middle */
  679. .ui.attached.segment {
  680. top: 0;
  681. bottom: 0;
  682. border-radius: 0;
  683. margin: 0 -1px;
  684. width: calc(100% + 2px);
  685. max-width: calc(100% + 2px);
  686. -webkit-box-shadow: none;
  687. box-shadow: none;
  688. border: 1px solid #D4D4D5;
  689. }
  690. .ui.attached:not(.message) + .ui.attached.segment:not(.top) {
  691. border-top: none;
  692. }
  693. /* Top */
  694. .ui[class*="top attached"].segment {
  695. bottom: 0;
  696. margin-bottom: 0;
  697. top: 0;
  698. margin-top: 1rem;
  699. border-radius: 0.28571429rem 0.28571429rem 0 0;
  700. }
  701. .ui.segment[class*="top attached"]:first-child {
  702. margin-top: 0;
  703. }
  704. /* Bottom */
  705. .ui.segment[class*="bottom attached"] {
  706. bottom: 0;
  707. margin-top: 0;
  708. top: 0;
  709. margin-bottom: 1rem;
  710. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
  711. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
  712. border-radius: 0 0 0.28571429rem 0.28571429rem;
  713. }
  714. .ui.segment[class*="bottom attached"]:last-child {
  715. margin-bottom: 1rem;
  716. }
  717. /*--------------
  718. Fitted
  719. ---------------*/
  720. .ui.fitted.segment:not(.horizontally) {
  721. padding-top: 0;
  722. padding-bottom: 0;
  723. }
  724. .ui.fitted.segment:not(.vertically) {
  725. padding-left: 0;
  726. padding-right: 0;
  727. }
  728. /*-------------------
  729. Size
  730. --------------------*/
  731. .ui.segments .segment,
  732. .ui.segment {
  733. font-size: 1rem;
  734. }
  735. .ui.mini.segments .segment,
  736. .ui.mini.segment {
  737. font-size: 0.78571429rem;
  738. }
  739. .ui.tiny.segments .segment,
  740. .ui.tiny.segment {
  741. font-size: 0.85714286rem;
  742. }
  743. .ui.small.segments .segment,
  744. .ui.small.segment {
  745. font-size: 0.92857143rem;
  746. }
  747. .ui.large.segments .segment,
  748. .ui.large.segment {
  749. font-size: 1.14285714rem;
  750. }
  751. .ui.big.segments .segment,
  752. .ui.big.segment {
  753. font-size: 1.28571429rem;
  754. }
  755. .ui.huge.segments .segment,
  756. .ui.huge.segment {
  757. font-size: 1.42857143rem;
  758. }
  759. .ui.massive.segments .segment,
  760. .ui.massive.segment {
  761. font-size: 1.71428571rem;
  762. }
  763. /*******************************
  764. Theme Overrides
  765. *******************************/
  766. /*******************************
  767. Site Overrides
  768. *******************************/